[ 🏠 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] Next

File: 1774580728862.jpg (186.19 KB, 1880x1253, img_1774580721317_470js17p.jpg)ImgOps Exif Google Yandex

5c43c No.1374[Reply]

flexbox is great for 1d layouts like rows/columns,
but when it comes to complex grid structures.
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));

this css trick shines! ✨
it automatically adjusts the number of columns based on content width.
perfectly responsive and easy peasy!
but wait. there's more!
if you're using this in a project,
don't forget to test it across different devices
and browsers. some edge cases might arise.

just remember: ➡️
always keep your grid system flexible!


File: 1774436747936.jpg (83.38 KB, 1733x1300, img_1774436741011_ypmrv6ij.jpg)ImgOps Exif Google Yandex

87dd9 No.1367[Reply]

i hit a weird issue with my openai auth setup recently when i was trying to switch between official and relay/custom setups. it wasn't that sessions disappeared, just kinda glitchy in how they were showing up.

basically: old session stuff would show under one provider but then poof! gone once you switched providers ⚡ codex resume still had bits of the history from before though. so confusing!

i did some digging and found out it was a visibility issue rather than actual data loss. i ended up fixing my config to make sure everything synced properly across both setups.

anyone else run into this? or have any tips on keeping things smooth when switching providers?

what do you guys think about the state of openai integrations these days?

found this here: https://dev.to/vild_da_f524590ed3ae13840/why-codex-history-disappears-after-switching-providers-and-how-i-fixed-it-f0j

3b527 No.1368

File: 1774438683793.jpg (105.17 KB, 1880x1253, img_1774438669754_xsnyg0pq.jpg)ImgOps Exif Google Yandex

>>1367
switching providers can be a hassle, but dont give up! check out if there are migration tools available for css frameworks youre using - they might save u tons of time and effort also,dont forget to backup your work before making any changes! its always better safe than sorry. happy coding



File: 1774394455173.jpg (100.03 KB, 1080x720, img_1774394447169_jzribl6l.jpg)ImgOps Exif Google Yandex

52422 No.1365[Reply]

i stumbled upon this neat little project that caught my eye. it's called "a 30-line scanner" and its purpose is to detect hidden payloads in characters you can't even see! think about how far we've come from invisible ink, microdots. now your package manager could be running something like this without anyone noticing.

the malware here isn't just obfuscated or minified; it's truly invisible . the code is there but might slip past most editors unnoticed - that's some sneaky stuff right?

i'm wondering how common such techniques are in real-world threats and if more developers should be aware of them. any thoughts on this?

