Forem: Stefan Natter 🇦🇹👨🏻‍💻

How To Add Custom Code Snippets in VS Code

Stefan Natter 🇦🇹👨🏻‍💻 — Tue, 16 Mar 2021 06:33:12 +0000

Those who know me and my articles know that I am a fan of VS Code. The editor supports me in my work on several levels. It is therefore all the more important for me to understand the features of the editor. I read through every changelog and test new features. On Twitter, I follow Matt Bierner who always publishes new tips and tricks. I have already learned a lot from him.

For some features in the VS code, you need extensions. VS Code does not provide everything out of the box. And yet there are features for which you don't need another battery-crushing extension. For example, for code snippets.

There are some extensions in the VS Code Marketplace that offer you hundreds of code snippets. I have already tried some of them. I currently have Snip Snap installed. Although I'm happy with it, there are always use-cases I want to have as a snippet independent of extensions. Because extensions come and go.

Do you remember my last VS Code Tip about console logging with Turbo Console Log? This extension can also be mapped as a snippet to a certain extent. Let's see how that works.

Setup

First of all, open the Snippet Manager in the Command Palette. To do this, type CMD + Shift + P (CTRL on Windows) and select "Preferences: Configure User Snippets". Now you have to choose a language for which you want to create the snippet, or you create a global one. In our example, I choose javascript.json.

It should look something like this if you have not set up any snippets yet:

{
  // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  //    "prefix": "log",
  //    "body": [
  //        "console.log('$1');",
  //        "$2"
  //    ],
  //    "description": "Log output to console"
  // }
}

Let's now look at a common use case. You want to quickly create a console.log for a variable. This is a common scenario for me. Initially, the Turbo Console Log extension did not exist, so I resorted to code snippets.

And so I created a snippet with the prefix logvar. This creates a new line with console.log('\\n>> ', { }); // eslint-disable-line. This is the corresponding snippet in my javascript.json file:

{
 "Print to console": {
    "prefix": "logvar",
    "body": ["console.log('\\n>> $2', { $1 }); // eslint-disable-line", "$3"],
    "description": "Log variable to console"
  }
}

Let's take a quick look at the snippet itself. The $n placeholders stand for the tab Index of the cursor. First, my cursor lands at $1 when the snippet is inserted, then the next tab lands at $2 and so on. You can use this to make it easier for you to insert values in your snippet.

Okay, let's take a look at the snippet in action.

Snippets can help you to support your workflow and relieve you of certain tasks. Use them to have frequently entered code snippets available as shortcuts. You can also enter more complex ones, you just have to pay attention to the formatting of the output.

As a final case, here is a more comprehensive example that creates ready-to-go code for a test with React, Jest, and Enzyme.

{
  "Jest test": {
    "prefix": "jd",
    "body": "import React from 'react'\nimport { mount } from 'enzyme'\n\nimport Component from './component'\n\ndescribe('Component', () => {\n\tit('renders', () => {\n\t\tconst wrapper = mount(<Component />)\n\t\texpect(wrapper.html()).toBeTruthy()\n\t})\n})",
    "description": "Inserts a dummy and example jest test code."
  }
}

The final result looks like this:

I hope I could show you that you can also create code snippets without extensions and thus make your daily work easier.

Questions and Feedback

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

How to add your GitHub activities to your GitHub Profile

Stefan Natter 🇦🇹👨🏻‍💻 — Tue, 09 Mar 2021 09:00:08 +0000

Yesterday I showed you how to share your blog posts or YouTube videos on your GitHub profile. Today I have another tip for you on how to take your GitHub profile to the next level.

Especially if you contribute to open source projects or have published your own, you will always be active on GitHub. You write comments or merge pull requests. Just like blog posts, you can add these activities to your GitHub profile. This gives recruiters and other visitors to your GitHub profile a quick picture of what you've done recently. In this case, we also use GitHub Actions to get there.

GitHub Action Setup

This time we are using an action from James George: github-activity-readme. He contacted me on Twitter months ago and asked if I could test his GitHub Action. I gladly did.

If you haven't set up your GitHub profile yet, here's a quick reminder:

create a GitHub repository with your username: https://github.com/natterstefan/natterstefan
add a README.md
the contents of README.md will be displayed on your profile (e.g. github.com/natterstefan) as soon as you commit and push changes.

Now paste the following content into a new GitHub action file under the following path .github/workflows/update-readme.yml.

name: Update README

on:
  schedule:
    # Runs every 30 minutes
    - cron: '*/30 * * * *'

jobs:
  build:
    runs-on: ubuntu-latest
    name: Update this repo's README with recent activity

    steps:
      - uses: actions/checkout@v2
      - uses: jamesgeorge007/github-activity-readme@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

And finally, add the following into your README.md wherever you want to place the GitHub activity feed:

### Recent Activity

<!--START_SECTION:activity-->
<!--END_SECTION:activity-->

