If you like this article, you probably like my tweets and newsletter too. If you are curious, have a look at my twitter profile. 🚀

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.

Besides posting memes I asked my twitter followers two questions:

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.

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 on GitHub.

Get instant offline access to 200+ API documentation sets with 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 or the VS Code extension 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 for VS Code. But not only console.logs, 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 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 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 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, and you can contribute and add some more. They even plan to enable you to add your own (internal) code snippets along with the official ones.

Snippets in Chrome DevTools

Did you know that you can add snippets in Chrome DevTools? Victor de la Fouchardière 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 and I have some in my collection now.

📗 Books

I am reading "Clean Code" by Robert "Uncle Bob" C. Martin and listened to "Thinking, Fast and Slow" written by Daniel Kahneman 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).
• Ever wondered how you to use Generics with React.forwardRef in TypeScript? I did because I wanted to type the forwardRefed component. My solution is based on this great advice on StackOverflow.
• I am a fan of optimizing Pull Requests and Issues with templates and making commit messages homogeneous by following the Conventional Commits guidelines. 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 "[optional scope]: " (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. What is the benefit you ask? Besides standardizing the commit history, you can use tools (e.g. standard-version) to automate CHANGELOG generation with semantic versioning. 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 repository.
• Blisk - a developer-oriented browser looks interesting. Not sure if it is still maintained, the last update was released >394 days go.
• DBeaver 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 solutions for you.
• Collect, share, and organize your colors with Sip for macOS.
• Never accidentally quit VS Code with Quit Control for VSCode
• CodeSandbox 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
  • with the codesandbox cli
  • with GitHubBox.com
  • with browser extensions for Chrome or Firefox
• 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" 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 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)
  • Speeding up Slow Time Machine Backups on macOS
  • How to back up files from Mac to Synology NAS with Time Machine --> especially the "Enable AFP service" step improved my results
  • Disable Throttling, also suggested here.
• Pro Users on Twitter (like Catalin) use PlaceIt to create appealing banner and images.

🐦 Tweets of the Week

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 too. 🚀

Let's stay connected on Twitter and LinkedIn.

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