Tweepy

And so it happened that I wanted to reset my mute list. But that turned out to be a time-consuming task. On the iPhone as well as on the Mac it is tedious to click through all users and unmute them. For this reason, I looked around for a more efficient solution. Thereby I stumbled over Tweepy.

Tweepy is an easy-to-use Python library to access the Twitter API.

I want to tell you upfront that you need a Twitter Developer account and application to use Tweepy. To do this, you need to create an account on developers.twitter.com and create an application. Since Twitter has changed the process, this may take some time. You should keep that in mind.

However, it is the safest and best way to reset the mute list. Other alternatives with JavaScript scripts or browser extensions don't seem to be a good idea.

Install Tweepy

Before you can use Tweepy you have to install it.

pip install tweepy

Use Tweepy to Unmute People

You can either write your own Tweepy script or use the one I found when looking up "how to unmute people on Twitter" on Google. I used this gist by Miguel Garcia to reset my list.

import tweepy

consumer_key = ''
consumer_secret = ''
access_token = ''
access_token_secret = ''

auth = tweepy.OAuthHandler(consumer_key, consumer_secret)
auth.set_access_token(access_token, access_token_secret)

api = tweepy.API(auth, wait_on_rate_limit=True)
api.verify_credentials()

for u in tweepy.Cursor(api.mutes).items():
    print(f"Unmutting {u.screen_name}")
    api.destroy_mute(u.id)

Add the consumer_key and the other secrets from your Twitter application and start the script with python main.py.

You should see "Unmutting username" in the logs until Tweepy detects the rate limit. It will then stop and continue once it's safe again. Depending on the number of people on your mute list it can take some time to reset it.

That's it. Now you have reset your mute list and start over again.

Further Reading

• Tweepy Documentation — tweepy 3.10.0 documentation
• How to Make a Twitter Bot in Python With Tweepy – Real Python

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

Image: https://unsplash.com/photos/BcjdbyKWquw

You may think that a handstand is necessary to use asdf as the primary version manager, but I can assure you that is not necessary. With a few commands (FTR: I only talk about macOS in this article) you have asdf installed and ready to go.

Install

On their website, select your operating system and installation method. For this tutorial, I have chosen macOS and Homebrew. Execute the following commands in this order to install and set up asdf:

# install required dependencies
brew install coreutils curl git

# install asdf
brew install asdf

# add it to your shell
echo -e "\n. $(brew --prefix asdf)/asdf.sh" >> ~/.bash_profile

# set up bash completions
echo -e "\n. $(brew --prefix asdf)/etc/bash_completion.d/asdf.bash" >> ~/.bash_profile

Once you have installed the commands you should see which version you have installed when executing asdf --version. In my case, I get v0.8.0.

How to Install Plugins and Versions

One thing you need to know about asdf is that each supported language requires a plugin which in turn manages the versions of the language. Therefore, you must first install the necessary plugin and then the versions. Let's see how this looks like for Node.js.

# install the package
asdf plugin add <name>
# asdf plugin add nodejs

# get a list of installed plugins
asdf plugin list

# update plugin(s)
asdf plugin update <name>
asdf plugin update --all

# remove plugin
asdf plugin remove <name>
# asdf plugin remove nodejs

Now that we have Node.js installed, let's see how we can install one or more versions. Again, this can be done with a few simple commands.

# install version for package
asdf install <name> <version>
# asdf install nodejs 14.15.4

# list installed versions
asdf list <name>

# list all versions
asdf list all <name>

How To Set the Current Plugin Version

Once you installed the plugin nodejs with the required version you can choose to either set and use this version globally, in your current shell, or in the current project folder.

asdf global <name> <version> [<version>...]
asdf shell <name> <version> [<version>...]
asdf local <name> <version> [<version>...]
# asdf global nodejs 14.15.4

asdf global will write the selected version to $HOME/.tool-versions (docs). asdf shell only to the current shell, which can be different compared to other shells. asdf local writes the version to $PWD/.tool-versions. This is the file I check in in my repositories (example) to share the used versions of a project with other contributors.

When you set the version globally or locally you can verify that asdf has selected the proper version by running node --version. It should automatically switch it based on your settings now.

You do not need to add a script to your .bash_profile to do this automatically as you have with nvm(this is how you do this with nvm).

Legacy Support

You may ask yourself how you can use asdf when other colleagues still use nvm, do you? It is possible thanks to the legacy support asdf provides. Add a .asdfrc file to your home directory and specify the following settings. This will enable legacy support for files like .node-version or .nvmrc.

# .asdfrc
legacy_version_file = yes

But I am sure that you will want to ask your colleagues to switch to asdf too, once you got used to it. That's what I did at least.

Summary