Once the GitHub Action was triggered according to your schedule you will see a new section in your GitHub profile similar to mine:

There are some more options for this GitHub action, which are documented in the repository.

That's it. Now you have your GitHub activities on your profile! Congrats!

Questions and Feedback

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

How to present your latest blog posts and YouTube videos on your GitHub profile

Stefan Natter 🇦🇹👨🏻‍💻 — Mon, 22 Feb 2021 06:33:44 +0000

GitHub profiles got a big update in 2020. A GitHub profile can do more than just show your public repositories and your activities. You can add more information about yourself and your work to your profile. I show you how to do this in another article. Today I'll show you how to turn your GitHub profile into a promoter of your YouTube videos and blog posts in just a few minutes.

How to create a GitHub Profile Page

The very first thing you need to do is set up your GitHub profile. To do this, you need to create a new repository with the same name as your username. This looks something like this for my account: https://github.com/natterstefan/natterstefan. All you need now is a "README.md" file in which you enter the content. Push the changes into the repository and you will see the new data on your page. Here is my profile: https://github.com/natterstefan.

How to add blog posts and more to your GitHub profile

To do this we need to set up a GitHub action. As the name suggests, an action performs one or more tasks. In this case, we want the action to take an RSS feed as input and render the content on the profile as a list. Fortunately, we don't have to set this up ourselves but can use ready-made GitHub actions. For my profile, I use the following action: gautamkrishnar/blog-post-workflow. It also contains further documentation and setup notes.

First, you create a new folder .github/workflows in your repository. In this folder, we now create a file blog-post-workflow.yml. This tells GitHub that we want to set up a workflow. All that is missing is the content, and this one is also very simple.

name: Blog Posts

on:
  # Run workflow automatically
  schedule:
    # Runs every hour, on the 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
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          # comma-separated list of RSS feed urls
          feed_list: "https://blog.natterstefan.me/rss.xml"

The GitHub Action must now know where to place the result in the README. To do this, insert this snippet into your README.md.

## 📕 Latest Blog Posts

<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

All we have to do now is commit the change, push it and wait for the action to run. The result will look similar to the one you'll see on my page:

How to use Hashnode's RSS Feed

