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 ( and ) 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. Command Prompt Bash is an open-source, community-driven framework built on top of a command line shell that many people find easier and better than the default options. Oh My Zsh provides a large number of (250) and (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. Oh My Zsh zsh— plugins themes 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 and plugins 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. 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: Insomnia 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 . Insomnia auto-generates the schema when a URL is passed. After sending the query on the left, it returns the response on the right. countries 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 . 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. GitHub There is an extensive list of commands and actions you can perform using hub. . You can also find the list by running the command on your terminal. Here is the full list of installation commands 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. 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 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 - 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. SVGOMG 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. is a UI implementation of , which is a node.js based, command-line tool. SVGOMG SVGO(Optimizer) 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.

Heroku

I write about technology michael.bogan@gmail.com

2022 - HackerNoon Contributor of the Year - Api

2022 - HackerNoon Contributor of the Year - Devops

2022 - HackerNoon Contributor of the Year - Microservices

2022 - HackerNoon Contributor of the Year - Software

2022 - HackerNoon Contributor of the Year - Software Architecture

2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Software Architecture

Nominated for 2022 - HackerNoon Contributor of the Year - Microservices

Nominated for 2022 - HackerNoon Contributor of the Year - Devops

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Software

Too Long; Didn't Read

Developers: Build Less. Deliver More. [Learn how]	

5 Web Dev Tools To Improve Your Productivity

5 Web Dev Tools To Improve Your Productivity

Too Long; Didn't Read

Companies Mentioned

Michael

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

5 Web Dev Tools To Improve Your Productivity

Too Long; Didn't Read

Companies Mentioned

Michael

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES