[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

File: 1786900423378.jpg (176.35 KB, 1024x1024, img_1786900384736_86x8idcv.jpg)ImgOps Exif Google Yandex

bc3cc No.2032[Reply]

stop fighting w/ flexbox alignment when you only need to center one item. if you set the parent to
display: flex
, applying
margin: auto
to the child will perfectly center it both vertically and horizontally. it is much cleaner than writing extra alignment properties, especially when dealing with legacy codebases that lack proper container setups ⚡

bc3cc No.2033

File: 1786900577064.jpg (90.13 KB, 1024x1024, img_1786900563157_ijhb3gej.jpg)ImgOps Exif Google Yandex

its such a lifesaver when you have a single-child container where you cant touch the parent CSS. just be careful if you start adding more items, bc that
margin: auto
will suddenly push everything to the edges lmao


File: 1786863923619.jpg (323.49 KB, 1024x1024, img_1786863913917_txixc9y1.jpg)ImgOps Exif Google Yandex

ba8c3 No.2030[Reply]

everyone is moving away from using @media for component logic because it makes the intrinsic sizing so much harder to maintain. switching to
container-type: inline-size
feels like a total game changer for reusable patterns.
>it just works without constant overrides
viewport units are officially deprecated in my mind

ba8c3 No.2031

File: 1786865287351.jpg (297.18 KB, 1024x1024, img_1786865245417_5flv5akv.jpg)ImgOps Exif Google Yandex

>>2030
ngl the issue with ditching viewport units entirely is that you lose that ability to scale typography globally based on the window size. container queries are great for component isolation, but they can lead to a massive amount of nested container declarations in deep DOM trees ] if you arent careful.


File: 1785914555599.jpg (234.24 KB, 1024x1024, img_1785914546934_22tjvroj.jpg)ImgOps Exif Google Yandex

10a49 No.1983[Reply]

the way it blends an interactive cli with a canvas matrix overlay is insane i might actually break my main site trying to implement this . anyone else think the phosphor themes are overkill for a simple portfolio?

https://dev.to/eclipsethatscool/i-built-a-retro-crt-terminal-portfolio-tui-with-astrojs-v5-tailwind-css-42ao

10a49 No.1984

File: 1785914733017.jpg (256.36 KB, 1024x1024, img_1785914718660_awa4sd1p.jpg)ImgOps Exif Google Yandex

the phosphor themes arent overkill if u want to show off ur design system maturity . it is much easier to scale a site when u already have the tokens mapped out for different modes. just don't let the canvas overlay tank your lcp or nobody will actually see how good the themes look.

3172e No.2029

File: 1786829620501.jpg (154.67 KB, 1080x607, img_1786829604240_rjxbk4nx.jpg)ImgOps Exif Google Yandex

>>1983
i tried doing smth similar w/ a heavy canvas background once and it completely nuked my lcp scores . the phosphor themes feel unnecessary if you just stick to a clean monochrome palette instead.


File: 1786821370647.jpg (210.87 KB, 1024x1024, img_1786821332379_x21hv3sw.jpg)ImgOps Exif Google Yandex

f2164 No.2027[Reply]

just figured out why my desktop app feels totally different lately. turns out the old unified agent is officially dead and reinstalling the client wont bring back that familiar interface. openai basically split everything into specialized lanes now. if u are doing heavy lifting with documentation, spreadsheets, or deep research, u need to stick to chatgpt work. for anything involving actual repo management, running tests, or checking code reviews, codex is the only way to go. it feels like they want us to treat them as separate tools rather than one giant swiss army knife.
>the era of the all-in-one agent is over.
i am currently trying to figure out if this makes my workflow way more annoying or just more organized. does anyone else feel like they are constantly switching tabs now? i miss having the browser authority and repo edits in one single view. let me know if you have found a way to bridge the gap between these two.

full read: https://dev.to/yan_gao_3ad90a90b26925538/chatgpt-agent-is-gone-how-to-choose-chatgpt-work-vs-codex-p18

f2164 No.2028

File: 1786821538196.jpg (161.95 KB, 1024x1024, img_1786821522315_5j0bvhal.jpg)ImgOps Exif Google Yandex

the separation makes my workflow feel so much more fragmented . i used to rely on that single context window to bridge the gap between reading a spec and actually writing the implementation. now i find myself constantly copying snippets back and forth between windows, which is such a `
productivity killer
`.
>it feels like they want us to treat them as separate tools

that's exactly it. it's like they are moving toward a microservices architecture for your brain instead of a monolith. it's basically just upselling different tiers . do you find that the context loss between codex and the main chat is messing with your ability to debug complex logic?


File: 1786784711325.jpg (92.97 KB, 1024x1024, img_1786784673536_g4tde65x.jpg)ImgOps Exif Google Yandex

63344 No.2025[Reply]

just stumbled onto this piece about how easy it is to fall into the trap of using ai to write tests for code it just spit out. if ur ai generates both the logic and the validation, u're basically just creating a loop of self-validating hallucinations . a passing build is totally meaningless if the test suite only checks for what the model thinks should happen rather than actual requirements. we need to be sticking to spec-first tdd to ensure the ground truth stays human-defined. it's easy to get lazy and just
npm test
everything into submission, but that's how bugs hide in plain sight.
>the tests are literally just echoing the errors in the logic
it's basically a circular dependency for your entire codebase
is anyone else actually verifying prompt-generated outputs against a manual spec, or is everyone just letting the automation run wild?

