DEV Community

Cover image for Tools that keep me productive

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 ...
Collapse
 
ryandotfurrer profile image
Ryan Furrer

Thanks for all the tabs to sort through! 😅

Long list of tabs in web browser.

Collapse
 
hinogi profile image
Stefan Schneider

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

Collapse
 
nickytonline profile image
Nick Taylor

Stephen Colbert saying Welcome to the Nerd Zone my friend

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
nickytonline profile image
Nick Taylor

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

Collapse
 
valentiniljaz profile image
Valentin Iljaž

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

Collapse
 
nickytonline profile image
Nick Taylor

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

Amy Poehler being cool

Collapse
 
ipetinate profile image
Isac Petinate

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

Collapse
 
nickytonline profile image
Nick Taylor

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?

GitHub logo ipetinate / clingon

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

Clingon CLI logo

Build CI Release CI Coverage Status Website

GitHub Release Date GitHub Release version NPM Version

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.

Links

Description

Clingon is a command line tool…

Collapse
 
ipetinate profile image
Isac Petinate • 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.

Collapse
 
alexk profile image
Alex Kaul • Edited

Thanks for sharing the tools! Also take a look at Freeter
Story on how I boosted my productivity with it: dev.to/alexk/how-i-boosted-my-prod...

Collapse
 
nickytonline profile image
Nick Taylor

Actor Zach Galifianakis giving a thumbs up in a convertible car

Collapse
 
hinogi profile image
Stefan Schneider

And now, make a list for Windows users :D

Collapse
 
nickytonline profile image
Nick Taylor

Buy me a Windows machine. 😜

Collapse
 
hinogi profile image
Stefan Schneider

Ok, if you buy me a Mac :D

Collapse
 
oculus42 profile image
Samuel Rouse

Great list and details!

One thing to mention is the very recent hullabaloo over Bartender changing owners and the lack of transparency with a change to an app that has such broad system permissions. Just yesterday MacRumors had an article of Bartender Alternatives for those wary of the new owners.

Collapse
 
nickytonline profile image
Nick Taylor

Glad you enjoyed it and thanks for letting me know about the Bartender change of hands! 😅

Collapse
 
nickytonline profile image
Nick Taylor • 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.

Collapse
 
turtlewake profile image
Sean Davis

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 😆

Collapse
 
nickytonline profile image
Nick Taylor

Jack Nicholson nodding yes

Collapse
 
nickytonline profile image
Nick Taylor

Gotta start somewhere. 😅

Thanks for checking out the post!

Hackerman from Kung Fury putting on a Nintendo Power glove

Collapse
 
kansoldev profile image
Yahaya Oyinkansola

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

Collapse
 
nickytonline profile image
Nick Taylor

Glad you found it helpful Yahaya!

Actor Zach Galifianakis giving a thumbs up in a convertible car

Collapse
 
georgegabriel profile image
George Gabriel

Nerd zone

Collapse
 
martinbaun profile image
Martin Baun

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

Collapse
 
nickytonline profile image
Nick Taylor • Edited

Noice!

Collapse
 
sagar profile image
Sagar

I ❤️ this article. I really enjoyed 👍

Collapse
 
nickytonline profile image
Nick Taylor

Thanks Sagar!

Collapse
 
cheikhnouha profile image
Cheikhnouha

Thanks you for sharing this

Collapse
 
nickytonline profile image
Nick Taylor

Captain America saluting

Collapse
 
respect17 profile image
Kudzai Murimi

Thanks for sharing!

Collapse
 
nickytonline profile image
Nick Taylor

Hot Rod saying Cool beans!

Collapse
 
valvonvorn profile image
val von vorn

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

Collapse
 
nickytonline profile image
Nick Taylor

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

Collapse
 
awsfanboy profile image
Arshad Zackeriya 🇳🇿 ☁️

love it

Collapse
 
nickytonline profile image
Nick Taylor

Actress Anna Kendrick in a film saluting as her character

Collapse
 
fireandsafetyjobs profile image
Fire and Safety Jobs

Cool

Collapse
 
ashish101020 profile image
Ashish Gupta

Thanks for the essential information

Collapse
 
benzizatalentplug profile image
BenzizaTalentplug

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.
Collapse
 
bdmorin profile image
Brian

Image description

Collapse
 
rickrribeiro profile image
Ricardo Ribeiro

I like one tab extension to save all tabs and close them