Each blog on Hashnode has an RSS feed attached automatically. Just add /rss.xml to the domain to view it (e.g. https://blog.natterstefan.me/rss.xml).

How to set up YouTube

As for YouTube, you can either use a YouTube Playlist or the YouTube Channel Video list as an input.

https://www.youtube.com/feeds/videos.xml?playlist_id=<playlistId>
https://www.youtube.com/feeds/videos.xml?channel_id=<channelId>

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.

Speed up your Typing on iOS with Text Replacements

Stefan Natter 🇦🇹👨🏻‍💻 — Fri, 12 Feb 2021 07:04:51 +0000

Create shortcuts that expand to words, sentences, or emojis instantly.

Anyone who uses their smartphone every day to write notes, compose tweets or answer emails knows this. Typing on the devices is tedious and cumbersome. This can be remedied, at least in part, with "text replacements". These user-defined shortcuts instantly expand when typed, saving you time and increasing your productivity.

What can you use Text Replacements for?

You can use Text Replacements for your own telephone number, for the e-mail address, or Twitter handles of your friends or bots. When asked if I want to email my phone number to a business partner, I simply type .tel. OS replaces it with my phone number, I press send and that's it.

It's the same thing on Twitter. Among other things, I use threadreaderapp for threads. Whenever I want to save and send a thread, I type .thread and automatically get back @threadreaderapp unroll! I don't have to remember what the bot is called. I also don't have to remember a new Twitter handle if I change services.

How to set up Text Replacements

In Settings, go to General > Keyboard > Text Replacement. Tap the + button and you’ll see Phrase and Shortcut fields.

Pro Tip: You can also add and modify them on macOS. Look for Keyboard in your System Preferences, open it, and select the Text tab.

Define a System

Shortcuts should be easy to remember. Don't make it too complicated and too complex. You will need a system so that the shortcuts don't get in the way of your normal writing. So I put a "." (dot) prefix on all my shortcuts. This way I can write "email" without always having my email address inserted.

Text Replacement Ideas

Here are some of the common Text Replacements I use:

.email -> example@example.com
.fistbump -> 🤜🏻🤛🏻
.omw -> on my way
.tableflip -> (╯°□°）╯︵ ┻━┻
.tel -> +123 123 123 123
.thread -> @threadreaderapp unroll
.tw -> https://twitter.com/natterstefan
apple -> 

You can use Text Replacements for all sorts of things:

URLs of your favorite websites
Twitter handles of your friends
Twitter handles of bots
Emojis
List of Tags
Abbreviations (e.g. "btw" -> "by the way")
and more!

I'd love to see some of your Text Replacements! Please, share them in the comments below with me.

Pro Tip for Content Creators

As a content creator, you often add a list of tags to your tweets, LinkedIn posts, or articles. You can also conveniently save these tags as Text Replacements and always have them at hand. This is especially helpful when you are typing on your smartphone. You no longer have to switch apps to copy out the list of tags. No, you just type in .tagsDocker and voilà you get #docker #dockerhub #dockerhub #dockerproducts back!

Questions and Feedback

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

Let's connect

--> Sign up for my newsletter.

Make Console Logging in VS Code 10x Faster with Turbo Console Log

Stefan Natter 🇦🇹👨🏻‍💻 — Tue, 09 Feb 2021 20:10:08 +0000

(...) make debugging much easier by automating the operation of writing meaningful log message.
(source)

The first sentence on the Turbo Console Log (TCL) Marketplace page sums it up very well. Debugging becomes easier with TCL because it helps you log information quickly. This process is automated and can be started with a shortcut. And last but not least, TCL provides the logs with context. This context helps you to find out where the information of the log is located in the code. Let's look at an example.

Example

For the example, I quickly set up a Create-React-Application and added a useEffect which logs the result of Date.now(). You see me selecting the variable and then executing the TCL command from the command line. You can also use a shortcut, but for the simplicity of the example, I used the command directly. It shows you that this is also possible.

Once I executed the command TCL created the console.log for me with the requested information. The information is then available to me in the browser for further debugging.

Settings

Open the Settings of VS Code (e.g. with CMD + , on macOS) and search for "Turbo Console Log". On the settings page, you get a list of options to customize TCL according to your needs. You can add or remove context, add a prefix to the logs, and more. Make it yours.

Download the Extensions

Get the extension for VS Code here.

Do you like my Content?

Make sure to subscribe to my newsletter and never miss new productivity tips, software engineering news, and more!

Dash + Alfred - instantly search offline documentation sets for 200+ APIs, 100+ cheat sheets, and more!

Stefan Natter 🇦🇹👨🏻‍💻 — Sun, 07 Feb 2021 10:33:49 +0000

I am a big fan of productivity tools, which make my life easier. Anything that gets me where I want to go with just a few clicks or shortcuts is at least worth a test phase. So it's no surprise that I'm a big fan of Alfred - the Spotlight alternative for macOS. In this article, I don't want to go into the advantages and why the Alfred Powerpack is worth every penny, but rather jump straight into today's topic.

Who hasn't experienced that feeling of forgetting the syntax for a certain task in a programming language? Now you are faced with the problem of finding the answer. What do you do, like many others? Sure, you google it. A few clicks in the results later, you are hopefully at your destination and have found the famous green tick on StackOverflow. But what if I told you that there is an alternative that works even offline?

Let me introduce you: Dash - the "Indispensable masterpiece for developers." (Stefan Fürst, Media Atelier Maker of GrandTotal).

Dash gives you 200+ API documentations instantly with offline access! Together with the matching Alfred workflow, any search in the Dash library is just a few keystrokes away! I'll show you how in just a few steps.

Setup

First of all, you need to install Alfred (macOS only) and Dash. And for the whole thing to work, you also need the Alfred Powerpack. If you're not convinced right away, install the free version of Alfred and get warmed up with the program first. You'll see that you'll want the Powerpack in the end.

Once you've installed the two apps, all you need is the workflow to go with them. It's very simple. Open Dash and go to Preferences > Integration > Alfred and follow the instructions.

Usage

Now that you have everything installed, it's time to see the combination in action. Open Alfred and type in javascript array for example. The Dash Workflow will immediately suggest the appropriate API documentation for the app. Select one and Dash will open the page in a separate window.

Now you can read the documentation at your leisure and clarify your open questions.

You got questions?

Do you have any questions about this productivity tip? Then write me a comment or contact me on Twitter. I look forward to your feedback.

Easy to use Dockerfile for your next Node.js Project

Stefan Natter 🇦🇹👨🏻‍💻 — Wed, 03 Feb 2021 12:33:28 +0000

Docker has made our lives as developers easier. With just a few commands, we can start all kinds of programs and services without having to deal with the tedious installation of dependencies. Countless Docker images are freely available on Docker Hub. Whether you want to start your own open-source continuous integration & deployment server, such as Strider, or your own NPM registry with https://verdaccio.org/, the possibilities are endless.

But these are mostly ready-made Docker images I was talking about. But for your own projects, you have to build your own Docker image. And in this article, I will show and describe in a few words how you can put your next NodeJS application into a Docker image. Here we go.

A simple Dockerfile looks something like this:

# We use the latest nodejs@14 image as our base image
FROM node:14-alpine

# set the default NODE_NEV to production
ENV NODE ENV=production

# make sure everything happens inside the /app folder
WORKDIR/app

# now we cache the node_modules layer
COPY ["package.json", "package-lock.json", "./"]

# install your dependencies
RUN npm install

# copy the source
COPY /src .

# and start the app
CMD ["node", "server. js"]

But what if you need to build the app first before you can run it? Let's take a look at this by using a multi-stage build.

# We make use of ARG to set some variables that we
# can use in the Dockerfile
ARG node_version=14
ARG node_image=node:${node_version}-alpine

# STAGE 1: This is the "builder" stage where we build the
# application and give this step a name: "builder"
FROM $node_image as builder

ENV NODE ENV=production
WORKDIR/app

COPY ["package.json", "package-lock.json", "./"]

# compared to the first example we now install
# _all_ dependencies including devDependencies
RUN npm install

# copy the source
COPY /src .

# now build the app
RUN npm build

# STAGE 2: in this stage, we reduce the size of the
# image by only installing production dependencies
FROM $node_image as production

WORKDIR /app/

# install _only production_ dependencies to keep the
# docker image small
COPY --from=builder /app/package.json /app/package-lock.json ./
RUN npm install --production

# copy the build from the first stage (e.g. the dist folder)
COPY --from=builder /app/dist ./dist

# and start the bundled app
CMD ["node", "dist/index. js"]

This is it. You now have the option to choose between a multi-stage or a single-stage Dockerfile for your next project. Of course, we could optimize some things still and apply different approaches, but that's maybe part of another story of my #90DaysOfProse challenge.

Cu,

Stefan

PS: Thanks Oliver for the inspiration for this article.

The "#90DaysOfProse - Make Writing a Habit" challenge.

Stefan Natter 🇦🇹👨🏻‍💻 — Tue, 02 Feb 2021 21:08:28 +0000

Make Writing a Habit. Write for at least 10 minutes a day for the next 90 days. Tweet your progress each day with the #90DaysOfProse hashtag.
https://www.90daysofprose.com/

As of today, I solemnly announce that I am taking part in the #90DaysOfProse.

These are the rules:

Write for at least 10 minutes a day for the next 90 days. Examples include Blog Posts, Essays, Book Notes, Newsletters, Fiction, Non-Fiction, etc.

That should be doable! 10 minutes. What're 10 minutes a day, right? Wish me luck.

The real challenge for me is probably the selection of topics and my own criticism of my work. I tend not to be satisfied and to be my own biggest critic. But inspiring people like @Francesco Ciulla, for example, inspire me. His 100 Days 100 Videos Challenge is remarkable. What started as an overcoming task for him, resulted in a successful YouTube channel with over 2,600 subscribers and a lot of views.

I want to talk about software engineering (mostly JavaScript, TypeScript, ReactJS, NodeJS, and web dev in general), as well as notable tools, SaaS solutions, productivity, and life hacks, and all sorts of stuff from my list of "best of "s. It's going to be fun, I tell you!

That's exactly why I'm taking on this challenge. I have a few bigger and a few smaller topics in mind. It's not the size of the article that matters, but the depth and the value it brings. I think that's the most important thing I can deliver to you.

So my 10 minutes are up soon, and I'm looking forward to the next 10 minutes tomorrow. Stay tuned and follow me so you don't miss an update. I look forward to any feedback from you.

Cu,

Stefan

Discussion: NextJS or Create-React-App for a back-office application? [Week in Review]

Stefan Natter 🇦🇹👨🏻‍💻 — Sun, 24 Jan 2021 19:07:15 +0000

Hello 👋🏻.

Every Sunday I sit on the sofa with my laptop, listening to lo-fi beats and thinking about what might interest my readers. I gather my links, which I collected in Raindrop or Roam during the week, and put them together in a draft for the week's issue. It can happen that I don't have a main topic ready due to my workload during the week. Most of the time, I look through my notes for a topic that I could present. You also told me in my questionnaire at the end of 2020 that you would like to have a greater focus on the main topic. I would like to comply with that, but this week was relatively short due to various private reasons.

And so today I present you "only" a list of links, exciting tweets, and my last YouTube video. The main topic today consists of a question. I asked this question on Twitter and I'm looking forward to more lively discussions here in the comments below.

So I invite you to discuss this with me:

-> Would you rather choose NextJS or Create-React-App for a back-office application?

You can see my answer and what I have chosen for this project on Twitter.

Don't forget to share your thoughts with me on Twitter and sign up for my newsletter.

⛓ Links of the Week

When I was still working for a local full-service agency, SEO was a big topic on my daily agenda. Not least because of that I often used Screaming Frog to get a picture of a site. The powerful tool shows the broken links, analyzes page title and metadata, can generate XML sitemaps, and more. Screaming Frog comes with both a free and paid version.
Tailwind is without question gaining more and more popularity in the web development scene. So it is even more important for me to share new tools I find for Tailwind. Today it's Tails - the TailwindCSS Page Creator. What other Tailwind tools do you use?
Is Disqus still in, or are you already using alternatives? One alternative that I haven't used myself yet but was recommended to me is Coral. I'm curious which commenting solution you use for your website.
One of the reasons the JavaScript Twitter scene is so valuable to me is because I keep having new "Aha, that's possible. I didn't know that" moments. Several professionals contribute to this, such as the developers on my "Tweets of the Week" list below. The article "10 JavaScript Hacks Every Web Developer Should Know" also had a few new tips in store for me. You just never stop learning. Wonderful.
Animated backgrounds are fancy, aren't they? With Vanta.js you have one of them with just a few lines of code.
Every day, tens of thousands of content producers create and publish new videos, articles, tutorials, and tweets. Not only is it impossible to consume them all, but it can also feel stressful when you feel like you're missing something and are constantly looking for more to put on "read later" lists. Maybe tools like Listory can help in the future. I would definitely like to try it.
We know that Flutter is unique and great thanks to developers like Tadas, who put a lot of effort into bringing us closer to Flutter. I myself have too little experience with it, but more complex Hello World examples like "Pet Finder App with Flutter + Firebase + Hasura" make me curious to finally experiment with it.
What is not so relevant on the desktop is all the more important on smartphones: touch gestures. With HammerJS, these can be implemented not only for mobile devices but also for desktops. So at least the look and feel are relatively the same.
Many of us probably feel this way, over the winter we get less vitamin D and are not really aware of it. You can track your vitamin D with apps like "dminder".

📺 Video of the Week

🐦 Tweets of the Week

Simon Høiberg

@simonhoiberg

VSCode Shortcuts ⚡

7 Essential VSCode Shortcuts that you should learn by heart.

Save time and become super-efficient while coding.

🧵👇

07:13 AM - 07 Jan 2021

Nader Dabit

@dabit3

Announcing a new in depth live coding workshop live on YouTube! 🔊

Building a Multi-user Blogging Platform with Next.js, @tailwindcss, & AWS

- SSR, fallback routes, revalidation
- GraphQL API (AWS AppSync)
- Authentication (Cognito)
- File storage (S3)

youtube.com/watch?v=13nYLm…

20:12 PM - 21 Jan 2021

CodyHouse

@codywebhouse

💡 How to create a self-drawing SVG animation in CSS.

#codyhousenugget

15:56 PM - 19 Jan 2021

Marc Backes ⚡️

@themarcba

Pro tip™ - When working with big numbers in JavaScript, you can use _ to visually separate the digits.

08:35 AM - 21 Jan 2021

FrontEnd Dude | JavaScript

@frontenddude

🧙‍♂️ JavaScript Tip: Check if the tab is in view or focus

Using 'document.hidden' we can return true or false depending on whether the tab is in view/focus.

This is great to detect idle browser tabs or provide user functionality if the tab is active.

#100DaysOfCode #JavaScript

18:13 PM - 23 Jan 2021

FrontEnd Dude | JavaScript

@frontenddude

🧙‍♂️ HTML autocomplete "one-time-code".

Using autocomplete you can autofill inputs fields using security codes sent by SMS.

Amazingly, this is all done by the browser without any JavaScript, it's pure HTML.

⤵️ Check out the example:

#CodeNewbies #HTML #100DaysOfCode #FrontEnd

11:53 AM - 22 Jan 2021

David Feitosa

@davidfeitosa

@natterstefan youtu.be/AM96rFUDiF8

16:31 PM - 24 Jan 2021

See you next week - thank you. 👋🏻

Stefan

%%[newsletter-form]

If you like my articles, you probably like my tweets and newsletter too. Let's stay connected on Twitter, LinkedIn, and GitHub.

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

How to create your first ESLint Plugin [Week in Review]

Stefan Natter 🇦🇹👨🏻‍💻 — Sun, 17 Jan 2021 18:25:31 +0000

Hello 👋🏻.

The last two weeks have been relatively hectic for me. Starting a company at the beginning of this year has created a lot of administrative and bureaucratic tasks that keep me from Twitter as well as from coding. At the same time, it has become clear that it can go relatively quickly until self-employment picks up. I've always been a big fan of building a carefully cultivated network of contacts. This has moved me forward several times in life and opened some exciting doors. In fact, I probably wouldn't be at the point I am today if it weren't for many lucky coincidences in my network. For that reason, I can only advise you to take the time to build a network of business contacts. You never know what kind of return on social investment you will get back from it one day. The same is true for Twitter. I spent a considerable amount of time on Twitter last year building a community. Well, I didn't manage to keep the attention span up towards the end of the year, but I'm still proud of my success. With my nearly 7,000 followers, I have some reach to ask questions, get insightful answers, promote YouTube videos, or stay up to date. Social networking pays off!

But today it's not about Twitter or vitamin B. Today it's about ESLint plugins and creating your own rules. Let's get started then.

Don't forget to share your thoughts with me on Twitter and sign up for my newsletter.

How to create your first ESLint Plugin

I'm a big fan of a consistent code style within a team, department, or company, respectively. In my opinion, it should not be the case that the teams drift apart too much when it comes to code style. Otherwise, it can be difficult to stick to new rules when you have to help out the other team. Sure the task remains the same, but how the code is written - in terms of style, not content - is important, because once you get used to it you don't want to have it any other way. That's how I feel, for example, when I have to deal with tabs (I'm a spaces developer).

So it's not surprising that I'm pushing the use of Prettier and ESLint in all my projects - and the ones I'm involved in - and taking care of their implementation. As time goes on, it becomes even more important to have a common base of rules and configurations. That's the only way it scales over time. For this reason, I've created both my own Prettier and ESLint configurations. In a now older article on Medium, I explain step by step how to create and reuse your own ESLint configuration.

Another fan of ESLint, Prettier - and git hooks - is my friend Barnabas Jovanovic. We talked weeks ago about whether it would be easier to map certain company rules or learnings into ESLint] rules and make sure they are implemented and followed. And so in our live stream yesterday we started to design our own ESLint plugin with our own rules, test it and publish it on npm.

