Coding Fonts is a fabulous resource from CSS Tricks for selecting alternative fonts for your code editor.
While a few of the fonts are commercial, many are open source and/or free.
In Sublime Text 3, changing the font is as simple as downloading and installing the font then opening Preferences > Settings then adding the following line of code to the right-hand pane (within the file ‘Preferences.sublime-settings — User’):
A couple of weeks ago I was setting up a new laptop and kept putting off installing Sublime Text (my code editor of choice) because I knew that it would also involve about fifteen minutes patiently working through my curated list of packages (add-ons / plugins), installing each one by one.
There’s got to be a simpler way, I suddenly thought. Sublime Text saves me so much time doing other stuff automatically, surely they’ve thought about this too.
Minimal theme, compatible with both Sublime Text 2 and 3.
My favourite workspace theme for Sublime Text is currently Minimal Dark. With its dark sidebar I find it significantly less distracting than the default theme.
Yesterday I came across a really useful application for web development which has already sped up my workflow when needing to look for documentation: Zeal.
The efficiencies come about mostly because instead of having to open up a new browser tab, then either search or navigate to any documentation bookmarks you may have saved, you can instead search (or browse) within the official documentation which has been downloaded to Zeal.
Download documentation sets
Inspired by the Mac-only application Dash, Zeal is a simple offline API documentation browser.
In other words, select the languages you want documentation for, click download and it’s all available in one easy-to-search location.
Select which documentation sets (docsets) you want and click download.
You can either browse the documentation, or simply search.
By default searching returns results from all documentation downloaded, but you can also prefix your search terms with the name of a particular language followed by a colon should you wish to limit the search to only that language or framework, e.g. wordpress: get_header.
In order to install it you first have to unzip the application files to your C:\Program Files directory, or C:\Program Files (x86)\ for Windows 64-bit, and create your own shortcut—there isn’t an automatic installer.
Sublime Text integration
Where I’m finding it particularly useful is within my coding editor Sublime Text, using the Zeal Sublime Text package (available for both Sublime Text 2 and 3) which allows you to search the documentation from within Sublime Text, without lifting your fingers from the keyboard.
I found that to configure it I had to first install the package (using Will Bond’s excellent package control), then run it by pressing Shift+F1 which returns an error, and then locate the Zeal.sublime-settings file (via Preferences > Browse Packages…) and update the “zeal_command” parameter to wherever you unzipped the zeal.exe file, which for me looks like:
Or press Shift+F1 to open the Zeal search box to type in my search term.
As an example, I’ve just highlighted padding-left in my CSS code and pressed F1.
Highlight a keyword press F1 and Sublime Text sends that plus its context (a CSS file) to Zeal
You will notice that the Sublime Text plugin has also respected the search term’s context, within a CSS file, and passed that too as an argument.
I’m really impressed and thoroughly recommend you check it out if you are involved in any kind of coding. Both Dash and Zeal share the same documentation sets. There are a lot! And it can also be integrated into a lot of editors, not just Sublime Text, such as Coda, TextMate, Emacs, Vim, Eclipse, and PhpStorm.
Being involved in web design I use the Chrome web developer tools all the time for debugging JavaScript, identifying HTML classes and tweaking CSS. It looks like this:
Google Chrome developer tools
But as you can see from the screenshot above, the default view is rather dull: white background, uninspiring syntax highlighting. It’s a shame that you can’t match the Chrome developer tools code panel with my text editor of choice.
User StyleSheets
Well, it turns out you can! Chrome provides a “User StyleSheets” directory into what you can drop a Custom.css file.
A number of people have also done the hard work for us and made available ready-to-use CSS files for various themes. These are my two favourite dark themes: