Sign in

Jacob Berglund

@jacobberglund.com
37 followers 98 following 72 posts

Frontend consultant @ variant.no. I like making simple and delightful things for the web. I'm a "lets solve it with HTTP, HTML, CSS, JS"-person. In that specific order.

PostsRepliesMedia
Reposted by Jacob Berglund
Keith Cirkel @keithamus.social · 19/09/2026
I want Custom Attributes to exist - think Custom Elements (Web Components) but Attributes. I've been working on a proposal, specs, and now a polyfill: www.keithcirkel.co.uk/custom-attri... More coming soon!
keithcirkel.co.uk
Custom Attributes polyfill
79723
Reposted by Jacob Berglund
danielroe @danielroe.dev · 19/09/2026
don't be nice.
roe.dev
Don't be nice
Sometimes, it's more important to be good than it is to be nice.
41734246
Jacob Berglund @jacobberglund.com · 18/09/2026
Ayyyy! Just released 1.0 of my take on an opinionated CSS framework. varde.variant.dev/docs/ Look, I love packages, but isn't it something magical about just referring to a CSS file? To get fonts, colors and utilities. It's probably not a design system, but it certainly is the foundation of one.
varde.variant.dev
Varde
262
Reposted by Jacob Berglund
David Aerne @meodai.bsky.social · 15/09/2026
After testing 100s of imgs comparing tiny and big changes to the algo: I am now confident to present to you: The new okpalette.color.pizza. Powerful as before, ~40% faster, better at detecting good presets and much better at finding rare colors! Test it with your pics and let me know what you think
71059
Jacob Berglund @jacobberglund.com · 12/09/2026
A continuation of my <color-mode> rambling yesterday. OKLCH take the wheel! If a palette is something to be changed and inherited, we could extend with a semantic layer too. And what happens next is positively fascinating. Allow me to demonstrate 🧵
510
Reposted by Jacob Berglund
Web Standards @web-standards.dev · 11/09/2026
Make your logo brighter than white. Chris Bennett built a tool that turns a logo into a gain-map JPEG, so the colors you pick shine up to 7.5 times brighter than plain white on HDR screens and stay a normal JPEG everywhere else. #color #image www.soverybright.com/
Title “Make your logo brighter than white”, an upload area saying “Drop your logo here, or click to choose”, and two squares labelled “SDR white” and “HDR white +2.9 stops”.
1175
Jacob Berglund @jacobberglund.com · 12/09/2026
I’m starting to think that colors set in hex (or the like) is akin to magic numbers. Relative colors and color-mix() unlocks a whole bunch new patterns. Example: Borders colors should be relative to backgrounds. Add alpha to it instead of specific hex values.
210
Jacob Berglund @jacobberglund.com · 11/09/2026
Been hard at work to create an opinionated CSS framework. Best thing in it is what I dubbed <color-mode>. It sets a a color palette and everything inherits from it. The possibilities it opens for composing is positively bonkers. Got 4 different button variants, but color is not an axis. 🧵
2133
Reposted by Jacob Berglund
Lea Verou, PhD @lea.verou.me · 06/08/2026
🔥 New blog post: Dark mode toggles that expose three states (system, light, dark) seem like the best option. Until you think about user goals, that is. Before rushing to disagree, hear me out. lea.verou.me/blog/2026/da... PS: As a data point, @jakearchibald.com was converted after reading this 😅
lea.verou.me
Dark mode toggles: two states are enough • Lea Verou
Yes, the underlying model must have three states, but one is always irrelevant to the actual user goal. Users do not seek out solutions to problems they don’t currently have. A lot of the hate towards...
3118935
Jacob Berglund @jacobberglund.com · 20/05/2026
How do you do ”default” link styling without interfering if there’s other classes being added to it? Like it looking like a button for example :not([class]) is too much smartness.
020
Jacob Berglund @jacobberglund.com · 03/03/2026
Sorry if I’m late to the party, but it occurred to me that cascade layers can be used to show the most important CSS at the top. Like a button with variants. I want the variants up top and not the base. Without cascade layers this requires smartness™. Nice.
000
Jacob Berglund @jacobberglund.com · 26/02/2026
Made a web component to progressively enhance good ol' SSR forms. Introducing <enhance-form>! You wrap a form with it and you'll get inline form validation with minimal effort. Heavily inspired by Unpoly 😍
github.com
GitHub - jberglund/enhance-form: A web component to progressively enhance HTML forms
A web component to progressively enhance HTML forms - jberglund/enhance-form
121
Reposted by Jacob Berglund
Mark Tomlinson @marktomlinson.dev · 24/02/2026
Sugarcube is now publicly available! sugarcube.sh
sugarcube.sh
sugarcube
Design tokens, generated CSS, and optional components. Build front ends on strong, reusable foundations.
45413
Jacob Berglund @jacobberglund.com · 24/02/2026
I’m done with Spotify. It just doesn’t feel like the app I used to love.
000
Reposted by Jacob Berglund
Rebane @rebane2001.bsky.social · 24/02/2026
i built an entire x86 CPU emulator in CSS (no javascript) you can write programs in C, compile them to x86 machine code with GCC, and run them inside CSS lyra.horse/x86css/
1322610856
Jacob Berglund @jacobberglund.com · 20/02/2026
130 files changed, 125 insertions(+), 8115 deletions(-) Today was a gooood day. 🪓 Shoutout to knip.dev!
000
Reposted by Jacob Berglund
Florian Schepp @scheppening.com · 16/02/2026
Just shipped bsky-comments! Embed Bluesky threads anywhere with a zero-dependency Web Component. • Framework Agnostic (Native WC) • < 3kb gzipped • Zero Config: Just paste the Post URL • Light DOM: Fully customizable (CSS/Tailwind) github.com/florianschep... #webdev #opensource #buildinpublic
318032
Jacob Berglund @jacobberglund.com · 17/02/2026
Made a customizable-face-looking-at-the-cursor thing. Try it out: varianter.github.io/fjes/ Feedback is welcomed 😊
020
Jacob Berglund @jacobberglund.com · 13/02/2026
What is a combobox if not a popover, a text input to filter checkboxes/radios? Move the input, add in some arrow navigation and a programmatic click() and you got yourself a A+ LightDOM web component. The progressive enhancement is that it’s just a popover with some radios/checkboxes.
120
Reposted by Jacob Berglund
Zach Leatherman @zachleat.com · 12/02/2026
gushing over the maintainability and simplicity of @jim-nielsen.com’s menu as a whole dang separate-standalone-HTML-page: blog.jim-nielsen.com/2025/lots-of... (via @dbushell.com)
blog.jim-nielsen.com
Building Websites With LLMS
Writing about the big beautiful mess that is making things for the world wide web.
7349
Reposted by Jacob Berglund
Cabel Sasser @cabel.panic.com · 11/02/2026
over a year ago, i gave a talk at the xoxo conference about a mural, a mcdonald’s, and a man. (but it was also secretly about life, and legacy, and meaning.) finally, i’m blogging the full story, with behind-the-scenes details, and a video of the talk. enjoy. cabel.com/wes-cook-and...
cabel.com
Wes Cook and the Centralia McDonald's Mural
A personal story about discovering a mural in a McDonald's, an unknown artist named Wes Cook, saving the mural, and a conference talk about the whole thing.
34461118
Jacob Berglund @jacobberglund.com · 11/02/2026
Zoom, zoom! Made a demo/docs site for my utility web component css-var-bind. If you've got any suggestions for neat demos/examples, do know that they are appreciated. jberglund.github.io/css-var-bind/ Repo here: github.com/jberglund/cs...
jberglund.github.io
css-var-bind - Interactive Demo
120
Jacob Berglund @jacobberglund.com · 11/02/2026
I made a thing! This has been my workhorse for experimenting and creating token systems in CSS. Works really well with different input types; number, range, color. github.com/jberglund/cs...
github.com
GitHub - jberglund/css-var-bind: A utility web component which binds (and syncs) inputs to CSS variables
A utility web component which binds (and syncs) inputs to CSS variables - jberglund/css-var-bind
030
Jacob Berglund @jacobberglund.com · 06/02/2026
The light dismiss on popover is a game changer. Stacked drawers nested inside each just works as expected. Like…wat? Since when do I not need to bend the arcane arts of the DOM to my liking? Positively delightful.
120
Reposted by Jacob Berglund
Adam Argyle @nerdy.dev · 03/02/2026
Wild how far you can push "customizable select" with just #CSS nerdy.dev/nice-select
1539869
Jacob Berglund @jacobberglund.com · 03/02/2026
Hatching a presentation about Progressive Enhancement and bringing things back to server-sided rendering. What questions would need answering? 🤔
110
Jacob Berglund @jacobberglund.com · 29/01/2026
As browsers have been getting prrrretty good at removing the need for JS with things like popover, view transitions and so on, I do believe the time for simpler stacks is upon us. Experimenting with hono to just HTML and, dare I say, it is quite delightful. 2026: progressive enhancement is back!
250
Jacob Berglund @jacobberglund.com · 31/12/2025
Looking back at 2025, my own highlight is the talk I put together about color systems using OKLCH. youtu.be/pQ0asU6mB1I #designsystem #css
youtu.be
Jacob Berglund: Rethinking Color: A designer-developer's guide to modern color systems – Refill 2025
YouTube video by Variant
111
Reposted by Jacob Berglund
Large Heydon Collider @heydonworks.com · 29/12/2025
📝 How To Dynamically Install Custom Elements A pattern I’ve been working on for a while. Load just the elements you are actually using. “Tree shaking” is trivial with HTML. heydonworks.com/article/dyna...
heydonworks.com
How To Dynamically Install Custom Elements
A reusable pattern for custom elements installation
56716
Reposted by Jacob Berglund
css.properties @css.properties · 28/12/2025
css.properties exists now!
A screenshot of the grid-area page from css.properties/grid-area/
1202
Jacob Berglund @jacobberglund.com · 19/05/2025
Here’s me, talking about colors, how to put it in systems and most importantly, OKLCH youtu.be/pQ0asU6mB1I #oklch #css #designsystem #designsystems
youtu.be
Jacob Berglund: Rethinking Color: A designer-developer's guide to modern color systems – Refill 2025
YouTube video by Variant
020
Reposted by Jacob Berglund
Harry Roberts @csswizardry.com · 23/01/2025
🧠 Some brief thoughts on front-end frameworks and upgrade hell: csswizardry.com/2025/01/buil...
csswizardry.com
Build for the Web, Build on the Web, Build with the Web – CSS Wizardry
What is the real, long-term cost of adopting a JavaScript framework?
910641
Jacob Berglund @jacobberglund.com · 11/12/2024
:scope, oklch and relative colors has the potential to make colors in CSS a bit more managable without a hundred globally defined colors. Thumbs with oklch is broken, but there are colors in there, I promise! codepen.io/jacobberglun...
codepen.io
@scope, relative colors and oklch
...
020
Jacob Berglund @jacobberglund.com · 24/11/2024
Would it be OK using non-registered Custom Elements as a fancy div with some styling? No JS, only CSS. Say, instead of having classes on a div like .flex-horizontal and .flex-gap-small, you could <flex-stack horizontal gap="small">? Demo: codepen.io/jacobberglun... #webcomponents
codepen.io
flex-stack
...
220
Reposted by Jacob Berglund
Andy Young @anerdguy.now · 20/11/2024
With the power of web components, HTML really can be a programming language.
<if- (="2 + 2 === 4")>
  <console- log(="Hello World")></console->
