Updated Feb 2020

My The Ultimate Atom Editor Setup (+for JS/React) post is pretty popular, but not long ago I migrated to VSCode.

Why? Speed, stability and TypeScript.

Overall, I’m very happy with the switch. As with Atom, for me, out-of-the-box the editor has a lot of missing functionality. However, it is covered by extensions.

I divided this list into Utilities and HTML/CSS/JS/React specific extensions, sorted alphabetically.

Utilities

Bracket Pair Colorizer

This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.

A list of really awesome tools I use every day to increase my productivity. Part 1 / Part 2.

1. Octotree (github.com/buunguyen/octotree) [Browser extension]

Browser extension (Chrome, Firefox, Opera and Safari) to show a code tree on GitHub. Awesome for exploring project source without having to pull every single repository to your machine.

2. OctoLinker (octolinker.github.io) [Browser extension]

Navigate through projects on GitHub.com efficiently with the OctoLinker browser extension. Great for viewing JS/Node/Ruby/Python sources.

After years of perfecting my Sublime Text setup, I’ve decided to give Atom a chance. It took a couple of months, and I’m very proud of the setup I got. I feel super productive.

I divided this list into Utilities and JS/React specific packages. Default keybindings are also mentioned.

TL;DR — A script to install all packages is at the bottom of this article.

Utilities

atom-beautify

Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom. ⌃+⌥+B

prettier-atom

Format your JavaScript using Prettier. Comes with powerful optional ESlint integration. (Recommended by Dan Abramov…

A bunch of keyboard shortcuts and configuration for macOS I use extensively.

⌘ = Command | ⌥ = Option/Alt | ⇧ = Shift | ⌃ = Control

1. ⌃+fn+F7 — hit this once, to globally enable Tab key focus on all controls in dialogs/preferences screens. See the state of this setting under System Preferences > Keyboard > Shortcuts.
2. Enable the following with ⌃+fn+F1:
   - ⌃+fn+F2 to focus on menu bar
   - ⌃+fn+F3 to focus on the dock
   - ⌃+fn+F8 to focus on menu bar icons
   after focusing either, use the keyboard to navigate. …

MobX/Redux’s Provider must get only a single child because it only renders this.props.children, and React doesn’t handle multiple objects returned from render.

DevTools (MobX/Redux) are usually rendered at the top level component, but in case that top level component renders a router, it needs another element (e.g. div) to wrap everything. This is not always wanted.

However, using a portal removes the need for the extra div:

A Portal is a technique to render a React tree under some DOM element outside of the current one (where ReactDOM.render is), while maintaining the context. That DOM element can be anywhere on document. It’s mostly useful to render a lightbox/tooltip that attaches to the document.body. It is done by the ReactDOM.unstable_renderSubtreeIntoContainer function.

My personal experience with web development, catching up with tools, libraries, frameworks, and fad fashions includes many list items. Each year introduced “the next big thing” and I got addicted to trying and adopting technologies. And yet, I try not to forget to build things in between.

1999

OS: Windows ’98 / Editor: Notepad, Front Page Express / Browser: IE5 / Front End: HTML 4/DHTML, Nested Tables / Back End: CGI, Perl, SSI

2000

Editor: EditPlus / Browser: IE5.5 / Front End: CSS, JavaScript, FrontPage 2000 / Back End: ASP 3 VBScript, Access DB

2001

OS: Windows XP / Front End: Flash, ActionScript

2002

…

A list of really awesome tools I use every day to increase my productivity.
Part 1 is here

Choosy (choosyosx.com) [OS X]

There are too many browsers, and yet, I use each one for different purpose. Safari and Chrome for leisure and reading, Chrome Canary for development, Firefox for testing. I realized I pass links around too much, especially when I open a link from emails/slack/text messages and it opens in my default browser but I wanted to open it in another. Choosy is exactly that tool, it lets you choose which browser will open a link, essentially by becoming the default browser.

Spectacle (spectacleapp.com) [OS X]

A…

A list of really awesome tools I use every day to increase my productivity.

Kifi (kifi.com)

Update: Kifi shut down, but Refind is a very similar product that contains the features described here.

Kifi revolves around bookmarking, search, and collaboration. In its core, Kifi is a Chrome Extension that lets you keep web pages with a click. It indexes the content of a kept page, and makes it easy to find later. So let’s say you encounter this tutorial, “Sever-Side Rendering with Redux and React-Router”. You don’t need it right now, but maybe in the future, so you keep the page. In…