A rather geeky/technical weblog, est. 2001, by Bramus
animate-css-gridIn a new(ish) web-project I’m working on, I went all-in on CSS Grid. The website contains a page where one can filter the list of elements shown. To animate this filtering I used animate-css-grid, as other libraries typically used for this – e.g. Isotope – don’t play nice with CSS Grid. Installation per NPM/Yarn: yarn …
Continue reading “Rearrange / Animate CSS Grid Layouts with animate-css-grid“
⚠️ Running Valet 2.x with a PHP version lower than 7.1 won’t work, until this issue is resolved. You can still switch to that version for use on the CLI. You just won’t be able to use it with Valet 2.x ℹ️ UPDATE 2018.10.23: Freek has developed some handy aliases to easily switch PHP versions. …
Continue reading “Switching PHP versions with Laravel Valet”
Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling.It is 100% open source and available on Github. It is free to use on personal and commercial projects. Use it with your favourite module bundler or by manually injecting the script into your project. I especially like the fact that …
Continue reading “Siema – Lightweight and simple carousel with no dependencies”
position: sticky;Sticky Events is a library that can listen for events on elements that have position: sticky; applied. It’s an abstraction built on top of the IntersectionObserver, and provides one with three types of events: StickyEvent.CHANGE: Fired when an element becomes stuck or unstuck StickyEvent.STUCK: Fired only when an element becomes stuck StickyEvent.UNSTUCK: Fired only when …
Continue reading “Sticky Events – Events for position: sticky;“
On the web it is – by now – obvious that you make your website responsive (*). Using a listener listening to the change event of the Dimensions API, it’s also possible to implement this kind of behaviour in React Native. import {Component} from "react"; import {Dimensions} from "react-native"; export default class LogDimensionChanges extends Component …
Nice writeup by Josh Comeau on how he created the on-scroll-animated bézier curve on his website Did you notice that as you started scrolling on this page, the Bézier curves that border the green title hero thingy started flattening? Keep your eye on the swoopy curves just above the post text as you scroll through …
Dean Hume: I’ve built a number of Progressive Web Apps that simply update the service worker silently for the user in the background, but I really like the approach where you get a popup notification that suggests that there is a new version of the site available like Google’s Inbox provides – especially for an …
Continue reading “How to display a “new version available” for a Progressive Web App”
Use case by JonLuca De Caro in which he optimised the page load speed of a static site. Before optimisation the site weighed 1MB (at 20 requests) with DOMContentLoaded at 3.74s. After optimisation the site weighed only 267kB (at 9 requests) with DOMContentLoaded at 197ms. 10x Performance Increases: Optimizing a Static Site →
async–await: Resolving Promises in parallel
Recently I saw a colleague implement some functionality in which he required two results from an API using async–await. The piece of code looked something like this: The code looks fine, is syntactically correct, and works … but there’s one big problem with it: the calls are made sequentially. To run these calls – which …
Continue reading “JavaScript async–await: Resolving Promises in parallel”
I enjoyed reading this piece by Keith J. Grant on three key characteristics of CSS that set it apart from conventional programming languages. I want to look at three key characteristics of CSS that set it apart from conventional programming languages: it’s resilient; it’s declarative; and it’s contextual. Understanding these aspects of the language, I …