Blog

Don't waste your time on a portfolio website

Oct 20, 2020

First of all, sorry for the clickbaity title. But give me a minute and hear me out. You can see it all the time: new developers spending a lot of time trying to get their portfolio websites right. In the hope to land a great job, they put in hour after hour building custom layouts that are supposed…

Career

Don't duplicate your data - Learnings from code reviews

Sep 17, 2020

Handling data properly can be difficult. We have to fetch it from APIs. We have to aggregate it with data from other sources. And we have to transform it efficiently to use in our UIs. In the past months, I conducted many code reviews for junior developers during this course. I was surprised to see…

Learnings from code reviews

An in-depth beginner's guide to testing React applications in 2020

Jun 24, 2020

import Newsletter from 'components/Newsletter' Most developers know it: Automated testing is important. There are many reasons arguing for it. You might unknowingly break an app whenever you change a line of code. Manually testing your app after each change is cumbersome. Tests help document edge…

Testing

Free like a freelancer or secure like an employee? There's a third option: The contractor

Jun 09, 2020

Many developers dream of becoming a freelancer. The promise of freedom to work whenever, wherever, and on what you want as well as lucrative rates sounds awesome. Working with your laptop at the beach below palm trees on an exciting project. 🌞 💻 🌴 What a life! But once you start thinking about it…

Failing job interviews? No feedback to improve? Here's a technique to learn from rejections

Jun 01, 2020

You invested so much time and effort into learning to code. You forced all this knowledge about HTML, CSS, JS, and React in your brain. You implemented practice projects and built a portfolio. You're really close to achieving your goal: becoming a professional software developer. But landing your…

Career

Inside a dev's mind - Refactoring and debugging a React test

May 04, 2020

You may know this already: testing is an integral part of the skillset of every professional developer. Many job listings require at least basic testing skills from applicants. But testing a frontend can be particularly tough. You don't know whether you should focus on unit, integration, or e2e…

Inside a dev's mind Refactoring Debugging

Inside a dev's mind - How do you plan a UI feature?

Apr 18, 2020

When developing a new feature many of us developers tend to jump into it via programming instead of planning the architecture out first. It may seem easier to start programming. But this often ruins us. We take the wrong approach and don't realize it until we've wasted too much time trying to…

Inside a dev's mind

Don't useEffect as callback!

Apr 11, 2020

The useEffect hook in React is sometimes not easy to understand. It can be hard to get it working properly. You might have missing dependencies, cause a stale closure or an infinite loop. In this blog post, we'll have a look at a common misuse of the useEffect hook. It doesn't cause an error, but it…

Junior to Senior - Refactoring a dynamic multi-input component

Apr 03, 2020

This post is part of a series about refactoring React components Building forms in React can be difficult. Especially, when you need to add inputs dynamically. So it's no wonder when inexperienced developers create a mess, the famous spaghetti code. In this blog post, we refactor a dynamic multi…

Junior to Senior Refactoring Inside a dev's mind

React debugging session - Why is this function called hundreds of times?

Mar 27, 2020

Every developer knows this situation: You're writing your code, hammering your keyboard all day long. Your code seems to work. Until it doesn't. Either it's not working as expected at all or only in some situations. You try to find the problem. You have a close look at the code. But nothing seems…

Inside a dev's mind Debugging

How to accidentally mutate state. And why not to

Mar 18, 2020

When you learn about React and state you will often read this: "Don't mutate the state". This means you shouldn't change an object or array directly without creating a new object/array. Interestingly, when people request code reviews online one of the most common mistakes is exactly this: Direct…

Frustrating job search? 5 tips to better prepare for interviews

Mar 09, 2020

For most people job interviews are scary. You never really know what to expect. You might feel like going to your own trial. Will this be a nice chat? Or will it be more a cross-examination-style of an interview? Lots of unknowns, a lot can go wrong. Wouldn't it be great to feel well-prepared at…

Career

Frustrating job search? My #1 tip for outstanding portfolio projects

Feb 14, 2020

Applying for jobs can be a frustrating experience. Especially if you don't have professional experience yet. You apply and apply but rarely even get replies. Every job posting requires experience. But how are you supposed to get it if nobody wants to hire you? At the same time, you hear a lot of…

Career

Frustrating job search? 12 tips for outstanding portfolio projects

Jan 24, 2020

Getting your first dev job can be depressing. Especially without professional experience. You send out application after application but get no replies. Every company wants experienced people but how to gain experience without a job? A classic hen egg problem... This is where your personal projects…

Career

Junior to Senior - Refactoring a React pan and zoom image component