Because asdf supports multiple languages almost out of the box, you can remove almost all the other version managers or gradually move to asdf. I highly recommend asdf, since it has made version management a lot easier for me. Check out their well-written docs for more details.

Feel free to reach out to me on Twitter or in the comments below if you have more questions and input.

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

Right upfront, I'm a fan of git hooks. But, they are not without controversy. At least in the teams, I was in. Not everyone recognized the benefits of Git Hooks. I think that Git Hooks - especially together with ESLint, Prettier, and others - enforce a code standard, -quality, warn about common errors, bad practices, mistakes and point out errors earlier.

Sure, these checks can also be performed with the help of Travis CI and others. This is true, but it takes a while for these checks to run, and in that time you have to wait for the results - before you can act. So I prefer to run them locally myself and see what I'm about to push to origin. This is especially the case if you are using Travis' smaller plans. You'd need to wait until the other tasks on Travis are completed before your commit is validated. This can take time, especially in bigger teams.

I often heard that engineers do not want to wait until the hooks are completed but want to push immediately. I can only counter that, if it is really necessary there is still the possibility to bypass the Git hooks with --no-verify. But to reject them from the beginning I think is the wrong way IMHO.

How to set up husky

Let's look at one known player in the node-world for git hooks: husky.

It is easy to install and prepare Git hooks with this command (docs).

# install husky and create a sample pre-commit hook
npm install husky --save-dev && npm exec husky init

The default git hook will run npm test when you commit. You can see the git hook in the ./husky folder husky created during the setup. We want to have a hook that automatically lints our code when we push commits. So let's add a git hook manually.

Note: I assume that you have installed and set up ESLint already.

With the following command, we add a pre-push hook.

# runs ESLint on git push (TODO: check)
npx husky add .husky/pre-push 'npm run eslint . "$1"'

If you commit and push a change now, you'll see that husky executes npm run eslint . first. When the command exits successfully it will allow the push, if not the push will be aborted.

Take a closer look a the .husky/pre-push file. It is easy to see how you can extend the generated hooks. Simply edit it and add new commands. This is how it looks in one of my projects now:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint
yarn test

This will first lint my code and then run the tests. Because this is a simple bash file you can do whatever you want to do with bash commands.

It is up to you what you want to do with git-hooks. You can lint commit messages, run tests, and more. Talk with your team and think about different use-cases. I am sure you can come up with some.

Summary

Once you add and use git hooks you probably want to take care of other use-cases as well. For instance, how can you bypass the hooks and how to disable them in CI. The husky docs are great, they did a decent job in explaining how to use husky in different use-cases. Take a look at them if you are lost.

All in all, I am a fan of git hooks, as I said at the beginning of this article. Git Hooks may slow down pushing or committing, but in the long run, you benefit from those few seconds you have to wait for the feedback of the hook.

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

So did we for our company projects. At my company marqant digital, we have decided to not build a custom-built application setup (with SSR, etc.) again, but to use an already existing solution. We were faced with a decision between Gatsby and Next.js. Although I think Gatsby is also great software, the requirements of the project favored Vercel's product.

And as with all other (micro-)services we build and use around our products, our React and Node applications need to run in a Docker environment. To expand my digital garden, and at the same time provide you with added value, I share with you our latest Dockerfile we use in our Next.js projects.

I assume you have Docker Desktop installed, have worked with Docker, and have a knowledge of the basics of Next.js.

Multi-Stage Dockerfile for Next.js Applications

Let's take a look at our current Dockerfile. You might know some of the things I do here already, but let's take a look at each one of them in detail. If you build a static site with Next.js you might not need all the stages and layers we use in our Dockerfile. But our app requires us to use Next.js this way. So keep that in mind, when using the solution below, please. Here's the complete Dockerfile.

ARG node_version=14.15.4
ARG node_image=node:${node_version}-alpine

# STAGE 1
FROM $node_image as builder

ENV NEXT_TELEMETRY_DISABLED=1

WORKDIR /app/

COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile --no-progress

COPY next.config.js ./
COPY components ./components/
COPY pages ./pages/
COPY public ./public/
COPY styles ./styles/

RUN yarn build

# STAGE 2
FROM $node_image as production

WORKDIR /app/

COPY --from=builder /app/package.json /app/yarn.lock ./
RUN yarn install --frozen-lockfile --production=true --no-progress

# STAGE 3
FROM $node_image

ENV NEXT_TELEMETRY_DISABLED=1
ENV NODE_ENV=production

WORKDIR /app/

COPY --from=production /app/node_modules ./node_modules
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./

EXPOSE 3000
CMD npm run start

What you see here is a multi-stage Dockerfile. By using multiple stages you can significantly reduce the size of a Docker image. This is due to the fact that you only copy what you need from the previous stage to the next one.

Let's take a look at each stage individually. Let's start with Stage 1.

# Because we use more than one stage, we use ARG
# to determine some global variables in our
# Dockerfile. In this case, our node_version and the
# selected docker base image.
ARG node_version=14.15.4
ARG node_image=node:${node_version}-alpine

# STAGE 1 is called "builder"
# We can reference this name later
FROM $node_image as builder

# disable Next.js' analytics (https://nextjs.org/telemetry)
ENV NEXT_TELEMETRY_DISABLED=1

# everything we do will happen in this folder in the image
WORKDIR /app/

# configs and dependency handling
COPY package.json yarn.lock ./

# install all dependencies
RUN yarn install --frozen-lockfile --no-progress

# copy source code of our app
COPY next.config.js ./
COPY components ./components/
COPY pages ./pages/
COPY public ./public/
COPY styles ./styles/

# build the app
RUN yarn build

Now we install only the production dependencies in Stage 2 as a preparation for the last and final Stage 3.

# STAGE 2
FROM $node_image as production

WORKDIR /app/

COPY --from=builder /app/package.json /app/yarn.lock ./
RUN yarn install --frozen-lockfile --production=true --no-progress

In Stage 3 we copy the results from Stage 1 (the finished application) and Stage 2 (the production node dependencies) together and start the app. This is what it looks like.

# STAGE 3
FROM $node_image

ENV NEXT_TELEMETRY_DISABLED=1
ENV NODE_ENV=production

WORKDIR /app/

# copy the production node_modules from STAGE 2
COPY --from=production /app/node_modules ./node_modules

# copy the result from the builder (STAGE 1)
# where we built the app into STAGE 3
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./

EXPOSE 3000
CMD npm run start

That is our Dockerfile. If you now run this image you have a production-ready Next.js application.

The easiest way to start the image is with the help of docker-compose and this docker-compose.yml file. Create the file and simply run docker-compose up. After the image is built, you should see some logs indicating that the app has started. You can now open localhost:3000 again in your browser and you are done.

# docker-compose.yml
version: "3.8"

services:
  app:
    build:
      context: .
    ports:
      - "3000:3000"

PS: Take a look at the official Next.js docs for further details about how to dockerize Next.js.

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

My Favorite Visual Studio Code Extensions

Bookmarks

Before I found Bookmarks, I had to keep important parts of the code in mind. This went well at first, but as the project grew in size, it became more and more difficult. Now I create bookmarks and jump back and forth so quickly.

-> https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

change-case

Do you often need to quickly change the case of your selection or current word? Then change-case is for you.

-> https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

Docker

Again and again, forget various Docker CLI commands. You might feel the same way. With this Docker extension for VS Code, you can perform various tasks in popular IDE. Build a Docker image, launch an image, view running containers, networks, and more. If you are struggling with CLI commands then this extension is very helpful.

-> https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

ESLint

I am a very big fan of Code Linting. With the help of ESLint, you not only ensure certain code quality but also make sure that a code style is maintained. Furthermore, it helps you to avoid common mistakes. This is a must-have extension for me.

-> https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

File Utils

It is important to have a standard for naming files and folder structure in a project. This makes it easier for newcomers to find their way around. If you accidentally renamed the new file, you can quickly fix the error with this extension.

-> https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

GitLense

GitLense is THE Git extension you want to have in my opinion. With GitLense you can quickly view the diffs of your current changes, see when the line was last edited (Line Blame), and more. Check out the marketplace page to see all the features.

-> https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Headwind

opinionated Tailwind CSS class sorter for Visual Studio Code

That is what Headwind is all about. Chris Bongers shared the extension with me and I love it. Thanks again. I was already looking for an extension like this in the past. Finally, my className values have all the same order.

-> https://marketplace.visualstudio.com/items?itemName=heybourn.headwind

indent-rainbow

The name may make you smile at first sight, but I can tell you that the extension is very helpful. You see at first glance and without having to think much about how the indentations are related.

-> https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Indenticator

Similar to indent-rainbow this extension highlights the current indent depth too. Especially in larger files, this is very handy.

-> https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator

IntelliSense for CSS class names in HTML

IntelliSense makes your life easier. It provides code-completion, content assistance, and code hints for your codebase. Visual Studio Code comes with IntelliSense built-in, but you can install additional ones, like this one. It provides CSS class name completion in HTML.

-> https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

Both can get you where you want to go. To get a sense of when your audience is most active and engaged, there are several tools. One was recently brought to my attention in one of my Twitter chats the Audience Insights in the Twitter Media Studio.

Audience Insights

As you can see from my example, my audience is more engaged towards the evening. For this reason, I have also timed my tweets for the evening.

