Search
Items tagged with: WebDev
🚀 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
PDFs are useful, but they aren’t accessible, especially when it comes to ebooks.
In “Transforming eBooks: From PDFs to Accessible Web Experiences”, learn how we turned our latest #ebook into a dynamic reading experience that is also accessible using #11ty
https://www.lullabot.com/articles/transforming-ebooks-pdfs-accessible-web-experiences
Transforming eBooks: From PDFs to Accessible Web Experiences
Learn how we converted our PDFs into an accessible, dynamic reading experience using a static site generator.Lullabot
Just wrote up my short talk from the 11ty meetup about using Cloudinary for dynamic social share images
Big props to @jlengstorf for the prior art and original code. Here I talk a lot about how gravity and layers work.
#webdev #11ty #cloudinary
https://sia.codes/posts/social-share-images-using-cloudinary/
Dynamic social share images using Cloudinary
Automatically generate unique Open Graph images for each page of your websiteSia Karamalegos (sia.codes)
📝 11ty meetup: Tracking and displaying music history #Eleventy #Development #Webdev
I got to speak at the 11ty meetup today about the music tracking contraption I've built into my site. I have a fairly detailed post on how I built it and another on the method I'm using to render dynamic media (read: musician/band) pages.
https://coryd.dev/posts/2024/11ty-meetup-tracking-and-displaying-music-history
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 sixth is a little pure #CSS #3D thing I quickly make in under 10 minutes https://codepen.io/thebabydino/pen/wvbWYyd
I really didn't expect anyone would even notice such a silly simple little thing and then it got hearted over 200 times...
#code #coding #fronten #textEffect #web #dev #webDevelopment #webDev #textEffects
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
✍🏻 New blog post! 📰
This time we'll take a closer look at how to avoid storing images in the Git repo. We'll also look at how to optimize images in #11ty and how to make them responsive. We also write our own shortcode for responsive background images!
https://blog.sebin-nyshkim.net/posts/responsive-self-hosted-images-for-your-eleventy-blog/
Responsive, Self-hosted Images for Your Eleventy Blog - Sebin's Blog
While you can certainly host your image files with the Git repo your Eleventy site is checked into, or add them manually after building it, neither option is ideal if you want responsive images in multiple formats to save precious bandwidth.blog.sebin-nyshkim.net
Join us tomorrow at THE Eleventy meetup!
Ep. 20: Music trackers and social share images
In this episode, Cory discusses how he built his latest music tracker for his personal site, and Sia shows us how to create unique social share images for each page.
https://11tymeetup.dev/
THE Eleventy Meetup
11tymeetup.devJoin the Possum Posse to learn more about Eleventy! We're a new virtual meetup all about Eleventy and the tools and skills that support developing on Eleventy.
Sign up for email updates
#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
📝 Dynamic pages with 11ty and Cloudflare workers #Eleventy #Development #Webdev #Javascript
I was rendering about 3300 pages every time my 11ty site built — probably overkill. About 615 artist pages, 1200+ movie pages, 500 show pages, 500 for books and ~35 for genres. Whew. Build times hovered at about a minute (still very impressive!) but would only ever increase.
https://coryd.dev/posts/2024/dynamic-pages-with-11ty-and-cloudflare-workers
Do you need to build a static website for fun or profit? Try the Simple.css Framework. It is a CSS framework that makes semantic HTML look good.
+ A good-looking sans-serif local font stack.
+ Typographic best practices.
+ Automagic flipping to dark mode.
+ Fully responsive.
+ Sensible defaults that format standard + HTML elements.
+ Super lightweight (10k css).
+ Give it a try @ https://simplecss.org/ (my home page https://vivekgite.com for live demo).
#CSS Masonry & CSS Grid
https://css-tricks.com/css-masonry-css-grid/
Two competing proposals to solve masonry in CSS. #webdev
CSS Masonry & CSS Grid | CSS-Tricks
An approach for creating masonry layouts in vanilla CSS is one of those "holy grail" aspirations. I actually tend to plop masonry and the classic "Holy Grail"Geoff Graham (CSS-Tricks)
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
I've got a rough draft of a new portfolio site built: https://new-portfolio-ph.netlify.app/
I have a bunch of little chores I need to do before this is "done" but feel free to check it out. Feedback is welcome and helpful (including critical feedback!)
Here's what it will be replacing: https://paulmakeswebsites.com/
As usual, building with @eleventy made the coding part a breeze! (It was my first time trying the image plugin which is really nice.)
#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
HUGE thanks to @robb for writing a clear, easy-to-follow #guide on how to enable #Fediverse author attribution on blogs/websites - so that it will show up under the link card: https://rknight.me/blog/setting-up-mastodon-author-tags/
#blog #journalism #mastodonupdate #webdev
Setting Up Mastodon Author Tags
How to setup your website so you too can have a fancy author tag when your posts are sharedrknight.me
Why I 🧡 the web.
Winamp and other media players, rebuilt for the web with #WebComponents. Free and #opensource. #webdev
player.style - Video & audio player themes for every web player & framework
Video and audio player themes that work for any web player (Video.js, Youtube embeds, and more), and with every web app framework (HTML, React, and more). Open source and built with Media Chrome so they’re fully customizable using just HTML and CSS.player.style
Mastodon Bird UI 2.0.0-2.0.1 stable is now released! This version supports Mastodon v4.3.0 and v4.4.0-alpha released today. 
Live demo (single column layout only): https://mementomori.social
Source code and installation instructions: https://github.com/ronilaukkarinen/mastodon-bird-ui
#MastodonBirdUI #BirdUI #CSS #UI #WebDev #OpenSource #Mastodon #MastoAdmin
GitHub - ronilaukkarinen/mastodon-bird-ui: 🐘🐦 Mastodon web UI, but strongly inspired by Twitter.
🐘🐦 Mastodon web UI, but strongly inspired by Twitter. - ronilaukkarinen/mastodon-bird-uiGitHub
#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
Eleventy 3.0 debuts • The latest major version of the best JS-based SSG brings quite a few enhancements.
https://www.brycewray.com/posts/2024/10/eleventy-3-0-debuts/
Transform your bookmark collections into a CMS!
Interesting concept of using Mozilla’s Pocket API with a static site generator 🤯
https://stebre.ch/en/projects/importing-bookmarks-to-11ty-with-the-pocket-api/
By @stebre from @eleventy community
Importing bookmarks to 11ty with the Pocket API | stebre.ch
Pocket offers an API with which the saved bookmarks can be used and customized. I make use of this and save the data in a bookmark post on stebre.ch. Bookmarks with a specific tag are taken into account.stebre.ch
Issue 58 of the #11ty Bundle is out: Eleventy v3-beta.2: The Final Countdown, v3 docs ready to roll, The Eleventy Meetup happened, Template syntax plugins hit 1.0.0, Migrating from Wordpress to Eleventy, How real Shopify sites perform, Connecting Notion to Eleventy, Fursuiting is a thing...And 4 releases, 12 posts and 12 sites to see.
