A rather geeky/technical weblog, est. 2001, by Bramus
z-index stacking with the “CSS Stacking Context Inspector” DevTools extension
The Stacking Contexts Inspector is a DevTools extension for Google Chrome that allows you to analyse the stacking contexts available on a webpage. This extension will add a new panel to the DevTools and a new sidebar on the elements panel.
Handy for when you’re having stacking issues.
CSS Stacking Context Inspector →
Stacking Contexts Inspector →
☝️ If you’re running “Edgium”, you can use it’s built-in 3D View to visualize the stacking contexts.
Hat tip, Josh!
Over at the W3C Web Accessibility Initiative (WAI) website you can find an extensive curricula on Web Accessibility
This resource provides teaching modules to help you create courses on digital accessibility, or to include accessibility in other courses. The modules cover accessibility foundations that apply broadly, and specific skills for developers, designers, content authors, and others.
Wow, these surely would’ve come in handy back when I was a lecturer Web & Mobile 😅
Curricula on Web Accessibility: A Framework to Build Your Own Courses →
Great talk by Zach Leatherman as recorded at Smashing Conf Austin 2020:
The talk delves into Single Page Applications, Multi Page Applications, modern JavaScript Frameworks, and what I believe to be a better future for web development.
/me nods along for the entirety of this talk.
Powering his faux-live-coding slidedeck is Queue Code, a package to let you live code like he did in this talk.
Talk by Ben Deitmer, as recorded at the latest Front-end Forward Meetup:
Traditionally most web animations are driven purely by javascript. The now widely supported Web Animations Api has potential to drastically decrease the javascript footprint and improve performance out of the box. Ben learns you how to implement this new api but also have a critical look at its limitations.
ElementInternals
Over at CSS-Tricks, Caleb Williams digs into ElementInternals
The
ElementInternalsstandard is a very exciting set of features with a very unassuming name. Among the features internals adds are the ability to participate in forms and an API around accessibility controls.
As you can see in the demo below his <rad-input> does exactly that.
See the Pen
Rad input with validation by Caleb Williams (@calebdwilliams)
on CodePen.
Creating Custom Form Controls with ElementInternals →
🤨 New to Web Components? John Rhea recently wrote two nice articles for CSS-Tricks covering the basics:
via Geek&Poke
Generate models and serializers from JSON, schema, and GraphQL for working with data quickly & safely in any programming language.
Just paste in some JSON object, choose your output language, and voila!
quicktype — Convert JSON into gorgeous, typesafe code in any language →
When generating a browser identifier, we can read browser attributes directly or use attribute processing techniques first. One of the creative techniques that we’ll discuss today is audio fingerprinting.
Using an Oscillator and a Compressor they can basically calculate a specific number that identifies you.
Every browser we have on our testing laptops generate a different value. This value is very stable and remains the same in incognito mode.
And this only takes a few ms to calculate! 🤯
Linked below is yet another article urging one to use CSS Logical Properties. What caught my eye in this one is the fact that author Daniel Yuschick reworked his personal website to use them, as shown in this video below.
Impressive!
CSS Logical Properties Are the Future of the Web & I18N →
danyuschick.com →
~
grex
grexis a library as well as a command-line utility that is meant to simplify the often complicated and tedious task of creating regular expressions. It does so by automatically generating a single regular expression from user-provided test cases. The resulting expression is guaranteed to match the test cases which it was generated from.
As Stefan shows: simply type in some terms into grex that you want to match and the RegExp comes out … 🤯
I just learned about the CLI tool `grex`. It might change how I approach regular expressions (🤞🙈).
You provide string values and it comes up with a regular expression matching them.😲https://t.co/69y4NGcwjQ
Video alt: CLI session showing multiple generated reg. expressions. pic.twitter.com/20A9W4C6Zr
— Stefan Judis (@stefanjudis) March 21, 2021
Also available as a Rust library.
use grex::RegExpBuilder;
let regexp = RegExpBuilder::from(&["a", "aa", "aaa"]).build();
assert_eq!(regexp, "^a(?:aa?)?$");