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 on your terminal.
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.
Top comments (7)
I have used four out of the five tools mentioned in this list. I would use this space to share my feedback.
Fish over Zsh
Fish Shell is a much better alternative than Zsh. It comes with sensible defaults, which means you do not have to learn Oh my Zsh or any other tool to configure your shell. It saves time and effort.
Postman over Insomnia
I have tried Insomnia for a couple of weeks. In the end, I reverted to Postman. At that time, Postman was much more powerful and feature-rich than Insomnia.
These days, I fallback HTTPie for quick and simple testing.
Hub with git-brws
Hub is a great tool. There is also git-brws, which has some more features and support various hosting services.
DevDocs
Excellent! I use it daily.
So far, it does not have .NET or Apple documentation, for which I fall back to Dash.
ImageOptim over svgomg
SVGOMG works great if you want to use a web app to optimize images. For desktop, Image Optim is indispensable. It optimizes the image in place; it means you do not have to open and save an image. Just drag the image on to the ImageOptim window, and it will optimize and save it.
Wow thanks for the great reply! I'm going to check out these alternatives. It sounds like you've found some very helpful tools.
Insomnia > every other REST client
I don't really get Insomnia. Tried it for a few days a while ago and to me it seems to keep trying to follow Postman in visuals and functionality, yet lacking things that Postman already have.
I haven't used any of these but I did check out DevDocs and it looks really useful so I'll be using that while learning CSS! Thanks for the post.
Devdocs feature is nice. Thanks for posting this !!!