Merge 5615da920f into aaddc35fcd

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).
 
-_1559 TILs and counting..._
+_1560 TILs and counting..._
 
 See some of the other learning resources I work on:
 - [Ruby Operator Lookup](https://www.visualmode.dev/ruby-operators)
@@ -195,7 +195,7 @@ See some of the other learning resources I work on:
 - [Aliasing An Ansible Host](devops/aliasing-an-ansible-host.md)
 - [Allow Cross-Origin Requests To Include Cookies](devops/allow-cross-origin-requests-to-include-cookies.md)
 - [Allow HTTPS Through Your UFW Firewall](devops/allow-https-through-your-ufw-firewall.md)
-- [Check For Cached Site Assocation File For iOS](devops/check-for-cached-site-association-file-for-ios.md)
+- [Check For Cached Site Association File For iOS](devops/check-for-cached-site-association-file-for-ios.md)
 - [Check The Status of All Services](devops/check-the-status-of-all-services.md)
 - [Check The Syntax Of nginx Files](devops/check-the-syntax-of-nginx-files.md)
 - [Connect To An RDS PostgreSQL Database](devops/connect-to-an-rds-postgresql-database.md)
@@ -454,6 +454,7 @@ See some of the other learning resources I work on:
 - [Adding Alt Text To An Image](html/adding-alt-text-to-an-image.md)
 - [Determine Which Button Submitted The Form](html/determine-which-button-submitted-the-form.md)
 - [Disable Auto-Completion For A Form Input](html/disable-auto-completion-for-a-form-input.md)
+- [Disclose Additional Details](html/disclose-additional-details.md)
 - [Make Elements Non-Interactive With Inert](html/make-elements-non-interactive-with-inert.md)
 - [Prevent Search Engines From Indexing A Page](html/prevent-search-engines-from-indexing-a-page.md)
 - [Render Text As Superscript](html/render-text-as-superscript.md)
@@ -760,7 +761,7 @@ See some of the other learning resources I work on:
 - [Check If Clusters Are Upgrade Compatible](postgres/check-if-clusters-are-upgrade-compatible.md)
 - [Check If The Local Server Is Running](postgres/check-if-the-local-server-is-running.md)
 - [Check If User Role Exists For Database](postgres/check-if-user-role-exists-for-database.md)
-- [Check Table For Any Oprhaned Records](postgres/check-table-for-any-orphaned-records.md)
+- [Check Table For Any Orphaned Records](postgres/check-table-for-any-orphaned-records.md)
 - [Checking Inequality](postgres/checking-inequality.md)
 - [Checking The Type Of A Value](postgres/checking-the-type-of-a-value.md)
 - [Clear The Screen In psql](postgres/clear-the-screen-in-psql.md)

html/disclose-additional-details.md

@@ -0,0 +1,28 @@
+# Disclose Additional Details
+
+You can add extra details to an HTML page that are only disclosed if the user
+chooses to disclose them. To do that, we use the `<details>` tag. This tag
+needs to have a `<summary>` tag nested within it. Anything else nested within
+`<details>` will be what is disclosed when it is toggled open. The `<summary>`
+is what is displayed when it is not open.
+
+Here is a `<detail>` block I recently added to [Ruby Operator
+Lookup](https://www.visualmode.dev/ruby-operators).
+
+```html
+<details className="pt-2 pb-6">
+  <summary>What is this thing?</summary>
+  <p className="pl-3 pt-2 text-gray-700 text-sm">
+    Ruby is an expressive, versatile, and flexible dynamic programming language. That means there are all kinds of syntax features, operators, and symbols we can encounter that might look unfamiliar and are hard to look up. Ruby Operator Lookup is a directory of all these language features.
+  </p>
+  <p className="pl-3 pt-2 text-gray-700 text-sm">
+    Use the search bar to narrow down the results. Then click on a button for the operator or symbol you want to explore further.
+  </p>
+</details>
+```
+
+On page load, the only thing we see is "What is this thing?" with a triangle
+symbol next to it. If we click the summary, then the entire details block
+(those two `<p>` tags) are disclosed.
+
+[source](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)