A few years back, when adjusting SmashingMag’s navigation, I found myself wondering why an active navigation item in the top bar looked so grainy on screen. It had a solid background, yet there was a quite strange gradient that seemed to be going from one shade of red to another via some sort of a grey zone.
For hours, I’ve tried to debug CSS on one screen and review the results on my secondary screen. Reduce and isolate the bug, remove everything that’s unrelated and set
!important everywhere. Despite my efforts, I couldn’t understand what the problem was. Many hours later, that bug was still there, and I was getting quite desperate.
At some point, I was certain that I have discovered a mysterious Chrome bug, and I was just about to file an issue on the Chromium bug tracker. But just as I opened a new tab in the browser on my secondary screen, I realized that the same issue persisted there. It wasn’t the CSS that was a problem, but a few dead pixels appearing on my secondary display.
Hopefully, your debugging strategies are slightly more effective than mine. And if they are not, we’ve prepared a couple of useful techniques and tools for better debugging in this very newsletter. From memory debugging to better use of Terminal to CSS debugging techniques and helpful tooling for debugging. We hope you’ll find them useful.
Always check that secondary screen, everyone!
— Vitaly (@smashingmag)
1. JS Memory Heap Snapshot Visualization Tool
The Memory tool in DevTools allows us to take a heap snapshot and explore its contents. However, parsing the retainers tree view can be quite difficult. Jose Leal’s prototype for a JS memory heap snapshot visualization tool offers a more visual approach.
Want to give it a try? You can upload a heap snapshot file to the playground and explore the connections from the GC roots or focus on a single object and visualize its retainer chain all the way up to a root. The different visualizations make exploring the file a lot more straightforward and save you time when isolating a single retainer chain for an object in the heap. (cm)
2. Terminal For Front-End Developers
Terminal has a well-earned reputation for being intimidating and tricky for beginners. However, if you’re working with frameworks like React, Angular, or Vue, there’s no getting around the command line. Josh W. Comeau wrote a fantastic guide that helps front-end developers get comfortable with the terminal, in a remarkably short amount of time.
3. Debugging Tips And Techniques
Clean code is the foundation of any app or site. Otherwise, you risk bugs, performance issues, or layout problems. But what to do if you run into bugs? How to best find the root of an issue?
If you’re experiencing unexpected layout results, Stephanie Eckles’ guide to debugging CSS is for you. She looks at different categories that bugs fit into and explores how to evaluate the situation as well as techniques that help prevent these bugs. Ahmad Shadeed’s eBook Debugging CSS is also a great companion to help you improve your CSS debugging skills and reduce the time you spend on bugs.
You need to debug code that’s neither CSS nor React? Rocío Belfiore summarized some relatively simple debugging techniques that aren’t language-specific and that can be applied to nearly any type of software. Happy debugging! (cm)
4. View Source Code Everywhere
The keyboard shortcut to view the source code of a page is every developer’s best friend, right? Well, at least on desktop devices. Viewing the source on mobile usually involves quite some fiddling around. If you’ve been looking for a simple solution for when you’re on the go, Adam Newbold’s site View Source is for you.
To view a page’s source code, just paste the URL into the search bar of View Source, and it’ll fetch and display the source code for you — with syntax highlighting and numbered lines. You can even define if you want to wrap lines or tidy the markup for a better overview. One for the bookmarks. (cm)
5. Upcoming Workshops & Meet-ups
You might have heard it: we run online workshops and trainings around frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of new workshops coming up soon, and we thought that, you know, you might want to join in as well.
- Smart Interface Design Patterns, a 6h-video course with Vitaly Friedman,
- Interface Design Patterns UX Training, taking place in September 2022. Early-tickets.
As always, here’s an overview of our upcoming workshops:
- Web Performance Masterclass Dev
with Harry Roberts. May 3–17
- Smart Interface Design Patterns, 2022 Edition UX
with Vitaly Friedman. May 5–19
- DevOps Masterclass Dev
with Denys Mishunov. May 16–30
- The Fundamentals of UX Writing UX
Yuval Keshtcher. May 18–26
- UX for Mobile eCommerce Masterclass UX
Rinaldo Ugrina. May 23 – June 6
- Jump to all online workshops →
6. Page Speed Audit & Analysis
If you’re looking for a quick and easy way to check for page speed, Gaël Métais’ Yellow Lab Tools has got you covered. The free and open-source page speed test checks if your page respects performance best practices, detects front-end issues and provides precise guidance on how to fix performance issues.
To run a test, you can enter a URL and select if you want to check on a phone, tablet, or desktop device (there’s a separate HD desktop option, too). The results highlight everything from oversized images, DOM elements count, and JS execution time to CSS complexity and syntax errors, unused unicode ranges, disabled caching, and much more. A great overview that shows you at a glance where there’s room for performance improvements. (cm)
7. DOM Treemap For Chrome DevTools
Have you ever had a Google Lighthouse audit complaining an excessive DOM size and you wondered where in your document most DOM nodes are buried? Lighthouse and DevTools aren’t any help if you want to find those areas. That’s where DOM Treemap comes in.
Built by Christian Schaefer, DOM Treemap extends your Chrome DevTools Elements tab with an additional pane that visualizes the distribution of node descendants of the currently inspected DOM element. This makes it easy to drill down your DOM and locate those hidden node-heavy parts.
If you also want to keep an eye on your BEM components, an extra tab gives you a treemap that visualizes how node-intensive they are on average. A great power boost for DevTools. (cm)
8. A Web Browser To Think Clearly
A web browser that helps programmers think clearly? That’s exactly what Bonsai attempts to do. The dashboard web browser was built specifically for developers to make looking up docs and searching information more efficient.
No matter where you are, you can toggle Bonsai on and off with a hotkey when you need to look something up when programming and pin it in your editor if you want. All your browser tabs are grouped by domain for easy organization, you can add tags, and if you find something particularly interesting, you can drop it in a workspace. A powerful helper to manage information overload and keep you on task.
And if you need a powerful suite of developer tools in one, Polypane is a fantastic standalone browser for developers which allows to build and test for responsive design, check for accessibility and have multiple views of the site side-by-side. (cm)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
- Front-End Tooling
- Interface Design Tools
- Front-End Debugging
- UX and Interface Design
- Web Performance
- UX and Interface Design
- Little Front-End Utilities
- Front-End Accessibility
- New Front-End Techniques
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.