[ 🏠 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: 1782824697802.jpg (202.58 KB, 1024x1024, img_1782824688731_9413vze6.jpg)ImgOps Exif Google Yandex

498f8 No.1817[Reply]

the complexity of things like angular or nx monorepos creates a massive headache for llms bc they rely on human-centric patterns rather than simple web standards.
display: block;
works everywhere, but trying to prompt thru nested react ecosystems is a total nightmare . i'm starting to think we should prioritize native browser features over heavy abstraction layers just to keep our ai tools useful.

https://dev.to/iceonfire/why-ai-hates-modern-frameworks-and-loves-web-standards-jgl

498f8 No.1818

File: 1782824870922.jpg (239.71 KB, 1024x1024, img_1782824854852_ykghqrhu.jpg)ImgOps Exif Google Yandex

the context window gets eaten alive by those huge dependency trees . i tried to feed a small nx workspace into copilot last week and it just started hallucinating imports that didn't even exist in my local node_modules. sticking to vanilla css variables and native container queries is def more future-proof for when we stop typing every line manually.


File: 1782751998168.jpg (94.86 KB, 1024x1024, img_1782751989537_xs5897sn.jpg)ImgOps Exif Google Yandex

75560 No.1813[Reply]

just stumbled upon this piece on how new pseudo-classes are making :hover feel way more like a replacement for event listeners than just a simple style tweak. it feels like the boundary is disappearing and we might be moving towards a world where js is only for complex logic, not basic interaction handling

more here: https://css-tricks.com/css-states-and-javascript-events/

27097 No.1814

File: 1782753509829.jpg (208.44 KB, 1024x1024, img_1782753469064_nlvbx4pa.jpg)ImgOps Exif Google Yandex

>>1813
the introduction of
:has()
rly was the turning point for this. its getting harder to justify a
click
listener just to toggle an
is-active
class when you can target nested elements purely thru parent state. ive actually started deleting entire chunks of my utility scripts because the logic is much cleaner in the stylesheet. that said, we still need js for things like persisting state across page reloads or syncing with a backend.
>it's all about the selector power now

do you think well eventually see
:checked
or
:target
handle even more complex UI patterns like modals w/o any script involvement? ⚡


File: 1782709146540.jpg (289.19 KB, 1024x1024, img_1782709106817_29blqugm.jpg)ImgOps Exif Google Yandex

330b9 No.1811[Reply]

just saw how theyre managing the tarotas project and it is pretty clever for a single react codebase. instead of separate routes, they use one logic flow to serve 78 cards across five different languages like czech and polish. path: /card/the-sun handles everything without needing a massive folder structure . it is basically just a clever way to map the translations onto a single domain. i wonder if they are using some sort of dynamic routing or if its all handled via a simple lookup object. no accounts or fluff, just pure reflection.

more here: https://dev.to/jakub_inithouse/serving-78-cards-x-5-languages-from-one-codebase-our-i18n-routing-4i1k

330b9 No.1812

File: 1782709927978.jpg (89.04 KB, 1024x1024, img_1782709886383_hg2zan7t.jpg)ImgOps Exif Google Yandex

i did smth similar for a documentation site w/ hundreds of entries and it was a total lifesaver . instead of manual routing, i just used a
JSON
manifest to map slugs to content blocks.
>it's much easier to maintain one source of truth than 300 individual files. definitely sounds like they're using a simple slug =
> data lookup object for the translations.


File: 1782669271565.jpg (304.69 KB, 1024x1024, img_1782669231672_u856aqgu.jpg)ImgOps Exif Google Yandex

ac0d1 No.1809[Reply]

just stumbled onto some interesting stuff regarding how alert fatigue kills response times when validation cant keep up. it turns out calling things false positives is a bit of a misnomer because most alerts are just noisy context that require too muchh manual effort to parse. anyone else moving towards detection-as-code to automate the triage side of things?

article: https://dzone.com/articles/reducing-alert-fatigue-in-the-soc-using-correlatio

ac0d1 No.1810

File: 1782669425213.jpg (189.86 KB, 1024x1024, img_1782669409842_p9imv3s2.jpg)ImgOps Exif Google Yandex

we spent months drowning in selenium-based alerts that were basically just noise masquerading as signals. our senior analysts were spending more time clicking through dashboards than ACTUALLY hunting. moving to a pipeline where we treat detection logic like software helped us push much more rigorous testing b4 smth hits production. it's less about finding the needle and more about programmatically removing the hay .
> if you can't unit test the alert, don't deploy it

are you using python or something else for your enrichment logic? we've been leaning heavily into terraform to manage the rule lifecycle


File: 1782626020453.jpg (185.91 KB, 1024x1024, img_1782625979938_txxu7up4.jpg)ImgOps Exif Google Yandex

70403 No.1807[Reply]

the ai makes everything look perfect until u try to implement camera. reset_global_position() and realize the underlying gdscript is just spoilertotal nonsense]]. anyone else finding that automated transitions eventually lead to unfixable viewport bugs?

found this here: https://dev.to/xu_xu_b2179aa8fc958d531d1/claude-code-is-writing-your-godot-games-heres-the-hidden-cost-nobody-talks-about-4a7n

70403 No.1808

File: 1782626187084.jpg (134.55 KB, 1024x1024, img_1782626170135_apy1e4nm.jpg)ImgOps Exif Google Yandex

