Tools that help you optimize your workflow

[su_dropcap style=”flat” size=”5″]T[/su_dropcap]o become a better craftsman, especially in my industry, you need to be with the right tools that make your workflow smooth and easy to do. I know sometimes it can look like a shit load of work but hey, we are here for one another so check these tools out.

Atom

Atom is an open source text editor created by Github. For the past year Atom has been my primary editor. Atom comes full-featured with things like a built in package manager, smart auto-completion, and beautiful themes.

Atom

Coming from Sublime, the package manager was a breath of fresh air. With Atom, you can either use APM or its GUI interface. No need to modify config files. It just works.

Atom

A note on performance. When Atom was first released, it was slow. However today it’s blazing fast. The only slow down I notice is when opening up huge files.

You can read more about Atom and its performance optimizations in Moving Atom To React and then Implement text editor DOM updates manually instead of via React.

DragDis

As a designer, I’m always on the lookout for inspiration. DragDis is a tool that lets me save inspiration as I find it. It’s easy to use. Install the Chrome extension and start dragging.

DragDis

The way I organize my DragDis folders is by week. Each week I create a new inspiration folder. It’s a great way to track how my design tastes have changed over time.

DragDis

DragDis also has a full-page grid view. This makes for fantastic moodboards.

iTerm 2

iTerm is a sleek alternative to Terminal. Just to name a few features, iTerm 2 has unlimited split panels, inline images, and search. Although Terminal has a lot of similar functionality, iTerm 2 is constantly improving.

iTerm

Muzli

Muzli is a Chrome extension that aggregates design related content from sources like Designer News, Dribbble, Behance, etc.

Every time you open a new tab in Chrome Muzli sources you the best content from each of these sites.

Muzli

One thing I love is that they have a staff picks section. It’s like having your own personal assistant pick out the best front-end and design related articles.

Noiz.io

A lot of makers like to go to hip coffee shops for the ambiance. Noizio helps bring that ambiance to your home. With Noizio, you can choose from a range of background noises including October Rain, Coffee House, Thunderstorm, and Sea Waves. Perfect for getting into the zone.

Noiz.io

Invision

Invision is a prototyping and workflow platform, perfect for collaboration between front-ends and designers. Designers can upload series of screens to a project. Then they hot link screens with one another.

invision

The blue sections are the hot linked areas. If you tap or click on them, they will take you to the next screen. This is a great way for designers to walk clients and developers through the flow. It’s also useful when doing some preliminary qualitative testing with users.

invision

 Invision also recently released a new feature called Boards. Boards allows you to collect inspiration and build moodboards. The biggest difference between this and using DragDis is that Boards is collaborative, so you can work with other team members.

invision

What the Font

Typography is a huge component of design. That’s why What the Font is one of my favorite chrome extensions. It helps you find out what fonts a site uses. Just point and click.

What The Font

Postman

When working as front end developers, we often have to query APIs or interact with our own. Postman is a handy tool that helps you make requests to APIs.

Imagine working on an API endpoint. Instead of having to write a corresponding front-end query or a cURL request, Postman can query the endpoint directly.

Postman

Wappalyzer

Wappalyzer is a tool for identifying what libraries and frameworks a site uses. It has a Chrome extension and by far is one of the most useful tools for a front-end developer. Next time you wonder what library a site is using to create a specific visualization, Wappalyzer has you covered.

Wappalyzer

Boom 2

Boom is a volume booster and equalizer for Mac. It’s perfect for when you’re coding and need some tunes to boost your productivity. It has a set of pre-configured profiles for genres like jazz, hip-hop, and dub-step. You can also configure custom profiles.

B oom2

Boom also includes a set of sound effects. Paired with a pair of headphonesBose Quiet Comforts the sound effects make a huge difference in your listening experience.

Boom2

If that wasn’t enough. Here are a few honorable mentions: JSON Viewer for Chrome, Noon Pacific, Flux, and Better Snap Tool.

This article was originally published on Medium by one of my favorite authors Jonathan Z. White . I was Impressed that most of the tools mentioned in his articles were part of mine too. Impressive!

kivuti kamau

Data Modelling, Design & Development

Press ESC to close