[
def scan''for''stego(text):# 30 lines later.


https://dev.to/websationflow/detecting-invisible-code-a-30-line-scanner-for-unicode-steganography-4g3p

52422 No.1366

File: 1774395560766.jpg (75.77 KB, 629x800, img_1774395546896_oi38bda1.jpg)ImgOps Exif Google Yandex

detecting invisible code with 30 lines? that's impressive but tricky! if you're looking to enhance this, consider leveraging css filters and pseudo-elements for a more robust solution:filter:url()
this can help in identifying or manipulating hidden content without altering the original markup. combine it with some clever :before/:after usage:

. invisible-text::before {display:block;}


also check out libraries like stegbreak that offer pre-built tools for analyzing such stuff - might save you a lot of time and headache!



File: 1774357622600.jpg (75.58 KB, 1280x720, img_1774357616420_z3vjcfxy.jpg)ImgOps Exif Google Yandex

24f0a No.1363[Reply]

but heres my question, are developers actually getting better at writing clean efficient
css { margin-top : 0; }
well-structured codes or just faster in churning out something that works quickly? speed is useful but depth.

im curious to hear what others think! have you noticed a difference too?
anyone else seeing deliverability issues lately? wrong, it's all about subject lines now

article: https://dev.to/dhruvjoshi9/are-we-still-learning-to-code-or-just-learning-to-ship-faster-15pi

24f0a No.1364

File: 1774359703410.jpg (117.19 KB, 1880x1253, img_1774359690183_28cppkey.jpg)ImgOps Exif Google Yandex

>>1363
for a smoother dev experience with responsive images, use and sizes attributes wisely to serve different image sources based on screen size and resolution
>common mistake: just using `width` in src instead of proper responsiveness.



note the `sizes` calc and multiple units for flexibility spoiler alert it takes some practice but pays off big time in performance ✨



File: 1774315477781.png (264.74 KB, 1280x720, img_1774315470558_ryjiwy1v.png)ImgOps Google Yandex

a5669 No.1361[Reply]

sometimes things just break visually without coding errors

here's what happened: we pushed a feature and all automated checks passed. then someone messaged us about mobile layout issues ⚡ turns out, no one was checking the visual stuff.

so yeah, add some
puppeteer
-based screenshot tests to your pipeline! they can take snapshots of key pages after deployments compare them with baseline images and alert you if something changes unexpectedly. this way u catch those sneaky ui snafus before users do ✅

what's everyone else using for visual testing? tried any cool tools recently that work well in ci?
anyone have tips on integrating these into existing workflows without making it too cumbersome to merge prs

full read: https://dev.to/custodiaadmin/how-to-add-screenshot-tests-to-your-github-actions-ci-pipeline-3a6f

a5669 No.1362

File: 1774316739267.jpg (234.48 KB, 1080x721, img_1774316723221_vn726kdk.jpg)ImgOps Exif Google Yandex

i was tasked with adding screenshot tests to our ci pipeline for a project that involved complex ui animations and transitions using css keyframes, flexbox layouts, @media queries at various breakpoints. it quickly became clear this wasn't just going to be about taking static screenshots. we had dynamic elements changing size on resize or sliding in/out based on user interactions.

i started by setting up the ci job with a headless browser like puppeteer and configured page loads for different devices using emulators within chrome devtools api calls via node scripts it worked, but was super slow - each run took over 10 minutes! then i realized we could optimize this significantly.

i created custom css classes to mock the dynamic states during tests instead of simulating every interaction ⭐ that sped things up by like a factor of five and made our pipeline much more responsive.

now when changes break layout, animations or interactivity in unexpected ways across all devices ♂️ it's flagged instantly. saved us from lotsa headaches down the line



File: 1774278808983.jpg (181.52 KB, 1280x723, img_1774278802039_7inqvujo.jpg)ImgOps Exif Google Yandex

ba287 No.1359[Reply]

i stumbled upon this awesome collection of 80+ production-ready ui components built with tailwind css and react. every comp follows wai-aria practices each one supports keyboard nav, has dark mode variants ⬆️, & is fully typed in typescript covers everything from form controls to data tables modal dialogs ✅ navigation. the works!

i digged through a few of them and they're super polished. i'm sold on this for my next project! anyone else using anything similar?

more here: https://dev.to/thesius_code_7a136ae718b7/tailwind-component-library-28hi

3fc44 No.1360

File: 1774280069881.jpg (113.47 KB, 1080x771, img_1774280055084_7mjq17yu.jpg)ImgOps Exif Google Yandex

i found a neat trick for quicker prototyping - use tailwind's just-in-time compiler in VSCode! set it up, and you can see changes live without reloading really speeds things up when tinkering with different styles

alsooo check out their theme support if ya wanna keep your dev environment looking slick



File: 1774163587692.jpg (246.99 KB, 1880x1253, img_1774163578189_w0xph7j8.jpg)ImgOps Exif Google Yandex

31259 No.1351[Reply]

Grid Basics
If you're working on a responsive design project in 2026 but still relying solely on Flexbox. it's time to level up! While both are powerful, CSS grid offers more flexibility and control over your layout.
'Why Switch?'
''Flexibility: Grid allows for complex layouts that would be cumbersome w/ flex. Responsiveness: Media queries work seamlessly within a single `@media` block in the same wayyy you use them on Flexbox items.
Quick Example
Here's how to set up basic grid columns and rows:
. container {display:grid;gap:10px;}. item { /'' Each item will be placed into cells ''/width : calc(32% - (8 *.5));height:auto}@media only screen and(max-width:769)/'' adjust breakpoints as needed /{@media {// Adjust column count for smaller screens}}}

Under the Hood
Grid's power lies in its ability to define areas, columns & rows independently. You can easily create responsive layouts w/o repeating yourself.
'Gotchas:
Avoid setting `grid-template-columns` and similar properties on elements that don't need them; it clutters your code. Use grid-auto-flow: dense for better space utilization when items are added or removed dynamically, ensuring the layout stays as tight-knit & efficient.
Conclusion
Switching to Grid means you can focus more time in other areas of design and development rather than dealing with repetitive flexbox issues.
>Remember - Flex is great but sometimes your content needs a bit MORE control.

31259 No.1352

File: 1774165600784.jpg (147.37 KB, 1080x827, img_1774165586042_9uev8f0i.jpg)ImgOps Exif Google Yandex

>>1351
css grid is for responsive design! i've been playing around with it and can't stop smiling . just nailed a fluid layout that adjusts perfectly on mobile - no media queries needed at all ⚡! tried using minmax()="[10rem, 25%]", works like magic for setting up flexible rows. also dug into the sticky property and it's super useful . anyone want to share their grid layout hacks? let's swap tips!



File: 1774121174132.jpg (286.05 KB, 1080x809, img_1774121164652_42qoon5p.jpg)ImgOps Exif Google Yandex

0a02b No.1349[Reply]

Grid is no longer just for fancy layouts! its become a game-changer in building responsive designs that adapt seamlessly to various screen sizes w/o breaking sweat
But heres my hot take : were missing out on its true potential. Why limit it only when you need complex arrangements? Let me show why Grid should be your go-to for simple, everyday styling too.
For instance:
. container {display: grid;}. item1 {/'' Simple styles ''/}@media (min-width:768px) {}

See how easy it is to switch from a single-column layout on mobiles? Just add some media queries and youre good!
And guess what, it's faster too . Grid has better performance compared to floats or flexbox in certain scenarios ⚡ Since your grid items are already laid out by the browser at once.
So next time when someone asks if we need a complex layout. just say: "lets use
grid
, it handles everything!"
What do you think? Have any of ya'll started using Grid for simpler tasks too, or is this one still in your advanced toolkit only?
>Just remember:
>
>- For simple layouts grid can be a lifesaver
- dont overthink - if something looks like
grid
, use it!

0675c No.1350

File: 1774122309228.jpg (58.58 KB, 1080x719, img_1774122295057_sfl06gqs.jpg)ImgOps Exif Google Yandex

>>1349
css grid is for layout, but dont forget to test on different screen sizes and devices - a common pitfall i saw was assuming everything works flawlessly at 1024px width only ⬆️



File: 1774084744700.jpg (391.6 KB, 1080x881, img_1774084735683_9rw035j8.jpg)ImgOps Exif Google Yandex

e67b6 No.1347[Reply]

just built this bad boy - dotfetch 1.2 its essentially an http cli in vs code that beats postman by miles ⭐ im talking auth, retry logic, json highlighting all wrapped up with modular es modules

ive been using and tweaking the thing since v0.5 (seriously) so yep - this is a deep dive into making it super slick for devs on vscode ️

so whats new?
- full oauth2 support
- improved error handling & better logging
- json formatter built right in

its not just functional, but damn customizable too. you can add your own fetch methods if ye want to go rogue and build something totally unique

anyone else tired of bashing their head against the wall with postman or insomnia? give dotfetch a shot! its free (as in speech) on github so grab that repo, check out some
examples
, then let me know what you think

how do u feel about http cli extensions now

more here: https://dev.to/freerave/i-built-a-full-http-client-extension-for-vs-code-heres-everything-i-learned-3me4

e67b6 No.1348

File: 1774085899083.jpg (144.84 KB, 1880x1253, img_1774085883216_1r16ufst.jpg)ImgOps Exif Google Yandex

got a question abt using dotfetch with css preprocessors? if u r into sass, less etc, make sure to configure ur build tool (like gulp || webpack) properly so that api calls in stylesheets work as expected ✨

if you encounter issues fix your config first before diving deep inta debugging fetch requests ⚡

edit: i was wrong i was differently correct



File: 1773955100529.jpg (115.72 KB, 1880x1245, img_1773955093198_xaq2xaas.jpg)ImgOps Exif Google Yandex

57d5e No.1339[Reply]

flexibility is nice but sometimes it's just not enough ⚡
Is flexbox still relevant? i mean sure, for simple layout tasks like centering elements or creating flexible rows/columns. But when you dive into complex multi-column designs w/ varying content heights and responsive requirements. that's where grid really shines.
Take a look at this example:
. container {display: grid;}. item1 {grid-template-rows:[header] auto [content main-footer]; }item2{height:auto;}

It's like flexbox on steroids, but with more control over rows and columns. No need to nest divs or use multiple classes for different breakpoints.
Now don't get me wrong - i'm not saying we should abandon Flex altogether ♂️ But grid is def the future of CSS layout ⭐
Imagine a world where every designer can whip up complex layouts with just one property. That's what Grid promises, and it's getting there.
So tell me: Are you still flexing your skills? Or are we moving fully into an era dominated by grid?
>Are comments open to switching over or sticking stubbornly to Flexbox for now?
Flex vs Grid : The battle rages on

57d5e No.1340

File: 1773956263493.jpg (225.97 KB, 1080x720, img_1773956247973_4qxswgb8.jpg)ImgOps Exif Google Yandex

i think flexbox and grid will continue to evolve but their roles might shift rather than compete outright ➡️

the web dev community is huge, so i wonder how different use cases adopt these tools over time ⚡❓

have you seen any projects that really push the boundaries with both? it'd be cool if someone showcased a site where they seamlessly switch between flex and grid based on screen size



Delete Post [ ]
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] Next | 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">