Top 10 Efficiency Tips for Aspiring Developers

Juntao Qiu
ITNEXT
Published in
8 min readApr 14, 2024

--

I’ve always been into dev-productivity, diving into everything from keyboard shortcuts and command line tools to all sorts of plugins, including browser extensions. “The Productive Programmer” by Neal Ford was a big hit for me; it’s a book I often recommend to other developers. Even though some tools in it might feel outdated, the principles still hit home. For instance, prioritizing search over manual navigation, or the value of Test-Driven Design and Static Analysis, are tips I find timeless.

Photo by John Schnobrich on Unsplash

At ThoughtWorks, I noticed many were already sharp on this stuff, stuff you might call engineering knowledge or skills. Knowing your way around building pipelines, and scripts, and setting up tests (especially configuring them for CI environments) can boost productivity. On a personal level, things like having a build script to prevent bad commits, using command line aliases, or having scripts ready for quick debugging, prototyping, or just checking something in the browser, really make the difference between a decent developer and an average one.

I’m not as passionate about such things any more than I was, but over the years I found something that I keep using and has proven pretty fit my needs (and I believe it can be helpful for any developers), so I’ll list a few here.

I do not categorise them too well or follow any particular order here, rather just list things I can immediately recall when I write, let’s start with the obvious one, the window management tool.

Window Management

Modern operating systems come with virtual desktops, great for separating different workspaces. With more than one monitor, it gets even better. You can have one for docs or Googling stuff and another for your IDE.

If you’re on just one monitor or prefer not to keep turning your head, window management tools can split your screen into sections, keeping things efficient. This is especially handy with wide screens. There are quite a few options out there, like Rectangle or Sizeup.

I’ve been using SizeUp for years; its shortcuts fit perfectly with what I need.

In the images above, I have a book on one side and my notes on the other. Or, you could have a Figma mock-up on one side and your IDE on the other.

Searching & Navigating

A big part of my job, especially in larger organizations, is finding stuff. Even for a simple feature, I might need to dig through docs, integration steps, or runbooks from different teams.

Say, I’m working on an email template in a repo. I need to understand .soy templates, figure out custom directives, contact the email service team for features, and read up on integration. Not to mention, getting i18n to work with the translation team and understanding ops monitoring and dashboards. This means keeping 20+ tabs open and navigating through them while implementing a feature.

Using Raycast

The same goes for local development. With thousands of files in a project, finding the right one to change, and running tests on affected files and modules is crucial. Tools like Spotlight on Mac or Raycast give you a quick way to search files or run commands with a simple Opt + Space, saving tons of time.

I sometimes wonder if it’s just me or a universal thing — wanting to give clear, direct commands to my computer. Like, “create a note” or “search my Jira issues”. Without having to go through a bunch of steps like opening a browser, typing a URL, navigating UIs, and getting distracted by notifications. It feels like too much sometimes, especially if you’re using a mouse.

That said, I want to share some tools and practices that boost my coding, debugging, prototyping, and testing productivity.

Command Line Tools for Productivity

In the realm of development, the command line is an indispensable ally. It’s the backbone of numerous automation processes, offering a level of precision and efficiency GUIs can’t always match.

I’ve written a little book on building scripts from scratch if you’re interested: https://leanpub.com/from-commit-to-deployment.

Here’s a closer look at the three command-line tools I find invaluable :

Oh My Zsh

Oh My Zsh is more than just a tool; it’s a life-enhancer for the terminal. It operates on top of Zsh (Z Shell), providing a framework for managing your Zsh configuration. What makes Oh My Zsh stand out are the themes and plugins, significantly enhancing the terminal’s usability and appearance.

For example, it can autocorrect typos in your commands, provide plugin support for hundreds of tools, and offer themes that make the terminal visually appealing and informative (showing git status, current directory, etc.). Switching to Oh My Zsh can dramatically improve how you interact with the terminal, making it a more powerful and user-friendly environment.

HTTPie

HTTPie is a modern, user-friendly command-line HTTP client. Its goal is simplicity and usability, offering a more pleasant cURL-like experience. HTTPie is designed for testing, debugging, and generally interacting with HTTP servers. With JSON support out of the box, it’s incredibly convenient for today’s web developers.

