DEV Community: Robin Kretzschmar

What is the ideal session timeout?

Robin Kretzschmar — Wed, 11 Jan 2023 15:31:29 +0000

To make applications that rely on user sessions secure, it is necessary to define a session timeout.
The timeout defines the validity of a user session and after the set amount of time without activity, the session will expire and the user needs to authenticate himself again.

There is always the clinch between convenience for the user to not need to login too often and strict security from the code side to keep it as short as possible.

I've seen anything throughout my carreer, from 4 hours up to 30 days.

What is the ideal session timeout for you and why?

What are your geek christmas present ideas?

Robin Kretzschmar — Mon, 14 Nov 2022 07:56:35 +0000

With christmas being around the corner for most people, shopping for christmas presents can be a stressful and daunting task. We have the responsibility to find the perfect gift for our loved ones. It's not only about finding something they will like, but also something they will need.

Finding geeky presents is even harder because there is a thin line between things the person could already own and things they wouldn't use at all (owned or not).

What creative ideas do you have for geeky presents this year?

Fun fact: the header image is the first one I created with an AI

Set docker build args from .env file (NextJS)

Robin Kretzschmar — Thu, 15 Sep 2022 21:36:48 +0000

I recently came across the issue that I had to build a Docker container with a NextJS app inside that was relying on a environment variable to set the domain for Plausible.io.
The tricky thing was that I was building the container once and deploying it to multiple pods with different environment configs.

Technically docker can respect a .env file when it is run with the option --env-file like so:

docker run --rm --env-file .env -p 3000:3000 -d YOUR_CONTAINER_TAG:prod

So here comes the issue...

But since the environment was set during build time inside the container and NextJS has automatic site optimiziation and builds pre-rendered pages for server-side render during build, the environment variables from the Docker build run were baked into the image and it did not care about the .env file for server logic.

A small bash script to the rescue

I am using Envault to manage environment configs and since the image is being build with a Jenkins pipeline, the pipeline pulls the correct .env file from Envault each time.
Inside the Dockerfile, change the vars to be this:

ARG DB_USER
ARG DD_SVC_NAME
ENV DB_USER=$DB_USER
ENV DD_SVC_NAME=$ARG DD_SVC_NAME

This means the build command needs to contain --build-arg paramters for each variable.
To read those from the .env file via bash, we can use this:

$(for i in `cat .env`; do out+="--build-arg $i " ; done; echo $out;out="")

The docker command looks like this:

docker build -f Dockerfile -t MYTAG:prod $(for i in `cat .env`; do out+="--build-arg $i " ; done; echo $out;out="") .

Bonus round: makefile

Since I love Makefiles, there is a small pitfall how to include the bash loop into the command, so here is my Makefile for reference:

SHELL := /bin/bash
...
# this line will set the build args from env file
DECONARGS = $(shell echo "$$(for i in `cat .env`; do out+="--build-arg $$i " ; done; echo $$out;out="")")
GEN_ARGS = $(eval BARGS=$(DECONARGS))

.PHONY: dist-prod
dist-prod:
    @echo "Running docker build for PROD ..."
        $(GEN_ARGS)
    docker build -f Dockerfile -t $(TAG_SHA) $(BARGS) .
...

Arch Linux remap keys for 80% keyboard

Robin Kretzschmar — Mon, 07 Mar 2022 14:21:40 +0000

The story behind it

Skip this section if you just want to know the implementation, no one will judge you :)

After the keycaps on my mechanical keyboard became more worn down year by year, I decided to peak into r/MechanicalKeyboards for some inspiration.

After reading a lot about the different switches and boards, I decided to by an 80% keyboard (a Royal Kludge RK84 to be precise).

As I am german and require an ISO keymap, I wanted to buy custom keycaps with the ISO lettering. But the keyboard arrived before I had made up my mind which keycaps to buy and so I gave it a try with the US keycaps.

Everything seemed to work fine, even the german "Umlaute" (ö,ä,ü,ß) are properly recognized by my Arch installation. And if we are being honest: after some days of typing I knew which key and combination is what so I don't really need to look at the keycaps anymore now.

But one thing bothered me:
The "greater than" and "less than" symbols were impossible to produce for me.
I tried every combination there is but I only got double side arrows with alt+Z and alt+X.
It looked like this:

