Håvard Bob
LightNews LightNews
havardbrynjulfsen.design
Håvard Bob
@havardbrynjulfsen.design
49 followers 120 following 93 posts
Designer who codes (or vice-versa)🦄
Posts Replies Media Videos
Pinned
havardbrynjulfsen.design
Håvard Bob @havardbrynjulfsen.design · Nov 23
Cross stitched the famous #CSS meme, framed it and put it on my desk at work. One day when I wasn’t at the office somebody «fixed» it😄
havardbrynjulfsen.design
Somebody added overflow: hidden 🥲
October 30, 2025 at 8:26 AM
Reposted by Håvard Bob
ericwbailey.website
Here's a great example of how inaccessibility manifests even earlier than the design stage. Figma has rolled out a tool to create iOS-style glassomorphic effects, embedding it directly into the tooling layer. This will be awful for legibility and readability for a wide range of people.
A dialog whose title reads, "Go touch glass." Below that is instructional copy that reads, "Add glass to any frame and play with frost, light, depth, and more. Use the effect creatively in your work, or grab the iOS and iPadOS 26 kit from Apple's Community page." There are then two calls to action, one to "Explore playground" and the other "Go to UI kit". Next to the text copy is a video of how to add the effect, where a barely-visible toolbar with three buttons is getting added on top of a smartphone wallpaper showing a field of flowers. Cropped screenshot from Figma.
July 18, 2025 at 7:01 PM
havardbrynjulfsen.design
liquid glass more like liquid ass ammirite
June 17, 2025 at 5:59 AM
havardbrynjulfsen.design
Did a quick write-up of my experience at this year's #CSSDay

"...I have a feeling that we're soon coming to close on the old responsive way of thinking about websites that have existed for 15 years..."

www.havardbrynjulfsen.design/writing/my-k...
My key takeaways from CSSDay 2025 | Håvard Brynjulfsen
For the third year in a row I was lucky enough to attend the CSSDay conference in Amsterdam. Here's a summary of what I've learned this year.
www.havardbrynjulfsen.design
June 10, 2025 at 9:26 PM
havardbrynjulfsen.design
Did a quick little touch-up of the header navigation on my website (before/after) 💅
A screenshot of a website view in a narrow browser window, showing a header component with a logo in the upper left corner, and two buttons called "Theme" and "Menu" in the upper right corner. Next to the text "Menu" there's an icon in shape of an "x". Below the header component is a light grey area spanning the rest of the image's height. Inside the area there's four text links saying "Home", "Writing", "Creations" and "About" respectively, aligned vertically from top to bottom. A screenshot of a website view in a narrow browser window, showing a header component with a logo in the upper left corner, and two buttons called "Theme" and "Menu" in the upper right corner. Next to the text "Menu" there's an icon in shape of an "x". Below the header component is a light grey area spanning the rest of the image's height. Inside the area there's four text links in large letters saying "Home", "Writing", "Creations" and "About" respectively, aligned vertically from top to bottom. Below the vertical list there's a row of icons, each representing a social medium or website in this order: "Codepen", "Bluesky", "Mastodon", "Medium", "Sanity", "Github" and "RSS".
June 8, 2025 at 2:06 PM
havardbrynjulfsen.design
.beer:empty { order: 1; }

Important memo for the Drinks & Discussions session later at #CSSDay today
Conference badge with the name «Håvard Brynjulfsen» written on it beneath the logo for «CSSDay» — the name of the conference.
June 5, 2025 at 2:27 PM
havardbrynjulfsen.design
@cssday.nl tomorrow!

The line-up is incredible😍
June 4, 2025 at 10:43 AM
havardbrynjulfsen.design
Reflecting on writing for the web and how @kevinpowell.co stopped me from writing (well, not really)

www.havardbrynjulfsen.design/writing/thou...
Thoughts on writing | Håvard Brynjulfsen
I've not done a lot of writing in 2025. Here's why.
www.havardbrynjulfsen.design
May 24, 2025 at 9:22 AM
havardbrynjulfsen.design
I love that even in a world of LLMs and IDE AI helpers I can still search for something on Google and find an old CSS-Tricks article that solves my problem😍

I was trying to create a timeline with curved lines, and this screencast by @chriscoyier.net saved me🤌

