I recently ported a midsized, vanilla Node.js app from CommonJS to ES Modules. Here’s what I learned and how you can modernize your project step by step.

What’s the difference between CommonJS and ES Modules?

While CommonJS is de facto everywhere in the Node.js universe, it’s safe to say that ES Modules are the future. They’re now the official standard format to package JavaScript code for reuse. No matter if in the browser or in Node.js, both systems allow you to import and export code from different files, making it possible to split your project into junks of self-contained functionality.

// CJS
const utils = require('../utils')
const funcA = ()…

You might know that I really, really like CSS variables and what you can do with them. Changing them in JS is like using useState in React: The browser automatically re-renders the necessary parts. This allows you to build powerful effects in a few lines of code. My favourite is to track the position of the mouse to build directional cursor effects. Believe me: It’s a small detail, but you can’t stop hovering once you’ve seen it.

This guide explains the little magic behind the hover effect I’ve made for the menu of the Ackee site. Let’s start! 🚀

Track the position


Swift and iOS development was on my bucket list for quite some time. I always had some ideas on my mind and couldn’t wait to bring them to a device I use daily. But building an app with a language you don’t know, on a system you haven’t developed on before, isn’t something you can do in a few days. It requires time.

November last year I finally had the opportunity to go part time and to spend three days a week on my goal. For three months ⏱

My personal ambition was to learn Swift and iOS development in…

We all know those forms where using the autocompletion ends up in a complete mess. Some fields stay empty, some are filled with incorrect values and others rely on placeholders to tell us what they should be filled with. Is this value correct? Perhaps, but the only way to be sure is to remove the autocompleted value to see the placeholder again. It’s frustrating and it doesn’t have to be like this!

Getting the markup right

A good form starts with the right markup.

1. Turn off autocorrect

Turn off autocorrect when you don’t need it: It’s annoying when the system tries to correct something it can’t know…

I recently got inspired by the playful hover animation on the Grover website. Moving your mouse over the subscribe-button reveals a colorful gradient that follows your cursor as it moves. The idea is simple, but the result is a button that stands out from the rest and waits to be clicked.

How can we achieve a similar effect to make our website stand out, too? Well, it’s not as hard as you might think!

Track the position

The first thing we need is the position of the mouse.

document.querySelector('.button').onmousemove = (e) => {  const x = e.pageX - e.target.offsetLeft

Atomic Design explained by Brad Frost (© Brad Frost)

As a front-end developer there is nothing more annoying than losing the control of your HTML after your code has been implemented in the back-end. This typically happens when the HTML isn’t shared between front-end and back-end. But it‘s not the fault of a back-end developer. It‘s the fault of the front-end which failed to provide a good integration into the targeted CMS. Our mission at comwrap was to solve this problem.

The problem

Our existing workflow followed a pattern that allowed us to develop the front-end without caring too much about its later use. HTML, CSS and JS wasn’t tied to…

Rosid is a just-in-time server and static site generator written in Node.js. It’s inspired by Harp.js, but solves two of it’s biggest problems:

  1. Hard-coded pre-processing
  2. Missing live-reloading

Rosid can be integrated into your project in two ways: Using the CLI or using the API of Rosid. This guide covers the first way and shows you how create and serve a simple project.

Rosid runs in your Terminal and transforms your code on-the-fly.

1. Install Rosid

First, install or update to the newest version of Node.js. Rosid is written in Node.js, but you only need to know the basics of Node.js and JavaScript to use Rosid. Once it has finished installing, create a new…

Writing tests for modules that require a predefined file-structure isn’t fun. Each test needs it’s own combination of files and folders. Setting up those structures takes time and makes your tests complicated.

I had the same problem with my modules: The quality of the tests suffered, because it was annoying to write them. This really shouldn’t be the case. I’ve looked at solutions and started to use temp. You might know it if you have ever written tests for file-based modules. temp generates a unique path under the system temporary directory and supports automatic removal 🎉

I liked this solution…

CSS variables are the next big thing and their power is often underestimated. People call them “CSS variables”, which doesn’t describe their actual behavior properly. CSS Custom Properties — as the specification names them — can do much more for you than SASS variables. They’re properties and they cascade like normal properties.

I’ve made a test project to learn more about them and tried not to use any SASS variables at all. Here’re some of the benefits I discovered:

Eliminate redundant styling

The principle you know from functions in programming languages applies to CSS Custom Properties: Define once, reuse often. …

LaudableApps is a site originally started by Benedikt as a Tumblr blog. I took over the project in 2012 and started to maintain it as a free time project. My goal was to build an independent showcase for beautiful iOS apps without distraction. No ratings, no reviews, no comments. Just apps, screenshots and App Store links.

The new look of LaudableApps

A new design

The first big redesign was back in 2012. Another refresh happened late 2013. Now, 4 years later, it was time to move away from the initial branding. It has done its job, but started to look outdated.

Tobias Reich

Web developer and designer.

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