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

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

Within our data-driven world, forms are essential in gathering information. Filling in that information should be easy, straightforward and accessible to everyone.

How to build accessible forms?

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_

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!

Developers are not _Trusted Types_!

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

In the second part of this series, we will take a look at some of the ways that GPT-3 can be used by content creators to improve their workflow. We will also provide some tips on how to get started with using GPT-3 for your own projects. We will use OpenAI’s Playground to try out the features of GPT-3.

The current state of AI for __content creators__

Unfortunately, sometimes you need to write viewport-based logic in your JavaScript code. Usually, this is done with a listener on the window for a resize. Let’s look at a better way.

How to use _matchMedia_ to create a performant custom viewport hook

In our current state of digitization, data-based decision-making has become an integral aspect of online businesses. Evidence-based practice, the paradigm used to make those informed decisions, relies on the use of data and solid statistical methods to solve real problems.

Peeking problem in A/B testing: Frequentist approach

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

In this first part we will look at how natural language AI can offer developers a lot of benefits, from helping them write code to writing this blog post. Here, we will introduce you to two of the most popular natural language AI tools, OpenAI GPT-3 and GitHub Copilot, and discuss some of the best use cases for each.

How natural language AI can benefit __developers__

Isn't it weird that we have to come up with a phrase and share it with a server to protect our account?

You shall not Password!

After a long break because of Covid-19, CSS Day is back. In a new location at the Zuiderkerk in Amsterdam. Once again trying to create the perfect line-up for everything design and CSS, and boy, they delivered just that.

CSS Day 2022: A small recap

Why do we need separate to our logging mechanism in microservice architecture?

Separated Logging with Filebeat and ELK stack

What is HTTP/3 and how does it differ from HTTP/2? In order to understand we need to dive deep into how the protocols of the internet work.

Discover HTTP/3

Many online services will help you with cropping an image while keeping face(s) in view. We can however do this just using an (experimental) browser native API. Let’s build it!

Smart cropping with native browser __Face Detection__

Vite (French word for "quick", pronounced /vit/, like "veet") is the fastest frontend build tool at the moment. Webpack-encore integrates perfectly with symfony applications. What if we could have both

Vite as an alternative to webpack-encore in Symfony applications

The Shared Element Transitions API allows creating page transitions using a browser API that can provide users with a better visual connection between page-a and page-b by transitioning shared elements on both pages.

The future of page transitions with Shared Element Transitions

Every day a new JavaScript library is born, every week a new framework arrives and every month a front-end developer needs to rewrite a date picker 😢 LIT is a modern library for creating component libraries, design systems but also sites and apps. LIT components are web components and as such work anywhere you use HTML.

Why lit is 🔥

Container queries enables encapsulation of adaptive styling based on the size, style or state of a parent element. This allows responsive component-based architectures, like design systems and component libraries, to provide the most optimal responsive styling within a component itself.

Container Queries, the next step towards a truly modular CSS

So you came here to save a kitten? That's wonderful, but the real reason we're both here is to talk about clean code.

How to save a kitten by writing clean code

Projects often become legacy in a incredibly short time. I have spoken to people in technology with a variety of skills, experience and roles. Time to find out how they think about this, what tips they have to prevent these issues and more.

Discover all articles