Uses

I’m the wearer of many hats at Code with Hugo.

Inspired Wes Bos’s “awesome-uses” collection. Here are the tools I use.

Table of Contents:

• Gear
• Editor(s) + Terminal
• Desktop Apps
• Web apps and services
• Bookmarklets
• Snippets

Gear

• MacBook Air M1 13”, 2020. Space Gray, amazing battery life, could’ve bought an M2 at the time already but opted for M1 for the form factor and the price. 2020-current
• 2017-2022 MacBook 12”, retina, early 2015 version 😄 in Space Gray. Bought second hand, able to create demos, and run web applications including Docker Compose with multiple services + database(s) fine. This is probably the reason I haven’t dabbled too much in video, opting for a blog-heavy approach, rendering out a 5min video takes an hour or so.
• Bose QuietComfort 35 II in Silver. Superb noise cancellation and battery life for wireless headphones. The microphone is almost a bit too sensitive with background noise on calls but served me well.
• OnePlus 7T - 2020-current
• Moleskine Pocket Ruled Notebook (A6)
• Rhodia Rhodiarama A6 notebook, dotted
• Used 2018-2020 Pixel 2
• Portable Charger Anker PowerCore 20100mAh
• Anker Ultra Compact Slim Profile Wireless Bluetooth Keyboard - very cheap Bluetooth keyboard can’t recommend Anker enough
• AmazonBasics Slim Wireless Bluetooth Mouse - another cheap, dependable Bluetooth enabled piece of equipment (no USB receiver needed).
• Stopped working in 2020 - Anker SoundBuds Slim Bluetooth Headphones - there’s some Anker love going on here, but they make for good items price-quality ratio.

Editor(s) + Terminal

Full coding setup walkthrough: A simple JavaScript/Node coding setup on Mac OS X

• Visual Studio Code, with the following extensions

  • Atom keymap, ext install atom-keybindings from CMD + P menu
  • Snazzy theme, ext install snazzy theme
  • EditorConfig for VS Code, ext install EditorConfig from CMD + P menu
  • ESLint: “Integrates ESLint JavaScript into VS Code.”, ext install vscode-eslint from CMD + P menu
  • npm Intellisense: “autocomplete npm modules in import statements”, ext install npm-intellisense from CMD + P menu
  • Import Cost: “Display import/require package size in the editor”, ext install import-cost

• superseded by VSCode Typora markdown editor

  • Ash or Night theme (when I don’t want to bother downloading an extra theme)

• Terminal

  • iTerm2 app, it’s just a better Terminal than the default one (see how I set it up at A simple JavaScript/Node coding setup on Mac OS X)
  • Colour theme: snazzy using iterm-snazzy
  • zsh through the oh-my-zsh manager, which sets you up with auto-completion and plugins.
  • Pure prompt for its simplicity. It’s clean but gives you enough information to be productive.

Desktop Apps

I’ve detailed how I set up my desktop apps at A simple JavaScript/Node coding setup on Mac OS X

• Raycast, improved spotlight that also does clipboard management and window resizing. Which means I can use 1 app instead of 2-3 (Rectangle, Lacona, Maccy)
• Stats, “macOS system monitor in your menu bar”, I use this to see Battery levels as well as CPU/RAM/network usage (on some machines I also have temperature/fan info).
• Kap for screen recordings
• Gifski to generate and edit GIFs
• Joplin, a free, secure, open-source, cross-platform notes app
• Replaced by Raycast Rectangle, “Move and resize windows in macOS using keyboard shortcuts or snap areas"
• Replaced by Raycast Lacona, “Launch apps and find your files instantly” a better “better spotlight” than Alfred
• Replaced by Raycast Maccy a newer, lighter, easier to install version of Clipy
• Replaced by Lacona Alfred, I just use Alfred as a better Spotlight Search.
• Replaced by Maccy Clipy is the must-have Desktop app for me. It’s a clipboard manager, and it works. It’s actually the only thing that I struggle with when helping others code on their machines, having that multiple-entry clipboard is invaluable when refactoring, lifting and shifting etc…

Web apps and services

• Excalidraw, it’s a great free, open-source low-fidelity canvas (think whiteboard), it has a live-sharing collaboration feature.
• Simple Analytics, it powers the Code with Hugo Open page and is a privacy-aware alternative to Google Analytics.
• Buttondown powers the Code with Hugo weekly Enterprise Node.js and JavaScript newsletter.
• GitHub, hosts my example repositories (see github.com/HugoDF), my code repositories (private) and example.codewithhugo.com with GitHub Pages
• Netlify, host codewithhugo.com as well as some other silly projects 5minfeature.com and accountableblogging.com, amazingly easy to deploy, and supports deploy web hooks.
• Cloudflare. I leverage the DNS and CDN, for more information see A tiny case study about migrating to Netlify when disaster strikes at GitHub, featuring Cloudflare
• Replaced by Joplin Dropbox Paper, I like the markdown editor and the fact I can sync across devices + offline mode.

Bookmarklets

• GH Review > Mark all unviewed, a bookmarklet to mark GitHub review “viewed” files as unviewed, see the post: Github Pull Request Review: reset viewed files
• Alpine Inspector - bookmarklet for alpine-inline-devtools

Using bookmarklets

1. Right click the bookmarklet you want to add to your browser
2. Select “Bookmark this link” or equivalent
3. Save it as a bookmark
4. You can now use the bookmarklet by selecting it from your bookmarks.

Snippets