»
«

After reading a bit in the Arch wiki, I decided to remap my keys for this purpse.

The remapping

Check the current mapping

The first thing to do is to check the current mappings with this command:

xmodmap -pke

This gives a similar output to this:

...
keycode  52 = y Y y Y guillemotright U203A guillemotright
keycode  53 = x X x X guillemotleft U2039 guillemotleft
...

As seen in this output, the keys are mapped to unicode signs for "SINGLE RIGHT-POINTING ANGLE QUOTATION MARK" and "SINGLE LEFT-POINTING ANGLE QUOTATION MARK". You can check the unicode values at fileformat.info unicodes by changing the code in the URL to the one you want to check (without the leading U that just indicates that this is unicode).

Find keycodes you want to change

If you search for the keys you want to remap in the output, you'll find the keycode. Copy the whole line you want to change as you'll adjust only the parts you want to remap.

Another way to find the keycode to look for is to use the command

xev -event keyboard

which opens a window that captured your input from the keyboard and displays the keycodes in the console.

For this example, I would copy the 2 lines shown above.

Remap on the fly

To remap the keys, replace the mapping string and apply the changes like this:

xmodmap -e "keycode 52 = y Y y Y guillemotright U003E guillemotright"
xmodmap -e "keycode  53 = x X x X guillemotleft U003C guillemotleft"

You can try it immediately.

Persist the mapping

Now to ensure this new mapping stays persistent if you ever switch the USB port your keyboard is connected to or had it connected to another maschine in between, you should persist the new mapping.

Store them with: xmodmap -pke > ~/.Xmodmap
Xorg server will pick up the file by itself, but to ensure you have the same settings for terminal sessions, add the following lines to your ~/.xinitrc:

usermodmap=$HOME/.Xmodmap

if [ -f "$usermodmap" ]; then
    xmodmap "$usermodmap"
fi

How do you find cool names for your side projects?

Robin Kretzschmar — Sat, 22 May 2021 13:45:24 +0000

Having side projects is fun and sometimes one of them will even be launched and used by a large crowd.

Often times it starts with an idea and the name for the project will come based on a set of features, a target market or some other aspects.

But sometimes the idea is there but coming up with a name for it is hard - I'm sure everyone knows the struggle.

How do you find cool names / codenames for your projects?

Any resources / generators you use?
A specific strategy to find a name?

How do you catch and log errors of production web apps?

Robin Kretzschmar — Wed, 20 Jan 2021 09:34:38 +0000

Do you catch and log errors of your productions web apps?
If so, which tools/libs/methods are you using?
If not, why did you decide to ignore it?

Explain apollo graphql partialRefetch like I'm five

Robin Kretzschmar — Sun, 29 Nov 2020 10:40:05 +0000

Apollo GraphQL Query hook has an option called partialRefetch and the docs state:

If true, perform a query refetch if the query result is marked as being partial, and the returned data is reset to an empty Object by the Apollo Client QueryManager (due to a cache miss). The default value is false for backwards-compatibility's sake, but should be changed to true for most use-cases.

Sadly I don't fully get it by reading the docs and searching online.

What is different for queries using this parameter?
When to use it?

Please go ahead and ELI5!

What questions do you ask a new client?

Robin Kretzschmar — Mon, 26 Oct 2020 15:32:38 +0000

Every client and every project is different. There is no checklist that fits every client and every project - at least not that I'm aware of!

But there are some basics that are necessary to get started with a new client.

What do you ask them at first contact? How do you store this?

I'm curious!

I use Google Forms and here is what I ask new clients before making an offer for a project:

Web/App/Other project or combination?
If applicable: are domains already registered?
If applicable: Name of registrar
If applicable: Name of domain(s)
If applicable: Do you have an existing host?
If applicable: Should I take care of hosting? (charging included)
Base data of company and client (Name, address, VAT-Id, and whatnot is required)
Can I display this project in my portfolio?
Upload of resources (Logo, other stuff)

Reach Router scroll top fix - my 2nd npm package!

Robin Kretzschmar — Thu, 22 Oct 2020 15:35:16 +0000

I did a lot of projects with NextJS and recently had to do one with create-react-app again.
So I quickly remembered how tedious it was to fiddle around with React-Router and searched for an alternative.

