5 Web Dev Tools To Improve Your Productivity

Time is always a scarce resource for developers. From aggressive deadlines, to multiple projects, to unexpected requirements, our time is constantly in demand. That's why we're always on the lookout for tools and processes that help us boost productivity. In this article, we'll look at five web development tools that might just give you that extra boost in productivity you need.

1. Master the Command Line with Oh My Zsh

The default command line interfaces for Windows and OS X (Command Prompt and Bash) can be daunting to learn and difficult to customize. If you aren't an expert, you can end up repeating menial tasks that could be automated. 

Oh My Zsh is an open-source, community-driven framework built on top of zsh—a command line shell that many people find easier and better than the default options. Oh My Zsh provides a large number of plugins (250) and themes (140) out of the box, allowing you to customize your terminal to your preferences. Oh My Zsh is faster, more comfortable to work with, and allows you to easily automate your everyday tasks. Because the command line is increasingly becoming a part of every web developer’s workflow, this could be a great productivity tool to incorporate into your daily work. 

Installing Oh My Zsh on your computer is straightforward...  

$ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"  

As is installing plugins and customizing themes.

Oh My Zish also has a large and active community of contributors. In fact, over 1,500 people have contributed to the project.

I've been using this tool for over a year and I love how it streamlines my workflow and how easy it makes working in the terminal. Using Oh My Zsh has helped me become more comfortable and productive with command line. Auto-suggestions and aliases especially have sped up my workflow and increased productivity. Some of my favorite plugins include:

• heroku: auto completions for the Heroku CLI
• zsh-autosuggestions: auto suggests any of the previous commands.
• npm: auto-completion and aliases for npm

2. Test APIs on the fly with Insomnia

Testing REST endpoints can be cumbersome, time consuming, and confusing. Insomnia is a free and open-source, cross-platform GraphQL and REST client that is not only powerful, but also comes with an intuitive and simple UI that makes testing easier, and simplifies my day. Some Insomnia features include:

• Code snippet generation: Insomnia can generate client code for over 20 different languages including NodeJS, Go, Swift, Python, Java, C.
• Plugins system: The plugins system allows you to extend the functionality of Insomnia. You can either create a custom template tag for rendering custom values, or create a custom color theme using the Plugins API.
• Environment variables: These are reusable values that are used in any text input within Insomnia. Some common variables are base URLs, authentication tokens, and resource IDs.

One of the major beneficial features of Insomnia is support for GraphQL. The demo below shows a typical workflow for querying a GraphQL endpoint. In this example, I'm sending a request using a public GraphQL API called countries. Insomnia auto-generates the schema when a URL is passed. After sending the query on the left, it returns the response on the right.

The app ships with many useful features that can streamline your workflow. For example, here we can see the ability to use environment variables. 

When working with APIs, it's common to repeat identical values across multiple requests. Manually performing this task can become time-consuming and difficult. Using environment variables solves this problem by allowing you to define a value, then reference that value wherever it's needed.

3. Boost Git Superpowers with Hub

Most of us spend a lot of time in GitHub. Hub is a command-line tool that helps you perform everyday GitHub tasks without constantly switching back and forth from the terminal. Hub wraps git and extends it with extra functionality, including cloning repositories, listing latest open issues, and sharing logs or code snippets via Gist. Not only does Hub make it easier to work with GitHub, but it improves productivity by bringing all your tools together into one environment.

There is an extensive list of commands and actions you can perform using hub. Here is the full list of installation commands. You can also find the list by running the command

man hub

4. Access to offline documentation with DevDocs

We all use documentation. (Some of us quite a bit!) When you're working in a stack of multiple technologies, it can be time consuming and inconvenient to constantly switch back and forth between sets of documentation. DevDocs solves this problem. DevDocs is a free and open-source tool for browsing a wide variety of programming language and dev tool documentation all at once in a single clean and organized, web UI. 

DevDocs offers: 

• instant search
• offline support
• mobile support
• dark theme
• keyboard shortcuts
• and more

DevDocs makes reading and searching reference documentation fast, easy, accessible, and enjoyable. And with support for over 150+ projects available offline, you don’t need to worry about staying connected to the internet. This tool is especially helpful when working with multiple languages or tools. For example, I use it extensively to read and search the documentation for both Vue and Cypress at the same time.

5. Scale SVG images with SVGOMG

And finally, switching gears to a more practical tool, we have SVGOMG - a free online tool for optimizing SVG files. SVG (Scalable Vector Graphics) images are preferred over other formats (such as PNG or JPG) because of their ability to scale and remain responsive across various devices and screen sizes. One disadvantage to using SVG is that the files can become very large due to redundant information, such as editor metadata, comments, hidden elements, and default or non-optimal values. SVGOMG is a tool that safely removes and optimizes this data to reduce the file size.

The image above shows a typical scenario where an SVG file has been optimized by 69.42%. This is a pretty simple tool, but it can help improve the overall performance of your website and avoid bloat on your web page. SVGOMG is a UI implementation of SVGO(Optimizer), which is a node.js based, command-line tool.

Conclusion

Finding ways to improve the way we work is important. By leveraging the tools above, you can boost your productivity and streamline your workflow. Start prioritizing tools that help automate your workflow, and you'll be rewarded with time savings and productivity gains.