A guide through my 2021 Work From Home desk setup and personal workspace.

Image for post
Image for post

During the year of 2020 I have been working from home the majority of the time. This has lead me to gradually improve my workspace. In this post I want to go through every part of this workspace and explain my thought behind it all.

I have accumulated these products over many many years and it’s certainly not like I’ve gone out and bought it all in one go.

I also want to preface this article with that I’m incredibly fortunate and grateful to be in the position that I am, to be able to afford all of this. …


Read these before asking your busy senior colleague

Image for post
Image for post

1. Update commit message

Run this command to get into your predefined git editor with your previous commit message in focus that you can edit and then save again.

git commit --amend --no-verify

2. Update pushed commit message

To update a pushed commit you start rebasing from the commit before the commit you want change. This is tricky, although certainly possible.

git rebase -i [COMMIT_HASH]...pick my-commit-message > reword my-new-commit-message...git push --force

3. Browse entire commit history

Sometimes you want easily browse the entire git history in your code editor or IDE. Run one of the following commands for easily accomplishing this.

Using VSCode

git log | code -

Using Vim

git log | vim

4. Create new branch with your changes

You often might start out building on the master branch, but when it times to create a pr you need a separate branch. …


Image for post
Image for post
React.js logo and Illustrated yellow lightning by @albingroen

How to do optimistic updates in React using Redux

Are you building an app that needs to be snappy for its users? Then you should probably consider doing optimistic updates. This will greatly improve the customer experience and the overall feel of your app. It will also better mimic the experience you have on a native desktop app.

What are optimistic updates?

Optimistic updates are a way of updating data in your app. You generally want to have a local state inside of your app, and before making the HTTP request to update in the backend, you want to update the local state with the data you assume will be returned by the backend. …


Yet another tutorial on how and why to use Redux

Image for post
Image for post
Photograph by Alex Iby from Unsplash

I have been in charge of setting up a new frontend at work for a new project. Initially I created a new React app using create-react-app, and decided to use React Context API for handling data in the app. I would fetch data when loading the page, save it a in a global state, and then populate it throughout the app using Context. This worked in the beginning, but I quickly realised that It got quite complicated handling a lot of data after a while. …


A guide to properly setting up Express together with Typescript, and optionally Eslint and Prettier.

Image for post
Image for post

I’ve been looking for a basic tutorial like this for quite some time, but I haven’t found one. I eventually figured out how to set up everything on my own, so I thought I could share it here. I’m not going to go over the benefits or anything with Typescript in this tutoria, but I am going to also show you how to additionally get set up with Eslint and Prettier as well, since it’s the way I think you should do it. But it comes later, so don’t worry about it now.

Part 1: Setting up Express with Typescript

1. Install dependencies

npm install express && npm install --save-dev typescript nodemon @types/node…


Improve overall customer experience by animating components in your React app or component library

Image for post
Image for post
Image by Carl Joseph from unsplash.com

So, you want to take your React components to the next level? Implementing animations can greatly improve the customer experience and make your app feel more professional. Animations are one of many ways to accomplish this. In this article, I want to go through how you can easily animate your React components using framer-motion.

How to get started

To set up your project to use framer-motion you can simply install it by using your JavaScript package managers like NPM or Yarn. Run any of the following commands inside of your React.js project and you will be ready to go.

$ npm install framer-motion$ yarn add…


Image for post
Image for post
Landing page for ui-diff.com

I work as a fullstack web developer at a scale up company in Sweden. At this time I was managing the website for the company, built in React and Typescript. After a deploy one day we realised we had broke the style completely of one page on our website. We rolled back, fixed it, and deployed again.

This happened a couple of times, and it started to become rather annoying. I wanted a way to quickly be able to inspect all pages of the website in just a couple of clicks and catch any design regressions. Earlier that year I had been on a meetup in Stockholm where a guy presented this tool called Happo.io which promised design testing for frontend components. This didn’t really cut it for what I wanted to to though. …


Image for post
Image for post

Do you want a cohesive framework for building beautiful and accessible applications inside of your organization? Building a component library using React can greatly lower the barrier for your non-frontend colleagues to build web and mobile apps that not only works, but look as good as everything else.

Setting up the project

Building component libraries used to be a real hassle just a couple of years back. Now though, you can simply use pre-built templates for getting started in no-time. Just as you use something like create-react-app for creating full-fledged React applications, you can use create-react-library for creating React component libraries.

To get started, if you want to use Yarn as your package manager, simply run the following command. …


Image for post
Image for post

Run Spotify in your terminal application instead of managing a tab in the browser or a resource-hungry desktop application. Follow the simple steps and you will be up and running in no-time.

Disclaimers

This tutorial is mainly focused on how to get Spotify working in the terminal on Mac OS machines. For Linux and Windows, please see the official documentation for spotifyd and spotify-tui.

  • You need to have a Spotify premium account for this to properly work.

Installation

spotifyd

Installation for Mac OS is easiest done through Homebrew. …


A story about the Bullet Journal method

Image for post
Image for post

What works for one person, might not at all work for another. That’s important in this story. This blog post is about me, about my experiences, and about how the Bullet journal technique saved my live and improved it in many ways.

First, let’s turn back the clock a couple of years. At this time I worked as a junior designer at a startup called Wopify. Here, my goal was to redesign a web platform that they really wanted to have as their main product. This was a lot for me. I was, and still am, completely self-educated in this area. Although I knew how to design pretty websites and applications, this was a challenge like never before. I was only 17 years old, and this company had 100’s of thousands of dollars invested in them by large and fairly famous investors. …

About

Albin Groen

Hi! I’m Albin, a front-end developer from Sweden passionate about software development, design, and self-improvement.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store