Blog

I’ve been searching for some time now, to find the best Sublime Text plugins which help me write JavaScript code. And it seems like I’ve found a good combination.

JavaScript Ultimate

JavaScript Ultimate is the heart of my setup. It comes with an outstanding autocomplete for functions and variables. This plugin is an extended language definition, so it replaces the JavaScript language definition comming with sublime.

Get the Plugin

Go To Definition

You can easily jump to a definition of a function or anything else within Sublime Text, by pressing cmd+r and starting to type. Or you can choose an entry from the list.

Go To Definition makes it even more simpler. Just put your cursor on a function-call and press alt+g. The plugin will now jump to the related function/method. The best thing is, this works cross-file.

Get the Plugin

JavaScript Snippets

The name should speak for itself. It is a collection of usefull JavaScript snippets. Very helpful.

Get the Plugin

Alignment

I like my code to be in shape. So Alignment is mandatory for me. Marked sections will be aligned, like so:

{
hallo: welt,
hallihallo: universum
}

will become:

    {
        hallo     : welt,
        hallihallo: universum
    }

Get the Plugin

Bracket Highlighter

The Bracket Highlighter helps you get a better overview. It works with a lot of languages and shows code blocks next to the line numbers.

Get the Plugin

Sublime Linter

Sublime Linter by itself doesn’t do a lot. You’ll need some other plugins. I use JSHint and Annotations.

If you’re writing JavaScript code, you should know JSHint. This linter shows errors and warnings right when I make them. You can configure JSHint being more or less strict. In case of JSHint you’ll need the binaries, which you have to install by yourself, because the plugin comes without them.

Annotation helps me getting an overview of all my TODOs and stuff like that. It marks comments containing certain words, which you can freely define. Those can be marked as a warning or error. And you can even get a cross-file-report, if you like.

Get the Plugin
Plugins for Sublime Linter

Conclusion

I am quite happy with my current setup. Especially with the autocomplete. Try it out and let me know, if you know other plugins I have to look at.

I’ve some more plugins doing some work for me, which you can find in my older posts.

Now you’re looking at me, like I’ve made you a weird offer, right? If you’re like many others, Monday is probably not your favorite day of the week. But this might change.

At least a little bit.
Let’s be honest, it’s all about starting your day the right way, isn’t it? So, let’s try to improve our start into the week. Introducing my new newsletter: "Monday".

Every Monday you’ll get a nice, friendly newsletter full of interesting, positive stuff about what we call the world wide web.

Read about what was and is going on. Get some interesting articles about web dev, web design and things around. And if I find something really interesting apart from that topics, that stuff may be included, too.

Along with the written word, you’ll even get a Monday morning soundtrack, which will grow from week to week and hopefully put a smile on your face.

So let your Monday morning start positive and subscribe to my newsletter. One mail a week, that’s it. No hidden fees, no spam, no surprising buy-this-mails. Just some nice, friendly content, making you start the new week in a good way.

If you develop websites or software, you now that procedures and code fragments may be reused from time to time. As a developer you should always try to avoid those repetitions.

The first step is independent of what editor you use, or what kind of thing you develop. The first step should always be, to rethink your code. If you repeat parts of your code over and over, you should always ask yourself if that part shouldn't be better put in a method or function.

The more repetitions you have, the more inflated your code is, the more difficult it is to maintain it. If you then have to change something, you may need to this not only one time but again and again. And if you miss just one part, that may have uncertain consequences.

Well, okay… Sometimes you just repeat yourself. If you want to or not. For example when you start a new project. You need that html5 template, that javascript function or your personal css-template.

Because of this, the smart developer has a collection of those templates called snippets.

Snippets

You can organize your snippets in various ways. As a simple text file anywhere on your hard drive or dropbox folder. Using an application doing the work for you. And Sublime Text by itself has a snippet functionality included.

Sublime Text Snippets

Those snippets have a huge advantage, you can set shortcuts or use autocomplete to insert them. And you can use placeholders within snippets which are reachable via the tab key.

The big disadvantage: These snippets are stored in your Sublime Text user directory. You don't really have an overview. And it's hard work to sync them.

But I want my snippets to be available anywhere and regardless of what editor I use.

GitHub Snippets

GitHub has an own system for snippets, called Gists. If you have a GitHub account you can create and manage gists.

After trying several methods I sticked with Gists.

The biggest advantage: I can use them anywhere. I do only need a browser and access to the web. Simply login to GitHub and here they are.

