davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Browse Source

Links

master
David Larlet 1 month ago
parent
2b0ad068bb
commit
ff238faf09
Signed by: David Larlet <david@larlet.fr> GPG Key ID: 3E2953A359E7E7BD
5 changed files with 600 additions and 0 deletions
Split View Show Diff Stats
  1. 226
    0
      cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/index.html
  2. 59
    0
      cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/index.md
  3. 239
    0
      cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/index.html
  4. 72
    0
      cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/index.md
  5. 4
    0
      cache/2024/index.html

+ 226
- 0
cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/index.html View File

@@ -0,0 +1,226 @@
<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Where I’m at on the whole CSS-Tricks thing (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>Where I’m at on the whole CSS-Tricks thing</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" title="Lien vers le contenu original">Source originale</a>
<br>
Mis en cache le 2024-02-28
</p>
</nav>
<hr>
<p>It was March 2022 when I sold CSS-Tricks to DigitalOcean. So it’s been just about 2 years now. </p>
<p>This was me and my wife’s thinking: </p>
<ul>
<li>The negotiated sale price was fair.</li>
<li>They are a big company (public!) with tons of resources, and their clear stated strategy was to invest in content and community, because that’s where the top of the funnel is, and it’s good for business. They didn’t just talk this way, they were obviously <em>investing</em> in content and community. There is a chance CSS-Tricks becomes <em>better</em>.</li>
<li>They were already decently well known for good content in DevOps and Back End, but were missing solid Front-End content. Filling this gap makes sense.</li>
<li>They would rip all the ads off the site. There would be only one “ad”: use DigitalOcean. I’m no advertising hater, it’s always been good to me, but the thought of CSS-Tricks as a clean ad-free site was appealing.</li>
<li>They would keep on Geoff, the lead editor, if he wanted it. He did and they did.</li>
<li> I was <em>way way</em> too busy trying to run CSS-Tricks and co-run CodePen and it was hard on me. </li>
</ul>
<p>After the sale, things seemed kinda fine for a bit, and that was encouraging. It was cool seeing new voices publishing new work I had nothing to do with. Then started to limp, using up the momentum that it had. </p>
<p>A year later they <a href="https://geoffgraham.me/goodbye-css-tricks/">fired Geoff</a> along with everyone else working on content and community. That was the real torpedo.</p>
<p>It seems DigitalOcean got excited when the whole industry started doing huge layoffs, they followed suit and slurped up the profits. The necessary directional change was: screw content and community. A month after that, the last article was published on CSS-Tricks, an overview of Passkeys, which will now apparently be on the homepage forever, a <em>very</em> strange bit of content to emblazon the tombstone of the site. They also added a cookie button that looks like a 4th grader designed it?? And started publishing every blog post as a guide???</p>
<p> How do I feel about all that? Well I’m not <em>stoked</em>, but I’m an adult I knew the risks. I sold the site. They now control it. They can do whatever they want with it. They could replace the entire site with an <code>&lt;h1&gt;</code> tag that says <strong>Chris Coyier smells like donkeys</strong> and that would be their right.</p>
<p>I’ve heard from plenty of people who are pissed. Some are pissed at me. Sellout, yadda yadda. But I’m actually fairly pleased that the site is still online, relatively untouched, and with everybody’s bylines, including my own, intact. That’s a better outcome than scotch.io, purchased from Chris Sev, which was neutered and ultimately turned off. That’s a much more inglorious ending that I hope never happens to CSS-Tricks.</p>
<p>Hopefully that doesn’t happen, although during my 3-month consulting period I know they were very interested in porting the content to their own internal SSG system. As someone who has built a lot of SSG-powered sites and a lot of WordPress-sites, all I can say is CSS-Tricks is WordPress-y<em>-as-hell,</em> and I cannot possibly imagine a conversion that maintains any level of quality as being worth the effort. </p>
<p>A lot more people are pissed at DigitalOcean. People saying they’ll never use them again, and generally upset they’d take such a useful asset and do nothing with it. A void in the industry that doesn’t sit right.</p>
<p>Does any of this negative sentiment actually affect DigitalOcean meaningfully? I have no clue. It can’t <em>help</em>, but I’m sure if it was <em>that</em> big of a deal they would prioritize fixing it somehow. It seems more likely it’s a <em>oh well you win some you lose some shrug it off situation</em>. It’s almost certainly not acting as that strong top-of-funnel player they originally were hoping for it. </p>
<hr class="wp-block-separator has-alpha-channel-opacity">
<p>I bet you could probably guess all that, or piece it together from things publicly said. </p>
<p>What you probably don’t know is that I tried to get it back. </p>
<p>I got an email from a fella a while back who is now a VP of Content &amp; Community at DigitalOcean who came over from the Cloudways acquisition. I think “ownership” of CSS-Tricks kinda fell is his lap after some internal shifts. Unlike his predecessors, he didn’t have any hangups about just talking directly to me. What he originally wanted was just to learn what it’s going to take to get spun back up and producing again. A “return on investment” is what he was after, understandably. I was as frank with him as I am with anyone: It’s gonna take a lot. They would need a new lead editor, and you might be able to see how people might be squeamish about that role with the last one publicly axed not long ago. <em>Maybe</em> that person knows WordPress development pretty well? If not, ideally, you have someone know that knows WordPress pretty well, because the site uses <a href="https://css-tricks.com/css-tricks-is-a-poster-child-wordpress-site/">everything</a>. And maybe that person knows how to wrangle up really good front-end specific writers? If you find that magical person, that’s a developer, writer, community builder, and site-running editor, it’s going to be expensive. More likely you gotta build a team again, and it’s going to take them a while to get things going, so your investment gets deeper and deeper, while the return remains unclear.</p>
<p>This got me thinking. </p>
<p>Maybe a little braggadocious here, <em>butttt</em> I’m basically the perfect person for the job. Let’s just say the most perfect person on Earth for the job lolz.</p>
<p>But I’m not even sure I’d want to do it again, and I have no idea if they would even want me to. But I definitely don’t wanna do free consulting work on it. </p>
<p>So I took my big swing.</p>
<blockquote class="wp-block-quote">
<p>Here’s my best (and wildest) idea. </p>
<p>I run CSS-Tricks again myself. CSS-Tricks is big and complicated. Anybody walking in the door alone is going to have a serious learning curve just in getting comfortable operating the basics. I already know every inch of it. </p>
<p>I get people reading again. I get people writing again. I get people excited again. I erase any bad mojo against DigitalOcean, fix that brand damage. Get people saying they <em>want</em> to use DigitalOcean instead of saying they never will again. (e.g. <a href="https://twitter.com/AdamRackis/status/1691928618912387283">1</a>, <a href="https://twitter.com/stolinski/status/1691942771035168887">2</a>, <a href="https://twitter.com/awkroot/status/1692046926211150153">3</a>)</p>
<p>Then we do the most valuable possible thing for DigitalOcean: get content on there that helps people know about and do things on DigitalOcean. There are some big wins there. Astro is big right now in front-end, why isn’t DigitalOcean on <a href="https://docs.astro.build/en/guides/deploy/">this list</a>? Let’s get that article written and linked up.</p>
<p>We can make a special section of the site that is just DigitalOcean content, making it easy to browse and find stuff. </p>
<p>Then we do the second most valuable thing we can do: move the hosting to DigitalOcean and have it be a living, breathing endorsement of DO being a great place to host a WordPress website. </p>
<p>Now we’re back in action.</p>
<p>Why would I do that?</p>
<p>You transfer ownership of CSS-Tricks back to me. </p>
<p>Why would <em>you</em> do that?</p>
<ul>
<li>You’re trying to get to break even on it. This means you aren’t spending any <em>more</em> money and time. You’re now just extracting marketing, branding, and conversion value out of money already spent.</li>
<li>You don’t have to spend any more time on this, personally or institutionally. Any other internal costs are gone.</li>
<li>The community will love it.</li>
</ul>
<p>The trick is in the details. We’d get to an agreement on what has to happen for it to work. For example, no other web host can be advertised on the site for X time, etc. </p>
</blockquote>
<p>I’d call that a big swing, anyway. <em>I’ll just take it back please and thank you.</em> But I feel like I made the case OK that it’s not completely crazy.</p>
<p>Crickets for a while.</p>
<p>A few back and forth emails like <em>“still thinking about this…</em>” later, and the conclusion is that the fella basically doesn’t have the “conviction to push it within the halls at DO”. </p>
<p>Understandable, really. I wouldn’t want to be handed a huge golden nugget by my boss and then ask for a meeting and be like “I think we should give it back to the leprechaun.”</p>
<p>When I pitched that, I wasn’t even 100% sure I wanted it, mainly for stress reasons. But I’m sure I could have figured out a way to run a more minimal ship with reduced stress and the site would be in a much more pleasant place. </p>
<p>Anyway, if you want to know some basic information about Passkeys I know a site you can check out.</p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 59
- 0
cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/index.md View File

@@ -0,0 +1,59 @@
title: Where I’m at on the whole CSS-Tricks thing
url: https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/
hash_url: 2cbc47f0ebded9d54fe6163fa4ea0667
archive_date: 2024-02-28
og_image: https://jetpack.com/redirect/?source=sigenerate&query=t%3DeyJpbWciOiJodHRwczpcL1wvY2hyaXNjb3lpZXIubmV0XC93cC1jb250ZW50XC91cGxvYWRzXC8yMDI0XC8wMlwvU2NyZWVuc2hvdC0yMDI0LTAyLTI4LWF0LTEwLjIwLjU5JWUyJTgwJWFmQU0tMTAyNHg3ODkucG5nIiwidHh0IjoiYW55d2F5IHNvcnJ5IGFib3V0IGFsbCB0aGF0IiwidGVtcGxhdGUiOiJmdWxsc2NyZWVuIiwiYmxvZ19pZCI6NzQwNzQyNDh9.x4KuXKouyPG-T31MVhIE_KvvbcQgfv9daDsVAwe5p_sMQ
description: It was March 2022 when I sold CSS-Tricks to DigitalOcean. So it’s been just about 2 years now.
favicon: data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23f8d773%22></rect><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2290%22>👨‍💻</text></svg>
language: en_US

<p>It was March 2022 when I sold CSS-Tricks to DigitalOcean. So it’s been just about 2 years now. </p>
<p>This was me and my wife’s thinking: </p>
<ul>
<li>The negotiated sale price was fair.</li>
<li>They are a big company (public!) with tons of resources, and their clear stated strategy was to invest in content and community, because that’s where the top of the funnel is, and it’s good for business. They didn’t just talk this way, they were obviously <em>investing</em> in content and community. There is a chance CSS-Tricks becomes <em>better</em>.</li>
<li>They were already decently well known for good content in DevOps and Back End, but were missing solid Front-End content. Filling this gap makes sense.</li>
<li>They would rip all the ads off the site. There would be only one “ad”: use DigitalOcean. I’m no advertising hater, it’s always been good to me, but the thought of CSS-Tricks as a clean ad-free site was appealing.</li>
<li>They would keep on Geoff, the lead editor, if he wanted it. He did and they did.</li>
<li> I was <em>way way</em> too busy trying to run CSS-Tricks and co-run CodePen and it was hard on me. </li>
</ul>
<p>After the sale, things seemed kinda fine for a bit, and that was encouraging. It was cool seeing new voices publishing new work I had nothing to do with. Then started to limp, using up the momentum that it had. </p>
<p>A year later they <a href="https://geoffgraham.me/goodbye-css-tricks/">fired Geoff</a> along with everyone else working on content and community. That was the real torpedo.</p>
<p>It seems DigitalOcean got excited when the whole industry started doing huge layoffs, they followed suit and slurped up the profits. The necessary directional change was: screw content and community. A month after that, the last article was published on CSS-Tricks, an overview of Passkeys, which will now apparently be on the homepage forever, a <em>very</em> strange bit of content to emblazon the tombstone of the site. They also added a cookie button that looks like a 4th grader designed it?? And started publishing every blog post as a guide???</p>
<p> How do I feel about all that? Well I’m not <em>stoked</em>, but I’m an adult I knew the risks. I sold the site. They now control it. They can do whatever they want with it. They could replace the entire site with an <code>&lt;h1&gt;</code> tag that says <strong>Chris Coyier smells like donkeys</strong> and that would be their right.</p>
<p>I’ve heard from plenty of people who are pissed. Some are pissed at me. Sellout, yadda yadda. But I’m actually fairly pleased that the site is still online, relatively untouched, and with everybody’s bylines, including my own, intact. That’s a better outcome than scotch.io, purchased from Chris Sev, which was neutered and ultimately turned off. That’s a much more inglorious ending that I hope never happens to CSS-Tricks.</p>
<p>Hopefully that doesn’t happen, although during my 3-month consulting period I know they were very interested in porting the content to their own internal SSG system. As someone who has built a lot of SSG-powered sites and a lot of WordPress-sites, all I can say is CSS-Tricks is WordPress-y<em>-as-hell,</em> and I cannot possibly imagine a conversion that maintains any level of quality as being worth the effort. </p>
<p>A lot more people are pissed at DigitalOcean. People saying they’ll never use them again, and generally upset they’d take such a useful asset and do nothing with it. A void in the industry that doesn’t sit right.</p>
<p>Does any of this negative sentiment actually affect DigitalOcean meaningfully? I have no clue. It can’t <em>help</em>, but I’m sure if it was <em>that</em> big of a deal they would prioritize fixing it somehow. It seems more likely it’s a <em>oh well you win some you lose some shrug it off situation</em>. It’s almost certainly not acting as that strong top-of-funnel player they originally were hoping for it. </p>
<hr class="wp-block-separator has-alpha-channel-opacity">
<p>I bet you could probably guess all that, or piece it together from things publicly said. </p>
<p>What you probably don’t know is that I tried to get it back. </p>
<p>I got an email from a fella a while back who is now a VP of Content &amp; Community at DigitalOcean who came over from the Cloudways acquisition. I think “ownership” of CSS-Tricks kinda fell is his lap after some internal shifts. Unlike his predecessors, he didn’t have any hangups about just talking directly to me. What he originally wanted was just to learn what it’s going to take to get spun back up and producing again. A “return on investment” is what he was after, understandably. I was as frank with him as I am with anyone: It’s gonna take a lot. They would need a new lead editor, and you might be able to see how people might be squeamish about that role with the last one publicly axed not long ago. <em>Maybe</em> that person knows WordPress development pretty well? If not, ideally, you have someone know that knows WordPress pretty well, because the site uses <a href="https://css-tricks.com/css-tricks-is-a-poster-child-wordpress-site/">everything</a>. And maybe that person knows how to wrangle up really good front-end specific writers? If you find that magical person, that’s a developer, writer, community builder, and site-running editor, it’s going to be expensive. More likely you gotta build a team again, and it’s going to take them a while to get things going, so your investment gets deeper and deeper, while the return remains unclear.</p>
<p>This got me thinking. </p>
<p>Maybe a little braggadocious here, <em>butttt</em> I’m basically the perfect person for the job. Let’s just say the most perfect person on Earth for the job lolz.</p>
<p>But I’m not even sure I’d want to do it again, and I have no idea if they would even want me to. But I definitely don’t wanna do free consulting work on it. </p>
<p>So I took my big swing.</p>
<blockquote class="wp-block-quote">
<p>Here’s my best (and wildest) idea. </p>
<p>I run CSS-Tricks again myself. CSS-Tricks is big and complicated. Anybody walking in the door alone is going to have a serious learning curve just in getting comfortable operating the basics. I already know every inch of it. </p>
<p>I get people reading again. I get people writing again. I get people excited again. I erase any bad mojo against DigitalOcean, fix that brand damage. Get people saying they <em>want</em> to use DigitalOcean instead of saying they never will again. (e.g. <a href="https://twitter.com/AdamRackis/status/1691928618912387283">1</a>, <a href="https://twitter.com/stolinski/status/1691942771035168887">2</a>, <a href="https://twitter.com/awkroot/status/1692046926211150153">3</a>)</p>
<p>Then we do the most valuable possible thing for DigitalOcean: get content on there that helps people know about and do things on DigitalOcean. There are some big wins there. Astro is big right now in front-end, why isn’t DigitalOcean on <a href="https://docs.astro.build/en/guides/deploy/">this list</a>? Let’s get that article written and linked up.</p>
<p>We can make a special section of the site that is just DigitalOcean content, making it easy to browse and find stuff. </p>
<p>Then we do the second most valuable thing we can do: move the hosting to DigitalOcean and have it be a living, breathing endorsement of DO being a great place to host a WordPress website. </p>
<p>Now we’re back in action.</p>
<p>Why would I do that?</p>
<p>You transfer ownership of CSS-Tricks back to me. </p>
<p>Why would <em>you</em> do that?</p>
<ul>
<li>You’re trying to get to break even on it. This means you aren’t spending any <em>more</em> money and time. You’re now just extracting marketing, branding, and conversion value out of money already spent.</li>
<li>You don’t have to spend any more time on this, personally or institutionally. Any other internal costs are gone.</li>
<li>The community will love it.</li>
</ul>
<p>The trick is in the details. We’d get to an agreement on what has to happen for it to work. For example, no other web host can be advertised on the site for X time, etc. </p>
</blockquote>
<p>I’d call that a big swing, anyway. <em>I’ll just take it back please and thank you.</em> But I feel like I made the case OK that it’s not completely crazy.</p>
<p>Crickets for a while.</p>
<p>A few back and forth emails like <em>“still thinking about this…</em>” later, and the conclusion is that the fella basically doesn’t have the “conviction to push it within the halls at DO”. </p>
<p>Understandable, really. I wouldn’t want to be handed a huge golden nugget by my boss and then ask for a meeting and be like “I think we should give it back to the leprechaun.”</p>
<p>When I pitched that, I wasn’t even 100% sure I wanted it, mainly for stress reasons. But I’m sure I could have figured out a way to run a more minimal ship with reduced stress and the site would be in a much more pleasant place. </p>
<p>Anyway, if you want to know some basic information about Passkeys I know a site you can check out.</p>

+ 239
- 0
cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/index.html View File

@@ -0,0 +1,239 @@
<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Better Buttons with color-mix() and Custom Properties (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>Better Buttons with color-mix() and Custom Properties</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" title="Lien vers le contenu original">Source originale</a>
<br>
Mis en cache le 2024-02-28
</p>
</nav>
<hr>
<p>Let's build a button that accepts one color and calculates its hover and focus states automatically. For this experiment, we'll use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS Custom Properties</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix">color-mix()</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch">OKLCH</a> to ensure that tints and shades are perceptually uniform.</p>
<p>To keep things simple, we'll follow today's flat design trend and use a single color for the background. We'll store that color in a custom property so we can reuse it and change things up as we go.</p>
<p>Let's kick things off with some styles.</p>
<pre><code class="language-css">/* Set some defaults for the button */
:root {
--button-bg: slategrey;
}

/* Remove factory button styles and add our own */
button {
unset: all;
font: 16px sans-serif;
border: none;
border-radius: 6px;
background-color: var(--button-bg);
color: white;
padding: .875rem 1.125rem;
margin: 0;
cursor: pointer;
transition: 100ms background-color;
}

/* Tint the background when hovering */
button:hover {
background-color: color-mix(in oklch, var(--button-bg) 100%, white 8%);
}

/* Shade the background when clicked */
button:active {
background-color: color-mix(in oklch, var(--button-bg) 100%, black 4%);
}

/* Remove the default focus ring */
button:focus {
outline: none;
}

/* Provide a color-matched focus ring for keyboard users */
button:focus-visible {
outline: solid 3px var(--button-bg);
outline-offset: 1px;
}
</code></pre>
<p>We're using a custom property called <code>--button-bg</code> that sets the button's background. Using a custom property allows us to pass it into the <code>color-mix()</code> function to calculate the hover and active states. This also allows us to use it again to make a color-matched outline for the focus state.</p>
<p>The magic is here:</p>
<pre><code class="language-css">/* Tint the background when hovering */
button:hover {
background-color: color-mix(in oklch, var(--button-bg) 100%, white 8%);
}

/* Shade the background when clicked */
button:active {
background-color: color-mix(in oklch, var(--button-bg) 100%, black 4%);
}
</code></pre>
<p>Using <code>color-mix()</code>, we can adjust the tint/shade based on the background color, meaning we don't need to manually select lighter/darker colors for those states. And because we're using OKLCH, the variations will be perceptually uniform, <a href="https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/#3.-lch-lightness-actually-means-something">unlike HSL</a>. This means that tints and shades will look consistent for any color we choose!</p>
<p>Oh, and because we're using a custom property, we can easily test that theory by setting <code>--button-bg</code> to any color. Note how the hover and focus states update accordingly in this example.*</p>

<p>The caveat is <a href="https://caniuse.com/?search=color-mix">browser support for <code>color-mix()</code></a>, which is green across the board, but still somewhat recent. However, I would argue that this is a great candidate for <a href="https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement">progressive enhancement</a>, as the absence of color changes on hover and click doesn't affect the function of the button.</p>
<p>Not bad for a few lines of CSS!</p>
<hr>
<p><small>
</small><p>*Alas, we can't automatically ensure the label's contrast based on the background color, but when <a href="https://www.w3.org/TR/css-color-5/">CSS Color Module Level 5</a> lands, we'll get <a href="https://caniuse.com/css-relative-colors#:~:text=The%20CSS%20Relative%20Color%20syntax,any%20of%20the%20color%20values.">relative colors</a> that will <a href="https://twitter.com/anatudor/status/1693855796499468720">allow us to do just that</a>!</p></p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> Thème</legend>
<label>
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
</label>
<label>
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé
</label>
<label>
<input type="radio" value="light" name="chosen-color-scheme"> Clair
</label>
</fieldset>
</form>
</template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 72
- 0
cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/index.md View File

@@ -0,0 +1,72 @@
title: Better Buttons with color-mix() and Custom Properties
url: https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/
hash_url: b2ccbe813d97ba39ba64a1b6d14422dd
archive_date: 2024-02-28
og_image: http://0.gravatar.com/avatar/bf1b3b95fd5b096a3592247c29667b33?s=512
description: Let the browser and OKLCH do the hard work of styling states.
favicon: https://www.abeautifulsite.net/images/logos/leaf.svg
language: en_US

<p>Let's build a button that accepts one color and calculates its hover and focus states automatically. For this experiment, we'll use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS Custom Properties</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix">color-mix()</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch">OKLCH</a> to ensure that tints and shades are perceptually uniform.</p>
<p>To keep things simple, we'll follow today's flat design trend and use a single color for the background. We'll store that color in a custom property so we can reuse it and change things up as we go.</p>
<p>Let's kick things off with some styles.</p>
<pre><code class="language-css">/* Set some defaults for the button */
:root {
--button-bg: slategrey;
}

/* Remove factory button styles and add our own */
button {
unset: all;
font: 16px sans-serif;
border: none;
border-radius: 6px;
background-color: var(--button-bg);
color: white;
padding: .875rem 1.125rem;
margin: 0;
cursor: pointer;
transition: 100ms background-color;
}

/* Tint the background when hovering */
button:hover {
background-color: color-mix(in oklch, var(--button-bg) 100%, white 8%);
}

/* Shade the background when clicked */
button:active {
background-color: color-mix(in oklch, var(--button-bg) 100%, black 4%);
}

/* Remove the default focus ring */
button:focus {
outline: none;
}

/* Provide a color-matched focus ring for keyboard users */
button:focus-visible {
outline: solid 3px var(--button-bg);
outline-offset: 1px;
}
</code></pre>
<p>We're using a custom property called <code>--button-bg</code> that sets the button's background. Using a custom property allows us to pass it into the <code>color-mix()</code> function to calculate the hover and active states. This also allows us to use it again to make a color-matched outline for the focus state.</p>
<p>The magic is here:</p>
<pre><code class="language-css">/* Tint the background when hovering */
button:hover {
background-color: color-mix(in oklch, var(--button-bg) 100%, white 8%);
}

/* Shade the background when clicked */
button:active {
background-color: color-mix(in oklch, var(--button-bg) 100%, black 4%);
}
</code></pre>
<p>Using <code>color-mix()</code>, we can adjust the tint/shade based on the background color, meaning we don't need to manually select lighter/darker colors for those states. And because we're using OKLCH, the variations will be perceptually uniform, <a href="https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/#3.-lch-lightness-actually-means-something">unlike HSL</a>. This means that tints and shades will look consistent for any color we choose!</p>
<p>Oh, and because we're using a custom property, we can easily test that theory by setting <code>--button-bg</code> to any color. Note how the hover and focus states update accordingly in this example.*</p>

<p>The caveat is <a href="https://caniuse.com/?search=color-mix">browser support for <code>color-mix()</code></a>, which is green across the board, but still somewhat recent. However, I would argue that this is a great candidate for <a href="https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement">progressive enhancement</a>, as the absence of color changes on hover and click doesn't affect the function of the button.</p>
<p>Not bad for a few lines of CSS!</p>
<hr>
<small>
</small><p>*Alas, we can't automatically ensure the label's contrast based on the background color, but when <a href="https://www.w3.org/TR/css-color-5/">CSS Color Module Level 5</a> lands, we'll get <a href="https://caniuse.com/css-relative-colors#:~:text=The%20CSS%20Relative%20Color%20syntax,any%20of%20the%20color%20values.">relative colors</a> that will <a href="https://twitter.com/anatudor/status/1693855796499468720">allow us to do just that</a>!</p>

+ 4
- 0
cache/2024/index.html View File

@@ -222,8 +222,12 @@
<li><a href="/david/cache/2024/0676c7ccf1ab2b380641866789366d26/" title="Accès à l’article dans le cache local : The Performance Inequality Gap, 2024">The Performance Inequality Gap, 2024</a> (<a href="https://infrequently.org/2024/01/performance-inequality-gap-2024/" title="Accès à l’article original distant : The Performance Inequality Gap, 2024">original</a>)</li>
<li><a href="/david/cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/" title="Accès à l’article dans le cache local : Better Buttons with color-mix() and Custom Properties">Better Buttons with color-mix() and Custom Properties</a> (<a href="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" title="Accès à l’article original distant : Better Buttons with color-mix() and Custom Properties">original</a>)</li>
<li><a href="/david/cache/2024/a005801f0e596f9ecb99037a992ecc1b/" title="Accès à l’article dans le cache local : What’s the fun in writing on the internet anymore?">What’s the fun in writing on the internet anymore?</a> (<a href="https://jamesshelley.com/blog/writing-on-the-internet.html" title="Accès à l’article original distant : What’s the fun in writing on the internet anymore?">original</a>)</li>
<li><a href="/david/cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/" title="Accès à l’article dans le cache local : Where I’m at on the whole CSS-Tricks thing">Where I’m at on the whole CSS-Tricks thing</a> (<a href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" title="Accès à l’article original distant : Where I’m at on the whole CSS-Tricks thing">original</a>)</li>
<li><a href="/david/cache/2024/e8748af541273328d9aa9f1aeb1087b2/" title="Accès à l’article dans le cache local : Redeployment Part Three">Redeployment Part Three</a> (<a href="https://brr.fyi/posts/redeployment-part-three" title="Accès à l’article original distant : Redeployment Part Three">original</a>)</li>
<li><a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Accès à l’article dans le cache local : Fabrique : concept">Fabrique : concept</a> (<a href="https://www.quaternum.net/2023/06/02/fabrique-concept/" title="Accès à l’article original distant : Fabrique : concept">original</a>)</li>

Write Preview
Loading…
Cancel
Save