Reach Router seemed like a good alternative. I quickly noticed one problem:

The problem to solve

When using Reach Router, the accessibility features are turned on by default.
The official docs say:

Focus Management
Whenever the content of a page changes in response to a user interaction, the focus should be moved to that content; otherwise, users on assistive devices have to search around the page to find what changed–yuck! Without the help of a router, managing focus on route transitions requires a lot effort and knowledge on your part.

Reach Router provides out-of-the-box focus management so your apps are significantly more accessible without you breaking a sweat.

When the location changes, the top-most part of your application that changed is identified and focus is moved to it.

In my case, after scrolling to the bottom at one page and navigating to another page, the newly loaded page will be scrolled to the same distance as the previous, if the content is longer than the viewport height.
This can be disabled by setting primary={false} at the Router component of Reach, but this would also disable the accessibility features.

The solution

I got inspired by a couple of Stackoverflow answers but none of them were using React hooks and none could be implemented quickly enough for me.
So I took the time and wrote a solution using hooks.
It consisted of 2 parts:

// new component OnRouteChangeWorker.js
import React, { useEffect, useRef } from "react";

const OnRouteChangeWorker = props => {
    const locationRef = useRef("");
    useEffect(() => {
        if (props.location.pathname !== locationRef.current) {
            locationRef.current = props.location.pathname;
            props.action();
        }
    });

    return null;
};

export default OnRouteChangeWorker;

// in App.js - global entry file
import { Location, Router } from "@reach/router";
import OnRouteChangeWorker from "./components/OnRouteChangeWorker";

