*

author: elioat <elioat@tilde.institute> 2024-12-24 08:56:21 -0500
committer: elioat <elioat@tilde.institute> 2024-12-24 08:56:21 -0500
commit: f717dbccbfbfbd64f352440dcdc42cce72936b70 (patch)
tree: 075c4b6372387fccd0217d068cec30a4d98a557e /js/where/where.test.html
parent: dd37de88a2e87cabd2f5a60369e3c38558f32ebc (diff)
download: tour-f717dbccbfbfbd64f352440dcdc42cce72936b70.tar.gz
1 files changed, 33 insertions, 29 deletions
diff --git a/js/where/where.test.html b/js/where/where.test.html
index 0b2fcf6..161ecf1 100644
--- a/js/where/where.test.html
+++ b/js/where/where.test.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>Where Function Tests</title>
+    <title>Where?</title>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
         body { 
             font-family: monospace; 
@@ -37,14 +38,17 @@
     </style>
 </head>
 <body>
-    <h1>Where Function Documentation & Tests</h1>
+    <h1>Where?</h1>
 
     <section>
         <h2>Overview</h2>
         <p>
-            The <code>where()</code> function provides SQL-like filtering for JavaScript arrays of objects.
+            This <code>where()</code> function aims to provide sql-like filtering for arrays of objects.
             It allows you to filter collections using simple or complex criteria, including nested properties.
         </p>
+        <p>
+            Could you usually use <code>Array.filter()</code> instead? Yes, almost always. But I think this is a bit prettier.
+        </p>
     </section>
 
     <section>
@@ -52,26 +56,26 @@
         <div class="example">
             <pre>
 const users = [
-    { name: 'John', age: 30 },
-    { name: 'Jane', age: 25 },
-    { name: 'Bob', age: 30 }
+    { name: 'Tziporah', age: 30 },
+    { name: 'Bruce', age: 25 },
+    { name: 'Ruth', age: 30 }
 ];
 
-// Find all users who are 30 years old
+// Find everyone who is 30 years old
 const thirtyYearOlds = where(users, { age: 30 });
-// Result: [{ name: 'John', age: 30 }, { name: 'Bob', age: 30 }]</pre>
+// Result: [{ name: 'Tziporah', age: 30 }, { name: 'Ruth', age: 30 }]</pre>
         </div>
     </section>
 
     <section>
-        <h2>Advanced Features</h2>
+        <h2>More Advanced Features</h2>
         
         <h3>1. Nested Object Properties</h3>
         <div class="example">
             <pre>
 const users = [
     { 
-        name: 'John',
+        name: 'Bruce',
         preferences: { 
             theme: 'dark',
             notifications: { email: true }
@@ -79,7 +83,7 @@ const users = [
     }
 ];
 
-// Find users with dark theme
+// Find people with the dark theme enabled
 const darkThemeUsers = where(users, {
     preferences: { theme: 'dark' }
 });</pre>
@@ -97,7 +101,7 @@ const darkThemeUsers = where(users, {
         <h3>3. Multiple Criteria</h3>
         <div class="example">
             <pre>
-// Find users who are 30 AND prefer dark theme
+// Find folks who are 30 AND prefer dark theme
 const result = where(users, {
     age: 30,
     'preferences.theme': 'dark'
@@ -109,12 +113,12 @@ const result = where(users, {
             <pre>
 const users = [
     { 
-        name: 'John',
+        name: 'Jeremiah',
         hobbies: ['reading', 'music']
     }
 ];
 
-// Find users with exact hobby matches
+// Find people with exact hobby matches
 const readers = where(users, {
     hobbies: ['reading', 'music']
 });</pre>
@@ -122,14 +126,14 @@ const readers = where(users, {
     </section>
 
     <section>
-        <h2>Key Features</h2>
+        <h2>The Key Features</h2>
         <ul>
-            <li>Supports deep object comparison</li>
+            <li>Deep object comparison</li>
             <li>Handles null/undefined values</li>
-            <li>Supports both nested object and dot notation</li>
+            <li>Supports nested object and dot notation</li>
             <li>Exact array matching</li>
             <li>Multiple criteria (AND logic)</li>
-            <li>Memoized for performance</li>
+            <li>Memoized for performance 🏃‍♂️</li>
         </ul>
     </section>
 
@@ -141,12 +145,12 @@ const readers = where(users, {
             <pre>
 const users = [
     { 
-        name: 'John',
+        name: 'Bruce',
         hobbies: ['reading', 'music', 'hiking']
     }
 ];
 
-// This will NOT match John's hobbies
+// This won't match Bruce's hobbies
 const result = where(users, {
     hobbies: ['reading', 'music']
 }); // Returns []
@@ -157,7 +161,7 @@ const result = where(users, {
         <h3>2. OR Operations</h3>
         <div class="example">
             <pre>
-// This will NOT work for finding users aged 25 OR 30
+// This won't work for finding users aged 25 OR 30
 const result = where(users, {
     age: [25, 30]  // This looks for an exact array match
 });
@@ -174,7 +178,7 @@ const result = users.filter(user =>
 // These operations are NOT supported:
 where(users, {
     age: (age) => age > 30,     // Function predicates
-    salary: { $gt: 50000 },     // MongoDB-style operators
+    salary: { $gt: 50000 },     // MongoDB-style operators 🤮
     'name.length': 4            // Property operations
 });</pre>
         </div>
@@ -182,7 +186,7 @@ where(users, {
         <h3>4. Regular Expressions</h3>
         <div class="example">
             <pre>
-// RegExp matching is NOT supported
+// RegExp matching also isn't implemented
 where(users, {
     email: /.*@gmail\.com$/
 });
@@ -196,22 +200,22 @@ const gmailUsers = users.filter(user =>
         <h3>5. When Not to Use</h3>
         <ul>
             <li><strong>Complex Filtering Logic:</strong> If you need OR conditions, ranges, or custom predicates</li>
-            <li><strong>Large Data Sets:</strong> When performance is critical and you need indexed operations</li>
-            <li><strong>Dynamic Queries:</strong> When query conditions need to be built dynamically with different operators</li>
-            <li><strong>Partial Matches:</strong> When you need partial array matches or string contains operations</li>
+            <li><strong>Large Data Sets:</strong> When performance is critical and you need indexed operations...probably don't use JavaScript</li>
+            <li><strong>Dynamic Queries:</strong> When query conditions need to be built from different operators on the fly</li>
+            <li><strong>Partial Matches:</strong> When you need partial array matches or when a string contains operations</li>
         </ul>
 
         <h3>6. Performance Considerations</h3>
         <div class="example">
             <pre>
-// Avoid deep nesting with large arrays
+// Avoid deeply nesting with large arrays
 const deeplyNested = where(largeArray, {
     'level1.level2.level3.level4.property': value
 });
 
-// Each level of nesting increases comparison complexity
+// Each level of nesting increases complexity
 
-// Better to use direct access if possible:
+// Use direct access whenever possible:
 const result = largeArray.filter(item => 
     item.level1?.level2?.level3?.level4?.property === value
 );</pre>
author	elioat <elioat@tilde.institute>	2024-12-24 08:56:21 -0500
committer	elioat <elioat@tilde.institute>	2024-12-24 08:56:21 -0500
commit	f717dbccbfbfbd64f352440dcdc42cce72936b70 (patch)
tree	075c4b6372387fccd0217d068cec30a4d98a557e /js/where/where.test.html
parent	dd37de88a2e87cabd2f5a60369e3c38558f32ebc (diff)
download	tour-f717dbccbfbfbd64f352440dcdc42cce72936b70.tar.gz