 Tommie Nguyễn |
164 |  Gui Bibeau 165 | |
-
4 |
5 |
6 |
7 |
3 |
12 |
13 |
--------------------------------------------------------------------------------
/snippets/js-destructuring-objects-01-04-2022.js:
--------------------------------------------------------------------------------
1 | const vietnam = {
2 | capital: "Hanoi",
3 | largestCity: "Ho Chi Minh (formerly Saigon)",
4 | currency: "Vietnamese đồng (VND)",
5 | timeZone: "UTC+07:00",
6 | drivingSide: "right",
7 | callingCode: "+84",
8 | };
9 |
10 | // Destructuring a single variable
11 | const { capital } = vietnam;
12 | console.log(capital);
13 |
14 | // Extracting a value that does not exist in an object yet.
15 | const { abbreviation = "VN" } = vietnam;
16 | console.log(abbreviation);
17 |
18 | // Extract a value and rename it
19 | const { timeZone: tz } = vietnam;
20 | console.log(tz);
21 |
22 | // Extracting from a function
23 | const getCities = ({ capital, largestCity }) => {
24 | return `The capital is ${capital} and the largest city is ${largestCity}.`;
25 | };
26 | console.log(getCities(vietnam));
27 |
--------------------------------------------------------------------------------
/snippets/js-do-while-vs-while-loop-10-03-2022.js:
--------------------------------------------------------------------------------
1 | // do...while statements always run the code at least once
2 | // at the beginning before entering the condition.
3 | let appleQuantity = 3;
4 |
5 | do {
6 | appleQuantity = appleQuantity - 1;
7 | } while (appleQuantity > 0);
8 |
9 | // while statements will first enter the condition first
10 | // before executing the code.
11 | let mangoQuantity = 3;
12 |
13 | while (mangoQuantity > 0) {
14 | mangoQuantity = mangoQuantity - 1;
15 | }
16 |
--------------------------------------------------------------------------------
/snippets/js-doc-calculate-tip-16-05-2022.js:
--------------------------------------------------------------------------------
1 | const satisfactionTipRatio = new Map([
2 | ["Correct", 0.1],
3 | ["Good", 0.15],
4 | ["Great", 0.2],
5 | ]);
6 |
7 | /**
8 | calculateTip is used to easily calculate tips and the total price.
9 | @param {number} price - The original price of the meal as a number.
10 | @param {string | number} qualityOrRate - A service quality string such as 'Good', 'Correct' or 'Great.
11 | You can also pass a number such as 0.25 for 25% if you want to do your own custom tip amount.
12 | @returns {number} the price to pay, plus the tip.
13 | */
14 | const calculateTip = (price, qualityOrRate) => {
15 | // Check if the user has passed a quality or a percentage (%).
16 | if (satisfaction.has(qualityOrRate)) {
17 | // Calculate based on the pre-defined service satisfaction.
18 | return price + price * tipsQuality.get(qualityOrRate);
19 | }
20 | // If the user passes a custom tip rate, we calculate it.
21 | if (typeof qualityOrRate === "number") {
22 | return price + price * qualityOrRate;
23 | }
24 |
25 | // Return the price if the user leaves no tips.
26 | return price;
27 | };
28 |
--------------------------------------------------------------------------------
/snippets/js-empty-array-15-04-2022.js:
--------------------------------------------------------------------------------
1 | const vegetables = ["🥕", "🍆", "🥦", "🌶️", "🍄"];
2 |
3 | // This is a way to empty your array:
4 | vegetables.length = 0;
--------------------------------------------------------------------------------
/snippets/js-equality-operators-17-03-2022.js:
--------------------------------------------------------------------------------
1 | console.log(7 == "7");
2 | // Outputs true. It is trying to convert the types to match.
3 |
4 | console.log(7 === "7");
5 | // Outputs false. Assumes the types are initially different.
6 |
--------------------------------------------------------------------------------
/snippets/js-falsy-values-18-03-2022.js:
--------------------------------------------------------------------------------
1 | // Here is an array of possible falsy values.
2 | const falsyValues = [false, 0, ``, "", "", NaN, null, undefined];
3 |
--------------------------------------------------------------------------------
/snippets/js-getComputedStyle-29-04-2022.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | I'm a pink heading🦩
4 | 5 | 16 | 17 | -------------------------------------------------------------------------------- /snippets/js-logical-and-assignment-19-04-2022.js: -------------------------------------------------------------------------------- 1 | let falsy = 0; 2 | let truthy = 1; 3 | let fruit = "Bananas" 4 | 5 | falsy &&= 7; 6 | // The falsy variable would remain 0, because it is a falsy value. 7 | 8 | truthy &&= 8; 9 | // The truthy variable would become 8, because it is a truthy value. 10 | 11 | fruit &&= "Strawberry"; 12 | // The fruit variable is also a truthy value, which assigns it to "Strawberry". -------------------------------------------------------------------------------- /snippets/js-logical-or-assignment-20-04-2022.js: -------------------------------------------------------------------------------- 1 | document.querySelector('.menu').textContent ||= 'Where is my menu? 🥢' 2 | 3 | /* This is a nice use of the logical OR assignment. 4 | In this example, if the HTML element with the class 'menu' contains nothing (falsy value), 5 | it will be assigned: 'Where is my menu? 🥢'. 6 | If it does contain something (truthy value), then it will not assign anything. 7 | */ -------------------------------------------------------------------------------- /snippets/js-map-object-13-05-2022.js: -------------------------------------------------------------------------------- 1 | // Creating a map is done by creating a new instance: 2 | const dogBreeds = new Map(); 3 | 4 | // A JS Map object is about holding key-value pairs. 5 | // Let’s store some dogs’ names and associate their names to their breed! 6 | dogBreeds.set("Chowmein", "Chow Chow"); 7 | // My dog Chowmein is a Chow Chow. 8 | 9 | dogBreeds.set("Goldilocks", "Golden Retriever"); 10 | // My neighbour's dog Goldilocks is a Golden Retriever. 11 | 12 | dogBreeds.set("Lassie", "Rough Collie"); 13 | // My classmate's dog Lassie is a Rough Collie. 14 | 15 | // We can check if a particular key is already in a Map object. 🗺️ 16 | dogBreeds.has("Marmaduke"); 17 | // This will return false, because Marmaduke was not previously included in dogBreeds. 18 | 19 | // We can also verify what is the value of a certain key. 🗝️ 20 | dogBreeds.get("Goldilocks"); 21 | // This will return: "Golden Retriever" 22 | 23 | // Finally, we can also iterate over all the elements of the Map object 🔂 24 | for (const dog of dogBreeds.keys()) { 25 | console.log(dogBreeds.get(dog)); 26 | } 27 | // This will return: "Chow Chow", "Golden Retriever", "Rough Collie" 28 | -------------------------------------------------------------------------------- /snippets/js-math-floor-26-04-2022.js: -------------------------------------------------------------------------------- 1 | Math.floor(0.5); // Returns 0 2 | 3 | Math.floor(3.14); // Returns 3 4 | 5 | Math.floor(-0.7); // Returns -1 6 | 7 | Math.floor(-1.23); // Returns -2 8 | -------------------------------------------------------------------------------- /snippets/js-math-max-min-08-04-2022.js: -------------------------------------------------------------------------------- 1 | Math.max(10, 20, 30, 40); 2 | // This would return 40. 3 | 4 | Math.min(10, 20, 30, 40); 5 | // This would return 10. 6 | 7 | 8 | const numbers = [50, 60, 70, 80, 90 ,100]; 9 | console.log(Math.max(...numbers)); 10 | // First, spread the numbers array in the argument, then call Math.max()! -------------------------------------------------------------------------------- /snippets/js-merge-arrays-06-04-2022.js: -------------------------------------------------------------------------------- 1 | const makeup = ["Lipstick", "Eyeliner", "Mascara", "Foundation"]; 2 | 3 | const skincare = ["Moisturizer", "Toner", "Cleanser"]; 4 | 5 | // Thanks to the spread operator, extracting elements from array can be easier! 6 | const cosmetics = [...makeup, ...skincare]; 7 | 8 | console.log(cosmetics); 9 | // This outputs: ["Lipstick", "Eyeliner", "Mascara", "Foundation", "Moisturizer", "Toner", "Cleanser"] -------------------------------------------------------------------------------- /snippets/js-nullish-coalescing-operator-22-04-2022.js: -------------------------------------------------------------------------------- 1 | const ukraineFlag = null ?? "🇺🇦"; 2 | console.log(ukraineFlag); 3 | // This will output: "🇺🇦", because null is a nullish value. 4 | 5 | const zero = undefined ?? 0; 6 | console.log(zero); 7 | // This will output: 0. undefined is a nullish value too. 8 | 9 | const browser = "Firefox🦊" ?? "Brave🦁" ?? "Chrome"; 10 | console.log(browser); 11 | // This will output "Firefox🦊", because there's no nullish values. 12 | -------------------------------------------------------------------------------- /snippets/js-object-entries-29-03-2022.js: -------------------------------------------------------------------------------- 1 | const cart = { 2 | 123: { 3 | name: "Banh mi sandwich", 4 | quantity: 4, 5 | price: 20, 6 | }, 7 | 567: { 8 | name: "Bowl of pho", 9 | quantity: 6, 10 | price: 1, 11 | }, 12 | }; 13 | 14 | const result = Object.entries(cart).map((entry) => { 15 | const key = entry[0]; 16 | const value = entry[1]; 17 | 18 | return { 19 | itemId: key, 20 | price: value.quantity * value.price, 21 | }; 22 | }); 23 | 24 | // 1. Object.entries(cart) will return: 25 | // [ 26 | // [ 27 | // "123", { 28 | // name: "Banh mi sandwich", 29 | // quantity: 4, 30 | // price: 20 31 | // } 32 | // ], 33 | // [ 34 | // "567", { 35 | // name: "Bowl of pho", 36 | // quantity: 6, 37 | // price: 1 38 | // } 39 | // ] 40 | // ] 41 | 42 | // 2. .map will be used to create a new array 43 | 44 | // 3. Destructure key to be the first value in the array, which will be "123" or "456". 45 | 46 | // 4. Destructure value to be the second value, which is the first object, or second object. 47 | 48 | // 5. Return a new object with the keys and the new object with the updated price. 49 | 50 | console.log(result); 51 | -------------------------------------------------------------------------------- /snippets/js-object-values-26-03-2022.js: -------------------------------------------------------------------------------- 1 | const rupaul = { 2 | name: "RuPaul Charles", 3 | pronouns: "He/she", 4 | occupation: "Drag Queen", 5 | }; 6 | 7 | Object.values(rupaul); 8 | // This returns: ["RuPaul Charles", "He/she", "Drag Queen"] 9 | -------------------------------------------------------------------------------- /snippets/js-object.keys-method-25-03-2022.js: -------------------------------------------------------------------------------- 1 | const tommie = { 2 | name: "Tommie", 3 | pronouns: "she/they", 4 | occupation: "Developer", 5 | }; 6 | 7 | Object.keys(tommie); 8 | // This will return: ['name', 'pronouns', 'occupation'] 9 | -------------------------------------------------------------------------------- /snippets/js-oop-setter-getter-06-05-2022.js: -------------------------------------------------------------------------------- 1 | class RoadTrip { 2 | constructor(destinations) { 3 | // Set the array of cities to visit. 4 | this.destinations = destinations; 5 | } 6 | // Start the trip at 0. 7 | _currentStep = 0; 8 | 9 | // Set the current city we are in. 10 | set current(city) { 11 | this._currentStep = this.destinations.indexOf(city); 12 | } 13 | 14 | // Get the current city. 15 | get currentCity() { 16 | return this.destinations[this._currentStep]; 17 | } 18 | 19 | // Get the next city to visit. 20 | get nextCity() { 21 | return this.destinations[this._currentStep + 1]; 22 | } 23 | } 24 | 25 | // Create an instance of RoadTrip. 26 | const trip = new RoadTrip(["NYC🗽", "Boston🍩", "Miami🌴"]); 27 | 28 | console.log(trip.currentCity); 29 | // This will output to the console: 'NYC🗽'. 30 | 31 | trip.current = trip.nextCity; 32 | // By combining the getter and setter, we move to the next city. 33 | 34 | console.log(trip.currentCity); 35 | // This will output to the console: 'Boston🍩'. 36 | -------------------------------------------------------------------------------- /snippets/js-promise-all-28-05-2022.js: -------------------------------------------------------------------------------- 1 | const saladRecipe = new Promise((resolve) => { 2 | setTimeout(() => { 3 | resolve("Caesar Salad🥗"); 4 | }, 1000); 5 | }); 6 | 7 | const spaghettiRecipe = new Promise((resolve) => { 8 | setTimeout(() => { 9 | resolve("Spaghetti🍝"); 10 | }, 2000); 11 | }); 12 | 13 | const calamariRecipe = new Promise((resolve) => { 14 | setTimeout(() => { 15 | resolve("Fried Calamari🦑"); 16 | }, 3000); 17 | }); 18 | 19 | // Now we want to get all our orders at the same time to the table! 20 | const order = async () => { 21 | // Promise.all accepts an array of promises. Let's create it! 22 | const recipes = [saladRecipe, spaghettiRecipe, calamariRecipe]; 23 | // Now we can use Promise.all to wait for all of them to finish, then get the results. 24 | const myFood = await Promise.all(recipes); 25 | 26 | // The result is an array of the results of each promise. We can use it to combine the food altogether! 27 | const myMeal = `Here is your ${myFood[0]} with ${myFood[1]} and ${myFood[2]}. All received at the same time!`; 28 | console.log(myMeal); 29 | }; 30 | 31 | order(); 32 | -------------------------------------------------------------------------------- /snippets/js-promise-async-await-syntactic-sugar-24-05-2022.js: -------------------------------------------------------------------------------- 1 | const spaghettiRecipe = () => 2 | new Promise((resolve) => { 3 | console.log("Cooking...🍽️, the spaghetti will ready in 2 seconds!"); 4 | 5 | const spaghetti = "🍝"; 6 | 7 | setTimeout(() => { 8 | // We will need this value in other Promises. 9 | resolve(spaghetti); 10 | }, 2000); 11 | }); 12 | 13 | // Add the async keyword before your argument. 14 | const cookingTime = async () => { 15 | // The await keyword will capture the resolved value in the variable. 16 | const spaghetti = await spaghettiRecipe(); 17 | 18 | // You can also just await a promise without capturing its resolved value. 19 | await spaghettiRecipe(); 20 | 21 | return spaghetti; 22 | }; 23 | 24 | /** 25 | ⚠️ These are advanced concepts. Might cause confusion if you did not understand the previous posts. ⚠️ 26 | */ 27 | 28 | // Labelling a function as async means that it will return a promise. Afterwards, you can use .then or await it too. 29 | cookingTime().then(console.log); 30 | -------------------------------------------------------------------------------- /snippets/js-promise-async-await-then-03-05-2022.js: -------------------------------------------------------------------------------- 1 | const API_ROUTE = "https://www.nokeynoshade.party/api/queens/all"; 2 | 3 | const getAllQueens = async () => { 4 | const response = await fetch(API_ROUTE); 5 | const queens = await response.json(); 6 | return queens; 7 | }; 8 | 9 | fetch(API_ROUTE) 10 | .then((data) => data.json()) 11 | .then((queens) => { 12 | // Now, you can do anything you want with the data. 13 | console.log(queens[0]); 14 | }); 15 | 16 | // Link to Twitter post: https://twitter.com/TommiEng/status/1521631124656635906 17 | -------------------------------------------------------------------------------- /snippets/js-promise-introduction-20-05-2022.js: -------------------------------------------------------------------------------- 1 | // We can create a promise with the Promise constructor. 2 | const spaghettiRecipe = new Promise((resolve) => { 3 | console.log("Cooking...🍽️, the spaghetti will ready in 2 seconds!"); 4 | 5 | // Here are instructions on how to get the final value: 6 | const spaghetti = "Dinner is ready!🍝"; 7 | 8 | // Any code requiring time can be in a promise: 9 | setTimeout(() => { 10 | // The resolve value is what matters: 11 | resolve(spaghetti); 12 | }, 2000); 13 | }); 14 | 15 | const cookSpaghettiRecipe = async () => { 16 | // Await this function and store the resolved value in a variable: 17 | const result = await spaghettiRecipe; 18 | console.log(result); 19 | }; 20 | 21 | cookSpaghettiRecipe(); 22 | -------------------------------------------------------------------------------- /snippets/js-promise-reject-30-05-2022.js: -------------------------------------------------------------------------------- 1 | // Rejecting a promise can happen for many reasons. For example, if we have a network error, or if we have a problem with the data we are getting from the server. 2 | 3 | // Let's imagine such a scenario: We have an order for dumplings, but we fried them instead of steaming them like the order says. 4 | 5 | // We only have a recipe for fried dumplings. 6 | const dumplingsRecipe = () => 7 | new Promise((resolve) => { 8 | setTimeout(() => { 9 | resolve("Fried dumplings🥟"); 10 | }, 1000); 11 | }); 12 | 13 | // We now receive an order for boiled dumplings: 14 | const steamedDumplingsOrder = () => 15 | new Promise((resolve, reject) => { 16 | // We have to cook our dumplings with our only recipe. 17 | dumplingsRecipe().then((dumplings) => { 18 | // If we cook our dumplings correctly, we can resolve the promise. 19 | if (dumplings === "Steamed dumplings🥟") { 20 | resolve(dumplings); 21 | // If we cook our dumplings incorrectly, we can reject the promise. 22 | } else { 23 | reject("❌ This is not the dumplings I ordered."); 24 | } 25 | }); 26 | }); 27 | 28 | steamedDumplingsOrder().catch(console.error); 29 | 30 | // Twitter reference: https://twitter.com/TommiEng/status/1531331593704554496 31 | -------------------------------------------------------------------------------- /snippets/js-promise-setTimeout-11-04-2022.js: -------------------------------------------------------------------------------- 1 | async function delay (seconds) { 2 | return new Promise( resolve => { 3 | setTimeout(resolve, seconds * 1000); 4 | }); 5 | } 6 | 7 | async function mainScript() { 8 | console.log("Doing something"); 9 | await delay(1); 10 | console.log("Doing something else"); 11 | await delay(2); 12 | console.log("Doing another thing"); 13 | await delay(3); 14 | console.log("Finished!"); 15 | } 16 | 17 | mainScript(); -------------------------------------------------------------------------------- /snippets/js-promise-then-chaining-23-05-2022.js: -------------------------------------------------------------------------------- 1 | // same Promise as fridays post. 2 | const spaghettiRecipe = new Promise((resolve) => { 3 | console.log("Cooking...🍽️, the spaghetti will ready in 2 seconds!"); 4 | 5 | const spaghetti = "Dinner is ready!🍝"; 6 | setTimeout(() => { 7 | // We will need this value in other promises. 8 | resolve(spaghetti); 9 | }, 2000); 10 | }); 11 | 12 | const cookSpaghettiRecipe = () => { 13 | // Simply typing the promise will kick it off, but that won't do much: 14 | spaghettiRecipe; 15 | 16 | // We need to capture the resolved value. We can do this with the .then method on our promise object. The .then accepts a function: 17 | 18 | spaghettiRecipe 19 | // This function received the promise's resolved value as its argument! 20 | .then((resolvedValue) => { 21 | console.log("Resolved value of first promise: ", resolvedValue); 22 | // This will resolve as: 'Dinner is ready!🍝' 'Dinner is ready!🍝' 23 | return resolvedValue.repeat(2); 24 | }) 25 | // You can chain .then endlessly, as .then itself returns a promise. Kinda like the movie Inception! 26 | 27 | // The return value of the previous .then function will be the resolved value of this new promise. 28 | .then((resolvedValue2) => { 29 | console.log("Resolved value of second promise: ", resolvedValue2); 30 | }); 31 | }; 32 | 33 | cookSpaghettiRecipe(); 34 | -------------------------------------------------------------------------------- /snippets/js-recursive-factorial-14-04-2022.js: -------------------------------------------------------------------------------- 1 | // If the number provided is not 1, the factorial function will call itself! 2 | 3 | const factorial = (number) => { 4 | if (number === 1) { 5 | return number; 6 | } 7 | 8 | return number * factorial(number - 1); 9 | } 10 | 11 | factorial(1); 12 | // This call returns 1. 13 | 14 | factorial(4); 15 | // This would return 4 * 3 * 2 * 1, which equals to 24. -------------------------------------------------------------------------------- /snippets/js-remove-duplicates-array-05-04-2022.js: -------------------------------------------------------------------------------- 1 | const countries = [ 2 | "United States", 3 | "Canada", 4 | "Nigeria", 5 | "India", 6 | "Vietnam", 7 | "Vietnam", 8 | "United Kingdom", 9 | ]; 10 | 11 | const countriesSet = Set(countries); 12 | // countriesSet's value would be: {"United States", "Canada", "Nigeria", "India", "Vietnam", "United Kingdom"}; 13 | 14 | const countriesArray = [...countriesSet]; 15 | // Spread the countriesSet object to put it back into an array form. 16 | 17 | console.log(countriesArray); 18 | // ["United States", "Canada", "Nigeria", "India", "Vietnam", "United Kingdom"]; 19 | -------------------------------------------------------------------------------- /snippets/js-rest-parameters-07-10-2022.js: -------------------------------------------------------------------------------- 1 | const teach = (sport, language, ...subjects) => { 2 | console.log("Sport:", sport); 3 | console.log("Language:", language); 4 | console.log("Other subjects:", subjects); 5 | }; 6 | 7 | teach("Swimming", "JavaScript", "Algebra", "English", "CSS"); 8 | /* 9 | Sport: "Swimming" 10 | Language: "JavaScript" 11 | Other subjects: ["Algebra", "English", "CSS"] 12 | */ 13 | 14 | // Despite that we're just giving one value for the rest parameter, it still becomes an array: 15 | teach("Boxing", "French", "UX Design"); 16 | /* 17 | Sport: "Boxing" 18 | Language: "French" 19 | Other subjects: ["UX Design"] 20 | */ 21 | 22 | // Combining rest parameters with regular parameters: 23 | function filterAdults(limit, ...ages) { 24 | return ages.filter((age) => age >= limit); 25 | } 26 | 27 | const adults = filterAdults(18, 25, 3, 42, 11, 78); 28 | console.log(adults); // [25, 42, 78] 29 | -------------------------------------------------------------------------------- /snippets/js-reverse-string-28-03-2022.js: -------------------------------------------------------------------------------- 1 | const reverse = (string) => { 2 | return [...string].reverse().join(""); 3 | }; 4 | 5 | reverse("Tommie"); 6 | 7 | // Here are the steps: 8 | // 1. [...string] will return: ["T", "o", "m", "m", "i", "e"] 9 | 10 | // 2. [...string].reverse() returns: ["e", "i", "m", "m", "o", "T"] 11 | 12 | // 3. [...string].reverse().join("") returns: "eimmoT" 13 | -------------------------------------------------------------------------------- /snippets/js-set-07-04-2022.js: -------------------------------------------------------------------------------- 1 | // What is a Set? Set objects contains values that can only occur a single time! 2 | // Each of the values are unique, so sets cannot have duplicates! 3 | 4 | // Here’s how would you go to create your first set! 5 | const set = new Set(); 6 | 7 | 8 | // Next, let’s try adding fruits in the set! 9 | set.add('mango'); 10 | set.add('dragon fruit'); 11 | 12 | // Is a certain item in the set? Let’s check it out! 13 | set.has('mango'); // Returns true 14 | set.has('coconut'); // Returns false 15 | 16 | // The dragon fruit is not ripe yet? Time to delete it! 17 | set.delete('dragon fruit'); 18 | 19 | // How many fruits are left in the set? Let’s find out. 20 | set.size(); 21 | 22 | // Nothing like a fresh start. Let’s delete everything! 23 | set.clear(); 24 | -------------------------------------------------------------------------------- /snippets/js-sorting-arrays-23-03-2022.js: -------------------------------------------------------------------------------- 1 | const numbers = [3, 99, 55, 11, 7]; 2 | 3 | numbers.sort(); 4 | // Sorts alphabetically by default when not specifying a function: [11, 3, 55, 7, 99] 5 | 6 | numbers.sort((a, b) => a - b); 7 | // Sorts by ascending order, from smallest to largest numbers: [3, 7, 11, 55, 99] 8 | 9 | numbers.sort((a, b) => b - a); 10 | // Sorts by descending order: [99, 55, 11, 7, 3] 11 | -------------------------------------------------------------------------------- /snippets/js-spread-syntax-04-10-2022.js: -------------------------------------------------------------------------------- 1 | // Use the elements of an array as arguments to a function. 2 | const logMeal = (breakfast, lunch, dinner) => { 3 | console.log(breakfast, lunch, dinner); 4 | }; 5 | 6 | const arguments = ["bagel🥯", "salad🥗", "pad Thai🥡"]; 7 | logMeal(...arguments); 8 | 9 | // Spread syntax in arrays: 10 | const missingParts = ["get", "bitter"]; 11 | const quote = ["don't", ...missingParts, "just", "get", "better"]; 12 | // ["don't", "get", "bitter", "just", "get", "better"] 13 | 14 | // Cloning an array: 15 | const fruitsArray = ["banana🍌", "cherry🍒", "pear🍐"]; 16 | const fruitsArrayCopy = [...fruitsArray]; 17 | 18 | // Concatenate arrays: 19 | const veggies1 = ["mushroom🍄", "cucumber🥒"]; 20 | const veggies2 = ["onion🧅", "garlic🧄"]; 21 | 22 | const veggies = [...veggies1, ...veggies2]; 23 | // ["mushroom🍄", "cucumber🥒", "onion🧅", "garlic🧄"] 24 | 25 | // Spread syntax in objects 26 | const tea = { type: "Green" }; 27 | const cat = { name: "Garfield", breed: "Tabby Persian cat" }; 28 | 29 | const clonedObject = { ...cat }; 30 | // Object { name: "Garfield", breed: "Tabby Persian cat" } 31 | 32 | const newObject = { ...tea, ...cat }; 33 | // Object { type: "Green", name: "Garfield", breed: "Tabby Persian cat" } 34 | -------------------------------------------------------------------------------- /snippets/js-static-OOP-09-05-2022.js: -------------------------------------------------------------------------------- 1 | // Mock data from a Garden API 2 | const vegetables = { 3 | "tomato🍅": 5, 4 | "potato🥔": 10, 5 | }; 6 | 7 | // Static methods are a good way to wrap a REST API and encapsulate it. Here, we are mocking a subset of REST methods around a Garden API. 8 | class GardenAPI { 9 | static getAllVeggies = () => { 10 | return vegetables; 11 | }; 12 | 13 | static eatVeggie = (veggie) => { 14 | vegetables[veggie] = vegetables[veggie] - 1; 15 | }; 16 | 17 | static water = () => { 18 | for (const veggie of Object.keys(vegetables)) { 19 | vegetables[veggie] = vegetables[veggie] + 1; 20 | } 21 | }; 22 | } 23 | 24 | // Get all the veggies! 25 | console.log("We start with these veggies: ", GardenAPI.getAllVeggies()); 26 | 27 | // Eat one and see how many are left! 28 | GardenAPI.eatVeggie("potato🥔"); 29 | console.log("What's left to eat: ", GardenAPI.getAllVeggies()); 30 | 31 | // Let's water the veggies plants! 32 | GardenAPI.water(); 33 | console.log("Watering the following veggies: ", GardenAPI.getAllVeggies()); 34 | 35 | // Static methods have other uses as well (which, we'll explore more later on)! 36 | -------------------------------------------------------------------------------- /snippets/js-string-method-split-17-05-2022.js: -------------------------------------------------------------------------------- 1 | const trivia = 2 | "Taiwan's the first country in Asia to accept same-sex marriage."; 3 | trivia.split(" "); 4 | // This will return: ["Taiwan's", 'the', 'first', 'country', 'in', 'Asia', 'to', 'accept', 'same-sex', 'marriage.'] 5 | 6 | const violations = "Homophobia🏳️🌈,Transphobia🏳️⚧️,Biphobia"; 7 | violations.split(","); 8 | // This would return: ['Homophobia🏳️🌈', 'Transphobia🏳️⚧️', 'Biphobia'] 9 | -------------------------------------------------------------------------------- /snippets/js-template-literals-02-05-2022.js: -------------------------------------------------------------------------------- 1 | const introduction = (name, job) => { 2 | const sentence = `Hello, my name is ${firstName} and I'm a ${job}`; 3 | return sentence; 4 | }; 5 | 6 | console.log(introduction("Tommie", "Software Engineer🧑💻")); 7 | // This outputs: "Hello, my name is Tommie and I'm a Software Engineer🧑💻" 8 | 9 | console.log(`I could 10 | really go for some 11 | Pad thai right now.🥢`); 12 | // This outputs: 13 | // "I could 14 | // really go for some 15 | // Pad thai right now.🥢" 16 | -------------------------------------------------------------------------------- /snippets/js-ternary-04-04-2022.js: -------------------------------------------------------------------------------- 1 | const banana = "yellow"; 2 | 3 | banana === "yellow" 4 | ? console.log(`It's ripe!`) 5 | : console.log(`It's not ripe yet!`); 6 | // Condition ? If : Else 7 | 8 | const bark = (sound) => { 9 | return sound === "Woof" ? "It's a dog!" : "It's not a dog."; 10 | }; 11 | 12 | console.log(bark("Woof")); 13 | // This outputs to the console: "It's a dog!" 14 | 15 | console.log(bark("Meow")); 16 | // This outputs to the console: "It's not a dog." 17 | -------------------------------------------------------------------------------- /snippets/js-the-date-constructor-24-02-2022.js: -------------------------------------------------------------------------------- 1 | // JavaScript date constructor, returns today's date 2 | const today = new Date(); 3 | 4 | console.log(today.getDay()); 5 | // Today's day 6 | 7 | console.log(today.getMonth()); 8 | // Today's month, the month ranging from 0 - 11 9 | 10 | console.log(today.getFullYear()); 11 | // Today's year, which would be 2022 12 | -------------------------------------------------------------------------------- /snippets/js-try-catch-12-04-2022.js: -------------------------------------------------------------------------------- 1 | try { 2 | // Since this function does not exist, it will throw an error. 3 | notDefinedFunction(); 4 | 5 | // You can also do manuel checks and throw Errors! 6 | if (!process.env.VAR) { 7 | throw new Error("VAR is not defined"); 8 | } 9 | } 10 | // Catch will get the first error to occur in the try above. 11 | catch (error) { 12 | console.error(error); 13 | } -------------------------------------------------------------------------------- /snippets/js-typeof-operator-15-03-2022.js: -------------------------------------------------------------------------------- 1 | console.log(typeof "LGBTQ+ in Tech"); 2 | // Returns: "string" 3 | 4 | console.log(typeof 1234); 5 | // Returns: "number" 6 | 7 | console.log(typeof false); 8 | // Returns: "boolean" 9 | 10 | if (typeof variable == "undefined") { 11 | // Catch the error... 12 | } 13 | 14 | // Other types include null, undefined, function. 15 | -------------------------------------------------------------------------------- /snippets/react-accessing-the-dom-13-09-2022.jsx: -------------------------------------------------------------------------------- 1 | // ⚠️ This snippet won't run, as I'm using a fictional UI library as an example! ⚠️ 2 | 3 | import React, { useEffect, useRef } from "react"; 4 | // This imported library doesn't exist. 🙅♀️ It's just here for the sake of the example! 5 | import UILibraryElement from "ui-library-element"; 6 | 7 | const Component = ({ children }) => { 8 | // Creating a ref with the useRef() hook. 🪝 9 | const uiLibraryRef = useRef(); 10 | 11 | useEffect(() => { 12 | // Add a useEffect callback here and using an UI library element to make it look cute. 💄 13 | const node = uiLibraryRef.current; 14 | UILibraryElement.initialize(node); 15 | 16 | // Don't forget to return a cleanup function for when the component is unmounted. 🧹 17 | // If not, we'll have event handlers polluting DOM nodes that aren't in the document anymore. 18 | return () => node.uiLibraryRef.destroy(); 19 | 20 | // Remember to specify your effect's dependencies array! We know that our node will never change, so make it an empty array. 21 | }, []); 22 | 23 | // Adding the ref prop to the div. 👇 24 | return ( 25 |
26 |
28 | );
29 | };
30 |
31 | const App = () => {
32 | return (
33 | {children}
27 | UI Library Element
35 |
6 |
7 |
13 |
14 | );
15 | };
16 |
17 | // Notice how the studentNumber state could've been in App, but it is currently
18 | // in the StudentNumber component, where it's more relevant!
19 | const StudentNumber = () => {
20 | const [studentNumber, setStudentNumber] = useState("");
21 |
22 | return (
23 |
24 |
25 | setStudentNumber(event.target.value)}
29 | placeholder="12345"
30 | />
31 |
32 | );
33 | };
34 |
35 | const Greeting = ({ name }) => {
36 | return {`Welcome back to school ${name} 🎒`}
;
37 | };
38 |
39 | const App = () => {
40 | const [name, setName] = useState("");
41 |
42 | return (
43 |
51 | );
52 | };
53 |
54 | export default App;
55 |
--------------------------------------------------------------------------------
/snippets/react-custom-jsx-component-23-06-2022.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
24 |
--------------------------------------------------------------------------------
/snippets/react-custom-styling-12-07-2022.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "../css-planet-styles.css";
3 |
4 | const Planet = ({ style, planet, className = "", children }) => {
5 | const planetClassName = planet ? `planet--${planet}` : "";
6 |
7 | return (
8 |
12 | {children}
13 |
14 | );
15 | };
16 |
17 | const SolarSystemApp = () => {
18 | return (
19 |
20 |
21 | Mars
22 |
23 |
27 | Earth
28 |
29 | Unknown
30 |
31 | );
32 | };
33 |
34 | export default SolarSystemApp;
35 |
--------------------------------------------------------------------------------
/snippets/react-error-boundary-30-09-2022.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { ErrorBoundary } from "react-error-boundary";
3 |
4 | const ErrorFallback = ({ error }) => {
5 | return (
6 |
7 |
10 | );
11 | };
12 |
13 | const CoffeeMachine = () => {
14 | throw new Error("Coffee machine is out of order. ⛔");
15 | };
16 |
17 | const App = () => {
18 | const [brew, setBrew] = useState(false);
19 | const handleClick = () => setBrew(true);
20 |
21 | return (
22 | ⚠️ Something went wrong with the coffee machine:
8 |{error.message}
9 |
23 |
24 |
25 | {brew ?
27 |
28 | );
29 | };
30 |
31 | export default App;
32 |
--------------------------------------------------------------------------------
/snippets/react-form-intro-14-07-2022.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const PronounsForm = (props) => {
4 |
5 | const handleSubmit = (event) => {
6 | /*
7 | This prevents form submit events' default behaviour (page refresh).
8 | Read more here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
9 | */
10 | event.preventDefault();
11 | const pronouns = event.target.elements[0].value;
12 | props.onSubmitPronouns(pronouns);
13 | }
14 |
15 | return (
16 |
24 | );
25 | }
26 |
27 | const PronounsApp = () => {
28 | const onSubmitPronouns = pronouns => alert(`Your pronouns are: ${pronouns} 🏳️🌈`);
29 | return
20 | ⚠️ Uh oh, an error occured:
22 | );
23 | } else {
24 | return {error.message}
21 |
32 | ⚠️ Uh oh, an error occured:
34 | );
35 | } else if (status === "resolved") {
36 | return {error.message}{" "}
33 |
18 |
22 | {book ? (
23 | I'd like to borrow {book}, please.
24 | ) : (
25 | "Which book(s) would you like to borrow? 📚"
26 | )}
27 |
28 | );
29 | };
30 |
31 | export const App = () => {
32 | return
13 |
23 | );
24 | };
25 |
26 | export default PieApp;
27 |
--------------------------------------------------------------------------------
/snippets/react-lazy-initial-state-11-08-2022.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 |
3 | const Library = ({ defaultBook = "" }) => {
4 | // Use lazy initial state to prevent reading from localStorage on each render:
5 | const [book, setBook] = React.useState(
6 | () => window.localStorage.getItem("book") ?? defaultBook
7 | );
8 |
9 | useEffect(() => {
10 | localStorage.setItem("book", book);
11 | });
12 |
13 | const handleChange = (event) => {
14 | setBook(event.target.value);
15 | };
16 |
17 | return (
18 | Behold a list of delicious pie flavours:
14 | 15 |-
16 | {pies.map((pie) => (
17 |
- 18 | {pie.value} 19 | 20 | ))} 21 |
19 |
23 | {book ? (
24 | I'd like to borrow {book}, please.
25 | ) : (
26 | "Which book(s) would you like to borrow? 📚"
27 | )}
28 |
29 | );
30 | };
31 |
32 | export const App = () => {
33 | return
6 |
7 |
13 |
14 | );
15 | };
16 |
17 | const Bebida = ({ bebida, onBebidaChange }) => {
18 | return (
19 |
20 |
21 |
27 |
28 | );
29 | };
30 |
31 | const Order = ({ taco, bebida }) => {
32 | return (
33 | {`Me gustaría un(a) ${taco} taco y beber un(a) ${bebida} por favor. 🌮`}
34 | );
35 | };
36 |
37 | const App = () => {
38 | const [taco, setTaco] = useState("");
39 | const [bebida, setBebida] = useState("");
40 |
41 | return (
42 |
50 | );
51 | };
52 |
53 | export default App;
54 |
--------------------------------------------------------------------------------
/snippets/react-propTypes-28-05-2022.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
33 |
--------------------------------------------------------------------------------
/snippets/react-spreading-props-21-06-2022.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
21 |
--------------------------------------------------------------------------------
/snippets/react-styling-07-07-2022.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const mars = (
4 |
8 | Planet Mars
9 |
10 | );
11 |
12 | const earth = (
13 |
14 | Planet Earth
15 |
16 | );
17 |
18 | const css = `
19 | .planet {
20 | display: flex;
21 | flex-direction: column;
22 | justify-content: center;
23 | text-align: center;
24 | border-radius: 50%;
25 | }
26 |
27 | .planet--earth {
28 | width: 200px;
29 | height: 200px;
30 | color: white;
31 | }
32 |
33 | .planet--mars {
34 | width: 100px;
35 | height: 100px;
36 | }
37 | `;
38 |
39 | function App() {
40 | return (
41 | <>
42 |
43 | {mars}
44 | {earth}
45 |
46 | );
47 | }
48 |
49 | export default App;
50 |
--------------------------------------------------------------------------------
/snippets/react-styling-with-css-modules-25-08-2022.jsx:
--------------------------------------------------------------------------------
1 | // Suppose we have two files: our styles.module.css file and our JSX file.
2 |
3 | // styles.module.css
4 |
5 | // .hosting {
6 | // font: 2rem Helvetica, Arial, sans-serif;
7 | // color: white;
8 | // background: hsl(268, 29%, 48%);
9 | // padding: 100px;
10 | // text-align: center;
11 | // transition: 100ms ease-in background;
12 | // }
13 |
14 | // .hosting:hover {
15 | // background: black;
16 | // }
17 |
18 | /*
19 | -------------------------------------------------------
20 | */
21 |
22 | // import styles from "../styles.module.css";
23 |
24 | const Hosting = () => {
25 | return (
26 |
27 | Farewell Heroku. Hello Vercel.
28 |
29 | );
30 | };
31 |
32 | export default Hosting;
33 |
--------------------------------------------------------------------------------
/snippets/react-use-effect-dependency-array-16-08-2022.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 |
3 | const TellAJoke = ({
4 | defaultJoke = "What did the big flower say to the littler flower? Hi, bud! 🌼",
5 | }) => {
6 | const [joke, setJoke] = useState(
7 | () => localStorage.getItem("joke") ?? defaultJoke
8 | );
9 |
10 | useEffect(() => {
11 | localStorage.setItem("joke", joke);
12 | }, [joke]);
13 |
14 | const handleChange = (event) => {
15 | setJoke(event.target.value);
16 | };
17 |
18 | return (
19 |
20 |
24 | {joke ? {joke} : "Please tell me a joke. 🤡"}
25 |
26 | );
27 | };
28 |
29 | const App = () => {
30 | return
12 |
16 | {company ? (
17 | You would like to be an intern at {company}.
18 | ) : (
19 | "Please type the company where you'd like to be an intern."
20 | )}
21 |
22 | );
23 | };
24 |
25 | const App = () => {
26 | return
27 |
31 | {guest ? (
32 | Happy birthday, {guest} 🎂
33 | ) : (
34 | "Whose birthday is it today?"
35 | )}
36 |
37 | );
38 | };
39 |
40 | const App = () => {
41 | return