If you’re not entirely familiar with CORS, this guide by Lydia Hallie will explain it to you using lots of visuals.
Responsible Web Applications
Good little collection of tips for creating responsible (= responsive + accessible) web applications by Joy Heron.
With modern HTML and CSS, we can create responsive and accessible web apps with relative ease. In my years of doing software development, I have learned some HTML and CSS tips and tricks, and I want to present these in this post. This list is not exhaustive, but these are tried and true patterns that I frequently use in different projects.
A shame she calls them “tips and tricks” though, as there for example is no “trick” to using proper headings and landmarks — It is a basic idea/pattern every frontend dev should know about and apply, no magic needed.
Responsible Web Applications →
Sidenote: You might want to refrain from using the
<details> as an accordion though …Design Principles For The Web
The opening presentation from An Event Apart Online Together: Front-End Focus held online in August 2020
It’s a typical Jeremy Keith talk with many things mentioned, all converging to what he described before in his blog post Robustness and least power (and also covered in other talks). Definitely worth your time.
Hit the link for a full transcript, audio-only download, and the slides.
Unclack for macOS: Automatically mute your microphone while you type
Unclack is the small but mighty Mac utility that mutes your microphone while you type. No more getting called out for clacking your way through a Zoom meeting on your clicky keyboard!
Heh, clever.
Related: I’m a happy user of Krisp, which uses AI to automatically filter out background noises (and typing, albeit only tested while using an external keyboard)
Ruffle — Flash Player Emulator built in Rust
With Adobe Flash now gone, there’s no way to play SWF files. For sites like The Web Archive this can be troublesome as many of the old Flash-built websites will no longer be viewable. Ruffle will help them out:
Ruffle is a Flash Player emulator written in Rust. Ruffle runs natively on all modern operating systems as a standalone application, and on all modern browsers through the use of WebAssembly. Leveraging the safety of the modern browser sandbox and the memory safety guarantees of Rust, we can confidently avoid all the security pitfalls that Flash had a reputation for. Ruffle puts Flash back on the web, where it belongs – including iOS and Android!
Note that this is still a Work in Progress. Actionscript 1 & 2 Support is just over halfway, but support for AS3 is still only at 5%.
Guide to Advanced CSS Selectors
Two part series by Stephanie Eckles on CSS Selectors
In this two-part mini-series, we’ll explore some of the more advanced CSS selectors, and examples of when to use them.
Even if you’re doing frontend but not primarily writing CSS you should learn these, along with the basic CSS vocabulary.
This knowledge will allow you read code that others have written both today and tomorrow, when then framework-du-jour is long gone.
Guide to Advanced CSS Selectors – Part One →
Guide to Advanced CSS Selectors – Part Two →
Running GitHub Actions for Certain Commit Messages
Ryan Chandler shares how to configure your GitHub Actions Workflow in such a way that they skip a build when a certain word appears in the commit message.
jobs:
format:
runs-on: ubuntu-latest
if: "! contains(github.event.head_commit.message, 'nobuild')"You can also flip it around, to only build whenever a specific word is present.
Running GitHub Actions for Certain Commit Messages →
Via Freek
Snowpack v3.0
Version 3.0 of the aforementioned Snowpack got released, and it’s quite exciting I must say!
- Pre-bundled streaming imports – Import any npm package, on-demand.
- Integrated build optimizations – Built-in bundling, preloading, minification, and more.
- JavaScript API – Integrate with Snowpack’s brand new native JS API.
- Node.js Runtime API – Import your Snowpack-built files directly into Node.js.
The streaming imports will most likely have the biggest impact on us all:
Streaming imports make it possible to import any package directly into your project, pre-built and pre-bundled for immediate use. It’s the power of the entire JavaScript ecosystem, at your fingertips.
With streaming imports we can now simply write import statements, and Snowpack will fetch the package for us from Skypack — No npm install needed!
And since it uses esbuild under the hood it’s fast. Blazing fast.
The complete guide to CSS media queries
Last summer Kilian Valkhof did a wonderful write-up on the Polypane blog covering CSS Media Queries.
Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use?
Good for beginners, but seasoned developers might also want to take a look at the “New notations in Media query levels 4 and 5” section 😉
The complete guide to CSS media queries →
🔗 Related: Creating websites with prefers-reduced-data
🧑🏫 Kilian also covers nesting of CSS Media Queries, something I only recently discovered was possible.
Alt vs Figcaption
This message by Elaina Natario writing over at Thoughtbot cannot be repeated enough:
While both the
altattribute and thefigcaptionelement provide a way to describe images, the way we write for them is different.altdescriptions should be functional;figcaptiondescriptions should be editorial or illustrative.
Examples of both functional and editorial descriptions in the full post!