Ship legacy JavaScript and CSS files in a Webpack Project with webpack-merge-and-include-globally

One of the projects that I’m working on is quite reliant on jQuery and Bootstrap. As we’re introducing new features (such as a few React-based components, and Stylus for CSS) in said project, we’ve also introduced Webpack into it. Now, we don’t want to run jQuery nor Bootstrap through Babel (using Webpack), but we want […]

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: […]

GitHub CI Workflow for PHP applications

Mattias Geniar has shared his GitHub Workflow to make GitHub do the CI work for PHP applications: on: push name: Run phpunit testsuite jobs: phpunit: runs-on: ubuntu-latest container: image: mattiasgeniar/php73 steps: – uses: actions/[email protected] with: fetch-depth: 1 – name: Install composer dependencies run: | composer install –prefer-dist –no-scripts -q -o; – name: Prepare Laravel Application […]

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 […]

Working with symlinked packages in PHP

When developing a PHP library/package, you most likely also have a project on disk that consumes said library. Take a WordPress plugin for example: to test it, you need a WordPress installation — both are linked but separate projects. To speed up development you can tell Composer to use the local version of the package, […]

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, […]

Overriding the PHP version to use when installing Composer dependencies

If you have a (legacy) PHP project running on a legacy server (running PHP 5.4.27 for example), but are locally developing with a more modern PHP version (PHP 7.4 for example), you might end up installing dependencies that are not compatible with the PHP version on the server. To bypass this, you can tell Composer, […]

Building Better Interfaces, a talk by Hakim El Hattab

At CSS Day 2019, I was fortunate to see Hakim El Hattab bring his talk Building Better Interfaces. A recording of his talk – and all other talks – are available on YouTube: This session is a deep-dive into the areas of interface design that Hakim has specialized in for over a decade—interactivity and animation. […]