Abdelhak Chahid

Ahmed Ali

Alexey Ses

Ali Göktaş

Anthony Bendeler

Bader Ali

Brecht De Ruyte

Clarke Verdel

Daan Beulen

Daan van Berkel

Daniël Krux

Dave Bitter

Dmitri Sirobokov

Eyad Jarrar

Frank van Eldijk-Smeding

Ivan Nikolov

Jafar Rezaei

Jelle Biesemans

Jeroen van Kempen

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ü

Michelle van der Linde

Milan Vogels

Mohamed Elmedany

Mohi Bagherani

Mohsen Mahabadi

Niels Matthijs

OpenAI GPT-3

Owin Gruters

Pim van Die

Ralph Leermakers

Ravindre Ramjiawan

Remy Parzinski

Ronny Rook

Ruud Nimour

Saeed Salehi

Sander Borgman

Steve Jonk

Thijs Busser

Tim Dujardin

Vince Liem

Vlad Pintea-Gärtner

Yves Maerschalck

Zakaria Taissate

Zjerilon Ferero

Zjerlondy Ferero

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

Exploring React Native for cross-platform apps as a front-end developer, finding strengths in familiarity and challenges in styling and native feel.

Exploring mobile development with _React Native_

Let's have a look at React Portals and how they can help you in a pinch.

What are React _Portals_?

How the components of the chat system communicate, and what are the specifications of the chat API.

System components communication and the chat API

Looking at CSP Manager that lets you control the CSP from Umbraco

Umbraco package of the month: CSP Manager

Step into a (very near) future where you can control animations with pure CSS and without the need for any JavaScript? In this article, I'll show you how to control your animations with the new CSS properties scroll-timeline and animation-timeline.

Controlling your video animations with _scroll-timeline_ and _animation-timeline_

How can we use the Web Audio API to create a working realtime turntable? Read my approach and how you might make your own!

Scratching the web

How to set up Umbraco CMS using Docker containers

Running Umbraco CMS on containers

Looking at two packages that show your blocks in the backend for a better content experience

Umbraco package of the month: Block previews

We finally have (experimental) View Transitions for Multi-page Apps (MPA)! Let’s explore why this is cool and how we can use it.

_View Transitions_ for Multi-page Apps

In this blog, I share my experience of learning Kotlin, Kafka, and Docker while building a Spring-boot application. Join me on this journey as I explore these technologies and provide insights into my project approach, technology integration, and what i like to call the minimum business logic approach.

Exploring the Trio: My Journey with Kotlin, Kafka, and Docker

How do you take full advantage of GitHub when you deploy to Vercel? Let GitHub Actions take care of your pipelines and let Vercel do the hosting.

Take control over your CI/CD process: Use GitHub Actions to deploy to Vercel

An introduction to the chat system, including the design and implementation of its authorisation server.

Introduction and the Authorisation Server

This article approaches logical operators from a practical perspective by giving more real-life examples and describing guidelines on when to use what.

JavaScript Logical Operators: A practical perspective in TypeScript

A quick look at the Umbraco package Accessibility Reporter. What is it and how does it work?

Umbraco package of the month: Accessibility Reporter

In a single threaded environment Web Workers allow for offloading intensive tasks to keep the main thread free and responsive.

Making Web Workers enjoyable

Learn some Kotlin basics and how to easily use coroutines to write parallelized code cleanly according to structured concurrency.

Clear and Concise Concurrency with Coroutines in Kotlin

Another year, another CSS Day. I’m always happy to return to Amsterdam for this occasion, It’s one of the things I look forward to every year. So naturally, I’m happy that iO still allowed me to go there with my training budget, and the least I could do, is write a summary of this event on the tech_hub.

This was CSS Day 2024 - the 10th edition

How to keep live editing support with Storyblok's full React Server Components approach for Next.js

Storyblok live editing with Next.js App Router and React Server Components

Dive into the browser standard of securing login and authentication using the WebAuthn browser API

WebAuthn: it's time to forget your passwords

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.

All Posts