Lighthouse bookmarklet

I use Firefox. You should too. It’s fast, secure, and more privacy-focused than the leading browser from the big G.

When it comes to web development, the CSS developer tooling in Firefox is second-to-none. But when it comes to JavaScript and network-related debugging (like service workers), Chrome’s tools are currently better than Firefox’s (for now). For example, Chrome has a tab in its developer tools that lets you run Lighthouse on the currently open tab.

Yesterday, I got the Calibre newsletter, which always has handy performance-related links from Karolina. She pointed to a Lighthouse extension for Firefox. “Excellent!”, I thought, and I immediately installed it. But I had some qualms about installing a plug-in from Google into a browser from Mozilla, particularly as the plug-in page says:

This is not a Recommended Extension. Make sure you trust it before installing

Well, I gave it a go. It turns out that all it actually does is redirect to the online version of Lighthouse. “Hang on”, I thought. “This could just be a bookmarklet!”

So I immediately uninstalled the browser extension and made this bookmarklet:

Lighthouse

Drag that up to your desktop browser’s bookmarks toolbar. Press it whenever you’re on a site that you want to test.

Have you published a response to this? :

Responses

Šime Vidas

The extension is still broken (for folks who block pop-ups in Firefox https://t.co/RLjrjgb9Vo), so I guess I’ll just use your bookmarklet instead. 😂

Clive Walker

You’re never too old to learn. Every time I work on a new website, I’m always finding and trying new things. I should probably document these more (mainly to help me remember them, ahem). So, let’s start now…

Details, just little details

The <details> element. Holy moly, why did I not know about this?! It’s easy to create a show-hide toggle without JavaScript using the <details> and <summary> elements as described here. Admittedly, this gives a relatively simple content toggle but it’s ideal for a FAQs section on a site. The simplicity wins for me.

Flexbox

I did a lot more work with Flexbox on a recent project. It’s great. That and Grid Layout means that the era of floats for layout is over. Hurrah for that!

Shaping up nicely

Yay! for triangle shapes using CSS and pseudo elements. Using a tool like this CSS triangle generator it’s easy to create triangles with CSS. Then, it’s possible to use these as list item bullet points by adding them to pseudo elements such as li a::before or li::before. See also this post.

Grid overlay

I find it really useful to overlay a grid on my layouts when I’m building them. If I’m building a site from a designer’s static visuals, this also helps the designer compare the site build with their designs. This grid overlay article describes how to create a grid with CSS.

Overlapping things

Positioning a banner image underneath an overlapping header element. Use position:relative and e.g top: -150px on the banner image.

Tools

Most of the above were used on a single website project. It was a challenging and rewarding site to work on. I enjoyed it.

One more thing

in recent weeks, I’ve been reading posts from Modern CSS Solutions which is a great site exploring new CSS methods. The site has really re-invigorated my enthusiasm for CSS. Kudos to Stephanie Eckles for creating the site.

Right, that’s it for this post …..

See you next time.

6 Shares

# Shared by Paul Downey on Tuesday, March 10th, 2020 at 2:27pm

# Shared by Ben Seven on Tuesday, March 10th, 2020 at 3:26pm

# Shared by Patrick Laubner 💬 on Tuesday, March 10th, 2020 at 6:55pm

# Shared by Christoph Zillgens on Tuesday, March 10th, 2020 at 7:46pm

# Shared by Nina Gerling on Tuesday, March 10th, 2020 at 8:46pm

# Shared by Martin Schierle on Friday, March 13th, 2020 at 11:27pm

49 Likes

# Liked by Dave Verdon on Tuesday, March 10th, 2020 at 12:44pm

# Liked by Søren Birkemeyer 🦊 on Tuesday, March 10th, 2020 at 12:44pm

# Liked by Reinhard Amon on Tuesday, March 10th, 2020 at 12:45pm

# Liked by Pekka Hartikainen on Tuesday, March 10th, 2020 at 12:45pm

# Liked by Nick on Tuesday, March 10th, 2020 at 12:46pm

# Liked by @vanderZwan@vis.social on Tuesday, March 10th, 2020 at 12:46pm

# Liked by Q on Tuesday, March 10th, 2020 at 12:46pm

# Liked by Val Head on Tuesday, March 10th, 2020 at 12:47pm

# Liked by Adam Duncan on Tuesday, March 10th, 2020 at 12:47pm

# Liked by EDY HEAN on Tuesday, March 10th, 2020 at 12:47pm

# Liked by Adam Kuhn on Tuesday, March 10th, 2020 at 12:48pm

# Liked by Lincoln Mongillo on Tuesday, March 10th, 2020 at 12:49pm

# Liked by Brian Hart on Tuesday, March 10th, 2020 at 12:53pm

# Liked by Sarah on Tuesday, March 10th, 2020 at 1:04pm

# Liked by Chris Burnell on Tuesday, March 10th, 2020 at 1:22pm

# Liked by Antoine Renault on Tuesday, March 10th, 2020 at 1:30pm

# Liked by Dimitris Grammatiko on Tuesday, March 10th, 2020 at 1:30pm

# Liked by João Hernâni Andrade on Tuesday, March 10th, 2020 at 1:31pm

# Liked by Jan Skovgaard on Tuesday, March 10th, 2020 at 1:31pm

# Liked by Trey Piepmeier on Tuesday, March 10th, 2020 at 1:32pm

# Liked by Emanuel Jochum on Tuesday, March 10th, 2020 at 1:32pm

# Liked by Clearleft on Tuesday, March 10th, 2020 at 1:33pm

# Liked by Jan Skovgaard on Tuesday, March 10th, 2020 at 1:36pm

# Liked by Sven Schüring on Tuesday, March 10th, 2020 at 1:42pm

# Liked by Miles Tincknell on Tuesday, March 10th, 2020 at 2:02pm

# Liked by ProfClayton on Tuesday, March 10th, 2020 at 2:08pm

# Liked by Tim Kadlec on Tuesday, March 10th, 2020 at 2:08pm

# Liked by Stuart Hull on Tuesday, March 10th, 2020 at 2:09pm

# Liked by Scott Orchard on Tuesday, March 10th, 2020 at 2:09pm

# Liked by Paul Downey on Tuesday, March 10th, 2020 at 2:58pm

# Liked by Ben Seven on Tuesday, March 10th, 2020 at 3:53pm

# Liked by Alex アレックス on Tuesday, March 10th, 2020 at 3:53pm

# Liked by Gregg on Tuesday, March 10th, 2020 at 5:56pm

# Liked by John Keiller on Tuesday, March 10th, 2020 at 5:56pm

# Liked by JØⱤĐ₳₦ 💀 ĐØ฿₴Ø₦ on Tuesday, March 10th, 2020 at 6:21pm

# Liked by Dilīp Shukla (दिलीप शुक्ल) on Tuesday, March 10th, 2020 at 6:37pm

# Liked by Nina Gerling on Tuesday, March 10th, 2020 at 10:21pm

# Liked by Christoph Zillgens on Tuesday, March 10th, 2020 at 10:22pm

# Liked by Patrick Laubner 💬 on Tuesday, March 10th, 2020 at 10:22pm

# Liked by David Pich on Tuesday, March 10th, 2020 at 10:23pm

# Liked by Marc Stalfoort on Tuesday, March 10th, 2020 at 10:31pm

# Liked by Kim on Wednesday, March 11th, 2020 at 1:57am

# Liked by Aleksi Peebles on Wednesday, March 11th, 2020 at 2:37am

# Liked by Mark Perry on Wednesday, March 11th, 2020 at 4:07am

# Liked by Batbayar B. on Wednesday, March 11th, 2020 at 4:08am

# Liked by Tolga Eğilmezel on Wednesday, March 11th, 2020 at 6:24am

# Liked by vollepeer on Wednesday, March 11th, 2020 at 7:41am

# Liked by Martin Schierle on Friday, March 13th, 2020 at 11:38pm

# Liked by Elizabeth Sweeny on Friday, March 20th, 2020 at 8:52pm

Previously on this day

5 years ago I wrote Inlining critical CSS for first-time visits

Using Grunt, Apache, and PHP with Twig templates.

7 years ago I wrote Slow glass

Other days, other eyes.

10 years ago I wrote South by Twenty Ten

It’s that time of year again.

18 years ago I wrote Fame at last

Welcome visitors from Kottke.org - have a look ‘round, make yourselves at home.

18 years ago I wrote Creationists in Gateshead

It looks the Bible Belt now extends to England.