Have a web page prevent your screen/computer from dimming/sleeping with the Wake Lock API

On some sites you don’t want the screen to dim (and eventually turn off) when left idle. Think of a run-tracking app, a puzzle game that takes device motion input, a recipe site for example: you’d want to keep the screen awake even if there is no touch input. This is where the Wake Lock …

How to build smaller Docker images

When you’re building a Docker image it’s important to keep the size under control. Having small images means ensuring faster deployment and transfers. Wish I had found this post before I started playing with Docker, as it is packed with solid advice which I found out “along the way” myself. In short: Find the right …

Print to CSS – Magazine layouts recreated with CSS Grid

Just like Jules Forrest before, Dan Davies has recreated some magazine layouts using CSS Grid: I’m a huge fan of magazine layouts, the use of typography, the structures, just the general look. I also love CSS Grid and as part of my learning, I have been looking at magazines for inspiration so I decided to …

SVG Line Animation with Vivus.js

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. Think SVG line animations, but then …

RTL Styling 101

Ahmad Shadeed created this extensive RTL reference. Over 292 million people around the world speak Arabic as their first language. Arabic is my native language, and I sometimes build websites that need to support both left-to-right (LTR) and right-to-left (RTL) styles. Be sure to read the section on CSS Logical Properties too, as that will …

Move Fast & Don’t Break Things

Embedded above, but also available as a transcript, is Scott Jehl’s talk “Move Fast & Don’t Break Things” on how to keep your website performant. The talk starts of with Progressive Enhancement (of course!) and covers things such as Responsive Images, Native Lazy Loading of Images, font-display: swap;, Paint Metrics, etc. Move Fast & Don’t …

A Caddy config file for PHP Applications

Mattias Geniar shared his Caddyfile – a config file for the high promising Caddy Webserver – for use with a Laravel backed website. His config file takes care of all of these: Redirect all versions of the domain to domain.tld, without the www-prefix Enable gzip compression Store logs in the home dir of the site, …

When in doubt, trust the browser

Presentation by Pieter Beulque, as given at the most recent FronteersBE meetup, in which he builds a Tweet Embed using Web Components’ Custom Elements. As a front-end developer, you’re always confronted with making choices. In this talk I cover the benefits you get for free when considering W3C standards or standard browser API’s instead of …