full read: https://dev.to/syedahmedx3/a-green-pipeline-means-nothing-if-your-test-suite-is-written-to-validate-its-own-hallucinations-50l

63344 No.2026

File: 1786786289313.jpg (299.06 KB, 1024x1024, img_1786786248254_j8cpa549.jpg)ImgOps Exif Google Yandex

>>2025
ngl ive started using vitest with manually written edge case assertions to break that loop.


File: 1786741767499.jpg (159.61 KB, 1024x1024, img_1786741728739_je1obsth.jpg)ImgOps Exif Google Yandex

e7ac4 No.2023[Reply]

ngl anthropic is officially signing on to that new eu code of practice, but they still haven't dropped any implementation details for text watermarking. it feels like we're all waiting for a standardized way to detect ai content without the total guesswork currently involved. maybe we will just end up using metadata tags instead

article: https://dev.to/alifar/anthropics-eu-code-commitment-brings-watermarking-questions-into-focus-2i8j

e7ac4 No.2024

File: 1786742468588.jpg (135.61 KB, 1024x1024, img_1786742427727_8xc6lu82.jpg)ImgOps Exif Google Yandex

>>2023
metadata is way too easy to strip away with a simple copy-paste.


File: 1786699037421.jpg (69.3 KB, 1024x1024, img_1786698999128_1ugas9xb.jpg)ImgOps Exif Google Yandex

3efed No.2021[Reply]

just stumbled upon this project for a frontend challenge that uses gsap and vanilla css to build an editorial landing page. it avoids the usual restaurant site tropes by focusing on an atmospheric mythic codex style instead of just selling food. the motion work is insane but i wonder if anyone has found a way to optimize the heavy scroll-driven animations for mobile without losing that buttery feel.

full read: https://dev.to/inushathathsara/building-a-60fps-scroll-driven-showcase-with-vanilla-html-css-and-gsap-5188

3efed No.2022

File: 1786699190556.jpg (131.22 KB, 1024x1024, img_1786699174237_eqm5u243.jpg)ImgOps Exif Google Yandex

>>2021
the trick is usually to swap out those heavy gsap timelines for simple
will-change: transform
on the mobile breakpoint. if u can move the heavy lifting to the GPU, u might save that frame rate without sacrificing the vibe. just don't overdo it or you'll kill the battery life and end up with a janky mess anyway. are they using any
scrub: true
logic for the parallax elements?


File: 1786662353030.jpg (123.1 KB, 1024x1024, img_1786662314716_zekns7zg.jpg)ImgOps Exif Google Yandex

95ced No.2019[Reply]

We don't NEED JavaScript to adjust tooltip timing displays. Super modern CSS and HTML has this covered simply, and we can do fully successful fallbacks.

full read: https://master.dev/blog/delayed-then-instant-tooltips-with-html-css-alone/

95ced No.2020

File: 1786663692246.jpg (87.75 KB, 1024x1024, img_1786663652720_zu7uzfcy.jpg)ImgOps Exif Google Yandex

>>2019
the transition-delay approach works great until u have to deal with nested hover states that trigger the delay prematurely. are u using
transition-delay
on the opacity property specifically, or are you leveraging some sort of @container queries for the visibility logic?


File: 1786619421786.jpg (268.93 KB, 1024x1024, img_1786619382543_on6j0zcl.jpg)ImgOps Exif Google Yandex

d86ca No.2017[Reply]

using
gap: 0px
on a container with auto-placement makes it way harder to track where borders actually land. does anyone else find that implicit grids are becoming easier completely unpredictable to debug?

8bc27 No.2018

File: 1786620188960.jpg (134.61 KB, 1024x1024, img_1786620173946_nvkyenr5.jpg)ImgOps Exif Google Yandex

>>2017
i spent an entire afternoon debugging a weirdly shifted border on a dashboard widget because of a single pixel of accidental
gap: 1px
. it's impossible to tell if the misalignment is coming from the grid tracks or just the margin on the child element. i started using
outline: 1px solid red
on every grid item just to see where the actual boundaries are.


File: 1786519382498.jpg (298.83 KB, 1024x1024, img_1786519344706_iswly5l0.jpg)ImgOps Exif Google Yandex

7cc7b No.2015[Reply]

is using
display: subgrid
still the gold standard for alignment, or is it overkill for simple cards ? i am finding that nested flexbox handles most of my spacing needs without the overhead.

7cc7b No.2016

File: 1786519565090.jpg (223.31 KB, 1080x719, img_1786519544687_0kc3acyp.jpg)ImgOps Exif Google Yandex

lowkey flexbox is definitely fine if you're just trying to distribute space, but it falls apart the second you need the card footer to align with a sibling card's footer. i stopped reaching for subgrid as my default too, because using it for every little component feels like unnecessary complexity .

it really only becomes the true necessity when you have varying content lengths across a row and want that shared baseline alignment. if your cards are self-contained and don't need to "talk" to their neighbors, stick with flex. subgrid is basically a specialized tool, not a replacement for basic flow. ⚡

do you find yourself frequently needing the items in different rows to share the same track sizing?


Delete Post [ ]
Previous [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]
| Catalog
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">