Abdelhak Chahid

Ahmed Ali

Alexey Ses

Ali Göktaş

Bader Ali

Brecht De Ruyte

Daan Beulen

Daan van Berkel

Dave Bitter

Dmitri Sirobokov

Eyad Jarrar

Frank van Eldijk-Smeding

Jafar Rezaei

Joeri Timmermans

Lars Janssen

Lee Ravenberg

Lennard Swaneveld

Léo Schneider

Lucien Immink

Luud Janssen

Luuk Rijnbende

Maarten Van Hoof

Mark van der Linden

Massimiliano Scifo

Mehmet Akif Tütüncü

Milan Vogels

Mohi Bagherani

Mohsen Mahabadi

Niels Matthijs

OpenAI GPT-3

Owin Gruters

Ralph Leermakers

Ravindre Ramjiawan

Remy Parzinski

Ronny Rook

Saeed Salehi

Sander Borgman

Thijs Busser

Tim Dujardin

Vince Liem

Vlad Pintea-Gärtner

Yves Maerschalck

Zakaria Taissate

Zjerilon Ferero

Zjerlondy Ferero

How to build a component library Part 4: Setting up CI/CD & hosting.

How do I setup _CI/CD & hosting?_

Azure recently launched Container Apps, Somewhere in the function-middle between Container Instances and Kubernetes Services lives this new resource type. This is a journal of a first glance on it.

A First Glance at Azure Container Apps

How to build a component library Part 3: Setting up linting, unit, snapshot and visual regression testing.

How do I set up _linting_, _unit_, _snapshot_ and _visual regression testing_?

A simple link inside a paragraph, what could go wrong? Well, a lot in fact. Let’s have a closer look, shall we?

Are our links visually accessible?

How to build a component library Part 2: Picking a front-end framework and setting up Storybook.

How do I pick a _front-end framework_ & showcase it with _Storybook_?

If we take a look at the repository for the official Node.js Docker images we can see that the source contains a Dockerfile for each image variant. Imagine having to add a package to all of these images. That's a lot of manual edits, but it's manageable. Now imagine adding a package to only specific versions of the image and a different package depending on the Linux distro.

Dockerfile templating to automate image creation

How to build a component library Part 1: Setting up a Monorepo, Semver strategy and Private package registry.

How do I set up a _Monorepo_, _SemVer strategy_ and _Private package registry_?

Are the NoSQL databases all the same? If not, what are the differences (and why should you care)? A quick comparison chat between Redis, MongoDB and Cassandra

Redis VS MongoDB VS Cassandra

The Promise, a fundamental tool in the asynchronous language that is javascript.

Promises and async/await

Are you tired of seeing good websites go to waste? Do you want to keep your codebase clean, but you have no idea where to start? Ever wondered how a small change request or simple bugfix turned into an endless game of whack-a-mole? Monitoring technical debt can provide a way out.

Introducing technical debt

TensorFlow.js is an incredibly powerful JavaScript library for training and deploying machine learning models in the browser and Node. js. Let’s explore this library by building a teachable machine!

On-the-Fly _Machine Learning_ in the Browser with TensorFlow.js

You want to try out Cloud Firestore as a database solution? Here are five insights I wish I knew before starting with Firestore's NoSQL database.

5 Things I wish I knew before using Firestore

Oh my, usually when writing a series like this, people tend to leave the best for last, but in this case, it seems that the best is behind us. But as I am a completionist, this last part of the CSS Units series will be about absolute units, the units you mostly - absolutely - want to avoid. But can help in certain cases.

Going beyond pixels and (r)ems in CSS - Absolute length units

A large part of adding interactivity to your applications is through forms. Single Page Applications SPAs have not always handled this part the best. Let’s have a look at how we can use React.js Server Actions to handle your forms progressively enhanced.

_Progressively Enhance_ Handling Your Forms With React.js _Server Actions_

In the third part of this series, we’ll look at length units based on the container. Yes, you heard that right, we can finally get some measurements based on a containing element and that just spells awesome in my book. Currently available in all evergreen browsers, these units open up a lot of opportunities to create some smart systems and once again, I will write this up packed with a bunch of demos and cool use cases.

