Search
Items tagged with: FrontEnd
🚀 New Post 🚀
A Design Tokens Workflow (part 2): Outputting to Different Formats With Style Dictionary
Learn how to output Design Tokens to CSS, Sass, JavaScript, iOS, Android, and more.
🔗 https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-2
#DesignTokens #FrontEnd #WebDev #DesignSystems
A Design Tokens Workflow (part 2) - Outputting to Different Formats with Style Dictionary | Always Twisted
Explore the various built-in formats in Style Dictionary for transforming design tokens into usable code across platforms.Always Twisted
Fixed a long-standing color contrast problem on my website 🎉
Been using (h/t @KiwiKilian) remark-shiki-twoslash as an @eleventy v3 replacement for eleventy-plugin-shiki-twoslash to highlight syntax in Markdown code blocks.
But it's stuck on an old Shiki version with no accessible themes. So I forked it!
@olets/eleventy-plugin-shiki-twoslash has high contrast themes and supports Eleventy 3. (CJS->ESM side quest: createRequire)
https://github.com/olets/shiki
#shiki #eleventy #FrontEnd #a11y
GitHub - olets/shiki: Forks of some Shiki org repos. Notably, @olets/eleventy-plugin-shiki-twoslash support Eleventy 3 and adds the latest Shiki themes and languages
Forks of some Shiki org repos. Notably, @olets/eleventy-plugin-shiki-twoslash support Eleventy 3 and adds the latest Shiki themes and languages - olets/shikiGitHub
The tenth is this no text duplication stroke shadow 🌊
https://codepen.io/thebabydino/pen/mdoPoJz
Absolutely no text duplication, not in the markup, not in any pseudo-element content.
The outline shadows are tiled down using an #SVG #filter, which is also responsible for the wave 🌊 distortion. 🪄
#svgFilter #CSS #gradient #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment
The fifth is a pure #CSS text effect.
https://codepen.io/thebabydino/pen/XWQQRWG
No text duplication whatsoever, no pseudos, no images save for CSS gradients. Just a single div and a few heavily commented CSS declarations.
Unfortunately broken in Firefox due to an old bug 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1481498
#cssGradient #cssPattern #textEffect #textEffects #code #coding #frontend #web #dev #webDev #webDevelopment #blue
1481498 - background-clip with multiple values fails when one value is text
NEW (nobody) in Core - Web Painting. Last updated 2024-05-06.bugzilla.mozilla.org
The seventh is a fancy effect you may have seen on some websites: making a section slide horizontally on vertical scroll!
Here with pure #CSS 🤯 using scroll-driven animations
https://codepen.io/thebabydino/pen/WNqJXXa
#scroll #scrollAnimation #code #coding #frontend #webDevelopment #web #dev #webDev
The eighth is this no text duplication blended layers demo https://codepen.io/thebabydino/pen/abxLyxw
Uses #CSS gradients and some #SVG #filter magic 🪄 to get the effect - can you figure out how before checking it out on @codepen?
#svgFilter #textEffect #textEffects #coding #code #frontend #web #dev #webDev #webDevelopment
#Development #Experiences
Why are static site generators so complicated to use? · “Modern static site generators are a bit like a hard video game.” https://ilo.im/160fo1
_____
#Website #SSG #Hugo #Eleventy #Astro #Blot #OpenSource #WebPerf #WebDev #Frontend
One complaint I've seen here a bunch of times with `prefers-color-scheme` was about duplicating styles.
You don't have to do that when you switch by toggling a single `--dark` variable!
(from State of CSS results https://2024.stateofcss.com/)
#CSS #theming #code #coding #frontend #web #dev #webDev #webDevelopment
![From the comments on `prefers-color-scheme`:
* Not entirely related to this, but it would be amazing if we could target `prefers-color-scheme` along with user selected preferences, i.e. [data-theme=dark], in a single ruleset
* Wish I could combo this with the inevitable user-control hook as well though. Some kind of hybrid @media and regular selector, so you don't have to repeat everything within both an @media clause and then again with some kind of global selector e.g. body[data-theme="dark"]
* I really wish there was a way to use "dark mode" detection outside of a media query. I constantly want to treat "user selected dark mode" on my website the same as "auto theme + system dark mode", but I have to duplicate styles with the way CSS works right now! It's a huge bummer.](https://friendica.hellquist.eu/photo/preview/640/3302711 "From the comments on `prefers-color-scheme`:
* Not entirely related to this, but it would be amazing if we could target `prefers-color-scheme` along with user selected preferences, i.e. [data-theme=dark], in a single ruleset
* Wish I could combo this with the inevitable user-control hook as well though. Some kind of hybrid @media and regular selector, so you don't have to repeat everything within both an @media clause and then again with some kind of global selector e.g. body[data-theme=\"dark\"]
* I really wish there was a way to use \"dark mode\" detection outside of a media query. I constantly want to treat \"user selected dark mode\" on my website the same as \"auto theme + system dark mode\", but I have to duplicate styles with the way CSS works right now! It's a huge bummer.")
![/* ✅ DO (DRY) ✅ */
body {
--dark: 0; /* 0 initially for light theme; 1 for dark theme */
/* how much the dark version represents;
* 0% in light theme case, 100% in dark theme case */
--perc: calc(var(--dark)*100%);
background: color-mix(in hsl, $dark-back var(--perc), $light-back);
color: color-mix(in hsl, $dark-text var(--perc), $light-text);
}
a { color: color-mix(in hsl, $dark-link var(--perc), $light-link) }
/* other styles */
/* switch to dark theme cases */
body:has([data-theme-option='dark'][aria-pressed='true']) { --dark: 1 }
@media (prefers-color-scheme: dark) { --dark: 1 }](https://friendica.hellquist.eu/photo/preview/640/3302713 "/* ✅ DO (DRY) ✅ */
body {
--dark: 0; /* 0 initially for light theme; 1 for dark theme */
/* how much the dark version represents;
* 0% in light theme case, 100% in dark theme case */
--perc: calc(var(--dark)*100%);
background: color-mix(in hsl, $dark-back var(--perc), $light-back);
color: color-mix(in hsl, $dark-text var(--perc), $light-text);
}
a { color: color-mix(in hsl, $dark-link var(--perc), $light-link) }
/* other styles */
/* switch to dark theme cases */
body:has([data-theme-option='dark'][aria-pressed='true']) { --dark: 1 }
@media (prefers-color-scheme: dark) { --dark: 1 }")
State of CSS 2024
The 2024 edition of the annual survey about the latest trends in the CSS ecosystem.2024.stateofcss.com
#tinyJStip Got some buttons and only one can be pressed? Here's a simple way to swap their values!
Same applies to swapping which tab is selected and other similar situations.
(doesn't seem to work for tabIndex through 😵)
#HTML #a11y #JS #JavaScript #code #web #coding #frontend #dev #webDev #webDevelopment
![addEventListener('click', e => {
let b = e.target;
if(b.classList.contains('t') && b.ariaPressed !== 'true') {
let a = document.querySelector('.t[aria-pressed=true]');
[b.ariaPressed, a.ariaPressed] =
[a.ariaPressed, b.ariaPressed]
}
})](https://friendica.hellquist.eu/photo/preview/640/3292148 "addEventListener('click', e => {
let b = e.target;
if(b.classList.contains('t') && b.ariaPressed !== 'true') {
let a = document.querySelector('.t[aria-pressed=true]');
[b.ariaPressed, a.ariaPressed] =
[a.ariaPressed, b.ariaPressed]
}
})")
Here's an example where I'm using something like this: switching between tabs.
Originally made this on @codepen after someone asked how to create tabs with rounded corners *and* borders.
https://codepen.io/thebabydino/pen/oNKLLbv
Then finally polished it this weekend.
Vanilla #CSS + #JS + a bit of #SVG #filter magic.🪄
Works with an image behind the tabs, the tabs may also have an image background.
#svgFilter #tabs #tabbed #JavaScript #web #webDev #webDevelopment #dev #code #coding #frontend #a11y
The third is something I quickly made to answer a question I saw on reddit https://reddit.com/r/css/comments/1fwm87i/comment/lqg11fl/
It's similar to something you can find on a lot of websites with a couple extra constraints:
✨ no extra elements, no pseudos
✨ working fine on top of image background
#CSS #cssGradient #mask #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment
The second is a quick little thing I live-coded in Professor Mode on @codepen in under 15 minutes a little while back.
Just like the first, it has absolutely no text duplication, not in the markup and not in pseudo content.
A little #SVG #filter magic 🪄 slices and offsets it https://codepen.io/thebabydino/pen/RwmPZVR
#CSS #cssGradient #svgFilter #code #coding #frontend #web #dev #webDev #webDevelopment
The first one is this text effect that uses absolutely no images whatsoever save for #CSS gradients.
Some #SVG filter magic 🪄 is responsible for the background texture and also for the 3D look of the text and its grainy gradients.
https://codepen.io/thebabydino/pen/gONbppb
#filter #svgFilter #texture #textEffect #textEffects #noise #cssGradient #code #coding #3D #3dText #frontend #web #dev #webDev #webDevelopment
#tinyCSStip Simplest circle sector in 4 CSS declarations!
1⃣ set width to desired diameter
2⃣ square element with aspect-ratio
3⃣ turn square into disc
4⃣ conic-gradient() magic! 🪄
The start angle and sector angle can also be animated for fun results.
Because someone asked https://www.reddit.com/r/css/comments/1fvo5dl/comment/lq9mtjj/
#CSS #gradient #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment
