DEV Community

Tools that keep me productive

Nick Taylor on May 06, 2024

This page details mostly all I use as a developer. I use a Mac, so a bunch of tools are macOS-specific, but there are some OS-agnostic ones in the ...

Read full post

Ryan Furrer • May 6

Thanks for all the tabs to sort through! 😅

Stefan Schneider • May 10

twitter.com/sodiumPen/status/17851... I see another case coming up but with arc :D

Nick Taylor • May 6

Hossein Yazdi • May 6

I've long ago submitted to join the early access of Arc browser for Windows. Thanks for the share Nick!

For those who'd like to explore more useful tools, WebCurate provides a great selection of helpful tools for both development & productivity.

Nick Taylor • May 6

Thanks for sharing Hossein. It's the first time I hear about WebCurate.

Hossein Yazdi • May 6

You're welcome Nick! :)

Valentin Iljaž • May 7

Thanks for sharing your list :-) Raycast really piqued my interest; so I'll definitely give it try.

I also appreciate apps that offer convenient access to extensive collections of micro tools, such as onlinetools.com and particularly webacus.dev

Nick Taylor • May 7

Glad you enjoyed it Valentin and thanks for sharing your tools!

Isac Petinate • May 6

Try clingon.dev to see if it fits into your productivity tools

Nick Taylor • May 6

I've never heard of it but I see it's open source. What's the value add? From glancing at it, it's mainly scaffolding for web projects?

ipetinate / clingon

Create components, functions, pages, and other files for your project with a few commands

Clingon CLI

Create components, functions, pages, and other files for your project with a few commands

Tired of creating components by hand? And still without any help from the VS Code interface or other IDEs?

Clingon comes to simplify this creation flow You are going to create a React or Vue component, but this component needs a test file and a stories file (if you use storybook), with its entire structure being grouped or separated, it is a very tiring task to create all of this, add the code boilerplate (which I know you will copy from another ready-made file and change everything).

Let's simplify all of this, execute a command, answer some questions, or select your favorite template and that's it, everything is created, just start coding.

Description

Clingon is a command line tool…

View on GitHub

Isac Petinate • May 8 • Edited

Hello everything is fine? I wrote an article talking about the motivation for doing this project (you can read it here: dev.to/ipetinate/clingon-the-cli-t...), but your question is great.

The central idea of this tool is to reduce time when creating resources in a project, and obtain pre-configured minimal code ready for development. But I have plans, for the future of the application, I want to make it flexible enough to create complex structures for projects, let's say that in your project, every View/Page has a Wrapper component for titles and action buttons, has some specific config or request, in the future it will be possible to add this structure to your own templates, and use them. This adds value to the team, making the learning curve of new engineers on a project easier and faster, or you save time by performing fewer manual tasks when creating a simple component, or page, or whatever (little by little the tool will allow more options).

But I also see advantages for new programmers who don't have as much knowledge, getting a minimum ready to code, or getting opinionated standards instead of creating their own standards.

In fact, in the future with the local templates mode (which I intend to develop and launch soon), the tool becomes flexible and agnostic, serving any type of file or project, not just web projects.

I started implementing web templates, as that is my need at the moment. In the article linked above I talk more about this, but anyway, the tool has space for several important features to add Developer Experience to your daily life.

Stefan Schneider • May 10

And now, make a list for Windows users :D

Nick Taylor • May 10

Buy me a Windows machine. 😜

Stefan Schneider • May 11

Ok, if you buy me a Mac :D

Sean Davis • May 7

Holy moly, you have so many tools that you''re using. I'm excited to start procuring my own set of tools that will be my go-tos. For now it's just VS Code and some extensions... haha 😆

Nick Taylor • May 7

Gotta start somewhere. 😅

Thanks for checking out the post!

Nick Taylor • May 7

Nick Taylor • May 6 • Edited

I do want to give a shout out to the Zed editor. I use it occasionally and it’s super fast, but it hasn’t become my main editor yet. Maybe in the next year. We’ll see. 😎

I'm going to add this comment to the post actually.

Yahaya Oyinkansola • May 7

Thanks for all this tools you shared, especially in the chrome extensions section, they are helpful

Nick Taylor • May 7

Glad you found it helpful Yahaya!

George Gabriel • May 8

Nerd zone

Martin • May 10

Thanks for this, Nick! Oh boy, pumped to get into this :)

Nick Taylor • May 10 • Edited

Sagar • May 15