Going beyond pixels and (r)ems in CSS - Container query length units

In this second part of the series, let’s talk about units based on the viewport also known as "the viewport-percentage length units". A lot of developers know these, but they can create some unexpected behavior, especially in combination with scrollbars and mobile behavior. Based on some articles and videos I picked up on the web from time to time, I'd like to explain some of the common pitfalls when using viewport units.

Going beyond pixels and (r)ems in CSS - Relative length units based on the viewport

As developers and designers, we make a plethora of design decisions while building a website. We try to cater to everybody, but that is an impossible task. So how can we listen to some of the preferences of our users?

Your user doesn’t _prefer_ your design

There are a lot of CSS units available at the moment and we mostly still rely on pixels and (r)ems for our sizing and fonts. I say it’s time to do a little freshening up. Instead of writing a list of which units are available in CSS that you can easily find on MDN as well, I thought I’d give some examples of where they could come in handy. I will create a mini-series out of this and for the first part, let’s start off with relative length units based on font.

Going beyond pixels and (r)ems in CSS - Relative length units based on font

My personal experiences after completing the IAAP Certified Professional in Accessibility Core Competencies exam.

What I learned from becoming CPACC

Before the relative color syntax you had to rely on CSS variables or even worse: JavaScript to modify the parameters of a color. Using the from keyword the browser can convert the originating color to different color spaces and change the color properties.

CSS Relative colors

The most exciting feature of Angular 17 might be Deferrable Views. It makes it possible to lazy load specific Angular standalone components or show a placeholder as the component is loading. It seems like this feature should go well with Skeletons. Stay around to find out.

Deferrable Views, skeletons and named chunks in Angular

The Coven of Wisdom Eindhoven meetup on Nov. 16th, in partnership with AWS and the amazing Samuel Sopeju from AWS, was a total blast! The goal was simple: dive headfirst into the deep end of machine learning using Amazon SageMaker. And we did just that!

Coven of Wisdom - EHV - AWS Sagemaker Workshop

AI-powered speech synthesis is getting incredibly realistic. This opens up many possibilities to generate realistic audio based on the text you provide. Whilst relatively fast, the latency still isn’t low enough for “real-time synthesis”. Let’s optimise that!

Reducing latency in _AI Speech Synthesis_

How can I improve the way someone interacts with ChatGPT? How can I make it feel more natural than a dreadful “chatbot”? Can I create something cool? Those were some of the questions I asked myself recently while starting a two-day hackathon at iO. I’ll take you through what I build, how, and most importantly, why.

Interacting with ChatGPT through _Voice UI_ on the web

On October 26th, the Coven of Wisdom held its CSS meetup in Eindhoven. To really allow going deep on CSS and Web UIs, we invited 2 heavy hitters regarding these domains, Brecht De Ruyte en Hidde de Vries.

Coven of Wisdom - EHV - CSS edition

Transform your web app with two lines of code – create seamless animated interactions using the View Transitions API.

Make awesome animated interactions with two lines of code

In this article, we are going to talk about different JS module systems, such as CommonJs, AMD, UMD, and ES Modules.

JavaScript Module Systems

Proficiency in the terminal enhances efficiency and opens up a world of opportunities with handy tools and quick commands.

I want it in my terminal!

There are multiple ways to speed up unit tests development in Angular. Let me show two of them using the NG-Mocks library.

Speedup unit tests development in Angular with NG-Mocks

Unit tests are an essential part of software development. Tests help you to ensure that the code works as you expect. It takes time to create all necessary tests. But there is a way to generate them.

Generate unit tests using CodiumAI

To use order on one element means using order on each of its siblings, too.

TIL: The CSS `order` Property Requires Each Grid/Flex Item to be `order`ed

The TypeScript implementation of the `using` and `await using` declarations from the TC39 Explicit Resource Management proposal, which is currently at Stage 3

ECMAScript Explicit Resource Management early implementation in TypeScript 5.2

Two simple guidelines is all it takes to prevent rampant spacing issues from turning your expertly crafted project into an endless game of whack-a-mole.

Consistent CSS spacing is hard, but it does not have to be