// ...
function App() {
  return (
    <div>
        <Router>
          <HomePage path="/" />
          <ImpressumPage path="terms" />
          <PrivacyPage path="privacy" />
        </Router>
        <OnRouteChange
          action={() => {
            window.scrollTo(0, 0);
          }}
        />
      </div>
  );
// ...

DarkSmile92 / reach-router-scroll-top

reach-router-scroll-top

Want to have the accessibility features of Reach Router and scroll to top after navigating? Get it working with just this one component!

Install

npm install --save reach-router-scroll-top

Quickstart

// in your App.js / entry point
import { OnRouteChange } from "reach-router-scroll-top";
// ...
function App() {
    return (
        <div>
            <Router>
                <HomePage path="/" />
            </Router>
            {/* add it after the router! */}
            <OnRouteChange />
        </div>
    );
}
// ...

What it solves

When using Reach Router, the accessibility features are turned on by default. After scrolling to the bottom at one page and navigating to another page, the newly loaded page will be scrolled to the same distance as the previous This can be disabled by setting primary={false} at the Router component of Reach, but this…

View on GitHub

Why a npm package?

I wanted to archive the following:

do something in Typescript
learn how to publish a npm package myself
provide this solution for others to quickly integrate into their projects

Is it important to get up everyday at the same time?

Robin Kretzschmar — Tue, 04 Aug 2020 21:42:08 +0000

Is it important to you to get up and start your day at the same time throughout the week?

And if so, why is it important to you and what made you start with it?

PowerShell disabled support for TLS 1.0 for the Gallery - Update-Module and Install-Module broken

Robin Kretzschmar — Thu, 14 May 2020 08:56:26 +0000

Microsoft announced that the PowerShell Gallery has deprecated Transport Layer Security (TLS) versions 1.0 and 1.1 as of April 2020

To provide the best-in-class encryption to our customers

Announcement, details and reasons can be found on DevBlogs.microsoft.

Awesome news!
... leaving Update-Module and Install-Module broken!

Running Update-Module or Install-Module will now throw an error like one of the two following:

Get-PSGalleryApiAvailability : PowerShell Gallery is currently unavailable. Please try again later.
........... (cutted)

PackageManagement\Install-Package : Unable to find repository 'https://www.powershellgallery.com/api/v2'. Use Get-PSRepository to see all available repositories.
........... (cutted)

Fixing it (Microsoft way)

You just got the error and didn't try any wild ideas to fix it and poked around? Good, execute the migration command Microsoft provided in their announcement and you'll be good to go:

[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12 
Install-Module PowerShellGet -RequiredVersion 2.2.4 -SkipPublisherCheck

This will change the security protocol to TLS 1.2.

Already messed around? Fix it with this

If you already messed around with various commands like trying a proxy, removing the repository of PSGallery and stuff or getting the second error, you can fix it with the following commands:

Impatient, in a hurry or not interested in details

No judgement here.
Just looking for the commands? Quick summary:

[Net.ServicePointManager]::SecurityProtocol = [Net.ServicePointManager]::SecurityProtocol -bor [Net.SecurityProtocolType]::Tls12
Register-PSRepository -Default -Verbose
Set-PSRepository -Name "PSGallery" -InstallationPolicy Trusted

Commands with explanations

Set the TLS 1.2 protocol first:

[Net.ServicePointManager]::SecurityProtocol = [Net.ServicePointManager]::SecurityProtocol -bor [Net.SecurityProtocolType]::Tls12

Now register the PSGallery again:

Register-PSRepository -Default -Verbose

Check the success with Get-PSRepository and you should see an output like this:

PS C:\windows\system32> Get-PSRepository

Name                      InstallationPolicy   SourceLocation
----                      ------------------   --------------
PSGallery                 Untrusted            https://www.powershellgallery.com/api/v2

Set the Installation Policy of PSGallery to Trusted:

Set-PSRepository -Name "PSGallery" -InstallationPolicy Trusted

Result:

PS C:\windows\system32> Get-PSRepository

Name                      InstallationPolicy   SourceLocation
----                      ------------------   --------------
PSGallery                 Trusted              https://www.powershellgallery.com/api/v2

Now you'll be able to run Update-Module and Install-Module successful again.

Make task management fun again

Robin Kretzschmar — Tue, 12 May 2020 17:18:04 +0000

I like to deal with productivity and how to increase it. In doing so, I am always trying out new tools and techniques, which I read or hear about.

You can imagine that there are some very pleasant tools and methods, but also some that do not fit me personally.

My previous experience has taught me that new tools and methodologies can be the following:

complex to learn
untested and undocumented
Controversially discussed
not suited to my personal daily routine
ill-suited to my way of working
not suited to my working environment
ill-adapted to my way of thinking
time-consuming to implement

Nevertheless, it is fun to try new things and maybe even to adapt and integrate only parts of them.

This is how I came across WorkFlowy some time ago.

Meet WorkFlowy

WorkFlowy itself is already described on the homepage, which welcomes you with a very simple design:

Overwhelmed? We can help.
WorkFlowy offers a simple way to stay organized. If you have a crazy job or an ambitious project, we will be your trusty sidekick.

What is WorkFlowy about

WorkFlowy is a todo list. It can have an infinite number of levels, uses keywords and can do much more. All this combined in a super easy to use, tidy interface with clever shortcuts and completely keyboard driven (for keyboard fanatics like me).

Which features does it provide

As described at the beginning, I am always interested to learn about new things concerning productivity. But of course I also want to optimize my own processes.

I have been using WorkFlowy for half a year. I use it for simple todos, for notes during phone calls and for short intermediate storage of texts.

I make particularly intensive use of the function for nesting lists.

I write the text for a point, decide that I would like to gather more information for it or that I want to divide it further into individual tasks and simply jump one level deeper with the key combination ALT+Right.

The lists can also be sorted easily by simply dragging and dropping the items or using a key combination.

Of course you can also indent points and thus visually display different levels without directly creating a new sublist.

If you now imagine that you can have an infinite number of levels, you will find the successful search function even more helpful!

Here is a list of features. I made a short GIF to demonstrate the features to get a better feeling of how fast you will be with WorkFlowy.

searching
ordering
complete
duplicate
deleting
show/hide completed
notes
bold/italic/underline
switch pages
board view / list view

Here is a demo of all the features as GIF on imgbb (was too big to include here).

Why do I recommend WorkFlowy

I love the simple operation. Working alone with the keyboard is great and you stay right in the flow if you stay directly on the keyboard after finishing the sentence, descend one level lower and continue writing.

You find your entries super fast, can manage them comfortably and I must say that since then I don't use any other tool for the pure management of tasks anymore.

Due to projects, there are of course still tools like Azure DevOps and others in use, but I even transfer some information from there to WorkFlowy to manage everything clearly in one place.

Did you know WorkFlowy already? What is your experience?