Accessibility Bubbles

Frontend Mentor | QR-card component transformed in a ReactJS/Typescript app coding challenge solution GiandomenicoRiceputi's front-end solution for the QR code component coding challenge on Frontend Mentor

I've just completed a front-end coding challenge from @frontendmentor! 🎉

You can see my solution here: www.frontendmentor.io/solutions/qr...

Any suggestions on how I can improve are welcome!

Masonry layout is coming, but it's got a new name ✅ Sign up for my newsletter: https://kevinpowell.co/newsletter ✅ The issue where they picked the name: https://github.com/w3c/csswg-drafts/issues/12022 ✅ The original issue, debating the syntax: https://github.com/w3c/csswg-drafts/issues/11243 #css ✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter 💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK ⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co 🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/) 🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/ --- Help support my channel 👨🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell 💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join --- 🧑💻 My editor: VS Code - https://code.visualstudio.com/ 🌈 My theme: One Dark Pro Var Night 🔤 My font: Cascadia Code --- I'm on some other places on the internet too! If you'd like a behind the scenes and...

🚨 CSS news: Masonry has been renamed Grid Lanes — native Pinterest‑style layouts are finally coming! 👉 www.youtube.com/watch?v=yikb...

#CSS #WebDev #Frontend #GridLanes

una.im | Range Syntax for Style Queries Learn how to use the new range syntax for CSS style queries and the if() function.

Good news!

Range syntax for style queries and if() functions has shipped in Chrome!

Check it out:

una.im/range-style-...

Pure CSS Back-to-Top Button With Progress Indicator A button that lets users smoothly scroll back to the top of the page and displays a visual progress indicator of how much content has been scrolled. Ma...

Pure #CSS back-to-top button with progress indicator
@codepen.io: codepen.io/scharan/full...

Easier Site-Wide Theming with Style Queries ✅ Part one of this series: https://youtu.be/WP5CC5yawfs ✅ Code from this video: https://codepen.io/kevinpowell/pen/QwbYwXv??editors=1100 ✅ Style Query support table:…

Today's lunch video is "Easier Site-Wide Theming with Style Queries" - Style queries make it easier to track things like light and dark theme, which may be set by both a system preference and a user setting. #CSS www.youtube.com/watch?v=E8M6...

Pseudo-classes A CSS pseudo-class is a keyword added to a selector that lets you style a specific state of the selected element(s). For example, the pseudo-class :hover can be used t…

🦖 Random MDN: Pseudo-classes 🦖

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes

A CSS pseudo-class is a keyword added to a selector that lets you style a specific state of the selected element(s). For example, the pseudo-class :hover can be used t…

#webdev #CSS

Infinite Scroll Masonry Gallery with React & TypeScript This project is about building an infinite-scroll masonry gallery using React, TypeScript, and the Unsplash API.

I wrote my first blog post 😱💩, yep I am super scared but anyway is about how i build an infinite scrolling masonry gallery, using @unsplash.com API and ReactJS/Typescript and try to implement Cube CSS methodologies from @bell.bz . I share my journey with you.
accessibilitybubbles.com/blog/infinit...

Some practical examples of view transitions to elevate your UI Declan Chidlow here with some really practical uses of view transitions, along with some of the stuff that will trip you up, with guidance to help you navigate that.

Some practical examples of #CSS view transitions to elevate your UI: "Declan Chidlow here with some really practical uses of view transitions, along with some of the stuff that will trip you up, with guidance to help you navigate that." piccalil.li/blog/some-pr...

A pragmatic guide to modern CSS colours - part one Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...

CSS color just a major glow-up 🌈
Stop using `#hex` and `rgb()`—switch to `lch()` / `oklch()` for better contrast, smoother gradients, and HDR-ready design.

@kevinpowell.co breaks it down brilliantly:
piccalil.li/blog/a-pragm...

#CSS #WebDev #DesignSystems #A11y #colors #oklch

CSS Grid: A helpful mental model and the power of grid lines Grid is a powerful, flexible tool that brings complex layouts to life.

#css

webkit.org/blog/17474/c...

Modern CSS Round-Out Tabs We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.

#css

frontendmasters.com/blog/modern-...

Transition to the Other Side with Container Query Units How container queries help move an element to the opposite side of its parent container when both have dynamic responsive dimensions.

#css #javascript
ryanmulligan.dev/blog/transit...

Conditional Border Radius with Modern CSS A simple trick to control the border-radius based on the screen/container size

#css

css-tip.com/conditional-...

A pragmatic guide to modern CSS colours - part one Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...

OK @kevinpowell.co has written what has to be one of the best (if not THE best) practical article to #CSS colors I have read in a while. piccalil.li/blog/a-pragm...

Easy to read, practical examples, and *perfect* for someone like me who's fallen behind and hasn't kept up with all the new stuff.

Styling siblings with CSS has never been easier. Experimenting with sibling-count and sibling-index | utilitybend Ready to spice up your CSS? This article dives into the new sibling-count() and sibling-index() functions, showing you how they can simplify your styling and create cool effects.