Application state can make any application complex real quick. Let’s have a look at Finite State Machines in Javascript to resolve some of these complexities.

_Finite State Machines_ in JavaScript

A small go-through to explore Kubernetes, Helm and Terraform

Streamlining Deployment and Scaling: An Introduction to Kubernetes, Helm and Terraform

Explore the advantages of IndexedDB over the Web Storage API as a more efficient and sophisticated alternative for storing structured data on the client, eliminating the need for repetitive JSON parsing and stringifying operations.

_IndexedDB_ > Web Storage

Write code for human beings to improve developer experience, readability and maintainability

Code Is For Humans And Humans Alone

In general, developers don't find writing CSS the most fun part of software development. Although, in my opinion, Tailwind CSS makes it fun and efficient!

Tailwind for productivity

Defining a good structure for your theme, components, and files is key to maintaining code for multiple brands. If you're coding multiple applications within one shared codebase, these guidelines will help you out.

White labeling in a front-end monorepo: The do's and don'ts.

If you love CSS, you’ve probably heard of custom properties (a.k.a. CSS variables) before. Still, a lot of people seem to use them as constants for their CSS. In this article, I will try to give you some more insights on how you can use these custom properties to create some smart systems or even use them as booleans in CSS and create easy progressive enhancements.

Going beyond constants with custom properties

As developers, we aim to be as efficient as possible. That's why we will explore six tips to boost your productivity in Visual Studio Code (VSCode). These tips will help you save time and reduce the need for excessive clicking. Let's dive in!

6 Quick Tips to Boost Your Productivity in VSCode

In this article, we will look at how you can make your GitHub profile stand out from the crowd.

How to make your GitHub profile stand out

Traditionally, developers have used build tools like Webpack or Rollup to bundle and optimize their code for production. These build processes can be time-consuming to set up and make development more complicated. With native JavaScript modules now widely supported in modern web browsers, there is a need to map JavaScript packages to their source files.

Import maps in JavaScript

We have seen how the industry has continuously raised the level of abstraction to allow developers to spend more time delivering functionality and less time writing low-level infrastructure. Even though JavaScript is the most versatile programming language on the planet, we still have a long way to go.

Convention over Configuration with RedwoodJS

Learn how to keep your component libraries simple, easy to use, and adaptable to many use cases by leveraging Inversion of Control through Compound Components.

_Inversion of Control_ through _Compound Components_

Cross-platform software development is hard. Each platform has its specific implementation of an API and you end up with separate apps for each platform. Multiple frameworks try to fix this issue by creating an abstract between the platform and the application. Browser vendors are doing the same and it's called Project Fugu.

Project Fugu

The View Transitions API has landed in Chrome. Let’s have a look at how the API works and why it will change the feel of the web.

The _View Transitions API_: Enhancing the feel of the web

Advent Of Code is a set of puzzles that will test your problem-solving skills using your favourite programming language. You do not need extensive programming skills, but the knowledge of some standard algorithms is a pre. Plus, it is a lot of fun and a very exciting way to challenge yourself.

Advent Of Code 2022

This article contains a guide to building an accessible main navigation of a website in 5 steps. The key takeaways of this guide are HTML semantics, WAI-ARIA, CSS, and JS for accessibility.

How to build accessible main navigation?

Real live example of OpenAPI in a front-end project

An incredibly powerful API exists to access the local file system of a user. Let’s have a look at how this works and why this could be interesting for your next project.

The File System Access API: Unlocking New Possibilities for Web Developers

Firebase Functions is a powerful tool that allows developers to build and run backend code for their applications.

Firebase Functions in a nutshell

Because the OpenAPI specification is a specification, just like the EcmaScript, HTML or CSS specification, we can reliably build tooling upon it. This tooling allows us to optimise our OpenAPI workflows and let us save precious time.

Let your RESTful API development soar with OpenAPI tooling

How would you incorporate OpenAPI within your project? In this chapter, we'll explore the two main approaches to using OpenAPI and the benefits of each workflow.

OpenAPI, the equalizer of API providers and consumers

With Server-sent events, you don't need to ask the server if an event has happened. SSE is sent when the server wants to.

Server-sent events (SSE)