It was surprisingly easy to create a custom ESLint rule. Basically, much of the work is due to analyzing components of the AST and declaring them valid or invalid based on one's own set of rules. Take a look at the live streaming recording from my session, the open-source code on GitHub, and the published project on npm.

⛓ Links of the Week

You are looking for a hand-drawn annotation for your text, for instance, a text marker? Go and check out: github.com/rough-stuff/rough-notation (thanks Adithya Sreyaj)
Tailwind provides some animations out of the box, but it is also not difficult to create your own animations with it. In this 2-minutes-to-read tutorial, Tony Lea explains how to create Custom Animations in TailwindCSS
Last week I needed to find and use an SVG to URL Encoder for a task. This one worked well for me.
5 Git Commands That You Probably Aren’t Using Much
Quickly see your next and upcoming meetings with the macOS app Next Meeting.
CSS Scroll Effects can still be found in and on very many websites. Ahmad Shadeed has written a comprehensive and detailed tutorial on how you can build a CSS Scroll effect for your website without JavaScript. Bookmarked! I am a fan of CSS artwork. So it's not surprising that I really liked the iPhone created by Emma Bostian. And the best part? She did it with styled-components!
Just before the end of 2020, I saw some tweets with the topic "digital reset". Some talked about reducing their following number to 0 and rebuilding in 2021. That sounds exciting in itself, but I don't know if I would be ready for that. I have too many valuable connections in my following list. Speaking of lists, some things could probably be replicated in Twitter lists. However, I was most intrigued by this tweet. Anil Dash even goes so far as to update his email address every year. Now that's what I call a digital reset. That would actually be an experiment. Would you do it?
Are you looking for some inspiration for your personal site? Take a look at humans.fyi and get inspired.