Nov 07, 2019

This post is part of a series about refactoring React components The goal of this article is to help software developers write high-quality code. Even good, experienced engineers often have trouble with code-readability or don't emphasize it. At least this is what I experience almost whenever I jump…

Junior to Senior Refactoring Inside a dev's mind

3 ways for authorization with GraphQL and Apollo

Oct 14, 2019

Authentication and Authorization with GraphQL can be a confusing topic. There is not a lot of best practices and little content on this topic. This article aims at comparing three different ways of implementing authorization (meaning how to decide which user is allowed to see what). We will have a…

Authorization Authentication

Authorization with GraphQL and custom directives

Sep 25, 2019

Authorization is a crucial part of most applications. Still, access-control is not part of the GraphQL spec. This leaves developers with different options. Since authorization touches a lot of different areas of your typical app selecting one of these options can be a tough choice to make. In this…

Authorization Authentication

Testing Apollo: How to test if a mutation was called with MockedProvider?

Aug 23, 2019

Support for testing components that use Apollo is very good for the most part. But still, some situations are confusing and not well documented. One of those is covered in this post: Testing mutations. Buttons triggering a mutation are an important part of interactive web applications. And…

Testing

Apollo hooks: Why and how to use

Aug 14, 2019

Apollo's Query and Mutation components are easy to use. But since they use the render prop pattern they often decrease readability. This is especially true when you need to nest them, for example when a component needs to both query and mutate data. Another problem is that you often end up with a…

Authentication with GraphQL and Passport.js: The frontend

Aug 11, 2019

In the previous articles of this series we implemented a GraphQL API that allows users to sign up and log in with their email and password as well as their Facebook account. We focused on the API and executed the mutations and queries via the Apollo-server playground. In this article, we will write…

Authentication Passport

Common mistakes when initializing Apollo's local state with default data

Jun 25, 2019

Handling local state with Apollo can be quite verbose. You might think you did everything correctly but still, your query returns an empty object without any warning or error. The first problems can already occur when you initialize the Apollo cache with default data. If you get it right immediately…

@client directive local state

Facebook login with GraphQL and Passport

Jun 14, 2019

Implementing a proper authentication system can be very challenging especially if you save user credentials in your own database. You need to handle this confidential data with great care by encrypting and storing passwords securely. And still, you might introduce vulnerabilities which expose…

4 ways to handle local state when using Apollo and GraphQL

May 29, 2019

There are a lot of options for state-management in the React eco-system. Using Apollo and GraphQL is a great way to handle server-side data with little boilerplate. But the community is still young and there often has not been established a best practice yet. The question here is how to handle…

local state @client directive

Authentication and Authorization with GraphQL and Passport

May 29, 2019

Authentication and authorization can be a challenging topic. Especially with GraphQL as a pretty young technology, there seems to be a lot of uncertainty and confusion. Should you use a library like Passport.js which is established? But how would you integrate that with GraphQL? Should you rather…

Authentication Authorization Passport Series

Password-based authentication with GraphQL and Passport

May 29, 2019

The standard approach when using Passport.js is to have separate endpoints on your server for signup and login. The front-end sends data from the corresponding forms to these dedicated endpoints. After successful authentication, the user is redirected to some URL. With GraphQL you would also need to…

Authentication Passport

Client-side state management with the Apollo client directive

May 26, 2019

Why should I use yet another tool for managing local state when I already use Apollo and GraphQL? Unfortunately handling client-side state using the @client is still a mystery for many. The otherwise great Apollo docs are unclear in this regard and debugging can be very frustrating if you get…

local state @client directive

Combining server-side data and local state with Apollo client directive

May 26, 2019

Apollo and GraphQL are great. But managing client-side state in Apollo can be horribly verbose. The docs are unclear and the community's feedback, in general, is not very positive. So you might not even consider using Apollo for local state management. At the same time, it would be great to have a…

local state @client directive

Comparing Redux+REST and Apollo+GraphQL for storing server-side data

Feb 05, 2019

Can I use GraphQL + Apollo alternative to Redux? Many of us use Redux in our frontend applications and really like it. I was one of these people. When GraphQL came around it was initially hard to let go of Redux. Don't get me wrong. There are still use-cases for Redux. But let me phrase it with Max…

Redux vs. Apollo

How to authenticate using GraphQL and JWT

Jan 28, 2019

How can I set a JWT token to a cookie using GraphQL? Do I need to put the authentication logic into every resolver? Maybe you are wondering how to authenticate your users when you build a GraphQL backend using JSON web token (JWT). If so your answer may be: Use a session middleware in combination…

Authentication