Content updates

content/collections/js/css-manipulation.yaml

@@ -10,8 +10,7 @@ snippetIds:
   - js/s/set-style-for-html-element
   - js/s/add-styles-to-html-element
   - js/s/inject-css
-  - js/s/hide-html-elements
-  - js/s/show-html-elements
+  - js/s/show-hide-html-elements
   - js/s/remove-attributes
   - js/s/prefix-css-property
 splash: planning.png

content/languages/javascript.yaml

@@ -743,3 +743,8 @@ references:
     https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
   decodeURIComponent(): >-
     https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+  Element.attributes: https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes
+  Element.removeAttribute(): >-
+    https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
+  CSSStyleDeclaration: >-
+    https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration

content/redirects.yaml

@@ -973,12 +973,6 @@
 - from: /js/s/remove-event-listener-all
   to: /js/s/remove-multiple-event-listeners
   status: 301!
-- from: /js/s/hide
-  to: /js/s/hide-html-elements
-  status: 301!
-- from: /js/s/show
-  to: /js/s/show-html-elements
-  status: 301!
 - from: /js/s/atob
   to: /js/s/decode-base64-encoded-string
   status: 301!
@@ -1942,3 +1936,15 @@
 - from: /js/s/bifurcate-array-based-on-values
   to: /js/s/bifurcate-array
   status: 301!
+- from: /js/s/hide
+  to: /js/s/show-hide-html-elements
+  status: 301!
+- from: /js/s/show
+  to: /js/s/show-hide-html-elements
+  status: 301!
+- from: /js/s/hide-html-elements
+  to: /js/s/show-hide-html-elements
+  status: 301!
+- from: /js/s/show-html-elements
+  to: /js/s/show-hide-html-elements
+  status: 301!

content/snippets/js/s/prefix-css-property.md

@@ -1,16 +1,53 @@
 ---
-title: Prefix CSS property
-type: snippet
+title: Use JavaScript to prefix a CSS property based on the browser
+shortTitle: Prefix CSS property
+type: story
 language: javascript
-tags: [browser]
+tags: [browser,css]
 cover: cancel-typographer
-dateModified: 2020-10-22
+excerpt: Not sure if you need to prefix a CSS property in order to use it? Here's a simple way to figure it out!
+dateModified: 2023-10-20
 ---
 
-Prefixes a CSS property based on the current browser.
+Sometimes, you want to use a **CSS property** that is **not yet supported by all browsers**. Browsers often support these properties by using a **vendor prefix**, which is a string that is prepended to the property name. For example, Safari uses `-webkit-`, Firefox uses `-moz-` etc.
 
-- Use `Array.prototype.findIndex()` on an array of vendor prefix strings to test if `Document.body` has one of them defined in its `CSSStyleDeclaration` object, otherwise return `null`.
-- Use `String.prototype.charAt()` and `String.prototype.toUpperCase()` to capitalize the property, which will be appended to the vendor prefix string.
+But how can you **detect if a browser supports a certain CSS property**? And how can you prefix a CSS property based on the current browser? Luckily, the `CSSStyleDeclaration` interface exposes dashed and camel-cased attributes for all supported CSS properties.
+
+In order to use this interface, you can access the `style` property of the `Document.body` object. Then, you can **check if the property is defined** as-is or with a vendor prefix.
+
+```js
+// Check if the 'appearance' property is defined
+typeof document.body.style.appearance !== 'undefined';
+
+// Check explicitly for the 'webkitAppearance' property
+typeof document.body.style.webkitAppearance !== 'undefined';
+```
+
+This is pretty simple to check for a specific property or browser environment, but it's a hassle to do this for multiple properties and browsers. As **browser prefixes are well-known**, you can use an array of prefixes to check against each one of them.
+
+```js
+// Known browser prefixes (empty string for the default property)
+const prefixes = ['', 'webkit', 'moz', 'ms', 'o'];
+```
+
+Prefixed properties can be checked, using the **camel-cased attribute** of the `CSSStyleDeclaration` interface. You can use `String.prototype.charAt()` and `String.prototype.toUpperCase()` to **capitalize the property name**, which will be appended to the vendor prefix string.
+
+```js
+const prop = 'appearance';
+const prefixes = ['', 'webkit', 'moz', 'ms', 'o'];
+const capitalizedProp = prop.charAt(0).toUpperCase() + prop.slice(1);
+
+prefixes.map(prefix => (prefix ? prefix + capitalizedProp : prop));
+// [
+//  'appearance',
+//  'webkitAppearance',
+//  'mozAppearance',
+//  'msAppearance',
+//  'oAppearance'
+// ]
+```
+
+Finally, you can use `Array.prototype.findIndex()` to check if `Document.body` has one of the prefixed properties defined in its `CSSStyleDeclaration` object. If it does, you can return the prefixed property, otherwise you can return `null`.
 
 ```js
 const prefix = prop => {
@@ -27,5 +64,6 @@ const prefix = prop => {
 
 ```js
 prefix('appearance');
