Creative Coding With Perlin Noise Have fun with creative coding. Discover how Perlin noise adds life into your creations, replacing harsh randomness with flowing, natural patterns. Creating particles, flow fields, and terrains that feel organic and alive. Published onSeptember 2, 2025frontendjavascriptcreative-codingPim van DieFrontend developerRead more
Particle Background Effect with HTML Canvas Create a dynamic animated particle background using the HTML5 Canvas API Published onAugust 7, 2025frontendanimationSteve JonkSenior Frontend DeveloperRead more
Built-in AI in Chrome Chrome now offers built-in, on-device AI APIs for summarization, translation, and language detection without the use of cloud required. Published onJune 30, 2025aifrontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
My experience AI vibe coding a complete web application from scratch Discover how I built a complete breathing exercise web app without touching a single line of code, using AI to transform an idea into a fully functional product. What was good, what was bad and is this where we are heading in our industry? Published onMay 27, 2025aicursorfrontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
React three fiber - 3D for the web The simplest way to create interactive 3d experiences Published onMay 13, 2025frontendjsreactTim D'hooreFrontend DeveloperRead more
Quick Tip: Generate Types Based on OpenAPI (Swagger) No more manual type generation! In this article, I'll show you how to generate types based on a OpenAPI (Swagger) file using a simple npm package. Published onMay 12, 2025frontendSteve JonkSenior Frontend DeveloperRead more
Interop 2025 - Which browser features to get acquainted with this year and why you should care It’s been a few years since the Interop initiative was set in play. This has historically been one of the key elements in moving the web forward as it aims for a consistent web between browser vendors. In contrast to the “old days browser wars”, we as developers get streamlined features without having to check everything in every browser. The features of Interop 2025 are now known, features to be made stable across browsers by the end of the year. In this article, we’ll take a look at what we should get acquainted with in 2025. Published onMarch 28, 2025frontendcssjsBrecht De RuyteFrontend Developer / DevRelRead more
What is WebLLM WebLLM runs in browser to allow Models to be more accessible inside the browser and fully client side! With the evaluation of AI technologies, it is expected that WebLLM will be an important part of future applications. Published onFebruary 21, 2025frontendweb-llmllmlarge-language-modelsJafar RezaeiFullstack Software EngineerRead more
Frontend Automation with Github Actions and AWS No matter which tech stack you use, automating your deployment process can save you time and headaches. Let's see how to use Github Actions to automate your frontend deployments to AWS S3. Published onFebruary 4, 2025frontendawsgithub-actionsdevopsSagar SawuckSenior Frontend ConsultantRead more
Accessibility tools In today’s digital age, many websites remain inaccessible to individuals with physical or cognitive disabilities. However, there are numerous accessibility tools available to help audit and improve your web content, ensuring accessibility for everyone. Published onJanuary 14, 2025frontenda11yaccessibilityRavindre RamjiawanFrontend DeveloperRead more
Building Scalable Micro-Frontends with Next.js Multi Zones Let's see how Next.js Multi Zones can make building micro frontends a breeze. Published onDecember 10, 2024nextreactfrontendmicro-frontendsDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Exploring mobile development with React Native Exploring React Native for cross-platform apps as a front-end developer, finding strengths in familiarity and challenges in styling and native feel. Published onNovember 18, 2024frontendreact-nativeLee RavenbergFront-end DeveloperRead more
What are React Portals? Let's have a look at React Portals and how they can help you in a pinch. Published onNovember 15, 2024reactfrontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Controlling your video animations with scroll-timeline and animation-timeline 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. Published onSeptember 11, 2024frontendSteve JonkSenior Frontend DeveloperRead more
Scratching the web How can we use the Web Audio API to create a working realtime turntable? Read my approach and how you might make your own! Published onAugust 28, 2024frontendjsAudioPim van DieFrontend developerRead more
View Transitions for Multi-page Apps We finally have (experimental) View Transitions for Multi-page Apps (MPA)! Let’s explore why this is cool and how we can use it. Published onAugust 16, 2024frontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Making Web Workers enjoyable In a single threaded environment Web Workers allow for offloading intensive tasks to keep the main thread free and responsive. Published onJuly 5, 2024frontendweb-workersjavascripttypescriptRavindre RamjiawanFrontend DeveloperRead more
This was CSS Day 2024 - the 10th edition 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. Published onJune 27, 2024frontendcsseventsconferenceBrecht De RuyteFrontend Developer / DevRelRead more
On-the-Fly Machine Learning in the Browser with TensorFlow.js 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! Published onMay 17, 2024frontendmachine-learningDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Going beyond pixels and (r)ems in CSS - Absolute length units 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. Published onMarch 22, 2024frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
Progressively Enhance Handling Your Forms With React.js Server Actions 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. Published onMarch 8, 2024frontendreactjavascriptDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Going beyond pixels and (r)ems in CSS - Container query length units 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. Published onFebruary 28, 2024frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
Going beyond pixels and (r)ems in CSS - Relative length units based on the viewport 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. Published onFebruary 8, 2024frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
Your user doesn’t prefer your design 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? Published onFebruary 1, 2024cssfrontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Going beyond pixels and (r)ems in CSS - Relative length units based on font 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. Published onJanuary 30, 2024frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
CSS Relative colors 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. Published onDecember 1, 2023frontendCSSLucien ImminkSoftware Architect & Developer AdvocateRead more
Deferrable Views, skeletons and named chunks in Angular 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. Published onNovember 24, 2023frontendangularAlexey SesFrontend DeveloperRead more
Reducing latency in AI Speech Synthesis 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! Published onNovember 16, 2023frontendaichat-gptvoiceDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Interacting with ChatGPT through Voice UI on the web 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. Published onNovember 2, 2023frontendaichat-gptvoiceDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Coven of Wisdom - EHV - CSS edition 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. Published onOctober 27, 2023frontendcsscoven-of-wisdomMaarten Van HoofDeveloper Advocate & FrontendRead more
Make awesome animated interactions with two lines of code Transform your web app with two lines of code – create seamless animated interactions using the View Transitions API. Published onOctober 18, 2023frontendcssDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
JavaScript Module Systems In this article, we are going to talk about different JS module systems, such as CommonJs, AMD, UMD, and ES Modules. Published onOctober 11, 2023JavaScriptModule-SystemsFrontendMohsen MahabadiSenior Frontend DeveloperRead more
Speedup unit tests development in Angular with NG-Mocks There are multiple ways to speed up unit tests development in Angular. Let me show two of them using the NG-Mocks library. Published onOctober 4, 2023frontendangularunit-testsAlexey SesFrontend DeveloperRead more
Generate unit tests using CodiumAI 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. Published onSeptember 27, 2023frontendunit-testsvs-codeintellij-ideaAlexey SesFrontend DeveloperRead more
Consistent CSS spacing is hard, but it does not have to be 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. Published onAugust 15, 2023frontendcssNiels MatthijsFrontend DeveloperRead more
Finite State Machines in JavaScript 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. Published onAugust 1, 2023frontendjavascriptDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
IndexedDB > Web Storage 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. Published onJuly 20, 2023frontendjavascriptDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Tailwind for productivity 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! Published onJuly 13, 2023TailwindCSSFrontendProductivityDXRonny RookFront-end DeveloperRead more
White labeling in a front-end monorepo: The do's and don'ts. 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. Published onJuly 3, 2023FrontendCSSMonorepoDesign-systemWhite-labelingFrontend-ArchitectureZakaria TaissateFull-stack Software Engineer & Team CaptainRead more
Going beyond constants with custom properties 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. Published onJune 26, 2023frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
Import maps in JavaScript 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. Published onMay 3, 2023frontendweb-capabilitiesjavascriptSander BorgmanFrontend ConsultantRead more
Inversion of Control through Compound Components 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. Published onApril 26, 2023frontendreactjavascriptDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Project Fugu 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. Published onApril 14, 2023frontendweb-capabilitiesproject-fuguLucien ImminkSoftware Architect & Developer AdvocateRead more
The View Transitions API: Enhancing the feel of the web 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. Published onApril 11, 2023frontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
How to build accessible main navigation? 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. Published onFebruary 7, 2023frontenda11yaccessibilityTim DujardinFrontend developerRead more
Real live example of OpenAPI in a front-end project Published onFebruary 3, 2023frontendAPIArchitectureMaarten Van HoofDeveloper Advocate & FrontendRead more
The File System Access API: Unlocking New Possibilities for Web Developers 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. Published onFebruary 3, 2023frontendweb-capabilitiesproject-fuguDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Let your RESTful API development soar with OpenAPI tooling 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. Published onFebruary 1, 2023frontendAPIArchitectureMaarten Van HoofDeveloper Advocate & FrontendRead more
OpenAPI, the equalizer of API providers and consumers 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. Published onJanuary 31, 2023frontendAPIArchitectureMaarten Van HoofDeveloper Advocate & FrontendRead more
Server-sent events (SSE) 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. Published onJanuary 23, 2023networkfrontendcommunicationLucien ImminkSoftware Architect & Developer AdvocateRead more
Let me introduce you to OpenAPI 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. Published onJanuary 11, 2023frontendAPIArchitectureMaarten Van HoofDeveloper Advocate & FrontendRead more
OpenAPI, a contract for RESTFul APIs 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. Published onJanuary 7, 2023frontendAPIArchitectureMaarten Van HoofDeveloper Advocate & FrontendRead more
Benefits of functional programming 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. Published onDecember 27, 2022frontendfunctional-programmingjavascriptRavindre RamjiawanFrontend DeveloperRead more
Why you should be using new CSS features today - part 2 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. Published onDecember 5, 2022frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
Why you should be using new CSS features today - part 1 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. Published onNovember 30, 2022frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
I want to React.use() this! 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! Published onNovember 22, 2022reactfrontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
You need CSS Cascade Layers Let’s have a look at how you can better structure your CSS layers with CSS Cascade Layers! Published onNovember 15, 2022frontendcssDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Vue 3 composition API in a nutshell 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). Published onNovember 1, 2022developmentfrontendVue-2Vue-3Lars JanssenDeveloperRead more
Practical uses of the :has() relational pseudo class 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. Published onOctober 27, 2022frontendcssBrecht De RuyteFrontend Developer / DevRelRead more
Getting started with tRPC v10 by building a todo app - Frontend 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. Published onOctober 26, 2022frontendreacttrpcreact-nativeZjerlondy FereroFrontend ConsultantRead more
Developers are not Trusted Types! 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! Published onOctober 20, 2022frontendsecurityreactDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Getting started with tRPC v10 by building a todo app - Backend 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. Published onOctober 13, 2022frontendreacttrpcreact-nativeZjerlondy FereroFrontend ConsultantRead more
How to use matchMedia to create a performant custom viewport hook 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. Published onSeptember 16, 2022frontendreactDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
How do I setup CI/CD & hosting? How to build a component library Part 4: Setting up CI/CD & hosting. Published onSeptember 7, 2022frontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
How do I set up linting, unit, snapshot and visual regression testing? How to build a component library Part 3: Setting up linting, unit, snapshot and visual regression testing. Published onAugust 31, 2022frontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
How do I pick a front-end framework & showcase it with Storybook? How to build a component library Part 2: Picking a front-end framework and setting up Storybook. Published onAugust 24, 2022frontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
How do I set up a Monorepo, SemVer strategy and Private package registry? How to build a component library Part 1: Setting up a Monorepo, Semver strategy and Private package registry. Published onAugust 17, 2022frontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Promises and async/await The Promise, a fundamental tool in the asynchronous language that is javascript. Published onAugust 8, 2022frontendjsRalph LeermakersLead Software DeveloperRead more
CSS Day 2022: A small recap 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. Published onJuly 8, 2022frontendcssconferenceBrecht De RuyteFrontend Developer / DevRelRead more
Smart cropping with native browser Face Detection 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! Published onJune 29, 2022frontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
Vite as an alternative to webpack-encore in Symfony applications 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 Published onJune 24, 2022frontendvitesymfonyYves MaerschalckFullstack developerRead more
The future of page transitions with Shared Element Transitions 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. Published onJune 23, 2022frontendcssjsMilan VogelsFrontend DeveloperRead more
Why lit is 🔥 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. Published onJune 17, 2022frontendLucien ImminkSoftware Architect & Developer AdvocateRead more
Container Queries, the next step towards a truly modular CSS 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. Published onJune 15, 2022frontendcssMaarten Van HoofDeveloper Advocate & FrontendRead more
The infinite legacy cycle in front-end 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. Published onJune 8, 2022frontendDave BitterGoogle Developer Expert Web & Developer AdvocateRead more
VueJS conference Amsterdam 2022 Together with some colleagues I’ve attended the VueJS conference in Amsterdam. It was nice to meet colleagues from other campuses and having a chance to get to know them in a different setting. The conference itself was a little underwhelming, but that doesn't mean I went home without some valuable takeaways. Published onJune 7, 2022frontendvueconferenceThijs BusserFrontend developerRead more
Using best practices to create CSS scroll snapping tabs How should scroll snapping tabs behave when using keys? By reading some best practices, I believe I found an elegant solution. Published onMarch 31, 2022frontendcssa11yBrecht De RuyteFrontend Developer / DevRelRead more
Nuxt 3 is coming, this is why you should be excited! Nuxt 3 beta is out and ready to play with. While not production ready yet, most important features can be experimented with and, as we’ll discuss later, it will bring about an easy way to upgrade at your own pace. Published onJanuary 1, 2022frontendvuenuxtVlad Pintea-GärtnerSenior Frontend ConsultantRead more
First look at Remix There has been a lot of buzz around the open-source release of Remix. I took a first look by following the deep-dive tutorial and this is what I found. Published onDecember 8, 2021frontendreactremixDave BitterGoogle Developer Expert Web & Developer AdvocateRead more