Arif Hossain
@arif-dev.bsky.social
Trying to improve the Web. https://fws-supply.website
Available on Chrome Canary 152.0.7952.0 with the "chrome://flags/#web-app-short-edges-cutout-mode" flag.
Arif Hossain@arif-dev.bsky.social · 4mo agoSoon you will be able to render content behind the system status bar in PWAs! 📱✨ Huge thanks to @bram.us for advocating for this feature and a special thanks to @januschka.com for implementing the fix in Chromium. The gap between native apps and PWAs is closing every day. 🚀
Safari on macOS and iOS 27 have joined visionOS in having full support for the HTML <model> element! 🫖 I am so excited for everyone to play with it. We go into the details about how it works and what to expect in our excellent session here: developer.apple.com/videos/play/...
Get started with the HTML Model Element - WWDC26 - Videos - Apple Developer
Learn how the model element brings interactive 3D content to your websites — now on iOS, iPadOS, macOS, and visionOS. Discover tools for...
developer.apple.com
You can create single-sided overflow in CSS by using the 'inset()' function with a negative value, opening the door to many cool effects. #css #web-design
If your website has videos, use native controls. You can include this CSS. Some unusual OEM phones have a problem that prevents you from dragging from the screen's bottom edge. github.com/arif891/layx...
Accordion component implemented entirely with CSS. fws-supply.website/inventory/ac... #webdesign #webdev #css #js #html #front-end
⭐ Making custom elements inherit native behaviors ⭐ Checkout our latest experiment ➡️ microsoftedge.github.io/Demos/platfo... This gives your custom elements native behaviors! For now we support form submission. Your <fancy-button> can now submit forms, no platform code duplication needed!
The frequently used 'Edit reel' feature on Facebook is currently broken on desktop. The Next button is positioned out of the viewport and clipped. The CSS classes '.x16ye13r' and '.x5lhr3w' have '--x-width: 80vw' and '--x-height: 80vh', which should be set to 90vw and 90vh, respectively.
An ultra-lightweight, high-performance technique for drawing SVG paths based on the user's scroll position using CSS Scroll-Driven Animations.
A high-performance, vanilla JavaScript and CSS component for creating smooth, rolling-digit animations. It seamlessly handles currency symbols, decimals, and dynamic value changes with elegant entrance and exit transitions.
A versatile, scroll-based UI sheet component designed for smooth, high-performance drawers and overlays. fws-supply.website/inventory/sh...
You can build a native-like draggable sidebar for the web with only CSS. It uses zero JavaScript. Here is how. 👇
Safe-area-inset lets you make the most use of device screens, even with their pesky notches, holes or islands that get in the way. Check out our interactive deep dive to learn how to use safe-area-insets, what to use them for, and the best way to test them on desktop. polypane.app/blog/using-s...
Using safe-area-inset to build mobile-safe layouts | Polypane
Modern phones are not simple rectangles. They have rounded corners, camera cutouts, dynamic islands, and home indicators that double as gesture areas. Browsers…
polypane.app
If you like such stuff, here is what you might like as well 👇 css.vpon.me
Learn Modern CSS for Better User Experience
A practical book with modern CSS techniques, real examples, and UX-focused solutions.
css.vpon.me
Victor@vpon.me · 3mo agoCSS animations just got way more powerful. You can now animate gradients, numbers, and custom properties smoothly. @ property makes it possible.
Introducing FWS / SUPPLY ⬛ A curated archive of raw web components. No frameworks. No bloat. → Animated interactions → Smooth page transitions → Open source. MIT licensed. Free forever. The vanilla standard, redefined. Link in bio 🔗 #WebDev #CSS #JavaScript #OpenSource #Frontend #VanillaJS
Soon you will be able to render content behind the system status bar in PWAs! 📱✨ Huge thanks to @bram.us for advocating for this feature and a special thanks to @januschka.com for implementing the fix in Chromium. The gap between native apps and PWAs is closing every day. 🚀
You can finally create mouse-draggable carousels with smooth scroll snapping using pure CSS. A long-standing Chromium bug has officially been fixed in Chrome Canary. No more heavy JS libraries for basic slider functionality! issues.chromium.org/issues/40759...