I ❤️ this article. I really enjoyed 👍

Nick Taylor • May 15

Thanks Sagar!

Alex Kaul • May 12

Thanks for sharing the tools! Also take a look at Freeter

Nick Taylor • May 12

Cheikhnouha • May 6

Thanks you for sharing this

Nick Taylor • May 6

Kudzai Murimi • May 6

Thanks for sharing!

Nick Taylor • May 6

val von vorn • May 6

Thanks! (and I most loved the gloves in your AI illustration, they made me laugh!)

Nick Taylor • May 6

I tried to have fun with the image. Glad you enjoyed it!

Arshad Zackeriya 🇳🇿 ☁️ • May 15

love it

Nick Taylor • May 15

Fire and Safety Jobs • May 8

Cool

BenzizaTalentplug • May 16

1. Tools That Keep Me Productive (I use a Mac 😊)

1.1 Introduction

2. Editor

Visual Studio Code (VS Code) is my go-to editor.

I was a big fan of Dank Mono for a long time, but GitHub released a bunch of monospaced fonts this year, and I've been loving Monaspace Krypton.

For the theme, it varies. Recently, I've been using the light modern default theme because it's better for my live streaming, but I'm also a fan of the Houston and Fortnite themes.

Even though I have iTerm installed, a great terminal for macOS, I honestly live in the VS Code terminal 99.999% of the time.

2.1 Editor Settings

2.2 Maybe Zed Soon?

3. Browser Extensions

Refined GitHub - GitHub on steroids
VisBug - A fantastic tool for frontend (only for Chromium-based browsers)
React DevTools - Because React
Preact DevTools - Because Preact
Axe - For web accessibility testing
WAVE - For web accessibility testing
HTTPS Everywhere
uBlock
LanguageTool - A grammar and spell checking tool
Pocket - For bookmarking stuff to read
JSONView - A prettified view of JSON payloads
Tweak New Twitter - Gets rid of a lot of noise in the Twitter UI
a11y Twitter - Promotes Tweeting in an accessible manner with small changes to Twitter's UI.

4. Desktop Apps

4.1 General Tools for Everyday Tasks

Arc Browser: A Chromium-based browser that, in my opinion, has nailed a ton of the user experience (UX) issues I've encountered with other browsers. Vertical tabs, command palette, and auto-picture-in-picture video, to name a few.
Bartender: Manages my menu bar icons. I used Vanilla for a long time, but Bartender works better with the MacBook Pro's notch.
Rocket: An easy way to add emojis. I use this multiple times a day.
Raycast: My go-to replacement for Spotlight on macOS. It's like Spotlight on steroids. I also use it for window management.
f.lux: For those evenings in front of the computer. macOS Nightshift is okay, but f.lux is much better.
Dato: A better date app for macOS, useful for managing multiple time zones.
Cleanshot X: For screenshots and short video recordings, which I use almost daily.

4.2 Tools for Git

Fork: When I need a GUI to understand what's going on with Git.
GPG Suite: Makes it easy to sign your commits.

4.3 Frontend Tooling

xScope: A fantastic toolset for frontend development.
Figma: My go-to for coordinating with designers, viewing designs, or pulling assets.
Polypane: Indispensable for building responsive, accessible apps.
TPGi's Color Contrast Analyzer: For color contrast issues.

4.4 Other Desktop Apps

Cloudflare Warp: For faster internet and some VPN goodness.
Plash: An interactive desktop background for your Mac.
CleanMyMac X: A suite of utilities for keeping your Mac in top shape.
Starship: A cross-shell prompt.

5. Live Streaming Software

Restream.io: For streaming to multiple platforms (Twitch, YouTube, X/Twitter, and LinkedIn).
OBS Studio: Open source software for live streaming and screen recording. I use it for custom overlays and other customizations.
Krisp: Excellent for filtering out unwanted noise during calls and streams.
Loopback: For creating virtual audio sources.
Camo: For using an iPhone as a streaming camera.

5.1 Tools for Live Streaming Guests

vdo.ninja: Uses peer-to-peer technology to bring remote cameras into OBS or other studio software.
Twitch's Stream Together: Similar to vdo.ninja, but for guests with a Twitch account.

6. Command Line Interface (CLI) Tools

Homebrew: The missing package manager for macOS (or Linux).
GitHub CLI: GitHub on the command line, great for creating PRs, etc.
nvm: Node version manager.
cloudflared: Exposes local servers to the public internet via secure tunnels.