diff --git a/content/blog/embracing-modern-css/index.en.md b/content/blog/embracing-modern-css/index.en.md new file mode 100644 index 0000000..7fdcbe8 --- /dev/null +++ b/content/blog/embracing-modern-css/index.en.md @@ -0,0 +1,412 @@ +--- +# vim: spell spelllang=en +title: 'Embracing Modern Css' +slug: 'embracing-modern-css' +date: '2025-07-06T14:29:26+02:00' +draft: true +categories: +- dev +tags: +- CSS +summary: | + entrer le résumé +description: | + entrer la description +--- + +I recently stumbled upon a note on a page of [Plain Vanilla] in which I learned +that nested CSS is a thing. It's a thing that's been around for quite some time, +but I did not know about it (I'm quite late in my RSS reader). + +This allowed me to catch up on some of the recent evolutions of CSS. + +[Plain Vanilla]: https://plainvanillaweb.com/pages/styling.html + +## Nested CSS + +Nesting CSS rules is one of the main reasons I've been using [SASS] for 15 +years. + +I've always preferred to write nested rules to group together coherent units of +CSS. For example, + +```scss +a { + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +header { + nav { + ul { + list-style: none; + + li { + text-align: center; + } + } + } +} +``` + +makes more sense to me than + +```css + +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +header nav ul { + list-style: none; +} + +header nav ul li { + text-align: center; +} +``` + +I have a few reasons for this: + +* It's easier to read because selectors are sorter and the hierarchy is easier + to grasp; +* I can move around a group of selector without forgetting a declaration; +* I can use my IDE code folding based on indent to close a group and navigate + long CSS files; + +Since the [CSS Nesting Module] is [Baseline Widely Available] and is supported +by [90% of users], It can be used to write nested CSS. So now, this is a thing in +CSS: + +```css +a { + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +header { + nav { + ul { + list-style: none; + + li { + text-align: center; + } + } + } +} +``` + +The [CSS file] of this site has been rewritten using nested CSS. + +[SASS]: https://sass-lang.com +[CSS Nesting Module]: https://drafts.csswg.org/css-nesting/ +[Baseline Widely Available]: https://webstatus.dev/features/Nesting +[90% of users]: https://caniuse.com/css-nesting +[CSS file]: https://bcarlin.net/static/css/bcarlin.css + +## CSS Variables + +To me, variables are essential to ensure a coherent user interface. They allow to +reuse colors, sizes, spacing, and so on. + +This is also a reason why I've been using [SASS]. It allowed me to write CSS +with reusable variables : + +```scss +$color-error: red; +$color-success: green; + +label { + &.error { + color: $color-error; + } + + &.success { + color: $color-success; + } +} + +.notification { + &.error { + background-color: $color-error; + } + + &.success { + background-color: $color-success; + } +} +``` + +I missed the [CSS Custom Properties] module from 2017, which allowed me to write +the same thing in pure CSS: + +```css +:root { + --color-error: red; + --color-success: green; +} + +label { + &.error { + color: var(--color-error); + } +} + +.notification { + &.error { + background-color: var(--color-error); + } +} +``` + +[CSS Custom Properties]: https://www.w3.org/TR/css-variables/ + +## Classless CSS + +Maybe I an going backwards here, given the popularity of utility-first CSS +frameworks like [TailwindCSS]. + +This one is not really a CSS feature *per se*, but it is a way to write CSS, +where semantically correct HTML is automatically styled correctly. To some +extent, it is, however, backed by some [CSS Selectors Level 4] which are now +Widely implemented across browsers, such as `:has`, `:is`, `:where`, `:not` and +so on. + +I used to use [BootstrapCSS] in my projects because it is complete and easy to +use, but I never liked the way it imposed a heavy CSS Structure on my source. For +this site, I was looking for something lighter and came across [PicoCSS] which +styles 90% of my site without changing anything to my templates. + +I already had a meaningful semantic HTML base structure: + +```html + + + + + + + +
+ +
+ +
+
+
+

Page Title

+
+
+ +
+
+
+ + + + +``` + +And I really like the way it works: the content is styled based on its semantic +markup, and not on a HTML imposed structure. + +For example, here is [Bootstrap Modal component]: + +```html + +``` + +Here is the [Modal component from Tailwind Plus]: + +```HTML +
+ + + +
+``` + +Compare those with [PicoCSS Modal component]: + +```html + +
+
+ +

+ Modal Title +

