Toolkit for a Frontend Developer


Works For Me is an open collection of great developer toolkits. One of them you are about to read. Don’t forget to check the rest and contribute your own. Enjoy!

Frontend development

Core toolkit which helps me be productive and creative.

My laptop is MacBook Pro (Retina, 15-inch, Mid 2015) with 2,5 GHz Intel Core i7 and 16GB of RAM.

WebStorm

I switched from Sublime Text and completely happy with WebStorm’s performance. Not to mention that the set of features is way better.

Refactoring feature saves me a lot of time every single day. Autocompletion is great, especially with statically-typed languages.

One of my must-have plugins is IdeaVim. I’m not a power vim-user but navigation and window-management with vim-shortcuts are much faster and, somehow, intuitive for me).

I work all the time in the “Distraction Free” mode, so I see only my code and everything else is called with shortcuts.

My font for a couple of years already is Source Code Pro

Bash-it

Set of plugins and completions for your bash shell. Does not make your shell as fancy as would ZSH or Fish do, but brings it pretty close. As a bonus, you won’t have any compatibility problems with any cli tools, which is the case sometimes with other shells.

My bash-it, along with other configs, you can find in my .dotfiles

iTerm 2

My second most used tool while working.

It has two features which stop me from switching to default macOS Terminal app:

  • Select to copy — really handy to copy anything from terminal by just selecting it
  • Cmd+click on a link to open it — very common case when developing web-applications

I have separate tab for each project and every tab has multiple splits.

diff-so-fancy

A little tool which makes your git-diffs much more legible.

HTTPie

Another CLI tool, user-friendly curl-replacement. I just can’t help to forget curl flags every time I use it 😁

Sip

Simple global color-picker which sits in the menu-bar.

Sketch

Time after time I make mockups for my pet-projects and, at least for web-designs, Sketch fits really well.

Docker

I like very much the idea of keeping development environment in some kind of self-contained boxes, so no matter how badly I mess up my system, projects are safe and ready to run.

Previously it was Vagrant, now it’s container, as they are much more lightweight.

Also, I put into containers software which has dependencies I don’t want to be in my host OS. E.g. something needs Python or Ruby or whatever — it goes to container, it’s the nice way to keep your system clean.

Consuming information

That mostly happens on my elderly iPhone 5S.

Reeder, Feedly

These two work in pair, Feedly manages RSS-subscriptions, and Reeder has really good UI for reading feeds (reading something directly in Feedly is a torture btw, don’t do that)

Below, my most interesting subscriptions.

English:

Russian:

Also I’m subscribe to my friends movie rates, IMDB has RSS build-in, really useful trick.

Instapaper

I have it installed on a phone and as an extension in a browser, very handy to save something for later reading with just one click.

Tweetbot

Besides some entertaining, Twitter for me is a source of programming-related articles which go to Instapaper. Tweetbot so far is the best client, at least because it shows everything in natural chronological order.

Podcasts app

One of the main sources of information for me, not just technical, but in general, and some entertainment of course. I use native iOS Podcasts app. Podcasts are mostly in Russian but also few in English.

English:

Russian:

Telegram

Despite it’s a messenger, it has so-called Channels — thematic feeds, where people post short (mainly) news or thoughts, not cluttered like Twitter and one channel is dedicated to some specific topic.

You can find services which generate RSS-feed out of a channel, so you can read them in one place with your usual subscriptions.

Organizing myself

Notes

For me it’s always one note for one project, like a workspace, where I collect all todos, URLs, random notes with ideas, etc. Each project has a unique structure, which is very useful when it comes to a creative process of shaping some idea.

1Password

To store not only passwords but also documents, bank cards information and secret notes, all is encrypted and stored locally.


This story is a part of GitHub project called Works For Me, where developers share their toolkits. Check it out, it has more great stories. And, of course, take some time and share what you are using.

Thank you!