Merge 3719b4943a into 162a7ceea3

Use modern way to achieve aspect-ratio without any hacks and workarounds.

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1636 TILs and counting..._
+_1637 TILs and counting..._
 
 See some of the other learning resources I work on:
 - [Ruby Operator Lookup](https://www.visualmode.dev/ruby-operators)
@@ -556,6 +556,7 @@ If you've learned something here, support my efforts writing daily TILs by
 - [Find Where Yarn Is Installing Binaries](javascript/find-where-yarn-is-installing-binaries.md)
 - [for...in Iterates Over Object Properties](javascript/for-in-iterates-over-object-properties.md)
 - [Format A Decimal To A Fixed Number Of Digits](javascript/format-a-decimal-to-a-fixed-number-of-digits.md)
+- [Format A List Of Items By Locale](javascript/format-a-list-of-items-by-locale.md)
 - [Format Time Zone Identifier](javascript/format-time-zone-identifier.md)
 - [Formatting Values With Units For Display](javascript/formatting-values-with-units-for-display.md)
 - [Freeze An Object, Sorta](javascript/freeze-an-object-sorta.md)

css/display-responsive-iframe-maintaining-aspect-ratio.md

@@ -1,4 +1,4 @@
-# Display Responsive iframe Maintaining Aspect Ratio
+# Display Responsive iframe Maintaining Aspect Ratio modern way
 
 Generally when rendering an iframe, you'll specify the `width` and `height`
 properties to give it a fixed display size.
@@ -6,9 +6,8 @@ properties to give it a fixed display size.
 You can make the iframe responsively expand to the full width of its parent
 while maintaining its aspect ratio using a little CSS.
 
-First, remove the `width` and `height` properties.
+1. First, remove the `width` and `height` properties.
-
+2. Second, add a wrapping iframe container:
-Second, add a wrapping iframe container:
 
 ```html
 <div class="iframe-container">
@@ -16,23 +15,12 @@ Second, add a wrapping iframe container:
 </div>
 ```
 
-Third, sprinkle on a little CSS to make it responsive:
+3. Sprinkle on a little CSS to make it responsive:
 
 ```css
 .iframe-container {
-  position: relative;
-  overflow: hidden;
-  /* 16:9 aspect ratio */
-  padding-top: 56.25%;
-}
-
-.iframe-container iframe {
-  position: absolute;
   width: 100%;
-  height: 100%;
+  aspect-ratio: 16 / 9;
-  top: 0;
-  left: 0;
-  border: 0;
 }
 ```
 

javascript/format-a-list-of-items-by-locale.md

@@ -0,0 +1,42 @@
+# Format A List Of Items By Locale
+
+The `Intl` module includes a [`ListFormat`
+object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat)
+which can be used to format a list of items in a consistent way across locales.
+
+I've reinvented the wheel of writing a helper function numerous times across
+projects for formatting a list of items that accounts for formatting based on
+how many items there are. This built-in function handles that with the added
+benefit of working across locales.
+
+Here are lists of three, two, and one items formatted in the `long` styles for
+US english.
+
+```javascript
+> const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
+undefined
+
+> formatter.format(['Alice', 'Bob', 'Carla'])
+'Alice, Bob, and Carla'
+
+> formatter.format(['Coffee', 'Tea'])
+'Coffee and Tea'
+
+> formatter.format(['Taco'])
+'Taco'
+```
+
+The difference between `long` and `short` style for a `conjunction` is _and_
+versus _&_. In addition to the type`conjunction`, you could also use
+`disjunction` which will do an _or_ instead of an _and_. I'm not sure what
+you'd use the `unit` type for.
+
+You could use another locale, such as French, as well:
+
+```javascript
+> const formatter = new Intl.ListFormat('fr', { style: 'long', type: 'conjunction' });
+undefined
+
+> formatter.format(['café', 'thé'])
+'café et thé'
+```