A rather geeky/technical weblog, est. 2001, by Bramus
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; …
As of Chrome 80, the Notifications API became available as an Origin Trial. The problem with the Push API is that it’s not reliable for triggering notifications which must be shown when a particular condition, like time or location, is met. Notification triggers solve this problem by letting you schedule notifications with their triggering condition …
Talk by Robert Zhu, member of the GraphQL Working Group (amongst other things). Since the formation of the GraphQL Foundation last year in March, we have been working on creating a resilient process to govern the GraphQL ecosystem and language evolution. In this talk, I will discuss the roles and responsibilities of the GraphQL Foundation, …
Expect: 100-continue header …
TL;DR HTTP clients may send a Expect: 100-continue header along with POST requests to warn the server that they’re about to send a large(ish) payload. At that point the server can: Decline, by sending back 401/405 and successively closing the connection. Accept, by sending back 100 Continue, after which the client will send over the …
Continue reading “About the HTTP Expect: 100-continue header …”