These 3 snippet managers and collection tools increase your productivity. [Week 30/2020 in Review]
Tags: macos, twitter, devtools, vscode
Published: 2020-07-28 05:58:39

_If you like this article, you probably like my tweets and [newsletter](https://newsletter.natterstefan.me/) too. If you are curious, have a look at my [twitter profile](https://twitter.com/natterstefan). 🚀_

Hello 👋🏻.

Welcome to my "Week in Review" series. Each week I will share what I discovered, learned, and tested with you.

This week's article is about managing snippets and snippet collection tools. I show you the tools I use to be faster and more productive when writing code and saving often used code snippets.

Let's jump right into it.

---

## Highlights

Before we get to the key topic, let's look at some highlights from my Twitter feed.

One of the best-performing tweets of my week was this one. It made at least some people laugh.

{% twitter 1286722513058357249 %}

Besides posting memes I asked my twitter followers two questions:

{% twitter 1286181653673652224 %}

People still want to work from home, including me. I am not that surprised WFH won, but I'd have not guessed this ratio. Keep in mind that it is not representative though.

In my second survey, I asked people which OS they use and why.

{% twitter 1286352807835185156 %}

Interestingly, for me was the distribution of the answers. I thought Windows is still more popular than macOS. But 1.729 answers proofed me wrong. I agree with the majority. **My favorite operating system is also macOS**.

**We love and hate JavaScript** for it's "WTF"-moments, don't we? Wanna see some of them? There is an extensive list of examples of ["What the f*ck JavaScript?" examples](https://github.com/denysdovhan/wtfjs) on GitHub.

Get **instant offline access to 200+ API documentation sets** with [Dash](https://kapeli.com/dash). This includes documentation for Bootstrap, CSS, Docker, Elastic Search, Elixir, JavaScript, NodeJS, PHP, Python, React, and more! It is super helpful in so many ways. Combined with [Dash workflow for Alfred](https://www.alfredapp.com/blog/productivity/dash-quicker-api-documentation-search/) or the [VS Code extension](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash) you can look up documentation within seconds.

---

## Snippet Managers and Snippet Collection Tools

By no later than me writing `console.log('variable', variable)` the third time I am looking for ways to improve my workflow and productivity. For fast logging variables, I am using [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) for VS Code. But not only `console.log`s, but also other code snippets are used again and again. It's about time to think about using snippet managers and collection tools to tweak this situation. I show you some apps I use for this.

### SnippetsLab (macOS)

**[SnippetsLab](https://www.renfei.org/snippets-lab/)** is my snippet manager of choice. **Create snippets within seconds with a suitable syntax highlighting** (e.g. markdown, javascript, python). These snippets can be grouped in folders (e.g. "React", or "Git") manually or automatically. I can share snippets with others by creating a [gist](https://gist.github.com/) for the shared snippet with SnippetsLab. They update the gist as you change the snippet in SnippetsLab. You can stay organized by adding multiple tags to the snippets too.

Do you also use SnippetsLab or another tool?

### Snipsnap - Code Snippets for Javascript libraries (VS Code)

I am surprised **[SnipSnap](https://marketplace.visualstudio.com/items?itemName=snipsnapdev.snipsnap-vscode)** has only ~4.300 active installs, considering how supportive it is - at least for me. SnipSnap **suggests code snippets as you type for several libraries and frameworks**. Type "react", select a suggestion, and hit enter. That's it. They have a [variety of snippets](https://github.com/snipsnapdev/snipsnap/tree/master/snippets/javascript), and you can contribute and add some more. They even [plan to enable you to add your own (internal) code snippets](https://github.com/snipsnapdev/snipsnap/issues/52) along with the official ones.

### Snippets in Chrome DevTools

Did you know that you can **[add snippets in Chrome DevTools](https://dev.to/viclafouch/improve-your-productivity-with-snippets-of-javascript-on-the-chrome-devtools-3gfm)**? [Victor de la Fouchardière](https://dev.to/viclafouch) changed that. Now I can use my most-used snippets right in my DevTools and have them ready when I need them. It is actually very easy to [add a snippet](https://developers.google.com/web/tools/chrome-devtools/javascript/snippets) and I have some in my collection now.

## 📗 Books

I am reading ["Clean Code" by Robert "Uncle Bob" C. Martin](https://amzn.to/2ZoKeop) and listened to ["Thinking, Fast and Slow" written by Daniel Kahneman](https://amzn.to/2ZlCSk2) on Audible again.

What are you reading? Share your recommendations in the comments below. 🙏🏻

## ⛓ Links of the Week

- Create beautiful presentations with ReactJS and [Spectacle (MIT)](https://github.com/FormidableLabs/spectacle).
- Ever wondered how you to use [Generics](https://www.typescriptlang.org/docs/handbook/generics.html) with `React.forwardRef` in TypeScript? I did because I wanted to type the `forwardRef`ed component. My solution is based on this [great advice on StackOverflow](https://stackoverflow.com/a/58473012/1238150).
- I am a fan of **[optimizing Pull Requests and Issues with templates](https://docs.github.com/en/github/building-a-strong-community/about-issue-and-pull-request-templates)** and making commit messages homogeneous by following the **[Conventional Commits guidelines](https://www.conventionalcommits.org/)**. The idea is simple. Instead of varying commit messages too much (e.g. "added new feature" vs. "feature gallery added" etc.), a set of rules applies to the commit messages. If you add a new feature, the commit should look like "<type>[optional scope]: <description>" (e.g. "feat(components): gallery added with full-screen support"). There are other prefixes like "chore", "docs", "fix", "test", and more. You can read more about it by visiting [conventional-changelog](https://github.com/conventional-changelog/conventional-changelog). What is the benefit you ask? Besides standardizing the commit history, you can use tools (e.g. [standard-version](https://github.com/conventional-changelog/standard-version)) to **automate CHANGELOG generation with [semantic versioning](https://semver.org/lang/de/)**. Next time you release a new version you let the tool do everything. Based on the commit history it will decide if the new version is a major, minor, or a patch one. It will also update the CHANGELOG for you. If you wanna see it in action, check out my [example-commitizen-standard-version](https://github.com/natterstefan/example-commitizen-standard-version) repository.
- [Blisk - a developer-oriented browser](https://blisk.io/) looks interesting. Not sure if it is still maintained, the last update was released >394 days go.
- [DBeaver](https://dbeaver.io/) is a **free multi-platform database tool for developers, database administrators, analysts**, and all people who need to work with databases. Many of my co-workers use it on a daily basis.
- Creating interactive and comprehensive **tables with ReactJS** can be a challenging and time-consuming task. Luckily for us, there are lots of outstanding open source solutions available. Here are [5 React table](https://blog.bitsrc.io/top-5-react-table-libraries-170505f75da7) solutions for you.
- Collect, share, and organize your colors with [Sip](https://sipapp.io/) for macOS.
- Never accidentally quit VS Code with [Quit Control for VSCode](https://marketplace.visualstudio.com/items?itemName=artdiniz.quitcontrol-vscode)
- **[CodeSandbox](https://codesandbox.io/) is AMAZING!** Quickly prototype solutions and share them with your team. You can even collaborate live together on the same code base. What makes CodeSandbox even better is this feature. You can import code from GitHub to CodeSandbox. The imported repository will always stay up to date with your latest commits! Isn't that great? There are many ways to start:
  - with the [wizard](https://codesandbox.io/s/github)
  - with the [`codesandbox` cli](https://www.npmjs.com/package/codesandbox)
  - with [GitHubBox.com](https://githubbox.com/)
  - with browser extensions for [Chrome](https://chrome.google.com/webstore/detail/open-in-codesandbox/hdidglkcgdolpoijdckmafdnddjoglia) or [Firefox](https://addons.mozilla.org/en-GB/firefox/addon/codesandbox)
- I have to admit I am not familiar with Adobe Illustrator. I know it is powerful. It can replace Adobe Photoshop for what I use it. One day, I will buy a course on Udemy and learn how to use it. Until then I had to find a solution for the following problem. A list of names had to be placed on an invitation card. I could either create a new layer for each name or find a more efficient solution. Something like Word's bulk letter feature. That is when I found out, that you can **use variables in Photoshop**! That was it! After reading ["Working With Data-Driven Graphics in Photoshop Template"](https://medium.com/@saurabhjagtap/working-with-data-driven-batch-files-in-photoshop-template-6f8368bfb932) it was no problem at all to create invitations for all those people. Hopefully, this helps one of my readers too.
- Last week I set up and used **macOS' [Time Machine](https://support.apple.com/en-gb/HT201250)** the very first time. Well, what can I say? It was terribly slow backing up all files the first time. It took almost 12 hours to back up ~350 GB to my Synology NAS. I knew something is wrong, or is it normal that takes so long to finish? After some research, I found several ways to optimize speed.
  - [Time Machine backup slow or initial backup failing - solved (Synology Community)](https://community.synology.com/enu/forum/1/post/134047)
  - [Speeding up Slow Time Machine Backups on macOS](https://accidentaltechnologist.com/mac/speeding-up-slow-time-machine-backups-on-macos/)
  - [How to back up files from Mac to Synology NAS with Time Machine](https://www.synology.com/en-global/knowledgebase/DSM/tutorial/Backup/How_to_back_up_files_from_Mac_to_Synology_NAS_with_Time_Machine) --> especially the "Enable AFP service" step improved my results
  - [Disable Throttling](https://apple.stackexchange.com/a/224967/339145), also suggested [here](https://discussions.apple.com/thread/7612681?answerId=31502039022#31502039022).
- Pro Users on Twitter (like [Catalin](https://twitter.com/catalinmpit)) use [PlaceIt](https://placeit.net/) to **create appealing banner and images**.

##  🐦 Tweets of the Week

{% twitter 1287423171247968256 %}
{% twitter 1287334419007705088 %}
{% twitter 1287438290069708803 %}
{% twitter 1286792220499214337 %}
{% twitter 1286741707455893504 %}
{% twitter 1286572325337522176 %}
{% twitter 1286564610326265856 %}
{% twitter 1285821124832616449 %}
{% twitter 1285555435811069953 %}

This is it for week 30/20.

See you next week - thank you. 👋🏻

Stefan

---

_If you like this article, chances are you will like my [newsletter](https://newsletter.natterstefan.me/) too. 🚀_

Let's stay connected on [_Twitter_](https://twitter.com/natterstefan) and [_LinkedIn_](http://www.linkedin.com/in/natterstefan).

---

_This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article._