A rather geeky/technical weblog, est. 2001, by Bramus
In this article on CSS-Tricks, Mads Stoumann digs into :where(), Custom Properties, and Cascade Layers to control the CSS Cascade.
At the end, Mads concludes:
If you leave with only one takeaway from this article, I hope it’s that the CSS cascade is no longer the enemy it’s often made to be. We are gaining the tools to stop fighting it and start leaning into even more.
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 glowOnce installed, you can open files in several ways:
# Read from file
glow README.md
# Read from stdin
glow -
# Fetch README from GitHub / GitLab
glow github.com/charmbracelet/glow
# Fetch markdown from HTTP
glow https://host.tld/file.mdNext 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.
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.
rciuses 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 of JavaScript hacks to deal with focus shifting and pasting, and accessibility issues.
By starting from one input, rci can also make use of autocomplete="one-time-code" to autocomplete one-time passwords.
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()orsendControlChange(). It also allows reacting to inbound MIDI messages by adding listeners for events such asnoteon,pitchbendorprogramchange.
Works like a charm. Initialize it, and start listening for events.
See the Pen WebMidi.js by Bramus (@bramus) on CodePen.
In the browser you can include a self-registering script to get it. ESM and CJS flavors are also available.
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 plenty more.
WebTransport looks like a very handy addition if you’re bouncing data to and from the server:
It can be used like WebSockets but with support for multiple streams, unidirectional streams, out-of-order delivery, and reliable as well as unreliable transport.
HTMLScriptElement.supports() is something the aforementioned es-module-shims could have benefited from to detect support for Import Maps. As that library targets older browsers — that don’t support HTMLScriptElement.supports() — they can’t, though.
~
To learn what’s new in DevTools, let Jecelyn Yeen enlighten you:
Great to see the Recorder panel get included as a Preview Feature, after first being included as an Experimental Feature in Chromium 89.
2021 has been quite a busy year for me and my blog. Here are some numbers about bram.us, my online presence, work, and leisure time.
~
First, some numbers about bram.us in 2021. What and how much content did I share? Did it attract any readers? Did it make any money?
In 2021 I published 397 posts in the Elsewhere category here on bram.us. Posts in this category are all about things created by other people:
If you’re running a WordPress blog, you can use the MySQL query below to get all posts in category X, published between 2021-01-01 0:00:00 and 2021-12-31 23:59:59 (local time):
SELECT wp_posts.*
FROM wp_posts
INNER JOIN wp_term_relationships ON wp_term_relationships.object_id = wp_posts.ID
INNER JOIN wp_term_taxonomy ON wp_term_taxonomy.term_taxonomy_id = wp_term_relationships.term_taxonomy_id
INNER JOIN wp_terms ON wp_terms.term_id = wp_term_taxonomy.term_id
WHERE 1
AND wp_posts.post_type = 'post'
AND wp_posts.post_status = 'publish'
AND wp_posts.post_date BETWEEN '2021-01-01 0:00:00' AND '2021-12-31 23:59:59'
AND wp_term_taxonomy.taxonomy = 'category'
AND wp_terms.name = 'X'
ORDER BY wp_posts.post_date DESC;Replace X with the name of the category you want to query.
I tend to share this kind of stuff here — instead of resorting to Twitter — because that way I can add a bit of extra information, remix the code covered, add a nuanced opinion, etc.
You can think of my blog as my personal bookmarking service, which you also happen to have access to 🙂
If you’ve been following bram.us for quite some time, you may have noticed that my post-frequency isn’t all that: Sometimes I don’t post for over a week, yet other times you may find +10 links shared in under two days. That’s because Bram.us is still a one-person shop and something I maintain after-hours, voluntarily.
Sometimes, I also don’t feel like writing/producing content and switch to a consumption modus for a few days/weeks. During those periods of “downtime”, I do continue to collect links. Right now, I still have a backlog of about 200 open browser tabs with possibly exciting content to share 😅.
~
In total I published 58 posts in the Original Content category this year. This category holds the posts with self-created content. Sometimes it’s only a short post/tip, but in 2021 I also published some extensive deep dives:
Furthermore I also covered some topics that are still (fairly) new:
::target-text pseudo-element::spelling-error and ::grammar-error pseudo-elements:is()scrollbar-gutter CSS property:has() selector is way more than a “Parent Selector”Additionally, these posts also seemed to resonate well with you, dear readers:
multiple attribute:not(:focus):invalid, not :invalidI’m especially proud of my posts on CSS @scroll-timeline, a set of posts that was well-received. These posts opened up some public speaking engagements and put me on the radar of several web people whom I respect and admire.
To be honest, I don’t have a specific writing process when writing. Most of the time, I just crank out the words and see how everything takes shape as I go. For some bigger posts, though, I do create an outline or demos first, as I need to get the story straight before going all-in.
What I catch myself doing, is to re-read my posts the day after they are published. That’s when extra editing takes place: removing spelling errors, correcting the use of wrong prepositions, rewording some weird sentences, clarifying things with an extra paragraph, etc.
~
Screenshot of my Google Analytics Stats, spanning 2021
According to Google Analytics — which some visitors may have blocked — the blog has received a little more than 400k Pageviews in 2021. When counting Unique Pageviews, the number reads 360,836.
The topmost visited post — with 21k pageviews — is an old one from 2016: Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only).
That post features a hack to prevent Safari on iOS from overscrolling. Unfortunately MobileSafari broke the listed hack/workaround with the Safari 15 release. On the upside, I expect overscroll-behavior — a new CSS property that allows you to prevent overscrolling — to land sometime in 2022 in Safari.
If anyone from the Safari team is reading this: please bump up the priority on bug #176454. Authors are actively looking for ways to disable overscrolling, and will benefit from MobileSafari supporting overscroll-behavior.
A post that closes off the top 10 — with 10k views — is my post on CSS :has(). Writing about it at the very moment when the feature got released in Safari Technology Preview 137 surely helped, especially as the announcement tweet got retweeted by people such as Una Kravets and Jen Simmons who have a very big reach on Twitter. The tweet also got picked up by publications such as Smashing Magazine and CSS {IRL}, which also certainly helped.
Many visitors got here via links shared on Twitter. Having my work included on other publications/aggregators (CSS-Tricks, Sidebar, Codrops Collective, CSS {IRL}, ModernCSS.dev Newsletter, Stefan Judis’s Newsletter, etc.) and other blogs also drove quite the amount of traffic.
~
If you think I’m making a ton of money from this blog, think again. In 2020 I added ads powered by Carbon to this site, and over the course of 2021 they earned me $375.97. Money that’s used to pay for the hosting of this blog, and to buy stuff like The State of CSS T-Shirt.
Could I make extra money from blogging? Of course I could. Although it surely would make some things easier, I — in a typically Belgian way of doing things — am way too timid and polite to pursue things such as external funding. And if I ever would, I know I would be underselling myself. Above that: I do this for fun. That’s why I’ve turned down a bunch of sponsored content requests (which mostly looked liked scams anyway).
Know your strengths. Marketing myself is not one of those things. Educating people, explaining things, and writing tech content is.
In the end, though, this blog does make me money, but in an indirect way. One of the clients I worked for in 2021 contacted me after one of their devs — who’s been reading bram.us since the early days — suggested me for the position. The interview was more of a formality, as they already had a pretty good idea of my skillset.
~
This year, bram.us celebrated its 20th anniversary. I covered this event — and the history of bram.us — in detail in this celebratory post.
~
My online presence is not limited to my blog. I’m also active on Twitter and can often be found speaking at conferences/meetups.
Apart from my posts here, I also wrote some content for external publications. It’s the first year I’ve done this. In total, I published three posts, all on CSS-Tricks:
Although I’m an advocate for owning your content, I grabbed these opportunities to spread the word on CSS Scroll-Timeline more widely. I’m grateful to Chris for giving me the chance to do so, and thankful that they also considered me for the end of year series.
~
This year, I spoke at six events: four conferences and two meetups. Originally three meetups were planned, but one — the only one that was going to be in-person — got canceled at the very last moment as the Belgian government banned in-person gatherings again due to the pandemic.
Me, talking at CSS Conf Colombia (Remote)
~
~
~
Apart from these speaking occasions, I attended a few other (online) events. Although nothing beats an in-person event, I always get the so-called “speaker’s high” after doing a talk. It might sound weird, but speaking drains my mental battery and fills me with creative energy simultaneously.
~
In July, I, together with Michelle Barker, was a guest on “Dev Roulette Live” by Stephanie Eckles. During the one hour we had, we talked about Layout in CSS, Creative CSS, Progressive Enhancement, etc.
Screenshot of my Community Highlight on web.dev
In December, Rachel Andrew contacted me for a Community Highlight on web.dev. The questions she sent over were very on-point, and I gladly sent in my answers.
These two interviews were not something I ever expected to be asked for and were things somewhat outside my comfort zone.
~
I don’t have any exact starting numbers for this, but I more than doubled my Twitter followers on both my Twitter accounts:
What surely helped with reaching these numbers is Una vouching for me on Twitter back in March, after my Houdini experimentations and my posts on Scroll-Timeline put me on her (and her colleague Adam Argyle‘s) radar. That tweet alone gained me 500 followers in one month.
The rest was achieved — I think — by posting good content and by posting good content regularly. To me, good content is something new, insightful, explanatory, refreshing, etc. — things I am to cover here on bram.us.
~
Like many others in tech, I worked mostly from home in 2021. Here are some key figures worth nothing.
In 2017, I joined a new project to monitor Petrol Stations remotely via IoT. I helped architecting the app and built the PHP back-end and entire front-end. My colleague Roel took care of the infra-part and the Python code that runs on-site. The project kept growing over time, and by the end of 2018, we, together with the client who paid for it all, decided to start a new company: vBridge.
Long story short: even though vBridge was doing great and the work was challenging to do, I wasn’t feeling all too happy. My passion lies with front-end, yet there I was, juggling PHP code from day-to-day. Above that, I was abandoning my own company for it, something I didn’t want.
By the end of 2020, I decided to focus on my own company and front-end development again. In 2021 that was finalized by selling my shares back to the two other partners, thus exiting vBridge.
To be honest, this was one of the best choices I have ever made because almost everything I did on the web this year (see above), is a direct result of this choice.
~
With my own company, I served three main clients in 2021, apart from some tiny ones and some volunteering work for non-profits.
A (deliberately blurred) photo taken at one of the VRT Creative Lab Brainstorming Sessions
One client that I enjoyed freelancing very much for was VRT Creative Lab, the in-house agency for VRT, our national broadcaster here in Belgium. They hired me to work on a Next.js + Dato CMS-powered project. Apart from working on the project, I also joined their weekly “Tea Time” moments and attended some brainstorming sessions — it felt great to be part of a (creative!) team again. Unfortunately, it was only a temporary assignment that ended just before the holidays.
~
Every Wednesday daycare is closed and my two oldest kids only get half a day of school. Because of this I decided to no longer work (or do a lot of work) on Wednesdays. Taking those days into account, I end up with 179 days or 1,432 hours that are potentially billable per year:
365 days in one year - 10 national holidays - (52*2) weekend days - 52 Wednesdays - 20 vacation days = 179 potentially billable daysOf those 1,432 hours I aim to bill about 1,400 hours per year. Looking at the numbers from my timesheets, I fell 120 hours (or 15 workdays) short.
Those 15 “missing” days were mostly spent with my family; going on an extra last-minute diving vacation; but also doing non-billable work — yes, I worked more than only those billed hours 😉
~
It’s not all work and blogging in my life, it’s also about spending time with the family and re-energizing myself.
I planned on going camping with the family, but I also did 2 last-minute diving vacations. In-between those bigger trips we frequently visited the Belgian coast.
~
In 2020 me and my buddies from my diving club, “Bubbledivers”, planned on going to the Maldives to do a liveaboard in late October 2020. That vacation, unfortunately, got canceled due to COVID, so a few of us were very eager to take a flight to “someplace with blue water” from the moment we were allowed to. In June 2021, we seized the opportunity and went to Malta for a week. My wife — who doesn’t dive — also joined us.
We stayed in a hotel in Sliema, and went diving with Dive Systems Malta. During one of our dives near Gozo, I spotted a sea horse hidden in the weeds.
I’ve uploaded all videos shot with my GoPro to this YouTube Playlist.
~
A rainbow over the camping ground
This summer, our family went camping in The Ardennes — a pretty typical Belgian thing to do. Together with my brother his family (wife + 2 kids), we pitched our tents for a week near Malmédy. We originally planned on going to La Roche-en-Ardenne, but due to severe floodings the week before, we had to switch locations. Although it rained quite a bit, we had a wonderful time.
~
As we typically go on a diving vacation in late October with our diving club, we had the urge to leave again. With Egypt always being a good bet when it comes to diving, we settled on going there in early November — read my announcement post here. COVID was merciful on us, although I did fear getting there after one of the passengers on our plane died mid-flight
Ahem, things didn't go to plan. One of the passengers got unwell and they had to perform CPR. We made an emergency landing in Klagenfurt (Austria) where the emergency services took over. The passenger unfortunately didn't make it so we have to fly back to where we came from. #RIP
— Bramus (@bramus) November 6, 2021
With a one day delay, we did make it after all. I’ve uploaded some videos (but not all, yet) to this YouTube Playlist.
During this trip, I also used my Backscatter FLIP + MacroMate Mini Lens to shoot some close-up details of the beautiful underwater life.
Close-up of a
Red Sea clownfish, shot using a GoPro + MacroMate Mini Lens
~
After a skimpy 2020 with only 7 logged dives, I picked up the pace again in 2021 and logged 50 dives in 2021. It’s not as much as previous years, but I’m very happy that I hit the 50 mark. Going diving is like therapy for me: It allows me to recharge entirely as, underwater, I hear no one, not even myself. Bliss.
25 of those 50 dives were done in Malta and Egypt combined, the rest here in Belgium and the nearby Holland. Most of the time, the water is very cold over here, so we have to wear a dry suit. I was very fortunate that my wife bought me Kubi Dry Gloves for my birthday, which helped fight the cold.
~
Bicep at Ancienne Belgique
In normal times, I’m a regular at Ancienne Belgique. Typically I do about 20 concerts per year, but in 2021 that was limited to just three.
I also attended one open-air party, “Intens”, this summer. Although few in number, I’m glad we could attend these events.
~
Visiting movie theaters (cinemas) was also very limited in 2021, with just 2 visits.
Thankfully, I picked two excellent movies to watch in cinemas.
~
According to my Last.fm Year in Review I’ve scrobbled 10,846 tracks. In hours that totals to 1093 hours (45 days) of music.
I mostly listen to music while I’m at work, so the charts show drops on Wednesdays (my day off) and during the weekends. Based on the month-by-month charts, you can also tell when I went on vacation. And no music between 6 PM and 8 PM/9 PM, as that’s family-time
Note that not all plays are scrobbled to Last.fm. Music played in Music.app on AppleTV, for example, is not taken into account in my Last.fm stats. When checking my Apple Music Replay, it adds an extra 16 hours of played music to my total time.
~
🔥 Like what you see? Want to stay in the loop? Here's how:
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 newReactDOM.createRoot()API.Along the way, you’ll learn other new features including batching, edge-case handling, and an approach for conditionally choosing an API to render with.
Migrate a Client-Side Application to React 18 Beta →
React 18 Migration Course Notes (GitHub) →
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 consists of four episodes and is all about being responsive:
The first video on container queries is also embedded at the top of this post.
All episode of “Designing in the Browser” (YouTube Playlist) →