-// 'appearance' on a supported browser, otherwise 'webkitAppearance', 'mozAppearance', 'msAppearance' or 'oAppearance'
+// 'appearance' on a supported browser, otherwise 'webkitAppearance',
+//   'mozAppearance', 'msAppearance' or 'oAppearance'
 ```

content/snippets/js/s/remove-attributes.md

@@ -1,16 +1,24 @@
 ---
-title: Remove attributes
-type: snippet
+title: Remove attributes from an HTML element with JavaScript
+shortTitle: Remove attributes
+type: tip
 language: javascript
 tags: [browser]
 cover: new-york
-dateModified: 2022-07-20
+excerpt: A simple trick to remove one or more attributes from an HTML element.
+dateModified: 2023-10-21
 ---
 
-Removes all attributes from an HTML element.
+Any attribute of an HTML element can be removed, using the `Element.removeAttribute()` method. This allows you to specify an attribute name, and remove it from the element.
 
-- Use `Element.attributes` and `Object.values()` to get all the attributes of the element.
-- Use `Array.prototype.forEach()` and object destructuring to get the name of each attribute and `Element.removeAttribute()` to remove it from the element.
+```js
+document.querySelector('img').removeAttribute('src');
+// Removes the 'src' attribute from the <img> element
+```
+
+But what if you want to **remove all attributes** from an HTML element? `Element.attributes` is a property that contains a list of all the attributes of an element.
+
+In order to enumerate an element's attributes, `Object.values()` can be used. The array of attributes can then be iterated using `Array.prototype.forEach()` to remove each one from the element.
 
 ```js
 const removeAttributes = element =>
@@ -21,5 +29,6 @@ const removeAttributes = element =>
 
 ```js
 removeAttributes(document.querySelector('p.special'));
-// The paragraph will not have the 'special' class anymore
+// The paragraph will not have the 'special' class anymore,
+//  and all other attributes will be removed
 ```

content/snippets/js/s/show-hide-html-elements.md

@@ -0,0 +1,36 @@
+---
+title: Show or hide HTML elements with JavaScript
+shortTitle: Show or hide HTML elements
+type: story
+language: javascript
+tags: [browser,css]
+cover: picking-berries
+excerpt: Ever wanted to show or hide one or more elements in HTML, using JavaScript? Turns out it's very easy to do so.
+dateModified: 2023-10-22
+---
+
+JavaScript allows you to **change the CSS properties of an element** by accessing its [`style` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style). This way, you can show or hide HTML elements by changing their [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) property.
+
+Combining this technique with the spread operator (`...`) and `Array.prototype.forEach()` allows you to **show or hide multiple elements at once**.
+
+### Hide HTML elements
+
+In order to hide an HTML element, you can use the `display: none` CSS property. This will remove the element from the page layout, but it will still be present in the DOM.
+
+```js
+const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));
+
+hide(...document.querySelectorAll('img'));
+// Hides all <img> elements on the page
+```
+
+### Show HTML elements
+
+Most HTML elements have a default `display` property value. For example, the default value for `<div>` elements is `block`, while the default value for `<span>` elements is `inline`. In order to show an element, you can set its `display` property to its default value, or to an empty string (`''`).
+
+```js
+const show = (...el) => [...el].forEach(e => (e.style.display = ''));
+
+show(...document.querySelectorAll('img'));
+// Shows all <img> elements on the page
+```