Shripal Soni

Restrict values between a min and max while keeping them fluid using `clamp()` in CSS. Very handy for implementing fluid design ✅

Don’t show intrusive interstitials or dialogs on mobile right after users land on your page from search ✅

Use Conditional Breakpoints in Chrome Dev Tools to pause execution only when a specific condition is met. It's useful for faster, targeted debugging ✅

Don't make screen reader users guess what your table is about. Use `<caption>` inside `<table>` to tell them upfront ✅

Inspect live event properties on any element without a single code change using monitorEvents() in the Chrome Dev Tools console 🤩👇

You may not know that we have an HTML tag to semantically highlight part of the text 🤩👇

We can now throttle individual network requests or domains rather than throttling all the requests of the page in Chrome Dev Tools 🤩 This makes debugging and developing faster for scenarios where we want to see how our app behaves when a particular resource loads slowly 👇

Defer non-critical CSS for better performance ✅

Use :focus-visible instead of :focus to change outline styles ✅👇

Check it in action at this editable code playground 👇 codewithshripal.com/playground/htm…

Provide better UX for showing telephone/sms numbers by using tel:/sms: URL scheme ✅👇

One line of code to prevent layout shift on scrollbar visibility change 🤩👇

Simplify long CSS selectors using :where() 👇

You may not know that we can quickly change CSS color format using this one shortcut in Chrome Dev Tools ✨👇 Also, when you hover over any color format other than hex, it shows the color value in hex for quick copying.

@akoratana @matei_zaharia @pbailis @rauchg @zoink @drewhouston 100X

Introducing: PlayerZero The world's first Engineering World Model that puts debugging, fixing, and testing your code on autopilot. We've raised $20M from Foundation Capital, @matei_zaharia (Databricks), @pbailis (Workday), @rauchg (Vercel), @zoink (Figma), @drewhouston (Dropbox), and more PlayerZero frees up 30% of your engineering bandwidth by: 1.⁠ ⁠Finding the root cause for bugs & incidents in minutes that engineering teams take days to identify. 2.⁠ ⁠Predicting in minutes, edge case issues that a 300-person QA team would take weeks to find. ------ Here's why this matters: No one in your org has a complete picture of how your production software actually behaves. Support sees tickets. SRE sees infra. Dev sees code. Each team builds their own fragmented view - and none of these systems talk to each other. When something breaks, everyone scrambles to stitch the picture together by hand. PlayerZero connects all of it into a single context graph - → The Slack thread where your lead said "we went with X because Y fell apart in prod last time" → The PR review where an engineer explained the tradeoff → The lifetime history of your CI/CD pipeline, observability stack, incidents, and support tickets So you can trace any problem to its root cause across every silo. And it compounds. Every incident diagnosed teaches the model something new. The longer it runs, the deeper it understands - which code paths are high-risk, which configurations are fragile, which changes tend to break which customer flows. So when you sit down to debug a live issue, you have your entire org's collective reasoning and production memory behind you - instantly. ------ Zuora, Georgia-Pacific, and Nylas have reduced resolution time by 90% and caught 95% of breaking changes and freeing an average of $30M in engineering bandwidth. ------ Our guarantee: If we can't increase your engineering bandwidth by at least 20% within one week, we'll donate $10,000 to an open-source project of your choice. Book a demo - bit.ly/3NlLMeN

We can now easily create keyboard-friendly popovers natively. No javascript needed! 🤩👇

@AbelardoIT Yes, ofc 💯

@codewithshripal It's a good option when this message is addressed to a dev channel to be inspected by the team. I think is a bad idea when this message is sent to the front to be displayed.

For better debugging, attach the original error as `cause` when rethrowing an error ✅

Here is the editable code playground to see it in action 👇 codewithshripal.com/playground/css…

Easily customise underline thickness without affecting layout using `text-decoration-thickness` in CSS ✨