/wd/ - Web Design

stop relying on media queries for every single component size change. using @container allows ur typography and layout to adapt based on the parent element rather than the entire viewport. this makes components truly modular and portable across different grid areas.

@container (min-width: 400px) {h2 {font-size: 2rem;}}

>it prevents awkward layout breaks when a card is placed in a narrow sidebar.
just make sure you define a container-type on the parent first ⚡

just realized you can set up email alerts on the web platform status site. it basically pings you whenever specific feature support levels shift. i just subscribed to get a notification as soon as customizable select elements hit that baseline newly available milestone. it beats manually checking for updates every single week . it's much better than relying on random twitter threads . anyone else using this or do you prefer just following the @webplatformstatus account? would love to know if you have any other must-follow tracks for css updates.

full read: https://master.dev/blog/web-platform-status-notification-emails/

how do you balance heavy grotesque typefaces w/ legible body text w/o making the whole page feel unreadable ? i am struggling to find a serif that works well alongside ultra-bold headers.

it feels like the line btwn design and engineering is basically disappearing gone. with ai making it so easy to turn a prompt into a functional prototype, companies are ditching specialized silos for people who can handle design, code, and storytelling all at once. it's not just some niche role anymore; it's becoming the standard way product teams operate.
>the distance between idea and implementation is collapsing
i wonder if we're heading toward a future where purely visual designers won't exist w/o some level of technical literacy. does anyone else feel like they're being forced to become a developer just to stay relevant?

full read: https://uxdesign.cc/creative-technologists-are-moving-from-the-margins-to-the-center-4fcfaa3cf2f6?source=rss----138adf9c44c---4

is anyone else struggling to get smooth transitions between weights when using

font-weight: 100;

and heavier values? i feel like the jump is too abrupt for a modern look and makes the layout feel unstable during hover states.

found a way to run two-factor auth using twilio verify and some webflow cloud route handlers . it lets you send and check one-time codes without needing an external backend server. it's much cleaner than the old way of managing separate database calls . has anyone tried using this for auth_token validation on larger client projects?

https://webflowmarketingmain.com/blog/twilio-sms-2fa-webflow-cloud

found a decent breakdown on moving from manual clipping to using automated pipelines for product shots. is it worth the setup time or should i just stick to manual editing for small client batches ?

found this here: https://www.sitepoint.com/removing-image-backgrounds-web-projects/?utm_source=rss

just wrapped up the first iteration of the skeleton build and im officially stuck in dev mode. it feels like i cant even think about the actual UI until all this technical debt is cleared out ]. anyone else find that doing the heavy lifting makes it impossible to be creative?

found this here: https://piccalil.li/projects/personal-site/8/?ref=main-rss-feed

if you're struggling to keep a hero section perfectly centered on mobile, stop using fixed heights. try using

100dvh

to avoid that annoying jump when the browser address bar hides or shows. it makes the layout feel much smoother during scrolling.

height: 100dvh; display: grid; place-items: center;

this ensures your content stays in the true center of the visible area. it works perfectly even on safari mobile. ⚡

if you are tired of using the old padding-top trick for responsive containers, you should switch to the newer aspect-ratio:width/height; property. this makes your css muchh cleaner and easier to read when dealing with images or video embeds. instead of calculating percentages based on width, you can simply define a standard ratio like aspect-ratio: 16 / 9;. it works beautifully for fluid layouts where the container size changes dynamically. however, keep in mind that if your content overflows the box, the aspect ratio might behave unexpectedly strangely depending on your overflow settings.
implementation details
you can combine this with

object-fit: cover;

to ensure your media fills the entire area without distortion. it is much more intuitive than managing vertical padding hacks. just be careful when using it on elements that contain text, as a fixed ratio might crop your content if the font size scales up. **just remember to check your min-height settings for mobile views