Almost 300 days out of every year, there are thunderstorms over Venezuela’s Lake Maracaibo. Called Catatumbo lightning — “Catatumbo means ‘House of Thunder’ in the language of the local Barí people” — the phenomenon is caused by the unique confluence of warm air and water from the Caribbean Sea with the cold air flowing down from the Andes, which nearly surround the lake. The result is near-nightly storms with the world’s highest density of lightning and up to 200 flashes in a minute. It sounds, literally, awe-some.
The short video above is a profile of photographer Jonas Piontek, who has captured some amazing photos and video of the Catatumbo lightning. The NY Times featured some of his photos in this piece about the lightning.
Less than half an hour after the first cloud forms, it starts to flash. It does this faster and faster - 200 flashes a minute is not uncommon. After that, the cloud becomes a giant bulb that lights up the night.
“You can read a newspaper in the middle of the night because it’s so bright,” said Jonas Pointek, a photographer who has documented the storms.
I spend a lot of time in DevTools, and I’m sure you do too. Sometimes I even bounce between them, especially when I’m debugging cross-browser issues. DevTools is a lot like browsers themselves — not all of the features in one browser’s DevTools will be the same or supported in another browser’s DevTools.
But there are quite a few DevTools features that are interoperable, even some lesser-known ones that I’m about to share with you.
For the sake of brevity, I use “Chromium” to refer to all Chromium-based browsers, like Chrome, Edge, and Opera, in the article. Many of the DevTools in them offer the exact same features and capabilities as one another, so this is just my shorthand for referring to all of them at once.
Search nodes in the DOM tree
Sometimes the DOM tree is full of nodes nested in nodes that are nested in other nodes, and so on. That makes it pretty tough to find the exact one you’re looking for, but you can quickly search the DOM tree using Cmd + F (macOS) or Ctrl + F (Windows).
Additionally, you can also search using a valid CSS selector, like .red, or using an XPath, like //div/h1.
Searching text in Chrome DevTools (left), selectors in Firefox DevTools (center), and XPath in Safari DevTools (right)
In Chromium browsers, the focus automatically jumps to the node that matches the search criteria as you type, which could be annoying if you are working with longer search queries or a large DOM tree. Fortunately, you can disable this behavior by heading to Settings (F1) → Preferences → Global → Search as you type → Disable.
After you have located the node in the DOM tree, you can scroll the page to bring the node within the viewport by right-clicking on the nod, and selecting “Scroll into view”.
Access nodes from the console
DevTools provides many different ways to access a DOM node directly from the console.
For example, you can use $0 to access the currently selected node in the DOM tree. Chromium browsers take this one step further by allowing you to access nodes selected in the reverse chronological order of historic selection using, $1, $2, $3, etc.
Another thing that Chromium browsers allow you to do is copy the node path as a JavaScript expression in the form of document.querySelector by right-clicking on the node, and selecting Copy → Copy JS path, which can then be used to access the node in the console.
Here’s another way to access a DOM node directly from the console: as a temporary variable. This option is available by right-clicking on the node and selecting an option. That option is labeled differently in each browser’s DevTools:
Chromium: Right click → “Store as global variable”
Firefox: Right click → “Use in Console”
Safari: Right click → “Log Element”
Access a node as a temporary variable in the console, as shown in Chrome (left), Firefox (center), and Safari (right)
Visualize elements with badges
DevTools can help visualize elements that match certain properties by displaying a badge next to the node. Badges are clickable, and different browsers offer a variety of different badges.
In Safari, there is a badge button in the Elements panel toolbar which can be used to toggle the visibility of specific badges. For example, if a node has a display: grid or display: inline-grid CSS declaration applied to it, a grid badge is displayed next to it. Clicking on the badge will highlight grid areas, track sizes, line numbers, and more, on the page.
Grid overlay with badges in Safari DevTools
The badges that are currently supported in Firefox’s DevTools are listed in the Firefox source docs. For example, a scroll badge indicates a scrollable element. Clicking on the badge highlights the element causing the overflow with an overflow badge next to it.
In Chromium browsers, you can right-click on any node and select “Badge settings…” to open a container that lists all of the available badges. For example, elements with scroll-snap-type will have a scroll-snap badge next to it, which on click, will toggle the scroll-snap overlay on that element.
Taking screenshots
We’ve been able to take screenshots from some DevTools for a while now, but it’s now available in all of them and includes new ways to take full-page shots.
The process starts by right-clicking on the DOM node you want to capture. Then select the option to capture the node, which is labeled differently depending on which DevTools you’re using.
Chrome (left), Safari (middle), and Firefox (right)
Repeat the same steps on the html node to take a full-page screenshot. When you do, though, it’s worth noting that Safari retains the transparency of the element’s background color — Chromium and Firefox will capture it as a white background.
Comparing screenshots in Safari (left) and Chromium (right)
There’s another option! You can take a “responsive” screenshot of the page, which allows you to capture the page at a specific viewport width. As you might expect, each browser has different ways to get there.
Chromium: Cmd + Shift + M (macOS) or Ctrl + Shift + M (Windows). Or click the “Devices” icon next to the “Inspect” icon.
Launching responsive design mode in Safari (left), Firefox (right), and Chromium (bottom)
Chrome tip: Inspect the top layer
Chrome lets you visualize and inspect top-layer elements, like a dialog, alert, or modal. When an element is added to the #top-layer, it gets a top-layer badge next to it, which on click, jumps you to the top-layer container located just after the </html> tag.
The order of the elements in the top-layer container follows the stacking order, which means the last one is on the top. Click the reveal badge to jump back to the node.
Firefox tip: Jump to ID
Firefox links the element referencing the ID attribute to its target element in the same DOM and highlights it with an underline. Use CMD + Click (macOS) or CTRL + Click (Windows) )to jump to the target element with the identifier.
Wrapping up
Quite a few things, right? It’s awesome that there are some incredibly useful DevTools features that are supported in Chromium, Firefox, and Safari alike. Are there any other lesser-known features supported by all three that you like?
There are a few resources I keep close by to stay on top of what’s new. I thought I’d share them with here:
DevTools Tips (Patrick Brosset): A curated collection of helpful cross-browser DevTools tips and tricks.
Dev Tips (Umar Hansa): DevTools tips sent to your inbox!
Take a good look — this may only be available “for a limited period.” | Image: DPReview.com
Amazon will be shutting down DPReview, the trusted and comprehensive camera reviews website, as part of the 18,000 job cuts it announced in January. According to an announcement posted on the site, the DPReview team will continue publishing reviews and other content until April 10th, after which “the site will be locked, with no further updates made.”
The site, started in 1998, has become a cornerstone of camera journalism through thorough and thoughtful reviews. If you were ever researching a DSLR mirrorless camera (or lenses), you’ve almost certainly come across its content. Personally, I spent hours pouring over the outlet’s charts, image samples, and notes on autofocus performance before I bought my first big camera, a Nikon D500.
This is a clever little promo from A24 for the rerelease of Jonathan Demme’s Stop Making Sense, a concert film from 1984 featuring The Talking Heads — it, the promo, features David Byrne dropping into his dry cleaners to pick up an old, big suit. As for the film, it’s getting a 4K restoration and will be out sometime later this year.
“Stop Making Sense” stars core band members David Byrne, Tina Weymouth, Chris Frantz and Jerry Harrison along with Bernie Worrell, Alex Weir, Steve Scales, Lynn Mabry and Edna Holt. The live performance was shot roughly 40 years ago over the course of three nights at Hollywood’s Pantages Theater in December of 1983. It features Talking Heads’ most memorable songs, including “Burning Down the House,” “Once in a Lifetime” and “This Must Be the Place.”
“There was a band. There was a concert,” the Talking Heads said in a statement. “This must be the movie!”
The legendary New Yorker film critic Pauline Kael loved the film, calling it “close to perfection” in this contemporary review:
The director, Jonathan Demme, offers us a continuous rock experience that keeps building, becoming ever more intense and euphoric. This has not been a year when American movies overflowed with happiness; there was some in Splash, and there’s quite a lot in All of Me — especially in its last, dancing minutes. Stop Making Sense is the only current movie that’s a dose of happiness from beginning to end. The lead singer, David Byrne, designed the stage lighting and the elegantly plain performance-art environments (three screens used for back-lit slide projections); there’s no glitter, no sleaze. The musicians aren’t trying to show us how hot they are; the women in the group aren’t there to show us some skin. Seeing the movie is like going to an austere orgy — which turns out to be just what you wanted.
For his new video series, David Friedman of Ironic Sans finds out the secret behind an unusual object that Joe Biden has placed in the Oval Office: an empty picture frame. The object turns out to be….well, I won’t spoil it, but a few other presidents have had this thing in their Oval Offices as well.
Joe Biden put an empty picture frame in the Oval Office and it’s got a lot of people asking questions. Has a photo been removed? Is something being censored and hidden from the public? I have the answer! And it takes us down a bit of a rabbit hole.
A Croatian national has been arrested for allegedly operating NetWire, a Remote Access Trojan (RAT) marketed on cybercrime forums since 2012 as a stealthy way to spy on infected systems and siphon passwords. The arrest coincided with a seizure of the NetWire sales website by the U.S. Federal Bureau of Investigation (FBI). While the defendant in this case hasn’t yet been named publicly, the NetWire website has been leaking information about the likely true identity and location of its owner for the past 11 years.
The article details the mistakes that led to the person’s address...
Log in