OpenAPI allows us to improve effeciency between teams and interdependent projects. It allows us to describe our API in a single document. In this part of the series, we will take you through the most important parts of an OpenAPI document.

Let me introduce you to OpenAPI

An exploration of Kotlin and coroutines to have a Spring reactive application written in direct style

Reactive Backend Applications with Spring Boot, Kotlin and Coroutines (Part 2)

This 2-part article is about going from a traditional MVC-style Spring Boot application written in Java to a modern, functional, reactive Spring Boot application using Kotlin and Coroutines.

Reactive Backend Applications with Spring Boot, Kotlin and Coroutines (Part 1)

To optimize project effeciency and to ensure a good communication between teams, we need contracts for our APIs. In this article, I will explain what the OpenAPI specification is and how it can help us to create contracts for our RESTful APIs.

OpenAPI, a contract for RESTFul APIs

Writing code in a functional way can help to solve complex problems in a efficient and in a reusable manner, for creating clean and maintainable software.

Benefits of functional programming

I’ve wanted to implement dark mode for quite a while now. But, I just didn’t want to ship a part of it. I had to include a perfect dark theme, together with the perfect accessible toggle. However, two things have happened last month that changed my perspective on this approach.

A modern dark mode - part one

Solving Tower of Hanoi coding challenge

When it comes to creating websites, performance is crucial, but how do you achieve a performant website? This is why Astro was created; let's look at how it works and why it's so effective.

Let’s explore Astro’s core features

Coding challenge Tower of Hanoi

In the previous part of this article, I tried to tickle your brain a bit to unleash your curiosity and drive your determination to try some new CSS features today. That's exactly what I'll be doing in this part, writing some new stuff today so you can slowly polish new CSS skills very sneaky and hidden in the code, like a ninja.

Why you should be using new CSS features today - part 2

Unless you have no affinity with CSS at all or have been living under a rock for the last year, you should have noticed that new CSS features are skyrocketing like never before. Although this is a good thing, it might get frustrating to get a grasp on all these new playthings because every time you add something new in your styling toolbox, the next best thing is just around the corner.

Why you should be using new CSS features today - part 1

Ever since the introduction of Bun there are three runtimes to choose from when wanting to develop and run a JavaScript server. Node was the one that started it all and most applications are designed to run on that, but how would those applications fare running on the other runtimes, are they really a drop-in replacement?

Portability of applications between Node, Deno & Bun

A big part of working with React.js is fetching data and displaying the results. Let’s see how the new React.use() hook can can help you!

I want to _React.use()_ this!

Let’s have a look at how you can better structure your CSS layers with CSS Cascade Layers!

You need _CSS Cascade Layers_

API Management in Azure Cheatsheets

Develop event-based solutions Cheatsheets

Develop message-based solutions Cheatsheets

Azure Cache for Redis Cheatsheets

Monitoring And logging in Azure Cheatsheets

Microsoft Identity platform Cheatsheet

Develop solutions that use Azure Cosmos DB Cheatsheets

Implement Azure Security Cheatsheet

Develop solutions that use Blob storage Cheatsheets

Azure App Service Cheatsheets

Azure Functions Cheatsheets

Implement IaaS in Azure Cheatsheets

Introduction to (AZ-204) certification exam Cheatsheets

Vue 3 has been launched with the composition API. In this article we dive deeper into this subject and compare it with the options API (old way).

Vue 3 composition API in a nutshell

The :has() relational pseudo class has landed in Chrome and Safari and even though it gets less hype than for instance container queries, I believe this little pseudo class contains a lot of improvements to the way we write CSS today.

Practical uses of the :has() relational pseudo class

There's nothing quite like the feeling of finally getting your front-end and back-end types to match up. After hours of slacking, emailing, and going through documentation, you finally have it! But that feeling doesn't last long, because you realize the back-end had some type changes, which broke your front-end again! Well, here is where tRPC comes into play.

Getting started with tRPC v10 by building a todo app - Frontend

Even with our best intentions as developers, we all make mistakes. XSS being one of the most common web vulnerabilities on the web proves that we need to better defend ourselves and our users against this. Let’s see how Trusted Types can help us!

All Posts

How do I setup CI/CD & hosting?