A rather geeky/technical weblog, est. 2001, by Bramus
During Google I/O, Learn CSS! — An evergreen CSS course and reference to level up your web styling expertise — was launched. Broken down in 23 chapters, you’ll learn the fundamentals of CSS. You’ll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you’ll learn …
Continue reading “Learn CSS! — A free course that guides you through CSS fundamentals”
parseInt() in JavaScript
Dmitri Pavlutin digs into why parseInt(0.0000005); evaluates to 5: parseInt(0.5); // => 0 parseInt(0.05); // => 0 parseInt(0.005); // => 0 parseInt(0.0005); // => 0 parseInt(0.00005); // => 0 parseInt(0.000005); // => 0 parseInt(0.0000005); // => 5 🤯 Solving a Mystery Behavior of parseInt() in JavaScript → On a related note, Yannick Clybouw recently hit …
Continue reading “Solving a Mystery Behavior of parseInt() in JavaScript”
Building further upon a “wild story” by Corey Quinn, Nicholas Martin describes how to (ab)use DNS TXT records by storing data in them, as if it were a database: When you think about it, DNS configuration is actually a very rudimentary NoSQL database. You can view and modify it at any time quite easily through …
Continue reading “DiggyDB – Amazon Route53 as a blazingly fast and reliable database”
Jake Archibald has published a nice series in which he has been been performance-testing all F1 sites. Not only does he dig into waterfall charts, he also points out a few simple things that could be applied in order to improve overall loading performance. As a bonus he also tested the Google I/O site, which …
Sara Soueidan, thinking about the different ways we consume web content: The more I consume content in reading apps, the more I am reminded of the importance and the power of progressive enhancement as a strategy to create resilient and malleable experiences that work for everyone, regardless of how they choose to consume our content. …
Continue reading “Optimizing web content for Reader Modes and Reading Apps”
Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect. GSAP not required to achieve the core effect, but it does polish the whole thing … #sweatingthedetails Dynamic CSS Masks with Custom Properties and GSAP →
IntersectionObserver
Jonathan Neal dissects the Islands Architecture approach behind Astro. During the presentation, Fred demonstrates dynamically loading JS using “Islands Architecture”,a strategy where small HTML placeholders are progressively upgraded with dynamic or interactive content as-needed. The demonstration involves waiting on the viewport visibility of a div placeholder before loading some JS. Using an IIFE an IntersectionObserver …
Continue reading “Lazy loading JavaScript using IntersectionObserver“
color-mix(), and CSS color-contrast()
Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview: Relative color syntax, e.g. .bg-primary-100 { background-color: hsl(from var(–theme-primary) h s 90%); } .bg-primary-200 { background-color: hsl(from var(–theme-primary) h s 80%); } .bg-primary-300 { background-color: hsl(from var(–theme-primary) h s 70%); } … CSS color-contrast, e.g. .text-contrast-primary { color: color-contrast(var(–theme-primary) vs white, …
In JavaScript one of the most important data types is Object. Sometimes we want to have more control over certain objects, such as being able to listen to who is reading the object property or updating. One of the best ways to control an object is with a Proxy. You can do a lot of …
Continue reading “A Beginner’s Guide To Proxies in JavaScript”
Temani Afif shares this clever trick to float an element to the bottom corner of a container. The solution is threefold: Float a full-height wrapper (which contains the image) to the right Use flexbox to place the image at the bottom inside that wrapper Use shape-outside to clip the wrapper Clever! Float an Element to …
Continue reading “CSS: Float an Element to the Bottom Corner”