A rather geeky/technical weblog, est. 2001, by Bramus
Here in Belgium schools are locked down due to #coronavirus. With the school of my two oldest kids now switching to remote teaching, I took the time to set up my old MacBook Pro (model late 2008) for my two oldest kids to use. That didn’t go without any hiccups though: the OS X installer …
TIL: When working with namespaced files in PHP it’s a huge performance win when using fully-qualified function calls. ~ If you’re calling is_null in your code, PHP will first check for the function’s existence in the current namespace. If not found there, it will look for the function in the global namespace. This extra check …
In this series, step by step, I’ll show you how to build web applications with Laravel 6. We’ll start with the basics and incrementally dig deeper and deeper, as we review real-life examples. Once complete, you should have all the tools you need. Let’s get to work! All 68 videos in this course, totalling 8:59:43 …
Mariko Kosaka has created a small PWA that fills your screen with water over a duration of 20 seconds. After first using CSS animations to animate the water (video), she eventually turned to Houdini‘s CSS Paint API Wash your hands for 20 seconds →
<watched-box> Custom Element
Heydon Pickering has created <watched-box>: I wanted a simple, declarative container queries solution, and here it is: ❤ Custom Element + ResizeObserver 🥣 Use and mix together any CSS length units 🖼 Orientation supported 🧚♀️ ≅1.5KB minified Once imported you can use it as follows: <watched-box widthBreaks="70ch, 900px" heightBreaks="50vh, 60em"> <!– HTML and text stuff …
Continue reading “Container Queries with the <watched-box> Custom Element”
The react-intersection-observer package is an easy way to work with the Intersection Observer API in React. It comes with both a Hooks, render props and plain children implementation. import React from 'react' import { useInView } from 'react-intersection-observer' const Component = () => { const [ref, inView, entry] = useInView({ /* Optional options */ threshold: …
Continue reading “useInView – A React Hook to work with IntersectionObserver”
On his blog, Philip Potter described something he calls “the git pickaxe”, a way to finding commits that contained a specific word. It uses git log‘s -S option to search for specific string: -S<string> Look for differences that change the number of occurrences of the specified string (i.e. addition/deletion) in a file. Intended for the …
Continue reading “The git pickaxe – Find commits that added/removed a specific string”
HTML DOM is a collection of JavaScript snippets to perform common tasks. No dependencies. HTML DOM →
Layouts with diagonal sections are quite popular for several years now. It is not the new hot stuff, and you will probably not find it in the articles titled “Design trends for 2020”. But I think it is here to stay. It is one tool designers can use to bring some dynamic to all the …
Continue reading “Create Diagonal Layouts with CSS Transforms”
place-items shorthand
Great tip by Umar Hansa: CSS Tip 💡️The place-items property is shorthand for the align-items and justify-items properties. Here's an interactive demo of how it works: https://t.co/4unHqw5R3o — Umar Hansa (@umaar) April 7, 2020 To center children both vertically and horizontally, you only have to use these two declarations: element { display: grid; place-items: center; …