Page editors are a great way to provide an excellent user experience. However, to build one is often a pretty dreadful task. Craft.js solves this problem by modularising the building blocks of a page editor. It provides a drag-n-drop system and handles the way user components should be rendered, updated and moved – among other […]
Tag Archives: web
Performance Budgets for those who don’t know where to start
Harry Roberts on how to set a Performance Budgets if you really don’t have a clue where to start: Time and again I hear clients discussing their performance budgets in terms of goals: “We’re aiming toward a budget of 250KB uncompressed JavaScript; we hope to be interactive in 2.75s”. While it’s absolutely vital that these […]
Accept Push Notifications to verify that you’re not a robot
Speaking of Push Notifications in the previous post, how about this Dark Pattern right here which I encountered recently: Press Allow to verify that you’re not a robot Pretty sure many users walk blindly into that trap!? 😞
Making a Better Custom Select Element
24ways – the advent calendar for web geeks – is back! First post is “Making a Better Custom Select Element” in which Julie Grundy tries to create an accessible Custom Select Element: Sometimes, I can’t recommend the select input. We want a way for someone to choose an item from a list of options, but […]
JSONbox – Free HTTP based JSON Storage
jsonbox.io lets you store, read & modify JSON data over HTTP APIs for free. Copy the URL below and start sending HTTP requests to play around with your data store. Oh, this will come in handy for Workshops and quick Proof Of Concepts: curl -X POST ‘https://jsonbox.io/demobox_6d9e326c183fde7b’ \ -H ‘content-type: application/json’ \ -d ‘{“name”: “Jon […]
Visually Search using your Phone’s Camera with The Web Perception Toolkit
The Web Perception Toolkit is an open-source library that provides the tools for you to add visual search to your website. The toolkit works by taking a stream from the device camera, and passing it through a set of detectors. Any markers or targets that are identified by the detectors are mapped to structured data […]
Implementing Dark Mode on adactio.com
Jeremy recently implemented “Dark Mode” on his site. Tanks to CSS Custom Properties the implementation is pretty straightforward (also see my writeup here). But of course, Jeremy added some extra details that make the difference: In Dark Mode images are toned down to make ‘m blend in better, as detailed by Melanie Richards: @media (prefers-color-scheme: […]
Simple Scroll Snapping Carousel (Flexbox Layout / Grid Layout)
Here are two small scroll-snapping carousels that I made. In the top one the items are laid out using CSS Flexbox, whereas the second one uses CSS Grid. The code also works fine with arbitrarily sized .scroll-items elements, they don’t need to have the same width. ℹ️ Want to now more about scroll snapping? Check […]
Idiosyncrasies of the HTML parser
Highly interesting book (in the making) by Simon Pieters, on how HTML parsers work: The HTML parser is a piece of software that processes HTML markup and produces an in-memory tree representation (known as the DOM). The HTML parser has many strange behaviors. This book will highlight the ins and outs of the HTML parser, […]
Optimizing images for the web – an in-depth guide
It’s very easy for unoptimized images to end up on a production site and slow down its initial load considerably. Inexperienced devs usually aren’t aware of this potential problem. They also aren’t aware of a wide range of tools and approaches for optimizing images. This article aims to cover most of the tools and approaches […]