diff --git a/archetypes/default.md b/archetypes/default.md index 94ce5b4..2ce999e 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -1,11 +1,9 @@ --- -# vim: spell spelllang=en title: '{{ replace .File.ContentBaseName "-" " " | title }}' slug: '{{ .File.ContentBaseName }}' date: '{{ .Date }}' draft: true -categories: -- +categories: [] tags: - summary: | diff --git a/assets/static/css/bcarlin.css b/assets/static/css/bcarlin.css index b00a9f7..a27e26e 100644 --- a/assets/static/css/bcarlin.css +++ b/assets/static/css/bcarlin.css @@ -150,9 +150,9 @@ body { background-color: var(--pico-background-color); & > header { - width: 100dvw; + width: 100vw; text-align: center; - height: 100dvh; + height: 100vh; position: fixed; left: -100vw; top: 0; @@ -161,10 +161,6 @@ body { transition: left 0.5s; overflow: hidden auto; - &.active { - left: 0; - } - @media (width >= 1024px) { position: sticky; top: 0; diff --git a/content/blog/007-prepare-for-the-next-internet-outage/index.en.md b/content/blog/007-prepare-for-the-next-internet-outage/index.en.md index f41d7c6..01ea218 100644 --- a/content/blog/007-prepare-for-the-next-internet-outage/index.en.md +++ b/content/blog/007-prepare-for-the-next-internet-outage/index.en.md @@ -5,7 +5,7 @@ date: '2025-06-14T04:05:48+02:00' categories: - DevOps tags: -- architecture +- architecture, - cloud summary: > A reflection on recent internet outages and my takeways to build more diff --git a/content/blog/embracing-modern-css/index.en.md b/content/blog/embracing-modern-css/index.en.md deleted file mode 100644 index 7fdcbe8..0000000 --- a/content/blog/embracing-modern-css/index.en.md +++ /dev/null @@ -1,412 +0,0 @@ ---- -# 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