One of HTTPie’s standout features is its straightforward syntax, which simplifies crafting requests and displaying responses. Syntax highlighting, pretty printing, and the ability to interact with web services with minimal fuss make HTTPie a favorite among developers who regularly work with APIs.

HTTP-Server

HTTP-Server is a simple, zero-configuration command-line static server. It’s shockingly straightforward to use — you can spin up a web server to serve your static files (HTML, CSS, JS) in seconds, making it ideal for quick testing or development tasks. Being an npm package, it integrates seamlessly into the Node.js ecosystem, making it accessible for projects of all sizes.

It shines when you need to quickly preview an application without the overhead of configuring a full web server. Just navigate to your project directory, run a single command, and your content is served locally. This tool exemplifies the power and simplicity command-line utilities can offer, providing instant feedback and streamlining the development workflow.

IDE (Keyboard Shortcuts)

IDEs are also big on my productivity list. They make refactoring a breeze. Refactorings like “Extract Function” or “Inline Function” make coding smoother and more confident.

Keyboard shortcuts in WebStorm IDE

You don’t have to memorize all shortcuts right away. Learn them in context, focusing on one at a time until it’s second nature.

For more practical refactoring skills with examples, check out my book: https://leanpub.com/10-refactorings.

The Browser

Most of my frontend work — coding, styling, debugging, or running snippets — happens in browser DevTools. Today’s browsers are incredibly powerful, offering numerous tools. For example, editing CSS flex properties directly in the browser without needing to reload.

You can also block or intercept network requests, providing overrides on the fly. I’ve made a quick demo (in the link below) for demonstrating the overrides in Chrome, which is convenient for stubbing the remote network request (although you might find libraries like mirage.js are more flexible, this option is much simpler and you don’t need additional tools).

The Snippets

The Snippets feature in Chrome DevTools is an incredibly useful tool for developers, allowing you to write, debug, and execute JavaScript within your browser environment. This feature essentially acts as a mini-code editor inside Chrome, enabling you to create, save, and run reusable JavaScript snippets on any webpage. It’s particularly handy for testing out scripts, automating repetitive tasks, or debugging issues directly within the context of your application.

For example, think of I wanted to highlight all the links on a particular page, but I don’t have to make any changes in the code.

document.querySelectorAll('a').forEach(link => {
link.style.border = '2px solid red';
});

I could then create a Snippets in Sources tab, and put the code there into a new snippet, and on any web page I would like to run it, simply right click and “Run” can attach a red rectangle in each link.

Benefits of Using Snippets

  • Quick Experiments: Snippets provide a convenient way to experiment with JavaScript code directly on live websites, enabling you to test out ideas or debug issues on the fly.
  • Reusable Code: Instead of repeatedly writing the same code in the Console, you can save it as a snippet for future use, enhancing your workflow efficiency.
  • Automation: Snippets can automate tasks you find yourself doing regularly in the browser, such as manipulating DOM elements, logging information, or even injecting additional debugging scripts into a page.
  • Debugging and Learning: By running snippets, you can experiment with new JavaScript features, libraries, or debugging techniques without needing to set up a local development environment.

Console Tab

The Chrome console serves as an excellent REPL tool, offering immediate feedback for rapid experimentation with JavaScript and direct interaction with the live webpage context. It’s user-friendly, and requires no setup, making it ideal for beginners to explore coding. Additionally, it’s a powerful resource for debugging, testing web APIs, and making temporary code alterations without altering source files. The active, hands-on learning experience it provides is enhanced by its ability to log objects and serve as an interactive guide alongside traditional documentation.

Chrome console tab

In contrast to numerous static languages that require extensive setup, JavaScript and the DOM enable you to swiftly write code that interacts with the page immediately. This aspect, I believe, highlights the allure of web development — the rapid feedback loop.

Conclusion

In this issue, we’ve scratched the surface of enhancing developer productivity with a handful of tools and tricks. But the real magic happens when we all chip in. What are your go-to strategies for staying productive? Share your top tips with me, and if you’ve found this issue helpful, please pass it on to someone who might appreciate it just as much.

If you like the reading, please Sign up for my newsletter. I share Clean Code and Refactoring techniques weekly via blogs, books, courses and videos.

--

--