Speeding up your workflow as a web developer

If you’re like me and are always looking for the fastest and most efficient ways of doing things, the following tools may be of interest to you for accomplishing just that.

1. Emmet

This one is a must — without a doubt one of the most essential tools if you’re a web dev. It’s a powerful plugin for many text editors and will greatly speed up your workflow in HTML and CSS. Here is a cheat-sheet with all of the shortcuts: https://docs.emmet.io/cheat-sheet/

2. Sublime Snippets

If the snippets provided by Emmet are not enough for you, create your own! The following YouTube video gives an awesome example.

3. Sublime Key Bindings

These are just hotkeys you can configure for regularly used actions.

To configure your own: (on Windows) Preferences > Key Bindings

Below are just a couple which I found to be useful. The first two just swap the default key bindings of paste and paste and indent. The last one just adds a hotkey for the reindent command which (surprisingly) doesn’t have one already.

4. Sublime Macros

Sublime can record your key strokes and play them back. By recording and saving a macro, and then binding it to a hotkey, you can cut down on some keyboard inputs.

5. Bash Scripts

I’m sure you could go crazy with these but here’s a basic one I just wrote to help quickly initialize a website. All it does is create the root, images and styles folders, as well as the index.html and style.css files.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.