3 Tools to Make Web Development More Fun

January 12th, 2018

In 2017 I really started to enjoy my work as a JavaScript/React developer. So I took a minute to think: how am I enjoying myself so damn much? And the answer: coffee. But also, the tools I use.

In fact, I've noticed 3 dev tools that particularly boost my workflow and keep me happy about my work.

1. Prettier

I'm too OCD to leave my code looking messy and there's nothing more UNFUN than formatting code. Space space space, tab, return. Change that quote from a single to a double, then back again... BORING. Plus it's hard on the hands. Gives me an RSI.

Enter prettier. Prettier can take your ugly gibberish and turn it into consistent, nicely-formatted code that almost never goes beyond 80 characters per line.

Now I can type however I want, copy/paste things around, and not even think about formatting. Watch as my messy code snaps into place:

2. Storybook

Sometimes my brain hurts trying to think about these two things at once:

  1. how my component should work on the inside
  2. how my component fits into my application

Enter Storybook. Storybook gives you a place to mount and render your components with a variety of different props. See your components working before fitting them into your app. Make sure they work how they are supposed to ahead of time.

Here I'm working on my article card component:

3. React Native

Working with web technologies has spoiled me. When I update my code, I get to see those updates reflected instantly in the browser.

When I switch to working on iOS - I feel like I've been turned into a sloth. Development. Is. So. Sloooow.

For every code change I have to:

  • Build the app.
  • Wait.
  • Run the app.
  • Wait.
  • Navigate back to the page I was working on.

So something that takes less than 1 second on the web takes about 30 seconds on native. Enter React Native.

React Native lets you write apps with JavaScript. But it's not janky & slow like past attempts at the same thing - it uses native view components to stay fast. The end result is usually indistinguishable from an Objective-C or Swift app.

And the best part: no more waiting for the app to compile.

Here I'm building a simple login form. Watch as each update comes through in about a second:

Conclusion

If you're a web developer then you probably have to be on your computer for hours every day. If these tools could make that time more enjoyable - why not give them a shot?

JavaScript Stuff in Your Inbox

Get tips, lists and guides to help you learn complex web development topics.