css-tricks.com/videos/172-h...
Screenshot of a Figma sketch displaying step-by-step tracking of an order, as a vertical timeline. The timeline is visualized by a line, much like train tracks, with stops along marked with a circle. In the middle of the timeline track the track curves inward before curving outwards again to rejoin the original track.
April 23, 2025 at 7:30 AM
havardbrynjulfsen.design
YES
piccalil.li Piccalilli @piccalil.li · Jan 30
Is CSS nesting an exciting new feature or a potential disaster waiting to happen? I note down my worries and prior experience with one of it predecessors: Sass nesting, along with some gotchas native CSS brings with it.
CSS nesting: use with caution
Is CSS nesting an exciting new feature or a potential disaster waiting to happen? I note down my worries and prior experience with one of it predecessors: Sass nesting, along with some gotchas native...
buff.ly
January 30, 2025 at 6:14 PM
Reposted by Håvard Bob
piccalil.li
Is CSS nesting an exciting new feature or a potential disaster waiting to happen? I note down my worries and prior experience with one of it predecessors: Sass nesting, along with some gotchas native CSS brings with it.
CSS nesting: use with caution
Is CSS nesting an exciting new feature or a potential disaster waiting to happen? I note down my worries and prior experience with one of it predecessors: Sass nesting, along with some gotchas native...
buff.ly
January 30, 2025 at 12:16 PM
havardbrynjulfsen.design
«From» is absolutely bonkers
January 19, 2025 at 11:40 PM
havardbrynjulfsen.design
I’ve never been prouder 🥹
Screeenshot of a notification that says «CodePen picker your pen HaGrid», next to an image of the fictional Harry Potter-character «Hagrid» trapped inside a 4-by-4 grid.
January 19, 2025 at 9:01 AM
havardbrynjulfsen.design
codepen.io/havardob/pen...
HaGrid
Why not? ...
codepen.io
January 17, 2025 at 8:56 AM
havardbrynjulfsen.design
First post of the year 🎉

A quick tip about the
element

www.havardbrynjulfsen.design/writing/tips...
Tip of the week #021: Use the description list element | Håvard Brynjulfsen
Need to display a list where you have a key (or title) and a value? The description list element is perfect for this.
www.havardbrynjulfsen.design
January 10, 2025 at 12:01 PM
havardbrynjulfsen.design
Recently released mystreak.is

It’s a simple PWA that let’s you add and track habits daily

If you want to try it: be sure to add this to your Home Screen on your device, as it only stores the information using localStorage.

Built this for myself, and I’ve been using it daily since New Year’s ✅👌
Screenshot of an app. It shows five calendars with dates as squares, lined horizontally. Some of the squares have a checkmark, and some only show the date. Each calendar has a title, «Went to the gym», «Cardio training», «Reading», «No candy/crisps», «No pastries/cookies», and «No junkfood» respectively. A marker for each calendar shows a fire icon next to a number, representing a streak, indicating that the user of this app have completed a habit several days in a row
January 9, 2025 at 9:54 PM
havardbrynjulfsen.design
Working on something for New Year’s resolutions (and other habits)
Screenshot of an app. It shows three calendars with dates as squares, lined horizontally. Some of the squares have a checkmark, and some only show the date. Each calendar has a title, «No junk food», «Went to the gym» and «No candy», respectively. A marker for each calendar shows a fire icon next to a number, representing a streak, indicating that the user of this app have a 8 day streak of «No candy», and a 2 day streak of «Went to the gym»
December 30, 2024 at 6:05 PM
havardbrynjulfsen.design
Progressive enhancements!

Here are some newer and experimental CSS properties and selectors that's super safe to use without you having to worry about the fallbacks.

www.havardbrynjulfsen.design/writing/tips...
Tip of the week #020: Simple progressive enhancements in CSS | Håvard Brynjulfsen
CSS has changed a lot in the last couple of years. It feels like we're getting new features monthly now. New features are well and all, but it's hard to keep up with what's fully supported or safe to ...
www.havardbrynjulfsen.design
December 15, 2024 at 3:35 PM
havardbrynjulfsen.design
HTML documents are responsive by default. It’s up to us to decide how much of this native behavior we want to destroy with CSS.

Work with the browser, not against it
December 15, 2024 at 2:21 AM
havardbrynjulfsen.design
I like Ciri, both in TW3 and in the books

Gonna be great to play her, doesn’t matter how she’s «lost her powers».

In Assassin’s Creed Brotherhood somebody steals all the gear you’ve acquired in ACII, so you have to start over.

Her having taken the trial is an easy lore “fix” for a game
December 14, 2024 at 2:25 AM
havardbrynjulfsen.design
I don’t hate Tailwind or CSS-in-JS. I actually have little experience with both.

But I see an emerging trend in my work environment where people opt for Tailwind or styled-components because «CSS is hard».

Sorry to say, TW or CSS-in-JS won’t fix that
December 14, 2024 at 1:44 AM
havardbrynjulfsen.design
Stuck 4+ hours on a challenging CSS problem today, ending up with a less-than-ideal compromise😶‍🌫️

CSS is hard, I understand that some finds it hard to fall in love with

Hopefully going to be a while until I have to do a horizontal-full-bleed-auto-scroll-and-adjustable-step-visualizer-component again
December 11, 2024 at 6:03 PM
havardbrynjulfsen.design
Glad you liked it👌

It’s important to note that I don’t hate shorthands, but they’re surely a hurdle for people new to CSS
December 10, 2024 at 2:59 PM
Reposted by Håvard Bob
silvestar.codes
Issue #107 of the UI Dev Newsletter is out!
In this issue: character-based alignment, performance scores, and issues with shorthand properties.

www.silvestar.codes/side-project...
Issue #107 ✣ UI Dev Newsletter
In this issue: character-based alignment, performance scores, and issues with shorthand properties.
www.silvestar.codes
December 9, 2024 at 3:38 PM
havardbrynjulfsen.design
Finally got around to implementing a theme switcher for my website (www.havardbrynjulfsen.design) and refactor some theme colors 🎉

Pretty happy with the result! It also honors user's preferred color scheme👏
December 6, 2024 at 1:49 PM