📺 My latest YouTube Video

🐦 Tweets of the Week

Aman Preet Singh ♥️ 💻

@amanpreetdev

@natterstefan 1. Chrome Dinasour one
2. Doodle Cricket - doodlecricket.github.io

18:07 PM - 12 Jan 2021

Jhey 🐻🛠

@jh3yy

Clip Path Image Reveals ✨

• Use clip-path for a "start" and "end" state 🤓
• Power it with CSS variables 💪
• No JavaScript required 😉

👉 codepen.io/jh3y/details/L… via @CodePen

16:57 PM - 12 Jan 2021

Ravin

@ravinwashere

Useful web developer tools that you're not using yet.

- devurls.com
- estimator.dev
- blobmaker.app
- shortcutfoo.com

Share other useful web tools and this post.

15:19 PM - 10 Jan 2021

Addy Osmani

@addyosmani

Best practices should be automated as much as possible.

21:45 PM - 09 Jan 2021

Chris Bongers 🤓💻⚡️

@dailydevtips1

Quick shoutout to @getSendy for making such a awesome self-hosted solution

daily-dev-tips.com/posts/moving-f…

11:52 AM - 08 Jan 2021

See you next week - thank you. 👋🏻

Stefan

If you like my articles, you probably like my tweets and newsletter too. Let's stay connected on Twitter, LinkedIn, and GitHub.

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

