Tipify get-elements-bigger-than-viewport

content/languages/javascript.yaml

@@ -843,6 +843,8 @@ references:
   HTMLElement.style: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
   HTMLElement.offsetTop: >-
     https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop
+  HTMLElement.offsetWidth: >-
+    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
   HTMLElement.offsetParent: >-
     https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
   Window.innerWidth: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

content/snippets/js/s/get-elements-bigger-than-viewport.md

@@ -1,26 +1,34 @@
 ---
-title: Get elements bigger than viewport
-type: snippet
+title: Get elements wider than the viewport with JavaScript
+shortTitle: Elements wider than viewport
+type: tip
 language: javascript
 tags: [browser]
 cover: case-study
-excerpt: Returns an array of HTML elements whose width is larger than that of the viewport's.
+excerpt: Ever had elements that horizontally overflow the viewport? This JavaScript function can help you identify them.
 listed: true
-dateModified: 2020-10-22
+dateModified: 2024-07-14
 ---
 
-Returns an array of HTML elements whose width is larger than that of the viewport's.
+One of the most frustrating layout problems is when elements on a page are wider than the viewport, causing horizontal overflow. This can lead to a **poor user experience** and make the content difficult to read or interact with.
 
-- Use `HTMLElement.offsetWidth` to get the width of the `Document`.
-- Use `Array.prototype.filter()` on the result of `Document.querySelectorAll()` to check the width of all elements in the document.
+Identifying the offending elements isn't particularly difficult, but it can be time-consuming, especially on complex pages with many elements. Yet, it's no match for a simple JavaScript function that can do the job for you.
+
+All you need to do to **identify elements wider than the viewport** is to use `Document.querySelectorAll()` with a `'*'` selector and **compare** the width of each element with the width of the viewport. In order to perform this comparison, you can use the `HTMLElement.offsetWidth` property. Then, using `Array.prototype.filter()`, you can return an array of elements that exceed the viewport width.
 
 ```js
 const getElementsBiggerThanViewport = () => {
   const docWidth = document.documentElement.offsetWidth;
+
   return [...document.querySelectorAll('*')].filter(
     el => el.offsetWidth > docWidth
   );
 };
 
-getElementsBiggerThanViewport(); // <div id="ultra-wide-item" />
+getElementsBiggerThanViewport();
+// [<div id="ultra-wide-item" />]
 ```
+
+> [!TIP]
+>
+> This function is mainly meant as way to **identify and fix layout problems**. Running it directly in your **browser's console** will give you a list of elements that are wider than the viewport, which you can then **inspect** and adjust as needed.