Change the marker of a list to any character with list-style-type: <string>

Since CSS Level 2, CSS list-style-type has supported keywords like disc or decimal to define the appearance of the list item marker. Landing in Chrome 79, and also available in Firefox ever since version 39, is the ability to set it to an arbitrary string.

Here’s a pen that demonstrates its behavior / usage:

Let’s hope this land in other browsers too, so that we can stop fiddling with ::before and such to achieve the same result 😉

💁‍♂️ Be sure to set this on the ul element, and not the li‘s or you’ll run into issues with nested lists.

Gone Diving

Right now I’m packing my bag, as I’m leaving for vacation tomorrow. I’ll be going on a 10 day diving-trip to Tulum (Mexico) with my diving club Bubbledivers. It’s the first time I’m going to Mexico, and the first time I’ll be diving the Cenotes.


Cenote diving in Tulum (All Mexico 365)

It’s a welcome vacation, as I’ve been really busy the past three months, both on a personal as a professional level:

  • Getting our first employee up and running (along with all extra HR-related work that comes along with that, something I wasn’t made for I must admit)
  • Mentoring a student employee
  • Attending meetups and conferences such as Fronteers Conference and Full Stack Europe (both of which were wonderful)
  • Creating a new workshop “React from Scratch” and adapting a few talks for Full Stack Europe (that got me pumped!)
  • Spending time with the family
  • Gathering and preparing lots of stuff – from a bed and clothes to a card design and domain name – for our soon-to-be-born son (due January 2020)
  • Attending no less than 4 weddings in 6 weeks time (!)
  • Catching up with RSS feeds and blogging out interesting links (I failed at the latter 😅)
  • …and – in between – doing some actual work

👋 See you in 11 days, fully recharged!

How We Built the World Wide Web in Five Days

At the most recent edition of Fronteers Conference – a conference which I’ve been attending for over 10 yeras by now – Jeremy Keith & Remy Sharp did a two-person talk on their rebuild of the original WorldWideWeb application back in February.

Join (Je)Remy on a journey through time and space and code as they excavate the foundations of Tim Berners-Lee’s gloriously ambitious and hacky hypertext system that went on to conquer the world.

I really liked this talk. The two-person format worked remarkably well.

🔗 Also see Jeremy’s writeup on the occasion.

My favourite Git commit

David Thompson on his favorite Git commit: a single character fix, but with one hell of an explanation:

In a different organisation, from a different developer, this entire commit message might have been change whitespace, or fix bug, or (depending on the team’s culture) some less than flattering opinions about the inventor of the non-breaking space. Instead, Dan took the time to craft a really useful commit message for the benefit of those around him. I’d like to step through a few of the ways I think this is a really good example.

My favourite Git commit →

Programmatically add scripts to `package.json` with `npm-add-script`

Recently I needed to automate the addition of the addition of a script defined in a package.json‘s scripts section. To do this I used npm-add-script (an older, but still functioning project), along with the aforementioned npx.

For example, to add a script labelled start with the contents webpack-dev-server --config ./config/webpack.config.babel.js --env.MODE=development --open --hot, I use:

npx npm-add-script \
  -k "start" \
  -v "webpack-dev-server --config ./config/webpack.config.babel.js --env.MODE=development --open --hot" \
  --force

Using the --force I enforce overwriting of any existing start script.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

One simple trick to optimize React re-renders

Kent C. Dodds:

If you’re experiencing React performance issues, try this:

  1. “Lift” the expensive component to a parent where it will be rendered less often.
  2. Then pass the expensive component down as a prop.

You may find doing so solves your performance problem without needing to spread React.memo all over you codebase like a giant intrusive band-aid 🤕😉

Nice one!

One simple trick to optimize React re-renders →

Making sense of API response times

Mathias Hansen, co-founder of Geocodio, on how they analyze their API response times:

For the longest time, we focused on average response times. It is a quick and simple metric that you can quickly break down by API endpoint and time window. […] While measuring average response time have their place they can also be deceptive.

The problem is that outliers go unnoticed that way, so better is to use percentiles:

Using percentiles, you will be able to say: “X% of API calls have a response time of Y milliseconds or less.”

A (rather big) query to quickly generate reports like these is included in the post 🙂

Making sense of API response times →

ESNext: Proposals to look forward to (Full Stack Europe)

I’m currently in Antwerp for the first edition of Full Stack Europe, “The conference for the whole team”. Earlier this week I guided a workshop “React from Scratch”. After a small Lightning Talk yesterday on “JavaScript Yellow”, I today did a full talk named “ESNext: Proposals to look forward to”

With the yearly ECMAScript releases (ES2015..ES2019) of a lot of things have changed in JavaScript-land. And even more changes are ahead!

This talk takes a look at a few of the upcoming ECMAScript features, which will (hopefully) become part of the ECMAScript Language Specification in the near future.

The slides are up on slidr.io, and also embedded below:

Talk Outline:

  • TC39: Info on TC39, what they do, and how they work.
  • ESNext Proposal: Field Declarations
  • ESNext Proposal: Pipeline Operator
  • ESNext Proposal: Optional Chaining
  • ESNext Proposal: Null Coalescing
  • ESNext Proposal: Dynamic Imports
  • ESNext Proposal: Decimal
  • ESNext Proposal: Cancellation API
  • ESNext Proposal: Slice Notation
  • ES2019 Feature: Object.fromEntries()
  • ESNext Proposal: Pattern Matching
  • Fin.

Thanks to the organisers for having me, and thanks to the attendees for coming to see me. I hope you all had fun attending this talk. I know I had making it (and whilst bringing it forward) 🙂

💁‍♂️ If you are a conference or meetup organiser, don’t hesitate to contact me to come speak at your event.

Display the macOS Dock in Touch Bar using Pock

Display macOS Dock in Touch Bar. It’s free and open source!

Not that I’d use it (I always use the “Expanded Control Strip” to make the Touch Bar show the “regular” keys), but I found this one quite interesting and it looks really cute.

Installation possible per brew cask:

brew cask install pock

You can opt to show all Dock icons in there, or only those of the active applications. App thumbnailing also possible. And oh, a Kit to write your own Pock plugins is in the making.

Pock →
Pock Source (GitHub) →

⚠️ If you’re running Catalina 10.15, it will ask you for a few permissions. These are explained in the Pock docs.

Pure CSS Scroll Shadows (Vertical + Horizontal)

A long time ago (2012!), Lea Verou shared a way on how to add scrolling shadows to containers that needs scrolling. Using those shadows in a scroll container is a great UX thing, as they visually tell the user that the content is scrollable.

Her code however, only worked with containers that scroll vertically. Based upon Lea’s code I created a version that also plays nice with horizontal scroll containers.

Whilst I was at it, I also introduced CSS Custom Properties, as they allow easy theming. Using the “CSS Variables” --background-color, --shadow-color, and --shadow-size you can configure the result.

🐛 Still needs some love for Safari though … not 100% perfect in there /// working on it!

Hope you like it 🙂

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)