Styling Siblings With #CSS Has Never Been Easier: "Ready to spice up your CSS? This article dives into the new sibling-count() and sibling-index() functions, showing you how they can simplify your styling and create cool effects." utilitybend.com/blog/styling...

[NL] Meetup kwartaal 4, Thu, Oct 2, 2025, 7:00 PM | Meetup (This meetup is in Dutch!/Deze bijeenkomst is Nederlandstalig!) Na de vakantie beginnen we weer vol enthousiast aan de toegankelijkheid. We zijn op deze avond te gast bij

Donderdag zijn we bij Level Level in Rotterdam!

1. Caitlin de Rooi: WCAG en ik: succescriteria voor ADHD
2. Diede Gulpers: De ideale developer's accessibility roadmap
3. @kilianvalkhof.com (@polypane.app): Hoe ontwikkel je accessibility features voor een browser?

www.meetup.com/inclusive-de...

it will be live online or publish the record later on ?

CSS to speech: alternative text for CSS-generated content — The personal website of Sara Soueidan, inclusive Web UI engineer

CSS to Speech: Alternative Text for CSS-Generated Content, by @sarasoueidan@front-end.social:

https://www.sarasoueidan.com/blog/alt-text-for-css-generated-content/

#css #voice #generatedcontent #alttext #accessibility

Start using Scroll-driven animations today! | Blog Cyd Stumpel To celebrate scroll-driven animations finally landing in Safari 26, here are some things you probably want to know before using them. Link to: The anatomy of a scroll driven animation We don’t need…

Start using #CSS Scroll-driven animations today! "To celebrate scroll-driven animations finally landing in Safari 26, here are some things you probably want to know before using them." cydstumpel.nl/start-using-...

CSS animations The CSS animations module lets you animate the values of CSS properties, such as background-position and transform, over time by using keyframes. Each keyframe describes how the animated …

🦖 Random MDN: CSS animations 🦖

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations

The CSS animations module lets you animate the values of CSS properties, such as background-position and transform, over time by using keyframes. Each keyframe describes how the animated …

#webdev #CSS

Drawing Yoda with CSS YouTube video by Alvaro Montoro

Just shared a new video drawing with CSS. This time is Yoda (or Grogu?) in a kawaii-ish style.
youtu.be/r_FH65HpYgE?...

He looked a bit sad with the mouth like that so I flipped the mouth and make it smile :)

Live demo and source code on @codepen.io: codepen.io/alvaromontor...

#css #cssArt #html

Creating a Firework Effect with CSS Last week I created a firework effect with CSS. It is relatively simple (it only requires one HTML element per firework) and customizable (it uses CSS custom properties to customize colors, sizes, pos...

It's 4th of July, here's a throwback article on how to create a firework effect with CSS and a single HTML element (per firework)
alvaromontoro.com/blog/68002/c...

#css #html #july4 #fireworks

Creating a cartoon with CSS: Venn's Summer (with commentary) YouTube video by Alvaro Montoro

The @comicss.art cartoon for next Monday is ready (Patreon members got early access). This time, I recorded the process and shared it on my YouTube channel (and I added comments)... So if you see this post, you also get early access.
youtu.be/qhmZqHgpnmU

#css #cartoon #video #liveCoding

This 3D icons library is sooooo good! 🔥

This library has 4,000+ AI-generated 3D icons, perfect for your web, frontend, or design projects.

🔗: thiings.co

Hope this helps ✅️

Follow @rammcodes.bsky.social for more 💎

#html #css #javascript #reactjs #100daysofcode

calc-size() We can now do calculations based on the intrinsic size of an element

#css

html-css-tip-of-the-week.netlify.app/tip/calc-size/

Easier layout with margin-trim If you write a lot of CSS, you are familiar with those moments when you aren’t quite sure how to accomplish what you want to accomplish.

One more #CSS hack to add to your toolbox: margin-trim.

Screenshot of several color swatches in the Theme Machine

Need some colors for your next web project? I’ve got you covered. If you haven’t seen the Theme Machine, check it out! 🎨 #css #webdev

tools.keithjgrant.com/theme-machine/

A red, yellow, and black Superman logo on a blue background.

Okay, #CSS corner-shape is pretty super. No SVG, no shape() clip paths, or gradients, just some basic border-radius and you can make Superman's logo.

codepen.io/jbasoo/pen/r...

(Inspired by @amitsheen.bsky.social's @frontendmasters.com article)

Having figure match width of contained image Earlier this week, I explored a solution to center an image and caption by making the figure take on the width of the image even when the caption was longer than the image. I wanted the caption to…

Having figure match width of contained image: "I need to center an image and caption by making the figure take on the width of the image even when the caption is longer than the image and the caption should wrap if needed. I ask several #CSS wizards to weigh in." jeffbridgforth.com/having-figur...

Didn't get to do anything for this week's @codepen.io challenge yet, but here's an older demo: pure #CSS sphere of spheres codepen.io/thebabydino/...

#CodePenChallenge

Uses the spherical distribution tactic described 👇 then ensure no two spheres intersect. Also: pure CSS #3D shading!