And beside my own Gists I can also have a look at public Gists of other users. So if I need a snippet to solve a certain problem, I can just perform a search and (may) get a more or less long list of solutions. As known from GitHub I can star Gists or fork them to create my own version.

If I don't want to share mit snippet with others, I can create a private one. Nobody will be able to access it.

Sublime Text Gists

As we know, there is a Sublime Text Plugin for every possible scenario. Yes, you heard right! For EVERY scenario, don't argue with me! ;)

So there is a plugin for Gists: https://github.com/condemil/Gist

You need GitHub account (of course) otherwise you cannot create Gists. To use the plugin, you have to create an Access Token which is described in the README of the plugin step by step.

Setup

After you created your Token, you just have to add it to your Sublime Text Settings. Just go to: Sublime Text > Preferences > Package Settings > Gist > Settings User. And insert your Token:

{
    "token": "1234567890"
}

Using the plugin

You can use the plugin sublimelike via shortcut or cmd+shift+p. Just enter gist and you'll get a list of functions. Here you can create Gists (public and private), add Gists as new file or insert them into the currently open file.

If you choose Insert Gist you'll see a list of you own Gists and those you stared. You can limit the list by starting to type and/or you can navigation with the arrow-keys.

Creation of Gists

You can create Gists right from Sublime Text or via web. I prefer sublime text.

I always try to name my Gists clearly. For that I use a simple syntax: I start with the code language, like this:
[html], [sh], [scss] that way I can quickly see the kind of code and limit my search to a certain language.

Share

Sharing it great! Because of that, most of my Gists are public. Maybe you have some interesting Gists on your own. Post a link in the comments if you like or share them via Twitter.

Sublime Text offers, beside numerous plugins, a lot of themes, to customize the editor as you wish. These are my top3 favorite themes for Sublime Text 3.

Top 1: Cobalt 2

For me, this is the far best theme for Sublime Text. Beautiful colors which help you, capture the source code fast. The sidebar icons are really beautiful and are making it easy to determine file types pretty fast. The hightlight color is a rich yellow, a great color for the ui to focus fast.

By the way: There are also Cobalt 2 themes for Alfred and iTerm!

Get the theme

Top 2: PreDawn

I used PreDawn a long time, until I a stumbled upon Cobalt 2. The highlight color is a bright orange. The colors are chosen very well and make it easy to scan the code. Unfortunately the last version I used did not have a lot of sidebar icons.

Pro: There are a lot configuration parameters to customize that theme, like preferences for things like tab sizes.

Get the theme

Top 3: Spacegray

Spacegray is, as the name may say, not that colorful as the other two. But the color choice is great, too. The theme as two modes you can choose from, dark and light. Unfortunately there are no sidebar icons. But beside that it is clear and good to use.

Get the theme

Hint, hint

If you just want to try a theme and don't want to download it for that purpose, you should have a look at ColorSublime. The plugin works like the package manager. The great thing is, you can browse through the theme list in sublime and see a live theme preview with your current code open.

Get the plugin

All images are from the repositories of the themes

In Germany there is that cheeky term „Internetausdrucker“ - internet printer - which is particularly addressed to politicians. But shouldn't we take care of those printing people?

That's exactly what I thought about, when I was looking at my site some time ago. To be honest, I did not care if my page is looking good when printed. So I just tried it and had a look at the print preview.

It did not look very well. Many elements of the page, which are unimportant for print, would have been printed. For example the sidebar or the comments.

Hide unimportant stuff

So I decided to create a print stylesheet and started hiding all the things which are not usefull on a print. That's the sidebar, the comments and the navigation. The print view should be the raw text only.
As a foundation for my new css, I used my css for the mobile breakpoint which reduces the site to a minimal view. And I additionally hided the navigation.

To add a stylesheet for printing, you just need to add something like this within <head></head>:

<link href="print.css" rel="stylesheet" media="print">

Fonts

Looking at the raw text, I immediately saw, I had to reduce the font size. So I set it to 12pt and added some paddings and margins.

Links on the page

You cannot print links. I could add the full links at the bottom of each article and everybody who is printing my text could type them in, if needed. But that is no good solution.
So what if somebody takes a look at the printed article some days after printing (or gives the text to a friend) and wants to visit a link?

Finaly QR codes have a right to exist!

In print view I add a QR code below every article. So if someone prints one of my articles, he/she/it just needs to scan the code and will be redirected to the original post.

To create the QR code, I use a JavaScript library, which just needs an URL and (in my case) a size of the code-image.

Opinions?

I am curious what you think about that topic. Did you optimize you website for printing? Tell me in the comments or send me a message on twitter.