What’s new in @bramus/specificity v2

Back in February I created @bramus/specificity, an NPM package to calculate the Specificity of CSS Selectors. As that version was more of a thought experiment/POC, there was a lot of room for improvement. Yesterday, after 11 betas, version 2.0.0 of @bramus/specificity was released. Let’s take a look … Quick Example To give you an idea …

Corset — Cascading Binding Sheets

Matthew Philips made something odd-looking: a JavaScript framework that lets you add DOM bindings using a CSS-like syntax. Say your framework of choice generates this markup: <div class="counter"> <button type="button" class="increment">Increment</button> <button type="button" class="decrement" disabled>Decrement</button> <div class="result"> Count: <strong class="count">0</strong> </div> </div> Using Corset, you can then add behavior as follows: import sheet, { mount …

A Proposal For Type Syntax in JavaScript

A very interesting Stage-0 proposal is to bring optional and erasable type syntax to JavaScript. The proposed syntax looks like this: function add(a: number, b: number) { return a + b; } The type hints wouldn’t be used by JS itself though — so you won’t get a runtime error if you pass something other …

Decipher pixelated images with unredacter

Unredacter shows you why you should never ever ever use pixelation as a redaction technique. As mentioned in the accompanying write-up: The bottom line is that when you need to redact text, use black bars covering the whole text. Never use anything else. No pixelization, no blurring, no fuzzing, no swirling. unredacter (GitHub) →Never, Ever, …

Log images to the DevTools Console with console.image()

One of the things you can do on the DevTools’s Console is style the output for console.log() and the like: console.log(“%cMy stylish message”, “color: yellow; font-style: italic; background-color: blue;padding: 2px”); Leveraging this technique, it’s possible to log images to the console: Load the image via JS and extract its dimensions Expand the box of the …

MeshSpin.js

Meshspin.js is a simple and lightweight JavaScript library that lets you spin a 3D mesh object in your browser using SVG and JavaScript without dependencies. A default MeshSpin is defined as follows, but you can also define your own shapes and have it rotate by mouse movement. var mesh = new MeshSpin(); mesh.setup(‘wrapper’); mesh.run(); See …

JavaScript for Impatient Programmers (ES2022 edition)

A book on JavaScript by Axel Rauschmayer. This book makes JavaScript less challenging to learn for newcomers, by offering a modern view that is as consistent as possible. Covers all essential features of JavaScript, up to and including ES2022. You can read the entire contents online, or order PDF/EPUB/MOBI versions for $34 JavaScript for Impatient …