15 Games to Play for Your Next Virtual Game Night

Stefan Natter 🇦🇹👨🏻‍💻 — Mon, 11 Jan 2021 06:51:35 +0000

Hello 👋🏻.

Welcome back to Week in Review series and to a new year full of possibilities. Like many of you, I have set ambitious goals for myself. Among them, more live streaming sessions, focus on my blog and newsletter as well as building my company marqant digital. To that end, I promised you on Twitter to make you a part of my journey.

But that's not the main topic of this issue - not yet. Currently, my co-founders and I are busy laying the basic structures of our company. This includes the final design and implementation of our own website, the setup of tools (ClickUp, Google Workspaces, ...), and communication channels. It is often underestimated how much this matters when starting a business. More about this later.

Austria, like many other countries, is in lockdown. Restaurants are closed, events do not take place and we stay at home. So it happened that the Christmas party of my previous employer also took place online with Zoom. For this evening, I was given the task of finding online multiplayer games. Since we have to throw one or the other party remotely in the foreseeable future, I share the list of online games with you. If you know any other games, please share them with me and the others.

Have fun reading and playing.

Stefan

Games for your game night

Each group of players is different. One group prefers to play board games, the other wants it tricky and the other again sporty. And so I had to find a variety of games to give my team a wide choice.

Clarify beforehand whether you want to organize a tournament and crown a winner at the end of the evening. After all, you may want to show your friends that you are a Mario Kart superstar. You can record this classically on a piece of paper or create a tournament tree with challonge. So, let's get started.

