Jacob Berglund
@jacobberglund.com
Frontend consultant @ variant.no. I like making shiny and delightful things for the web.
I'm sort of a "lets solve it with HTTP, HTML, CSS, JS"-person. In that very specific order.
I'm sort of a "lets solve it with HTTP, HTML, CSS, JS"-person. In that very specific order.
Here’s me, talking about colors, how to put it in systems and most importantly, OKLCH youtu.be/pQ0asU6mB1I
#oklch #css #designsystem #designsystems
#oklch #css #designsystem #designsystems
Jacob Berglund: Rethinking Color: A designer-developer's guide to modern color systems – Refill 2025
YouTube video by Variant
youtu.be
May 19, 2025 at 3:19 PM
Here’s me, talking about colors, how to put it in systems and most importantly, OKLCH youtu.be/pQ0asU6mB1I
#oklch #css #designsystem #designsystems
#oklch #css #designsystem #designsystems
Reposted by Jacob Berglund
🧠 Some brief thoughts on front-end frameworks and upgrade hell:
csswizardry.com/2025/01/buil...
csswizardry.com/2025/01/buil...
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?
csswizardry.com
January 23, 2025 at 1:09 PM
🧠 Some brief thoughts on front-end frameworks and upgrade hell:
csswizardry.com/2025/01/buil...
csswizardry.com/2025/01/buil...
: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...
Thumbs with oklch is broken, but there are colors in there, I promise!
codepen.io/jacobberglun...
@scope, relative colors and oklch
...
codepen.io
December 11, 2024 at 8:37 AM
: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...
Thumbs with oklch is broken, but there are colors in there, I promise!
codepen.io/jacobberglun...
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?
Demo: codepen.io/jacobberglun...
#webcomponents
Say, instead of having classes on a div like .flex-horizontal and .flex-gap-small, you could
Demo: codepen.io/jacobberglun...
#webcomponents
flex-stack
...
codepen.io
November 24, 2024 at 8:53 AM
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?
Demo: codepen.io/jacobberglun...
#webcomponents
Say, instead of having classes on a div like .flex-horizontal and .flex-gap-small, you could
Demo: codepen.io/jacobberglun...
#webcomponents
Reposted by Jacob Berglund
With the power of web components, HTML really can be a programming language.
![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)](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:jfmbqiqbtriq3jig6g7el2p7/bafkreicqcw4ugectrcy3kkkvufnigzcm5ann5b6pjgxhlqps2lgzatw56m@jpeg)
November 20, 2024 at 5:42 AM
With the power of web components, HTML really can be a programming language.
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/jacobberglun...
@scope, relative colors and oklch
...
codepen.io
November 20, 2024 at 1:00 PM
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/jacobberglun...
Reposted by Jacob Berglund
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
November 19, 2024 at 4:50 PM
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
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. 🦭
November 18, 2024 at 8:45 AM
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. 🦭
To lower the pressure of posting something clever or profound as a first post, I'll just say "Hello!".
Hello!
Nice. Nailed it.
Hello!
Nice. Nailed it.
November 14, 2024 at 2:20 PM
To lower the pressure of posting something clever or profound as a first post, I'll just say "Hello!".
Hello!
Nice. Nailed it.
Hello!
Nice. Nailed it.