What do your audience insights look like? Look at them regularly and take appropriate steps. The best thing about the tool? It's free.

-> https://studio.twitter.com/audience-insights

Alternative Tool

Daniel Rotter made me aware of a tool I use a lot but forgot to mention. 🤦‍♂️

If you cannot access Twitter Audience Insights use the alternative: followerwonk.

Pro Tip 🔥

I have an additional tip for you. So that you don't have to set an alarm clock to send your tweets at the right time, you should use Feed Hive. I've been using Simon Høiberg's solution for a while now. I can schedule my week ahead, prepare tweets, have them retweeted automatically, and more. It's fantastic. You should definitely check it out and include it in your growth strategy.

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

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

Regardless of this, I went in search of a solution for you and found a few. Several one-liners are at your disposal.

How To Add a Page View Counter

No matter which one you use, they all end up being very similar. With a one-liner, the badge is added and from then on every load of the badge counts as a pageview. So you just have to consider if you think the pageview service will persist, so you do not start from 0 again. But I do not have an answer for that. I have decided on one, and let's see how long that lasts. I use the pageviews on my profile only as an indicator of whether it rises, the absolute number interests me only limited I must say.

On my GitHub profile you see a page view counter from antonkomarev/github-profile-views-counter. All I had to do, to add it to my profile was adding this line (Note: I also changed the color with &color=<value>):