One of the most popular games right now (and I have played it a few times with friends ) is Among Us (Android, iOS, Windows, macOS). This cross-platform game requires a lot of instinct and skill. As an Imposter, you have to kill one crew member after another without being suspected and thrown out of the spaceship. Meanwhile, the unsuspecting crew members complete task after task.

Do you prefer games with words? Make and place words on the 15x15 board and earn points for creativity and placement of words on the high-scoring double letter, double word, triple letter, and triple word squares with Wordfreund (iOS, Android).

You like to draw and love it when others guess what you draw? Then you like these two games. One game is Drawful 2 and the second is skribbl.io. In both, one of the players is presented with a term and must now draw it. The other players try to guess what is being drawn. These two games (especially skribbl.io) were a lot of fun and provided entertainment.

Classic games like Worms (iOS, Android, Playstation), UNO (iOS, Android or Playstation), or Monopoly (iOS, Android, Playstation) should not be missing on the list for community games. If you and your friends have a Nintendo Switch you can also play Mario Kart, Mario Party, or Super Smash Bros.! All of them are lots of fun and entertaining! I can play them all night long. Mario Kart Tour is also available for iOS, Android.

Edit: Jennifer, one of my readers, got in touch with me and suggested another UNO alternative: UNO online on solitaireparadise.com. Thank you.

Do you know "Cards against Humanity"? This entertaining game is also available online. My friend Marc Backes built a clone of the game with VueJS and made it available to you on cah.rocks. Can you make your friends laugh and win?

Oh yeah, Man, Don't Get Angry can't be missed either! Rocket League for PlayStation, Nintendo Switch, or Windows as well as codenames and Exploding Kittens (iOS, Android) are three entertaining games too.

And before I forget it, AuxParty is for listening to music together during the night.

What other games do you have on your list for a successful game night?

⛓ Links of the Week

Nick Bull shared five useful Visual Studio Code extensions a few days ago on Twitter. On the list were Code Time (time recording of your activity in Visual Studio Code), Better Comments (style TODOs, alerts, and other types of comments), and Todo Tree (overview of all todos in the project), and two more. They are all part of my setup now. You can find a list of all my installed extensions on howivscode.com.
In the past, I used Chrome's Inspector to find out the hex code of the color. Now I always hear a slurp when I want to determine the color of an element. I use the ColorSlurp tool for that. Sip was brought to my attention in a newsletter I subscribed to. The tool looks great and I'm about to buy it. What about you? Which tool do you use?
With an SVG file and a few lines of CSS, you can create a custom text highlighting.
Easily set up your own Twitter bot explained by Scott Spence.
Tailwind CSS has enjoyed rapid popularity and therefore it is not surprising that there are already some open source copy and paste solutions to quickly get a website up and running. WickedBlocks is just one of them.
Although Pratham has since changed his Twitter Header, he has posted a valuable Twitter thread explaining step by step how to create a Glassmorphism effect with CSS or you use glassmorphism.com.
TabFS: mount your browser tabs as a filesystem for Chrome
I use the paid app Bartender on my MacBook to hide menu bar icons. The app does an amazing job and I am happy with it. If you are looking for an open-source free alternative you might want to test Dozer.

📺 My latest YouTube Videos

📺 My latest Video

🐦 Tweets of the Week

Arvid Kahl

@arvidkahl

I've been wondering about "Product-Market-Fit" recently.

Often, people think that they need to find a market that fits their product.

I believe you should find a product that fits the market.

Market first. Then problem. Then solution. THEN product.

19:10 PM - 18 Nov 2019

Simon Høiberg

@simonhoiberg

5 best places to practice your programming skills 💪

🔸 CodeWars
🔸 HackerRank
🔸 LeetCode
🔸 Coderbyte
🔸 Exercism

17:12 PM - 26 Dec 2020

Lee Robinson

@leeerob

I rebuilt the Twitter embed with @tailwindcss 🤯

✨ Statically generated to prevent CLS
🌌 Dark mode support
🛠 Uses Twitter API directly

leerob.io/tweets

