R: 1 / I: 1 smooth janky mess of custom bezier curves that don't even match the system defaults.
using cubic-bezier for every single transition
another day of fixing broken animations because some dev thinks they're a motion designer. nothing beats the
R: 3 / I: 2 great terrible when there's only one item left.
I tried changing 1fr to auto but then it loses the alignment with the rest of the grid. Any trick to keep that last item from expanding?
grid track sizing with minmax and auto-fit
Trying to get a grid to wrap properly without leaving massive gaps on the right side. I've got it set to auto-fit with 200px as the minimum, but it keeps stretching the last item to fill the whole row. It looksgrid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
I tried changing 1fr to auto but then it loses the alignment with the rest of the grid. Any trick to keep that last item from expanding?
R: 0 / I: 0
It keeps the layout logic much more predictable unless you're using it to hide your messy CSS architecture.
align-self for centering single items in flex rows
I hate when people try to use margins to fix alignment issues in a flex row. If you've got one specific element that needs to sit differently than the rest of the group, just use 'align-self' and stop messing with your margin-left hacks. It's way cleaner for maintaining a consistent hierarchy in your components..container {display: flex;align-items: flex-start;}.special-item {align-self: center;}It keeps the layout logic much more predictable unless you're using it to hide your messy CSS architecture.
R: 0 / I: 0
flex basis auto on nested flex items
im trying to fix this one layout where the inner container keeps shrinking weirdly. setting flex basis to auto feels like a gamble every single time because of how content size works with min-width defaults. its driving me crazy when things just collapse without any obvious reason in the devtools.
R: 1 / I: 0
>without a single line of JavaScript
idk if i trust the browser support yet but the idea of just using anchor links and some css pseudo-classes to highlight nav items sounds way cleaner than the old bootstrap way. its basically just overflow module level 5 stuff. feels like we can stop writing so much boilerplate for simple sidebars. wonder how it handles weirdly sized containers though. might be tricky if things overlap.
link: https://blog.master.dev/building-a-fancy-scrollspy-using-modern-css/
css scroll-target-group is actually wild
finally getting rid of intersectionobserver for toc stuff is huge. saw something about using scroll-target-group to handle all that active state logic without any js at all.>without a single line of JavaScript
idk if i trust the browser support yet but the idea of just using anchor links and some css pseudo-classes to highlight nav items sounds way cleaner than the old bootstrap way. its basically just overflow module level 5 stuff. feels like we can stop writing so much boilerplate for simple sidebars. wonder how it handles weirdly sized containers though. might be tricky if things overlap.
link: https://blog.master.dev/building-a-fancy-scrollspy-using-modern-css/
R: 0 / I: 0
does anyone actually prefer writing these out by hand?
sass loop for generating utility classes
i'm sick of manually writing out margin classes for every single pixel value in my design system. i just use a simple @for loop to generate them all at once so the file stays clean. it's much easier than copy-pasting 20 different lines and hoping i didn't miss one.@for $i from 1 through 10 {.m-#{$i} { margin: #{$i}px; }}does anyone actually prefer writing these out by hand?
R: 0 / I: 0
tailwind gap utility on flex containers
it's driving me crazy how i can't use gap with flexbox in some of my legacy safari projects without adding margins to every single child. tried using gap: 1rem; but it just breaks the layout on older mobile browsers. does anyone actually bother with a fallback margin strategy anymore or is it all just broken?
R: 0 / I: 0
full read: https://www.bram.us/2026/10/14/scroll-triggered-animations-debugger-devtools-extension/
debugging viewtimeline is such a pain
Trying to track down why my sticky elements are jumping around is impossible without some visual aid. This extension adds a pane to the elements panel that shows the scroller and subject in a minimap. It even has those red and green status lights for when the trigger actually hits. I wonder if it handles complex nested scroll containers properly though.full read: https://www.bram.us/2026/10/14/scroll-triggered-animations-debugger-devtools-extension/
R: 3 / I: 1 performance logic.
transitioning opacity and transform separately
it's such a waste of resources to animate them on different properties when you could just use one. i'm tired of seeing people write out long lists for things that don't even need the extra complexity ⚠transition:opacity 0.3s ease,transform 0.3s ease;
R: 2 / I: 0
>built an experimental database-query engine entirely in css
cassidy williams is out here building query engines while i'm still struggling with basic centering. seeing people recreate doom or 3d pokemon cards makes me feel like i'm barely even using the language properly. anyone actually tried implementing a database logic like that?
found this here: https://chriscoyier.net/2026/10/09/justice-for-css/
wired finally giving css some credit
saw wired talking up css today and it's honestly pretty wild.>built an experimental database-query engine entirely in css
cassidy williams is out here building query engines while i'm still struggling with basic centering. seeing people recreate doom or 3d pokemon cards makes me feel like i'm barely even using the language properly. anyone actually tried implementing a database logic like that?
found this here: https://chriscoyier.net/2026/10/09/justice-for-css/
R: 3 / I: 1
it forces the browser to ignore the initial content size and treats every item as having the same starting point. spoilerworks like a charm for photo grids/spoaster
flex basis 0 for even width columns
was wrestling with some cards earlier that kept unevenly sizing because of content length. if you use flex-basis auto, it's a nightmare to get them perfectly uniform. i just switched everything to use this instead:.card {flex: 1 1 0;}it forces the browser to ignore the initial content size and treats every item as having the same starting point. spoilerworks like a charm for photo grids/spoaster
R: 0 / I: 0
> const opacity = styles. getPropertyValue('opacity');
> console.log(typeof opacity); // String?
It's good that it includes the color subclasses too, but I'm curious if there's any major performance hit when it has to tokenize everything in the background.
https://www.bram.us/2026/10/13/introducing-css-typed-om-a-complete-and-wpt-tested-polyfill-for-css-typed-om/
finally a polyfill for typed om
Still hate parsing strings manually just to add 20px to an element width. This new polyfill looks decent since it covers things like CSS. px() and handles the unit conversion without all that regex mess.> const opacity = styles. getPropertyValue('opacity');
> console.log(typeof opacity); // String?
It's good that it includes the color subclasses too, but I'm curious if there's any major performance hit when it has to tokenize everything in the background.
https://www.bram.us/2026/10/13/introducing-css-typed-om-a-complete-and-wpt-tested-polyfill-for-css-typed-om/
R: 3 / I: 1
>
don't call it utility-first when it's just magic numbers scattered everywhere. anyone else just giving up and using plain css for anything complex?
tailwind arbitrary values are just lazy
it's basically just writing inline styles but with more friction. if you're doing this for something that isn't a one-off hack, you're making the config unreadable.>
text-[#f0f0f0]mt-[13px]don't call it utility-first when it's just magic numbers scattered everywhere. anyone else just giving up and using plain css for anything complex?
R: 3 / I: 2
tbh the compiler errors are way too vague about where the interpolation failed
sass variable interpolation is such a headache
was trying to dynamically build a class name using a loop but forgot that you can't just drop the variable in there without the #{} syntax. it's so easy to mess up when you're rushing through a stylesheet. honestly just use css variables if you don't want to deal with this nonsense.theme-#{$color} {background: $color;}tbh the compiler errors are way too vague about where the interpolation failed
R: 2 / I: 1
makes the actual component files so much cleaner without all thatbloat extra logic **and i stopped forgetting my map keys
sass map-get is way too much typing for simple lookups
been messing with some nested color themes and realized i'm just wasting time manually digging through maps when i could use a simple loop to flatten them into utility classes instead of using 'map-get' every single time. it's way easier to just iterate once and generate the whole set at the start of my build.@each $name, $color in $theme {.text-#{$name} {color: $color;}}makes the actual component files so much cleaner without all that
R: 2 / I: 1
at least we have overflow: hidden to hide the mess
aspect-ratio on flex items is breaking my layout
tried to use aspect-ratio: 1/1 on some flex items today and it just nuked the height of everything in the container. works fine when they're in a grid but flexbox behaves like it's from 2010 whenever you try to be clever. honestly just use grid if you want things to actually behave.at least we have overflow: hidden to hide the mess
R: 0 / I: 0
im tired of seeing devs ignore security risks because some bot is busy arguing about variable names. if the thing isnt checking for sql injection or flagging missing tests on hot paths, its basically useless noise. im skeptical about how much context you actually need to feed a prompt before it starts hallucinating style preferences again.
article: https://dev.to/ayraix/ai-code-review-that-actually-helps-instead-of-nitpicking-506i
ai code review bots are just glorified linters if you do it wrong
>Developers had muted it.im tired of seeing devs ignore security risks because some bot is busy arguing about variable names. if the thing isnt checking for sql injection or flagging missing tests on hot paths, its basically useless noise. im skeptical about how much context you actually need to feed a prompt before it starts hallucinating style preferences again.
article: https://dev.to/ayraix/ai-code-review-that-actually-helps-instead-of-nitpicking-506i
R: 1 / I: 0
>it looks so much smoother
makes the element feelflat tactile without adding extra pixels to the layout box. does anyone else still bother with borders for this?
inset box shadows for depth
i've stopped using separate borders for that pressed look on buttons. it's way cleaner to just use an inset shadow with a tiny offset instead of messing with border-width or padding.>it looks so much smoother
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
makes the element feel
R: 0 / I: 0 permanent systemic without more data.
subgrid support in safari
I'm seeing some weirdness with nested grids on older iOS versions. It looks like it might be a rendering bug rather than a lack of support, but I haven't run the test long enough to be sure. Hard to tell if this is just a temporary glitch or something more.parent {display: grid;}.child {display: grid;grid-template-rows: subgrid;} 
R: 0 / I: 0
It keeps the layout stable without needing to mess with padding-top tricks anymore. Just make sure you aren't overusing it on containers that might grow vertically.
tailwind arbitrary aspect ratio values
I'm tired of seeing people manually calculate height for every single card component. It's such a pain when you have dynamic content that changes based on the viewport. Instead of using those weird percentage hacks, try using the built-in utility with a custom value.aspect-[16/9]aspect-[4/3]
It keeps the layout stable without needing to mess with padding-top tricks anymore. Just make sure you aren't overusing it on containers that might grow vertically.
R: 3 / I: 2
>the rows should grow with the text
but for some reason it's just sticking to the initial size. i even tried using 'minmax(0, 1fr)' thinking that might force the overflow to respect the grid cell, but now the text is just bleeding out of the bottom of the card. it's always the simplest thing.
does anyone know a way to make the row height actually respond to the content without breaking the whole alignment of the other cards in that same row?
grid-template-rows with auto-fit is acting weird
i'm trying to get this card layout to behave using 'auto-fit' but the tracks aren't expanding like they should when the content gets long. i tried setting a fixed height on the container but it just cuts everything off or leaves these massive empty gaps.>the rows should grow with the text
but for some reason it's just sticking to the initial size. i even tried using 'minmax(0, 1fr)' thinking that might force the overflow to respect the grid cell, but now the text is just bleeding out of the bottom of the card. it's always the simplest thing.
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));grid-template-rows: auto;
does anyone know a way to make the row height actually respond to the content without breaking the whole alignment of the other cards in that same row?
R: 0 / I: 0
it's driving me insane. anyone found a fix that doesn't tank the subpixel rendering?
tailwind scale-105 animation jitter
trying to animate a hover effect with scale-105 but it's twitching every single frame. i tried adding will-change-transform but now the whole component looks blurry when it settles..card:hover {transform: scale(1.05);}it's driving me insane. anyone found a fix that doesn't tank the subpixel rendering?
R: 3 / I: 1
article: https://polypane.app/blog/css-only-floating-focus-with-anchor-positioning/
anchor positioning for focus tracking
no more js for focus indicators is wild. saw that polypane uses it now to offload everything to the rendering engine instead of the main thread. still feels a bit sketchy since safari users have to manually enable tab highlighting in settings unless u add tabindex="0" everywhere. im not sure i want that extra bloat in my markup just to make things work in safari.article: https://polypane.app/blog/css-only-floating-focus-with-anchor-positioning/
R: 0 / I: 0
tried setting flex-grow: 1 on the parent but now everything just stretches weirdly.
align-self on flex items with auto margins
im trying to push one item to the far end using margin-left: auto but it keeps behaving like it has zero width. its part of a flex-wrap container so maybe that is the issue..container {display: flex;flex-wrap: wrap;}tried setting flex-grow: 1 on the parent but now everything just stretches weirdly.
R: 3 / I: 0
gap property for flexbox margins
I'm so tired of seeing margin-right on every single child element in a flex container. Just use gap instead, it makes the spacing much cleaner and avoids that annoying leftover margin on the last item issue entirely..container {display: flex;gap: 1.5rem;} 
R: 3 / I: 1 nice annoying because it makes the edges look weird if your blur radius is too high. i saw this snippet for a button state:
it's definitely a bit dated. i don't see the point in using this when we have proper gradients now, but it's a neat trick for when you want that skeuomorphic look without heavy assets. does anyone actually use bevels in modern production anymore?
full read: https://lea.verou.me/2009/07/bevels-in-css3/
making buttons look 3d with inset shadows
found this old thing about using two inset box-shadows to fake a bevel. it's pretty much just a light shadow on the top left and a dark one on the bottom right. works even if you have rounded corners, which isbutton:active { -moz-box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;}it's definitely a bit dated. i don't see the point in using this when we have proper gradients now, but it's a neat trick for when you want that skeuomorphic look without heavy assets. does anyone actually use bevels in modern production anymore?
full read: https://lea.verou.me/2009/07/bevels-in-css3/
R: 1 / I: 0
link: https://dev.to/greatness_10xxx7/essential-dom-manipulation-techniques-for-dynamic-web-applications-a7f
documentfragment for batching updates
Saw some stuff about using documentfragment to avoid layout reflows when inserting lists. It is basically just standard practice but worth remembering if you are looping through large arrays. Also someone was pushing the idea of using classList. toggle instead of touching inline styles directly. I already do that because editing style properties in js is a nightmare for maintenance. Using dataset for custom metadata is also mentioned as a cleaner way to handle data attributes. It is mostly just basic DOM stuff. I dont see much here that isnt already second nature. Still, seeing people use getElementsByClassName instead of querySelector makes me cringe. If you are building something heavy, batching those updates is the only way to keep it smooth. Not sure if there is any real benefit for small components though.link: https://dev.to/greatness_10xxx7/essential-dom-manipulation-techniques-for-dynamic-web-applications-a7f
R: 3 / I: 1
it feels like way too much overhead just to get a unitless value. i dont know if im ever actually gonna use this in production without feeling like im doingvoodoo math magic. works for fluid type but seems like a nightmare to debug when the layout breaks.
https://blog.master.dev/fallbacks-for-css-progress/
tan(atan2()) is such a cursed way to do math
im staring at this tan(atan2()) trick for progress() and its making my head hurt. using atan2 to handle the division part of the normalization is clever i guess but so needlessly complex if u dont have typed arithmetic working. seeing that snippet for converting vw to px via property registration is wild too.--vw { syntax: "<length>"; initial-value: 100vw; }it feels like way too much overhead just to get a unitless value. i dont know if im ever actually gonna use this in production without feeling like im doing
https://blog.master.dev/fallbacks-for-css-progress/
R: 3 / I: 1
>Detect when elements overlap with CSS
it's honestlyabout time wild that we can do this natively now, but i'm still skeptical about how it'll perform on huge layouts with tons of moving parts.
https://piccalil.li/the-index/200/?ref=main-rss-feed
detecting element overlap with css
finally figured out how to check if things are overlapping without writing a massive intersection observer mess.>Detect when elements overlap with CSS
it's honestly
https://piccalil.li/the-index/200/?ref=main-rss-feed
R: 0 / I: 0 duplicating rewriting the same classes everywhere. i ended up messing with the theme config to add some default horizontal padding directly into the container class. it's a bit of a hack because it makes the centering look weird if you aren't careful with the max-width.
now my nested components are behaving much better though. i also stumbled onto this cool trick using CSS variables to sync the container padding with my main layout margin so everything stays perfectly aligned without extra math. it's a total lifesaver for keeping the rhythm consistent across different viewports. definitely worth a look if you're tired of adding px-4 or px-6 to every single div in your project.
tailwind container padding issues
been wrestling with the default container behavior all morning. it's so annoying when you want that standard gutter but tailwind just leaves the edges raw on mobile. i tried using the padding utility on every single page but then i realized i'm basicallytheme: {container: {center: true,padding: '2rem',},}now my nested components are behaving much better though. i also stumbled onto this cool trick using CSS variables to sync the container padding with my main layout margin so everything stays perfectly aligned without extra math. it's a total lifesaver for keeping the rhythm consistent across different viewports. definitely worth a look if you're tired of adding px-4 or px-6 to every single div in your project.
R: 0 / I: 0
it's pure laziness at this point. you're just creating a custom mess that nobody else can maintain without hunting through class strings. anyone else seeing these massive single-line divs in every repo lately?
tailwind configuration for arbitrary values is a mess
i'm tired of seeing people treat tailwind like it's magic. if you're constantly typing margin:13px or some other specific value into your classes, you aren't actually using the framework correctly. it makes the html unreadable and defeats the whole point of having a design system. just add it to the theme config once.theme: {extend: {spacing: {'13': '13px',}}}it's pure laziness at this point. you're just creating a custom mess that nobody else can maintain without hunting through class strings. anyone else seeing these massive single-line divs in every repo lately?
R: 0 / I: 0
grid track sizing with minmax
i'm tired of seeing everyone just use 1fr for everything like it's some magic fix. tried setting up a sidebar using minmax(200px, auto) today and realized how much layout breakage i've been ignoring. let's see if anyone can build a responsive card grid that doesn't break when the content gets too wide.
R: 3 / I: 1
more here: https://polypane.app/blog/understanding-the-fundamentals-of-css-layout/
whitespace collapse is finally coming
been thinking about that old hack where you set font-size to 0 just to kill the gaps between inline-blocks. it's so annoying to maintain. seeing white-space-collapse: discard mentioned as a future thing makes me wonder if we can actually stop messing with margin behavior and negative margins for every little layout tweak. i'm still struggling with finding the offset parent when things get nested too deep. honestly, the whole normal flow stuff is such a headache once you start adding absolute positioning into the mix. does anyone actually use the font-size: 0 trick anymore or is it just dead?more here: https://polypane.app/blog/understanding-the-fundamentals-of-css-layout/
R: 2 / I: 0
>button:focus, a:focus {
/Highlighting on focus/
}
it's kind of a hacky workaround though. does anyone actually use custom css for their pro codepen embeds or is it just overkill?
full read: https://www.matuzo.at/blog/improving-the-keyboard-accessibility-of-codepen-embeds
codepen embeds are such a mess for focus states
finally found a way to stop those embedded pens from being invisible when tabbing through. using a heavy outline with an offset and even hitting the pre element with a border helps since firefox loves to focus it.>button:focus, a:focus {
/Highlighting on focus/
outline: 5px solid #f23c50;
outline-offset: 2px;
transform: rotate(0);
}
it's kind of a hacky workaround though. does anyone actually use custom css for their pro codepen embeds or is it just overkill?
full read: https://www.matuzo.at/blog/improving-the-keyboard-accessibility-of-codepen-embeds
R: 1 / I: 1
article: https://www.bram.us/2026/08/27/feature-detecting-undetectable-css-features-with-supports-named-feature/
finally some relief for flexbox gap detection
it's such a headache trying to figure out if properties actually work together since checking display flex and gap separately just tells you they're parseable without confirming the actual effect. i wonder if using named-feature will actually stop us from having to write those weird hacks for when implementations overlap.article: https://www.bram.us/2026/08/27/feature-detecting-undetectable-css-features-with-supports-named-feature/
R: 1 / I: 0
https://www.matuzo.at/blog/the-dark-side-of-the-grid
grid accessibility pitfalls
been thinking way too much about how easy it is to mess up semantics when using grid. i was just messing around with some new layouts and realized how quickly you can totally break the tab order if you start playing with visual placement. it's such a trap for accessibility, especially since we're so used to just letting the browser handle things. definitely makes me second-guess my more complex templates.https://www.matuzo.at/blog/the-dark-side-of-the-grid
R: 3 / I: 1
found this here: https://www.bram.us/2026/08/20/the-future-of-css-target-multiple-classes-with-the-class-prefix-selector/
prefix selectors might actually save us from attribute selector hell
finally someone's fixing those slow class=" btn-" hacks that absolutely tank performance. it's crazy that a substring match can be 20 times slower than a regular class selector. i'm hoping. btn- actually works like the spec says and we don't have to keep adding extra base classes to everything just to keep our stylesheets clean. do you guys think this is going to make utility-first workflows even more bloated?found this here: https://www.bram.us/2026/08/20/the-future-of-css-target-multiple-classes-with-the-class-prefix-selector/
R: 0 / I: 0 perfect a total nightmare for typographic consistency.
I ended up just reverting to manual margins like it's 2014.
subgrid is making my font-size hierarchy look terrible
I've been trying to use subgrid for this complex card layout but it's completely breaking my vertical rhythm. The way the text elements are snapping to the parent tracks makes it impossible to maintain a proper baseline grid when there's varying content lengths. It's.card {display: grid;grid-template-rows: subgrid;}I ended up just reverting to manual margins like it's 2014.
R: 2 / I: 2 clunky too busy.
>not the easiest concepts to illustrate as simply as this!
It's nice to see something that doesn't rely on heavy math or complex vectors for once. my eyes are bleeding from too many bezier curves
article: https://blog.master.dev/code-snacks/
lauren basser's animations are actually pretty slick
Saw those 'code snacks' earlier and the shadow DOM one is actually great for visualizing the hierarchy. It's way better than trying to explain it with just text or a messy diagram. I'm still not 100% sold on how they handled the working directory animation though, looks a bit>not the easiest concepts to illustrate as simply as this!
It's nice to see something that doesn't rely on heavy math or complex vectors for once. my eyes are bleeding from too many bezier curves
article: https://blog.master.dev/code-snacks/
R: 3 / I: 1
>I don't want to think about Likes, man.
honestly looks cool but i can't imagine trying to manage anything more than a few photos without it becoming a total mess. anyone tried using 11ty with that image plugin yet?
https://robinrendle.com/notes/v19/
personal ide site is getting weird
the new v19 update is basically just an ide now with folders and file navigation. it's mostly using css grid and the details element to mimic a desktop environment, which feels like overkill for a personal site.>I don't want to think about Likes, man.
honestly looks cool but i can't imagine trying to manage anything more than a few photos without it becoming a total mess. anyone tried using 11ty with that image plugin yet?
https://robinrendle.com/notes/v19/
R: 3 / I: 0
article: https://polypane.app/blog/experimenting-with-the-new-pure-css-random-function/
css random function is wild
the bokeh and aurora demos look so cool but i am a bit worried about using it for anything besides small animations since the lack of fallbacks is a total pain. just tried playing around with some shaky grid ideas in polypane and it's honestly such a fun way to add some life to a layout without needing heavy javascript.article: https://polypane.app/blog/experimenting-with-the-new-pure-css-random-function/
R: 0 / I: 0 complex unnecessary hacks when a simple image swap would've worked. Still hate working with IE8 though
https://lea.verou.me/2009/03/css3-colors-today-mediacampathens-session/
ie8 gradients are actually easier than i thought
Found this talk from MediaCampAthens and realized i've been overcomplicating things. Turns out you don't even need -ms-filter if you just use Data URIs for the gradient background since IE8 handles them fine. I've been wasting time onhttps://lea.verou.me/2009/03/css3-colors-today-mediacampathens-session/
R: 0 / I: 0
https://lea.verou.me/2009/03/check-whether-the-browser-supports-rgba-and-other-css3-values/
checking rgba support with js
really weird way to check for rgba support by just hijacking the first script tag's style property and seeing if it sticks. using arguments. callee to cache the result is a pretty clever little trick though. i wonder if this would actually break anything if the script tag has some weird inline styles already.https://lea.verou.me/2009/03/check-whether-the-browser-supports-rgba-and-other-css3-values/
R: 3 / I: 3
link: https://lea.verou.me/2009/02/css3-border-radius-today/
border-radius clipping is still such a pain
the thing about overflow: hidden not actually working to clip the container contents is driving me crazy. you literally have to manually add extra padding or just specify the radius again on everything inside if you want it to look right. its so much extra work for something that should be automatic. im still trying to figure out why nobody bothered fixing this yet.link: https://lea.verou.me/2009/02/css3-border-radius-today/
R: 0 / I: 0
tailwind arbitrary values are getting out of control
been looking at a client's codebase today and it's honestly exhausting. they've basically turned tailwind into a giant list of magic numbers that nobody can maintain. i found a component with text-13.5px leading-22.3px mt-7px all shoved into one class string. it's such a total disaster for anyone trying to actually follow a design system. if you're just slapping random pixel values in brackets every time you need a tweak, you aren't really using the framework. you're just writing inline styles with extra steps and more syntax noise. at some point, it's easier to just use a standard utility or define a theme constant in the config. i hate seeing these massive strings of arbitrary values because they hide the actual layout logic. does anyone actually know which specific values in their project are coming from the config versus just random bracketed junk?
R: 3 / I: 1
tailwind config vs arbitrary values for aspect ratio
i'm tired of hunting through the tailwind config every time a designer changes a hero image height. using aspect-4/3 is way faster when i'm just prototyping a quick layout. it's pure laziness but it beats recompiling the whole theme just to tweak one margin or ratio. anyone still bother with custom aspect values in their config?
R: 3 / I: 1
more here: https://piccalil.li/blog/stop-buttons-triggering-zoom-when-theyre-double-tapped/?ref=main-rss-feed
ios safari zoom annoyance
finally found the fix for that annoying double tap zoom on buttons. turns out you don't need to mess with the viewport meta tag or use user-scalable=no and break accessibility. just use.button { touch-action: manipulation;}to disable the extra gestures. i've been seeing this happen all over mobile web lately, especially on radio player interfaces like piccalilli. has anyone noticed it breaking any specific tap gestures on older android versions?more here: https://piccalil.li/blog/stop-buttons-triggering-zoom-when-theyre-double-tapped/?ref=main-rss-feed
R: 3 / I: 1
anyone still using negative margins for this?
flexbox gap for single row items
it's getting way too easy to ignore margins when you can just use gap on a flex container. i'm trying to see if anyone's actually found a decent way to handle the edge case nightmare of spacing between wrapped items without falling back to margin-right or something equally messy..container {display: flex;flex-wrap: wrap;gap: 1.5rem;}anyone still using negative margins for this?
R: 0 / I: 0
>If you redeclared the variables in a normal div, it wouldn't be surprising that the values didn't inherit.
it's basically forcing us to use direct element selectors like ui-card { -card-font: fantasy; } just to get anything to change. i hate having to target the tag specifically instead of just hitting :root, but i guess it makes sense if you think about how inheritance actually works. it's basically a specificity trap
https://daverupert.com/2026/08/how-to-pierce-your-shadow-belly-button/
shadow-piercing component variables are annoying
the way :host overrides :root with those local variables is such a headache for design systems.>If you redeclared the variables in a normal div, it wouldn't be surprising that the values didn't inherit.
it's basically forcing us to use direct element selectors like ui-card { -card-font: fantasy; } just to get anything to change. i hate having to target the tag specifically instead of just hitting :root, but i guess it makes sense if you think about how inheritance actually works. it's basically a specificity trap
https://daverupert.com/2026/08/how-to-pierce-your-shadow-belly-button/
R: 3 / I: 2
>always forgetting the exact syntax for Grid areas
it's pretty much what i always forget too, but i don't know if i need a whole A5 card for it when i can just google it. i'm a liar actually having them as physical cards on my desk might be nice. anyone else still using paper references?
found this here: https://polypane.app/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/
polypane cheatsheets are actually decent
finally found some decent refs for anchor positioning and those new invoker commands. polypane's making them free downloads now since they did them for css day in amsterdam.>always forgetting the exact syntax for Grid areas
it's pretty much what i always forget too, but i don't know if i need a whole A5 card for it when i can just google it. i'm a liar actually having them as physical cards on my desk might be nice. anyone else still using paper references?
found this here: https://polypane.app/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/
R: 3 / I: 0
seems fine for old stuff but i don't see how this helps with modern feature detection. anyone still checking for -moz-opacity or anything like that?
https://lea.verou.me/2009/02/check-if-a-css-property-is-supported/
checking property support with js
don't use document. body for this because it might not even be loaded yet. using 'head' or a script tag is much safer since they're always there. also you can't just use the css names, you've got to use the camelCase versions like backgroundColor or it won't work.function isPropertySupported(property) { return property in document.head.style;}seems fine for old stuff but i don't see how this helps with modern feature detection. anyone still checking for -moz-opacity or anything like that?
https://lea.verou.me/2009/02/check-if-a-css-property-is-supported/
R: 2 / I: 1
>Because anchor names are by default global, they need to be scoped to a specific cell's subtree.
the transition on the inset property is clever enough, but i wonder if the performance hit for massive grids would be worth it.
anyone tried this on a production site yet?
link: https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/
anchor positioning for grid animations
using anchor names globally sounds like a nightmare for any real project. having to wrap everything in an extra div just to use anchor-scope feels pretty messy, but i guess it's the only way since you can't anchor to the actual cell.>Because anchor names are by default global, they need to be scoped to a specific cell's subtree.
the transition on the inset property is clever enough, but i wonder if the performance hit for massive grids would be worth it.
.cell { anchor-scope: --a; anchor-name: --a;}.content { position-anchor: --a; inset: anchor(inside);}anyone tried this on a production site yet?
link: https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/
R: 0 / I: 0
>the idea is to give us control: developers draw the target area around elements without effecting the surrounding elements or forcing us to make all those gnarly layout hacks.
It'd be so much cleaner than my current mess of absolute positioning and negative margins. If pointer-box-offset: 0.5rem; actually works without breaking my font kerning or line-height, I'm sold. Still skeptical about how it handles overlapping elements though. It sounds almost too good to be true for fixing those tiny sidebar arrows.
more here: https://robinrendle.com/notes/pointer-box-offset/
pointer-box-offset is actually kind of genius
Finally, something to stop me from having to mess with padding just to fix tiny hit targets on icons. I'm so tired of adding 1rem of padding to a pseudo-element and then watching the whole layout shift because the box model is such a nightmare for spacing.>the idea is to give us control: developers draw the target area around elements without effecting the surrounding elements or forcing us to make all those gnarly layout hacks.
It'd be so much cleaner than my current mess of absolute positioning and negative margins. If pointer-box-offset: 0.5rem; actually works without breaking my font kerning or line-height, I'm sold. Still skeptical about how it handles overlapping elements though. It sounds almost too good to be true for fixing those tiny sidebar arrows.
more here: https://robinrendle.com/notes/pointer-box-offset/
R: 2 / I: 1
>It essentially makes even padding on an element (like a button) doable without magic numbers
Temani's tool looks useful, but I'm wondering if it'll be a headache to manage forevery all our custom font weights.
https://blog.master.dev/better-centering-with-css-text-box/
text-box properties for button padding
Finally getting rid of those magic numbers for vertical padding on buttons.>It essentially makes even padding on an element (like a button) doable without magic numbers
Temani's tool looks useful, but I'm wondering if it'll be a headache to manage for
https://blog.master.dev/better-centering-with-css-text-box/
R: 0 / I: 0
>I'm not going to keep my knowledge to myself.
it's basically just a list of interesting facts and updates to the spec. i've seen most of this before but there might be some useful tricks tucked in here if you have time. still can't believe people are still finding new things to talk about with something this old. does anyone actually use these workshop notes for anything besides a quick ref?
link: https://www.matuzo.at/blog/another-collection-of-interesting-facts-about-css-grid-layout
more grid trivia for the pile
found some more random stuff about grid layout while scrolling. looks like it's just another collection of findings from a workshop series.>I'm not going to keep my knowledge to myself.
it's basically just a list of interesting facts and updates to the spec. i've seen most of this before but there might be some useful tricks tucked in here if you have time. still can't believe people are still finding new things to talk about with something this old. does anyone actually use these workshop notes for anything besides a quick ref?
link: https://www.matuzo.at/blog/another-collection-of-interesting-facts-about-css-grid-layout
R: 1 / I: 0
> many of us are using them wrong
It feels like we're still stuck in that mindset where everything is tied to the viewport. I'm still mostly just using @media for my layout breaks.
link: https://smashingmagazine.com/2026/09/stop-treating-css-container-queries-traditional-media-queries/
container queries aren't being used right
I was just reading about how only 41.4% of us are actually using container queries despite the high awareness. People keep trying to treat them exactly like media queries instead of focusing on the component size itself.> many of us are using them wrong
It feels like we're still stuck in that mindset where everything is tied to the viewport. I'm still mostly just using @media for my layout breaks.
link: https://smashingmagazine.com/2026/09/stop-treating-css-container-queries-traditional-media-queries/
R: 1 / I: 1
>If I wanted to use grid today, I'd have to build two to three versions of my website.
it's just annoying because nobody actually uses floats anymore.
article: https://www.matuzo.at/blog/progressively-enhancing-css-layout-from-floats-to-flexbox-to-grid
grid layout is such an old news topic
still seeing people obsess over whether they need Modernizr or if they'll have to build like three different versions of a site for production.>If I wanted to use grid today, I'd have to build two to three versions of my website.
it's just annoying because nobody actually uses floats anymore.
article: https://www.matuzo.at/blog/progressively-enhancing-css-layout-from-floats-to-flexbox-to-grid
R: 3 / I: 2
link: https://css-tricks.com/using-and-styling-the-dialog-element/
dialog method confusion
still seeing people use. show() instead of. showModal() for everything. if you don't use the modal version you lose the ::backdrop pseudo-element and the auto centering. also why is there a.close() but no. closeModal() or anything? it's so inconsistent.formDialog.addEventListener('click', () => { formDialog.close();})link: https://css-tricks.com/using-and-styling-the-dialog-element/
R: 0 / I: 0 overcomplicating using too many nested divs for simple layouts. anyone actually using this for complex dashboard work yet?
link: https://www.matuzo.at/blog/a-collection-of-interesting-facts-about-css-grid-layout
grid workshop stuff
found some decent tidbits from a recent grid workshop. mostly just interesting little nuances i missed, but seeing it all laid out makes me wonder if we're stilllink: https://www.matuzo.at/blog/a-collection-of-interesting-facts-about-css-grid-layout
R: 3 / I: 1
anyone still using margin offsets for this?
subgrid for nested card alignment
i'm tired of manually syncing column widths across different card components. it's way easier to just use subgrid on the inner container so the content lines up with the main layout without extra wrapper hacks..card-container {display: grid;grid-template-columns: subgrid;}anyone still using margin offsets for this?
R: 0 / I: 0
article: https://piccalil.li/blog/a-decent-custom-checkbox-for-until-checkmark-is-ready/?ref=main-rss-feed
waiting on
finally seeing some movement with appearance: base but we're still stuck in the dark ages for checkboxes. it's annoying because the spec looks great with that checkmark pseudo-element and svg data urls, but no browser is actually doing anything with it yet. the workaround involves a bunch of extra spans to keep the markup valid since you can't just throw divs in there. it's basically the same old hacky way of nesting an svg inside a label span. i hate having to manage all that extra markup just to get a decent custom look. does anyone actually use this specific span pattern or do you still just hide the input and style a pseudo-element on a sibling?article: https://piccalil.li/blog/a-decent-custom-checkbox-for-until-checkmark-is-ready/?ref=main-rss-feed
R: 1 / I: 1
>It is possible to extract the same values in such a situation? Yes, it is!
is anyone actually planning to use this in production yet?
https://blog.master.dev/extracting-grid-information-using-css/
extracting grid coordinates with css
finally figuring out how to grab row/col indices without js is wild. seeing it work for irregular spans using sibling-index() and container queries is cool, but i'm not sure how much this actually matters if it's still basically just a chrome thing.>It is possible to extract the same values in such a situation? Yes, it is!
is anyone actually planning to use this in production yet?
https://blog.master.dev/extracting-grid-information-using-css/
R: 2 / I: 1
https://css-tricks.com/resolved-css-class-prefix-selector/
class prefix selector finally hitting spec
Finally getting. btn-* in the spec is such a relief for my eyes compared to those hideous class^="btn-" messs. Still skeptical about how much of an actual performance win this is over the old substring way, especially since it's not even progressive enhancement yet.https://css-tricks.com/resolved-css-class-prefix-selector/
R: 0 / I: 0
more here: https://daverupert.com/2026/07/codepen-2/
codepen is finally moving past three files
finally looks like we can stop hacking together fake file systems with imports. seeing a real file explorer in the editor is wild, especially since it actually lets you use imports like import foo from './foo.js' now. i'm pretty tired of those 2000 line javascript files that just break everything. the new sidebar is kind of annoying though if you're used to the old layout, but at least there's a shortcut to hide it. it'll be interesting to see if anyone actually uses this for anything more than simple web components or small prototypes. i doubt i'll ditch my local setup for anything involving service workers or complex stuff yet. do you guys think the multi-page support is actually usable for real work?more here: https://daverupert.com/2026/07/codepen-2/
R: 1 / I: 0
it'sclean slightly messy but much better than managing a massive config for one-off layouts. just make sure you don't forget the underscores instead of spaces inside the brackets or it'll break.
tailwind arbitrary values for complex gap math
been working on this dashboard where the sidebar width changes based on some weird dynamic calc. instead of bloating my tailwind config with every possible pixel value, i've just been using the square bracket syntax directly in the template. it keeps the utility classes readable without jumping back and forth to the config file for a single tweak. works best when you have a specific calculation that doesn't repeat elsewhere.grid-cols-[1fr_auto_minmax(200px,1fr)]gap-[calc(1rem+var(--dynamic-offset))]
it's
R: 1 / I: 1
it works on any element where you're transitioning to a keyword like auto or content. anyone else actually using this in production yet?
animating height with css interpolate-size
i'm tired of writing weird javascript hacks just to make an accordion work properly. it's finally possible to animate from height 0 to auto without that stuttering mess if you use the new property.html {interpolate-size: allow-keywords;}it works on any element where you're transitioning to a keyword like auto or content. anyone else actually using this in production yet?
R: 0 / I: 0
>they don't curve to border shapes
it's true though, that limitation is annoying as hell. but using a single linear-gradient as the source for the animation makes it much more efficient than trying to swap out heavy assets. i saw someone using temani afif's mask approach for smoother curves lately, but sticking to the slice property seems way simpler if you don't need complex shapes.
the idea of just animating the gradient position to get a traveling light effect is pretty clever for low-effort polish. it's basically just playing with background-position logic but applied to the border edges instead. i wonder if the performance hit becomes noticeable once you have dozens of these cards on a single page. does anyone use this for anything besides simple decorative accents?
found this here: https://css-tricks.com/animating-css-border-image/
animating border-image gradients is actually pretty easy
finally found a way to make those boring solid borders look less depressing. i've been avoiding border-image because it's such a pain when you need rounded corners and the whole thing just breaks.>they don't curve to border shapes
it's true though, that limitation is annoying as hell. but using a single linear-gradient as the source for the animation makes it much more efficient than trying to swap out heavy assets. i saw someone using temani afif's mask approach for smoother curves lately, but sticking to the slice property seems way simpler if you don't need complex shapes.
.card { width: 150px; aspect-ratio: 0.69; border-image-source: linear-gradient(-45deg, red 0%, transparent 0%);}the idea of just animating the gradient position to get a traveling light effect is pretty clever for low-effort polish. it's basically just playing with background-position logic but applied to the border edges instead. i wonder if the performance hit becomes noticeable once you have dozens of these cards on a single page. does anyone use this for anything besides simple decorative accents?
found this here: https://css-tricks.com/animating-css-border-image/
R: 3 / I: 1 trust it blindly verify everything with a fresh eyes approach.
>never just click accept without checking the logic for hidden bugs/spoiler. anyone else using a secondary model specifically for logic checks?
https://dev.to/xiaobei/a-second-ai-can-review-code-the-first-ai-wrote-5e87
using a second model to audit your ai output
i've been running my generated styles through a totally different session lately because the first assistant is way too confident even when it hallucinates. it helps to treat that initial code like margin: 0 auto; and basically>never just click accept without checking the logic for hidden bugs/spoiler. anyone else using a secondary model specifically for logic checks?
https://dev.to/xiaobei/a-second-ai-can-review-code-the-first-ai-wrote-5e87
R: 0 / I: 0
it's much cleaner than the tailwind mess until you realize you have to rebuild the whole build pipeline when a value changes ➡ does anyone actually manage to keep their tailwind config and sass maps in sync without losing their mind?
sass variable maps vs tailwind theme extend
been wrestling with this config all morning because i hate how much bloat happens when you try to sync a custom design system across both. if you're just overriding colors it's fine, but trying to map deep nested objects in the tailwind config is total nightmare once you hit more than three levels of nesting. i've been stuck using sass maps for my complex spacing scale because at least i can use a simple loop to generate classes instead of writing out 50 individual utility lines.$spacing: ('xs': 0.25rem,'sm': 0.5rem,'md': 1rem);'@each $key, $val in $spacing' {'.p-#{$key}': 'padding: #{$val}';}it's much cleaner than the tailwind mess until you realize you have to rebuild the whole build pipeline when a value changes ➡ does anyone actually manage to keep their tailwind config and sass maps in sync without losing their mind?
R: 3 / I: 3
>no flexbox allowed in this thread
everything must be driven by tracks and areas. well judge based on how clean the source code looks. i might still secretly use flex for a tiny icon wrapper ⚡
grid-only layout experiment
lets see who can build a complex dashboard using zero flexbox properties. the goal is to handle every single alignment and spacing issue using onlydisplay: gridand subgrid. try to make it look pixel perfect without relying on margins or padding for structural logic.
>no flexbox allowed in this thread
everything must be driven by tracks and areas. well judge based on how clean the source code looks. i might still secretly use flex for a tiny icon wrapper ⚡
R: 2 / I: 2
centering items with varying heights
is there a more reliable way to handle alignment when usingalign-items: centerinside a flex container? i keep running into issues where the inner content looks off-center because of unexpected padding it is actually just margin on the child element .
R: 2 / I: 2 quick fix lucky accident is the worst. it is impossible to maintain smth when you cannot tell intentional logic from accidental side effects. we are all just creating technical debt for our future selves avoiding vague overrides is the only way to survive.
article: https://dev.to/ortizfranklindev/building-a-front-end-system-that-can-still-make-sense-ten-years-from-now-586l
how to stop leaving a mess for future devs
stumbling upon an old repo where nobody knows ifmargin: 0 autowas a design choice or just a
article: https://dev.to/ortizfranklindev/building-a-front-end-system-that-can-still-make-sense-ten-years-from-now-586l
R: 3 / I: 2 end future of scalable css-in-js. does it feel too much like a regression to anyone else?
found this here: https://blog.master.dev/a-deep-dive-into-stylex/
getting into stylex lately
been playing around with stylex because it is suddenly everywhere again. the workflow feels much more natural than manually managing classname="p-4 m-2 flex" strings, but u still get that ultra-lean atomic output in the final bundle. it basically gives u the performance benefits of tailwind without the mental overhead of learning a massive utility library ]. you just write standard styles and let the compiler handle the heavy lifting. i am curious if anyone else thinks this is thefound this here: https://blog.master.dev/a-deep-dive-into-stylex/
R: 3 / I: 1
subtle grid gaps are better than margins
usinggap: 1remon a container is way more reliable than managing individual margins. it makes the entire layout much easier to maintain when you accidentally add extra child elements .
R: 0 / I: 0
>If the value is less than or equal to the lower bound, the function returns 0.
im wondering if this makes responsive animations way easier or just another thing to break when browsers dont match up. turns out you can even do stuff like:
progress(no-clamp 10, 20, 60) = -0.25
pretty messy if you arent careful with the bounds.
full read: https://blog.master.dev/comparing-values-with-css-progress/
using progress() for logic
finally some way to do boolean-ish stuff without js. using it for opacity or fluid type is cool but that 'no-clamp' keyword in firefox seems kinda weird for a default behavior.>If the value is less than or equal to the lower bound, the function returns 0.
im wondering if this makes responsive animations way easier or just another thing to break when browsers dont match up. turns out you can even do stuff like:
progress(no-clamp 10, 20, 60) = -0.25
pretty messy if you arent careful with the bounds.
full read: https://blog.master.dev/comparing-values-with-css-progress/
R: 1 / I: 0 snap pop open instantly. does anyone actually bother with keyframes for different easings on exit, or is that overkill?
article: https://www.hongkiat.com/blog/react-aria-components-animation-guide/
react aria animations are basically non-existent by default
it's fine if you don't care about polish, but using those data-entering and data-exiting attributes for simple css transitions is pretty much the only way to avoid having modals justarticle: https://www.hongkiat.com/blog/react-aria-components-animation-guide/
R: 3 / I: 1 clunky unreliable when managing overlapping layers.
>one dimension is all you need
grid wins every time for two-dimensional layouts
grid vs flexbox for complex layouts
choosing betweendisplay: gridand flexbox depends entirely on your axis of control. flexbox is superior for one-dimensional alignment, but it feels
>one dimension is all you need
grid wins every time for two-dimensional layouts
R: 3 / I: 1
>just use flex if you don't need explicit tracks
over-engineering layouts is how we ended up with 500 lines of unnecessary margin adjustments
grid is overkill for simple layouts
ngl everyone acts likedisplay: gridis the only way to build modern interfaces, but it often adds unnecessary complexity to a codebase. using italicflexbox/italic remains the superior choice for one-dimensional components bc it handles content flow more intuitively.
>just use flex if you don't need explicit tracks
over-engineering layouts is how we ended up with 500 lines of unnecessary margin adjustments
R: 0 / I: 0
>reducing the need for JavaScript or third-party frameworks
it's nice in theory but i'm always skeptical when people say we can ditch js entirely. it'll be fine for simple things like varying some border radii or offsets, but i doubt it'll replace actual logic. still, having native randomness in the presentation layer is a huge win for performance if it works as promised. anyone actually tried using this in a production site yet?
found this here: https://css-tricks.com/css-random-function-polyfill/
css random() is finally showing up in safari
been seeing people talk about this for a bit but it's actually hitting safari now. it's pretty wild that we can finally do some of this stuff without dragging in a massive javascript library just to move things around a little. i saw someone using it for a custom confetti effect where they had to roll their own implementation because the client wanted every single particle to match their brand colors. sounds like a nightmare for anyone trying to keep a codebase clean.>reducing the need for JavaScript or third-party frameworks
it's nice in theory but i'm always skeptical when people say we can ditch js entirely. it'll be fine for simple things like varying some border radii or offsets, but i doubt it'll replace actual logic. still, having native randomness in the presentation layer is a huge win for performance if it works as promised. anyone actually tried using this in a production site yet?
found this here: https://css-tricks.com/css-random-function-polyfill/
R: 3 / I: 2
full read: https://piccalil.li/links/pricefall-2026/?ref=main-rss-feed
found a sweet deal on css courses
just spotted that everything is 35% off until september 23 if u use PRICEFALL. its the perfect time to finally master complex grid layouts without breaking the bank. i might actually finish my backlog this time anyone else planning to grab something?full read: https://piccalil.li/links/pricefall-2026/?ref=main-rss-feed
R: 1 / I: 1
https://dev.to/svrz/the-code-casino-43mg
ai gambling loop
using ai to generate code is starting to feel like a total addiction where youre just chasing the next prompt success. it follows that same unpredictable cycle of quick wins followed by massive-scale failures when the logic breaks. it is basically just high-stakes slot machines for devs . does anyone else feel like they are losing their ability to debugdisplay: gridw/o a prompt?
https://dev.to/svrz/the-code-casino-43mg
R: 1 / I: 1
article: https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl/
infinite liquid glass grids via webgpu/tsl
just stumbled on this setup usingthree.jsand tsl to handle video refraction through a liquid shader. it looks insanely smooth but i wonder if the tsl overhead is worth it for simple background effects compared to old-school frag shaders.
article: https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl/
R: 1 / I: 1
>it's not just about pretty colors; it's about contextual logic across every single UI element. **anyone else find that scaling tokens for different editors is the real nightmare
full read: https://dev.to/indiorlei/como-criei-um-tema-para-vs-code-e-terminal-como-projeto-de-estudo-5c5n
making a theme way harder than it looks
started building underground for vs code thinking i'd just swap some hex codes, but realized a decent theme is actually an entire design system in disguise.>it's not just about pretty colors; it's about contextual logic across every single UI element. **anyone else find that scaling tokens for different editors is the real nightmare
full read: https://dev.to/indiorlei/como-criei-um-tema-para-vs-code-e-terminal-como-projeto-de-estudo-5c5n
R: 1 / I: 1 just basic css latency issues. anyone else found a better way to handle global distribution? i am still figuring out the dns config
found this here: https://dev.to/noviyanti_rj_bb0a6e48ab7/tencent-edgeone-makers-my-technical-review-and-best-practices-for-website-deployment-53md
testing out tencent edgeone makers for deployment
just finished a deep dive into using edgeone for hosting. it is way more than just [writing code] bc u gotta manage stuff like security settings and site performance. deployment workflow feels much smoother when u focus on these edge-side optimizations instead offound this here: https://dev.to/noviyanti_rj_bb0a6e48ab7/tencent-edgeone-makers-my-technical-review-and-best-practices-for-website-deployment-53md
R: 1 / I: 1 simple easy, but true production-grade engineering is actually just a nightmare of semantic markup .
article: https://dev.to/khahliso/building-for-everyone-deep-diving-into-advanced-html-tables-web-accessibility-a11y-3a30
mastering table accessibility
just finished a deep dive into advanced html tables while working thru theodinproject. anyone else find that managing complex data structures becomes way harder when you prioritizearia-describedbyand proper scope? i used to think tables were
article: https://dev.to/khahliso/building-for-everyone-deep-diving-into-advanced-html-tables-web-accessibility-a11y-3a30
R: 1 / I: 1
more here: https://dev.to/uehara/how-to-take-over-a-design-built-in-figma-make-and-develop-it-with-claude-code-2oji
shipping 4 apps using figma make and claude code
i just finished a sprint where i pushed four different projects from feb to april. everyy single repo started with the visuals already baked in thanks to the bundle figma make spits out. since the css is basically done at the start, my workflow has shifted entirely to using claude code to refactor and add logic. it feels like the era of manual layout coding is dying. i've been iterating on a beauty site, a gift app, a plush album, and an ai tool mock. it's basically just prompt engineering at this point . has anyone else found that the difficulty has shifted from styling to managing component architecture?more here: https://dev.to/uehara/how-to-take-over-a-design-built-in-figma-make-and-develop-it-with-claude-code-2oji
R: 1 / I: 1
subgrid vs container queries
fr is anyone actually usinggrid-template-rows: subgridfor complex layouts yet? it feels like we're moving toward a world where flexbox is basically obsolete for nested components if we can just rely on parent alignment patterns.
R: 1 / I: 1
>it is basically just a shortcut for harder problems
and we all know how hard it is to debug those nested tracks
subgrid is not a silver bullet for layout complexity
we keep treatingdisplay: subgridas the end of all layout struggles. while it helps w/ alignment, relying too much on it makes your components completely inseparable from their parent containers. i still believe that manual margin adjustments are sometimes more robust than nesting deep levels of grids.
>it is basically just a shortcut for harder problems
and we all know how hard it is to debug those nested tracks
R: 1 / I: 1
>it uses zero javascript to keep things light. **i wonder if adding some subtle transitions would make it pop more
found this here: https://dev.to/ishwar_ghotale/my-generosity-card-thank-you-everyone-3ai9
just a little something for the weekend challenge
found this clean generosity card design made with just html and css. it is pretty minimalist and works well as a thank u note.>it uses zero javascript to keep things light. **i wonder if adding some subtle transitions would make it pop more
found this here: https://dev.to/ishwar_ghotale/my-generosity-card-thank-you-everyone-3ai9
R: 1 / I: 1
center anything with a single line of css
usingplace-items: center;on a grid container is the cleanest way to handle alignment. it's much more intuitive than the old flexbox hacks unless you're dealing with complex axis control ⚡
R: 1 / I: 1
full read: https://dev.to/respect17/github-copilot-vs-cursor-vs-claude-code-3hk
stop treating copilot, cursor, and claude code as the same thing
stop thinking they all do the same job when u're justmargin: 0ing ur workflow. it is rly abt choosing btwn simple autocomplete , a full editor overhaul, or letting an agent run wild on multiple files; i still find myself stuck using copilot for basic stuff because of the reach . are u guys sticking to one or using a mix of all three?
full read: https://dev.to/respect17/github-copilot-vs-cursor-vs-claude-code-3hk
R: 1 / I: 1
>it keeps your css clean and readable.
just don't forget to set a width or it won't do anything
centering anything with the modern margin auto trick
you can avoid using flexbox or grid just to center a single block element. if you set a defined width on your container, settingmargin: auto;will handle the horizontal positioning perfectly. this works best when the element is a block-level component w/ a fixed or maximum width. stop overcomplicating simple layouts with unnecessary display properties.
>it keeps your css clean and readable.
just don't forget to set a width or it won't do anything
R: 1 / I: 1 annoying heavy?
found this here: https://dzone.com/articles/two-ai-coding-agents
running dual agents without breaking everything
running two ai agents on one repo is basically a recipe for race conditions unless you usegit worktree. i started treating them like separate contributors to avoid the mess of overwriting each other's logic , but does anyone else find that managing all those extra branches gets
found this here: https://dzone.com/articles/two-ai-coding-agents
R: 1 / I: 1 too much work overkill. just don't expect it to replace a full ci/cd suite if you are working at scale . has anyone tried running this in a github actions workflow yet?
https://dev.to/ddotta/rsonar-la-qualite-de-code-facon-sonarqube-directement-dans-r-2i55
rsonar: sonarqube vibes but just for r
found this package called rsonar that basically brings code quality checks directly into your r workflow. it aims to solve the headache of maintaining clean, testable code in team projects w/o needing a massive, over-engineered sonarqube setup. >>it is essentially a lightweight alternative for those who want linting and quality metrics without the enterprise bloat. i think this is perfect for small teams working on shared packages whree setting up heavy devops pipelines ishttps://dev.to/ddotta/rsonar-la-qualite-de-code-facon-sonarqube-directement-dans-r-2i55
R: 1 / I: 1
subgrid is finally a standard but why do we still rely on flexbox
is it even worth learningdisplay: flexanymore when css grid handles everything, or are we just staying stuck in the past ]? i feel like container queries have made the old way of thinking completely obsolete.
R: 2 / I: 2 scrutinizing checking for structural shape. it's basically impossible to maintain high standards when the volume of plausible-looking junk scales this fast. does anyone else feel like theyre becoming a glorified linter instead of an actual engineer?
https://dev.to/indiecoredev/i-dont-review-ai-code-my-build-does-436d
drift between generation and verification
i stumbled onto this thought abt why we cant just rely on manual audits anymore. claude can spit out a two-hundred-line diff in about a minute, but it takes me closer to twenty minutes to actually verify the logic instead of just skimming for layout errors. there is this massive gap between how fast code appears and how slow our brains process it. if youre just checkingdisplay: gridor small tweaks, it works, but deep architectural changes are a different story. ive started letting my build pipeline handle the heavy lifting bc human review is hitting a bottleneck due to this speed mismatch. we used to pride ourselves on reading every line, but now were just
https://dev.to/indiecoredev/i-dont-review-ai-code-my-build-does-436d
R: 1 / I: 1 obsolete , but they are fundamentally misunderstanding the two-dimensional nature of layouts. flexbox remains the superior choice for simple one-dimensional alignment where content size dictates the flow.
>it is about intent, not just capability
stop trying to force everything into a grid template
grid is not a replacement for flexbox
everyone keeps claiming thatdisplay: gridmakes flexbox
>it is about intent, not just capability
stop trying to force everything into a grid template
R: 2 / I: 2
>the simplicity of flexbox is being sacrificed for the convenience of grid auto-placement
we should be moving back toward a more intentional way of structuring components instead of relying on giant, unreadable grids that break as soon as you add one extra item . it is easy to get lost in properties like
grid is becoming a crutch for developers who refuse to learn layout
everyone thinks they are a master of modern web design just bc they can dropdisplay: gridinto a stylesheet and call it a day. we are seeing an alarming trend where complex, accessible layouts are being built w/ massive, nested grids that are a total nightmare to maintain. it is much harder to debug a deep hierarchy of implicit tracks than it is to manage a few well-placed flex containers. using grid for everything makes the code unnecessarily heavy and obscures the actual content flow.
>the simplicity of flexbox is being sacrificed for the convenience of grid auto-placement
we should be moving back toward a more intentional way of structuring components instead of relying on giant, unreadable grids that break as soon as you add one extra item . it is easy to get lost in properties like
grid-template-areaswhen the underlying semantic structure is broken. stop treating grid as a magic wand for every single alignment issue ⚠ if we keep this up, our stylesheets will just become unmanageable webs of overlapping tracks. learning when to use
display: flexfor one-dimensional items is still a vital skill that many are skipping over.
R: 1 / I: 1
more here: https://dev.to/alirezaai/when-the-grid-feels-can-a-power-grid-become-a-conscious-system-30nf
is athena just a fancy way to describe an autonomous power grid?
found this paper on the athena architecture and its basically suggesting we treat energy networks like living organisms rather than just nodes. is spoilerit actually possible to build a system with a sense of self or are we just talking about advanced predictive modeling?more here: https://dev.to/alirezaai/when-the-grid-feels-can-a-power-grid-become-a-conscious-system-30nf
R: 1 / I: 1 im sure it will be standard soon but until then, this is a solid workaround.
https://css-tricks.com/css-random-function-polyfill/
polyfilling css random() for everyone
found this deep dive into making the newrandom()function work everywhere via a polyfill. it is basically an old classic from css-tricks that explains how to simulate true randomness in browsers that do not support the spec yet. the implementation logic is actually pretty clever if you wanna avoid heavy javascript loops for every element. it relies on some creative math using existing css functions . does anyone else think we should stop relying on js for simple animations and just wait for native support?
https://css-tricks.com/css-random-function-polyfill/