A rather geeky/technical weblog, est. 2001, by Bramus
In this video, Kevin J Powell, shows how to use new and upcoming CSS features today, thanks to PostCSS and its postcss-preset-env plugin. The video covers Custom Media Queries, Media Query Ranges, CSS Nesting, and Custom Selectors.
Glow is a terminal based markdown reader designed from the ground up to bring out the beauty — and power — of the CLI. Installation per Homebrew brew install glow Once installed, you can open files in several ways: # Read from file glow README.md # Read from stdin glow – # Fetch README from …
Next generation audio from Adobe is here. Record, transcribe, edit, share. Crisp and clear, every time. This is pretty crazy: it automagically transcribes the recorded audio, and allows you to alter the segments by removing words from the transcribed text. That Enhance Speech Filter also blew my mind there. Project Shasta →
rci — A clever React Component for One-Time Passwords (OTP)
rci is a React component that ask for a one time password, in a pretty clever way. rci uses a single DOM input element, overlayed on top of plain divs for styling. Most other implementations of this pattern are based on multiple inputs. Using multiple inputs gives out-of-the-box style consistency, but comes with the disadvantage …
Continue reading “rci — A clever React Component for One-Time Passwords (OTP)”
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”
Pete LePage has all the details about what’s new for developers in Chrome 97: Chrome 97 is rolling out now! There’s a new option for sending real-time messages between the client and server using Web Transport. You can use feature detection to see what types of scripts a browser supports. JavaScript gets better, and there’s …
Continue reading “What’s new in Chrome 97 (Features + DevTools)”
Up on Egghead you there’s a free video course on how to migrate to React 18. Host Michael Chan walks us through it all in about 15 minutes. In this new course, Michael guides you through incrementally migrating a legacy application that uses the legacy ReactDOM.render() API to the new ReactDOM.createRoot() API. Along the way, …
Continue reading “Migrate a Client-Side Application to React 18 Beta (Video Course)”
As part of Designcember, Google Chrome Developer Relations Engineer Una Kravets published season three of “Designing in the Browser”, a series of videos on exploring user interface design through the lens of modern web technology. In these short and on-point videos, you’ll learn about certain Web/CSS features and DevTools along the way. The third season …
:has()
Similar to how you can (ab)use :nth-child() to create “new” CSS selectors, you can leverage :has() to create some typical combinators. Brandon McConnell did just that: y:has(+ x) selects the first preceding y sibling of x: y:has(~ x) selects all preceding y sibling of x: x + y, y:has(+ x) selects the first preceding and …
Continue reading “Magic PostCSS Custom Combinators using :has()“
This is a blog post explaining the process of fixing an issue related to wavy text decorations in Blink, that ended up with a similar fix in WebKit. Interesting to read about the work and thought-process behind at-first sight “seemingly simple features” such as the wavy underlines for Spelling and Grammar errors. Be sure to …
Continue reading “A story on web engines interoperability related to wavy text decorations”