Jacob Berglund

Here’s me, talking about colors, how to put it in systems and most importantly, OKLCH youtu.be/pQ0asU6mB1I

#oklch #css #designsystem #designsystems

19.05.2025 15:19 — 👍 1    🔁 0    💬 0    📌 0

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?

🧠 Some brief thoughts on front-end frameworks and upgrade hell:
csswizardry.com/2025/01/buil...

23.01.2025 13:09 — 👍 108    🔁 42    💬 9    📌 2

@scope, relative colors and oklch ...

: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...

11.12.2024 08:37 — 👍 2    🔁 0    💬 0    📌 0

Neat! That makes total sense, hehe. Very much in the spirit of HTML. Thank you for sharing. 🙌🏻

24.11.2024 10:59 — 👍 0    🔁 0    💬 0    📌 0

The pattern obviously doesn't do well when the semantic element matters, but instead of div with a lot of classes I'd say it could be useful. Even more so because you'd still be able to use classes:

<flex-stack horizontal gap="small" class="subtle-background">

24.11.2024 08:59 — 👍 0    🔁 0    💬 0    📌 0

flex-stack ...

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

24.11.2024 08:53 — 👍 2    🔁 0    💬 2    📌 0

Oooooh, shiny! 🤩

24.11.2024 08:32 — 👍 1    🔁 0    💬 0    📌 0

<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)

With the power of web components, HTML really can be a programming language.

20.11.2024 05:42 — 👍 199    🔁 38    💬 24    📌 12

@scope, relative colors and oklch ...

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...

20.11.2024 13:00 — 👍 1    🔁 0    💬 0    📌 0

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"

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

19.11.2024 16:50 — 👍 896    🔁 89    💬 25    📌 6

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. 🦭

18.11.2024 08:45 — 👍 1    🔁 0    💬 0    📌 0

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"

15.11.2024 12:32 — 👍 221    🔁 35    💬 6    📌 3

To lower the pressure of posting something clever or profound as a first post, I'll just say "Hello!".

Hello!

Nice. Nailed it.

14.11.2024 14:20 — 👍 1    🔁 0    💬 0    📌 0