</if->class IfDash extends HTMLElement {
  static observedAttributes = ["("]

  _innerHtml = null

  connectedCallback() {
    this._innerHtml = this.innerHTML

    const condition = this.getAttribute("(")
    this._setCondition(eval(condition))
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (this._innerHtml === null) {
      return
    }

    if (name === "(") {
      const a = !!eval(oldValue)
      const b = !!eval(newValue)
      if (a !== b) {
        this._setCondition(b)
      }
    }
  }

  _setCondition(value) {
    this.innerHTML = value ? this._innerHtml : ""
  }
}

class ConsoleDash extends HTMLElement {
  connectedCallback() {
    const log = this.getAttribute("log(")
    console.log(log)
  }
}

customElements.define("if-", IfDash)
customElements.define("console-", ConsoleDash)
2319738
Jacob Berglund @jacobberglund.com · 20/11/2024
Attempt 231: Cascading color scales! Experimented with @scope and relative colors to allow children to inherit their color from an element instead of :root. I'm certain that this really is going to be really useful once browser support gets better. codepen.io/jacobberglun...
codepen.io
@scope, relative colors and oklch
...
010
Reposted by Jacob Berglund
Max Böck @mxb.dev · 19/11/2024
Hi new web dev followers! Here's the best tweet I've managed in 12 years, just so you know where the ceiling is on this account
A comic. First panel: someone labeled "Designer" passes a note labeled "SVG" to a person labeled "Developer".

Second panel: Developer opens the note to find a long unreadable string starting with "data:image/png"
2589089
Jacob Berglund @jacobberglund.com · 18/11/2024
Been doing a lot of color stuff lately and this is the result 🤓 Apart from the bezier curve to set some custom properties it is pretty much just CSS. OKLCH and relative colors doing the heavy lifting. 🦭
010
Reposted by Jacob Berglund
Andy Bell @bell.bz · 15/11/2024
4 panels of images. Top left is a dude hugging a dog, captioned "Developers". The dog is captioned "Developer Experience". There's a sad looking cat in the background.

In the third panel there's a zoomed shot of the cat, labelled "Users trying to load the website you built"
621834
Jacob Berglund @jacobberglund.com · 14/11/2024
To lower the pressure of posting something clever or profound as a first post, I'll just say "Hello!". Hello! Nice. Nailed it.
010