The professional life of an experienced developer is not all sunshine and roses

person walking alone down an empty road
person walking alone down an empty road
Photo by Jeremy Bishop on Unsplash

I’ve been working for one of the largest software companies in the world for more than a decade. With several hats on my head, I’ve seen many aspects of the business, ranging from rapid cowboy development to impactful acquisitions of competitors and startups.

1. Meetings

Most developers I know love their jobs. They are honestly fond of development, writing code, creating software, and maintaining the infrastructure that’s required for being able to push their code out into the world.

This implies that they often need to focus on what they are doing. There must be a reason for the popularity of noise-canceling…


A step-by-step guide for creating both the React front-end and our own GraphQL server.

Image for post
Image for post
What we will be creating today!

Note: all files (server and front-end) can be found at GitLab.

Intro

In this article we will:

  • Create our own custom GraphQL server with pagination
  • Create a React front-end with an infinite-scroll component

I’ve seen several articles about infinite scrolling in React, but very few go into the details and neither do they explain how to create the GraphQL server (most of them use an existing server such as the GitHub GraphQL API).


Low-level APIs that hook into the styling and layout process of your browser’s rendering engine

Chart showing if Houdini is ready for different browsers
Chart showing if Houdini is ready for different browsers
Source: ishoudinireadyyet.com

Note: The source code for the demo discussed in the second half of this article can be found on GitLab.

Intro

As I mentioned in my recent article about canvas animation inside React components, I love HTML canvas. So I couldn’t be more excited to learn about the new CSS Houdini APIs when I was reading a short article about it on css-tricks.com, by Stephen Fulghum.

The main reason for my excitement is that the Painting API makes it possible to create custom CSS images by drawing onto a PaintRenderingContext2D (which is pretty much an exact copy of the 2D context…


Let’s understand how virtualization works

Example of virtualization
Example of virtualization
What we will create today! Photo by the author.

Many years ago, I was part of a development team that was creating a Flash application that had to render a lot of data. We struggled with rendering it as a list. Scrolling the list was sluggish, but I managed to come up with a solution.

Today, I’ll explain what I created back then in ActionScript 3.0. Needless to say, we will use JavaScript instead. We’ll create a pretty advanced demo and I’ll guide you through all the steps so you’ll get a solid understanding of the logic behind this very performant solution. Rendering millions of items (!) is no…


An overview of libraries and tools that I keep coming back to

A selection of workers’ tools on a table
A selection of workers’ tools on a table
Photo by Todd Quackenbush on Unsplash

Introduction

As some of you might know by now, I’ve been a full-stack senior developer for over 20 years. I’m in the fortunate position of working for one of the largest software companies in the world.

Today, I’ll list eleven of my favorite tools and libraries for working on React applications. Most of these are tools that I stumbled upon once and have never quit using.

I consider the list below to be my personal toolbox. They’re listed in no particular order.

Let’s take a look!

Classnames

The tiny package classnames is one of my favorites. It helps you to define dynamic…


Create dynamic filters for your rendered data sets

Dynamic filters
Dynamic filters
What we will create today! Photo by the author.

As I wrote recently, we’re dealing with more and more data. When this data enters our applications, we have to make it consumable for our users. Today, we’ll have a look at how we can create dynamic filters: You enable or disable a certain filter, and the data updates instantly on your screen.


How to use memoization, contexts, useMemo, useState, and useEffect

Components and their information
Components and their information
What we will create today! Photo by the author.

Fetching data in React is one thing. Storing and caching this data is another story. The possibilities seem endless and the differences are often subtle, which makes choosing the right technique a bit of a hurdle sometimes.

Today, we’ll explore different techniques and look at all their details and subtleties. Should I use useMemo or memoization? Should I store data with useState and a context? When we’re done, you should be able to comfortably make informed choices with regards to caching data. You’ll learn about all the ins and outs.

And there are a lot of animated GIFs. …


A tutorial on installing and using SonarQube on your local machine

List of programming languages
List of programming languages
Photo from SonarQube (altered by the author).

Disclaimer: I am primarily active in the world of JavaScript and React these days, so this article will use terminology from that area. However, I have a very broad background and highly recommend reading on even if you’re using other languages and frameworks. SonarQube supports many languages.

Many developers, including you and me, write perfect code — at least that’s what we think sometimes. Some of us already use static code analyzing tools such as ESLint in our IDEs that indicate that some parts of our code could be improved while we write our code. …


A quick guide to rendering nested data structures

Folder structure
Folder structure
Photo by the author.

Wikipedia describes recursion like this:

“Recursion is the process a procedure goes through when one of the steps of the procedure involves invoking the procedure itself.”

In programming terminology, it is a function that calls itself. We can illustrate this concept with a very minimal example:

When you look at the snippet above, you’ll realize some things. First of all, perhaps you were not aware of the fact that this is possible. It is, even though it’s a bit counterintuitive that you can do it. We’re calling a function while we construct the body of that function. …


A critical look at Tailwind CSS, the popular utility framework

Image for post
Image for post
Photo by Verena Yunita Yapi on Unsplash

Intro

Tailwind CSS has gained a lot of traction in the last two years (from 30K downloads per week to almost 600K). Without a doubt, there are a lot of good sides to the popular utility-first CSS framework. Chances are that you’ve already heard how awesome and great it is because many developers seem to share that opinion.

But there is more to say about it.

What Is Tailwind CSS?

If you’ve never seen Tailwind in action, here you go:

<div class="bg-gray-100 rounded-xl p-8">Hello World</div>

The highlighted classes are what Tailwind is: a collection of predefined CSS classes (so-called utility classes). …

Gerard van der Put

Full-stack lead developer for a large industry-leading tech company and enjoys writing about development in his spare time.

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