Forked from bgoonz/2020-11-12_Everything-You-Need-To-Become-A-Machine-Learner-382ee243f23c.md
Last active
April 11, 2022 20:37
-
-
Save lynsei/cf73604bba301e76dd47bfa5bd6a4e89 to your computer and use it in GitHub Desktop.
Revisions
-
bgoonz created this gist
Sep 23, 2021 .Sorry, we could not display the entire diff because it was too big.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,296 @@ A Quick Guide to Big-O Notation, Memoization, Tabulation, and Sorting Algorithms by Example =========================================================================================== Curating Complexity: A Guide to Big-O Notation ------------------------------------------------------------------------ ### A Quick Guide to Big-O Notation, Memoization, Tabulation, and Sorting Algorithms by Example <figure><img src="https://cdn-images-1.medium.com/max/800/0*yjlSk3T9c2_14in1.png" class="graf-image" /></figure>***Curating Complexity: A Guide to Big-O Notation*** <a href="https://replit.com/@bgoonz/Medium-article-comp-complex" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://replit.com/@bgoonz/Medium-article-comp-complex"><strong>Medium-article-comp-complex</strong><br /> <em>A Node.js repl by bgoonz</em>replit.com</a><a href="https://replit.com/@bgoonz/Medium-article-comp-complex" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> - <span id="b70f">Why is looking at runtime not a reliable method of calculating time complexity?</span> - <span id="2b21">Not all computers are made equal( some may be stronger and therefore boost our runtime speed )</span> - <span id="1e1a">How many background processes ran concurrently with our program that was being tested?</span> - <span id="1cad">We also need to ask if our code remains performant if we increase the size of the input.</span> - <span id="3cb7">The real question we need to answering is: `How does our performance scale?`.</span> ### big ‘O’ notation - <span id="9b21">Big O Notation is a tool for describing the efficiency of algorithms with respect to the size of the input arguments.</span> - <span id="c0e6">Since we use mathematical functions in Big-O, there are a few big picture ideas that we’ll want to keep in mind:</span> - <span id="2e86">The function should be defined by the size of the input.</span> - <span id="07b0">`Smaller` Big O is better (lower time complexity)</span> - <span id="f1b0">Big O is used to describe the worst case scenario.</span> - <span id="e11f">Big O is simplified to show only its most dominant mathematical term.</span> ### Simplifying Math Terms - <span id="64a4">We can use the following rules to simplify the our Big O functions:</span> - <span id="a2c2">`Simplify Products` : If the function is a product of many terms, we drop the terms that don't depend on n.</span> - <span id="b058">`Simplify Sums` : If the function is a sum of many terms, we drop the non-dominant terms.</span> - <span id="eb32">`n` : size of the input</span> - <span id="c042">`T(f)` : unsimplified math function</span> - <span id="7b41">`O(f)` : simplified math function.</span> `Putting it all together` <figure><img src="https://cdn-images-1.medium.com/max/800/1*TT8uuv1x3nmGUw5rvtoZ8A.png" class="graf-image" /></figure>- <span id="d18b">First we apply the product rule to drop all constants.</span> - <span id="4335">Then we apply the sum rule to select the single most dominant term.</span> ------------------------------------------------------------------------ ### Complexity Classes Common Complexity Classes #### There are 7 major classes in Time Complexity <figure><img src="https://cdn-images-1.medium.com/max/800/1*6zKhmJoHkvDbrd8jfUDf3A.png" class="graf-image" /></figure>#### `O(1) Constant` > **The algorithm takes roughly the same number of steps for any input size.** #### `O(log(n)) Logarithmic` > **In most cases our hidden base of Logarithmic time is 2, log complexity algorithm’s will typically display ‘halving’ the size of the input (like binary search!)** #### `O(n) Linear` > **Linear algorithm’s will access each item of the input “once”.** ### `O(nlog(n)) Log Linear Time` > **Combination of linear and logarithmic behavior, we will see features from both classes.** > Algorithm’s that are log-linear will use **both recursion AND iteration.** ### `O(nc) Polynomial` > **C is a fixed constant.** ### `O(c^n) Exponential` > **C is now the number of recursive calls made in each stack frame.** > **Algorithm’s with exponential time are VERY SLOW.** ------------------------------------------------------------------------ ### Memoization - <span id="b3b0">Memoization : a design pattern used to reduce the overall number of calculations that can occur in algorithms that use recursive strategies to solve.</span> - <span id="2583">MZ stores the results of the sub-problems in some other data structure, so that we can avoid duplicate calculations and only ‘solve’ each problem once.</span> - <span id="65c9">Two features that comprise memoization:</span> 1. <span id="b2d2">FUNCTION MUST BE RECURSIVE.</span> 2. <span id="91a3">Our additional Data Structure is usually an object (we refer to it as our memo… or sometimes cache!)</span> <figure><img src="https://cdn-images-1.medium.com/max/800/1*4U79jBMjU2wKE_tyYcD_3A.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/1*Qh42KZgcCxmVt6WrTasCVw.png" class="graf-image" /></figure>### Memoizing Factorial Our memo object is *mapping* out our arguments of factorial to it’s return value. - <span id="854a">Keep in mind we didn’t improve the speed of our algorithm.</span> ### Memoizing Fibonacci <figure><img src="https://cdn-images-1.medium.com/max/800/0*2XaPj7UGKZYFjYhb" class="graf-image" /></figure>- <span id="5be6">Our time complexity for Fibonacci goes from O(2^n) to O(n) after applying memoization.</span> ### The Memoization Formula > *Rules:* 1. <span id="b3f0">*Write the unoptimized brute force recursion (make sure it works);*</span> 2. <span id="b36e">*Add memo object as an additional argument .*</span> 3. <span id="f81f">*Add a base case condition that returns the stored value if the function’s argument is in the memo.*</span> 4. <span id="1b0f">*Before returning the result of the recursive case, store it in the memo as a value and make the function’s argument it’s key.*</span> #### Things to remember 1. <span id="bc4a">*When solving DP problems with Memoization, it is helpful to draw out the visual tree first.*</span> 2. <span id="7bb1">*When you notice duplicate sub-tree’s that means we can memoize.*</span> ------------------------------------------------------------------------ ### Tabulation #### Tabulation Strategy > Use When: - <span id="f5b0">**The function is iterative and not recursive.**</span> - <span id="015c">*The accompanying DS is usually an array.*</span> #### Steps for tabulation - <span id="8918">*Create a table array based off the size of the input.*</span> - <span id="b4e7">*Initialize some values in the table to ‘answer’ the trivially small subproblem.*</span> - <span id="072e">*Iterate through the array and fill in the remaining entries.*</span> - <span id="192e">*Your final answer is usually the last entry in the table.*</span> ------------------------------------------------------------------------ ### Memo and Tab Demo with Fibonacci > *Normal Recursive Fibonacci* function fibonacci(n) { if (n <= 2) return 1; return fibonacci(n - 1) + fibonacci(n - 2); } > *Memoization Fibonacci 1* > *Memoization Fibonacci 2* > *Tabulated Fibonacci* ### Example of Linear Search - <span id="84b2">*Worst Case Scenario: The term does not even exist in the array.*</span> - <span id="30dc">*Meaning: If it doesn’t exist then our for loop would run until the end therefore making our time complexity O(n).*</span> ------------------------------------------------------------------------ ### Sorting Algorithms ### Bubble Sort `Time Complexity`: Quadratic O(n^2) - <span id="ce1e">The inner for-loop contributes to O(n), however in a worst case scenario the while loop will need to run n times before bringing all n elements to their final resting spot.</span> `Space Complexity`: O(1) - <span id="664f">Bubble Sort will always use the same amount of memory regardless of n.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*Ck9aeGY-d5tbz7dT" class="graf-image" /></figure>- <span id="4115">The first major sorting algorithm one learns in introductory programming courses.</span> - <span id="ecd4">Gives an intro on how to convert unsorted data into sorted data.</span> > It’s almost never used in production code because: - <span id="3cb1">*It’s not efficient*</span> - <span id="4eac">*It’s not commonly used*</span> - <span id="d730">*There is stigma attached to it*</span> - <span id="8da7">`Bubbling Up`* : Term that infers that an item is in motion, moving in some direction, and has some final resting destination.*</span> - <span id="8447">*Bubble sort, sorts an array of integers by bubbling the largest integer to the top.*</span> <!-- --> - <span id="dcd2">*Worst Case & Best Case are always the same because it makes nested loops.*</span> - <span id="9a6a">*Double for loops are polynomial time complexity or more specifically in this case Quadratic (Big O) of: O(n²)*</span> ### Selection Sort `Time Complexity`: Quadratic O(n^2) - <span id="646d">Our outer loop will contribute O(n) while the inner loop will contribute O(n / 2) on average. Because our loops are nested we will get O(n²);</span> `Space Complexity`: O(1) - <span id="45ae">Selection Sort will always use the same amount of memory regardless of n.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*AByxtBjFrPVVYmyu" class="graf-image" /></figure>- <span id="c618">Selection sort organizes the smallest elements to the start of the array.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*GeYNxlRcbt2cf0rY" class="graf-image" /></figure>Summary of how Selection Sort should work: 1. <span id="2277">*Set MIN to location 0*</span> 2. <span id="c76c">*Search the minimum element in the list.*</span> 3. <span id="79d3">*Swap with value at location Min*</span> 4. <span id="4ede">*Increment Min to point to next element.*</span> 5. <span id="a649">*Repeat until list is sorted.*</span> ### Insertion Sort `Time Complexity`: Quadratic O(n^2) - <span id="95ea">Our outer loop will contribute O(n) while the inner loop will contribute O(n / 2) on average. Because our loops are nested we will get O(n²);</span> `Space Complexity`: O(n) - <span id="f6fa">Because we are creating a subArray for each element in the original input, our Space Comlexity becomes linear.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*gbNU6wrszGPrfAZG" class="graf-image" /></figure>### Merge Sort `Time Complexity`: Log Linear O(nlog(n)) - <span id="44b2">Since our array gets split in half every single time we contribute O(log(n)). The while loop contained in our helper merge function contributes O(n) therefore our time complexity is O(nlog(n)); `Space Complexity`: O(n)</span> - <span id="9a83">We are linear O(n) time because we are creating subArrays.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*GeU8YwwCoK8GiSTD" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*IxqGb72XDVDeeiMl" class="graf-image" /></figure>### Example of Merge Sort <figure><img src="https://cdn-images-1.medium.com/max/800/0*HMCR--9niDt5zY6M" class="graf-image" /></figure>- <span id="48b4">**Merge sort is O(nlog(n)) time.**</span> - <span id="c598">*We need a function for merging and a function for sorting.*</span> > Steps: 1. <span id="213f">*If there is only one element in the list, it is already sorted; return the array.*</span> 2. <span id="6214">*Otherwise, divide the list recursively into two halves until it can no longer be divided.*</span> 3. <span id="3cc8">*Merge the smallest lists into new list in a sorted order.*</span> ### Quick Sort `Time Complexity`: Quadratic O(n^2) - <span id="8e34">Even though the average time complexity O(nLog(n)), the worst case scenario is always quadratic.</span> `Space Complexity`: O(n) - <span id="626b">Our space complexity is linear O(n) because of the partition arrays we create.</span> - <span id="7e3a">QS is another Divide and Conquer strategy.</span> - <span id="233d">Some key ideas to keep in mind:</span> - <span id="1173">It is easy to sort elements of an array relative to a particular target value.</span> - <span id="8634">An array of 0 or 1 elements is already trivially sorted.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*WLl_HpdBGXYx284T" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*-LyHJXGPTYsWLDZf" class="graf-image" /></figure>### Binary Search `Time Complexity`: Log Time O(log(n)) `Space Complexity`: O(1) <figure><img src="https://cdn-images-1.medium.com/max/800/0*-naVYGTXzE2Yoali" class="graf-image" /></figure>*Recursive Solution* > *Min Max Solution* - <span id="6fb1">*Must be conducted on a sorted array.*</span> - <span id="383b">*Binary search is logarithmic time, not exponential b/c n is cut down by two, not growing.*</span> - <span id="c940">*Binary Search is part of Divide and Conquer.*</span> ### Insertion Sort - <span id="26b7">**Works by building a larger and larger sorted region at the left-most end of the array.**</span> > Steps: 1. <span id="8c1f">*If it is the first element, and it is already sorted; return 1.*</span> 2. <span id="1451">*Pick next element.*</span> 3. <span id="0f8b">*Compare with all elements in the sorted sub list*</span> 4. <span id="4d78">*Shift all the elements in the sorted sub list that is greater than the value to be sorted.*</span> 5. <span id="9131">*Insert the value*</span> 6. <span id="6c8a">*Repeat until list is sorted.*</span> ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <figure><img src="https://cdn-images-1.medium.com/max/800/1*VCmj_H9AHs41oC9Yx1hZFQ.png" class="graf-image" /></figure>### Discover More: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [February 27, 2021](https://medium.com/p/803ff193c522). <a href="https://medium.com/@bryanguner/a-quick-guide-to-big-o-notation-memoization-tabulation-and-sorting-algorithms-by-example-803ff193c522" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,156 @@ Basic Web Development Environment Setup ======================================= Windows Subsystem for Linux (WSL) and Ubuntu ------------------------------------------------------------------------ ### Basic Web Development Environment Setup #### Windows Subsystem for Linux (WSL) and Ubuntu <figure><img src="https://cdn-images-1.medium.com/max/800/0*aqKP1drNHmNm34zz.jpg" class="graf-image" /></figure>Test if you have Ubuntu installed by typing “Ubuntu” in the search box in the bottom app bar that reads “Type here to search”. If you see a search result that reads **“Ubuntu 20.04 LTS”** with “App” under it, then you have it installed. 1. <span id="110a">In the application search box in the bottom bar, type “PowerShell” to find the application named “Windows PowerShell”</span> 2. <span id="54fd">Right-click on “Windows PowerShell” and choose “Run as administrator” from the popup menu</span> 3. <span id="a018">In the blue PowerShell window, type the following: `Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux`</span> 4. <span id="6269">Restart your computer</span> 5. <span id="6dd9">In the application search box in the bottom bar, type “Store” to find the application named “Microsoft Store”</span> 6. <span id="eb4e">Click “Microsoft Store”</span> 7. <span id="74c1">Click the “Search” button in the upper-right corner of the window</span> 8. <span id="9d35">Type in “Ubuntu”</span> 9. <span id="4205">Click “Run Linux on Windows (Get the apps)”</span> 10. <span id="1799">Click the orange tile labeled **“Ubuntu”** Note that there are 3 versions in the Microsoft Store… you want the one just entitled ‘Ubuntu’</span> 11. <span id="edec">Click “Install”</span> 12. <span id="2935">After it downloads, click “Launch”</span> 13. <span id="a859">If you get the option, pin the application to the task bar. Otherwise, right-click on the orange Ubuntu icon in the task bar and choose “Pin to taskbar”</span> 14. <span id="669c">When prompted to “Enter new UNIX username”, type your first name with no spaces</span> 15. <span id="e9c1">When prompted, enter and retype a password for this UNIX user (it can be the same as your Windows password)</span> 16. <span id="4217">Confirm your installation by typing the command `whoami ‘as in who-am-i'`followed by Enter at the prompt (it should print your first name)</span> 17. <span id="48fe">You need to update your packages, so type `sudo apt update` (if prompted for your password, enter it)</span> 18. <span id="d12f">You need to upgrade your packages, so type `sudo apt upgrade` (if prompted for your password, enter it)</span> ### Git Git comes with Ubuntu, so there’s nothing to install. However, you should configure it using the following instructions. Open an Ubuntu terminal if you don’t have one open already. 1. <span id="8cfe">You need to configure Git, so type `git config --global user.name "Your Name"` with replacing "Your Name" with your real name.</span> 2. <span id="0e0d">You need to configure Git, so type `git config --global user.email [email protected]` with replacing "<a href="mailto:[email protected]" class="markup--anchor markup--li-anchor">[email protected]</a>" with your real email.</span> **Note: if you want git to remember your login credentials type:** $ git config --global credential.helper store ### Google Chrome Test if you have Chrome installed by typing “Chrome” in the search box in the bottom app bar that reads “Type here to search”. If you see a search result that reads “Chrome” with “App” under it, then you have it installed. Otherwise, follow these instructions to install Google Chrome. 1. <span id="578c">Open Microsoft Edge, the blue “e” in the task bar, and type in <a href="http://chrome.google.com/" class="markup--anchor markup--li-anchor">http://chrome.google.com</a>. Click the “Download Chrome” button. Click the “Accept and Install” button after reading the terms of service. Click “Save” in the “What do you want to do with ChromeSetup.exe” dialog at the bottom of the window. When you have the option to “Run” it, do so. Answer the questions as you’d like. Set it as the default browser.</span> 2. <span id="40db">Right-click on the Chrome icon in the task bar and choose “Pin to taskbar”.</span> ### Node.js Test if you have Node.js installed by opening an Ubuntu terminal and typing `node --version`. If it reports "Command 'node' not found", then you need to follow these directions. 1. <span id="9098">In the Ubuntu terminal, type `sudo apt update` and press Enter</span> 2. <span id="806b">In the Ubuntu terminal, type `sudo apt install build-essential` and press Enter</span> 3. <span id="5f3a">In the Ubuntu terminal, type `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash` and press Enter</span> 4. <span id="2abd">In the Ubuntu terminal, type `. ./.bashrc` and press Enter</span> 5. <span id="3c16">In the Ubuntu terminal, type `nvm install --lts` and press Enter</span> 6. <span id="d567">Confirm that **node** is installed by typing `node --version` and seeing it print something that is not "Command not found"!</span> ### Unzip You will often have to download a zip file and unzip it. It is easier to do this from the command line. So we need to install a linux unzip utility. In the Ubuntu terminal type: `sudo apt install unzip` and press Enter Mocha.js Test if you have Mocha.js installed by opening an Ubuntu terminal and typing `which mocha`. If it prints a path, then you're good. Otherwise, if it prints nothing, install Mocha.js by typing `npm install -g mocha`. ### Python 3 Ubuntu does not come with Python 3. Install it using the command `sudo apt install python3`. Test it by typing `python3 --version` and seeing it print a number. ### Note about WSL As of the time of writing of this document, WSL has an issue renaming or deleting files if Visual Studio Code is open. So before doing any linux commands which manipulate files, make sure you **close** Visual Studio Code before running those commands in the Ubuntu terminal. ### Some other common instillations # Installing build essentials sudo apt-get install -y build-essential libssl-dev # Nodejs and NVM curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash source ~/.profile sudo nvm install 7.10.0 sudo nvm use 7.10.0 node -v #nodemon sudo npm install -g nodemon sudo npm install -g loopback-cli # Forever to run nodejs scripts forever sudo npm install forever -g # Git - a version control system sudo apt-get update sudo apt-get install -y git xclip # Grunt - an automated task runner sudo npm install -g grunt-cli # Bower - a dependency manager sudo npm install -g bower # Yeoman - for generators sudo npm install -g yo # maven sudo apt-get install maven -y # Gulp - an automated task runner sudo npm install -g gulp-cli # Angular FullStack - My favorite MEAN boilerplate (MEAN = MongoDB, Express, Angularjs, Nodejs) sudo npm install -g generator-angular-fullstack # Vim, Curl, Python - Some random useful stuff sudo apt-get install -y vim curl python-software-properties sudo apt-get install -y python-dev, python-pip sudo apt-get install -y libkrb5-dev # Installing JDK and JRE sudo apt-get install -y default-jre sudo apt-get install -y default-jdk # Archive Extractors sudo apt-get install -y unace unrar zip unzip p7zip-full p7zip-rar sharutils rar uudeview mpack arj cabextract file-roller # FileZilla - a FTP client sudo apt-get install -y filezilla #### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz - Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [February 27, 2021](https://medium.com/p/9f36c3f15afe). <a href="https://medium.com/@bryanguner/basic-web-development-environment-setup-9f36c3f15afe" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,197 @@ Deploy React App To Heroku Using Postgres & Express =================================================== Heroku is an web application that makes deploying applications easy for a beginner. ------------------------------------------------------------------------ ### Deploy React App To Heroku Using Postgres & Express Heroku is an web application that makes deploying applications easy for a beginner. Before you begin deploying, make sure to remove any `console.log`'s or `debugger`'s in any production code. You can search your entire project folder if you are using them anywhere. You will set up Heroku to run on a production, not development, version of your application. When a Node.js application like yours is pushed up to Heroku, it is identified as a Node.js application because of the `package.json` file. It runs `npm install` automatically. Then, if there is a `heroku-postbuild` script in the `package.json` file, it will run that script. Afterwards, it will automatically run `npm start`. In the following phases, you will configure your application to work in production, not just in development, and configure the `package.json` scripts for `install`, `heroku-postbuild` and `start` scripts to install, build your React application, and start the Express production server. ### Phase 1: Heroku Connection If you haven’t created a Heroku account yet, create one <a href="https://signup.heroku.com/" class="markup--anchor markup--p-anchor">here</a>. Add a new application in your <a href="https://dashboard.heroku.com/" class="markup--anchor markup--p-anchor">Heroku dashboard</a> named whatever you want. Under the “Resources” tab in your new application, click “Find more add-ons” and add the “Heroku Postgres” add-on with the free Hobby Dev setting. In your terminal, install the <a href="https://devcenter.heroku.com/articles/heroku-command-line" class="markup--anchor markup--p-anchor">Heroku CLI</a>. Afterwards, login to Heroku in your terminal by running the following: heroku login Add Heroku as a remote to your project’s git repository in the following command and replace `<name-of-Heroku-app>` with the name of the application you created in the <a href="https://dashboard.heroku.com/" class="markup--anchor markup--p-anchor">Heroku dashboard</a>. heroku git:remote -a <name-of-Heroku-app> Next, you will set up your Express + React application to be deployable to Heroku. ### Phase 2: Setting up your Express + React application Right now, your React application is on a different localhost port than your Express application. However, since your React application only consists of static files that don’t need to bundled continuously with changes in production, your Express application can serve the React assets in production too. These static files live in the `frontend/build` folder after running `npm run build` in the `frontend` folder. Add the following changes into your `backend/routes.index.js` file. At the root route, serve the React application’s static `index.html` file along with `XSRF-TOKEN` cookie. Then serve up all the React application's static files using the `express.static` middleware. Serve the `index.html` and set the `XSRF-TOKEN` cookie again on all routes that don't start in `/api`. You should already have this set up in `backend/routes/index.js` which should now look like this: // backend/routes/index.js const express = require('express'); const router = express.Router(); const apiRouter = require('./api'); router.use('/api', apiRouter); // Static routes // Serve React build files in production if (process.env.NODE_ENV === 'production') { const path = require('path'); // Serve the frontend's index.html file at the root route router.get('/', (req, res) => { res.cookie('XSRF-TOKEN', req.csrfToken()); res.sendFile( path.resolve(__dirname, '../../frontend', 'build', 'index.html') ); }); // Serve the static assets in the frontend's build folder router.use(express.static(path.resolve("../frontend/build"))); // Serve the frontend's index.html file at all other routes NOT starting with /api router.get(/^(?!\/?api).*/, (req, res) => { res.cookie('XSRF-TOKEN', req.csrfToken()); res.sendFile( path.resolve(__dirname, '../../frontend', 'build', 'index.html') ); }); } // Add a XSRF-TOKEN cookie in development if (process.env.NODE_ENV !== 'production') { router.get('/api/csrf/restore', (req, res) => { res.cookie('XSRF-TOKEN', req.csrfToken()); res.status(201).json({}); }); } module.exports = router; Your Express backend’s `package.json` should include scripts to run the `sequelize` CLI commands. The `backend/package.json`'s scripts should now look like this: "scripts": { "sequelize": "sequelize", "sequelize-cli": "sequelize-cli", "start": "per-env", "start:development": "nodemon -r dotenv/config ./bin/www", "start:production": "node ./bin/www" }, Initialize a `package.json` file at the very root of your project directory (outside of both the `backend` and `frontend` folders). The scripts defined in this `package.json` file will be run by Heroku, not the scripts defined in the `backend/package.json` or the `frontend/package.json`. When Heroku runs `npm install`, it should install packages for both the `backend` and the `frontend`. Overwrite the `install` script in the root `package.json` with: npm --prefix backend install backend && npm --prefix frontend install frontend This will run `npm install` in the `backend` folder then run `npm install` in the `frontend` folder. Next, define a `heroku-postbuild` script that will run the `npm run build` command in the `frontend` folder. Remember, Heroku will automatically run this script after running `npm install`. Define a `sequelize` script that will run `npm run sequelize` in the `backend` folder. Finally, define a `start` that will run `npm start` in the \`backend folder. The root `package.json`'s scripts should look like this: "scripts": { "heroku-postbuild": "npm run build --prefix frontend", "install": "npm --prefix backend install backend && npm --prefix frontend install frontend", "dev:backend": "npm install --prefix backend start", "dev:frontend": "npm install --prefix frontend start", "sequelize": "npm run --prefix backend sequelize", "sequelize-cli": "npm run --prefix backend sequelize-cli", "start": "npm start --prefix backend" }, The `dev:backend` and `dev:frontend` scripts are optional and will not be used for Heroku. Finally, commit your changes. ### Phase 3: Deploy to Heroku Once you’re finished setting this up, navigate to your application’s Heroku dashboard. Under “Settings” there is a section for “Config Vars”. Click the `Reveal Config Vars` button to see all your production environment variables. You should have a `DATABASE_URL` environment variable already from the Heroku Postgres add-on. Add environment variables for `JWT_EXPIRES_IN` and `JWT_SECRET` and any other environment variables you need for production. You can also set environment variables through the Heroku CLI you installed earlier in your terminal. See the docs for <a href="https://devcenter.heroku.com/articles/config-vars" class="markup--anchor markup--p-anchor">Setting Heroku Config Variables</a>. Push your project to Heroku. Heroku only allows the `master` branch to be pushed. But, you can alias your branch to be named `master` when pushing to Heroku. For example, to push a branch called `login-branch` to `master` run: git push heroku login-branch:master If you do want to push the `master` branch, just run: git push heroku master You may want to make two applications on Heroku, the `master` branch site that should have working code only. And your `staging` site that you can use to test your work in progress code. Now you need to migrate and seed your production database. Using the Heroku CLI, you can run commands inside of your production application just like in development using the `heroku run` command. For example to migrate the production database, run: heroku run npm run sequelize db:migrate To seed the production database, run: heroku run npm run sequelize db:seed:all Note: You can interact with your database this way as you’d like, but beware that `db:drop` cannot be run in the Heroku environment. If you want to drop and create the database, you need to remove and add back the "Heroku Postgres" add-on. Another way to interact with the production application is by opening a bash shell through your terminal by running: heroku bash In the opened shell, you can run things like `npm run sequelize db:migrate`. Open your deployed site and check to see if you successfully deployed your Express + React application to Heroku! If you see an `Application Error` or are experiencing different behavior than what you see in your local environment, check the logs by running: heroku logs If you want to open a connection to the logs to continuously output to your terminal, then run: heroku logs --tail The logs may clue you into why you are experiencing errors or different behavior. #### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Alternate Instructions: ### Deploy MERN App To Heroku: #### Source: <a href="https://dev.to/stlnick/how-to-deploy-a-full-stack-mern-app-with-heroku-netlify-ncb" class="markup--anchor markup--h4-anchor">Article</a> ### Discover More: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 5, 2021](https://medium.com/p/70b7ea807986). <a href="https://medium.com/@bryanguner/deploy-react-app-to-heroku-using-postgres-express-70b7ea807986" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,90 @@ Express Quick Sheet =================== Settings ------------------------------------------------------------------------ ### Express Quick Sheet ### Settings app.set('x', 'yyy') app.get('x') //=> 'yyy' app.enable('trust proxy') app.disable('trust proxy') app.enabled('trust proxy') //=> true ### Enviorment app.get('env') ### Config app.configure('production', function() { app.set... }) ### Wares app.use(express.static(__dirname + '/public')) app.use(express.logger()) ### Helpers app.locals({ title: "MyApp", }) ------------------------------------------------------------------------ ### Request & response ### Request // GET /user/tj req.path //=> "/user/tj" req.url //=> "/user/tj" req.xhr //=> true|false req.method //=> "GET" req.params req.params.name //=> "tj" req.params[0] // GET /search?q=tobi+ferret req.query.q // => "tobi ferret" req.cookies req.accepted // [ { value: 'application/json', quality: 1, type: 'application', subtype: 'json' }, // { value: 'text/html', quality: 0.5, type: 'text',subtype: 'html' } ] req.is('html') req.is('text/html') req.headers req.headers['host'] req.headers['user-agent'] req.headers['accept-encoding'] req.headers['accept-language'] ### Response res.redirect('/') res.redirect(301, '/') res.set('Content-Type', 'text/html') res.send('hi') res.send(200, 'hi') res.json({ a: 2 }) By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 5, 2021](https://medium.com/p/8f93762c59ca). <a href="https://medium.com/@bryanguner/express-quick-sheet-8f93762c59ca" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,92 @@ Fetch Quick Sheet ================= Fetch ------------------------------------------------------------------------ ### Fetch Quick Sheet ### Fetch fetch('/data.json') .then(response => response.json()) .then(data => { console.log(data) }) .catch(err => ...) ### Response fetch('/data.json') .then(res => { res.text() // response body (=> Promise) res.json() // parse via JSON (=> Promise) res.status //=> 200 res.statusText //=> 'OK' res.redirected //=> false res.ok //=> true res.url //=> 'http://site.com/data.json' res.type //=> 'basic' // ('cors' 'default' 'error' // 'opaque' 'opaqueredirect') res.headers.get('Content-Type') }) ### Request options fetch('/data.json', { method: 'post', body: new FormData(form), // post body body: JSON.stringify(...), headers: { 'Accept': 'application/json' }, credentials: 'same-origin', // send cookies credentials: 'include', // send cookies, even in CORS }) ### Catching errors fetch('/data.json') .then(checkStatus) function checkStatus (res) { if (res.status >= 200 && res.status < 300) { return res } else { let err = new Error(res.statusText) err.response = res throw err } } Non-2xx responses are still successful requests. Use another function to turn them to errors. ### Using with node.js const fetch = require('isomorphic-fetch') See: <a href="https://npmjs.com/package/isomorphic-fetch" class="markup--anchor markup--p-anchor">isomorphic-fetch</a> *(npmjs.com)* #### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: <a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br /> <em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 5, 2021](https://medium.com/p/8872650742b4). <a href="https://medium.com/@bryanguner/fetch-quick-sheet-8872650742b4" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,302 @@ Fundamental Data Structures In JavaScript ========================================= Data structures in JavaScript ------------------------------------------------------------------------ #### <a href="http://medium.com/codex" class="markup--anchor markup--h4-anchor">CODEX</a> ### Fundamental Data Structures In JavaScript ### Data structures in JavaScript <span class="graf-dropCap">H</span>ere’s a website I created to practice data structures! <a href="https://ds-algo-official-c3dw6uapg-bgoonz.vercel.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://ds-algo-official-c3dw6uapg-bgoonz.vercel.app/"><strong>directory</strong><br /> <em>Edit description</em>ds-algo-official-c3dw6uapg-bgoonz.vercel.app</a><a href="https://ds-algo-official-c3dw6uapg-bgoonz.vercel.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <span class="graf-dropCap">H</span>ere’s the repo that the website is built on: <a href="https://github.com/bgoonz/DS-ALGO-OFFICIAL" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz/DS-ALGO-OFFICIAL"><strong>bgoonz/DS-ALGO-OFFICIAL</strong><br /> <em>Navigation ####Author:Bryan Guner Big O notation is the language we use for talking about how long an algorithm takes…</em>github.com</a><a href="https://github.com/bgoonz/DS-ALGO-OFFICIAL" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <span class="graf-dropCap">H</span>ere’s a live code editor where you can mess with any of the examples… ### Resources (article content below): #### Videos - <span id="53c4"><a href="https://www.youtube.com/watch?v=0IAPZzGSbME&list=PLDN4rrl48XKpZkf03iYFl-O29szjTrs_O&index=2&t=0s" class="markup--anchor markup--li-anchor">Abdul Bari: YouTubeChannel for Algorithms</a></span> - <span id="ab93"><a href="https://www.youtube.com/watch?v=lxja8wBwN0k&list=PLKKfKV1b9e8ps6dD3QA5KFfHdiWj9cB1s" class="markup--anchor markup--li-anchor">Data Structures and algorithms</a></span> - <span id="e614"><a href="https://www.youtube.com/playlist?list=PLmGElG-9wxc9Us6IK6Qy-KHlG_F3IS6Q9" class="markup--anchor markup--li-anchor">Data Structures and algorithms Course</a></span> - <span id="3d48"><a href="https://www.khanacademy.org/computing/computer-science/algorithms" class="markup--anchor markup--li-anchor">Khan Academy</a></span> - <span id="ac90"><a href="https://www.youtube.com/playlist?list=PL2_aWCzGMAwI3W_JlcBbtYTwiQSsOTa6P" class="markup--anchor markup--li-anchor">Data structures by mycodeschool</a>Pre-requisite for this lesson is good understanding of pointers in C.</span> - <span id="9bd9"><a href="https://www.youtube.com/watch?v=HtSuA80QTyo&list=PLUl4u3cNGP61Oq3tWYp6V_F-5jb5L2iHb" class="markup--anchor markup--li-anchor">MIT 6.006: Intro to Algorithms(2011)</a></span> - <span id="71f0"><a href="https://www.youtube.com/watch?v=5_5oE5lgrhw&list=PLu0W_9lII9ahIappRPN0MCAgtOu3lQjQi" class="markup--anchor markup--li-anchor">Data Structures and Algorithms by Codewithharry</a></span> #### Books - <span id="2eac"><a href="https://edutechlearners.com/download/Introduction_to_algorithms-3rd%20Edition.pdf" class="markup--anchor markup--li-anchor">Introduction to Algorithms</a> by Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest, and Clifford Stein</span> - <span id="3e8d"><a href="http://www.sso.sy/sites/default/files/competitive%20programming%203_1.pdf" class="markup--anchor markup--li-anchor">Competitive Programming 3</a> by Steven Halim and Felix Halim</span> - <span id="3aa3"><a href="https://cses.fi/book/book.pdf" class="markup--anchor markup--li-anchor">Competitive Programmers Hand Book</a> Beginner friendly hand book for competitive programmers.</span> - <span id="3c02"><a href="https://github.com/Amchuz/My-Data-Structures-and-Algorithms-Resources/raw/master/Books/Data%20Structures%20and%20Algorithms%20-%20Narasimha%20Karumanchi.pdf" class="markup--anchor markup--li-anchor">Data Structures and Algorithms Made Easy</a> by Narasimha Karumanchi</span> - <span id="93ec"><a href="https://github.com/Amchuz/My-Data-Structures-and-Algorithms-Resources/raw/master/Books/Learning%20Algorithms%20Through%20Programming%20and%20Puzzle%20Solving.pdf" class="markup--anchor markup--li-anchor">Learning Algorithms Through Programming and Puzzle Solving</a> by Alexander Kulikov and Pavel Pevzner</span> #### Coding practice - <span id="824c"><a href="https://leetcode.com/" class="markup--anchor markup--li-anchor">LeetCode</a></span> - <span id="a528"><a href="https://www.interviewbit.com/" class="markup--anchor markup--li-anchor">InterviewBit</a></span> - <span id="fa41"><a href="https://codility.com/" class="markup--anchor markup--li-anchor">Codility</a></span> - <span id="6c61"><a href="https://www.hackerrank.com/" class="markup--anchor markup--li-anchor">HackerRank</a></span> - <span id="dff6"><a href="https://projecteuler.net/" class="markup--anchor markup--li-anchor">Project Euler</a></span> - <span id="b2dd"><a href="https://spoj.com/" class="markup--anchor markup--li-anchor">Spoj</a></span> - <span id="c8e8"><a href="https://code.google.com/codejam/contests.html" class="markup--anchor markup--li-anchor">Google Code Jam practice problems</a></span> - <span id="e8bb"><a href="https://www.hackerearth.com/" class="markup--anchor markup--li-anchor">HackerEarth</a></span> - <span id="e803"><a href="https://www.topcoder.com/" class="markup--anchor markup--li-anchor">Top Coder</a></span> - <span id="294e"><a href="https://www.codechef.com/" class="markup--anchor markup--li-anchor">CodeChef</a></span> - <span id="9c05"><a href="https://www.codewars.com/" class="markup--anchor markup--li-anchor">Codewars</a></span> - <span id="356e"><a href="https://codesignal.com/" class="markup--anchor markup--li-anchor">CodeSignal</a></span> - <span id="2d20"><a href="http://codekata.com/" class="markup--anchor markup--li-anchor">CodeKata</a></span> - <span id="d3bf"><a href="https://www.firecode.io/" class="markup--anchor markup--li-anchor">Firecode</a></span> #### Courses - <span id="eac2"><a href="https://academy.zerotomastery.io/p/master-the-coding-interview-faang-interview-prep" class="markup--anchor markup--li-anchor">Master the Coding Interview: Big Tech (FAANG) Interviews</a> Course by Andrei and his team.</span> - <span id="36ca"><a href="https://realpython.com/python-data-structures" class="markup--anchor markup--li-anchor">Common Python Data Structures</a> Data structures are the fundamental constructs around which you build your programs. Each data structure provides a particular way of organizing data so it can be accessed efficiently, depending on your use case. Python ships with an extensive set of data structures in its standard library.</span> - <span id="cdc9"><a href="https://www.geeksforgeeks.org/fork-cpp-course-structure" class="markup--anchor markup--li-anchor">Fork CPP</a> A good course for beginners.</span> - <span id="6d47"><a href="https://codeforces.com/edu/course/2" class="markup--anchor markup--li-anchor">EDU</a> Advanced course.</span> - <span id="8bb5"><a href="https://www.udacity.com/course/c-for-programmers--ud210" class="markup--anchor markup--li-anchor">C++ For Programmers</a> Learn features and constructs for C++.</span> #### Guides - <span id="e9e9"><a href="http://www.geeksforgeeks.org/" class="markup--anchor markup--li-anchor">GeeksForGeeks — A CS portal for geeks</a></span> - <span id="a228"><a href="https://www.learneroo.com/subjects/8" class="markup--anchor markup--li-anchor">Learneroo — Algorithms</a></span> - <span id="a2f0"><a href="http://www.topcoder.com/tc?d1=tutorials&d2=alg_index&module=Static" class="markup--anchor markup--li-anchor">Top Coder tutorials</a></span> - <span id="f3ec"><a href="http://www.infoarena.ro/training-path" class="markup--anchor markup--li-anchor">Infoarena training path</a> (RO)</span> - <span id="ec93">Steven & Felix Halim — <a href="https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=118" class="markup--anchor markup--li-anchor">Increasing the Lower Bound of Programming Contests</a> (UVA Online Judge)</span> ### ***space*** > *The space complexity represents the memory consumption of a data structure. As for most of the things in life, you can’t have it all, so it is with the data structures. You will generally need to trade some time for space or the other way around.* ### *time* > *The time complexity for a data structure is in general more diverse than its space complexity.* ### *Several operations* > *In contrary to algorithms, when you look at the time complexity for data structures you need to express it for several operations that you can do with data structures. It can be adding elements, deleting elements, accessing an element or even searching for an element.* ### *Dependent on data* > *Something that data structure and algorithms have in common when talking about time complexity is that they are both dealing with data. When you deal with data you become dependent on them and as a result the time complexity is also dependent of the data that you received. To solve this problem we talk about 3 different time complexity.* - <span id="bc8d">**The best-case complexity: when the data looks the best**</span> - <span id="8b06">**The worst-case complexity: when the data looks the worst**</span> - <span id="881c">**The average-case complexity: when the data looks average**</span> ### Big O notation The complexity is usually expressed with the Big O notation. The wikipedia page about this subject is pretty complex but you can find here a good summary of the different complexity for the most famous data structures and sorting algorithms. ### The Array data structure <figure><img src="https://cdn-images-1.medium.com/max/800/0*Qk3UYgeqXamRrFLR.gif" class="graf-image" /></figure>### Definition An Array data structure, or simply an Array, is a data structure consisting of a collection of elements (values or variables), each identified by at least one array index or key. The simplest type of data structure is a linear array, also called one-dimensional array. From Wikipedia Arrays are among the oldest and most important data structures and are used by every program. They are also used to implement many other data structures. *Complexity* *Average* *Access Search Insertion Deletion* O(1) O(n) O(1) O(n) <figure><img src="https://cdn-images-1.medium.com/max/800/1*-BJ2hU-CZO2kuzu4x5a53g.png" class="graf-image" /></figure>indexvalue0 … this is the first value, stored at zero position 1. <span id="b953">The index of an array **runs in sequence**</span> 2. This could be useful for storing data that are required to be ordered, such as rankings or queues 3. In JavaScript, array’s value could be mixed; meaning value of each index could be of different data, be it String, Number or even Objects ### 2. Objects Think of objects as a logical grouping of a bunch of properties. Properties could be some variable that it’s storing or some methods that it’s using. I also visualize an object as a table. The main difference is that object’s “index” need not be numbers and is not necessarily sequenced. <figure><img src="https://cdn-images-1.medium.com/max/1200/1*KVZkD2zrgEa_47igW8Hq8g.png" class="graf-image" /></figure> ### The Hash Table <figure><img src="https://cdn-images-1.medium.com/max/800/0*avbxLAFocSV6vsl5.gif" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*3GJiRoLyEoZ_aIlO" class="graf-image" /></figure>### *Definition* > *A Hash Table (Hash Map) is a data structure used to implement an associative array, a structure that can map keys to values. A Hash Table uses a hash function to compute an index into an array of buckets or slots, from which the desired value can be found. From Wikipedia* Hash Tables are considered the more efficient data structure for lookup and for this reason, they are widely used. Complexity Average Access Search Insertion Deletion - <span id="f63f">O(1) O(1) O(1)</span> > *The code* Note, here I am storing another object for every hash in my Hash Table. ### The Set ### Sets Sets are pretty much what it sounds like. It’s the same intuition as Set in Mathematics. I visualize Sets as Venn Diagrams. <figure><img src="https://cdn-images-1.medium.com/max/800/0*AIQljh9p8Baw9TnE.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*gOE33ANZP2ujbjIG" class="graf-image" /></figure>### *Definition* > *A Set is an abstract data type that can store certain values, without any particular order, and no repeated values. It is a computer implementation of the mathematical concept of a finite Set. From Wikipedia* The Set data structure is usually used to test whether elements belong to set of values. Rather then only containing elements, Sets are more used to perform operations on multiple values at once with methods such as union, intersect, etc… Complexity Average Access Search Insertion Deletion - <span id="daa6">O(n) O(n) O(n)</span> > *The code* ### The Singly Linked List <figure><img src="https://cdn-images-1.medium.com/max/800/0*fLs64rV-Xq19aVCA.gif" class="graf-image" /></figure>### *Definition* > *A Singly Linked List is a linear collection of data elements, called nodes pointing to the next node by means of pointer. It is a data structure consisting of a group of nodes which together represent a sequence. Under the simplest form, each node is composed of data and a reference (in other words, a link) to the next node in the sequence.* Linked Lists are among the simplest and most common data structures because it allows for efficient insertion or removal of elements from any position in the sequence. Complexity Average Access Search Insertion Deletion O(n) O(n) O(1) O(1) > *The code* ------------------------------------------------------------------------ ### The Doubly Linked List <figure><img src="https://cdn-images-1.medium.com/max/800/0*TQXiR-L_itiG3WP-.gif" class="graf-image" /></figure>### *Definition* > *A Doubly Linked List is a linked data structure that consists of a set of sequentially linked records called nodes. Each node contains two fields, called links, that are references to the previous and to the next node in the sequence of nodes. From Wikipedia* Having two node links allow traversal in either direction but adding or removing a node in a doubly linked list requires changing more links than the same operations on a Singly Linked List. Complexity Average Access Search Insertion Deletion O(n) O(n) O(1) O(1) > *The code* ### The Stack <figure><img src="https://cdn-images-1.medium.com/max/1200/0*qsjYW-Lvfo22ecLE.gif" class="graf-image" /></figure> ### *Definition* > *A Stack is an abstract data type that serves as a collection of elements, with two principal operations: push, which adds an element to the collection, and pop, which removes the most recently added element that was not yet removed. The order in which elements come off a Stack gives rise to its alternative name, LIFO (for last in, first out). From Wikipedia* A Stack often has a third method peek which allows to check the last pushed element without popping it. Complexity Average Access Search Insertion Deletion O(n) O(n) O(1) O(1) > *The code* ### The Queue <figure><img src="https://cdn-images-1.medium.com/max/800/0*YvfuX5tKP7-V0p7v.gif" class="graf-image" /></figure>### *Definition* > *A Queue is a particular kind of abstract data type or collection in which the entities in the collection are kept in order and the principal operations are the addition of entities to the rear terminal position, known as enqueue, and removal of entities from the front terminal position, known as dequeue. This makes the Queue a First-In-First-Out (FIFO) data structure. In a FIFO data structure, the first element added to the Queue will be the first one to be removed.* As for the Stack data structure, a peek operation is often added to the Queue data structure. It returns the value of the front element without dequeuing it. Complexity Average Access Search Insertion Deletion O(n) O(n) O(1) O(n) > *The code* ### The Tree <figure><img src="https://cdn-images-1.medium.com/max/800/0*yUiQ-NaPKeLQnN7n" class="graf-image" /></figure>### *Definition* > *A Tree is a widely used data structure that simulates a hierarchical tree structure, with a root value and subtrees of children with a parent node. A tree data structure can be defined recursively as a collection of nodes (starting at a root node), where each node is a data structure consisting of a value, together with a list of references to nodes (the “children”), with the constraints that no reference is duplicated, and none points to the root node. From Wikipedia* Complexity Average Access Search Insertion Deletion O(n) O(n) O(n) O(n) To get a full overview of the time and space complexity of the Tree data structure, have a look to this excellent Big O cheat sheet. <figure><img src="https://cdn-images-1.medium.com/max/800/1*DCdQiB6XqBJCrFRz12BwqA.png" class="graf-image" /></figure>*The code* ### The Graph <figure><img src="https://cdn-images-1.medium.com/max/800/0*q31mL1kjFWlIzw3l.gif" class="graf-image" /></figure>### *Definition* > *A Graph data structure consists of a finite (and possibly mutable) set of vertices or nodes or points, together with a set of unordered pairs of these vertices for an undirected Graph or a set of ordered pairs for a directed Graph. These pairs are known as edges, arcs, or lines for an undirected Graph and as arrows, directed edges, directed arcs, or directed lines for a directed Graph. The vertices may be part of the Graph structure, or may be external entities represented by integer indices or references.* - <span id="f896">A graph is **any** collection of nodes and edges.</span> - <span id="fbda">Much more relaxed in structure than a tree.</span> - <span id="5281">It doesn’t need to have a root node (not every node needs to be accessible from a single node)</span> - <span id="0c79">It can have cycles (a group of nodes whose paths begin and end at the same node)</span> - <span id="4afc">Cycles are not always “isolated”, they can be one part of a larger graph. You can detect them by starting your search on a specific node and finding a path that takes you back to that same node.</span> - <span id="8f45">Any number of edges may leave a given node</span> - <span id="51cf">A Path is a sequence of nodes on a graph</span> ### Cycle Visual <figure><img src="https://cdn-images-1.medium.com/max/800/1*dn1BqCdXdFg4FCVSz6uArA.png" class="graf-image" /></figure>A Graph data structure may also associate to each edge some edge value, such as a symbolic label or a numeric attribute (cost, capacity, length, etc.). Representation There are different ways of representing a graph, each of them with its own advantages and disadvantages. Here are the main 2: Adjacency list: For every vertex a list of adjacent vertices is stored. This can be viewed as storing the list of edges. This data structure allows the storage of additional data on the vertices and edges. Adjacency matrix: Data are stored in a two-dimensional matrix, in which the rows represent source vertices and columns represent destination vertices. The data on the edges and vertices must be stored externally. Graph > *The code* ------------------------------------------------------------------------ ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: ### Discover More: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 5, 2021](https://medium.com/p/8f9f709c15b4). <a href="https://medium.com/@bryanguner/fundamental-data-structures-in-javascript-8f9f709c15b4" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,489 @@ Postgresql Cheat Sheet ====================== PostgreSQL commands ------------------------------------------------------------------------ #### <a href="http://medium.com/codex" class="markup--anchor markup--h4-anchor">CODEX</a> ### PostgreSQL Cheat Sheet #### **Each table is made up of rows and columns. If you think of a table as a grid, the column go from left to right across the grid and each entry of data is listed down as a row.** <figure><img src="https://cdn-images-1.medium.com/max/800/0*ZLWhY1d1jdboZh_s.png" class="graf-image" /></figure><a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b"><strong>ALLOFMYOTHERARTICLES</strong><br /> bryanguner.medium.com</a><a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> Each row in a relational is uniquely identified by a primary key. This can be by one or more sets of column values. In most scenarios it is a single column, such as employeeID. Every relational table has one primary key. Its purpose is to uniquely identify each row in the database. No two rows can have the same primary key value. The practical result of this is that you can select every single row by just knowing its primary key. SQL Server UNIQUE constraints allow you to ensure that the data stored in a column, or a group of columns, is unique among the rows in a table. Although both UNIQUE and <a href="https://www.sqlservertutorial.net/sql-server-basics/sql-server-primary-key/" class="markup--anchor markup--p-anchor">PRIMARY KEY</a> constraints enforce the uniqueness of data, you should use the UNIQUE constraint instead of PRIMARY KEY constraint when you want to enforce the uniqueness of a column, or a group of columns, that are not the primary key columns. Different from PRIMARY KEY constraints, UNIQUE constraints allow NULL. Moreover, UNIQUE constraints treat the NULL as a regular value, therefore, it only allows one NULL per column. <figure><img src="https://cdn-images-1.medium.com/max/800/1*kgzq5NoL5ejBGvuZ4qLDaQ.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/1*hr8DccnpiR2Uj5UI3iLsOQ.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/1*RiWJpwpVMdge3Sqofn3srA.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/1*GN5aSwENOvntpfk90rHYFg.png" class="graf-image" /></figure>Create a new <a href="https://www.postgresqltutorial.com/postgresql-roles/" class="markup--anchor markup--p-anchor">role</a>: CREATE ROLE role_name; Create a new role with a `username` and `password`: CREATE ROLE username NOINHERIT LOGIN PASSWORD password; Change role for the current session to the `new_role`: SET ROLE new_role; Allow `role_1` to set its role as `role_2:` GRANT role_2 TO role_1; ### Managing databases <a href="https://www.postgresqltutorial.com/postgresql-create-database/" class="markup--anchor markup--p-anchor">Create a new database</a>: CREATE DATABASE [IF NOT EXISTS] db_name; <a href="https://www.postgresqltutorial.com/postgresql-drop-database/" class="markup--anchor markup--p-anchor">Delete a database permanently</a>: DROP DATABASE [IF EXISTS] db_name; ### Managing tables <a href="https://www.postgresqltutorial.com/postgresql-create-table/" class="markup--anchor markup--p-anchor">Create a new table</a> or a <a href="https://www.postgresqltutorial.com/postgresql-temporary-table/" class="markup--anchor markup--p-anchor">temporary table</a> CREATE [TEMP] TABLE [IF NOT EXISTS] table_name( pk SERIAL PRIMARY KEY, c1 type(size) NOT NULL, c2 type(size) NULL, ... ); <a href="https://www.postgresqltutorial.com/postgresql-add-column/" class="markup--anchor markup--p-anchor">Add a new column</a> to a table: ALTER TABLE table_name ADD COLUMN new_column_name TYPE; <a href="https://www.postgresqltutorial.com/postgresql-drop-column/" class="markup--anchor markup--p-anchor">Drop a column</a> in a table: ALTER TABLE table_name DROP COLUMN column_name; <a href="https://www.postgresqltutorial.com/postgresql-rename-column/" class="markup--anchor markup--p-anchor">Rename a column</a>: ALTER TABLE table_name RENAME column_name TO new_column_name; Set or remove a default value for a column: ALTER TABLE table_name ALTER COLUMN [SET DEFAULT value | DROP DEFAULT] Add a <a href="https://www.postgresqltutorial.com/postgresql-primary-key/" class="markup--anchor markup--p-anchor">primary key</a> to a table. ALTER TABLE table_name ADD PRIMARY KEY (column,...); Remove the primary key from a table. ALTER TABLE table_name DROP CONSTRAINT primary_key_constraint_name; <a href="https://www.postgresqltutorial.com/postgresql-rename-table/" class="markup--anchor markup--p-anchor">Rename a table</a>. ALTER TABLE table_name RENAME TO new_table_name; <a href="https://www.postgresqltutorial.com/postgresql-drop-table/" class="markup--anchor markup--p-anchor">Drop a table</a> and its dependent objects: DROP TABLE [IF EXISTS] table_name CASCADE; ### Managing views <a href="https://www.postgresqltutorial.com/managing-postgresql-views/" class="markup--anchor markup--p-anchor">Create a view</a>: CREATE OR REPLACE view_name AS query; <a href="https://www.postgresqltutorial.com/postgresql-recursive-view/" class="markup--anchor markup--p-anchor">Create a recursive view</a>: CREATE RECURSIVE VIEW view_name(column_list) AS SELECT column_list; <a href="https://www.postgresqltutorial.com/postgresql-materialized-views/" class="markup--anchor markup--p-anchor">Create a materialized view</a>: CREATE MATERIALIZED VIEW view_name AS query WITH [NO] DATA; Refresh a materialized view: REFRESH MATERIALIZED VIEW CONCURRENTLY view_name; Drop a view: DROP VIEW [ IF EXISTS ] view_name; Drop a materialized view: DROP MATERIALIZED VIEW view_name; Rename a view: ALTER VIEW view_name RENAME TO new_name; ### Managing indexes Creating an index with the specified name on a table CREATE [UNIQUE] INDEX index_name ON table (column,...) Removing a specified index from a table DROP INDEX index_name; ### Querying data from tables Query all data from a table: SELECT * FROM table_name; Query data from specified columns of all rows in a table: SELECT column_list FROM table; Query data and select only unique rows: SELECT DISTINCT (column) FROM table; Query data from a table with a filter: SELECT * FROM table WHERE condition; Assign an <a href="https://www.postgresqltutorial.com/postgresql-alias/" class="markup--anchor markup--p-anchor">alias</a> to a column in the result set: SELECT column_1 AS new_column_1, ... FROM table; Query data using the `LIKE` operator: SELECT * FROM table_name WHERE column LIKE '%value%' Query data using the `BETWEEN `operator: SELECT * FROM table_name WHERE column BETWEEN low AND high; Query data using the `IN `operator: SELECT * FROM table_name WHERE column IN (value1, value2,...); Constrain the returned rows with the `LIMIT` clause: SELECT * FROM table_name LIMIT limit OFFSET offset ORDER BY column_name; Query data from multiple using the <a href="https://www.postgresqltutorial.com/postgresql-inner-join/" class="markup--anchor markup--p-anchor">inner join</a>, <a href="https://www.postgresqltutorial.com/postgresql-left-join/" class="markup--anchor markup--p-anchor">left join</a>, <a href="https://www.postgresqltutorial.com/postgresql-full-outer-join/" class="markup--anchor markup--p-anchor">full outer join</a>, <a href="https://www.postgresqltutorial.com/postgresql-cross-join/" class="markup--anchor markup--p-anchor">cross join</a> and <a href="https://www.postgresqltutorial.com/postgresql-natural-join/" class="markup--anchor markup--p-anchor">natural join</a>: SELECT * FROM table1 INNER JOIN table2 ON conditions SELECT * FROM table1 LEFT JOIN table2 ON conditions SELECT * FROM table1 FULL OUTER JOIN table2 ON conditions SELECT * FROM table1 CROSS JOIN table2; SELECT * FROM table1 NATURAL JOIN table2; Return the number of rows of a table. SELECT COUNT (*) FROM table_name; Sort rows in ascending or descending order: SELECT select_list FROM table ORDER BY column ASC [DESC], column2 ASC [DESC],...; Group rows using `GROUP BY` clause. SELECT * FROM table GROUP BY column_1, column_2, ...; Filter groups using the `HAVING` clause. SELECT * FROM table GROUP BY column_1 HAVING condition; ### Set operations Combine the result set of two or more queries with `UNION` operator: SELECT * FROM table1 UNION SELECT * FROM table2; Minus a result set using `EXCEPT` operator: SELECT * FROM table1 EXCEPT SELECT * FROM table2; Get intersection of the result sets of two queries: SELECT * FROM table1 INTERSECT SELECT * FROM table2; ### Modifying data <a href="https://www.postgresqltutorial.com/postgresql-insert/" class="markup--anchor markup--p-anchor">Insert a new row into a table</a>: INSERT INTO table(column1,column2,...) VALUES(value_1,value_2,...); Insert multiple rows into a table: INSERT INTO table_name(column1,column2,...) VALUES(value_1,value_2,...), (value_1,value_2,...), (value_1,value_2,...)... <a href="https://www.postgresqltutorial.com/postgresql-update/" class="markup--anchor markup--p-anchor">Update</a> data for all rows: UPDATE table_name SET column_1 = value_1, ...; Update data for a set of rows specified by a condition in the `WHERE` clause. UPDATE table SET column_1 = value_1, ... WHERE condition; <a href="https://www.postgresqltutorial.com/postgresql-delete/" class="markup--anchor markup--p-anchor">Delete all rows</a> of a table: DELETE FROM table_name; Delete specific rows based on a condition: DELETE FROM table_name WHERE condition; ### Performance Show the query plan for a query: EXPLAIN query; Show and execute the query plan for a query: EXPLAIN ANALYZE query; Collect statistics: ANALYZE table_name; ------------------------------------------------------------------------ ### Postgres & JSON: ### Creating the DB and the Table DROP DATABASE IF EXISTS books_db; CREATE DATABASE books_db WITH ENCODING='UTF8' TEMPLATE template0; DROP TABLE IF EXISTS books; CREATE TABLE books ( id SERIAL PRIMARY KEY, client VARCHAR NOT NULL, data JSONb NOT NULL ); ### Populating the DB INSERT INTO books(client, data) values( 'Joe', '{ "title": "Siddhartha", "author": { "first_name": "Herman", "last_name": "Hesse" } }' ); INSERT INTO books(client, data) values('Jenny', '{ "title": "Bryan Guner", "author": { "first_name": "Jack", "last_name": "Kerouac" } }'); INSERT INTO books(client, data) values('Jenny', '{ "title": "100 años de soledad", "author": { "first_name": "Gabo", "last_name": "Marquéz" } }'); Lets see everything inside the table books: SELECT * FROM books; Output: <figure><img src="https://cdn-images-1.medium.com/max/800/0*GOQQ0qNGak2yIrtQ" class="graf-image" /></figure>### `->` operator returns values out of JSON columns Selecting 1 column: SELECT client, data->'title' AS title FROM books; Output: <figure><img src="https://cdn-images-1.medium.com/max/800/0*OIVYOfYcbVh65Mt5" class="graf-image" /></figure>Selecting 2 columns: SELECT client, data->'title' AS title, data->'author' AS author FROM books; Output: <figure><img src="https://cdn-images-1.medium.com/max/800/0*fEzPkSY8yGexKOk4" class="graf-image" /></figure>### `->` vs `->>` The `->` operator returns the original JSON type (which might be an object), whereas `->>` returns text. ### Return NESTED objects You can use the `->` to return a nested object and thus chain the operators: SELECT client, data->'author'->'last_name' AS author FROM books; Output: <figure><img src="https://cdn-images-1.medium.com/max/800/0*lwy8bR7igaroMXeb" class="graf-image" /></figure>### Filtering Select rows based on a value inside your JSON: SELECT client, data->'title' AS title FROM books WHERE data->'title' = '"Bryan Guner"'; Notice WHERE uses `->` so we must compare to JSON `'"Bryan Guner"'` Or we could use `->>` and compare to `'Bryan Guner'` Output: <figure><img src="https://cdn-images-1.medium.com/max/800/0*poASndLoU71qlXqE" class="graf-image" /></figure>### Nested filtering Find rows based on the value of a nested JSON object: SELECT client, data->'title' AS title FROM books WHERE data->'author'->>'last_name' = 'Kerouac'; Output: <figure><img src="https://cdn-images-1.medium.com/max/800/0*R1kOhDK19ntdUYkq" class="graf-image" /></figure>### A real world example CREATE TABLE events ( name varchar(200), visitor_id varchar(200), properties json, browser json ); We’re going to store events in this table, like pageviews. Each event has properties, which could be anything (e.g. current page) and also sends information about the browser (like OS, screen resolution, etc). Both of these are completely free form and could change over time (as we think of extra stuff to track). INSERT INTO events VALUES ( 'pageview', '1', '{ "page": "/" }', '{ "name": "Chrome", "os": "Mac", "resolution": { "x": 1440, "y": 900 } }' ); INSERT INTO events VALUES ( 'pageview', '2', '{ "page": "/" }', '{ "name": "Firefox", "os": "Windows", "resolution": { "x": 1920, "y": 1200 } }' ); INSERT INTO events VALUES ( 'pageview', '1', '{ "page": "/account" }', '{ "name": "Chrome", "os": "Mac", "resolution": { "x": 1440, "y": 900 } }' ); INSERT INTO events VALUES ( 'purchase', '5', '{ "amount": 10 }', '{ "name": "Firefox", "os": "Windows", "resolution": { "x": 1024, "y": 768 } }' ); INSERT INTO events VALUES ( 'purchase', '15', '{ "amount": 200 }', '{ "name": "Firefox", "os": "Windows", "resolution": { "x": 1280, "y": 800 } }' ); INSERT INTO events VALUES ( 'purchase', '15', '{ "amount": 500 }', '{ "name": "Firefox", "os": "Windows", "resolution": { "x": 1280, "y": 800 } }' ); Now lets select everything: SELECT * FROM events; Output: <figure><img src="https://cdn-images-1.medium.com/max/800/0*ZPHfB4FxjSIlAVxL" class="graf-image" /></figure>### JSON operators + PostgreSQL aggregate functions Using the JSON operators, combined with traditional PostgreSQL aggregate functions, we can pull out whatever we want. You have the full might of an RDBMS at your disposal. - <span id="4ffd">Lets see browser usage:</span> - <span id="261c">`SELECT browser->>'name' AS browser, count(browser) FROM events GROUP BY browser->>'name';`</span> Output: <figure><img src="https://cdn-images-1.medium.com/max/800/0*4lEv2DgUk33FeUgo" class="graf-image" /></figure>- <span id="946c">Total revenue per visitor:</span> `SELECT visitor_id, SUM(CAST(properties->>'amount' AS integer)) AS total FROM events WHERE CAST(properties->>'amount' AS integer) > 0 GROUP BY visitor_id;` Output: <figure><img src="https://cdn-images-1.medium.com/max/800/0*HxOS3CgwXBJ6A2FP" class="graf-image" /></figure>- <span id="9850">Average screen resolution</span> - <span id="132f">`SELECT AVG(CAST(browser->'resolution'->>'x' AS integer)) AS width, AVG(CAST(browser->'resolution'->>'y' AS integer)) AS height FROM events;`</span> Output: <figure><img src="https://cdn-images-1.medium.com/max/800/0*iyv4Iv4Rc8M8mwt1" class="graf-image" /></figure>#### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: <a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br /> <em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: ### Discover More: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 5, 2021](https://medium.com/p/718b813d3e31). <a href="https://medium.com/@bryanguner/postgresql-cheat-sheet-718b813d3e31" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,52 @@ A Collection of my most useful Gist Entries =========================================== This list is in no particular order! ------------------------------------------------------------------------ ### A Collection of my most useful Gist Entries **This list is in no particular order!** <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Ubuntu Setup: ### Markdown Notes Template: ### Jquery Cheat Sheet: ### Useful Bash Commands: ### Python Cheat Sheet: ### Html Cheat Sheet: ### Git Cheat Sheet: ### Deploy React App To Heroku: ### Bash Aliases: ### JS Cheat Sheet: ### CSS Cheat Sheet: #### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--p-anchor">https://bgoonz-blog.netlify.app/</a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 6, 2021](https://medium.com/p/f4314f3ba3ab). <a href="https://medium.com/@bryanguner/a-collection-of-my-most-useful-gist-entries-f4314f3ba3ab" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,271 @@ Emmet Cheat Sheet ================= EMMET ------------------------------------------------------------------------ ### Emmet Cheat Sheet ### EMMET *The a toolkit for web-developers* ### Introduction Emmet is a productivity toolkit for web developers that uses expressions to generate HTML snippets. ### Installation Normally, installation for Emmet should be a straight-forward process from the package-manager, as most of the modern text editors support Emmet. ### Usage You can use Emmet in two ways: - <span id="856f">Tab Expand Way: Type your emmet code and press `Tab` key</span> - <span id="9aea">Interactive Method: Press `alt + ctrl + Enter` and start typing your expressions. This should automatically generate HTML snippets on the fly.</span> **This cheatsheet will assume that you press** `Tab` **after each expressions.** ### HTML ### Generating HTML 5 DOCTYPE `html:5` Will generate <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> ### Child items Child items are created using `>` `ul>li>p` <ul> <li> <p></p> </li> </ul> ### Sibling Items Sibling items are created using `+` `html>head+body` <html> <head></head> <body> </body> </html> ### Multiplication Items can be multiplied by `*` `ul>li*5` <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> ### Grouping Items can be grouped together using `()` `table>(tr>th*5)+tr>t*5` <table> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr> <t></t> <t></t> <t></t> <t></t> <t></t> </tr> </table> ### Class and ID Class and Id in Emmet can be done using `.` and `#` `div.heading` <div class="heading"></div> `div#heading` <div id="heading"></div> ID and Class can also be combined together `div#heading.center` <div id="heading" class="center"></div> ### Adding Content inside tags Contents inside tags can be added using `{}` `h1{Emmet is awesome}+h2{Every front end developers should use this}+p{This is paragraph}*2` <h1>Emmet is awesome</h1> <h2>Every front end developers should use this</h2> <p>This is paragraph</p> <p>This is paragraph</p> ### Attributes inside HTML tags Attributes can be added using `[]` `a[href=https://?google.com data-toggle=something target=_blank]` <a href="https://?google.com" data-toggle="something" target="_blank"></a> ### Numbering Numbering can be done using `$` You can use this inside tag or contents. `h${This is so awesome $}*6` <h1>This is so awesome 1</h1> <h2>This is so awesome 2</h2> <h3>This is so awesome 3</h3> <h4>This is so awesome 4</h4> <h5>This is so awesome 5</h5> <h6>This is so awesome 6</h6> Use `@-` to reverse the Numbering `img[[email protected]]*5` <img src="image05.jpg" alt=""> <img src="image04.jpg" alt=""> <img src="image03.jpg" alt=""> <img src="image02.jpg" alt=""> <img src="image01.jpg" alt=""> To start the numbering from specific number, use this way `img[[email protected]]*5` <img src="emmet100.jpg" alt=""> <img src="emmet101.jpg" alt=""> <img src="emmet102.jpg" alt=""> <img src="emmet103.jpg" alt=""> <img src="emmet104.jpg" alt=""> ### Tips - <span id="b708">Use `:` to expand known abbreviations</span> `input:date` <input type="date" name="" id=""> `form:post` <form action="" method="post"></form> `link:css` <link rel="stylesheet" href="style.css"> - <span id="d43e">Building Navbar</span> `.navbar>ul>li*3>a[href=#]{Item $@-}` <div class="navbar"> <ul> <li><a href="#">Item 3</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 1</a></li> </ul> </div> ### CSS Emmet works surprisingly well with css as well. - <span id="68eb">`f:l`</span> <!-- --> float: left; You can also use any options n/r/l - <span id="d9cc">`pos:a`</span> <!-- --> position: absolute; Also use any options, pos:a/r/f - <span id="5b67">`d:n/b/f/i/ib`</span> `d:ib` display: inline-block; - <span id="26f6">You can use `m` for margin and `p` for padding followed by direction</span> `mr` -> `margin-right` `pr` -> `padding-right` - <span id="01cc">`@f` will result in</span> <!-- --> @font-face { font-family:; src:url(); } You can also use these shorthands <figure><img src="https://cdn-images-1.medium.com/max/800/1*h8hsUrJNyVRLYqBQP63DCA.png" class="graf-image" /></figure>#### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: <a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br /> <em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 6, 2021](https://medium.com/p/24758e628d37). <a href="https://medium.com/@bryanguner/emmet-cheat-sheet-24758e628d37" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,294 @@ Git-Tricks ========== Refs ------------------------------------------------------------------------ ### Awesome GitHub Commands Reference Sheet (Quick Reference) HEAD^ # 1 commit before head HEAD^^ # 2 commits before head HEAD~5 # 5 commits before head ### Branches # create a new branch git checkout -b $branchname git push origin $branchname --set-upstream # get a remote branch git fetch origin git checkout --track origin/$branchname # delete local remote-tracking branches (lol) git remote prune origin # list merged branches git branch -a --merged # delete remote branch git push origin :$branchname # go back to previous branch git checkout - ### Collaboration # Rebase your changes on top of the remote master git pull --rebase upstream master # Squash multiple commits into one for a cleaner git log # (on the following screen change the word pick to either 'f' or 's') git rebase -i $commit_ref ### Submodules # Import .gitmodules git submodule init # Clone missing submodules, and checkout commits git submodule update --init --recursive # Update remote URLs in .gitmodules # (Use when you changed remotes in submodules) git submodule sync ### Diff ### Diff with stats git diff --stat app/a.txt | 2 +- app/b.txt | 8 ++---- 2 files changed, 10 insertions(+), 84 deletions(-) ### Just filenames git diff --summary ### Log options --oneline e11e9f9 Commit message here --decorate shows "(origin/master)" --graph shows graph lines --date=relative "2 hours ago" ### Misc ### Cherry pick git rebase 76acada^ # get current sha1 (?) git show-ref HEAD -s # show single commit info git log -1 f5a960b5 # Go back up to root directory cd "$(git rev-parse --show-top-level)" ### Short log $ git shortlog $ git shortlog HEAD~20.. # last 20 commits James Dean (1): Commit here Commit there Frank Sinatra (5): Another commit This other commit ### Bisect git bisect start HEAD HEAD~6 git bisect run npm test git checkout refs/bisect/bad # this is where it screwed up git bisect reset ### Manual bisection git bisect start git bisect good # current version is good git checkout HEAD~8 npm test # see if it's good git bisect bad # current version is bad git bisect reset # abort ### Searching git log --grep="fixes things" # search in commit messages git log -S"window.alert" # search in code git log -G"foo.*" # search in code (regex) ### GPG Signing git config set user.signingkey <GPG KEY ID> # Sets GPG key to use for signing git commit -m "Implement feature Y" --gpg-sign # Or -S, GPG signs commit git config set commit.gpgsign true # Sign commits by default git commit -m "Implement feature Y" --no-gpg-sign # Do not sign --- ### Refs HEAD^ # 1 commit before head HEAD^^ # 2 commits before head HEAD~5 # 5 commits before head ### Branches # create a new branch git checkout -b $branchname git push origin $branchname --set-upstream # get a remote branch git fetch origin git checkout --track origin/$branchname # delete local remote-tracking branches (lol) git remote prune origin # list merged branches git branch -a --merged # delete remote branch git push origin :$branchname # go back to previous branch git checkout - ### Collaboration # Rebase your changes on top of the remote master git pull --rebase upstream master # Squash multiple commits into one for a cleaner git log # (on the following screen change the word pick to either 'f' or 's') git rebase -i $commit_ref ### Submodules # Import .gitmodules git submodule init # Clone missing submodules, and checkout commits git submodule update --init --recursive # Update remote URLs in .gitmodules # (Use when you changed remotes in submodules) git submodule sync ### Diff ### Diff with stats git diff --stat app/a.txt | 2 +- app/b.txt | 8 ++---- 2 files changed, 10 insertions(+), 84 deletions(-) ### Just filenames git diff --summary ### Log options --oneline e11e9f9 Commit message here --decorate shows "(origin/master)" --graph shows graph lines --date=relative "2 hours ago" ### Miscellaneous #### Cherry pick git rebase 76acada^ # get current sha1 (?) git show-ref HEAD -s # show single commit info git log -1 f5a960b5 # Go back up to root directory cd "$(git rev-parse --show-top-level)" ### Short log $ git shortlog $ git shortlog HEAD~20.. # last 20 commits James Dean (1): Commit here Commit there Frank Sinatra (5): Another commit This other commit ### Bisect git bisect start HEAD HEAD~6 git bisect run npm test git checkout refs/bisect/bad # this is where it screwed up git bisect reset ### Manual bisection git bisect start git bisect good # current version is good git checkout HEAD~8 npm test # see if it's good git bisect bad # current version is bad git bisect reset # abort ### Searching git log --grep="fixes things" # search in commit messages git log -S"window.alert" # search in code git log -G"foo.*" # search in code (regex) ### GPG Signing git config set user.signingkey <GPG KEY ID> # Sets GPG key to use for signing git commit -m "Implement feature Y" --gpg-sign # Or -S, GPG signs commit git config set commit.gpgsign true # Sign commits by default git commit -m "Implement feature Y" --no-gpg-sign # Do not sign <figure><img src="https://cdn-images-1.medium.com/max/800/1*yyaUC-O43Gs1qAVkdHrMdw.png" class="graf-image" /></figure>#### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 6, 2021](https://medium.com/p/57e8d0292285). <a href="https://medium.com/@bryanguner/git-tricks-57e8d0292285" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,580 @@ Learn CSS So That Your Site Doesn’t Look Like Garbage ===================================================== CSS Selectors ------------------------------------------------------------------------ ### Learn CSS So That Your Site Doesn’t Look Like Garbage ### CSS Selectors - <span id="62c3">`CSS Selector` : Applies styles to a specific DOM element(s), there are various types:</span> - <span id="d60d">`Type Selectors` : Matches by node name.</span> - <span id="9826">`Class Selectors` : Matches by class name.</span> - <span id="10a7">`ID Selectors` : Matches by ID name.</span> - <span id="64c0">`Universal Selectors` : Selects all HTML elements on a page.</span> - <span id="9c6b">`Attribute Selectors` : Matches elements based on the prescence or value of a given attribute. (i.e. a\[title\] will match all a elements with a title attribute)</span> <!-- --> /* Type selector */ div { background-color: #000000; }/* Class selector */ .active { color: #ffffff; }/* ID selector */ #list-1 { border: 1px solid gray; }/* Universal selector */ * { padding: 10px; }/* Attribute selector */ a[title] { font-size: 2em; } **Class Selectors** - <span id="fddf">Used to select all elements of a certain class denoted with a `.[class name]`</span> - <span id="72af">You can assign multiple classes to a DOM element by separating them with a space.</span> **Compound Class Selectors** - <span id="befd">To get around accidentally selecting elements with multiple classes beyond what we want to grab we can chain dots.</span> - <span id="e2c8">TO use a compound class selector just append the classes together when referencing them in the CSS.</span> <!-- --> <div class="box yellow"></div> <div class="box orange"></div> <div class="circle orange"></div> - <span id="7dd3">i.e. .box.yellow will select only the first element.</span> - <span id="8904">KEEP IN MIND that if you do include a space it will make the selector into a *descendant selector*.</span> <!-- --> h1#heading, h2.subheading { font-style: italic; } - <span id="a8bc">When we want to target all `h1` tags with the id of `heading`.</span> **CSS Combinators** - <span id="c196">CSS Combinators are used to combine other selectors into more complex or targeted selectors — they are very powerful!</span> - <span id="71a6">Be careful not to use too many of them as they will make your CSS far too complex.</span> - <span id="6032">`Descendant Selectors`</span> - <span id="6f41">Separated by a space.</span> - <span id="3829">Selects all descendants of a parent container.</span> - <span id="e90c">`Direct Child Selectors`</span> - <span id="52b5">Indicated with a `>`.</span> - <span id="ea8e">Different from descendants because it only affects the direct children of an element.</span> - <span id="486f">`.menu > .is-active { background-color: #ffe0b2; }`</span> - <span id="96f9">`<body> <div class="menu"> <div class="is-active">Belka</div> <div> <div class="is-active">Strelka</div> </div> </div> </body> <div class="is-active"> Laika </div> </body>`</span> - <span id="59ca">Belka would be the only element selected.</span> - <span id="0266">`Adjacent Sibling Selectors`</span> - <span id="a648">Uses the `+` symbol.</span> - <span id="9d79">Used for elements that directly follow one another and who both have the same parent.</span> - <span id="4865">`h1 + h2 { font-style: italic; } <h1>Big header</h1> <h2>This one is styled because it is directly adjacent to the H1</h2> <h2>This one is NOT styled because there is no H1 right before it</h2>`</span> **Pseudo-Classes** - <span id="b638">`Pseudo-Class` : Specifies a special state of the seleted element(s) and does not refer to any elements or attributes contained in the DOM.</span> - <span id="0360">Format is a `Selector:Pseudo-Class Name` or `A:B`</span> - <span id="91ee">`a:hover { font-family: "Roboto Condensed", sans-serif; color: #4fc3f7; text-decoration: none; border-bottom: 2px solid #4fc3f7; }`</span> - <span id="27ac">Some common pseudo-classes that are frequently used are:</span> - <span id="9b2b">`active` : ‘push down’, when ele are activated.</span> - <span id="5b2f">`checked` : applies to things like radio buttons or checkbox inputs.</span> - <span id="58da">`disabled` : any disabled element.</span> - <span id="d3bd">`first-child` : first element in a group of children/siblings.</span> - <span id="40fc">`focus` : elements that have current focus.</span> - <span id="ed43">`hover` : elements that have cursor hovering over it.</span> - <span id="6fa2">`invalid` : any form elements in an invalid state from client-side form validation.</span> - <span id="7811">`last-child` : last element in a group of children/siblings.</span> - <span id="1bdf">`not(selector)` : elements that do not match the provided selector.</span> - <span id="be5c">`required` : form elements that are required.</span> - <span id="43ed">`valid` : form elements in a valid state.</span> - <span id="6460">`visited` : anchor tags of whih the user has already been to the URL that the href points to.</span> `Pseudo-Selectors` - <span id="89e7">Used to create pseudo-elements as children of the elements to which the property applies.</span> - <span id="0bef">`::after`</span> - <span id="52f9">`::before`</span> <!-- --> <style> p::before { background-color: lightblue; border-right: 4px solid violet; content: ":-) "; margin-right: 4px; padding-left: 4px; } </style> <p>This is the first paragraph</p> <p>This is the second paragraph</p> <p>This is the third paragraph</p> - <span id="a843">Will add some blue smiley faces before the p tag elements.</span> **CSS Rules** - <span id="919a">`CSS Rule` : Collection of single or compound selectors, a curly brace, zero or more properties</span> - <span id="555f">`CSS Rule Specificity` : Sometimes CSS rules will contain multiple elements and may have overlapping properties rules for those same elements - there is an algorithm in CSS that calculates which rule takes precedence.</span> - <span id="a1db">`The Four Number Calculation` : listed in increasing order of importance.</span> Who has the most IDs? If no one, continue. Who has the most classes? If no one, continue. Who has the most tags? If no one, continue. Last Read in the browser wins. <figure><img src="https://cdn-images-1.medium.com/max/800/0*Ub47AaMXuT1m8_T-" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*t0oXzsLPxpMwNbKo.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*2xr0vyHwf6UN905l" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*oq83hQ5qvtT6gDd9.png" class="graf-image" /></figure><style> .box { width: 50px; height: 50px; border: 1px solid black; } .orange { background-color: orange; } .yellow { background-color: yellow; border: 1px solid purple; } </style> <div class="box yellow"></div> <div class="box orange"></div> - <span id="1939">Coming back to our example where all the CSS Rules have tied, the last step 4 wins out so our element will have a `purple border`.</span> ------------------------------------------------------------------------ ### CSS: Type, Properties, and Imports **Typography** - <span id="d6fc">`font-family` : change the font.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*ssVcT1Bd9Edfo6KF" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*WmqUyKiumM8RCJQo.png" class="graf-image" /></figure>- <span id="daba">Remember that not all computers have the same fonts on them.</span> - <span id="0aa8">You can import web fonts via an api by using</span> - <span id="0c5d">`@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap');` and pasting it st the top of your CSS file.</span> - <span id="d8ff">And then reference it in your font-family.</span> - <span id="ee9f">`font-size` : Changes the size of your font.</span> - <span id="782e">Keep in mind the two kind of units CSS uses:</span> - <span id="c4f7">`Absolute` : `Pixels`, Points, Inches, Centimeters.</span> - <span id="2884">`Relative` : Em, Rem.</span> - <span id="f9b5">Em: Calulating the size relative to the previous div (bubbles down)</span> - <span id="5a5d">Rem: Calulates relative to the parent element always.</span> - <span id="79b0">`font-style` : Used to set a font to italics.</span> - <span id="f464">`font-weight` : Used to make a font bold.</span> - <span id="3d56">`text-align` : Used to align your text to the left, center, or right.</span> - <span id="4cbc">`text-decoration` : Use to put lines above, through, or under text. Lines can be solid, dashed, or wavy!</span> - <span id="1c96">`text-transform` : Used to set text to all lowercase, uppercase, or capitalize all words.</span> **Background-Images** - <span id="13eb">You can use the background-image property to set a background image for an element.</span> ------------------------------------------------------------------------ ### CSS: Colors, Borders, and Shadows **Colors** - <span id="6bed">You can set colors in CSS in three popular ways: by name, by hexadecimal RGB value, and by their decimal RGB value.</span> - <span id="38fb">rgba() is used to make an rbg value more transparent, the `a` is used to specify the `alpha channel`.</span> - <span id="cb05">**Color** : Property used to change the color of text.</span> - <span id="6f05">**Background-Color** : Property to change the backgrounf color of an element.</span> **Borders** - <span id="d922">Borders take three values: The width of the border, the style (i.e. solid, dotted, dashed), color of the border.</span> **Shadows** - <span id="bccb">There are two kinds of shadows in CSS: `box shadows` and `text shadows`.</span> - <span id="7fd2">Box refers to HTML elements.</span> - <span id="f3a7">Text refers to text.</span> - <span id="2a53">Shadows take values such as, the horizontal & vertical offsets of the shadow, the blur radius of the shadow, the spread radius, and of course the colors.</span> ------------------------------------------------------------------------ ### The Box Model **Box Model** : A concept that basically boils down that every DOM element has a box around it. Imagine a gift, inside is the gift, wrapped in foam all around (padding), and the giftbox outside of it (border) and then a wrapping paper on the giftbox (margin).- For items that are using `block` as it’s display, the browser will follow these rules to layout the element: - The box fills 100% of the available container space. - Every new box takes on a new line/row. - Width and Height properties are respected. - Padding, Margin, and Border will push other elements away from the box. - Certain elements have `block` as their default display, such as: divs, headers, and paragraphs.- For items that are using `inline` as it’s display, the browser will follow these rules to layout the element: - Each box appears in a single line until it fills up the space. - Width and height are **not** respected. - Padding, Margin, and Border are applied but they **do not** push other elements away from the box. - Certain elements have `inline` as their default display, such as: span tags, anchors, and images. **Standard Box Model vs Border-Box**- As per the standard Box Model, the width and height pertains to the content of the box and excludes any additional padding, borders, and margins. This bothered many programmers so they created the **border box** to include the calculation of the entire box’s height and width. **Inline-Block**- Inline-block uses the best features of both `block` and `inline`. - Elements still get laid out left to right. - Layout takes into account specified width and height. **Padding**- Padding applies padding to every side of a box. It is shorthand for four padding properties in this order: `padding-top`, `padding-right`, `padding-bottom`, `padding-left` (clockwise!) **Border**- Border applies a border on all sides of an element. It takes three values in this order: `border-width`, `border-style`, `border-color`. - All three properties can be broken down in the four sides clockwise: top, right, bottom, left. **Margin**- Margin sets margins on every side of an element. It takes four values in this order: `margin-top`, `margin-right`, `margin-bottom`, `margin-left`. - You can use `margin: 0 auto` to center an element. ### Positioning - <span id="d380">The `position` property allows us to set the position of elements on a page and is an integral part of creatnig a Web page layout.</span> - <span id="1bd6">It accepts five values: `static`, `relative`, `absolute`, `fixed`, `sticky`.</span> - <span id="0b53">Every property (minus `static`) is used with: `top`, `right`, `bottom`, and `left` to position an element on a page.</span> **Static Positioning** - <span id="7aa9">The default position value of page elements.</span> - <span id="700a">Most likely will not use static that much.</span> **Relative Positioning** - <span id="adc3">Remains in it’s original position in the page flow.</span> - <span id="9533">It is positioned *RELATIVE* to the it’s *ORIGINAL PLACE* on the page flow.</span> - <span id="8c0b">Creates a **stacking context** : overlapping elements whose order can be set by the z-index property.</span> <!-- --> #pink-box { background-color: #ff69b4; bottom: 0; left: -20px; position: relative; right: 0; top: 0; } <figure><img src="https://cdn-images-1.medium.com/max/800/0*mMCUEQ94L4_zxwNc" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*TgjpfTmdczESRAfU.png" class="graf-image" /></figure>**Absolute Positioning** - <span id="d597">Absolute elements are removed from the normal page flow and other elements around it act like it’s not there. (how we can easily achieve some layering)</span> - <span id="eb5b">Here are some examples to illustration absolute positioning:</span> <!-- --> .container { background-color: #2b2d2f; position: relative; }#pink-box { position: absolute; top: 60px; } <figure><img src="https://cdn-images-1.medium.com/max/800/0*Mu1E5D10RQaBpzms" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*6jvV-NnX5HS5PuVT.png" class="graf-image" /></figure>- <span id="adb4">Note that the container ele has a relative positioning — this is so that any changes made to the absolute positioned children will be positioned from it’s top-left corner.</span> - <span id="be4f">Note that because we removed the pink from the normal page flow, the container has now shifted the blue box to where the pink box should have been — which is why it is now layered beneath the pink.</span> <!-- --> .container { background-color: #2b2d2f; position: relative; }#pink-box { position: absolute; top: 60px; }#blue-box { position: absolute; } <figure><img src="https://cdn-images-1.medium.com/max/800/0*phWx-191VVQ5pRF9" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*o_T8meZgQSu7kxfs.png" class="graf-image" /></figure>- <span id="9e42">As you can see here, since we have also taken the blue box out of the normal page flow by declaring it as absoutely positioned it now overlaps over the pink box.</span> <!-- --> .container { background-color: #2b2d2f; position: relative; }#pink-box { background-color: #ff69b4; bottom: 60px; position: absolute; } <figure><img src="https://cdn-images-1.medium.com/max/800/0*HJbtARqC1qmeWTHS" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*rRNttTlXfnhqERYU.png" class="graf-image" /></figure>- <span id="528a">Example where the absolute element has it’s bottom property modified.</span> <!-- --> .container { background-color: #2b2d2f; }#pink-box { background-color: #ff69b4; bottom: 60px; position: absolute; } <figure><img src="https://cdn-images-1.medium.com/max/800/0*e7H6ImFUmcPGMaoa" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*Al6ILt84EC0bhjnK.png" class="graf-image" /></figure>- <span id="f676">If we removed the container’s relative position. Our absolute unit would look for the nearest parent which would be the document itself.</span> **Fixed Positioning** - <span id="fe31">Another positioning that removes it’s element from the page flow, and automatically positions it’s parent as the HTML doc itself.</span> - <span id="2388">Fixed also uses top, right, bottom, and left.</span> - <span id="3903">Useful for things like nav bars or other features we want to keep visible as the user scrolls.</span> **Sticky Positioning** - <span id="8ae2">Remains in it’s original position in the page flow, and it is positioned relative to it’s closest block-level ancestor and any *scrolling* ancestors.</span> - <span id="abe8">Behaves like a relatively positioned element until the point at which you would normally scroll past it’s viewport — then it sticks!</span> - <span id="7ac0">It is positioned with top, right, bottom, and left.</span> - <span id="9080">A good example are headers in a scrollable list.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*BRVlqobKK0IZtnXq" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*jQQJYWVoQY2eNANS.gif" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Flexible Box Model - <span id="46aa">Flexbox is a **CSS module** that provides a convenient way for us to display items inside a flexible container so that the layout is responsive.</span> - <span id="ebb3">Float was used back in the day to display position of elements in a container.</span> - <span id="2a8e">A very inconvenient aspect of float is the need to *clear* the float.</span> - <span id="ba98">To ‘clear’ a float we need to set up a ghost div to properly align — this is already sounds so inefficient.</span> **Using Flexbox** - <span id="e23b">Flexbox automatically resizes a container element to fit the viewport size without needing to use breakpoints.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*_SXOQpq3yrywWCcL" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*IBJIWQ7Z_23eERWn.png" class="graf-image" /></figure>- <span id="b505">Flexbox layout applies styles to the parent element, and it’s children.</span> <!-- --> .container { display: flex; /*sets display to use flex*/ flex-wrap: wrap; /*bc flex tries to fit everything into one line, use wrap to have the elements wrap to the next line*/ flex-direction: row; /*lets us create either rows or columns*/ } - <span id="4898">`flex-flow` can be used to combine wrap and direction.</span> - <span id="acdb">`justify-content` used to define the alignment of flex items along the main axis.</span> - <span id="68d6">`align-items` used to define the alignment on the Y-axis.</span> - <span id="f0d8">`align-content` redistributes extra space on the cross axis.</span> - <span id="531c">By default, flex items will appear in the order they are added to the DOM, but we can use the `order` property to change that.</span> - <span id="39b0">Some other properties we can use on flex items are:</span> - <span id="ec38">`flex-grow` : dictates amount of avail. space the item should take up.</span> - <span id="0916">`flex-shrink` : defines the ability for a flex item to shrink.</span> - <span id="4dda">`flex-basis` : Default size of an element before the remaining space is distributed.</span> - <span id="d9f2">`flex` : shorthand for grow, shrink and basis.</span> - <span id="f127">`align-self` : Overrides default alignment in the container.</span> ------------------------------------------------------------------------ ### Grid Layout - <span id="cc4f">CSS Grid is a 2d layout system that let’s use create a grid with columns and rows purely using Vanilla CSS. (flex is one dimensional)</span> **Bootstrap vs CSS Grid** - <span id="4af2">Bootstrap was a front-end library commonly used to create grid layouts but now CSS grid provides greater flexibility and control.</span> - <span id="e404">Grid applies style to a parent container and it’s child elements.</span> <!-- --> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; grid-template-areas: "header header header" "main . sidebar" "footer footer footer"; grid-column-gap: 20px; grid-row-gap: 30px; justify-items: stretch; align-items: stretch; justify-content: stretch; align-content: stretch; }.item-1 { grid-area: header; } .item-2 { grid-area: main; } .item-3 { grid-area: sidebar; } .item-4 { grid-area: footer; } - <span id="26c3">Columns and Rows can be defined with: pixels, percentages, auto, named grid lines, using `repeat`, fractions.</span> - <span id="a117">`Grid Template Areas` gives us a handy way to map out and visualize areas of the grid layout.</span> - <span id="17ae">Combine areas with templates to define how much space an area should take up.</span> - <span id="f90a">`Grid Gaps` can be used to create ‘gutters’ between grid item.s</span> - <span id="d7c0">The way we have defined our grid with `grid-templates` and `areas` are considered **explicit**.</span> - <span id="cef6">We can also `implicitly` define grids.</span> <!-- --> .grid-container { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-template-rows: 50px 50px 50px; grid-auto-columns: 100px; grid-auto-rows: 50px; } - <span id="e6d3">Any grid items that aren’t explicity placed are automatically placed or *re-flowed*</span> **Spanning Columns & Rows** - <span id="98c8">We can use the following properties to take up a specified num of cols and rows.</span> - <span id="0208">`grid-column-start`</span> - <span id="437a">`grid-column-end`</span> - <span id="7d03">`grid-row-start`</span> - <span id="0a8e">`grid-row-end`</span> - <span id="c62b">All four properties can take any of the following values: the line number, span \#, span name, auto.</span> <!-- --> .item-1 { grid-row-start: row2-start; /* Item starts at row line named "row2-start" */ grid-row-end: 5; /* Item ends at row line 5 */ grid-column-start: 1; /* Item starts at column line 1 */ grid-column-end: three; /* Item ends at column line named "three" */ }.item-2 { grid-row-start: 1; /* Item starts at row line 1 */ grid-row-end: span 2; /* Item spans two rows and ends at row line 3 */ grid-column-start: 3; /* Item starts at column line 3 */ grid-column-end: span col5-start; /* Item spans and ends at line named "col5-start" */ } **Grid Areas** - <span id="9dd0">We use the grid areas in conjunction with grid-container property to **define sections of the layout**.</span> - <span id="5ec2">We can then assign named sections to individual element’s css rules.</span> **Justify & Align Self** - <span id="06b0">Justify items and Align Items can be used to align all grid items at once.</span> - <span id="53f5">**Justify Self** is used to align self on the row.</span> - <span id="f6b1">It can take four values: start, end, center, stretch.</span> - <span id="72bb">**Align Self** is used to align self on the column.</span> - <span id="d5d4">It can take four values: start, end, center, stretch.</span> ------------------------------------------------------------------------ **CSS Hover Effect and Handling** **Overflow** `css .btn { background-color: #00bfff; color: #ffffff; border-radius: 10px; padding: 1.5rem; }` `.btn--active:hover { cursor: pointer; transform: translateY(-0.25rem);` `/* Moves our button up/down on the Y axis */ }` The Pseudo Class Selector `hover` activates when the cursor goes over the selected element. **Content Overflow**- You can apply an `overflow` content property to an element if it’s inner contents are spilling over. There are three members in the overflow family: — `overflow-x` : Apply horizontally. - `overflow-y` : Apply vertically. - `overflow` : Apply both directions. ### Transitions - <span id="b5a7">Transitions provide a way to control animation speed when changing CSS properties.</span> - <span id="2e1b">**Implicit Transitions** : Animations that involve transitioning between two states.</span> **Defining Transitions** - <span id="bbd6">`transition-property` : specifies the name of the CSS property to apply the transition.</span> - <span id="6340">`transition-duration` : during of the transition.</span> - <span id="7463">`transition-delay` : time before the transition should start.</span> **Examples** : #delay { font-size: 14px; transition-property: font-size; transition-duration: 4s; transition-delay: 2s; }#delay:hover { font-size: 36px; } <figure><img src="https://cdn-images-1.medium.com/max/800/0*Z6AbWnbmbFfu-tSM" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*_6nSuCOR34-6ET7n.gif" class="graf-image" /></figure>- <span id="e6c9">After a delay of two seconds, a four second transition begins where the font size goes from 36px to 14px.</span> <!-- --> .box { border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; transition: width 2s, height 2s, background-color 2s, transform 2s; }.box:hover { background-color: #ffcccc; width: 200px; height: 200px; transform: rotate(180deg); } <figure><img src="https://cdn-images-1.medium.com/max/800/0*PH5_YmVDFVGqWGjO" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*Ya7xiy0AqJaJ9RPq.gif" class="graf-image" /></figure>- <span id="c336">When the mouse hovers over a box, it spins due to the rotate transform. Width and height change and also the bg color.</span> ------------------------------------------------------------------------ ### BEM Guidelines - <span id="6474">BEM was created as a guideline to solve the issue of loose standards around CSS naming conventions.</span> - <span id="6d0c">**BEM** stands for `block`, `element`, `modifier`.</span> - <span id="3eb9">**Block**</span> - <span id="f6b4">A standalone entity that is meaningful on it’s own.</span> - <span id="7e86">Can be nested and interact with one another.</span> - <span id="338e">Holistic entities without DOM rep can be blocks.</span> - <span id="f2f0">May consist latin letters, digits, and dashes.</span> - <span id="3bfb">Any DOM node can be a block if it accepts a class name.</span> - <span id="5c9b">**Element**</span> - <span id="1b95">Part of a block and has no standalone meaning.</span> - <span id="b5cf">Any element that is semantically tied to a block.</span> - <span id="10e2">May consist latin letters, digits, and dashes.</span> - <span id="9b79">Formed by using two underscores after it’s block name.</span> - <span id="e282">Any DOM node within a block can be an element.</span> - <span id="a0dc">Element classes should be used independently.</span> - <span id="26f1">**Modifier**</span> - <span id="6642">A flag on blocks or elements. Use them to change appearance, behavior or state.</span> - <span id="6cca">Extra class name to add onto blocks or elements.</span> - <span id="745f">Add mods only to the elements they modify.</span> - <span id="6416">Modifier names may consist of Latin letters, digits, dashes and underscores.</span> - <span id="f940">Written with two dashes.</span> **BEM Example** <form class="form form--theme-xmas form--simple"> <input class="form__input" type="text" /> <input class="form__submit form__submit--disabled" type="submit" /> </form>/* block selector */ .form { }/* block modifier selector */ .form--theme-xmas { }/* block modifier selector */ .form--simple { }/* element selector */ .form__input { }/* element selector */ .form__submit { }/* element modifier selector */ .form__submit--disabled { } #### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: <a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br /> <em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 6, 2021](https://medium.com/p/938871b4521a). <a href="https://medium.com/@bryanguner/learn-css-so-that-your-site-doesnt-look-like-garbage-938871b4521a" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,321 @@ PostgreSQL Setup For Windows & WSL/Ubuntu ========================================= If you follow this guide to a tee… you will install PostgreSQL itself on your Windows installation. Then, you will install psql in your… ------------------------------------------------------------------------ ### PostgreSQL Setup For Windows & WSL/Ubuntu <figure><img src="https://cdn-images-1.medium.com/max/600/0*mhTM08D1J612VW7J" class="graf-image" /></figure>If you follow this guide to a tee… you will install PostgreSQL itself on your Windows installation. Then, you will install `psql` in your Ubuntu installation. Then you will also install Postbird, a cross-platform graphical user interface that makes working with SQL and PostgreSQL ‘allegedly’ …(personally I prefer to just use the command line but PG Admin makes for an immeasurably more complicated tutorial than postbird)… better than just using the **command line tool** `psql`**.** ### Important Distinction: PSQL is the frontend interface for PostgreSQL … they are not synonymous! **Postgres**, is a <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software" class="markup--anchor markup--p-anchor" title="Free and open-source software">free and open-source</a> <a href="https://en.wikipedia.org/wiki/Relational_database_management_system" class="markup--anchor markup--p-anchor" title="Relational database management system">relational database management system</a> (RDBMS) **PSQL:** The primary <a href="https://en.wikipedia.org/wiki/Front_and_back_ends" class="markup--anchor markup--p-anchor" title="Front and back ends">front-end</a> for PostgreSQL is the `psql` <a href="https://en.wikipedia.org/wiki/Command-line_program" class="markup--anchor markup--p-anchor" title="Command-line program">command-line program</a>, which can be used to enter SQL queries directly, or execute them from a file. In addition, psql provides a number of meta-commands and various shell-like features to facilitate writing scripts and automating a wide variety of tasks; for example tab completion of object names and SQL syntax. **pgAdmin:** The pgAdmin package is a free and open-source <a href="https://en.wikipedia.org/wiki/Graphical_user_interface" class="markup--anchor markup--p-anchor" title="Graphical user interface">graphical user interface</a> (GUI) administration tool for PostgreSQL. When you read “installation”, that means the actual OS that’s running on your machine. So, you have a Windows installation, Windows 10, that’s running when you boot your computer. Then, when you start the Ubuntu installation, it’s as if there’s a completely separate computer running inside your computer. It’s like having two completely different laptops. ### Other Noteworthy Distinctions: <figure><img src="https://cdn-images-1.medium.com/max/800/1*um8fm6FDTYYOXZrLudddpg.png" class="graf-image" /></figure>### Installing PostgreSQL 12 To install PostgreSQL 12, you need to download the installer from the Internet. PostgreSQL’s commercial company, Enterprise DB, offers installers for PostgreSQL for every major platform. Open <a href="https://www.enterprisedb.com/downloads/postgres-postgresql-downloads" class="markup--anchor markup--p-anchor">https://www.enterprisedb.com/downloads/postgres-postgresql-downloads</a>. Click the link for PostgreSQL 12 for Windows x86–64. <figure><img src="https://cdn-images-1.medium.com/max/800/0*wi4EbaVo-mamG_tH.png" class="graf-image" /></figure>Once that installer downloads, run it. You need to go through the normal steps of installing software. - <span id="a223">Yes, Windows, let the installer make changes to *my* device.</span> - <span id="d4d0">Thanks for the welcome. Next.</span> - <span id="1283">Yeah, that’s a good place to install it. Next.</span> - <span id="79cc">I don’t want that pgAdmin nor the Stack Builder things. Uncheck. Uncheck. Next.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*PSDmTsaD37MgFJ-A.png" class="graf-image" /></figure>- <span id="e09d">Also, great looking directory. Thanks. Next.</span> ### Oooh! A password! I’ll enter **\*\*\*\***. I sure won’t forget that because, if I do, I’ll have to uninstall and reinstall PostgreSQL and lose all of my hard work. **Seriously, write down this password or use one you will not forget!!!!!!!!!!!!!!!** ### I REALLY CANNOT STRESS THE ABOVE POINT ENOUGH… Experience is a great teacher but in this case … it’s not worth it. - <span id="25b7">Sure. 5432. Good to go. Next.</span> - <span id="28be">Not even sure what that means. Default! Next.</span> - <span id="b378">Yep. Looks good. Next.</span> Insert pop culture reference to pass the time ### Installing PostgreSQL Client Tools on Ubuntu Now, to install the PostgreSQL Client tools for Ubuntu. You need to do this so that the Node.js (and later Python) programs running on your Ubuntu installation can access the PostgreSQL server running on your Windows installation. You need to tell `apt`, the package manager, that you want it to go find the PostgreSQL 12 client tools from PostgreSQL itself rather than the common package repositories. You do that by issuing the following two commands. Copy and paste them one at a time into your shell. (If your Ubuntu shell isn't running, start one.) **Pro-tip**: Copy those commands because you’re not going to type them, right? After you copy one of them, you can just right-click on the Ubuntu shell. That should paste them in there for you. wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add - If prompted for your password, type it. echo "deb http://apt.postgresql.org/pub/repos/apt/ `lsb_release -cs`-pgdg main" | sudo tee /etc/apt/sources.list.d/pgdg.list The last line of output of those two commands running should read “OK”. If it does not, try copying and pasting them one at a time. Now that you’ve registered the PostgreSQL repositories as a source to look for PostgreSQL, you need to update the `apt` registry. You should do this before you install *any* software on Ubuntu. sudo apt update Once that’s finished running, the new entries for PostgreSQL 12 should be in the repository. Now, you can install them with the following command. sudo apt install postgresql-client-12 postgresql-common If it asks you if you want to install them, please tell it “Y”. Test that it installed by typing `psql --version`. You should see it print out information about the version of the installed tools. If it tells you that it can't find the command, try these instructions over. ### Configuring the client tools Since you’re going to be accessing the PosgreSQL installation from your Ubuntu installation on your Windows installation, you’re going to have to type that you want to access it over and over, which means extra typing. To prevent you from having to do this, you can customize your shell to always add the extra commands for you. This assumes you’re still using Bash. If you changed the shell that your Ubuntu installation uses, please follow that shell’s directions for adding an alias to its startup file. Make sure you’re in your Ubuntu home directory. You can do that by typing `cd` and hitting enter. Use `ls` to find out if you have a `.bashrc` file. Type `ls .bashrc`. If it shows you that one exists, that's the one you will add the alias to. If it tells you that there is no file named that, then type `ls .profile`. If it shows you that one exists, that's the one you will add the alias to. If it shows you that it does not exist, then use the file name `.bashrc` in the following section. Now that you know which profile file to use, type `code «profile file name»` where "profile file name" is the name of the file you determined from the last section. Once Visual Studio Code starts up with your file, at the end of it (or if you've already added aliases, in that section), type the following. alias psql="psql -h localhost" When you run `psql` from the command line, it will now always add the part about wanting to connect to *localhost* every time. You would have to type that each time, otherwise. To make sure that you set that up correctly, type `psql -U postgres postgres`. This tells the `psql` client that you want to connect as the user "postgres" (`-U postgres`) to the database postgres (`postgres` at the end), which is the default database created when PostgreSQL is installed. It will prompt you for a password. Type the password that you used when you installed PostgrSQL, earlier. If the alias works correctly and you type the correct password, then you should see something like the following output. psql (12.2 (Ubuntu 12.2-2.pgdg18.04+1)) Type "help" for help. postgres=# Type `\q` and hit Enter to exit the PostgreSQL client tool. Now, you will add a user for your Ubuntu identity so that you don’t have to specify it all the time. Then, you will create a file that PostgreSQL will use to automatically send your password every time. Copy and paste the following into your Ubuntu shell. Think of a password that you want to use for your user. **Replace the password in the single quotes in the command with the password that you want.** It *has* to be a non-empty string. PostgreSQL doesn’t like it when it’s not. psql -U postgres -c "CREATE USER `whoami` WITH PASSWORD 'password' SUPERUSER" It should prompt you for a password. Type the password that you created when you installed PostgreSQL. Once you type the correct password, you should see “CREATE ROLE”. Now you will create your PostgreSQL password file. Type the following into your Ubuntu shell to open Visual Studio Code and create a new file. code ~/.pgpass In that file, you will add this line, which tells it that on localhost for port 5432 (where PostgreSQL is running), for all databases (\*), **use your Ubuntu user name and the password that you just created for that user with the** `psql` **command you just typed.** (If you have forgotten your Ubuntu user name, type `whoami` on the command line.) Your entry in the file should have this format. localhost:5432:*:«your Ubuntu user name»:«the password you just used» Once you have that information in the file, save it, and close Visual Studio Code. The last step you have to take is change the permission on that file so that it is only readable by your user. PostgreSQL will ignore it if just anyone can read and write to it. This is for *your* security. Change the file permissions so only you can read and write to it. You did this once upon a time. Here’s the command. chmod go-rw ~/.pgpass You can confirm that only you have read/write permission by typing `ls -al ~/.pgpass`. That should return output that looks like this, **with your Ubuntu user name instead of "web-dev-hub".** -rw------- 1 web-dev-hub web-dev-hub 37 Mar 28 21:20 /home/web-dev-hub/.pgpass Now, try connecting to PostreSQL by typing `psql postgres`. Because you added the alias to your startup script, and because you created your **.pgpass** file, it should now connect without prompting you for any credentials! Type `\q` and press Enter to exit the PostgreSQL command line client. ### Installing Postbird Head over to the <a href="https://github.com/Paxa/postbird/releases" class="markup--anchor markup--p-anchor">Postbird releases page on GitHub</a>. Click the installer for Windows which you can recognize because it’s the only file in the list that ends with “.exe”. <figure><img src="https://cdn-images-1.medium.com/max/800/0*ZdKurvQ4bHs3vDLT.png" class="graf-image" /></figure>After that installer downloads, run it. You will get a warning from Windows that this is from an unidentified developer. If you don’t want to install this, find a PostgreSQL GUI client that you do trust and install it or do everything from the command line. <figure><img src="https://cdn-images-1.medium.com/max/800/0*EWpFEwM0YUDQCW_i.png" class="graf-image" /></figure>You should get used to seeing this because many open-source applications aren’t signed with the Microsoft Store for monetary and philosophical reasons. Otherwise, if you trust Paxa like web-dev-hub and tens of thousands of other developers do, then click the link that reads “More info” and the “Run anyway” button. <figure><img src="https://cdn-images-1.medium.com/max/800/0*9pDpx8XsYt2KnMku.png" class="graf-image" /></figure>When it’s done installing, it will launch itself. Test it out by typing the “postgres” into the “Username” field and the password from your installation in the “Password” field. Click the Connect button. It should properly connect to the running You can close it for now. It also installed an icon on your desktop. You can launch it from there or your Start Menu at any time. ### Now.. if you still have some gas in the tank… let’s put our new tools to work: ### The node-postgres The node-postgres is a collection of Node.js modules for interfacing with the PostgreSQL database. It has support for callbacks, promises, async/await, connection pooling, prepared statements, cursors, and streaming results. In our examples we also use the Ramda library. See Ramda tutorial for more information. ### Setting up node-postgres First, we install node-postgres. $ node -v v14.2 $ npm init -y We initiate a new Node application. npm i pg We install node-postgres with `nmp i pg`. npm i ramda In addition, we install Ramda for beautiful work with data. cars.sql DROP TABLE IF EXISTS cars; CREATE TABLE cars(id SERIAL PRIMARY KEY, name VARCHAR(255), price INT); INSERT INTO cars(name, price) VALUES(‘Audi’, 52642); INSERT INTO cars(name, price) VALUES(‘Mercedes’, 57127); INSERT INTO cars(name, price) VALUES(‘Skoda’, 9000); INSERT INTO cars(name, price) VALUES(‘Volvo’, 29000); INSERT INTO cars(name, price) VALUES(‘Bentley’, 350000); INSERT INTO cars(name, price) VALUES(‘Citroen’, 21000); INSERT INTO cars(name, price) VALUES(‘Hummer’, 41400); INSERT INTO cars(name, price) VALUES(‘Volkswagen’, 21600); In some of the examples, we use this `cars` table. ### The node-postgres first example In the first example, we connect to the PostgreSQL database and return a simple SELECT query result. first.js const pg = require(‘pg’); const R = require(‘ramda’); const cs = ‘postgres://postgres:s$cret@localhost:5432/ydb’; const client = new pg.Client(cs); client.connect(); client.query(‘SELECT 1 + 4’).then(res => { const result = R.head(R.values(R.head(res.rows))) console.log(result) }).finally(() => client.end()); The example connects to the database and issues a SELECT statement. const pg = require(‘pg’); const R = require(‘ramda’); We include the `pg` and `ramda` modules. const cs = ‘postgres://postgres:s$cret@localhost:5432/ydb’; This is the PostgreSQL connection string. It is used to build a connection to the database. const client = new pg.Client(cs); client.connect(); A client is created. We connect to the database with `connect()`. client.query(‘SELECT 1 + 4’).then(res => { const result = R.head(R.values(R.head(res.rows))); console.log(result); }).finally(() => client.end()); We issue a simple SELECT query. We get the result and output it to the console. The `res.rows` is an array of objects; we use Ramda to get the returned scalar value. In the end, we close the connection with `end()`. node first.js 5 This is the output. ### The node-postgres column names In the following example, we get the columns names of a database. > column\_names.js const pg = require(‘pg’); const cs = ‘postgres://postgres:s$cret@localhost:5432/ydb’; const client = new pg.Client(cs); client.connect(); client.query(‘SELECT * FROM cars’).then(res => { const fields = res.fields.map(field => field.name); console.log(fields); }).catch(err => { console.log(err.stack); }).finally(() => { client.end() }); The column names are retrieved with `res.fields` attribute. We also use the `catch` clause to output potential errors. node column_names.js ‘id’, ‘name’, ‘price’′id′,′name′,′price′ The output shows three column names of the `cars` table. ### Selecting all rows In the next example, we select all rows from the database table. > all\_rows.js const pg = require(‘pg’); const R = require(‘ramda’); const cs = ‘postgres://postgres:s$cret@localhost:5432/ydb’; const client = new pg.Client(cs); client.connect(); client.query(‘SELECT * FROM cars’).then(res => { const data = res.rows; console.log('all data'); data.forEach(row => { console.log(\`Id: ${row.id} Name: ${row.name} Price: ${row.price}\`); }) console.log('Sorted prices:'); const prices = R.pluck('price', R.sortBy(R.prop('price'), data)); console.log(prices); }).finally(() => { client.end() }); **TBC…** #### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Stackbit Web-Dev-HubTheme</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 6, 2021](https://medium.com/p/801672ab7089). <a href="https://medium.com/@bryanguner/postgresql-setup-for-windows-wsl-ubuntu-801672ab7089" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,966 @@ Python Study Guide for a JavaScript Programmer ============================================== A guide to commands in Python from what you know in JavaScript ------------------------------------------------------------------------ ### Python Study Guide for a JavaScript Programmer <figure><img src="https://cdn-images-1.medium.com/max/800/1*3V9VOfPk_hrFdbEAd3j-QQ.png" class="graf-image" /></figure>### Related Articles: <a href="https://medium.com/geekculture/beginners-guide-to-python-e5a59b5bb64d" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/beginners-guide-to-python-e5a59b5bb64d"><strong>Beginners Guide To Python</strong><br /> <em>My favorite language for maintainability is Python. It has simple, clean syntax, object encapsulation, good library…</em>medium.com</a><a href="https://medium.com/geekculture/beginners-guide-to-python-e5a59b5bb64d" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/beginner-python-problems-solutions-dd631e9c3a9f" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/beginner-python-problems-solutions-dd631e9c3a9f"><strong>Python Problems & Solutions For Beginners</strong><br /> <em>Introduction to python taught through example problems. Solutions are included in embedded repl.it at the bottom of…</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/beginner-python-problems-solutions-dd631e9c3a9f" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/webdevhub/notes-i-wish-i-had-when-i-started-learning-python-16ce4244be12" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/webdevhub/notes-i-wish-i-had-when-i-started-learning-python-16ce4244be12"><strong>Notes I Wish I Had When I Started Learning Python</strong><br /> <em>Plus resources for learning data structures and algorithms in python at the bottom of this article!</em>medium.com</a><a href="https://medium.com/webdevhub/notes-i-wish-i-had-when-i-started-learning-python-16ce4244be12" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/getting-comfortable-with-python-1371581a4971" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/getting-comfortable-with-python-1371581a4971"><strong>Getting Comfortable With Python:</strong><br /> <em>An introduction by example</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/getting-comfortable-with-python-1371581a4971" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/python-study-guide-for-a-native-javascript-developer-5cfdf3d2bdfb" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/python-study-guide-for-a-native-javascript-developer-5cfdf3d2bdfb"><strong>Python Study Guide for a JavaScript Programmer</strong><br /> <em>A guide to commands in Python from what you know in JavaScript</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/python-study-guide-for-a-native-javascript-developer-5cfdf3d2bdfb" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ------------------------------------------------------------------------ ------------------------------------------------------------------------ ### Applications of Tutorial & Cheat Sheet Respectively (At Bottom Of Tutorial): ### Basics - <span id="f893">**PEP8** : Python Enhancement Proposals, style-guide for Python.</span> - <span id="c0bf">`print` is the equivalent of `console.log`.</span> > ‘print() == console.log()’ ### `#` is used to make comments in your code. def foo(): """ The foo function does many amazing things that you should not question. Just accept that it exists and use it with caution. """ secretThing() > *Python has a built in help function that let’s you see a description of the source code without having to navigate to it… “-SickNasty … Autor Unknown”* ------------------------------------------------------------------------ ### Numbers - <span id="4060">Python has three types of numbers:</span> 1. <span id="8aef">**Integer**</span> 2. <span id="723f">**Positive and Negative Counting Numbers.**</span> No Decimal Point > Created by a literal non-decimal point number … **or** … with the `int()` constructor. print(3) # => 3 print(int(19)) # => 19 print(int()) # => 0 **3. Complex Numbers** > Consist of a real part and imaginary part. #### Boolean is a subtype of integer in Python.🤷♂️ > If you came from a background in JavaScript and learned to accept the premise(s) of the following meme… <figure><img src="https://cdn-images-1.medium.com/max/800/0*eC4EvZcv6hhH88jX.png" class="graf-image" /></figure>Than I am sure you will find the means to suspend your disbelief. print(2.24) # => 2.24 print(2.) # => 2.0 print(float()) # => 0.0 print(27e-5) # => 0.00027 ### KEEP IN MIND: > **The** `i` **is switched to a** `j` **in programming.** <span class="graf-dropCap">T</span>*his is because the letter i is common place as the de facto index for any and all enumerable entities so it just makes sense not to compete for name-****space*** *when there’s another 25 letters that don’t get used for every loop under the sun. My most medium apologies to Leonhard Euler.* print(7j) # => 7j print(5.1+7.7j)) # => 5.1+7.7j print(complex(3, 5)) # => 3+5j print(complex(17)) # => 17+0j print(complex()) # => 0j - <span id="2579">**Type Casting** : The process of converting one number to another.</span> <!-- --> # Using Float print(17) # => 17 print(float(17)) # => 17.0 # Using Int print(17.0) # => 17.0 print(int(17.0)) # => 17 # Using Str print(str(17.0) + ' and ' + str(17)) # => 17.0 and 17 **The arithmetic operators are the same between JS and Python, with two additions:** - <span id="8cf4">*“\*\*” : Double asterisk for exponent.*</span> - <span id="03b4">*“//” : Integer Division.*</span> - <span id="2ce5">**There are no spaces between math operations in Python.**</span> - <span id="1686">**Integer Division gives the other part of the number from Module; it is a way to do round down numbers replacing** `Math.floor()` **in JS.**</span> - <span id="a6a3">**There are no** `++` **and** `--` **in Python, the only shorthand operators are:**</span> <figure><img src="https://cdn-images-1.medium.com/max/600/0*Ez_1PZ93N4FfvkRr.png" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Strings - <span id="e98c">Python uses both single and double quotes.</span> - <span id="225e">You can escape strings like so `'Jodi asked, "What\'s up, Sam?"'`</span> - <span id="9f74">Multiline strings use triple quotes.</span> <!-- --> print('''My instructions are very long so to make them more readable in the code I am putting them on more than one line. I can even include "quotes" of any kind because they won't get confused with the end of the string!''') **Use the** `len()` **function to get the length of a string.** print(len(“Spaghetti”)) # => 9 ### **Python uses** `zero-based indexing` #### Python allows negative indexing (thank god!) print(“Spaghetti”[-1]) # => i print(“Spaghetti”[-4]) # => e - <span id="7567">Python let’s you use ranges</span> You can think of this as roughly equivalent to the slice method called on a JavaScript object or string… *(mind you that in JS … strings are wrapped in an object (under the hood)… upon which the string methods are actually called. As a immutable privative type* ***by textbook definition****, a string literal could not hope to invoke most of it’s methods without violating the state it was bound to on initialization if it were not for this bit of syntactic sugar.)* print(“Spaghetti”[1:4]) # => pag print(“Spaghetti”[4:-1]) # => hett print(“Spaghetti”[4:4]) # => (empty string) - <span id="1366">The end range is exclusive just like `slice` in JS.</span> <!-- --> # Shortcut to get from the beginning of a string to a certain index. print("Spaghetti"[:4]) # => Spag print("Spaghetti"[:-1]) # => Spaghett # Shortcut to get from a certain index to the end of a string. print("Spaghetti"[1:]) # => paghetti print("Spaghetti"[-4:]) # => etti - <span id="c786">The `index` string function is the equiv. of `indexOf()` in JS</span> <!-- --> print("Spaghetti".index("h")) # => 4 print("Spaghetti".index("t")) # => 6 - <span id="fbb6">The `count` function finds out how many times a substring appears in a string… pretty nifty for a hard coded feature of the language.</span> <!-- --> print("Spaghetti".count("h")) # => 1 print("Spaghetti".count("t")) # => 2 print("Spaghetti".count("s")) # => 0 print('''We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too. '''.count('the ')) # => 4 - <span id="7816">**You can use** `+` **to concatenate strings, just like in JS.**</span> - <span id="ed0a">**You can also use “\*” to repeat strings or multiply strings.**</span> - <span id="f95c">**Use the** `format()` **function to use placeholders in a string to input values later on.**</span> <!-- --> first_name = "Billy" last_name = "Bob" print('Your name is {0} {1}'.format(first_name, last_name)) # => Your name is Billy Bob - <span id="445b">*Shorthand way to use format function is: *`print(f'Your name is {first_name} {last_name}')`</span> #### Some useful string methods. - <span id="118c">**Note that in JS** `join` **is used on an Array, in Python it is used on String.**</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*eE3E5H0AoqkhqK1z.png" class="graf-image" /></figure>- <span id="e95e">There are also many handy testing methods.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*Q0CMqFd4PozLDFPB.png" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Variables and Expressions - <span id="a255">**Duck-Typing** : Programming Style which avoids checking an object’s type to figure out what it can do.</span> - <span id="6e70">Duck Typing is the fundamental approach of Python.</span> - <span id="5666">Assignment of a value automatically declares a variable.</span> <!-- --> a = 7 b = 'Marbles' print(a) # => 7 print(b) # => Marbles - <span id="f6cf">***You can chain variable assignments to give multiple var names the same value.***</span> #### Use with caution as this is highly unreadable count = max = min = 0 print(count) # => 0 print(max) # => 0 print(min) # => 0 #### The value and type of a variable can be re-assigned at any time. a = 17 print(a) # => 17 a = 'seventeen' print(a) # => seventeen - <span id="4605">`NaN` *does not exist in Python, but you can 'create' it like so: *`print(float("nan"))`</span> - <span id="d150">*Python replaces* `null` *with* `none`*.*</span> - <span id="6fa7">`none` ***is an object*** *and can be directly assigned to a variable.*</span> > Using none is a convenient way to check to see why an action may not be operating correctly in your program. ------------------------------------------------------------------------ ### Boolean Data Type - <span id="b843">One of the biggest benefits of Python is that it reads more like English than JS does.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*HQpndNhm1Z_xSoHb.png" class="graf-image" /></figure># Logical AND print(True and True) # => True print(True and False) # => False print(False and False) # => False # Logical OR print(True or True) # => True print(True or False) # => True print(False or False) # => False # Logical NOT print(not True) # => False print(not False and True) # => True print(not True or False) # => False - <span id="18cc">By default, Python considers an object to be true UNLESS it is one of the following:</span> - <span id="6e0a">Constant `None` or `False`</span> - <span id="9552">Zero of any numeric type.</span> - <span id="e7ce">Empty Sequence or Collection.</span> - <span id="11d6">`True` and `False` must be capitalized</span> ------------------------------------------------------------------------ ### Comparison Operators - <span id="a4fa">Python uses all the same equality operators as JS.</span> - <span id="7f98">In Python, equality operators are processed from left to right.</span> - <span id="fb68">Logical operators are processed in this order:</span> 1. <span id="bf08">**NOT**</span> 2. <span id="4888">**AND**</span> 3. <span id="2c55">**OR**</span> > Just like in JS, you can use `parentheses` to change the inherent order of operations. > **Short Circuit** : Stopping a program when a `true` or `false` has been reached. <figure><img src="https://cdn-images-1.medium.com/max/800/0*qHzGRLTOMTf30miT.png" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Identity vs Equality print (2 == '2') # => False print (2 is '2') # => False print ("2" == '2') # => True print ("2" is '2') # => True # There is a distinction between the number types. print (2 == 2.0) # => True print (2 is 2.0) # => False - <span id="c5a5">In the Python community it is better to use `is` and `is not` over `==` or `!=`</span> ------------------------------------------------------------------------ ### If Statements if name == 'Monica': print('Hi, Monica.') if name == 'Monica': print('Hi, Monica.') else: print('Hello, stranger.') if name == 'Monica': print('Hi, Monica.') elif age < 12: print('You are not Monica, kiddo.') elif age > 2000: print('Unlike you, Monica is not an undead, immortal vampire.') elif age > 100: print('You are not Monica, grannie.') > Remember the order of `elif` statements matter. ------------------------------------------------------------------------ ### While Statements spam = 0 while spam < 5: print('Hello, world.') spam = spam + 1 - <span id="c7f3">`Break` statement also exists in Python.</span> <!-- --> spam = 0 while True: print('Hello, world.') spam = spam + 1 if spam >= 5: break - <span id="7a99">As are `continue` statements</span> <!-- --> spam = 0 while True: print('Hello, world.') spam = spam + 1 if spam < 5: continue break ------------------------------------------------------------------------ ### Try/Except Statements - <span id="72ec">Python equivalent to `try/catch`</span> <!-- --> a = 321 try: print(len(a)) except: print('Silently handle error here') # Optionally include a correction to the issue a = str(a) print(len(a) a = '321' try: print(len(a)) except: print('Silently handle error here') # Optionally include a correction to the issue a = str(a) print(len(a)) - <span id="dcd1">You can name an error to give the output more specificity.</span> <!-- --> a = 100 b = 0 try: c = a / b except ZeroDivisionError: c = None print(c) - <span id="4027">You can also use the `pass` commmand to by pass a certain error.</span> <!-- --> a = 100 b = 0 try: print(a / b) except ZeroDivisionError: pass - <span id="030b">The `pass` method won't allow you to bypass every single error so you can chain an exception series like so:</span> <!-- --> a = 100 # b = "5" try: print(a / b) except ZeroDivisionError: pass except (TypeError, NameError): print("ERROR!") - <span id="bf45">You can use an `else` statement to end a chain of `except` statements.</span> <!-- --> # tuple of file names files = ('one.txt', 'two.txt', 'three.txt') # simple loop for filename in files: try: # open the file in read mode f = open(filename, 'r') except OSError: # handle the case where file does not exist or permission is denied print('cannot open file', filename) else: # do stuff with the file object (f) print(filename, 'opened successfully') print('found', len(f.readlines()), 'lines') f.close() - <span id="0e91">`finally` is used at the end to clean up all actions under any circumstance.</span> <!-- --> def divide(x, y): try: result = x / y except ZeroDivisionError: print("Cannot divide by zero") else: print("Result is", result) finally: print("Finally...") - <span id="84ee">Using duck typing to check to see if some value is able to use a certain method.</span> <!-- --> # Try a number - nothing will print out a = 321 if hasattr(a, '__len__'): print(len(a)) # Try a string - the length will print out (4 in this case) b = "5555" if hasattr(b, '__len__'): print(len(b)) ------------------------------------------------------------------------ ### Pass - <span id="2b80">Pass Keyword is required to write the JS equivalent of :</span> <!-- --> if (true) { } while (true) {} if True: pass while True: pass ------------------------------------------------------------------------ ### Functions - <span id="7091">**Function definition includes:**</span> - <span id="1f11">**The** `def` **keyword**</span> - <span id="ec14">**The name of the function**</span> - <span id="7733">**A list of parameters enclosed in parentheses.**</span> - <span id="1516">**A colon at the end of the line.**</span> - <span id="b2dd">**One tab indentation for the code to run.**</span> - <span id="bcef">**You can use default parameters just like in JS**</span> <!-- --> def greeting(name, saying="Hello"): print(saying, name) greeting("Monica") # Hello Monica greeting("Barry", "Hey") # Hey Barry #### **Keep in mind, default parameters must always come after regular parameters.** # THIS IS BAD CODE AND WILL NOT RUN def increment(delta=1, value): return delta + value - <span id="c1aa">*You can specify arguments by name without destructuring in Python.*</span> <!-- --> def greeting(name, saying="Hello"): print(saying, name) # name has no default value, so just provide the value # saying has a default value, so use a keyword argument greeting("Monica", saying="Hi") - <span id="54ac">The `lambda` keyword is used to create anonymous functions and are supposed to be `one-liners`.</span> `toUpper = lambda s: s.upper()` ------------------------------------------------------------------------ ### Notes #### Formatted Strings > Remember that in Python join() is called on a string with an array/list passed in as the argument. > Python has a very powerful formatting engine. > format() is also applied directly to strings. shopping_list = [‘bread’,’milk’,’eggs’] print(‘,’.join(shopping_list)) ### Comma Thousands Separator print(‘{:,}’.format(1234567890)) ‘1,234,567,890’ ### Date and Time d = datetime.datetime(2020, 7, 4, 12, 15, 58) print(‘{:%Y-%m-%d %H:%M:%S}’.format(d)) ‘2020–07–04 12:15:58’ ### Percentage points = 190 total = 220 print(‘Correct answers: {:.2%}’.format(points/total)) Correct answers: 86.36% ### Data Tables width=8 print(‘ decimal hex binary’) print(‘-’*27) for num in range(1,16): for base in ‘dXb’: print(‘{0:{width}{base}}’.format(num, base=base, width=width), end=’ ‘) print() Getting Input from the Command Line Python runs synchronously, all programs and processes will stop when listening for a user input. The input function shows a prompt to a user and waits for them to type ‘ENTER’. Scripts vs Programs Programming Script : A set of code that runs in a linear fashion. The largest difference between scripts and programs is the level of complexity and purpose. Programs typically have many UI’s. **Python can be used to display html, css, and JS.** *It is common to use Python as an API (Application Programming Interface)* #### Structured Data #### Sequence : The most basic data structure in Python where the index determines the order. > List > Tuple > Range > Collections : Unordered data structures, hashable values. ------------------------------------------------------------------------ #### Dictionaries Sets #### Iterable : Generic name for a sequence or collection; any object that can be iterated through. #### Can be mutable or immutable. Built In Data Types ------------------------------------------------------------------------ ### Lists are the python equivalent of arrays. empty_list = [] departments = [‘HR’,’Development’,’Sales’,’Finance’,’IT’,’Customer Support’] ### You can instantiate specials = list() #### Test if a value is in a list. print(1 in [1, 2, 3]) #> True print(4 in [1, 2, 3]) #> False # Tuples : Very similar to lists, but they are immutable #### Instantiated with parentheses time_blocks = (‘AM’,’PM’) #### Sometimes instantiated without colors = ‘red’,’blue’,’green’ numbers = 1, 2, 3 #### Tuple() built in can be used to convert other data into a tuple tuple(‘abc’) # returns (‘a’, ‘b’, ‘c’) tuple([1,2,3]) # returns (1, 2, 3) # Think of tuples as constant variables. #### Ranges : A list of numbers which can’t be changed; often used with for loops. **Declared using one to three parameters**. > Start : opt. default 0, first \# in sequence. > Stop : required next number past the last number in the sequence. > Step : opt. default 1, difference between each number in the sequence. range(5) # [0, 1, 2, 3, 4] range(1,5) # [1, 2, 3, 4] range(0, 25, 5) # [0, 5, 10, 15, 20] range(0) # [ ] for let (i = 0; i < 5; i++) for let (i = 1; i < 5; i++) for let (i = 0; i < 25; i+=5) for let(i = 0; i = 0; i++) # Keep in mind that stop is not included in the range. #### Dictionaries : Mappable collection where a hashable value is used as a key to ref. an object stored in the dictionary. #### Mutable. a = {‘one’:1, ‘two’:2, ‘three’:3} b = dict(one=1, two=2, three=3) c = dict([(‘two’, 2), (‘one’, 1), (‘three’, 3)]) # a, b, and c are all equal ***Declared with curly braces of the built in dict()*** > *Benefit of dictionaries in Python is that it doesn’t matter how it is defined, if the keys and values are the same the dictionaries are considered equal.* **Use the in operator to see if a key exists in a dictionary.** <span class="graf-dropCap">S</span>**ets : Unordered collection of distinct objects; objects that need to be hashable.** > *Always be unique, duplicate items are auto dropped from the set.* #### Common Uses: > Removing Duplicates > Membership Testing > Mathematical Operators: Intersection, Union, Difference, Symmetric Difference. **Standard Set is mutable, Python has a immutable version called frozenset. Sets created by putting comma seperated values inside braces:** school_bag = {‘book’,’paper’,’pencil’,’pencil’,’book’,’book’,’book’,’eraser’} print(school_bag) #### Also can use set constructor to automatically put it into a set. letters = set(‘abracadabra’) print(letters) #Built-In Functions #Functions using iterables **filter(function, iterable) : creates new iterable of the same type which includes each item for which the function returns true.** **map(function, iterable) : creates new iterable of the same type which includes the result of calling the function on every item of the iterable.** **sorted(iterable, key=None, reverse=False) : creates a new sorted list from the items in the iterable.** **Output is always a list** **key: opt function which coverts and item to a value to be compared.** **reverse: optional boolean.** **enumerate(iterable, start=0) : starts with a sequence and converts it to a series of tuples** quarters = [‘First’, ‘Second’, ‘Third’, ‘Fourth’] print(enumerate(quarters)) print(enumerate(quarters, start=1)) #### (0, ‘First’), (1, ‘Second’), (2, ‘Third’), (3, ‘Fourth’) #### (1, ‘First’), (2, ‘Second’), (3, ‘Third’), (4, ‘Fourth’) > zip(\*iterables) : creates a zip object filled with tuples that combine 1 to 1 the items in each provided iterable. > Functions that analyze iterable **len(iterable) : returns the count of the number of items.** **max(\*args, key=None) : returns the largest of two or more arguments.** **max(iterable, key=None) : returns the largest item in the iterable.** *key optional function which converts an item to a value to be compared. min works the same way as max* **sum(iterable) : used with a list of numbers to generate the total.** *There is a faster way to concatenate an array of strings into one string, so do not use sum for that.* **any(iterable) : returns True if any items in the iterable are true.** **all(iterable) : returns True is all items in the iterable are true.** ### Working with dictionaries **dir(dictionary) : returns the list of keys in the dictionary. Working with sets** **Union : The pipe | operator or union(\*sets) function can be used to produce a new set which is a combination of all elements in the provided set.** a = {1, 2, 3} b = {2, 4, 6} print(a | b) # => {1, 2, 3, 4, 6} #### Intersection : The & operator ca be used to produce a new set of only the elements that appear in all sets. a = {1, 2, 3} b = {2, 4, 6} print(a & b) # => {2} Difference : The — operator can be used to produce a new set of only the elements that appear in the first set and NOT the others. **Symmetric Difference : The ^ operator can be used to produce a new set of only the elements that appear in exactly one set and not in both.** a = {1, 2, 3} b = {2, 4, 6} print(a — b) # => {1, 3} print(b — a) # => {4, 6} print(a ^ b) # => {1, 3, 4, 6} ------------------------------------------------------------------------ ### **For Statements In python, there is only one for loop.** Always Includes: > 1. The for keyword > 2. A variable name > 3. The ‘in’ keyword > 4. An iterable of some kid > 5. A colon > 6. On the next line, an indented block of code called the for clause. **You can use break and continue statements inside for loops as well.** **You can use the range function as the iterable for the for loop.** print(‘My name is’) for i in range(5): print(‘Carlita Cinco (‘ + str(i) + ‘)’) total = 0 for num in range(101): total += num print(total) Looping over a list in Python for c in [‘a’, ‘b’, ‘c’]: print(c) lst = [0, 1, 2, 3] for i in lst: print(i) ***Common technique is to use the len() on a pre-defined list with a for loop to iterate over the indices of the list.*** supplies = [‘pens’, ‘staplers’, ‘flame-throwers’, ‘binders’] for i in range(len(supplies)): print(‘Index ‘ + str(i) + ‘ in supplies is: ‘ + supplies[i]) **You can loop and destructure at the same time.** l = 1, 2], [3, 4], [5, 6 for a, b in l: print(a, ‘, ‘, b) > Prints 1, 2 > Prints 3, 4 > Prints 5, 6 **You can use values() and keys() to loop over dictionaries.** spam = {‘color’: ‘red’, ‘age’: 42} for v in spam.values(): print(v) *Prints red* *Prints 42* for k in spam.keys(): print(k) *Prints color* *Prints age* **For loops can also iterate over both keys and values.** **Getting tuples** for i in spam.items(): print(i) *Prints (‘color’, ‘red’)* *Prints (‘age’, 42)* *Destructuring to values* for k, v in spam.items(): print(‘Key: ‘ + k + ‘ Value: ‘ + str(v)) *Prints Key: age Value: 42* *Prints Key: color Value: red* **Looping over string** for c in “abcdefg”: print(c) **When you order arguments within a function or function call, the args need to occur in a particular order:** *formal positional args.* \*args *keyword args with default values* \*\*kwargs def example(arg_1, arg_2, *args, **kwargs): pass def example2(arg_1, arg_2, *args, kw_1=”shark”, kw_2=”blowfish”, **kwargs): pass ------------------------------------------------------------------------ ### **Importing in Python** **Modules are similar to packages in Node.js** Come in different types: Built-In, Third-Party, Custom. **All loaded using import statements.** ------------------------------------------------------------------------ ### **Terms** > module : Python code in a separate file. > package : Path to a directory that contains modules. > <a href="http://init.py" class="markup--anchor markup--blockquote-anchor"><strong>init.py</strong></a> : Default file for a package. > submodule : Another file in a module’s folder. > function : Function in a module. **A module can be any file but it is usually created by placing a special file init.py into a folder. pic** *Try to avoid importing with wildcards in Python.* *Use multiple lines for clarity when importing.* from urllib.request import ( HTTPDefaultErrorHandler as ErrorHandler, HTTPRedirectHandler as RedirectHandler, Request, pathname2url, url2pathname, urlopen, ) ------------------------------------------------------------------------ ### Watching Out for Python 2 **Python 3 removed <> and only uses !=** **format() was introduced with P3** **All strings in P3 are unicode and encoded. md5 was removed.** **ConfigParser was renamed to configparser sets were killed in favor of set() class.** #### **print was a statement in P2, but is a function in P3.** ### Topics revisited (in python syntax) ### Cheat Sheet: #### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: <a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br /> <em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Python Cheat Sheet: ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: ### Discover More: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 6, 2021](https://medium.com/p/5cfdf3d2bdfb). <a href="https://medium.com/@bryanguner/python-study-guide-for-a-native-javascript-developer-5cfdf3d2bdfb" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,346 @@ Regular Expressions =================== description: ------------------------------------------------------------------------ #### <a href="http://medium.com/codex" class="markup--anchor markup--h4-anchor">CODEX</a> ### Regular Expressions <figure><img src="https://cdn-images-1.medium.com/max/800/0*VdDVM2Nzv6oGC5I0.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/1*D83R_a0SSgMR0hI4jP6Asw.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/1*vk5n412Bs-dx6UdgyUywdg.png" class="graf-image" /></figure>### description: *Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the* `exec()` *and* `test()` *methods of* `RegExp`*, and with the* `match()`*,* `matchAll()`*,* `replace()`*,* `replaceAll()`*,* `search()`*, and* `split()` *methods of* `String`*. This chapter describes JavaScript regular expressions.* ### Creating a regular expression You construct a regular expression in one of two ways: 1. <span id="8a7f">**Using a regular expression literal, which consists of a pattern enclosed between slashes, as follows:**</span> `let re = /ab+c/;` - <span id="f4e2">Regular expression literals provide compilation of the regular expression when the script is loaded. If the regular expression remains constant, using this can improve performance.</span> **2. Or calling the constructor function of the** `RegExp` **object, as follows:** - <span id="2016">`let re = new RegExp('ab+c');`</span> > *Using the constructor function provides runtime compilation of the regular expression*. Use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are getting it from another source, such as user input. ### Writing a regular expression pattern A regular expression pattern is composed of simple characters, such as `/abc/`, or a combination of simple and special characters, such as `/ab*c/` or `/Chapter (\d+)\.\d*/`. The last example includes **parentheses, which are used as a memory device**. *The match made with this part of the pattern is remembered for later use.* ### Using simple patterns Simple patterns are constructed of characters for which you want to find a direct match. For example, the pattern `/abc/` matches character combinations in strings only when the exact sequence `"abc"` occurs (all characters together and in that order). Such a match would succeed in the strings `"Hi, do you know your abc's?"` and `"The latest airplane designs evolved from slabcraft."` In both cases the match is with the substring `"abc"`. There is no match in the string `"Grab crab"` because while it contains the substring `"ab c"`, it does not contain the exact substring `"abc"`. ### Using special characters When the search for a match requires something more than a direct match, such as finding one or more b's, or finding white space, you can include special characters in the pattern. For example, to match *a single* `"a"` *followed by zero or more* `"b"`*s followed by* `"c"`, you'd use the pattern `/ab*c/`: > the `*` after `"b"` means "0 or more occurrences of the preceding item." In the string `"cbbabbbbcdebc"`, this pattern will match the substring `"abbbbc"`. <a href="https://github.com/bgoonz/Cheat-Sheets/blob/master/Regular_Expressions/Assertions.html" class="markup--anchor markup--p-anchor"><strong>Assertions</strong></a>** : Assertions include boundaries, which indicate the beginnings and endings of lines and words, and other patterns indicating in some way that a match is possible (including look-ahead, look-behind, and conditional expressions).** <a href="https://github.com/bgoonz/Cheat-Sheets/blob/master/Regular_Expressions/Character_Classes.html" class="markup--anchor markup--p-anchor"><strong>Character classes</strong></a>** : Distinguish different types of characters. For example, distinguishing between letters and digits.** <a href="https://github.com/bgoonz/Cheat-Sheets/blob/master/Regular_Expressions/Groups_and_Ranges.html" class="markup--anchor markup--p-anchor"><strong>Groups and ranges</strong></a>** : Indicate groups and ranges of expression characters.** <a href="https://github.com/bgoonz/Cheat-Sheets/blob/master/Regular_Expressions/Quantifiers.html" class="markup--anchor markup--p-anchor"><strong>Quantifiers</strong></a>** : Indicate numbers of characters or expressions to match.** <a href="https://github.com/bgoonz/Cheat-Sheets/blob/master/Regular_Expressions/Unicode_Property_Escapes.html" class="markup--anchor markup--p-anchor"><strong>Unicode property escapes</strong></a>** : Distinguish based on unicode character properties, for example, upper- and lower-case letters, math symbols, and punctuation.** If you want to look at all the special characters that can be used in regular expressions in a single table, see the following: <figure><img src="https://cdn-images-1.medium.com/max/800/1*Wk5zFr1IHJxacq2a2zi5RQ.png" class="graf-image" /></figure>### Special characters in regular expressions. ### Escaping If you need to use any of the special characters literally (actually searching for a `"*"`, for instance), you must escape it by putting a **backslash** in front of it. For instance, to search for `"a"` followed by `"*"` followed by `"b"`, > you'd use `/a\*b/` --- the backslash "escapes" the `"*"`, making it literal instead of special. Similarly, if you're writing a regular expression literal and need to match a slash ("/"), you need to escape that (otherwise, it terminates the pattern) For instance, to search for the string "/example/" followed by one or more alphabetic characters, you'd use `/\/example\/[a-z]+/i` **--the backslashes before each slash make them literal.** To match a literal backslash, you need to escape the backslash. For instance, to match the string "C:\\" where "C" can be any letter, you'd use `/[A-Z]:\\/` --- the first backslash escapes the one after it, so the expression searches for a single literal backslash. If using the `RegExp` constructor with a string literal, **remember that the backslash is an escape in string literals, so to use it in the regular expression, you need to escape it at the string literal level**. `/a\*b/` and `new RegExp("a\\*b")` create the same expression, which searches for "a" followed by a literal "\*" followed by "b". If escape strings are not already part of your pattern you can add them using `String.replace`: function escapeRegExp(string) { return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string } **The "g" after the regular expression is an option or flag that performs a global search, looking in the whole string and returning all matches.** ### Using parentheses Parentheses around any part of the regular expression pattern causes that part of the matched substring to be remembered. Once remembered, the substring can be recalled for other use. ### Using regular expressions in JavaScript Regular expressions are used with the `RegExp` **methods** `test()` **and** `exec()` and with the `String` **methods** `match()`**,** `replace()`**,** `search()`**, and** `split()`**.** ------------------------------------------------------------------------ ### Method Descriptions #### `exec()` Executes a search for a match in a string. It returns an array of information or `null` on a mismatch. #### `test()` Tests for a match in a string. It returns `true` or `false`. #### `match()` Returns an array containing all of the matches, including capturing groups, or `null` if no match is found. #### `matchAll()` Returns an iterator containing all of the matches, including capturing groups. #### `search()` Tests for a match in a string. It returns the index of the match, or `-1` if the search fails. #### `replace()` Executes a search for a match in a string, and replaces the matched substring with a replacement substring. #### `replaceAll()` Executes a search for all matches in a string, and replaces the matched substrings with a replacement substring. #### `split()` Uses a regular expression or a fixed string to break a string into an array of substrings. ### Methods that use regular expressions When you want to know whether a pattern is found in a string, use the `test()` or `search()` methods; for more information (but slower execution) use the `exec()` or `match()` methods. If you use `exec()` or `match()` and if the match succeeds, these methods return an array and update properties of the associated regular expression object and also of the predefined regular expression object, `RegExp`. If the **match fails, the** `exec()` **method returns** `null` (which coerces to `false`). In the following example, the script uses the `exec()` method to find a match in a string. let myRe = /d(b+)d/g; let myArray = myRe.exec('cdbbdbsbz'); If you do not need to access the properties of the regular expression, an alternative way of creating `myArray` is with this script: let myArray = /d(b+)d/g.exec('cdbbdbsbz'); // similar to "cdbbdbsbz".match(/d(b+)d/g); however, // "cdbbdbsbz".match(/d(b+)d/g) outputs Array [ "dbbd" ], while // /d(b+)d/g.exec('cdbbdbsbz') outputs Array [ 'dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ]. (See <a href="https://github.com/bgoonz/Cheat-Sheets/blob/master/Regular_Expressions.md#g-different-behaviors" class="markup--anchor markup--p-anchor">different behaviors</a> for further info about the different behaviors.) If you want to construct the regular expression from a string, yet another alternative is this script: let myRe = new RegExp('d(b+)d', 'g'); let myArray = myRe.exec('cdbbdbsbz'); With these scripts, the match succeeds and returns the array and updates the properties shown in the following table. Results of regular expression execution. You can use a regular expression created with an object initializer without assigning it to a letiable. If you do, however, every occurrence is a new regular expression. For this reason, if you use this form without assigning it to a letiable, you cannot subsequently access the properties of that regular expression. For example, assume you have this script: let myRe = /d(b+)d/g; let myArray = myRe.exec('cdbbdbsbz'); console.log('The value of lastIndex is ' + myRe.lastIndex); // "The value of lastIndex is 5" However, if you have this script: let myArray = /d(b+)d/g.exec('cdbbdbsbz'); console.log('The value of lastIndex is ' + /d(b+)d/g.lastIndex); // "The value of lastIndex is 0" The occurrences of `/d(b+)d/g` in the two statements are different regular expression objects and hence have different values for their `lastIndex` property. If you need to access the properties of a regular expression created with an object initializer, you should first assign it to a variable. ### \[Advanced searching with flags\] Regular expressions have **six optional flags** that allow for functionality like global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression. Flag Description Corresponding property ------------------------------------------------------------------------ `g` Global search. `RegExp.prototype.global` `i` Case-insensitive search. `RegExp.prototype.ignoreCase` `m` Multi-line search. `RegExp.prototype.multiline` `s` Allows `.` to match newline characters. `RegExp.prototype.dotAll` `u` "unicode"; treat a pattern as a sequence of unicode code points. `RegExp.prototype.unicode` `y` Perform a "sticky" search that matches starting at the current position in the target string. `RegExp.prototype.sticky` #### Regular expression flags *To include a flag with the regular expression, use this syntax:* let re = /pattern/flags; or let re = new RegExp('pattern', 'flags'); Note that the flags are an integral part of a regular expression. They cannot be added or removed later. For example, `re = /\w+\s/g` creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string. let re = /\w+\s/g; let str = 'fee fi fo fum'; let myArray = str.match(re); console.log(myArray); // ["fee ", "fi ", "fo "] You could replace the line: let re = /\w+\s/g; with: let re = new RegExp('\\w+\\s', 'g'); and get the same result. The behavior associated with the `g` flag is different when the `.exec()` method is used. The roles of "class" and "argument" get reversed: In the case of `.match()`, the string class (or data type) owns the method and the regular expression is just an argument, while in the case of `.exec()`, it is the regular expression that owns the method, with the string being the argument. Contrast this `str.match(re)` versus `re.exec(str)`. The `g` flag is used with the `.exec()` method to get iterative progression. let xArray; while(xArray = re.exec(str)) console.log(xArray); // produces: // ["fee ", index: 0, input: "fee fi fo fum"] // ["fi ", index: 4, input: "fee fi fo fum"] // ["fo ", index: 7, input: "fee fi fo fum"] The `m` flag is used to specify that a multiline input string should be treated as multiple lines. If the `m` flag is used, `^` and `$` match at the start or end of any line within the input string instead of the start or end of the entire string. ### Using special characters to verify input In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid. Within non-capturing parentheses `(?:` , the regular expression looks for three numeric characters `\d{3}` OR `|` a left parenthesis `\(` followed by three digits` \d{3}`, followed by a close parenthesis `\)`, (end non-capturing parenthesis `)`), followed by one dash, forward slash, or decimal point and when found, remember the character `([-\/\.])`, followed by three digits `\d{3}`, followed by the remembered match of a dash, forward slash, or decimal point `\1`, followed by four digits `\d{4}`. The `Change` event activated when the user presses Enter sets the value of `RegExp.input`. #### HTML <p> Enter your phone number (with area code) and then click "Check". <br> The expected format is like ###-###-####. </p> <form action="#"> <input id="phone"> <button onclick="testInfo(document.getElementById('phone'));">Check</button> </form> #### JavaScript let re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/; function testInfo(phoneInput) { let OK = re.exec(phoneInput.value); if (!OK) { console.error(phoneInput.value + ' isn\'t a phone number with area code!'); } else { console.log('Thanks, your phone number is ' + OK[0]);} } ### Cheat Sheet <figure><img src="https://cdn-images-1.medium.com/max/800/1*VmpGy_BYCekOncdyrgSrxw.png" class="graf-image" /></figure>#### If you found this guide helpful feel free to checkout my GitHub/gist's where I host similar content: > <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--blockquote-anchor"><strong>bgoonz’s</strong> gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: <a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br /> <em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 6, 2021](https://medium.com/p/4d8fb3eb146b). <a href="https://medium.com/@bryanguner/regular-expressions-4d8fb3eb146b" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,161 @@ Writing Files Using Python ========================== Basics of Writing Files in Python The common methods to operate with files are open() to open a file, ------------------------------------------------------------------------ ### Writing Files Using Python Basics of Writing Files in Python The common methods to operate with files are open() to open a file, seek() to set the file’s current position at the given offset, and close() to close th As pointed out in a previous article that deals with reading data from files, file handling belongs to the essential knowledge of every professional Python programmer. This feature is a core part of the Python language, and no extra module needs to be loaded to do it properly. ### Basics of Writing Files in Python The common methods to operate with files are `open()` to open a file, `seek()` to set the file's current position at the given offset, and `close()` to close the file afterwards. The `open()` method returns a file handle that represents a <a href="https://docs.python.org/3/glossary.html#term-file-object" class="markup--anchor markup--p-anchor">file object</a> to be used to access the file for reading, writing, or appending. Writing to a file requires a few decisions — the name of the file in which to store data and the access mode of the file. Available are two modes, writing to a new file (and overwriting any existing data) and appending data at the end of a file that already exists. The according abbreviations are “w”, and “a”, and have to be specified before opening a file. In this article we will explain how to write data to a file line by line, as a list of lines, and appending data at the end of a file. ### Writing a Single Line to a File This first example is pretty similar to writing to files with the popular programming languages C and C++, as you’ll see in *Listing 1*. The process is pretty straightforward. First, we open the file using the `open()` method for writing, write a single line of text to the file using the `write()` method, and then close the file using the `close()` method. Keep in mind that due to the way we opened the "helloworld.txt" file it will either be created if it does not exist yet, or it will be completely overwritten. filehandle = open('helloworld.txt', 'w') filehandle.write('Hello, world!\n') filehandle.close() *Listing 1* This entire process can be shortened using the `with` statement. *Listing 2* shows how to write that. As already said before keep in mind that by opening the "helloworld.txt" file this way will either create if it does not exist yet or completely overwritten, otherwise. with open('helloworld.txt', 'w') as filehandle: filehandle.write('Hello, world!\n') *Listing 2* ### Writing a List of Lines to a File In reality a file does not consist only of a single line, but much more data. Therefore, the contents of the file are stored in a list that represents a file buffer. To write the entire file buffer we’ll use the `writelines()` method. *Listing 3* gives you an example of this. filehandle = open("helloworld.txt", "w") filebuffer = ["a first line of text", "a second line of text", "a third line"] filehandle.writelines(filebuffer) filehandle.close() *Listing 3* Running the Python program shown in *Listing 3* and then using the `cat` command we can see that the file "helloworld.txt" has the following content: $ cat helloworld.txt a first line of text a second line of text a third line *Listing 4* This happens because **the** `writelines()` **method does not automatically add any line separators when writing the data**. *Listing 5* shows how to achieve that, writing each line of text on a single line by adding the line separator "\\n". Using a generator expression each line is substituted by the line plus line separator. Again, you can formulate this using the `with` statement. with open('helloworld.txt', 'w') as filehandle: filebuffer = ["a line of text", "another line of text", "a third line"] filehandle.writelines("%s\n" % line for line in filebuffer) *Listing 5* Now, the output file “helloworld.txt” has the desired content as shown in *Listing 6*: $ cat helloworld.txt a first line of text a second line of text a third line *Listing 6* Interestingly, there is a way to use output redirection in Python to write data to files. *Listing 7* shows how to code that for Python 2.x. filename = "helloworld.txt" filecontent = ["Hello, world", "a second line", "and a third line"] with open(filename, 'w') as filehandle: for line in filecontent: print >>filehandle, line *Listing 7* For the latest Python releases this does not work in the same way anymore. To do something like this we must use the `sys` module. It allows us to access the UNIX standard output channels via `sys.stdout`, `sys.stdin`, and `sys.stderr`. In our case we preserve the original value of the output channel `sys.stdout`, first (line 8 in the code below), redefine it to the handle of our output file, next (line 15), print the data as usual (line 18), and finally restore the original value of the output channel `sys.stdout` (line 21). *Listing 8* contains the example code. import sys filename = "helloworld.txt" original = sys.stdout filecontent = ["Hello, world", "a second line", "and a third line"] with open(filename, 'w') as filehandle: sys.stdout = filehandle for line in filecontent: print(line) sys.stdout = original *Listing 8* This is not necessarily best practice, but it does give you other options for writing lines to a file. ### Appending Data to a File So far, we have stored data in new files or in overwritten data in existing files. But what if we want to append data to the end of an existing file? In this case we would need to open the existing file using a different access mode. We change that to ‘a’ instead of ‘w’. *Listing 9* shows how to handle that. And *Listing 10* does the same thing, but it uses the `with` statement rather. filehandle = open('helloworld.txt','a') filehandle.write('\n' + 'Hello, world!\n') filehandle.close() *Listing 9* with open('helloworld.txt', 'a') as filehandle: filehandle.write('\n' + 'Hello, world!\n') *Listing 10* Using the same helloworld.txt file from before, running this code will produce the following file contents: $ cat helloworld.txt Hello, world a second line and a third line Hello, world! ### Conclusion Writing plain text data to files, or appending data to existing files, is as easy as reading from files in Python. As soon as a file is closed after writing or appending data, Python triggers a synchronization call. As a result, the updated file is immediately written to disk. #### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 6, 2021](https://medium.com/p/d46b4851366f). <a href="https://medium.com/@bryanguner/writing-files-using-python-d46b4851366f" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,119 @@ Web Dev Resources ================= Web Development ------------------------------------------------------------------------ ### Web Dev Resources <figure><img src="https://cdn-images-1.medium.com/max/800/0*S5zCjm6p0WSZJQfT" alt="Photo by Roman Synkevych on Unsplash" class="graf-image" /><figcaption>Photo by <a href="https://unsplash.com/@synkevych?utm_source=medium&utm_medium=referral" class="markup--anchor markup--figure-anchor">Roman Synkevych</a> on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral" class="markup--anchor markup--figure-anchor">Unsplash</a></figcaption></figure>### Web Development - <span id="7f87"><a href="https://caniuse.com/#home" class="markup--anchor markup--li-anchor">Check cross-browser compatibility for CSS, JavaScript and HTML</a></span> - <span id="6491"><a href="https://medium.freecodecamp.org/modern-frontend-hacking-cheatsheets-df9c2566c72a" class="markup--anchor markup--li-anchor">Modern front-end Cheatsheets</a></span> - <span id="1272"><a href="https://stackshare.io/" class="markup--anchor markup--li-anchor">Check out what your favorite company’s stack is</a></span> - <span id="d228"><a href="https://medium.com/coderbyte/a-guide-to-becoming-a-full-stack-developer-in-2017-5c3c08a1600c" class="markup--anchor markup--li-anchor">A Guide to Becoming a Full-Stack Developer in 2017</a></span> - <span id="0b32"><a href="http://edusagar.com/articles/view/70/What-happens-when-you-type-a-URL-in-browser" class="markup--anchor markup--li-anchor">What happens when you type a URL into a web browser</a></span> ### JavaScript - <span id="cb55"><a href="https://github.com/airbnb/javascript" class="markup--anchor markup--li-anchor">Airbnb JavaScript Style Guide</a></span> - <span id="5f22"><a href="https://medium.freecodecamp.org/regular-expressions-demystified-regex-isnt-as-hard-as-it-looks-617b55cf787" class="markup--anchor markup--li-anchor">Regular Expressions Demystified</a></span> - <span id="1f9e"><a href="https://kangax.github.io/compat-table/es6/" class="markup--anchor markup--li-anchor">ECMAScript compatibility table</a></span> ### GIT - <span id="c612"><a href="http://product.hubspot.com/blog/git-and-github-tutorial-for-beginners" class="markup--anchor markup--li-anchor">HubSpot’s Intro to Git/GitHub including Pull Requests & Merging</a></span> ### Express - <span id="f5e1"><a href="https://github.com/tanukid/express-starter" class="markup--anchor markup--li-anchor">Express Starter</a></span> ### Node.js - <span id="3f91"><a href="https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5" class="markup--anchor markup--li-anchor">Fetch vs. Axios.js for making http requests</a> \#\# Sequelize</span> - <span id="b94a"><a href="https://www.youtube.com/watch?v=6NKNfXtKk0c" class="markup--anchor markup--li-anchor">Sequelize: Getting Started</a></span> - <span id="fe38">\[Sequelize reference by @tmkelly28\](https://github.com/tmkelly28/sequelize-reference)</span> - <span id="63a1"><a href="https://blog.cloudboost.io/docs-for-the-sequelize-docs-querying-edition-aed4bd1273f0" class="markup--anchor markup--li-anchor">Short but useful Sequelize querying cheatsheet</a></span> ### Study Guides - <span id="06de"><a href="https://github.com/ohagert1/Express-Sequelize-Boilerplate-Study-Guide" class="markup--anchor markup--li-anchor">Express & Sequelize Boilerplate/Study Guide</a></span> ### React - <span id="524d"><a href="https://www.youtube.com/channel/UCZkjWyyLvzWeoVWEpRemrDQ" class="markup--anchor markup--li-anchor">React Casts — Series of React tutorials by Cassio</a></span> - <span id="4e2f"><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en" class="markup--anchor markup--li-anchor">React Dev Tool Google Chrome Extension</a></span> - <span id="f6ec"><a href="https://github.com/facebookincubator/create-react-app" class="markup--anchor markup--li-anchor">create-react-app: Create React apps with no build configuration.</a></span> - <span id="e294"><a href="https://www.javascriptstuff.com/react-starter-projects/" class="markup--anchor markup--li-anchor">Find the perfect React starter template</a></span> - <span id="df74"><a href="https://github.com/jaredpalmer/formik" class="markup--anchor markup--li-anchor">Formik — Build forms in React, without the tears 😭</a></span> ### Redux - <span id="3ec4"><a href="https://egghead.io/courses/getting-started-with-redux" class="markup--anchor markup--li-anchor">Getting Started with Redux (free course by Dan Abramov)</a></span> - <span id="ccfe"><a href="https://egghead.io/courses/building-react-applications-with-idiomatic-redux" class="markup--anchor markup--li-anchor">Building React Applications with Idiomatic Redux (free course by Dan Abramov)</a></span> - <span id="5cd7"><a href="https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en" class="markup--anchor markup--li-anchor">Redux Dev Tool Chrome Extension</a></span> ### Redux Middleware - <span id="281b"><a href="https://github.com/buunguyen/redux-freeze" class="markup--anchor markup--li-anchor">redux-freeze: avoid accidental in-place mutations of state</a></span> - <span id="34e9"><a href="https://github.com/redux-saga/redux-saga" class="markup--anchor markup--li-anchor">redux-saga: manage redux side-effects with es6 generators</a></span> - <span id="7dd0"><a href="https://github.com/pburtchaell/redux-promise-middleware" class="markup--anchor markup--li-anchor">redux-promise-middleware: A thunk alternative with more bells and whistles</a> \#\# CSS</span> - <span id="883f"><a href="https://specificity.keegan.st/" class="markup--anchor markup--li-anchor">Specificity Calculator</a></span> - <span id="4a83"><a href="http://bennettfeely.com/clippy/" class="markup--anchor markup--li-anchor">Tool for making clip-paths quickly with CSS</a></span> ### Command Line - <span id="ed0b"><a href="https://lifehacker.com/5743814/become-a-command-line-ninja-with-these-time-saving-shortcuts" class="markup--anchor markup--li-anchor">Useful commands</a></span> - <span id="bf51">Get your IP address in Mac OSX/Unix: `ifconfig | grep 'inet '`</span> ### Atom - <span id="118a"><a href="https://gist.github.com/chrissimpkins/5bf5686bae86b8129bee" class="markup--anchor markup--li-anchor">Atom command cheat sheet</a></span> ### VS Code - <span id="e3ec"><a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf" class="markup--anchor markup--li-anchor">Keystroke cheat sheet</a></span> - <span id="7f06"><a href="https://gist.github.com/tanukid/4ba5d7021a2027362592cbac0a356f58" class="markup--anchor markup--li-anchor">Daniel’s Config</a></span> ### Sublime - <span id="e63f"><a href="http://sweetme.at/2013/08/08/sublime-text-keyboard-shortcuts/" class="markup--anchor markup--li-anchor">Keystroke cheat sheet</a></span> - <span id="02d2"><a href="https://medium.com/beyond-the-manifesto/configuring-sublime-text-3-for-modern-es6-js-projects-6f3fd69e95de" class="markup--anchor markup--li-anchor">Configuring Sublime Text 3 for Modern ES6 JS Projects</a></span> ### Whiteboard Interviews - <span id="555f"><a href="https://www.algoexpert.io/product" class="markup--anchor markup--li-anchor">algoexpert.io (Made by FSA alumni)</a></span> - <span id="cb9b"><a href="https://github.com/mgechev/javascript-algorithms" class="markup--anchor markup--li-anchor">JavaScript implementation of popular algorithms and data structures</a></span> - <span id="ed3d"><a href="www.codewars.com" class="markup--anchor markup--li-anchor">Code Wars</a></span> - <span id="d0e8"><a href="http://www.geeksforgeeks.org/" class="markup--anchor markup--li-anchor">Geeks for Geeks</a></span> - <span id="adce"><a href="https://www.interviewcake.com/" class="markup--anchor markup--li-anchor">Interview Cake</a></span> - <span id="9e2d"><a href="https://leetcode.com/" class="markup--anchor markup--li-anchor">Leet Code</a></span> - <span id="3b9d"><a href="https://coderbyte.com/" class="markup--anchor markup--li-anchor">Coder Byte</a></span> - <span id="b6d5"><a href="https://www.hackerrank.com/" class="markup--anchor markup--li-anchor">Hacker Rank</a></span> - <span id="6a45"><a href="https://www.amazon.com/Cracking-Coding-Interview-Programming-Questions/dp/0984782850/ref=pd_lpo_sbs_14_t_0?_encoding=UTF8&psc=1&refRID=8BB0KRJ073A8CZXTW5PP&dpID=41XgSiYW7dL&preST=_SY291_BO1,204,203,200_QL40_&dpSrc=detail" class="markup--anchor markup--li-anchor">Cracking the Coding Interview</a></span> Here’s a repo where I hoard resource lists! <a href="https://github.com/bgoonz/Cumulative-Resource-List.git" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz/Cumulative-Resource-List.git"><strong>bgoonz/Cumulative-Resource-List</strong><br /> <em>Inspired by Awesome Lists. Contribute to bgoonz/Cumulative-Resource-List development by creating an account on GitHub.</em>github.com</a><a href="https://github.com/bgoonz/Cumulative-Resource-List.git" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ------------------------------------------------------------------------ #### If you found this guide helpful feel free to checkout my GitHub/gist’s where I host similar content: > <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--blockquote-anchor"><strong>bgoonz’s</strong> gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: <a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br /> <em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 7, 2021](https://medium.com/p/ec1975773d7d). <a href="https://medium.com/@bryanguner/web-dev-resources-ec1975773d7d" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,272 @@ An Introduction to Markdown (Bonus Markdown Templates Included) =============================================================== Basic Syntax Guide ------------------------------------------------------------------------ ### An Introduction to Markdown (Bonus Markdown Templates Included) <figure><img src="https://cdn-images-1.medium.com/max/800/0*oy6szzmI0FdRUiTd.png" class="graf-image" /></figure><a href="https://github.com/bgoonz/Markdown-Templates.git" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz/Markdown-Templates.git"><strong>bgoonz/Markdown-Templates</strong><br /> <em>One Paragraph of project description goes here These instructions will get you a copy of the project up and running on…</em>github.com</a><a href="https://github.com/bgoonz/Markdown-Templates.git" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Basic Syntax Guide This topic is meant to give you a very basic overview of how Markdown works, showing only some of the most common operations you use most frequently. Keep in mind that you can also use the Edit menus to inject markdown using the toolbar, which serves as a great way to see how Markdown works. However, Markdown’s greatest strength lies in its simplicity and keyboard friendly approach that lets you focus on writing your text and staying on the keyboard. ### What is Markdown Markdown is very easy to learn and get comfortable with due it’s relatively small set of markup ‘commands’. It uses already familiar syntax to represent common formatting operations. Markdown understands basic line breaks so you can generally just type text. Markdown also allows for raw HTML inside of a markdown document, so if you want to embed something more fancy than what Markdowns syntax can do you can always fall back to HTML. However to keep documents readable that’s generally not recommended. ### Basic Markdown Syntax The following are a few examples of the most common things you are likely to do with Markdown while building typical documentation. ### Bold and Italic markdown This text **is bold**. This text *is italic*. This text is bold. This text *is italic*. ### Header Text markdown # Header 1 ## Header 2 ### Header 3 #### Header 4 ##### Header 5 ###### Header 6 ### Header 1 ### Header 2 ### Header 3 #### Header 4 Header 5Header 6 ### Line Continuation By default Markdown adds paragraphs at double line breaks. Single line breaks by themselves are simply wrapped together into a single line. If you want to have soft returns that break a single line, add two spaces at the end of the line. markdown This line has a paragraph break at the end (empty line after). Theses two lines should display as a single line because there's no double space at the end. The following line has a soft break at the end (two spaces at end) This line should be following on the very next line. This line has a paragraph break at the end (empty line after). Theses two lines should display as a single line because there’s no double space at the end. The following line has a soft break at the end (two spaces at end) This line should be following on the very next line. ### Links markdown [Help Builder Web Site](http://helpbuilder.west-wind.com/) <a href="http://helpbuilder.west-wind.com/" class="markup--anchor markup--p-anchor">Help Builder Web Site</a> If you need additional image tags like targets or title attributes you can also embed HTML directly: markdown Go the Help Builder sitest Wind site: <a href="http://west-wind.com/" target="_blank">Help Builder Site</a>. ### Images markdown  <figure><img src="https://cdn-images-1.medium.com/max/800/0*ibU0D-Zr0qDT5h3z.png" class="graf-image" /></figure>### Block Quotes Block quotes are callouts that are great for adding notes or warnings into documentation. markdown > ### Headers break on their own > Note that headers don't need line continuation characters as they are block elements and automatically break. Only text lines require the double spaces for single line breaks. > *Headers break on their own* > *Note that headers don’t need line continuation characters as they are block elements and automatically break. Only text lines require the double spaces for single line breaks.* ### Fontawesome Icons Help Builder includes a custom syntax for <a href="http://fortawesome.github.io/Font-Awesome/icons/" class="markup--anchor markup--p-anchor">FontAwesome</a> icons in its templates. You can embed a `@ icon-` followed by a font-awesome icon name to automatically embed that icon without full HTML syntax. markdown Gear: Configuration Configuration ### HTML Markup You can also embed plain HTML markup into the page if you like. For example, if you want full control over fontawesome icons you can use this: markdown This text can be **embedded** into Markdown: <i class="fa fa-refresh fa-spin fa-lg"></i> Refresh Page This text can be embedded into Markdown: Refresh Page ### Unordered Lists markdown * Item 1 * Item 2 * Item 3 This text is part of the third item. Use two spaces at end of the the list item to break the line. A double line break, breaks out of the list. - <span id="7904">Item 1</span> - <span id="1cf1">Item 2</span> - <span id="ded6">Item 3 This text is part of the third item. Use two spaces at end of the the list item to break the line.</span> A double line break, breaks out of the list. ### Ordered Lists markdown 1. **Item 1** Item 1 is really something 2. **Item 2** Item two is really something else If you want lines to break using soft returns use two spaces at the end of a line. 1. <span id="01d6">Item 1 Item 1 is really something</span> 2. <span id="51ea">Item 2 Item two is really something else</span> If you want to lines to break using soft returns use to spaces at the end of a line. ### Inline Code If you want to embed code in the middle of a paragraph of text to highlight a coding syntax or class/member name you can use inline code syntax: markdown Structured statements like `for x =1 to 10` loop structures can be codified using single back ticks. Structured statements like `for x =1 to 10` loop structures can be codified using single back ticks. ### Code Blocks with Syntax Highlighting Markdown supports code blocks syntax in a variety of ways: markdown The following code demonstrates: // This is code by way of four leading spaces // or a leading tab More text here The following code demonstrates: pgsql // This is code by way of four leading spaces // or a leading tab More text here ### Code Blocks You can also use triple back ticks plus an optional coding language to support for syntax highlighting (space injected before last \` to avoid markdown parsing): markdown `` `csharp // this code will be syntax highlighted for(var i=0; i++; i < 10) { Console.WriteLine(i); } `` ` csharp // this code will be syntax highlighted for(var i=0; i++; i < 10) { Console.WriteLine(i); } Many languages are supported: html, xml, javascript, css, csharp, foxpro, vbnet, sql, python, ruby, php and many more. Use the Code drop down list to get a list of available languages. You can also leave out the language to get no syntax coloring but the code box: markdown `` `dos robocopy c:\temp\test d:\temp\test `` ` dos robocopy c:\temp\test d:\temp\test To create a formatted block but without formatting use the `txt` format: markdown `` `txt This is some text that will not be syntax highlighted but shows up in a code box. `` ` which gives you: text This is some text that will not be syntax highlighted but shows up in a code box. #### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: <a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br /> <em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 8, 2021](https://medium.com/p/3497ce56de3). <a href="https://medium.com/@bryanguner/an-introduction-to-markdown-bonus-markdown-templates-included-3497ce56de3" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,148 @@ Modules in Javascript ===================== Differences between Node.js and browsers ------------------------------------------------------------------------ ### Modules in Javascript #### **Differences between Node.js and browsers** There are many differences between Node.js and browser environments, but many of them are small and inconsequential in practice. For example, in our *Asynchronous* lesson, we noted how <a href="https://nodejs.org/api/timers.html#timers_settimeout_callback_delay_args" class="markup--anchor markup--p-anchor">Node’s setTimeout</a> has a slightly different return value from <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout" class="markup--anchor markup--p-anchor">a browser’s setTimeout</a>. Let’s go over a few notable differences between the two environments. **Global vs Window** In the Node.js runtime, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Global_object" class="markup--anchor markup--p-anchor">global object</a> is the object where global variables are stored. In browsers, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window" class="markup--anchor markup--p-anchor">window object</a> is where global variables are stored. The window also includes properties and methods that deal with drawing things on the screen like images, links, and buttons. Node doesn’t need to draw anything, and so it does not come with such properties. This means that you can’t reference window in Node. *Most browsers allow you to reference global but it is really the same object as window.* **Document** Browsers have access to a document object that contains the HTML of a page that will be rendered to the browser window. There is no document in Node. **Location** Browsers have access to a location that contains information about the web address being visited in the browser. There is no location in Node, since it is not on the web. **Require and module.exports** Node has a predefined require function that we can use to import installed modules like readline. We can also import and export across our own files using require and module.exports. For example, say we had two different files, animals.js and cat.js, that existed in the same directory: If we execute animals.js in Node, the program would print ‘Sennacy is a great pet!’. Browsers don’t have a notion of a file system so we cannot use require or module.exports in the same way. ### The fs module Node comes with an <a href="https://nodejs.org/api/fs.html" class="markup--anchor markup--p-anchor">fs module</a> that contains methods that allow us to interact with our computer’s **F**ile **S**ystem through JavaScript. No additional installations are required; to access this module we can simply `require` it. We recommend that you code along with this reading. Let's begin with a `change-some-files.js` script that imports the module: // change-some-files.js const fs = require("fs"); Similar to what we saw in the `readline` lesson, `require` will return to us a object with many properties that will enable us to do file I/O. ***Did you know?*** *I/O is short for input/output. It’s usage is widespread and all the hip tech companies are using it, like.io.* The `fs` module contains tons of functionality! Chances are that if there is some operation you need to perform regarding files, the `fs` module supports it. The module also offers both synchronous and asynchronous implementations of these methods. We prefer to not block the thread and so we'll opt for the asynchronous flavors of these methods. ### Creating a new file To create a file, we can use the `writeFile` method. According to the documentation, there are a few ways to use it. The most straight forward way is: The code a<a href="https://gist.github.com/bgoonz/8898ad673bd2ecee9d93f8ec267cf213" class="markup--anchor markup--p-anchor">create-a-nnew-file.js (github.com)</a>bove will create a new file called `foo.txt` in the same directory as our `change-some-file.js` script. It will write the string `'Hello world!'` into that newly created file. The third argument specifies the encoding of the characters. There are different ways to encode characters; <a href="https://en.wikipedia.org/wiki/UTF-8" class="markup--anchor markup--p-anchor">UTF-8</a> is the most common and you'll use this in most scenarios. The fourth argument to `writeFile` is a callback that will be invoked when the write operation is complete. The docs indicate that if there is an error during the operation (such as an invalid encoding argument), an error object will be passed into the callback. This type of error handling is quite common for asynchronous functions. Like we are used to, since `writeFile` is asynchronous, we need to utilize *callback chaining* if we want to guarantee that commands occur *after* the write is complete or fails. *Beware! If the file name specified to* `writeFile` *already exists, it will completely overwrite the contents of that file.* We won’t be using the `foo.txt` file in the rest of this reading. ### Reading existing files To explore how to read a file, we’ll use VSCode to manually create a `poetry.txt` file within the same directory as our `change-some-file.js` script. Be sure to create this if you are following along. Our `poetry.txt` file will contain the following lines: My code fails I do not know why My code works I do not know why We can use the `readFile` method to read the contents of this file. The method accepts very similar arguments to `writeFile`, except that the callback may be passed an error object and string containing the file contents. In the snippet below, we have replaced our previous `writeFile` code with `readFile`: > Running the code above would print the following in the terminal: THE CONTENTS ARE: My code fails I do not know why My code works I do not know why Success! From here, you can do anything you please with the data read from the file. For example, since `data` is a string, we could split the string on the newline character `\n` to obtain an array of the file's lines: THE CONTENTS ARE: [ 'My code fails', 'I do not know why', 'My code works', 'I do not know why' ] The third line is My code works ### File I/O *Using the same* `poetry.txt` *file from before:* My code fails I do not know why My code works I do not know why Let’s replace occurrences of the phrase ‘do not’ with the word ‘should’. We can read the contents of the file as a string, manipulate this string, then write this new string back into the file. We’ll need to utilize callback chaining in order for this to work since our file I/O is asynchronous: Executing the script above will edit the `poetry.txt` file to contain: My code fails I should know why My code works I should know why #### Refactor: #### If you found this guide helpful feel free to checkout my github/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor">bgoonz’s gists · GitHub</a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: **Web-Dev-Resource-Hub** *Edit description*<a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor">https://web-dev-resource-hub.netlify.app/</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 8, 2021](https://medium.com/p/a55333e35978). <a href="https://medium.com/@bryanguner/modules-in-javascript-a55333e35978" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,1078 @@ Understanding Git (A Beginners Guide Containing Cheat Sheets & Resources) ========================================================================= Basic Git Work Flow. ------------------------------------------------------------------------ ### Understanding Git (A Beginners Guide Containing Cheat Sheets & Resources) ### Resources, Cheat Sheets & Links @Bottom of the Page! <figure><img src="https://cdn-images-1.medium.com/max/800/0*68fyM5AI85U_I3vo.jpg" class="graf-image" /></figure>For More Advanced Readers, or those with very limited free time… here’s an abridged Git Reference. <a href="https://bryanguner.medium.com/git-tricks-57e8d0292285" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/git-tricks-57e8d0292285"><strong>Git-Tricks</strong><br /> <em>Refs</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/git-tricks-57e8d0292285" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### What’s a distributed version control system? Git is an example of a distributed version control system (DVCS) commonly used for open source and commercial software development. DVCSs allow full access to every file, branch, and iteration of a project, and allows every user access to a full and self-contained history of all changes. Unlike once popular centralized version control systems, DVCSs like Git don’t need a constant connection to a central repository. Developers can work anywhere and collaborate asynchronously from any time zone. Without version control, team members are subject to redundant tasks, slower timelines, and multiple copies of a single project. To eliminate unnecessary work, Git and other VCSs give each contributor a unified and consistent view of a project, surfacing work that’s already in progress. Seeing a transparent history of changes, who made them, and how they contribute to the development of a project helps team members stay aligned while working independently. ### Why Git? According to the latest <a href="https://insights.stackoverflow.com/survey/2017#technology" class="markup--anchor markup--p-anchor">Stack Overflow developer survey</a>, more than 70 percent of developers use Git, making it the most-used VCS in the world. Git is commonly used for both open source and commercial software development, **with significant benefits** for individuals, teams and businesses. - <span id="0276">Git lets developers see the entire timeline of their changes, decisions, and progression of any project in one place. From the moment they access the history of a project, the developer has all the context they need to understand it and start contributing.</span> - <span id="2be5">Developers work in every time zone. With a DVCS like Git, collaboration can happen any time while maintaining source code integrity. Using branches, developers can safely propose changes to production code.</span> - <span id="6d54">Businesses using Git can break down communication barriers between teams and keep them focused on doing their best work. Plus, Git makes it possible to align experts across a business to collaborate on major projects.</span> ### Table Of Contents: <a href="#editing-understanding-git-a-beginners-guide-containing-cheat-sheets--resources--medium" class="markup--anchor markup--p-anchor"><em>Editing Understanding Git (A Beginners Guide Containing Cheat Sheets & Resources) — Medium</em></a> > <a href="#whats-a-distributed-version-controlsystem" class="markup--anchor markup--blockquote-anchor"><strong><em>What’s a distributed version control system?</em></strong></a> > <a href="#why-git" class="markup--anchor markup--blockquote-anchor"><em>Why Git?</em></a> > <a href="#whats-a-repository" class="markup--anchor markup--blockquote-anchor"><em>What’s a repository?</em></a> > <a href="#git-flow" class="markup--anchor markup--blockquote-anchor"><strong><em>Git Flow</em></strong></a> > <a href="#cloning-a-repo-and-changing-the-remoteurl" class="markup--anchor markup--blockquote-anchor"><em>Cloning a repo and changing the remote url</em></a> > <a href="#1-the-first-step-is-to-clone-therepo" class="markup--anchor markup--blockquote-anchor"><em>1. The first step is to clone the repo!</em></a> > <a href="#2-sweet-you-have-the-cloned-repo-in-your-preferred-directory-now-lets-make-your-own-repo-on-github-create-a-new-repository" class="markup--anchor markup--blockquote-anchor"><em>2. Make your own repo</em></a>*.* > <a href="#3-next-copy-thegit-link-that-is-on-the-next-page-do-not-do-any-other-steps-on-this-pagethat-is-for-when-you-do-not-clone-arepo" class="markup--anchor markup--blockquote-anchor"><em>3. Next, copy the .git link that is on the next page.</em></a> > <a href="#4-whenver-you-clone-a-repo-it-already-has-agit-directory-with-certain-configurations-set-up-to-be-able-to-push-this-repo-to-your-newly-created-github-repo-we-have-to-change-the-remoteorigin" class="markup--anchor markup--blockquote-anchor"><em>4. Whenver you clone a repo</em></a> > <a href="#5-thats-its-you-can-now-run-git-push-and-it-will-push-to-your-newly-createdrepo" class="markup--anchor markup--blockquote-anchor"><em>5. Thats its! You can now run</em></a> `git push` <a href="#5-thats-its-you-can-now-run-git-push-and-it-will-push-to-your-newly-createdrepo" class="markup--anchor markup--blockquote-anchor"><em>and it will push to your newly created repo.</em></a> > <a href="#basic-git-workflow" class="markup--anchor markup--blockquote-anchor"><em>Basic Git Work Flow.</em></a> > <a href="#cheat-sheet" class="markup--anchor markup--blockquote-anchor"><strong><em>Cheat Sheet:</em></strong></a> > <a href="#my-git-reference-repo" class="markup--anchor markup--blockquote-anchor"><em>My Git Reference Repo:</em></a> > <a href="#git-basics" class="markup--anchor markup--blockquote-anchor"><em>Git basics</em></a> > <a href="#a-glance-intogit" class="markup--anchor markup--blockquote-anchor"><em>A glance into GIT</em></a> > <a href="#tracking-changes-in-a-repository" class="markup--anchor markup--blockquote-anchor"><em>Tracking changes in a repository</em></a> > <a href="#branches-andworkflow" class="markup--anchor markup--blockquote-anchor"><em>Branches and workflow</em></a> > <a href="#bringing-it-backtogether" class="markup--anchor markup--blockquote-anchor"><em>Bringing it back together</em></a> > <a href="#connect-w-github" class="markup--anchor markup--blockquote-anchor"><em>Connect-W-Github</em></a> > <a href="#i-%EF%B8%8F-opensource" class="markup--anchor markup--blockquote-anchor"><em>I ❤️ Open Source</em></a> > <a href="#merging-your-code-ongithub" class="markup--anchor markup--blockquote-anchor"><em>Merging your code on GitHub</em></a> > <a href="#browsing-your-git-repository" class="markup--anchor markup--blockquote-anchor"><em>Browsing Your Git Repository</em></a> > <a href="#seeing-changes-in-realtime" class="markup--anchor markup--blockquote-anchor"><em>Seeing changes in real time</em></a> > <a href="#diff-options" class="markup--anchor markup--blockquote-anchor"><em>Diff options</em></a> > <a href="#time-travel" class="markup--anchor markup--blockquote-anchor"><em>Time travel</em></a> > <a href="#why-checkout" class="markup--anchor markup--blockquote-anchor"><em>Why checkout?</em></a> > <a href="#git-do-overs-reset-rebase" class="markup--anchor markup--blockquote-anchor"><em>Git ‘Do-Overs’: Reset & Rebase</em></a> > <a href="#resetting-thepast" class="markup--anchor markup--blockquote-anchor"><em>Resetting the past</em></a> > <a href="#soft-resets" class="markup--anchor markup--blockquote-anchor"><em>Soft resets</em></a> > <a href="#risky-business-mixedresets" class="markup--anchor markup--blockquote-anchor"><em>Risky Business: Mixed resets</em></a> > <a href="#red-alert-hardresets" class="markup--anchor markup--blockquote-anchor"><em>Red alert! Hard resets</em></a> > <a href="#rebase-alt-time-travel" class="markup--anchor markup--blockquote-anchor"><em>Rebase: ‘Alt-time travel’</em></a> > <a href="#i-see-you-too-like-to-live-life-dangerously-tell-me-aboutrebase" class="markup--anchor markup--blockquote-anchor"><em>I see you too like to live life Dangerously… tell me about Rebase..</em></a> > `working-on-the-header` > <a href="#golden-rule-ofgit" class="markup--anchor markup--blockquote-anchor"><em>“Golden Rule of Git”</em></a> > **How 2's** > <a href="#troubleshooting-git" class="markup--anchor markup--blockquote-anchor"><strong><em>Troubleshooting Git</em></strong></a> > **Further Reading & Resources** ### What’s a repository? A *repository*, or <a href="https://git-scm.com/" class="markup--anchor markup--p-anchor">Git project</a>, encompasses the entire collection of files and folders associated with a project, along with each file’s revision history. The file history appears as snapshots in time called *commits*, and the commits exist as a linked-list relationship, and can be organized into multiple lines of development called *branches*. Because Git is a DVCS, repositories are self-contained units and anyone who owns a copy of the repository can access the entire codebase and its history. Using the command line or other ease-of-use interfaces, a git repository also allows for: interaction with the history, cloning, creating branches, committing, merging, comparing changes across versions of code, and more. Working in repositories keeps development projects organized and protected. Developers are encouraged to fix bugs, or create fresh features, without fear of derailing mainline development efforts. Git facilitates this through the use of topic branches: lightweight pointers to commits in history that can be easily created and deprecated when no longer needed. ------------------------------------------------------------------------ ------------------------------------------------------------------------ ### Git Flow ### Cloning a repo and changing the remote url (These steps are only for when you initially clone a project repo. Not when you clone your partners repo to collaborate together. To do that, you only have to complete step 1!) ### 1. The first step is to clone the repo! - <span id="b2f6">Navigate to the repo you want to clone and hit the big green code button. Copy the link given.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/1*63LoanrbOPBIwDC6oFarFA.png" class="graf-image" /></figure>- <span id="8563">Navigate in your terminal to the directory where you want this repo to live. I’ve chosen downloads</span> - <span id="c9b3">`git clone HTTPS://LINKTOURL/THATYOUCOPIED`</span> <figure><img src="https://cdn-images-1.medium.com/max/800/1*PRiaHOvU-wvpAYQtIqduGQ.png" class="graf-image" /></figure>### 2. Sweet, you have the cloned repo in your preferred directory. Now lets make your own repo. On github, create a new repository. - <span id="c98b">Default settings are fine. Hit the big green button `Create Repository`</span> <figure><img src="https://cdn-images-1.medium.com/max/800/1*U1qwd0OEBYhcToXYt2i6iA.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/1*jk3-RTC0rRV_OF931B4Fsg.png" class="graf-image" /></figure>### 3. Next, ***copy the .git link that is on the next page. Do not do any other steps on this page — That is for when you do not clone a repo.*** ------------------------------------------------------------------------ ### These are the commands GitHub provides when you create a new Repo: #### Quick setup — if you’ve done this kind of thing before Set up in Desktop or HTTPSSSH Get started by <a href="https://github.com/bgoonz/the-meaning-of-life-is-42/new/master" class="markup--anchor markup--p-anchor">creating a new file</a> or <a href="https://github.com/bgoonz/the-meaning-of-life-is-42/upload" class="markup--anchor markup--p-anchor">uploading an existing file</a>. We recommend every repository include a <a href="https://github.com/bgoonz/the-meaning-of-life-is-42/new/master?readme=1" class="markup--anchor markup--p-anchor">README</a>, <a href="https://github.com/bgoonz/the-meaning-of-life-is-42/new/master?filename=LICENSE.md" class="markup--anchor markup--p-anchor">LICENSE</a>, and <a href="https://github.com/bgoonz/the-meaning-of-life-is-42/new/master?filename=.gitignore" class="markup--anchor markup--p-anchor">.gitignore</a>. ### …or create a new repository on the command line echo "# the-meaning-of-life-is-42" >> README.md git init git add README.md git commit -m "first commit" git branch -M master git remote add origin https://github.com/bgoonz/the-meaning-of-life-is-42.git git push -u origin master ### …or push an existing repository from the command line git remote add origin https://github.com/bgoonz/the-meaning-of-life-is-42.git git branch -M master git push -u origin master ### …or import code from another repository You can initialize this repository with code from a Subversion, Mercurial, or TFS project. <a href="https://github.com/bgoonz/the-meaning-of-life-is-42/import" class="markup--anchor markup--p-anchor">Import code</a> ### 4. Whenever you clone a repo: #### It already has a .git directory with certain configurations set up. To be able to push this repo to your newly created GitHub repo we have to change the remote origin. - <span id="dda6">To do that, just run this command: (Make sure you are inside the repo you cloned)</span> <!-- --> git remote set-url origin https://LINK/TO/YOUR/GIT/THAT/YOU/COPIED/FROM/PREVIOUS/STEP.git OR: <figure><img src="https://cdn-images-1.medium.com/max/800/1*HTnMuxJ4tCDJ3I49cUrP8w.png" class="graf-image" /></figure>### 5. You can now run `git push` and it will push to your newly created repo. ### Basic Git Work Flow. - <span id="23ce">After making changes to a file and you are ready to commit / push to your repo you can run the following commands:</span> - <span id="9934">`git add .` - stages modified files to be committed.</span> - <span id="6ce0">`git status` - displays files that have been modified</span> - <span id="ce65">`git commit -m 'A helpfully commit message'` - commits the changes to your local repo. Get in the habit now of making helpful commit messages</span> - <span id="70ec">`git push` - pushes your local commits to your GitHub repo!</span> - <span id="4ca3">To pull down changes that your partner pushed to the repo you simply have to run:</span> - <span id="3bef">`git pull` - this will fetch the most recent updates!</span> ### Cheat Sheet: ### My Git Reference Repo: <a href="https://github.com/bgoonz/github-reference-repo" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz/github-reference-repo"><strong>bgoonz/github-reference-repo</strong><br /> <em>Cloning a repo and changing the remote url Basic Git Workflow (These steps are only for when you initially clone a…</em>github.com</a><a href="https://github.com/bgoonz/github-reference-repo" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Git basics Like many disciplines, learning Git is just a matter of learning a new language. You’ll cover a lot of new vocabulary in this lesson! Remember that the vocabulary you’ll learn will allow you to communicate clearly with other developers worldwide, so it’s important to understand the meaning of each term. It’s also important to note that Git is a complex and powerful tool. As such, its documentation and advanced examples may be tough to understand. As your knowledge grows, you may choose to dive deeper into Git. Today, you’ll focus on the commands you’ll use every day — possibly for the rest of your programming career! Get comfortable with these commands and resist the urge to copy/paste or create keyboard shortcuts as you’re getting started. ### A glance into GIT Before you look at any practical examples, let’s talk about how Git works behind the scenes. Here is your first new word in Git-speak: *repository*, often shortened to *repo*. A Git repo comprises all the source code for a particular project. In the “dark ages” example above, the repo is the first directory you created, where work is saved to, and which acts as the source for code shared to others. Without a repo, Git has nothing to act on. Git manages your project as a series of *commits*. A commit is a collection of changes grouped towards a shared purpose. By tracking these commits, you can see your project on a timeline instead of only as a finished project: <figure><img src="https://cdn-images-1.medium.com/max/800/1*Sc7e8RGGxhoCnMFG8KR6og.png" class="graf-image" /></figure>Notice the notes and seemingly random numbers by each commit? These are referred to as *commit messages* and *commit hashes*, respectively. Git identifies your commits by their hash, a specially-generated series of letters and numbers. You add commit messages to convey meaning and to help humans track your commits, as those hashes aren’t very friendly to read! A Git hash is 40 characters long, but you only need the first few characters to identify which hash you’re referring to. By default, Git abbreviates hashes to 7 characters. You’ll follow this convention, too. Git provides a helpful way for us to “alias” a commit in plain English as well. These aliases are called *refs*, short for “references”. A special one that Git creates for all repositories is `HEAD`, which references the most recent commit. You'll learn more about creating your own refs when you learn about "branching". Git maintains three separate lists of changes: the *working directory*, the *staging area*, and the *commit history*. The working directory includes all of your in-progress changes, the staging area is reserved for changes you’re ready to commit, and the commit history is made up of changes you’ve already committed. You’ll look more at these three lists soon. Git only cares about changes that are “tracked”. To track a file, you must add it to the commit history. The working directory will always show the changes, even if they aren’t tracked. In the commit history, you’ll only have a history of files that have been formally tracked by your repository. ### Tracking changes in a repository Now, let’s get practical! You can create a repository with `git init`. Running this command will initialize a new Git repo in your current directory. It's important to remember that you only want a repository for your project and not your whole hard drive, so always run this command inside a project folder and not your home folder or desktop. You can create a new repo in an empty folder or within a project directory you've already created. What good is an empty repo? Not much! To add content to your repository, use `git add`. You can pass this command a specific filename, a directory, a "wildcard" to select a series of similarly-named files, or a `.` to add every untracked file in the current directory: # This will add only my_app.js to the repo: > git add my_app.js # This will add all the files within ./objects: > git add objects/ # This will add all the files in the current directory ending in `.js`: > git add *.js # This will add everything in your current directory: > git add . Adding a file (or files) moves them from Git’s working directory to the staging area. You can see what’s been “staged” and what hasn’t by using `git status`: <figure><img src="https://cdn-images-1.medium.com/max/800/1*iiehU7FvC-JK90x6Fr0q6g.png" class="graf-image" /></figure>In this example, “Changes to be committed” is your staging area and “Changes not staged for commit” is your working directory. Notice that you also have “Untracked files”, Git’s way of reminding us that you may have forgotten to `git add` a file to your repo. Most Git commands will include a bit of help text in the output, so always read the messages carefully before moving forward. Thanks, Git! Once you’re happy with your files and have staged them, you’ll use `git commit` to push them into the commit history. It's significantly more work to make changes after a commit, so be sure your files are staged and exactly as you'd like them before running this command. Your default text editor will pop up, and you'll be asked to enter a commit message for this group of changes. **Heads Up:** You may find yourself in an unfamiliar place! The default text editor for MacOS (and many variants of Linux) is called *Vim*. Vim is a terminal-based text editor you’ll discuss in the near future. It’s visually bare and may just look like terminal text to you! If this happens, don’t worry — just type `:q` and press your "return" key to exit. You’ll want to ensure that future commit messages open in a more familiar editor. You can run the following commands in your terminal to ensure that Visual Studio Code is your `git commit` editor from now on: > git config --global core.editor "code --wait" > git config --global -e If you experience any issues, you may be missing Visual Studio Code’s command line tools. You can find more details and some troubleshooting tips on Microsoft’s official <a href="https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line" class="markup--anchor markup--p-anchor">VS Code and macOS documentation</a>. Once you close your editor, the commit will be added to your repository’s commit history. Use `git log` to see this history at any time. This command will show all the commits in your repository's history, beginning with the most recent: <figure><img src="https://cdn-images-1.medium.com/max/800/1*z4zhzwjkwkfXMxKDDkNE9w.png" class="graf-image" /></figure>Like many Git commands, `git commit` includes some helpful shorthand. If you need a rather short commit message, you can use the `-m` flag to include the message inline. Here's an example: > git commit -m "Fix typo" This will commit your changes with the message “Fix typo” and avoid opening your default text editor. Remember the commit messages are how you make your project’s history friendly to humans, so don’t use the `-m` flag as an excuse to write lame commit messages! A commit message should always explain why changes were made in clear, concise language. It is also best practice to use imperative voice in commit messages (i.e. use "Fix typo" instead of "Fixing the typo" or "Typo was fixed"). ### Branches and workflow <figure><img src="https://cdn-images-1.medium.com/max/800/0*7RBsBGvfmvj4T4jm.png" class="graf-image" /></figure>You’ve seen what a project looks like with a linear commit history, but that’s just scratching the surface of Git’s utility. Let’s explore a new realm with *branches*. A branch is a separate timeline in Git, reserved for its own changes. You’ll use branches to make your own changes independently of others. These branches can then be *merged* back into the main branch at a later time. Let’s consider a common scenario: a school project. It’s a lot of extra hassle to schedule time together and argue over exactly what should be done next! Instead, group members will often assign tasks amongst themselves, work independently on their tasks, and reunite to bring it all together as a final report. Git branches let us emulate this workflow for code: you can make a copy of what’s been done so far, complete a task on your new branch, and merge that branch back into the shared repository for others to use. By default, Git repos begin on the `master` branch. To create a new branch, use `git branch <name-of-your-branch>`. This will create a named reference to your current commit and let you add commits without affecting the `master` branch. Here's what a branch looks like: <figure><img src="https://cdn-images-1.medium.com/max/800/1*B67PLKs3Tr6HYLklyH6XnQ.png" class="graf-image" /></figure>Notice how your refs help to identify branches here: `master` stays to itself and can have changes added to it independently of your new branch (`footer`). `HEAD`, Git's special ref, follows us around, so you know that in the above diagram you're working on the `footer` branch. You can create a new branch or visit an existing branch in your repository. This is especially helpful for returning the `master` branch or for projects you've received from teammates. To open an existing branch, use `git checkout <name-of-branch>`. ### Bringing it back together Once you’re happy with the code in the branch you’ve been working on, you’ll likely want to integrate the code into the `master` branch. You can do this via `git merge`. Merging will bring the changes in from another branch and integrate them into yours. Here's an example workflow: > git branch my-changes > git add new-file.js > git commit -m "Add new file" > git checkout master > git merge my-changes Following these steps will integrate the commit from `my-changes` over to `master`. Boom! Now you have your `new-file.js` on your default branch. As you can imagine, branching can get *very* complicated. Your repository’s history may look more like a shrub than a beautiful tree! You’ll discuss advanced merging and other options in an upcoming lesson. ### Connect-W-Github Git can act as a great history tool and source code backup for your local projects, but it can also help you work with a team! Git is classified as a “DVCS”, or “Distributed Version Control System”. This means it has built-in support for managing code both locally and from a distant source. You can refer to a repository source that’s not local as a *remote*. Your Git repository can have any number of remotes, but you’ll usually only have one. By default you’ll refer to the primary remote of a repo as the `origin`. You can add a remote to an existing repository on your computer, or you can retrieve a repository from a remote source. You can refer to this as *cloning* the repo. Once you have a repository with a remote, you can update your local code from the remote by *pulling* code down, and you can *push* up your own code so others have access to it. ### I ❤️ Open Source While a remote Git server can be run anywhere, there are a few places online that have become industry standards for hosting remote Git repositories. The best-known and most widely-used Git source is a website called <a href="https://github.com/" class="markup--anchor markup--p-anchor">GitHub</a>. As the name suggests, GitHub is a global hub for Git repositories. It’s free to make a Github account, and you’ll find literally millions of public repositories you can browse. GitHub takes a lot of work out of managing remote Git repositories. Instead of having to manage your own server, GitHub provides managed hosting and even includes some helpful graphical tools for complicated tasks like deployment, branch merging, and code review. Let’s look at a typical workflow using Git and GitHub. Imagine it’s your first day on the job. How do you get access to your team’s codebase? By cloning the repository! > git clone https://github.com/your-team/your-codebase.git Using the `git clone` command will create a new folder in your current directory named after the repo you're cloning (in this case, `your-codebase`). Inside that folder will be a git repository of your very own, containing the repo's entire commit history. You’ll likely start on the `master` branch, but remember that this is the default branch and it's unlikely you want to make changes to it. ***Since you're working on a team now, it's important to think of how your changes to the repository might affect others.*** The safest way to make changes is to create a new branch, make your changes there, and then push your branch up to the remote repository for review. You'll use the `git push` command to do this. Let's look at an example: > git branch add-my-new-file > git add my-new-file.js > git commit -m "Add new file" > git push -u origin add-my-new-file Notice how you used the `-u` flag with `git push`. This flag, shorthand for `--set-upstream`, lets Git know that you want your local branch to follow a remote branch. You've passed the same name in, so you'll now have two branches in your local repository: `add-my-new-file`, which is where your changes live after being committed, and `origin/add-my-new-file`, which keeps up with your remote branch and updates it after you use `git push`. **You only need to use the** `-u` **flag the first time you push each new branch - Git will know what to do with a simple** `git push` **from then on.** You now know how to push your changes up, but what about getting the changes your teammates have made? For this, you’ll use `git pull`. Pulling from the remote repo will update all of your local branches with the code from each branch's remote counterpart. **Behind the scenes,** Git is running two separate commands: `git fetch` and `git merge`. <figure><img src="https://cdn-images-1.medium.com/max/800/0*Y6QQHsNKuayJ_WxQ" class="graf-image" /></figure>Fetching retrieves the repository code and updates any remote tracking branches in your local repo, and merge does just you've already explored: integrates changes into the local branches. Here's a graphic to explain this a little better: <figure><img src="https://cdn-images-1.medium.com/max/800/1*eJVpPtvfIeuYqmql0XkQ8Q.png" class="graf-image" /></figure>It’s important to remember to use `git pull` often. A dynamic team may commit and push code many times during the day, and it's easy to fall behind. The more often you `pull`, the more certain you can be that your own code is based on the "latest and greatest". ### Merging your code on GitHub If you’re paying close attention, you may have noticed that there’s a missing step in your workflows so far: how do you get your code merged into your default branch? This is done by a process called a *Pull Request*. A pull request (or “PR”) is a feature specific to GitHub, not a feature of Git. It’s a safety net to prevent bugs, and it’s a critical part of the collaboration workflow. Here’s a high-level of overview of how it works: You push your code up to GitHub in its own branch. You open a pull request against a *base branch*. GitHub creates a comparison page just for your code, detailing the changes you’ve made. Other members of the team can review your code for errors. You make changes to your branch based on feedback and push the new commits up. The PR automatically updates with your changes. Once everyone is satisfied, a repo maintainer on GitHub can merge your branch. Huzzah! Your code is in the main branch and ready for everyone else to `git pull`. You’ll create and manage your pull requests via GitHub’s web portal, instead of the command line. You’ll walk through the process of creating, reviewing, and merging a pull request in an upcoming project. ### Browsing Your Git Repository Repositories can feel intimidating at first, but it won’t take you long to navigate code like you own the place — because you do! Let’s discuss a few tools native to Git that help us browse our changes over time. We’ll be covering: Comparing changes with `git diff` Browsing through our code “checkpoints” with `git checkout` ### Seeing changes in real time Git is all about change tracking, so it makes sense that it would include a utility for visualizing a set of changes. We refer to a list of differences between two files (or the same file over time) as a *diff*, and we can use `git diff` to visualize diffs in our repo! When run with no extra options, `git diff` will return any tracked changes in our working directory since the last commit. **Tracked** is a key word here; `git diff` won't show us changes to files that haven't been included in our repo via `git add`. This is helpful for seeing what you've changed before committing! Here's an example of a small change: <figure><img src="https://cdn-images-1.medium.com/max/800/1*zRnx1PxLRHNl9fYtBzxxsg.png" class="graf-image" /></figure>Let’s break down some of the new syntax in this output. The diff opens with some Git-specific data, including the branch/files we’re checking, and some unique hashes that Git uses to track each diff. You can skip past this to get to the important bits. `---` & `+++` let us know that there are both additions and subtractions in the file "App.js". A diff doesn't have a concept of inline changes - it treats a single change as removing something old and replacing it with something new. `@@` lets us know that we're starting a single "chunk" of the diff. A diff could have multiple chunks for a single file (for example: if you made changes far apart, like the header & footer). The numbers in between tell us how many lines we're seeing and where they start. For example: `@@ +1,3 -1,3 @@` means we'll see three lines of significant content, including both addition & removal, beginning at line one. In the code itself, lines that were removed are prefixed with a `-` and lines that were added are prefixed with a `+`. Remember that you won't see these on the same lines. Even if you only changed a few words, Git will still treat it like the whole line was replaced. ### Diff options Remember that, by default, `git diff` compares the current working directory to the last commit. You can compare the staging area instead of the working directory with `git diff --staged`. This is another great way to double-check your work before pushing up to a remote branch. You’re also not limited to your current branch — or even your current commit! You can pass a base & target branch to compare, and you can use some special characters to help you browse faster! Here are a few examples: # See differences between the 'feature' # branch and the 'master' branch. > git diff master feature # Compare two different commits > git diff 1fc345a 2e3dff # Compare a specific file across separate commits > git diff 1fc345a 2e3dff my-file.js ### Time travel `git diff` gives us the opportunity to explore our code's current state, but what if we wanted to see its state at a different point in time? We can use *checkout*! `git checkout` lets us take control of our `HEAD` to bounce around our timeline as we please. Remember that `HEAD` is a special Git reference that usually follows the latest commit on our current branch. We can use `git checkout` to point our `HEAD` reference at a different commit, letting us travel to any commit in our repository's history. By reading the commit message and exploring the code at the time of the commit, we can see not only what changed but also why it changed! This can be great for debugging a problem or understanding how an app evolved. Let’s look at a diagram to understand what `checkout` does a little better: <figure><img src="https://cdn-images-1.medium.com/max/800/1*eqVSR_YD0kYQWHoLLbJs9Q.png" class="graf-image" /></figure>Notice that we haven’t lost any commits, commit messages, or code changes. Using `git checkout` is entirely non-destructive. To browse to a different commit, simply pass in a reference or hash for the commit you’d like to explore. `git checkout` also supports a few special characters & reserved references: # You can checkout a branch name. # You'll be using this particular branch a lot! > git checkout master # You can also use commit hashes directly > git checkout 7d3e2f1 # Using a hyphen instead of a hash will take # you to the last branch you checked out > git checkout - # You can use "HEAD~N" to move N commits prior # to the current HEAD > git checkout HEAD~3 Once you’re done browsing the repo’s history, you can use `git checkout <your-branch-name>` to move `HEAD` back to the front of the line (your most recent commit). For example, in our diagram above, we could use `git checkout master` to take our `HEAD` reference back to commit `42ffa1`. ### Why checkout? Most of Git’s power comes from a simple ability: viewing commits in the past and understanding how they connect. This is why mastering the `git checkout` command is so important: it lets you think more like Git and gives you full freedom of navigation without risking damage to the repo's contents. That said, you’ll likely use shortcuts like `git checkout -` far more often than specifically checking out commit hashes. Especially with the advent of user-friendly tools like GitHub, it's much easier to visualize changes outside the command line. We'll demonstrate browsing commit histories on GitHub in a future lesson. ### Git ‘Do-Overs’: Reset & Rebase <figure><img src="https://cdn-images-1.medium.com/max/800/0*5yBLWI2EMAqgm01n.jpg" class="graf-image" /></figure>Git is designed to protect you — not only from others, but also from yourself! Of course, there are times where you’d like to exercise your own judgement, even if it may not be the best thing to do. For this, Git provides some helpful tools to change commits and “time travel”. Before we talk about these, a warning: **The commands in this lesson are destructive!** If used improperly, you could lose work, damage a teammate’s branch, or even rewrite the history of your entire project. You should exercise caution when using these on production code, and don’t hesitate to ask for help if you’re unsure what a command might do. After this lesson, you should: Be able to roll back changes to particular commit. Have an understanding of how rebasing affects your commit history. Know when to rebase/reset and when **not** to. ### Resetting the past Remember how our commits form a timeline? We can see the state of our project at any point using `git checkout`. What if we want to travel back in time to a point before we caused a new bug or chose a terrible font? `git reset` is the answer! > *Resetting* involves moving our `HEAD` ref back to a different commit. No matter how we reset, `HEAD` will move with us. Unlike `git checkout`, this will also destroy intermediate commits. We can use some additional flags to determine how our code changes are handled. ### Soft resets The least-dangerous reset of all is `git reset --soft`. A soft reset will move our `HEAD` ref to the commit we've specified, and will leave any intermediate changes in the staging area. This means you won't lose any code, though you will lose commit messages. A practical example of when a soft reset would be handy is joining some small commits into a larger one. We’ll pretend we’ve been struggling with “their”, “there”, and “they’re” in our app. Here’s our commit history:Those commit messages aren’t great: they’re not very explanatory, and they don’t provide a lot of value in our commit history. We’ll fix them with a soft reset: git reset --soft 9c5e2fc This moves our `HEAD` ref back to our first commit. Looking at our commit log now, we might be worried we've lost our changes: <figure><img src="https://cdn-images-1.medium.com/max/800/1*slbLxXdNbv3L7UsCHGdCIg.png" class="graf-image" /></figure>Our changes are still present in the staging area, ready to be re-committed when we’re ready! We can use `git commit` to re-apply those changes to our commit history with a new, more helpful message instead: <figure><img src="https://cdn-images-1.medium.com/max/800/1*UleGR-ijDRZw4UqbEbAk0Q.png" class="graf-image" /></figure>Notice that the new commit has a totally new hash. The old commit messages (and their associated hashes) have been lost, but our code changes are safe and sound! ### Risky Business: Mixed resets If soft resets are the safest form of `git reset`, mixed resets are the most average! This is exactly why they're the default: running `git reset` without adding a flag is the same as running `git reset --mixed`. In a mixed reset, your changes are preserved, but they’re moved from the commit history directly to the working directory. This means you’ll have to use `git add` to choose everything you want in future commits. Mixed resets are a good option when you want to alter a change in a previous commit. Let’s use a mixed reset with our “their”, “there”, “they’re” example again. We’ll start with “they’re”: <figure><img src="https://cdn-images-1.medium.com/max/800/1*I71W4NpNdNz8NPr7i2tcAQ.png" class="graf-image" /></figure>Notice again that you don’t lose your code with a mixed reset, but you do lose your commit messages & hashes. The difference between `--soft` and `--mixed` comes down to whether you'll be keeping the code exactly the same before re-committing it or making changes. ### Hard resets Hard resets are the most dangerous type of reset in Git. Hard resets adjust your `HEAD` ref and *totally destroy any interim code changes*. Poof. Gone forever. There are very few good uses for a hard reset, but one is to get yourself out of a tight spot. Let’s say you’ve made a few changes to your repository but you now realize those changes were unnecessary. You’d like to move back in time so that your code looks exactly as it did before any changes were made. `git reset --hard` can take you there. It’s our last round with “their”, “there”, and “they’re”. We’ve tried it all three ways and decided we don’t need to use that word at all! Let’s walk through a hard reset to get rid of our changes. We’ll start in the same place we began for our soft reset: <figure><img src="https://cdn-images-1.medium.com/max/800/1*PHWuTBoZeQ1L2hgRdXu6fg.png" class="graf-image" /></figure>It turns out that we’ll be using a video on our homepage and don’t need text at all! Let’s step back in time: git reset --hard 9c5e2fc Our Git log output is much simpler now: <figure><img src="https://cdn-images-1.medium.com/max/800/1*1NovgUyM_ed7h5MozcBY-g.png" class="graf-image" /></figure>It’s empty — no changes in your working directory and no changes in your staging area. This is major difference between a hard reset and a soft/mixed reset: you will lose *all your changes* back to the commit you’ve reset to. If your teammate came rushing in to tell you that the boss has changed their mind and wants that homepage text after all, you’re going to be re-doing all that work! Be very confident that the changes you’re losing are unimportant before embarking on a hard reset. ### Rebase: ‘Alt-time travel’ <figure><img src="https://cdn-images-1.medium.com/max/800/0*C_Y5Tr_o5BAS1l-3.jpeg" class="graf-image" /></figure>Sometimes we want to change more than a few commits on a linear timeline. What if we want to move multiple commits across branches? `git rebase` is the tool for us! *Rebasing* involves changing your current branch’s base branch. We might do this if we accidentally started our branch from the wrong commit or if we’d like to incorporate changes from another branch into our own. > Isn’t that the same as git merge? `git merge`?" In almost all cases, you'd be right. Rebasing is a dangerous process that effectively rewrites history. ### I see you too like to live life Dangerously… tell me about Rebase.. Let’s look at a situation where we might be tempted to rebase. We’ve added a couple commits to a feature branch while other team members have been merging their code into the `master` branch. Once we're ready to merge our own branch, we probably want to follow a tried-and-true procedure: > git pull origin master This will fetch our remote `master` branch and merge its changes into our own feature branch, so it's safe to pull request or `git push`. However, every time we do that, a merge commit will be created! This can make a big mess of our Git commit history, especially if lots of people are making small changes. We can use `git rebase` to move our changes silently onto the latest version of `master`. Here's what the `git log` history of our two example branches looks like: <figure><img src="https://cdn-images-1.medium.com/max/800/1*pzCQZEyJD3-NHcNRCTwxiQ.png" class="graf-image" /></figure>Notice that both branches start at `9c5e2fc`. That's our common ancestor commit, and is where `git merge` would start stitching these branches together! We're going to avoid that entirely with a rebase. We'll run this command while we have `working-on-the-header` checked out: git rebase master **Here’s our new commit history:** <figure><img src="https://cdn-images-1.medium.com/max/800/1*1cH8OazC0L0pxZzfCdwXog.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/1*GswbfYSlQ3q0VeCdv29cww.png" class="graf-image" /></figure>### `working-on-the-header` See how we changed the color of our commits after the rebase? Take a close look at the commit history changes as well. Even though our commits have the same content, they have a new hash assigned, meaning they’re entirely new commits! This is what we mean by “rewriting history”: we’ve actually changed how Git refers to these changes now. ### “Golden Rule of Git” These tools can all feel pretty nifty, but be very wary of using them too much! While they can augment your Git skills from good to great, they can also have catastrophic side effects. There’s a “Golden Rule of Git” you should know that directly relates to both `git reset` and `git rebase`: ***Never change the history of a branch that’s shared with others.*** That’s it! It’s simple and to the point. If you’re resetting or rebasing your own code and you make a mistake, your worst case scenario is losing your own changes. However, if you start changing the history of code that others have contributed or are relying on, your accidental loss could affect many others! ### How to check your Git configuration: The command below returns a list of information about your git configuration including user name and email: git config -l ### How to setup your Git username: With the command below you can configure your user name: git config --global user.name "Fabio" ### How to setup your Git user email: This command lets you setup the user email address you’ll use in your commits. git config --global user.email "[email protected]" ### How to cache your login credentials in Git: You can store login credentials in the cache so you don’t have to type them in each time. Just use this command: git config --global credential.helper cache ### How to initialize a Git repo: Everything starts from here. The first step is to initialize a new Git repo locally in your project root. You can do so with the command below: git init ### How to add a file to the staging area in Git: The command below will add a file to the staging area. Just replace `filename_here` with the name of the file you want to add to the staging area. git add filename_here ### How to add all files in the staging area in Git If you want to add all files in your project to the staging area, you can use a wildcard `.` and every file will be added for you. git add . ### How to add only certain files to the staging area in Git With the asterisk in the command below, you can add all files starting with ‘fil’ in the staging area. git add fil* ### How to check a repository’s status in Git: This command will show the status of the current repository including staged, unstaged, and untracked files. git status ### How to commit changes in the editor in Git: This command will open a text editor in the terminal where you can write a full commit message. A commit message is made up of a short summary of changes, an empty line, and a full description of the changes after it. git commit ### How to commit changes with a message in Git: You can add a commit message without opening the editor. This command lets you only specify a short summary for your commit message. git commit -m "your commit message here" ### How to commit changes (and skip the staging area) in Git: You can add and commit tracked files with a single command by using the -a and -m options. git commit -a -m"your commit message here" ### How to see your commit history in Git: This command shows the commit history for the current repository: git log ### How to see your commit history including changes in Git: This command shows the commit’s history including all files and their changes: git log -p ### How to see a specific commit in Git: This command shows a specific commit. Replace commit-id with the id of the commit that you find in the commit log after the word commit. git show commit-id ### How to see log stats in Git: This command will cause the Git log to show some statistics about the changes in each commit, including line(s) changed and file names. git log --stat ### How to see changes made before committing them using “diff” in Git: You can pass a file as a parameter to only see changes on a specific file. `git diff` shows only unstaged changes by default. We can call diff with the `--staged` flag to see any staged changes. git diff git diff all_checks.py git diff --staged ### How to see changes using “git add -p”: This command opens a prompt and asks if you want to stage changes or not, and includes other options. git add -p ### How to remove tracked files from the current working tree in Git: This command expects a commit message to explain why the file was deleted. git rm filename ### How to rename files in Git: This command stages the changes, then it expects a commit message. git mv oldfile newfile ### How to ignore files in Git: Create a `.gitignore` file and commit it. ### How to revert unstaged changes in Git: git checkout filename ### How to revert staged changes in Git: You can use the -p option flag to specify the changes you want to reset. git reset HEAD filename git reset HEAD -p ### How to amend the most recent commit in Git: `git commit --amend` allows you to modify and add changes to the most recent commit. git commit --amend !!Note!!: fixing up a local commit with amend is great and you can push it to a shared repository after you’ve fixed it. But you should avoid amending commits that have already been made public. ### How to rollback the last commit in Git: `git revert` will create a new commit that is the opposite of everything in the given commit. We can revert the latest commit by using the head alias like this: git revert HEAD ### How to rollback an old commit in Git: You can revert an old commit using its commit id. This opens the editor so you can add a commit message. git revert comit_id_here ### How to create a new branch in Git: By default, you have one branch, the main branch. With this command, you can create a new branch. Git won’t switch to it automatically — you will need to do it manually with the next command. git branch branch_name ### How to switch to a newly created branch in Git: When you want to use a different or a newly created branch you can use this command: git checkout branch_name ### How to list branches in Git: You can view all created branches using the `git branch` command. It will show a list of all branches and mark the current branch with an asterisk and highlight it in green. git branch ### How to create a branch in Git and switch to it immediately: In a single command, you can create and switch to a new branch right away. git checkout -b branch_name ### How to delete a branch in Git: When you are done working with a branch and have merged it, you can delete it using the command below: git branch -d branch_name ### How to merge two branches in Git: To merge the history of the branch you are currently in with the `branch_name`, you will need to use the command below: git merge branch_name ### How to show the commit log as a graph in Git: We can use `--graph` to get the commit log to show as a graph. Also, `--oneline` will limit commit messages to a single line. git log --graph --oneline ### How to show the commit log as a graph of all branches in Git: Does the same as the command above, but for all branches. git log --graph --online --all ### How to abort a conflicting merge in Git: If you want to throw a merge away and start over, you can run the following command: git merge --abort ### How to add a remote repository in Git This command adds a remote repository to your local repository (just replace `https://repo_here` with your remote repo URL). git add remote https://repo_here ### How to see remote URLs in Git: You can see all remote repositories for your local repository with this command: git remote -v ### How to get more info about a remote repo in Git: Just replace `origin` with the name of the remote obtained by running the git remote -v command. git remote show origin ### How to push changes to a remote repo in Git: When all your work is ready to be saved on a remote repository, you can push all changes using the command below: git push ### How to pull changes from a remote repo in Git: If other team members are working on your repository, you can retrieve the latest changes made to the remote repository with the command below: git pull ### How to check remote branches that Git is tracking: This command shows the name of all remote branches that Git is tracking for the current repository: git branch -r ### How to fetch remote repo changes in Git: This command will download the changes from a remote repo but will not perform a merge on your local branch (as git pull does that instead). git fetch ### How to check the current commits log of a remote repo in Git Commit after commit, Git builds up a log. You can find out the remote repository log by using this command: git log origin/main ### How to merge a remote repo with your local repo in Git: If the remote repository has changes you want to merge with your local, then this command will do that for you: git merge origin/main ### How to get the contents of remote branches in Git without automatically merging: This lets you update the remote without merging any content into the local branches. You can call git merge or git checkout to do the merge. git remote update ### How to push a new branch to a remote repo in Git: If you want to push a branch to a remote repository you can use the command below. Just remember to add -u to create the branch upstream: git push -u origin branch_name ### How to remove a remote branch in Git: If you no longer need a remote branch you can remove it using the command below: git push --delete origin branch_name_here ### How to use Git rebase: You can transfer completed work from one branch to another using `git rebase`. git rebase branch_name_here Git Rebase can get really messy if you don’t do it properly. Before using this command I suggest that you re-read the official documentation <a href="https://git-scm.com/book/it/v2/Git-Branching-Rebasing" class="markup--anchor markup--p-anchor">here</a> ### How to run rebase interactively in Git: You can run git rebase interactively using the -i flag. It will open the editor and present a set of commands you can use. git rebase -i master # p, pick = use commit # r, reword = use commit, but edit the commit message # e, edit = use commit, but stop for amending # s, squash = use commit, but meld into previous commit # f, fixup = like "squash", but discard this commit's log message # x, exec = run command (the rest of the line) using shell # d, drop = remove commit ### How to force a push request in Git: This command will force a push request. This is usually fine for pull request branches because nobody else should have cloned them. But this isn’t something that you want to do with public repos. git push -f ------------------------------------------------------------------------ ### Git Alias Overview It is important to note that there is no direct `git alias` command. Aliases are created through the use of the `git config` command and the Git configuration files. As with other configuration values, aliases can be created in a local or global scope. To better understand Git aliases let us create some examples. $ git config --global alias.co checkout $ git config --global alias.br branch $ git config --global alias.ci commit $ git config --global alias.st status The previous code example creates globally stored shortcuts for common git commands. Creating the aliases will not modify the source commands. So `git checkout` will still be available even though we now have the `git co` alias. These aliases were created with the `--global` flag which means they will be stored in Git's global operating system level configuration file. On linux systems, the global config file is located in the User home directory at `/.gitconfig`. [alias] co = checkout br = branch ci = commit st = status This demonstrates that the aliases are now equivalent to the source commands. ### Usage Git aliasing is enabled through the use of `git config`, For command-line option and usage examples please review the `git config `documentation. ### Examples ### Using aliases to create new Git commands A common Git pattern is to remove recently added files from the staging area. This is achieved by leveraging options to the `git reset` command. A new alias can be created to encapsulate this behavior and create a new alias-command-keyword which is easy to remember: git config --global alias.unstage 'reset HEAD --' The preceding code example creates a new alias `unstage`. This now enables the invocation of `git unstage. git unstage` which will perform a reset on the staging area. This makes the following two commands equivalent. git unstage fileA $ git reset HEAD -- fileA ### My Default Gitignore: ------------------------------------------------------------------------ ### Troubleshooting Git <figure><img src="https://cdn-images-1.medium.com/max/800/1*cFb6UcCGmIcNU1-woncSTA.png" class="graf-image" /></figure>### Here are some tips on troubleshooting and resolving issues with Git. ### Broken pipe errors on `git push` ‘Broken pipe’ errors can occur when attempting to push to a remote repository. When pushing you usually see: Write failed: Broken pipe fatal: The remote end hung up unexpectedly To fix this issue, here are some possible solutions. ### Increase the POST buffer size in Git **If you’re using Git over HTTP instead of SSH**, you can try increasing the POST buffer size in Git’s configuration. Example of an error during a clone: `fatal: pack has bad object at offset XXXXXXXXX: inflate returned -5` Open a terminal and enter: git config http.postBuffer 52428800 The value is specified in bytes, so in the above case the buffer size has been set to 50MB. The default is 1MB. ### Check your SSH configuration **If pushing over SSH**, first check your SSH configuration as ‘Broken pipe’ errors can sometimes be caused by underlying issues with SSH (such as authentication). Make sure that SSH is correctly configured by following the instructions in the <a href="https://docs.gitlab.com/ee/ssh/README.html#troubleshooting-ssh-connections" class="markup--anchor markup--p-anchor">SSH troubleshooting</a> documentation. If you’re a GitLab administrator and have access to the server, you can also prevent session timeouts by configuring SSH `keep alive` either on the client or on the server. Configuring both the client and the server is unnecessary. **To configure SSH on the client side**: - <span id="7ae1">On UNIX, edit `~/.ssh/config` (create the file if it doesn’t exist) and add or edit:</span> - <span id="542f">`Host your-gitlab-instance-url.com ServerAliveInterval 60 ServerAliveCountMax 5`</span> - <span id="74d7">On Windows, if you are using PuTTY, go to your session properties, then navigate to “Connection” and under “Sending of null packets to keep session active”, set `Seconds between keepalives (0 to turn off)` to `60`.</span> **To configure SSH on the server side**, edit `/etc/ssh/sshd_config` and add: ClientAliveInterval 60 ClientAliveCountMax 5 ### Running a `git repack` **If ‘pack-objects’ type errors are also being displayed**, you can try to run a `git repack` before attempting to push to the remote repository again: git repack git push ### Upgrade your Git client In case you’re running an older version of Git (< 2.9), consider upgrading to >= 2.9 (see <a href="https://stackoverflow.com/questions/19120120/broken-pipe-when-pushing-to-git-repository/36971469#36971469" class="markup--anchor markup--p-anchor">Broken pipe when pushing to Git repository</a>). ### `ssh_exchange_identification` error Users may experience the following error when attempting to push or pull using Git over SSH: Please make sure you have the correct access rights and the repository exists. ... ssh_exchange_identification: read: Connection reset by peer fatal: Could not read from remote repository. or ssh_exchange_identification: Connection closed by remote host fatal: The remote end hung up unexpectedly This error usually indicates that SSH daemon’s `MaxStartups` value is throttling SSH connections. This setting specifies the maximum number of concurrent, unauthenticated connections to the SSH daemon. This affects users with proper authentication credentials (SSH keys) because every connection is ‘unauthenticated’ in the beginning. The default value is `10`. Increase `MaxStartups` on the GitLab server by adding or modifying the value in `/etc/ssh/sshd_config`: MaxStartups 100:30:200 `100:30:200` means up to 100 SSH sessions are allowed without restriction, after which 30% of connections are dropped until reaching an absolute maximum of 200. Once configured, restart the SSH daemon for the change to take effect. # Debian/Ubuntu sudo systemctl restart ssh # CentOS/RHEL sudo service sshd restart ### Timeout during `git push` / `git pull` If pulling/pushing from/to your repository ends up taking more than 50 seconds, a timeout is issued. It contains a log of the number of operations performed and their respective timings, like the example below: remote: Running checks for branch: master remote: Scanning for LFS objects... (153ms) remote: Calculating new repository size... (cancelled after 729ms) This could be used to further investigate what operation is performing poorly and provide GitLab with more information on how to improve the service. ### `git clone` over HTTP fails with `transfer closed with outstanding read data remaining` error If the buffer size is lower than what is allowed in the request, the action fails with an error similar to the one below: error: RPC failed; curl 18 transfer closed with outstanding read data remaining fatal: The remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed This can be fixed by increasing the existing `http.postBuffer` value to one greater than the repository size. For example, if `git clone` fails when cloning a 500M repository, you should set `http.postBuffer` to `524288000`. That setting ensures the request only starts buffering after the first 524288000 bytes. The default value of `http.postBuffer`, 1 MiB, is applied if the setting is not configured. git config http.postBuffer 524288000 ------------------------------------------------------------------------ ### **Further Reading:** ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 12, 2021](https://medium.com/p/b50c9c01a107). <a href="https://medium.com/@bryanguner/understanding-git-a-beginners-guide-containing-cheat-sheets-resources-b50c9c01a107" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,1278 @@ Everything You Need To Know About Relational Databases, SQL, PostgreSQL and Sequelize To Build… =============================================================================================== For Front end developers who like myself struggle with making the jump to fullstack. ------------------------------------------------------------------------ #### <a href="http://medium.com/codex" class="markup--anchor markup--h4-anchor">CODEX</a> ### **Everything You Need To Know About Relational Databases, SQL, PostgreSQL and Sequelize To Build Your Backend!** <figure><img src="https://cdn-images-1.medium.com/max/800/0*3wDVBrK5ltmjjVSJ.jpeg" class="graf-image" /></figure>**For Front end developers who like myself struggle with making the jump to fullstack.** You can access and query the data using the findByPk, findOne, and findAll methods. **Terminology:** - <span id="c63a"><a href="https://nodejs.org/en/" class="markup--anchor markup--li-anchor">NodeJS</a> We re going to use this to run JavaScript code on the server. I ve decided to use the latest version of Node, v6.3.0 at the time of writing, so that we ll have access to most of the new features introduced in ES6.</span> - <span id="11a6"><a href="https://expressjs.com/" class="markup--anchor markup--li-anchor">Express</a> As per their website, Express is a Fast, unopinionated, minimalist web framework for Node.js , that we re going to be building our Todo list application on.</span> - <span id="5808"><a href="https://www.postgresql.org/docs/9.5/static/index.html" class="markup--anchor markup--li-anchor">PostgreSQL</a> This is a powerful open-source database that we re going to use. I ve attached an article I published on the setup below!</span> <a href="https://bryanguner.medium.com/postgresql-setup-for-windows-wsl-ubuntu-801672ab7089" class="markup--anchor markup--p-anchor" title="https://bryanguner.medium.com/postgresql-setup-for-windows-wsl-ubuntu-801672ab7089"><strong>PostgreSQL Setup For Windows & WSL/Ubuntu</strong><br /> <em>If you follow this guide to a tee you will install PostgreSQL itself on your Windows installation. Then, you will</em> bryanguner.medium.com</a> - <span id="bb49">However, if you face issues while installing PostgreSQL, or you don t want to dive into installing it, you can opt for a version of PostgreSQL hosted online. I recommend <a href="https://www.elephantsql.com/" class="markup--anchor markup--li-anchor">ElephantSQL</a>. I found it s pretty easy to get started with. However, the free version will only give you a 20MB allowance.</span> - <span id="539a"><a href="http://docs.sequelizejs.com/en/latest/" class="markup--anchor markup--li-anchor">Sequelize</a> In addition, we re going to use Sequelize, which is a database <a href="https://en.wikipedia.org/wiki/Object-relational_mapping" class="markup--anchor markup--li-anchor">ORM</a> that will interface with the Postgres database for us.</span> **RDBMS and Database Entities** **Define what a relational database management system is** - <span id="6529">RDBMS stands for Relational Database Management System</span> - <span id="6d7e">A software application that you run that your programs can connect to so that they can store, modify, and retrieve data.</span> - <span id="79d9">An RDBMS can track many databases. We will use PostgreSQL, or postgres , primarily for our RDBMS and it will be able to create individual databases for each of our projects.</span> **Describe what relational data is** - <span id="d8fd">In general, relational data is information that is connected to other pieces of information.</span> - <span id="2fa8">When working with relational databases, we can connect two entries together utilizing foreign keys (explained below).</span> - <span id="e199">In a pets database, we could be keeping track of dogs and cats as well as the toys that each of them own. That ownership of a cat to a toy is the relational aspect of relational data. Two pieces of information that can be connected together to show some sort of meaning.</span> **Define what a database is** - <span id="06fe">The actual location that data is stored.</span> - <span id="78c5">A database can be made up of many tables that each store specific kinds of information.</span> - <span id="f752">We could have a pets database that stores information about many different types of animals. Each animal type could potentially be represented by a different table.</span> **Define what a database table is** - <span id="04ae">Within a database, a table stores one specific kind of information.</span> - <span id="3878">The records (entries) on these tables can be connected to records on other tables through the use of foreign keys</span> - <span id="d6f9">In our pets database, we could have a dogs table, with individual records</span> **Describe the purpose of a primary key** - <span id="4d0e">A primary key is used in the database as a unique identifier for the table.</span> - <span id="8fb0">We often use an id field that simply increments with each entry. The incrementing ensures that each record has a unique identifier, even if their are other fields of the record that are repeated (two people with the same name would still need to have a unique identifier, for example).</span> - <span id="8876">With a unique identifier, we can easily connect records within the table to records from other tables.</span> **Describe the purpose of a foreign key** - <span id="cf54">A foreign key is used as the connector from this record to the primary key of another table s record.</span> - <span id="f397">In our pets example, we can imagine two tables to demonstrate: a table to represent cats and a table to represent toys. Each of these tables has a primary key of id that is used as the unique identifier. In order to make a connection between a toy and a cat, we can add another field to the cat table called owner\_id , indicating that it is a foreign key for the cat table. By setting a toy s owner\_id to the same value as a particular cat s id , we can indicate that the cat is the owner of that toy.</span> **Describe how to properly name things in PostgreSQL** - <span id="d6e6">Names within postgres should generally consist of only lowercase letters, numbers, and underscores.</span> - <span id="0fb3">Tables within a database are plural by convention, so a table for cats would typically be cats and office locations would be office\_locations (all lowercase, underscores to replace spaces, plural)</span> **Connect to an instance of PostgreSQL with the command line tool psql** - <span id="1b7f">The psql command by default will try to connect to a database and username that matches your system s username</span> - <span id="1454">We connect to a different database by providing an argument to the psql command</span> - <span id="3439">psql pets</span> - <span id="fb37">To connect with a different username we can use the -U flag followed by the username we would like to use. To connect to the pets database as pets\_user</span> - <span id="d357">psql -U pets\_user pets</span> - <span id="e139">If there is a password for the user, we can tell psql that we would like a prompt for the password to show up by using the -W flag.</span> - <span id="8709">psql -U pets\_user -W pets (the order of our flags doesn t matter, as long as any arguments associated with them are together, such as pets\_user directly following -U in this example)</span> **Identify whether a user is a normal user or a superuser by the prompt in the psql shell** - <span id="8ff5">You can tell if you are logged in as a superuser or normal user by the prompt in the terminal.</span> - <span id="de97">If the prompt shows =>, the user is a normal user</span> - <span id="7ce3">If the prompt show =\#, the user is a superuser</span> **Create a user for the relational database management system** - <span id="f4dc">Within psql, we can create a user with the CREATE USER {username} {WITH options} command.</span> - <span id="7eda">The most common options we ll want to use are WITH PASSWORD ‘mypassword’ to provide a password for the user we are creating, CREATEDB to allow the user to create new databases, or SUPERUSER to create a user with all elevated permissions.</span> **Create a database in the database management system** - <span id="3fff">We can use the command CREATE DATABASE {database name} {options} inside psql to create a new database.</span> - <span id="7d2f">A popular option we may utilize is WITH OWNER {owner name} to set another user as the owner of the database we are making.</span> **Configure a database so that only the owner (and superusers) can connect to it** - <span id="1a73">We can GRANT and REVOKE privileges from a database to users or categories of users.</span> - <span id="8795">In order to remove connection privileges to a database from the public we can use REVOKE CONNECT ON DATABASE {db\_name} FROM PUBLIC;, removing all public connection access.</span> - <span id="ee98">If we wanted to grant it back, or to a specific user, we could similarly do GRANT CONNECT ON DATABASE {db\_name} FROM {specific user, PUBLIC, etc.};</span> **View a list of databases in an installation of PostgreSQL** - <span id="2111">To list all databases we can use the \\l or \\list command in psql.</span> **Create tables in a database** CREATE TABLE {table name} ( {columnA} {typeA}, {columnB} {typeB}, etc… ); - <span id="a2fc">The whitespace does not matter. Creating the SQL statements on multiple lines is easier to read, but just like JavaScript, they can be presented differently.</span> - <span id="a203">One common issue is that SQL does not like trailing commas, so the last column cannot have a comma after its type in this example.</span> **View a list of tables in a database** - <span id="964a">To list all database tables, use the \\dt command.</span> **Identify and describe the common data types used in PostgreSQL** - <span id="a2fd">There are many different data types that we can use in our tables, here are some common examples:</span> - <span id="1d53">SERIAL: autoincrementing, very useful for IDs</span> - <span id="78ce">VARCHAR(n): a string with a character limit of n</span> - <span id="2e02">TEXT: doesn t have character limit, but less performant</span> - <span id="c20e">BOOLEAN: true/false</span> - <span id="d525">SMALLINT: signed two-byte integer (-32768 to 32767)</span> - <span id="6b96">INTEGER: signed four-byte integer (standard)</span> - <span id="fa38">BIGINT: signed eight-byte integer (very large numbers)</span> - <span id="aa0c">NUMERIC: or DECIMAL, can store exact decimal values</span> - <span id="1fb6">TIMESTAMP: date and time</span> **Describe the purpose of the UNIQUE and NOT NULL constraints, and create columns in database tables that have them** - <span id="377b">In addition to the data type, we can provide flags for constraints to place on our column data.</span> - <span id="bda2">The UNIQUE flag indicates that the data for the column must not be repeated.</span> - <span id="e14c">By default we can create entries in our tables that are missing data from columns. When creating a pet, maybe we don t provide an age because we don t know it, for example. If we want to require that the data be present in order to create a new record, we can indicate that column must be NOT NULL.</span> - <span id="6745">In the example below, we are requiring our pets to have unique names and for them to be present (both UNIQUE and NOT NULL). We have no such constraints on the age column, allowing repetition of ages or their complete absence.</span> <!-- --> CREATE TABLE pets ( id SERIAL PRIMARY KEY, name VARCHAR(255) UNIQUE NOT NULL, age SMALLINT ); **Create a primary key for a table** - <span id="da50">When creating a table we can indicate the primary key by passing in the column name to parentheses like so:</span> <!-- --> CREATE TABLE people ( id SERIAL, first_name VARCHAR(50), last_name VARCHAR(50), PRIMARY KEY (id) ); - <span id="4871">We could have also used the PRIMARY KEY flag on the column definition itself:</span> <!-- --> CREATE TABLE people ( id SERIAL PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50) ); **Create foreign key constraints to relate tables** - <span id="e576">In our table definition, we can use the line FOREIGN KEY (foreign\_key\_stored\_in\_this\_table) REFERENCE {other table} ({other\_tables\_key\_name}) to connect two tables.</span> - <span id="4c08">This is probably easier to see in an example:</span> <!-- --> CREATE TABLE people ( id SERIAL PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50) ); CREATE TABLE pets ( id SERIAL PRIMARY KEY, name VARCHAR(255), age SMALLINT, person_id INTEGER, FOREIGN KEY (person_id) REFERENCES people (id) ); **SQL is not case sensitive for its keywords but is for its entity names** - <span id="7749">Exactly as the LO states, CREATE TABLE and create table are interpreted the same way. Using capitalization is a good convention in order to distinguish your keywords.</span> - <span id="7d1b">The entity names that we use ARE case-sensitive, however. So a table named pets is unique from a table named Pets. In general, we prefer to use all lowercase for our entities to avoid any of this confusion.</span> **SQL** 1. How to use the SELECT … FROM … statement to select data from a single table - <span id="9202">Supply the column names in the SELECT clause. If we want all columns, we can also use \*</span> - <span id="9fdc">Supply the table names in the FROM clause</span> — Selects all columns from the friends table SELECT * FROM friends; — Selects the first\_name column from the friends table (remember whitespace is ignored) SELECT name FROM friends; - <span id="ef22">Sometimes we may need to specify what table we are selecting a column from, particulurly if we had joined multiple tables together.</span> — Notice here we are indicating that we want the “name” field from the “friends” table as well as the “name” field from the “puppies” table. We indicate the table name by table.column — We are also aliasing these fields with the AS keyword so that our returned results have friend\_name and puppy\_name as field headers SELECT friends.name AS friend_name , puppies.name AS puppy_name FROM friends JOIN puppies ON friends.puppy_id = puppies.id **How to use the WHERE clause on SELECT, UPDATE, and DELETE statements to narrow the scope of the command** - <span id="6a59">The WHERE clause allows us to select or apply actions to records that match specific criteria instead of to a whole table.</span> - <span id="7ec8">We can use WHERE with a couple of different operators when making our comparison</span> - <span id="70eb">WHERE {column} = {value} provides an exact comparison</span> - <span id="79bf">WHERE {column} IN ({value1}, {value2}, {value3}, etc.) matches any provided value in the IN statement. We can make this more complex by having a subquery inside of the parentheses, having our column match any values within the returned results.</span> - <span id="150e">WHERE {column} BETWEEN {value1} AND {value2} can check for matches between two values (numeric ranges)</span> - <span id="9077">WHERE {column} LIKE {pattern} can check for matches to a string. This is most useful when we use the wildcard %, such as WHERE breed LIKE ‘%Shepherd’, which will match any breed that ends in Shepherd</span> - <span id="4a87">The NOT operator can also be used for negation in the checks.</span> - <span id="db35">Mathematical operators can be used when performing calculations or comparisons within a query as well, such as</span> <!-- --> SELECT name, breed, weight_lbs FROM puppies WHERE weight_lbs > 50; — OR SELECT name, breed, age_yrs FROM puppies WHERE age_yrs * 10 = 5; **How to use the JOIN keyword to join two (or more) tables together into a single virtual table** - <span id="a391">When we want to get information from a related table or do querying based on related table values, we can join the connected table by comparing the foreign key to where it lines up on the other table:</span> — Here we are joining the puppies table on to the friends table. We are specifying that the comparison we should make is the foreign key puppy\_id on the friends table should line up with the primary key id on the puppies table. SELECT * FROM friends JOIN puppies ON friends.puppy_id = puppies.id **How to use the INSERT statement to insert data into a table** - <span id="b3e7">When a table is already created we can then insert records into it using the INSERT INTO keywords.</span> - <span id="d4d3">We provide the name of the table that we would like to add records to, followed by the VALUES keyword and each record we are adding. Here s an example:</span> — We are providing the table name, then multiple records to insert — The values are listed in the order that they are defined on the table INSERT INTO table_name VALUES (column1_value, colum2_value, column3_value), (column1_value, colum2_value, column3_value), (column1_value, colum2_value, column3_value); - <span id="123c">We can also specify columns when we are inserting data. This makes it clear which fields we are providing data for and allows us to provide them out of order, skip null or default values, etc.</span> — In this example, we want to use the default value for id since it is autoincremented, so we provide DEFAULT for this field INSERT INTO friends (id, first_name, last_name) VALUES (DEFAULT, ‘Amy’, ‘Pond’); — Alternatively, we can leave it out completely, since the default value will be used if none is provided INSERT INTO friends (first_name, last_name) VALUES (‘Rose’, ‘Tyler’), (‘Martha’, ‘Jones’), (‘Donna’, ‘Noble’), (‘River’, ‘Song’); **How to use an UPDATE statement to update data in a table** - <span id="8e80">The UPDATE keyword can be used to find records and change their values in our database.</span> - <span id="91b5">We generally follow the pattern of UPDATE {table} SET {column} = {new value} WHERE {match condition};.</span> - <span id="5fff">Without a condition to narrow our records down, we will update every record in the table, so this is an important thing to double check!</span> - <span id="cdee">We can update multiple fields as well by specifying each column in parentheses and their associated new values: UPDATE {table} SET ({column1}, {column2}) = ({value1}, {value2}) WHERE {match condition};</span> — Updates the pet with id of 4 to change their name and breed UPDATE pets SET (name, breed) = (‘Floofy’, ‘Fluffy Dog Breed’) WHERE id = 4; **How to use a DELETE statement to remove data from a table** - <span id="1c5e">Similar to selecting records, we can delete records from a table by specifying what table we are deleting from and what criteria we would like to match in order to delete.</span> - <span id="1b25">We follow the general structure DELETE FROM {table} WHERE {condition};</span> - <span id="0e74">The condition here is also very important! Without a condition, all records match and will be deleted.</span> — Deletes from the pets table any record that either has a name Floofy, a name Doggo, or an id of 3. DELETE FROM pets WHERE name IN (‘Floofy’, ‘Doggo’) OR id = 3; **How to use a seed file to populate data in a database** - <span id="687c">Seed files are a great way for us to create records that we want to start our database out with.</span> - <span id="80f6">Instead of having to individually add records to our tables or manually entering them in psql or postbird, we can create a file that has all of these records and then just pass this file to psql to run.</span> - <span id="28da">Seed files are also great if we ever need to reset our database. We can clear out any records that we have by dropping all of our tables, then just run our seed files to get it into a predetermined starting point. This is great for our personal projects, testing environments, starting values for new tables we create, etc.</span> - <span id="22c5">There are two main ways we can use a seed file with psql, the < and the | operators. They perform the same function for us, just in slightly different orders, taking the content of a .sql file and executing in within the psql environment:</span> - <span id="19c8">psql -d {database} < {sql filepath}</span> - <span id="7ec0">cat {sql filepath} | psql -d {database}</span> **SQL (continued)** **How to perform relational database design** - <span id="8204">Steps to Designing the Database:</span> - <span id="0276">Define the entities. What data are are you storing, what are the fields for each entity?</span> - <span id="cd73">You can think of this in similar ways to OOP (object oriented programming).</span> - <span id="0cf7">If you wanted to model this information using classes, what classes would you make? Those are generally going to be the tables that are created in your database.</span> - <span id="57f4">The attributes of your classes are generally going to be the fields/columns that we need for each table.</span> - <span id="0681">Identify primary keys. Most of the time these will be ids that you can generate as a serial field, incrementing with each addition to the database.</span> - <span id="99da">Establish table relationships. Connect related data together with foreign keys. Know how we store these keys in a one-to-one, one-to-many, or many-to-many relationship.</span> - <span id="c8c4">With a one-to-one or one-to-many relationship, we are able to use a foreign key on the table to indicate the other specific record that it is connected to.</span> - <span id="2e56">With a many-to-many relationship, each record could be connected to multiple records, so we have to create a join table to connect these entities. A record on this join table connects a record from one table to a record from another table.</span> **How to use transactions to group multiple SQL commands into one succeed or fail operation** - <span id="6bfa">We can define an explicit transaction using BEGIN and ending with either COMMIT or ROLLBACK.</span> - <span id="0c34">If any command inside the block fails, everything will be rolled back. We can also specify that we want to roll back at the end of the block instead of committing. We saw that this can be useful when analyzing operations that would manipulate our database.</span> <!-- --> BEGIN; UPDATE accounts SET balance = balance — 100.00 WHERE name = ‘Alice’; UPDATE branches SET balance = balance — 100.00 WHERE name = (SELECT branch_name FROM accounts WHERE name = ‘Alice’); UPDATE accounts SET balance = balance + 100.00 WHERE name = ‘Bob’; UPDATE branches SET balance = balance + 100.00 WHERE name = (SELECT branch_name FROM accounts WHERE name = ‘Bob’); COMMIT; BEGIN; EXPLAIN ANALYZE UPDATE cities SET city = ‘New York City’ WHERE city = ‘New York’; ROLLBACK; **How to apply indexes to tables to improve performance** - <span id="704c">An index can help optimize queries that we have to run regularly. If we are constantly looking up records in a table by a particular field (such as username or phone number), we can add an index in order to speed up this process.</span> - <span id="142a">An index maintains a sorted version of the field with a reference to the record that it points to in the table (via primary key). If we want to find a record based on a field that we have an index for, we can look through this index in a more efficient manner than having to scan through the entire table (generally O(log n) since the index is sorted, instead of O(n) for a sequential scan).</span> - <span id="2c8f">To add an index to a field we can use the following syntax:</span> <!-- --> CREATE INDEX index_name ON table_name (column_name); - <span id="a6d3">To drop an index we can do the following:</span> <!-- --> DROP INDEX index_name - <span id="12fa">Making an index is not always the best approach. Indices allow for faster lookup, but slow down record insertion and the updating of associated fields, since we not only have to add the information to the table, but also manipulate the index.</span> - <span id="0ef6">We generally wouldn t care about adding an index if:</span> - <span id="8833">The tables are small</span> - <span id="b3b0">We are updating the table frequently, especially the associated columns</span> - <span id="5ebd">The column has many NULL values</span> **Explain what the EXPLAIN command is used for:** - <span id="36da">EXPLAIN gives us information about how a query will run (the query plan)</span> - <span id="482c">It gives us an idea of how our database will search for data as well as a qualitative comparitor for how expensive that operation will be. Comparing the cost of two queries will tell us which one is more efficient (lower cost).</span> - <span id="c7c7">We can also use the ANALYZE command with EXPLAIN, which will actually run the specified query. Doing so gives us more detailed information, such as the milliseconds it took our query to execute as well as specifics like the exact number of rows filtered and returned.</span> 1. Demonstrate how to install and use the node-postgres library and its Pool class to query a PostgreSQL-managed database - <span id="8f73">We can add the node-postgres library to our application with npm install pg. From there we will typically use the Pool class associated with this library. That way we can run many SQL queries with one database connection (as opposed to Client, which closes the connection after a query).</span> <!-- --> const { Pool } = require(‘pg’); // If we need to specify a username, password, or database, we can do so when we create a Pool instance, otherwise the default values for logging in to psql are used: const pool = new Pool({ username: ‘<<username>>’, password: ‘<<password>>’, database: ‘<<database>>’}) - <span id="a267">The query method on the Pool instance will allow us to execute a SQL query on our database. We can pass in a string that represents the query we want to run</span> <!-- --> const allAirportsSql = ` SELECT id, city_id, faa_id, name FROM airports; `; async function selectAllAirports() { const results = await pool.query(allAirportsSql); console.log(results.rows); pool.end(); // invoking end() will close our connection to the database } selectAllAirports(); - <span id="edf8">The return value of this asynchronous function is an object with a rows key that points to an array of objects, each object representing a record with field names as keys.</span> **Explain how to write prepared statements with placeholders for parameters of the form $1 , $2 , and so on** - <span id="ee72">The prepared statement (SQL string that we wrote) can also be made more dynamic by allowing for parameters to be passed in.</span> - <span id="3b64">The Pool instance s query function allows us to pass a second argument, an array of parameters to be used in the query string. The location of the parameter substitutions are designated with $1, $2, etc., to signify the first, second, etc., arguments.</span> <!-- --> const airportsByNameSql = ` SELECT name, faa_id FROM airports WHERE UPPER(name) LIKE UPPER($1) `; async function selectAirportsByName(name) { const results = await pool.query(airportsByNameSql, \[ \`%${name}%\` \]); console.log(results.rows); pool.end(); // invoking end() will close our connection to the database } // Get the airport name from the command line and store it // in the variable “name”. Pass that value to the // selectAirportsByName function. const name = process.argv[2]; // console.log(name); selectAirportsByName(name); **ORM** 1. How to install, configure, and use Sequelize, an ORM for JavaScript - <span id="0e86">To start a new project we use our standard npm initialize statement</span> - <span id="7bf0">npm init -y</span> - <span id="564b">Add in the packages we will need (sequelize, sequelize-cli, and pg)</span> - <span id="9c9b">npm install sequelize@⁵.0.0 sequelize-cli@⁵.0.0 pg@⁸.0.0</span> - <span id="0b1c">Initialize sequelize in our project</span> - <span id="8052">npx sequelize-cli init</span> - <span id="d03e">Create a database user with credentials we will use for the project</span> - <span id="bbc8">psql</span> - <span id="caca">CREATE USER example\_user WITH PASSWORD ‘badpassword’</span> - <span id="72ab">Here we can also create databases since we are already in postgres</span> <!-- --> CREATE DATABASE example_app_development WITH OWNER example_user CREATE DATABASE example_app_test WITH OWNER example_user CREATE DATABASE example_app_production WITH OWNER example_user - <span id="ae27">If we don t create these databases now, we could also create them after we make our changes to our config file. If we take this approach, we need to make sure our user that we created has the CREATEDB option when we make them, since sequelize will attempt to make the databases with this user. This other approach would look like:</span> - <span id="f6a3">In psql: CREATE USER example\_user WITH PASSWORD ‘badpassword’ CREATEDB</span> - <span id="45ac">In terminal: npx sequelize-cli db:create</span> - <span id="cff2">Double check that our configuration file matches our username, password, database, dialect, and seederStorage (these will be filled out for you in an assessment scenario):</span> <!-- --> { “development”: { “username”: “sequelize_recipe_box_app”, “password”: “HfKfK79k”, “database”: “recipe_box_development”, “host”: “127.0.0.1”, “dialect”: “postgres”, “seederStorage”: “sequelize” }, “test”: { “username”: “sequelize_recipe_box_app”, “password”: “HfKfK79k”, “database”: “recipe_box_test”, “host”: “127.0.0.1”, “dialect”: “postgres”, “seederStorage”: “sequelize” }, “production”: { “username”: “sequelize_recipe_box_app”, “password”: “HfKfK79k”, “database”: “recipe_box_production”, “host”: “127.0.0.1”, “dialect”: “postgres”, “seederStorage”: “sequelize” } } 1. How to use database migrations to make your database grow with your application in a source-control enabled way **Migrations** - <span id="3710">In order to make new database tables and sequelize models that reflect them, we want to generate a migration file and model file using model:generate</span> <!-- --> npx sequelize-cli model:generate — name Cat — attributes “firstName:string,specialSkill:string” - <span id="bc91">Here we are creating a migration file and a model file for a Cat. We are specifying that we want this table to have fields for firstName and specialSkill. Sequelize will automatically make fields for an id, createdAt, and updatedAt, as well, so we do not need to specify these.</span> - <span id="4d04">Once our migration file is created, we can go in and edit any details that we need to. Most often we will want to add in database constraints such as allowNull: false, adding a uniqueness constraint with unique: true, adding in character limits to fields such as type: Sequelize.STRING(100), or specifying a foreign key with references to another table references: { model: ‘Categories’ }.</span> - <span id="ca79">After we make any necessary changes to our migration file, we need to perform the migration, which will run the SQL commands to actually create the table.</span> <!-- --> npx sequelize-cli db:migrate - <span id="78a8">This command runs any migration files that have not been previously run, in the order that they were created (this is why the timestamp in the file name is important)</span> - <span id="0790">If we realize that we made a mistake after migrating, we can undo our previous migration, or all of our migrations. After undoing them, we can make any changes necessary to our migration files (They won t be deleted from the undo, so we don t need to generate anything! Just make the necessary changes to the files that already exist and save the files.). Running the migrations again will make the tables with the updates reflected.</span> <!-- --> npx sequelize-cli db:migrate:undo npx sequelize-cli db:migrate:undo:all **Models Validations and Associations** - <span id="a4dd">In addition to the migration files, our model:generate command also created a model file for us. This file is what allows sequelize to transform the results of its SQL queries into useful JavaScript objects for us.</span> - <span id="5c70">The model is where we can specify a validation that we want to perform before trying to run a SQL query. If the validation fails, we can respond with a message instead of running the query, which can be an expensive operation that we know won t work.</span> <!-- --> // Before we make changes, sequelize generates the type that this field represents specification: DataTypes.TEXT // We can replace the generated format with an object to specify not only the type, but the validations that we want to implement. The validations can also take in messages the respond with on failure and arguments. specification: { type: DataTypes.TEXT, validate: { notEmpty: { msg: 'The specification cannot be empty' }, len: { args: [10, 100] msg: 'The specifcation must be between 10 and 100 characters' } } } - <span id="94ef">Another key part of the model file is setting up our associations. We can use the belongsTo, hasMany, and belongsToMany methods to set up model-level associations. Doing so is what creates the helpful functionality like addOwner that we saw in the pets example, a function that automatically generates the SQL necessary to create a petOwner record and supplies the appropriate petId and ownerId.</span> - <span id="e5fc">In a one-to-many association, we need to have a belongsTo association on the many side, and a hasMany association on the one side:</span> - <span id="21c2">Instruction.belongsTo(models.Recipe, { foreignKey: ‘recipeId’ });</span> - <span id="6e6b">Recipe.hasMany(models.Instruction, { foreignKey: ‘recipeId’ });</span> - <span id="7d6a">In a many-to-many association, we need to have a belongsToMany on each side of the association. We generally specify a columnMapping object to show the association more clearly:</span> <!-- --> // In our Owner model // To connect this Owner to a Pet through the PetOwner const columnMapping = { through: ‘PetOwner’, // joins table otherKey: ‘petId’, // key that connects to other table we have a many association with foreignKey: ‘ownerId’ // our foreign key in the joins table } Owner.belongsToMany( models.Pet, columnMapping ); // In our Pet model // To connect this Pet to an Owner through the PetOwner const columnMapping = { through: ‘PetOwner’, // joins table otherKey: ‘ownerId’, // key that connects to other table we have a many association with foreignKey: ‘petId’ // our foreign key in the joins table } Pet.belongsToMany( models.Owner, columnMapping ); ### **How to perform CRUD operations with Sequelize** - <span id="fc1a">Seed Files</span> - <span id="ad49">Seed files can be used to populate our database with starter data.</span> - <span id="9058">npx sequelize-cli seed:generate — name add-cats</span> - <span id="d2cf">up indicates what to create when we seed our database, down indicates what to delete if we want to unseed the database.</span> - <span id="d605">For our up, we use the queryInterface.bulkInsert() method, which takes in the name of the table to seed and an array of objects representing the records we want to create:</span> <!-- --> up: (queryInterface, Sequelize) => { return queryInterface.bulkInsert('<<TableName>>', [{ field1: value1a, field2: value2a }, { field1: value1b, field2: value2b }, { field1: value1c, field2: value2c }]); } - <span id="0cb9">For our down, we use the queryInterface.bulkDelete() method, which takes in the name of the table and an object representing our WHERE clause. Unseeding will delete all records from the specified table that match the WHERE clause.</span> <!-- --> // If we want to specify what to remove: down: (queryInterface, Sequelize) => { return queryInterface.bulkDelete(‘<<TableName>>’, { field1: [value1a, value1b, value1c], //…etc. }); }; // If we want to remove everything from the table: down: (queryInterface, Sequelize) => { return queryInterface.bulkDelete(‘<<TableName>>’, null, {}); }; - <span id="c9e3">Running npx sequelize-cli db:seed:all will run all of our seeder files.</span> - <span id="8778">npx sequelize-cli db:seed:undo:all will undo all of our seeding.</span> - <span id="d655">If we omit the :all we can run specific seed files</span> - <span id="4788">Inserting with Build and Create</span> - <span id="fc2d">In addition to seed files, which we generally use for starter data, we can create new records in our database by using build and save, or the combined create</span> - <span id="3807">Use the .build method of the Cat model to create a new Cat instance in index.js</span> <!-- --> // Constructs an instance of the JavaScript `Cat` class. **Does not // save anything to the database yet**. Attributes are passed in as a // POJO. const newCat = Cat.build({ firstName: 'Markov', specialSkill: 'sleeping', age: 5 }); // This actually creates a new `Cats` record in the database. We must // wait for this asynchronous operation to succeed. await newCat.save(); // This builds and saves all in one step. If we don't need to perform any operations on the instance before saving it, this can optimize our code. const newerCat = await Cat.create({ firstName: 'Whiskers', specialSkill: 'sleeping', age: 2 }) **Updating Records** - <span id="4ecc">When we have a reference to an instance of a model (i.e. after we have queried for it or created it), we can update values by simply reassigning those fields and using the save method</span> **Deleting Records** - <span id="606a">When we have a reference to an instance of a model, we can delete that record by using destroy</span> - <span id="be30">const cat = await Cat.findByPk(1); // Remove the Markov record. await cat.destroy();</span> - <span id="0b7f">We can also call destroy on the model itself. By passing in an object that specifies a where clause, we can destroy all records that match that query</span> - <span id="5f9f">await Cat.destroy({ where: { specialSkill: ‘jumping’ } });</span> **How to query using Sequelize** **findAll** const cats = await Cat.findAll(); // Log the fetched cats. // The extra arguments to stringify are a replacer and a space respectively // Here we're specifying a space of 2 in order to print more legibly // We don't want a replacer, so we pass null just so that we can pass a 3rd argument console.log(JSON.stringify(cats, null, 2)); **WHERE clause** - <span id="e68d">Passing an object to findAll can add on clauses to our query</span> - <span id="ec33">The where key takes an object as a value to indicate what we are filtering by</span> - <span id="aa61">{ where: { field: value } } => WHERE field = value</span> <!-- --> const cats = await Cat.findAll({ where: { firstName: “Markov” } }); console.log(JSON.stringify(cats, null, 2)); **OR in the WHERE clause** - <span id="755e">Using an array for the value tells sequelize we want to match any of these values</span> { where: { field: \[value1, value2\] } => WHERE field IN (value1, value2) const cats = await Cat.findAll({ where: { firstName: [“Markov”, “Curie”] } });const cats = await Cat.findAll({ where: { firstName: "Markov", age: 4 } }); console.log(JSON.stringify(cats, null, 2)); console.log(JSON.stringify(cats, null, 2)); **AND in the WHERE clause** - <span id="afbb">Providing additional key/value pairs to the where object indicates all filters must match</span> - <span id="45a1">{ where: { field1: value1, field2: value2 } } => WHERE field1 = value1 AND field2 = value2</span> ### Sequelize Op operator - <span id="dd6a">By requiring Op from the sequelize library we can provide more advanced comparison operators</span> - <span id="0a01">const { Op } = require(“sequelize”);</span> - <span id="8936">Op.ne: Not equal operator</span> <!-- --> const cats = await Cat.findAll({ where: { firstName: { // All cats where the name is not equal to "Markov" // We use brackets in order to evaluate Op.ne and use the value as the key [Op.ne]: "Markov" }, }, }); console.log(JSON.stringify(cats, null, 2)); ### Op.and: and operator const cats = await Cat.findAll({ where: { // The array that Op.and points to must all be true // Here, we find cats where the name is not "Markov" and the age is 4 [Op.and]: [{ firstName: { [Op.ne]: "Markov" } }, { age: 4 }, ], }, }); console.log(JSON.stringify(cats, null, 2)); ### Op.or: or operator const cats = await Cat.findAll({ where: { // One condition in the array that Op.or points to must be true // Here, we find cats where the name is "Markov" or where the age is 4 [Op.or]: [{ firstName: "Markov" }, { age: 4 }, ], }, }); console.log(JSON.stringify(cats, null, 2)); Op.gt and Op.lt: greater than and less than operators const cats = await Cat.findAll({ where: { // Find all cats where the age is greater than 4 age: { \[Op.gt\]: 4 }, } }, }); console.log(JSON.stringify(cats, null, 2)); #### Ordering results - <span id="4ee4">Just like the where clause, we can pass an order key to specify we want our results ordered</span> - <span id="46a6">The key order points to an array with the fields that we want to order by</span> - <span id="ba7f">By default, the order is ascending, just like standard SQL. If we want to specify descending, we can instead use a nested array with the field name as the first element and DESC as the second element. (We could also specify ASC as a second element in a nested array, but it is unnecessary as it is default)</span> - <span id="f9f9">const cats = await Cat.findAll({ // Order by age descending, then by firstName ascending if cats have the same age order: \[\[“age”, “DESC”\], “firstName”\], }); console.log(JSON.stringify(cats, null, 2));</span> <!-- --> // Get a reference to the cat record that we want to update (here just the cat with primary key of 1) const cat = await Cat.findByPk(1); // Change cat's attributes. cat.firstName = "Curie"; cat.specialSkill = "jumping"; cat.age = 123; // Save the new name to the database. await cat.save(); - <span id="c46e">Limiting results</span> - <span id="8e6f">We can provide a limit key in order to limit our results to a specified number</span> <!-- --> const cats = await Cat.findAll({ order: [ ["age", "DESC"] ], // Here we are limiting our results to one record. It will still return an array, just with one object inside. We could have said any number here, the result is always an array. limit: 1, }); console.log(JSON.stringify(cats, null, 2)); ### findOne - <span id="0151">If we only want one record to be returned we can use findOne instead of findAll</span> - <span id="2a32">If multiple records would have matched our findOne query, it will return the first record</span> - <span id="4c25">Unlike findAll, findOne will return the object directly instead of an array. If no records matched the query it will return null.</span> <!-- --> // finds the oldest cat const cat = await Cat.findOne({ order: [[“age”, “DESC”]], }); console.log(JSON.stringify(cat, null, 2)); - <span id="3bc7">**Querying with Associations**</span> We can include associated data by adding an include key to our options object const pet = Pet.findByPk(1, { include: [PetType, Owner] }); console.log(pet.id, pet.name, pet.age, pet.petTypeId, pet.PetType.type, pet.Owners We can get nested associations by having include point to an object that specifies which model we have an association with, then chaining an association on with another include **How to perform data validations with Sequelize** - <span id="e654">See the database migrations section above.</span> - <span id="9f26">In general, we add in a validate key to each field that we want validations for. This key points to an object that specifies all of the validations we want to make on that field, such as notEmpty, notNull, len, isIn, etc.</span> <!-- --> specification: { type: DataTypes.TEXT, validate: { notEmpty: { msg: 'The specification cannot be empty' }, len: { args: [10, 100] msg: 'The specifcation must be between 10 and 100 characters' } } } **How to use transactions with Sequelize** - <span id="1059">We can create a transaction block in order to make sure either all operations are performed or none of them are</span> - <span id="a632">We use the .transaction method in order to create our block. The method takes in a callback with an argument to track our transaction id (typically just a simple tx variable).</span> - <span id="79f9">All of our sequelize operations can be passed a transaction key on their options argument which points to our transaction id. This indicates that this operation is part of the transaction block and should only be executed in the database when the whole block executes without error.</span> <!-- --> async function main() { try { // Do all database access within the transaction. await sequelize.transaction(async (tx) => { // Fetch Markov and Curie's accounts. const markovAccount = await BankAccount.findByPk( 1, { transaction: tx }, ); const curieAccount = await BankAccount.findByPk( 2, { transaction: tx } ); // No one can mess with Markov or Curie's accounts until the // transaction completes! The account data has been locked! // Increment Curie's balance by $5,000. curieAccount.balance += 5000; await curieAccount.save({ transaction: tx }); // Decrement Markov's balance by $5,000. markovAccount.balance -= 5000; await markovAccount.save({ transaction: tx }); }); } catch (err) { // Report if anything goes wrong. console.log("Error!"); for (const e of err.errors) { console.log( `${e.instance.clientName}: ${e.message}` ); } } await sequelize.close(); } main(); ------------------------------------------------------------------------ ### Sequelize Cheatsheet #### Command Line Sequelize provides utilities for generating migrations, models, and seed files. They are exposed through the `sequelize-cli` command. #### Init Project $ npx sequelize-cli init You must create a database user, and update the `config/config.json` file to match your database settings to complete the initialization process. #### Create Database npx sequelize-cli db:create #### Generate a model and its migration npx sequelize-cli model:generate --name <ModelName> --attributes <column1>:<type>,<column2>:<type>,... #### Run pending migrations npx sequelize-cli db:migrate #### Rollback one migration npx sequelize-cli db:migrate:undo #### Rollback all migrations npx sequelize-cli db:migrate:undo:all #### Generate a new seed file npx sequelize-cli seed:generate --name <descriptiveName> #### Run all pending seeds npx sequelize-cli db:seed:all #### Rollback one seed npx sequelize-cli db:seed:undo #### Rollback all seeds npx sequelize-cli db:seed:undo:all #### Migrations ### Create Table (usually used in the up() method) // This uses the short form for references return queryInterface.createTable(<TableName>, { <columnName>: { type: Sequelize.<type>, allowNull: <true|false>, unique: <true|false>, references: { model: <TableName> }, // This is the plural table name // that the column references. } }); // This the longer form for references that is less confusing return queryInterface.createTable(<TableName>, { <columnName>: { type: Sequelize.<type>, allowNull: <true|false>, unique: <true|false>, references: { model: { tableName: <TableName> // This is the plural table name } } } }); ### Delete Table (usually used in the down() function) return queryInterface.dropTable(<TableName>); ### Adding a column return queryInteface.addColumn(<TableName>, <columnName>: { type: Sequelize.<type>, allowNull: <true|false>, unique: <true|false>, references: { model: <TableName> }, // This is the plural table name // that the column references. }); ### Removing a column return queryInterface.removeColumn(<TableName>, <columnName>); ### Model Associations ### One to One between Student and Scholarship `student.js` Student.hasOne(models.Scholarship, { foreignKey: 'studentId' }); `scholarship.js` Scholarship.belongsTo(models.Student, { foreignKey: 'studentId' }); ### One to Many between Student and Class `student.js` Student.belongsTo(models.Class, { foreignKey: 'classId' }); `class.js` Class.hasMany(models.Student, { foreignKey: 'classId' }); ### Many to Many between Student and Lesson through StudentLessons table `student.js` const columnMapping = { through: 'StudentLesson', // This is the model name referencing the join table. otherKey: 'lessonId', foreignKey: 'studentId' } Student.belongsToMany(models.Lesson, columnMapping); `lesson.js` const columnMapping = { through: 'StudentLesson', // This is the model name referencing the join table. otherKey: 'studentId', foreignKey: 'lessonId' } Lesson.belongsToMany(models.Student, columnMapping); ### Inserting a new item // Way 1 - With build and save const pet = Pet.build({ name: "Fido", petTypeId: 1 }); await pet.save(); // Way 2 - With create const pet = await Pet.create({ name: "Fido", petTypeId: 1 }); ### Updating an item // Find the pet with id = 1 const pet = await Pet.findByPk(1); // Way 1 pet.name = "Fido, Sr." await pet.save; // Way 2 await pet.update({ name: "Fido, Sr." }); ### Deleting a single item // Find the pet with id = 1 const pet = await Pet.findByPk(1); // Notice this is an instance method pet.destroy(); ### Deleting multiple items // Notice this is a static class method await Pet.destroy({ where: { petTypeId: 1 // Destorys all the pets where the petType is 1 } }); ### Query Format ### findOne await <Model>.findOne({ where: { <column>: { [Op.<operator>]: <value> } }, }); ### findAll await <Model>.findAll({ where: { <column>: { [Op.<operator>]: <value> } }, include: <include_specifier>, offset: 10, limit: 2 }); ### findByPk await <Model>.findByPk(<primary_key>, { include: <include_specifier> }); ### Eager loading associations with `include` Simple include of one related model. await Pet.findByPk(1, { include: PetType }) Include can take an array of models if you need to include more than one. await Pet.findByPk(1, { include: [Pet, Owner] }) Include can also take an object with keys `model` and `include`. This is in case you have nested associations. In this case Owner doesn't have an association with PetType, but Pet does, so we want to include PetType onto the Pet Model. await Owner.findByPk(1, { include: { model: Pet include: PetType } }); ### toJSON method The confusingly named toJSON() method does **not** return a JSON string but instead returns a POJO for the instance. // pet is an instance of the Pet class const pet = await Pet.findByPk(1); console.log(pet) // prints a giant object with // tons of properties and methods // petPOJO is now just a plain old Javascript Object const petPOJO = pet.toJSON(); console.log(petPOJO); // { name: "Fido", petTypeId: 1 } ### Common Where Operators const Op = Sequelize.Op [Op.and]: [{a: 5}, {b: 6}] // (a = 5) AND (b = 6) [Op.or]: [{a: 5}, {a: 6}] // (a = 5 OR a = 6) [Op.gt]: 6, // > 6 [Op.gte]: 6, // >= 6 [Op.lt]: 10, // < 10 [Op.lte]: 10, // <= 10 [Op.ne]: 20, // != 20 [Op.eq]: 3, // = 3 [Op.is]: null // IS NULL [Op.not]: true, // IS NOT TRUE [Op.between]: [6, 10], // BETWEEN 6 AND 10 [Op.notBetween]: [11, 15], // NOT BETWEEN 11 AND 15 [Op.in]: [1, 2], // IN [1, 2] [Op.notIn]: [1, 2], // NOT IN [1, 2] [Op.like]: '%hat', // LIKE '%hat' [Op.notLike]: '%hat' // NOT LIKE '%hat' [Op.iLike]: '%hat' // ILIKE '%hat' (case insensitive) (PG only) [Op.notILike]: '%hat' // NOT ILIKE '%hat' (PG only) [Op.startsWith]: 'hat' // LIKE 'hat%' [Op.endsWith]: 'hat' // LIKE '%hat' [Op.substring]: 'hat' // LIKE '%hat%' [Op.regexp]: '^[h|a|t]' // REGEXP/~ '^[h|a|t]' (MySQL/PG only) [Op.notRegexp]: '^[h|a|t]' // NOT REGEXP/!~ '^[h|a|t]' (MySQL/PG only) [Op.iRegexp]: '^[h|a|t]' // ~* '^[h|a|t]' (PG only) [Op.notIRegexp]: '^[h|a|t]' // !~* '^[h|a|t]' (PG only) [Op.like]: { [Op.any]: ['cat', 'hat']} <figure><img src="https://cdn-images-1.medium.com/max/2560/1*IdBeXbBynFmQD7WwTNr7Hw.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/2560/1*bgZjuBly2EBDtGiCFaFoFw.png" class="graf-image" /></figure> ### Accessing the Data You can access and query the data using the `findByPk`, `findOne`, and `findAll` methods. First, make sure you import the models in your JavaScript file. In this case, we are assuming your JavaScript file is in the root of your project and so is the models folder. const { Recipe, Ingredient, Instruction, MeasurementUnit } = require('./models'); The models folder exports each of the models that you have created. We have these four in our data model, so we will destructure the models to access each table individually. The associations that you have defined in each of your models will allow you to access data of related tables when you query your database using the `include` option. If you want to find all recipes, for the recipe list, you would use the `findAll` method. You need to await this, so make sure your function is async. async function findAllRecipes() { return await Recipe.findAll(); } If you would like to include all the ingredients so you can create a shopping list for all the recipes, you would use `include`. This is possible because of the association you have defined in your Recipe and Ingredient models. async function getShoppingList() { return await Recipe.findAll({ include: [ Ingredient ] }); } If you only want to find one where there is chicken in the ingredients list, you would use `findOne` and `findByPk`. async function findAChickenRecipe() { const chickenRecipe = await Ingredient.findOne({ where: { foodStuff: 'chicken' } }); return await Recipe.findByPk(chickenRecipe.recipeId); } ### Data Access to Create/Update/Delete Rows You have two options when you want to create a row in a table (where you are saving one record into the table). You can either `.build` the row and then `.save` it, or you can `.create` it. Either way it does the same thing. Here are some examples: Let’s say we have a form that accepts the name of the recipe (for simplicity). When we get the results of the form, we can: const newRecipe = await Recipe.build({ title: 'Chicken Noodle Soup' }); await newRecipe.save(); This just created our new recipe and added it to our Recipes table. You can do the same thing like this: await Recipe.create({ title: 'Chicken Noodle Soup' }); If you want to modify an item in your table, you can use `update`. Let's say we want to change the chicken noodle soup to chicken noodle soup with extra veggies, first we need to get the recipe, then we can update it. const modRecipe = await Recipe.findOne({ where: { title: 'Chicken Noodle Soup' } }); await modRecipe.update({ title: 'Chicken Noodle Soup with Extra Veggies' }); To delete an item from your table, you will do the same kind of process. Find the recipe you want to delete and `destroy` it, like this: const deleteThis = await Recipe.findOne({ where: { title: 'Chicken Noodle Soup with Extra Veggies' } }); await deleteThis.destroy(); **NOTE:** If you do not await these, you will receive a promise, so you will need to use `.then` and `.catch` to do more with the items you are accessing and modifying. ### Documentation For the data types and validations in your models, here are the official docs. The sequelize docs are hard to look at, so these are the specific sections with just the lists: **Sequelize Data Types:** <a href="https://sequelize.org/v5/manual/data-types.html" class="markup--anchor markup--p-anchor"><em>https://sequelize.org/v5/manual/data-types.html</em></a> **Validations:** <a href="https://sequelize.org/v5/manual/models-definition.html#validations" class="markup--anchor markup--p-anchor"><em>https://sequelize.org/v5/manual/models-definition.html#validations</em></a> When you access the data in your queries, here are the operators available, again because the docs are hard to navigate, this is the specific section with the list of operators. **Operators:** <a href="https://sequelize.org/v5/manual/querying.html#operators" class="markup--anchor markup--p-anchor"><em>https://sequelize.org/v5/manual/querying.html#operators</em></a> The documentation for building, saving, creating, updating and destroying is linked here, it does a pretty good job of explaining in my opinion, it just has a title that we have not been using in this course. When they talk about an instance, they mean an item stored in your table. **Create/Update/Destroy:** <a href="https://sequelize.org/v5/manual/instances.html" class="markup--anchor markup--p-anchor"><em>https://sequelize.org/v5/manual/instances.html</em></a> #### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>There are tons of learning material on the Web The Front-End Checklist is an exhaustive list of all elements you need…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or Checkout my personal Resource Site: (Under construction… may be broken at any time) <a href="https://goofy-euclid-1cd736.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://goofy-euclid-1cd736.netlify.app/"><strong>a/A-Student-Resources</strong><br /> <em>Edit description</em>goofy-euclid-1cd736.netlify.app</a><a href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 13, 2021](https://medium.com/p/8acb68284a98). <a href="https://medium.com/@bryanguner/everything-you-need-to-know-about-relational-databases-sql-postgresql-and-sequelize-to-build-8acb68284a98" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,233 @@ Super Simple Intro To HTML ========================== What is HTML, CSS & JS and why do we need all three? ------------------------------------------------------------------------ ### Super Simple Intro To HTML #### What is HTML, CSS & JS and why do we need all three? <figure><img src="https://cdn-images-1.medium.com/max/800/0*KxF-AuqgX7UklUa4.png" class="graf-image" /></figure>HTML stands for “Hypertext Markup Language”. Basically, HTML is the structure for the website, words, bullet points, data tables, etc. CSS stands for “Cascading Style Sheets” which means it’s the “Style” it’s how to make your website look professional, and look visually appealing. JS is how to make your website actually \*\*work\*\*. For example, if you created something like YouTube and one of the options you can watch videos, you used HTML for the title, you used CSS for the color/s, and you have to make it actually work! So when you click on it it will run the video. This is an example of the three programming languages working in unison to form an experience you’re already familiar with if you’re reading this… **I mean most likely… unless you printed it because you hate trees.** — — — — — — — — — — - ### What are Tags and Attributes? Tags and attributes are the basis of HTML. They work together but perform different functions — it is worth investing 2 minutes in **differentiating the two**. #### What Are HTML Tags? <a href="https://html.com/tags/" class="markup--anchor markup--p-anchor">Tags</a> are used to **mark up the start of an HTML element** and they are usually enclosed in angle brackets. An example of a tag is: `<h1>`. Most tags must be opened `<h1>` and closed `</h1>` in order to function. #### What are HTML Attributes? <a href="https://html.com/attributes/" class="markup--anchor markup--p-anchor">Attributes</a> contain **additional pieces of information**. Attributes take the form of an opening tag and additional info is **placed inside**. An example of an attribute is: `<img src="mydog.jpg" alt="A photo of my dog.">` In this instance, the image source (src) and the alt text (alt) are attributes of the `<img>` tag. #### Golden Rules To Remember 1. <span id="e12a">The vast majority of tags must be **opened** (`<tag>`) and **closed** (`</tag>`) with the element information such as a title or text resting between the tags.</span> 2. <span id="c99f">When using multiple tags, the tags must be **closed in the order in which they were opened**. For example:</span> 3. <span id="9eb5">`<strong><em>This is really important!</em></strong>`</span> Let’s have a look at how CodePen works, firstly, you need to go to their website. After that, you must create an account. After you do that, You will see something like this ### How to get started If you’re using Visual Studio Code, congrats! There is Emmet support built into VSCode, so you won’t need to install any extensions. If you’re working in Atom you’ll need to install the Emmet plugin, which can be <a href="https://atom.io/packages/emmet" class="markup--anchor markup--p-anchor">found here</a>. ### Basic Syntax ***HTML Boilerplate*** If you’ve been working in VSCode, you’ve probably seen Emmet syntax highlighting when working in HTML documents. In my opinion, the most convenient Emmet shortcut is ***html:5***. This will create an HTML boilerplate, and fill out metadata tags in the head of your document. html:5 <figure><img src="https://cdn-images-1.medium.com/max/800/0*oDrxfgtO2WE9_Z6d.png" class="graf-image" /></figure>Emmet Abbreviation for different HTML boilerplates. **When you see the auto complete as pictured above you can hit tab to auto fill the boilerplate html document.** That one small shortcut autogenerates all this metadata and head and body tags: <figure><img src="https://cdn-images-1.medium.com/max/800/0*LgiaI-W7QB4mtifR.png" class="graf-image" /></figure>#### Here’s some slightly more advanced boilerplate for you to use as a starting point in your projects. ### HTML Language **Chapter 1: Formatting text** **Tags in HTML:** Tags are one of the most important parts in an HTML document. (We will get to what HTML document is after we know what tags are). HTML uses some predefined tags which tells the browser about content display property, that is how to display a particular given content. For Example, to create a paragraph, one must use the paragraph tags(<p> </p>) and to insert an image one must use the img tags(<img />). There are generally two types of tags in HTML: 1. <span id="9de4">**Paired tags:** These tags come in pairs. That is they have both opening (< >) and closing(</ >) tags.</span> 2. <span id="4b61">**Singular tags:** These tags do not required to be closed</span> > i.e. <hr> <p> The tag above me is a horizontal line that doesn't need a closing tag </p> HTML tags have two main types: **block-level** and **inline tags**. 1. <span id="bd59">Block-level elements take up the full available space and always start a new line in the document. Headings and paragraphs are a great example of block tags.</span> 2. <span id="2479">Inline elements only take up as much space as they need and don’t start a new line on the page. They usually serve to format the inner contents of block-level elements. Links and emphasized strings are good examples of inline tags.</span> ### Block-Level Tags The three block level tags every HTML document needs to contain are **<html>**, **<head>**, and **<body>**. 1. <span id="bd5d">The **<html></html>** tag is the highest level element that encloses every HTML page.</span> 2. <span id="c015">The **<head></head>** tag holds meta information such as the page’s title and charset.</span> 3. <span id="5ca8">Finally, the **<body></body>** tag encloses all the content that appears on the page.</span> - <span id="7864">Paragraphs are enclosed by ***<p></p>***, while blockquotes use the ***<blockquote></blockquote>*** tag.</span> - <span id="82ad">Divisions are bigger content sections that typically contain several paragraphs, images, sometimes blockquotes, and other smaller elements. We can mark them up using the ***<div></div>*** tag. A div element can contain another div tag inside it as well.</span> - <span id="39c6">You may also use ***<ol></ol>*** tags for ordered lists and ***<ul></ul>*** for unordered ones. Individual list items must be enclosed by the ***<li></li>*** tag. For example, this is how a basic unordered list looks like in HTML:</span> 1. <span id="e470">**<ul>**</span> 2. <span id="b8c5">**<li>**List item 1**</li>**</span> 3. <span id="3c1d">**<li>**List item 2**</li>**</span> 4. <span id="97b4">**<li>**List item 3**</li>**</span> 5. <span id="b59a">**</ul>**</span> ### **Structure of an HTML Document** An HTML Document is mainly divided into two parts: - <span id="0424">**HEAD**: This contains the information about the HTML document. For Example, Title of the page, version of HTML, Meta-Data etc.</span> HTML TAG Specifies an html document. The HTML element (or HTML root element) represents the root of an HTML document. All other elements must be descendants of this element. Since the element is the first in a document, it is called the root element. Although this tag can be implied, or not required, with HTML, it is required to be opened and closed in XHTML. - <span id="83fe">Divisions are bigger content sections that typically contain several paragraphs, images, sometimes blockquotes, and other smaller elements. We can mark them up using the ***<div></div>*** tag. A div element can contain another div tag inside it as well.</span> - <span id="9d53">You may also use ***<ol></ol>*** tags for ordered lists and ***<ul></ul>*** for unordered ones. Individual list items must be enclosed by the ***<li></li>*** tag. For example, this is how a basic unordered list looks like in HTML:</span> 1. <span id="4097">**<ul>**</span> 2. <span id="0103">**<li>**List item 1**</li>**</span> 3. <span id="1de2">**<li>**List item 2**</li>**</span> 4. <span id="dad0">**<li>**List item 3**</li>**</span> 5. <span id="592f">**</ul>**</span> ### Inline Tags Many inline tags are used to format text. For example, a **<strong></strong>** tag would render an element in **bold**, whereas *<em></em>* tags would show it in *italics*. Hyperlinks are also inline elements that require ***<a></a>*** tags and **href** attributes to indicate the link’s destination: 1. <span id="f67d">**<a** **href=**”https://example.com/"**>**Click me!**</a>**</span> Images are inline elements too. You can add one using ***<img>*** without any closing tag. But you will also need to use the ***src*** attribute to specify the image path, for example: 1. <span id="3924">**<img** **src=**”/images/example.jpg” **alt=**”Example image”**>**</span> #### **BODY**: This contains everything you want to display on the Web Page. <body> <! — Everything the user sees on the webpage goes here! — ps… this is a comment → </body> Let us now have a look on the basic structure of HTML. That is the code which is must for every webpage to have: ***<!DOCTYPE html>*** #### Here is some boilerplate html you can use as a starting point:!!Every Webpage must contain this code.!! ------------------------------------------------------------------------ ### **<!DOCTYPE html>** ------------------------------------------------------------------------ Below is the complete explanation of each of the tags used in the above piece of HTML code: **<!DOCTYPE html>:** This tag is used to tells the HTML version. This currently tells that the version is HTML 5. > ***<html>*:** This is called HTML root element and used to wrap all the code. > **<head>:** Head tag contains metadata, title, page CSS etc. All the HTML elements that can be used inside the <head> element are: > **<body>:** Body tag is used to enclosed all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element. ### Bold Text: <b> **this is bold** </b> <strong> ⇐ this is for strong, emergency emotions. \_\_\_\_\_\_\_\_\_\_\_ **HEADING/S:** *6 types from largest(h1) to smallest (h6)* <h1> <h2> <h3> <h4> <h5> <h6> \_\_\_\_\_\_\_\_\_\_\_ **ITALICS:** There are two ways to use it, the first one is the <i> tag and the second one is the <em> tag. They both italicize the text<a href="https://emojipedia.org/person-shrugging/" class="markup--anchor markup--p-anchor">🤷</a> <i> *this is fancy text that’s too good to for us*</i> \_\_\_\_\_\_\_\_\_\_\_ **PARAGRAPHS:** In order to make Paragraphs, just add <p>. <p> Hi there my name is Jason. </p> \_\_\_\_\_\_\_\_\_\_\_ **TITLES: not the same thing as a heading (which renders on the html page) but instead the title element represents the title of the page as shown in the tab of the browser.** <head> As such <title>This is the title</title> it is always found between <head> tags and not in the body of the page where all the content that gets rendered on the page is contained. <figure><img src="https://cdn-images-1.medium.com/max/800/0*CSqPk3mD0fR-oOAb" class="graf-image" /></figure>### Here’s a handy Cheat Sheet: <figure><img src="https://cdn-images-1.medium.com/max/800/0*c9Vyer_N97InJsUB.png" class="graf-image" /></figure>Below I am going to Include a gist that contains html code that uses pretty much every tag I could think of off the top of my head… If it’s not included here I promise you it’s seldom used by most webpages. Below that I will embed an image of the webpage that it renders too…. that super small text at the bottom is actually one giant button: <figure><img src="https://cdn-images-1.medium.com/max/2560/1*gdM-6smOEc2ChCI_8_Ql_g.png" class="graf-image" /></figure> ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 13, 2021](https://medium.com/p/651d695f9bc). <a href="https://medium.com/@bryanguner/super-simple-intro-to-html-651d695f9bc" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,129 @@ JavaScript Rotate (Array) ProblemWalkthrough ============================================ Explanation for Rotate Right ------------------------------------------------------------------------ #### <a href="http://medium.com/codex" class="markup--anchor markup--h4-anchor">CODEX</a> ### JavaScript Rotate (Array) Problem Walkthrough ### Explanation for Rotate Right <figure><img src="https://cdn-images-1.medium.com/max/1200/0*3_vbGvHeWOgSTxk7.png" class="graf-image" /></figure> ### Question <span class="graf-dropCap">W</span>rite a function `rotateRight(array, num)` that takes in an array and a number as arguments. > The function should return a new array where the elements of the array are rotated to the right number times. > The function should not mutate the original array and instead return a new array. > Define this function using `function expression syntax`<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function" class="markup--anchor markup--blockquote-anchor">.</a> **HINT:** you can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice" class="markup--anchor markup--p-anchor">Array#slice</a> to create a copy of an array ------------------------------------------------------------------------ > JavaScript gives us four methods to add or remove items from the beginning or end of arrays: ### pop(): Remove an item from the end of an array let cats = ['Bob', 'Willy', 'Mini']; cats.pop(); // ['Bob', 'Willy'] > pop() returns the removed item. ### push(): Add items to the end of an array let cats = ['Bob']; cats.push('Willy'); // ['Bob', 'Willy'] cats.push('Puff', 'George'); // ['Bob', 'Willy', 'Puff', 'George'] > push() returns the new array length. ### shift(): Remove an item from the beginning of an array let cats = ['Bob', 'Willy', 'Mini']; cats.shift(); // ['Willy', 'Mini'] > shift() returns the removed item. ### unshift(): Add items to the beginning of an array let cats = ['Bob']; cats.unshift('Willy'); // ['Willy', 'Bob'] cats.unshift('Puff', 'George'); // ['Puff', 'George', 'Willy', 'Bob'] > unshift() returns the new array length. **We are being asked for two things:** 1. <span id="0000">To return an array with all the elements shifted over ‘num’ times.</span> 2. <span id="8d90">To `NOT` mutate the original array</span> **Step 1.** We need to start the function and create a variable to hold a COPY of our input array. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"><strong>Array.prototype.slice()</strong><br /> <em>The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end…</em>developer.mozilla.org</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> - <span id="313d">We assign array.slice(0) to a variable called result.</span> - <span id="6bdb">Slicing our input array simply creates a sliced copy of the data.</span> - <span id="1d93">Remember that by excluding a second argument in our slice parameter allows us to slice from the first argument all the way to the end.</span> **Step 2.** We need to create a for loop to tell our function how many times we want to rotate. - <span id="8a82">By setting our second delimiter to i < num we will ask our loops to run num times.</span> - <span id="820c">Running num times is the same as executing the code block within num times.</span> **Step 3.** We need to put some executable code within our for loop to be run during every cycle. - <span id="c573">Since we are rotating to the right, every change to our result array under the hood will look like this (if we ref. our first test case):</span> - <span id="ab3a">`['a', 'b', 'c', 'd', 'e'];` (how it looks like at the start)</span> - <span id="5fab">`['e', 'a', 'b', 'c', 'd'];` (after one run of the for loop)</span> - <span id="e31e">`['d', 'e', 'a', 'b', 'c'];` (after second/last run of the for loop)</span> - <span id="aa2f">To accomplish this we first need to ‘`pop`' off or remove our last element.</span> - <span id="d19e">Two things happen when we use this built-in function.</span> - <span id="687c">Our copied array is mutated to lose it’s last ele.</span> - <span id="392e">The removed element is stored in the variable we assigned to the function.</span> - <span id="7c06">Our second step is to add it to the start of our array, to do this we can use `unshift`.</span> - <span id="4a0f">By inputting the variable we are using to hold our removed element into the parameter of unshift we are adding our element to the front of the array.</span> **Step 4.** Now that our for loop has ended and our copied array looks just like how the answer looks, we need to output the answer. - <span id="5d8c">We accomplish this by creating a `return` line AFTER the for loop.</span> ### End Result ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: ### **==>currently under development & very buggy** <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>a/A-Student-Resources</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 14, 2021](https://medium.com/p/31deb19ebba1). <a href="https://medium.com/@bryanguner/javascript-rotate-array-problemwalkthrough-31deb19ebba1" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,641 @@ Object Oriented Programming in JavaScript ========================================= Object-Oriented Programming ------------------------------------------------------------------------ ### Object Oriented Programming in JavaScript ### Object-Oriented Programming <figure><img src="https://cdn-images-1.medium.com/max/800/0*56wmllZ_9pRe28TK.jpg" class="graf-image" /></figure>### Overview: #### `Encapsulation` - <span id="b36d">The mechanism that puts behavior and data together behind methods that hide the specific implementation of a class.</span> #### How can a `CommonJS Module import functionality` from another module? - <span id="37ed">Through the use of the require function.</span> #### How can an ES6 module import functionality from another module? - <span id="1e02">Through the use of the import-from syntax that looks like this:</span> - <span id="7d93">`import SymbolName from './relative-path.js';`</span> #### How do `CommonJS Modules` allow other modules to access exported symbols? - <span id="31b0">Through the use of the module.exports property.</span> #### How do `ES6 Modules export` functionality so other modules can use them? - <span id="3aa7">Through the use of the export keyword.</span> #### `Implementation inheritance` - <span id="ed04">The data and methods defined on a parent class are available on objects created from classes that inherit from those parent classes</span> #### `Inheritance` - <span id="ed6e">The mechanism that passes traits of a parent class to its descendants.</span> #### `Prototypal inheritance` - <span id="598e">A method of realizing implementation inheritance through process of finding missing properties on an object by delegating the resolution to a prototype object.</span> #### `The constructor method` - <span id="e46e">The special method of a class that is called to initialize an object when code uses the new keyword to instantiate an object from that class.</span> #### `The Dependency Inversion Principle` - <span id="d024">Functionality that your class depends on should be provided as parameters to methods rather than using new in the class to create a new instance of a dependency.</span> #### The `extends` keyword - <span id="f74f">The keyword in JavaScript that allows one class to inherit from another.</span> #### `The Interface Segregation Principle` - <span id="6af3">Method names should be grouped together into granular collections called “interfaces”</span> #### `The Law Of Demeter` - <span id="e90d">Don’t use more than one dot (not counting the one after “this”).</span> - <span id="6cbd">A method of an object can only invoke the methods (or use the properties) of the following kinds of objects: Methods on the object itself Any of the objects passed in as parameters to the method And object created in the method Any values stored in the instance variables of the object Any values stored in global variables</span> #### `The Liskov Substitution Principle` - <span id="4589">You can substitute child class objects for parent class objects and not cause errors.</span> #### `The Open-Close Principle` - <span id="7246">A class is open for extension and closed for modification.</span> #### `The Single-Responsibility Principle` - <span id="48dc">Any one of the following:</span> - <span id="3313">A class should do one thing and do it well.</span> - <span id="2d3f">A class should have only one reason to change.</span> - <span id="e277">Gather together the things that change for the same reasons. Separate those things that change for different reasons.</span> ------------------------------------------------------------------------ ### Background: ### Constructor Functions Defining a constructor function *Example of an object using object initialization* const fellowshipOfTheRing = { title: "The Fellowship of the Ring", series: "The Lord of the Rings", author: "J.R.R. Tolkien", }; - <span id="9071">The above literal is a “Book” object type.</span> - <span id="a5d6">`Object Type` is defined by it's attributes and behaviors.</span> > `Behaviors` **are represented by methods.** - <span id="ccb5">`Constructor Functions` : Handle the creation of an object - it's a factory for creating objects of a specific type.</span> - <span id="bdc9">There are a few specific things to constructors worth noting:</span> - <span id="6549">***The name of the constructor function is capitalized***</span> - <span id="8e61">The Function *does not explicitly return a value*</span> - <span id="8d48">Within the body, the *this* keyword references the newly created object</span> <!-- --> function Book(title, series, author) { this.title = title; this.series = series; this.author = author; } ### Invoking a constructor function - <span id="dc26">We can invoke a constructor function using the `new` keyword.</span> <!-- --> function Book(title, series, author) { this.title = title; this.series = series; this.author = author; } const fellowshipOfTheRing = new Book( "The Fellowship of the Ring", "The Lord of the Rings", "J.R.R. Tolkien" ); console.log(fellowshipOfTheRing); // Book { title: 'The Fellowship of the Ring', ... } ### *Four Things will happen when invoking a constructor function* 1. <span id="b127">A new empty object is created {};</span> 2. <span id="3c79">The new obj’s `prototype` is set to the object referenced by the constructors prototype property.</span> 3. <span id="6b2e">`This` is bound to the new object.</span> 4. <span id="a360">The new object is returned after the constructor function has completed.</span> ### Understanding New Object Instances - <span id="1263">`Instance` : term to describe an objected created from a constructor function.</span> - <span id="6916">Every instance created is a unique object and therefore not equal to each other.</span> ### Using the instanceof operator to check an object’s type console.log(fellowshipOfTheRing instanceof Book); // true - <span id="f5e2">By using the `instanceof` operator we can verify that an object was created from a certain object type.</span> - <span id="9d20">*The instanceOf operator works by checking to see if the prototype object of the left side of the operator is the same as the prototype object of the right side of the operator.*</span> ### Invoking a constructor function without the new keyword - <span id="e812">If we invoke a constructor function without the `new` keyword, we may result in one of two unexpected outcomes:</span> 1. <span id="c067">In non-strict mode, this will be bound to the global object instead.</span> 2. <span id="8654">In `strict` mode, this will become undefined.</span> - <span id="4f03">You can enable strict mode by typing `"use strict"` at the top of your file.</span> ### Defining Sharable Methods - <span id="0f4e">*Avoid the temptation to store an object method inside a constructor function, it is inefficient with computer memory usage b/c each object instance would have it’s own method definition.*</span> - <span id="a9e8">`Prototype` : An object that is delegated to when a reference to an object property or method can't be resolved.</span> - <span id="ddc6">Every instance created by a constructor function shares the same prototype.</span> - <span id="ddba">`Object.setPrototypeOf()` and `Object.getPrototypeOf()` are just used to set a prototype of one object to another object; and also the verify a prototype.</span> - <span id="144c">`proto` : aka "dunder proto" is a property used to gain easy access to an object's prototype - it is widely supported by browsers but is considered deprecated.</span> <!-- --> function Book(title, series, author) { this.title = title; this.series = series; this.author = author; } // Any method defined on the `Book.prototype` property // will be shared across all `Book` instances. Book.prototype.getInformation = function () { return `${this.title} by ${this.author}`; }; const fellowshipOfTheRing = new Book( "The Fellowship of the Ring", "The Lord of the Rings", "J.R.R. Tolkien" ); console.log(fellowshipOfTheRing.getInformation()); - <span id="455e">Every method we define on a constructor function’s prototype property will be shared across all instances of that object type.</span> The Problem with Arrow Functions - <span id="6cb0">We cannot use arrow functions when defining methods on a constructor function’s prototype property.</span> - <span id="4f33">Arrow functions don’t include their own this binding; therefore it will not reference the current instance — always stick with the function () keyword.</span> ------------------------------------------------------------------------ ### Putting the Class in JavaScript Classes In ES2015, JS gained the `class` keyword - replacing the need to use only constructor functions & prototypes to mimic classes! - <span id="df3e">`class` : keyword that gives developers a formal way to create a class definition to specify an object type's attributes and behavior; also used to create objects of that specific type.</span> Defining a ES2015 class class Book { constructor(title, series, author) { this.title = title; this.series = series; this.author = author; } } - <span id="951e">Class names also begin only with capital letters.</span> - <span id="28ed">Although not required, class definitions can include a `class constructor function` - these are similar to regular constructors in that:</span> - <span id="a4b1">They don’t explicitly return a value.</span> - <span id="e85e">The this keyword references the newly created object instance.</span> ### Instantiating an instance of a class > We can also use the `new`. ### Four things occur when instantiating an instance of a class: 1. <span id="8842">New empty object is created {};</span> 2. <span id="1cd6">The new obj’s prototype is set to the class prototype’s property value.</span> 3. <span id="eddc">`This` is bound to the new object.</span> 4. <span id="0814">After the constructor method has completed, the new obj is returned.</span> - <span id="e722">**Don’t try to instatiate a class object without the new keyword.**</span> #### Class Definitions are NOT hoisted test(); function test() { console.log("This works!"); } - <span id="bf4e">In JS you can call a function before it’s declared — this is known as `hoisting`.</span> - <span id="8dd6">Class definitions are **NOT hoisted,** so just get in the habit of declaring them before you use them.</span> Defining Methods - <span id="afc2">A class can contain two types of methods:</span> - <span id="6099">`Instance Method` : Methods that are invoked on an instance of the class - useful for performing an action on a specific instance.</span> - <span id="ed85">Instance methods are also sometimes referred to as `prototype` methods because they are defined on a shared prototype object.</span> - <span id="ca19">`Static Method` : Methods that invoked directly on a class, not on an instance.</span> - <span id="3c58">`Important`: Invoking a static method on an instance will result in a runtime error.</span> - <span id="a067">Prepending the `static` keyword at the beginning on the method name will make it static.</span> <!-- --> class Book { constructor(title, series, author) { this.title = title; this.series = series; this.author = author; } // Notice the use of a rest parameter (...books) // to capture the passed parameters as an array of values. static getTitles(...books) { return books.map((book) => book.title); } getInformation() { return `${this.title} by ${this.author}`; } } const fellowshipOfTheRing = new Book( "The Fellowship of the Ring", "The Lord of the Rings", "J.R.R. Tolkien" ); const theTwoTowers = new Book( "The Two Towers", "The Lord of the Rings", "J.R.R. Tolkien" ); const bookTitles = Book.getTitles(fellowshipOfTheRing, theTwoTowers); console.log(bookTitles.join(", ")); // The Fellowship of the Ring, The Two Towers - <span id="133d">If we go back to an example of how constructor functions also use static methods — we see that static methods are *defined directly on the constructor function* — whereas instance methods need to be defined on the *prototype* object.</span> <!-- --> function Book(title, series, author) { this.title = title; this.series = series; this.author = author; } // Static methods are defined // directly on the constructor function. Book.getTitles = function (...books) { return books.map((book) => book.title); }; // Instance methods are defined // on the constructor function's `prototype` property. Book.prototype.getInformation = function () { return `${this.title} by ${this.author}`; }; const fellowshipOfTheRing = new Book( "The Fellowship of the Ring", "The Lord of the Rings", "J.R.R. Tolkien" ); const theTwoTowers = new Book( "The Two Towers", "The Lord of the Rings", "J.R.R. Tolkien" ); console.log(fellowshipOfTheRing.getInformation()); // The Fellowship of the Ring by J.R.R. Tolkien console.log(theTwoTowers.getInformation()); // The Two Towers by J.R.R. Tolkien // Call the static `Book.getTitles()` method // to get an array of the book titles. const bookTitles = Book.getTitles(fellowshipOfTheRing, theTwoTowers); console.log(bookTitles.join(", ")); // The Fellowship of the Ring, The Two Towers ### Comparing Classes to Constructor Functions > *ES2015 Classes are essentially* ***syntactic sugar*** *over traditional constructor functions and prototypes.* ------------------------------------------------------------------------ ### Javascript Inheritance - <span id="76a3">`Child Class` : Class that is based upon another class and inherits properties and methods from that other class.</span> - <span id="9c4b">`Parent Class` : Class that is being inherited downwards.</span> - <span id="673c">`Inheritance` : The process of basing a class upon another class.</span> <!-- --> class CatalogItem { constructor(title, series) { this.title = title; this.series = series; } getInformation() { if (this.series) { return `${this.title} (${this.series})`; } else { return this.title; } } } class Book extends CatalogItem { constructor(title, series, author) { super(title, series); this.author = author; } } class Movie extends CatalogItem { constructor(title, series, director) { super(title, series); this.director = director; } } const theGrapesOfWrath = new Book( "The Grapes of Wrath", null, "John Steinbeck" ); const aNewHope = new Movie( "Episode 4: A New Hope", "Star Wars", "George Lucas" ); console.log(theGrapesOfWrath.getInformation()); // The Grapes of Wrath console.log(aNewHope.getInformation()); // Episode 4: A New Hope (Star Wars) console.log(Catalogitem instanceof Function); // true console.log(Book instanceof Function); // true - <span id="8dcd">A `prototype chain` defines a series of prototype objects that are delegated to one by one, when a property or method can't be found on an instance object.</span> <!-- --> console.log(theGrapesOfWrath.getInformation()); // The Grapes of Wrath - <span id="cdf9">When the `getInformation()` method is invoked:</span> - <span id="7d03">JS looks for get() on the current object.</span> - <span id="c65f">If it isn’t found, the method call is delegated to the object’s prototype.</span> - <span id="7ff3">It continues up the prototype chain until the method is found.</span> Overriding a method in a parent class - <span id="71f7">`Method Overriding` : when a child class provides an implementation of a method that's already defined in a parent class.</span> <!-- --> class Movie extends CatalogItem { constructor(title, series, director) { super(title, series); this.director = director; } getInformation() { let result = super.getInformation(); if (this.director) { result += ` [directed by ${this.director}]`; } return result; } } - <span id="68fd">We can simply declare our own method of the same name in our child class to override our parent’s version of `getInformation()`</span> ------------------------------------------------------------------------ ### JavaScript Modules Introducing Node.js modules - <span id="7869">In Node.js, each JS file in a project defines a `module`.</span> - <span id="fdaa">Module’s contents are private by default.</span> - <span id="1ee7">`Local Modules` : Modules defined within your project.</span> - <span id="47f2">`Core Modules` : Native modules contained within Node.js that you can use to perform tasks or to add functionality to your application.</span> - <span id="dc6e">`CommonJS` : A legacy module system.</span> - <span id="20cd">`ES Modules` : Newer module sysem that will eventually replace CommonJS.</span> - <span id="5889">`Entry Point` : JS File that is passed to Node for access to the entire application.</span> ### Syntax for exporting modules: module.exports.Book = Book; module.exports.Movie = Movie; module.exports = { Book, Movie, }; #### Syntax for importing modules: const classes = require(“./classes”); const { Book, Movie } = require(“./classes”); #### Using Single Item Modules - <span id="0b43">Following the convention of a single exported item per module helps to keep modules focused and less likely to become bloted with too much code.</span> #### Understanding Module Loading - <span id="a924">When loading a module, Node will examine the identifier passed to the require() function to determine if our module is local, core, or third-party:</span> - <span id="42b7">`Local Module`: identifier starts with ./ ../ or /</span> - <span id="7f81">`Node.js Core`: identifier matches name</span> - <span id="ecfe">`Third-Party`: identifier matches a module in the node modules folder (installed package)</span> ------------------------------------------------------------------------ ### `Encapsulation` - <span id="74af">Puts the behavior and data together behind methods that hide the specific implementation so that code that uses it doesn’t need to worry about the details of it.</span> ### `Inheritance` - <span id="5328">`Implementation Inheritance`** :** Means that data and methods defined on a parent class are available on objects created from classes that inherit from those parent classes.</span> - <span id="743c">`Prototypal Inheritance` : Means that JS uses prototype objects to make its `implementation inheritance` actually work.</span> - <span id="39b5">Parent Class === Prototype === Super Class === Base Class</span> - <span id="8a35">Inheritance === Subtyping</span> <!-- --> class MyClass {} // is the same as class MyClass extends Object {} - <span id="e595">**When you declare a class with no explicit parent class, JS will make it a child of Object.**</span> <!-- --> class Charity {} class Business { toString() { return "Give us your money."; } } class Restaurant extends Business { toString() { return "Eat at Joe's!"; } } class AutoRepairShop extends Business {} class Retail extends Business { toString() { return "Buy some stuff!"; } } class ClothingStore extends Retail {} class PhoneStore extends Retail { toString() { return "Upgrade your perfectly good phone, now!"; } } console.log(new PhoneStore().toString()); // 'Upgrade your perfectly good phone, now!' console.log(new ClothingStore().toString()); // 'Buy some stuff!'; console.log(new Restaurant().toString()); // 'Eat at Joe\'s!' console.log(new AutoRepairShop().toString()); // 'Give us your money.' console.log(new Charity().toString()); // [object object] #### The nuts and bolts of prototypal inheritance <figure><img src="https://cdn-images-1.medium.com/max/800/0*FCIE6k4O9X8f9CbR" class="graf-image" /></figure>- <span id="8fac">When JavaScript uses a property (or method) from a prototype that it found through prototypal inheritance, then the this property points to the original object on which the first call was made.</span> <!-- --> class Parent { constructor() { this.name = "PARENT"; } toString() { return `My name is ${this.name}`; } } class Child extends Parent { constructor() { super(); this.name = "CHILD"; } } const parent = new Parent(); console.log(parent.toString()); // my name is Parent const child = new Child(); console.log(child.toString()); // my name is Child ### Polymorphism - <span id="4da7">The ability to treat an object as if it were an instance of one of its parent classes.</span> ------------------------------------------------------------------------ ### The SOLID Principles Explained SOLID is an anagram for: - <span id="cdba">`The Single-Responsibility Principle`</span> - <span id="be3a">`The Open-Close Principle`</span> - <span id="0822">`The Liskov Substitution Principle`</span> - <span id="f90a">`The Interface Segregation Principle`</span> - <span id="05aa">`The Dependency Inversion Principle`</span> ### `Single-Responsibility Principle` > *A class should do one thing and do it well* - <span id="46f7">This principle is about limiting the impact of change.</span> ### `The Liskov Substitution Principle:` *Subtype Requirement: Let ϕ(x) be a property provable about objects x of type T. Then ϕ(y) should be true for objects y of type S where S is a subtype of T.* > *You can substitute child class objects for parent class objects and not cause errors.* `The Other Three` - <span id="11ae">The remaining three principles are important for languages that have `static typing` - which means a variable can have only one kind of thing in it.</span> - <span id="c644">`Open-Close Principle`</span> - <span id="450f">A class is open for extension and closed for modification.</span> - <span id="d4c9">Creating new functionality can happen in child classes, and not the original class.</span> - <span id="9cb7">`Interface Segregation Principle`</span> - <span id="37db">Method names should be grouped together into granular collections called “interfaces”.</span> - <span id="7861">`Dependency Inversion Principle`</span> - <span id="40a9">Functionality that your class depends on should be provided as parameters to methods rather than using new in the class to create a new instance.</span> ### Controlling Coupling with The Law of Demeter - <span id="2e83">`Coupling` : The degree of interdependence between two or more classes.</span> - <span id="d484">The fewer the connections between classes, the less chance there is for the *ripple effect*.</span> - <span id="dc31">Here is the formal definition:</span> - <span id="61b4">A method of an object can only invoke the methods (or use the properties) of the following kind of objects:</span> - <span id="5733">Methods on the object itself.</span> - <span id="163d">Any of the objects passed in as parameters to the method.</span> - <span id="c766">Any object created in the method.</span> - <span id="d8ce">Any values stores in the instance variables of the object.</span> - <span id="ce51">Any values stored in global variables.</span> - <span id="0aba">Law of Demeter is more so of a guideline than a law.</span> - <span id="0d36">Easiest way to implement it is to *not us more than one dot*</span> - <span id="76ea">You cannot cheat by separating extra calls onto different lines.</span> ### When to ignore the Law of Demeter - <span id="770a">When you work with objects that come from code that you didn’t create — you will often have to break the LoD.</span> <!-- --> document .getElementById("that-link") .addEventListener("click", (e) => e.preventDefault()); - <span id="d850">This breaks the law but there is way about it because your code needs to know about both elements and you have to use the API provided by the DOM.</span> - <span id="9dc9">UI’s will break LoD because they are not object-oriented programs.</span> ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>Web-Dev-Resource-Hub</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 14, 2021](https://medium.com/p/d45007d06333). <a href="https://medium.com/@bryanguner/object-oriented-programming-in-javascript-d45007d06333" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,689 @@ Everything You Need to Get Started With VSCode + Extensions & Resources ======================================================================= Commands: ------------------------------------------------------------------------ ### Everything You Need to Get Started With VSCode + Extensions & Resources #### Every extension or tool you could possibly need <figure><img src="https://cdn-images-1.medium.com/max/1200/1*gcp0kkiWQY6qd1Y4qEcqxw.png" class="graf-image" /></figure> ### Here’s a rudimentary static site I made that goes into more detail on the extensions I use… <a href="https://5fff5b9a2430bb564bfd451d--stoic-mccarthy-2c335f.netlify.app/#h18" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://5fff5b9a2430bb564bfd451d--stoic-mccarthy-2c335f.netlify.app/#h18"><strong>VSCodeExtensions</strong><br /> 5fff5b9a2430bb564bfd451d--stoic-mccarthy-2c335f.netlify.app</a><a href="https://5fff5b9a2430bb564bfd451d--stoic-mccarthy-2c335f.netlify.app/#h18" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Here’s the repo it was deployed from: <a href="https://github.com/bgoonz/vscode-Extension-readmes" class="markup--anchor markup--p-anchor">https://github.com/bgoonz/vscode-Extension-readmes</a> ------------------------------------------------------------------------ ### Commands: > Command Palette > Access all available commands based on your current context. > Keyboard Shortcut: **Ctrl+Shift+P** <figure><img src="https://cdn-images-1.medium.com/max/800/0*BByhnDoVQdRPdO4F.gif" class="graf-image" /></figure>### Command palette `⇧⌘P`Show all commands`⌘P`Show files ### Sidebars `⌘B`Toggle sidebar`⇧⌘E`Explorer`⇧⌘F`Search`⇧⌘D`Debug`⇧⌘X`Extensions`⇧^G`Git (SCM) ### Search `⌘F`Find`⌥⌘F`Replace`⇧⌘F`Find in files`⇧⌘H`Replace in files ### Panel `⌘J`Toggle panel`⇧⌘M`Problems`⇧⌘U`Output`⇧⌘Y`Debug console`` ^` ``Terminal ### View `⌘k` `z`Zen mode`⌘k` `u`Close unmodified`⌘k` `w`Close all ### Debug `F5`Start`⇧F5`Stop`⇧⌘F5`Restart`^F5`Start without debugging`F9`Toggle breakpoint`F10`Step over`F11`Step into`⇧F11`Step out`⇧⌘D`Debug sidebar`⇧⌘Y`Debug panel <figure><img src="https://cdn-images-1.medium.com/max/1200/0*llpkl5jsIMhWMucR.png" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Tips-N-Tricks: Here is a selection of common features for editing code. If the keyboard shortcuts aren’t comfortable for you, consider installing a <a href="https://marketplace.visualstudio.com/search?target=VSCode&category=Keymaps&sortBy=Downloads" class="markup--anchor markup--p-anchor">keymap extension</a> for your old editor. Tip: You can see recommended keymap extensions in the Extensions view with Ctrl+K Ctrl+M which filters the search to `@recommended:keymaps`. ### Multi cursor selection To add cursors at arbitrary positions, select a position with your mouse and use Alt+Click (Option+click on macOS). To set cursors above or below the current position use: Keyboard Shortcut: Ctrl+Alt+Up or Ctrl+Alt+Down <figure><img src="https://cdn-images-1.medium.com/max/800/0*Le_oEOiYnEBmFfig.gif" class="graf-image" /></figure>You can add additional cursors to all occurrences of the current selection with Ctrl+Shift+L. <figure><img src="https://cdn-images-1.medium.com/max/800/0*WcrfwIln6NIG3zNW.gif" class="graf-image" /></figure>*Note: You can also change the modifier to Ctrl/Cmd for applying multiple cursors with the* `editor.multiCursorModifier` <a href="https://code.visualstudio.com/docs/getstarted/settings" class="markup--anchor markup--blockquote-anchor"><em>setting</em></a>* . See* <a href="https://code.visualstudio.com/docs/editor/codebasics#_multicursor-modifier" class="markup--anchor markup--blockquote-anchor"><em>Multi-cursor Modifier</em></a> *for details.* If you do not want to add all occurrences of the current selection, you can use Ctrl+D instead. This only selects the next occurrence after the one you selected so you can add selections one by one. <figure><img src="https://cdn-images-1.medium.com/max/800/0*09EveaKtpZEKFEpO.gif" class="graf-image" /></figure>### Column (box) selection You can select blocks of text by holding Shift+Alt (Shift+Option on macOS) while you drag your mouse. A separate cursor will be added to the end of each selected line. <figure><img src="https://cdn-images-1.medium.com/max/800/0*LrsOBXP4MVqr7aes.gif" class="graf-image" /></figure>You can also use <a href="https://code.visualstudio.com/docs/editor/codebasics#_column-box-selection" class="markup--anchor markup--p-anchor">keyboard shortcuts</a> to trigger column selection. ------------------------------------------------------------------------ ### Extensions: #### <a href="https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-autohotkey-plus" class="markup--anchor markup--h4-anchor">AutoHotkey Plus</a> > *Syntax Highlighting, Snippets, Go to Definition, Signature helper and Code formatter* ### <a href="https://marketplace.visualstudio.com/items?itemName=rogalmic.bash-debug" class="markup--anchor markup--h3-anchor">Bash Debug</a> > *A debugger extension for Bash scripts based on* `bashdb` <figure><img src="https://cdn-images-1.medium.com/max/800/0*8j2gGGs0WHcuFIwY.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=Remisa.shellman" class="markup--anchor markup--h3-anchor">Shellman</a> > *Bash script snippets extension* <figure><img src="https://cdn-images-1.medium.com/max/800/0*wyimtX27gWygAeOb.gif" class="graf-image" /></figure>### C++ > <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools" class="markup--anchor markup--blockquote-anchor">C/C++</a> — Preview C/C++ extension by <a href="https://www.microsoft.com/" class="markup--anchor markup--blockquote-anchor">Microsoft</a>, read <a href="https://blogs.msdn.microsoft.com/vcblog/2016/03/31/cc-extension-for-visual-studio-code/" class="markup--anchor markup--blockquote-anchor">official blog post</a> for the details > <a href="https://marketplace.visualstudio.com/items?itemName=llvm-vs-code-extensions.vscode-clangd" class="markup--anchor markup--blockquote-anchor">Clangd</a> — Provides C/C++ language IDE features for VS Code using clangd: code completion, compile errors and warnings, go-to-definition and cross references, include management, code formatting, simple refactorings. > <a href="https://marketplace.visualstudio.com/items?itemName=austin.code-gnu-global" class="markup--anchor markup--blockquote-anchor">gnu-global-tags</a> — Provide Intellisense for C/C++ with the help of the GNU Global tool. > <a href="https://marketplace.visualstudio.com/items?itemName=RichardHe.you-complete-me" class="markup--anchor markup--blockquote-anchor">YouCompleteMe</a> — Provides semantic completions for C/C++ (and TypeScript, JavaScript, Objective-C, Golang, Rust) using <a href="http://ycm-core.github.io/YouCompleteMe/" class="markup--anchor markup--blockquote-anchor">YouCompleteMe</a>. > <a href="https://github.com/mitaki28/vscode-clang" class="markup--anchor markup--blockquote-anchor">C/C++ Clang Command Adapter</a> — Completion and Diagnostic for C/C++/Objective-C using Clang command. > <a href="https://github.com/cquery-project/vscode-cquery" class="markup--anchor markup--blockquote-anchor">CQuery</a> — <a href="https://github.com/jacobdufault/cquery" class="markup--anchor markup--blockquote-anchor">C/C++ language server</a> supporting multi-million line code base, powered by libclang. Cross references, completion, diagnostics, semantic highlighting and more. #### More - <span id="4dd9"><a href="https://devblogs.microsoft.com/cppblog/vscode-cpp-may-2019-update/" class="markup--anchor markup--li-anchor">Microsoft’s tutorial on using VSCode for remote C/C++ development</a></span> ### C\#, ASP .NET and .NET Core > <a href="https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp" class="markup--anchor markup--blockquote-anchor">C#</a> — C\# extension by <a href="https://www.microsoft.com/" class="markup--anchor markup--blockquote-anchor">Microsoft</a>, read <a href="https://code.visualstudio.com/docs/languages/csharp" class="markup--anchor markup--blockquote-anchor">official documentation</a> for the details > <a href="https://marketplace.visualstudio.com/items?itemName=Leopotam.csharpfixformat" class="markup--anchor markup--blockquote-anchor">C# FixFormat</a> — Fix format of usings / indents / braces / empty lines > <a href="https://marketplace.visualstudio.com/items?itemName=jchannon.csharpextensions" class="markup--anchor markup--blockquote-anchor">C# Extensions</a> — Provides extensions to the IDE that will speed up your development workflow. > <a href="https://marketplace.visualstudio.com/items?itemName=tintoy.msbuild-project-tools" class="markup--anchor markup--blockquote-anchor">MSBuild Project Tools</a> > <a href="https://marketplace.visualstudio.com/items?itemName=fernandoescolar.vscode-solution-explorer" class="markup--anchor markup--blockquote-anchor">VSCode Solution Explorer</a> > <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.dotnet-test-explorer" class="markup--anchor markup--blockquote-anchor">.NET Core Test Explorer</a> <figure><img src="https://cdn-images-1.medium.com/max/800/0*ZG5W4_VVBv89zO_g.gif" class="graf-image" /></figure> ------------------------------------------------------------------------ ### CSS ### <a href="https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek" class="markup--anchor markup--h3-anchor">CSS Peek</a> > *Peek or Jump to a CSS definition directly from HTML, just like in Brackets!* <figure><img src="https://cdn-images-1.medium.com/max/800/0*MN4pNqxDw4FyRk8g.gif" class="graf-image" /></figure>- <span id="7261"><a href="https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint" class="markup--anchor markup--li-anchor">stylelint</a> — Lint CSS/SCSS.</span> - <span id="e8d5"><a href="https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer" class="markup--anchor markup--li-anchor">Autoprefixer</a> Parse CSS,SCSS, LESS and add vendor prefixes automatically.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*edXaUlo7z9TRDQnC.gif" class="graf-image" /></figure>- <span id="b1b1"><a href="https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion" class="markup--anchor markup--li-anchor">Intellisense for CSS class names</a> — Provides CSS class name completion for the HTML class attribute based on the CSS files in your workspace. Also supports React’s className attribute.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*AHJJrCMfkLWLHLH4.gif" class="graf-image" /></figure>### Groovy - <span id="e453"><a href="https://marketplace.visualstudio.com/items?itemName=NicolasVuillamy.vscode-groovy-lint" class="markup--anchor markup--li-anchor">VsCode Groovy Lint</a> — Groovy lint, format, prettify and auto-fix</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*jmi5_-erJj7WOMq7.gif" class="graf-image" /></figure>### Haskell - <span id="66eb"><a href="https://marketplace.visualstudio.com/items?itemName=hoovercj.haskell-linter" class="markup--anchor markup--li-anchor">haskell-linter</a></span> - <span id="fd71"><a href="https://marketplace.visualstudio.com/items?itemName=alanz.vscode-hie-server" class="markup--anchor markup--li-anchor">Haskell IDE engine</a> — provides <a href="https://github.com/haskell/haskell-ide-engine" class="markup--anchor markup--li-anchor">language server</a> for stack and cabal projects.</span> - <span id="cbfe"><a href="https://marketplace.visualstudio.com/items?itemName=truman.autocomplate-shell" class="markup--anchor markup--li-anchor">autocomplate-shell</a></span> ------------------------------------------------------------------------ ### Java - <span id="cf71"><a href="https://marketplace.visualstudio.com/items?itemName=redhat.java" class="markup--anchor markup--li-anchor">Language Support for Java(TM) by Red Hat</a></span> - <span id="d93f"><a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-debug" class="markup--anchor markup--li-anchor">Debugger for Java</a></span> - <span id="3c8c"><a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-maven" class="markup--anchor markup--li-anchor">Maven for Java</a></span> - <span id="2d5c"><a href="https://marketplace.visualstudio.com/items?itemName=GabrielBB.vscode-lombok" class="markup--anchor markup--li-anchor">Lombok</a></span> ------------------------------------------------------------------------ ### JavaScript - <span id="8516"><a href="https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel" class="markup--anchor markup--li-anchor">Babel JavaScript</a></span> - <span id="aa22"><a href="https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode" class="markup--anchor markup--li-anchor">Visual Studio IntelliCode</a> — This extension provides AI-assisted development features including autocomplete and other insights based on understanding your code context.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*i7CZbSbHqsWqEM4w.gif" class="graf-image" /></figure>See the difference between these two <a href="https://github.com/michaelgmcd/vscode-language-babel/issues/1" class="markup--anchor markup--p-anchor">here</a> > <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin" class="markup--anchor markup--blockquote-anchor">tslint</a> — TSLint for Visual Studio Code (with `"tslint.jsEnable": true`). > <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" class="markup--anchor markup--blockquote-anchor">eslint</a> — Linter for <a href="https://eslint.org/" class="markup--anchor markup--blockquote-anchor">eslint</a>. > <a href="https://marketplace.visualstudio.com/items?itemName=samverschueren.linter-xo" class="markup--anchor markup--blockquote-anchor">XO</a> — Linter for <a href="https://github.com/xojs/xo" class="markup--anchor markup--blockquote-anchor">XO</a>. > <a href="https://marketplace.visualstudio.com/items?itemName=samverschueren.ava" class="markup--anchor markup--blockquote-anchor">AVA</a> — Snippets for <a href="https://github.com/avajs/ava" class="markup--anchor markup--blockquote-anchor">AVA</a>. > <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" class="markup--anchor markup--blockquote-anchor">Prettier</a> — Linter, Formatter and Pretty printer for <a href="https://github.com/prettier/prettier-vscode" class="markup--anchor markup--blockquote-anchor">Prettier</a>. > <a href="https://marketplace.visualstudio.com/items?itemName=austinleegordon.vscode-schema-dot-org" class="markup--anchor markup--blockquote-anchor">Schema.org Snippets</a> — Snippets for <a href="https://schema.org/" class="markup--anchor markup--blockquote-anchor">Schema.org</a>. > <a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" class="markup--anchor markup--blockquote-anchor">Code Spell Checker</a> — Spelling Checker for Visual Studio Code. Framework-specific: #### <a href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" class="markup--anchor markup--h4-anchor">Vetur</a> — Toolkit for Vue.js <figure><img src="https://cdn-images-1.medium.com/max/800/0*F7J_vW0ISbVMTXIZ.png" class="graf-image" /></figure> ------------------------------------------------------------------------ ### <a href="https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome" class="markup--anchor markup--h3-anchor">Debugger for Chrome</a> > *A VS Code extension to debug your JavaScript code in the Chrome browser, or other targets that support the Chrome Debugging Protocol.* ### Facebook Flow - <span id="155f"><a href="https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode" class="markup--anchor markup--li-anchor">Flow Language Support</a> — provides all the functionality you would expect — linting, intellisense, type tooltips and click-to-definition</span> - <span id="ac2f"><a href="https://marketplace.visualstudio.com/items?itemName=gcazaciuc.vscode-flow-ide" class="markup--anchor markup--li-anchor">vscode-flow-ide</a> — an alternative Flowtype extension for Visual Studio Code</span> ### TypeScript - <span id="8883"><a href="https://marketplace.visualstudio.com/items?itemName=eg2.tslint" class="markup--anchor markup--li-anchor">tslint</a> — TSLint for Visual Studio Code</span> - <span id="9665"><a href="https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero" class="markup--anchor markup--li-anchor">TypeScript Hero</a> — Code outline view of your open TS, sort and organize your imports.</span> ------------------------------------------------------------------------ ### Markdown ### <a href="https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint" class="markup--anchor markup--h3-anchor">markdownlint</a> > *Linter for* <a href="https://github.com/DavidAnson/markdownlint" class="markup--anchor markup--blockquote-anchor"><em>markdownlint</em></a>*.* ### <a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" class="markup--anchor markup--h3-anchor">Markdown All in One</a> > *All-in-one markdown plugin (keyboard shortcuts, table of contents, auto preview, list editing and more)* <figure><img src="https://cdn-images-1.medium.com/max/800/0*8oVrYuZ9kLRNSuBs.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=bierner.markdown-emoji" class="markup--anchor markup--h3-anchor">Markdown Emoji</a> > *Adds emoji syntax support to VS Code’s built-in Markdown preview* <figure><img src="https://cdn-images-1.medium.com/max/800/0*rckUMIIZ9Jh7UE5q.png" class="graf-image" /></figure> ------------------------------------------------------------------------ ### PHP ### IntelliSense These extensions provide slightly different sets of features. While the first one offers better autocompletion support, the second one seems to have more features overall. - <span id="94df"><a href="https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client" class="markup--anchor markup--li-anchor">PHP Intelephense</a></span> - <span id="b2b4"><a href="https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense" class="markup--anchor markup--li-anchor">PHP IntelliSense</a></span> ### Laravel - <span id="687e"><a href="https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel5-snippets" class="markup--anchor markup--li-anchor">Laravel 5 Snippets</a> — Laravel 5 snippets for Visual Studio Code</span> - <span id="42ab"><a href="https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade" class="markup--anchor markup--li-anchor">Laravel Blade Snippets</a> — Laravel blade snippets and syntax highlight support</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*f4hMFe1l7NpJTG8v.gif" class="graf-image" /></figure>- <span id="bf66"><a href="https://marketplace.visualstudio.com/items?itemName=ahinkle.laravel-model-snippets" class="markup--anchor markup--li-anchor">Laravel Model Snippets</a> — Quickly get models up and running with Laravel Model Snippets.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*1xydH2CgYGDSMZtB.gif" class="graf-image" /></figure>- <span id="fa58"><a href="https://marketplace.visualstudio.com/items?itemName=ryannaddy.laravel-artisan" class="markup--anchor markup--li-anchor">Laravel Artisan</a> — Laravel Artisan commands within Visual Studio Code</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*rzK952c4UgikNNPR.gif" class="graf-image" /></figure>- <span id="1e4d"><a href="https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv" class="markup--anchor markup--li-anchor">DotENV</a> — Support for dotenv file syntax</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*fSAaqpXfBx1Sgztf.png" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Other extensions - <span id="8443"><a href="https://marketplace.visualstudio.com/items?itemName=rifi2k.format-html-in-php" class="markup--anchor markup--li-anchor">Format HTML in PHP</a> — Formatting for the HTML in PHP files. Runs before the save action so you can still have a PHP formatter.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*6gF0K20iKes7I9ZF.gif" class="graf-image" /></figure>- <span id="f3f0"><a href="https://marketplace.visualstudio.com/items?itemName=ikappas.composer" class="markup--anchor markup--li-anchor">Composer</a></span> - <span id="e5ba"><a href="https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug" class="markup--anchor markup--li-anchor">PHP Debug</a> — XDebug extension for Visual Studio Code</span> - <span id="6a3c"><a href="https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker" class="markup--anchor markup--li-anchor">PHP DocBlocker</a></span> - <span id="a4ca"><a href="https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer" class="markup--anchor markup--li-anchor">php cs fixer</a> — PHP CS Fixer extension for VS Code, php formatter, php code beautify tool</span> - <span id="30f1"><a href="https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs" class="markup--anchor markup--li-anchor">phpcs</a> — PHP CodeSniffer for Visual Studio Code</span> - <span id="d82e"><a href="https://marketplace.visualstudio.com/items?itemName=kokororin.vscode-phpfmt" class="markup--anchor markup--li-anchor">phpfmt</a> — phpfmt for Visual Studio Code</span> ------------------------------------------------------------------------ ### Python - <span id="0136"><a href="https://marketplace.visualstudio.com/items?itemName=ms-python.python" class="markup--anchor markup--li-anchor">Python</a> — Linting, Debugging (multi threaded, web apps), Intellisense, auto-completion, code formatting, snippets, unit testing, and more.</span> ### TensorFlow - <span id="402b"><a href="https://marketplace.visualstudio.com/items?itemName=vahidk.tensorflow-snippets" class="markup--anchor markup--li-anchor">TensorFlow Snippets</a> — This extension includes a set of useful code snippets for developing TensorFlow models in Visual Studio Code.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*stmhgQ3sGvJBTvf2.gif" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Rust - <span id="cec4"><a href="https://marketplace.visualstudio.com/items?itemName=rust-lang.rust" class="markup--anchor markup--li-anchor">Rust</a> — Linting, auto-completion, code formatting, snippets and more</span> ------------------------------------------------------------------------ ### Productivity ### <a href="https://marketplace.visualstudio.com/items?itemName=bencoleman.armview" class="markup--anchor markup--h3-anchor">ARM Template Viewer</a> > *Displays a graphical preview of Azure Resource Manager (ARM) templates. The view will show all resources with the official Azure icons and also linkage between the resources.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*p8bvCI9DXF44m4z3.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-cosmosdb" class="markup--anchor markup--h3-anchor">Azure Cosmos DB</a> > *Browse your database inside the vs code editor* <figure><img src="https://cdn-images-1.medium.com/max/800/0*VWvSU6Hbf20Kfc_P.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=vsciot-vscode.azure-iot-toolkit" class="markup--anchor markup--h3-anchor">Azure IoT Toolkit</a> > *Everything you need for the Azure IoT development: Interact with Azure IoT Hub, manage devices connected to Azure IoT Hub, and develop with code snippets for Azure IoT Hub* <figure><img src="https://cdn-images-1.medium.com/max/800/0*AobtCd80fICrbQPI.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks" class="markup--anchor markup--h3-anchor">Bookmarks</a> > *Mark lines and jump to them* ### <a href="https://marketplace.visualstudio.com/items?itemName=orepor.color-tabs-vscode-ext" class="markup--anchor markup--h3-anchor">Color Tabs</a> > *An extension for big projects or monorepos that colors your tab/titlebar based on the current package* <figure><img src="https://cdn-images-1.medium.com/max/800/0*SEp-hgfDLlubNRyc.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=hardikmodha.create-tests" class="markup--anchor markup--h3-anchor">Create tests</a> > *An extension to quickly generate test files.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*DLZLYmrBiui0YOBt.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=mkloubert.vs-deploy" class="markup--anchor markup--h3-anchor">Deploy</a> > *Commands for upload or copy files of a workspace to a destination.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*lLasjzlmWnBwdbAT.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate" class="markup--anchor markup--h3-anchor">Duplicate Action</a> > *Ability to duplicate files and directories.* ### <a href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens" class="markup--anchor markup--h3-anchor">Error Lens</a> > *Show language diagnostics inline (errors/warnings/…).* <figure><img src="https://cdn-images-1.medium.com/max/800/0*1tJJkV0p2Ka_W06r.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets" class="markup--anchor markup--h3-anchor">ES7 React/Redux/GraphQL/React-Native snippets</a> > *Provides Javascript and React/Redux snippets in ES7* <figure><img src="https://cdn-images-1.medium.com/max/800/0*W3N0kbgEumWYa-m4.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=rubbersheep.gi" class="markup--anchor markup--h3-anchor">Gi</a> > *Generating .gitignore files made easy* <figure><img src="https://cdn-images-1.medium.com/max/800/0*sfddghz8B1D362UB.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs" class="markup--anchor markup--h3-anchor">GistPad</a> > *Allows you to manage GitHub Gists entirely within the editor. You can open, create, delete, fork, star and clone gists, and then seamlessly begin editing files as if they were local. It’s like your very own developer library for building and referencing code snippets, commonly used config/scripts, programming-related notes/documentation, and interactive samples.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*1MiBQ0u4Z8TPNaG9.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory" class="markup--anchor markup--h3-anchor">Git History</a> > *View git log, file or line History* ### <a href="https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager" class="markup--anchor markup--h3-anchor">Git Project Manager</a> > *Automatically indexes your git projects and lets you easily toggle between them* ### <a href="https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink" class="markup--anchor markup--h3-anchor">GitLink</a> > *GoTo current file’s online link in browser and Copy the link in clipboard.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*Acgfn2rmhinuIPjk.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" class="markup--anchor markup--h3-anchor">GitLens</a> > *Provides Git CodeLens information (most recent commit, \# of authors), on-demand inline blame annotations, status bar blame information, file and blame history explorers, and commands to compare changes with the working tree or previous versions.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*MZu4GV7SOCW88UQQ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=lamartire.git-indicators" class="markup--anchor markup--h3-anchor">Git Indicators</a> > *Atom-like git indicators on active panel* <figure><img src="https://cdn-images-1.medium.com/max/800/0*vitZrD9ZU0_eWckU.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*0BHxQOLMx09FFuWZ.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*x8F97F4AdSvvtehT.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-github" class="markup--anchor markup--h3-anchor">GitHub</a> > *Provides GitHub workflow support. For example browse project, issues, file (the current line), create and manage pull request. Support for other providers (e.g. gitlab or bitbucket) is planned. Have a look at the* <a href="https://github.com/KnisterPeter/vscode-github/blob/master/README.md" class="markup--anchor markup--blockquote-anchor"><em>README.md</em></a> *on how to get started with the setup for this extension.* ### <a href="https://marketplace.visualstudio.com/items?itemName=erichbehrens.pull-request-monitor" class="markup--anchor markup--h3-anchor">GitHub Pull Request Monitor</a> > *This extension uses the GitHub api to monitor the state of your pull requests and let you know when it’s time to merge or if someone requested changes.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*TOq5OERkgQNETGPK.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=gitlab.gitlab-workflow" class="markup--anchor markup--h3-anchor">GitLab Workflow</a> > *Adds a GitLab sidebar icon to view issues, merge requests and other GitLab resources. You can also view the results of your GitLab CI/CD pipeline and check the syntax of your *`.gitlab-ci.yml`*.* #### <a href="https://marketplace.visualstudio.com/items?itemName=richardwillis.vscode-gradle" class="markup--anchor markup--h4-anchor">Gradle Tasks</a> > *Run gradle tasks in VS Code.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*Vx-3DIT22BJpEnJr.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts" class="markup--anchor markup--h3-anchor">Icon Fonts</a> > *Snippets for popular icon fonts such as Font Awesome, Ionicons, Glyphicons, Octicons, Material Design Icons and many more!* ### <a href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost" class="markup--anchor markup--h3-anchor">Import Cost</a> > *This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.* ### <a href="https://marketplace.visualstudio.com/items?itemName=Atlassian.atlascode" class="markup--anchor markup--h3-anchor">Jira and Bitbucket</a> > *Bringing the power of Jira and Bitbucket to VS Code — With Atlassian for VS Code you can create and view issues, start work on issues, create pull requests, do code reviews, start builds, get build statuses and more!* <figure><img src="https://cdn-images-1.medium.com/max/800/0*T6iuH2VnPYj93YqW.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=lannonbr.vscode-js-annotations" class="markup--anchor markup--h3-anchor">JS Parameter Annotations</a> > *Provides annotations on function calls in JS/TS files to provide parameter names to arguments.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*zHffPsYWln4dxhus.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy" class="markup--anchor markup--h3-anchor">Jumpy</a> > *Provides fast cursor movement, inspired by Atom’s package of the same name.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*uPOceUJ4eMjCP_Qt.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=mkloubert.vscode-kanban" class="markup--anchor markup--h3-anchor">Kanban</a> <figure><img src="https://cdn-images-1.medium.com/max/800/0*SzUG3UU1fl5ub7bA.gif" class="graf-image" /></figure>*Simple Kanban board for use in Visual Studio Code, with time tracking and Markdown support.* ### <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" class="markup--anchor markup--h3-anchor">Live Server</a> > *Launch a development local Server with live reload feature for static & dynamic pages.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*Oj5zPrWwMbCBViBi.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=slevesque.vscode-multiclip" class="markup--anchor markup--h3-anchor">Multiple clipboards</a> > *Override the regular Copy and Cut commands to keep selections in a clipboard ring* ### <a href="https://marketplace.visualstudio.com/items?itemName=philnash.ngrok-for-vscode" class="markup--anchor markup--h3-anchor">ngrok for VSCode</a> > *ngrok allows you to expose a web server running on your local machine to the internet. Just tell ngrok what port your web server is listening on. This extension allows you to control* <a href="https://ngrok.com/" class="markup--anchor markup--blockquote-anchor"><em>ngrok</em></a> *from the VSCode command palette* <figure><img src="https://cdn-images-1.medium.com/max/800/0*IX15MuJrEVBcTd0F.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=dbankier.vscode-instant-markdown" class="markup--anchor markup--h3-anchor">Instant Markdown</a> > *Simply, edit markdown documents in vscode and instantly preview it in your browser as you type.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*jBw9vP9cAtvv2IcV.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense" class="markup--anchor markup--h3-anchor">npm Intellisense</a> > *Visual Studio Code plugin that autocompletes npm modules in import statements.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*iVJamJugt_b7-VsV.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=DominicVonk.parameter-hints" class="markup--anchor markup--h3-anchor">Parameter Hints</a> > *Provides parameter hints on function calls in JS/TS/PHP files.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*BSj8-Qt7xtVTsl1Z.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff" class="markup--anchor markup--h3-anchor">Partial Diff</a> > *Compare (diff) text selections within a file, across different files, or to the clipboard* <figure><img src="https://cdn-images-1.medium.com/max/800/0*KHki85jdv1hZeY3V.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype" class="markup--anchor markup--h3-anchor">Paste JSON as Code</a> > *Infer the structure of JSON and paste is as types in many programming languages* <figure><img src="https://cdn-images-1.medium.com/max/800/0*K2GCRMGsYjpsK8OX.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" class="markup--anchor markup--h3-anchor">Path IntelliSense</a> > *Visual Studio Code plugin that autocompletes filenames* <figure><img src="https://cdn-images-1.medium.com/max/800/0*xwxU_1ffZvZ6DeoO.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ego-digital.vscode-powertools" class="markup--anchor markup--h3-anchor">Power Tools</a> > *Extends Visual Studio Code via things like Node.js based scripts or shell commands, without writing separate extensions* <figure><img src="https://cdn-images-1.medium.com/max/800/0*Cb7J6-PYsXsnjqSN.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=nobuhito.printcode" class="markup--anchor markup--h3-anchor">PrintCode</a> > *PrintCode converts the code being edited into an HTML file, displays it by browser and prints it.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*2spvNSEEHM-ETd_F.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager" class="markup--anchor markup--h3-anchor">Project Manager</a> > *Easily switch between projects.* ### <a href="https://marketplace.visualstudio.com/items?itemName=kruemelkatze.vscode-dashboard" class="markup--anchor markup--h3-anchor">Project Dashboard</a> > *VSCode Project Dashboard is a Visual Studio Code extension that lets you organize your projects in a speed-dial like manner. Pin your frequently visited folders, files, and SSH remotes onto a dashboard to access them quickly.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*PxOoARROhi1rf63R.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv" class="markup--anchor markup--h3-anchor">Rainbow CSV</a> > *Highlight columns in comma, tab, semicolon and pipe separated files, consistency check and linting with CSVLint, multi-cursor column editing, column trimming and realignment, and SQL-style querying with RBQL.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*XAb9jlOfGWlEaCEM.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack" class="markup--anchor markup--h3-anchor">Remote Development</a> > *Allows users to open any folder in a container, on a remote machine, container or in Windows Subsystem for Linux(WSL) and take advantage of VS Code’s full feature set.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*b6XEPh9PJzeWDB_z.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=rafaelmaiolla.remote-vscode" class="markup--anchor markup--h3-anchor">Remote VSCode</a> > *Allow user to edit files from Remote server in Visual Studio Code directly.* ### <a href="https://marketplace.visualstudio.com/items?itemName=humao.rest-client" class="markup--anchor markup--h3-anchor">REST Client</a> > *Allows you to send HTTP request and view the response in Visual Studio Code directly.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*zGne78bniDbTXzyf.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync" class="markup--anchor markup--h3-anchor">Settings Sync</a> > *Synchronize settings, snippets, themes, file icons, launch, key bindings, workspaces and extensions across multiple machines using GitHub Gist* <figure><img src="https://cdn-images-1.medium.com/max/800/0*ilH91MRgGnMF6C8c.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=qcz.text-power-tools" class="markup--anchor markup--h3-anchor">Text Power Tools</a> > *All-in-one extension for text manipulation: filtering (grep), remove lines, insert number sequences and GUIDs, format content as table, change case, converting numbers and more. Great for finding information in logs and manipulating text.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*Pfp4noD5OeQRbmsZ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree" class="markup--anchor markup--h3-anchor">Todo Tree</a> > *Custom keywords, highlighting, and colors for TODO comments. As well as a sidebar to view all your current tags.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*6utz502-rPCa0Xcg.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes" class="markup--anchor markup--h3-anchor">Toggle Quotes</a> > *Cycle between single, double and backtick quotes* <figure><img src="https://cdn-images-1.medium.com/max/800/0*7kZFpggvGAVkvoYa" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=tusaeff.vscode-typescript-destructure-plugin" class="markup--anchor markup--h3-anchor">Typescript Destructure</a> > *TypeScript Language Service Plugin providing a set of source actions for easy objects destructuring* <figure><img src="https://cdn-images-1.medium.com/max/800/0*sEi0imXK2Yx69m7H.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime" class="markup--anchor markup--h3-anchor">WakaTime</a> > *Automatic time tracker and productivity dashboard showing how long you coded in each project, file, branch, and language.* ------------------------------------------------------------------------ ### Formatting & Beautification ### <a href="https://marketplace.visualstudio.com/items?itemName=wwm.better-align" class="markup--anchor markup--h3-anchor">Better Align</a> > *Align your code by colon(:), assignment(=,+=,-=,\*=,/=) and arrow(=>). It has additional support for comma-first coding style and trailing comment.* > *And it doesn’t require you to select what to be aligned, the extension will figure it out by itself.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*5maDjvvH57MAks1l.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" class="markup--anchor markup--h3-anchor">Auto Close Tag</a> > *Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text* <figure><img src="https://cdn-images-1.medium.com/max/800/0*h6Q6HLQ8jfHLnPlJ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag" class="markup--anchor markup--h3-anchor">Auto Rename Tag</a> > *Auto rename paired HTML/XML tags* <figure><img src="https://cdn-images-1.medium.com/max/800/0*uRKX2-umhSQzlESv.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify" class="markup--anchor markup--h3-anchor">beautify</a> > *Beautify code in place for VS Code* ### <a href="https://marketplace.visualstudio.com/items?itemName=dbalas.vscode-html2pug" class="markup--anchor markup--h3-anchor">html2pug</a> > *Transform html to pug inside your Visual Studio Code, forget about using an external page anymore.* ### <a href="https://marketplace.visualstudio.com/items?itemName=vilicvane.es-quotes" class="markup--anchor markup--h3-anchor">ECMAScript Quotes Transformer</a> > *Transform quotes of ECMAScript string literals* <figure><img src="https://cdn-images-1.medium.com/max/800/0*W1Z1fIvOGgPclFMJ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=Rubymaniac.vscode-paste-and-indent" class="markup--anchor markup--h3-anchor">Paste and Indent</a> > *Paste code with “correct” indentation* ### <a href="https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines" class="markup--anchor markup--h3-anchor">Sort Lines</a> > *Sorts lines of text in specific order* <figure><img src="https://cdn-images-1.medium.com/max/800/0*a4wPhA7VjJqkp3lu.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround" class="markup--anchor markup--h3-anchor">Surround</a> > *A simple yet powerful extension to add wrapper templates around your code blocks.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*lyjRgfSrvdmhGFXd.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=konstantin.wrapSelection" class="markup--anchor markup--h3-anchor">Wrap Selection</a> > *Wraps selection or multiple selections with symbol or multiple symbols* ### <a href="https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle" class="markup--anchor markup--h3-anchor">Formatting Toggle</a> > *Allows you to toggle your formatter on and off with a simple click* ### <a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer" class="markup--anchor markup--h3-anchor">Bracket Pair Colorizer</a> > *This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*m3nU-5UxgUxX4-eJ.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=steoates.autoimport" class="markup--anchor markup--h3-anchor">Auto Import</a> > *Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.* ### <a href="https://github.com/foxundermoon/vs-shell-format" class="markup--anchor markup--h3-anchor">shell-format</a> > *shell script & Dockerfile & dotenv format* <figure><img src="https://cdn-images-1.medium.com/max/800/0*TThlkfK1KgQm5AKU.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=funkyremi.vscode-google-translate" class="markup--anchor markup--h3-anchor">Vscode Google Translate</a> > *Quickly translate selected text right in your code* <figure><img src="https://cdn-images-1.medium.com/max/800/0*JF8NuxAFDxXiTn_u.gif" class="graf-image" /></figure>### Explorer Icons ### <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme" class="markup--anchor markup--h3-anchor">Material Icon Theme</a> <figure><img src="https://cdn-images-1.medium.com/max/800/0*67ZZ9mhoISPk_lM4.png" class="graf-image" /></figure>### Uncategorized ### <a href="https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview" class="markup--anchor markup--h3-anchor">Browser Preview</a> > *Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug. Browser Preview is powered by Chrome Headless, and works by starting a headless Chrome instance in a new process. This enables a secure way to render web content inside VS Code, and enables interesting features such as in-editor debugging and more!* > ***FYI:… I HAVE TRIED ENDLESSLEY TO GET THE DEBUGGER TO WORK IN VSCODE BUT IT DOES NOT… I SUSPECT THAT’S WHY IT HAS A 3 STAR RATING FOR AN OTHERWISE PHENOMINAL EXTENSION.*** <figure><img src="https://cdn-images-1.medium.com/max/800/0*Oilwsi7EKGpCZb46.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=CodeRoad.coderoad" class="markup--anchor markup--h3-anchor">CodeRoad</a> > *Play interactive tutorials in your favorite editor.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*iV8P93QMmWdYfnrQ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner" class="markup--anchor markup--h3-anchor">Code Runner</a> > *Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F\# Script, C\# Script, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script* <figure><img src="https://cdn-images-1.medium.com/max/800/0*hMsM_IEyBklQXchd.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode" class="markup--anchor markup--h3-anchor">Code Time</a> > *Automatic time reports by project and other programming metrics right in VS Code.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*Uo1BYexJenprpgLa" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight" class="markup--anchor markup--h3-anchor">Color Highlight</a> > *Highlight web colors in your editor* <figure><img src="https://cdn-images-1.medium.com/max/800/1*ZwE7OHKR5opvDCJJOw9KeQ.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer" class="markup--anchor markup--h3-anchor">Output Colorizer</a> > *Syntax highlighting for the VS Code Output Panel and log files* <figure><img src="https://cdn-images-1.medium.com/max/800/0*9DpzVZ9cUNp2TMyD.jpg" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash" class="markup--anchor markup--h3-anchor">Dash</a> > *Dash integration in Visual Studio Code* <figure><img src="https://cdn-images-1.medium.com/max/800/1*sqGllC-pgXNaEBfB-cxG9Q.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ryu1kn.edit-with-shell" class="markup--anchor markup--h3-anchor">Edit with Shell Command</a> > *Leverage your favourite shell commands to edit text* <figure><img src="https://cdn-images-1.medium.com/max/800/0*2wW31HJ1nUCjORZe.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig" class="markup--anchor markup--h3-anchor">Editor Config for VS Code</a> > *Editor Config for VS Code* ### <a href="https://marketplace.visualstudio.com/items?itemName=lukasz-wronski.ftp-sync" class="markup--anchor markup--h3-anchor">ftp-sync</a> > *Auto-sync your work to remote FTP server* <figure><img src="https://cdn-images-1.medium.com/max/800/0*-viKhwxpeYQdWHRE.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag" class="markup--anchor markup--h3-anchor">Highlight JSX/HTML tags</a> > *Highlights matching tags in the file.* ### <a href="https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow" class="markup--anchor markup--h3-anchor">Indent Rainbow</a> > *A simple extension to make indentation more readable.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*GK_yEd-50SU3yc_y.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=ftonato.password-generator" class="markup--anchor markup--h3-anchor">Password Generator</a> > *Create a secure password using our generator tool. Help prevent a security threat by getting a strong password today.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*qPJAZk9-NcYgsx7H.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.platformio" class="markup--anchor markup--h3-anchor">PlatformIO</a> > *An open source ecosystem for IoT development: supports 350+ embedded boards, 20+ development platforms, 10+ frameworks. Arduino and ARM mbed compatible.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*RywVt_vikqB-5urO.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=pnp.polacode" class="markup--anchor markup--h3-anchor">Polacode</a> > *Polaroid for your code 📸.* > ***Note: Polacode no longer works as of the most recent update… go for Polacode2020 or CodeSnap…*** <figure><img src="https://cdn-images-1.medium.com/max/800/0*Io4fPojDRrDf5CmW.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode" class="markup--anchor markup--h3-anchor">Quokka</a> #### This one is super cool! > *Rapid prototyping playground for JavaScript and TypeScript in VS Code, with access to your project’s files, inline reporting, code coverage and rich output formatting.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*Q9kp8EWZHTD0Hfru.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=sozercan.slack" class="markup--anchor markup--h3-anchor">Slack</a> > *Send messages and code snippets, upload files to Slack* Personally I found this extension to slow down my editor in addition to confliction with other extensions: (I have over 200 as of this writing)….. **yes I have been made fully aware that I have a problem and need to get help** <figure><img src="https://cdn-images-1.medium.com/max/800/0*9-xxjXzdPCh_46kZ.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=shyykoserhiy.vscode-spotify" class="markup--anchor markup--h3-anchor">Spotify</a> *No real advantage over just using Spotify normally… it’s problematic enough in implementation that you won’t save any time using it. Further, it’s a bit tricky to configure … or at least it was the last time I tried syncing it with my spotify account.* > *Provides integration with Spotify Desktop client. Shows the currently playing song in status bar, search lyrics and provides commands for controlling Spotify with buttons and hotkeys.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*IqsxXiGpZQWbQbfD.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=jock.svg" class="markup--anchor markup--h3-anchor">SVG</a> > *A Powerful SVG Language Support Extension(beta). Almost all the features you need to handle SVG.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*SC6zCXGaBnM_LkgC.png" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer" class="markup--anchor markup--h3-anchor">SVG Viewer</a> > *View an SVG in the editor and export it as data URI scheme or PNG.* ### <a href="https://marketplace.visualstudio.com/items?itemName=ryu1kn.text-marker" class="markup--anchor markup--h3-anchor">Text Marker (Highlighter)</a> > *Highlight multiple text patterns with different colors at the same time. Highlighting a single text pattern can be done with the editor’s search functionality, but it cannot highlight multiple patterns at the same time, and this is where this extension comes handy.* <figure><img src="https://cdn-images-1.medium.com/max/800/0*YDreVyGNjZmqj_KC.gif" class="graf-image" /></figure>### <a href="https://marketplace.visualstudio.com/items?itemName=samundrak.esdoc-mdn" class="markup--anchor markup--h3-anchor">ESDOC MDN</a> ### THIS IS A MUST HAVE > *Quickly bring up helpful MDN documentation in the editor* <figure><img src="https://cdn-images-1.medium.com/max/800/0*xiUfWBsz8x8beY70.gif" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*mMBU6d1iCkt5VHq2.gif" class="graf-image" /></figure>### Themes: In the interest of not making the reader scroll endlessly as I often do… I’ve made a separate post for that here. If you’ve made it this far, I thank you! <a href="https://bryanguner.medium.com/my-favorite-vscode-themes-9bab65af3f0f" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/my-favorite-vscode-themes-9bab65af3f0f"><strong>My Favorite VSCode <em>Themes</em></strong><br /> Themesbryanguner.medium.com</a><a href="https://bryanguner.medium.com/my-favorite-vscode-themes-9bab65af3f0f" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ------------------------------------------------------------------------ ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Discover More: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 18, 2021](https://medium.com/p/b9f4c8d91931). <a href="https://medium.com/@bryanguner/everything-you-need-to-get-started-with-vscode-extensions-resources-b9f4c8d91931" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,196 @@ HTTP Basics =========== “If you want to build a ship, don’t drum up the men and women to gather wood, divide the work, and give orders. Instead, teach them to… ------------------------------------------------------------------------ ### HTTP Basics > *“If you want to build a ship, don’t drum up the men and women to gather wood, divide the work, and give orders. Instead, teach them to yearn for the vast and endless sea.” — Antoine de Saint-Exupery;* <figure><img src="https://cdn-images-1.medium.com/max/800/0*LUQe60D2FeVzDEi8.png" class="graf-image" /></figure>- <span id="cb9d">`HTTP` : Hypertext Transfer Protocol.</span> - <span id="8248">`HT` : Hypertext - content with references to other content.</span> - <span id="1ad1">Term used to refer to content in computing.</span> - <span id="5ad0">What makes the Web a “web”.</span> - <span id="11eb">Most fundamental part of how we interact.</span> - <span id="41da">`Hyperlinks` : Links; references between HT resources.</span> - <span id="b0a1">`TP` : Transfer Protocol - set of guidelines surrounding the transmission of data.</span> - <span id="e43c">Defines the expectations for both ends of the transer.</span> - <span id="ca8a">Defines some ways the transfer might fail.</span> - <span id="3995">HTTP is a `request/response` protocol.</span> - <span id="dc85">HTTP works between `clients` & `servers`.</span> - <span id="a965">`Clients` : User Agent - the data consumer.</span> - <span id="2588">`Servers` : Origin - Data provider & where the application is running.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*OBVdK39aaS5sjV9B.png" class="graf-image" /></figure>### <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview#components_of_http-based_systems" class="markup--anchor markup--h3-anchor" title="Permalink to Components of HTTP-based systems">Components of HTTP-based systems</a> HTTP is a client-server protocol: requests are sent by one entity, the user-agent (or a proxy on behalf of it). Most of the time the user-agent is a Web browser, but it can be anything, for example a robot that crawls the Web to populate and maintain a search engine index. Each individual request is sent to a server, which handles it and provides an answer, called the *response*. Between the client and the server there are numerous entities, collectively called <a href="https://developer.mozilla.org/en-US/docs/Glossary/Proxy_server" class="markup--anchor markup--p-anchor">proxies</a>, which perform different operations and act as gateways or <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cache" class="markup--anchor markup--p-anchor">caches</a>, for example. <figure><img src="https://cdn-images-1.medium.com/max/800/0*WR6l6JwNOvkfrljt.png" class="graf-image" /></figure>**Properties of HTTP** - <span id="bc5b">`Reliable Connections` : Messages passed between a client & server sacrifice a little speed for the sake of trust.</span> - <span id="aec2">`TCP` is HTTP’s preferred connection type.</span> - <span id="9880">`Stateless Transfer` : HTTP is a stateless protocol - meaning it does not store any kind of information.</span> - <span id="b204">HTTP supports cookies.</span> - <span id="5e72">`Intermediaries` : Servers or devices that pass your request along which come in three types:</span> 1. <span id="fb4d">`Proxies` : Modify your request so it appears to come from a different source.</span> 2. <span id="bd02">`Gateways` : Pretend to be the resource server you requested.</span> 3. <span id="06a0">`Tunnels` : Simply passes your request along.</span> ------------------------------------------------------------------------ ### HTTP Requests **Structure of an HTTP Request** GET / HTTP/1.1 Host: appacademy.io Connection: keep-alive Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3 Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.9 ### Example of a request: <figure><img src="https://cdn-images-1.medium.com/max/1200/1*tq-BRYuzZ_Dx8s1g5xJKKQ.png" class="graf-image" /></figure> - <span id="bfa1">**Request-line & HTTP verbs**</span> - <span id="0e3d">The first line of an HTTP Request made up of three parts:</span> 1. <span id="e67b">The `Method` : Indicated by an HTTP Verb.</span> 2. <span id="f17e">The `URI` : Uniform Resource Indicator that ID’s our request.</span> 3. <span id="cf4a">THe `HTTP` **Version** : Version we expect to use.</span> - <span id="6fd5">HTTP Verbs are a simply way of declaring our intention to the server.</span> - <span id="5435">`GET` : Used for direct requests.</span> - <span id="9059">`POST`: Used for creating new resources on the server.</span> - <span id="456b">`PUT`: Used to updated a resource on the server.</span> - <span id="5c1a">`PATCH` : Similar to PUT, but do not require the whole resource to perform the update.</span> - <span id="3940">`DELETE` : Used to destroy resources on the server.</span> **Headers** - <span id="682b">Key-Value pairs that come after the request line — they appear on sep. lines and define metadata needed to process the request.</span> - <span id="5e4d">Some common headers:</span> - <span id="2971">`Host` : Root path for our URI.</span> - <span id="21e1">`User-Agent` : Displays information about which browser the request originated from.</span> - <span id="2555">`Referer` : Defines the URL you’re coming from.</span> - <span id="e946">`Accept` : Indicates what the client will receive.</span> - <span id="2011">`Content`**-** : Define Details about the body of the request.</span> **Body** - <span id="8af8">For when we need to send data that doesn’t fit into the header & is too complex for the URI we can use the *body*.</span> - <span id="9271">`URL encoding` : Most common way form data is formatted.</span> - <span id="852a">`name=claire&age=29&iceCream=vanilla`</span> - <span id="cb18">We can also format using JSON or XML.</span> **Sending an HTTP request from the command line** - <span id="7586">**netcat** : (nc) A Utility that comes as part of Unix-line environments such as Ubuntu and macOS.</span> - <span id="4288">Allows us to open a direct connection with a URL and manually send HTTP requests.</span> - <span id="07dd">`nc -v appacademy.io 80`</span> - <span id="b93e">`man nc` to open the netcat manual.</span> ------------------------------------------------------------------------ ### HTTP Responses **Structure of a Response** HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: close X-Frame-Options: SAMEORIGIN X-Xss-Protection: 1; mode=block X-Content-Type-Options: nosniff Cache-Control: max-age=0, private, must-revalidate Set-Cookie: _rails-class-site_session=BAh7CEkiD3Nlc3Npb25faWQGOgZFVEkiJTM5NWM5YTVlNTEyZDFmNTNlN; path=/; secure; HttpOnly X-Request-Id: cf5f30dd-99d0-46d7-86d7-6fe57753b20d X-Runtime: 0.006894 Strict-Transport-Security: max-age=31536000 Vary: Origin Via: 1.1 vegur Expect-CT: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct" Server: cloudflare CF-RAY: 51d641d1ca7d2d45-TXL <!DOCTYPE html> <html> ... ... </html> **Status** - <span id="f3f8">First line of an HTTP response — gives us a high level overview of the server’s intentions. (`status line`)</span> - <span id="5353">`HTTP/1.1 200 OK`</span> - <span id="5882">`HTTP status codes` : numeric way of representing a server’s response.</span> - <span id="78bc">Follow the structure: x: xxx — xxx;</span> ### `Status codes 100 - 199: Informational` - <span id="61b2">Allow the clinet to know that a req. was received, and provides extra info from the server.</span> ### `Status codes 200 - 299: Successful` - <span id="da7c">Indicate that the request has succeeded and the server is handling it.</span> - <span id="c109">Common Examples: 200 OK (req received and fulfilled) & 201 Created (received and new record was created)</span> ### `Status codes 300 - 399: Redirection` - <span id="003b">Let the client know if there has been a change.</span> - <span id="0ca4">Common Examples: 301 Moved Permanently (resource you requested is in a totally new location) & 302 Found (indicates a temporary move)</span> ### `Status codes 400 - 499: Client Error` - <span id="1f8a">Indicate problem with client’s request.</span> - <span id="d68d">Common Examples: 400 Bad Request (received, but could not understand) & 401 Unauthorized (resource exists but you’re not allowed to see w/o authentication) & 403 Forbidden (resource exists but you’re not allowed to see it at all ) & 404 Not Found (resource requested does not exist);</span> ### `Status codes 500 - 599: Server Error` - <span id="93fc">Indicates request was formatted correctly, but the server couldn’t do what you asked due to an internal problem.</span> - <span id="96cf">Common Examples: 500 Internal Server Error (Server had trouble processing) & 504 Gateway Timeout (Server timeout);</span> ### **Headers** : Work just like HTTP requests. > Common Examples: - <span id="6859">`Location` : Used by client for redirection responses.</span> - <span id="a497">`Content-Type` : Let’s client know what format the body is in.</span> - <span id="1e08">`Expires` : When response is no longer valid</span> - <span id="f45d">`Content-Disposition` : Let’s client know how to display the response.</span> - <span id="b46e">`Set-Cookie` : Sends data back to the client to set on the cookie.</span> - <span id="1e80">`Data` : If the request is successful, the body of the response will contain the resource you have requested.</span> ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: **Currently under development and very buggy!** <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> If you want to learn more and get some practice in … download <a href="https://www.postman.com/" class="markup--anchor markup--p-anchor">Postman</a> and start going through some tutorials! Happy Coding! By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 18, 2021](https://medium.com/p/8f02a96a834a). <a href="https://medium.com/@bryanguner/http-basics-8f02a96a834a" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,286 @@ My ‘awesome’ list of JavaScript resources ========================================= Everyone’s seen the ‘Awesome’ lists on GitHub… and they are indeed awesome… so today I am going to attempt to curate my own… ------------------------------------------------------------------------ ### My ‘awesome’ list of JavaScript resources #### Everyone’s seen the ‘Awesome’ lists on GitHub… and they are indeed awesome… so today I am going to attempt to curate my own… <figure><img src="https://cdn-images-1.medium.com/max/800/1*3pwY-HRi2sjgBBJ0eISwqw.png" class="graf-image" /></figure><a href="https://github.com/topics/awesome" class="markup--anchor markup--blockquote-anchor"><strong>https://github.com/topics/awesome</strong></a> - <span id="174b"><a href="http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/" class="markup--anchor markup--li-anchor">JavaScript. The Core</a></span> - <span id="f3b6"><a href="https://javascript.info/" class="markup--anchor markup--li-anchor">Modern JavaScript Tutorial</a> (<a href="https://news.ycombinator.com/item?id=25333350" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="211c"><a href="https://github.com/getify/You-Dont-Know-JS" class="markup--anchor markup--li-anchor">You don’t know JS books</a></span> - <span id="e742"><a href="https://jgthms.com/javascript-in-14-minutes/" class="markup--anchor markup--li-anchor">JS in 14 minutes</a></span> - <span id="6415"><a href="https://risingstars.js.org/2017/en/" class="markup--anchor markup--li-anchor">2017 JavaScript Rising Stars</a></span> - <span id="eed7"><a href="https://github.com/lukehoban/es6features" class="markup--anchor markup--li-anchor">ES6 features</a></span> - <span id="7dc8"><a href="https://www.youtube.com/watch?v=PMfcsYzj-9M" class="markup--anchor markup--li-anchor">The Definitive Guide to Object-Oriented JavaScript</a> — Amazing video to understand JS inheritance & objects.</span> - <span id="1622"><a href="http:J//dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/" class="markup--anchor markup--li-anchor">JavaScript: The Core</a></span> - <span id="56bc"><a href="https://ashfurrow.com/blog/javascript-is-good-actually/" class="markup--anchor markup--li-anchor">JavaScript is Good, Actually</a> (<a href="https://news.ycombinator.com/item?id=17079952" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="c6dc"><a href="https://github.com/trekhleb/javascript-algorithms" class="markup--anchor markup--li-anchor">JavaScript Algorithms</a> — Algorithms and data structures implemented in JavaScript with explanations and links to further readings.</span> - <span id="b6b7"><a href="http://es6-features.org/" class="markup--anchor markup--li-anchor">EC6 Features</a></span> - <span id="a5e3"><a href="https://github.com/ryanmcdermott/clean-code-javascript" class="markup--anchor markup--li-anchor">Clean Code concepts adapted for JavaScript</a></span> - <span id="29b5"><a href="https://news.ycombinator.com/item?id=17324538" class="markup--anchor markup--li-anchor">Ask HN: “Expert Level” JavaScript questions?</a></span> - <span id="a0ae"><a href="https://stackoverflow.com/questions/2800964/benefits-of-prototypal-inheritance-over-classical/16872315#16872315" class="markup--anchor markup--li-anchor">Benefits of prototypal inheritance over classical?</a></span> - <span id="f8c3"><a href="https://github.com/nathan/pax" class="markup--anchor markup--li-anchor">Pax</a> — Fastest JavaScript bundler in the galaxy.</span> - <span id="e63e"><a href="https://www.youtube.com/watch?v=8aGhZQkoFbQ" class="markup--anchor markup--li-anchor">Philip Roberts: What the heck is the event loop anyway? (2014)</a></span> - <span id="9853"><a href="https://www.youtube.com/watch?v=cCOL7MC4Pl0" class="markup--anchor markup--li-anchor">Jake Archibald: In The Loop (2018)</a></span> - <span id="73e5"><a href="https://www.youtube.com/watch?v=Nqx3rtv_dko" class="markup--anchor markup--li-anchor">Yonatan Kra — The Event Loop and your code (2020)</a></span> - <span id="930e"><a href="https://bundlephobia.com/" class="markup--anchor markup--li-anchor">BundlePhobia</a> — Find the cost of adding a npm package to your bundle. (<a href="https://github.com/pastelsky/bundlephobia" class="markup--anchor markup--li-anchor">Code</a>) (<a href="https://twitter.com/jsunderhood/status/1318204704988561409" class="markup--anchor markup--li-anchor">Tweet</a>)</span> - <span id="7366"><a href="https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3" class="markup--anchor markup--li-anchor">An Overview of JavaScript Testing in 2018</a></span> - <span id="7879"><a href="http://jamesknelson.com/grokking-es6-promises-the-four-functions-you-need-to-avoid-callback-hell/" class="markup--anchor markup--li-anchor">Introduction to ES6 Promises — The Four Functions You Need To Avoid Callback Hell</a></span> - <span id="6fca"><a href="http://jamesknelson.com/thank-you-for-subscribing/" class="markup--anchor markup--li-anchor">Nice ES6/Promises/React cheat sheets</a></span> - <span id="6cdf"><a href="https://tylermcginnis.com/javascript-visualizer/" class="markup--anchor markup--li-anchor">JavaScript Visualizer</a> — Tool for visualizing Execution Context, Hoisting, Closures, and Scopes in JavaScript.</span> - <span id="76c4"><a href="https://wallabyjs.com/docs/" class="markup--anchor markup--li-anchor">WallabyJS</a> — Integrated continuous testing tool for JavaScript.</span> - <span id="dd41"><a href="http://es6-features.org/" class="markup--anchor markup--li-anchor">ES6 features</a></span> - <span id="274e"><a href="https://www.youtube.com/watch?v=i5R7giitymk" class="markup--anchor markup--li-anchor">The State of JavaScript — The State of the Web (2018)</a></span> - <span id="33da"><a href="http://jamesknelson.com/es6-the-bits-youll-actually-use/" class="markup--anchor markup--li-anchor">A Quick Tour Of ES6 (Or, The Bits You’ll Actually Use)</a></span> - <span id="0bca"><a href="https://medium.com/@felixrieseberg/javascript-on-the-desktop-fast-and-slow-2b744dfb8b55" class="markup--anchor markup--li-anchor">JavaScript on the Desktop, Fast and Slow (2018)</a></span> - <span id="c9be"><a href="https://github.com/metagrover/ES6-for-humans" class="markup--anchor markup--li-anchor">ES6 for humans</a></span> - <span id="fc6b"><a href="https://github.com/leonardomso/33-js-concepts" class="markup--anchor markup--li-anchor">33 concepts every JavaScript developer should know</a></span> - <span id="5aac"><a href="https://github.com/fbeline/Design-Patterns-JS" class="markup--anchor markup--li-anchor">Design Patterns JS</a> — All the 23 (GoF) design patterns implemented in JavaScript.</span> - <span id="3d8c"><a href="https://github.com/tc39/proposal-javascript-standard-library" class="markup--anchor markup--li-anchor">Standard Library Proposal</a></span> - <span id="422c"><a href="https://github.com/30-seconds/30-seconds-of-code" class="markup--anchor markup--li-anchor">30 seconds of code</a> — Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</span> - <span id="2aa3"><a href="https://github.com/andywer/puppet-run" class="markup--anchor markup--li-anchor">puppet-run</a> — Run anything JavaScript in a headless Chrome from your command line.</span> - <span id="ffa2"><a href="https://github.com/whitecolor/yalc" class="markup--anchor markup--li-anchor">Yalc</a> — Better workflow than npm | yarn link for package authors.</span> - <span id="2247"><a href="https://github.com/tc39/proposals" class="markup--anchor markup--li-anchor">ECMAScript proposals</a></span> - <span id="27e7"><a href="https://github.com/mattzeunert/fromjs" class="markup--anchor markup--li-anchor">FromJS</a> — See where each character on the screen came from in code.</span> - <span id="c103"><a href="https://projects.lukehaas.me/runjs/" class="markup--anchor markup--li-anchor">RunJS</a> — Scratchpad for your thoughts, a playground for your creativity.</span> - <span id="5b6f"><a href="https://github.com/getify/Functional-Light-JS" class="markup--anchor markup--li-anchor">Pragmatic, balanced FP in JavaScript book</a></span> - <span id="78c8"><a href="https://github.com/pikapkg/pack" class="markup--anchor markup--li-anchor">Pack</a> — Helps you build amazing packages without the hassle.</span> - <span id="215c"><a href="https://mafinto.sh/blog/learning-javascript.html" class="markup--anchor markup--li-anchor">Learning JavaScript (2016)</a></span> - <span id="390e"><a href="https://github.com/pikapkg/web" class="markup--anchor markup--li-anchor">@pika/web</a> — Install npm dependencies that run directly in the browser. No Browserify, Webpack or import maps required.</span> - <span id="525a"><a href="https://github.com/alangpierce/sucrase" class="markup--anchor markup--li-anchor">Sucrase</a> — Super-fast alternative to Babel for when you can target modern JS runtimes.</span> - <span id="51ea"><a href="https://github.com/airbnb/javascript" class="markup--anchor markup--li-anchor">Airbnb JavaScript Style Guide</a></span> - <span id="ecaa"><a href="https://github.com/twhite96/js-dev-reads" class="markup--anchor markup--li-anchor">JavaScript Developer’s Reading List</a> — List of hand-picked books and articles for JavaScript developers.</span> - <span id="2efc"><a href="https://github.com/bevacqua/promisees" class="markup--anchor markup--li-anchor">Promisees</a> — Promise visualization playground for the adventurous.</span> - <span id="20c0"><a href="https://github.com/sindresorhus/promise-fun" class="markup--anchor markup--li-anchor">promise-fun</a> — Promise packages, patterns, chat, and tutorials.</span> - <span id="bfb4"><a href="https://github.com/lukejacksonn/perflink" class="markup--anchor markup--li-anchor">Perflink</a> — JavaScript performance benchmarks that you can share via URL.</span> - <span id="00f7"><a href="https://mostly-adequate.gitbooks.io/mostly-adequate-guide/" class="markup--anchor markup--li-anchor">Mostly adequate guide to FP (in JavaScript)</a> (<a href="https://github.com/MostlyAdequate/mostly-adequate-guide" class="markup--anchor markup--li-anchor">Code</a>) (<a href="https://news.ycombinator.com/item?id=22654135" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="0a5b"><a href="https://github.com/volta-cli/volta" class="markup--anchor markup--li-anchor">Volta</a> — JavaScript Launcher.</span> - <span id="17aa"><a href="https://github.com/mbeaudru/modern-js-cheatsheet" class="markup--anchor markup--li-anchor">Modern JS Cheat Sheet</a></span> - <span id="0fa7"><a href="https://fastpack.sh/" class="markup--anchor markup--li-anchor">Fastpack</a> — Pack JavaScript fast & easy.</span> - <span id="6f94"><a href="https://github.com/binast/binjs-ref" class="markup--anchor markup--li-anchor">Reference implementation for the JavaScript Binary AST format</a></span> - <span id="ce04"><a href="https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/README.md" class="markup--anchor markup--li-anchor">Babel Handbook</a></span> - <span id="fe74"><a href="https://github.com/lydiahallie/javascript-questions" class="markup--anchor markup--li-anchor">List of (Advanced) JavaScript Questions</a></span> - <span id="a219"><a href="https://blog.cloudflare.com/binary-ast/" class="markup--anchor markup--li-anchor">Faster script loading with BinaryAST? (2019)</a></span> - <span id="cdcc"><a href="https://github.com/benjamn/recast" class="markup--anchor markup--li-anchor">recast</a> — JavaScript syntax tree transformer, nondestructive pretty-printer, and automatic source map generator.</span> - <span id="6be0"><a href="https://github.com/pahen/madge" class="markup--anchor markup--li-anchor">Madge</a> — Create graphs from your CommonJS, AMD or ES6 module dependencies.</span> - <span id="127a"><a href="https://npmfs.com/" class="markup--anchor markup--li-anchor">npmfs</a> — JavaScript Package Inspector.</span> - <span id="128d"><a href="https://github.com/fantasyland/fantasy-land" class="markup--anchor markup--li-anchor">Fantasy Land Specification</a> — Specification for interoperability of common algebraic structures in JavaScript.</span> - <span id="9ac1"><a href="https://github.com/meriyah/meriyah" class="markup--anchor markup--li-anchor">Meriyah</a> — 100% compliant, self-hosted javascript parser with high focus on both performance and stability.</span> - <span id="70ec"><a href="https://news.ycombinator.com/item?id=20317736" class="markup--anchor markup--li-anchor">The cost of JavaScript in 2019</a> (<a href="https://news.ycombinator.com/item?id=20317736" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="157c"><a href="https://github.com/egoist/poi" class="markup--anchor markup--li-anchor">Poi</a> — Zero-config bundler for JavaScript applications.</span> - <span id="a1b6"><a href="https://tylermcginnis.com/courses/advanced-javascript" class="markup--anchor markup--li-anchor">Advanced JavaScript Course</a></span> - <span id="e624"><a href="https://github.com/nikersify/jay" class="markup--anchor markup--li-anchor">Jay</a> — Supercharged JavaScript REPL.</span> - <span id="b321"><a href="https://github.com/amejiarosario/dsa.js-data-structures-algorithms-javascript" class="markup--anchor markup--li-anchor">Data Structures and Algorithms in JavaScript</a></span> - <span id="423b"><a href="https://github.com/goldbergyoni/javascript-testing-best-practices" class="markup--anchor markup--li-anchor">JavaScript & Node.js Testing Best Practices</a></span> - <span id="c054"><a href="https://github.com/microsoft/just" class="markup--anchor markup--li-anchor">Just</a> — Library that organizes build tasks for your JS projects.</span> - <span id="d333"><a href="https://tc39.es/ecma262/" class="markup--anchor markup--li-anchor">ECMAScript (JS) specification</a> (<a href="https://github.com/tc39/ecma262" class="markup--anchor markup--li-anchor">Code</a>) (<a href="https://read262.netlify.com/" class="markup--anchor markup--li-anchor">Web version 2</a>)</span> - <span id="ceb1"><a href="https://www.youtube.com/watch?v=fdol03pcvMA" class="markup--anchor markup--li-anchor">André Staltz: Two Fundamental Abstractions — Uphill Conf 2018</a></span> - <span id="c168"><a href="http://www.jsmonday.dev/" class="markup--anchor markup--li-anchor">JSMonday</a> — Weekly JS inspiration.</span> - <span id="9ca6"><a href="https://github.com/SAP/chevrotain" class="markup--anchor markup--li-anchor">Chevrotain</a> — Parser Building Toolkit for JavaScript.</span> - <span id="58ce"><a href="https://github.com/daumann/ECMAScript-new-features-list" class="markup--anchor markup--li-anchor">Comprehensive list of new ES features</a></span> - <span id="4125"><a href="https://exploringjs.com/" class="markup--anchor markup--li-anchor">Exploring JS: JavaScript books for programmers</a></span> - <span id="24f8"><a href="https://exploringjs.com/impatient-js/toc.html" class="markup--anchor markup--li-anchor">JavaScript for Impatient Programmers book</a> (<a href="https://news.ycombinator.com/item?id=23689280" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="060b"><a href="https://exploringjs.com/es2018-es2019/toc.html" class="markup--anchor markup--li-anchor">Exploring ES2018 and ES2019</a></span> - <span id="bfc2"><a href="https://tc39.es/tc39-notes/" class="markup--anchor markup--li-anchor">TC39 Meeting Notes</a></span> - <span id="d846"><a href="https://github.com/chrispsn/mesh/" class="markup--anchor markup--li-anchor">Mesh Spreadsheet</a> — Visualise data and edit JavaScript code using a spreadsheet interface. (<a href="http://mesh-spreadsheet.com/" class="markup--anchor markup--li-anchor">Web</a>)</span> - <span id="8451"><a href="https://egghead.io/courses/immutable-javascript-data-structures-with-immer" class="markup--anchor markup--li-anchor">Immutable JavaScript Data Structures with Immer (2019)</a></span> - <span id="82dc"><a href="https://www.youtube.com/watch?v=bFuRvcAEiHg" class="markup--anchor markup--li-anchor">Immutability is Changing — From Immutable.js to Immer (2019)</a></span> - <span id="e7fa"><a href="https://github.com/pvdz/tenko" class="markup--anchor markup--li-anchor">Tenko</a> — 100% spec compliant ES2020 JavaScript parser written in JS.</span> - <span id="e3b5"><a href="https://github.com/Rich-Harris/code-red" class="markup--anchor markup--li-anchor">code-red</a> — Experimental toolkit for writing x-to-JavaScript compilers.</span> - <span id="ad9d"><a href="https://yuanchuan.dev/2019/03/04/the-reduce-function.html" class="markup--anchor markup--li-anchor">Reduce in JavaScript (2019)</a></span> - <span id="3292"><a href="https://www.pika.dev/registry" class="markup--anchor markup--li-anchor">Pika</a> — New kind of package registry for the modern web.</span> - <span id="5168"><a href="https://www.youtube.com/watch?v=lQOWTXanWwU" class="markup--anchor markup--li-anchor">Brian Holt: Futurist Code Bases: Integrating JS of the Future Today (2019)</a></span> - <span id="646d"><a href="https://js-tldr.info/" class="markup--anchor markup--li-anchor">JS TLDR</a> — Zen mode web-documentation. (<a href="https://github.com/RusinovAnton/js-tldr" class="markup--anchor markup--li-anchor">Code</a>) (<a href="https://medium.com/@rusinovantondev/js-tl-dr-zen-mode-web-docs-for-javascript-developers-cf45e0143a09" class="markup--anchor markup--li-anchor">Article</a>)</span> - <span id="a77f"><a href="https://sunjay.dev/2016/08/13/es6-currying" class="markup--anchor markup--li-anchor">Currying Functions in ES6 (2016)</a></span> - <span id="b067"><a href="https://lihautan.com/manipulating-ast-with-javascript/" class="markup--anchor markup--li-anchor">Manipulating AST with JavaScript (2019)</a></span> - <span id="7c67"><a href="https://www.cs.cornell.edu/~asampson/blog/scope.html" class="markup--anchor markup--li-anchor">Is JavaScript Statically or Dynamically Scoped? (2018)</a></span> - <span id="9378"><a href="http://matt.might.net/articles/implementation-of-recursive-fixed-point-y-combinator-in-javascript-for-memoization/" class="markup--anchor markup--li-anchor">Fixed-point combinators in JavaScript: Memoizing recursive functions</a></span> - <span id="1b3d"><a href="https://github.com/FormidableLabs/runpkg" class="markup--anchor markup--li-anchor">runpkg</a> — Lets you navigate any JavaScript package on npm thanks to unpkg.com.</span> - <span id="f2df"><a href="https://www.madebymike.com.au/writing/this-in-javascript/" class="markup--anchor markup--li-anchor">What is this in JavaScript?</a></span> - <span id="3bfd"><a href="https://beginnerjavascript.com/" class="markup--anchor markup--li-anchor">Beginner JavaScript course</a></span> - <span id="b8b7"><a href="https://github.com/DrkSephy/es6-cheatsheet" class="markup--anchor markup--li-anchor">ES6 Cheat Sheet</a></span> - <span id="c817"><a href="https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif" class="markup--anchor markup--li-anchor">JavaScript Visualized: Event Loop (2019)</a></span> - <span id="aa83"><a href="https://dev.to/lydiahallie/javascript-visualized-scope-chain-13pd" class="markup--anchor markup--li-anchor">JavaScript Visualized: Scope (Chain) (2019)</a></span> - <span id="0680"><a href="https://dev.to/lydiahallie/javascript-visualized-hoisting-478h" class="markup--anchor markup--li-anchor">JavaScript Visualized: Hoisting (2019)</a></span> - <span id="cdb2"><a href="https://github.com/googleprojectzero/fuzzilli" class="markup--anchor markup--li-anchor">Fuzzilli</a> — JavaScript Engine Fuzzer.</span> - <span id="8955"><a href="https://exploringjs.com/deep-js/" class="markup--anchor markup--li-anchor">Deep JavaScript: Theory and techniques (2019)</a> (<a href="https://news.ycombinator.com/item?id=23552180" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="5062"><a href="https://sicp.comp.nus.edu.sg/" class="markup--anchor markup--li-anchor">JavaScript Adaption of Structure and Interpretation of Computer Programs</a> (<a href="https://news.ycombinator.com/item?id=21822903" class="markup--anchor markup--li-anchor">HN</a>) (<a href="https://github.com/source-academy/sicp" class="markup--anchor markup--li-anchor">Code</a>)</span> - <span id="095a"><a href="https://2019.stateofjs.com/" class="markup--anchor markup--li-anchor">State of JS 2019</a> (<a href="https://news.ycombinator.com/item?id=21831747" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="f2fb"><a href="https://medium.com/hackernoon/considering-cancelation-a96e0f3c2298" class="markup--anchor markup--li-anchor">Cancelation without Breaking a Promise (2016)</a> — Reflecting on what was so tricky about cancelable Promises, embracing functional purity as a solution.</span> - <span id="72c0"><a href="https://esdiscuss.org/" class="markup--anchor markup--li-anchor">ECMAScript Discussion Archives</a> (<a href="https://github.com/esdiscuss/esdiscuss.org" class="markup--anchor markup--li-anchor">Code</a>)</span> - <span id="7f6e"><a href="https://overreacted.io/what-is-javascript-made-of/" class="markup--anchor markup--li-anchor">What Is JavaScript Made Of? (2019)</a></span> - <span id="ce3e"><a href="https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co" class="markup--anchor markup--li-anchor">JavaScript Visualized: Prototypal Inheritance (2020)</a></span> - <span id="beef"><a href="https://lucasfcosta.com/2018/05/20/Y-The-Most-Beautiful-Idea-in-Computer-Science.html" class="markup--anchor markup--li-anchor">Y: The Most Beautiful Idea in Computer Science explained in JavaScript (2018)</a></span> - <span id="0c18"><a href="https://risingstars.js.org/2019/en/" class="markup--anchor markup--li-anchor">2019 JavaScript Rising Stars</a> (<a href="https://github.com/bestofjs/javascript-risingstars" class="markup--anchor markup--li-anchor">Code</a>)</span> - <span id="b031"><a href="https://bestofjs.org/" class="markup--anchor markup--li-anchor">Best of JS</a> — Best of JavaScript, HTML and CSS. (<a href="https://github.com/bestofjs/bestofjs-webui" class="markup--anchor markup--li-anchor">Code</a>) (<a href="https://bestofjs.org/timeline" class="markup--anchor markup--li-anchor">Web Timeline</a>) (<a href="https://news.ycombinator.com/item?id=24142462" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="54bf"><a href="https://github.com/deanm/omggif" class="markup--anchor markup--li-anchor">omggif</a> — JavaScript implementation of a GIF 89a encoder and decoder.</span> - <span id="93c8"><a href="https://davidea.st/articles/sampling-bias-fdr-state-of-js" class="markup--anchor markup--li-anchor">Sampling bias, FDR, and The State of JS (2020)</a></span> - <span id="2e70"><a href="https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36" class="markup--anchor markup--li-anchor">JavaScript Visualized: Generators and Iterators (2020)</a></span> - <span id="e410"><a href="https://github.com/soney/jsep" class="markup--anchor markup--li-anchor">jsep</a> — JavaScript Expression Parser.</span> - <span id="4fe2"><a href="https://github.com/nas5w/javascript-tips-and-tidbits" class="markup--anchor markup--li-anchor">JS Tips & Tidbits</a></span> - <span id="6f49"><a href="https://adlrocha.substack.com/p/adlrocha-i-have-been-underestimating" class="markup--anchor markup--li-anchor">I have been underestimating JS (2020)</a> — Understanding V8 and NodeJS Steams.</span> - <span id="624f"><a href="https://jlongster.com/Taming-the-Asynchronous-Beast-with-CSP-in-JavaScript" class="markup--anchor markup--li-anchor">Taming the asynchronous beast with CSP channels in JavaScript (2014)</a></span> - <span id="ba36"><a href="https://redd.one/blog/debounce-vs-throttle" class="markup--anchor markup--li-anchor">Debounce vs Throttle: Definitive Visual Guide (2019)</a></span> - <span id="309d"><a href="https://gist.link/" class="markup--anchor markup--li-anchor">GistLink</a> — Code apps or components. See them render as you type. Share your creations via URL.</span> - <span id="026b"><a href="https://github.com/danvk/source-map-explorer" class="markup--anchor markup--li-anchor">source-map-explorer</a> — Analyze and debug space usage through source maps.</span> - <span id="a41d"><a href="https://github.com/oblador/diglett" class="markup--anchor markup--li-anchor">Diglett</a> — Keep your JS project lean by detecting duplicate dependencies.</span> - <span id="7dd6"><a href="https://learnvanillajs.com/roadmap/" class="markup--anchor markup--li-anchor">Learn Vanilla JS Roadmap</a></span> - <span id="da22"><a href="https://learnjavascript.online/" class="markup--anchor markup--li-anchor">Learn JavaScript</a> — Easiest way to learn & practice modern JavaScript step by step.</span> - <span id="1428"><a href="https://github.com/bradtraversy/vanillawebprojects" class="markup--anchor markup--li-anchor">Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries</a> (<a href="https://news.ycombinator.com/item?id=22231963" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="562a"><a href="https://github.com/ReactiveX/IxJS" class="markup--anchor markup--li-anchor">IxJS</a> — Interactive Extensions for JavaScript.</span> - <span id="cc11"><a href="https://github.com/renovatebot/renovate" class="markup--anchor markup--li-anchor">Renovate</a> — Universal dependency update tool that fits into your workflows.</span> - <span id="c8eb"><a href="https://dev.to/laurieontech/the-ecmascript-ecosystem-2e13" class="markup--anchor markup--li-anchor">The ECMAScript Ecosystem (2020)</a></span> - <span id="95a9"><a href="https://github.com/evanw/esbuild/" class="markup--anchor markup--li-anchor">esbuild</a> — Extremely fast JavaScript bundler and minifier written in Go. (<a href="https://news.ycombinator.com/item?id=22335707" class="markup--anchor markup--li-anchor">HN</a>) (<a href="https://github.com/evanw/esbuild/blob/master/docs/architecture.md" class="markup--anchor markup--li-anchor">Architecture</a>) (<a href="https://github.com/floydspace/serverless-esbuild" class="markup--anchor markup--li-anchor">serverless-esbuild</a>) (<a href="https://github.com/egoist/awesome-esbuild" class="markup--anchor markup--li-anchor">Awesome</a>) (<a href="https://esbuild.github.io/" class="markup--anchor markup--li-anchor">Web</a>) (<a href="https://github.com/remorses/esbuild-plugins" class="markup--anchor markup--li-anchor">Esbuild plugins</a>)</span> - <span id="1fea"><a href="https://github.com/esbuild/community-plugins" class="markup--anchor markup--li-anchor">Community plugins for esbuild</a></span> - <span id="507e"><a href="https://esbuild.github.io/faq/#why-is-esbuild-fast" class="markup--anchor markup--li-anchor">Why Is Esbuild Fast?</a> (<a href="https://news.ycombinator.com/item?id=26154509" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="c18b"><a href="https://github.com/remorses/bundless" class="markup--anchor markup--li-anchor">bundless</a> — Dev server and bundler for esbuild. (<a href="https://bundless.vercel.app/" class="markup--anchor markup--li-anchor">Web</a>)</span> - <span id="3286"><a href="https://github.com/egoist/esbuild-register" class="markup--anchor markup--li-anchor">esbuild-register</a> — Transpile JSX, TypeScript and esnext features on the fly with esbuild.</span> - <span id="922d"><a href="https://www.udemy.com/course/understand-javascript/" class="markup--anchor markup--li-anchor">JavaScript: Understanding the Weird Parts course (2015)</a></span> - <span id="063b"><a href="https://github.com/fastpack/fastpack" class="markup--anchor markup--li-anchor">Fastpack</a> — Pack JS code into a single bundle fast & easy.</span> - <span id="7acb"><a href="https://github.com/Akryum/guijs" class="markup--anchor markup--li-anchor">guijs</a> — App that helps you manage JS projects with a Graphical User Interface.</span> - <span id="4f9c"><a href="https://github.com/rome/tools" class="markup--anchor markup--li-anchor">Rome Toolchain</a> — Linter, compiler, bundler, and more for JavaScript, TypeScript, HTML, Markdown, and CSS. (<a href="https://rome.tools/" class="markup--anchor markup--li-anchor">Web</a>) (<a href="https://news.ycombinator.com/item?id=22430682" class="markup--anchor markup--li-anchor">HN</a>) (<a href="https://news.ycombinator.com/item?id=24094377" class="markup--anchor markup--li-anchor">HN 2</a>) (<a href="https://news.ycombinator.com/item?id=24882413" class="markup--anchor markup--li-anchor">HN 3</a>)</span> - <span id="45b6"><a href="https://github.com/boltpkg/bolt" class="markup--anchor markup--li-anchor">Bolt</a> — Super-powered JavaScript project management.</span> - <span id="7954"><a href="https://github.com/gfwilliams/tiny-js" class="markup--anchor markup--li-anchor">tiny-js</a> — Aims to be an extremely simple (~2000 line) JavaScript interpreter.</span> - <span id="062d"><a href="https://github.com/slikts/tooling" class="markup--anchor markup--li-anchor">JavaScript and TypeScript tooling overview</a></span> - <span id="9e84"><a href="https://github.com/KFlash/seafox" class="markup--anchor markup--li-anchor">Seafox</a> — Blazing fast 100% spec compliant, self-hosted javascript parser written in Typescript.</span> - <span id="49bc"><a href="https://github.com/micromata/awesome-javascript-learning" class="markup--anchor markup--li-anchor">Awesome JavaScript Learning</a></span> - <span id="334f"><a href="https://github.com/wbinnssmith/awesome-promises" class="markup--anchor markup--li-anchor">Awesome Promises</a></span> - <span id="4025"><a href="https://github.com/facebook/jscodeshift" class="markup--anchor markup--li-anchor">jscodeshift</a> — Toolkit for running codemods over multiple JavaScript or TypeScript files.</span> - <span id="fb19"><a href="https://www.youtube.com/watch?v=sf4spiPynBE" class="markup--anchor markup--li-anchor">React Workout: Reducers with Cassidy Williams (2020)</a></span> - <span id="537f"><a href="http://www.wirfs-brock.com/allen/posts/866" class="markup--anchor markup--li-anchor">JavaScript: The First 20 Years (2020)</a></span> - <span id="dfe0"><a href="https://github.com/lauthieb/awesome-storybook" class="markup--anchor markup--li-anchor">Awesome Storybook</a></span> - <span id="fb45"><a href="https://github.com/bellard/quickjs" class="markup--anchor markup--li-anchor">QuickJS</a> — Small and embeddable Javascript engine. (<a href="https://bellard.org/quickjs/" class="markup--anchor markup--li-anchor">Web</a>) (<a href="https://news.ycombinator.com/item?id=24867103" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="9321"><a href="https://github.com/tc39/test262" class="markup--anchor markup--li-anchor">Test262: Official ECMAScript Conformance Test Suite</a></span> - <span id="9d47"><a href="https://github.com/JSMonk/hegel" class="markup--anchor markup--li-anchor">Hegel</a> — Advanced static type checker. (<a href="https://hegel.js.org/" class="markup--anchor markup--li-anchor">Web</a>) (<a href="https://blog.logrocket.com/introduction-to-hegel/" class="markup--anchor markup--li-anchor">Intro to Hegel</a>)</span> - <span id="f325"><a href="https://github.com/NectarJS/nectarjs" class="markup--anchor markup--li-anchor">NectarJS</a> — JS God mode. No VM. No Bytecode. No Garbage Collector. Full Compiled and Native binaries.</span> - <span id="d0bf"><a href="https://eloquentjavascript.net/" class="markup--anchor markup--li-anchor">Eloquent JavaScript book (2018)</a> (<a href="https://news.ycombinator.com/item?id=22990926" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="2583"><a href="https://js.coach/" class="markup--anchor markup--li-anchor">JS.coach</a> — Manually curated list of packages related to React, Vue, Webpack, Babel and PostCSS. (<a href="https://github.com/jscoach/client" class="markup--anchor markup--li-anchor">Code</a>)</span> - <span id="d3f1"><a href="https://gomakethings.com/how-to-create-a-reactive-state-based-ui-component-with-vanilla-js-proxies/" class="markup--anchor markup--li-anchor">How to create a reactive state-based UI component with vanilla JS Proxies (2020)</a></span> - <span id="d65f"><a href="https://www.kite.com/javascript/" class="markup--anchor markup--li-anchor">Kite Autocomplete for JavaScript</a> (<a href="https://www.kite.com/blog/product/kite-launches-ai-powered-javascript-completions/" class="markup--anchor markup--li-anchor">Article</a>)</span> - <span id="e168"><a href="https://www.youtube.com/watch?v=fix2-SynPGE" class="markup--anchor markup--li-anchor">Excalidraw: Cool JS Tricks Behind the Scenes — Christopher Chedeau (2020)</a></span> - <span id="6238"><a href="https://davidwells.io/blog/cleaner-async-await-code-without-try-catch" class="markup--anchor markup--li-anchor">Cleaner async JavaScript code without the try/catch mess (2020)</a></span> - <span id="6391"><a href="https://github.com/jeremyckahn/shifty" class="markup--anchor markup--li-anchor">Shifty</a> — Tweening engine for JavaScript. It is a lightweight library meant to be encapsulated by higher level tools.</span> - <span id="aefb"><a href="https://github.com/jspm/jspm-cli" class="markup--anchor markup--li-anchor">jspm</a> — Package management CLI.</span> - <span id="95f8"><a href="https://github.com/vasanthk/js-bits" class="markup--anchor markup--li-anchor">JS Bits</a> — JavaScript concepts explained with code.</span> - <span id="3cb1"><a href="https://github.com/keichi/binary-parser" class="markup--anchor markup--li-anchor">Binary-parser</a> — Parser builder for JavaScript that enables you to write efficient binary parsers in a simple and declarative manner.</span> - <span id="02e0"><a href="https://github.com/rsms/estrella" class="markup--anchor markup--li-anchor">estrella</a> — Light-weight runner for the esbuild compiler.</span> - <span id="722b"><a href="https://github.com/mozilla-spidermonkey/jsparagus" class="markup--anchor markup--li-anchor">jsparagus</a> — JavaScript parser written in Rust.</span> - <span id="1856"><a href="https://github.com/callbag/callbag" class="markup--anchor markup--li-anchor">Callbag</a> — Standard for JS callbacks that enables lightweight observables and iterables. (<a href="https://github.com/callbag/callbag/wiki" class="markup--anchor markup--li-anchor">Wiki</a>)</span> - <span id="1b72"><a href="https://standardjs.com/" class="markup--anchor markup--li-anchor">JavaScript Standard Style</a> — JavaScript style guide, linter, and formatter. (<a href="https://github.com/standard/standard" class="markup--anchor markup--li-anchor">Code</a>)</span> - <span id="8cf2"><a href="https://github.com/boa-dev/boa" class="markup--anchor markup--li-anchor">Boa</a> — Experimental Javascript lexer, parser and compiler written in Rust.</span> - <span id="e696"><a href="https://blog.greenroots.info/understanding-javascript-execution-context-like-never-before-ckb8x246k00f56hs1nefzpysq" class="markup--anchor markup--li-anchor">Understanding JavaScript Execution Context like never before (2020)</a></span> - <span id="accf"><a href="https://www.ditdot.hr/en/causes-of-memory-leaks-in-javascript-and-how-to-avoid-them" class="markup--anchor markup--li-anchor">Causes of Memory Leaks in JavaScript and How to Avoid Them (2020)</a> (<a href="https://lobste.rs/s/ar5avz/causes_memory_leaks_javascript_how_avoid" class="markup--anchor markup--li-anchor">Lobsters</a>)</span> - <span id="3094"><a href="https://ui.dev/" class="markup--anchor markup--li-anchor">UI.dev</a> — Master the JavaScript Ecosystem.</span> - <span id="f1ef"><a href="https://pragmaticpineapple.com/do-not-follow-javascript-trends/" class="markup--anchor markup--li-anchor">Do Not Follow JavaScript Trends (2020)</a> (<a href="https://lobste.rs/s/wb3ma8/do_not_follow_javascript_trends" class="markup--anchor markup--li-anchor">Lobsters</a>) (<a href="https://news.ycombinator.com/item?id=23538473" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="4699"><a href="https://twitter.com/buildsghost/status/1274042818219044864" class="markup--anchor markup--li-anchor">Some things that can be avoided in JS for clearer code (2020)</a></span> - <span id="5d1a"><a href="https://twitter.com/Madisonkanna/status/1274424134139666432" class="markup--anchor markup--li-anchor">JS fundamentals and resources to learn them (2020)</a></span> - <span id="69b6"><a href="https://jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/" class="markup--anchor markup--li-anchor">A little bit of plain JavaScript can do a lot (2020)</a> (<a href="https://lobste.rs/s/6umqjn/little_bit_plain_javascript_can_do_lot" class="markup--anchor markup--li-anchor">Lobsters</a>) (<a href="https://news.ycombinator.com/item?id=23578319" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="6a84"><a href="https://kyleshevlin.com/memoization" class="markup--anchor markup--li-anchor">Memoization: What, Why, and How (2020)</a></span> - <span id="5a73"><a href="https://formidable.com/blog/2020/publish-npm-packages/" class="markup--anchor markup--li-anchor">An Open Source Maintainer’s Guide to Publishing npm Packages (2020)</a></span> - <span id="7c06"><a href="https://molily.de/robust-javascript/" class="markup--anchor markup--li-anchor">Robust Client-Side JavaScript (2020)</a> (<a href="https://news.ycombinator.com/item?id=23612184" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="675e"><a href="https://npm.anvaka.com/#!/" class="markup--anchor markup--li-anchor">Visualization of npm dependencies</a></span> - <span id="dd10"><a href="https://sivers.org/learn-js" class="markup--anchor markup--li-anchor">How to Learn JavaScript</a> (<a href="https://news.ycombinator.com/item?id=23659531" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="0877"><a href="https://github.com/google/closure-compiler" class="markup--anchor markup--li-anchor">Google Closure Compiler</a> — Tool for making JavaScript download and run faster.</span> - <span id="7dac"><a href="https://jsconf.com/" class="markup--anchor markup--li-anchor">JSConf</a> — Conferences for the JavaScript Community.</span> - <span id="6c16"><a href="https://samsaccone.com/posts/history-of-promises.html" class="markup--anchor markup--li-anchor">The history of Promises</a></span> - <span id="caaf"><a href="https://www.skypack.dev/" class="markup--anchor markup--li-anchor">Skypack</a> — New kind of JavaScript delivery network. (<a href="https://news.ycombinator.com/item?id=23825798" class="markup--anchor markup--li-anchor">HN</a>) (<a href="https://www.skypack.dev/blog/2020/10/introducing-skypack-discover/" class="markup--anchor markup--li-anchor">Introducing Skypack Discover</a>) (<a href="https://docs.skypack.dev/" class="markup--anchor markup--li-anchor">Docs</a>)</span> - <span id="9b02"><a href="https://openbase.io/" class="markup--anchor markup--li-anchor">Openbase</a> — Help developers choose the right JS package for any task — through user reviews and insights about packages’ popularity, reliability, activity and more. (<a href="https://news.ycombinator.com/item?id=23833441" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="7a1d"><a href="https://github.com/bashojs/basho" class="markup--anchor markup--li-anchor">Basho</a> — Shell Automation with Plain JavaScript. (<a href="https://bashojs.org/" class="markup--anchor markup--li-anchor">Docs</a>)</span> - <span id="e78e"><a href="https://gist.github.com/jesstelford/9a35d20a2aa044df8bf241e00d7bc2d0" class="markup--anchor markup--li-anchor">What is the JS Event Loop and Call Stack?</a></span> - <span id="010d"><a href="https://gist.github.com/jesstelford/bbb30b983bddaa6e5fef2eb867d37678" class="markup--anchor markup--li-anchor">Starving the Event Loop with microtasks</a></span> - <span id="6134"><a href="https://gpu.rocks/#/" class="markup--anchor markup--li-anchor">GPU.js</a> — GPU accelerated JavaScript. (<a href="https://news.ycombinator.com/item?id=24027487" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="f1f0"><a href="https://adrianmejia.com/promises-tutorial-concurrency-in-javascript-node/" class="markup--anchor markup--li-anchor">The JavaScript Promise Tutorial (2020)</a></span> - <span id="3b90"><a href="https://dev.to/assuncaocharles/underrated-array-methods-2mdj" class="markup--anchor markup--li-anchor">Underrated JS array methods (2020)</a></span> - <span id="9d1f"><a href="https://jack.wrenn.fyi/blog/xpath-for-2020/" class="markup--anchor markup--li-anchor">Javascript Generators, Meet XPath (2020)</a> (<a href="https://lobste.rs/s/5fsljg/javascript_generators_meet_xpath" class="markup--anchor markup--li-anchor">Lobsters</a>)</span> - <span id="2e59"><a href="https://github.com/dop251/goja" class="markup--anchor markup--li-anchor">goja</a> — ECMAScript 5.1(+) implementation in Go.</span> - <span id="b69a"><a href="https://github.com/mawrkus/js-unit-testing-guide" class="markup--anchor markup--li-anchor">Guide to unit testing in JavaScript</a></span> - <span id="bc13"><a href="https://community.risingstack.com/the-worlds-fastest-javascript-memoization-library/" class="markup--anchor markup--li-anchor">How I wrote the fastest JavaScript memoization library (2017)</a></span> - <span id="967f"><a href="https://unpkg.com/javascript-playgrounds@%5E1.0.0/public/index.html" class="markup--anchor markup--li-anchor">JavaScript Playgrounds</a> — Interactive JavaScript sandbox. (<a href="https://github.com/dabbott/javascript-playgrounds" class="markup--anchor markup--li-anchor">Code</a>)</span> - <span id="47a8"><a href="https://speakeasyjs.com/" class="markup--anchor markup--li-anchor">Speakeasy JS</a> — Weekly JavaScript meetup.</span> - <span id="9d33"><a href="https://github.com/elsaland/elsa" class="markup--anchor markup--li-anchor">Elsa</a> — Minimal, fast and secure QuickJS wrapper written in Go. (<a href="https://news.ycombinator.com/item?id=24626655" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="edda"><a href="https://github.com/theduke/quickjs-rs" class="markup--anchor markup--li-anchor">quickjs-rs</a> — Rust wrapper for QuickJS.</span> - <span id="f6eb"><a href="https://github.com/RDambrosio016/RSLint" class="markup--anchor markup--li-anchor">RSLint</a> — JavaScript linter written in Rust designed to be as fast as possible, customizable, and easy to use.</span> - <span id="8963"><a href="https://www.youtube.com/playlist?list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2" class="markup--anchor markup--li-anchor">Beginner’s Series to: JavaScript by Microsoft</a> (<a href="https://github.com/microsoft/beginners-intro-javascript-node" class="markup--anchor markup--li-anchor">Code</a>)</span> - <span id="6121"><a href="https://shkspr.mobi/blog/2020/10/please-stop-using-cdns-for-external-javascript-libraries/" class="markup--anchor markup--li-anchor">Please stop using CDNs for external Javascript libraries (2020)</a> (<a href="https://lobste.rs/s/mpznhm/please_stop_using_cdns_for_external" class="markup--anchor markup--li-anchor">Lobsters</a>) (<a href="https://news.ycombinator.com/item?id=24745194" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="b998"><a href="https://github.com/pikapkg/esm-hmr" class="markup--anchor markup--li-anchor">ESM Hot Module Replacement (ESM-HMR) Spec</a></span> - <span id="371d"><a href="https://github.com/marvinhagemeister/esbuild-js" class="markup--anchor markup--li-anchor">esbuild-js</a> — es-build implemented in JS.</span> - <span id="ef7b"><a href="https://daveceddia.com/javascript-references/" class="markup--anchor markup--li-anchor">Visual Guide to References in JavaScript (2020)</a></span> - <span id="2307"><a href="https://www.breck-mckye.com/blog/2019/10/modern-javascript-features-you-may-have-missed/" class="markup--anchor markup--li-anchor">Modern JavaScript features you may have missed (2019)</a></span> - <span id="2859"><a href="https://github.com/Siorki/RegPack" class="markup--anchor markup--li-anchor">RegPack</a> — Self-contained packer for size-constrained JS code.</span> - <span id="4671"><a href="https://github.com/c-smile/sciter-js-sdk" class="markup--anchor markup--li-anchor">ElectronJS alternative: SciterJS — HTML/CSS/JS in 4.5 MB executable</a> (<a href="https://news.ycombinator.com/item?id=24797423" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="aaa3"><a href="https://github.com/estree/estree" class="markup--anchor markup--li-anchor">ESTree Spec</a> — Manipulate JavaScript source code.</span> - <span id="3578"><a href="https://kyleshevlin.com/pattern-matching" class="markup--anchor markup--li-anchor">Pattern Matching in JavaScript (2020)</a></span> - <span id="fe9f"><a href="https://medium.com/@laflamablanc/method-chaining-and-javascript-7d840d6e3687" class="markup--anchor markup--li-anchor">How to chain methods in JS in order to write concise and readable code (2020)</a></span> - <span id="6bd6"><a href="https://npmview.now.sh/" class="markup--anchor markup--li-anchor">npmview</a> — Web application to view npm package files. (<a href="https://github.com/pd4d10/npmview" class="markup--anchor markup--li-anchor">Code</a>)</span> - <span id="5e0e"><a href="https://github.com/rbuckton/reflect-metadata" class="markup--anchor markup--li-anchor">Metadata Reflection API for JS</a></span> - <span id="0787"><a href="https://survivejs.com/" class="markup--anchor markup--li-anchor">SurviveJS</a> — Learn JavaScript. From apprentice to master.</span> - <span id="ea8d"><a href="https://egghead.io/playlists/composing-closures-and-callbacks-in-javascript-1223" class="markup--anchor markup--li-anchor">Composing Closures and Callbacks in JavaScript (2020)</a></span> - <span id="1150"><a href="https://github.com/guybedford/cjs-module-lexer" class="markup--anchor markup--li-anchor">CJS Module Lexer</a> — Fast lexer to extract named exports via analysis from CommonJS modules.</span> - <span id="2d36"><a href="http://neugierig.org/software/blog/2019/04/js-minifiers.html" class="markup--anchor markup--li-anchor">JavaScript minification (2019)</a></span> - <span id="1f61"><a href="https://github.com/antfu/export-size" class="markup--anchor markup--li-anchor">export-size</a> — Analysis bundle cost for each export of an ESM package.</span> - <span id="481e"><a href="https://github.com/postui/esm.sh" class="markup--anchor markup--li-anchor">ESM</a> — Fast, global content delivery network ES Modules.</span> - <span id="9f6b"><a href="https://github.com/caderek/benny" class="markup--anchor markup--li-anchor">Benny</a> — Dead simple benchmarking framework for JS/TS libs.</span> - <span id="def2"><a href="https://11sigma.com/blog/functional-programming-in-js-part-i-composition" class="markup--anchor markup--li-anchor">Functional Programming in JS — Composition (Currying, Lodash and Ramda) (2020)</a></span> - <span id="4421"><a href="https://www.taniarascia.com/javascript-modules-import-export/" class="markup--anchor markup--li-anchor">Understanding Modules, Import and Export in JavaScript (2020)</a></span> - <span id="c4c2"><a href="https://github.com/sindresorhus/meta/issues/7" class="markup--anchor markup--li-anchor">Intent to stop using ‘null’ in my JS code</a> (<a href="https://news.ycombinator.com/item?id=24956156" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="80c6"><a href="https://dmitripavlutin.com/javascript-prototypal-inheritance/" class="markup--anchor markup--li-anchor">What Makes JavaScript JavaScript? Prototypal Inheritance (2020)</a></span> - <span id="07aa"><a href="https://github.com/antfu/ni" class="markup--anchor markup--li-anchor">ni</a> — Use the right package manager. Detect whether to use npm/yarn/pnpm.</span> - <span id="ad0d"><a href="https://pitayan.com/posts/modernest-lib-hello-world/" class="markup--anchor markup--li-anchor">Making a modern JS library in 2020</a></span> - <span id="53e1"><a href="https://github.com/sudheerj/javascript-interview-questions" class="markup--anchor markup--li-anchor">JavaScript Interview Questions & Answers</a></span> - <span id="fe98"><a href="https://joshwcomeau.com/operator-lookup/" class="markup--anchor markup--li-anchor">JS Operator Lookup</a> — Search JavaScript Operators.</span> - <span id="4d3f"><a href="https://www.ideamotive.co/javascript-business-guide" class="markup--anchor markup--li-anchor">The state of JavaScript at the end of 2020</a> (<a href="https://news.ycombinator.com/item?id=25046293" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="aa9c"><a href="https://github.com/denysdovhan/wtfjs" class="markup--anchor markup--li-anchor">What the fuck JavaScript</a> — List of funny and tricky JavaScript examples.</span> - <span id="b2e5"><a href="https://1loc.dev/" class="markup--anchor markup--li-anchor">1loc</a> — JavaScript Utilities in 1 LOC.</span> - <span id="0ae7"><a href="https://www.componentdriven.org/" class="markup--anchor markup--li-anchor">Component Driven User Interfaces</a> — Open standard for UI component examples based on JavaScript ES6 modules. (<a href="https://github.com/ComponentDriven/csf" class="markup--anchor markup--li-anchor">Code</a>)</span> - <span id="8ec1"><a href="https://github.com/sadanandpai/javascript-code-challenges" class="markup--anchor markup--li-anchor">JavaScript Modern Interview Code Challenges</a></span> - <span id="a6ad"><a href="https://www.youtube.com/watch?v=CVzx-6fu0d8" class="markup--anchor markup--li-anchor">Building a Promise from Scratch (2020)</a></span> - <span id="79a4"><a href="https://github.com/voxpelli/types-in-js" class="markup--anchor markup--li-anchor">Tips and tricks for working with types in JavaScript</a></span> - <span id="628a"><a href="https://github.com/davidbonnet/astring" class="markup--anchor markup--li-anchor">Astring</a> — Tiny and fast JavaScript code generator from an ESTree-compliant AST.</span> - <span id="c08d"><a href="https://estimator.dev/" class="markup--anchor markup--li-anchor">EStimator.dev</a> — Calculate the size and performance impact of switching to modern JavaScript syntax. (<a href="https://github.com/GoogleChromeLabs/estimator.dev" class="markup--anchor markup--li-anchor">Code</a>)</span> - <span id="75d9"><a href="https://web.dev/publish-modern-javascript/" class="markup--anchor markup--li-anchor">Publish, ship, and install modern JavaScript for faster applications (2020)</a></span> - <span id="ca35"><a href="https://github.com/mikeal/ipjs" class="markup--anchor markup--li-anchor">Universal JavaScript Build and Packaging</a></span> - <span id="9312"><a href="https://mrale.ph/blog/2018/02/03/maybe-you-dont-need-rust-to-speed-up-your-js.html" class="markup--anchor markup--li-anchor">Maybe you don’t need Rust and WASM to speed up your JS (2018)</a></span> - <span id="7a8a"><a href="https://github.com/microsoft/lage" class="markup--anchor markup--li-anchor">lage</a> — Task runner in JS monorepos. (<a href="https://microsoft.github.io/lage/" class="markup--anchor markup--li-anchor">Web</a>)</span> - <span id="4194"><a href="https://github.com/google/module-server" class="markup--anchor markup--li-anchor">Module Server</a> — System for efficient serving of CommonJS modules to web browsers.</span> - <span id="1ded"><a href="https://blog.sessionstack.com/how-javascript-works-exceptions-best-practices-for-synchronous-and-asynchronous-environments-39f66b59f012" class="markup--anchor markup--li-anchor">How JavaScript works: exceptions + best practices for synchronous and asynchronous code (2021)</a></span> - <span id="3aac"><a href="http://evanw.github.io/source-map-visualization/" class="markup--anchor markup--li-anchor">Source Map Visualization</a> — Visualization of JavaScript source map data, which is useful for debugging problems with generated source maps. (<a href="https://github.com/evanw/source-map-visualization" class="markup--anchor markup--li-anchor">Code</a>)</span> - <span id="af8a"><a href="https://github.com/Thinkmill/manypkg" class="markup--anchor markup--li-anchor">Manypkg</a> — Linter for package.json files in Yarn, Bolt or pnpm monorepos.</span> - <span id="5ebb"><a href="https://github.com/coderaiser/putout" class="markup--anchor markup--li-anchor">Putout</a> — Pluggable and configurable code transformer with built-in eslint, babel plugins and jscodeshift codemods support. (<a href="https://putout.cloudcmd.io/" class="markup--anchor markup--li-anchor">Editor</a>)</span> - <span id="2f7d"><a href="https://github.com/simonhaenisch/prettier-plugin-organize-imports" class="markup--anchor markup--li-anchor">Prettier Plugin: Organize Imports</a></span> - <span id="125d"><a href="https://www.valentinog.com/blog/error/" class="markup--anchor markup--li-anchor">A mostly complete guide to error handling in JavaScript (2020)</a></span> - <span id="1342"><a href="https://github.com/stoeffel/awesome-fp-js" class="markup--anchor markup--li-anchor">Awesome FP JS</a></span> - <span id="7099"><a href="https://perf.link/" class="markup--anchor markup--li-anchor">Perflink</a> — JS Benchmarks.</span> - <span id="37f0"><a href="https://jasonformat.com/element-worklet/" class="markup--anchor markup--li-anchor">Element Worklet (2021)</a></span> - <span id="6977"><a href="https://github.com/mdn/js-examples" class="markup--anchor markup--li-anchor">MDN JS Code Examples</a></span> - <span id="dfcd"><a href="https://www.digitalocean.com/community/tutorials/understanding-hoisting-in-javascript" class="markup--anchor markup--li-anchor">Understanding Hoisting in JavaScript (2021)</a></span> - <span id="7ace"><a href="https://github.com/ahmaazouzi/js_good_parts" class="markup--anchor markup--li-anchor">JavaScript, the Good Parts Notes</a></span> - <span id="4708"><a href="http://www.franktip.org/pubs/oopsla2017promises.pdf" class="markup--anchor markup--li-anchor">A Model for Reasoning About JavaScript Promises (2017)</a></span> - <span id="35d5"><a href="https://github.com/privatenumber/minification-benchmarks" class="markup--anchor markup--li-anchor">JavaScript Minification Benchmarks</a> (<a href="https://news.ycombinator.com/item?id=26048291" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="e797"><a href="https://v8.dev/blog/adaptor-frame" class="markup--anchor markup--li-anchor">Faster JavaScript Calls (2021)</a> (<a href="https://news.ycombinator.com/item?id=26143648" class="markup--anchor markup--li-anchor">HN</a>)</span> - <span id="605d"><a href="https://web.dev/streams/" class="markup--anchor markup--li-anchor">Streams — The definitive guide (2021)</a></span> - <span id="bb91"><a href="https://github.com/sorrycc/awesome-javascript" class="markup--anchor markup--li-anchor">Awesome JavaScript</a></span> If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> Or checkout my personal resource Site: <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 18, 2021](https://medium.com/p/243255451e74). <a href="https://medium.com/@bryanguner/my-take-on-awesome-javascript-243255451e74" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,156 @@ My Favorite VSCode Themes ========================= Themes ------------------------------------------------------------------------ ### My Favorite VSCode Themes ### Product Icon Themes: ### Fluent Icons A product icon theme for Visual Studio Code <figure><img src="https://cdn-images-1.medium.com/max/800/0*wE_xUE1f0GU8GBGo.png" class="graf-image" /></figure><a href="https://code.visualstudio.com/api/extension-guides/product-icon-theme" class="markup--anchor markup--p-anchor">Product icons themes</a> allow theme authors to customize the icons used in VS Code’s built-in views: all icons except file icons (covered by file icon themes) and icons contributed by extensions. This extension uses <a href="https://www.figma.com/community/file/836835755999342788/Microsoft-Fluent-System-Icons" class="markup--anchor markup--p-anchor">Fluent Icons</a>. ### Install 1. <span id="5f77">Install the icon theme from the <a href="https://marketplace.visualstudio.com/items?itemName=miguelsolorio.fluent-icons" class="markup--anchor markup--li-anchor">Marketplace</a></span> 2. <span id="6411">Open the command palette (`Ctrl/Cmd + Shift + P`) and search for `Preferences: Product Icon Theme`</span> 3. <span id="0613">Select `Fluent Icons`</span> ### TBC… ------------------------------------------------------------------------ ### <a href="https://vscodethemes.com/e/pushqrdx.theme-monokai-oblique-vscode" class="markup--anchor markup--h3-anchor">Monokai Oblique by pushqrdx</a> Monokai inspired theme for <a href="https://vscodethemes.com/e/pushqrdx.theme-monokai-oblique-vscode" class="markup--anchor markup--p-anchor">Visual Studio Code</a> and <a href="https://github.com/pushqrdx/monokai" class="markup--anchor markup--p-anchor">Visual Studio IDE</a>. <figure><img src="https://cdn-images-1.medium.com/max/800/0*43PXQoFMOr28C7_B.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/monokai.theme-monokai-pro-vscode" class="markup--anchor markup--h3-anchor">Monokai Pro by monokai (commercial)</a> Beautiful functionality for professional developers, from the author of the original Monokai color scheme. <figure><img src="https://cdn-images-1.medium.com/max/800/0*qwLfKRWuJl0hLZ2m.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/sdras.night-owl" class="markup--anchor markup--h3-anchor">Night Owl by Sarah Drasner</a> A VS Code theme for the night owls out there. Works well in the daytime, too, but this theme is fine-tuned for those of us who like to code late into the night. Color choices have taken into consideration what is accessible to people with color blindness and in low-light circumstances. Decisions were also based on meaningful contrast for reading comprehension and for optimal razzle dazzle. ✨ <figure><img src="https://cdn-images-1.medium.com/max/800/0*w4jwUZlACQz-ndRu.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/will-stone.plastic" class="markup--anchor markup--h3-anchor">Plastic by Will Stone</a> A simple theme. <figure><img src="https://cdn-images-1.medium.com/max/800/0*xr3ul5T1_CAsnyWR.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/arcticicestudio.nord-visual-studio-code" class="markup--anchor markup--h3-anchor">Nord by arcticicestudio</a> An arctic, north-bluish clean and elegant Visual Studio Code theme. <figure><img src="https://cdn-images-1.medium.com/max/800/0*yQMVpYfepk53HNxN.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/daylerees.rainglow" class="markup--anchor markup--h3-anchor">Rainglow by Dayle Rees</a> Collection of 320+ beautiful syntax and UI themes. <figure><img src="https://cdn-images-1.medium.com/max/800/0*FpJBK3DBT1FUmuLF.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/mischah.relaxed-theme" class="markup--anchor markup--h3-anchor">Relaxed Theme by Michael Kühnel</a> A relaxed theme to take a more relaxed view of things. <figure><img src="https://cdn-images-1.medium.com/max/800/0*bdPe8FIrL8F9qFqx.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/ahmadawais.shades-of-purple" class="markup--anchor markup--h3-anchor">Shades of Purple by Ahmad Awais</a> ⚡ A professional theme with hand-picked & bold shades of purple 💜 to go along with your VS Code. A custom VS Code theme with style. <figure><img src="https://cdn-images-1.medium.com/max/800/0*lyNNDrSPE5fpaMBZ.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/Endormi.2077-theme" class="markup--anchor markup--h3-anchor">2077 theme by Endormi</a> Cyberpunk 2077 inspired theme <figure><img src="https://cdn-images-1.medium.com/max/800/0*1VdJDagHs-YTIicE.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/dustinsanders.an-old-hope-theme-vscode" class="markup--anchor markup--h3-anchor">An Old Hope Theme by Dustin Sanders</a> VSCode theme inspired by a galaxy far far away… <figure><img src="https://cdn-images-1.medium.com/max/800/0*8JZCxiWSVdupy-HQ.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/wart.ariake-dark" class="markup--anchor markup--h3-anchor">Ariake Dark by wart</a> Dark VSCode theme inspired by Japanese traditional colors and the poetry composed 1000 years ago. <figure><img src="https://cdn-images-1.medium.com/max/800/0*Pm8gFuyXa_xNniuP.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/akamud.vscode-theme-onedark" class="markup--anchor markup--h3-anchor">Atom One Dark Theme by Mahmoud Ali</a> One Dark Theme based on Atom. <figure><img src="https://cdn-images-1.medium.com/max/800/0*YBzFlHIhCnEXPKsb.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/emroussel.atomize-atom-one-dark-theme" class="markup--anchor markup--h3-anchor">Atomize by emroussel</a> A detailed and accurate Atom One Dark Theme. <figure><img src="https://cdn-images-1.medium.com/max/800/0*trGkLz0fLzZMjNX_.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/teabyii.ayu" class="markup--anchor markup--h3-anchor">Ayu by teabyii</a> A simple theme with bright colors and comes in three versions — dark, light and mirage for all day long comfortable work. <figure><img src="https://cdn-images-1.medium.com/max/800/0*YL26P4BF0Kz-0ck9.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/eckertalex.borealis" class="markup--anchor markup--h3-anchor">Borealis Theme by Alexander Eckert</a> VS Code theme inspired by the calm colors of the aurora borealis in Alaska. <figure><img src="https://cdn-images-1.medium.com/max/800/0*Df5XXUX50azLyP7K.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/ultradracula.captain-sweetheart" class="markup--anchor markup--h3-anchor">Captain Sweetheart by ultradracula</a> Tuff but sweet theme. <figure><img src="https://cdn-images-1.medium.com/max/800/0*93oi3wFSt7uH62VR.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/Yummygum.city-lights-theme" class="markup--anchor markup--h3-anchor">City Lights by Yummygum</a> 🏙 Yummygum’s Official City Lights suite <figure><img src="https://cdn-images-1.medium.com/max/800/0*LwpZlufyoKuCVjqn.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/wesbos.theme-cobalt2" class="markup--anchor markup--h3-anchor">Cobalt2 Theme Official by Wes Bos</a> 🔥 Official theme by Wes Bos. <figure><img src="https://cdn-images-1.medium.com/max/800/0*8KsnUfTVU-A9Aqcl.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/dracula-theme.theme-dracula" class="markup--anchor markup--h3-anchor">Dracula Official by Dracula Theme</a> Official Dracula Theme. A dark theme for many editors, shells, and more. <figure><img src="https://cdn-images-1.medium.com/max/800/0*xGaF3Cs8iHoC5gUr.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/bogdanlazar.edge" class="markup--anchor markup--h3-anchor">Edge by Bogdan Lazar</a> A simple theme with bright colors in three variants — Night Sky, Serene and Ocean for all day long comfortable work. <figure><img src="https://cdn-images-1.medium.com/max/800/0*qELxjfUYJNuRISgB.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/fisheva.eva-theme" class="markup--anchor markup--h3-anchor">Eva Theme by fisheva</a> A colorful and semantic coloring code theme. <figure><img src="https://cdn-images-1.medium.com/max/800/0*Dzw_28GVEGa10m-9.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/nopjmp.fairyfloss" class="markup--anchor markup--h3-anchor">Fairy Floss by nopjmp and sailorhg</a> A fun, purple-based pastel/candy/daydream fairyfloss theme made by sailorhg. <figure><img src="https://cdn-images-1.medium.com/max/800/0*wJkmVL0w1tz4n4_H.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/thomaspink.theme-github" class="markup--anchor markup--h3-anchor">GitHub Theme by Thomas Pink</a> GitHub Theme for Visual Studio Code. <figure><img src="https://cdn-images-1.medium.com/max/800/0*H4ZAOtLrAniVho93.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/DimitarNonov.jellybeans-theme" class="markup--anchor markup--h3-anchor">Jellybeans Theme by Dimitar Nonov</a> Jellybeans Theme for Visual Studio Code. <figure><img src="https://cdn-images-1.medium.com/max/800/0*oMhZGGsUfm8rqLtJ.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/whizkydee.material-palenight-theme" class="markup--anchor markup--h3-anchor">Material Palenight Theme by whizkydee</a> An elegant and juicy material-like theme for Visual Studio Code. <figure><img src="https://cdn-images-1.medium.com/max/800/0*cw3IGUQSFahiPgiH.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/Equinusocio.vsc-material-theme" class="markup--anchor markup--h3-anchor">Material Theme by Mattia Astorino</a> The most epic theme now for Visual Studio Code. <figure><img src="https://cdn-images-1.medium.com/max/800/0*2YvsABxfZ4Cv1Y_j.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/u29dc.mno" class="markup--anchor markup--h3-anchor">Mno by u29dc</a> Minimal monochrome theme. <figure><img src="https://cdn-images-1.medium.com/max/800/0*_NT4CQBGRRlFQl9q.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/smlombardi.slime" class="markup--anchor markup--h3-anchor">Slime Theme by smlombardi</a> A dark syntax/workbench theme for Visual Studio Code — optimized for SCSS, HTML, JS, TS, Markdown, and PHP files. <figure><img src="https://cdn-images-1.medium.com/max/800/0*-ldv4DoOVntnZbBt.png" class="graf-image" /></figure>### <a href="https://vscodethemes.com/e/selfrefactor.niketa-theme" class="markup--anchor markup--h3-anchor">Niketa Theme by Dejan Toteff</a> Collection of 18 light themes separated in 4 groups by background’s brightness. <figure><img src="https://cdn-images-1.medium.com/max/800/0*n_iRSy_1IDOgajFu.png" class="graf-image" /></figure>### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 18, 2021](https://medium.com/p/9bab65af3f0f). <a href="https://medium.com/@bryanguner/my-favorite-vscode-themes-9bab65af3f0f" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,275 @@ Front End Interview Questions Part 2 ==================================== These will focus more on vocabulary and concepts than the application driven approach in my last post! ------------------------------------------------------------------------ #### <a href="http://medium.com/codex" class="markup--anchor markup--h4-anchor">CODEX</a> ### Front End Interview Questions Part 2 #### These will focus more on vocabulary and concepts than the application-driven approach in my last post! <figure><img src="https://cdn-images-1.medium.com/max/1200/0*D3yQI42gBkYpnLXY.jpg" class="graf-image" /></figure> ### Here’s part one for reference: <a href="https://bryanguner.medium.com/the-web-developers-technical-interview-e347d7db3822" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/the-web-developers-technical-interview-e347d7db3822"><strong>The Web Developer’s Technical Interview</strong><br /> <em>Questions….Answers… and links to the missing pieces.</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/the-web-developers-technical-interview-e347d7db3822" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> - <span id="0232">**If you were to describe semantic HTML to the next cohort of students, what would you say?**</span> Semantic HTML is markup that conveys meaning, not appearance, to search engines to make everything easier to identify. - <span id="37b8">**Name two big differences between display: block; and display: inline;.**</span> block starts on a new line and takes up the full width of the content. inline starts on the same line as previous content, in line with other content, and takes up only the space needed for the content. · **What are the 4 areas of the box model?** content, padding, border, margin · **While using flexbox, what axis does the following property work on: align-items: center?** cross-axis · **Explain why git is valuable to a team of developers.** Allows you to dole out tiny pieces of a large project to many developers who can all work towards the same goal on their own chunks, allows roll back if you make a mistake; version control. · **What is the difference between an adaptive website and a fully responsive website?** An adaptive website “adapts” to fit a pre-determined set of screen sizes/devices, and a responsive one changes to fit all devices. · **Describe what it means to be mobile first vs desktop first.** It means you develop/code the site with mobile in mind first and work your way outward in screen size. · **What does font-size: 62.5% in the html tag do for us when using rem units?** This setting makes it so that 1 rem = 10 px for font size, easier to calculate. · **How would you describe preprocessing to someone new to CSS?** Preprocessing is basically a bunch of functions and variables you can use to store CSS settings in different ways that make it easier to code CSS. · **What is your favorite concept in preprocessing? What is the concept that gives you the most trouble?** Favorite is (parametric) mixins; but I don’t have a lot of trouble with preprocessing. What gives me the most trouble is knowing ahead of time what would be good to go in a mixin for a given site. · **Describe the biggest difference between .forEach & .map.** forEach iterates over an array item by item, and map calls a function on each array item, but returns another/additional array, unlike forEach. · **What is the difference between a function and a method?** Every function is an object. If a value is a function, it is a method. Methods have to be ‘received’ by something; functions do not. · **What is closure?** It is code identified elsewhere that we can use later; gives the ability to put functions together. If a variable isn’t defined, a function looks outward for context. · **Describe the four rules of the ‘this’ keyword.** 1. Window/global binding — this is the window/console object. ‘use strict’; to prevent window binding. 2. Implicit binding — when a function is called by a dot, the object preceding the dot is the ‘this’. 80 percent of ‘this’ is from this type of binding. 3. New binding — points to new object created & returned by constructor function 4. Explicit binding — whenever call, bind, or apply are used. · **Why do we need super() in an extended class?** Super ties the parent to the child. - <span id="d57b">**What is the DOM?**</span> Document object model, the ‘window’ or container that holds all the page’s elements - <span id="6172">**What is an event?**</span> An event is something happening on or to the page, like a mouse click, doubleclick, key up/down, pointer out of element/over element, things like this. There are tons of “events” that javascript can detect. - <span id="75c5">**What is an event listener?**</span> Javascript command that ‘listens’ for an event to happen on the page to a given element and then runs a function when that event happens - <span id="157d">**Why would we convert a NodeList into an Array?**</span> A NodeList isn’t a real array, so it won’t have access to array methods such as slice or map. - <span id="6934">**What is a component?**</span> Reusable pieces of code to display info in a consistent repeatable way · **What is React JS and what problems does it try and solve? Support your answer with concepts introduced in class and from your personal research on the web.** ReactJS is a library used to build large applications. It’s very good at assisting developers in manipulating the DOM element to create rich user experiences. We need a way to off-load the state/data that our apps use, and React helps us do that. · **What does it mean to *think* in react?** It makes you think about how to organize/build apps a little differently because it’s very scalable and allows you to build huge apps. React’s one-way data flow makes everything modular and fast. You can build apps top-down or bottom-up. · **Describe state.** Some data we want to display. · **Describe props.** Props are like function arguments in JS and attributes in HTML. · **What are side effects, and how do you sync effects in a React component to state or prop changes?** Side effects are anything that affects something outside the executed function’s scope like fetching data from an API, a timer, or logging. · **Explain benefit(s) using client-side routing?** Answer: It’s much more efficient than the traditional way, because a lot of data isn’t being transmitted unnecessarily. · **Why would you use class component over function components (removing hooks from the question)?** Because some companies still use class components and don’t want to switch their millions of dollars’ worth of code over to all functional hooks, and also there’s currently a lot more troubleshooting content out there for classes that isn’t out there for hooks. Also, functional components are better when you don’t need state, presentational components. · **Name three lifecycle methods and their purposes.** componentDidMount = do the stuff inside this ‘function’ after the component mounted componentDidUpdate = do the stuff inside this function after the component updated componentWillUnmount = clean-up in death/unmounting phase · **What is the purpose of a custom hook?** allow you to apply non-visual behavior and stateful logic throughout your components by reusing the same hook over and over again · **Why is it important to test our apps?** Gets bugs fixed faster, reduces regression risk, makes you consider/work out the edge cases, acts as documentation, acts as safety net when refactoring, makes code more trustworthy · **What problem does the context API help solve?** You can store data in a context object instead of prop drilling. · **In your own words, describe actions, reducers and the store and their role in Redux. What does each piece do? Why is the store known as a ‘single source of truth’ in a redux application?** Everything that changes within your app is represented by a single JS object called the store. The store contains state for our application. When changes are made to our application state, we never write to our store object but rather clone the state object, modify the clone, and replace the original state with the new copy, never mutating the original object. Reducers are the only place we can update our state. Actions tell our reducers “how” to update the state, and perhaps with what data it should be updated, but only a reducer can actually update the state. · **What is the difference between Application state and Component state? When would be a good time to use one over the other?** App state is global, component state is local. Use component state when you have component-specific variables. · **Describe redux-thunk, what does it allow us to do? How does it change our action-creators?** Redux Thunk is middleware that provides the ability to handle asynchronous operations inside our Action Creators, because reducers are normally synchronous. · **What is your favorite state management system you’ve learned and this sprint? Please explain why!** Redux, because I felt it was easier to understand than the context API. · **Explain what a token is used for.** Many services out in the wild require the client (our React app, for example) to provide proof that it’s authenticated with them. The server running these services can issue a JWT (JSON Web Token) as the authentication token, in exchange for correct login credentials. · **What steps can you take in your web apps to keep your data secure?** As we build our web apps, we will most likely have some “protected” routes — routes that we only want to render if the user has logged in and been authenticated by our server. The way this normally works is we make a login request, sending the server the user’s username and password. The server will check those credentials against what is in the database, and if it can authenticate the user, it will return a token. Once we have this token, we can add two layers of protection to our app. One with protected routes, the other by sending an authentication header with our API calls (as we learned in the above objective). · **Describe how web servers work.** The “world wide web” (which we’ll refer to as “the web”) is just a part of the internet — which is itself a network of interconnected computers. The web is just one way to share data over the internet. It consists of a body of information stored on web servers, ready to be shared across the world. The term “web server” can mean two things: · a computer that stores the code for a website · a program that runs on such a computer The physical computer device that we call a web server is connected to the internet, and stores the code for different websites to be shared across the world at all times. When we load the code for our websites, or web apps, on a server like this, we would say that the server is “hosting” our website/app. · **Which HTTP methods can be mapped to the CRUD acronym that we use when interfacing with APIs/Servers.** Create, Read, Update, Delete · **Mention two parts of Express that you learned about this week.** Routing/router, Middleware, convenience helpers · **Describe Middleware?** array of functions that get executed in the order they are introduced into the server code · **Describe a Resource?** o everything is a **resource**. o each resource is accessible via a **unique URI**. o resources can have multiple **representations**. o communication is done over a **stateless** protocol (HTTP). o management of resources is done via **HTTP methods**. · **What can the API return to help clients know if a request was successful?** 200 status code/201 status code · **How can we partition our application into sub-applications?** By dividing the code up into multiple files and ‘requiring’ them in the main server file. · **Explain the difference between Relational Databases and SQL.** SQL is the language used to access a relational database. · **Why do tables need a primary key?** To uniquely identify each record/row. · **What is the name given to a table column that references the primary key on another table.** Foreign key · **What do we need in order to have a *many to many* relationship between two tables.** An **intermediary table** that holds foreign keys that reference the primary key on the related tables. · **What is the purpose of using *sessions*?** The purpose is to persist data across requests. · **What does bcrypt do to help us store passwords in a secure manner?** o password hashing function. o implements salting both manual and automatically. o accumulative hashing rounds. · **What does bcrypt do to slow down attackers?** Having an algorithm that hashes the information multiple times (rounds) means an attacker needs to have the hash, know the algorithm used, and how many rounds were used to generate the hash in the first place. So it basically makes it a lot more difficult to get somebody’s password. · **What are the three parts of the JSON Web Token?** Header, payload, signature ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: <a href="https://best-celery-b2d7c.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://best-celery-b2d7c.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>preview of the Web-Dev-Hub</em>best-celery-b2d7c.netlify.app</a><a href="https://best-celery-b2d7c.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 19, 2021](https://medium.com/p/86ddc0e91443). <a href="https://medium.com/@bryanguner/front-end-interview-questions-part-2-86ddc0e91443" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,464 @@ Web Developer Resource List Part 2 ================================== Because I compile these things compulsively anyway… ------------------------------------------------------------------------ ### Web Developer Resource List Part 2 #### Because I compile these things compulsively anyway… <figure><img src="https://cdn-images-1.medium.com/max/800/0*eEDATI6RAaEQw71I.jpg" class="graf-image" /></figure>- <span id="84dc"><a href="https://bgoonz.github.io/about.html#ansible" class="markup--anchor markup--li-anchor">Ansible</a></span> - <span id="1d08"><a href="https://bgoonz.github.io/about.html#awesome-lists" class="markup--anchor markup--li-anchor">Awesome Lists</a></span> - <span id="958d"><a href="https://bgoonz.github.io/about.html#continious-integration" class="markup--anchor markup--li-anchor">CI/CD</a></span> - <span id="eee2"><a href="https://bgoonz.github.io/about.html#data-science" class="markup--anchor markup--li-anchor">Data Science</a></span> - <span id="efef"><a href="https://bgoonz.github.io/about.html#docker" class="markup--anchor markup--li-anchor">Docker</a></span> - <span id="069b"><a href="https://bgoonz.github.io/about.html#dynamodb" class="markup--anchor markup--li-anchor">DynamoDB</a></span> - <span id="49cc"><a href="https://bgoonz.github.io/about.html#elasticsearch" class="markup--anchor markup--li-anchor">Elasticsearch</a></span> - <span id="a53b"><a href="https://bgoonz.github.io/about.html#environment-setups" class="markup--anchor markup--li-anchor">Environment Setups</a></span> - <span id="e5a2"><a href="https://bgoonz.github.io/about.html#epic-github-repos" class="markup--anchor markup--li-anchor">Epic Github Repos</a></span> - <span id="3439"><a href="https://bgoonz.github.io/about.html#golang" class="markup--anchor markup--li-anchor">Golang</a></span> - <span id="4a3d"><a href="https://bgoonz.github.io/about.html#grafana" class="markup--anchor markup--li-anchor">Grafana</a></span> - <span id="7b62"><a href="https://bgoonz.github.io/about.html#great-blogs" class="markup--anchor markup--li-anchor">Great Blogs</a></span> - <span id="ad80"><a href="https://bgoonz.github.io/about.html#knowledge-base" class="markup--anchor markup--li-anchor">Knowledge Base</a></span> - <span id="227d"><a href="https://bgoonz.github.io/about.html#kubernetes" class="markup--anchor markup--li-anchor">Kubernetes</a></span> - <span id="6ceb"><a href="https://bgoonz.github.io/about.html#kubernetes-storage" class="markup--anchor markup--li-anchor">Kubernetes Storage</a></span> - <span id="97b6"><a href="https://bgoonz.github.io/about.html#machine-learning" class="markup--anchor markup--li-anchor">Machine Learning</a></span> - <span id="5b37"><a href="https://bgoonz.github.io/about.html#monitoring" class="markup--anchor markup--li-anchor">Monitoring</a></span> - <span id="c262"><a href="https://bgoonz.github.io/about.html#mongodb" class="markup--anchor markup--li-anchor">MongoDB</a></span> - <span id="5857"><a href="https://bgoonz.github.io/about.html#programming" class="markup--anchor markup--li-anchor">Programming</a></span> - <span id="60a1"><a href="https://bgoonz.github.io/about.html#queues" class="markup--anchor markup--li-anchor">Queues</a></span> - <span id="2694"><a href="https://bgoonz.github.io/about.html#self-hosting" class="markup--anchor markup--li-anchor">Self Hosting</a></span> - <span id="d4a4"><a href="https://bgoonz.github.io/about.html#email-server-setups" class="markup--anchor markup--li-anchor">Email Server Setups</a></span> - <span id="6309"><a href="https://bgoonz.github.io/about.html#mailscanner-server-setups" class="markup--anchor markup--li-anchor">Mailscanner Server Setups</a></span> - <span id="1c97"><a href="https://bgoonz.github.io/about.html#serverless" class="markup--anchor markup--li-anchor">Serverless</a></span> - <span id="bafa"><a href="https://bgoonz.github.io/about.html#sysadmin-references" class="markup--anchor markup--li-anchor">Sysadmin References</a></span> - <span id="5fc4"><a href="https://bgoonz.github.io/about.html#vpn" class="markup--anchor markup--li-anchor">VPN</a></span> - <span id="81ef"><a href="https://bgoonz.github.io/about.html#web-frameworks" class="markup--anchor markup--li-anchor">Web Frameworks</a></span> ### Ansible - <span id="abab"><a href="https://github.com/zimmertr/Bootstrap-Kubernetes-with-LXC" class="markup--anchor markup--li-anchor">Kubernetes on LXC with Ansible</a></span> ### Awesome Lists - <span id="4570"><a href="https://github.com/exAspArk/awesome-chatops" class="markup--anchor markup--li-anchor">Awesome ChatOps</a></span> - <span id="e8b4"><a href="https://github.com/binhnguyennus/awesome-scalability" class="markup--anchor markup--li-anchor">Awesome Scalability</a></span> - <span id="9050"><a href="https://github.com/drone/awesome-drone" class="markup--anchor markup--li-anchor">Awesome Drone</a></span> ### Epic Github Repos - <span id="1cb2"><a href="https://github.com/mlabouardy?tab=repositories" class="markup--anchor markup--li-anchor">mlabouardy</a></span> ### Authentication - <span id="19fa"><a href="https://mapr.com/blog/how-secure-elasticsearch-and-kibana/" class="markup--anchor markup--li-anchor">Nginx ES and Kibana Proxy with LDAP</a></span> ### Data Science - <span id="cf4c"><a href="https://github.com/bulutyazilim/awesome-datascience" class="markup--anchor markup--li-anchor">bulutyazilim — datascience awesome list</a></span> ### Grafana - <span id="db81"><a href="https://github.com/mlabouardy/grafana-dashboards" class="markup--anchor markup--li-anchor">Grafana Dashboards @mlabouardy</a></span> ### Docker #### Deploy Stacks to your Swarm: 🐳 ❤️ Logging: - <span id="b7ff"><a href="https://github.com/shazChaudhry/docker-elastic" class="markup--anchor markup--li-anchor">shazChaudhry Swarm GELF Stack</a></span> Metrics: - <span id="52cc"><a href="https://github.com/stefanprodan/swarmprom" class="markup--anchor markup--li-anchor">StefanProdan — Prometheus, Grafana, cAdvisor, Node Exporter and Alert Manager</a></span> - <span id="d0e5"><a href="https://github.com/mlabouardy/swarm-tick" class="markup--anchor markup--li-anchor">Mlabouardy — Telegraf, InfluxDB, Chronograf, Kapacitor & Slack</a></span> #### Awesome Docker Repos - <span id="8b0f"><a href="https://github.com/jessfraz/dockerfiles" class="markup--anchor markup--li-anchor">Jess’s Dockerfiles</a></span> - <span id="46e9"><a href="https://github.com/firecat53/dockerfiles" class="markup--anchor markup--li-anchor">Firecat53’s Dockerfiles</a></span> #### RaspberryPi ARM Images: - <span id="1cd6"><a href="https://hub.docker.com/r/arm32v6/alpine/" class="markup--anchor markup--li-anchor">arm32v6/alpine:edge</a></span> - <span id="c5c2"><a href="https://hub.docker.com/r/arm32v6/golang/" class="markup--anchor markup--li-anchor">arm32v6/golang:alpine</a></span> - <span id="1b14"><a href="https://hub.docker.com/r/arm32v6/haproxy/" class="markup--anchor markup--li-anchor">arm32v6/haproxy:alpine</a></span> - <span id="a39c"><a href="https://hub.docker.com/r/arm32v6/node/" class="markup--anchor markup--li-anchor">arm32v6/node:alpine</a></span> - <span id="80fb"><a href="https://hub.docker.com/r/arm32v6/openjdk/" class="markup--anchor markup--li-anchor">arm32v6/openjdk:alpine</a></span> - <span id="13b3"><a href="https://hub.docker.com/r/arm32v6/postgres/" class="markup--anchor markup--li-anchor">arm32v6/postgres:alpine</a></span> - <span id="8a43"><a href="https://hub.docker.com/r/arm32v6/python/" class="markup--anchor markup--li-anchor">arm32v6/python:2.7-alpine3.6</a></span> - <span id="ef75"><a href="https://hub.docker.com/r/arm32v6/python/" class="markup--anchor markup--li-anchor">arm32v6/python:3.6-alpine3.6</a></span> - <span id="846e"><a href="https://hub.docker.com/r/arm32v6/rabbitmq/" class="markup--anchor markup--li-anchor">arm32v6/rabbitmq:alpine</a></span> - <span id="bfdc"><a href="https://hub.docker.com/r/arm32v6/redis/" class="markup--anchor markup--li-anchor">arm32v6/redis:alpine</a></span> - <span id="b879"><a href="https://hub.docker.com/r/arm32v6/ruby/" class="markup--anchor markup--li-anchor">arm32v6/ruby:alpine3.6</a></span> - <span id="3cbe"><a href="https://hub.docker.com/r/arm32v6/tomcat/" class="markup--anchor markup--li-anchor">arm32v6/tomcat:alpine</a></span> - <span id="18e7"><a href="https://hub.docker.com/r/arm32v6/traefik/" class="markup--anchor markup--li-anchor">arm32v6/traefik:latest</a></span> - <span id="502c"><a href="https://hub.docker.com/r/arm32v7/debian/" class="markup--anchor markup--li-anchor">arm32v7/debian:lates</a></span> - <span id="c976"><a href="https://hub.docker.com/r/hypriot/rpi-redis/" class="markup--anchor markup--li-anchor">hypriot/rpi-redis</a></span> - <span id="5c87"><a href="https://github.com/jixer/rpi-mongo" class="markup--anchor markup--li-anchor">jixer/rpi-mongo</a></span> - <span id="15e1"><a href="https://github.com/alexellis/docker-arm/tree/master/images/armhf" class="markup--anchor markup--li-anchor">alexellis/armhf</a></span> - <span id="578c"><a href="https://github.com/zeiot" class="markup--anchor markup--li-anchor">zeiot: rpi-prometheus stack</a></span> - <span id="0ce9"><a href="https://hub.docker.com/u/larmog/" class="markup--anchor markup--li-anchor">larmog</a></span> - <span id="3662"><a href="https://github.com/andresvidal/rpi3-mongodb3" class="markup--anchor markup--li-anchor">Rpi MongoDB</a></span> - <span id="2ea6"><a href="https://github.com/armswarm" class="markup--anchor markup--li-anchor">ARM Swarm</a></span> #### Docker Image Repositories - <span id="202f"><a href="https://hub.docker.com/u/arm32v6/" class="markup--anchor markup--li-anchor">Docker Hub: arm32v6</a></span> - <span id="67a9"><a href="https://hub.docker.com/u/armv7/" class="markup--anchor markup--li-anchor">Docker Hub: armv7</a></span> - <span id="5e86"><a href="https://github.com/luvres/armhf" class="markup--anchor markup--li-anchor">Github: Luvres Armhf</a></span> - <span id="3f80"><a href="https://github.com/ulsmith/alpine-apache-php7" class="markup--anchor markup--li-anchor">Apache/PHP7 on Alpine</a></span> - <span id="6cff"><a href="https://github.com/docker-library/tomcat/blob/master/8.0/jre8-alpine/Dockerfile" class="markup--anchor markup--li-anchor">Tomcat on Alpine</a></span> - <span id="57cd"><a href="https://github.com/jwilder/nginx-proxy" class="markup--anchor markup--li-anchor">Nginx (jwilder)</a></span> - <span id="7aa0"><a href="https://github.com/smebberson/docker-alpine" class="markup--anchor markup--li-anchor">Alpine Images (smebberson)</a></span> - <span id="6e95"><a href="https://hub.docker.com/u/sameersbn/" class="markup--anchor markup--li-anchor">SameerSbn</a></span> - <span id="d74c"><a href="https://hub.docker.com/u/linuxserver/" class="markup--anchor markup--li-anchor">Linuxserver.io</a></span> - <span id="54e0"><a href="https://hub.docker.com/r/nimmis/alpine-apache-php5/" class="markup--anchor markup--li-anchor">Apache-PHP5</a></span> - <span id="ea4c"><a href="https://github.com/harobed/docker-php-ssmtp" class="markup--anchor markup--li-anchor">Apache-PHP-Email</a></span> #### Docker-Awesome-Lists - <span id="b67a"><a href="https://github.com/AdamBien/docklands" class="markup--anchor markup--li-anchor">Java Docker Services</a></span> - <span id="158f"><a href="https://gist.github.com/shouse/a14c44e97a2cd2a1f030" class="markup--anchor markup--li-anchor">shouse Docker Awesome List</a></span> #### Docker Blogs: - <span id="5e06"><a href="https://hub.docker.com/r/emilevauge/whoami/" class="markup--anchor markup--li-anchor">Whoami used in Traefik Docs</a></span> - <span id="3fd6"><a href="https://github.com/spartakode/my-docker-repos/blob/master/sqlite3/Dockerfile" class="markup--anchor markup--li-anchor">Sqlite with Docker</a></span> - <span id="433f"><a href="https://github.com/mookjp/rails-docker-example" class="markup--anchor markup--li-anchor">Rails with Postgres and Redis</a></span> - <span id="ff65"><a href="https://testdriven.io/asynchronous-tasks-with-flask-and-redis-queue" class="markup--anchor markup--li-anchor">Async Tasks with Flask and Redis</a></span> - <span id="e4f4"><a href="https://github.com/davidmukiibi/docker-flask" class="markup--anchor markup--li-anchor">Flask and Postgres</a></span> - <span id="2935"><a href="http://ict.renevdmark.nl/2016/07/05/elastic-beats-on-raspberry-pi/" class="markup--anchor markup--li-anchor">Elastic Beats on RaspberryPi</a></span> #### Docker Storage - <span id="a2ce"><a href="https://github.com/rancher/convoy" class="markup--anchor markup--li-anchor">Rancher Convoy</a></span> - <span id="118f"><a href="https://flocker.readthedocs.io/en/latest/flocker-features/storage-backends.html#supported-backends" class="markup--anchor markup--li-anchor">Flocker</a></span> - <span id="2312"><a href="http://node.mu/2017/06/30/scaleio-on-ubuntu-xenial/" class="markup--anchor markup--li-anchor">EMC ScaleIO</a></span> - <span id="0ab0"><a href="https://github.com/lucj/swarm-rexray-ceph" class="markup--anchor markup--li-anchor">RexRay Ceph with Ansible</a></span> - <span id="f428"><a href="http://containx.io/" class="markup--anchor markup--li-anchor">ContainX</a></span> #### OpenFaas: - <span id="da90"><a href="https://github.com/openfaas/faas/releases" class="markup--anchor markup--li-anchor">FaaS Releases</a></span> - <span id="3af4"><a href="https://github.com/openfaas/workshop" class="markup--anchor markup--li-anchor">FaaS Workshop</a></span> #### Prometheus / Grafana on Swarm: - <span id="f482"><a href="https://github.com/stefanprodan/swarmprom" class="markup--anchor markup--li-anchor">StefanProdan — SwarmProm</a></span> - <span id="6ded"><a href="https://medium.com/@soumyadipde/monitoring-in-docker-stacks-its-that-easy-with-prometheus-5d71c1042443" class="markup--anchor markup--li-anchor">Monitoring with Prometheus</a></span> - <span id="2631"><a href="https://github.com/uschtwill/docker_monitoring_logging_alerting" class="markup--anchor markup--li-anchor">UschtWill — Prometheus Grafana Elastalert</a></span> - <span id="2849"><a href="https://github.com/chmod666org/docker-swarm-prometheus" class="markup--anchor markup--li-anchor">Chmod-Org Promethus with Blackbox</a></span> - <span id="3995"><a href="https://finestructure.co/blog/2016/5/16/monitoring-with-prometheus-grafana-docker-part-1" class="markup--anchor markup--li-anchor">Finestructure: Prometheus Tutorial</a></span> ### Logging / Kibana / Beats ### Libraries - <span id="b055"><a href="https://github.com/Delgan/loguru" class="markup--anchor markup--li-anchor">Loguru</a> | <a href="https://gist.github.com/M0r13n/0b8c62c603fdbc98361062bd9ebe8153" class="markup--anchor markup--li-anchor">Flask Example with Loguru</a></span> ### Frameworks - <span id="8e4c"><a href="https://github.com/shazChaudhry/docker-elastic" class="markup--anchor markup--li-anchor">shazChaudhry Swarm GELF Stack</a></span> ### Continious Integration: #### Circle-CI - <span id="0eac"><a href="https://circleci.com/docs/1.0/language-php/" class="markup--anchor markup--li-anchor">PHP with Circle-CI</a></span> #### Concourse - <span id="3f92"><a href="https://concourse.ci/docker-repository.html" class="markup--anchor markup--li-anchor">Setup Concourse Environment with Docker</a></span> - <span id="4284"><a href="https://blog.anynines.com/getting-started-with-concourse-ci-and-docker/" class="markup--anchor markup--li-anchor">Getting Started with Concourse and Docker</a></span> - <span id="7536"><a href="https://github.com/pivotalservices/concourse-pipeline-samples/tree/master/concourse-pipeline-patterns/gated-pipelines" class="markup--anchor markup--li-anchor">Concourse Gated Pipelines</a></span> - <span id="1a92"><a href="https://github.com/EugenMayer/concourseci-server-boilerplate" class="markup--anchor markup--li-anchor">Concourse Boilerplate</a></span> #### Jenkins - <span id="e55e"><a href="https://modess.io/jenkins-php/" class="markup--anchor markup--li-anchor">Modess — PHP with Jenkins</a></span> - <span id="e077"><a href="https://code.tutsplus.com/tutorials/setting-up-continuous-integration-continuous-deployment-with-jenkins--cms-21511" class="markup--anchor markup--li-anchor">CI/CD Nodejs Tutorial with Jenkins</a></span> - <span id="8663"><a href="https://medium.com/@mosheezderman/how-to-set-up-ci-cd-pipeline-for-a-node-js-app-with-jenkins-c51581cc783c" class="markup--anchor markup--li-anchor">CI/CD Nodejs Tutorial with Jenkins @medium</a></span> - <span id="c17d"><a href="https://github.com/shazChaudhry/docker-swarm-mode" class="markup--anchor markup--li-anchor">Epic CICD workflow with Jenkins, Gitlab, Sonar, Nexus</a></span> #### SwarmCi - <span id="ca48"><a href="https://github.com/ghostsquad/swarmci" class="markup--anchor markup--li-anchor">SwarmCI</a></span> #### Travis-CI - <span id="5050"><a href="https://docs.travis-ci.com/user/getting-started/" class="markup--anchor markup--li-anchor">Getting Started with Travis-CI (Original Docs)</a></span> - <span id="1f71"><a href="https://github.com/dwyl/learn-travis" class="markup--anchor markup--li-anchor">Getting Started with Travis-CI (dwyl — nodejs)</a></span> - <span id="12a1"><a href="https://matthewmoisen.com/blog/how-to-set-up-travis-ci-with-github-for-a-python-project/" class="markup--anchor markup--li-anchor">Blog Site with Travis-CI (Python)</a></span> - <span id="74dd"><a href="https://github.com/softwaresaved/build_and_test_examples/blob/master/travis/HelloWorld.md" class="markup--anchor markup--li-anchor">Build Tests with Python on Travis-CI</a></span> - <span id="0c8a"><a href="https://www.raywenderlich.com/109418/travis-ci-tutorial" class="markup--anchor markup--li-anchor">Moving app with Travis-CI</a></span> #### LambCI - <span id="5a62"><a href="https://github.com/lambci/lambci" class="markup--anchor markup--li-anchor">LambCI</a></span> ### DynamoDB #### DynamoDB Docs - <span id="f776"><a href="https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/SQLtoNoSQL.ReadData.Query.html" class="markup--anchor markup--li-anchor">AWS DynamoDB: SQL to NoSQL</a></span> #### DynamoDB Best Practices - <span id="db69"><a href="https://aws.amazon.com/blogs/database/choosing-the-right-dynamodb-partition-key/" class="markup--anchor markup--li-anchor">Choosing the Right Partition Key</a></span> - <span id="6d4c"><a href="https://cloudacademy.com/blog/amazon-dynamodb-ten-things/" class="markup--anchor markup--li-anchor">10 Things you should know</a></span> #### DynamoDB General Info - <span id="1006"><a href="https://medium.com/@yaofei/understand-dynamodb-b278f718ddb8" class="markup--anchor markup--li-anchor">Understanding DynamoDB</a></span> ### Elasticsearch #### Elasticsearch Documentation - <span id="4493"><a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/general-recommendations.html" class="markup--anchor markup--li-anchor">General Recommendation</a></span> - <span id="8921"><a href="https://www.elastic.co/blog/how-many-shards-should-i-have-in-my-elasticsearch-cluster" class="markup--anchor markup--li-anchor">How Many Shards in my Cluster</a></span> - <span id="8e3f"><a href="https://www.elastic.co/blog/managing-time-based-indices-efficiently" class="markup--anchor markup--li-anchor">Managing Time-Based Indices Efficiently</a></span> - <span id="bdc6"><a href="https://bonsai.io/2016/01/11/ideal-elasticsearch-cluster" class="markup--anchor markup--li-anchor">Elasticsearch Best Practices (Bonsai.io)</a></span> - <span id="300c"><a href="https://aws.amazon.com/premiumsupport/knowledge-center/elasticsearch-scale-up/" class="markup--anchor markup--li-anchor">AWS ES — Scaling up my Domain</a></span> #### Elasticsearch Cheetsheets: - <span id="1637"><a href="https://gist.github.com/ruanbekker/e8a09604b14f37e8d2f743a87b930f93" class="markup--anchor markup--li-anchor">My ES Cheatsheet</a></span> #### Elasticsearch Blogs - <span id="0f1a"><a href="https://qbox.io/blog/maximize-guide-elasticsearch-indexing-performance-part-1" class="markup--anchor markup--li-anchor">Maximize Elasticsearch Indexing Performance</a></span> - <span id="b16a"><a href="https://qbox.io/blog/authoritative-guide-elasticsearch-performance-tuning-part-1" class="markup--anchor markup--li-anchor">Autoritative Guide to ES Performance Tuning</a></span> - <span id="a39b"><a href="https://opendistro.github.io/for-elasticsearch-docs/docs/elasticsearch/full-text/" class="markup--anchor markup--li-anchor">Full text Search Queries</a></span> - <span id="e4d6"><a href="https://okfnlabs.org/blog/2013/07/01/elasticsearch-query-tutorial.html" class="markup--anchor markup--li-anchor">Query Elasticsearch</a></span> #### Elasticsearch Tools - <span id="daeb"><a href="https://github.com/mallocator/Elasticsearch-Exporter" class="markup--anchor markup--li-anchor">Export Data from ES to ES</a></span> ### Environment Setups: - <span id="efec"><a href="https://medium.com/aishik/install-golang-the-right-way-4743fee9255f" class="markup--anchor markup--li-anchor">Golang</a></span> ### Knowledge Base ### KB HTTPS - <span id="b222"><a href="https://blog.miguelgrinberg.com/post/running-your-flask-application-over-https" class="markup--anchor markup--li-anchor">How does HTTPS work (Miguel Grinberg)</a></span> ### Kubernetes - <span id="aafa"><a href="https://github.com/ramitsurana/awesome-kubernetes/blob/master/README.md" class="markup--anchor markup--li-anchor">Awesome Kubernetes</a></span> - <span id="6faa"><a href="https://cheatsheet.dennyzhang.com/cheatsheet-kubernetes-a4" class="markup--anchor markup--li-anchor">Kubernetes Cheatsheet</a></span> - <span id="7b5a"><a href="https://kubernetes.io/blog/2019/07/23/get-started-with-kubernetes-using-python/" class="markup--anchor markup--li-anchor">Getting Started: Python application on Kubernetes</a></span> - <span id="8945"><a href="https://semaphoreci.com/blog/kubernetes-deployment" class="markup--anchor markup--li-anchor">Kubernetes Deployments: The Ultimate Guide</a></span> - <span id="b6dc"><a href="https://www.digitalocean.com/community/tutorials/how-to-set-up-a-prometheus-grafana-and-alertmanager-monitoring-stack-on-digitalocean-kubernetes" class="markup--anchor markup--li-anchor">Prometheus Monitoring Stack with Kubernetes on DO</a></span> - <span id="7d6a"><a href="https://tech.evaneos.com/traefik-as-an-ingress-controller-on-minikube-with-kustomize-helm-a3b2f44a5c2a" class="markup--anchor markup--li-anchor">Traefik as an Ingress Controller on Minikube</a></span> - <span id="1a6e"><a href="https://itnext.io/traefik-cluster-as-ingress-controller-for-kubernetes-99fa6c34402" class="markup--anchor markup--li-anchor">Traefik Ingress with Kubernetes</a></span> - <span id="7ac9"><a href="https://medium.com/faun/manually-connect-to-your-kubernetes-cluster-from-the-outside-d852346a7f0a" class="markup--anchor markup--li-anchor">Manual Connect your Kubernetes from Outside</a></span> - <span id="8967"><a href="https://pascalw.me/blog/2019/07/02/k3s-https-letsencrypt.html" class="markup--anchor markup--li-anchor">HTTPS Letsencrypt on k3s</a></span> - <span id="4e91"><a href="https://medium.com/google-cloud/kubernetes-nodeport-vs-loadbalancer-vs-ingress-when-should-i-use-what-922f010849e0" class="markup--anchor markup--li-anchor">Kubernetes: Nodeport vs Loadbalancer</a></span> - <span id="0df0"><a href="https://medium.com/kubernetes-tutorials/simple-management-of-prometheus-monitoring-pipeline-with-the-prometheus-operator-b445da0e0d1a" class="markup--anchor markup--li-anchor">Prometheus Monitoring Pipeline on Kubernetes</a></span> - <span id="8eef"><a href="https://rancher.com/blog/2018/2018-08-07-cicd-pipeline-k8s-autodevops-rancher-and-gitlab/" class="markup--anchor markup--li-anchor">Building a Kubernetes CI/CD Pipeline with Rancher</a></span> - <span id="57cf"><a href="https://medium.com/swlh/universal-cicd-pipeline-on-aws-and-k8s-7b4129fac5d4" class="markup--anchor markup--li-anchor">Building a Kubernetes CI/CD Pipeline with AWS</a></span> - <span id="d761"><a href="https://itnext.io/explore-gitea-drone-ci-cd-on-k3s-4a9e99f8b938" class="markup--anchor markup--li-anchor">Gitea and Drone CI/CD on k3s</a></span> - <span id="bde3"><a href="https://github.com/openfaas-incubator/openfaas-linkerd2/blob/master/README.md" class="markup--anchor markup--li-anchor">Serverless with Kubernetes using OpenFaaS and Linkerd2</a></span> - <span id="236a"><a href="https://rancher.com/blog/2019/how-to-manage-kubernetes-with-kubectl/" class="markup--anchor markup--li-anchor">Managing Kubernetes with kubectl</a></span> - <span id="b0af"><a href="https://gist.github.com/alexellis/a6ee5f094f86987a0dc508442220c52a" class="markup--anchor markup--li-anchor">OpenFaas Workshop on k3s</a></span> - <span id="b217"><a href="http://collabnix.com/kubernetes-hands-on-lab-4-deploy-application-stack-using-helm-on-play-with-kubernetes-platform/" class="markup--anchor markup--li-anchor">Kubernetes Hands-On Lab with collabnix</a></span> - <span id="e717"><a href="https://medium.com/asl19-developers/create-readwritemany-persistentvolumeclaims-on-your-kubernetes-cluster-3a8db51f98e3" class="markup--anchor markup--li-anchor">Create ReadWrite Persistent Volumes on Kubernetes</a></span> - <span id="fca8"><a href="https://medium.com/@mattiaperi/kubernetes-cluster-with-k3s-and-multipass-7532361affa3" class="markup--anchor markup--li-anchor">Kubernetes Clusters with k3s and multipass</a></span> ### Kubernetes Storage - <span id="4413"><a href="https://kadalu.io/docs/quick-start" class="markup--anchor markup--li-anchor">Kadalu</a></span> - <span id="eb56"><a href="https://rancher.com/docs/k3s/latest/en/storage/" class="markup--anchor markup--li-anchor">Rancher: Longhorn Storage</a></span> ### Golang - <span id="fc71"><a href="https://github.com/brianvoe/gofakeit" class="markup--anchor markup--li-anchor">Generate Fake Random Data with Golang</a></span> - <span id="ad3a"><a href="https://github.com/hoanhan101/ultimate-go" class="markup--anchor markup--li-anchor">Ultimate Golang Study Guide</a></span> ### Great Blogs - <span id="6f90"><a href="https://www.exratione.com/blog/" class="markup--anchor markup--li-anchor">Exratione.com</a></span> - <span id="e5f2"><a href="http://joelabrahamsson.com/elasticsearch-101/" class="markup--anchor markup--li-anchor">Joelabrahamsson.com</a></span> - <span id="38cc"><a href="http://bencane.com/" class="markup--anchor markup--li-anchor">Benjamin Cane</a></span> - <span id="2583"><a href="http://mherman.org/" class="markup--anchor markup--li-anchor">Michael Herman</a></span> - <span id="3e8c"><a href="http://charlesleifer.com/" class="markup--anchor markup--li-anchor">Charles Leifer</a></span> - <span id="3b5d"><a href="https://www.blog.labouardy.com/" class="markup--anchor markup--li-anchor">Labouardy</a></span> - <span id="2759"><a href="https://tech.marksblogg.com/" class="markup--anchor markup--li-anchor">Mark’s Tech Blog</a></span> ### Linuxkit: - <span id="22a7"><a href="https://medium.com/aishik/getting-started-with-linuxkit-and-moby-project-ff7121c4e321" class="markup--anchor markup--li-anchor">Getting Started with Linuxkit</a></span> ### Logging Stacks - <span id="bc7b"><a href="https://github.com/shazChaudhry/docker-elastic" class="markup--anchor markup--li-anchor">shazChaudhry Swarm GELF Stack</a></span> ### Machine Learning: - <span id="7892"><a href="https://github.com/GokuMohandas/practicalAI/blob/master/README.md" class="markup--anchor markup--li-anchor">PracticalAI</a></span> ### Metrics: - <span id="02a4"><a href="https://github.com/avalente/appmetrics" class="markup--anchor markup--li-anchor">AppMetrics with Flask</a></span> - <span id="f097"><a href="https://github.com/Cue/scales" class="markup--anchor markup--li-anchor">Scales: Metrics for Python</a></span> - <span id="1e03"><a href="https://pypi.org/project/graphite-pymetrics/" class="markup--anchor markup--li-anchor">Graphite: Python Flask Metrics</a></span> ### MongoDB: - <span id="a9f4"><a href="https://linode.com/docs/databases/mongodb/build-database-clusters-with-mongodb/" class="markup--anchor markup--li-anchor">Setup MongoDB Cluster</a></span> - <span id="8450"><a href="https://github.com/AD7six/mongo-scripts" class="markup--anchor markup--li-anchor">MongoDB Scripts</a></span> - <span id="31a1"><a href="https://docs.mongodb.com/v2.4/administration/monitoring/#self-hosted-monitoring-tools" class="markup--anchor markup--li-anchor">MongoDB Monitoring Tools</a></span> - <span id="6864"><a href="https://studio3t.com/knowledge-base/articles/mongodb-users-roles-explained-part-1/" class="markup--anchor markup--li-anchor">Roles with MongoDB</a></span> - <span id="b14c"><a href="https://www.guru99.com/mongodb-tutorials.html" class="markup--anchor markup--li-anchor">Queries: Guru99</a></span> - <span id="5531"><a href="https://blog.exploratory.io/an-introduction-to-mongodb-query-for-beginners-bd463319aa4c" class="markup--anchor markup--li-anchor">Queries: Exploratory</a></span> - <span id="ea6e"><a href="https://www.tutorialspoint.com/mongodb/mongodb_create_database.htm" class="markup--anchor markup--li-anchor">Queries: Tutorialspoint</a></span> - <span id="3fb5"><a href="https://gist.github.com/rbekker87/5b4cd9ef36b6ae092a6260ab9e621a43" class="markup--anchor markup--li-anchor">Queries: MongoDB Cheatsheet</a></span> ### Monitoring - <span id="49fb"><a href="https://hackernoon.com/monitor-swarm-cluster-with-tick-stack-slack-3aaa6483d44a" class="markup--anchor markup--li-anchor">Docker Swarm Monitoring Stack: Telegraf, InfluxDB, Chronograf, Kapacitor</a> <a href="https://github.com/mlabouardy/swarm-tick" class="markup--anchor markup--li-anchor">github source</a></span> - <span id="7f00"><a href="https://stefanprodan.com/2017/docker-swarm-instrumentation-with-prometheus/" class="markup--anchor markup--li-anchor">Docker Swarm Monitoring Stack: Prometheus, Grafana, cAdvisor, Node Exporter</a> <a href="https://github.com/stefanprodan/swarmprom" class="markup--anchor markup--li-anchor">github source</a></span> - <span id="be31"><a href="https://finestructure.co/blog/2016/5/16/monitoring-with-prometheus-grafana-docker-part-1" class="markup--anchor markup--li-anchor">Prometheus Grafana Docker</a></span> - <span id="dc44"><a href="https://pierrevincent.github.io/2017/12/prometheus-blog-series-part-1-metrics-and-labels/" class="markup--anchor markup--li-anchor">Prometheus Blog Seros</a></span> - <span id="eb7c"><a href="https://blog.serverdensity.com/monitor-memcached/" class="markup--anchor markup--li-anchor">Memcached Monitoring</a></span> - <span id="eb53"><a href="https://raymii.org/s/tutorials/Nagios_Core_4_Installation_on_Ubuntu_12.04.html" class="markup--anchor markup--li-anchor">Nagios with Nagios Graph</a></span> - <span id="aaa6"><a href="https://medium.com/quiq-blog/better-slack-alerts-from-prometheus-49125c8c672b" class="markup--anchor markup--li-anchor">Slack Alerts with Prometheus</a></span> - <span id="6035"><a href="https://github.com/deanwilson/docker-compose-prometheus" class="markup--anchor markup--li-anchor">Local Prometheus Stack</a></span> - <span id="9144"><a href="https://github.com/chmod666org/docker-swarm-prometheus" class="markup--anchor markup--li-anchor">Docker Swarm Promethus Setup #1</a></span> - <span id="58e5"><a href="https://chmod666.org/2017/08/monitoring-a-docker-swarm-cluster-with-prometheus" class="markup--anchor markup--li-anchor">Docker Swarm Prometheus Setup #1: Blog</a></span> - <span id="dfae"><a href="https://homelab.business/docker-swarm-monitoring-part-01/" class="markup--anchor markup--li-anchor">Docker Swarm Promethus Setup #2</a></span> - <span id="3810"><a href="https://medium.com/the-telegraph-engineering/how-prometheus-and-the-blackbox-exporter-makes-monitoring-microservice-endpoints-easy-and-free-of-a986078912ee" class="markup--anchor markup--li-anchor">Docker Swarm Promethus Setup #3 (Blackbox)</a></span> - <span id="945a"><a href="https://github.com/fzaninotto/uptime" class="markup--anchor markup--li-anchor">Uptime (fzaninotto)</a></span> ### Monitoring and Alerting - <span id="dccc"><a href="https://github.com/arachnys/cabot" class="markup--anchor markup--li-anchor">Cabot (Lightweight Pagerduty)</a></span> - <span id="4e80"><a href="https://www.nagios.org/" class="markup--anchor markup--li-anchor">Nagios</a></span> ### Monitoring as Statuspages - <span id="d496"><a href="https://github.com/darkpixel/statuspage" class="markup--anchor markup--li-anchor">Statuspage (darkpixel</a></span> - <span id="7997"><a href="https://github.com/cachethq/Cachet" class="markup--anchor markup--li-anchor">Cachet</a></span> ### Programming #### Golang: - <span id="f63d"><a href="http://golangtutorials.blogspot.co.za/2011/05/table-of-contents.html" class="markup--anchor markup--li-anchor">Golang Tutorials</a></span> - <span id="a233"><a href="https://github.com/golang/go/wiki" class="markup--anchor markup--li-anchor">Golang Wiki</a></span> #### Java: - <span id="aba9"><a href="https://wiki.ruanbekker.com/index.php/Java_Spring_Boot_App_Examples" class="markup--anchor markup--li-anchor">Java Spring Boot Examples</a></span> #### Python #### Ruby: - <span id="935a"><a href="https://learnrubythehardway.org/book" class="markup--anchor markup--li-anchor">Learn Ruby: Learn Ruby the Hard Way</a></span> - <span id="d022"><a href="http://ruby-for-beginners.rubymonstas.org/index.html" class="markup--anchor markup--li-anchor">Learn Ruby: Ruby for Beginners</a></span> - <span id="9ff8"><a href="https://launchschool.com/books/ruby/read/loops_iterators#forloops" class="markup--anchor markup--li-anchor">Learn Ruby: Launch School</a></span> - <span id="bda7"><a href="https://gistpages.com/posts/ruby_arrays_insert_append_length_index_remove" class="markup--anchor markup--li-anchor">Learn Ruby: Arrays</a></span> - <span id="bb79"><a href="https://gorails.com/setup/osx/10.12-sierra" class="markup--anchor markup--li-anchor">Install Ruby Environment on Mac</a></span> #### Ruby on Rails: - <span id="473f"><a href="https://www.railstutorial.org/book/beginning" class="markup--anchor markup--li-anchor">Tutorial: Ruby On Rails</a></span> - <span id="2639"><a href="http://codingnudge.com/2017/03/17/tutorial-how-to-run-ruby-on-rails-on-docker-part-1/" class="markup--anchor markup--li-anchor">Tutorial: ROR on Docker</a></span> ### Queues - <span id="2d48"><a href="https://github.com/roribio/alpine-sqs" class="markup--anchor markup--li-anchor">Alpine SQS</a></span> - <span id="30f2"><a href="https://github.com/celery/kombu" class="markup--anchor markup--li-anchor">Kombu: Messaging library for Python</a></span> - <span id="da56"><a href="https://python-rq.org/" class="markup--anchor markup--li-anchor">Python Job Queues with Redis</a></span> ### Sysadmin References: - <span id="2ead"><a href="https://gist.github.com/ruanbekker/3118ed23c25451132becacd3b974db08" class="markup--anchor markup--li-anchor">Sysadmin Command References</a></span> - <span id="69c9"><a href="https://medium.com/@chrishantha/linux-performance-observability-tools-19ae2328f87f" class="markup--anchor markup--li-anchor">Linux Performance Observability Tools</a></span> - <span id="0009"><a href="http://bencane.com/2012/08/06/troubleshooting-high-io-wait-in-linux/" class="markup--anchor markup--li-anchor">Troubleshooting High IO Wait</a></span> - <span id="aef7"><a href="https://blog.pythian.com/basic-io-monitoring-on-linux/" class="markup--anchor markup--li-anchor">IO Monitoring in Linux</a></span> - <span id="5716"><a href="http://xiayubin.com/blog/2014/01/29/how-i-use-iostat-and-vmstat-for-performance-analysis/" class="markup--anchor markup--li-anchor">IOStat and VMStat for Performance Monitoring</a></span> - <span id="e5bf"><a href="https://www.tummy.com/articles/isolating-heavy-load/" class="markup--anchor markup--li-anchor">Debugging Heavy Load</a></span> ### Self Hosting #### Email Server Setups - <span id="8cd4"><a href="https://www.exratione.com/2016/05/a-mailserver-on-ubuntu-16-04-postfix-dovecot-mysql/" class="markup--anchor markup--li-anchor">Extratione: Postfix Dovecot MySQL Virtual Users Postfixadmin</a></span> - <span id="4409"><a href="https://www.exratione.com/2019/02/a-mailserver-on-ubuntu-18-04-postfix-dovecot-mysql/" class="markup--anchor markup--li-anchor">Extratione: Postfix Dovecot MySQL Virtual Users Postfixadmin (Ubuntu 18)</a></span> - <span id="bd51"><a href="https://linuxize.com/post/set-up-an-email-server-with-postfixadmin/" class="markup--anchor markup--li-anchor">Linuxsize: Postfix Dovecot MySQL Virtual Users Postfixadmin</a></span> - <span id="aa71"><a href="https://www.howtoforge.com/postfix_mysql_dovecot_dspam_clamav_postgrey_rbl_debian_etch" class="markup--anchor markup--li-anchor">Howtoforge: Postfix, MySQL, Dovecto, Dspam</a></span> - <span id="35d1"><a href="https://linuxize.com/post/set-up-an-email-server-with-postfixadmin/" class="markup--anchor markup--li-anchor">Linuxsize: VirtualUsers, MySQL, Postfix, Dovecot</a></span> #### Mailscanner Server Setups - <span id="8498"><a href="https://syslint.com/blog/tutorial/how-to-install-and-configure-spamassassin-with-postfix-in-debian-8/" class="markup--anchor markup--li-anchor">Spamassassin with Debian 8</a></span> #### Financial - <span id="0ba4"><a href="https://github.com/firefly-iii/firefly-iii" class="markup--anchor markup--li-anchor">SelfHosted Firefly</a></span> #### Self Hosting Frameworks: - <span id="0c97"><a href="https://sandstorm.io/" class="markup--anchor markup--li-anchor">Sandstorm</a></span> ### Serverless - <span id="0baf"><a href="https://github.com/Miserlou/Zappa" class="markup--anchor markup--li-anchor">Serverless Zappa</a></span> - <span id="eb32"><a href="https://github.com/faizanbashir/python-ses-dynamodb-contactform" class="markup--anchor markup--li-anchor">Serverless Contact Form</a></span> - <span id="67dc"><a href="https://github.com/danilop/LambdAuth" class="markup--anchor markup--li-anchor">Serverless Authentication on AWS (danilop)</a></span> ### VPN: #### VPN-Howto: - <span id="d7dc"><a href="https://www.cyberciti.biz/faq/howto-setup-openvpn-server-on-ubuntu-linux-14-04-or-16-04-lts/" class="markup--anchor markup--li-anchor">Ubuntu OpenVPN Script</a></span> - <span id="2198"><a href="https://github.com/hwdsl2/setup-ipsec-vpn" class="markup--anchor markup--li-anchor">Ubuntu IPSec Script</a></span> - <span id="7fec"><a href="https://www.digitalocean.com/community/tutorials/how-to-set-up-an-openvpn-server-on-ubuntu-16-04" class="markup--anchor markup--li-anchor">DO — Setup OpenVPN on Ubuntu</a></span> - <span id="bbff"><a href="https://www.elastichosts.com/blog/linux-l2tpipsec-vpn-client/" class="markup--anchor markup--li-anchor">Elasticshosts — IPSec VPN</a></span> - <span id="43f7"><a href="https://github.com/bedefaced/vpn-install" class="markup--anchor markup--li-anchor">PPTP/IPSec/OpenVPN Auto Install</a></span> ### Website Templates #### Resume Templates - <span id="7f29"><a href="https://github.com/johnmarcampbell/resume-site" class="markup--anchor markup--li-anchor">johnmarcampbell resume-site</a></span> ### Web Frameworks #### Python Flask: - <span id="a98a"><a href="https://gist.github.com/dAnjou/2874714" class="markup--anchor markup--li-anchor">Python Flask Upload Example</a></span> - <span id="2c23"><a href="https://github.com/humiaozuzu/awesome-flask#awesome-flask" class="markup--anchor markup--li-anchor">Awesome Flask — humiaozuzu</a></span> - <span id="b710"><a href="https://github.com/greyli?tab=repositories" class="markup--anchor markup--li-anchor">Awesome Flask Apps — Greyli</a></span> - <span id="f396"><a href="https://blog.miguelgrinberg.com/post/running-your-flask-application-over-https" class="markup--anchor markup--li-anchor">Flask over HTTPS (MG)</a></span> - <span id="9d33"><a href="https://speakerdeck.com/mitsuhiko/advanced-flask-patterns-1" class="markup--anchor markup--li-anchor">Flask Advanced Patterns</a></span> - <span id="adf1"><a href="https://github.com/tojrobinson/flask-mvc" class="markup--anchor markup--li-anchor">Flask MVC Boilerplate</a></span> ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Discover More: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 19, 2021](https://medium.com/p/9c5cb56ab263). <a href="https://medium.com/@bryanguner/web-developer-resource-list-part-2-9c5cb56ab263" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,178 @@ The Best Cloud-Based Code Playgrounds of 2021 (Part 1) ====================================================== A plethora of front-end code playgrounds have appeared over the years. They offer a convenient way to experiment with client-side code and… ------------------------------------------------------------------------ ### The Best Cloud-Based Code Playgrounds of 2021 (Part 1) #### **A plethora of front-end code playgrounds have appeared over the years. They offer a convenient way to experiment with client-side code and teach/share with others without the hassle of configuring a development environment.** <figure><img src="https://cdn-images-1.medium.com/max/800/1*oUZy2IkIQGDbkSVQRGCvKQ.png" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Typical features of these online playgrounds include: - <span id="3386">***color-coded HTML, CSS and JavaScript editors***</span> - <span id="152b">***a preview window — many update on the fly without a refresh***</span> - <span id="c746">***HTML pre-processors such as HAML***</span> - <span id="bf6f">***LESS, SASS and Stylus CSS pre-processing***</span> - <span id="8093">***inclusion of popular JavaScript libraries***</span> - <span id="b6d5">***developer consoles and code validation tools***</span> - <span id="98e5">***sharing via a short URL***</span> - <span id="e7c5">***embedding demonstrations in other pages***</span> - <span id="2e11">***code forking***</span> - <span id="efa6">***zero cost (or payment for premium services only)***</span> - <span id="782a">***showing off your coding skills to the world!***</span> ------------------------------------------------------------------------ #### The following list is in no particular order and which playground you use is a matter of application and personal taste, they each have their own specialities. ------------------------------------------------------------------------ ### 1.) REPL.IT ### My personal favorite for it’s simplicity, versatility and capabilities. ### ⚫No downloads, no configs, no setups In your browser. Repl.it runs fully in your browser, so you can get started coding in seconds. No more ZIPs, PKGs, DMGs and WTFs. > Any OS, any device***(I’m looking at you chromebook coders)***. You can use Repl.it on macOS, Windows, Linux, or any other OS . ### ⚫Clone, commit and push to any GitHub repo. Repl from Repo. Get started with any Github repo, right from your browser. Commit and push without touching your terminal. ### ⚫<a href="https://blog.replit.com/markdown-preview" class="markup--anchor markup--h3-anchor">Markdown Preview</a> **>A new but fundamentally important feature** ### ⚫<a href="https://blog.replit.com/unit-tests" class="markup--anchor markup--h3-anchor">No-setup Unit Testing</a> **>Unit testing is a powerful way to verify that code works as intended and creates a quick feedback loop for development & learning. However, setting up a reproducible unit-testing environment is a time-consuming and delicate affair. Repl.it now features zero-setup unit testing!** ### ⚫<a href="https://blog.replit.com/https" class="markup--anchor markup--h3-anchor">HTTPS by default</a> #### In the example below I have 72 solved Javascript Leetcode Problems but REPL.IT can handle almost any language you can think of. ### Here’s another one that contains the Repl.it Docs: ------------------------------------------------------------------------ ### JS-Fiddle > <a href="https://jsfiddle.net/" class="markup--anchor markup--blockquote-anchor"><strong><em>jsFiddle</em></strong></a> ***is a cloud-based JavaScript code playground that allows web developers to tweak their code and see the results of this tweaking in real time. The editor supports not only JavaScript and its variants but also HTML and CSS code, and it further supports popular JavaScript frameworks, such as jQuery, AngularJS, ReactiveJS and D3. The ad-supported site is also completely free to use.*** ### ⚫Entering and running code > JSFiddle has the notion of panels (or tabs if you switch into the tabbed layout), there are 4 panels, 3 where you can enter code, and 1 to see the result. - <span id="0c0b">**HTML** — structure code, no need to add `body` `doctype` `head`, that's added automatically</span> - <span id="b95b">**CSS** — styles. You can switch pre-pocessor to SCSS</span> - <span id="1709">**JavaScript** — behavior. There are many frameworks and code pre-processors you can use</span> Once you enter code, just hit **Run** in the top actions bar, and the fourth panel with results will appear. ### ⚫Saving and Forking code - <span id="f034">**Save** / **Update** will do what you think, it’ll save a new fiddle or update an existing one (and add a version number to it)</span> - <span id="f634">**Fork** will split out an existing fiddle into a new one, starting with version 0</span> ------------------------------------------------------------------------ ### StackBlitz <a href="https://stackblitz.com/" class="markup--anchor markup--p-anchor">StackBlitz</a> - <span id="9cf4">**Installs packages ≥5x faster than Yarn & NPM 🔥**</span> - <span id="d50f">**Reduces the size of** `node_modules` **up to two orders of magnitude 😮**</span> - <span id="288c">**Has multiple layers of redundancy for production grade reliability** 💪</span> - <span id="ba5d">**Works *entirely* within your web browser, enabling lightning fast dev environments ⚡️**</span> > Dependencies still slip into the install process as dev & sub-dependencies and are downloaded & extracted all the same, resulting in the infamous black hole known as `node_modules`: <figure><img src="https://cdn-images-1.medium.com/max/600/0*-6LsqMPgWtP9NSBl.png" class="graf-image" /></figure>**Dank, relevant meme (pictured Left)** **This is the crux of what prevents NPM from working natively in-browser. Resolving, downloading, and extracting the hundreds of megabytes (or gigabytes) typical frontend projects contain in their** `node_modules` **folder is a challenge browsers just aren’t well suited for. Additionally, this is also why existing server side solutions to this problem have proven to be** <a href="https://github.com/unpkg/unpkg/issues/35#issuecomment-317128917" class="markup--anchor markup--p-anchor"><strong>slow, unreliable</strong></a> <figure><img src="https://cdn-images-1.medium.com/max/800/1*sl4vb3fP9-MErkioiCOyKQ.png" class="graf-image" /></figure>### Then just paste the embed code in an iframe and you’re good to go! <figure><img src="https://cdn-images-1.medium.com/max/800/0*PjhrjtInF1dPudtO.png" class="graf-image" /></figure><a href="https://stackblitz.com/" class="markup--anchor markup--blockquote-anchor"><strong><em>On StackBlitz.com</em></strong></a>**, you can create new projects and get the embed code from the ‘Share’ dropdown link in the top navigation like so:** ### Embed Options > ***<iframe src=”https://stackblitz.com/edit/angular?embed=1"></iframe>*** <figure><img src="https://cdn-images-1.medium.com/max/800/1*6QF4ywBOMVFtS_MukRkLKw.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/600/1*5ekSGpNwJ28hI9Aog8V4DQ.png" class="graf-image" /></figure>🡩 **Alternatively, you can also use StackBlitz’s** <a href="https://developer.stackblitz.com/docs/platform/embedding#open-and-embed-stackblitz-projects" class="markup--anchor markup--blockquote-anchor"><strong>Javascript SDK methods</strong></a> **for easily embedding StackBlitz projects on the page & avoid all the hassles of creating/configuring iframes.** <span class="graf-dropCap">H</span>**ere’s a sample project of mine, it’s a medium clone… *(So Metta)*… feel free to write a post… or don’t …but either way … as you can see… Stack Blitz enables you to write serious web applications in a fraction of the time it would take with a conventional setup.** ------------------------------------------------------------------------ ### Glitch ### ⚫<a href="https://glitch.com/" class="markup--anchor markup--h3-anchor"><strong><em>Glitch</em></strong></a> ** provides two project templates that you can use to start creating your app:** 1. <span id="9488">**Classic Website**</span> 2. <span id="ff69">**Node.js**</span> If you know the type of project that you would like to create, <a href="https://glitch.com/create-project" class="markup--anchor markup--p-anchor">click here to get started!</a> Or keep reading to learn more about the Classic Website and Node.js templates. ### ⚫**Classic Website** <figure><img src="https://cdn-images-1.medium.com/max/800/0*AMVRXebQBuww_n_P.png" class="graf-image" /></figure>The **Classic Website** template is your starting point for creating a **static** website that includes an index.html page and static HTML, JavaScript, and CSS. Just start typing and your work will be live on the internet! Static websites enjoy unlimited uptime too! This means that your website stays on 24/7 without using your <a href="https://glitch.happyfox.com/kb/article/17/#Uptime" class="markup--anchor markup--p-anchor">Project Hours</a>. An existing project will be identified by Glitch as a **static** site if it does not contain one of the following files: - <span id="69e6">**package.json**</span> - <span id="fbe0">**requirements.txt**</span> - <span id="4fe5">**glitch.json**</span> ### ⚫**Node.js** <figure><img src="https://cdn-images-1.medium.com/max/800/0*ppgGuMTHg-YxnImp.png" class="graf-image" /></figure>If you are looking to build a full-stack JavaScript application, choose the **Node.js** template. This template includes both front-end and back-end code using the popular <a href="https://expressjs.com/" class="markup--anchor markup--p-anchor">Express</a> Node.js application framework. ### ⚫**Here are some other ways to get started on Glitch…** <figure><img src="https://cdn-images-1.medium.com/max/800/0*duFOnYTuCHLsfxFi.png" class="graf-image" /></figure>- <span id="4b22">Create an app by <a href="https://glitch.happyfox.com/kb/article/20-can-i-import-code-from-a-github-repository/" class="markup--anchor markup--li-anchor">importing a GitHub repo</a>.</span> - <span id="dbd9">Build an app that integrates with a popular third-party platform or framework, by remixing <a href="https://glitch.com/create" class="markup--anchor markup--li-anchor">one of these starter templates</a>.</span> **Still not sure where to start? Check out these categories of community-built apps for inspiration:** - <span id="53a7"><a href="https://glitch.com/@glitch/games" class="markup--anchor markup--li-anchor">Games</a></span> - <span id="05b5"><a href="https://glitch.com/@glitch/bots" class="markup--anchor markup--li-anchor">Bots</a></span> - <span id="a9e4"><a href="https://glitch.com/@glitch/music" class="markup--anchor markup--li-anchor">Music</a></span> - <span id="0d44"><a href="https://glitch.com/@glitch/art" class="markup--anchor markup--li-anchor">Art</a></span> - <span id="8927"><a href="https://glitch.com/@glitch/tools-for-work" class="markup--anchor markup--li-anchor">Productivity</a></span> - <span id="7068"><a href="https://glitch.com/@glitch/hardware" class="markup--anchor markup--li-anchor">Hardware</a></span> - <span id="5dd4"><a href="https://glitch.com/@glitch/building-blocks" class="markup--anchor markup--li-anchor">Building Blocks</a></span> - <span id="0c79"><a href="https://glitch.com/@glitch/learn-to-code" class="markup--anchor markup--li-anchor">Learn to Code</a></span> ### Here’s a (temporarily) broken version of my personal portfolio .. hosted on glitch #### Click ‘view app’ below to see how it renders ------------------------------------------------------------------------ ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>Web-Dev-Resource-Hub</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 20, 2021](https://medium.com/p/cdae9448db24). <a href="https://medium.com/@bryanguner/the-best-cloud-based-code-playgrounds-of-2021-part-1-cdae9448db24" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,368 @@ Web Development Interview Part 3💻 ================================= This installment is going to be the least technically demanding thus far however these questions are a more realistic reflection on what a… ------------------------------------------------------------------------ #### <a href="http://medium.com/codex" class="markup--anchor markup--h4-anchor">CODEX</a> ### Web Development Interview Part 3💻 #### **This installment is going to be the least technically demanding thus far however these questions are a more realistic reflection on what a junior developer could be asked by a company with reasonable hiring practices…** <figure><img src="https://cdn-images-1.medium.com/max/800/1*dTDrkYZJYhASUP2TTknAgA.png" class="graf-image" /></figure>**… Speaking of which … stay tuned till the end of the article or skip down to it for a list of web development companies with reportedly fair hiring practices!** #### Here’s parts one and two; they’re both much more technical in nature than this one! <a href="https://medium.com/star-gazers/the-web-developers-technical-interview-e347d7db3822" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/star-gazers/the-web-developers-technical-interview-e347d7db3822"><strong>The Web Developer’s Technical Interview</strong><br /> <em>Questions….Answers… and links to the missing pieces.</em>medium.com</a><a href="https://medium.com/star-gazers/the-web-developers-technical-interview-e347d7db3822" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/front-end-interview-questions-part-2-86ddc0e91443" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/front-end-interview-questions-part-2-86ddc0e91443"><strong>Front End Interview Questions Part 2</strong><br /> <em>These will focus more on vocabulary and concepts than the application driven approach in my last post!</em>medium.com</a><a href="https://medium.com/codex/front-end-interview-questions-part-2-86ddc0e91443" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ------------------------------------------------------------------------ ### 👋🏻 Behavioral & Cultural Interview Questions > *Software engineer interviewers ask behavioral/cultural questions to evaluate interviewee’s soft skills, and also to decide whether the candidate is a cultural fit. Make sure you’ve prepared great answers to these interview questions.* > ***⚫***Tell me about yourself > ***⚫====>***“Tell me about yourself” is one of the most common and important interview questions. However, it can be daunting, as it’s one you need to get right. After all, not only is it your first impression on the interviewer, but you also need to be simultaneously professional and authentic when answering it. > ***⚫***So how can you give a good answer without oversharing? To help you structure your answer, we’ll give you a rough guideline: start with a short introduction, talk about the present, recount the past, and mention your future goals. <figure><img src="https://cdn-images-1.medium.com/max/800/0*E6ldmJAPG95McXVB" class="graf-image" /></figure> ------------------------------------------------------------------------ ### What are some side projects you’re currently working on? *Current Experience* > ***⚫****Outline the role you’re currently in, your responsibilities, and your achievements (without reciting your resume)* > ***⚫****Highlight what you’re most passionate about (i.e. working with PMs to perfect product specs, discussing with colleagues about different tech stacks, helping others excel in their jobs and career)* > ***⚫****Recount one or two job-related projects and/or situations that map onto the job you’re applying to (i.e. collaborating with designers, working with legacy code, implementing best-practices, introducing new tech stacks, mentoring your colleagues)* ### Past Experience > **Now it’s time to highlight your skills a little:** > ***⚫***Selectively highlight one high-impact (preferably quantifiable) project you were involved with for each job > ***⚫***Highlight the hard and soft skills you learned from your past working experiences > ***⚫***Emphasize the initiatives you took to improve the company’s work flow (i.e. propose new flow to streamline sprints) or your own skillsets (i.e. engaging in hackathon with colleagues or friends) ### Future Expectations > ***⚫***Convey what you hope to achieve and learn from the new job > ***⚫***Detail products, projects, features, or initiatives you can imagine yourself help kick off and lead in the company > ***⚫***Tell me what a productive day at work looks like to you > ***⚫***This question may not appear in every interview, but when they do, it’s important for you to highlight your organizational and prioritization skills. When hiring managers ask this question, they want to know: > ***⚫***Whether you’re a proactive communicator and a good planner of your time ### How you strike a balance between multiple ongoing projects <span class="graf-dropCap">D</span>***escribe one or two instances where you had several projects running simultaneously and how you managed to prioritize different tasks, make progress, meet milestones, and work on iterations based on feedback.*** > ***⚫***How you deliver quality work with limited time > ***⚫***When there’s limited time and multiple projects going on, you may not be able to give 100% to the projects at hand. Let the interviewers know: > ***⚫***How you decide which tasks should be prioritized > ***⚫***How you negotiate deadlines and milestones with stakeholders > ***⚫***How you ensure all projects will be delivered with acceptable quality > ***⚫***At what milestones you believe it’s ok to deliver something “less than perfect” > ***⚫***How you decide when to go back and improve the “minimum viable projects” delivered earlier in the project’s timeline ### Professional Skills > ***⚫***Will you excel in this job? Are you passionate about this job? It’s time to show how. For the first question, highlight some of your professional abilities: > ***⚫***Industry experience > ***⚫***Technical skills > ***⚫***Soft skills > ***⚫***Key accomplishments #### For the second question, showcase your excitement for the job. Hiring managers want to see your excitement for these reasons: > ***⚫1>***Excitement will fuel your performance > ***⚫2>***Passion will confirm that you’re interested in this job > ***⚫***Eagerness will help you get through challenges at work > ***⚫***Company culture and shared values > ***⚫***Do you know the company’s culture and will you be a good fit? Here are some culture-related points you could cover in your answer: > ***⚫***You’re attracted to the company’s general reputation > ***⚫***You’re inspired by a specific leader in the company > ***⚫***You’re passionate about the company’s products and services > ***⚫***You’re onboard with the company’s initiatives (community engagement, public endorsements, etc.) > ***⚫***You admire the company’s culture. Here are some specific examples: ------------------------------------------------------------------------ ### Commitment to the company > ***⚫Are you passionate about the company and will you stay committed to this company? If the interviewer already asked you “Where do you see yourself in 5 years?” then you don’t have to stress too much about showing your long-term commitment when answering this question. However, if you haven’t had the opportunity to show your commitment to the company, the most organic way to show your commitment is to talk about your long term plans in the company. Here are some things you can talk about:*** > ***⚫***Projects you want to start > ***⚫***Potential directions you think the company can go in > ***⚫***The different products/teams you want to contribute to > ***⚫***Processes you’d like to participate in improving ### Why should we hire you? > ***⚫***Ultimately, every single question interviewers ask you is related to this overarching question: “Why should we hire you?” Interviewers want to know, as confidently as possible, that you will be a good hire. Therefore, your answer should confirm that you’ll be a good hire. > ***⚫***Unlike the more specific questions we’ve outlined above, this question is a generic question that requires a concise but powerful answer. Think about this as your elevator pitch — you should be able to sell yourself to the interview within a matter of minutes. > ***⚫***To come up with your elevator pitch, you’ll need to do some planning and consolidation. > ***⚫***Here are some guiding questions for you to kickoff your brainstorming sessions: > ***⚫***What are the most important qualifications for this position from the company’s perspective? > ***⚫***What are my strong suits and how do they set me apart from others? > ***⚫***What are my most monumental accomplishments? > ***⚫***Why are you the best person for this job? > ***⚫***Consolidate and practice your pitch > ***⚫***Combine your answers in prose form to make sure each point flows to the next smoothly > ***⚫***Check to make sure your answer sets you apart from other candidates > ***⚫!!!!!!!***Practice, practice, and practice, but DO NOT TRY TO MEMORIZE YOUR PITCH!!!!!!!!! ### 📝 Interview Etiquette & Other Tips Nailing an interview takes more than just knowing how to answer common interview questions. You’ll also need to prepare questions of your own, think about salary, and get your communications right. Here’s how. #### Questions to ask in an interview ⮕As the job seeker, it’s normal to feel like you’re being interrogated during interviews. However, at its core, an interview is a conversation, and should be a two-way interaction. As the interviewee, you need to stay engaged and ask thoughtful questions. ⮕By asking questions, you’re expressing your genuine curiosity towards the company. This helps companies know that you’re serious about them. Additionally, it also helps you evaluate whether the job and/or the company is really what you’re looking for. ⮕There are fantastic resources out there with more than a dozen questions you can ask interviewers. Here, we’ll provide a few that we think are essential to help you gain deeper understandings about the role, company, and your future within the company: ⮕The job and cross-team communication ⮕The company’s values and working culture ⮕What are some shared qualities and characteristics among your employees? ⮕What’s your favorite part about working at the company? ⮕What’s your least favorite part about working at the company? Professional growth opportunities ⮕Are there multiple product/service teams in the company? Can engineers apply to join a different team? What does the process look like? ⮕Are there professional development courses and training available? ⮕Do senior engineers and engineering leads usually get promoted from within the company? ### Closing questions and next steps > ***⚫***Is there anything unclear or concerning about my background that I can help clarify? > ***⚫***What are the next steps in the interview process? > ***⚫***Is there anything else I can provide you with that would be helpful? > ***⚫***How to answer salary expectations? > ***⚫***“What are you salary expectations?” can be a daunting question. If talking about money wasn’t uncomfortable enough already, most job seekers worry that proposing the “wrong number” would cost them the job — or land them a job offer with a disappointing salary. Not great. ------------------------------------------------------------------------ ### Follow up ????? > ***⚫***Depending on how many rounds of interviews you’ve gone through, you may feel differently about how close you are to getting the job. The closer you get to the end of the hiring process, the more likely it is for you to start feeling anxious due to higher expectations. As a result, you may be eager to follow up with the hiring manager regarding your interview results. With that said, there’s a fine line between showing your eager attitude and coming off as desperate. > ***⚫***Before we get to the types of follow up emails you should send out, make sure to ask the hiring manager about when you can expect to hear back from them about next steps. This information will help you decide when it’s appropriate to follow up down the line. > ***⚫***There are four types of follow up emails you should send at different times after the interview: Thank you email, checking-in email, second follow up email, final follow up email. #### Thank you email **A thank you email should be sent out on the same day of the interview or one day after your interview. The main purpose of this email is to show your excitement and appreciation. This email should be short and sweet and should include:** #### A thank you note for their time ⮕**A brief mention of the specific job you interviewed for** ⮕**A brief note of what you found most impressive about the company** ⮕**One or two things you learned about the organization** ⮕**One sentence about how you’re excited you are to contribute in a specific way** <figure><img src="https://cdn-images-1.medium.com/max/800/0*tZNLWVUGmj2tJK3j.jpg" class="graf-image" /></figure> ------------------------------------------------------------------------ ### ***Technical interview :*** #### ⮕***questions examine a candidate’s thought processes and assess what approaches they adopt to solve problems. The most common end-to-end software development questions are listed below.*** ### Here’s the repo that I use to practice my technical chops for interviews: <a href="https://github.com/bgoonz/INTERVIEW-PREP-COMPLETE" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz/INTERVIEW-PREP-COMPLETE"><strong>bgoonz/INTERVIEW-PREP-COMPLETE</strong><br /> <em>Tech Interview Asymptotic Notation Data Structures Algorithms Algorithm Basics Search Algorithms Sorting Algorithms…</em>github.com</a><a href="https://github.com/bgoonz/INTERVIEW-PREP-COMPLETE" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### 1. Development > ***⚫Describe the process you used for a recent project, from requirements to delivery. Does your team prefer using Agile or Waterfall? Any pros and cons?*** > ***⚫ In answering this question, you need to show your planning, process, and communication/collaboration skills. Think in advance about a suitable project where your contributions cover all these bases.*** > ***⚫If you can, it’s best to choose to describe an Agile project you worked on, as organizations whether they use a Waterfall or Agile methodology, are keen to work with developers experienced in Agile.*** > ***⚫ Ideally, share a project in which you worked with a bigger team.*** > ***⚫ Outline the components of the project and what role you played.*** > ***⚫ Highlight any interactions with other teams and the process for handover and collaboration.*** > ***⚫Highlight any interactions with other teams and the process for handover and collaboration.*** ### 2. Based on your experience in this project, specify your favorite and least favorite part of this type of collaboration. <span class="graf-dropCap">R</span>***emember to keep positive because the interviewers are always looking for constructive answers.*** > ***⚫You can specify cutting edge collaboration tools and techniques and/or methodologies that you already know the company employs in their own workflows.*** > ***⚫For the least favorite parts, don’t just list the downsides and failures, but also mention what you’ve learned from it and how you would improve.*** > ***⚫ Ensure that you come across humbled from the failures, not exasperated and that you know better than everyone else — even if you truly feel this way! Explain how you tried to positively encourage your team to correct the course rather than staying silent and going with a consensus majority.*** ### ***3. Based on the project, what programming languages / tools / services did you use? And why did you choose them?*** > ***⚫ Questions like this are designed to allow you to showcase your way of thinking. The interviewer is looking to hear your ability to make choices based on rational decisions — so make sure that you show that you can do this!*** > ***To begin with, give an example of a project in which you had the most ownership or you had the greatest sense of achievement/efficiency/effectiveness from the toolchain used.*** > ***⚫ Next, describe the goal of the project, and briefly go through your responsibilities when it came to the toolchain decision-making process. Within Agile work practices, it’s usually a team effort to decide the best programming languages/tools/services are the best fit for the project, within customer requirements. Outline the consultation process you went through with both the customer and your team to arrive at the best solutions.*** ### 4. Describe the biggest toolchain-related challenge you encountered in the project: > ***⚫Outline the situation, the goal you expected, and the reason why there was a challenge.*** > ***⚫Share the toolchain you used when you encountered the problem, then other technologies and tools you applied to help solve it, if applicable. Ensure to note whether there was a full tool pivot or you managed to build onto an existing library (or something similar) to achieve the end goal.*** > ***⚫Remember: the most important thing is not what you ultimately used, but how many options you referred to during the process, and which metrics you adopted to decide which tech to go for. Remember to share the pros and cons of your decision, and if, looking back now, whether you would do it differently.*** ### 5. How would you design this system for scale? > ***⚫First of all, the interviewer would like to know the traffic level we’re expecting: 1,000, 100,000, or 10 million users per second? Think about the data expectations for each system user, database connections (blocking/nonblocking actions), downtime specifics, and cloud considerations (if any).*** > ***⚫List the potential problems that might occur when trying to scale. Different traffic levels may have different problems, so make sure you think this through, and decide the priorities of the problems that you should solve. Many codebases are not built for scale, so note code changes that might need to occur, rather than just infrastructure expectations.*** > ***⚫Different traffic levels may have different system architectures. List the options you think best fit your scenario and explain why you choose them. Many apps utilize a stripped-back product (which can be achieved through system architecture) when high traffic levels affect systems, rather than crashing the product completely or users experiencing unacceptable wait times.*** ### 6. Testing: What is your process to test a code when developing a software or application? How do you decide the scope of your test case? > ***⚫First, do your groundwork to ensure that you thoroughly understand the different testing types. Do you know your unit testing from your regression testing from your user acceptance testing? If you need to brush up, check out this great resource.*** > ***⚫Once you’ve got that on lock, it’s time to share a project that you’ve tested thoroughly before.*** > ***⚫Remember to separate the project into different sections. Each section should apply the testing type that fits its characteristics. Describe the goals of different testing types, and also introduce the library/service you used for the test. (For bonus points: explain the pros and cons of the library/service and whether it was your decision to choose that particular suite.)*** > ***⚫It makes sense at this point to include documentation (and particularly inline documentation) you use that helps clarify functions/issues so that testing goes smoothly.*** > ***⚫You may also mention a project you were involved in where testing was not well conducted and how you would — or did — go about fixing the issues.*** ### Monitoring ### 7. What kind of tools / services do you use for logging? What kind of data will you log? And what’s the next step when you get the log? > ***⚫Time for some details! When answering this question, give an example of a project that you’ve monitored before.*** > ***⚫Explain what information you logged and what questions it answered.*** > ***⚫Please do not just describe the data format but also give the reason why you decided to extract this data.*** > ***⚫Describe the reporting process and any associated tools used.*** > ***⚫Some questions to think about to help you structure your answer, and nail your response:*** ------------------------------------------------------------------------ ### What to avoid > ***⚫***Complaining about having to handle the problem > ***⚫***Showing how annoyed you were at the problem > ***⚫***Pointing fingers at others for the problem > ***⚫***Talking ill of your bosses or coworkers > ***⚫*Keep in mind that your interviewer is not only trying to get a glimpse of your past, but to gain an understanding of how you might react to challenges should they hire you. Therefore, when you’re choosing your scenario, try to pick one that may be applicable in your new work setting as well.** ------------------------------------------------------------------------ ### NOW; Here’s some for you guys to answer in the comments! #### 8. Which logging services have you researched and used before? #### 9. Why did you choose or look into each particular logging service? #### 10. Was your decision because of the scale, the features, or the size of the community? #### 11. In what scenarios did you check these logs? Was it scheduled daily/weekly/monthly or as an on-demand activity? #### 12. What information would the data be transformed into? Was it for development, business, or customer decision-making? #### 13. What information would the data be transformed into? Was it for development, business, or customer decision-making? ------------------------------------------------------------------------ ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>Web-Dev-Resource-Hub</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 21, 2021](https://medium.com/p/826ae81a9107). <a href="https://medium.com/@bryanguner/web-development-interview-part-3-826ae81a9107" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,101 @@ Web Development Resources Part 3 ================================ I’m the psychological equivalent of a physical hoarder only instead of empty soda cans and dead racoons it’s lists of links and resources. ------------------------------------------------------------------------ ### Web Development Resources Part 3 I’m the psychological equivalent of a physical hoarder only instead of empty soda cans and dead racoons it’s lists of links and resources. ### Here’s parts one and two: <a href="https://javascript.plainenglish.io/my-take-on-awesome-javascript-243255451e74" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/my-take-on-awesome-javascript-243255451e74"><strong>My ‘awesome’ list of JavaScript resources</strong><br /> <em>Everyone’s seen the ‘Awesome’ lists on GitHub… and they are indeed awesome… so today I am going to attempt to curate my…</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/my-take-on-awesome-javascript-243255451e74" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/star-gazers/web-developer-resource-list-part-2-9c5cb56ab263" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/star-gazers/web-developer-resource-list-part-2-9c5cb56ab263"><strong>Web Developer Resource List Part 2</strong><br /> <em>Because I compile these things compulsively anyway…</em>medium.com</a><a href="https://medium.com/star-gazers/web-developer-resource-list-part-2-9c5cb56ab263" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ------------------------------------------------------------------------ <figure><img src="https://cdn-images-1.medium.com/max/600/0*7Taf8gWWh5YjoM-s.png" class="graf-image" /></figure>### Performance - <span id="e540"><a href="https://developers.google.com/web/fundamentals/performance/webpack/" class="markup--anchor markup--li-anchor">https://developers.google.com/web/fundamentals/performance/webpack/</a></span> - <span id="e928"><a href="https://iamakulov.com/notes/resize-scroll/" class="markup--anchor markup--li-anchor">https://iamakulov.com/notes/resize-scroll/</a></span> - <span id="6c19"><a href="https://iamakulov.com/notes/optimize-images-webpack/" class="markup--anchor markup--li-anchor">https://iamakulov.com/notes/optimize-images-webpack/</a></span> - <span id="6399"><a href="https://developers.google.com/web/fundamentals/performance/webpack/decrease-frontend-size" class="markup--anchor markup--li-anchor">https://developers.google.com/web/fundamentals/performance/webpack/decrease-frontend-size</a></span> - <span id="7b87"><a href="https://code.facebook.com/posts/557147474482256" class="markup--anchor markup--li-anchor">https://code.facebook.com/posts/557147474482256</a></span> - <span id="5ec0"><a href="http://www.phpied.com/rendering-repaint-reflowrelayout-restyle" class="markup--anchor markup--li-anchor">www.phpied.com/rendering-repaint-reflowrelayout-restyle</a></span> - <span id="ce70"><a href="https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/" class="markup--anchor markup--li-anchor">https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/</a></span> - <span id="9a50"><a href="https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/" class="markup--anchor markup--li-anchor">https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/</a></span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*-D07MORsmwK-pHOZ.jpg" class="graf-image" /></figure>### Case studies - <span id="0707"><a href="https://github.com/andrew--r/frontend-case-studies" class="markup--anchor markup--li-anchor">https://github.com/andrew--r/frontend-case-studies</a></span> - <span id="60fa"><a href="http://iamakulov.com/notes/walmart/" class="markup--anchor markup--li-anchor">http://iamakulov.com/notes/walmart/</a></span> ### Interviews - <span id="dbed"><a href="https://performancejs.com/post/hde6d32/The-Best-Frontend-JavaScript-Interview-Questions-%28Written-by-a-Frontend-Engineer%29" class="markup--anchor markup--li-anchor">https://performancejs.com/post/hde6d32/The-Best-Frontend-JavaScript-Interview-Questions-(Written-by-a-Frontend-Engineer)</a></span> - <span id="127f"><a href="https://github.com/nishant8BITS/123-Essential-JavaScript-Interview-Question" class="markup--anchor markup--li-anchor">https://github.com/nishant8BITS/123-Essential-JavaScript-Interview-Question</a></span> - <span id="7e4c"><a href="https://github.com/yangshun/tech-interview-handbook" class="markup--anchor markup--li-anchor">https://github.com/yangshun/tech-interview-handbook</a></span> - <span id="270e"><a href="https://github.com/IgnaciodeNuevo/frontend-development-interviews#questions-to-know-the-company-better" class="markup--anchor markup--li-anchor">https://github.com/IgnaciodeNuevo/frontend-development-interviews#questions-to-know-the-company-better</a></span> - <span id="e99d"><a href="http://www.creativebloq.com/features/12-common-javascript-questions-answered" class="markup--anchor markup--li-anchor">http://www.creativebloq.com/features/12-common-javascript-questions-answered</a></span> - <span id="fb43"><a href="http://www.thatjsdude.com/interview/js1.html" class="markup--anchor markup--li-anchor">http://www.thatjsdude.com/interview/js1.html</a></span> - <span id="d39e"><a href="http://www.thatjsdude.com/interview/js2.html" class="markup--anchor markup--li-anchor">http://www.thatjsdude.com/interview/js2.html</a></span> - <span id="c0b8"><a href="http://www.thatjsdude.com/interview/dom.html" class="markup--anchor markup--li-anchor">http://www.thatjsdude.com/interview/dom.html</a></span> - <span id="396a"><a href="https://github.com/khan4019/front-end-Interview-Questions" class="markup--anchor markup--li-anchor">https://github.com/khan4019/front-end-Interview-Questions</a></span> - <span id="a781"><a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions" class="markup--anchor markup--li-anchor">https://github.com/h5bp/Front-end-Developer-Interview-Questions</a></span> ### Web - <span id="29a1"><a href="https://howdns.works/" class="markup--anchor markup--li-anchor">https://howdns.works/</a></span> - <span id="319a"><a href="https://howhttps.works/" class="markup--anchor markup--li-anchor">https://howhttps.works</a></span> ### Architecture - <span id="67ee"><a href="https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3" class="markup--anchor markup--li-anchor">https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3</a></span> - <span id="3bdf"><a href="https://www.toptal.com/javascript/comprehensive-guide-javascript-design-patterns" class="markup--anchor markup--li-anchor">https://www.toptal.com/javascript/comprehensive-guide-javascript-design-patterns</a></span> - <span id="d77b"><a href="https://addyosmani.com/resources/essentialjsdesignpatterns/book/" class="markup--anchor markup--li-anchor">https://addyosmani.com/resources/essentialjsdesignpatterns/book/</a></span> ### Accessibility - <span id="aecb"><a href="https://developers.google.com/web/fundamentals/accessibility/how-to-review" class="markup--anchor markup--li-anchor">https://developers.google.com/web/fundamentals/accessibility/how-to-review</a></span> ### Node - <span id="b0a7"><a href="https://www.toptal.com/javascript/a-guide-to-npm-the-node-package-manager" class="markup--anchor markup--li-anchor">https://www.toptal.com/javascript/a-guide-to-npm-the-node-package-manager</a></span> ### JS - <span id="8579"><a href="https://blog.mgechev.com/2018/01/29/javascript-decorators-aop-autobind-memoization/" class="markup--anchor markup--li-anchor">https://blog.mgechev.com/2018/01/29/javascript-decorators-aop-autobind-memoization/</a></span> - <span id="9f62"><a href="https://developers.google.com/web/fundamentals/primers/async-functions" class="markup--anchor markup--li-anchor">https://developers.google.com/web/fundamentals/primers/async-functions</a></span> - <span id="014c"><a href="https://developers.google.com/web/fundamentals/primers/promises" class="markup--anchor markup--li-anchor">https://developers.google.com/web/fundamentals/primers/promises</a></span> - <span id="5627"><a href="https://www.toptal.com/javascript/asynchronous-javascript-async-await-tutorial" class="markup--anchor markup--li-anchor">https://www.toptal.com/javascript/asynchronous-javascript-async-await-tutorial</a></span> - <span id="cdb4"><a href="https://www.toptal.com/software/definitive-guide-to-datetime-manipulation" class="markup--anchor markup--li-anchor">https://www.toptal.com/software/definitive-guide-to-datetime-manipulation</a></span> - <span id="31ae"><a href="https://www.toptal.com/javascript/javascript-es6-cheat-sheet" class="markup--anchor markup--li-anchor">https://www.toptal.com/javascript/javascript-es6-cheat-sheet</a></span> - <span id="1d1a"><a href="https://www.safaribooksonline.com/library/view/es6-in-motion/10000MNLV201701/" class="markup--anchor markup--li-anchor">https://www.safaribooksonline.com/library/view/es6-in-motion/10000MNLV201701/</a></span> ### CSS - <span id="42f4"><a href="https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/" class="markup--anchor markup--li-anchor">https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/</a></span> ### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>Web-Dev-Resource-Hub</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 21, 2021](https://medium.com/p/f862ceb2b82a). <a href="https://medium.com/@bryanguner/web-development-resources-part-3-f862ceb2b82a" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,338 @@ A list of all of my articles to link to future posts ==================================================== You should probably skip this one… seriously it’s just for internal use! ------------------------------------------------------------------------ ### All Of My Medium Stories <figure><img src="https://cdn-images-1.medium.com/max/800/1*yZ41P3YdMYMiyFPAPrzyGw.gif" class="graf-image" /></figure> ------------------------------------------------------------------------ ### This is another backup of all of them! <a href="https://golden-lobe-519.notion.site/Medium-7b5b9bd642344d60afe3f03fe6431952" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://golden-lobe-519.notion.site/Medium-7b5b9bd642344d60afe3f03fe6431952"><strong>All OF MEDIUM ARTICLES</strong><br /> <em>2021-02-27_A-Quick-Guide-to-Big-O-Notation--Memoization--Tabulation--and-Sorting-Algorithms-by-Example-803ff193c522…</em>golden-lobe-519.notion.site</a><a href="https://golden-lobe-519.notion.site/Medium-7b5b9bd642344d60afe3f03fe6431952" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ------------------------------------------------------------------------ <a href="https://medium.com/webdevhub/notes-i-wish-i-had-when-i-started-learning-python-16ce4244be12" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/webdevhub/notes-i-wish-i-had-when-i-started-learning-python-16ce4244be12"><strong>Notes I Wish I Had When I Started Learning Python</strong><br /> <em>Plus resources for learning data structures and algorithms in python at the bottom of this article!</em>medium.com</a><a href="https://medium.com/webdevhub/notes-i-wish-i-had-when-i-started-learning-python-16ce4244be12" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/awesome-list-of-github-repositories-f1c433e32b17" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/awesome-list-of-github-repositories-f1c433e32b17"><strong>Awesome List Of Github Repositories</strong><br /> <em>Platforms</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/awesome-list-of-github-repositories-f1c433e32b17" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/my-personal-arsenal-of-convenience-scripts-3c7869fdae53" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/my-personal-arsenal-of-convenience-scripts-3c7869fdae53"><strong>My Personal Arsenal Of Convenience Scripts</strong><br /> <em>At the bottom the following commands are listed as a markdown file and embed in this article as a github gist.</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/my-personal-arsenal-of-convenience-scripts-3c7869fdae53" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/adding-css-to-your-html-3a17ba25ba82" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/adding-css-to-your-html-3a17ba25ba82"><strong>Adding CSS To Your HTML</strong><br /> <em>For beginners … very picture heavy since CSS is such a visual discipline!</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/adding-css-to-your-html-3a17ba25ba82" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/most-common-javascript-errors-311ea1356a3d" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/most-common-javascript-errors-311ea1356a3d"><strong>Most Common Javascript Errors</strong><br /> <em>Written in quiz format</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/most-common-javascript-errors-311ea1356a3d" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/super-simple-intro-to-react-5c78e4207b7f" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/super-simple-intro-to-react-5c78e4207b7f"><strong>Super Simple Intro To React</strong><br /> <em>This is a basic introduction for those who feel overwhelmed by the vast microcosm that is the React ecosystem!</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/super-simple-intro-to-react-5c78e4207b7f" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/react-state-d8e0fc340714" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/react-state-d8e0fc340714"><strong>React State</strong><br /> <em>Demystified</em>medium.com</a><a href="https://medium.com/codex/react-state-d8e0fc340714" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/awesome-web-development-youtube-video-archive-792a25839143" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/awesome-web-development-youtube-video-archive-792a25839143"><strong>Awesome Web Development Youtube Video Archive</strong><br /> <em>This is going to be a running list of youtube videos and channels that I discover as I learn web development. It will…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/awesome-web-development-youtube-video-archive-792a25839143" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/beginner-python-problems-solutions-dd631e9c3a9f" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/beginner-python-problems-solutions-dd631e9c3a9f"><strong>Python Problems & Solutions For Beginners</strong><br /> <em>Introduction to python taught through example problems. Solutions are included in embedded repl.it at the bottom of…</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/beginner-python-problems-solutions-dd631e9c3a9f" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/fundamental-concepts-in-javascript-8e093a665b04" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/fundamental-concepts-in-javascript-8e093a665b04"><strong>Fundamental Concepts In Javascript</strong><br /> <em>This is the stuff that comes up on interviews…</em>medium.com</a><a href="https://medium.com/codex/fundamental-concepts-in-javascript-8e093a665b04" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/bash-proficiency-in-under-15-minutes-3ec9d4e2e65" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/bash-proficiency-in-under-15-minutes-3ec9d4e2e65"><strong>Bash Proficiency In Under 15 Minutes</strong><br /> <em>Cheat sheet and in-depth explanations located below main article contents… The UNIX shell program interprets user…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/bash-proficiency-in-under-15-minutes-3ec9d4e2e65" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/analytics-vidhya/mini-review-of-sql-for-postgresql-w-node-express-f34676f3802b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/analytics-vidhya/mini-review-of-sql-for-postgresql-w-node-express-f34676f3802b"><strong>Mini Review Of SQL For PostgreSQL W Node & Express</strong><br /> <em>What is a Query?</em>medium.com</a><a href="https://medium.com/analytics-vidhya/mini-review-of-sql-for-postgresql-w-node-express-f34676f3802b" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/all-the-things-you-can-embed-in-a-medium-article-b03a85c65d86" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/all-the-things-you-can-embed-in-a-medium-article-b03a85c65d86"><strong>All The Things You Can Embed In A Medium Article</strong><br /> <em>I have this innate desire to make everything available all in one place and it’s usually an unnecessary waste of time……</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/all-the-things-you-can-embed-in-a-medium-article-b03a85c65d86" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/front-end-behavioral-interview-bf5c079f7461" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/front-end-behavioral-interview-bf5c079f7461"><strong>Front End Behavioral Interview</strong><br /> <em>Web Developer Job Interview Questions</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/front-end-behavioral-interview-bf5c079f7461" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/prerequisites-to-writing-express-apis-75e3267b284a" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/prerequisites-to-writing-express-apis-75e3267b284a"><strong>The ExpressJS Way To Write APIs</strong><br /> <em>This article will cover the basics of express from the perspective of a beginner without concerning its self with the…</em>medium.com</a><a href="https://medium.com/codex/prerequisites-to-writing-express-apis-75e3267b284a" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/analytics-vidhya/heroku-deploy-guides-cheatsheet-compilation-b2897b69ce02" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/analytics-vidhya/heroku-deploy-guides-cheatsheet-compilation-b2897b69ce02"><strong>Heroku Deploy Guides & Cheatsheet Compilation</strong><br /> <em>Heroku lets you deploy, run and manage applications written in Ruby, Node.js, Java, Python, Clojure, Scala, Go and PHP…</em>medium.com</a><a href="https://medium.com/analytics-vidhya/heroku-deploy-guides-cheatsheet-compilation-b2897b69ce02" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/react-in-depth-1965dcde8d4f" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/react-in-depth-1965dcde8d4f"><strong>A Comprehensive Deep Dive into React</strong><br /> <em>An in-depth look into the world of React.</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/react-in-depth-1965dcde8d4f" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/take-a-look-at-the-big-picture-b69e0999a380" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/take-a-look-at-the-big-picture-b69e0999a380"><strong>Web Development Resource List #4</strong><br /> <em>Update:</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/take-a-look-at-the-big-picture-b69e0999a380" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/bash-d3077114aea7" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/bash-d3077114aea7"><strong>BASH CHEAT SHEET</strong><br /> <em>My Bash Cheatsheet Index:</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/bash-d3077114aea7" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/heroku-cheat-sheet-6107ce6ba52b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/heroku-cheat-sheet-6107ce6ba52b"><strong>Heroku Cheat Sheet</strong><br /> <em>a cheatsheet for using heroku-cli</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/heroku-cheat-sheet-6107ce6ba52b" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/prerequisites-to-writing-express-apis-75e3267b284a" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/prerequisites-to-writing-express-apis-75e3267b284a"><strong>The ExpressJS Way To Write APIs</strong><br /> <em>This article will cover the basics of express from the perspective of a beginner without concerning it’s self with the…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/prerequisites-to-writing-express-apis-75e3267b284a" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/heroku-deploy-guides-cheatsheet-compilation-b2897b69ce02" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/heroku-deploy-guides-cheatsheet-compilation-b2897b69ce02"><strong>Heroku Deploy Guides & Cheatsheet Compilation</strong><br /> <em>Heroku lets you deploy, run and manage applications written in Ruby, Node.js, Java, Python, Clojure, Scala, Go and PHP…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/heroku-deploy-guides-cheatsheet-compilation-b2897b69ce02" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/react-in-depth-1965dcde8d4f" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/react-in-depth-1965dcde8d4f"><strong>A Comprehensive Deep Dive into React</strong><br /> <em>An in-depth look into the world of React.</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/react-in-depth-1965dcde8d4f" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/take-a-look-at-the-big-picture-b69e0999a380" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/take-a-look-at-the-big-picture-b69e0999a380"><strong>Web Development Resource List #4</strong><br /> <em>Update:</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/take-a-look-at-the-big-picture-b69e0999a380" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/bash-d3077114aea7" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/bash-d3077114aea7"><strong>BASH CHEAT SHEET</strong><br /> <em>My Bash Cheatsheet Index:</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/bash-d3077114aea7" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/heroku-cheat-sheet-6107ce6ba52b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/heroku-cheat-sheet-6107ce6ba52b"><strong>Heroku Cheat Sheet</strong><br /> <em>a cheatsheet for using heroku-cli</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/heroku-cheat-sheet-6107ce6ba52b" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/web-developers-technical-glossary-2066beae5e96" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/web-developers-technical-glossary-2066beae5e96"><strong>Web Developer’s Technical Glossary</strong><br /> <em>This will be a running list as I make updates!</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/web-developers-technical-glossary-2066beae5e96" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://medium.com/codex/postgresql-in-43-commands-or-less-19fba3e37110" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/postgresql-in-43-commands-or-less-19fba3e37110"><strong>PostgreSQL In 43 Commands Or Less</strong><br /> <em>In database jargon, PostgreSQL uses a client/server model. A PostgreSQL session consists of the following cooperating…</em>medium.com</a><a href="https://medium.com/codex/postgresql-in-43-commands-or-less-19fba3e37110" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/geekculture/why-jamstack-rocks-666114722f35" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/why-jamstack-rocks-666114722f35"><strong>Why Jamstack Rocks🤘😎🤙</strong><br /> <em>JAMstack websites don’t use the microservices architecture, but they go for the micro frontends architecture. Each…</em>medium.com</a><a href="https://medium.com/geekculture/why-jamstack-rocks-666114722f35" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/what-are-bash-aliases-and-why-should-you-be-using-them-30a6cfafdfeb" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/what-are-bash-aliases-and-why-should-you-be-using-them-30a6cfafdfeb"><strong>What Are Bash Aliases And Why Should You Be Using Them!</strong><br /> <em>A Bash alias is a method of supplementing or overriding Bash commands with new ones. Bash aliases make it easy for…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/what-are-bash-aliases-and-why-should-you-be-using-them-30a6cfafdfeb" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://medium.com/geekculture/life-saving-bash-scripts-part-2-b40c8ee22682" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/life-saving-bash-scripts-part-2-b40c8ee22682"><strong>Life Saving Bash Scripts Part 2</strong><br /> <em>I am not saying they’re in any way special compared with other bash scripts… but when I consider that you can never…</em>medium.com</a><a href="https://medium.com/geekculture/life-saving-bash-scripts-part-2-b40c8ee22682" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/analytics-vidhya/job-boards-and-the-hunt-8cbfefefbb33" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/analytics-vidhya/job-boards-and-the-hunt-8cbfefefbb33"><strong>Job Boards and The Hunt</strong><br /> <em>I can’t imagine the kind of masochism it would take to enjoy the act of posting and daily maintenance on a job…</em>medium.com</a><a href="https://medium.com/analytics-vidhya/job-boards-and-the-hunt-8cbfefefbb33" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/absolutely-everything-you-could-need-to-know-about-how-javascript-works-633549469528" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/absolutely-everything-you-could-need-to-know-about-how-javascript-works-633549469528"><strong>Absolutely Everything You Could Need To Know About How JavaScript Works.</strong><br /> <em>Seriously… this list is utterly exhaustive it covers more core concepts than I can hold the names of in working memory…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/absolutely-everything-you-could-need-to-know-about-how-javascript-works-633549469528" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/react-tutorial-from-basics-647ba595e607" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/react-tutorial-from-basics-647ba595e607"><strong>Basic React Tutorial</strong><br /> <em>Random Things to Remember</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/react-tutorial-from-basics-647ba595e607" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/fundamental-concepts-in-react-that-will-probably-come-up-on-an-interview-5495b6421287" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/fundamental-concepts-in-react-that-will-probably-come-up-on-an-interview-5495b6421287"><strong>Fundamental Concepts In React That Will Probably Come Up On An Interview</strong><br /> <em>Incomplete Article</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/fundamental-concepts-in-react-that-will-probably-come-up-on-an-interview-5495b6421287" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/geekculture/the-penultimate-web-developers-cheat-sheet-a02a423139a4" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/the-penultimate-web-developers-cheat-sheet-a02a423139a4"><strong>The Penultimate Web Developer’s Cheat Sheet</strong><br /> <em>I am literally just going to combine a fair number of my Cheat Sheets in no particular order.</em>medium.com</a><a href="https://medium.com/geekculture/the-penultimate-web-developers-cheat-sheet-a02a423139a4" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/geekculture/bash-commands-that-save-time-920fb6ab9d0a" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/bash-commands-that-save-time-920fb6ab9d0a"><strong>Bash Commands That Save Me Time and Frustration</strong><br /> <em>Here’s a list of bash commands that stand between me and insanity.</em>medium.com</a><a href="https://medium.com/geekculture/bash-commands-that-save-time-920fb6ab9d0a" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/quick-web-developers-website-checklist-a-list-of-tools-for-improvement-9a52e11c8ee1" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/quick-web-developers-website-checklist-a-list-of-tools-for-improvement-9a52e11c8ee1"><strong>Quick Web Developers Website Checklist & A List Of Tools For Improvement</strong><br /> <em>A set of questions you should use before handing off your application to the client.</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/quick-web-developers-website-checklist-a-list-of-tools-for-improvement-9a52e11c8ee1" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/react-md-cbaafb31765d" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/react-md-cbaafb31765d"><strong>10 Essential React Interview Questions For Aspiring Frontend Developers</strong><br /> <em>Comprehensive React Cheatsheet included at the bottom of this article!</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/react-md-cbaafb31765d" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/long-list-of-invaluable-nodejs-resources-6a793ae1ce6" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/long-list-of-invaluable-nodejs-resources-6a793ae1ce6"><strong>Long List Of Invaluable NodeJS Resources</strong><br /> <em>Disclaimer: I know that I did not create this list all on my own… I can’t recall or track down the original list if you…</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/long-list-of-invaluable-nodejs-resources-6a793ae1ce6" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/open-ended-frontend-interview-questions-you-should-answer-before-your-next-interview-7c9722712521" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/open-ended-frontend-interview-questions-you-should-answer-before-your-next-interview-7c9722712521"><strong>Open Ended Frontend Interview Questions You Should Answer Before Your Next Interview</strong><br /> <em>Explain event delegation.</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/open-ended-frontend-interview-questions-you-should-answer-before-your-next-interview-7c9722712521" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/data-structures-under-the-hood-660256c2e4e3" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/data-structures-under-the-hood-660256c2e4e3"><strong>Data Structures… Under The Hood</strong><br /> <em>Data Structures Reference</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/data-structures-under-the-hood-660256c2e4e3" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/geekculture/web-development-interview-resource-list-88fce9876261" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/web-development-interview-resource-list-88fce9876261"><strong>Web Development Interview Resource List</strong><br /> <em>Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it…</em>medium.com</a><a href="https://medium.com/geekculture/web-development-interview-resource-list-88fce9876261" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/geekculture/beginners-guide-to-python-e5a59b5bb64d" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/beginners-guide-to-python-e5a59b5bb64d"><strong>Beginners Guide To Python</strong><br /> <em>My favorite language for maintainability is Python. It has simple, clean syntax, object encapsulation, good library…</em>medium.com</a><a href="https://medium.com/geekculture/beginners-guide-to-python-e5a59b5bb64d" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/data-structures-algorithms-resource-list-part-1-8bad647a8ad8" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/data-structures-algorithms-resource-list-part-1-8bad647a8ad8"><strong>Data Structures & Algorithms Resource List Part 1</strong><br /> <em>Guess the author of the following quotes:</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/data-structures-algorithms-resource-list-part-1-8bad647a8ad8" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/memoization-86685d811182" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/memoization-86685d811182"><strong>What is Memoization?</strong><br /> <em>And why this programming paradigm shouldn’t make you cringe.</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/memoization-86685d811182" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/css-interview-prep-quiz-6e3e4de7ca53" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/css-interview-prep-quiz-6e3e4de7ca53"><strong>CSS Interview Prep Quiz</strong><br /> <em>Plus Css Cheat Sheet (82 questions total)</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/css-interview-prep-quiz-6e3e4de7ca53" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/geekculture/verbal-technical-interview-questions-about-graph-data-structures-fc6b1afbd8be" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/verbal-technical-interview-questions-about-graph-data-structures-fc6b1afbd8be"><strong>Graph Data Structure Interview Questions At A Glance</strong><br /> <em>Because they’re just about the most important data structure there is.</em>medium.com</a><a href="https://medium.com/geekculture/verbal-technical-interview-questions-about-graph-data-structures-fc6b1afbd8be" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/geekculture/object-methods-4066ed24b214" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/object-methods-4066ed24b214"><strong>Object Methods</strong><br /> <em>Iterating Through Objects</em>medium.com</a><a href="https://medium.com/geekculture/object-methods-4066ed24b214" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/github-repositories-that-will-teach-you-how-to-code-for-free-ad0ecf59d89e" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/github-repositories-that-will-teach-you-how-to-code-for-free-ad0ecf59d89e"><strong>Github Repositories That Will Teach You How To Code For Free!</strong><br /> <em>30-seconds/30-seconds-of-code</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/github-repositories-that-will-teach-you-how-to-code-for-free-ad0ecf59d89e" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/resources-by-programming-language-399d9f9ef520" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/resources-by-programming-language-399d9f9ef520"><strong>Resources By Programming Language</strong><br /> <em>Here’s a list of programming resources sorted by programming language.</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/resources-by-programming-language-399d9f9ef520" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://medium.com/codex/scope-closures-context-in-javascript-f126f1523104" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/scope-closures-context-in-javascript-f126f1523104"><strong>Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms.</strong><br /> <em>“JavaScript’s global scope is like a public toilet. You can’t avoid going in there, but try to limit your contact with…</em>medium.com</a><a href="https://medium.com/codex/scope-closures-context-in-javascript-f126f1523104" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/these-are-a-few-of-my-favorite-things-82e8b6e61879" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/these-are-a-few-of-my-favorite-things-82e8b6e61879"><strong>These Are A Few Of My Favorite Things</strong><br /> <em>A web development student’s declassified school survival guide.</em>medium.com</a><a href="https://medium.com/codex/these-are-a-few-of-my-favorite-things-82e8b6e61879" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/objects-in-javascript-b212486dade6" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/objects-in-javascript-b212486dade6"><strong>Objects In JavaScript</strong><br /> <em>The object is a data structure that stores other data, similar to how an array stores elements.</em>medium.com</a><a href="https://medium.com/codex/objects-in-javascript-b212486dade6" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/fundamental-javascript-concepts-you-should-understand-81c4d839b827" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/fundamental-javascript-concepts-you-should-understand-81c4d839b827"><strong>Fundamental Javascript Concepts You Should Understand</strong><br /> <em>Plain Old JS Object Lesson Concepts</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/fundamental-javascript-concepts-you-should-understand-81c4d839b827" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/mutability-and-reference-vs-privative-types-in-javascript-5294422db4b0" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/mutability-and-reference-vs-privative-types-in-javascript-5294422db4b0"><strong>Mutability And Reference VS Privative Types in JavaScript</strong><br /> <em>Mutability && Primitive && Reference Examples</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/mutability-and-reference-vs-privative-types-in-javascript-5294422db4b0" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/array-callback-methods-implemented-with-for-loops-d08875df6777" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/array-callback-methods-implemented-with-for-loops-d08875df6777"><strong>Array Callback Methods Implemented With For Loops</strong><br /> <em>How to implement array callback methods in JavaScript</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/array-callback-methods-implemented-with-for-loops-d08875df6777" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/introductory-react-part-2-cda01615a186" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/introductory-react-part-2-cda01615a186"><strong>Beginner’s Guide To React Part 2</strong><br /> <em>As I learn to build web applications in React I will blog about it in this series in an attempt to capture the…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/introductory-react-part-2-cda01615a186" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/a-very-quick-guide-to-calculating-big-o-computational-complexity-eb1557e85fa3" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/a-very-quick-guide-to-calculating-big-o-computational-complexity-eb1557e85fa3"><strong>A Very Quick Guide To Calculating Big O Computational Complexity</strong><br /> <em>Big O: big picture, broad strokes, not details</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/a-very-quick-guide-to-calculating-big-o-computational-complexity-eb1557e85fa3" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/introduction-to-react-for-complete-beginners-8021738aa1ad" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/introduction-to-react-for-complete-beginners-8021738aa1ad"><strong>Introduction to React for Complete Beginners</strong><br /> <em>All of the code examples below will be included a second time at the bottom of this article as an embedded gist.</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/introduction-to-react-for-complete-beginners-8021738aa1ad" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/scheduling-settimeout-and-setinterval-fcb2f40d16f7" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/scheduling-settimeout-and-setinterval-fcb2f40d16f7"><strong>Scheduling: setTimeout and setInterval</strong><br /> <em>We may decide to execute a function not right now, but at a later time. That’s called “scheduling a call”.</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/scheduling-settimeout-and-setinterval-fcb2f40d16f7" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/css-animations-d196a20099a5" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/css-animations-d196a20099a5"><strong>LocalStorage VS SessionStorage</strong><br /> <em>Web storage objects localStorage and sessionStorage allow to save key/value pairs in the browser.</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/css-animations-d196a20099a5" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/these-are-the-bash-shell-commands-that-stand-between-me-and-insanity-984865ba5d1b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/these-are-the-bash-shell-commands-that-stand-between-me-and-insanity-984865ba5d1b"><strong>These Are The Bash Shell Commands That Stand Between Me And Insanity</strong><br /> <em>I will not profess to be a bash shell wizard… but I have managed to scour some pretty helpful little scripts from Stack…</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/these-are-the-bash-shell-commands-that-stand-between-me-and-insanity-984865ba5d1b" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/how-to-implement-native-es6-data-structures-using-arrays-objects-ce953b9f6a07" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/how-to-implement-native-es6-data-structures-using-arrays-objects-ce953b9f6a07"><strong>How To Implement Native(ES6) Data Structures Using Arrays & Objects</strong><br /> <em>Smart data structures and dumb code works better than the other way around -“Eric S. Raymond”</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/how-to-implement-native-es6-data-structures-using-arrays-objects-ce953b9f6a07" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/objects-in-javascript-cc578a781e1d" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/objects-in-javascript-cc578a781e1d"><strong>Objects in Javascript</strong><br /> <em>Codepen with examples for you to practice with below!</em>medium.com</a><a href="https://medium.com/codex/objects-in-javascript-cc578a781e1d" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/absolute-beginners-guide-to-javascript-part-1-e222d166b6e1" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/absolute-beginners-guide-to-javascript-part-1-e222d166b6e1"><strong>The Beginner’s Guide To JavaScript</strong><br /> <em>Part 1</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/absolute-beginners-guide-to-javascript-part-1-e222d166b6e1" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/star-gazers/web-developer-resource-list-part-4-fd686892b9eb" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/star-gazers/web-developer-resource-list-part-4-fd686892b9eb"><strong>Web Developer Resource List Part 4</strong><br /> <em>A all encompassing list of tools and resources for web developers</em>medium.com</a><a href="https://medium.com/star-gazers/web-developer-resource-list-part-4-fd686892b9eb" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/vscode-extensions-specifically-for-javascript-development-ea91305cbd4a" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/vscode-extensions-specifically-for-javascript-development-ea91305cbd4a"><strong>VSCode Extensions Specifically for JavaScript Development</strong><br /> <em>VSCode Extensions that are indispensable in JavaScript development</em>medium.com</a><a href="https://medium.com/codex/vscode-extensions-specifically-for-javascript-development-ea91305cbd4a" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b"><strong>A list of all of my articles to link to future posts</strong><br /> <em>You should probably skip this one… seriously it’s just for internal use!</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/lists-stacks-and-queues-in-javascript-88466fae0fbb" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/lists-stacks-and-queues-in-javascript-88466fae0fbb"><strong>Fundamental Data Structures in JavaScript</strong><br /> <em>A simple to follow guide to Lists Stacks and Queues, with animated gifs, diagrams, and code examples!</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/lists-stacks-and-queues-in-javascript-88466fae0fbb" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/web-development-resources-part-3-f862ceb2b82a" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/web-development-resources-part-3-f862ceb2b82a"><strong>Web Development Resources Part 3</strong><br /> <em>I’m the psychological equivalent of a physical hoarder only instead of empty soda cans and dead racoons it’s lists of…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/web-development-resources-part-3-f862ceb2b82a" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/web-development-interview-part-3-826ae81a9107" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/web-development-interview-part-3-826ae81a9107"><strong>Web Development Interview Part 3💻</strong><br /> <em>This installment is going to be the least technically demanding thus far however these questions are a more realistic…</em>medium.com</a><a href="https://medium.com/codex/web-development-interview-part-3-826ae81a9107" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/the-best-cloud-based-code-playgrounds-of-2021-part-1-cdae9448db24" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/the-best-cloud-based-code-playgrounds-of-2021-part-1-cdae9448db24"><strong>The Best Cloud-Based Code Playgrounds of 2021 (Part 1)</strong><br /> <em>A plethora of front-end code playgrounds have appeared over the years. They offer a convenient way to experiment with…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/the-best-cloud-based-code-playgrounds-of-2021-part-1-cdae9448db24" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/front-end-interview-questions-part-2-86ddc0e91443" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/front-end-interview-questions-part-2-86ddc0e91443"><strong>Front End Interview Questions Part 2</strong><br /> <em>These will focus more on vocabulary and concepts than the application driven approach in my last post!</em>medium.com</a><a href="https://medium.com/codex/front-end-interview-questions-part-2-86ddc0e91443" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/star-gazers/web-developer-resource-list-part-2-9c5cb56ab263" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/star-gazers/web-developer-resource-list-part-2-9c5cb56ab263"><strong>Web Developer Resource List Part 2</strong><br /> <em>Because I compile these things compulsively anyway…</em>medium.com</a><a href="https://medium.com/star-gazers/web-developer-resource-list-part-2-9c5cb56ab263" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/http-basics-8f02a96a834a" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/http-basics-8f02a96a834a"><strong>HTTP Basics</strong><br /> <em>“If you want to build a ship, don’t drum up the men and women to gather wood, divide the work, and give orders…</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/http-basics-8f02a96a834a" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/javascript-frameworks-libraries-35931e187a35" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/javascript-frameworks-libraries-35931e187a35"><strong>JavaScript Frameworks & Libraries</strong><br /> <em>My Awesome JavaScript List Part 2</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/javascript-frameworks-libraries-35931e187a35" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/my-take-on-awesome-javascript-243255451e74" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/my-take-on-awesome-javascript-243255451e74"><strong>My ‘awesome’ list of JavaScript resources</strong><br /> <em>Everyone’s seen the ‘Awesome’ lists on GitHub… and they are indeed awesome… so today I am going to attempt to curate my…</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/my-take-on-awesome-javascript-243255451e74" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/everything-you-need-to-get-started-with-vscode-extensions-resources-b9f4c8d91931" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/everything-you-need-to-get-started-with-vscode-extensions-resources-b9f4c8d91931"><strong>Everything You Need to Get Started With VSCode + Extensions & Resources</strong><br /> <em>Commands:</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/everything-you-need-to-get-started-with-vscode-extensions-resources-b9f4c8d91931" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/my-favorite-vscode-themes-9bab65af3f0f" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/my-favorite-vscode-themes-9bab65af3f0f"><strong>My Favorite VSCode <em>Themes</em></strong><br /> Themeslevelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/my-favorite-vscode-themes-9bab65af3f0f" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/object-oriented-programming-in-javascript-d45007d06333" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/object-oriented-programming-in-javascript-d45007d06333"><strong>Object Oriented Programming in JavaScript</strong><br /> <em>Object-Oriented Programming</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/object-oriented-programming-in-javascript-d45007d06333" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/javascript-rotate-array-problemwalkthrough-31deb19ebba1" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/javascript-rotate-array-problemwalkthrough-31deb19ebba1"><strong>JavaScript Rotate (Array) ProblemWalkthrough</strong><br /> <em>Explanation for Rotate Right</em>medium.com</a><a href="https://medium.com/codex/javascript-rotate-array-problemwalkthrough-31deb19ebba1" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/super-simple-intro-to-html-651d695f9bc" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/super-simple-intro-to-html-651d695f9bc"><strong>Super Simple Intro To HTML</strong><br /> <em>What is HTML, CSS & JS and why do we need all three?</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/super-simple-intro-to-html-651d695f9bc" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/everything-you-need-to-know-about-relational-databases-sql-postgresql-and-sequelize-to-build-8acb68284a98" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/everything-you-need-to-know-about-relational-databases-sql-postgresql-and-sequelize-to-build-8acb68284a98"><strong>Everything You Need To Know About Relational Databases, SQL, PostgreSQL and Sequelize To Build…</strong><br /> <em>For Front end developers who like myself struggle with making the jump to fullstack.</em>medium.com</a><a href="https://medium.com/codex/everything-you-need-to-know-about-relational-databases-sql-postgresql-and-sequelize-to-build-8acb68284a98" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/understanding-git-a-beginners-guide-containing-cheat-sheets-resources-b50c9c01a107" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/understanding-git-a-beginners-guide-containing-cheat-sheets-resources-b50c9c01a107"><strong>Understanding Git (A Beginners Guide Containing Cheat Sheets & Resources)</strong><br /> <em>Basic Git Work Flow.</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/understanding-git-a-beginners-guide-containing-cheat-sheets-resources-b50c9c01a107" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/complete-javascript-reference-guide-64306cd6b0db" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/complete-javascript-reference-guide-64306cd6b0db"><strong>The Complete JavaScript Reference Guide</strong><br /> <em>You will want to bookmark this</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/complete-javascript-reference-guide-64306cd6b0db" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/geekculture/modules-in-javascript-a55333e35978" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/modules-in-javascript-a55333e35978"><strong>Modules in Javascript</strong><br /> <em>Differences between Node.js and browsers</em>medium.com</a><a href="https://medium.com/geekculture/modules-in-javascript-a55333e35978" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/an-introduction-to-markdown-bonus-markdown-templates-included-3497ce56de3" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/an-introduction-to-markdown-bonus-markdown-templates-included-3497ce56de3"><strong>An Introduction to Markdown (Bonus Markdown Templates Included)</strong><br /> <em>Basic Syntax Guide</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/an-introduction-to-markdown-bonus-markdown-templates-included-3497ce56de3" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/web-dev-resources-ec1975773d7d" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/web-dev-resources-ec1975773d7d"><strong>Web Dev Resources</strong><br /> <em>Web Development</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/web-dev-resources-ec1975773d7d" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/codex/regular-expressions-4d8fb3eb146b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/regular-expressions-4d8fb3eb146b"><strong>Regular Expressions</strong><br /> <em>description:</em>medium.com</a><a href="https://medium.com/codex/regular-expressions-4d8fb3eb146b" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/geekculture/writing-files-using-python-d46b4851366f" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/geekculture/writing-files-using-python-d46b4851366f"><strong>Writing Files Using Python</strong><br /> <em>Basics of Writing Files in Python<br /> The common methods to operate with files are open() to open a file,</em>medium.com</a><a href="https://medium.com/geekculture/writing-files-using-python-d46b4851366f" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/a-collection-of-my-most-useful-gist-entries-f4314f3ba3ab" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/a-collection-of-my-most-useful-gist-entries-f4314f3ba3ab"><strong>A Collection of my most useful Gist Entries</strong><br /> <em>This list is in no particular order!</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/a-collection-of-my-most-useful-gist-entries-f4314f3ba3ab" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://javascript.plainenglish.io/learn-css-so-that-your-site-doesnt-look-like-garbage-938871b4521a" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.plainenglish.io/learn-css-so-that-your-site-doesnt-look-like-garbage-938871b4521a"><strong>Learn CSS So That Your Site Doesn’t Look Like Garbage</strong><br /> <em>CSS Selectors</em>javascript.plainenglish.io</a><a href="https://javascript.plainenglish.io/learn-css-so-that-your-site-doesnt-look-like-garbage-938871b4521a" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/postgresql-setup-for-windows-wsl-ubuntu-801672ab7089" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/postgresql-setup-for-windows-wsl-ubuntu-801672ab7089"><strong>PostgreSQL Setup For Windows & WSL/Ubuntu</strong><br /> <em>If you follow this guide to a tee… you will install PostgreSQL itself on your Windows installation. Then, you will…</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/postgresql-setup-for-windows-wsl-ubuntu-801672ab7089" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/emmet-cheat-sheet-24758e628d37" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/emmet-cheat-sheet-24758e628d37"><strong>Emmet Cheat Sheet</strong><br /> <em>EMMET</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/emmet-cheat-sheet-24758e628d37" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/git-tricks-57e8d0292285" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/git-tricks-57e8d0292285"><strong>Git-Tricks</strong><br /> <em>Refs</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/git-tricks-57e8d0292285" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/python-study-guide-for-a-native-javascript-developer-5cfdf3d2bdfb" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/python-study-guide-for-a-native-javascript-developer-5cfdf3d2bdfb"><strong>Python Study Guide for a JavaScript Programmer</strong><br /> <em>A guide to commands in Python from what you know in JavaScript</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/python-study-guide-for-a-native-javascript-developer-5cfdf3d2bdfb" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/fetch-quick-sheet-8872650742b4" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/fetch-quick-sheet-8872650742b4"><strong><em>Fetch</em> Quick Sheet</strong><br /> Fetchbryanguner.medium.com</a><a href="https://bryanguner.medium.com/fetch-quick-sheet-8872650742b4" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/express-quick-sheet-8f93762c59ca" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/express-quick-sheet-8f93762c59ca"><strong>Express Quick Sheet</strong><br /> <em>Settings</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/express-quick-sheet-8f93762c59ca" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://medium.com/codex/fundamental-data-structures-in-javascript-8f9f709c15b4" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/fundamental-data-structures-in-javascript-8f9f709c15b4"><strong>Fundamental Data Structures In JavaScript</strong><br /> <em>Data structures in JavaScript</em>medium.com</a><a href="https://medium.com/codex/fundamental-data-structures-in-javascript-8f9f709c15b4" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://bryanguner.medium.com/deploy-react-app-to-heroku-using-postgres-express-70b7ea807986" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/deploy-react-app-to-heroku-using-postgres-express-70b7ea807986"><strong>Deploy React App To Heroku Using Postgres & Express</strong><br /> <em>Heroku is an web application that makes deploying applications easy for a beginner.</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/deploy-react-app-to-heroku-using-postgres-express-70b7ea807986" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://medium.com/codex/postgresql-cheat-sheet-718b813d3e31" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/codex/postgresql-cheat-sheet-718b813d3e31"><strong>Postgresql Cheat Sheet</strong><br /> <em>PostgreSQL commands</em>medium.com</a><a href="https://medium.com/codex/postgresql-cheat-sheet-718b813d3e31" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://medium.com/star-gazers/a-quick-guide-to-big-o-notation-memoization-tabulation-and-sorting-algorithms-by-example-803ff193c522" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/star-gazers/a-quick-guide-to-big-o-notation-memoization-tabulation-and-sorting-algorithms-by-example-803ff193c522"><strong>A Quick Guide to Big-O Notation, Memoization, Tabulation, and Sorting Algorithms by Example</strong><br /> <em>Curating Complexity: A Guide to Big-O Notation</em>medium.com</a><a href="https://medium.com/star-gazers/a-quick-guide-to-big-o-notation-memoization-tabulation-and-sorting-algorithms-by-example-803ff193c522" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://levelup.gitconnected.com/basic-web-development-environment-setup-9f36c3f15afe" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://levelup.gitconnected.com/basic-web-development-environment-setup-9f36c3f15afe"><strong>Basic Web Development Environment Setup</strong><br /> <em>Windows Subsystem for Linux (WSL) and Ubuntu</em>levelup.gitconnected.com</a><a href="https://levelup.gitconnected.com/basic-web-development-environment-setup-9f36c3f15afe" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 22, 2021](https://medium.com/p/1f6f88ebdf5b). <a href="https://medium.com/@bryanguner/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,283 @@ Fundamental Data Structures in JavaScript ========================================= A simple to follow guide to Lists Stacks and Queues, with animated gifs, diagrams, and code examples! ------------------------------------------------------------------------ ### Fundamental Data Structures in JavaScript #### A simple to follow guide to Lists Stacks and Queues, with animated gifs, diagrams, and code examples! <figure><img src="https://cdn-images-1.medium.com/max/2560/0*ph952PPOmG5uz_Pv" class="graf-image" /></figure> <figure><img src="https://cdn-images-1.medium.com/max/800/0*zhC6dP1hb2rq2qt2.png" class="graf-image" /></figure>### Linked Lists <figure><img src="https://cdn-images-1.medium.com/max/800/0*znES1vYRV3Zvk9-e.gif" class="graf-image" /></figure>In the university setting, it’s common for Linked Lists to appear early on in an undergraduate’s Computer Science coursework. While they don’t always have the most practical real-world applications in industry, Linked Lists make for an important and effective educational tool in helping develop a student’s mental model on what data structures actually are to begin with. Linked lists are simple. They have many compelling, reoccurring edge cases to consider that emphasize to the student the need for care and intent while implementing data structures. They can be applied as the underlying data structure while implementing a variety of other prevalent abstract data types, such as Lists, Stacks, and Queues, and they have a level of versatility high enough to clearly illustrate the value of the Object Oriented Programming paradigm. They also come up in software engineering interviews quite often. <figure><img src="https://cdn-images-1.medium.com/max/800/0*OYmTpAK6tyDQzoIE.gif" class="graf-image" /></figure>### What is a Linked List? A Linked List data structure represents a linear sequence of “vertices” (or “nodes”), and tracks three important properties. **Linked List Properties:** <figure><img src="https://cdn-images-1.medium.com/max/800/1*z-i1wE6QPOtqxGiW_B6WuA.png" class="graf-image" /></figure>The data being tracked by a particular Linked List does not live inside the Linked List instance itself. Instead, each vertex is actually an instance of an even simpler, smaller data structure, often referred to as a “Node”. Depending on the type of Linked List (there are many), Node instances track some very important properties as well. **Linked List Node Properties:** <figure><img src="https://cdn-images-1.medium.com/max/800/1*vagMBs5Quwv8b8tvF4W6Og.png" class="graf-image" /></figure>Property Description `value`: The actual value this node represents.`next`The next node in the list (relative to this node).`previous`The previous node in the list (relative to this node). **NOTE:** The `previous` property is for Doubly Linked Lists only! Linked Lists contain *ordered* data, just like arrays. The first node in the list is, indeed, first. From the perspective of the very first node in the list, the *next* node is the second node. From the perspective of the second node in the list, the *previous* node is the first node, and the *next* node is the third node. And so it goes. #### “So…this sounds a lot like an Array…” Admittedly, this does *sound* a lot like an Array so far, and that’s because Arrays and Linked Lists are both implementations of the List ADT. However, there is an incredibly important distinction to be made between Arrays and Linked Lists, and that is how they *physically store* their data. (As opposed to how they *represent* the order of their data.) Recall that Arrays contain *contiguous* data. Each element of an array is actually stored *next to* it’s neighboring element *in the actual hardware of your machine*, in a single continuous block in memory. *An Array’s contiguous data being stored in a continuous block of addresses in memory.* Unlike Arrays, Linked Lists contain *non-contiguous* data. Though Linked Lists *represent* data that is ordered linearly, that mental model is just that — an interpretation of the *representation* of information, not reality. In reality, in the actual hardware of your machine, whether it be in disk or in memory, a Linked List’s Nodes are not stored in a single continuous block of addresses. Rather, Linked List Nodes live at randomly distributed addresses throughout your machine! The only reason we know which node comes next in the list is because we’ve assigned its reference to the current node’s `next` pointer. *A Singly Linked List’s non-contiguous data (Nodes) being stored at randomly distributed addresses in memory.* For this reason, Linked List Nodes have *no indices*, and no *random access*. Without random access, we do not have the ability to look up an individual Linked List Node in constant time. Instead, to find a particular Node, we have to start at the very first Node and iterate through the Linked List one node at a time, checking each Node’s *next* Node until we find the one we’re interested in. So when implementing a Linked List, we actually must implement both the Linked List class *and* the Node class. Since the actual data lives in the Nodes, it’s simpler to implement the Node class first. ### Types of Linked Lists There are four flavors of Linked List you should be familiar with when walking into your job interviews. **Linked List Types:** <figure><img src="https://cdn-images-1.medium.com/max/800/1*ZoYIEJaOpPiYAuqtPLt8yw.png" class="graf-image" /></figure>***Note:*** *These Linked List types are not always mutually exclusive.* For instance: - <span id="a0e8">Any type of Linked List can be implemented Circularly (e.g. A Circular Doubly Linked List).</span> - <span id="c0ff">A Doubly Linked List is actually just a special case of a Multiply Linked List.</span> You are most likely to encounter Singly and Doubly Linked Lists in your upcoming job search, so we are going to focus exclusively on those two moving forward. However, in more senior level interviews, it is very valuable to have some familiarity with the other types of Linked Lists. Though you may not actually code them out, *you will win extra points by illustrating your ability to weigh the tradeoffs of your technical decisions* by discussing how your choice of Linked List type may affect the efficiency of the solutions you propose. ### Linked List Methods <figure><img src="https://cdn-images-1.medium.com/max/1200/1*9EnhpQAeV03_DyEZIyiTCw.png" class="graf-image" /></figure> Linked Lists are great foundation builders when learning about data structures because they share a number of similar methods (and edge cases) with many other common data structures. You will find that many of the concepts discussed here will repeat themselves as we dive into some of the more complex non-linear data structures later on, like Trees and Graphs. ### Time and Space Complexity Analysis Before we begin our analysis, here is a quick summary of the Time and Space constraints of each Linked List Operation. The complexities below apply to both Singly and Doubly Linked Lists: <figure><img src="https://cdn-images-1.medium.com/max/1200/1*Enb9YaqRxzS87ML83Loasw.png" class="graf-image" /></figure> Before moving forward, see if you can reason to yourself why each operation has the time and space complexity listed above! ### Time Complexity — Access and Search #### Scenarios 1. <span id="16fe">We have a Linked List, and we’d like to find the 8th item in the list.</span> 2. <span id="a9f7">We have a Linked List of sorted alphabet letters, and we’d like to see if the letter “Q” is inside that list.</span> #### Discussion Unlike Arrays, Linked Lists Nodes are not stored contiguously in memory, and thereby do not have an indexed set of memory addresses at which we can quickly lookup individual nodes in constant time. Instead, we must begin at the head of the list (or possibly at the tail, if we have a Doubly Linked List), and iterate through the list until we arrive at the node of interest. In Scenario 1, we’ll know we’re there because we’ve iterated 8 times. In Scenario 2, we’ll know we’re there because, while iterating, we’ve checked each node’s value and found one that matches our target value, “Q”. In the worst case scenario, we may have to traverse the entire Linked List until we arrive at the final node. This makes both Access & Search **Linear Time** operations. ### Time Complexity — Insertion and Deletion #### Scenarios 1. <span id="2462">We have an empty Linked List, and we’d like to insert our first node.</span> 2. <span id="ae0b">We have a Linked List, and we’d like to insert or delete a node at the Head or Tail.</span> 3. <span id="290b">We have a Linked List, and we’d like to insert or delete a node from somewhere in the middle of the list.</span> #### Discussion Since we have our Linked List Nodes stored in a non-contiguous manner that relies on pointers to keep track of where the next and previous nodes live, Linked Lists liberate us from the linear time nature of Array insertions and deletions. We no longer have to adjust the position at which each node/element is stored after making an insertion at a particular position in the list. Instead, if we want to insert a new node at position `i`, we can simply: 1. <span id="7675">Create a new node.</span> 2. <span id="adf9">Set the new node’s `next` and `previous` pointers to the nodes that live at positions `i` and `i - 1`, respectively.</span> 3. <span id="1bf6">Adjust the `next` pointer of the node that lives at position `i - 1` to point to the new node.</span> 4. <span id="9580">Adjust the `previous` pointer of the node that lives at position `i` to point to the new node.</span> And we’re done, in Constant Time. No iterating across the entire list necessary. “But hold on one second,” you may be thinking. “In order to insert a new node in the middle of the list, don’t we have to lookup its position? Doesn’t that take linear time?!” Yes, it is tempting to call insertion or deletion in the middle of a Linked List a linear time operation since there is lookup involved. However, it’s usually the case that you’ll already have a reference to the node where your desired insertion or deletion will occur. For this reason, we separate the Access time complexity from the Insertion/Deletion time complexity, and formally state that Insertion and Deletion in a Linked List are **Constant Time** across the board. ***Note:*** *Without a reference to the node at which an insertion or deletion will occur, due to linear time lookup, an insertion or deletion in the middle of a Linked List will still take Linear Time, sum total.* ### Space Complexity #### Scenarios 1. <span id="12d2">We’re given a Linked List, and need to operate on it.</span> 2. <span id="7c5f">We’ve decided to create a new Linked List as part of strategy to solve some problem.</span> #### Discussion It’s obvious that Linked Lists have one node for every one item in the list, and for that reason we know that Linked Lists take up Linear Space in memory. However, when asked in an interview setting what the Space Complexity *of your solution* to a problem is, it’s important to recognize the difference between the two scenarios above. In Scenario 1, we *are not* creating a new Linked List. We simply need to operate on the one given. Since we are not storing a *new* node for every node represented in the Linked List we are provided, our solution is *not necessarily* linear in space. In Scenario 2, we *are* creating a new Linked List. If the number of nodes we create is linearly correlated to the size of our input data, we are now operating in Linear Space. ***Note****: Linked Lists can be traversed both iteratively and recursively. If you choose to traverse a Linked List recursively, there will be a recursive function call added to the call stack for every node in the Linked List. Even if you’re provided the Linked List, as in Scenario 1, you will still use Linear Space in the call stack, and that counts.* ------------------------------------------------------------------------ ### Stacks and Queues Stacks and Queues aren’t really “data structures” by the strict definition of the term. The more appropriate terminology would be to call them abstract data types (ADTs), meaning that their definitions are more conceptual and related to the rules governing their user-facing behaviors rather than their core implementations. For the sake of simplicity, we’ll refer to them as data structures and ADTs interchangeably throughout the course, but the distinction is an important one to be familiar with as you level up as an engineer. Now that that’s out of the way, Stacks and Queues represent a linear collection of nodes or values. In this way, they are quite similar to the Linked List data structure we discussed in the previous section. In fact, you can even use a modified version of a Linked List to implement each of them. (Hint, hint.) These two ADTs are similar to each other as well, but each obey their own special rule regarding the order with which Nodes can be added and removed from the structure. Since we’ve covered Linked Lists in great length, these two data structures will be quick and easy. Let’s break them down individually in the next couple of sections. ### What is a Stack? Stacks are a Last In First Out (LIFO) data structure. The last Node added to a stack is always the first Node to be removed, and as a result, the first Node added is always the last Node removed. The name Stack actually comes from this characteristic, as it is helpful to visualize the data structure as a vertical stack of items. Personally, I like to think of a Stack as a stack of plates, or a stack of sheets of paper. This seems to make them more approachable, because the analogy relates to something in our everyday lives. If you can imagine adding items to, or removing items from, a Stack of…literally anything…you’ll realize that every (sane) person naturally obeys the LIFO rule. We add things to the *top* of a stack. We remove things from the *top* of a stack. We never add things to, or remove things from, the *bottom* of the stack. That’s just crazy. Note: We can use JavaScript Arrays to implement a basic stack. `Array#push` adds to the top of the stack and `Array#pop` will remove from the top of the stack. In the exercise that follows, we’ll build our own Stack class from scratch (without using any arrays). In an interview setting, your evaluator may be okay with you using an array as a stack. ------------------------------------------------------------------------ ### What is a Queue? Queues are a First In First Out (FIFO) data structure. The first Node added to the queue is always the first Node to be removed. The name Queue comes from this characteristic, as it is helpful to visualize this data structure as a horizontal line of items with a beginning and an end. Personally, I like to think of a Queue as the line one waits on for an amusement park, at a grocery store checkout, or to see the teller at a bank. If you can imagine a queue of humans waiting…again, for literally anything…you’ll realize that *most* people (the civil ones) naturally obey the FIFO rule. People add themselves to the *back* of a queue, wait their turn in line, and make their way toward the *front*. People exit from the *front* of a queue, but only when they have made their way to being first in line. We never add ourselves to the front of a queue (unless there is no one else in line), otherwise we would be “cutting” the line, and other humans don’t seem to appreciate that. Note: We can use JavaScript Arrays to implement a basic queue. `Array#push` adds to the back (enqueue) and `Array#shift` will remove from the front (dequeue). In the exercise that follows, we’ll build our own Queue class from scratch (without using any arrays). In an interview setting, your evaluator may be okay with you using an array as a queue. ### Stack and Queue Properties Stacks and Queues are so similar in composition that we can discuss their properties together. They track the following three properties: **Stack Properties | Queue Properties:** <figure><img src="https://cdn-images-1.medium.com/max/800/1*aZCnZJzaeY74DTb2CTRuFA.png" class="graf-image" /></figure>Notice that rather than having a `head` and a `tail` like Linked Lists, Stacks have a `top`, and Queues have a `front` and a `back` instead. Stacks don’t have the equivalent of a `tail` because you only ever push or pop things off the top of Stacks. These properties are essentially the same; pointers to the end points of the respective List ADT where important actions way take place. The differences in naming conventions are strictly for human comprehension. ------------------------------------------------------------------------ Similarly to Linked Lists, the values stored inside a Stack or a Queue are actually contained within Stack Node and Queue Node instances. Stack, Queue, and Singly Linked List Nodes are all identical, but just as a reminder and for the sake of completion, these List Nodes track the following two properties: ### Time and Space Complexity Analysis Before we begin our analysis, here is a quick summary of the Time and Space constraints of each Stack Operation. Data Structure Operation Time Complexity (Avg)Time Complexity (Worst)Space Complexity (Worst)Access`Θ(n)O(n)O(n)`Search`Θ(n)O(n)O(n)`Insertion`Θ(1)O(1)O(n)`Deletion`Θ(1)O(1)O(n)` Before moving forward, see if you can reason to yourself why each operation has the time and space complexity listed above! #### Time Complexity — Access and Search When the Stack ADT was first conceived, its inventor definitely did not prioritize searching and accessing individual Nodes or values in the list. The same idea applies for the Queue ADT. There are certainly better data structures for speedy search and lookup, and if these operations are a priority for your use case, it would be best to choose something else! Search and Access are both linear time operations for Stacks and Queues, and that shouldn’t be too unclear. Both ADTs are nearly identical to Linked Lists in this way. The only way to find a Node somewhere in the middle of a Stack or a Queue, is to start at the `top` (or the `back`) and traverse downward (or forward) toward the `bottom` (or `front`) one node at a time via each Node’s `next` property. This is a linear time operation, O(n). #### Time Complexity — Insertion and Deletion For Stacks and Queues, insertion and deletion is what it’s all about. If there is one feature a Stack absolutely must have, it’s constant time insertion and removal to and from the `top` of the Stack (FIFO). The same applies for Queues, but with insertion occurring at the `back` and removal occurring at the `front` (LIFO). Think about it. When you add a plate to the top of a stack of plates, do you have to iterate through all of the other plates first to do so? Of course not. You simply add your plate to the top of the stack, and that’s that. The concept is the same for removal. Therefore, Stacks and Queues have constant time Insertion and Deletion via their `push` and `pop` or `enqueue` and `dequeue` methods, O(1). #### Space Complexity The space complexity of Stacks and Queues is very simple. Whether we are instantiating a new instance of a Stack or Queue to store a set of data, or we are using a Stack or Queue as part of a strategy to solve some problem, Stacks and Queues always store one Node for each value they receive as input. For this reason, we always consider Stacks and Queues to have a linear space complexity, O(n). ### When should we use Stacks and Queues? At this point, we’ve done a lot of work understanding the ins and outs of Stacks and Queues, but we still haven’t really discussed what we can use them for. The answer is actually…a lot! For one, Stacks and Queues can be used as intermediate data structures while implementing some of the more complicated data structures and methods we’ll see in some of our upcoming sections. For example, the implementation of the breadth-first Tree traversal algorithm takes advantage of a Queue instance, and the depth-first Graph traversal algorithm exploits the benefits of a Stack instance. Additionally, Stacks and Queues serve as the essential underlying data structures to a wide variety of applications you use all the time. Just to name a few: #### Stacks - <span id="f63a">The Call Stack is a Stack data structure, and is used to manage the order of function invocations in your code.</span> - <span id="6b24">Browser History is often implemented using a Stack, with one great example being the browser history object in the very popular React Router module.</span> - <span id="098f">Undo/Redo functionality in just about any application. For example:</span> - <span id="f15d">When you’re coding in your text editor, each of the actions you take on your keyboard are recorded by `push`ing that event to a Stack.</span> - <span id="e303">When you hit \[cmd + z\] to undo your most recent action, that event is `pop`ed off the Stack, because the last event that occured should be the first one to be undone (LIFO).</span> - <span id="9248">When you hit \[cmd + y\] to redo your most recent action, that event is `push`ed back onto the Stack.</span> #### Queues - <span id="7c8d">Printers use a Queue to manage incoming jobs to ensure that documents are printed in the order they are received.</span> - <span id="89e7">Chat rooms, online video games, and customer service phone lines use a Queue to ensure that patrons are served in the order they arrive.</span> - <span id="c02a">In the case of a Chat Room, to be admitted to a size-limited room.</span> - <span id="353e">In the case of an Online Multi-Player Game, players wait in a lobby until there is enough space and it is their turn to be admitted to a game.</span> - <span id="6a8e">In the case of a Customer Service Phone Line…you get the point.</span> - <span id="0ad5">As a more advanced use case, Queues are often used as components or services in the system design of a service-oriented architecture. A very popular and easy to use example of this is Amazon’s Simple Queue Service (SQS), which is a part of their Amazon Web Services (AWS) offering.</span> - <span id="48e7">You would add this service to your system between two other services, one that is sending information for processing, and one that is receiving information to be processed, when the volume of incoming requests is high and the integrity of the order with which those requests are processed must be maintained.</span> **If you found this guide helpful feel free to checkout my other articles:** <a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b"><strong>A list of all of my articles to link to future posts</strong><br /> <em>You should probably skip this one… seriously it’s just for internal use!</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> **Further resources:** <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>Web-Dev-Resource-Hub</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> **Here’s a live code editor where you can mess with any of the examples:** <figure><img src="https://cdn-images-1.medium.com/max/800/0*zhC6dP1hb2rq2qt2.png" class="graf-image" /></figure> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 22, 2021](https://medium.com/p/88466fae0fbb). <a href="https://medium.com/@bryanguner/lists-stacks-and-queues-in-javascript-88466fae0fbb" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,319 @@ VSCode Extensions Specifically for JavaScript Development ========================================================= VSCode Extensions that are indispensable in JavaScript development ------------------------------------------------------------------------ #### <a href="http://medium.com/codex" class="markup--anchor markup--h4-anchor">CODEX</a> ### VSCode Extensions Specifically for JavaScript Development #### VSCode Extensions that are indispensable in JavaScript development ### Back and Forth - <span id="05b8">Adds backwards and forwards buttons to the toolbar in VSCode</span> - <span id="0f5e"><a href="https://marketplace.visualstudio.com/items?itemName=nick-rudenko.back-n-forth" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=nick-rudenko.back-n-forth">https://marketplace.visualstudio.com/items?itemName=nick-rudenko.back-n-forth</a></span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*hsbombFMlu6yICjz.gif" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Bracket Pair Colorizer 2 - <span id="eb2c">Colors matching brackets so it’s easier to tell which brackets match.</span> - <span id="5ec7"><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2">https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2</a></span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*MT-BCptwnKGYk1Pk.png" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Babel Javascript - <span id="9891">A better syntax highlighter for JavaScript code</span> - <span id="4536"><a href="https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel">https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel</a></span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*b5t9hd_8soPq26pq.png" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Code Runner - <span id="b696">Puts a “Play” button in your toolbar and let’s you run code files by pressing it.</span> - <span id="d9c1"><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner">https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner</a></span> ### Code Runner > Run code snippet or code file for multiple languages: **C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F\# Script, F\# (.NET Core), C\# Script, C\# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran**, and custom command ### Features > Run code file of current active Text Editor > Run code file through context menu of file explorer > Run selected code snippet in Text Editor > Run code per Shebang > Run code per filename glob > Run custom command > Stop code running > View output in Output Window > Set default language to run > Select language to run > Support REPL by running code in Integrated Terminal ### Usages #### To run code: - <span id="fdf8">use shortcut `Ctrl+Alt+N`</span> - <span id="f3b8">or press `F1` and then select/type `Run Code`,</span> - <span id="e133">or right click the Text Editor and then click `Run Code` in editor context menu</span> - <span id="b70a">or click `Run Code` button in editor title menu</span> - <span id="6dbe">or click `Run Code` button in context menu of file explorer</span> - <span id="8983">To stop the running code:</span> - <span id="d078">use shortcut `Ctrl+Alt+M`</span> - <span id="ca9e">or press `F1` and then select/type `Stop Code Run`</span> - <span id="f2b1">or right click the Output Channel and then click `Stop Code Run` in context menu</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*_RtB2WiNuXhAJnuJ.gif" class="graf-image" /></figure>- <span id="a49c">To select language to run, use shortcut `Ctrl+Alt+J`, or press `F1` and then select/type `Run By Language`, then type or select the language to run: e.g `php, javascript, bat, shellscript...`</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*lCmaRsgOMINbFJps.gif" class="graf-image" /></figure>- <span id="dbab">To run custom command, then use shortcut `Ctrl+Alt+K`, or press `F1` and then select/type `Run Custom Command`</span> ------------------------------------------------------------------------ ### Color Highlight - <span id="e34b">Changes the background color of hex colors in your code to show you what color it actually is</span> - <span id="9779"><a href="https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight">https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight</a></span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*9K5_QPPvfozmuTWH" class="graf-image" /></figure>### Git Graph - <span id="edf1">Shows you a graphical representation of your git branches and commits</span> - <span id="0a51"><a href="https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph">https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph</a></span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*eAKBnl6yXJgXZXvZ.gif" class="graf-image" /></figure> ------------------------------------------------------------------------ ### GitLens - <span id="7c5c">Adds tons of cool features to vscode, like viewing commits inline inside the editor</span> - <span id="10cf"><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens</a></span> Here are just some of the **features** that GitLens provides, - <span id="7500">effortless <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#revision-navigation-" class="markup--anchor markup--li-anchor" title="Jump to Revision Navigation"><strong>revision navigation</strong></a> (backwards and forwards) through the history of a file</span> - <span id="1ba4">an unobtrusive <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#current-line-blame-" class="markup--anchor markup--li-anchor" title="Jump to Current Line Blame"><strong>current line blame</strong></a> annotation at the end of the line showing the commit and author who last modified the line, with more detailed blame information accessible on <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#hovers-" class="markup--anchor markup--li-anchor" title="Jump to Hovers"><strong>hover</strong></a></span> - <span id="8920"><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#git-code-lens-" class="markup--anchor markup--li-anchor" title="Jump to Git Code Lens"><strong>authorship code lens</strong></a> showing the most recent commit and number of authors at the top of files and/or on code blocks</span> - <span id="4256">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#status-bar-blame-" class="markup--anchor markup--li-anchor" title="Jump to Status Bar Blame"><strong>status bar blame</strong></a> annotation showing the commit and author who last modified the current line</span> - <span id="05e9">on-demand **file annotations** in the editor gutter, including</span> - <span id="fb38"><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#gutter-blame-" class="markup--anchor markup--li-anchor" title="Jump to Gutter Blame"><strong>blame</strong></a> — shows the commit and author who last modified each line of a file</span> - <span id="c964"><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#gutter-changes-" class="markup--anchor markup--li-anchor" title="Jump to Gutter Changes"><strong>changes</strong></a> — highlights any local (unpublished) changes or lines changed by the most recent commit</span> - <span id="8e28"><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#gutter-heatmap-" class="markup--anchor markup--li-anchor" title="Jump to Gutter Heatmap"><strong>heatmap</strong></a> — shows how recently lines were changed, relative to all the other changes in the file and to now (hot vs. cold)</span> - <span id="f31e">many rich **Side Bar views**</span> - <span id="454e">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#commits-view-" class="markup--anchor markup--li-anchor" title="Jump to the Commits view"><strong><em>Commits</em> view</strong></a> to visualize, explore, and manage Git commits</span> - <span id="20b4">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#repositories-view-" class="markup--anchor markup--li-anchor" title="Jump to the Repositories view"><strong><em>Repositories</em> view</strong></a> to visualize, explore, and manage Git repositories</span> - <span id="ab4a">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#file-history-view-" class="markup--anchor markup--li-anchor" title="Jump to the File History view"><strong><em>File History</em> view</strong></a> to visualize, navigate, and explore the revision history of the current file or just the selected lines of the current file</span> - <span id="fcd3">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#line-history-view-" class="markup--anchor markup--li-anchor" title="Jump to the Line History view"><strong><em>Line History</em> view</strong></a> to visualize, navigate, and explore the revision history of the selected lines of the current file</span> - <span id="a82b">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#branches-view-" class="markup--anchor markup--li-anchor" title="Jump to the Branches view"><strong><em>Branches</em> view</strong></a> to visualize, explore, and manage Git branches</span> - <span id="2aa9">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#remotes-view-" class="markup--anchor markup--li-anchor" title="Jump to the Remotes view"><strong><em>Remotes</em> view</strong></a> to visualize, explore, and manage Git remotes and remote branches</span> - <span id="387f">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#stashes-view-" class="markup--anchor markup--li-anchor" title="Jump to the Stashes view"><strong><em>Stashes</em> view</strong></a> to visualize, explore, and manage Git stashes</span> - <span id="709e">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#tags-view-" class="markup--anchor markup--li-anchor" title="Jump to the Tags view"><strong><em>Tags</em> view</strong></a> to visualize, explore, and manage Git tags</span> - <span id="f2ad">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#contributors-view-" class="markup--anchor markup--li-anchor" title="Jump to the Contributors view"><strong><em>Contributors</em> view</strong></a> to visualize, navigate, and explore contributors</span> - <span id="6446">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#search--compare-view-" class="markup--anchor markup--li-anchor" title="Jump to the Search & Compare view"><strong><em>Search & Compare</em> view</strong></a> to search and explore commit histories by message, author, files, id, etc, or visualize comparisons between branches, tags, commits, and more</span> - <span id="0738">a <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#git-command-palette-" class="markup--anchor markup--li-anchor" title="Jump to the Git Command Palette"><strong>Git Command Palette</strong></a> to provide guided (step-by-step) access to many common Git commands, as well as quick access to</span> - <span id="8275"><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#quick-commit-access-" class="markup--anchor markup--li-anchor" title="Jump to Quick Commit Access">commits</a> — history and search</span> - <span id="44ae"><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#quick-stash-access-" class="markup--anchor markup--li-anchor" title="Jump to Quick Stash Access">stashes</a></span> - <span id="ad5f"><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#quick-status-access-" class="markup--anchor markup--li-anchor" title="Jump to Quick Status Access">status</a> — current branch and working tree status</span> - <span id="ea4a">a user-friendly <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#interactive-rebase-editor-" class="markup--anchor markup--li-anchor" title="Jump to the Interactive Rebase Editor"><strong>interactive rebase editor</strong></a> to easily configure an interactive rebase session</span> - <span id="692c"><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#terminal-links-" class="markup--anchor markup--li-anchor" title="Jump to Terminal Links"><strong>terminal links</strong></a> — `ctrl+click` on autolinks in the integrated terminal to quickly jump to more details for commits, branches, tags, and more</span> - <span id="7671">rich <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#remote-provider-integrations-" class="markup--anchor markup--li-anchor" title="Jump to Remote Provider Integrations"><strong>remote provider integrations</strong></a> — GitHub, GitLab, Bitbucket, Azure DevOps</span> - <span id="eaa9">issue and pull request auto-linking</span> - <span id="c6bf">rich hover information provided for linked issues and pull requests (GitHub only)</span> - <span id="5769">associates pull requests with branches and commits (GitHub only)</span> - <span id="2853">many <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#powerful-commands-" class="markup--anchor markup--li-anchor" title="Jump to Powerful Commands"><strong>powerful commands</strong></a> for navigating and comparing revisions, and more</span> - <span id="3dee">user-defined <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#modes-" class="markup--anchor markup--li-anchor" title="Jump to Modes"><strong>modes</strong></a> for quickly toggling between sets of settings</span> - <span id="d760">and so much more 😁</span> ### Features #### Revision Navigation <figure><img src="https://cdn-images-1.medium.com/max/800/0*ZznZkr2qdB6qT2sX.gif" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Markdown All in One - <span id="2f35">Everything you need to help you write markdown files in VSCode</span> - <span id="072b"><a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one">https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one</a></span> ### Features ### Keyboard shortcuts <figure><img src="https://cdn-images-1.medium.com/max/800/0*_usOVMNpDjj4nqKP.gif" class="graf-image" /></figure>(Typo: multiple words) <figure><img src="https://cdn-images-1.medium.com/max/800/0*Eqbbj4t2090z7JLj.gif" class="graf-image" /></figure>See full key binding list in the <a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one#keyboard-shortcuts-1" class="markup--anchor markup--p-anchor">keyboard shortcuts</a> section ### Table of contents <figure><img src="https://cdn-images-1.medium.com/max/800/0*T1aP3qXU9HHLvrkZ.png" class="graf-image" /></figure>- <span id="ca4e">Run command “**Create Table of Contents**” to insert a new table of contents.</span> - <span id="1bbc">The TOC is **automatically updated** on file save by default. To disable, please change the `toc.updateOnSave` option.</span> - <span id="e5a8">The **indentation type (tab or spaces)** of TOC can be configured per file. Find the setting in the right bottom corner of VS Code’s status bar.</span> - <span id="385b">***Note***: Be sure to also check the `list.indentationSize` option.</span> - <span id="5e3f">To make TOC **compatible with GitHub or GitLab**, set option `slugifyMode` accordingly</span> - <span id="e5a5">Three ways to **control which headings are present** in the TOC:</span> - <span id="6ce1">Click to expand</span> - <span id="7d9e">Easily add/update/remove **section numbering**</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*wqtYh9oFLU1GbfLE.gif" class="graf-image" /></figure>- <span id="d251">*In case you are seeing* ***unexpected TOC recognition****, you can add a* `<!-- no toc -->` *comment above the list*.</span> ### List editing <figure><img src="https://cdn-images-1.medium.com/max/800/0*0ipp3m0zajfTJlQR.gif" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*LLQYEmYRbIsx3EkR.gif" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/0*eoAN8X-cP9iM6l3Y.gif" class="graf-image" /></figure>***Note***: By default, this extension tries to determine indentation size for different lists according to <a href="https://spec.commonmark.org/0.29/#list-items" class="markup--anchor markup--p-anchor">CommonMark Spec</a>. If you prefer to use a fixed tab size, please change the `list.indentationSize` setting. ### Print Markdown to HTML - <span id="b93d">Commands `Markdown: Print current document to HTML` and `Markdown: Print documents to HTML` (batch mode)</span> - <span id="0011">**Compatible** with other installed Markdown plugins (e.g. <a href="https://marketplace.visualstudio.com/items?itemName=bierner.markdown-footnotes" class="markup--anchor markup--li-anchor">Markdown Footnotes</a>) The exported HTML should look the same as inside VSCode.</span> - <span id="9740">Use comment `<!-- title: Your Title -->` to specify a title of the exported HTML.</span> - <span id="9298">Plain links to `.md` files will be converted to `.html`.</span> - <span id="5a32">It’s recommended to print the exported HTML to PDF with browser (e.g. Chrome) if you want to share your documents with others.</span> ### GitHub Flavored Markdown - <span id="ae98">Table formatter</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*6yKsV2SWwPFdGHZT.gif" class="graf-image" /></figure>- <span id="ad0a">***Note***: The key binding is Ctrl + Shift + I on Linux. See <a href="https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference" class="markup--anchor markup--li-anchor">Visual Studio Code Key Bindings</a>.</span> - <span id="fa42">Task lists</span> ### Math <figure><img src="https://cdn-images-1.medium.com/max/800/0*6NkKUCywNSSMsbV2.png" class="graf-image" /></figure>Please use <a href="https://marketplace.visualstudio.com/items?itemName=goessner.mdmath" class="markup--anchor markup--p-anchor">Markdown+Math</a> for dedicated math support. Be sure to disable `math.enabled` option of this extension. ### Auto completions Tip: also support the option `completion.root` - <span id="4c17">Images/Files (respects option `search.exclude`)</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*0yN3cZ6xsl6c_oP5.png" class="graf-image" /></figure>- <span id="c44e">Math functions (including option `katex.macros`)</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*ZYCqFh0MHuE153Ed.png" class="graf-image" /></figure> ------------------------------------------------------------------------ ### Mocah Test Explorer - <span id="2b8c">Lets you run mocha tests in the VSCode sidebar</span> - <span id="39cd"><a href="https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-mocha-test-adapter" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-mocha-test-adapter">https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-mocha-test-adapter</a></span> ### Features ### Import command <figure><img src="https://cdn-images-1.medium.com/max/800/0*1ks3u0MsnG96JUy6.gif" class="graf-image" /></figure>{ "npm-intellisense.importES6": true, "npm-intellisense.importQuotes": "'", "npm-intellisense.importLinebreak": ";\r\n", "npm-intellisense.importDeclarationType": "const", } ### Import command (ES5) <figure><img src="https://cdn-images-1.medium.com/max/800/0*srfRIxEbcL_yxBey.gif" class="graf-image" /></figure>{ "npm-intellisense.importES6": false, "npm-intellisense.importQuotes": "'", "npm-intellisense.importLinebreak": ";\r\n", "npm-intellisense.importDeclarationType": "const", } ------------------------------------------------------------------------ ### NPM Intellisense - <span id="61ee">Autocomlpetes npm module names when you are typing require or import.</span> - <span id="b68a"><a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense">https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense</a></span> ### Features ### Import command <figure><img src="https://cdn-images-1.medium.com/max/800/0*o3KIizXjd5BfnZzR.gif" class="graf-image" /></figure>{ "npm-intellisense.importES6": true, "npm-intellisense.importQuotes": "'", "npm-intellisense.importLinebreak": ";\r\n", "npm-intellisense.importDeclarationType": "const", } ### Import command (ES5) <figure><img src="https://cdn-images-1.medium.com/max/800/0*pCEaJc8pJmJi_dMk.gif" class="graf-image" /></figure>{ "npm-intellisense.importES6": false, "npm-intellisense.importQuotes": "'", "npm-intellisense.importLinebreak": ";\r\n", "npm-intellisense.importDeclarationType": "const", } ### Scan devDependencies Npm intellisense scans only dependencies by default. Set scanDevDependencies to true to enable it for devDependencies too. { "npm-intellisense.scanDevDependencies": true, } ------------------------------------------------------------------------ ### Path Intellisense - <span id="0f82">Auto completes filesystem paths when you are typing them</span> - <span id="5413"><a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense">https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense</a></span> ### Usage <figure><img src="https://cdn-images-1.medium.com/max/800/0*if44ZSUgw2MDJiFl.gif" class="graf-image" /></figure>### Commerical Extensions ### Quokka.js - <span id="aa0f">A paid extension that does amazing things by showing the results of your javascript inline inside the editor window</span> - <span id="d793"><a href="https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode" class="markup--anchor markup--li-anchor" title="https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode">https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode</a></span> ### <a href="https://quokkajs.com/" class="markup--anchor markup--h3-anchor">Quokka.js</a> Visual Studio Code Extension Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type. <figure><img src="https://cdn-images-1.medium.com/max/800/0*xYo5Z7lROn4tLQu9.gif" class="graf-image" /></figure>### If you found this guide helpful feel free to checkout my other articles: <a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b"><strong>A list of all of my articles to link to future posts</strong><br /> <em>You should probably skip this one… seriously it’s just for internal use!</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> ### OR GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>Web-Dev-Resource-Hub</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 23, 2021](https://medium.com/p/ea91305cbd4a). <a href="https://medium.com/@bryanguner/vscode-extensions-specifically-for-javascript-development-ea91305cbd4a" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,596 @@ Web Developer Resource List Part 4 ================================== A all encompassing list of tools and resources for web developers ------------------------------------------------------------------------ ### Web Developer Resource List Part 4 A all encompassing list of tools and resources for web developers <figure><img src="https://cdn-images-1.medium.com/max/1200/1*QXSlTWm23iJGGW_R4Vslug.png" class="graf-image" /></figure> ### General resources - <span id="a017"><a href="http://devdocs.io/" class="markup--anchor markup--li-anchor">Devdocs.io</a>: Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++…</span> - <span id="9bd1"><a href="https://devhints.io/" class="markup--anchor markup--li-anchor">DevHints</a>: cheatsheets for many web technologies</span> - <span id="f774"><a href="https://carbon.now.sh/?bg=rgba%28171,%20184,%20195,%201%29&t=seti&l=auto&ds=true&wc=true&wa=true&pv=32px&ph=32px&ln=false" class="markup--anchor markup--li-anchor">Carbon</a>: use this to share images of your code in presentations etc</span> - <span id="c97f"><a href="https://badgen.net/" class="markup--anchor markup--li-anchor">Badgen</a>:</span> - <span id="2122"><a href="https://shields.io/" class="markup--anchor markup--li-anchor">Shields.io</a>:</span> - <span id="83e7">to your documentation/readmes</span> - <span id="daff"><a href="https://github.com/k88hudson/git-flight-rules" class="markup--anchor markup--li-anchor">Git Flight Rules</a>: A guide for astronauts (now, programmers using Git) about what to do when things go wrong.</span> - <span id="1977"><a href="https://github.com/luruke/browser-2020" class="markup--anchor markup--li-anchor">browser-2020</a>: Things you can do with a browser in 2020 ☕️</span> ### 📦 Finding and vetting npm packages - <span id="9bc6"><a href="https://www.pikapkg.com/" class="markup--anchor markup--li-anchor">pika</a>: A searchable catalog of modern “module” packages on npm</span> - <span id="10f9"><a href="https://npms.io/" class="markup--anchor markup--li-anchor">npms</a>: A better and open source search for node packages</span> - <span id="ecb9"><a href="https://github.com/maticzav/emma-cli" class="markup--anchor markup--li-anchor">emma</a>: 📦 Terminal assistant to find and install node packages</span> - <span id="e1df"><a href="https://github.com/harksys/npmvet" class="markup--anchor markup--li-anchor">npmvet</a>: A simple CLI tool for vetting npm package versions</span> - <span id="e831"><a href="https://bundlephobia.com/" class="markup--anchor markup--li-anchor">Bundlephobia</a>: See the “cost” of any npm package</span> - <span id="28aa"><a href="https://snyk.io" class="markup--anchor markup--li-anchor">Snyk</a>: Find any security vulnerabilities for any npm package. Search their database here: `https://snyk.io/vuln/npm:{package}` e.g. <a href="https://snyk.io/vuln/npm:react" class="markup--anchor markup--li-anchor">https://snyk.io/vuln/npm:react</a></span> - <span id="b4da"><a href="https://runpkg.com/" class="markup--anchor markup--li-anchor">runpkg</a>: Explore, learn about and perform static analysis on npm packages in the browser</span> ### 🎨 CSS - <span id="dd16"><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" class="markup--anchor markup--li-anchor">CSS Tricks “Complete Guide to Flexbox”</a></span> - <span id="2333"><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" class="markup--anchor markup--li-anchor">CSS Tricks “Complete Guide to Grid”</a></span> - <span id="dba6"><a href="http://cubic-bezier.com/#.17,.67,.83,.67" class="markup--anchor markup--li-anchor">Cubic bezier curve creator</a></span> - <span id="b920"><a href="http://matthewlein.com/ceaser/" class="markup--anchor markup--li-anchor">Ceaser</a>: Cubic bezier curve generator</span> - <span id="7f1c"><a href="https://csstriggers.com/" class="markup--anchor markup--li-anchor">CSS Triggers</a>: find out what CSS properties trigger Paint/Layout/Composite renders</span> - <span id="840c"><a href="https://websemantics.uk/tools/responsive-font-calculator/" class="markup--anchor markup--li-anchor">Fluid-responsive font-size calculator</a>: To scale typography smoothly across viewport widths.</span> - <span id="c480"><a href="http://browserhacks.com/" class="markup--anchor markup--li-anchor">Browserhacks</a>: Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs</span> - <span id="078f"><a href="https://codepen.io/shshaw/full/gEiDt" class="markup--anchor markup--li-anchor">Absolute centering</a>: useful techniques for absolute centering in CSS</span> - <span id="1dfe"><a href="https://github.com/hankchizljaw/modern-css-reset" class="markup--anchor markup--li-anchor">modern-css-reset</a>: A bare-bones CSS reset for modern web development</span> - <span id="7cd3"><a href="https://cssfx.netlify.com/" class="markup--anchor markup--li-anchor">CSSFX</a>: Beautifully simple click-to-copy CSS effects</span> - <span id="f802"><a href="https://www.shapedivider.app/" class="markup--anchor markup--li-anchor">Shape Divider App</a></span> ### CSS-in-JS - <span id="c3a7">CSS-in-JS libraries</span> - <span id="7ce0"><a href="https://styled-components.com" class="markup--anchor markup--li-anchor">Styled Components</a>: CSS-in-JS for React</span> - <span id="1381"><a href="http://emotion.sh/" class="markup--anchor markup--li-anchor">Emotion</a>: CSS-in-JS library</span> - <span id="eb36"><a href="https://github.com/callstack/linaria" class="markup--anchor markup--li-anchor">linaria</a>: Zero-runtime CSS in JS library</span> - <span id="96cd"><a href="https://github.com/mrmartineau/design-system-utils" class="markup--anchor markup--li-anchor">Design System Utils</a>: Design system framework for modern front-end projects (made by me!)</span> - <span id="2e6f"><a href="https://polished.js.org/" class="markup--anchor markup--li-anchor">Polished</a>: A lightweight toolset for writing styles in JavaScript</span> - <span id="71bb"><a href="https://github.com/brunobertolini/styled-by" class="markup--anchor markup--li-anchor">styled-by</a>: Simple and powerful lib to handle styled props in your components</span> - <span id="1c73"><a href="https://github.com/smooth-code/xstyled" class="markup--anchor markup--li-anchor">xstyled</a>: Consistent theme based CSS for styled-components 💅</span> - <span id="9bce"><a href="https://theme-ui.com" class="markup--anchor markup--li-anchor">Theme UI</a>: Build consistent, themeable React apps based on constraint-based design principles</span> ### JavaScript ### Useful JS links - <span id="47a7"><a href="https://stackoverflow.com/a/34842087/91359" class="markup--anchor markup--li-anchor">JS module import/export syntax</a></span> - <span id="fae9"><a href="http://keycode.info/" class="markup--anchor markup--li-anchor">JavaScript Event KeyCodes</a></span> - <span id="ad92"><a href="https://tylermcginnis.com/javascript-visualizer/" class="markup--anchor markup--li-anchor">JavaScript Visualizer</a></span> - <span id="c569"><a href="https://doesitmutate.xyz/" class="markup--anchor markup--li-anchor">Does it mutate?</a></span> - <span id="6cff"><a href="https://jsperf.com/" class="markup--anchor markup--li-anchor">jsPerf</a>: JavaScript performance playground</span> - <span id="f409"><a href="https://github.com/mbeaudru/modern-js-cheatsheet" class="markup--anchor markup--li-anchor">modern-js-cheatsheet</a></span> - <span id="3b43"><a href="https://htmldom.dev/" class="markup--anchor markup--li-anchor">HTML DOM</a>: Common tasks of managing HTML DOM with vanilla JavaScript</span> ### Framework agnostic packages ### General utilities - <span id="cb84"><a href="https://lodash.com" class="markup--anchor markup--li-anchor">Lodash</a>: A modern JavaScript utility library delivering modularity, performance & extras.</span> - <span id="ab11"><a href="https://github.com/angus-c/just" class="markup--anchor markup--li-anchor">Just</a>: A library of dependency-free utilities that do just do one thing (like Lodash but smaller)</span> - <span id="2d7b">Install each util independently</span> - <span id="56c9">Read the <a href="https://github.com/angus-c/just/blob/master/TRADEOFFS.md" class="markup--anchor markup--li-anchor">tradeoffs document</a> to see if Lodash is better</span> - <span id="ab41"><a href="https://github.com/NickGard/tiny-get" class="markup--anchor markup--li-anchor">tiny-get</a>: A minimal-weight lodash.get equivalent utility</span> - <span id="ddc7"><a href="https://www.evt.land/" class="markup--anchor markup--li-anchor">evt</a>: A type safe replacement for node’s EventEmitter</span> - <span id="423f"><a href="https://github.com/nicbell/liteready" class="markup--anchor markup--li-anchor">liteready</a>: A lightweight DOM ready.</span> - <span id="c9ff"><a href="https://github.com/jaredhanson/passport" class="markup--anchor markup--li-anchor">passport</a>: Simple, unobtrusive authentication for Node.js</span> - <span id="88af"><a href="https://github.com/desandro/get-size" class="markup--anchor markup--li-anchor">get-size</a>: Get the size of elements</span> - <span id="a646"><a href="https://github.com/appalaszynski/length.js" class="markup--anchor markup--li-anchor">length.js</a>: Library for length units conversion</span> - <span id="8289"><a href="https://github.com/saschageyer/action-outside" class="markup--anchor markup--li-anchor">action-outside</a>: Invoke a callback function when clicked or tabbed outside one or multiple DOM elements</span> - <span id="2bda"><a href="https://github.com/bfred-it/select-dom" class="markup--anchor markup--li-anchor">select-dom</a>: Lightweight `querySelector`/`All` wrapper that outputs an Array</span> - <span id="c626"><a href="https://github.com/medikoo/memoizee" class="markup--anchor markup--li-anchor">memoizee</a>: Complete memoize/cache solution for JavaScript</span> - <span id="db36"><a href="https://github.com/alexreardon/memoize-one" class="markup--anchor markup--li-anchor">memoize-one</a>: A memoization library which only remembers the latest invocation</span> - <span id="84f2"><a href="https://github.com/jonschlinkert/kind-of" class="markup--anchor markup--li-anchor">kind-of</a>: Get the native JavaScript type of a value, fast.</span> - <span id="cd29"><a href="https://github.com/felixfbecker/iterare" class="markup--anchor markup--li-anchor">iterare</a>: Array methods + ES6 Iterators =</span> - <span id="f438"><a href="https://github.com/Rich-Harris/eases-jsnext" class="markup--anchor markup--li-anchor">eases-jsnext</a>: A grab-bag of modular easing equations</span> - <span id="1799"><a href="https://github.com/paularmstrong/normalizr" class="markup--anchor markup--li-anchor">normalizr</a>: Normalizes nested JSON according to a schema</span> - <span id="5f57"><a href="https://github.com/sindresorhus/lazy-value" class="markup--anchor markup--li-anchor">lazy-value</a>: Create a lazily evaluated value</span> - <span id="d14f"><a href="https://github.com/planttheidea/fast-equals" class="markup--anchor markup--li-anchor">fast-equals</a>: A blazing fast equality comparison, either shallow or deep</span> - <span id="c771"><a href="https://github.com/planttheidea/fast-copy" class="markup--anchor markup--li-anchor">fast-copy</a>: A blazing fast deep object copier</span> - <span id="4850"><a href="https://github.com/stipsan/compute-scroll-into-view" class="markup--anchor markup--li-anchor">compute-scroll-into-view</a>: Utility for calculating what should be scrolled, how it’s scrolled is up to you</span> - <span id="a7f4"><a href="https://github.com/lukeed/arr" class="markup--anchor markup--li-anchor">arr</a>: A collection of tiny, highly performant Array.prototype alternatives</span> - <span id="4622"><a href="https://github.com/fuhton/timedstorage" class="markup--anchor markup--li-anchor">timedstorage</a>: A library for storing and expiring objects in window.localstorage</span> - <span id="007a"><a href="https://github.com/stevemao/left-pad" class="markup--anchor markup--li-anchor">left-pad</a>: String left pad</span> - <span id="ea51"><a href="https://github.com/tiaanduplessis/dont-go" class="markup--anchor markup--li-anchor">dont-go</a>: A small client-side library with zero dependencies to change the title and/or favicon of the page when it is inactive</span> - <span id="57da"><a href="https://github.com/hybridables/always-done" class="markup--anchor markup--li-anchor">always-done</a>: Handle completion and errors with elegance! Support for async/await, promises, callbacks, streams and observables. A drop-in replacement for async-done — pass 100% of its tests plus more</span> - <span id="a7b3"><a href="https://github.com/words" class="markup--anchor markup--li-anchor">words</a>: Linguistic javascript modules</span> - <span id="0e04"><a href="https://github.com/davidtheclark/no-scroll" class="markup--anchor markup--li-anchor">no-scroll</a>: Disable scrolling on an element that would otherwise scroll</span> - <span id="cc78"><a href="https://github.com/catamphetamine/libphonenumber-js" class="markup--anchor markup--li-anchor">libphonenumber-js</a>: A simpler (and smaller) rewrite of Google Android’s libphonenumber library</span> - <span id="4a91"><a href="https://github.com/text-mask/text-mask" class="markup--anchor markup--li-anchor">text-mask</a>: Input mask for React, Angular, Ember, Vue, & plain JavaScript</span> - <span id="8909"><a href="https://github.com/vtex/msk" class="markup--anchor markup--li-anchor">msk</a>: Small library to mask strings</span> - <span id="f062"><a href="https://github.com/davidtheclark/focus-trap" class="markup--anchor markup--li-anchor">focus-trap</a>: Trap focus within a DOM node</span> - <span id="e6d4"><a href="https://github.com/jamiebuilds/tinykeys" class="markup--anchor markup--li-anchor">tinykeys</a>: A tiny (~400 B) & modern library for keybindings</span> - <span id="9900"><a href="https://github.com/reasonink/clack" class="markup--anchor markup--li-anchor">clack</a>: A modern keyboard shortcut library written in Typescript</span> - <span id="067c"><a href="https://github.com/reasonink/clack-react" class="markup--anchor markup--li-anchor">clack-react</a>: React support for @reasonink/clack</span> - <span id="a03a"><a href="https://github.com/ollieglass/js-humanize" class="markup--anchor markup--li-anchor">js-humanize</a>: Humanize large numbers</span> - <span id="5332"><a href="https://github.com/peterpme/sub-in" class="markup--anchor markup--li-anchor">sub-in</a>: 🥙 A tiny (115B) find-and-replace utility for strings in Javascript</span> - <span id="cc9c"><a href="https://github.com/zenozeng/color-hash" class="markup--anchor markup--li-anchor">color-hash</a>: Generate color based on the given string (using HSL color space and BKDRHash)</span> - <span id="f973"><a href="https://github.com/zeit/title" class="markup--anchor markup--li-anchor">title</a>: A service for capitalizing your title properly</span> - <span id="8f05"><a href="https://github.com/aceakash/string-similarity" class="markup--anchor markup--li-anchor">string-similarity</a>: Finds degree of similarity between two strings, based on Dice’s Coefficient, which is mostly better than Levenshtein distance</span> - <span id="c64d"><a href="https://github.com/ericelliott/cuid" class="markup--anchor markup--li-anchor">cuid</a>: Collision-resistant ids optimized for horizontal scaling and performance</span> - <span id="a404"><a href="https://github.com/lukeed/obj-str" class="markup--anchor markup--li-anchor">obj-str</a>: A tiny (96B) library for serializing Object values to Strings. Also serves as a faster & smaller drop-in replacement for the classnames module</span> - <span id="6cf1"><a href="https://github.com/lukeed/clsx" class="markup--anchor markup--li-anchor">clsx</a>: A tiny (223B) utility for constructing className strings conditionally. Also serves as a faster & smaller drop-in replacement for the classnames module</span> - <span id="d0cf"><a href="https://xstate.js.org/docs" class="markup--anchor markup--li-anchor">xstate</a>: State machines and statecharts for the modern web</span> - <span id="1fa5"><a href="https://github.com/onury/tasktimer" class="markup--anchor markup--li-anchor">tasktimer</a>: An accurate timer utility for running periodic tasks on the given interval ticks or dates. (Node and Browser)</span> - <span id="baad"><a href="https://github.com/rough-stuff/rough-notation" class="markup--anchor markup--li-anchor">rough-notation</a>: Create and animate hand-drawn annotations on a web page</span> ### Async - <span id="b393"><a href="https://github.com/axios/axios" class="markup--anchor markup--li-anchor">axios</a>: Promise based HTTP client for the browser and node.js</span> - <span id="142b"><a href="https://github.com/softonic/axios-retry" class="markup--anchor markup--li-anchor">axios-retry</a>: Axios plugin that intercepts failed requests and retries them whenever possible</span> - <span id="6810"><a href="https://github.com/developit/redaxios" class="markup--anchor markup--li-anchor">redaxios</a>: The Axios API, as an 800 byte Fetch wrapper</span> - <span id="7bf3"><a href="https://github.com/lquixada/cross-fetch" class="markup--anchor markup--li-anchor">cross-fetch</a>: Universal WHATWG Fetch API for Node, Browsers and React Native</span> - <span id="c0ce"><a href="https://github.com/asfktz/Awaity.js" class="markup--anchor markup--li-anchor">awaity</a>: A functional, lightweight alternative to bluebird.js, built with `async` / `await` in mind</span> - <span id="9147"><a href="https://github.com/muicss/loadjs" class="markup--anchor markup--li-anchor">loadjs</a>: A tiny async loader / dependency manager for modern browsers (789 bytes)</span> - <span id="2114"><a href="https://github.com/scopsy/await-to-js" class="markup--anchor markup--li-anchor">await-to-js</a>: Async await wrapper for easy error handling without try-catch</span> ### Node - <span id="9d02"><a href="https://www.fastify.io/" class="markup--anchor markup--li-anchor">Fastify</a>: Fast and low overhead web framework, for Node.js</span> - <span id="4a0e"><a href="https://expressjs.com" class="markup--anchor markup--li-anchor">Express</a></span> - <span id="f082"><a href="https://github.com/helmetjs/helmet" class="markup--anchor markup--li-anchor">helmet</a>: Help secure Express apps with various HTTP headers</span> - <span id="0b93"><a href="https://github.com/antongolub/reqresnext" class="markup--anchor markup--li-anchor">reqresnext</a>: Tiny helper for express middleware testing</span> - <span id="b28a"><a href="https://github.com/krakenjs/lusca" class="markup--anchor markup--li-anchor">lusca</a>: Application security for express apps</span> - <span id="a078"><a href="https://github.com/expressjs/cookie-session" class="markup--anchor markup--li-anchor">cookie-session</a>: Simple cookie-based session middleware</span> - <span id="ef4f"><a href="https://github.com/i0natan/nodebestpractices" class="markup--anchor markup--li-anchor">nodebestpractices</a>: The largest Node.JS best practices list. Curated from the top ranked articles and always updated</span> - <span id="02db"><a href="https://github.com/zeeshanu/dumper.js" class="markup--anchor markup--li-anchor">dumper.js</a>: A better and pretty variable inspector for your Node.js applications</span> - <span id="ba2e"><a href="https://github.com/gajus/http-terminator" class="markup--anchor markup--li-anchor">http-terminator</a>: Gracefully terminates HTTP(S) server</span> - <span id="738b"><a href="https://github.com/uuidjs/uuid" class="markup--anchor markup--li-anchor">uuid</a>: Generate RFC-compliant UUIDs in JavaScript</span> - <span id="6310"><a href="https://github.com/jshttp/http-errors" class="markup--anchor markup--li-anchor">http-errors</a>: Create HTTP Errors</span> - <span id="73b9"><a href="https://github.com/hapijs/boom" class="markup--anchor markup--li-anchor">boom</a>: HTTP-friendly error objects</span> - <span id="560b"><a href="https://github.com/denoland/deno" class="markup--anchor markup--li-anchor">deno</a>: A secure JavaScript and TypeScript runtime</span> - <span id="32e7"><a href="https://github.com/micromatch/nanomatch" class="markup--anchor markup--li-anchor">nanomatch</a>: Fast, minimal glob matcher for node.js. Similar to micromatch, minimatch and multimatch, but without support for extended globs (extglobs), posix brackets or braces, and with complete Bash 4.3 wildcard support: (“\*”, “\*\*”, and “?”)</span> - <span id="9286"><a href="https://github.com/sindresorhus/yn" class="markup--anchor markup--li-anchor">yn</a>: Parse yes/no like values</span> - <span id="1238"><a href="https://github.com/AvianFlu/ncp" class="markup--anchor markup--li-anchor">ncp</a>: Asynchronous recursive file copying with Node.js</span> #### Logging - <span id="b21b"><a href="https://github.com/pinojs/pino" class="markup--anchor markup--li-anchor">pino</a>: 🌲 super fast, all natural json logger 🌲</span> - <span id="dcee"><a href="https://github.com/bevry/caterpillar" class="markup--anchor markup--li-anchor">caterpillar</a>: Caterpillar is the ultimate logging system for Deno, Node.js, and Web Browsers</span> - <span id="eef2"><a href="https://github.com/cabinjs/cabin" class="markup--anchor markup--li-anchor">cabin</a>: Cabin is the best JavaScript and Node.js logging service and logging npm package</span> ### Responsive - <span id="e235"><a href="https://github.com/pauldijou/responsive-watch" class="markup--anchor markup--li-anchor">responsive-watch</a>: Watch some media queries and react when they change</span> - <span id="6720"><a href="https://github.com/robb0wen/tornis" class="markup--anchor markup--li-anchor">tornis</a>: Tornis helps you watch and respond to changes in your browser’s viewport 🌲</span> - <span id="fadc"><a href="https://github.com/ryanve/actual" class="markup--anchor markup--li-anchor">actual</a>: Determine actual CSS media query breakpoints via JavaScript</span> ### Media and Images - <span id="e520"><a href="https://github.com/awcross/images-loaded" class="markup--anchor markup--li-anchor">images-loaded</a>: Wait for images to load using promises. No dependencies.</span> - <span id="7bd6"><a href="https://github.com/aFarkas/lazysizes" class="markup--anchor markup--li-anchor">lazysizes</a>: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.</span> #### Image services - <span id="3e33"><a href="https://github.com/lovell/sharp" class="markup--anchor markup--li-anchor">sharp</a>: High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP and TIFF images. Uses the libvips library.</span> - <span id="2751"><a href="https://www.imgix.com/" class="markup--anchor markup--li-anchor">IMGIX</a>: Real-time image processing and image CDN</span> ### Date - <span id="0dac"><a href="https://date-fns.org/" class="markup--anchor markup--li-anchor">date-fns</a>: Modern JavaScript date utility library</span> - <span id="d431"><a href="https://github.com/lukeed/tinydate" class="markup--anchor markup--li-anchor">tinydate</a>: A tiny (337B) reusable date formatter. Extremely fast!</span> - <span id="7966"><a href="https://github.com/aweary/tinytime" class="markup--anchor markup--li-anchor">tinytime</a>: ⏰ A straightforward date and time formatter in <1kb</span> ### Scrolling - <span id="fa73"><a href="https://github.com/jonataswalker/scroll-watcher" class="markup--anchor markup--li-anchor">scroll-watcher</a></span> - <span id="9680"><a href="https://github.com/dollarshaveclub/scrolldir" class="markup--anchor markup--li-anchor">scrolldir</a>: Leverage Vertical Scroll Direction with CSS</span> ### Carousels - <span id="eac9"><a href="https://flickity.metafizzy.co/" class="markup--anchor markup--li-anchor">Flickity</a></span> - <span id="ae6b"><a href="http://idangero.us/swiper/" class="markup--anchor markup--li-anchor">Swiper</a></span> ### Animation - <span id="afba"><a href="https://github.com/Rich-Harris/ramjet" class="markup--anchor markup--li-anchor">ramjet</a>: Morph DOM elements from one state to another with smooth animations and transitions</span> - <span id="75dd"><a href="https://github.com/juliangarnier/anime" class="markup--anchor markup--li-anchor">anime</a>: JavaScript Animation Engine</span> - <span id="afb5"><a href="https://greensock.com/" class="markup--anchor markup--li-anchor">GSAP</a>:the standard for JavaScript HTML5 animation | GreenSock</span> - <span id="afe9"><a href="https://micku7zu.github.io/vanilla-tilt.js/index.html" class="markup--anchor markup--li-anchor">Vanilla-tilt.js</a>: A smooth 3D tilt javascript library forked from Tilt.js</span> ### Web workers - <span id="a0e3"><a href="https://github.com/developit/workerize" class="markup--anchor markup--li-anchor">workerize</a>: Run a module in a Web Worker</span> - <span id="58de"><a href="https://github.com/developit/greenlet" class="markup--anchor markup--li-anchor">greenlet</a>: Move an async function into its own thread. A simplified single-function version of workerize.</span> ### Immutable - <span id="ae2e"><a href="https://github.com/mweststrate/immer" class="markup--anchor markup--li-anchor">immer</a>: Create the next immutable state tree by simply modifying the current tree</span> - <span id="0823"><a href="https://github.com/immerjs/use-immer" class="markup--anchor markup--li-anchor">use-immer</a>: Use immer to drive state with a React hooks</span> - <span id="8bcb"><a href="https://github.com/planttheidea/unchanged" class="markup--anchor markup--li-anchor">unchanged</a>: A tiny, fast, unopinionated handler for updating JS objects and arrays immutably</span> - <span id="668c"><a href="https://github.com/rtfeldman/seamless-immutable" class="markup--anchor markup--li-anchor">seamless-immutable</a>: Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objectsseamless-immutable\`</span> - <span id="513e"><a href="https://github.com/jaredpalmer/mutik" class="markup--anchor markup--li-anchor">mutik</a>: A tiny (495B) immutable state management library based on Immer</span> ### Typography - <span id="a2ed"><a href="https://github.com/rikschennink/fitty" class="markup--anchor markup--li-anchor">fitty</a>: Makes text fit perfectly</span> ### Polyfills - <span id="dfbc"><a href="https://github.com/que-etc/resize-observer-polyfill" class="markup--anchor markup--li-anchor">resize-observer-polyfill</a>:A polyfill for the Resize Observer API</span> ### ⚛️ React <a href="https://reactjs.org" class="markup--anchor markup--p-anchor">reactjs.org</a> - <span id="6981"><a href="https://github.com/facebook/create-react-app" class="markup--anchor markup--li-anchor">create-react-app</a>: Create React apps with no build configuration</span> - <span id="f4dc"><a href="https://github.com/timarney/react-app-rewired" class="markup--anchor markup--li-anchor">react-app-rewired</a>: Override create-react-app webpack configs without ejecting</span> - <span id="4438"><a href="https://github.com/vasanthk/react-bits" class="markup--anchor markup--li-anchor">react-bits</a>: ✨ React patterns, techniques, tips and tricks ✨</span> ### React-specific libs: - <span id="d42a"><a href="https://github.com/renatorib/react-powerplug" class="markup--anchor markup--li-anchor">react-powerplug</a>: Renderless Containers</span> - <span id="2321"><a href="https://github.com/jaredpalmer/formik" class="markup--anchor markup--li-anchor">formik</a>: Build forms in React, without the tears 😭</span> - <span id="ce59"><a href="https://github.com/ReactTraining/react-router" class="markup--anchor markup--li-anchor">react-router</a>: Declarative routing for React</span> - <span id="90e0"><a href="https://reach.tech/router" class="markup--anchor markup--li-anchor">Reach Router</a></span> - <span id="cd0c"><a href="https://react-fns.netlify.com/" class="markup--anchor markup--li-anchor">react-fns</a>: React Components for common Web APIs</span> - <span id="692b"><a href="https://github.com/tajo/react-portal" class="markup--anchor markup--li-anchor">react-portal</a>: React component for transportation of modals, lightboxes, loading bars… to document.body</span> - <span id="c4f6"><a href="https://github.com/stereobooster/react-ideal-image" class="markup--anchor markup--li-anchor">react-ideal-image</a>: 🖼️ An Almost Ideal React Image Component</span> - <span id="07a5"><a href="https://github.com/pedronauck/react-adopt" class="markup--anchor markup--li-anchor">react-adopt</a>: Compose render props components like a pro</span> - <span id="cceb"><a href="https://github.com/paypal/downshift" class="markup--anchor markup--li-anchor">downshift</a></span> - <span id="e13b"><a href="https://github.com/jamiebuilds/react-loadable" class="markup--anchor markup--li-anchor">react-loadable</a>: A higher order component for loading components with promises</span> - <span id="89ea"><a href="https://github.com/tajo/react-portal" class="markup--anchor markup--li-anchor">react-portal</a>: React component for transportation of modals, lightboxes, loading bars… to document.body</span> - <span id="3592"><a href="https://github.com/lingui/js-lingui" class="markup--anchor markup--li-anchor">js-lingui: 🌍📖</a>: A readable, automated, and optimized (5 kb) internationalization (Intl / i18n) for JavaScript</span> - <span id="f2c0"><a href="https://github.com/u-wave/react-mq" class="markup--anchor markup--li-anchor">react-mq</a>: Barebones CSS media query component for React, ~560 bytes</span> - <span id="34ac"><a href="https://github.com/ReactTraining/react-media" class="markup--anchor markup--li-anchor">react-media</a>: CSS media queries for React. This is SSR compatible as well.</span> - <span id="d811"><a href="https://github.com/andrewbranch/merge-props" class="markup--anchor markup--li-anchor">merge-props</a>: Merges className, style, and event handler props for React elements</span> - <span id="0415"><a href="https://github.com/thearnica/react-uid" class="markup--anchor markup--li-anchor">react-uid</a>: Render-less container for generating UID for a11y, consistent react key, and any other good reason 🦄</span> - <span id="2402"><a href="https://github.com/lukeed/clsx" class="markup--anchor markup--li-anchor">clsx</a>: A tiny (229B) utility for constructing `className` strings conditionally</span> - <span id="f336"><a href="https://www.framer.com/motion/" class="markup--anchor markup--li-anchor">Framer Motion</a>: An open source React library to power production-ready animations. Design fluid animations for the web, across desktop and mobile</span> - <span id="665d"><a href="https://github.com/dequelabs/react-axe" class="markup--anchor markup--li-anchor">react-axe</a>: Accessibility auditing for React.js applications</span> - <span id="a7bc"><a href="https://github.com/geobde/use-click-away" class="markup--anchor markup--li-anchor">use-click-away</a>: React hook to detect click or touch events outside an element</span> - <span id="7220"><a href="https://github.com/clauderic/react-tiny-virtual-list" class="markup--anchor markup--li-anchor">react-tiny-virtual-list</a>: A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!</span> - <span id="344f"><a href="https://github.com/everweij/react-laag" class="markup--anchor markup--li-anchor">react-laag</a>: Primitives to build things like tooltips, dropdown menu’s and popovers in React</span> - <span id="d70c"><a href="https://github.com/react-dnd/react-dnd" class="markup--anchor markup--li-anchor">react-dnd</a>: Drag and Drop for React</span> #### React Hooks - <span id="43d9"><a href="https://github.com/zeit/swr" class="markup--anchor markup--li-anchor">swr</a>: React Hooks library for remote data fetching</span> - <span id="bfab"><a href="https://www.hooks.guide/" class="markup--anchor markup--li-anchor">Hooks.Guide</a>: Collection of React hooks curated by the community</span> - <span id="c7e8"><a href="https://usehooks.com/" class="markup--anchor markup--li-anchor">useHooks</a>: Easy to understand React Hook recipes</span> - <span id="2366"><a href="https://github.com/beautifulinteractions/beautiful-react-hooks" class="markup--anchor markup--li-anchor">beautiful-react-hooks</a>: 🔥A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development 🔥</span> - <span id="f483"><a href="https://github.com/GoogleChromeLabs/react-adaptive-hooks" class="markup--anchor markup--li-anchor">react-adaptive-hooks</a>: Deliver experiences best suited to a user’s device and network constraints</span> ### State management - <span id="0040"><a href="https://github.com/react-spring/zustand" class="markup--anchor markup--li-anchor">zustand</a>: 🐻 Bear necessities for state management in React</span> - <span id="9317"><a href="https://github.com/reduxjs/redux" class="markup--anchor markup--li-anchor">redux</a>: Predictable state container for JavaScript apps</span> - <span id="9942"><a href="https://github.com/reduxjs/reselect" class="markup--anchor markup--li-anchor">reselect</a>: Selector library for Redux</span> - <span id="2631"><a href="https://github.com/redux-saga/redux-saga" class="markup--anchor markup--li-anchor">redux-saga</a>: An alternative side effect model for Redux apps</span> - <span id="8f4f"><a href="https://github.com/afitiskin/redux-saga-routines" class="markup--anchor markup--li-anchor">redux-saga-routines</a>: Routines for redux-saga</span> - <span id="22ea"><a href="https://github.com/reduxjs/redux-thunk" class="markup--anchor markup--li-anchor">redux-thunk</a>: Thunk middleware for Redux</span> - <span id="37ce"><a href="https://github.com/brillout/awesome-redux" class="markup--anchor markup--li-anchor">awesome-redux</a>: Catalog of Redux Libraries & Learning Material</span> - <span id="bd0c"><a href="https://github.com/ForsakenHarmony/parket" class="markup--anchor markup--li-anchor">parket</a>: A library to manage application state, heavily inspired by mobx-state-tree</span> - <span id="af19"><a href="https://github.com/jamiebuilds/unstated" class="markup--anchor markup--li-anchor">unstated</a>: State so simple, it goes without saying</span> - <span id="a530"><a href="https://github.com/zhujinxuan/mergeState" class="markup--anchor markup--li-anchor">mergeState</a>: How to Stop Worrying and Use Nested Object/Array in React/Redux States</span> - <span id="aa4c"><a href="https://github.com/zerobias/effector" class="markup--anchor markup--li-anchor">effector</a>: The state manager ☄️</span> - <span id="617c"><a href="https://github.com/facebookexperimental/Recoil" class="markup--anchor markup--li-anchor">Recoil</a>: Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.</span> ### Server-rendered React - <span id="ea38"><a href="https://nextjs.org/" class="markup--anchor markup--li-anchor">Next.js</a> (<a href="https://github.com/zeit/next.js" class="markup--anchor markup--li-anchor">repo</a>): — Framework for server-rendered or statically-exported React apps</span> - <span id="50fe"><a href="https://github.com/zeit/next-plugins" class="markup--anchor markup--li-anchor">next-plugins</a></span> ### Static site generators - <span id="4b57"><a href="https://www.gatsbyjs.org/" class="markup--anchor markup--li-anchor">Gatsby</a>: Blazing fast static site generator for React</span> ### Microservices/Serverless - <span id="54d3"><a href="https://github.com/zeit/micro" class="markup--anchor markup--li-anchor">micro</a></span> - <span id="e0f7"><a href="https://github.com/amio/awesome-micro" class="markup--anchor markup--li-anchor">awesome-micro</a></span> ### TypeScript <a href="https://www.typescriptlang.org/" class="markup--anchor markup--p-anchor">typescriptlang.org</a> - <span id="08dd"><a href="https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript" class="markup--anchor markup--li-anchor">What’s new in TypeScript</a>: Microsoft/TypeScript Wiki</span> - <span id="d932"><a href="https://basarat.gitbooks.io/typescript/" class="markup--anchor markup--li-anchor">TypeScript Deep Dive</a></span> - <span id="5ca2"><a href="https://blog.mariusschulz.com/series/typescript-evolution" class="markup--anchor markup--li-anchor">TypeScript Evolution</a></span> - <span id="d151"><a href="https://transform.now.sh/json-to-ts-interface/" class="markup--anchor markup--li-anchor">JSON to Typescript Interface</a></span> - <span id="ddb6"><a href="https://github.com/sw-yx/react-typescript-cheatsheet" class="markup--anchor markup--li-anchor">react-typescript-cheatsheet</a>: a cheatsheet for react users using typescript with react for the first (or nth!) time</span> - <span id="92ad"><a href="https://github.com/labs42io/clean-code-typescript" class="markup--anchor markup--li-anchor">clean-code-typescript</a>: Clean Code concepts adapted for TypeScript</span> ### Command Line, Terminal and shells <a href="https://fishshell.com/" class="markup--anchor markup--p-anchor">Fish shell</a>: The user-friendly command line shell - <span id="ecab"><a href="https://github.com/mrmartineau/fish" class="markup--anchor markup--li-anchor">My fish_config</a></span> - <span id="3997"><a href="https://github.com/jorgebucaran/awesome-fish" class="markup--anchor markup--li-anchor">awesome-fish</a>: A curated list of packages, prompts, and resources for the amazing fish shell</span> - <span id="98c8"><a href="https://starship.rs/" class="markup--anchor markup--li-anchor">Starship</a>: Cross-Shell Prompt</span> - <span id="67fd"><a href="https://github.com/IlanCosman/tide" class="markup--anchor markup--li-anchor">tide</a>: 🌊 A modern prompt manager for the Fish shell</span> ### Creating CLI apps - <span id="01dc"><a href="https://github.com/infinitered/gluegun" class="markup--anchor markup--li-anchor">gluegun</a>: A delightful toolkit for building Node-powered CLIs</span> - <span id="8688"><a href="https://github.com/SBoudrias/Inquirer.js" class="markup--anchor markup--li-anchor">inquirer</a>: A collection of common interactive command line user interfaces</span> - <span id="594a"><a href="https://github.com/tj/commander.js" class="markup--anchor markup--li-anchor">commander</a>: node.js command-line interfaces made easy</span> - <span id="4371"><a href="https://github.com/lukeed/sade" class="markup--anchor markup--li-anchor">sade</a>: Sade is a small but powerful tool for building command-line interface (CLI) applications for Node.js that are fast, responsive, and helpful!</span> ### CLI apps - <span id="3944"><a href="https://hub.github.com/" class="markup--anchor markup--li-anchor">hub</a>: hub is an extension to command-line git that helps you do everyday GitHub tasks without ever leaving the terminal</span> - <span id="5d4e"><a href="https://github.com/zeit/serve" class="markup--anchor markup--li-anchor">serve</a>: Static file serving and directory listing</span> - <span id="4548"><a href="https://github.com/agarrharr/awesome-cli-apps" class="markup--anchor markup--li-anchor">awesome-cli-apps</a>: A curated list of command line apps</span> - <span id="6d80"><a href="https://github.com/SpaceVim/SpaceVim" class="markup--anchor markup--li-anchor">SpaceVim</a>: A community-driven modular vim distribution — The ultimate vim configuration</span> ### Tooling ### Code bundlers - <span id="963c"><a href="https://github.com/preconstruct/preconstruct" class="markup--anchor markup--li-anchor">preconstruct</a>: 🎁 Dev and build your code painlessly in monorepos</span> - <span id="8010"><a href="https://webpack.js.org/" class="markup--anchor markup--li-anchor">Webpack</a>: script/asset bundler</span> - <span id="a5c1"><a href="https://github.com/mrmartineau/webpack-recipes" class="markup--anchor markup--li-anchor">Webpack recipes</a></span> - <span id="7894"><a href="https://github.com/nippur72/ifdef-loader" class="markup--anchor markup--li-anchor">ifdef-loader</a>: Webpack loader for JavaScript/TypeScript conditional compilation</span> - <span id="6107"><a href="https://parceljs.org/" class="markup--anchor markup--li-anchor">Parcel</a>: Blazing fast, zero configuration web application bundler</span> - <span id="91dc"><a href="https://github.com/developit/microbundle" class="markup--anchor markup--li-anchor">microbundle</a>: Zero-configuration bundler for tiny modules</span> - <span id="ad7f"><a href="https://rollupjs.org/guide/en" class="markup--anchor markup--li-anchor">rollup.js</a>: Rollup is a module bundler for JavaScript</span> - <span id="2d62"><a href="https://github.com/zeit/ncc" class="markup--anchor markup--li-anchor">ncc</a>: Node.js Compiler Collection. Simple CLI for compiling a Node.js module into a single file, together with all its dependencies, gcc-style.</span> - <span id="d875"><a href="https://github.com/fastpack/fastpack" class="markup--anchor markup--li-anchor">fastpack</a>: Pack JS code into a single bundle fast & easy</span> ### Package management and publishing - <span id="5f7d"><a href="https://github.com/sindresorhus/np" class="markup--anchor markup--li-anchor">np</a>: A better `npm publish`</span> - <span id="65b8"><a href="https://github.com/ai/size-limit" class="markup--anchor markup--li-anchor">size-limit</a>: Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error</span> - <span id="c9d6"><a href="https://github.com/siddharthkp/bundlesize" class="markup--anchor markup--li-anchor">bundlesize</a>: Keep your bundle size in check</span> - <span id="bf49"><a href="https://github.com/kentcdodds/nps" class="markup--anchor markup--li-anchor">nps</a>: All the benefits of npm scripts without the cost of a bloated package.json and limits of json</span> - <span id="01bb"><a href="https://dependabot.com/" class="markup--anchor markup--li-anchor">Dependabot</a>: Dependabot creates pull requests to keep your dependencies secure and up-to-date</span> - <span id="7b5d"><a href="https://github.com/npm/npm/blob/1fa9169ac9687f0be4156574279a968a48dd2458/doc/misc/npm-config.md" class="markup--anchor markup--li-anchor">npm-config</a> (docs): More than you probably want to know about npm configuration</span> - <span id="bb0f"><a href="https://github.com/ds300/patch-package" class="markup--anchor markup--li-anchor">patch-package</a>: Fix broken node modules with no fuss 📦👌</span> - <span id="b9df"><a href="https://github.com/pahen/madge" class="markup--anchor markup--li-anchor">madge</a>: Create graphs from your CommonJS, AMD or ES6 module dependencies</span> ### Commit hooks - <span id="3b07"><a href="https://github.com/Arkweid/lefthook" class="markup--anchor markup--li-anchor">lefthook</a>: Fast and powerful Git hooks manager for any type of projects</span> - <span id="7109"><a href="https://github.com/typicode/husky" class="markup--anchor markup--li-anchor">husky</a>: Git hooks made easy</span> - <span id="2a50"><a href="https://github.com/okonet/lint-staged" class="markup--anchor markup--li-anchor">lint-staged: 🚫💩</a>: Run linters on git staged files</span> - <span id="7b96"><a href="https://github.com/Arkweid/lefthook" class="markup--anchor markup--li-anchor">lefthook</a>: Fast and powerful Git hooks manager for any type of projects</span> ### Testing - <span id="b585"><a href="https://facebook.github.io/jest/" class="markup--anchor markup--li-anchor">Jest</a>: Delightful JavaScript Testing</span> - <span id="9799"><a href="https://github.com/Raathigesh/majestic" class="markup--anchor markup--li-anchor">majestic</a>: Zero config UI for Jest</span> - <span id="c9c7"><a href="https://github.com/mattphillips/jest-chain" class="markup--anchor markup--li-anchor">jest-chain</a>: Chain Jest matchers together to create one powerful assertion 🃏⛓</span> - <span id="bde5"><a href="https://github.com/jest-community/jest-extended" class="markup--anchor markup--li-anchor">jest-extended</a>: — Additional Jest matchers 🃏💪</span> - <span id="3c2c"><a href="https://github.com/jest-community/snapshot-diff" class="markup--anchor markup--li-anchor">snapshot-diff</a>: Diffing snapshot utility for Jest</span> - <span id="d454"><a href="https://github.com/hustcc/jest-date-mock" class="markup--anchor markup--li-anchor">jest-date-mock</a>: 🌗 Mock `Date` when run unit test cases with jest. Make tests of Date easier</span> - <span id="938d"><a href="https://cypress.io" class="markup--anchor markup--li-anchor">Cypress</a>: end-to-end testing</span> - <span id="e1fa"><a href="https://github.com/kentcdodds/cypress-testing-library" class="markup--anchor markup--li-anchor">cypress-testing-library</a>: 🐅 Simple and complete custom Cypress commands and utilities that encourage good testing practices</span> - <span id="eaf4"><a href="https://github.com/avanslaars/cypress-axe" class="markup--anchor markup--li-anchor">cypress-axe</a>: Custom commands for Cypress to run a11y checks with axe-core</span> - <span id="3a32"><a href="https://github.com/bahmutov/start-server-and-test" class="markup--anchor markup--li-anchor">start-server-and-test</a>: — Starts server, waits for URL, then runs test command; when the tests end, shuts down server</span> - <span id="3040"><a href="https://github.com/kentcdodds/dom-testing-library" class="markup--anchor markup--li-anchor">dom-testing-library</a>: 🐙 Simple and complete DOM testing utilities that encourage good testing practices</span> - <span id="4cd8"><a href="https://github.com/testing-library/react-testing-library" class="markup--anchor markup--li-anchor">react-testing-library 🐐</a>: Simple and complete React DOM testing utilities that encourage good testing practices</span> - <span id="ec40"><a href="https://react-testing-examples.com/" class="markup--anchor markup--li-anchor">react-testing-library</a>: React Testing Examples</span> - <span id="95b5"><a href="https://github.com/testing-library/react-hooks-testing-library" class="markup--anchor markup--li-anchor">react-hooks-testing-library</a>: 🐏 Simple and complete React hooks testing utilities that encourage good testing practices</span> - <span id="f82a"><a href="https://github.com/chancejs/chancejs" class="markup--anchor markup--li-anchor">Chance</a>: Random generator helper for JavaScript</span> - <span id="1678"><a href="https://github.com/Marak/faker.js" class="markup--anchor markup--li-anchor">faker.js</a>: generate massive amounts of fake data in Node.js and the browser</span> - <span id="e1af"><a href="https://github.com/nock/nock" class="markup--anchor markup--li-anchor">nock</a>: HTTP server mocking and expectations library for Node.js</span> - <span id="e490"><a href="http://stryker-mutator.io/" class="markup--anchor markup--li-anchor">Stryker Mutator</a></span> - <span id="a7c7"><a href="https://github.com/tatyshev/given2" class="markup--anchor markup--li-anchor">given2</a>: Lazy variable evaluation for Jasmine, Mocha, Jest specs, inspired by Ruby and Rspec 💎</span> - <span id="b62d"><a href="https://github.com/caderek/benny" class="markup--anchor markup--li-anchor">benny</a>: A dead simple benchmarking framework for JS/TS libs</span> - <span id="3d68"><a href="https://github.com/bestiejs/benchmark.js" class="markup--anchor markup--li-anchor">benchmark.js</a>: A benchmarking library. As used on <a href="http://jsPerf.com" class="markup--anchor markup--li-anchor">jsPerf.com</a></span> - <span id="4921"><a href="https://github.com/NoriSte/ui-testing-best-practices" class="markup--anchor markup--li-anchor">ui-testing-best-practices</a>: The largest UI testing best practices list (lat update: April 2020) (work in progress)</span> ### Code formatting and linting - <span id="ed0c"><a href="https://prettier.io/" class="markup--anchor markup--li-anchor">Prettier</a></span> - <span id="bb36"><a href="https://github.com/nrwl/precise-commits" class="markup--anchor markup--li-anchor">precise-commits</a>: Painlessly apply Prettier by only formatting lines you have modified anyway!</span> - <span id="0552"><a href="https://github.com/azz/pretty-quick" class="markup--anchor markup--li-anchor">pretty-quick</a>: Runs Prettier on your changed files</span> - <span id="2feb"><a href="https://eslint.org" class="markup--anchor markup--li-anchor">Eslint</a></span> - <span id="2b9a"><a href="https://github.com/prettier/eslint-plugin-prettier" class="markup--anchor markup--li-anchor">eslint-plugin-prettier</a>: ESLint plugin for prettier formatting</span> - <span id="9669"><a href="https://github.com/prettier/eslint-config-prettier" class="markup--anchor markup--li-anchor">eslint-config-prettier</a>: Turns off all rules that are unnecessary or might conflict with Prettier</span> - <span id="d317"><a href="https://github.com/yannickcr/eslint-plugin-react" class="markup--anchor markup--li-anchor">eslint-plugin-react</a>: — React specific linting rules for ESLint</span> ### Miscellaneous - <span id="073d"><a href="https://github.com/mysticatea/npm-run-all" class="markup--anchor markup--li-anchor">npm-run-all</a>: A CLI tool to run multiple npm-scripts in parallel or sequential</span> - <span id="60c8"><a href="https://github.com/milewski/cross-port-killer" class="markup--anchor markup--li-anchor">cross-port-killer</a>: Kill the process running on a given TCP port on Windows, Linux and Mac</span> - <span id="bbb7"><a href="https://github.com/tabrindle/envinfo" class="markup--anchor markup--li-anchor">envinfo</a>: Generate a report about your development environment for debugging and issue reporting</span> - <span id="118c"><a href="https://github.com/FiloSottile/mkcert" class="markup--anchor markup--li-anchor">mkcert</a>: A simple zero-config tool to make locally trusted development certificates with any names you’d like</span> ### Progressive Web Apps - <span id="1c7b"><a href="https://developers.google.com/web/tools/workbox/" class="markup--anchor markup--li-anchor">Workbox</a> & (<a href="https://github.com/GoogleChrome/workbox" class="markup--anchor markup--li-anchor">repo</a>): JavaScript libraries for Progressive Web Apps</span> ### Code Sandboxes - <span id="5b3a"><a href="https://codesandbox.io/" class="markup--anchor markup--li-anchor">CodeSandbox</a>: CodeSandbox is perfect for React demo apps</span> - <span id="2b00"><a href="http://codepen.io/" class="markup--anchor markup--li-anchor">Codepen</a>: Codepen is perfect for non-React front-end demos and prototypes</span> - <span id="6826"><a href="http://codeshare.io/" class="markup--anchor markup--li-anchor">CodeShare</a>: Codeshare is useful for collaborating on a single file if devs are not in the same room</span> - <span id="cad1"><a href="https://glitch.com/" class="markup--anchor markup--li-anchor">Glitch</a></span> ### APIs - <span id="a710"><a href="https://www.getpostman.com/" class="markup--anchor markup--li-anchor">Postman</a>: used to develop, test and monitor APIs</span> - <span id="0c78"><a href="http://www.mockapi.io/" class="markup--anchor markup--li-anchor">MockAPI</a>: create a mock API</span> - <span id="995c"><a href="https://jsonbin.org/" class="markup--anchor markup--li-anchor">jsonbin</a>: A personal JSON store as a RESTful service</span> - <span id="f5ae"><a href="http://www.test-cors.org/" class="markup--anchor markup--li-anchor">test-cors.org</a></span> - <span id="e0d1"><a href="https://reqres.in/" class="markup--anchor markup--li-anchor">Reqres</a>: A hosted REST-API ready to respond to your AJAX requests</span> - <span id="265c"><a href="https://miragejs.com/" class="markup--anchor markup--li-anchor">Mirage JS</a>: An API mocking library for frontend developers</span> - <span id="d2b9"><a href="https://postwoman.io/" class="markup--anchor markup--li-anchor">Postwoman</a>: API request builder</span> ### GraphQL - <span id="424b"><a href="https://www.graphqlbin.com" class="markup--anchor markup--li-anchor">GraphQL Playground</a></span> - <span id="10af"><a href="https://www.apollographql.com/" class="markup--anchor markup--li-anchor">Apollo GraphQL</a>: Apollo Data Graph Platform — unify APIs, microservices, and databases into a data graph that you can query with GraphQL</span> - <span id="0526"><a href="https://www.apollographql.com/docs/react/" class="markup--anchor markup--li-anchor">Apollo Client (React)</a>: Apollo React GraphQL Docs</span> - <span id="6eab"><a href="https://github.com/Saeris/graphql-directives" class="markup--anchor markup--li-anchor">graphql-directives</a>: 🧭 A collection of custom GraphQL Schema Directives for use with Apollo Server</span> - <span id="0f7d"><a href="https://github.com/FormidableLabs/urql" class="markup--anchor markup--li-anchor">urql</a>: The highly customizable and versatile GraphQL client</span> - <span id="7658"><a href="https://github.com/APIs-guru/graphql-lodash" class="markup--anchor markup--li-anchor">graphql-lodash</a>: 🛠 Data manipulation for GraphQL queries with lodash syntax</span> ### JSON - <span id="c6bf"><a href="https://next.json-generator.com/" class="markup--anchor markup--li-anchor">JSON generator</a>: generate a lot of custom JSON for your app/site</span> - <span id="52bf"><a href="https://jsoneditoronline.org/" class="markup--anchor markup--li-anchor">JSON Editor Online</a>: view/edit JSON in a better format</span> - <span id="c41b"><a href="https://github.com/antonmedv/fx" class="markup--anchor markup--li-anchor">fx</a>: Command-line tool and terminal JSON viewer 🔥</span> ### HTML - <span id="b1f9"><a href="https://github.com/joshbuchea/HEAD" class="markup--anchor markup--li-anchor">github.com/joshbuchea/HEAD</a>: the definitive resource for everything that *could* go in the head of your document</span> - <span id="f905"><a href="https://metatags.io/" class="markup--anchor markup--li-anchor">MetaTags.io</a>: Preview, Edit and Generate</span> - <span id="b80c"><a href="https://www.heymeta.com/" class="markup--anchor markup--li-anchor">HEY META</a>: Website Meta Tag Check</span> - <span id="126e"><a href="https://richpreview.com/" class="markup--anchor markup--li-anchor">Rich Link Preview</a></span> ### SVG - <span id="ecc6"><a href="https://svgontheweb.com/" class="markup--anchor markup--li-anchor">A Practical Guide to SVGs on the web</a></span> - <span id="6fef"><a href="https://getwaves.io/" class="markup--anchor markup--li-anchor">Get Waves</a>: Create SVG waves for your next design</span> - <span id="44b6"><a href="https://www.blobmaker.app/" class="markup--anchor markup--li-anchor">Blobmaker</a>: Make organic SVG shapes for your next design</span> - <span id="2bbd"><a href="https://github.com/veltman/flubber" class="markup--anchor markup--li-anchor">flubber</a>: Tools for smoother shape animations</span> - <span id="f73b"><a href="http://www.heropatterns.com/" class="markup--anchor markup--li-anchor">Hero Patterns</a>: Free repeatable SVG background patterns for your web projects</span> ### Icons - <span id="08e7"><a href="https://iconsvg.xyz/" class="markup--anchor markup--li-anchor">ICONSVG</a>: Quick customizable SVG icons for your project</span> - <span id="70b9"><a href="https://simpleicons.org/" class="markup--anchor markup--li-anchor">Simple Icons</a></span> - <span id="8cd8"><a href="https://react-icons.github.io/react-icons/#/" class="markup--anchor markup--li-anchor">React Icons</a></span> - <span id="e26e"><a href="https://evil-icons.io/" class="markup--anchor markup--li-anchor">Evil Icons</a></span> - <span id="bf27"><a href="https://icomoon.io/" class="markup--anchor markup--li-anchor">Icon Font & SVG Icon Sets ❍ IcoMoon</a></span> - <span id="3065"><a href="https://svgporn.com/" class="markup--anchor markup--li-anchor">SVG PORN</a></span> - <span id="63c3"><a href="https://feathericons.com/" class="markup--anchor markup--li-anchor">Feather</a>: Simply beautiful open source icons</span> - <span id="5c79"><a href="https://github.com/feathericons/react-feather" class="markup--anchor markup--li-anchor">react-feather</a>: React component for Feather icons</span> - <span id="5841"><a href="https://systemuicons.com/" class="markup--anchor markup--li-anchor">System UIcons</a></span> ### SVG/Image Media compression - <span id="bfd9"><a href="https://squoosh.app/" class="markup--anchor markup--li-anchor">Squoosh</a></span> - <span id="c263"><a href="https://jakearchibald.github.io/svgomg/" class="markup--anchor markup--li-anchor">SVGOMG</a>: SVGO’s Missing GUI</span> ### Conversions and unicode - <span id="5e9c"><a href="https://transform.now.sh/" class="markup--anchor markup--li-anchor">Transform</a>: All important transforms at one place ⭐️⭐️⭐️ this is so useful</span> - <span id="dcea"><a href="https://svgr.now.sh/" class="markup--anchor markup--li-anchor">SVGR</a>: The SVG to JSX transformer</span> - <span id="453c"><a href="https://svg2jsx.herokuapp.com/" class="markup--anchor markup--li-anchor">svg2jsx</a></span> - <span id="9eea"><a href="https://json-to-js.com/" class="markup--anchor markup--li-anchor">JSON to JavaScript object literal</a></span> - <span id="5fe4"><a href="https://unminify.com/" class="markup--anchor markup--li-anchor">Unminify JS, CSS and HTML Code</a></span> - <span id="0a0f"><a href="https://encoder.internetwache.org/#tab_uni" class="markup--anchor markup--li-anchor">Multi-Encoder</a></span> - <span id="a9ab"><a href="https://r12a.github.io/app-conversion/" class="markup--anchor markup--li-anchor">Unicode code converter</a></span> ### Features and feature detection - <span id="afc3"><a href="https://caniuse.com/" class="markup--anchor markup--li-anchor">Can I Use…</a>: Browser support tables for modern web technologies (HTML5, CSS3, JavaScript etc)</span> - <span id="06c5"><a href="http://kangax.github.io/compat-table/es6/" class="markup--anchor markup--li-anchor">Kangax JavaScript compatibility table</a></span> ### Performance - <span id="bf36"><a href="https://bundlephobia.com/" class="markup--anchor markup--li-anchor">Bundlephobia</a>: find the cost of adding a npm package to your bundle</span> ### Performance testing and monitoring - <span id="b347"><a href="https://www.webpagetest.org/" class="markup--anchor markup--li-anchor">WebPageTest</a></span> - <span id="bd89"><a href="https://developers.google.com/web/tools/lighthouse/" class="markup--anchor markup--li-anchor">Lighthouse</a></span> - <span id="2d3a"><a href="https://calibreapp.com/" class="markup--anchor markup--li-anchor">Calibre</a></span> - <span id="aa60"><a href="https://webspeedtest.cloudinary.com/" class="markup--anchor markup--li-anchor">Website Speed Test Image Analysis Tool</a> by Cloudinary</span> ### Design - <span id="b651"><a href="https://subtract.design/entry/forms" class="markup--anchor markup--li-anchor">Subtract Guides</a>: Simple Rules for Designing Web & Mobile Forms</span> ### Design Systems and documentation - <span id="571f"><a href="https://storybook.js.org/" class="markup--anchor markup--li-anchor">Storybook</a>: UI dev environment you’ll love to use</span> - <span id="7371"><a href="https://github.com/styleguidist/react-styleguidist" class="markup--anchor markup--li-anchor">react-styleguidist</a>: — Isolated React component development environment with a living style guide</span> - <span id="f2ff"><a href="https://docusaurus.io/" class="markup--anchor markup--li-anchor">Docusaurus</a>: Easy to Maintain Open Source Documentation Websites</span> - <span id="1d27"><a href="https://www.docz.site/" class="markup--anchor markup--li-anchor">Docz</a></span> - <span id="4ffc"><a href="https://github.com/mrmartineau/design-system-utils" class="markup--anchor markup--li-anchor">design-system-utils</a>: — Design system framework for modern front-end projects</span> - <span id="d120"><a href="https://docute.org/" class="markup--anchor markup--li-anchor">Docute</a>: The fastest way to create a documentation site for your project</span> - <span id="eb8e"><a href="https://github.com/seek-oss/playroom" class="markup--anchor markup--li-anchor">playroom</a>: Design with JSX, powered by your own component library</span> ### Accessibility (A11y) Accessibility is an extremely important part of any web project. While the SOW, functional spec or user-stories might not directly mention a11y, it is up to each developer to ensure that best efforts are made to make our websites as accessible as possible. ### DevOps <a href="https://httpstatuses.com/" class="markup--anchor markup--p-anchor">HTTP Status Codes</a> ### Continuous integration - <span id="8f9f"><a href="https://circleci.com" class="markup--anchor markup--li-anchor">CircleCI</a>: Paid.</span> - <span id="8a1c"><a href="https://bitrise.com" class="markup--anchor markup--li-anchor">Bitrise</a>: Paid. For iOS/Android apps</span> - <span id="e890"><a href="https://travisci.com" class="markup--anchor markup--li-anchor">Travis CI</a>: Free for open-source</span> ### Docker - <span id="db3b"><a href="https://github.com/goodwithtech/dockle" class="markup--anchor markup--li-anchor">dockle</a>: Container Image Linter for Security, Helping build the Best-Practice Docker Image, Easy to start</span> ### Hosting - <span id="46a3"><a href="https://vercel.com" class="markup--anchor markup--li-anchor">Vercel</a></span> - <span id="72cc"><a href="https://netlify.com" class="markup--anchor markup--li-anchor">Netlify</a></span> ### Domains - <span id="9db4"><a href="https://iwantmyname.com/" class="markup--anchor markup--li-anchor">iwantmyname</a></span> ### Design ### Typography - <span id="3edd"><a href="http://modularscale.com/" class="markup--anchor markup--li-anchor">Modular Scale</a></span> - <span id="7e68"><a href="https://codepen.io/getflourish/full/vXqewy/" class="markup--anchor markup--li-anchor">Adaptive Modular Scale</a></span> - <span id="0711"><a href="http://type-scale.com/" class="markup--anchor markup--li-anchor">Type Scale — A Visual Calculator</a></span> ### IDEs and Text Editors ### VS Code - <span id="bcbb"><a href="https://gist.github.com/mrmartineau/28ef03c53275ea468e470532d6d20449" class="markup--anchor markup--li-anchor">My VS Code extensions</a></span> - <span id="cd1f"><a href="https://gist.github.com/mrmartineau/ea3b428124bc1e31cd46dfa55469d781" class="markup--anchor markup--li-anchor">My preferences</a></span> - <span id="50c0"><a href="https://github.com/viatsko/awesome-vscode" class="markup--anchor markup--li-anchor">awesome-vscode</a>: 🎨 A curated list of delightful VS Code packages and resources</span> ### Programming fonts - <span id="6483"><a href="https://www.ibm.com/plex/" class="markup--anchor markup--li-anchor">IBM Plex Mono</a></span> - <span id="e9dc"><a href="https://github.com/iaolo/iA-Fonts" class="markup--anchor markup--li-anchor">iA-Fonts</a></span> - <span id="d2f2"><a href="http://input.fontbureau.com/" class="markup--anchor markup--li-anchor">Input: Fonts for Code</a></span> - <span id="00c1"><a href="https://github.com/tonsky/FiraCode" class="markup--anchor markup--li-anchor">FiraCode</a></span> - <span id="18b1"><a href="https://github.com/belluzj/fantasque-sans" class="markup--anchor markup--li-anchor">fantasque-sans</a></span> - <span id="4a94"><a href="https://github.com/JetBrains/JetBrainsMono" class="markup--anchor markup--li-anchor">Jet Brains Mono</a></span> ### Code colour schemes - <span id="e29c"><a href="https://monokai.pro/" class="markup--anchor markup--li-anchor">Monokai Pro</a></span> - <span id="5897"><a href="https://marketplace.visualstudio.com/items?itemName=teabyii.ayu" class="markup--anchor markup--li-anchor">Ayu (Mirage)</a></span> - <span id="6a9a"><a href="https://draculatheme.com/visual-studio-code/" class="markup--anchor markup--li-anchor">Dracula</a>: A dark theme for Visual Studio Code and 50+ apps</span> - <span id="ac44"><a href="https://marketplace.visualstudio.com/items?itemName=gerane.Theme-OceanicNext" class="markup--anchor markup--li-anchor">Oceanic Next Theme</a></span> - <span id="4e19"><a href="https://github.com/sdras/night-owl-vscode-theme" class="markup--anchor markup--li-anchor">🌌 Night Owl</a>: A VS Code dark theme for contrast for nighttime coding</span> - <span id="abe8"><a href="https://marketplace.visualstudio.com/items?itemName=arcticicestudio.nord-visual-studio-code" class="markup--anchor markup--li-anchor">Nord</a></span> - <span id="326e"><a href="https://vscodethemes.com/" class="markup--anchor markup--li-anchor">VSCodeThemes</a></span> - <span id="f947"><a href="https://github.com/mjswensen/themer" class="markup--anchor markup--li-anchor">themer</a>: 🎨 themer takes a set of colors and generates themes for your apps (editors, terminals, wallpapers, and more)</span> ### Regular expressions - <span id="07f8"><a href="https://regex101.com/" class="markup--anchor markup--li-anchor">Regex101</a>: Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript</span> ### If you found this guide helpful feel free to checkout my other articles: <a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b"><strong>A list of all of my articles to link to future posts</strong><br /> <em>You should probably skip this one… seriously it’s just for internal use!</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> ### OR GitHub/gists where I host similar content: <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ### Or Checkout my personal Resource Site: <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>Web-Dev-Resource-Hub</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [March 28, 2021](https://medium.com/p/fd686892b9eb). <a href="https://medium.com/@bryanguner/web-developer-resource-list-part-4-fd686892b9eb" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,232 @@ The Beginner’s Guide To JavaScript ================================== Part 1 ------------------------------------------------------------------------ ### The Beginner’s Guide To JavaScript #### Part 1 <figure><img src="https://cdn-images-1.medium.com/max/1200/1*Cg0j-L4ZHN7_5g2In-K-Ew.png" class="graf-image" /></figure> ### How to learn effectively **Learning**: The acquisition of skills and the ability to apply them in the future. **What makes an Effective learner?** - <span id="8498">They are active listeners.</span> - <span id="bc0a">They are engaged with the material.</span> - <span id="99d3">They are receptive of feedback.</span> - <span id="b615">They are open to difficulty.</span> **Why do active learning techniques feel difficult?** - <span id="9a75">It feels difficult because you are constantly receiving feedback, and so you are constantly adapting and perfecting the material.</span> **Desirable Difficulty** - <span id="3c8a">The skills we wish to obtain is often a difficult one.</span> - <span id="a83e">We want challenging but possible lessons based on current level of skill.</span> **Effective learners space their practice** - <span id="a7b3">Consistent effort > cramming => for **durable knowledge**</span> ------------------------------------------------------------------------ #### Here’s a REPL to practice with: <a href="https://replit.com/@bgoonz/lambda-prep#README.html" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://replit.com/@bgoonz/lambda-prep#README.html"><strong>lambda-prep</strong><br /> <em>pre-course-work</em>replit.com</a><a href="https://replit.com/@bgoonz/lambda-prep#README.html" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> ------------------------------------------------------------------------ <a href="https://lambda-prep.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://lambda-prep.netlify.app/"><strong>INTRO@JSWEB</strong><br /> <em>Resource-sharing-hub</em>lambda-prep.netlify.app</a><a href="https://lambda-prep.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> ------------------------------------------------------------------------ ### Hello World - <span id="d452">**console.log** : command used to print something onto the screen.</span> - <span id="99ad">**syntax** : the exact arrangement of the symbols, characters, and keywords in our code.</span> - <span id="a287">**//** : notation for creating a code comment in JS.</span> - <span id="e2e6">**code comment** : useful for annotating pieces of code to explain how something works, ignored by computer.</span> > ***“Simplicity is prerequisite for reliability.” — Edsger W. Dijkstra*** ------------------------------------------------------------------------ ### The Number Data Type The **number** data type in JS is used to represent any numerical values, including integers and decimal numbers. **Basic Arithmetic Operators** Operators are the symbols that perform particular operations. - <span id="b0ed">**+** (addition)</span> - <span id="53d9">**-** (subtraction)</span> - <span id="93f2">**asterisk** (multiplication)</span> - <span id="92d8">**/** (division)</span> - <span id="21c1">**%** (modulo)</span> JS evaluates more complex expressions using the general math order of operations aka PEMDAS. - <span id="d1a4">**PEMDAS** : Parentheses, Exponents, Multiplication, Division, Modulo, Addition, Subtraction.</span> - <span id="81a2">*To force a specific order of operation, use the group operator ( ) around a part of the expression.*</span> **Modulo** : Very useful operation to check divisibility of numbers, check for even & odd, whether a number is prime, and much more! *(Discrete Math concept, circular problems can be solved with modulo)* - <span id="20ad">Whenever you have a smaller number % a larger number, the answer will just be the initial small number.</span> - <span id="2fbf">`console.log(7 % 10); // => 7;`</span> ------------------------------------------------------------------------ ### The String Data Type The **string** data type is a primitive data type that used to represent textual data. - <span id="310e">can be wrapped by either **single** or **double** quotation marks, *best to choose one and stick with it for consistency*.</span> - <span id="664c">If your string contains quotation marks inside, can layer single or double quotation marks to allow it to work.</span> - <span id="46e7">`"That's a great string"; (valid)`</span> - <span id="4667">`'Shakespeare wrote, "To be or not to be"'; (valid)`</span> - <span id="9674">`'That's a bad string'; (invalid)`</span> - <span id="74cb">Alt. way to add other quotes within strings is to use template literals.</span> - <span id="caf5">`` `This is a temp'l'ate literal ${function}` // use ${} to invoke functions within. ``</span> - <span id="9144">**.length** : property that can be appended to data to return the length.</span> - <span id="afa8">empty strings have a length of zero.</span> - <span id="69ac">**indices** : indexes of data that begin at 0, can call upon index by using the bracket notation \[ \].</span> `console.log("bootcamp"[0]); // => "b"` `console.log("bootcamp"[10]); // => "undefined"` `console.log("boots"[1 * 2]); // => "o"` `console.log("boots"["boot".length - 1]); // => "t"` - <span id="cb8b">we can pass expressions through the brackets as well since JS always evaluates expressions first.</span> - <span id="a30f">The index of the last character of a string is always one less than it’s length.</span> - <span id="3080">**indexOf()** : method used to find the first index of a given character within a string.</span> - <span id="442d">`console.log("bagel".indexOf("b")); // => 0 console.log("bagel".indexOf("z")); // => -1`</span> - <span id="7ddd">if the character inside the indexOf() search does not exist in the string, the output will be -1.</span> - <span id="7e6a">the indexOf() search will return the first instanced index of the the char in the string.</span> - <span id="8729">**concatenate** : word to describe joining strings together into a single string.</span> ------------------------------------------------------------------------ ### The Boolean Data Type The **boolean** data type is the simplest data type since there are only two values: **true** and **false**. - <span id="fcde">**Logical Operators** (B*oolean Operators*) are used to establish logic in our code.</span> - <span id="bd34">**!** (not) : reverses a boolean value.</span> - <span id="bdba">`console.log(!true); // => false console.log(!!false); // => false`</span> - <span id="cc27">**&&** (and) **Truth Table**</span> <figure><img src="https://cdn-images-1.medium.com/max/800/1*Aw4iCm7-FQ7znEcBVH3FTw.png" class="graf-image" /></figure>- <span id="a087">**Logical Order of Operations** : JS will evaluate !, then &&, then ||.</span> - <span id="295f">**De Morgan’s Law** : Common mistake in boolean logic is incorrectly distributing ! across parentheses.</span> - <span id="7400">`!(A || B) === !A && !B; !(A && B) === !A || !B;`</span> - <span id="26c2">In summary, to correctly distribute ! across parentheses we must also flip the operation within.</span> - <span id="a8c1">**Short-Circuit Evaluation** : Because JS evalutes from left to right, expressions can “short-circuit”. For example if we have true on the left of an || logical comparison, it will stop evaluating and yield true instead of wasting resources on processing the rest of the statement.</span> - <span id="58a3">`console.log(true || !false); // => stops after it sees "true ||"`</span> ------------------------------------------------------------------------ ### Comparison Operators All comparison operators will result in a boolean output. **The relative comparators** - <span id="0e52">**>** (greater than)</span> - <span id="f979">**<** (less than)</span> - <span id="73da">**>=** (greater than or equal to)</span> - <span id="1620">**<=** (less than or equal to)</span> - <span id="fb41">**===** (equal to)</span> - <span id="0fd1">**!==** (not equal to)</span> > *Fun Fact: “a” < “b” is considered valid JS Code because string comparisons are compared lexicographically (meaning dictionary order), so “a” is less than “b” because it appears earlier!* > *If there is ever a standstill comparison of two string lexicographically (i.e. app vs apple) the comparison will deem the shorter string lesser.* **Difference between == and ===** - <span id="8cc0">**===** : Strict Equality, will only return true if the two comparisons are entirely the same.</span> - <span id="b25c">**==** : Loose Equality, will return true even if the values are of a different type, due to coercion. (Avoid using this)</span> ------------------------------------------------------------------------ ### Variables Variables are used to store information to be referenced and manipulated in a program. - <span id="e2b7">We initialize a variable by using the **let** keyword and a **=** single equals sign (assignment operator).</span> - <span id="e03b">`let bootcamp = "Lambda"; console.log(bootcamp); // "Lambda"`</span> - <span id="2e71">JS variable names can contain any alphanumeric characters, underscores, or dollar signs (cannot being with a number).</span> - <span id="6ab7">If you do not declare a value for a variable, undefined is automatically set.</span> - <span id="0c6f">`let bootcamp; console.log(bootcamp); // undefined`</span> - <span id="1f9a">We can change the value of a previously declared variable (let, not const) by re-assigning it another value.</span> - <span id="9e00">**let** is the updated version of **var**; there are some differences in terms of hoisting and global/block scope — will be covered later in the course (common interview question!)</span> **Assignment Shorthand** let num = 0; num += 10; // same as num = num + 10 num -= 2; // same as num = num - 2 num /= 4; // same as num = num / 4 num *= 7; // same as num = num * 7 - <span id="ab22">In general, any nonsensical arithmetic will result in **NaN** ; usually operations that include undefined.</span> - <span id="22c2">**declaration** : process of simply introducing a variable name.</span> - <span id="caeb">**initialization** : process of both declaring and assigning a variable on the same line.</span> ------------------------------------------------------------------------ ### Functions A function is a procedure of code that will run when called. Functions are used so that we do not have to rewrite code to do the same thing over and over. (Think of them as ‘subprograms’) - <span id="4c89">**Function Declaration** : Process when we first initially write our function.</span> - <span id="d3fe">Includes three things:</span> - <span id="b57c">Name of the function.</span> - <span id="dfea">A list of *parameters* ()</span> - <span id="da88">The code to execute {}</span> - <span id="8eb3">**Function Calls** : We can call upon our function whenever and wherever\* we want. (\*wherever is only after the initial declaration)</span> - <span id="cb1d">JS evaluates code top down, left to right.</span> - <span id="9cb4">When we execute a declared function later on in our program we refer to this as **invoking** our function.</span> - <span id="fde3">Every function in JS returns undefined unless otherwise specified.</span> - <span id="059e">When we hit a **return** statement in a function we immediately exit the function and return to where we called the function.</span> - <span id="d906">When naming functions in JS always use camelCase and name it something appropriate. > Greate code reads like English and almost explains itself. Think: Elegant, readable, and maintainable!</span> ------------------------------------------------------------------------ ### Parameters and Arguments - <span id="eb19">**Parameters** : Comma seperated variables specified as part of a function’s declaration.</span> - <span id="6abb">**Arguments** : Values passed to the function when it is invoked.</span> - <span id="ab31">*If the number of arguments passed during a function invocation is different than the number of parameters listed, it will still work.*</span> - <span id="12ee">However, is there are not enough arguments provided for parameters our function will likely yield **Nan**.</span> #### Further resources: <a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b"><strong>A list of all of my articles to link to future posts</strong><br /> <em>You should probably skip this one… seriously it’s just for internal use!</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> *More content at* <a href="https://plainenglish.io/" class="markup--anchor markup--p-anchor"><strong><em>plainenglish.io</em></strong></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [April 4, 2021](https://medium.com/p/e222d166b6e1). <a href="https://medium.com/@bryanguner/absolute-beginners-guide-to-javascript-part-1-e222d166b6e1" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,246 @@ Objects in Javascript ===================== Codepen with examples for you to practice with below! ------------------------------------------------------------------------ ### Objects in Javascript #### Codepen with examples for you to practice with below! <figure><img src="https://cdn-images-1.medium.com/max/800/1*F_xu5P1BJ300C3OixplWNA.png" class="graf-image" /></figure>### The Object Type The `object` is a data structure that stores other data, similar to how an array stores elements. Javascript simple types: - <span id="5a44">numbers *(has object-like methods but they are immutable)*</span> - <span id="8cd7">strings *(has object-like methods but they are immutable)*</span> - <span id="7ed9">booleans *(has object-like methods but they are immutable)*</span> - <span id="420c">null</span> - <span id="b51f">undefined</span> All other values are *objects* including arrays and functions. Objects are class free, can contain other objects and can inherit properties from their prototypes (which can *reduce object initialisation time and memory consumption*). In other programming languages, objects are referred to as, “dictionaries”, “maps”, or “associative arrays”. - <span id="2839">Objects are indexed with `keys` instead of numbers.</span> - <span id="faa0">Order is not guaranteed within an Object.</span> - <span id="4575">Objects are defined by using curly braces `{}`</span> - <span id="0c11">You can think of Objects as tables.</span> > *Fun Fact: Objects are affectionately known as POJO’s (Plain Old Javascript Objects)* **Setting Keys and Values** - <span id="2d68">If we try to access a key that has not yet been assigned within an object we will output undefined.</span> - <span id="f945">The **preferred method** for checking to see if an object exists at a key is to use the operator.</span> **Using Variables as Keys** ### Using Different Notations **Bracket Notation vs Dot Notation** Easier To Read You can use variables as keys! Easier To Write b/c do not need Quotations. Okay to use variables and Strings that start with numbers. Cannot access with Variables Keys cannot contain numbers as their first character - <span id="7b34">**When accessing object keys**: Bracket notation needs to refer to that key in quotations, dot notation doesn’t.</span> - <span id="9e11">**When accessing object keys via a variable**: Bracket notation can refer to that key w/o use of quotations, dot notation can’t do this at all.</span> **Putting it All Together** You can put an object together in a single statement. **Operator Precedence Revisited** ### Iterating Through Objects Because objects store ***unordered*** key-value pairs, we do not rely on indices to access values; instead we rely on our keys. **Methods vs Functions** A is a function that *belongs* to an object. Every method is a function, but *not* every function is a method. **Useful Object Methods** - <span id="b0e3">`Object.keys()` : A method that allows us to iterate through keys, it accepts an obj as the argument and returns an array of the keys.</span> - <span id="7fbd">`Object.values()` : Method that accepts an object as the argument and returns an array of the values.</span> **Iterating through an Object’s keys & values** ### References vs Primitives **Primitives vs Objects** So far we have learned about 6 different data types: - <span id="5918">**Primitive** : Boolean, Null, Undefined, Number, String.</span> - <span id="d57e">**Reference** : Object (Arrays are a type of object)</span> - <span id="f915">Remember that **primitive** types are immutable!</span> **Immutability** - <span id="85e1">When we reassign primitives we simply have our variable point elsewhere in memory.</span> - <span id="ae03">In a nutshell, **immutability** cannot change values in memory, but only reassign where our variables are pointing to.</span> **Mutability** ### Rest and Spread **Using the Spread Operator and Rest Parameter Syntax** **Accepting Arguments** - <span id="5f1f">Just keep in mind that function will still run even if it is not passed any arguments.</span> - <span id="e494">Parameters will take just as many arguments they need even if more than enough are offered.</span> - <span id="f2c8">We will encounter an error if there are not enough parameters ( > 0).</span> **Utilizing Rest Parameters** - <span id="e9b5">`Rest Parameter Syntax` : Allows us to capture all of a function's incoming arguments into an array.</span> - <span id="f072">Only the last parameter can be a rest parameter.</span> **Utilizing Spread Syntax** - <span id="347a">Takes a data type (i.e. array, obj) and spreads the values of that type where elements are expected.</span> - <span id="4612">Takes iterable data and spreads the elements of that type where arguments are expected.</span> ### Destructuring **Swapping Variables using destructuring** **Destructuring objects into variables** **Destructuring and the Rest Pattern** ### Destructuring Parameters We can also destructure **incoming parameters** of a function. This is very useful when we’re passing objects around to different functions. ------------------------------------------------------------------------ ### Object Literals - <span id="b0a3">An object literal is *zero or more comma-separated name/value pairs surrounded by curly braces* {}</span> <!-- --> let empty_object = {}; let today = { day: "Wednesday", month: "April", year: 2014, weather: { //objects can contain nested objects like this one morning: "sunny", afternoon: "cloudy" } } ### Retrieval - <span id="ee43">Can be done with either dot notation `today.weather.morning` or with square brackets `today['month']`</span> - <span id="d7ae">Or operand (||) can be used to fill in default values for nonexistent data to prevent and *undefined* error: `var weath = today.weather.evening || "unknown"`</span> ### Update - <span id="2d21">Assigning a property value to an object overwrites any existing property values with that property name</span> ### Reference - <span id="413d">Objects refer to each other, they don’t hold duplicate copies of data</span> ### Prototype - <span id="b567">Every object has a prototype object from which it inherits properties</span> - <span id="943e">*Object.prototype* comes standard with Javascript and is almost like a ‘root parent’</span> <figure><img src="https://cdn-images-1.medium.com/max/800/0*1MKtZt0a5gREie59" class="graf-image" /></figure>- <span id="2293">The `Object.create` method is now available in ES5 (but the method is in the book if required for older versions)</span> - <span id="5001">If an object does not have a property you ask it for, it will keep looking up the prototype chain until it finds it</span> - <span id="abaf">If the property *does note exist* anywhere in the chain, it will return *undefined*</span> - <span id="03eb">A new property is *immediately visible* to all of the objects below it in the chain once created</span> More details in <a href="https://github.com/Lambda-April/Unsorted-Notes/blob/main" class="markup--anchor markup--p-anchor">Chapter 6</a> ### Reflection - <span id="60ed">Determining what properties an object has</span> - <span id="a00d">Using `typeof` includes all properties in the prototype chain including functions</span> - <span id="4365">To avoid inherited properties, use `hasOwnProperty(type);` which returns *true* if that property exists only in that object itself (not the chain)</span> <!-- --> today.hasOwnProperty(‘number’) //will return true today.hasOwnProperty(‘constructor’) //will return false ### Enumeration - <span id="ce3f">Best way to enumerate all the properties you want is a for loop:</span> <!-- --> let i; let properties = [ ‘day’, ‘month’, ‘year’ ]; for (i = 0; i < properties.length; i++) { document.writeIn(properties[i] + ‘:’ + today[properties[i]]); } - <span id="5d1f">This ensures you get the properties you want (i.e. not up the prototype chain) and in the order you want, as opposed to a *for in* loop which achieves neither of these</span> ### Delete - <span id="546d">Removes property from object, but also reveals property from further up the prototype chain if it exists</span> - <span id="9258">Format: `delete today.month`</span> ### Global Abatement - <span id="5b97">One way to mitigate the risks of global variables is to *create a single global variable* which then contains your whole application</span> <!-- --> let MYAPP = {} MYAPP.today = { day: "Wednesday", month: "April", year: 2014, weather: { //objects can contain nested objects like this one morning: "sunny", afternoon: "cloudy" } } //Making sure all other variables (like today) are contained within this one global variable (MYAPP) means none of them have global scope and therefore the risk of naming conflicts, etc in your application is reduced #### Further resources: <a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b"><strong>A list of all of my articles to link to future posts</strong><br /> <em>You should probably skip this one… seriously it’s just for internal use!</em>bryanguner.medium.com</a><a href="https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> <a href="https://gist.github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://gist.github.com/bgoonz"><strong>bgoonz’s gists</strong><br /> <em>Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…</em>gist.github.com</a><a href="https://gist.github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz — Overview</strong><br /> <em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://web-dev-resource-hub.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://web-dev-resource-hub.netlify.app/"><strong>Web-Dev-Resource-Hub</strong><br /> <em>Edit description</em>web-dev-resource-hub.netlify.app</a><a href="https://web-dev-resource-hub.netlify.app/" class="js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [April 15, 2021](https://medium.com/p/cc578a781e1d). <a href="https://medium.com/@bryanguner/objects-in-javascript-cc578a781e1d" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,51 @@ How To Implement Native(ES6) Data Structures Using Arrays & Objects =================================================================== Smart data structures and dumb code works better than the other way around -“Eric S. Raymond” ------------------------------------------------------------------------ ### How To Implement Native(ES6) Data Structures Using Arrays & Objects <a href="https://www.azquotes.com/quote/636065?ref=data-structures" class="markup--anchor markup--p-anchor">Smart data structures and dumb code works better than the other way around</a> <a href="https://twitter.com/esrtweet?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" class="markup--anchor markup--p-anchor"><strong>-“Eric S. Raymond”</strong></a> <figure><img src="https://cdn-images-1.medium.com/max/600/0*ZBBOzoXj5SgXtZb7.png" alt="https://data-flair.training/blogs/javascript-data-structures/" class="graf-image" /><figcaption><a href="https://data-flair.training/blogs/javascript-data-structures/" class="markup--anchor markup--figure-anchor">https://data-flair.training/blogs/javascript-data-structures/</a></figcaption></figure>#### *Abstract Data type (ADT) is a type (or class) for objects whose behavior is* #### *defined by a set of value and a set of operations. The definition of ADT only mentions what operations are to be performed but not how these operations will be implemented.* > <a href="https://stackoverflow.com/a/31113335/15158587" class="markup--anchor markup--blockquote-anchor">Abstract Data Type(ADT) is a data type, where only behavior is defined but not implementation.</a> > <a href="https://stackoverflow.com/a/31113335/15158587" class="markup--anchor markup--blockquote-anchor">Opposite of ADT is Concrete Data Type (CDT), where it contains an implementation of ADT.</a> > **Examples:** > `Array, List, Map, Queue, Set, Stack, Table, Tree, and Vector` are ADTs. Each of these ADTs has many implementations i.e. CDT. The container is a high-level ADT of above all ADTs. > **Real life example:** > book is Abstract (Telephone Book is an implementation) <figure><img src="https://cdn-images-1.medium.com/max/800/0*mAq2n01VTypXYWh0.jpg" class="graf-image" /></figure><a href="https://stackoverflow.com/a/65771454/15158587" class="markup--anchor markup--p-anchor">Abstract data types, commonly abbreviated ADTs, are a way of classifying data structures based on how they are used and the behaviors they provide.</a> They do not specify how the data structure must be implemented or laid out in memory, but simply provide a minimal expected interface and set of behaviors. For example, a stack is an abstract data type that specifies a linear data structure with LIFO (last in, first out) behavior. Stacks are commonly implemented using arrays or linked lists, but a needlessly complicated implementation using a binary search tree is still a valid implementation. To be clear, it is incorrect to say that stacks are arrays or vice versa. An array can be used as a stack. Likewise, a stack can be implemented using an array. Since abstract data types don’t specify an implementation, this means it’s also incorrect to talk about the time complexity of a given abstract data type. An associative array may or may not have O(1) average search times. An associative array that is implemented by a hash table does have O(1) average search times. Further Reading: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections#map_object" class="markup--anchor markup--p-anchor">Keyed collections — JavaScript | MDN (mozilla.org)</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#class-based_vs._prototype-based_languages" class="markup--anchor markup--p-anchor">Details of the object model — JavaScript | MDN (mozilla.org)</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set" class="markup--anchor markup--p-anchor">Set — JavaScript | MDN (mozilla.org)</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" class="markup--anchor markup--p-anchor">Map — JavaScript | MDN (mozilla.org)</a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures" class="markup--anchor markup--p-anchor">JavaScript data types and data structures — JavaScript | MDN (mozilla.org)</a> ### For more content… go to : <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz - Overview</strong><br /> <em>Web Developer, Electrical Engineer https://bryanguner.medium.com/ https://portfolio42.netlify.app/…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 15, 2021](https://medium.com/p/ce953b9f6a07). <a href="https://medium.com/@bryanguner/how-to-implement-native-es6-data-structures-using-arrays-objects-ce953b9f6a07" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,64 @@ These Are The Bash Shell Commands That Stand Between Me And Insanity ==================================================================== I will not profess to be a bash shell wizard… but I have managed to scour some pretty helpful little scripts from Stack Overflow and modify… ------------------------------------------------------------------------ ### These Are The Bash Shell Commands That Stand Between Me And Insanity #### I will not profess to be a bash shell wizard… but I have managed to scour some pretty helpful little scripts from Stack Overflow and modify them to suit my needs. <figure><img src="https://cdn-images-1.medium.com/max/800/0*R_oz3NR6AD6EIp5d" alt="Photo by George Girnas on Unsplash" class="graf-image" /><figcaption>Photo by <a href="https://unsplash.com/@amfiloxia_68?utm_source=medium&utm_medium=referral" class="markup--anchor markup--figure-anchor">George Girnas</a> on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral" class="markup--anchor markup--figure-anchor">Unsplash</a></figcaption></figure>All of these commands are for Ubuntu/WSL … some may work in other scenarios but I can’t guarantee it. > *As of this writing I have about 120 more bash snippets I regularly use… I am not writing the whole article right now but I wanted to get it started so I feel obligated to finish it!* ### Recursive Unzip followed by recursive delete zip: ### Remove spaces from file and folder names ### Find and replace in string/folder names find . -type f -exec rename ‘s/string1/string2/g’ {} + ### Remove numbers from file names find $dir -type f | sed ‘s|\(.*/\)[^A-Z]*\([A-Z].*\)|mv \”&\” \”\1\2\”|’ | sh ### Delete files within size range ( for when GitHub cries about file size): find . -size +386b -a -size -390b -exec rm -f {} \; ### Create symbolic link to working directory ln -s “$(pwd)” ~/mylink ### **Remove any traces of a git repository:** find . \( -name “.git” -o -name “.gitignore” -o -name “.gitmodules” -o -name “.gitattributes” \) -exec rm -rf — {} + ### Replace spaces in filenames with underscores for file in *; do mv “$file” `echo $file | tr ‘ ‘ ‘_’` ; done ### Remove Empty Files and Folders: find . -empty -type f -print -delete find . -empty -type d -print -delete ***or*** find . -depth -exec rmdir {} \; ### Autogenerate a navigable HTML directory for all the files in the current working directory you exicute the script in: ### For more content… go to : <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz - Overview</strong><br /> <em>Web Developer, Electrical Engineer https://bryanguner.medium.com/ https://portfolio42.netlify.app/…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 15, 2021](https://medium.com/p/984865ba5d1b). <a href="https://medium.com/@bryanguner/these-are-the-bash-shell-commands-that-stand-between-me-and-insanity-984865ba5d1b" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,234 @@ LocalStorage VS SessionStorage ============================== Web storage objects localStorage and sessionStorage allow to save key/value pairs in the browser. ------------------------------------------------------------------------ ### LocalStorage VS SessionStorage Web storage objects `localStorage` and `sessionStorage` allow to save key/value pairs in the browser. <figure><img src="https://cdn-images-1.medium.com/max/800/0*sJFEUTv2t9DsmpE2" class="graf-image" /></figure>What’s interesting about them is that the data survives a page refresh (for `sessionStorage`) and even a full browser restart (for `localStorage`). We'll see that very soon. <figure><img src="https://cdn-images-1.medium.com/max/800/0*NL5JYJqGcyQ7Q16P.png" class="graf-image" /></figure>We already have cookies. Why additional objects? - <span id="ceb3">Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most browsers allow at least 2 megabytes of data (or more) and have settings to configure that.</span> - <span id="bff4">Also unlike cookies, the server can’t manipulate storage objects via HTTP headers. Everything’s done in JavaScript.</span> - <span id="ac8e">The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can’t access data from each other.</span> Both storage objects provide same methods and properties: - <span id="63b8">`setItem(key, value)` -- store key/value pair.</span> - <span id="72e2">`getItem(key)` -- get the value by key.</span> - <span id="848a">`removeItem(key)` -- remove the key with its value.</span> - <span id="b51e">`clear()` -- delete everything.</span> - <span id="7c98">`key(index)` -- get the key on a given position.</span> - <span id="ef56">`length` -- the number of stored items.</span> As you can see, it’s like a `Map` collection (`setItem/getItem/removeItem`), but also allows access by index with `key(index)`. Let’s see how it works. ### localStorage demo The main features of `localStorage` are: - <span id="73ee">Shared between all tabs and windows from the same origin.</span> - <span id="fc86">The data does not expire. It remains after the browser restart and even OS reboot.</span> For instance, if you run this code… localStorage.setItem('test', 1); …And close/open the browser or just open the same page in a different window, then you can get it like this: alert( localStorage.getItem('test') ); // 1 We only have to be on the same origin (domain/port/protocol), the url path can be different. The `localStorage` is shared between all windows with the same origin, so if we set the data in one window, the change becomes visible in another one. ### Object-like access We can also use a plain object way of getting/setting keys, like this: // set key localStorage.test = 2; // get key alert( localStorage.test ); // 2 // remove key delete localStorage.test; That’s allowed for historical reasons, and mostly works, but generally not recommended, because: 1. <span id="c7fb">If the key is user-generated, it can be anything, like `length` or `toString`, or another built-in method of `localStorage`. In that case `getItem/setItem` work fine, while object-like access fails:</span> <!-- --> let key = ‘length’; localStorage[key] = 5; // Error, can’t assign length 1. <span id="3020">There’s a `storage` event, it triggers when we modify the data. That event does not happen for object-like access. We'll see that later in this chapter.</span> ### Looping over keys As we’ve seen, the methods provide “get/set/remove by key” functionality. But how to get all saved values or keys? Unfortunately, storage objects are not iterable. One way is to loop over them as over an array: for(let i=0; i<localStorage.length; i++) { let key = localStorage.key(i); alert(`${key}: ${localStorage.getItem(key)}`); } Another way is to use `for key in localStorage` loop, just as we do with regular objects. It iterates over keys, but also outputs few built-in fields that we don’t need: // bad try for(let key in localStorage) { alert(key); // shows getItem, setItem and other built-in stuff } …So we need either to filter fields from the prototype with `hasOwnProperty` check: for(let key in localStorage) { if (!localStorage.hasOwnProperty(key)) { continue; // skip keys like "setItem", "getItem" etc } alert(`${key}: ${localStorage.getItem(key)}`); } …Or just get the “own” keys with `Object.keys` and then loop over them if needed: let keys = Object.keys(localStorage); for(let key of keys) { alert(`${key}: ${localStorage.getItem(key)}`); } The latter works, because `Object.keys` only returns the keys that belong to the object, ignoring the prototype. ### Strings only Please note that both key and value must be strings. If were any other type, like a number, or an object, it gets converted to string automatically: sessionStorage.user = {name: "John"}; alert(sessionStorage.user); // [object Object] We can use `JSON` to store objects though: sessionStorage.user = JSON.stringify({name: "John"}); // sometime later let user = JSON.parse( sessionStorage.user ); alert( user.name ); // John Also it is possible to stringify the whole storage object, e.g. for debugging purposes: // added formatting options to JSON.stringify to make the object look nicer alert( JSON.stringify(localStorage, null, 2) ); ### sessionStorage The `sessionStorage` object is used much less often than `localStorage`. Properties and methods are the same, but it’s much more limited: - <span id="94a1">The `sessionStorage` exists only within the current browser tab.</span> - <span id="c149">Another tab with the same page will have a different storage.</span> - <span id="9a82">But it is shared between iframes in the same tab (assuming they come from the same origin).</span> - <span id="c0d7">The data survives page refresh, but not closing/opening the tab.</span> Let’s see that in action. Run this code… sessionStorage.setItem('test', 1); …Then refresh the page. Now you can still get the data: alert( sessionStorage.getItem('test') ); // after refresh: 1 …But if you open the same page in another tab, and try again there, the code above returns `null`, meaning "nothing found". That’s exactly because `sessionStorage` is bound not only to the origin, but also to the browser tab. For that reason, `sessionStorage` is used sparingly. ### Storage event When the data gets updated in `localStorage` or `sessionStorage`, <a href="https://www.w3.org/TR/webstorage/#the-storage-event" class="markup--anchor markup--p-anchor">storage</a> event triggers, with properties: - <span id="9c38">`key` – the key that was changed (`null` if `.clear()` is called).</span> - <span id="1cd8">`oldValue` – the old value (`null` if the key is newly added).</span> - <span id="df18">`newValue` – the new value (`null` if the key is removed).</span> - <span id="bda8">`url` – the url of the document where the update happened.</span> - <span id="cb21">`storageArea` – either `localStorage` or `sessionStorage` object where the update happened.</span> The important thing is: the event triggers on all `window` objects where the storage is accessible, except the one that caused it. Let’s elaborate. Imagine, you have two windows with the same site in each. So `localStorage` is shared between them. You might want to open this page in two browser windows to test the code below. If both windows are listening for `window.onstorage`, then each one will react on updates that happened in the other one. // triggers on updates made to the same storage from other documents window.onstorage = event => { // same as window.addEventListener('storage', event => { if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); }; localStorage.setItem('now', Date.now()); Please note that the event also contains: `event.url` -- the url of the document where the data was updated. Also, `event.storageArea` contains the storage object -- the event is the same for both `sessionStorage` and `localStorage`, so `event.storageArea` references the one that was modified. We may even want to set something back in it, to "respond" to a change. **That allows different windows from the same origin to exchange messages.** Modern browsers also support Broadcast channel API, the special API for same-origin inter-window communication, it’s more full featured, but less supported. There are libraries that polyfill that API, based on `localStorage`, that make it available everywhere. ### Summary Web storage objects `localStorage` and `sessionStorage` allow to store key/value in the browser. - <span id="33af">Both `key` and `value` must be strings.</span> - <span id="148d">The limit is 5mb+, depends on the browser.</span> - <span id="acca">They do not expire.</span> - <span id="78c6">The data is bound to the origin (domain/port/protocol).</span> `localStoragesessionStorage` > Shared between all tabs and windows with the same originVisible within a browser tab, including iframes from the same origin > Survives browser restartSurvives page refresh (but not tab close) API: - <span id="14d9">`setItem(key, value)` -- store key/value pair.</span> - <span id="519b">`getItem(key)` -- get the value by key.</span> - <span id="09a8">`removeItem(key)` -- remove the key with its value.</span> - <span id="4d2e">`clear()` -- delete everything.</span> - <span id="68ca">`key(index)` -- get the key number `index`.</span> - <span id="e125">`length` -- the number of stored items.</span> - <span id="a33a">Use `Object.keys` to get all keys.</span> - <span id="29fb">We access keys as object properties, in that case `storage` event isn't triggered.</span> Storage event: - <span id="fdbd">Triggers on `setItem`, `removeItem`, `clear` calls.</span> - <span id="c3ea">Contains all the data about the operation (`key/oldValue/newValue`), the document `url` and the storage object `storageArea`.</span> - <span id="a8dd">Triggers on all `window` objects that have access to the storage except the one that generated it (within a tab for `sessionStorage`, globally for `localStorage`).</span> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 18, 2021](https://medium.com/p/d196a20099a5). <a href="https://medium.com/@bryanguner/css-animations-d196a20099a5" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,279 @@ Scheduling: setTimeout and setInterval ====================================== We may decide to execute a function not right now, but at a later time. That’s called “scheduling a call”. ------------------------------------------------------------------------ ### Scheduling: setTimeout and setInterval We may decide to execute a function not right now, but at a later time. That’s called “scheduling a call”. <figure><img src="https://cdn-images-1.medium.com/max/800/0*EnCk0hh8R6B290EH.gif" class="graf-image" /></figure>There are two methods for it: - <span id="4106">`setTimeout` allows us to run a function once after the interval of time.</span> - <span id="333d">`setInterval` allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval.</span> These methods are not a part of JavaScript specification. But most environments have an internal scheduler and provide these methods. In particular, they are supported in all browsers and Node.js. ### setTimeout The syntax: let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...) Parameters: `func|code`: Function or a string of code to execute. Usually, that's a function. For historical reasons, a string of code can be passed, but that's not recommended. `delay`: The delay before running, in milliseconds (1000 ms = 1 second), by default 0. `arg1`, `arg2`: Arguments for the function (not supported in IE9-) For instance, this code calls `sayHi()` after one second: function sayHi() { alert('Hello'); } *!* setTimeout(sayHi, 1000); */!* With arguments: function sayHi(phrase, who) { alert( phrase + ', ' + who ); } *!* setTimeout(sayHi, 1000, "Hello", "John"); // Hello, John */!* If the first argument is a string, then JavaScript creates a function from it. So, this will also work: setTimeout("alert('Hello')", 1000); But using strings is not recommended, use arrow functions instead of them, like this: setTimeout(() => alert('Hello'), 1000); Novice developers sometimes make a mistake by adding brackets `()` after the function: ```js // wrong! setTimeout(sayHi(), 1000); ``` That doesn't work, because `setTimeout` expects a reference to a function. And here `sayHi()` runs the function, and the *result of its execution* is passed to `setTimeout`. In our case the result of `sayHi()` is `undefined` (the function returns nothing), so nothing is scheduled. ### Canceling with clearTimeout A call to `setTimeout` returns a "timer identifier" `timerId` that we can use to cancel the execution. The syntax to cancel: let timerId = setTimeout(...); clearTimeout(timerId); In the code below, we schedule the function and then cancel it (changed our mind). As a result, nothing happens: let timerId = setTimeout(() => alert("never happens"), 1000); alert(timerId); // timer identifier clearTimeout(timerId); alert(timerId); // same identifier (doesn't become null after canceling) As we can see from `alert` output, in a browser the timer identifier is a number. In other environments, this can be something else. For instance, Node.js returns a timer object with additional methods. Again, there is no universal specification for these methods, so that’s fine. For browsers, timers are described in the <a href="https://www.w3.org/TR/html5/webappapis.html#timers" class="markup--anchor markup--p-anchor">timers section</a> of HTML5 standard. ### setInterval The `setInterval` method has the same syntax as `setTimeout`: let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...) All arguments have the same meaning. But unlike `setTimeout` it runs the function not only once, but regularly after the given interval of time. To stop further calls, we should call `clearInterval(timerId)`. The following example will show the message every 2 seconds. After 5 seconds, the output is stopped: // repeat with the interval of 2 seconds let timerId = setInterval(() => alert('tick'), 2000); // after 5 seconds stop setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000); \`\`\`smart header = “Time goes on while `alert` is shown” In most browsers, including Chrome and Firefox, the internal timer continues "ticking" while showing `alert/confirm/prompt`. So if you run the code above and don’t dismiss the `alert` window for some time, then the next `alert` will be shown immediately as you do it. The actual interval between alerts will be shorter than 2 seconds. ## Nested setTimeout <p class="mume-header " id="nested-settimeout"></p> There are two ways of running something regularly. One is `setInterval`. The other one is a nested `setTimeout`, like this: ```js /** instead of: let timerId = setInterval(() => alert('tick'), 2000); */ let timerId = setTimeout(function tick() { alert('tick'); *!* timerId = setTimeout(tick, 2000); // (*) */!* }, 2000); The `setTimeout` above schedules the next call right at the end of the current one `(*)`. The nested `setTimeout` is a more flexible method than `setInterval`. This way the next call may be scheduled differently, depending on the results of the current one. For instance, we need to write a service that sends a request to the server every 5 seconds asking for data, but in case the server is overloaded, it should increase the interval to 10, 20, 40 seconds… Here’s the pseudocode: let delay = 5000; let timerId = setTimeout(function request() { ...send request... if (request failed due to server overload) { // increase the interval to the next run delay *= 2; } timerId = setTimeout(request, delay); }, delay); And if the functions that we’re scheduling are CPU-hungry, then we can measure the time taken by the execution and plan the next call sooner or later. **Nested** `setTimeout` **allows to set the delay between the executions more precisely than** `setInterval`**.** Let’s compare two code fragments. The first one uses `setInterval`: let i = 1; setInterval(function() { func(i++); }, 100); The second one uses nested `setTimeout`: let i = 1; setTimeout(function run() { func(i++); setTimeout(run, 100); }, 100); For `setInterval` the internal scheduler will run `func(i++)` every 100ms: Did you notice? **The real delay between** `func` **calls for** `setInterval` **is less than in the code!** That’s normal, because the time taken by `func`'s execution "consumes" a part of the interval. It is possible that `func`'s execution turns out to be longer than we expected and takes more than 100ms. In this case the engine waits for `func` to complete, then checks the scheduler and if the time is up, runs it again *immediately*. In the edge case, if the function always executes longer than `delay` ms, then the calls will happen without a pause at all. And here is the picture for the nested `setTimeout`: **The nested** `setTimeout` **guarantees the fixed delay (here 100ms).** That’s because a new call is planned at the end of the previous one. When a function is passed in `setInterval/setTimeout`, an internal reference is created to it and saved in the scheduler. It prevents the function from being garbage collected, even if there are no other references to it. ```js // the function stays in memory until the scheduler calls it setTimeout(function() {...}, 100); ``` For `setInterval` the function stays in memory until `clearInterval` is called. There's a side-effect. A function references the outer lexical environment, so, while it lives, outer variables live too. They may take much more memory than the function itself. So when we don't need the scheduled function anymore, it's better to cancel it, even if it's very small. ### Zero delay setTimeout There’s a special use case: `setTimeout(func, 0)`, or just `setTimeout(func)`. This schedules the execution of `func` as soon as possible. But the scheduler will invoke it only after the currently executing script is complete. So the function is scheduled to run “right after” the current script. For instance, this outputs “Hello”, then immediately “World”: setTimeout(() => alert("World")); alert("Hello"); The first line “puts the call into calendar after 0ms”. But the scheduler will only “check the calendar” after the current script is complete, so `"Hello"` is first, and `"World"` -- after it. There are also advanced browser-related use cases of a zero-delay timeout, that we’ll discuss in the chapter info:event-loop. In the browser, there's a limitation of how often nested timers can run. The [HTML5 standard](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers) says: "after five nested timers, the interval is forced to be at least 4 milliseconds.". Let's demonstrate what it means with the example below. The `setTimeout` call in it re-schedules itself with zero delay. Each call remembers the real time from the previous one in the `times` array. What do the real delays look like? Let's see: ```js run let start = Date.now(); let times = []; setTimeout(function run() { times.push(Date.now() - start); // remember delay from the previous call if (start + 100 < Date.now()) alert(times); // show the delays after 100ms else setTimeout(run); // else re-schedule }); // an example of the output: // 1,1,1,1,9,15,20,24,30,35,40,45,50,55,59,64,70,75,80,85,90,95,100 ``` First timers run immediately (just as written in the spec), and then we see `9, 15, 20, 24...`. The 4+ ms obligatory delay between invocations comes into play. The similar thing happens if we use `setInterval` instead of `setTimeout`: `setInterval(f)` runs `f` few times with zero-delay, and afterwards with 4+ ms delay. That limitation comes from ancient times and many scripts rely on it, so it exists for historical reasons. For server-side JavaScript, that limitation does not exist, and there exist other ways to schedule an immediate asynchronous job, like [setImmediate](https://nodejs.org/api/timers.html#timers_setimmediate_callback_args) for Node.js. So this note is browser-specific. ### Summary - <span id="4074">Methods `setTimeout(func, delay, ...args)` and `setInterval(func, delay, ...args)` allow us to run the `func` once/regularly after `delay` milliseconds.</span> - <span id="6249">To cancel the execution, we should call `clearTimeout/clearInterval` with the value returned by `setTimeout/setInterval`.</span> - <span id="af18">Nested `setTimeout` calls are a more flexible alternative to `setInterval`, allowing us to set the time *between* executions more precisely.</span> - <span id="06e2">Zero delay scheduling with `setTimeout(func, 0)` (the same as `setTimeout(func)`) is used to schedule the call "as soon as possible, but after the current script is complete".</span> - <span id="5393">The browser limits the minimal delay for five or more nested calls of `setTimeout` or for `setInterval` (after 5th call) to 4ms. That's for historical reasons.</span> Please note that all scheduling methods do not *guarantee* the exact delay. For example, the in-browser timer may slow down for a lot of reasons: - <span id="e3b2">The CPU is overloaded.</span> - <span id="2aed">The browser tab is in the background mode.</span> - <span id="116d">The laptop is on battery.</span> All that may increase the minimal timer resolution (the minimal delay) to 300ms or even 1000ms depending on the browser and OS-level performance settings. *More content at* <a href="http://plainenglish.io/" class="markup--anchor markup--p-anchor"><em>plainenglish.io</em></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 18, 2021](https://medium.com/p/fcb2f40d16f7). <a href="https://medium.com/@bryanguner/scheduling-settimeout-and-setinterval-fcb2f40d16f7" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,88 @@ A Very Quick Guide To Calculating Big O Computational Complexity ================================================================ Big O: big picture, broad strokes, not details ------------------------------------------------------------------------ ### A Very Quick Guide To Calculating Big O Computational Complexity **Big O**: big picture, broad strokes, not details For a more complete guide… checkout : <a href="https://medium.com/star-gazers/a-quick-guide-to-big-o-notation-memoization-tabulation-and-sorting-algorithms-by-example-803ff193c522" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://medium.com/star-gazers/a-quick-guide-to-big-o-notation-memoization-tabulation-and-sorting-algorithms-by-example-803ff193c522"><strong>A Quick Guide to Big-O Notation, Memoization, Tabulation, and Sorting Algorithms by Example</strong><br /> <em>Curating Complexity: A Guide to Big-O Notation</em>medium.com</a><a href="https://medium.com/star-gazers/a-quick-guide-to-big-o-notation-memoization-tabulation-and-sorting-algorithms-by-example-803ff193c522" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <figure><img src="https://cdn-images-1.medium.com/max/800/0*lte81mEvgEPYXodB.png" class="graf-image" /></figure>- <span id="28b6">way we analyze how efficient algorithms are without getting too mired in details</span> - <span id="4141">can model how much time any function will take given `n` inputs</span> - <span id="9479">interested in order of magnitude of number of the exact figure</span> - <span id="8fe1">O absorbs all fluff and n = biggest term</span> - <span id="a9c8">Big O of `3x^2 +x + 1` = `O(n^2)`</span> ### Time Complexity no loops or exit & return = O(1) 0 nested loops = `O(n)` 1 nested loops = `O(n^2)` 2 nested loops = `O(n^3)` 3 nested loops = `O(n^4)` **recursive**: as you add more terms, increase in time as you add input diminishes **recursion**: when you define something in terms of itself, a function that calls itself - <span id="f455">used because of ability to maintain state at diffferent levels of recursion</span> - <span id="f168">inherently carries large footprint</span> - <span id="5510">every time function called, you add call to stack</span> **iterative**: use loops instead of recursion (preferred) - favor readability over performance `O(n log(n))` & `O(log(n))`: dividing/halving - <span id="4f7e">if code employs recursion/divide-and-conquer strategy</span> - <span id="d1cc">what power do i need to power my base to get n</span> ### Time Definitions - <span id="9aad">**constant**: does not scale with input, will take same amount of time</span> - <span id="3a19">for any input size n, constant time performs same number of operations every time</span> - <span id="bf51">**logarithmic**: increases number of operations it performs as logarithmic function of input size n</span> - <span id="93d5">function log n grows very slowly, so as n gets longer, number of operations the algorithm needs to perform doesn’t increase very much</span> - <span id="a2cf">halving</span> - <span id="46c0">**linear**: increases number of operations it performs as linear function of input size n</span> - <span id="5f16">number of additional operations needed to perform grows in direct proportion to increase in input size n</span> - <span id="ab93">**log-linear**: increases number of operations it performs as log-linear function of input size n</span> - <span id="0459">looking over every element and doing work on each one</span> - <span id="bd8a">**quadratic**: increases number of operations it performs as quadratic function of input size n</span> - <span id="dc41">**exponential**: increases number of operations it performs as exponential function of input size n</span> - <span id="71fc">number of nested loops increases as function of n</span> - <span id="8253">**polynomial**: as size of input increases, runtime/space used will grow at a faster rate</span> - <span id="8827">**factorial**: as size of input increases, runtime/space used will grow astronomically even with relatively small inputs</span> - <span id="040c">**rate of growth**: how fast a function grows with input size</span> <figure><img src="https://cdn-images-1.medium.com/max/800/1*5t2u8n1uKhioIzZIXX2zbg.png" class="graf-image" /></figure>### Space Complexity - <span id="403b">How does the space usage scale/change as input gets very large?</span> - <span id="5f20">What auxiliary space does your algorithm use or is it in place (constant)?</span> - <span id="b207">Runtime stack space counts as part of space complexity unless told otherwise.</span> ### Sorting Algorithms <figure><img src="https://cdn-images-1.medium.com/max/800/1*HhXmG2cNdg8y4ZCCQGTyuQ.png" class="graf-image" /></figure><figure><img src="https://cdn-images-1.medium.com/max/800/1*ULeXxVCDkF73GwhsxyM_2g.png" class="graf-image" /></figure>### Data Structures <figure><img src="https://cdn-images-1.medium.com/max/1200/1*hkZWlUgFyOSaLD5Uskv0tQ.png" class="graf-image" /></figure> <figure><img src="https://cdn-images-1.medium.com/max/2560/1*COjzunj0-FsMJ0d7v7Z-6g.png" class="graf-image" /></figure> For similar content check out my GitHub: <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz - Overview</strong><br /> <em>Web Developer, Electrical Engineer https://bryanguner.medium.com/ https://portfolio42.netlify.app/…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 19, 2021](https://medium.com/p/eb1557e85fa3). <a href="https://medium.com/@bryanguner/a-very-quick-guide-to-calculating-big-o-computational-complexity-eb1557e85fa3" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,578 @@ Beginner’s Guide To React Part 2 ================================ As I learn to build web applications in React I will blog about it in this series in an attempt to capture the questions that a complete… ------------------------------------------------------------------------ ### Beginner’s Guide To React Part 2 As I learn to build web applications in React I will blog about it in this series in an attempt to capture the questions that a complete beginner might encounter that a more seasoned developer would take for granted! #### For more resources visit: <a href="https://github.com/bgoonz/React_Notes_V3" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz/React_Notes_V3"><strong>bgoonz/React_Notes_V3</strong><br /> <em>A JavaScript library for building user interfaces React makes it painless to create interactive UIs. Design simple…</em>github.com</a><a href="https://github.com/bgoonz/React_Notes_V3" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://gist.github.com/bgoonz/e07d9e7917ae9e98807358d1e7cc4a67" class="markup--anchor markup--p-anchor">Use this appendix to get any prerequisite concepts and terminology under your belt:</a> <figure><img src="https://cdn-images-1.medium.com/max/800/0*bZjlAJDEmP6yfpKI.gif" class="graf-image" /></figure> ------------------------------------------------------------------------ <span class="graf-dropCap">H</span>ere I will walk through a demo…. skip down below for more fundamental examples and resources… ### React Demo - <span id="91c8">ex1 — A Basic React Component</span> - <span id="78f6">ex2 — A Basic React Class Component</span> - <span id="1e73">ex3 — A Class Component with State</span> - <span id="ba57">ex4 — A Class Component that Updates State</span> - <span id="203a">ex5 — A Class Component that Iterates through State</span> - <span id="8087">ex6 — An Example of Parent and Child Components</span> With regards to converting an existing HTML, CSS, and JS site into React, first you’ll want to think about how to break up your site into components, - <span id="694c">as well as think about what the general hierarchical component structure of your site will look like.</span> - <span id="fdf0">From there, it’s a simple matter of copying the relevant HTML for that component and throwing it into the **render method of your component file.**</span> - <span id="ec78">*Any methods that are needed for that component to function properly can added onto your new component.*</span> Once you’ve refactored your HTML components into React components, you’ll want to lay them out in the desired hierarchical structure - <span id="227c">with children components being rendered by their parents, as well as ensuring that the parent components are passing down the necessary data as props to their children components.</span> ex.) <!-- Hello world --> <div class="awesome" style="border: 1px solid red"> <label for="name">Enter your name: </label> <input type="text" id="name" /> </div> <p>Enter your HTML here</p> Is equivalent to: ### A Basic Component <span class="graf-dropCap">A</span> component is some thing that is being rendered in the browser. It could be a button, a form with a bunch of fields in it…etc.… React doesn’t place any restrictions on how large or small a component can be. You *could* have an entire static site encapsulated in a single React component, but that would defeat the purpose of using React. So the first thing to remember about a component is that a **component must *render* something.** *If nothing is being rendered from a component, then React will throw an error.* Inside of `BasicComponent.js` , first import React at the top of the file. Our most basic of components looks like this: > *This is a component that simply returns a div tag with the words Hello World! inside.* > *The last line simply exports our component so that it can be imported > by another file.* Notice that this component looks exactly like an anonymous arrow function that we’ve named `BasicComponent` . In fact, that is literally what this is. The arrow function then is simply returning the div tag. When a component is written as a function like this one is, it is called a *functional* component. ### A Basic Class Component The above component is an example of a functional component, which is appropriate since that component is literally nothing more than a function that returns some HTML. *Functional components are great when all you want a component to do is to render some stuff.* *Components can also be written as classes (although this paradigm is becoming outdated and you should strive to write your components functionally!* For this exercise, we’re going to write a class component that does exactly the same thing as the functional component we just wrote. We’ll again need to import React at the top of the file, but we’ll also need to add a little something. Our import statement will look like this: import React, { Component } from 'react'; **So, in addition to importing React, we’re also importing the base Component class that is included in the React library.** #### React lets you define components as classes or functions. Components defined as classes currently provide more features . To define a React component class, you need to extend `React.Component`: class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } **The only method you *must* define in a** `React.Component` **subclass is called** `render()`**.** ### `render()` The `render()` method is the only required method in a class component. When called, it should examine `this.props` and `this.state` and return one of the following types: - <span id="8e4e">**React elements.** Typically created via <a href="https://reactjs.org/docs/introducing-jsx.html" class="markup--anchor markup--li-anchor">JSX</a>. For example, `<div />` and `<MyComponent />` are React elements that instruct React to render a DOM node, or another user-defined component, respectively.</span> - <span id="2c5f">**Arrays and fragments.** Let you return multiple elements from render. See the documentation on <a href="https://reactjs.org/docs/fragments.html" class="markup--anchor markup--li-anchor">fragments</a> for more details.</span> - <span id="2e6f">**Portals**. Let you render children into a different DOM subtree. See the documentation on <a href="https://reactjs.org/docs/portals.html" class="markup--anchor markup--li-anchor">portals</a> for more details.</span> - <span id="83d1">**String and numbers.** These are rendered as text nodes in the DOM.</span> - <span id="5c6a">**Booleans or** `null`. Render nothing. (Mostly exists to support `return test && <Child />` pattern, where `test` is boolean.)</span> The `render()` function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser. If you need to interact with the browser, perform your work in `componentDidMount()` or the other lifecycle methods instead. Keeping `render()` pure makes components easier to think about. > *Note* > `render()` *will not be invoked if* `shouldComponentUpdate()` *returns false.* The export statement at the bottom of the file also stays, completely unchanged. Our class component will thus look like this: **Notice that our** `BasicClassComponent` **inherits from the base** `Component` **class that we imported from the React library, by virtue of the 'extends' keyword.** *That being said, there's nothing in this minimal component that takes advantage of any of those inherited methods.* **All we have is a method on our component class called** `render` **that returns the same div tag.** If we really were deciding between whether to use a functional component versus a class component to render a simple div tag, then the functional style is more appropriate to use. This is because class components are much better suited for handling component state and triggering events based on the component’s <a href="https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/" class="markup--anchor markup--p-anchor">lifecycle.</a> #### The important takeaways at this point are that there are two types of components, functional and class components, and that functional components are well-suited if you’re just looking to render some HTML. *Class components, on the other hand, are much better suited for handling components that require more complex functionality, need to exhibit more varied behavior, and/or need to keep track of some state that may change throughout said component’s lifecycle.* ### A Class Component with Some State **Component state is any dynamic data that we want the component to keep track of.** > For example, let’s say we have a form component. This form has some input fields that we’d like users to fill out. When a user types characters into an input field, how is that input persisted from the point of view of our form component? **The answer is by using component state!** There are a few important concepts regarding component state, such as how to update it, pass it to another component, render it, etc. **Only class components have the ability to persist state, so if at any time you realize that a component needs to keep track of some state, you know that you’ll automatically need a class component instead of a functional component.** > It is possible to handle state with functional components but that requires the use of something called the <a href="https://reactjs.org/docs/hooks-state.html" class="markup--anchor markup--blockquote-anchor">useState() hook</a>. Hooks were added in React 16.8; prior to this release, there was no mechanism to add state to functional components. Here’s what the above component looks like as a functional component: Our class component with state will look a lot like the basic class component we just wrote, but with some exceptions: **So far, the only new thing going on here is the constructor block. If you recall how classes in JavaScript work, classes need constructors.** **Additionally, if a class is extending off of another class and wants access to its parent class’s methods and properties, then the** `super` **function needs to be called inside the class's constructor function.** #### Point being, the constructor function and the call to the `super` function are *not* associated with React, they are associated with all JavaScript classes. - <span id="0d56">Then there is the `this.state` **property inside the constructor function that is set as an empty object**.</span> - <span id="7b29">We're adding a property called `state` to our class and setting it to an empty object.</span> #### State objects in React are always just plain old objects. #### **So why is it that the basic class component we wrote in the previous exercise had no constructor function within its body?** That is because we had no need for them since all our class component was doing was rendering some HTML. **The constructor is needed here because that is where we need to initialize our state object.** **The call to** `super` **is needed because we can't reference** `this` **inside of our constructor without a call to** `super` **first.** Ok, now let’s actually use this state object. *One very common application of state objects in React components is to render the data being stored inside them within our component’s render function.* #### Refactoring our component class to do that: We added a key-value pair to our state object inside our constructor. - <span id="83e8">Then we changed the contents of the render function.</span> - <span id="6780">Now, it’s actually rendering the data that we have inside the state object.</span> - <span id="eb34">Notice that inside the div tags we’re using a template string literal so that we can access the value of `this.state.someData` straight inside of our rendered content.</span> **With Reacts newest version, we can actually now add state to a component without explicitly defining a constructor on the class. We can refactor our class component to look like this:** <figure><img src="https://cdn-images-1.medium.com/max/1200/1*6sYhFUNpUkt6xN9kkn4pJQ.png" class="graf-image" /></figure> This new syntax is what is often referred to as ‘syntactic sugar’: under the hood, the React library translates this back into the old constructor code that we first started with, so that the JavaScript remains valid to the JavaScript interpreter. The clue to this is the fact that when we want to access some data from the state object, we still need to call it with `this.state.someData` ; changing it to just `state.someData` does not work. ### Class Component Updating State Great, so we can render some state that our component persists for us. However, we said an important use case of component state is to handle *dynamic* data. A single static number isn’t very dynamic at all. So now let’s walk through how to update component state. Notice that we’ve added two methods to our class: `increment` and `decrement` . `increment` and `decrement` are methods that *we* are adding to our class component. Unlike the `render` method, `increment` and `decrement` were not already a part of our class component. This is why `increment` and `decrement` are written as arrow functions, ***so that they are automatically bound to our class component.*** The alternative is using a declaration syntax function with the bind method to bind the context of our methods to the class component. The more interesting thing is what is going on within the bodies of these methods. #### Each calls the `setState` function. - <span id="df3c">`setState` in fact *is* provided to us by React.</span> It is the standard way to update a component's state. It's the *only* way you should ever update a component's state. It may seem more verbose than necessary, but there are good reasons for why you should be doing it this way. #### So the way to use `setState` to update a component's state is to pass it an object with each of the state keys you wish to update, along with the updated value. In our `increment` method we said "I would like to update the `aNumber` property on my component state by adding one to it and then setting the new value as my new `aNumber` ". The same thing happens in our `decrement` method, only we're subtracting instead of adding. Then the other new concept we’re running into here is how to actually call these methods we’ve added to our class. <figure><img src="https://cdn-images-1.medium.com/max/600/1*k8t5QBcMvHDX521sd4pC4g.png" class="graf-image" /></figure>We added two HTML button tags within our `render` function, then in their respective `onClick` handlers, we specify the method that should be called whenever this button gets clicked. So whenever we click either of the buttons, our state gets updated appropriately and our component will re-render to show the correct value we're expecting. ### Class Component Iterating State Another common state pattern you’ll see being used in React components is iterating over an array in our state object and rendering each array element in its own tag. > This is often used in order to render lists. Additionally, we want to be able to easily update lists and have React re-render our updated list. We’ll see how both of these are done and how they work together within a single component in order to create the behavior of a dynamic list. The first change to note is that our state object now has an ‘ingredients’ array, and a ‘newIngredient’ field that has been initialized to an empty string. The ingredients array contains the elements that we’ll want to render in our list. The `addIngredient` and `handleIngredientInput` methods we've added to our class receives a parameter called 'event'. This event object is part of the browser's API. When we interact with some DOM element, **such as clicking on an HTML button, the *function that is invoked upon that button being clicked* actually receives the event object.** - <span id="3ba1">So when we type some input into an input tag, we're able grab each character that was typed into the input field through the event object parameter.</span> - <span id="5de7">The `handleIngredientInput` method is what gets invoked every time the user presses a key to enter text in the input box for adding a new ingredient.</span> - <span id="514e">Every character the user types gets persisted in the `newIngredient` field on the state object.</span> We're able to grab the text in the input box using `event.target.value` **Which holds the value of the string text that is currently in the input box**. > We use that to update our `newIngredient` string field. Breaking down the `addIngredient` method, we see this `event.preventDefault()` invocation. This is because this method will be used upon submitting a form, and it turns out that submitting a form triggers some default form behavior that we don't want to trigger when we submit the form (**namely refreshing the entire page**). > `event.preventDefault()` will prevent this default form behavior, meaning our form will only do what we want it to do when it is submitted. <figure><img src="https://cdn-images-1.medium.com/max/600/1*RN_y7Bk4tb-LLG8vNqGHHA.png" class="graf-image" /></figure>Next, we store a reference to `this.state.ingredients` in a variable called `ingredientsList` . So we now have a copy of the array that is stored in our state object. **We want to update the copy of the ingredients array first instead of directly updating the actual array itself in state.** Now we push whatever value is being stored at our `newIngredient` field onto the `ingredientsList` array so that our `ingredientsList` array is now more up-to-date than our `this.state.ingredients` array. So all we have to do now is call `setState` appropriately in order to update the value in our state object. Additionally, we also set the `newIngredient` field back to an empty string in order to clear out the input field once we submit a new ingredient. Now it's ready to accept more user input! <figure><img src="https://cdn-images-1.medium.com/max/600/1*LXx7WeP_5wFRfYa45snSEA.png" class="graf-image" /></figure>Looking at our render function, first note the `this.state.ingredients.map` call. This is looping through each ingredient in our `ingredients` array and returning each one within its own div tag. This is a very common pattern for rendering everything inside an array. Then we have an HTML form which contains an input field. The purpose of this form is to allow a user to add new ingredients to the list. Note that we’re passing our `addIngredient` method to the form's `onSubmit` handler. This means that our `addIngredient` method gets invoked whenever our form is submitted. Lastly, the input field has an `onChange` handler that invokes our `handleIngredientInput` method whenever there is some sort of change in the input field, namely when a user types into it. <figure><img src="https://cdn-images-1.medium.com/max/800/1*S7s9FfaPVlKGyaSwFeId_w.png" class="graf-image" /></figure>Notice that the `value` field in our input tag reads off of `this.state.newIngredient` in order to know what value to display. So when a user enters text into the input field, the `onChange` handler is invoked every time, which updates our `this.state.newIngredient` field, which the input field and then renders. ### Parent and Child Components A single isolated component isn’t going to do us much good. > The beauty of React lies in the fact that it allows us to compose modular components together. > Let’s start off with the component we just saw, but let’s change its name to `ParentComponent` . The only two other differences in this component are that we’re importing a `ChildComponent` and then using it inside our `this.state.ingredients.map` call. `ChildComponent` is another React component. Notice that we're using it just as if it were any other HTML tag. **This is how we lay out our component hierarchy: the ChildComponent is rendered within the ParentComponent.** We can see this to be the case if we open up the developer console and inspect these elements. <figure><img src="https://cdn-images-1.medium.com/max/1200/1*q_XLnJ2h1L5yZjNnSKzj5w.png" alt="child-left: parent-right" class="graf-image" /><figcaption><strong>child-left: parent-right</strong></figcaption></figure> Note also that we’re passing each ingredient as a ‘thing’ to the ChildComponent component. This is how a parent component passes data to a child component. It doesn’t need to be called ‘thing’; you can call it whatever you want. Conceptually though, **every piece of data that a parent component passes down to a child component is called a ‘prop’ in React lingo.** Let’s take a look now at the Child Component. It serves two purposes: 1. <span id="4db5">to render the props data that it gets from a parent component,</span> 2. <span id="f8e1">to add the ability for a user to click on it and have it toggle a strikethrough, indicating that the item is ‘complete’.</span> The overall structure of the child component is nothing we haven’t seen. It’s just another class component with its own s**tate object and a method called** `handleClick`** .** **A component accesses its props via the** `this.props` **object.** *Any prop a parent component passes down to a child component is accessible inside the child component's* `this.prop` *object.* So our child component keeps its own state that tracks whether the component has been clicked or not. Then at the top of the `render` function, it uses a ternary condition to determine whether the div tag that is being rendered should have a strikethrough or not. The `handleClick` method is then invoked via an `onClick` handler on the div tag; it does the work of toggling the `this.state.clicked` Boolean. The overall structure of React applications can be represented as a hierarchical tree structure, just like how the DOM itself is structure. There is an overarching root component at the top of the hierarchy that every other component sits underneath. Specifying that a component should be a child of some parent component is as simple as throwing it in the parent component’s render function, just like how we did it in this example <figure><img src="https://cdn-images-1.medium.com/max/800/0*aqqfHMjBXT8PWYJC" class="graf-image" /></figure> ------------------------------------------------------------------------ <figure><img src="https://cdn-images-1.medium.com/max/800/0*j9aPKza7Y4htBeQ-.gif" class="graf-image" /></figure>### **Core Concepts:** #### 1. What is react? #### React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It uses components to update and render as your data changes. > React manages the **creation and continuous updating of DOM nodes in your Web page**. - <span id="c9b6">*It does not handle* <a href="https://skillcrush.com/blog/what-is-ajax/" class="markup--anchor markup--li-anchor"><em>AJAX</em></a> *requests, Local Storage or style your website. IT is just a tool to dynamically render content on a webpage as a result of changes in ‘state’. Because it’s function is so limited in scope you may hear it referred to as a library… (not a framework … like Angular for example) and you may also hear it described as unopinionated.*</span> #### 2. Why use react? - <span id="45da">Works for teams and helps UI workflow patterns</span> - <span id="f328">The components can be reusable</span> - <span id="ea48">Componentized UI is the future of web dev</span> <figure><img src="https://cdn-images-1.medium.com/max/800/1*pFe_v7Ea--vfdmvR3UcunA.png" class="graf-image" /></figure>### Declarative programming In the same way that you use HTML to *declare* what the user interface should look like, React provides the same mechanism in its `createElement` method or the higher-level language known as JSX. <figure><img src="https://cdn-images-1.medium.com/max/600/0*MW-A5Dp_v1T0BB1s.png" alt="React… like HTML is Declarative" class="graf-image" /><figcaption>React… like HTML is Declarative</figcaption></figure><a href="https://en.wikipedia.org/wiki/Declarative_programming" class="markup--anchor markup--p-anchor">Declarative programming</a> is often defined as any style of programming that is not <a href="https://en.wikipedia.org/wiki/Imperative_programming" class="markup--anchor markup--p-anchor" title="Imperative programming">imperative</a>. A number of other common definitions attempt to define it by simply contrasting it with imperative programming. For example: - <span id="97d7">A high-level program that describes what a computation should perform.</span> - <span id="0283">Any programming language that lacks <a href="https://en.wikipedia.org/wiki/Side_effect_%28computer_science%29" class="markup--anchor markup--li-anchor" title="Computation">side effects</a></span> - <span id="4173">A language with a clear correspondence to <a href="https://en.wikipedia.org/wiki/Mathematical_logic" class="markup--anchor markup--li-anchor">mathematical logic</a>.<a href="https://en.wikipedia.org/wiki/Declarative_programming#cite_note-5" class="markup--anchor markup--li-anchor">[5]</a></span> These definitions overlap substantially. <span class="graf-dropCap">D</span>**eclarative programming is a non-imperative style of programming in which programs describe their desired results without explicitly listing commands or steps that must be performed.** <a href="https://en.wikipedia.org/wiki/Functional_programming" class="markup--anchor markup--p-anchor" title="Functional programming">Functional</a> and <a href="https://en.wikipedia.org/wiki/Logical_programming" class="markup--anchor markup--p-anchor" title="Logical programming">logical programming</a> languages are characterized by a declarative programming style. *In a* <a href="https://en.wikipedia.org/wiki/Pure_functional_language" class="markup--anchor markup--p-anchor" title="Pure functional language"><em>pure functional language</em></a>*, such as* <a href="https://en.wikipedia.org/wiki/Haskell_%28programming_language%29" class="markup--anchor markup--p-anchor"><em>Haskell</em></a>*, all functions are* <a href="https://en.wikipedia.org/wiki/Pure_function" class="markup--anchor markup--p-anchor" title="Pure function"><em>without side effects</em></a>*, and state changes are only represented as functions that transform the state, which is explicitly represented as a* <a href="https://en.wikipedia.org/wiki/First-class_citizen" class="markup--anchor markup--p-anchor" title="Mathematical logic"><em>first-class</em></a> *object in the program.* — Wikipedia ### What is a React pure component? <a href="https://blog.logrocket.com/react-pure-components-functional/#whatisareactpurecomponent" class="markup--anchor markup--p-anchor">Based on the concept of purity in functional programming paradigms, a function is said to be pure if:</a> - <span id="12b8">Its return value is only determined by its input values</span> - <span id="c2a4">Its return value is always the same for the same input values</span> A React component is considered pure if it renders the same output for the same state and props. For class components like this, React provides the `PureComponent` base class. Class components that extend the `React.PureComponent` class are treated as pure components. Pure components have some performance improvements and render optimizations since React implements the `shouldComponentUpdate()` method for them with a shallow comparison for props and state. ### Are React functional components pure? Functional components are very useful in React, especially when you want to isolate state management from the component. That’s why they are often called stateless components. However, functional components cannot leverage the performance improvements and render optimizations that come with `React.PureComponent` since they are not classes by definition. If you want React to treat a functional component as a pure component, you’ll have to convert the functional component to a class component that extends `React.PureComponent`. ### Reusability React encourages you to think in terms of reusability as you construct the user interface from elements and components that you create. When you make a list or a button, you can then reuse those components to show different data ‘state’ in the same UI structure as you have built for different data previously. <figure><img src="https://cdn-images-1.medium.com/max/800/0*cBLQ5aBP2qihrT59.jpeg" class="graf-image" /></figure>#### Component-Based Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM. #### Learn Once, Write Anywhere We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using <a href="https://reactnative.dev/" class="markup--anchor markup--p-anchor">React Native</a>. ### Speed Due to the use of a virtual DOM, React handles changes to a Web page more intelligently than just string manipulation. It is constantly monitors the virtual DOM for changes. It very efficiently reconciles changes in the virtual DOM with what it has already produced in the real DOM. This is what makes React one of the speediest front-end libraries available. <figure><img src="https://cdn-images-1.medium.com/max/800/0*OdOq6pmpXBJhjj7k.png" class="graf-image" /></figure>#### 3. Who uses react? - <span id="76d9">Companies such as Facebook app for android and Instagram</span> - <span id="0a90"><a href="https://facebook.github.io/react-native/showcase.html" class="markup--anchor markup--li-anchor">Here</a> is a link to a list of other companies who use react.</span> <figure><img src="https://cdn-images-1.medium.com/max/800/1*Cn9JvaSmkxdLwgXIO9Y8iQ.png" alt="Who uses react" class="graf-image" /><figcaption>Who uses react</figcaption></figure>#### 4. Setting up react - <span id="6864">React can be set up in CodePen for quick practice development by adding react.js, react-dom and babel.</span> - <span id="4ce5">It can also be set up by downloading a react starter project from GitHub installing node and following these <a href="https://github.com/hjb23/ReduxSimpleStarter" class="markup--anchor markup--li-anchor">instructions</a>.</span> - <span id="ba2e">Alternatively it can be set up through NPM like <a href="https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr" class="markup--anchor markup--li-anchor">this</a>.</span> #### 5. Intro to eco system - <span id="60f4">Composition, being able to wrap up sections of code into there own containers so they can be re used.</span> - <span id="e3e8">How to make a large application? by combining small components to create a larger complex application.</span> #### 6. Imperative vs Declarative <a href="https://medium.com/trabe/why-is-react-declarative-a-story-about-function-components-aaae83198f79" class="markup--anchor markup--h4-anchor">(React is Declarative)</a> - <span id="d48c">**Imperative, ‘telling to computer HOW to do something’ e.g looping over an array of numbers using a for loop.**</span> - <span id="8f2d">**Declarative, is concerned about WHAT we want to happen. e.g using a reduce method on an array.**</span> - <span id="b625">Benefits of using declarative code:</span> - <span id="1164">Reduce side effects</span> - <span id="0f09">Minimize mutability</span> - <span id="7009">Less Bugs</span> #### 7. Unidirectional Data Flow - <span id="f8de">As the state collects from user interaction, the UI gets updated.</span> 1. <span id="d6bf">Explicit Mutations</span> 2. <span id="2a52">Whenever the state needs to be updated in our application setState has to be called.</span> <!-- --> this.setState({ highlight: !this.state.highlight, }) #### 7.1. First component - <span id="eb44">Components are the building blocks of React.</span> - <span id="ec58">They are similar to a collection of HTML,CSS, JS and data specific to that component.</span> - <span id="1ee2">They can be defined in pure JavaScript or JSX.</span> - <span id="a2b4">Data is either received from a component’s parent component, or it’s contained in the component itself.</span> - <span id="182f">Applications can be separated into smaller components like this…</span> - <span id="c153">React components can be created using ES6 class like this.</span> <!-- --> import React from 'react'; class Hello extends React.Component { render () { return <h1>Hello, {this.props.name}!</h1>; } } export default Hello; - <span id="82a3">At the top with have the code to bring react and react dom libraries in.</span> - <span id="3b52">React library is used for the react syntax.</span> - <span id="281c">React DOM is used to update the DOM.</span> - <span id="8818">We then have the Class section which creates the component.</span> - <span id="aad6">Render() describes the specific UI for the component.</span> - <span id="2165">Return is used to return the JSX</span> - <span id="7757">And Finally ReactDOM.render is used to update the DOM.</span> #### 8. Data flow with props Small examples of data flow, see if you can get the code to work. #### 9. Creating lists with map The parent component passes down to the child component as props. Using props to access names and map to loop through each list item. Then passing this by using props. Checking data to see if Boolean is true then adding detail to the list. #### 10. Prop types PropTypes allow you to declare the type (string, number, function, etc) of each prop being passed to a component. Then if a prop passed in isn’t of the declared type you’ll get a warning in the console. ------------------------------------------------------------------------ ### Excerpt from the React website: ### React — A JavaScript library for building user interfaces > *A JavaScript library for building user interfaces* #### Declarative React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug. #### A Simple Component React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`. JSX is optional and not required to use React. Try the <a href="https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUAcjogQUcwEpeAJTjDgUACIB5ALLK6aRklTRBQ0KCohMQk6Bx4gA" class="markup--anchor markup--p-anchor">Babel REPL</a> to see the raw JavaScript code produced by the JSX compilation step. In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component’s state data changes, the rendered markup will be updated by re-invoking `render()`. #### An Application Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation. #### A Component Using External Plugins React allows you to interface with other libraries and frameworks. This example uses remarkable, an external Markdown library, to convert the `<textarea>`’s value in real time. ------------------------------------------------------------------------ ### React Cheat Sheet: React-Tutorial-1: <a href="https://replit.com/@bgoonz/react-tutorial-1" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://replit.com/@bgoonz/react-tutorial-1"><strong>react-tutorial-1</strong><br /> <em>A React repl by bgoonz</em>replit.com</a><a href="https://replit.com/@bgoonz/react-tutorial-1" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> React Boilerplate: <a href="https://replit.com/@bgoonz/Reactjs-Babel-Webpack-Boilerplate#index.js" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://replit.com/@bgoonz/Reactjs-Babel-Webpack-Boilerplate#index.js"><strong>React.js + Babel + Webpack Boilerplate</strong><br /> <em>Created by @eankeen | The ultimate trifecta - React, Babel, and Webpack - complete with hot module reloading and a…</em>replit.com</a><a href="https://replit.com/@bgoonz/Reactjs-Babel-Webpack-Boilerplate#index.js" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> For more resources visit: <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz - Overview</strong><br /> <em>Web Developer, Electrical Engineer https://bryanguner.medium.com/ https://portfolio42.netlify.app/…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 19, 2021](https://medium.com/p/cda01615a186). <a href="https://medium.com/@bryanguner/introductory-react-part-2-cda01615a186" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,385 @@ Introduction to React for Complete Beginners ============================================ All of the code examples below will be included a second time at the bottom of this article as an embedded gist. ------------------------------------------------------------------------ ### Introduction to React for Complete Beginners All of the code examples below will be included a second time at the bottom of this article as an embedded gist, so that it is properly syntax highlighted. React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript. <figure><img src="https://cdn-images-1.medium.com/max/1200/0*Olfj44MF6WSzvlSM.png" class="graf-image" /></figure> ### React > *React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript* > *because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX* > *include the code you want to be treated as JavaScript within curly braces: { ‘this is treated as JavaScript code’ }* > *JSX code must be compiled into JavaScript* > *under the hood the challenges are calling ReactDOM.render (JSX, document.getElementById(‘root’))* > *One important thing to know about nested JSX is that it must return a single element.* > *For instance, several JSX elements written as siblings with no parent wrapper element will not transpile.* ------------------------------------------------------------------------ ### From the React Docs: ### What is React? React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. React has a few different kinds of components, but we’ll start with `React.Component` subclasses: class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } } // Example usage: <ShoppingList name="Mark" /> We’ll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components. Here, ShoppingList is a **React component class**, or **React component type**. A component takes in parameters, called `props` (short for “properties”), and returns a hierarchy of views to display via the `render` method. The `render` method returns a *description* of what you want to see on the screen. React takes the description and displays the result. In particular, `render` returns a **React element**, which is a lightweight description of what to render. Most React developers use a special syntax called “JSX” which makes these structures easier to write. The `<div />` syntax is transformed at build time to `React.createElement('div')`. The example above is equivalent to: return React.createElement('div', {className: 'shopping-list'}, React.createElement('h1', /* ... h1 children ... */), React.createElement('ul', /* ... ul children ... */) ); ------------------------------------------------------------------------ ### Valid JSX: <div> <p>Paragraph One</p> <p>Paragraph Two</p> <p>Paragraph Three</p> </div> ------------------------------------------------------------------------ ### Invalid JSX: <p>Paragraph One</p> <p>Paragraph Two</p> <p>Paragraph Three</p> #### To put comments inside JSX, you use the syntax {/\* \*/} to wrap around the comment text. To put comments inside JSX, you use the syntax {/\* \*/} to wrap around the comment text. The code editor has a JSX element similar to what you created in the last challenge. Add a comment somewhere within the provided div element, without modifying the existing h1 or p elements. const JSX = ( <div> {/* This is a comment */} <h1>This is a block of JSX</h1> <p>Here's a subtitle</p> </div> ); ------------------------------------------------------------------------ > *With React, we can render this JSX directly to the HTML DOM using React’s rendering API known as ReactDOM.* > *ReactDOM offers a simple method to render React elements to the DOM which looks like this:* `ReactDOM.render(componentToRender, targetNode)` - <span id="f724">the first argument is the React element or component that you want to render,</span> - <span id="7093">and the second argument is the DOM node that you want to render the component to.</span> > *ReactDOM.render() must be called after the JSX element declarations, just like how you must declare variables before using them.* > *key difference in JSX is that you can no longer use the word class to define HTML classes.* - <span id="aafc">— -> This is because class is a reserved word in JavaScript. Instead, JSX uses className</span> > *the naming convention for all HTML attributes and event references in JSX become camelCase* > *a click event in JSX is onClick, instead of onclick. Likewise, onchange becomes onChange. While this is a subtle difference, it is an important one to keep in mind moving forward.* ### Apply a class of myDiv to the div provided in the JSX code. - <span id="9500">The constant JSX should return a div element.</span> - <span id="8d42">The div should have a class of myDiv.</span> <!-- --> const JSX = ( <div> <h1>Add a class to this div</h1> </div> ); ### Ans: const JSX = ( <div className="myDiv"> <h1>Add a class to this div</h1> </div> ); ### React: Learn About Self-Closing JSX Tags -Another important way in which JSX differs from HTML is in the idea of the self-closing tag. > *In HTML, almost all tags have both an opening and closing tag:* `<div></div>;` *the closing tag always has a forward slash before the tag name that you are closing.* > *there are special instances in HTML called “self-closing tags”, or tags that don’t require both an opening and closing tag before another tag can start.* > *For example the line-break tag can be written as* `<br>` *or as* `<br />,` *but should never be written as* `<br></br>`*, since it doesn't contain any content.* > *In JSX, the rules are a little different. Any JSX element can be written with a self-closing tag, and every element must be closed. > The line-break tag, for example, must always be written as* `<br />` *in order to be valid JSX that can be transpiled. > A* `<div>`*, on the other hand, can be written as* `<div />`*or*`<div></div>`*. > The difference is that in the first syntax version there is no way to include anything in the* `<div />`*.* ### Fix the errors in the code editor so that it is valid JSX and successfully transpiles. Make sure you don’t change any of the content — you only need to close tags where they are needed. const JSX = ( <div> <h2>Welcome to React!</h2> <br > <p>Be sure to close all tags!</p> <hr > </div> ); ### Ans: const JSX = ( <div> <h2>Welcome to React!</h2> <br /> <p>Be sure to close all tags!</p> <hr /> </div> ); ------------------------------------------------------------------------ ### React: Create a Stateless Functional Component > *There are two ways to create a React component. The first way is to use a JavaScript function.* > *Defining a component in this way creates a stateless functional component.* > *think of a stateless component as one that can receive data and render it, but does not manage or track changes to that data.* #### To create a component with a function, you simply write a JavaScript function that returns either JSX or null - <span id="b514">React requires your function name to begin with a capital letter.</span> > *Here’s an example of a stateless functional component that assigns an HTML class in JSX:* // After being transpiled, the <div> will have a CSS class of 'customClass' const DemoComponent = function() { return ( <div className='customClass' /> ); }; > *Because a JSX component represents HTML, you could put several components together to create a more complex HTML page.* ### The code editor has a function called MyComponent. Complete this function so it returns a single div element which contains some string of text. Note: The text is considered a child of the div element, so you will not be able to use a self-closing tag. const MyComponent = function() { // Change code below this line // Change code above this line } ### ANS: const MyComponent = function() { // Change code below this line return ( <div> Some Text </div > ); // Change code above this line }; ------------------------------------------------------------------------ ### React: Create a React Component > *The other way to define a React component is with the ES6 class syntax. In the following example, Kitten extends React.Component:* class Kitten extends React.Component { constructor(props) { super(props); } render() { return ( <h1>Hi</h1> ); } } > *This creates an ES6 class Kitten which extends the React.Component class.* > *So the Kitten class now has access to many useful React features, such as local state and lifecycle hooks.* > *Also notice the Kitten class has a constructor defined within it that calls super()* > *It uses super() to call the constructor of the parent class, in this case React.Component* > *The constructor is a special method used during the initialization of objects that are created with the class keyword. It is best practice to call a component’s constructor with super, and pass props to both.* > *This makes sure the component is initialized properly. For now, know that it is standard for this code to be included.* ### MyComponent is defined in the code editor using class syntax. Finish writing the render method so it returns a div element that contains an h1 with the text Hello React!. class MyComponent extends React.Component { constructor(props) { super(props); } render() { // Change code below this line // Change code above this line } }; ### ANS: class MyComponent extends React.Component { constructor(props) { super(props); } render() { // Change code below this line return ( <div> <h1>Hello React!</h1> </div> ); // Change code above this line } }; ------------------------------------------------------------------------ ### React: Create a Component with Composition > *Imagine you are building an App and have created three components, a Navbar, Dashboard, and Footer.* > *To compose these components together, you could create an App parent component which renders each of these three components as children. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX.* - <span id="000b">For example, in the render method you could write:</span> <!-- --> return ( <App> <Navbar /> <Dashboard /> <Footer /> </App> ) > *When React encounters a custom HTML tag that references another component (a component name wrapped in < /> like in this example), it renders the markup for that component in the location of the tag. This should illustrate the parent/child relationship between the App component and the Navbar, Dashboard, and Footer.* ### Challenge: > *In the code editor, there is a simple functional component called ChildComponent and a class component called ParentComponent. Compose the two together by rendering the ChildComponent within the ParentComponent. Make sure to close the ChildComponent tag with a forward slash.* - <span id="2ed5">Note:**ChildComponent is defined with an ES6 arrow function because this is a very common practice when using React**.</span> - <span id="fddd">However, know that this is just a function.</span> <!-- --> const ChildComponent = () => { return ( <div> <p>I am the child</p> </div> ); }; class ParentComponent extends React.Component { constructor(props) { super(props); } render() { return ( <div> <h1>I am the parent</h1> { /* Change code below this line */ } { /* Change code above this line */ } </div> ); } }; ⌛The React component should return a single div element. ⌛The component should return two nested elements. ⌛The component should return the ChildComponent as its second child. ### Ans: const ChildComponent = () => { return ( <div> <p>I am the child</p> </div> ); }; class ParentComponent extends React.Component { constructor(props) { super(props); } render() { return ( <div> <h1>I am the parent</h1> { /* Change code below this line */ } { /* Change code above this line */ } </div> ); } }; ### More Examples: For more content follow me on GitHub: <a href="https://github.com/bgoonz" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong>bgoonz - Overview</strong><br /> <em>Web Developer, Electrical Engineer https://bryanguner.medium.com/ https://portfolio42.netlify.app/…</em>github.com</a><a href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> *More content at* <a href="http://plainenglish.io/" class="markup--anchor markup--p-anchor"><em>plainenglish.io</em></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 19, 2021](https://medium.com/p/8021738aa1ad). <a href="https://medium.com/@bryanguner/introduction-to-react-for-complete-beginners-8021738aa1ad" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,207 @@ Array Callback Methods Implemented With For Loops ================================================= How to implement array callback methods in JavaScript ------------------------------------------------------------------------ ### Array Callback Methods Implemented With For Loops #### How to implement array callback methods in JavaScript <figure><img src="https://cdn-images-1.medium.com/max/800/0*WpKqOdTsTPhvapuW" class="graf-image" /></figure>#### Functions are called “First Class Objects” in JavaScript because: - <span id="1df8">A function is an instance of the Object type</span> - <span id="6e67">A function can have properties and has a link back to its constructor method</span> - <span id="c7cf">You can store the function in a variable</span> - <span id="b709">You can pass the function as a parameter to another function</span> - <span id="2c3c">You can return the function from a function</span> What do you think will be printed in the following: #### Anonymous callback, a named callback function foo(callback) { console.log('grape'); callback(); } function bar() { console.log('banana'); } const fruitBasket = function() { console.log('apple'); bar(); foo(bar); foo(function() { console.log('orange'); }); console.log('pear'); }; fruitBasket(); #### Function that takes in a value and two callbacks. The function should return the result of the callback who’s invocation results in a larger value. function greaterValue(value, cb1, cb2) { // compare cb1 invoked with value to cb2 invoked with value // return the greater result let res1 = cb1(value); let res2 = cb2(value); if (res1 > res2) { // if this is false, we move out of if statement return res1; } return res2; } let negate = function(num) { return num * -1; }; let addOne = function(num) { return num + 1; }; console.log(greaterValue(3, negate, addOne)); console.log(greaterValue(-2, negate, addOne)); *Note: we do not invoke* `negate` *or* `addOne` *(by using* `()` *to call them), we are passing the function itself.* #### Write a function, myMap, that takes in an array and a callback as arguments. The function should mimic the behavior of Array.prototype.map. function myMap(arr, callback) { // iterate through the array, perform the cb on each element // return a new array with those new values let mapped = []; for (let i = 0; i < arr.length; i++) { // remember that map passes three args with each element. let val = callback(arr[i], i, arr); mapped.push(val); } return mapped; } let double = function(num) { return num * 2; }; console.log(myMap([1, 2, 3], double)); #### Write a function, myFilter, that takes in an array and a callback as arguments. The function should mimic the behavior of Array.prototype.filter. function myFilter(arr, callback) { let filtered = []; for (let i = 0; i < arr.length; i++) { let element = arr[i]; if (callback(element, i, arr)) { filtered.push(element); } } return filtered; } #### Write a function, myEvery, that takes in an array and a callback as arguments. The function should mimic the behavior of Array.prototype.every. function myEvery(arr, callback) { for (let i = 0; i < arr.length; i++) { let element = arr[i]; if (callback(element, i, arr) === false) { return false; } } return true; } ### Further Examples of the above concepts const createMeowValue = () => { console.log(this.name); let meow = function () { console.log(this); console.log(this.name + ' meows'); } meow = meow.bind(this); return meow; }; const name = 'Fluffy'; const cat = { name: name, age: 12, createMeow: function () { console.log(this.name); let meow = () => { const hello = 'hello'; console.log(this.name + ' meows'); }; let world = ''; if (true) { world = 'world'; } console.log(world); // meow = meow.bind(this); return meow; } }; cat.newKey = function () { const outermostContext = this; const innerFunc = () => { secondContext = this; console.log(secondContext === outermostContext) return function () { innermostContext = this; } }; return innerFunc.bind(outermostContext); }; const meow = cat.createMeow(); // method-style invocation meow(); // function-style invocation console.log('-------') const createMeow = cat.createMeow; const globalMeow = createMeow(); // function-style globalMeow(); // function-style function createSmoothie(ingredient) { const ingredients = [ingredient]; return ingredients; } // console.log(createSmoothie('banana')); // console.log(createSmoothie('apple')); // one parameter only // first argument is a string // return an array // DO NOT USE forEach References: <a href="https://open.appacademy.io/learn" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://open.appacademy.io/learn"><strong>App Academy Open</strong><br /> <em>App Academy Open is the first free, online web development course that's meant to get you hired as a developer. Get…</em>open.appacademy.io</a><a href="https://open.appacademy.io/learn" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://developer.mozilla.org/en-US/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://developer.mozilla.org/en-US/"><strong>MDN Web Docs</strong><br /> <em>Read more at hacks.mozilla.org Roughly a year ago at Mozilla we started an effort to improve Firefox stability on…</em>developer.mozilla.org</a><a href="https://developer.mozilla.org/en-US/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> <a href="https://javascript.info/callbacks" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://javascript.info/callbacks"><strong>Introduction: callbacks</strong><br /> <em>To demonstrate the use of callbacks, promises and other abstract concepts, we'll be using some browser methods…</em>javascript.info</a><a href="https://javascript.info/callbacks" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> *More content at* <a href="http://plainenglish.io" class="markup--anchor markup--p-anchor"><strong><em>plainenglish.io</em></strong></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 27, 2021](https://medium.com/p/d08875df6777). <a href="https://medium.com/@bryanguner/array-callback-methods-implemented-with-for-loops-d08875df6777" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,889 @@ Fundamental Javascript Concepts You Should Understand ===================================================== Plain Old JS Object Lesson Concepts ------------------------------------------------------------------------ ### Fundamental Javascript Concepts You Should Understand ### Plain Old JS Object Lesson Concepts <figure><img src="https://cdn-images-1.medium.com/max/800/0*bEuahctJRS_qCQgV.jpg" class="graf-image" /></figure>- <span id="d911">Label variables as either Primitive vs. Reference</span> - <span id="42a0">primitives: strings, booleans, numbers, null and undefined</span> - <span id="4423">primitives are immutable</span> - <span id="fd1a">refereces: objects (including arrays)</span> - <span id="d581">references are mutable</span> - <span id="65e2">Identify when to use `.` vs `[]` when accessing values of an object</span> - <span id="eb9d">dot syntax `object.key`</span> - <span id="8e03">easier to read</span> - <span id="1662">easier to write</span> - <span id="5796">cannot use variables as keys</span> - <span id="588a">keys cannot begin with a number</span> - <span id="5501">bracket notation `object["key]`</span> - <span id="5734">allows variables as keys</span> - <span id="76ca">strings that start with numbers can be use as keys</span> - <span id="822a">Write an object literal with a variable key using interpolation</span> #### put it in brackets to access the value of the variable, rather than just make the value that string let a = "b"; let obj = { a: "letter_a", [a]: "letter b" } - <span id="e4fc">Use the `obj[key] !== undefined` pattern to check if a given variable that contains a key exists in an object</span> - <span id="0baa">can also use `(key in object)` syntax interchangeably (returns a boolean)</span> - <span id="ad4c">Utilize Object.keys and Object.values in a function</span> - <span id="b548">`Object.keys(obj)` returns an array of all the keys in `obj`</span> - <span id="f39b">`Object.values(obj)` returns an array of the values in `obj`</span> #### Iterate through an object using a `for in` loop let printValues = function(obj) { for (let key in obj) { let value = obj[key]; console.log(value); } } #### Define a function that utilizes `...rest` syntax to accept an arbitrary number of arguments - <span id="58a5">`...rest` syntax will store all additional arguments in an array</span> - <span id="5f8b">array will be empty if there are no additional arguments</span> <!-- --> let myFunction = function(str, ...strs) { console.log("The first string is " + str); console.log("The rest of the strings are:"); strs.forEach(function(str) { console.log(str); }) } #### Use `...spread` syntax for Object literals and Array literals let arr1 = ["a", "b", "c"]; let longer = [...arr1, "d", "e"]; // ["a", "b", "c", "d", "e"] // without spread syntax, this would give you a nested array let withoutRest = [arr1, "d", "e"] // [["a", "b", "c"], "d", "e"] - <span id="118b">Destructure an array to reference specific elements</span> <!-- --> let array = [35, 9]; let [firstEl, secondEl] = array; console.log(firstEl); // => 35 console.log(secondEl); // => 9 // can also destructure using … syntax let array = [35, 9, 14]; let [head, …tail] = array; console.log(head); // => 35 console.log(tail); // => [9, 14] -Destructure an object to reference specific values - if you want to use variable names that don 't match the keys, you can use aliasing - `let { oldkeyname: newkeyname } = object` - rule of thumb— only destructure values from objects that are two levels deep `` `javascript let obj = { name: "Wilfred", appearance: ["short", "mustache"], favorites: { color: "mauve", food: "spaghetti squash", number: 3 } } // with variable names that match keys let { name, appearance } = obj; console.log(name); // "Wilfred" console.log(appearance); // ["short", "mustache"] // with new variable names (aliasing) let {name: myName, appearance: myAppearance} = obj; console.log(myName); // "Wilfred" console.log(myAppearance); // ["short", "mustache"] // in a function call let sayHello = function({name}) { console.log("Hello, " + name); // "Hello Wilfred" } // nested objects + aliasing let { favorites: {color, food: vegetable} } = obj; console.log(color, vegetable); //=> mauve spaghetti squash #### Write a function that accepts a array as an argument and returns an object representing the count of each character in the array // let elementCounts = function(array) { let obj = {}; array.forEach(function(el) { if (el in obj) obj[el] += 1; else obj[el] = 1; }) return obj; } console.log(elementCounts(["e", "f", "g", "f"])); // => Object {e: 1, f: 2, g: 1} ### Callbacks Lesson Concepts - <span id="a16e">Given multiple plausible reasons, identify why functions are called “First Class Objects” in JavaScript.</span> - <span id="0d89">they can be stored in variables, passed as arguments to other functions, and serve as return value for a function</span> - <span id="e458">supports same basic operations as other types (strings, bools, numbers)</span> - <span id="6af2">higher-order functions take functions as arguments or return functions as values</span> - <span id="adbe">Given a code snippet containing an anonymous callback, a named callback, and multiple `console.log`s, predict what will be printed</span> - <span id="e93b">what is this referring to?</span> - <span id="c73f">Write a function that takes in a value and two callbacks. The function should return the result of the callback that is greater.</span> <!-- --> let greaterCB = function(val, callback1, callback2) { if (callback1(val) > callback2(val)) { return callback1(val); } return callback2(val); } let greaterCB = function(val, callback1, callback2) { if (callback1(val) > callback2(val)) { return callback1(val); } return callback2(val); } // shorter version let greaterCB = function(val, callback1, callback2) { return Math.max(callback1(val), callback2(val)); } // even shorter, cause why not let greaterCB = (val, cb1, cb2) => Math.max(cb1(val), cb2(val)); -Write a function, myMap, that takes in an array and a callback as arguments.The function should mimic the behavior of `Array#map`. `` `javascript let myMap = function(array, callback) { let newArr = []; for (let i = 0; i < array.length; i ++) { mapped = callback(array[i], i, array); newArr.push(mapped); } return newArr; } console.log( myMap([16,25,36], Math.sqrt)); // => [4, 5, 6]; let myMapArrow = (array, callback) => { let newArr = []; array.forEach( (ele, ind, array) => { newArr.push(callback(ele, ind, array)); }) return newArr; } console.log(myMapArrow([16,25,36], Math.sqrt)); // => [4, 5, 6]; #### Write a function, myFilter, that takes in an array and a callback as arguments. The function should mimic the behavior of `Array#filter`. let myFilter = function(array, callback) { let filtered = []; for (let i = 0; i < array.length; i++) { if (callback(array[i])) { filtered.push(array[i], i, array); } } } #### Write a function, myEvery, that takes in an array and a callback as arguments. The function should mimic the behavior of `Array#every`. let myEvery = function(array, callback) { for (let i = 0; i < array.length; i++) { if (!callback(array[i], i, array)) { return false } } return true; } // with arrow function syntax let myEvery = (array, callback) => { for (let i = 0; i < array.length; i++) { if (!callback(array[i])) { return false } } return true; } ### Scope Lesson Concepts - <span id="685f">Identify the difference between `const`, `let`, and `var` declarations</span> - <span id="7308">`const` - cannot reassign variable, scoped to block</span> - <span id="e07f">`let` - can reassign variable, scoped to block</span> - <span id="670d">`var` - outdated, may or may not be reassigned, scoped to function. can be not just reassigned, but also redeclared!</span> - <span id="b254">a variable will always evaluate to the value it contains regardless of how it was declared</span> - <span id="aace">Explain the difference between `const`, `let`, and `var` declarations</span> - <span id="5d79">`var` is function scoped—so if you declare it anywhere in a function, the declaration (but not assignment) is "hoisted"</span> - <span id="a54b">so it will exist in memory as “undefined” which is bad and unpredictable</span> - <span id="2dc2">`var` will also allow you to redeclare a variable, while `let` or `const` will raise a syntax error. you shouldn't be able to do that!</span> - <span id="1f74">`const` won't let you reassign a variable, but if it points to a mutable object, you will still be able to change the value by mutating the object</span> - <span id="2c20">block-scoped variables allow new variables with the same name in new scopes</span> - <span id="c3d4">block-scoped still performs hoisting of all variables within the block, but it doesn’t initialize to the value of `undefined` like `var` does, so it throws a specific reference error if you try to access the value before it has been declared</span> - <span id="f797">if you do not use `var` or `let` or `const` when initializing, it will be declared as global—THIS IS BAD</span> - <span id="2212">if you assign a value without a declaration, it exists in the global scope (so then it would be accessible by all outer scopes, so bad). however, there’s no hoisting, so it doesn’t exist in the scope until after the line is run</span> - <span id="86d1">Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining</span> - <span id="25dc">scope of a program means the set of variables that are available for use within the program</span> - <span id="bcaf">global scope is represented by the `window` object in the browser and the `global` object in Node.js</span> - <span id="7bc3">global variables are available everywhere, and so increase the risk of name collisions</span> - <span id="5172">local scope is the set of variables available for use within the function</span> - <span id="ed33">when we enter a function, we enter a new scope</span> - <span id="c21b">includes functions arguments, local variables declared inside function, and any variables that were already declared when the function is defined (hmm about that last one)</span> - <span id="51ad">for blocks (denoted by curly braces `{}`, as in conditionals or `for` loops), variables can be block scoped</span> - <span id="09f1">inner scope does not have access to variables in the outer scope</span> - <span id="587e">scope chaining — if a given variable is not found in immediate scope, javascript will search all accessible outer scopes until variable is found</span> - <span id="6ea5">so an inner scope can access outer scope variables</span> - <span id="5188">but an outer scope can never access inner scope variables</span> #### Define an arrow function let arrowFunction = (param1, param2) => { let sum = param1 + param2; return sum; } // with 1 param you can remove parens around parameters let arrowFunction = param => // if your return statement is one line, you can use implied return let arrowFunction = param => param + 1; // you don’t have to assign to variable, can be anonymous // if you never need to use it again param => param + 1; #### Given an arrow function, deduce the value of `this` without executing the code - <span id="0ee6">arrow functions are automatically bound to the context they were declared in.</span> - <span id="9fb2">unlike regular function which use the context they are invoked in (unless they have been bound using `Function#bind`).</span> - <span id="683a">if you implement an arrow function as a method in an object the context it will be bound to is NOT the object itself, but the global context.</span> - <span id="e9e1">so you can’t use an arrow function to define a method directly</span> <!-- --> let obj = { name: “my object”, unboundFunc: function () { return this.name; // this function will be able to be called on different objects }, boundToGlobal: () => { return this.name; // this function, no matter how you call it, will be called // on the global object, and it cannot be rebound // this is because it was defined using arrow syntax }, makeFuncBoundToObj: function() { return () => { return this.name; } // this function will return a function that will be bound // to the object where we call the outer method // because the arrow syntax is nested inside one of this // function's methods, it cannot be rebound }, makeUnboundFunc: function() { return function() { return this.name; } //this function will return a function that will still be unbound }, immediatelyInvokedFunc: function() { return this.name; }(), // this property will be set to the return value of this anonymous function, // which is invoked during the object definition; // basically, it's a way to check the context inside of an object, at this moment innerObj: { name: "inner object", innerArrowFunc: () => { return this.name; } // the context inside a nested object is not the parent, it's still // the global object. entering an object definition doesn't change the context }, let otherObj = { name: "my other object" } // call unboundFunc on obj, we get "my object" console.log("unboundFunc: ", obj.unboundFunc()); // => "my object" // assign unboundFunc to a variable and call it let newFunc = obj.unboundFunc; // this newFunc will default to being called on global object console.log("newFunc: ",newFunc()); // => undefined // but you could bind it directly to a different object if you wanted console.log("newFunc: ", newFunc.bind(otherObj)()); // "my other object" // meanwhile, obj.boundToGlobal will only ever be called on global object console.log("boundToGlobal: ", obj.boundToGlobal()); //=> undefined let newBoundFunc = obj.boundToGlobal; console.log("newBoundFunc: ", newBoundFunc()); // => undefined // even if you try to directly bind to another object, it won't work! console.log("newBoundFunc: ", newBoundFunc.bind(otherObj)()); // => undefined // let's make a new function that will always be bound to the context // where we call our function maker let boundFunc = obj.makeFuncBoundToObj();// note that we're invoking, not just assigning console.log("boundFunc: ", boundFunc()); // => "my object" // we can't rebind this function console.log("boundFunc: ", boundFunc.bind(otherObj)()) // =>"my object" // but if I call makeFuncBoundToObj on another context // the new bound function is stuck with that other context let boundToOther = obj.makeFuncBoundToObj.bind(otherObj)(); console.log("boundToOther: ", boundToOther()); // => "my other object" console.log("boundToOther: ", boundToOther.bind(obj)()) // "my other object" // the return value of my immediately invoked function // shows that the context inside of the object is the // global object, not the object itself // context only changes inside a function that is called // on an object console.log("immediatelyInvokedFunc: ", obj.immediatelyInvokedFunc); // => undefined // even though we're inside a nested object, the context is // still the same as it was outside the outer object // in this case, the global object console.log("innerArrowFunc: ", obj.innerObj.innerArrowFunc()); // => undefined } -Implement a closure and explain how the closure effects scope - a closure is "the combination of a function and the lexical environment within which that function was declared" - alternatively, "when an inner function uses or changes variables in an outer function" - closures have access to any variables within their own scope + scope of outer functions + global scope— the set of all these available variables is "lexical environemnt" - closure keeps reference to all variables ** even if the outer function has returned ** -each function has a private mutable state that cannot be accessed externally - the inner function will maintain a reference to the scope in which it was declared.so it has access to variables that were initialized in any outer scope— even if that scope - if a variable exists in the scope of what could have been accessed by a function(e.g.global scope, outer function, etc), does that variable wind up in the closure even if it never got accessed ? - if you change the value of a variable(e.g.i++) you will change the value of that variable in the scope that it was declared in `` `javascript function createCounter() { // this function starts a counter at 0, then returns a // new function that can access and change that counter // // each new counter you create will have a single internal // state, that can be changed only by calling the function. // you can't access that state from outside of the function, // even though the count variable in question is initialized // by the outer function, and it remains accessible to the // inner function after the outer function returns. let count = 0; return function() { count ++; return count; } } let counter = createCounter(); console.log(counter()); //=> 1 console.log(counter()); //=> 2 // so the closure here comes into play because // an inner function is accessing and changing // a variable from an outer function // the closure is the combination of the counter // function and the all the variables that existed // in the scope that it was declared in. because // inner blocks/functions have access to outer // scopes, that includes the scope of the outer // function. // so counter variable is a closure, in that // it contains the inner count value that was // initialized by the outer createCounter() function // count has been captured or closed over // this state is private, so if i run createCounter again // i get a totally separate count that doesn't interact // with the previous one and each of the new functions // will have their own internal state based on the // initial declaration in the now-closed outer function let counter2 = createCounter(); console.log(counter2()); // => 1 // if i set a new function equal to my existing counter // the internal state is shared with the new function let counter3 = counter2; console.log(counter3()); #### Define a method that references `this` on an object literal - <span id="ae61">when we use `this` in a method it refers to the object that the method is invoked on</span> - <span id="29a2">it will let you access other pieces of information from within that object, or even other methods</span> - <span id="c41d">method style invocation — `object.method(args)` (e.g. built in examples like `Array#push`, or `String#toUpperCase`)</span> - <span id="c99d">context is set every time we invoke a function</span> - <span id="fa43">function style invocation sets the context to the global object no matter what</span> - <span id="8cc1">being inside an object does not make the context that object! you still have to use method-style invocation</span> - <span id="f578">Utilize the built in `Function#bind` on a callback to maintain the context of this</span> - <span id="26ba">when we call bind on a function, we get an exotic function back — so the context will always be the same for that new function</span> <!-- --> let cat = { purr: function () { console.log("meow"); }, purrMore: function () { this.purr(); }, }; let sayMeow = cat.purrMore; console.log(sayMeow()); // TypeError: this.purr is not a function // we can use the built in Function.bind to ensure our context, our this, // is the cat object let boundCat = sayMeow.bind(cat); boundCat(); // prints "meow" -`bind` can also work with arguments, so you can have a version of a function with particular arguments and a particular context.the first arg will be the context aka the `this` you want it to use.the next arguments will be the functions arguments that you are binding - if you just want to bind it to those arguments in particular, you can use `null` as the first argument, so the context won 't be bound, just the arguments - Given a code snippet, identify what `this` refers to - important to recognize the difference between scope and context - scope works like a dictionary that has all the variables that are available within a given block, plus a pointer back the next outer scope(which itself has pointers to new scopes until you reach the global scope.so you can think about a whole given block 's scope as a kind of linked list of dictionaries) (also, this is not to say that scope is actually implemented in this way, that is just the schema that i can use to understand it) - context refers to the value of the `this` keyword - the keyword `this` exists in every function and it evaluates to the object that is currently invoking that function -so the context is fairly straightforward when we talk about methods being called on specific objects - you could, however, call an object 's method on something other than that object, and then this would refer to the context where/how it was called, e.g. `` `javascript let dog = { name: "Bowser", changeName: function () { this.name = "Layla"; }, }; // note this is **not invoked** - we are assigning the function itself let change = dog.changeName; console.log(change()); // undefined // our dog still has the same name console.log(dog); // { name: 'Bowser', changeName: [Function: changeName] } // instead of changing the dog we changed the global name!!! console.log(this); // Object [global] {etc, etc, etc, name: 'Layla'} ### CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP! - <span id="b960">could throw an error if it expects this to have some other method or whatever that doesn’t exist</span> - <span id="1880">you could also overwrite values or assign values to exist in a space where they should not exist</span> - <span id="c9f0">if you call a function as a callback, it will set `this` to be the outer function itself, even if the function you were calling is a method that was called on a particular object</span> <!-- --> let cat = { purr: function () { console.log("meow"); }, purrMore: function () { this.purr(); }, }; global.setTimeout(cat.purrMore, 5000); // 5 seconds later: TypeError: this.purr is not a function we can use strict mode with `"use strict";` this will prevent you from accessing the global object with `this` in functions, so if you try to call `this` in the global context and change a value, you will get a type error, and the things you try to access will be undefined let sayMeow = cat.purrMore; console.log(sayMeow()); // TypeError: this.purr is not a function // we can use the built in Function.bind to ensure our context, our this , // is the cat object let boundCat = sayMeow.bind(cat); boundCat(); // prints “meow” -`bind` can also work with arguments, so you can have a version of a function with particular arguments and a particular context.the first arg will be the context aka the `this` you want it to use.the next arguments will be the functions arguments that you are binding - if you just want to bind it to those arguments in particular, you can use `null` as the first argument, so the context won 't be bound, just the arguments - Given a code snippet, identify what `this` refers to - important to recognize the difference between scope and context - scope works like a dictionary that has all the variables that are available within a given block, plus a pointer back the next outer scope(which itself has pointers to new scopes until you reach the global scope.so you can think about a whole given block 's scope as a kind of linked list of dictionaries) (also, this is not to say that scope is actually implemented in this way, that is just the schema that i can use to understand it) - context refers to the value of the `this` keyword - the keyword `this` exists in every function and it evaluates to the object that is currently invoking that function -so the context is fairly straightforward when we talk about methods being called on specific objects - you could, however, call an object 's method on something other than that object, and then this would refer to the context where/how it was called, e.g. `` `javascript let dog = { name: "Bowser", changeName: function () { this.name = "Layla"; }, }; // note this is **not invoked** - we are assigning the function itself let change = dog.changeName; console.log(change()); // undefined // our dog still has the same name console.log(dog); // { name: 'Bowser', changeName: [Function: changeName] } // instead of changing the dog we changed the global name!!! console.log(this); // Object [global] {etc, etc, etc, name: 'Layla'} - <span id="48ab">CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP!</span> - <span id="857d">could throw an error if it expects this to have some other method or whatever that doesn’t exist</span> - <span id="e09e">you could also overwrite values or assign values to exist in a space where they should not exist</span> - <span id="b6e0">if you call a function as a callback, it will set `this` to be the outer function itself, even if the function you were calling is a method that was called on a particular object</span> > we can use strict mode with `"use strict";` this will prevent you from accessing the global object with `this` in functions, so if you try to call `this` in the global context and change a value, you will get a type error, and the things you try to access will be undefined ### POJOs #### 1. Label variables as either Primitive vs. Reference Javascript considers most data types to be ‘primitive’, these data types are immutable, and are passed by value. The more complex data types: Array and Object are mutable, are considered ‘reference’ data types, and are passed by reference. - <span id="6f83">Boolean — Primitive</span> - <span id="6556">Null — Primitive</span> - <span id="0048">Undefined — Primitive</span> - <span id="8dec">Number — Primitive</span> - <span id="684c">String — Primitive</span> - <span id="41c1">Array — Reference</span> - <span id="9371">Object — Reference</span> - <span id="64c8">Function — Reference</span> #### 2. Identify when to use . vs \[\] when accessing values of an object let obj = { "one": 1, "two": 2 }; // Choose the square brackets property accessor when the property name is determined at // runtime, or if the property name is not a valid identifier let myKey = "one"; console.log(obj[myKey]); // Choose the dot property accessor when the property name is known ahead of time. console.log(obj.two); #### 3. Write an object literal with a variable key using interpolation let keyName = "two"; // If the key is not known, you can use an alternative `[]` syntax for // object initialization only let obj2 = { [keyName]: 2 } console.log(obj2); #### 4. Use the obj\[key\] !== undefined pattern to check if a given variable that contains a key exists in an object function doesKeyExist(obj, key) { // obj[key] !== undefined // or: return key in obj; } let course = { bootcamp: 'Lambda', course: 'Bootcamp Prep' } console.log(doesKeyExist(course, 'course')); // => true console.log(doesKeyExist(course, 'name')); // => false #### 5. Utilize Object.keys and Object.values in a function function printKeys(object) { return Object.keys(object); } function printValues(object) { return Object.values(object); } console.log(printKeys({ dog: "Strelka", dog2: "Belka" })); console.log(printValues({ dog: "Strelka", dog2: "Belka" })); #### 6. Iterate through an object using a for in loop let player = { name: "Sergey", skill: "hockey" }; for (let key in player) { console.log(key, player[key]); } console.log(Object.entries(player)); #### 7. Define a function that utilizes …rest syntax to accept an arbitrary number of arguments function restSum(...otherNums) { let sum = 0; console.log(otherNums); otherNums.forEach(function(num) { sum += num; }); return sum; } console.log(restSum(3, 5, 6)); // => 14 console.log(restSum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // => 45 console.log(restSum(0)); // => 0 #### 8. Use …spread syntax for Object literals and Array literals let numArray = [1, 2, 3]; let moreNums = [...numArray, 4, 5, 6] console.log(moreNums); let shoe = { color: "red", size: 10 }; let newShoe = { ...shoe, brand: "Nike", size: 12 }; console.log(newShoe); newShoe.color = "black"; console.log(newShoe); console.log(shoe); #### 9. Destructure an array to reference specific elements let arr = ['one', 'two', 'three']; let [first] = arr; console.log(first); #### 10. Destructure an object to reference specific values let me = { name: "Ian", instruments: ['bass', 'synth', 'guitar'], siblings: { brothers: ['Alistair'], sisters: ['Meghan'] } } let { name, instruments: musical_instruments, siblings: { sisters } } = me; console.log(name); console.log(musical_instruments); console.log(sisters); #### 11. Write a function that accepts a string as an argument and returns an object representing the count of each character in the array function charCount(inputString) { let res = inputString.split("").reduce(function(accum, el) { if (el in accum) { accum[el] = accum[el] + 1; } else { accum[el] = 1; } return accum; }, {}) return res; } console.log(charCount('aaabbbeebbcdkjfalksdfjlkasdfasdfiiidkkdingds')); ### Review of Concepts #### 1. Identify the difference between const, let, and var declarations #### 2. Explain the difference between const, let, and var declarations var a = "a"; - <span id="2dba">`var` is the historical keyword used for variable declaration.</span> - <span id="50d3">`var` declares variables in function scope, or global scope if not inside a function.</span> - <span id="4bc8">We consider `var` to be deprecated and it is never used in this course.</span> <!-- --> let b = "b"; - <span id="8bab">`let` is the keyword we use most often for variable declaration.</span> - <span id="0642">`let` declares variables in block scope.</span> - <span id="bf7b">variables declared with `let` are re-assignable.</span> <!-- --> const c = "c"; - <span id="e199">`const` is a specialized form of `let` that can only be used to **initialize** a variable.</span> - <span id="4522">Except when it is declared, you cannot assign to a `const` variable.</span> - <span id="4e5a">`const` scopes variables the same way that `let` does.</span> #### 3. Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining Consider this `run` function, inside which `foo` and `bar` have `function scope` . `i` and `baz` are scoped to the block expression. // function and block scope in this example function run() { var foo = "Foo"; let bar = "Bar"; console.log(foo, bar); { console.log(foo); let baz = "Bazz"; console.log(baz); } console.log(baz); // ReferenceError } run(); Notice that referencing `baz` from outside it's block results in JavaScript throwing a ReferenceError. Consider this `run` function, inside of which `foo` has `function scope` . function run() { console.log(foo); // undefined var foo = "Foo"; console.log(foo); // Foo } run(); Consider this `func1` function and it's nested scopes. // global scope function func1(arg1) { // func1 scope return function func2(arg2) { // func2 scope return function func3(arg3) { // func3 scope console.log(arg1, arg2, arg3); } } } #### 6. Implement a closure and explain how the closure effects scope const adder = (arg1) => { return (arg2) => { return arg1 + arg2; } }; const func2 = adder(2); const result = func2(2); console.log(result); // => 4; #### 4. Define an arrow function const returnValue = (val) => val; This simple construct will create a function that accepts `val` as a parameter, and returns `val` immediately. We do not need to type `return val` , because this is a single-line function. Identically, we could write const returnValue = (val) => { return val; }; #### 5. Given an arrow function, deduce the value of `this` without executing the code function fDAdder(arr) { console.log(this); return arr.reduce((acc, ele) => { return acc + ele; }); }; fDAdder([1, 2, 4, 6]); If we use a function declaration style function, the `this` variable is set to the `global` object (i.e. `Object [global]` in Node. JS and `Window` in your browser). const adder = (arr) => { console.log(this); arr.reduce((acc, ele) => sum += ele); }; adder([1, 2, 4, 6]); In this example, we use a fat arrow style function. Note that when we declare a functions like this `this` becomes #### 7. Define a method that references this on an object literal const pokemon = { firstname: 'Pika', lastname: 'Chu', getPokeName: function() { const fullname = `${this.firstname} ${this.lastname}`; return fullname; } }; console.log(pokemon.getPokeName()); #### 8. Utilize the built in Function\#bind on a callback to maintain the context of `this` const pokemon = { firstname: 'Pika', lastname: 'Chu', getPokeName: function() { const fullname = `${this.firstname} ${this.lastname}`; return fullname; } }; const logPokemon = pokemon.getPokename.bind(pokemon); logPokemon('sushi', 'algorithms'); // Pika Chu loves sushi and algorithms #### 9. Given a code snippet, identify what `this` refers to function Person(name) { // this.name = name; // let that = this; setTimeout(function() { // console.log(this); // => Window // console.log(that); // => [Function] => Person // this.sayName(); // => no method error that.sayName(); }, 1000); } Person.prototype.sayName = function() { console.log(this.name); }; const jane = new Person("Jane"); ### Check Out My New Blog: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Stackbit Web-Dev-HubTheme</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 27, 2021](https://medium.com/p/81c4d839b827). <a href="https://medium.com/@bryanguner/fundamental-javascript-concepts-you-should-understand-81c4d839b827" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,77 @@ Mutability And Reference VS Privative Types in JavaScript ========================================================= Mutability && Primitive && Reference Examples ------------------------------------------------------------------------ ### Mutability And Reference VS Privative Types in JavaScript ### Mutability && Primitive && Reference Examples <figure><img src="https://cdn-images-1.medium.com/max/800/0*J3mKJ-lWgfS3qi5E.png" class="graf-image" /></figure><a href="https://doesitmutate.xyz/" class="markup--anchor markup--p-anchor"><strong><em>Mutability</em></strong></a> In JavaScript, `String` values are immutable, which means that they cannot be altered once created. For example, the following code: var myStr = "Bob"; myStr[0] = "J"; cannot change the value of `myStr` to `Job`, because the contents of `myStr` cannot be altered. Note that this does *not* mean that `myStr` cannot be changed, just that the individual characters of a string literal cannot be changed. The only way to change `myStr` would be to assign it with a new string, like this: var myStr = "Bob"; myStr = "Job"; ### Objects are passed by reference, are mutable, and can be modified by our functions: function rotateLeft(arr, num) { for (let i = 0; i < num; i++) { let el = arr.pop(); arr.unshift(el); } } let myArr = [1, 2, 3, 4, 5, ]; rotateLeft(myArr, 2); console.log(myArr); Strings are passed by value, are immutable, and a new array is constructed and returned, because it cannot be changed in place. function rotateString(str, num) { return str.slice(num) + str.slice(0, num); } let str = "foobar"; let ret = rotateString(str, 3); console.log(str); console.log(ret); ### Dereferencing #### Arrays To dereference an array, use `let [var1, var2]` syntax. let arr = ['one', 'two', 'three']; let [first] = arr; console.log(first); #### Objects To dereference attributes from an object, use `let {}` syntax. ### Primitive Data Types in Depth <figure><img src="https://cdn-images-1.medium.com/max/2560/1*mRr-4QeqbjcMUTtQQNOlEw.png" class="graf-image" /></figure> ### Check Out My New Blog: <a href="https://best-celery-b2d7c.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://best-celery-b2d7c.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Bryan</em> best-celery-b2d7c.netlify.app</a><a href="https://best-celery-b2d7c.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 27, 2021](https://medium.com/p/5294422db4b0). <a href="https://medium.com/@bryanguner/mutability-and-reference-vs-privative-types-in-javascript-5294422db4b0" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,232 @@ Objects In JavaScript ===================== The object is a data structure that stores other data, similar to how an array stores elements. ------------------------------------------------------------------------ ### Objects In JavaScript #### The `object` is a data structure that stores other data, similar to how an array stores elements. <figure><img src="https://cdn-images-1.medium.com/max/800/0*p8Mho_ONNupan--Z.png" class="graf-image" /></figure>- <span id="5c25">The object differs in that each `value` stores in an obj is associated with a `key`.</span> ### **The Object** In other programming languages, objects are referred to as, “dictionaries”, “maps”, or “associative arrays”. - <span id="53af">Objects are indexed with `keys` instead of numbers.</span> - <span id="2cc0">Order is not guaranteed within an Object.</span> - <span id="ac45">Objects are defined by using curly braces `{}`</span> - <span id="2ca3">You can think of Objects as tables.</span> #### **Setting Keys and Values** - <span id="d19c">We assign values to an object by defining the name of the key in brackets and assigning it to a value.</span> <!-- --> > car { color: "Blue", seats: 2 } > "color" in car; true > "model" in car; false - <span id="6499">If we try to access a key that has not yet been assigned within an object we will output undefined.</span> - <span id="7d01">The **preferred method** for checking to see if an object exists at a key is to use the `in` operator.</span> #### **Using Variables as Keys** - <span id="e833">It is useful to set a variable as a key because variables can be re-assigned new values — this way we can quickly access different data and also create new key/value pairs.</span> ### Using Different Notations **Dot notation:** - <span id="bec1">Property identifies can only be alphanumeric (and `_` and `$`)</span> - <span id="d353">Property identifiers cannot start with a number.</span> - <span id="0c2b">Property identifiers cannot contain variables.</span> - <span id="b348">OK — `obj.prop_1`, `obj.prop$`</span> - <span id="bebd">Not OK — `obj.1prop`, `obj.prop name`</span> **Bracket notation:** - <span id="1e9e">Property identifiers have to be a String or a variable that references a String.</span> - <span id="a2b7">It is okay to use variables, spaces, and Strings that start with numbers</span> - <span id="6893">OK — `obj["1prop"]`, `obj["prop name"]`</span> <!-- --> > let dog = {}; undefined > dog.bark = "Bowowowo"; "Bowowowowo" > dog.bark "Bowowowo" > dog { bark: "Bowowowowo" } - <span id="ec54">We can also use **dot notation** **“.”** to access key/value pairs in an object.</span> - <span id="cd22">One thing to note is that when using dot notation, we do not have to use string quotes as the key.</span> #### **Bracket Notation vs Dot Notation** **DotBracket**Easier To ReadYou can use variables as keys! Easier To Write b/c do not need Quotations. Okay to use variables and Strings that start with numbers.Cannot access with VariablesKeys cannot contain numbers as their first character - <span id="8f18">**When accessing object keys**: Bracket notation needs to refer to that key in quotations, dot notation doesn’t.</span> - <span id="83be">**When accessing object keys via a variable**: Bracket notation can refer to that key w/o use of quotations, dot notation can’t do this at all.</span> <!-- --> - <span id="872f">As illustrated above, the dot notation cannot access a variable key — since it takes a **literal** interpretation of the key.</span> You can put an object together in a single statement. let myDog = { name: "Fido", type: "Doge", age: 2, favoriteToys: ["bone", "ball"], }; #### **Operator Precedence Revisited** - <span id="ffba">The concept of Operator Precedence also applies to objects.</span> - <span id="79e4">There are two types of associativity:</span> - <span id="1883">`Right Associativity` : When code is evaluated right to left.</span> <!-- --> a = b = 1; - Since **assignment of variables** takes lowest precedence, we end up evaluating b = 1 first before a = b. - <span id="3d7c">`Left Associativity` : When code is evaluated left to right.</span> <!-- --> let id = "header"; let element = document.getElementById(id).value; - We first resolve the document variable, then use dot notation to retrieve the getElementById function, we eval it's arguments, access it's value, and then retrieve assignment \(the lowest precedence\). ### Iterating Through Objects Because objects store **unordered** key-value pairs, we do not rely on indices to access values; instead, we rely on our keys. #### **A New Kind of For Loop** > SYNTAX: for (let variable in object) {statement}; - <span id="6607">We use a special syntax to iterate through each key of an object called a `for-in loop`.</span> #### **Methods vs Functions** A `Method` is a function that belongs to an object. Every method is a function, but not every function is a method. myFunc is a function myObject.myFunc is a method of the object myObject myObject["myFunc"] is a method of the object myObject - <span id="417a">**Methods** are just a key-value pair where the **key is the function name and the value is the function definition**.</span> <!-- --> - <span id="cf41">To invoke these methods we just need to specify which object is calling that method.</span> <!-- --> myObject.methodName(); #### **Useful Object Methods** - <span id="dd4b">`Object.keys()` : A method that allows us to iterate through keys, it accepts an obj as the argument and returns an array of the keys.</span> - <span id="0d49">`Object.values()` : Method that accepts an object as the argument and returns an array of the values.</span> #### **Iterating through an Object’s keys & values** - <span id="b2aa">`Object.entries` : Method that accepts an object as the argument and returns an array of the \[key, value\] pairs within.</span> <!-- --> > Object.entries(cat)[['name', 'Freyja'], ['color', 'orange']] ### References vs Primitives #### **Primitives vs Objects** So far we have learned about 6 different data types: - <span id="9e34">**Primitive**: Boolean, Null, Undefined, Number, String.</span> - <span id="a9e1">**Reference**: Object (Arrays are a type of object)</span> - <span id="4684">Remember that **primitive** types are immutable!</span> #### **Immutability** - <span id="7e6d">When we reassign primitives we simply have our variable point elsewhere in memory.</span> - <span id="701f">In a nutshell, **immutability** cannot change values in memory, but only reassign where our variables are pointing to.</span> #### **Mutability** - <span id="0930">If we change either cat1 or cat2, our computer memory will change because they are both pointing at the same memory location.</span> ### Rest and Spread #### **Using the Spread Operator and Rest Parameter Syntax** **Accepting Arguments** - <span id="f131">Just keep in mind that the function will still run even if it is not passed any arguments.</span> - <span id="ecdf">Parameters will take just as many arguments as they need even if more than enough is offered.</span> - <span id="ff36">We will encounter an error if there are not enough parameters ( > 0).</span> #### **Utilizing Rest Parameters** - <span id="6379">`Rest Parameter Syntax` : Allows us to capture all of a function's incoming arguments into an array.</span> - <span id="0807">Only the last parameter can be a rest parameter.</span> #### **Utilizing Spread Syntax** - <span id="71ff">**Spread Operator**: This allows us to break down a data type into the elements that make it up.</span> - <span id="6ef0">Takes a data type (i.e. array, obj) and spreads the values of that type where elements are expected.</span> - <span id="15e5">Takes iterable data and spreads the elements of that type where arguments are expected.</span> <!-- --> let numArray = [1, 2, 3]; // here we are taking `numArray` and *spreading* it into a new array where // comma separated elements are expected to be let moreNums = [...numArray, 4, 5, 6]; > moreNums // => [1, 2, 3, 4, 5, 6] **With Objects** ------------------------------------------------------------------------ ### Learn More On My Blog: <a href="https://bgoonz-blog.netlify.app/" class="markup--anchor markup--mixtapeEmbed-anchor" title="https://bgoonz-blog.netlify.app/"><strong>Web-Dev-Hub</strong><br /> <em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href="https://bgoonz-blog.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"></a> By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 27, 2021](https://medium.com/p/b212486dade6). <a href="https://medium.com/@bryanguner/objects-in-javascript-b212486dade6" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,12 @@ It's my genuine pleasure... more coming soon! ============================================= ------------------------------------------------------------------------ It's my genuine pleasure... more coming soon! By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on [May 28, 2021](https://medium.com/p/f560ed8a641b). <a href="https://medium.com/@bryanguner/its-my-genuine-pleasure-more-coming-soon-f560ed8a641b" class="p-canonical">Canonical link</a> Exported from [Medium](https://medium.com) on September 23, 2021. Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.Sorry, we could not display the changes to this file because there were too many other changes to display.