Amber Wilson on making bookmarklets to help yo-self. She shows off one that injects an accessibility script — I like this approach, as it means you don’t have to maintain the bookmarklet, just the script it links to. Another example runs some code contained right in the link. The result is literally a bookmark in your browser you can click to do something that is useful to you on any site. … Read article “Make Your Own Dev Tool”
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing CSS and making sure it’s working across all the viewports in a single glance.
They are all very similar. For example, they do “event mirroring” meaning if you scroll in one window or device, then all the others do too, along with clicks, typing, etc. You can also zoom in … Read article “Comparing Browsers for Responsive Design”
Browser DevTools are indispensable for us front end developers. In this article, we’ll take a look at the Computed tab, a small corner of the DevTools panel that shows us big things, like how relative CSS values are resolved. We’ll also see how inheritance fits into the browser’s style computation process.… Read article “Computed Values: More Than Meets the Eye”
I’m excited to share some of the newer features in Chrome DevTools with you. There’s a brief introduction below, and then we’ll cover many of the new DevTools features. We’ll also look at what’s happening in some other browsers. I keep up with this stuff, as I create Dev Tips, the largest collection of DevTools tips you’ll find online! … Read article “A Look at What’s New in Chrome DevTools in 2020”
Here’s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations… even down to the total number of defined media queries.… Read article “New in Chrome: CSS Overview”
There is a feature of Chrome DevTools that lets you:
- “Pretty Print” it (format it for readability)
- Save it to disk
- Use that saved version to override the live version, even on page refresh.
That last one is pretty awesome. If you’re debugging a problem that only seems to happen on the live website, it gives you a debugging tool that will allow … Read article “#174: Using Local Overrides in DevTools”
I’d like to tell you how I see code and design intersect and support one another. Specifically, I want to cover how designers can use code in their everyday work. I suggest this not because it’s a required skill, but because even a baseline understanding of coding can make designs better and the hand-off from design to development smoother.
As a UX Designer, I am always looking for good ways to both explore my UX design problems and communicate the … Read article “Using DevTools to Improve the UX Design to Development Process”