[![GitHub Views](https://komarev.com/ghpvc/?username=natterstefan&color=FAC151)][1]

Now I have a page view counter on my GitHub profile. That's it. You can get your own counter by adding your username.

![GitHub Views](https://komarev.com/ghpvc/?username=<username>)

Thanks, Anton Komarev for creating this!

Alternatives and DYI Solutions

I promised you to present more than one solution because there are several ways to Rome. Here are a few alternatives with the same result.

• Ÿ HŸPE
• arturssmirnovs/github-profile-views-counter
• jwenjian/visitor-badge
• Add a visitor count on your GitHub profile with one line of Markdown
• or you create one yourself with the help of this tutorial Quick GitHub profile visit counter

Do you use another one? Let me know in the comments below, please. 👇

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

So far so good, but did you know that you can go one step further and ask your readers to follow you almost immediately when they click on the link? Isn't that your actual goal and also the intent when they click on the link?

It is a simple change that needs to be done once and results in immediate benefits. I am sure you can benefit from this Growth Hack, that is why I want to share it with you.

Let's take a look at the following example. Do you spot the difference between this link to my Twitter profile and this one? If you clicked on the second link you saw a follow popup on Twitter. Cool, isn't it? If not, try it now.

What about YouTube? Which link do you like more: this link most people use or this one you going to use from now on?

How To Implement It For Your Site?

It is actually very simple. This is the link to use this Growth Hack:

• https://twitter.com/intent/follow?screen_name=<username>

Simply replace username with your username and you are good to go. The link above looks like this:

• https://twitter.com/intent/follow?screen_name=natterstefan

All you need to do now is updating all your links to your Twitter account on your website, Blog, YouTube channel, etc.!

How To Use This On YouTube?

It works similarly on YouTube. Instead of using

• https://www.youtube.com/<channelId>

you should use this link

• https://www.youtube.com/<channelId>?sub_confirmation=1.

The link above for my example looks like this:

• https://www.youtube.com/natterstefan?sub_confirmation=1

Start Growth Hacking Now 🔥

I hoped you like this simple but effective Growth Hack. If you want more Growth and Productivity Hacks consider subscribing to my newsletter.

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

What Are GitHub Templates?

GitHub templates are boilerplates for issues and pull requests that can be selected when creating them. This allows you to create a predefined structure for bug reports, feature requests, and discussions.

I am sure you have noticed that various larger open source projects always have the same structure for issues and pull requests? Let's take a look at EditorJS for instance. One of my favorite editors. Whenever you open an issue, you see this interface:

This gives maintainers a clear and structured way to deal with new reports. The structure makes new issues comparable and provides a standardized framework. This also helps more inexperienced issue reporters to mention the essentials and makes it easier for the maintainers to find a solution.

How to Create GitHub Templates

Like many things on GitHub - you can tell I'm a fan - creating templates is not hard. All you need is a .github/ISSUE_TEMPLATE folder where you put the templates.

A very simple and basic template looks like the following example. The name and about metadata are mandatory. But there are others, which we will discuss later.

---
name: Bug report
about: Create a report to help us improve our package
---

<!-- Enter text here -->

If you save this now as .github/ISSUE_TEMPLATE/bug_report.md, you'd have your first issue template ready.

--> You can read more about how to create them in the official docs.

Let's have a look at more examples by looking at EditorJS templates in detail. They have created multiple templates for "Bug report", "Discussion", "Feature request", "Issue: Discussion" and even external links pointing to their Telegram chats. This is their discussions.md template:

---
name: Discussion
about: Any question about the Editor.js to discuss
title: ''
labels: discussion
assignees: ''

---

The question.

Why and how the question has come up.

<!--
🤫 If you like Editor.js, please consider supporting us via OpenCollective:
https://opencollective.com/editorjs
-->

You already know name and about. As you can see, you can also add a default title, add existing labels, and even assign contributors (assignees) already to newly created issues. This can be very helpful when you have one in your team who's responsible for taking the first view at new issues, feature requests, or questions. In the example above you also see that they make use of HTML comments (<!-- (...) -->). Only the creator of the issues see's this comment, or if you edit the issue, but it's not visible to others. You can use this to add additional information or instructions. They used it to promote their OpenCollective link.

Speaking of links, as you can see from the first screenshot of the article, you have also added external links. Let's see how this works. Apparently, it needs the following file for that: .github/ISSUE_TEMPLATE/config.yml.

blank_issues_enabled: false
contact_links:
  - name: Team
    url: mailto:team@codex.so
    about: Direct team contact.
  - name: Editor.js Telegram chat
    url: https://t.me/codex_editor
    about: Telegram chat for Editor.js users communication.
  - name: Editor.js contributors Telegram chat
    url: https://t.me/editorjsdev
    about: Telegram chat for Editor.js contributors communication.

By setting blank_issues_enabled to false your contributors will have to use one of your issue templates. If you set blank_issues_enabled to true, people will have the option to open a blank issue.

contact_links contains an array of objects containing name, url and about. This is it, you have now added external links to your GitHub issue templates as well.

--> Docs: Configuring the template chooser

For pull requests, the whole thing is even simpler. You create .github/PULL_REQUEST_TEMPLATE.md and insert the template structure. As far as I know, no metadata is needed here. So your template can look like this directly:

# [STORY](http://app.clickup.com)

## What I did

## How to test

## Screenshots

What Is The Value Of GitHub Templates?

For me, the value of GitHub templates is quite clear and I use them in all my newer public repositories. Providing a structure and support for issue creators is important to me and helps not only them but me as well!

Especially pull request templates, which in my experience are relatively more common in closed source projects, have proven to be very helpful. There may be different opinions on if and how much information the description of a pull request should contain. I believe that the more helpful details the creator adds now - using the template structure - the more helpful it will be in the future when it comes to understanding the context of a change. This has already helped me with one or the other session in the git history. Don't be too lazy to add details. Your future self and colleagues will thank you.

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

Visualize Your GitHub Contributions With Skyline

I am happy that I found this tweet from my friend Simon, sharing GitHub Skyline.

If you know me, you know that this tool immediately excited me. You enter your GitHub username and you get a skyline with the public contributions presented as skyscrapers. Great idea! It's a fun way to encourage people to have more contributions on GitHub.

What does your skyline look like? Here is my GitHub Skyline from 2020. 2021 is in progress.

GitHub Isometric Contributions

This is another interesting extension for Chrome. It visualizes your GitHub contributions graph and creates an isometric pixel view of the public data on your profile. Here is mine:

--> Get the Extensions

PS: Did you know that you can support me on GitHub and become my GitHub sponsor?

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

Malicious code can be inserted into any GitHub action, even those which are tagged.

With these words, Julien Renaux's article titled "Use GitHub actions at your own risk" begins.

Before reading this article from late 2019, I gave little thought to the potential risks from using GitHub Actions (e.g. one that adds your latest blog posts and YouTube videos to your GitHub profile). I mean doesn't that sound familiar? You search for a certain GitHub action, find the right tutorial, set up the yml file, and stare at the result. How many times have you looked at the source code of the action to see what happens to your data and secrets?

Have you never wondered if your secrets are used elsewhere? There have been similar scandals with npm packages in the past. It happens again and again that potential malware is infiltrated and no longer does what it promises. This makes it all the more important to pay attention to the security of your data, even with GitHub Actions. How can you do that?

The Problem - Maintainers can update tags and branches anytime

First, let's look at the problem. Tags and releases on GitHub can be deleted and recreated at any time. If you install the innocuous code for v1.2.3 today, the same version number may be infected tomorrow. Julien has drawn attention to this problem in his article. He has also created an example repository for it. Okay, now we know the problem. How do we fix it?

The Solution - Use commit hash instead of release tags

Before that, I would like to say something about the following solution. Even if you do this in the future, you need to be aware that it might already contain malicious software. Install GitHub Actions only from trusted developers or look at the source code carefully beforehand.

Okay, so what's the solution?

Instead of using the release tag, or as other GitHub Actions suggest the main branch, use the commit hash (SHA-1) in the GitHub Action configuration. It is unique and cannot be changed afterward.

Here is an example:

name: Blog Posts

on:
  schedule:
    # Runs every hour
    - cron: '0 * * * *'

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # instead of:
      # - uses: gautamkrishnar/blog-post-workflow@master
      - uses: gautamkrishnar/blog-post-workflow@94531d3fc177a2753683dc4342c10aa4420fc4f1
        with:
          feed_list: "https://blog.natterstefan.me/rss.xml"

Instead of pulling the code from @master I tell GitHub to pull and use @94531d3fc177a2753683dc4342c10aa4420fc4f1 instead.

This ensures that you do not install and use a newer version without your knowledge. You have to make a conscious decision to update and you can look at the code beforehand at your leisure. This way you and your data are on the safe side.

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

We had a backlog list for ideas of any kind, the Epics, a Queue, Working, Review, and Done list. Whoever was responsible for a story had their avatar on the ticket. At a glance, it was quickly visible who was working on what.

But when it came to quickly see the status of a card (e.g. Accepted), Trello's tools were not sufficient.

Trello does have a label system, but they quickly get lost. And so Manfred came up with the idea to create new users and give them a matching status avatar. He created a user for Estimate, Accepted, Blocked and Question. These users were used by us and our customers to quickly determine the status of a card.

A typical flow then looked like this:

• The PO and the customer created new cards and added the "Estimate" to them.
• The team estimated the effort of the card and added the points to the title.
• The PO added a developer (e.g. me) to a card in the queue column, when it's ready.
• I moved that card to "Working" as soon as I started with it.
• Once I had the story of the card implemented, I moved it further to Review and again added the PO or the customer.
• When they reviewed the story, they took themself away and added "Accepted" - or "Blocked".

This way, we could quickly see at the next scheduled release whether all stories were approved or not.

This has pleasantly expanded the workflow with Trello and made it easier without having to use filters to any great extent.

Do you use Trello? Do you have similar tips and tricks in store? Let me know, please.

PS: Now I use ClickUp.

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

The solution - npkill

Easily find and remove old and heavy node_modules folders ✨

(text and gif source)

That is exactly what npkill is all about and what it is. It looks for all node_modules (sub-)folders starting at the path where npkill was executed, suggests them for deletion, and removes selected ones when you confirm the selection. This way you can very quickly remove unnecessary clutter. Think of it like docker system prune only for node_modules.

How to use npkill

You do not need to install npkill as you can simply start it with:

npx npkill

You will see a list of node_modules after it finished the scan. Move up and down with ↓ ↑ and hit Space to delete the selected folder. To exit, hit Q or Ctrl + c. Now you can watch npkill doing its job.

There are more options available, which are listed on the npm page of npkill.

Two more things 🥳

Whilst doing my research for this article, I stumbled upon some other interesting commands I want to share with you.

How to count installed packages

Do you know how many packages you have installed for your app? I didn't and was surprised about the result when I used this command.

# https://stackoverflow.com/a/57109195/1238150
npm ls | sed '/deduped$/d' | wc -l

If you want to know more about this complex command, take a look at the explanation on explainshell.com.

How to find unused packages in your package.json

I found this tool called Depcheck that is a tool for

(...) analyzing the dependencies in a project to see: how each dependency is used, which dependencies are useless, and which dependencies are missing from package.json.

Similar to npkill you can run it without installing:

npx depcheck

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

I promised Chris and Bruno on Twitter the other day that I would show them more of my workflows and try to convince them to buy Alfred's Powerpack. Today I'll show you an excerpt from my 50+ workflows. Start small first.

The list of workflows I have today is a mix of productivity tools for Web Developers and Mac Users in general. All you need is Alfred and as I said Alfred’s Powerpack. Let's go!

Alfred Workflows

Bitly URL Shortener

Attentive readers and Twitter followers may have noticed that I have my own short domain: nttr.st. This points to Bitly, which I use as a URL shortener service. With this workflow, I create short links without visiting Bitly. All you have to do is install the workflow, insert your Bitly Access Token and you're good to go.

-> Get the Workflow

Can I Use

Can I use this feature in Safari (the new IE)? I have asked this workflow many times and was promptly directed to the appropriate CanIUse page.

-> Get the Workflow

Lorem Ipsum

This is definitely one of my most used workflows. How often do you need a placeholder text? With this workflow, I have one right away.

-> Get the Workflow

Refresh Wifi

"Have you ever turned your WiFi off and on again?" this question is not as classic as the one with the computer restart, but nevertheless this skill has already solved one or the other network problem for me. With a few taps on the keyboard, the WiFi is first turned off and then turned on again.

-> Get the Workflow

Shush!

Meetings on Zoom and Co. are no longer a rarity. Every day I spend time in various apps to see my work colleagues, customers, and friends. Some have easy to remember shortcuts to mute the microphone, others do not. The problem is that they all use different shortcuts to quickly mute themselves. That's why this skill is very helpful for me. With my own keyword, I can now toggle the microphone. A tip if you use this workflow, check out this issue to fix a volume issue.

-> Get the Workflow

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

HTML of a Tailwind Component

To do this we need a Tailwind component. Let's take an example from Tailwind Playground. The component that is presented looks like this:

This is the associated HTML:

<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <img src="/img/logo.svg" class="h-7 sm:h-8" />
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">
            <p>An advanced online playground for Tailwind CSS, including support for things like:</p>
            <ul class="list-disc space-y-2">
              <li class="flex items-start">
                <span class="h-6 flex items-center sm:h-7">
                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="ml-2">
                  Customizing your
                  <code class="text-sm font-bold text-gray-900">tailwind.config.js</code> file
                </p>
              </li>
              <li class="flex items-start">
                <span class="h-6 flex items-center sm:h-7">
                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="ml-2">
                  Extracting classes with
                  <code class="text-sm font-bold text-gray-900">@apply</code>
                </p>
              </li>
              <li class="flex items-start">
                <span class="h-6 flex items-center sm:h-7">
                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="ml-2">Code completion with instant preview</p>
              </li>
            </ul>
            <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
          </div>
          <div class="pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7">
            <p>Want to dig deeper into Tailwind?</p>
            <p>
              <a href="https://tailwindcss.com/docs" class="text-cyan-600 hover:text-cyan-700"> Read the docs &rarr; </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

As you may realize or know at first glance, we can't use this HTML directly in React. This is because React uses className instead of class among other things. So now let's look at how you can still get components - at least a first draft - into the React world in just a few simple steps.

transform.tools

To achieve this we use the incredible website transform.tools! On this site, you can transform among other things HTML to JSX.

Open the site, navigate to HTML to JSX and copy 'n' paste the HTML of the Tailwind component into the HTML area on the left. The result then looks something like this:

All you have to do now is simply copying the JSX output on the right into your React app and open your app in the browser.

And lo and behold, our component already looks almost like the one in the example. All you have to do now is to insert the source of the image correctly, adjust it here and there and you are done. But I leave that to you. 😄

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

Sooner or later they will get you. You drive too fast and bang, there is an expensive photo of you. I'll show you a simple iOS hack today to avoid getting speeding tickets. All you need is an iPhone, an app that warns you about speed cameras, and the iOS Shortcuts app.

FTR: Sorry Android users. I don't have an Android phone but I'm sure it works there somehow. Feel free to add the "How to" for Android in the comments below!

Please drive carefully and follow the traffic rules. This article is not intended to encourage you to drive faster. It is only meant to inform you how to use iOS shortcuts. Use this tip at your own risk.

Install a Speed Camera Warning App

First, we install a speed camera warning app from the App Store. I use Blitzer.de for this. The app works great in Austria, Switzerland, and Germany. There is a free and a paid version for a few Euros. In this case, it is a good investment.

Setup iOS Shortcut

Open the Shortcuts app on the iPhone and select Automation in the bottom menu. Press the plus symbol in the upper right corner, select Create Personal Automation, and search for CarPlay. We want the shortcut to be executed whenever the Phone connects with CarPlay.

Now you should see the Actions screen with an Add Action button. Press the button and search for Open App. You will come back to the Actions overview screen. Click on the blue Choose text and select your speed camera warning app. Press Next in the upper right corner, deactivate Ask Before Running and press Done. That's it.

In the future, your iPhone will automatically start the app when you connect it to CarPlay. Simply unlock the phone when you connect your phone so it can start the automation.

You don't have to remember to open your speed camera warning app - iOS does it for you.

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect

The principle is the same on all platforms. You open the validator page, paste your link and press the validate button. Then you will see the result a few seconds later. You are presented with the current version that the platform - e.g. Twitter - has cached. Generally, the check with the validator triggers new indexing and creates a new cache entry. So you have 2-in-1 debugging and cache invalidation with one click.

Here are the links to the validators of Twitter, LinkedIn, and Facebook.

Twitter

-> URL: https://cards-dev.twitter.com/validator

Are you on Twitter? Let's connect!

LinkedIn

-> URL: https://www.linkedin.com/post-inspector/

Do you have a profile on LinkedIn? Then let's connect!

Facebook

-> URL: https://developers.facebook.com/tools/debug/

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

You want Productivity and Dev Hacks? 👇🏻

Scenario

Let’s assume you want to redirect from old-domain.com to new-domain.com.

Step 1 — Update DNS Settings

First, make sure you manage the domain you want to redirect from on Cloudflare. Next thing you do is adding the following DNS settings:

In this case, we redirect the root (@) and www of the domain. Point it to a dummy domain, in this case, 192.1.2.3 (got this from here). It’s important that you set the proxy status to Proxied.

Step 2 — Set up Page Rules

Finally, we add a redirect page rule. When you are not sure which status code fits, read “301 vs. 302 Redirects & SEO: The What, Why & How” on searchenginejournal.com.

In this example, every hit on the old domain (no matter if you open the site with or without www or with https or http) is redirected to the new one.

What does this page rule do now? If the URL matches it will forward the browser to the new target. The following examples will be redirected:

• old-domain.com => https://new-domain.com
• www.old-domain.com => https://new-domain.com
• old-domain.com/hello => https://new-domain.com/hello
• www.old-domain.com/hello => https://new-domain.com/hello

That’s it. You successfully redirected a domain to another with Cloudflare. Congrats!

ColorSlourp

Attentive readers of my newsletter already know this tool. I mentioned it in my 31st edition of the newsletter - ColorSlourp.

ColorSlourp can be installed and used free of charge. It has a PRO version with various features, but so far I haven't needed it. I just want to get to colors quickly.

Once installed, you only have to open the tool and select the pipette. You will immediately see the various color codes (e.g. RGB) when you hover over various elements on your screen. A click on the element copies the displayed code into your clipboard. From then on you can continue to use it. This is very quick and incredibly practical.

There are certainly other tools besides ColorSlourp, such as Sip. I have not tested other alternatives yet, as this tool is sufficient for my use cases. What about you? Which other color pickers have you already tried and can you recommend?

You want more Productivity Hacks 👇🏻?

And that is precisely where the problem lies from time to time. Especially when working in teams. Some of your teammates may not have Prettier installed and keep sending you strangely formatted code. Others may not use Stylelint and don't know the dos and don'ts of CSS, which it recognizes. All this can lead to frustration, especially for the architects of the repository and project. After all, they put a lot of thought into the setup.

For this reason, I will show you today how you can use the .vscode settings folder to give your workspace a uniform basis and avoid certain problems, or at least point them out to contributor.

.vscode

You may have seen the folder a time or two in repositories: .vscode. In short, this folder contains the settings that VS Code applies to this workspace.

A VS Code "workspace" is usually just your project root folder. Workspace settings as well as debugging and task configurations are stored at the root in a .vscode folder. (source)

This means that this folder will not change your general user settings, only the settings of the current workspace. Even though many developers add the folder to the .gitignore, I am increasingly deviating from this and check in the folder to ensure clarity in teams.

FTR: I know there is another standard to configure editors with .editorconfig, but I'll focus on VS Code in this article.

Here is a rough overview of the files you can store in the folder:

• Editor and extension settings for linters and code formatting tools to enforce the code style used in this repo -> settings.json (docs)
• Run and debug configurations -> launch.json (docs)
• Shared tasks managed with VS Code -> tasks.json (docs)
• Recommended list of extensions for the workspace -> extensions.json (docs)

I'll focus on settings.json and extensions.json for now and cover the other ones in a follow-up article.

Example settings.json

{
   "editor.rulers": [
     80,
   ],
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.eol": "\n"
}

This is an excerpt of a settings.json, which I now continuously add to projects. It ensures in this case that spaces, a tab size of 2, and lf as the end of line setting are used. Additionally, a ruler is shown at 80 chars to visualize the maximum width a line should have. As soon as someone opens the editor these settings get applied. This is very helpful to have a clear and common understanding of certain rules.

Example extensions.json

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens",
    "esbenp.prettier-vscode",
    "pflannery.vscode-versionlens",
    "stylelint.vscode-stylelint",
    "syler.sass-indented",
    "wayou.vscode-todo-highlight",
    "ziyasal.vscode-open-in-github",
  ]
}

This file is definitely one of my favorites: suggest extensions for a workspace.

I am often asked by colleagues "Which extension do you use here? Why is it automatic for you?" - and that is exactly where the extension.json is helpful. Once added, it suggests extensions to every developer that has not yet been installed. One-click on "Install" and the suggested extensions are installed. You can find a list of the extensions I have installed here.

There are several ways to add an extension to the file. Either you go to the VS Code Marketplace and copy the ID of the extension next to its name, or get it from within your VS Code. Open the Command Palette -> select Extensions: Show Installed Extensions -> find the extension and open the context menu -> select Add to Workspace Recommendations).

That's it. Now you have a base foundation for working in a team.

Questions and Feedback

Do you use these files too? What settings have you agreed on? Let me know in the comments below.

Let's connect