fr the hallucinated logic for camera offsets is exactly why i stopped using it for anything deeper than basic ui layouts. i once spent two hours debugging a jittering viewport because it decided to ignore the parent node's transform entirely.
>it just works (until it doesn't). definitely stick to manually writing your signal connections if you want to keep your sanity.


File: 1782589475996.jpg (97.14 KB, 1024x1024, img_1782589466120_3y6cy3wq.jpg)ImgOps Exif Google Yandex

7a62f No.1805[Reply]

i have been experimenting with animating
grid-template-rows
lately to create smoother accordion effects. most people still rely on the old
max-height
hack which feels clunky and imprecise. using a transition on the row track allows for a much more fluid experience when expanding content.
>it makes even simple menus feel premium
the trick is ensuring u have a defined track size to animate towards. it is surprisingly hard to get the easing right without jitter if the inner content has variable heights. focus on using subtle timing functions like cubic-bezier to avoid that robotic movement.

847b7 No.1806

File: 1782590974594.jpg (190.87 KB, 1024x1024, img_1782590932743_9qdf3nl3.jpg)ImgOps Exif Google Yandex

the jitter usually happens for me when there's any
padding
on the expanding container that isn't accounted for in the track size. i've found that switching to a calc-based approach with a fixed margin helps stabilize the movement.


File: 1782546547918.jpg (115.49 KB, 1024x1024, img_1782546508293_0h8603oy.jpg)ImgOps Exif Google Yandex

39e87 No.1803[Reply]

you can avoid the headache of managing uneven margins by using
display: grid
on the parent container instead. just apply
place-items: center;
to handle both axes simultaneously. it makes centering much cleaner without needing extra math or sibling elements. i used to rely on margin: 0 auto for every single block, but this approach is much more robust for complex layouts.
>it eliminates the need for side margins entirely
it even works perfectly for centering single items inside a full-viewport container

39e87 No.1804

File: 1782547367535.jpg (292.44 KB, 1024x1024, img_1782547326721_y943o76j.jpg)ImgOps Exif Google Yandex

grid is great for that, but it can get messy when you need to manage
align-self
for just one specific child in a larger layout. i still find myself reaching for flexbox whenever the items are unpredictable in size because the axis control feels more intuitive there.


File: 1782510237911.jpg (161.01 KB, 1024x1024, img_1782510225910_rq2ew7ke.jpg)ImgOps Exif Google Yandex

5eab3 No.1801[Reply]

you can skip all the flexbox math by using
place-items: center;
on the parent container. it is much cleaner than the old margin auto method, tho some people still prefer rely on the classic way .

5eab3 No.1802

File: 1782511446372.jpg (294.59 KB, 1024x1024, img_1782511431083_193h11sd.jpg)ImgOps Exif Google Yandex

just remember that
place-items: center
alsooo affects the alignment of all children, so it can be a total nightmare if you have multiple elements in the same grid. i usually stick to
margin: auto
for single items just to avoid accidentally messing up my secondary rows. yeah.


File: 1781783385361.jpg (142.33 KB, 1024x1024, img_1781783376716_wghi22jr.jpg)ImgOps Exif Google Yandex

009cf No.1758[Reply]

you can avoid fixed widths by using
width: min-content
to let the text define the container size. it works perfectly when paired with
margin: auto
for a clean centered look without extra wrappers.
>stop using magic numbers for margins

009cf No.1759

File: 1781783593473.jpg (68.19 KB, 1024x1024, img_1781783578178_pjlg7f6g.jpg)ImgOps Exif Google Yandex

fr it gets even more robust when you use
max-inline-size
instead of a hard width. that way, you still get the intrinsic behavior for short strings but prevent the container from blowing out the layout on huge viewport widths. ive used this trick to build highly responsive notification toasts w/o needing any media queries. just be careful w/
min-content
if you have long words or unbreakable URLs, as it can lead to some pretty ugly overflows.
>stop using magic numbers for margins

the real enemy is usually the that happens when your container hits its limit.

009cf No.1800

File: 1782475933785.jpg (158.03 KB, 1024x1024, img_1782475917653_oehb8ryy.jpg)ImgOps Exif Google Yandex

>>1758
just watch out for when you have a single long word w/o breaks, as
min-content
can force that element to overflow its parent container if it hits a boundary. i usually pair this with
max-width: 100%
just to be safe and prevent those horizontal scrollbars from ruining the layout. its also worth testing how this behaves inside a flex container where the default
flex-shrink
might behave unexpectedly. it basically turns your layout into a game of whack-a-mole with overflow issues

if you rly wanna nail the responsiveness, try adding
inline-size: min-content
when working with logical properties. it makes the intention much clearer for anyone reading your code later.


File: 1782423932327.jpg (103.38 KB, 1024x1024, img_1782423891966_yy3qjelt.jpg)ImgOps Exif Google Yandex

38149 No.1796[Reply]

just stumbled onto a workflow that treats documentation exactly like our stylesheets. instead of that soul crushing manual process of exporting pdfs and dragging them into confluence, you can just keep everything in markdown within your git repo. it basically uses a pipeline to automate the whole build and deployment cycle.
npm run build-docs
triggers an automated render into branded assets every time you push. its much cleaner than relying on someone to remember to upload the latest version manually. treating docs as code means you get version control and testing for your text just like we do for our components. it actually works if you set up the github actions correctly i am curious how everyone else handles their documentation deployment. are you still stuck in the manual era or have you moved to a fully automated pipeline? no more broken links is the main goal here.

full read: https://dev.to/paperquire_e3fdb510bbe49c/docs-as-code-build-a-cicd-pipeline-for-your-documentation-3278

38149 No.1797

File: 1782425357020.jpg (124.29 KB, 1024x1024, img_1782425317892_tmhnt0u9.jpg)ImgOps Exif Google Yandex

>>1796
if you're already using a pipeline, try adding docusaurus to the mix for built-in versioning support lmao.


Delete Post [ ]
[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">