21:41 PM - 26 Dec 2020

TheMarcusAurelius1

@the1realmarcus

Investing half an hour into this simple exercise from @tferriss over the last 3 years has helped 5X my results & income, highly recommended:

tim.blog/2018/12/28/pas…

18:38 PM - 25 Dec 2020

Joe Karlsson #BlackLivesMatter

@joekarlsson1

Moved a chair in front of the bird/squirrel feeder for my cat so he has a comfortable front row seat to the show 😅

20:30 PM - 24 Dec 2020

See you next week - thank you. 👋🏻

Stefan

If you like my articles, you probably like my tweets and newsletter too. Let's stay connected on Twitter, LinkedIn, and GitHub.

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

Week in Review Episode 30 - Time for a feedback round.

Stefan Natter 🇦🇹👨🏻‍💻 — Sun, 20 Dec 2020 18:21:33 +0000

Hello 👋🏻.

Wow, this is already my 30th article of my "Week in Review" series. 30! That's an incredible number for me. I truly enjoy sharing my highlights with you at the end of each week.

I usually pick a theme for the issue each week and share more about it. Be it a tool, a new website, or something similar, the focus is on one topic and I complete the issue with links, videos, and a selection of tweets. The year is coming to an end and I'm preparing for my goals for 2021. For that reason, this week is different.

Today, you guys are my main topic. Your opinion is the focus of this issue. So I ask you to take your time and give me feedback on my Week in Review series. Your feedback will help me set goals for "Week in Review" and see where the journey takes this series. Thank you in advance for all your input!

-> Share your feedback with me 🙏

One more thing, during the holidays I will be turning down the frequency of the newsletter and articles. There will probably only be one issue left for 2020.

More about that in the next issue.

Enjoy your day.

Stefan

⛓ Links of the Week

Are you planning to write and publish your own ebook? At one point you'll need to think about the book cover and how to present it. Bruno Raljic shared a tool for that a while ago on LinkedIn called: 3dbook.xyz. It works like a charm.
Speaking about ebooks, Florin Pop released his ebook "Ten Ways to Make Money as a Developer" last week! Congratulations my friend! On over 160 pages you will get tips from a professional on how to earn money with blogging, YouTube, freelancing, and other opportunities and build an additional financial pillar. Buy the book now and create your own financial side income.
Francesco Ciulla has not only become one of my favorite Twitter friends, whom I hope to invite live for a coffee soon, I also admire his work, dedication, and inventiveness. He created the term Introvertuber and described his journey in a detailed post. Great my friend!
I can still remember the first time I saw Earlyname on Product Hunt. In principle, the idea is quickly explained. As soon as a new portal is launched, Earlyname checks if your desired username is still available and informs you. You can then save your username. Great idea. Now I stumbled by chance on the article with the story behind Easyname. It was fun and inspired me to learn more about it.
Do you know Mailbrew - the personal daily digest? There's an open-source alternative available called Paisley.
Are you creating a product or the next social network? Make sure you take a look at PlatformAbuse.org ("a knowledge source of technological harms and mitigations to guide safer product development") and take their tips and insights into account.
A few weeks ago I shared remove.bg with you already. This week I found another tool called Background Remover.
Sometimes it's difficult to keep up with discussions in Twitter threads. That is when extensions like Treeverse are useful to me. It visualizes conversations as a tree, basically.
Ever heard of the Fair-Code software model?
Not one, not ten, no a whopping 50 free resources Marko Denic has gathered for you. From APIs, CSS tools, to Docs, there is something for every web developer. I'm sure there is. Thank you, Marko Denic!

📺 My latest YouTube Videos

📺 My latest Video

🐦 Tweets of the Week

Edward Thomson

@ethomson

I love this new change - the @npmjs registry now lets you know when a package contains built-in @typescript declarations.

17:34 PM - 16 Dec 2020

Telmo ✌🏻

@telmo

🔥 New #JavaScript library.

Can't believe how fast I've built this.

Take a peek 👇

github.com/telmogoncalves…

21:48 PM - 04 Mar 2020

Jason Miller 🦊⚛

@_developit

Hey you! Want to see how much faster your site would be with modern JavaScript?

✅ EStimator.dev calculates it for you!

18:25 PM - 10 Dec 2020

Reddit

@reddit

Maybe maybe maybe

rddt.co/9NaJ50CNo38 via r/maybemaybemaybe

19:02 PM - 16 Dec 2020

Kyle Harrison

@kwharrison13

Hot tip. Interested in a company? Google "company name" + "Substack" for a pretty solid smattering. Better than the @SubstackInc find a writer search cause they seem to prioritize description word mention rather than content (+ page rank)

15:29 PM - 13 Dec 2020

See you next week - thank you. 👋🏻

Stefan

If you like my articles, you probably like my tweets and newsletter too. Let's stay connected on Twitter, LinkedIn, and GitHub.

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