Creating an IoT LED matrix controlled by Storyblok
Learn how to create a LED matrix that is controlled via a headless CMS.
Learn how to create a LED matrix that is controlled via a headless CMS.
Recently I have been wondering how CSS features like painting backgrounds compare to CSS Houdini’s Paint API in terms of performance.
Sometimes we want to create dynamic animations, that react to user input, like the mouse moving or selecting some checkboxes. Updating SVG elements according to this input has gotten a lot easier now that CSS Variables are usable in the browser.
Animation on the web has come a long way. At first we used Flash to create websites, which were all fun and interactive, then we got to fancy JavaScript libraries, and now the web platform offers us a selection of native animation tools.
When developing new applications many developers start with a desktop interface in mind. But often we forget that most people will access an application on their phone and interaction patterns that work well on desktop, might not be optimal on mobile.
Recently I ported my website to [GatsbyJs](https://www.gatsbyjs.org/). In my previous setup I already wrote my blog posts in markdown, but had a kind of self-built way of displaying those markdown files, which I wasn’t perfectly happy with.
When developing mobile user interfaces, simplicity is essential for a good user experience. The interface should be consistent, avoid cognitive overload and disorientation in the user.
Before you start code your layout with CSS Grid, setup up your HTML so it makes sense. First and foremost your markup should be readable on screen readers and work without a fancy layout.
If you create an animation in CSS you have to specifically describe what is going to happen for every step, whereas in Javascript with the WAAPI you are more flexible, because you can programmatically define the animation in an animation object.
There is so many ways to animate things on the web today. From pure CSS animation to fancy libraries like GSAP. The Web Animations Api (short WAAPI) tries to combine the power of CSS with the flexibility of Javascript in order to allow complex animation sequences.
CSS variables have been around for a while. Although they still lack some Browser Support (mainly IE and Edge), they provide a great new way to structure and interact with your CSS. In order to take a closer look at the performance impact of CSS variables one has to understand the basic principle of the scope, because it also applies to CSS variables.