Introducing `@bramus/specificity`, a JavaScript package to calculate the specificity of a given CSS Selector
Calculate the Specificity of a CSS Selector with @bramus/specificity
Tag Archives: javascript
Calculate the Specificity of a CSS Selector with
Generate a Pagination Number Sequence with @bramus/pagination-sequence
Introducing `@bramus/pagination-sequence`, a JavaScript package to generate a sequence of numbers for use in a pagination system, the clever way.
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 …
Continue reading “Log images to the DevTools Console with console.image()“
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 …
Continue reading “JavaScript for Impatient Programmers (ES2022 edition)”
WEBMIDI.js — Send and receive MIDI messages with ease
If you don’t want to directly use the Web MIDI API, you can use WEBMIDI.js WEBMIDI.js makes it easy to interact with MIDI instruments directly from a web browser or from Node.js. It simplifies the control of physical or virtual MIDI instruments with user-friendly functions such as playNote(), sendPitchBend() or sendControlChange(). It also allows reacting …
Continue reading “WEBMIDI.js — Send and receive MIDI messages with ease”
Show a Progress Indicator for a Fetch Request with the Streams API
AnthumChris collected some JavaScript scripts to track the progress of fetch requests that download files/data. It works by leveraging the ReadableStream interface from the Streams API. A “simple” example is this: fetch('https://fetch-progress.anthum.com/30kbps/images/sunrise-baseline.jpg') .then(response => { if (!response.ok) { throw Error(response.status+' '+response.statusText) } if (!response.body) { throw Error('ReadableStream not yet supported in this browser.') } // …
Continue reading “Show a Progress Indicator for a Fetch Request with the Streams API”
ESNext: Sort arrays using array.groupBy() and array.groupByToMap()
An ECMAScript Proposal that recently made it to Stage-3 is “array grouping”. It brings us array.groupBy() and array.groupByToMap() methods to easily group arrays.
Deep-copying in JavaScript using structuredClone
No more hacking around with the inadequate JSON.parse() or bouncing data to a Web Worker in order to deep clone an object, as there’s now structuredClone() For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with structuredClone(), a built-in …
Continue reading “Deep-copying in JavaScript using structuredClone”
12 Days of Web
12 Days of Web is Stephanie Eckles‘s “advent” calendar. A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript. Three days in, and she has already covered Intersection Observer, <details> + <summary>, and CSS Custom Properties. Good stuff. 12 Days of Web → Related: Find more web advent calendars here.