Tag: CSS
Quick Hit #152
Chrome 150 (Beta) and Firefox 154 (Nightly) also trial the alpha() CSS function.
Quick Hit #151
Safari TP 246 becomes the first to trial the alpha() relative color CSS function.
Quick Hit #150
Safari TP 246 trials scroll-state queries and word-break: auto-phrase (lacks Firefox support).
Quick Hit #149
Safari TP 246 adds support for values in light-dark() and three or more values in color-mix() (lacks Chrome support).
Quick Hit #149
Safari TP 246 adds support for values in light-dark() and three or more values in color-mix() (lacks Chrome support).
The Programmer’s Fulcrum: 5 June, 2026
This post originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. The big news this week was obviously The European Commission's European Technological Sovereignty Package....
The Programmer’s Fulcrum: 22 May, 2026
This post originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. As usual, we aim to provide actionable content you can use to destroy Techno...
The Programmer’s Fulcrum: 15 May, 2026
This article originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. As usual, we aim to provide actionable content you can use to destroy Techno...
The Programmer’s Fulcrum: 08 May, 2026
This post originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. There is a lot of coverage of the shitshow that is ShitHub this week....
Adding an animated card border glow with CSS
today iain learned: How to add an animated card border glow with CSS
The Programmer’s Fulcrum: 17 April, 2026
This article originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each...
The Fulcrum 10 April, 2026
Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional benefit of...
Better code blocks with the Astro Expressive Code integration
today iain learned: How to build better and more accessible code blocks with the Astro Expressive Code integration
The Programmer’s Fulcrum: 27 March, 2026
Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional benefit of...
The Programmer’s Fulcrum: 20 March, 2026
Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional benefit of...
The Programmer’s Fulcrum: 27 February, 2026
Welcome to this week's The Programmer's Fulcrum. It’s your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional benefit of...
The Programmer’s Fulcrum: 20 February, 2026
Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional benefit of...
The Programmer’s Fulcrum: 13 February, 2026
Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional benefit of...
The Programmer’s Fulcrum: 06 February, 2026
This post originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each...
The Programmer’s Fulcrum: 23 January, 2026
This post originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each...
Screenshot DOM nodes to create favicon and Open Graph images
today iain learned: How to screenshot HTML DOM nodes and their CSS styles in the browser to create favicon and Open Graph images
My Opinionated CSS Reset
A CSS reset for modern web development to provide a consistent and high-quality base for projects. Low-specificity and very opinionated to provide a strong foundation allowing seamless use in projects of varying scales and complexity.
The Programmer’s Fulcrum 16 January, 2026
This post originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each...
The Programmer’s Fulcrum: 09 January, 2026
Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. IMHO, the best way to do...
The Tailwind Labs Story: How AI Disrupted a Successful Business Model
On January 6, 2026, Adam Wathan, creator of Tailwind CSS, made a difficult announcement that sent shockwaves through the web development community: Tailwind Labs laid off 75% of its engineering team—three out of four engineers—despite the framework being more popular than ever. The layoffs occurred because of a brutal 80% revenue collapse, driven primarily by the way artificial intelligence has fundamentally altered how developers learn, build, and consume development tools. This situation represents a watershed moment in understanding how AI impacts not just the broader tech industry, but specifically the economics of open-source software businesses and their commercial derivatives.
The Programmer’s Fulcrum: 02 January, 2026
Welcome to this week's The Programmer's Fulcrum. FYI, this is our first one of 100% TPF curation. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy...
Python-kodeblokk
Eksempel på kodeblokk med Python
Josh Comeau - Creating Delightful Developer Education
Josh Comeau reveals his techniques for creating interactive developer education experiences and building delightful web interfaces with CSS and JavaScript.
Matt Perry - (Framer) Motion - The Evolution of Animation Libraries
Matt Perry shares the evolution of Framer Motion into Motion, focusing on animation performance and expanding beyond React frameworks.
Tailwind CSS Cheatsheet
A cheatsheet on how to use Tailwind CSS classes and links to resources.
The 2024 CSS Cheatsheet
A cheatsheet on how to use some of the most commonly used CSS properties.
The Chaotic Neutral Nature of Font-size
The first step to properly aligning web typography is understanding font-size
A couple more words on CSS nesting
Yes, I'll use CSS nesting. But I won't be using it nearly as much as I would have five years ago.
CSS nesting
CSS nesting has been a long time coming, but when it finally arrives, we're not actually going to need it anymore.
SASS Cheatsheet
Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a plugin for your build system.
Vim の Syntastic で sass-lint が上手く動かないときの debug の話
一瞬はまったのでメモしておきます。 ~/.sass-lint.yml はホームディレクトリ外では無効でした まず問題の発端はここからです。 僕は今のところ Vim 上で scss ファイルを編集するときに sass-lint を linter として利用しています。 GitHub - sasstools/sass-lint: Pure Node.js Sass linting Pure Node.js Sass linting. Contribute to sasstools/sass-lint development by creating an account on … github.com .sass-lint.yml が何も設定されていない状態だと、 この中にあるルールの1つである property-sort-order が 初期設定で alphabetical になっているため、 scss ファイル内のプロパティがアルファベット順になっていない行で すべて警告が出ます。 正直、うざいです・・・。 ちなみに .sass-lint.yml のサンプルはこちらです。 sass-lint/docs/sass-lint.yml at develop · sasstools/sass-lint Pure Node.js Sass linting. Contribute to sasstools/sass-lint development by creating an account on … github.com
github-markdown-css を導入してみた
Github から生成されるページって、バランスとかが良くてなんだかんだですごく読みやすいんですよ。 一方で自分のブログは、中身を WordPress から Hugo に変えて データベースの管理をしなくなって済んだところはすっきりしたものの、 当時そこ以外に時間をかけたくなく、見た目は古いままで移行したので、 自分で読んでてちょっと読みづらかったんですよね。 そこで、見た目をばっさり切り捨てつつ、以下を導入しました。 GitHub - sindresorhus/github-markdown-css: The minimal amount of CSS to replicate the GitHub Markdown style The minimal amount of CSS to replicate the GitHub Markdown style - sindresorhus/github-markdown-css github.com これをベースにして、メインコンテンツ幅やリンクの横並びの調整など、 本当に最小限の調整を行っただけなのですが、 時間かけずにいい感じになったので、しばらくこのままで行こうと思います。 本当に大事じゃないところに時間かけないの、大事だと思います。 ついでにトップページと一覧ページを分けました。 現状 Hugo を利用してブログ書いてるときに困る点、やってない点といえば、 画像の加工がめんどくさい 投稿してから追記した場合の日付管理（Hugo で .Lastmod を使う？） 古すぎますよ、という警告文表示（Static Site なので Hugo だけでは難しい？） ぐらいになったかと思います。
mediaQuery における max-width, max-device-width の違い
最近改めて使い分けないとなーと実感したので、その実感を忘れないうちにメモしておこうと思います。 デバイスの幅(width)と device-width の違いについて そもそもの話ですが、そのデバイスで何ピクセル x 何ピクセルで表示できますよーという値と、 device-width の値は異なります。（結果的に同じ場合もあり得ますが） Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices Screensiz.es is a handy database of screen sizes, viewport sizes, and pixel densities for popular … screensiz.es こちらに、デバイスごとの width, device-width がまとめてあります。たまに見ます。 iPhone 3GS の時代であれば、width = 320px, device-width = 320px であったので問題なかったのですが、 retina ディスプレイが出てきてから、 width = 640px, device-width = 320px になってきています。
Prettier source code on WordPress.com
Posting source code on WordPress.com is quite simple: the platform already provides an extremely easy to use shortcode called sourcecode, based on a fairly flexible syntax highlighter plugin. By looki...