UpWeb.

DISPATCHESARCHIVE

Browser Debugging Tricks and an SEO Cheat Sheet

Hey there, web developers! đź‘‹

We're uncovering 67 weird debugging tricks and sharing an actionable SEO cheat sheet with best practices. Plus, a comprehensive DevTools guide with images and GIFs, Resources.fyi featuring curated tools for developers and designers, surprising CSS properties you didn't know could be animated.

Let's dive in!


đź“° Articles

67 Weird Debugging Tricks Your Browser Doesn't Want You to Know
A useful list of not-so-obvious tricks that can help you become more efficient with your browser's debugger.

The Surprising Things That CSS Can Animate
You might be surprised to learn that some CSS properties can be used for animations, enabling some clever effects.

Ten Tips for Better CSS Transitions and Animations
An overview of advanced CSS usage. It provides practical advice to make your animations look better.

Common Webpage Design Mistakes
This article covers some simple rules of web design that can be quickly mastered and applied to daily work.

Monitor Your Local and Real-User Core Web Vitals in DevTools
A completely redesigned Performance panel that includes a real-time view of local Core Web Vitals performance.

Fixing Your Website's JavaScript Performance
This article explains three performance bottlenecks caused by too much JavaScript—tasks, large bundle sizes, and hydration issues—and how to address them.

Don't Sleep on AbortController
The AbortController API can be extremely useful for canceling requests, removing event listeners, aborting streams, or making any logic cancellable.

The Interactive Guide to Rendering in React
The article outlines some features of React's component rendering, helping us understand when and how React updates the view.

The Grug Brained Developer
A list of advice on how to write great software. It's insightful, suggesting that you should always fight complexity, remove unnecessary features, and embrace simple solutions.

🛠️ Tools

Understanding DevTools
A comprehensive resource with images and GIFs covering practical tips that can help you get your work done faster.

Docker Compose Examples
This repository collects various commonly used Docker Compose configuration files.

Resources.fyi
A curated list of products, tools, and resources for developers and designers, featuring both free and paid options.

UI Goodies
A collection of web design resources, including free icons, illustrations, color tools, graphics, and UI kits.

react-parallax-tilt
Apply a tilting hover effect to React components. Zero dependencies, very lightweight, and supports mouse and touch events.

react-pdf
Display PDFs in a React application as easily as displaying images. Online demo available.

SEO Cheat Sheet
A sorted list of SEO best practices and concise, actionable SEO tips.


📬 Stay Connected

Thank you for reading this week's newsletter! If you found this useful, please share it with your colleagues and friends.

Have suggestions or want to contribute? Reply to this email and let us know what you'd like to see in future issues.