A rather geeky/technical weblog, est. 2001, by Bramus
Great find by Stefan Judis: Today I learned that the content property supports a way to define alternative text for generated content. You can specify the alternative content after a /: .new::before { content: url(./img/star.png) / "New!"; } Here’s how that works with screen readers: .new-item::before { /* "black star" and element content is read …
Continue reading “Alternative text for CSS generated content”
KeyCastr is an open-source keystroke visualizer. Handy to use while screencasting/livestreaming/teaching. Installation per Homewbrew Cask: brew cask install keycastr KeyCastr →
Deno is a brand new JavaScript runtime, similar to Node.js. Use it to develop secure server-side apps with built-in TypeScript support, ES modules, and promise-based APIs. 📝 If you’re looking for a more extensive write-up on Deno, check Deno 1.0: What you need to know
||=, ??=, &&=)
Update 2020.07.21: This proposal made it into Stage-4 and will officially be part of ES2021 🥳 A new ECMAScript Proposal that I’m looking forward to is Logical Assignment Operators. In short it combines Logical Operators (||, &&, and ??) with Assignment Expressions (=). // "Or Or Equals" (or, the Mallet operator) a ||= b; // …
Continue reading “ESNext: Logical Assignment Operators (||=, ??=, &&=)”
Deno version 1.0 is about to land next week. LogRocket walks us through it from A to Z. Deno 1.0: What you need to know → 💁♂️ Deno is a new take on Node, as if it were designed today, by the original author of Node. Here’s a good introductory video.
Nice work by Addy Osmani: Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. This repository has recipes for automating Web Performance measurement with Puppeteer. Automating Web Performance testing with Puppeteer →
min(), max(), clamp() in CSS
Ahmad takes a look into the CSS min(), max(), and clamp() functions. As with all his articles, he also provides some practical use cases and examples. Regarding the clamping of the font-size of a page, you don’t really need clamp(): This is how to accessibly set a viewport relative scaling `font-size` with a min AND …
Continue reading “Everything I Learned About min(), max(), clamp() in CSS”
Tim MacDonald shares a way to sharing PHP-CS-Fixer rules across your projects. It involves in setting up on repo/package that contains the rules and a little helper class that takes in a PhpCsFixer\Finder instance (along with optional extra rules). <?php namespace TiMacDonald; use PhpCsFixer\Config; use PhpCsFixer\Finder; function styles(Finder $finder, array $rules = []): Config { …
Continue reading “Sharing PHP-CS-Fixer Rules Across Projects and Teams”
100vh in Safari on iOS
Update 2021.07.08: There are new viewport units on the way that will finally solve this issue. 100dvh is the one you’re looking for. When working with Viewport Units there’s this longstanding and extremely annoying bug in Safari on iOS where it does not play nice with the vh unit. Setting a container to 100vh for …
Web Vitals is a new great set of articles on Web.dev (by Google) focussing on delivering a great user experience on the web. To help developers focus on what matters most, they’ve selected a set of metrics which they call “Core Web Vitals”. The metrics that make up Core Web Vitals will evolve over time. …
Continue reading “Web Vitals – Essential metrics for a healthy site”