+
+ + Modal Body + + +
+
+``` + +It makes a huge difference in simplicity, readability and accessibility (note +that the ARIA attributes are rendered useless because the semantic markup +already carries that information). + + +[TailwindCSS]: https://tailwindcss.com +[CSS Selectors Level 4]: https://drafts.csswg.org/selectors-4/ +[BootstrapCSS]: https://getbootstrap.com +[PicoCSS]: https://picocss.com +[Bootstrap Modal Component]: https://getbootstrap.com/docs/4.3/components/modal/#live-demo +[Modal component from Tailwind Plus]: https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/modal-dialogs +[PicoCSS Modal component]: https://picocss.com/docs/modal + +## `@import` to split CSS files + +One last thing I liked to use SASS for was the possibility to split CSS files +into smaller ones to make them easier to grasp. For example: + +```scss +@use 'reset'; +@use 'typography'; +@use 'layout'; +@use 'content'; +``` + +With the [CSS Cascading and Inheritance Level 5] module, CSS has that natively: + +```css +@import url('reset.css'); +@import url('typography.css'); +@import url('layout.css'); +@import url('content.css'); +``` + +From my understanding, the `@import`ed CSS files are downloaded in parallel, +which reduces the penalty of having several files to download. + +CSS `@import` rules even have the benefit of being conditional. For example: + +```css +@import url("light.css") only screen and (prefers-color-scheme: light); +@import url('dark.css') only screen and (prefers-color-scheme: dark); +``` + +[CSS Cascading and Inheritance Level 5]: https://drafts.csswg.org/css-cascade-5/ + +## Things I'm looking forward to + +Those are some things I'm looking forward to using. I do not use them yet +because of browser support or because I did not have a use for them yet. But I'm +excited to try them out. + +### CSS Mixins + +CSS Mixins are also a major feature of SASS, and foster a cleaner and more +reusable CSS code. + +CSS will have them with the [CSS Functions and Mixins Module], which is still a +draft where mixins are not specified yet. + +In the meantime, here is an example from [SASS Mixin Guide]: + +```scss +@mixin rtl($property, $ltr-value, $rtl-value) { + #{$property}: $ltr-value; + + [dir=rtl] & { + #{$property}: $rtl-value; + } +} + +.sidebar { + @include rtl(float, left, right); +} +``` + +Though in some cases, it can easily be replaced with CSS variables: + +```css +:root { + --sidebar-float: left; +} + +[dir=rtl] { + --sidebar-float: right; +} + +.sidebar { + float: var(--sidebar-float); +} +``` + +[SASS Mixin Guide]: https://sass-lang.com/documentation/at-rules/mixin/#arguments +[CSS Functions and Mixins Module]: https://www.w3.org/TR/2025/WD-css-mixins-1-20250515/ + +### CSS Scopes + +### CSS Custom Properties diff --git a/content/blog/going-dark.en.md b/content/blog/going-dark.en.md new file mode 100644 index 0000000..fef3f25 --- /dev/null +++ b/content/blog/going-dark.en.md @@ -0,0 +1,36 @@ +--- +title: 'Going Dark' +slug: 'going-dark' +date: '2025-07-01T00:10:19+02:00' +draft: true +categories: +- Tooling +tags: +- darkman +- vivaldi +- waybar +- wofi +summary: | + entrer le résumé +description: | + entrer la description +--- + +I usually live in the terminal for most things: edit text files (neovim), +read and write emails (aerc), chat on Mattermost (matterhorn), browse files +(vifm), and so on. I might write on that later. My terminal and everything in it +is themed with Solarized Dark. That will not change. + +For the few GUI applications I use, the light theme is ery aggressive at night. +Here are some tips to automatically switch a few of them between light and dark +mode. + +## Automate with darkman + +## GTK Apps + +## Vivaldi + +## Add A Switcher To Waybar + +## Switch Wofi Theme diff --git a/content/blog/hugo-translating-taxonomy-terms.en.md b/content/blog/hugo-translating-taxonomy-terms.en.md new file mode 100644 index 0000000..40d3e73 --- /dev/null +++ b/content/blog/hugo-translating-taxonomy-terms.en.md @@ -0,0 +1,13 @@ +--- +title: 'Hugo Translating Taxonomy Terms' +slug: 'hugo-translating-taxonomy-terms' +date: '2025-07-02T22:35:43+02:00' +draft: true +categories: [] +tags: +- +summary: | + entrer le résumé +description: | + entrer la description +--- diff --git a/content/blog/jj-main-vcs/index.en.md b/content/blog/jj-main-vcs/index.en.md new file mode 100644 index 0000000..ddeded4 --- /dev/null +++ b/content/blog/jj-main-vcs/index.en.md @@ -0,0 +1,36 @@ +--- +title: 'I Use jj as my Main VCS' +slug: 'i-use-jj-as-my-main-vcs' +date: '2025-07-02T18:04:31+02:00' +draft: true +categories: +- Tooling +tags: +- jj +- git +summary: | + entrer le résumé +description: | + entrer la description +resources: +- src: jj-logo.svg + params: + legend: jj logo +--- + +I stumbled upon [jj] sometimes last year but I decided to give it a real go a +few month ago. It has already become my main VCS for all my code, even as a +replacement of git. + +![JJ Logo](jj-logo.svg) + +does things right: + +- undo that works +- versioned working copy (restore a deleted file to a previous version) +- jj git fetch removes local branches when the remote is removed +- jj log shows what is useful by default without noise +- rebase of trees +- rebase of multiple branches + +[jj]: https://github.com/jj-vcs/jj diff --git a/content/blog/jj-main-vcs/jj-logo.svg b/content/blog/jj-main-vcs/jj-logo.svg new file mode 100644 index 0000000..3b77bb6 --- /dev/null +++ b/content/blog/jj-main-vcs/jj-logo.svg @@ -0,0 +1 @@ +