{"componentChunkName":"component---src-templates-docs-js","path":"/docs/tools/archive/","result":{"data":{"sitePage":{"id":"SitePage /docs/tools/archive/"}},"pageContext":{"url":"/docs/tools/archive/","relativePath":"docs/tools/archive.md","relativeDir":"docs/tools","base":"archive.md","name":"archive","frontmatter":{"title":"Archive","weight":0,"excerpt":"more tools that I have created or collaborated on.","seo":{"title":"Embed Archive","description":"embeded developer tools and utilities","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Archive

\n\n
\n
\n
\n

Archive

\n
\n\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n

Resource Archive

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Google Drive

\n\n
\n
\n
\n
\n
\n

Cloud Storage

\n
\n

Up to 1TB of cloud Storage for file sharing!

\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Internet Archive

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n

Lambda Student Site

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Bass Station CSS Showcase

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Interview

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Speach Recognition api

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

The Algos Bgoonz Branch

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Markdown Templates

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

CURL

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n

Text Tools

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Ternary Converter

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Github HTML Render from link

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Form Builder GUI

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n

Border Builder

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Archives

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Original Blog Site

\n
\n
\n
\n
\n\n
\n
\n
\n
","pages":[{"url":"/","relativePath":"index.md","relativeDir":"","base":"index.md","name":"index","frontmatter":{"title":"Web Dev Hub Home","sections":[{"section_id":"Intro","type":"section_hero","title":"I am a musician, electrical engineer & web developer","image":"images/api-c99e353f761d318322c853c03ebcf21b.gif","content":"\n\n**Please note that this website is in development and is often broken!**\n\n[](https://www.vagrantup.com/)[![](https://img.icons8.com/color/96/000000/gmail.png)](mailto:bryan.guner@gmail.com)[![](https://img.icons8.com/color/96/000000/youtube.png)](https://www.youtube.com/channel/UC9-rYyUMsnEBK8G8fCyrXXA/videos)[![](https://img.icons8.com/color/96/000000/instagram-new.png)](https://www.instagram.com/bgoonz/?hl=en)[![](https://img.icons8.com/color/96/000000/pinterest--v1.png)](https://www.pinterest.com/bryanguner/\\_saved/)[![](https://img.icons8.com/color/96/000000/linkedin.png)](https://www.linkedin.com/in/bryan-guner-046199128/)\n\n[ ](https://webpack.js.org/)[ ](https://www.adobe.com/products/xd.html)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/a1b7ee1a-11a7-4bd2-a341-2260656e216f/deploy-status)](https://app.netlify.com/sites/bgoonz-blog/deploys)\n\n[![Bryans github activity graph](https://activity-graph.herokuapp.com/graph?username=bgoonz\\&custom_title=This%20is%20Bryans%20Activity\\&hide_border=true\\&theme=chartreuse-dark)](https://github.com/bgoonz/github-readme-activity-graph)\n\n![Jokes](https://readme-jokes.vercel.app/api)\n\n![Python](https://img.shields.io/badge/-Python-05122A?style=flat\\&logo=python) ![HTML](https://img.shields.io/badge/-HTML-05122A?style=flat\\&logo=HTML5) ![CSS](https://img.shields.io/badge/-CSS-05122A?style=flat\\&logo=CSS3\\&logoColor=1572B6) ![JavaScript](https://img.shields.io/badge/-JavaScript-05122A?style=flat\\&logo=javascript)![React](https://img.shields.io/badge/-React-05122A?style=flat\\&logo=react) ![Node.js](https://img.shields.io/badge/-Node.js-05122A?style=flat\\&logo=node.js) ![Visual Studio Code](https://img.shields.io/badge/-Visual%20Studio%20Code-05122A?style=flat\\&logo=visual-studio-code\\&logoColor=007ACC)![Docker](https://img.shields.io/badge/-Docker-05122A?style=flat\\&logo=Docker) ![MongoDB](https://img.shields.io/badge/-MongoDB-05122A?style=flat\\&logo=mongodb) ![PostgreSQL](https://img.shields.io/badge/-PostgreSQL-05122A?style=flat\\&logo=postgresql)![Git](https://img.shields.io/badge/-Git-05122A?style=flat\\&logo=git) ![GitHub](https://img.shields.io/badge/-GitHub-05122A?style=flat\\&logo=github) ![GitLab](https://img.shields.io/badge/-GitLab-05122A?style=flat\\&logo=gitlab) ![Markdown](https://img.shields.io/badge/-Markdown-05122A?style=flat\\&logo=markdown)\n","actions":[{"label":"Contact","url":"https://bgoonz-blog.netlify.app/docs/faq/contact/","style":"secondary","icon_class":"linkedin","new_window":true,"no_follow":false,"type":"action"}]},{"section_id":"features","type":"section_grid","col_number":"three","grid_items":[{"content":"Memoization, Tabulation, and Sorting Algorithms by Example\nWhy is looking at runtime not a reliable method of calculating time\ncomplexity?\n","actions":[{"label":"Get Started","url":"https://bgoonz-blog.netlify.app/docs/data-structures/big-o/","style":"link"}],"title":"A Quick Guide To Big O","image":"images/outdated-packages-732a4523.png","title_url":"https://medium.com/star-gazers/a-quick-guide-to-big-o-notation-memoization-tabulation-and-sorting-algorithms-by-example-803ff193c522"},{"content":"*Python has a built in help function that let's you see a description\nof the source code without having to navigate to it… \"-SickNasty …\nAutor Unknown\" .*\n","actions":[{"label":"View Posts","url":"https://levelup.gitconnected.com/python-study-guide-for-a-native-javascript-developer-5cfdf3d2bdfb","style":"link"}],"image_alt":"python","title":"Python Guide","title_url":"https://levelup.gitconnected.com/python-study-guide-for-a-native-javascript-developer-5cfdf3d2bdfb","image":"images/smiling-maple.png"},{"content":"
\n","actions":[{"label":"Learn More","url":"/docs/tools","style":"link"}],"title":"Guitar Effects Triggering w DTW","title_url":"https://github.com/bgoonz/Revamped-Automatic-Guitar-Effect-Triggering","image":"images/panoramic-owl.png"},{"title_url":"https://bryanguner.medium.com/introductory-react-part-2-cda01615a186","image_alt":"img of dtw","content":"As I learn to build web applications in React I will blog about it in\nthis series in an attempt to capture the questions that a complete\nbeginner might encounter that a more seasoned developer would take for\ngranted!\n","actions":[],"type":"grid_item","title":"Beginner Guide React","image":"images/successful-panda.gif"},{"title_url":"https://dev.to/bgoonz/scope-and-context-in-javascript-5cma","image_alt":"img of react","content":"Scope & Context in JS\n\nThe **scope** of a program in JavaScript is the set of variables that are available for use within the program. \n","actions":[],"type":"grid_item","image":"images/pleasant-birch.png","title":"Scope & Closure"},{"image_alt":"Every idea needs a medium","content":"PostgreSQL Cheat Sheet, Everything You Need to Get Started With VSCode\n+ Extensions & Resources, Super Simple Intro To HTML, Understanding\nGit... etc....\n","actions":[],"type":"grid_item","title":"Web Audio Daw","image":"images/7a8bc98e902a2f6dea90386cdfb154c2-2d55c637.png"}]},{"title":"Current Interests","section_id":"interests","subtitle":"From github repositories to existential questions.","col_number":"three","grid_items":[{"title":"Angolia","title_url":"https://www.algolia.com/doc/","image_alt":"angolia","content":"## Full Text Search\n[Full Text Search](https://www.algolia.com/)\n## \n","actions":[],"type":"grid_item","image":"images/spectacular-turmeric.png"},{"title":"Convolutional Neural Networks","title_url":"https://dev.to/bgoonz/everything-you-need-to-become-a-machine-learner-1cjp","image_alt":"neural networks","content":"Artificial neural networks, usually simply called neural networks, are computing systems vaguely inspired by the biological [neural networks](https://github.com/tensorflow/tensorflow)![](/\\_static/app-assets/neural.PNG)\n","actions":[{"label":"lorem-ipsum","url":"#","style":"link","icon_class":"dev","new_window":false,"no_follow":false}],"type":"grid_item","image":"images/neural.PNG"},{"title":"Jamstack","title_url":"jamstack","image_alt":"jamstack","content":"> Why Jamstack Jamstack is the new standard architecture for the...\n\n\\*\\*\n\n> *web. Using Git workflows and modern build tools, pre-rendered content\n> is served to a CDN and made dynamic through APIs and serverless\n> functions. Technologies in the stack include JavaScript frameworks,\n> Static Site Generators, Headless CMSs, and CDNs.*\n","actions":[],"type":"grid_item","image":"images/jamstack.png"},{"title":"Asynchronous JavaScript","title_url":"lorem-ipsum","image_alt":"lorem-ipsum","content":"The term **asynchronous** refers to two or more objects or events **not** existing or happening at the same time (or multiple related things happening without waiting for the previous one to complete). In computing, the word \"asynchronous\" is used in two major contexts.\n\n","actions":[{"label":"lorem-ipsum","url":"https://bgoonz-blog.netlify.app/docs/javascript/asyncjs/","style":"secondary","icon_class":"dev","new_window":true,"no_follow":false}],"type":"grid_item","image":"images/eventloop.gif"},{"title":"NJ Devils","image_alt":"nj-devils","content":"# New Jersey Devils Hockey Team\n\n### (Hockey in general)\n\n## Team identity\n\n[![](https://upload.wikimedia.org/wikipedia/en/thumb/d/da/OldDevils.png/300px-OldDevils.png)](https://en.wikipedia.org/wiki/File:OldDevils.png)\n\nThe old green style jerseys used from 1982 to 1992The jerseys used from 1992 to 2017[Sean Avery](https://en.wikipedia.org/wiki/Sean_Avery) of the [New York Rangers](https://en.wikipedia.org/wiki/New_York_Rangers) attempts to distract Brodeur during the [2008 Stanley Cup playoffs](https://en.wikipedia.org/wiki/2008\\_Stanley_Cup_playoffs). The playoff series was the fifth to feature the [Devils-Rangers rivalry](https://en.wikipedia.org/wiki/Devils%E2%80%93Rangers_rivalry).\n","actions":[{"label":"nj-devils link","url":"https://www.allaboutthejersey.com/","style":"link","icon_class":"dev","new_window":false,"no_follow":false}],"type":"grid_item","image":"images/njdev-219301cd.jpg","title_url":"https://www.allaboutthejersey.com/"},{"title":"ITER Fusion Reactor Experiment (Southern France)","title_url":"https://www.iter.org/","image_alt":"Nuclear Fusion","content":"# Break Even Nuclear Fusion Candidate\nIn December, researchers at the Joint European Torus (JET) started\nconducting fusion experiments with tritium — a rare and radioactive\nisotope of hydrogen. The facility is a one-tenth-volume mock-up of the\nUS$22-billion ITER project and has the same doughnut-shaped 'tokamak'\ndesign — the world's most developed approach to fusion energy. It is\nthe first time since 1997 that researchers have done experiments in a\ntokamak with any significant amount of tritium.\n","actions":[{"label":"Learn More","url":"https://www.iter.org/","style":"secondary","icon_class":"dev","new_window":true,"no_follow":false}],"type":"grid_item","image":"images/iter-c7508519.jpg"}],"type":"section_grid"},{"section_id":"features-two-col","type":"section_grid","title":"Resume & Portfolio","col_number":"two","grid_items":[{"title":"Resume","actions":[{"label":"View In One Drive","url":"https://1drv.ms/b/s!AkGiZ9n9CRDSpLsZsnPtiN7p77vq6A","style":"secondary"},{"label":"Download PDF","url":"https://github.com/bgoonz/bgoonz/raw/master/bryan_guner_resume_2021_V9.pdf","style":"secondary","icon_class":"dev","new_window":false,"no_follow":false,"type":"action"}],"image":"images/image-of-resume.png","title_url":"https://github.com/bgoonz/resume-cv-portfolio-samples/raw/master/2021-resume/bryan-guner-resume-2021.pdf"},{"title":"Showcase","content":"![](/\\_static/app-assets/lambda-demo1.gif)My Projects!\n","actions":[{"label":"Learn More","url":"/showcase","style":"secondary"}],"image_alt":"portfolio of websites","image":"images/portfolio-91689538.jpg"}]},{"title":"Blog-Archive-And-Mini-Projects","section_id":"Mini Projects","image_alt":"showcase","image_position":"left","content":"","actions":[],"type":"section_content"},{"title":"Latest & Greatest","section_id":"new content","image_alt":"animated gif","image_position":"right","content":"# ***What I've been working on lately:***\n## Web Dev Utilitiy Tools\n\n\n\n","actions":[],"type":"section_content"},{"section_id":"tools","image_alt":"web tools","image_position":"left","content":"![](images/static-server-5bf5ad2d.PNG)Tool Showcase\n","actions":[],"type":"section_content","title":"Tools Showcase"},{"section_id":"Web Audio DAW","image_alt":"medium","image_position":"left","actions":[{"label":"Go To Web Audio Daw","url":"https://mihirbegmusiclab.netlify.app/","style":"primary","icon_class":"dev","new_window":true,"no_follow":false,"type":"action"}],"type":"section_content","title":"Web Audio DAW","image":"images/goals.jpg"},{"title":"Quick Links","section_id":"navigate from the home page","col_number":"two","type":"section_docs","subtitle":"quick links home"},{"title":"Contact","section_id":"contact","actions":[{"label":"Contact","url":"/docs/faq/contact","style":"primary","icon_class":"dev","new_window":false,"no_follow":false,"type":"action"},{"label":"email","url":"mailto:bryan.guner@gmail.com","style":"primary","icon_class":"dev","new_window":false,"no_follow":false},{"label":"Subscribe (Youtube)","url":" https://www.youtube.com/channel/UC9-rYyUMsnEBK8G8fCyrXXA?sub_confirmation=1","style":"primary","icon_class":"dev","new_window":false,"no_follow":false}],"type":"section_cta","subtitle":"get in touch! +1 (551) - 254 - 5505"}],"seo":{"title":"Web-Dev-Hub","description":"bigO, Python, Javascript, Audio, Processing, Learning, Blog, React,\nPostgreSQL, Scope, Closure, Web Development, Embed, API, Website, Design,\nMusic, Search","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Web-Dev-Hub","keyName":"property"},{"name":"og:description","value":"my resource sharing and blog site ... centered mostly on web development\nand just a bit of audio production / generally nerdy things I find\ninteresting.","keyName":"property"},{"name":"og:image","value":"images/code.png","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Web-Dev-Hub"},{"name":"twitter:description","value":"Web-Dev-Hub"},{"name":"twitter:image","value":"images/4.jpg","relativeUrl":true}]},"template":"advanced"},"html":""},{"url":"/showcase/","relativePath":"showcase.md","relativeDir":"","base":"showcase.md","name":"showcase","frontmatter":{"title":"Showcase","sections":[{"section_id":"hero","type":"section_hero","title":"Showcase","image":"images/charming-dolphin.gif","content":"Some of my more engaging projects!\n"},{"section_id":"showcase","type":"section_grid","col_number":"three","grid_items":[{"title":"Git HTML PREVIEW","title_url":"https://github.com/bgoonz/GIT-HTML-PREVIEW-TOOL","image":"images/futuristic-mars.gif","content":"Preview html files by pasting their url into the search bar **Access-Control-Allow-Origin Header When Site A tries to fetch content from Site B**\n","actions":[{"label":"Live Site","url":"/https://ds-algo-official-c3dw6uapg-bgoonz.vercel.app/","style":"icon","icon_class":"github","new_window":true,"no_follow":false,"type":"action"}],"image_alt":"git html preview"},{"title":"Guitar Effects Automation Using Subsequence Dynamic Time Warping","title_url":"https://github.com/bgoonz/Revamped-Automatic-Guitar-Effect-Triggering","image":"images/curious-europa.gif","content":"**Modified subsequence dynamic time warping feature detection using pure data implemented in python**\n","actions":[{"label":"Slide Show","url":"https://1drv.ms/p/s!AkGiZ9n9CRDSpY88x407JwfEKNrDxg?e=faHSx9","style":"link","icon_class":"dev","new_window":true,"no_follow":false,"type":"action"}]},{"title":"Data Structures Interactive Learning Hub","title_url":"https://ds-algo-official-c3dw6uapg-bgoonz.vercel.app/","image":"images/ds-algo.gif","content":"**Big O notation is the language we use for talking about how long an algorithm takes to run. It's how we compare the efficiency of different approaches to a problem.**\n","actions":[{"label":"Live Site","url":"https://github.com/bgoonz/DS-ALGO-OFFICIAL","style":"icon","icon_class":"github","new_window":true,"no_follow":false,"type":"action"}]},{"title":"Learning Redux","title_url":"https://learning-redux42.netlify.app/","image_alt":"lorem-ipsum","content":"***React Redux provides a pair of custom React hooks that allow your React components to interact with the Redux store.***\n","actions":[{"label":"Website","url":"https://learning-redux42.netlify.app/","style":"icon","icon_class":"dev","new_window":true,"no_follow":false,"type":"action"}],"type":"grid_item","image":"images/best-birch.gif"},{"title":"Mihir-Beg-Music.com","title_url":"https://panoramic-eggplant-452e4.netlify.app/","image":"images/7a8bc98e902a2f6dea90386cdfb154c2.png","content":"Artist Showcase & Podcasting Site\n","actions":[{"label":"Live Site","url":"https://panoramic-eggplant-452e4.netlify.app/","style":"link","icon_class":"dev","new_window":true,"no_follow":false,"type":"action"}]},{"title":"Aux Blog w NextJS","title_url":"https://bgoonz-blog-v3-0.netlify.app/","image_alt":"get in touch","content":"**Here lives my alternate/backup blog site!**\n","actions":[{"label":"git repo","url":"https://github.com/bgoonz/alternate-blog-theme","style":"icon","icon_class":"github","new_window":true,"no_follow":false,"type":"action"}],"type":"grid_item","image":"images/21ecc2f26e2641c8e9aae5479481bbe2 (5).png"},{"title":"Potluck Planner","title_url":"https://potluck-landing.netlify.app/","image_alt":"lorem-ipsum","content":"## Potluck Planner If you have ever tried to organize a potluck through text messages, online to-do lists or spreadsheets, you'll understand why this app is essential.In the world of social gatherings and potlucks the \"Potluck Planner\" is king. This is your place for all things pot luck.\n","actions":[],"type":"grid_item","image":"images/potluck-planner.JPG"},{"title":"Zumzi Video Conferencing","title_url":"https://github.com/bgoonz/zumzi-chat-messenger","image_alt":"video chat","content":"**Features: Live Streaming, Screen Sharing, Fine control over all video & audio parameters and user permissions, Supports video streaming at various resolutions: Standard, HD, FHD and 4K, Group Chat, One-to-One chat, Invite Participants**\n","actions":[{"label":"Live Site","url":"https://goofy-perlman-0f61df.netlify.app/","style":"link","icon_class":"dev","new_window":true,"no_follow":false,"type":"action"}],"type":"grid_item","image":"images/energetic-sunflower.png"},{"title":"Web Audio Workstation","title_url":"lorem-ipsum","image_alt":"lorem-ipsum","content":"Made using jQuery and Vanilla JS\n","actions":[{"label":"Go To Live Site","url":"https://mihirbegmusiclab.netlify.app/","style":"link","icon_class":"dev","new_window":true,"no_follow":false,"type":"action"},{"label":"Github Repo","url":"https://github.com/bgoonz/MihirBegMusicLab","style":"link","icon_class":"dev","new_window":true,"no_follow":false,"type":"action"}],"type":"grid_item","image":"images/royal-kangaroo.JPG"}]}],"seo":{"title":"Showcase","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Showcase","keyName":"property"},{"name":"og:description","value":"project showcase","keyName":"property"},{"name":"og:image","value":"images/My Post-4ecb169f.png","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Showcase"},{"name":"twitter:description","value":"This is the showcase page"},{"name":"twitter:image","value":"images/5.jpg","relativeUrl":true}],"description":"Git HTML PREVIEW, Guitar Effects, Data Structures, Redux, Podcast Blog, Contact Form, Potluck Planner, Video Conferencing, Web Audio Workstation"},"template":"advanced"},"html":""},{"url":"/privacy-policy/","relativePath":"privacy-policy.md","relativeDir":"","base":"privacy-policy.md","name":"privacy-policy","frontmatter":{"title":"Privacy Policy","weight":0,"excerpt":"Privacy Policy","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"
PRIVACY NOTICE\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"url":"/blog/big-o-complexity/","relativePath":"blog/big-o-complexity.md","relativeDir":"blog","base":"big-o-complexity.md","name":"big-o-complexity","frontmatter":{"title":"Big O Computational Complexity","subtitle":"Explained using gif animations","date":"2021-09-11","thumb_image_alt":"neural network","excerpt":"Bubble sort, sorts an array of integers by bubbling the largest integer to the top.","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"post","thumb_image":"images/neural-c16cd3ca.PNG","image":"images/my-back-0b8b3eaf.png"},"html":"

Sorting Algorithms\n\n

\n

Bubble Sort

\n

Time Complexity: Quadratic O(n^2)

\n\n

Space Complexity: O(1)

\n\n

https://gist.github.com/eengineergz/e67e56bed7c5a20a54851867ba5efef6

\n\n
\n

It's almost never used in production code because:

\n
\n\n

https://gist.github.com/eengineergz/fd4acc0c89033bd219ebf9d3ec40b053https://gist.github.com/eengineergz/80934783c628c70ac2a5a48119a82d54

\n\n

Selection Sort

\n

Time Complexity: Quadratic O(n^2)

\n\n

Space Complexity: O(1)

\n\n

https://gist.github.com/eengineergz/4abc0fe0bf01599b0c4104b0ba633402

\n\n
\n

Summary of how Selection Sort should work:

\n
\n
    \n
  1. Set MIN to location 0
    2. \n
  2. Search the minimum element in the list.
    3. \n
  3. Swap with value at location Min
    4. \n
  4. Increment Min to point to next element.
    5. \n
  5. Repeat until list is sorted.
    6. \n
\n

https://gist.github.com/eengineergz/61f130c8e0097572ed908fe2629bdee0

\n

Insertion Sort

\n

Time Complexity: Quadratic O(n^2)

\n\n

Space Complexity: O(n)

\n\n

https://gist.github.com/eengineergz/a9f4b8596c7546ac92746db659186d8c

\n

Merge Sort

\n

Time Complexity: Log Linear O(nlog(n))

\n\n

Example of Merge Sort

\n

https://gist.github.com/eengineergz/18fbb7edc9f5c4820ccfcecacf3c5e48https://gist.github.com/eengineergz/cbb533137a7f957d3bc4077395c1ff64

\n\n
\n

Steps:

\n
\n
    \n
  1. If there is only one element in the list, it is already sorted; return the array.
    2. \n
  2. Otherwise, divide the list recursively into two halves until it can no longer be divided.
    3. \n
  3. Merge the smallest lists into new list in a sorted order.
    4. \n
\n

Quick Sort

\n

Time Complexity: Quadratic O(n^2)

\n\n

Space Complexity: O(n)

\n\n

https://gist.github.com/eengineergz/24bcbc5248a8c4e1671945e9512da57e

\n

Binary Search

\n

Time Complexity: Log Time O(log(n))

\n

Space Complexity: O(1)

\n
\n

Recursive Solution

\n
\n

https://gist.github.com/eengineergz/c82c00a4bcba4b69b7d326d6cad3ac8c

\n
\n

Min Max Solution

\n
\n

https://gist.github.com/eengineergz/eb8d1e1684db15cc2c8af28e13f38751https://gist.github.com/eengineergz/bc3f576b9795ccef12a108e36f9f820a

\n\n

Insertion Sort

\n\n
\n

Steps:

\n
\n
    \n
  1. If it is the first element, and it is already sorted; return 1.
    2. \n
  2. Pick next element.
    3. \n
  3. Compare with all elements in the sorted sub list
    4. \n
  4. Shift all the elements in the sorted sub list that is greater than the value to be sorted.
    5. \n
  5. Insert the value
    6. \n
  6. Repeat until list is sorted.
    7. \n
\n

https://gist.github.com/eengineergz/ffead1de0836c4bcc6445780a604f617

"},{"url":"/blog/blog-archive/","relativePath":"blog/blog-archive.md","relativeDir":"blog","base":"blog-archive.md","name":"blog-archive","frontmatter":{"title":"Blog Archive","subtitle":"Blog Archive","date":"2021-07-26","thumb_image_alt":"Blog page animation","excerpt":"Blog Archive","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"post","thumb_image":"images/3.jpg"},"html":"

Blog Archive

\n "},{"url":"/blog/300-react-questions/","relativePath":"blog/300-react-questions.md","relativeDir":"blog","base":"300-react-questions.md","name":"300-react-questions","frontmatter":{"title":"React Questions","subtitle":"react excel sheet","date":"2022-01-17","thumb_image_alt":"es6","excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"post","thumb_image":"images/web-development-abstract.jpg"},"html":"

React Interview Questions & Answers

\n\n
\n Questions Table \n

Table of Contents

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
No.Questions\nAnswer
\n\nCore React\nfalse\n
1What is React?false\n
2What are the major features of React?false\n
3What is JSX?false\n
4What is the difference between Element and Component?false\n
5How to create components in React?false\n
6When to use a Class Component over a Function Component?false\n
7What are Pure Components?false\n
8What is state in React?false\n
9What are props in React?false\n
10What is the difference between state and props?false\n
11Why should we not update the state directly?false\n
12What is the purpose of callback function as an argument of setState()?false\n
13What is the difference between HTML and React event handling?false\n
14How to bind methods or event handlers in JSX callbacks?false\n
15How to pass a parameter to an event handler or callback?false\n
16What are synthetic events in React?false\n
17What are inline conditional expressions?false\n
18What is \"key\" prop and what is the benefit of using it in arrays of elements?false\n
19What is the use of refs?false\n
20How to create refs?false\n
21What are forward refs?false\n
22Which is preferred option with in callback refs and findDOMNode()?false\n
23Why are String Refs legacy?false\n
24What is Virtual DOM?false\n
25How Virtual DOM works?false\n
26What is the difference between Shadow DOM and Virtual DOM?false\n
27What is React Fiber?false\n
28What is the main goal of React Fiber?false\n
29What are controlled components?false\n
30What are uncontrolled components?false\n
31What is the difference between createElement and cloneElement?false\n
32What is Lifting State Up in React?false\n
33What are the different phases of component lifecycle?false\n
34What are the lifecycle methods of React?false\n
35What are Higher-Order components?false\n
36How to create props proxy for HOC component?false\n
37What is context?false\n
38What is children prop?false\n
39How to write comments in React?false\n
40What is the purpose of using super constructor with props argument?false\n
41What is reconciliation?false\n
42How to set state with a dynamic key name?false\n
43What would be the common mistake of function being called every time the component renders?false\n
44Is lazy function supports named exports?false\n
45Why React uses className over class attribute?false\n
46What are fragments?false\n
47Why fragments are better than container divs?false\n
48What are portals in React?false\n
49What are stateless components?false\n
50What are stateful components?false\n
51How to apply validation on props in React?false\n
52What are the advantages of React?false\n
53What are the limitations of React?false\n
54What are error boundaries in React v16false\n
55How error boundaries handled in React v15?false\n
56What are the recommended ways for static type checking?false\n
57What is the use of react-dom package?false\n
58What is the purpose of render method of react-dom?false\n
59What is ReactDOMServer?false\n
60How to use InnerHtml in React?false\n
61How to use styles in React?false\n
62How events are different in React?false\n
63What will happen if you use setState in constructor?false\n
64What is the impact of indexes as keys?false\n
65Is it good to use setState() in componentWillMount() method?false\n
66What will happen if you use props in initial state?false\n
67How do you conditionally render components?false\n
68Why we need to be careful when spreading props on DOM elements??false\n
69How you use decorators in React?false\n
70How do you memoize a component?false\n
71How you implement Server-Side Rendering or SSR?false\n
72How to enable production mode in React?false\n
73What is CRA and its benefits?false\n
74What is the lifecycle methods order in mounting?false\n
75What are the lifecycle methods going to be deprecated in React v16?false\n
76What is the purpose of getDerivedStateFromProps() lifecycle method?false\n
77What is the purpose of getSnapshotBeforeUpdate() lifecycle method?false\n
78Do Hooks replace render props and higher order components?false\n
79What is the recommended way for naming components?false\n
80What is the recommended ordering of methods in component class?false\n
81What is a switching component?false\n
82Why we need to pass a function to setState()?false\n
83What is strict mode in React?false\n
84What are React Mixins?false\n
85Why is isMounted() an anti-pattern and what is the proper solution?false\n
86What are the Pointer Events supported in React?false\n
87Why should component names start with capital letter?false\n
88Are custom DOM attributes supported in React v16?false\n
89What is the difference between constructor and getInitialState?false\n
90Can you force a component to re-render without calling setState?false\n
91What is the difference between super() and super(props) in React using ES6 classes?false\n
92How to loop inside JSX?false\n
93How do you access props in attribute quotes?false\n
94What is React PropType array with shape?false\n
95How to conditionally apply class attributes?false\n
96What is the difference between React and ReactDOM?false\n
97Why ReactDOM is separated from React?false\n
98How to use React label element?false\n
99How to combine multiple inline style objects?false\n
100How to re-render the view when the browser is resized?false\n
101What is the difference between setState and replaceState methods?false\n
102How to listen to state changes?false\n
103What is the recommended approach of removing an array element in react state?false\n
104Is it possible to use React without rendering HTML?false\n
105How to pretty print JSON with React?false\n
106Why you can't update props in React?false\n
107How to focus an input element on page load?false\n
108What are the possible ways of updating objects in state?false\n
110How can we find the version of React at runtime in the browser?false\n
111What are the approaches to include polyfills in your create-react-app?false\n
112How to use https instead of http in create-react-app?false\n
113How to avoid using relative path imports in create-react-app?false\n
114How to add Google Analytics for react-router?false\n
115How to update a component every second?false\n
116How do you apply vendor prefixes to inline styles in React?false\n
117How to import and export components using react and ES6?false\n
118What are the exceptions on React component naming?false\n
119Why is a component constructor called only once?false\n
120How to define constants in React?false\n
121How to programmatically trigger click event in React?false\n
122Is it possible to use async/await in plain React?false\n
123What are the common folder structures for React?false\n
124What are the popular packages for animation?false\n
125What is the benefit of styles modules?false\n
126What are the popular React-specific linters?false\n
127How to make AJAX call and In which component lifecycle methods should I make an AJAX call?false\n
128What are render props?false\n
\n\nReact Router\nfalse\n
129What is React Router?false\n
130How React Router is different from history library?false\n
131What are the <Router> components of React Router v4?false\n
132What is the purpose of push and replace methods of history?false\n
133How do you programmatically navigate using React router v4?false\n
134How to get query parameters in React Router v4false\n
135Why you get \"Router may have only one child element\" warning?false\n
136How to pass params to history.push method in React Router v4?false\n
137How to implement default or NotFound page?false\n
138How to get history on React Router v4?false\n
139How to perform automatic redirect after login?false\n
\n\nReact Internationalization\nfalse\n
140What is React-Intl?false\n
141What are the main features of React Intl?false\n
142What are the two ways of formatting in React Intl?false\n
143How to use FormattedMessage as placeholder using React Intl?false\n
144How to access current locale with React Intlfalse\n
145How to format date using React Intl?false\n
\n\nReact Testing\nfalse\n
146What is Shallow Renderer in React testing?false\n
147What is TestRenderer package in React?false\n
148What is the purpose of ReactTestUtils package?false\n
149What is Jest?false\n
150What are the advantages of Jest over Jasmine?false\n
151Give a simple example of Jest test casefalse\n
\n\nReact Redux\nfalse\n
152What is Flux?false\n
153What is Redux?false\n
154What are the core principles of Redux?false\n
155What are the downsides of Redux compared to Flux?false\n
156What is the difference between mapStateToProps() and mapDispatchToProps()?false\n
157Can I dispatch an action in reducer?false\n
158How to access Redux store outside a component?false\n
159What are the drawbacks of MVW patternfalse\n
160Are there any similarities between Redux and RxJS?false\n
161How to dispatch an action on load?false\n
162How to use connect from React Redux?false\n
163How to reset state in Redux?false\n
164Whats the purpose of at symbol in the redux connect decorator?false\n
165What is the difference between React context and React Redux?false\n
166Why are Redux state functions called reducers?false\n
167How to make AJAX request in Redux?false\n
168Should I keep all component's state in Redux store?false\n
169What is the proper way to access Redux store?false\n
170What is the difference between component and container in React Redux?false\n
171What is the purpose of the constants in Redux?false\n
172What are the different ways to write mapDispatchToProps()?false\n
173What is the use of the ownProps parameter in mapStateToProps() and mapDispatchToProps()?false\n
174How to structure Redux top level directories?false\n
175What is redux-saga?false\n
176What is the mental model of redux-saga?false\n
177What are the differences between call and put in redux-sagafalse\n
178What is Redux Thunk?false\n
179What are the differences between redux-saga and redux-thunkfalse\n
180What is Redux DevTools?false\n
181What are the features of Redux DevTools?false\n
182What are Redux selectors and Why to use them?false\n
183What is Redux Form?false\n
184What are the main features of Redux Form?false\n
185How to add multiple middlewares to Redux?false\n
186How to set initial state in Redux?false\n
187How Relay is different from Redux?false\n
188What is an action in Redux?false\n
\n\nReact Native\nfalse\n
188What is the difference between React Native and React?false\n
189How to test React Native apps?false\n
190How to do logging in React Native?false\n
191How to debug your React Native?false\n
\n\nReact supported libraries and Integration\nfalse\n
192What is reselect and how it works?false\n
193What is Flow?false\n
194What is the difference between Flow and PropTypes?false\n
195How to use font-awesome icons in React?false\n
196What is React Dev Tools?false\n
197Why is DevTools not loading in Chrome for local files?false\n
198How to use Polymer in React?false\n
199What are the advantages of React over Vue.js?false\n
200What is the difference between React and Angular?false\n
201Why React tab is not showing up in DevTools?false\n
202What are styled components?false\n
203Give an example of Styled Components?false\n
204What is Relay?false\n
205How to use TypeScript in create-react-app application?false\n
\n\nMiscellaneous\nfalse\n
206What are the main features of reselect library?false\n
207Give an example of reselect usage?false\n
209Does the statics object work with ES6 classes in React?false\n
210Can Redux only be used with React?false\n
211Do you need to have a particular build tool to use Redux?false\n
212How Redux Form initialValues get updated from state?false\n
213How React PropTypes allow different type for one prop?false\n
214Can I import an SVG file as react component?false\n
215Why are inline ref callbacks or functions not recommended?false\n
216What is render hijacking in React?false\n
217What are HOC factory implementations?false\n
218How to pass numbers to React component?false\n
219Do I need to keep all my state into Redux? Should I ever use react internal state?false\n
220What is the purpose of registerServiceWorker in React?false\n
221What is React memo function?false\n
222What is React lazy function?false\n
223How to prevent unnecessary updates using setState?false\n
224How do you render Array, Strings and Numbers in React 16 Version?false\n
225How to use class field declarations syntax in React classes?false\n
226What are hooks?false\n
227What are the rules needs to follow for hooks?false\n
228How to ensure hooks followed the rules in your project?false\n
229What are the differences between Flux and Redux?false\n
230What are the benefits of React Router V4?false\n
231Can you describe about componentDidCatch lifecycle method signature?false\n
232In which scenarios error boundaries do not catch errors?false\n
233Why do you not need error boundaries for event handlers?false\n
234What is the difference between try catch block and error boundaries?false\n
235What is the behavior of uncaught errors in react 16?false\n
236What is the proper placement for error boundaries?false\n
237What is the benefit of component stack trace from error boundary?false\n
238What is the required method to be defined for a class component?false\n
239What are the possible return types of render method?false\n
240What is the main purpose of constructor?false\n
241Is it mandatory to define constructor for React component?false\n
242What are default props?false\n
243Why should not call setState in componentWillUnmount?false\n
244What is the purpose of getDerivedStateFromError?false\n
245What is the methods order when component re-rendered?false\n
246What are the methods invoked during error handling?false\n
247What is the purpose of displayName class property?false\n
248What is the browser support for react applications?false\n
249What is the purpose of unmountComponentAtNode method?false\n
250What is code-splitting?false\n
251What is the benefit of strict mode?false\n
252What are Keyed Fragments?false\n
253Does React support all HTML attributes?false\n
254What are the limitations with HOCs?false\n
255How to debug forwardRefs in DevTools?false\n
256When component props defaults to true?false\n
257What is NextJS and major features of it?false\n
258How do you pass an event handler to a component?false\n
259Is it good to use arrow functions in render methods?false\n
260How to prevent a function from being called multiple times?false\n
261How JSX prevents Injection Attacks?false\n
262How do you update rendered elements?false\n
263How do you say that props are read only?false\n
264How do you say that state updates are merged?false\n
265How do you pass arguments to an event handler?false\n
266How to prevent component from rendering?false\n
267What are the conditions to safely use the index as a key?false\n
268Is it keys should be globally unique?false\n
269What is the popular choice for form handling?false\n
270What are the advantages of formik over redux form library?false\n
271Why do you not required to use inheritance?false\n
272Can I use web components in react application?false\n
273What is dynamic import?false\n
274What are loadable components?false\n
275What is suspense component?false\n
276What is route based code splitting?false\n
277Give an example on How to use context?false\n
278What is the purpose of default value in context?false\n
279How do you use contextType?false\n
280What is a consumer?false\n
281How do you solve performance corner cases while using context?false\n
282What is the purpose of forward ref in HOCs?false\n
283Is it ref argument available for all functions or class components?false\n
284Why do you need additional care for component libraries while using forward refs?false\n
285How to create react class components without ES6?false\n
286Is it possible to use react without JSX?false\n
287What is diffing algorithm?false\n
288What are the rules covered by diffing algorithm?false\n
289When do you need to use refs?false\n
290Is it prop must be named as render for render props?false\n
291What are the problems of using render props with pure components?false\n
292How do you create HOC using render props?false\n
293What is windowing technique?false\n
294How do you print falsy values in JSX?false\n
295What is the typical use case of portals?false\n
296How do you set default value for uncontrolled component?false\n
297What is your favorite React stack?false\n
298What is the difference between Real DOM and Virtual DOM?false\n
299How to add Bootstrap to a react application?false\n
300Can you list down top websites or applications using react as front end framework?false\n
301Is it recommended to use CSS In JS technique in React?false\n
302Do I need to rewrite all my class components with hooks?false\n
303How to fetch data with React Hooks?false\n
304Is Hooks cover all use cases for classes?false\n
305What is the stable release for hooks support?false\n
306Why do we use array destructuring (square brackets notation) in useState?false\n
307What are the sources used for introducing hooks?false\n
308How do you access imperative API of web components?false\n
309What is formik?false\n
310What are typical middleware choices for handling asynchronous calls in Redux?false\n
311Do browsers understand JSX code?false\n
312Describe about data flow in react?false\n
313What is react scripts?false\n
314What are the features of create react app?false\n
315What is the purpose of renderToNodeStream method?false\n
316What is MobX?false\n
317What are the differences between Redux and MobX?false\n
318Should I learn ES6 before learning ReactJS?false\n
319What is Concurrent Rendering?false\n
320What is the difference between async mode and concurrent mode?false\n
321Can I use javascript urls in react16.9?false\n
322What is the purpose of eslint plugin for hooks?false\n
323What is the difference between Imperative and Declarative in React?false\n
324What are the benefits of using typescript with reactjs?false\n
325How do you make sure that user remains authenticated on page refresh while using Context API State Management?false\n
326What are the benefits of new JSX transform?false\n
327How does new JSX transform different from old transform?false\n
328How do you get redux scaffolding using create-react-app?false\n
329What are React Server components?false\n
\n
"},{"url":"/blog/awesome-graphql/","relativePath":"blog/awesome-graphql.md","relativeDir":"blog","base":"awesome-graphql.md","name":"awesome-graphql","frontmatter":{"title":"Awesome GraphQL","subtitle":"The Death Of REST","date":"2021-09-30","thumb_image_alt":"lorem-ipsum","excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"post","thumb_image":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/GraphQL_Logo.svg/225px-GraphQL_Logo.svg.png","image":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/GraphQL_Logo.svg/225px-GraphQL_Logo.svg.png"},"html":"

Table of Contents\n\n

\n\n

Specification

\n\n

Community

\n\n

GraphQL Meetups

\n\n

Libraries

\n

JavaScript Libraries

\n\n
Relay Related
\n\n

TypeScript Libraries

\n\n

Ruby Libraries

\n\n

PHP Libraries

\n\n

Python Libraries

\n\n

Java Libraries

\n\n

C/C++ Libraries

\n\n

Go Libraries

\n\n

Scala Libraries

\n\n

Perl Libraries

\n\n

.NET Libraries

\n\n

Erlang Libraries

\n\n

Elixir Libraries

\n\n

Haskell Libraries

\n\n

SQL Libraries

\n\n

Lua Libraries

\n\n

Elm Libraries

\n\n

Clojure Libraries

\n\n

ClojureScript Libraries

\n\n

Swift Libraries

\n\n

OCaml Libraries

\n\n

Rust Libraries

\n\n

R Libraries

\n\n

Julia Libraries

\n\n

Kotlin Libraries

\n\n

Unity Libraries

\n\n

Crystal Libraries

\n\n

Tools

\n\n

Databases

\n\n

Services

\n\n

Examples

\n

JavaScript Examples

\n\n

TypeScript Examples

\n\n

Ruby Examples

\n\n

Go Examples

\n\n

Scala Examples

\n\n

Python Examples

\n\n

Elixir Examples

\n\n

PHP Examples

\n\n

ReasonML Examples

\n\n

Videos

\n\n

Blogs

\n\n

Posts

\n\n

Tutorials

\n"},{"url":"/blog/flow-control-in-python/","relativePath":"blog/flow-control-in-python.md","relativeDir":"blog","base":"flow-control-in-python.md","name":"flow-control-in-python","frontmatter":{"title":"flow-control-in-python","subtitle":"flow-control-in-python","date":"2021-10-14","thumb_image_alt":"lorem-ipsum","excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"post","thumb_image":"images/python1.jpg","image":"images/python2-15e88a3a.jpg"},"html":"

Read It

\n\n

Flow Control

\n

Comparison Operators

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OperatorMeaning
==Equal to
!=Not equal to
<Less than
>Greater Than
<=Less than or Equal to
>=Greater than or Equal to
\n

These operators evaluate to True or False depending on the values you give them.

\n

Examples:

\n
42 == 42\n
\n
40 == 42\n
\n
'hello' == 'hello'\n
\n
'hello' == 'Hello'\n
\n
'dog' != 'cat'\n
\n
42 == 42.0\n
\n
42 == '42'\n
\n

Boolean evaluation

\n

Never use == or != operator to evaluate boolean operation. Use the is or is not operators,\nor use implicit boolean evaluation.

\n

NO (even if they are valid Python):

\n
True == True\n
\n
True != False\n
\n

YES (even if they are valid Python):

\n
True is True\n
\n
True is not False\n
\n

These statements are equivalent:

\n
if a is True:\n   pass\nif a is not False:\n   pass\nif a:\n   pass\n
\n

And these as well:

\n
if a is False:\n   pass\nif a is not True:\n   pass\nif not a:\n   pass\n
\n

Boolean Operators

\n

There are three Boolean operators: and, or, and not.

\n

The and Operator's Truth Table:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ExpressionEvaluates to
True and TrueTrue
True and FalseFalse
False and TrueFalse
False and FalseFalse
\n

The or Operator's Truth Table:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ExpressionEvaluates to
True or TrueTrue
True or FalseTrue
False or TrueTrue
False or FalseFalse
\n

The not Operator's Truth Table:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ExpressionEvaluates to
not TrueFalse
not FalseTrue
\n

Mixing Boolean and Comparison Operators

\n
(4 < 5) and (5 < 6)\n
\n
(4 < 5) and (9 < 6)\n
\n
(1 == 2) or (2 == 2)\n
\n

You can also use multiple Boolean operators in an expression, along with the comparison operators:

\n
2 + 2 == 4 and not 2 + 2 == 5 and 2 * 2 == 2 + 2\n
\n

if Statements

\n
if name == 'Alice':\n    print('Hi, Alice.')\n
\n

else Statements

\n
name = 'Bob'\n\nif name == 'Alice':\n    print('Hi, Alice.')\nelse:\n    print('Hello, stranger.')\n
\n

elif Statements

\n
name = 'Bob'\nage = 5\n\nif name == 'Alice':\n    print('Hi, Alice.')\nelif age < 12:\n    print('You are not Alice, kiddo.')\n
\n
name = 'Bob'\nage = 30\n\nif name == 'Alice':\n    print('Hi, Alice.')\nelif age < 12:\n    print('You are not Alice, kiddo.')\nelse:\n    print('You are neither Alice nor a little kid.')\n
\n

while Loop Statements

\n
spam = 0\n\nwhile spam < 5:\n    print('Hello, world.')\n    spam = spam + 1\n
\n

break Statements

\n

If the execution reaches a break statement, it immediately exits the while loop's clause:

\n
while True:\n    print('Please type your name.')\n    name = input()\n    if name == 'your name':\n        break\n\nprint('Thank you!')\n
\n

continue Statements

\n

When the program execution reaches a continue statement, the program execution immediately jumps back to the start of the loop.

\n
while True:\n    print('Who are you?')\n    name = input()\n    if name != 'Joe':\n        continue\n    print('Hello, Joe. What is the password? (It is a fish.)')\n    password = input()\n    if password == 'swordfish':\n        break\n\nprint('Access granted.')\n
\n

for Loops and the range() Function

\n
print('My name is')\nfor i in range(5):\n    print('Jimmy Five Times ({})'.format(str(i)))\n
\n

The range() function can also be called with three arguments. The first two arguments will be the start and stop values, and the third will be the step argument. The step is the amount that the variable is increased by after each iteration.

\n
for i in range(0, 10, 2):\n   print(i)\n
\n

You can even use a negative number for the step argument to make the for loop count down instead of up.

\n
for i in range(5, -1, -1):\n    print(i)\n
\n

For else statement

\n

This allows you to specify a statement to execute after the full loop has been executed. Only\nuseful when a break condition can occur in the loop:

\n
for i in [1, 2, 3, 4, 5]:\n   if i == 3:\n       break\nelse:\n   print(\"only executed when no item of the list is equal to 3\")\n
\n

Importing Modules

\n
import random\n\nfor i in range(5):\n    print(random.randint(1, 10))\n
\n
import random, sys, os, math\n
\n
from random import *\n
\n

Ending a Program with sys.exit

\n
import sys\n\nwhile True:\n    print('Type exit to exit.')\n    response = input()\n    if response == 'exit':\n        sys.exit()\n    print('You typed {}.'.format(response))\n
"},{"url":"/blog/functions-in-python/","relativePath":"blog/functions-in-python.md","relativeDir":"blog","base":"functions-in-python.md","name":"functions-in-python","frontmatter":{"title":"Functions in Python","subtitle":"Functions in Python","date":"2021-10-14","thumb_image_alt":"lorem-ipsum","excerpt":"wubalubadubdub","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"post","thumb_image":"images/python2.jpg"},"html":"

Functions

\n
def hello(name):\n    print('Hello {}'.format(name))\n
\n

Return Values and return Statements

\n

When creating a function using the def statement, you can specify what the return value should be with a return statement. A return statement consists of the following:

\n\n
import random\ndef getAnswer(answerNumber):\n    if answerNumber == 1:\n        return 'It is certain'\n    elif answerNumber == 2:\n        return 'It is decidedly so'\n    elif answerNumber == 3:\n        return 'Yes'\n    elif answerNumber == 4:\n        return 'Reply hazy try again'\n    elif answerNumber == 5:\n        return 'Ask again later'\n    elif answerNumber == 6:\n        return 'Concentrate and ask again'\n    elif answerNumber == 7:\n        return 'My reply is no'\n    elif answerNumber == 8:\n        return 'Outlook not so good'\n    elif answerNumber == 9:\n        return 'Very doubtful'\n\nr = random.randint(1, 9)\nfortune = getAnswer(r)\nprint(fortune)\n
\n

The None Value

\n
spam = print('Hello!')\nspam is None\n
\n

Note: never compare to None with the == operator. Always use is.

\n

print Keyword Arguments

\n
print('Hello', end='')\nprint('World')\n
\n
print('cats', 'dogs', 'mice')\n
\n
print('cats', 'dogs', 'mice', sep=',')\n
\n

Local and Global Scope

\n\n

The global Statement

\n

If you need to modify a global variable from within a function, use the global statement:

\n
def spam():\n    global eggs\n    eggs = 'spam'\n\neggs = 'global'\nspam()\nprint(eggs)\n
\n

There are four rules to tell whether a variable is in a local scope or global scope:

\n
    \n
  1. If a variable is being used in the global scope (that is, outside of all functions), then it is always a global variable.
    2. \n
  2. If there is a global statement for that variable in a function, it is a global variable.
    3. \n
  3. Otherwise, if the variable is used in an assignment statement in the function, it is a local variable.
    4. \n
  4. But if the variable is not used in an assignment statement, it is a global variable.
    5. \n
"},{"url":"/blog/blogwcomments/","relativePath":"blog/blogwcomments.md","relativeDir":"blog","base":"blogwcomments.md","name":"blogwcomments","frontmatter":{"title":"ExpressJS Apis","subtitle":"lorem-ipsum","date":"2021-07-26","thumb_image_alt":"node and express js","excerpt":"## **Overview** A **database schema** is the shape of our database. It defines what tables we'll have, which columns should exist within the tables and any restrictions on each column. A well-designed database schema keeps the data well organized and can help ensure high-quality data. Note that while schema design is usually left to Database Administrators (DBAs), understanding schema helps when designing APIs and database logic. And in a smaller team, this step may fall on the developer.","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"post","thumb_image":"images/express.png"},"html":"

SQL Tryit Editor v1.6

\n

A database is a collection of data organized for easy retrieval and manipulation.

\n

We're concerned only with digital databases, those that run on computers or other electronic devices. Digital databases have been around since the 1960s. Relational databases, those which store \"related\" data, are the oldest and most common type of database in use today.

\n

Data Persistence

\n

A database is often necessary because our application or code requires data persistence. This term refers to data that is infrequently accessed and not likely to be modified. In less technical terms, the information will be safely stored and remain untouched unless intentionally modified.

\n

A familiar example of non-persistent data would be JavaScript objects and arrays, which reset each time the code runs.

\n

Relational Databases

\n

In relational databases, the data is stored in tabular format grouped into rows and columns (similar to spreadsheets). A collection of rows is called a table. Each row represents a single record in the table and is made up of one or more columns.

\n

These kinds of databases are relational because a relation is a mathematical idea equivalent to a table. So relational databases are databases that store their data in tables.

\n

Tables

\n

\n

Below are some basic facts about tables:

\n\n

Overview

\n

SQL:

\n

SQL is a standard language, which means that it almost certainly will be supported, no matter how your database is managed. That said, be aware that the SQL language can vary depending on database management tools. This lesson focuses on a set of core commands that never change. Learning the standard commands is an excellent introduction since the knowledge transfers between database products.

\n

The syntax for SQL is English-like and requires fewer symbols than programming languages like C, Java, and JavaScript.

\n

It is declarative and concise, which means there is a lot less to learn to use it effectively.

\n

When learning SQL, it is helpful to understand that each command is designed for a different purpose. If we classify the commands by purpose, we'll end up with the following sub-categories of SQL:

\n\n

As a developer, you'll need to get familiar with DDL and become proficient using DML and DQL. This lesson will cover only DML and DQL commands.

\n

Overview

\n

The four SQL operations covered in this section will allow a user to query, insert, and modify a database table.

\n

Query

\n

A query is a SQL statement used to retrieve data from a database. The command used to write queries is SELECT, and it is one of the most commonly used SQL commands.

\n

The basic syntax for a SELECT statement is this:

\n

To see all the fields on a table, we can use a * as the selection.

\n

The preceding statement would show all the records and all the columns for each record in the employees table.

\n

To pick the fields we want to see, we use a comma-separated list:

\n

The return of that statement would hold all records from the listed fields.

\n

We can extend the SELECT command's capabilities using clauses for things like filtering, sorting, pagination, and more.

\n

It is possible to query multiple tables in a single query. But, in this section, we only perform queries on a single table. We will cover performing queries on multiple tables in another section.

\n

Insert

\n

To insert new data into a table, we'll use the INSERT command. The basic syntax for an INSERT statement is this:

\n

Using this formula, we can specify which values will be inserted into which fields like so:

\n

Modify

\n

Modifying a database consists of updating and removing records. For these operations, we'll use UPDATE and DELETE commands, respectively.

\n

The basic syntax for an UPDATE statement is:

\n

The basic syntax for a DELETE statement is:

\n

Follow Along

\n

Filtering results using WHERE clause

\n

When querying a database, the default result will be every entry in the given table. However, often, we are looking for a specific record or a set of records that meets certain criteria.

\n

A WHERE clause can help in both cases.

\n

Here's an example where we might only want to find customers living in Berlin.

\n

We can also chain together WHERE clauses using OR and AND to limit our results further.

\n

The following query includes only records that match both criteria.

\n

And this query includes records that match either criteria.

\n

These operators can be combined and grouped with parentheses to add complex selection logic. They behave similarly to what you're used to in programming languages.

\n

You can read more about SQLite operators from w3resource (Links to an external site.).

\n

To select a single record, we can use a WHERE statement with a uniquely identifying field, like an id:

\n

Other comparison operators also work in WHERE conditions, such as >, <, <=, and >=.

\n

Ordering results using the ORDER BY clause

\n

Query results are shown in the same order the data was inserted. To control how the data is sorted, we can use the ORDER BY clause. Let's see an example.

\n

We can pass a list of field names to order by and optionally choose asc or desc for the sort direction. The default is asc, so it doesn't need to be specified.

\n

Some SQL engines also support using field abbreviations when sorting.

\n

In this case, the results are sorted by the department in ascending order first and then by salary in descending order. The numbers refer to the fields' position in the selection portion of the query, so 1 would be name, 2 would be salary, and so on.

\n

Note that the WHERE clause should come after the FROM clause. The ORDER BY clause always goes last.

\n

Limiting results using the LIMIT clause

\n

When we wish to see only a limited number of records, we can use a LIMIT clause.

\n

The following returns the first ten records in the products table:

\n

LIMIT clauses are often used in conjunction with ORDER BY. The following shows us the five cheapest products:

\n

Inserting data using INSERT

\n

An insert statement adds a new record to the database. All non-null fields must be listed out in the same order as their values. Some fields, like ids and timestamps, may be auto-generated and do not need to be included in an INSERT statement.

\n

The values in an insert statement must not violate any restrictions and constraints that the database has in place, such as expected datatypes. We will learn more about constraints and schema design in a later section.

\n

Modifying recording using UPDATE

\n

When modifying a record, we identify a single record or a set of records to update using a WHERE clause. Then we can set the new value(s) in place.

\n

Technically the WHERE clause is not required, but leaving it off would result in every record within the table receiving the update.

\n

Removing records using DELETE

\n

When removing a record or set of records, we need only identify which record(s) to remove using a WHERE clause:

\n

Once again, the WHERE clause is not required, but leaving it off would remove every record in the table, so it's essential.

\n

Overview

\n

Raw SQL is a critical baseline skill. However, Node developers generally use an Object Relational Mapper (ORM) or query builder to write database commands in a backend codebase. Both ORMs and query builders are JavaScript libraries that allow us to interface with the database using a JavaScript version of the SQL language.

\n

For example, instead of a raw SQL SELECT:

\n

We could use a query builder to write the same logic in JavaScript:

\n

Query builders are lightweight and easy to get off the ground, whereas ORMs use an object-oriented model and provide more heavy lifting within their rigid structure.

\n

We will use a query builder called knex.js (Links to an external site.).

\n

Follow Along

\n

Knex Setup

\n

To use Knex in a repository, we'll need to add two libraries:

\n

knex is our query builder library, and sqlite3 allows us to interface with a sqlite database. We'll learn more about sqlite and other database management systems in the following module. For now, know that you need both libraries.

\n

Next, we use Knex to set up a config file:

\n

To use the query builder elsewhere in our code, we need to call knex and pass in a config object. We'll be discussing Knex configuration more in a future module. Still, we only need the client, connection, and useNullAsDefault keys as shown above. The filename should point towards the pre-existing database file, which can be recognized by the .db3 extension.

\n

GOTCHA: The file path to the database should be with respect to the root of the repo, not the configuration file itself.

\n

Once Knex is configured, we can import the above config file anywhere in our codebase to access the database.

\n

The db object provides methods that allow us to begin building queries.

\n

SELECT using Knex

\n

In Knex, the equivalent of SELECT * FROM users is:

\n

There's a simpler way to write the same command:

\n

Using this, we could write a GET endpoint.

\n

NOTE: All Knex queries return promises.

\n

Knex also allows for a where clause. In Knex, we could write SELECT * FROM users WHERE id=1 as

\n

This method will resolve to an array containing a single entry like so: [{ id: 1, name: 'bill' }].

\n

Using this, we might add a GET endpoint where a specific user:

\n

INSERT using Knex

\n

In Knex, the equivalent of INSERT INTO users (name, age) VALUES ('Eva', 32) is:

\n

The insert method in Knex will resolve to an array containing the newly created id for that user like so: [3].

\n

UPDATE using Knex

\n

In knex, the equivalent of UPDATE users SET name='Ava', age=33 WHERE id=3; is:

\n

Note that the where method comes before update, unlike in SQL.

\n

Update will resolve to a count of rows updated.

\n

DELETE using Knex

\n

In Knex, the equivalent of DELETE FROM users WHERE age=33; is:

\n

Once again, the where must come before the del. This method will resolve to a count of records removed.

\n

Day #2:

\n

Overview

\n

SQLlite Studio is an application that allows us to create, open, view, and modify SQLite databases. To fully understand what SQLite Studio is and how it works, we must also understand the concept of the Database Management Systems (DBMS).

\n

Follow Along

\n

What is a DBMS?

\n

To manage digital databases we use specialized software called DataBase Management Systems (DBMS). These systems typically run on servers and are managed by DataBase Administrators (DBAs).

\n

In less technical terms, we need a type of software that will allow us to create, access, and generally manage our databases. In the world of relational databases, we specifically use Relational Database Mangement Systems (RDBMs). Some examples are Postgres, SQLite, MySQL, and Oracle.

\n

Choosing a DBMS determines everything from how you set up your database, to where and how the data is stored, to what SQL commands you can use. Most systems share the core of the SQL language that you've already learned.

\n

In other words, you can expect SELECT, UPDATE, INSERT, WHERE , and the like to be the same across all DBMSs, but the subtleties of the language may vary.

\n

What is SQLite?

\n

SQLite is the DBMS, as the name suggests, it is a more lightweight system and thus easier to get set up than some others.

\n

SQLite allows us to store databases as single files. SQLite projects have a .db3 extension. That is the database.

\n

SQLite is not a database (like relational, graph, or document are databases) but rather a database management system.

\n

Opening an existing database in SQLite Studio

\n

One useful visual interface we might use with a SQLite database is called SQLite Studio. Install SQLITE Studio here. (Links to an external site.)

\n

Once installed, we can use SQLite Studio to open any .db3 file from a previous lesson. We may view the tables, view the data, and even make changes to the database.

\n

For a more detailed look at SQLite Studio, follow along in the video above.

\n

Overview

\n

A database schema is the shape of our database. It defines what tables we'll have, which columns should exist within the tables and any restrictions on each column.

\n

A well-designed database schema keeps the data well organized and can help ensure high-quality data.

\n

Note that while schema design is usually left to Database Administrators (DBAs), understanding schema helps when designing APIs and database logic. And in a smaller team, this step may fall on the developer.

\n

Follow Along

\n

For a look at schema design in SQLite Studio, follow along in the video above.

\n

When designing a single table, we need to ask three things:

\n\n

Looking at the following schema diagram for an accounts table, we can the answer to each other those questions:

\n

Untitled

\n

Table Fields

\n

Choosing which fields to include in a table is relatively straight forward. What information needs to be tracked regarding this resource? In the real world, this is determined by the intended use of the product or app.

\n

However, this is one requirement every table should satisfy: a primary key. A primary key is a way to identify each entry in the database uniquely. It is most often represented as a auto-incrementing integer called id or [tablename]Id.

\n

Datatypes

\n

Each field must also have a specified datatype. The datatype available depends on our DBMS. Some supported datatype in SQLite include:

\n\n

Any data inserted into the table must match the datatypes determined in schema design.

\n

Constraints

\n

Beyond datatypes, we may add additional constraints on each field. Some examples include:

\n\n

As with data types, any data that does not satisfy the schema constraints will be rejected from the database.

\n

Multi-Table Design

\n

Another critical component of schema design is to understand how different tables relate to each other. This will be covered in later lesson.

\n

Overview

\n

Knex provides a schema builder, which allows us to write code to design our database schema. However, beyond thinking about columns and constraints, we must also consider updates.

\n

When a schema needs to be updated, a developer must feel confident that the changes go into effect everywhere. This means schema updates on the developer's local machine, on any testing or staging versions, on the production database, and then on any other developer's local machines. This is where migrations come into play.

\n

A database migration describes changes made to the structure of a database. Migrations include things like adding new objects, adding new tables, and modifying existing objects or tables.

\n

Follow Along

\n

Knex Cli

\n

To use migrations (and to make Knex setup easier), we need to use knex cli. Install knex globally with npm install -g knex.

\n

This allows you to use Knex commands within any repo that has knex as a local dependency. If you have any issues with this global install, you can use the npx knex command instead.

\n

Initializing Knex

\n

To start, add the knex and sqlite3 libraries to your repository.

\n

npm install knex sqlite3

\n

We've seen how to use manually create a config object to get started with Knex, but the best practice is to use the following command:

\n

Or, if Knex isn't globally installed:

\n

This command will generate a file in your root folder called knexfile.js. It will be auto populated with three config objects, based on different environments. We can delete all except for the development object.

\n

We'll need to update the location (or desired location) of the database as well as add the useNullAsDefault option. The latter option prevents crashes when working with sqlite3.

\n

Now, wherever we configure our database, we may use the following syntax instead of hardcoding in a config object.

\n

Knex Migrations

\n

Once our knexfile is set up, we can begin creating migrations. Though it's not required, we are going to add an addition option to the config object to specify a directory for the migration files.

\n

We can generate a new migration with the following command:

\n

knex migrate:make [migration-name]

\n

If we needed to create an accounts table, we might run:

\n

knex migrate:make create-accounts

\n

Note that inside data/migrations/ a new file has appeared. Migrations have a timestamp in their filenames automatically. Wither you like this or not, do not edit migration names.

\n

The migration file should have both an up and a down function. Within the up function, we write the ended database changes. Within the down function, we write the code to undo the up functions. This allows us to undo any changes made to the schema if necessary.

\n

References for these methods are found in the schema builder section of the Knex docs (Links to an external site.).

\n

At this point, the table is not yet created. To run this (and any other) migrations, use the command:

\n

knex migrate:latest

\n

Note if the database does not exist, this command will auto-generate one. We can use SQLite Studio to confirm that the accounts table has been created.

\n

Changes and Rollbacks

\n

If later down the road, we realize you need to update your schema, you shouldn't edit the migration file. Instead, you will want to create a new migration with the command:

\n

knex migrate:make accounts-schema-update

\n

Once we've written our updates into this file we save and close with:

\n

knex migrate:latest

\n

If we migrate our database and then quickly realize something isn't right, we can edit the migration file. However, first, we need to rolllback (or undo) our last migration with:

\n

knex migrate:rollback

\n

Finally, we are free to rerun that file with knex migrate latest.

\n

NOTE: A rollback should not be used to edit an old migration file once that file has accepted into a main branch. However, an entire team may use a rollback to return to a previous version of a database.

\n

Overview

\n

Knex provides a schema builder, which allows us to write code to design our database schema. However, beyond thinking about columns and constraints, we must also consider updates.

\n

When a schema needs to be updated, a developer must feel confident that the changes go into effect everywhere. This means schema updates on the developer's local machine, on any testing or staging versions, on the production database, and then on any other developer's local machines. This is where migrations come into play.

\n

A database migration describes changes made to the structure of a database. Migrations include things like adding new objects, adding new tables, and modifying existing objects or tables.

\n

Follow Along

\n

Knex Cli

\n

To use migrations (and to make Knex setup easier), we need to use knex cli. Install knex globally with npm install -g knex.

\n

This allows you to use Knex commands within any repo that has knex as a local dependency. If you have any issues with this global install, you can use the npx knex command instead.

\n

Initializing Knex

\n

To start, add the knex and sqlite3 libraries to your repository.

\n

npm install knex sqlite3

\n

We've seen how to use manually create a config object to get started with Knex, but the best practice is to use the following command:

\n

Or, if Knex isn't globally installed:

\n

This command will generate a file in your root folder called knexfile.js. It will be auto populated with three config objects, based on different environments. We can delete all except for the development object.

\n

We'll need to update the location (or desired location) of the database as well as add the useNullAsDefault option. The latter option prevents crashes when working with sqlite3.

\n

Now, wherever we configure our database, we may use the following syntax instead of hardcoding in a config object.

\n

Knex Migrations

\n

Once our knexfile is set up, we can begin creating migrations. Though it's not required, we are going to add an addition option to the config object to specify a directory for the migration files.

\n

We can generate a new migration with the following command:

\n

knex migrate:make [migration-name]

\n

If we needed to create an accounts table, we might run:

\n

knex migrate:make create-accounts

\n

Note that inside data/migrations/ a new file has appeared. Migrations have a timestamp in their filenames automatically. Wither you like this or not, do not edit migration names.

\n

The migration file should have both an up and a down function. Within the up function, we write the ended database changes. Within the down function, we write the code to undo the up functions. This allows us to undo any changes made to the schema if necessary.

\n

References for these methods are found in the schema builder section of the Knex docs (Links to an external site.).

\n

At this point, the table is not yet created. To run this (and any other) migrations, use the command:

\n

knex migrate:latest

\n

Note if the database does not exist, this command will auto-generate one. We can use SQLite Studio to confirm that the accounts table has been created.

\n

Changes and Rollbacks

\n

If later down the road, we realize you need to update your schema, you shouldn't edit the migration file. Instead, you will want to create a new migration with the command:

\n

knex migrate:make accounts-schema-update

\n

Once we've written our updates into this file we save and close with:

\n

knex migrate:latest

\n

If we migrate our database and then quickly realize something isn't right, we can edit the migration file. However, first, we need to rolllback (or undo) our last migration with:

\n

knex migrate:rollback

\n

Finally, we are free to rerun that file with knex migrate latest.

\n

NOTE: A rollback should not be used to edit an old migration file once that file has accepted into a main branch. However, an entire team may use a rollback to return to a previous version of a database.

\n

Overview

\n

Often we want to pre-populate our database with sample data for testing. Seeds allow us to add and reset sample data easily.

\n

Follow Along

\n

The Knex command-line tool offers a way to seed our database; in other words, pre-populate our tables.

\n

Similarly to migrations, we want to customize where our seed files are generated using our knexfile

\n

To create a seed run: knex seed:make 001-seedName

\n

Numbering is a good idea because Knex doesn't attach a timestamp to the name like migrate does. Adding numbers to the file name, we can control the order in which they run.

\n

We want to create seeds for our accounts table:

\n

knex seed:make 001-accounts

\n

A file will appear in the designated seed folder.

\n

Run the seed files by typing:

\n

knex seed:run

\n

You can now use SQLite Studio to confirm that the accounts table has two entries.

\n

Day #3:

\n

Overview

\n

Foreign keys are a type of table field used for creating links between tables. Like primary keys, they are most often integers that identify (rather than store) data. However, whereas a primary key is used to id rows in a table, foreign keys are used to connect a record in one table to a record in a second table.

\n

Follow Along

\n

Consider the following farms and ranchers tables.

\n

Untitled

\n

Untitled

\n

The farmid in the ranchers table is an example of a foreign key. Each entry in the farmid (foreign key) column corresponds to an id (primary key) in the farms table. This allows us to track which farm each rancher belongs to while keeping the tables normalized.

\n

If we could only see the ranchers table, we would know that John, Jane, and Jen all work together and that Jim and Jay also work together. However, to know where any of them work, we would need to look at the farms table.

\n

Now that we understand the basics of querying data from a single table, let's move on to selecting data from multiple tables using JOIN operations.

\n

Overview

\n

We can use a JOIN to combine query data from multiple tables using a single SELECT statement.

\n

There are different types of joins; some are listed below:

\n\n

Using joins requires that the two tables of interest contain at least one field with shared information. For example, if a departments table has an id field, and an employee table has a department_id field, and the values that exist in the id column of the departments table live in the department_id field of the employee table, we can use those fields to join both tables like so:

\n

This query will return the data from both tables for every instance where the ON condition is true. If there are employees with no value for departmentid or where the value stored in the field does not correspond to an existing id in the departments table, then that record will NOT be returned. In a similar fashion, any records from the departments table that don't have an employee associated with them will also be omitted from the results. Basically, if the id* does not show as the value of department_id for an employee, it won't be able to join.

\n

We can shorten the condition by giving the table names an alias. This is a common practice. Below is the same example using aliases, picking which fields to return and sorting the results:

\n

Notice that we can take advantage of white space and indentation to make queries more readable.

\n

There are several ways of writing joins, but the one shown here should work on all database management systems and avoid some pitfalls, so we recommend it.

\n

The syntax for performing a similar join using Knex is as follows:

\n

Follow Along

\n

A good explanation of how the different types of joins can be seen in this article from w3resource.com (Links to an external site.).

\n

What is SQL Joins?

\n

An SQL JOIN clause combines rows from two or more tables. It creates a set of rows in a temporary table.

\n

How to Join two tables in SQL?

\n

A JOIN works on two or more tables if they have at least one common field and have a relationship between them.

\n

JOIN keeps the base tables (structure and data) unchanged.

\n

Join vs. Subquery

\n\n

SQL JOINS: EQUI JOIN and NON EQUI JOIN

\n

The are two types of SQL JOINS - EQUI JOIN and NON EQUI JOIN

\n
    \n
  1. SQL EQUI JOIN :
    2. \n
\n

The SQL EQUI JOIN is a simple SQL join uses the equal sign(=) as the comparison operator for the condition. It has two types - SQL Outer join and SQL Inner join.

\n
    \n
  1. SQL NON EQUI JOIN :
    2. \n
\n

The SQL NON EQUI JOIN is a join uses comparison operator other than the equal sign like >, <, >=, <= with the condition.

\n

SQL EQUI JOIN : INNER JOIN and OUTER JOIN

\n

The SQL EQUI JOIN can be classified into two types - INNER JOIN and OUTER JOIN

\n
    \n
  1. SQL INNER JOIN
    2. \n
\n

This type of EQUI JOIN returns all rows from tables where the key record of one table is equal to the key records of another table.

\n
    \n
  1. SQL OUTER JOIN
    2. \n
\n

This type of EQUI JOIN returns all rows from one table and only those rows from the secondary table where the joined condition is satisfying i.e. the columns are equal in both tables.

\n

In order to perform a JOIN query, the required information we need are:

\n

a) The name of the tablesb) Name of the columns of two or more tables, based on which a condition will perform.

\n

Syntax:

\n

Parameters:

\n

Untitled

\n

Pictorial Presentation of SQL Joins:

\n

\n

Example:

\n

Sample table: company

\n

Sample table: foods

\n

To join two tables 'company' and 'foods', the following SQL statement can be used :

\n

SQL Code:

\n

Copy

\n

Output:

\n

Overview

\n

While we can write database code directly into our endpoints, best practices dictate that all database logic exists in separate, modular methods. These files containing database access helpers are often called models

\n

Follow Along

\n

To handle CRUD operations for a single resource, we would want to create a model (or database access file) containing the following methods:

\n

Each of these functions would use Knex logic to perform the necessary database operation.

\n

For each method, we can choose what value to return. For example, we may prefer findById() to return a single user object rather than an array.

\n

We can also use existing methods like findById() to help add() return the new user (instead of just the id).

\n

Once all methods are written as desired, we can export them like so:

\n

…and use the helpers in our endpoints

\n

There should no be knex code in the endpoints themselves.

\n

Day #4:

\n

\n

Overview

\n

Normalization is the process of designing or refactoring database tables for maximum consistency and minimum redundancy.

\n

With objects, we're used to denormalized data, stored with ease of use and speed in mind. Non-normalized tables are considered ineffective in relational databases.

\n

Follow Along

\n

Data normalization is a deep topic in database design. To begin thinking about it, we'll explore a few basic guidelines and some data examples that violate these rules.

\n

Normalization Guidelines

\n\n

Denormalized Data

\n

Untitled

\n

This table has two issues. There is no proper id field (as multiple farms may have the same name), and multiple fields are representing the same type of data: animals.

\n

Untitled

\n

While we have now eliminated the first two issues, we now have multiple entries in one field, separated by commas. This isn't good either, as its another example of denormalization. There is no \"array\" data type in a relational database, so each field must contain only one data point.

\n

Untitled

\n

Now we've solved the multiple fields issue, but we created repeating data (the farm field), which is also an example of denormalization. As well, we can see that if we were tracking additional ranch information (such as annual revenue), that field is only vaguely related to the animal information.

\n

When these issues begin arising in your schema design, it means that you should separate information into two or more tables.

\n

Anomalies

\n

Obeying the above guidelines prevent anomalies in your database when inserting, updating, or deleting. For example, imagine if the revenue of Beech Ranch changed. With our denormalized schema, it may get updated in some records but not others:

\n

Untitled

\n

Similarly, if Beech Ranch shut down, there would be three (if not more) records that needed to be deleted to remove a single farm.

\n

Thus a denormalized table opens the door for contradictory, confusing, and unusable data.

\n

Challenge

\n

What issues does the following table have?

\n

Untitled

\n

Overview

\n

There are three types of relationships:

\n\n

Determining how data is related can provide a set of guidelines for table representation and guides the use of foreign keys to connect said tables.

\n

Follow Along

\n

One to One Relationships

\n

Imagine we are storing the financial projections for a series of farms.

\n

We may wish to attach fields like farm name, address, description, projected revenue, and projected expenses. We could divide these fields into two categories: information related to the farm directly (name, address, description) and information related to the financial projections (revenue, expenses).

\n

We would say that farms and projections have a one-to-one relationship. This is to say that every farm has exactly one projection, and every project corresponds to exactly one farm.

\n

This data can be represented in two tables: farms and projections

\n

Untitled

\n

Untitled

\n

The farm_id is the foreign key that links farms and projections together.

\n

Notes about one-to-one relationships:

\n\n

One to Many Relationships

\n

Now imagine, we are storing the full-time ranchers employed at each farm. In this case, each rancher would only work at one farm however, each farm may have multiple ranchers.

\n

This is called a one-to-many relationship.

\n

This is the most common type of relationship between entities. Some other examples:

\n\n

Manage this type of relationship by adding a foreign key on the \"many\" table of the relationship that points to the primary key on the \"one\" table. Consider the farms and ranchers tables.

\n

Untitled

\n

Untitled

\n

In a many-to-many relationship, the foreign key (in this case farm_id) should not be unique.

\n

Many to Many Relationships

\n

If we want to track animals on a farm as well, we must explore the many-to-many relationship. A farm has multiple animals, and multiple of each type of animal is present at multiple different farms.

\n

Some other examples:

\n\n

To model this relationship, we need to introduce an intermediary table that holds foreign keys that reference the primary key on the related tables. We now have a farms, animals, and farm_animals table.

\n

Untitled

\n

Untitled

\n

Untitled

\n

While each foreign key on the intermediary table is not unique, the combinations of keys should be unique.

\n

Overview

\n

The Knex query builder library also allows us to create multi-table schemas include foreign keys. However, there are a few extra things to keep in mind when designing a multi-table schema, such as using the correct order when creating tables, dropping tables, seeding data, and removing data.

\n

We have to consider the way that delete and updates through our API will impact related data.

\n

Follow Along

\n

Foreign Key Setup

\n

In Knex, foreign key restrictions don't automatically work. Whenever using foreign keys in your schema, add the following code to your knexfile. This will prevent users from entering bad data into a foreign key column.

\n

Migrations

\n

Let's look at how we might track our farms and ranchers using Knex. In our migration file's up function, we would want to create two tables:

\n

Note that the foreign key can only be created after the reference table.

\n

In the down function, the opposite is true. We always want to drop a table with a foreign key before dropping the table it references.

\n

In the case of a many-to-many relationship, the syntax for creating an intermediary table is identical, except for one additional piece. We need a way to make sure our combination of foreign keys is unique.

\n

Seeds

\n

Order is also a concern when seeding. We want to create seeds in the same order we created our tables. In other words, don't create a seed with a foreign key, until that reference record exists.

\n

In our example, make sure to write the 01-farms seed file and then the 02-ranchers seed file.

\n

However, we run into a problem with truncating our seeds, because we want to truncate 02-ranchers before 01-farms. A library called knex-cleaner provides an easy solution for us.

\n

Run knex seed:make 00-cleanup and npm install knex-cleaner. Inside the cleanup seed, use the following code.

\n

This removes all tables (excluding the two tables that track migrations) in the correct order before any seed files run.

\n

Cascading

\n

If a user attempt to delete a record that is referenced by another record (such as attempting to delete Morton Ranch when entries in our ranchers table reference that record), by default, the database will block the action. The same thing can happen when updating a record when a foreign key reference.

\n

If we want that to override this default, we can delete or update with cascade. With cascade, deleting a record also deletes all referencing records, we can set that up in our schema.

"},{"url":"/blog/git-gateway/","relativePath":"blog/git-gateway.md","relativeDir":"blog","base":"git-gateway.md","name":"git-gateway","frontmatter":{"title":"Git Bash","subtitle":"understanding git bsh","date":"2021-09-02","thumb_image_alt":"lorem-ipsum","excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"post","thumb_image":"images/chrome_oKIMcC3StQ.png"},"html":"

Understanding Git Bash

\n

Git Bash

\n

At its core, Git is a set of command line utility programs that are designed to execute on a Unix style command-line environment. Modern operating systems like Linux and macOS both include built-in Unix command line terminals. This makes Linux and macOS complementary operating systems when working with Git. Microsoft Windows instead uses Windows command prompt, a non-Unix terminal environment.

\n

In Windows environments, Git is often packaged as part of higher level GUI applications. GUIs for Git may attempt to abstract and hide the underlying version control system primitives. This can be a great aid for Git beginners to rapidly contribute to a project. Once a project's collaboration requirements grow with other team members, it is critical to be aware of how the actual raw Git methods work. This is when it can be beneficial to drop a GUI version for the command line tools. Git Bash is offered to provide a terminal Git experience.

\n

What is Git Bash?

\n

Git Bash is an application for Microsoft Windows environments which provides an emulation layer for a Git command line experience. Bash is an acronym for Bourne Again Shell. A shell is a terminal application used to interface with an operating system through written commands. Bash is a popular default shell on Linux and macOS. Git Bash is a package that installs Bash, some common bash utilities, and Git on a Windows operating system.

\n

How to install Git Bash

\n

Git Bash comes included as part of the Git For Windows package. Download and install Git For Windows like other Windows applications. Once downloaded find the included .exe file and open to execute Git Bash.

\n

How to use Git Bash

\n

Git Bash has the same operations as a standard Bash experience. It will be helpful to review basic Bash usage. Advanced usage of Bash is outside the scope of this Git focused document.

\n

How to navigate folders

\n

The Bash command pwd is used to print the 'present working directory'. pwd is equivalent to executing cd on a DOS(Windows console host) terminal. This is the folder or path that the current Bash session resides in.

\n

The Bash command ls is used to 'list' contents of the current working directory. ls is equivalent to DIR on a Windows console host terminal.

\n

Both Bash and Windows console host have a cd command. cd is an acronym for 'Change Directory'. cd is invoked with an appended directory name. Executing cd will change the terminal sessions current working directory to the passed directory argument.

\n

Git Bash Commands

\n

Git Bash is packaged with additional commands that can be found in the /usr/bin directory of the Git Bash emulation. Git Bash can actually provide a fairly robust shell experience on Windows. Git Bash comes packaged with the following shell commands which are outside the scope of this document: [Ssh](https://man.openbsd.org/ssh.1), [scp](https://linux.die.net/man/1/scp), [cat](http://man7.org/linux/man-pages/man1/cat.1.html), [find](https://linux.die.net/man/1/find).

\n

In addition the previously discussed set of Bash commands, Git Bash includes the full set of Git core commands discussed through out this site. Learn more at the corresponding documentation pages for

"},{"url":"/blog/data-structures/","relativePath":"blog/data-structures.md","relativeDir":"blog","base":"data-structures.md","name":"data-structures","frontmatter":{"title":"Leetcode (Data Structures)","subtitle":"practice","date":"2021-09-14","thumb_image_alt":"Big O Cheat Sheet","excerpt":"A guide to computational complexity","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"post","image":"images/ds.PNG","thumb_image":"images/bigo-8f9701e1.jpg"},"html":"

Leetcode

\n

Data Structures & Algorithms

\n

DS Algo Codebase

\n

\"-----------------------------------------------------\"

\n

➤ 115. Distinct Subsequences

\n

Problem:

\n

Given a string S and a string T, count the number of distinct subsequences of S which equals T.

\n

A subsequence of a string is a new string which is formed from the original string by deleting some (can be none) of the characters without disturbing the relative positions of the remaining characters. (ie, \"ACE\" is a subsequence of \"ABCDE\" while \"AEC\" is not).

\n

Example 1:

\n
Input: S = \"rabbbit\", T = \"rabbit\"\nOutput: 3\nExplanation:\n\nAs shown below, there are 3 ways you can generate \"rabbit\" from S.\n(The caret symbol ^ means the chosen letters)\n\nrabbbit\n^^^^ ^^\nrabbbit\n^^ ^^^^\nrabbbit\n^^^ ^^^\n
\n

Example 2:

\n
Input: S = \"babgbag\", T = \"bag\"\nOutput: 5\nExplanation:\n\nAs shown below, there are 5 ways you can generate \"bag\" from S.\n(The caret symbol ^ means the chosen letters)\n\nbabgbag\n^^ ^\nbabgbag\n^^    ^\nbabgbag\n^    ^^\nbabgbag\n  ^  ^^\nbabgbag\n    ^^^\n
\n

Solution:

\n

Define f(i, j) to be the number of ways that generate T[0...j) from S[0...i).

\n

For f(i, j) you can always skip S[i-1], but can only take it when S[i-1] === T[j-1].

\n
f(0, j) = 0, j > 0 // nothing to delete\nf(i, 0) = 1 // delete all\nf(i, j) = f(i-1, j) + (S[i-1] === T[j-1] ? f(i-1, j-1) : 0)\n
\n

Dynamic array can be used.

\n
/**\n * @param {string} s\n * @param {string} t\n * @return {number}\n */\nlet numDistinct = function (s, t) {\n    const lens = s.length;\n    const lent = t.length;\n    const dp = new Array(lent + 1).fill(0);\n    dp[0] = 1;\n    for (let i = 1; i <= lens; i++) {\n        for (let j = lent; j >= 1; j--) {\n            if (s[i - 1] === t[j - 1]) {\n                dp[j] += dp[j - 1];\n            }\n        }\n    }\n    return dp[lent];\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Tree\": https://leetcode.com/tag/tree\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\nSimilar Questions:\n\"Populating Next Right Pointers in Each Node II\": https://leetcode.com/problems/populating-next-right-pointers-in-each-node-ii\n\"Binary Tree Right Side View\": https://leetcode.com/problems/binary-tree-right-side-view

\n
\n

\"-----------------------------------------------------\"

\n

➤ 116. Populating Next Right Pointers in Each Node

\n

Problem:

\n

Given a binary tree

\n
struct TreeLinkNode {\n  TreeLinkNode *left;\n  TreeLinkNode *right;\n  TreeLinkNode *next;\n}\n
\n

Populate each next pointer to point to its next right node. If there is no next right node, the next pointer should be set to NULL.

\n

Initially, all next pointers are set to NULL.

\n

Note:

\n\n

Example:

\n

Given the following perfect binary tree,

\n
     1\n   /  \\\n  2    3\n / \\  / \\\n4  5  6  7\n
\n

After calling your function, the tree should look like:

\n
     1 -> NULL\n   /  \\\n  2 -> 3 -> NULL\n / \\  / \\\n4->5->6->7 -> NULL\n
\n

Solution:

\n

ONE

\n

Recursive.

\n

For every node:

\n\n
/**\n * Definition for binary tree with next pointer.\n * function TreeLinkNode(val) {\n *     this.val = val;\n *     this.left = this.right = this.next = null;\n * }\n */\n\n/**\n * @param {TreeLinkNode} root\n * @return {void} Do not return anything, modify tree in-place instead.\n */\nlet connect = function (root) {\n    if (!root) {\n        return;\n    }\n    if (root.left !== null) {\n        root.left.next = root.right;\n        connect(root.left);\n    }\n    if (root.right !== null) {\n        if (root.next !== null) {\n            root.right.next = root.next.left;\n        }\n        connect(root.right);\n    }\n};\n
\n

TWO

\n

Level order traversal.

\n
/**\n * Definition for binary tree with next pointer.\n * function TreeLinkNode(val) {\n *     this.val = val;\n *     this.left = this.right = this.next = null;\n * }\n */\n\n/**\n * @param {TreeLinkNode} root\n * @return {void} Do not return anything, modify tree in-place instead.\n */\nlet connect = function (root) {\n    if (!root) {\n        return;\n    }\n\n    const queue = [NaN, root];\n    while (queue.length > 1) {\n        const node = queue.shift();\n        if (node !== node) {\n            for (let i = 0; i < queue.length; i++) {\n                queue[i].next = queue[i + 1] || null;\n            }\n            queue.push(NaN);\n        } else {\n            if (node.left !== null) {\n                queue.push(node.left);\n            }\n            if (node.right !== null) {\n                queue.push(node.right);\n            }\n        }\n    }\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Tree\": https://leetcode.com/tag/tree\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\nSimilar Questions:\n\"Populating Next Right Pointers in Each Node\": https://leetcode.com/problems/populating-next-right-pointers-in-each-node

\n
\n

\"-----------------------------------------------------\"

\n

➤ 117. Populating Next Right Pointers in Each Node II

\n

Problem:

\n

Given a binary tree

\n
struct TreeLinkNode {\n  TreeLinkNode *left;\n  TreeLinkNode *right;\n  TreeLinkNode *next;\n}\n
\n

Populate each next pointer to point to its next right node. If there is no next right node, the next pointer should be set to NULL.

\n

Initially, all next pointers are set to NULL.

\n

Note:

\n\n

Example:

\n

Given the following binary tree,

\n
     1\n   /  \\\n  2    3\n / \\    \\\n4   5    7\n
\n

After calling your function, the tree should look like:

\n
     1 -> NULL\n   /  \\\n  2 -> 3 -> NULL\n / \\    \\\n4-> 5 -> 7 -> NULL\n
\n

Solution:

\n

ONE

\n

Recursive. See 116. Populating Next Right Pointers in Each Node.

\n

The tree may not be perfect now. So keep finding next until there is a node with children, or null.

\n

This also means post-order traversal is required.

\n
/**\n * Definition for binary tree with next pointer.\n * function TreeLinkNode(val) {\n *     this.val = val;\n *     this.left = this.right = this.next = null;\n * }\n */\n\n/**\n * @param {TreeLinkNode} root\n * @return {void} Do not return anything, modify tree in-place instead.\n */\nlet connect = function (root) {\n    if (!root) {\n        return;\n    }\n    let next = null;\n    for (let node = root.next; node !== null; node = node.next) {\n        if (node.left !== null) {\n            next = node.left;\n            break;\n        }\n        if (node.right !== null) {\n            next = node.right;\n            break;\n        }\n    }\n    if (root.right !== null) {\n        root.right.next = next;\n    }\n    if (root.left !== null) {\n        root.left.next = root.right || next;\n    }\n    connect(root.right);\n    connect(root.left);\n};\n
\n

TWO

\n

Level order traversal. Exact same as 116. Populating Next Right Pointers in Each Node.

\n
/**\n * Definition for binary tree with next pointer.\n * function TreeLinkNode(val) {\n *     this.val = val;\n *     this.left = this.right = this.next = null;\n * }\n */\n\n/**\n * @param {TreeLinkNode} root\n * @return {void} Do not return anything, modify tree in-place instead.\n */\nlet connect = function (root) {\n    if (!root) {\n        return;\n    }\n\n    const queue = [NaN, root];\n    while (queue.length > 1) {\n        const node = queue.shift();\n        if (node !== node) {\n            for (let i = 0; i < queue.length; i++) {\n                queue[i].next = queue[i + 1] || null;\n            }\n            queue.push(NaN);\n        } else {\n            if (node.left !== null) {\n                queue.push(node.left);\n            }\n            if (node.right !== null) {\n                queue.push(node.right);\n            }\n        }\n    }\n};\n
\n
\n

Difficulty: Easy\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\nSimilar Questions:\n\"Pascal's Triangle II\": https://leetcode.com/problems/pascals-triangle-ii

\n
\n

\"-----------------------------------------------------\"

\n

➤ 118. Pascal's Triangle

\n

Problem:

\n

Given a non-negative integer numRows, generate the first numRows of Pascal's triangle.

\n

\"PascalTriangleAnimated2.gif\"

\n

In Pascal's triangle, each number is the sum of the two numbers directly above it.

\n

Example:

\n
Input: 5\nOutput:\n[\n     [1],\n    [1,1],\n   [1,2,1],\n  [1,3,3,1],\n [1,4,6,4,1]\n]\n
\n

Solution:

\n

Dynamic Programming 101.

\n
/**\n * @param {number} numRows\n * @return {number[][]}\n */\nlet generate = function (numRows) {\n    if (numRows <= 0) {\n        return [];\n    }\n\n    const result = [[1]];\n    for (let i = 1; i < numRows; i++) {\n        const lastRow = result[i - 1];\n        const row = [1];\n        for (let j = 1; j < i; j++) {\n            row[j] = lastRow[j] + lastRow[j - 1];\n        }\n        row.push(1);\n        result.push(row);\n    }\n\n    return result;\n};\n
\n
\n

Difficulty: Easy\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\nSimilar Questions:\n\"Pascal's Triangle\": https://leetcode.com/problems/pascals-triangle

\n
\n

\"-----------------------------------------------------\"

\n

➤ 119. Pascal's Triangle II

\n

Problem:

\n

Given a non-negative index k where k ≤ 33, return the kth index row of the Pascal's triangle.

\n

Note that the row index starts from 0.

\n

\"PascalTriangleAnimated2.gif\"

\n

In Pascal's triangle, each number is the sum of the two numbers directly above it.

\n

Example:

\n
Input: 3\nOutput: [1,3,3,1]\n
\n

Follow up:

\n

Could you optimize your algorithm to use only O(k) extra space?

\n

Solution:

\n

Dynamic Programming 101 with dynamic array.

\n

State (i, j) depends on (i-1, j) and (i-1, j-1). So to access (i-1, j-1) iteration must be from right to left.

\n
/**\n * @param {number} rowIndex\n * @return {number[]}\n */\nlet getRow = function (rowIndex) {\n    if (rowIndex < 0) {\n        return [];\n    }\n\n    const row = [1];\n    for (let i = 1; i <= rowIndex; i++) {\n        for (let j = i - 1; j > 0; j--) {\n            row[j] += row[j - 1];\n        }\n        row.push(1);\n    }\n\n    return row;\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"Dynamic Programming\": https://leetcode.com/tag/dynamic-programming

\n
\n

\"-----------------------------------------------------\"

\n

➤ 120. Triangle

\n

Problem:

\n

Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent numbers on the row below.

\n

For example, given the following triangle

\n
[\n     [2],\n    [3,4],\n   [6,5,7],\n  [4,1,8,3]\n]\n
\n

The minimum path sum from top to bottom is 11 (i.e., 2 + 3 + 5 + 1 = 11).

\n

Note:

\n

Bonus point if you are able to do this using only O(n) extra space, where n is the total number of rows in the triangle.

\n

Solution:

\n

Define f(i, j) to be the minimum path sum from triangle[0][0] to triangle[i][j].

\n
f(i, 0) = f(i-1, j) + triangle[i][0]\nf(i, j) = min( f(i-1, j-1), f(i-1, j) ) + triangle[i][j], 0 < j < i\nf(i, i) = f(i-1, i-1) + triangle[i][i], i > 0\n
\n

Dynamic array can be used.

\n
/**\n * @param {number[][]} triangle\n * @return {number}\n */\nlet minimumTotal = function (triangle) {\n    if (triangle.length <= 0) {\n        return 0;\n    }\n\n    const dp = [triangle[0][0]];\n    for (let i = 1; i < triangle.length; i++) {\n        dp[i] = dp[i - 1] + triangle[i][i];\n        for (let j = i - 1; j >= 1; j--) {\n            dp[j] = Math.min(dp[j], dp[j - 1]) + triangle[i][j];\n        }\n        dp[0] += triangle[i][0];\n    }\n    return Math.min(...dp);\n};\n
\n
\n

Difficulty: Easy\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"Dynamic Programming\": https://leetcode.com/tag/dynamic-programming\nSimilar Questions:\n\"Maximum Subarray\": https://leetcode.com/problems/maximum-subarray\n\"Best Time to Buy and Sell Stock II\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii\n\"Best Time to Buy and Sell Stock III\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iii\n\"Best Time to Buy and Sell Stock IV\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv\n\"Best Time to Buy and Sell Stock with Cooldown\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown

\n
\n

\"-----------------------------------------------------\"

\n

➤ 121. Best Time to Buy and Sell Stock

\n

Problem:

\n

Say you have an array for which the ith element is the price of a given stock on day i.

\n

If you were only permitted to complete at most one transaction (i.e., buy one and sell one share of the stock), design an algorithm to find the maximum profit.

\n

Note that you cannot sell a stock before you buy one.

\n

Example 1:

\n
Input: [7,1,5,3,6,4]\nOutput: 5\nExplanation: Buy on day 2 (price = 1) and sell on day 5 (price = 6), profit = 6-1 = 5.\n             Not 7-1 = 6, as selling price needs to be larger than buying price.\n
\n

Example 2:

\n
Input: [7,6,4,3,1]\nOutput: 0\nExplanation: In this case, no transaction is done, i.e. max profit = 0.\n
\n

Solution:

\n

Only care about positive profits. Take the frist item as base and scan to the right. If we encounter an item j whose price price[j] is lower than the base (which means if we sell now the profit would be negative), we sell j-1 instead and make j the new base.

\n

Because price[j] is lower that the base, using j as new base is guaranteed to gain more profit comparing to the old one.

\n
/**\n * @param {number[]} prices\n * @return {number}\n */\nlet maxProfit = function (prices) {\n    let max = 0;\n    let base = prices[0];\n    for (let i = 1; i < prices.length; i++) {\n        const profit = prices[i] - base;\n        if (profit > max) {\n            max = profit;\n        } else if (profit < 0) {\n            base = prices[i];\n        }\n    }\n    return max;\n};\n
\n
\n

Difficulty: Easy\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"Greedy\": https://leetcode.com/tag/greedy\nSimilar Questions:\n\"Best Time to Buy and Sell Stock\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock\n\"Best Time to Buy and Sell Stock III\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iii\n\"Best Time to Buy and Sell Stock IV\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv\n\"Best Time to Buy and Sell Stock with Cooldown\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown\n\"Best Time to Buy and Sell Stock with Transaction Fee\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-transaction-fee

\n
\n

\"-----------------------------------------------------\"

\n

➤ 122. Best Time to Buy and Sell Stock II

\n

Problem:

\n

Say you have an array for which the ith element is the price of a given stock on day i.

\n

Design an algorithm to find the maximum profit. You may complete as many transactions as you like (i.e., buy one and sell one share of the stock multiple times).

\n

Note: You may not engage in multiple transactions at the same time (i.e., you must sell the stock before you buy again).

\n

Example 1:

\n
Input: [7,1,5,3,6,4]\nOutput: 7\nExplanation: Buy on day 2 (price = 1) and sell on day 3 (price = 5), profit = 5-1 = 4.\n             Then buy on day 4 (price = 3) and sell on day 5 (price = 6), profit = 6-3 = 3.\n
\n

Example 2:

\n
Input: [1,2,3,4,5]\nOutput: 4\nExplanation: Buy on day 1 (price = 1) and sell on day 5 (price = 5), profit = 5-1 = 4.\n             Note that you cannot buy on day 1, buy on day 2 and sell them later, as you are\n             engaging multiple transactions at the same time. You must sell before buying again.\n
\n

Example 3:

\n
Input: [7,6,4,3,1]\nOutput: 0\nExplanation: In this case, no transaction is done, i.e. max profit = 0.\n
\n

Solution:

\n

Sell immediately after the price drops. Or in other perspective, it is the sum of all the incremental pairs (buy in then immediately sell out).

\n
/**\n * @param {number[]} prices\n * @return {number}\n */\nlet maxProfit = function (prices) {\n    let max = 0;\n    for (let i = 1; i < prices.length; i++) {\n        if (prices[i] > prices[i - 1]) {\n            max += prices[i] - prices[i - 1];\n        }\n    }\n    return max;\n};\n
\n
\n

Difficulty: Hard\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"Dynamic Programming\": https://leetcode.com/tag/dynamic-programming\nSimilar Questions:\n\"Best Time to Buy and Sell Stock\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock\n\"Best Time to Buy and Sell Stock II\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii\n\"Best Time to Buy and Sell Stock IV\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv\n\"Maximum Sum of 3 Non-Overlapping Subarrays\": https://leetcode.com/problems/maximum-sum-of-3-non-overlapping-subarrays

\n
\n

\"-----------------------------------------------------\"

\n

➤ 123. Best Time to Buy and Sell Stock III

\n

Problem:

\n

Say you have an array for which the ith element is the price of a given stock on day i.

\n

Design an algorithm to find the maximum profit. You may complete at most two transactions.

\n

**Note:**You may not engage in multiple transactions at the same time (i.e., you must sell the stock before you buy again).

\n

Example 1:

\n
Input: [3,3,5,0,0,3,1,4]\nOutput: 6\nExplanation: Buy on day 4 (price = 0) and sell on day 6 (price = 3), profit = 3-0 = 3.\n             Then buy on day 7 (price = 1) and sell on day 8 (price = 4), profit = 4-1 = 3.\n
\n

Example 2:

\n
Input: [1,2,3,4,5]\nOutput: 4\nExplanation: Buy on day 1 (price = 1) and sell on day 5 (price = 5), profit = 5-1 = 4.\n             Note that you cannot buy on day 1, buy on day 2 and sell them later, as you are\n             engaging multiple transactions at the same time. You must sell before buying again.\n
\n

Example 3:

\n
Input: [7,6,4,3,1]\nOutput: 0\nExplanation: In this case, no transaction is done, i.e. max profit = 0.\n
\n

Solution:

\n

Multiple transactions may not be engaged in at the same time. That means if we view the days that involed in the same transaction as a group, there won't be any intersection. We may complete at most two transactions, so divide the days into two groups, [0...k] and [k...n-1]. Notice k exists in both groups because technically we can sell out then immediately buy in at the same day.

\n

Define p1(i) to be the max profit of day [0...i]. This is just like the problem of 121. Best Time to Buy and Sell Stock.

\n
p1(0) = 0\np1(i) = max( p1(i-1), prices[i] - min(prices[0], ..., prices[i-1]) ), 0 < i <= n-1\n
\n

Define p2(i) to be the max profit of day [i...n-1]. This is the mirror of p1.

\n
p2(n-1) = 0\np2(i) = max( p2(i+1), max(prices[i], ..., prices[n-1]) - prices[i] ), n-1 > i >= 0\n
\n

Define f(k) to be p1(k) + p2(k). We need to get max( f(0), ..., f(n-1) ).

\n
/**\n * @param {number[]} prices\n * @return {number}\n */\nlet maxProfit = function (prices) {\n    const len = prices.length;\n    if (len <= 1) {\n        return 0;\n    }\n\n    const dp = [0];\n\n    let min = prices[0];\n    for (let i = 1; i < len; i++) {\n        dp[i] = Math.max(dp[i - 1], prices[i] - min);\n        min = Math.min(prices[i], min);\n    }\n\n    let p2 = 0;\n    let max = prices[len - 1];\n    for (let i = len - 2; i >= 0; i--) {\n        max = Math.max(prices[i], max);\n        p2 = Math.max(p2, max - prices[i]);\n        dp[i] += p2;\n    }\n\n    return Math.max(...dp);\n};\n
\n
\n

Difficulty: Hard\nRelated Topics:\n\"Tree\": https://leetcode.com/tag/tree\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\nSimilar Questions:\n\"Path Sum\": https://leetcode.com/problems/path-sum\n\"Sum Root to Leaf Numbers\": https://leetcode.com/problems/sum-root-to-leaf-numbers\n\"Path Sum IV\": https://leetcode.com/problems/path-sum-iv\n\"Longest Univalue Path\": https://leetcode.com/problems/longest-univalue-path

\n
\n

\"-----------------------------------------------------\"

\n

➤ 124. Binary Tree Maximum Path Sum

\n

Problem:

\n

Given a non-empty binary tree, find the maximum path sum.

\n

For this problem, a path is defined as any sequence of nodes from some starting node to any node in the tree along the parent-child connections. The path must contain at least one node and does not need to go through the root.

\n

Example 1:

\n
Input: [1,2,3]\n\n       1\n      / \\\n     2   3\n\nOutput: 6\n
\n

Example 2:

\n
Input: [-10,9,20,null,null,15,7]\n\n   -10\n   / \\\n  9  20\n    /  \\\n   15   7\n\nOutput: 42\n
\n

Solution:

\n

For every node, there are six possible ways to get the max path sum:

\n\n

There are two ways to implement this.

\n

ONE

\n

Define a function that returns two values. The max sum of a path that may or may not end with root node, and the max sum of the path that ends with root node.

\n
/**\n * Definition for a binary tree node.\n * function TreeNode(val) {\n *     this.val = val;\n *     this.left = this.right = null;\n * }\n */\n/**\n * @param {TreeNode} root\n * @return {number}\n */\nlet maxPathSum = function (root) {\n    return Math.max(..._maxPathSum(root));\n};\n\n/**\n * @param {TreeNode} root\n * @return {number[]}\n */\nfunction _maxPathSum(root) {\n    if (!root) {\n        return [-Infinity, -Infinity];\n    }\n\n    const left = _maxPathSum(root.left);\n    const right = _maxPathSum(root.right);\n    return [Math.max(left[0], right[0], root.val + Math.max(0, left[1], right[1], left[1] + right[1])), Math.max(left[1], right[1], 0) + root.val];\n}\n
\n

TWO

\n

Just return the later (max sum of a path that ends with root). Maintain a global variable to store the disconnected max sum.

\n
/**\n * Definition for a binary tree node.\n * function TreeNode(val) {\n *     this.val = val;\n *     this.left = this.right = null;\n * }\n */\n/**\n * @param {TreeNode} root\n * @return {number}\n */\nlet maxPathSum = function (root) {\n    const global = { max: -Infinity };\n    _maxPathSum(root, global);\n    return global.max;\n};\n\n/**\n * @param {TreeNode} root\n * @param {object} global\n * @param {number} global.max\n * @return {number[]}\n */\nfunction _maxPathSum(root, global) {\n    if (!root) {\n        return -Infinity;\n    }\n\n    const left = _maxPathSum(root.left, global);\n    const right = _maxPathSum(root.right, global);\n    const localMax = Math.max(left, right, 0) + root.val;\n    global.max = Math.max(global.max, localMax, root.val + left + right);\n    return localMax;\n}\n
\n
\n

Difficulty: Easy\nRelated Topics:\n\"Two Pointers\": https://leetcode.com/tag/two-pointers\n\"String\": https://leetcode.com/tag/string\nSimilar Questions:\n\"Palindrome Linked List\": https://leetcode.com/problems/palindrome-linked-list\n\"Valid Palindrome II\": https://leetcode.com/problems/valid-palindrome-ii

\n
\n

\"-----------------------------------------------------\"

\n

➤ 125. Valid Palindrome

\n

Problem:

\n

Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignoring cases.

\n

Note: For the purpose of this problem, we define empty string as valid palindrome.

\n

Example 1:

\n
Input: \"A man, a plan, a canal: Panama\"\nOutput: true\n
\n

Example 2:

\n
Input: \"race a car\"\nOutput: false\n
\n

Solution:

\n

ONE

\n
/**\n * @param {string} s\n * @return {boolean}\n */\nlet isPalindrome = function (s) {\n    const clean = s.toLowerCase().split(/[^a-z0-9]*/);\n    return clean.join('') === clean.reverse().join('');\n};\n
\n

TWO

\n

Remove non-alphanumeric characters then compare.

\n
/**\n * @param {string} s\n * @return {boolean}\n */\nlet isPalindrome = function (s) {\n    const clean = s.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();\n    for (let i = 0, j = clean.length - 1; i < j; i++, j--) {\n        if (clean[i] !== clean[j]) {\n            return false;\n        }\n    }\n    return true;\n};\n
\n

THREE

\n

Compare the char codes.

\n
/**\n * @param {string} s\n * @return {boolean}\n */\nlet isPalindrome = function (s) {\n    for (let i = 0, j = s.length - 1; i < j; i++, j--) {\n        let left = s.charCodeAt(i);\n        while (i < j && (left < 48 || (left > 57 && left < 65) || (left > 90 && left < 97) || left > 122)) {\n            left = s.charCodeAt(++i);\n        }\n        if (i >= j) {\n            return true;\n        }\n        if (left >= 65 && left <= 90) {\n            left += 32;\n        }\n\n        let right = s.charCodeAt(j);\n        while (i < j && (right < 48 || (right > 57 && right < 65) || (right > 90 && right < 97) || right > 122)) {\n            right = s.charCodeAt(--j);\n        }\n        if (i >= j) {\n            return true;\n        }\n        if (right >= 65 && right <= 90) {\n            right += 32;\n        }\n\n        if (left !== right) {\n            return false;\n        }\n    }\n\n    return true;\n};\n
\n
\n

Difficulty: Hard\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"String\": https://leetcode.com/tag/string\n\"Backtracking\": https://leetcode.com/tag/backtracking\n\"Breadth-first Search\": https://leetcode.com/tag/breadth-first-search\nSimilar Questions:\n\"Word Ladder\": https://leetcode.com/problems/word-ladder

\n
\n

\"-----------------------------------------------------\"

\n

➤ 126. Word Ladder II

\n

Problem:

\n

Given two words (beginWord and endWord), and a dictionary's word list, find all shortest transformation sequence(s) from beginWord to endWord, such that:

\n
    \n
  1. Only one letter can be changed at a time
    2. \n
  2. Each transformed word must exist in the word list. Note that beginWord is not a transformed word.
    3. \n
\n

Note:

\n\n

Example 1:

\n
Input:\nbeginWord = \"hit\",\nendWord = \"cog\",\nwordList = [\"hot\",\"dot\",\"dog\",\"lot\",\"log\",\"cog\"]\n\nOutput:\n[\n  [\"hit\",\"hot\",\"dot\",\"dog\",\"cog\"],\n  [\"hit\",\"hot\",\"lot\",\"log\",\"cog\"]\n]\n
\n

Example 2:

\n
Input:\nbeginWord = \"hit\"\nendWord = \"cog\"\nwordList = [\"hot\",\"dot\",\"dog\",\"lot\",\"log\"]\n\nOutput: []\n\nExplanation: The endWord \"cog\" is not in wordList, therefore no possible transformation.\n
\n

Solution:

\n

This is just like 127. Word Ladder.

\n

The constrain still works, but instead of deleting the words right away, collect them and delete them all when a level ends, so that we can reuse the words (matching different parents in the same level).

\n

The items in the queue are not just words now. Parent nodes are also kept so that we can backtrack the path from the end.

\n
/**\n * @param {string} beginWord\n * @param {string} endWord\n * @param {string[]} wordList\n * @return {string[][]}\n */\nfunction findLadders(beginWord, endWord, wordList) {\n    wordList = new Set(wordList);\n    if (!wordList.has(endWord)) {\n        return [];\n    }\n\n    const ALPHABET = 'abcdefghijklmnopqrstuvwxyz';\n\n    const result = [];\n    let isEndWordFound = false;\n    const levelWords = new Set();\n    const queue = [[beginWord, null], null];\n    while (queue.length > 1) {\n        const node = queue.shift();\n\n        if (node === null) {\n            if (isEndWordFound) {\n                break;\n            }\n            levelWords.forEach((word) => wordList.delete(word));\n            levelWords.clear();\n            queue.push(null);\n            continue;\n        }\n\n        const word = node[0];\n\n        for (let i = word.length - 1; i >= 0; i--) {\n            const head = word.slice(0, i);\n            const tail = word.slice(i + 1);\n\n            for (let c = 0; c < 26; c++) {\n                if (ALPHABET[c] !== word[i]) {\n                    const w = head + ALPHABET[c] + tail;\n                    if (w === endWord) {\n                        const path = [endWord];\n                        for (let n = node; n !== null; n = n[1]) {\n                            path.unshift(n[0]);\n                        }\n                        result.push(path);\n                        isEndWordFound = true;\n                    }\n                    if (wordList.has(w)) {\n                        levelWords.add(w);\n                        queue.push([w, node]);\n                    }\n                }\n            }\n        }\n    }\n\n    return result;\n}\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Breadth-first Search\": https://leetcode.com/tag/breadth-first-search\nSimilar Questions:\n\"Word Ladder II\": https://leetcode.com/problems/word-ladder-ii\n\"Minimum Genetic Mutation\": https://leetcode.com/problems/minimum-genetic-mutation

\n
\n

\"-----------------------------------------------------\"

\n

➤ 127. Word Ladder

\n

Problem:

\n

Given two words (beginWord and endWord), and a dictionary's word list, find the length of shortest transformation sequence from beginWord to endWord, such that:

\n
    \n
  1. Only one letter can be changed at a time.
    2. \n
  2. Each transformed word must exist in the word list. Note that beginWord is not a transformed word.
    3. \n
\n

Note:

\n\n

Example 1:

\n
Input:\nbeginWord = \"hit\",\nendWord = \"cog\",\nwordList = [\"hot\",\"dot\",\"dog\",\"lot\",\"log\",\"cog\"]\n\nOutput: 5\n\nExplanation: As one shortest transformation is \"hit\" -> \"hot\" -> \"dot\" -> \"dog\" -> \"cog\",\nreturn its length 5.\n
\n

Example 2:

\n
Input:\nbeginWord = \"hit\"\nendWord = \"cog\"\nwordList = [\"hot\",\"dot\",\"dog\",\"lot\",\"log\"]\n\nOutput: 0\n\nExplanation: The endWord \"cog\" is not in wordList, therefore no possible transformation.\n
\n

Solution:

\n

Think of it as building a tree, with begineWord as root and endWord as leaves.

\n

The best way control the depth (length of the shortest transformations) while building the tree is level-order traversal (BFS).

\n

We do not actually build the tree because it is expensive (astronomical if the list is huge). In fact, we only need one shortest path. So just like Dijkstra's algorithm, we say that the first time (level i) we encounter a word that turns out to be in a shortest path, then level i is the lowest level this word could ever get. We can safely remove it from the wordList.

\n

To find all the next words, instead of filtering the wordList, enumerate all 25 possible words and check if in wordList.

\n
/**\n * @param {string} beginWord\n * @param {string} endWord\n * @param {string[]} wordList\n * @return {number}\n */\nlet ladderLength = function (beginWord, endWord, wordList) {\n    wordList = new Set(wordList);\n    if (!wordList.has(endWord)) {\n        return 0;\n    }\n\n    const ALPHABET = 'abcdefghijklmnopqrstuvwxyz';\n\n    let level = 1;\n    const queue = [beginWord, null];\n    while (queue.length > 1) {\n        const word = queue.shift();\n\n        if (word === null) {\n            level++;\n            queue.push(null);\n            continue;\n        }\n\n        for (let i = word.length - 1; i >= 0; i--) {\n            const head = word.slice(0, i);\n            const tail = word.slice(i + 1);\n\n            for (let c = 0; c < 26; c++) {\n                if (ALPHABET[c] !== word[i]) {\n                    const word = head + ALPHABET[c] + tail;\n                    if (word === endWord) {\n                        return level + 1;\n                    }\n                    if (wordList.delete(word)) {\n                        queue.push(word);\n                    }\n                }\n            }\n        }\n    }\n\n    return 0;\n};\n
\n
\n

Difficulty: Hard\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"Union Find\": https://leetcode.com/tag/union-find\nSimilar Questions:\n\"Binary Tree Longest Consecutive Sequence\": https://leetcode.com/problems/binary-tree-longest-consecutive-sequence

\n
\n

\"-----------------------------------------------------\"

\n

➤ 128. Longest Consecutive Sequence

\n

Problem:

\n

Given an unsorted array of integers, find the length of the longest consecutive elements sequence.

\n

Your algorithm should run in O(n) complexity.

\n

Example:

\n
Input: [100, 4, 200, 1, 3, 2]\nOutput: 4\nExplanation: The longest consecutive elements sequence is [1, 2, 3, 4]. Therefore its length is 4.\n
\n

Solution:

\n

Build a Set from the list. Pick a number, find all it's adjacent numbers that are also in the Set. Count them and remove them all from the Set. Repeat until the Set is empty. Time complexity O(n + n) = O(n).

\n
/**\n * @param {number[]} nums\n * @return {number}\n */\nlet longestConsecutive = function (nums) {\n    const numSet = new Set(nums);\n    let maxCount = 0;\n    while (numSet.size > 0) {\n        const num = numSet.values().next().value;\n        numSet.delete(num);\n        let count = 1;\n        for (let n = num + 1; numSet.delete(n); n++) {\n            count++;\n        }\n        for (let n = num - 1; numSet.delete(n); n--) {\n            count++;\n        }\n        if (count > maxCount) {\n            maxCount = count;\n        }\n    }\n    return maxCount;\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Tree\": https://leetcode.com/tag/tree\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\nSimilar Questions:\n\"Path Sum\": https://leetcode.com/problems/path-sum\n\"Binary Tree Maximum Path Sum\": https://leetcode.com/problems/binary-tree-maximum-path-sum

\n
\n

\"-----------------------------------------------------\"

\n

➤ 129. Sum Root to Leaf Numbers

\n

Problem:

\n

Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number.

\n

An example is the root-to-leaf path 1->2->3 which represents the number 123.

\n

Find the total sum of all root-to-leaf numbers.

\n

Note: A leaf is a node with no children.

\n

Example:

\n
Input: [1,2,3]\n    1\n   / \\\n  2   3\nOutput: 25\nExplanation:\nThe root-to-leaf path 1->2 represents the number 12.\nThe root-to-leaf path 1->3 represents the number 13.\nTherefore, sum = 12 + 13 = 25.\n
\n

Example 2:

\n
Input: [4,9,0,5,1]\n    4\n   / \\\n  9   0\n / \\\n5   1\nOutput: 1026\nExplanation:\nThe root-to-leaf path 4->9->5 represents the number 495.\nThe root-to-leaf path 4->9->1 represents the number 491.\nThe root-to-leaf path 4->0 represents the number 40.\nTherefore, sum = 495 + 491 + 40 = 1026.\n
\n

Solution:

\n

To write a clean solution for this promblem, use 0 as indicator of leaf node. If all the children get 0, it is a leaf node, return the sum of current level.

\n
/**\n * Definition for a binary tree node.\n * function TreeNode(val) {\n *     this.val = val;\n *     this.left = this.right = null;\n * }\n */\n/**\n * @param {TreeNode} root\n * @return {number}\n */\nlet sumNumbers = function (root, sum = 0) {\n    if (!root) {\n        return 0;\n    }\n    sum = sum * 10 + root.val;\n    return sumNumbers(root.left, sum) + sumNumbers(root.right, sum) || sum;\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\n\"Breadth-first Search\": https://leetcode.com/tag/breadth-first-search\n\"Union Find\": https://leetcode.com/tag/union-find\nSimilar Questions:\n\"Number of Islands\": https://leetcode.com/problems/number-of-islands\n\"Walls and Gates\": https://leetcode.com/problems/walls-and-gates

\n
\n

\"-----------------------------------------------------\"

\n

➤ 130. Surrounded Regions

\n

Problem:

\n

Given a 2D board containing 'X' and 'O' (the letter O), capture all regions surrounded by 'X'.

\n

A region is captured by flipping all 'O's into 'X's in that surrounded region.

\n

Example:

\n
X X X X\nX O O X\nX X O X\nX O X X\n
\n

After running your function, the board should be:

\n
X X X X\nX X X X\nX X X X\nX O X X\n
\n

Explanation:

\n

Surrounded regions shouldn't be on the border, which means that any 'O' on the border of the board are not flipped to 'X'. Any 'O' that is not on the border and it is not connected to an 'O' on the border will be flipped to 'X'. Two cells are connected if they are adjacent cells connected horizontally or vertically.

\n

Solution:

\n

Find all the Os that are connected to the Os on the border, change them to #. Then scan the board, change O to X and # back to O.

\n

The process of finding the connected Os is just like tree traversal. Os on the border are the same level. Their children are the second level. And so on.

\n

So both BFS and DFS are good. I prefer BFS when pruning is not needed in favor of its readability.

\n
/**\n * @param {character[][]} board\n * @return {void} Do not return anything, modify board in-place instead.\n */\nlet solve = function (board) {\n    const height = board.length;\n    if (height <= 1) {\n        return;\n    }\n    const width = board[0].length;\n    if (width <= 1) {\n        return;\n    }\n\n    const rowend = height - 1;\n    const colend = width - 1;\n\n    const queue = [];\n\n    for (let row = 0; row < height; row++) {\n        if (board[row][0] === 'O') {\n            board[row][0] = '#';\n            queue.push(row, 0);\n        }\n        if (board[row][colend] === 'O') {\n            board[row][colend] = '#';\n            queue.push(row, colend);\n        }\n    }\n\n    for (let col = 0; col < width; col++) {\n        if (board[0][col] === 'O') {\n            board[0][col] = '#';\n            queue.push(0, col);\n        }\n        if (board[rowend][col] === 'O') {\n            board[rowend][col] = '#';\n            queue.push(rowend, col);\n        }\n    }\n\n    while (queue.length > 0) {\n        const row = queue.shift();\n        const col = queue.shift();\n        if (row < rowend && board[row + 1][col] === 'O') {\n            board[row + 1][col] = '#';\n            queue.push(row + 1, col);\n        }\n        if (row > 0 && board[row - 1][col] === 'O') {\n            board[row - 1][col] = '#';\n            queue.push(row - 1, col);\n        }\n        if (board[row][col + 1] === 'O') {\n            board[row][col + 1] = '#';\n            queue.push(row, col + 1);\n        }\n        if (board[row][col - 1] === 'O') {\n            board[row][col - 1] = '#';\n            queue.push(row, col - 1);\n        }\n    }\n\n    for (let row = 0; row < height; row++) {\n        for (let col = 0; col < width; col++) {\n            if (board[row][col] === '#') {\n                board[row][col] = 'O';\n            } else if (board[row][col] === 'O') {\n                board[row][col] = 'X';\n            }\n        }\n    }\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\n\"Breadth-first Search\": https://leetcode.com/tag/breadth-first-search\n\"Graph\": https://leetcode.com/tag/graph\nSimilar Questions:\n\"Copy List with Random Pointer\": https://leetcode.com/problems/copy-list-with-random-pointer

\n
\n

\"-----------------------------------------------------\"

\n

➤ 133. Clone Graph

\n

Problem:

\n

Given the head of a graph, return a deep copy (clone) of the graph. Each node in the graph contains a label (int) and a list (List[UndirectedGraphNode]) of its neighbors. There is an edge between the given node and each of the nodes in its neighbors.

\n

OJ's undirected graph serialization (so you can understand error output):

\n

Nodes are labeled uniquely.

\n

We use # as a separator for each node, and , as a separator for node label and each neighbor of the node.

\n

As an example, consider the serialized graph {0,1,2#1,2#2,2}.

\n

The graph has a total of three nodes, and therefore contains three parts as separated by #.

\n
    \n
  1. First node is labeled as 0. Connect node 0 to both nodes 1 and 2.
    2. \n
  2. Second node is labeled as 1. Connect node 1 to node 2.
    3. \n
  3. Third node is labeled as 2. Connect node 2 to node 2 (itself), thus forming a self-cycle.
    4. \n
\n

Visually, the graph looks like the following:

\n
       1\n      / \\\n     /   \\\n    0 --- 2\n         / \\\n         \\_/\n
\n

Note: The information about the tree serialization is only meant so that you can understand error output if you get a wrong answer. You don't need to understand the serialization to solve the problem.

\n

Solution:

\n

DFS. Cache the visited node before entering the next recursion.

\n
/**\n * Definition for undirected graph.\n * function UndirectedGraphNode(label) {\n *     this.label = label;\n *     this.neighbors = [];   // Array of UndirectedGraphNode\n * }\n */\n\n/**\n * @param {UndirectedGraphNode} graph\n * @return {UndirectedGraphNode}\n */\nlet cloneGraph = function (graph) {\n    const cache = {};\n    return _clone(graph);\n\n    function _clone(graph) {\n        if (!graph) {\n            return graph;\n        }\n        const label = graph.label;\n        if (!cache[label]) {\n            cache[label] = new UndirectedGraphNode(label);\n            cache[label].neighbors = graph.neighbors.map(_clone);\n        }\n        return cache[label];\n    }\n};\n
\n

\"alt

\n
/**\n * Definition for a binary tree node.\n * function TreeNode(val) {\n *     this.val = val;\n *     this.left = this.right = null;\n * }\n */\n/**\n * @param {TreeNode} root\n * @return {TreeNode}\n */\nconst upsideDownBinaryTree = function (root) {\n    let curr = root;\n    let next = null;\n    let temp = null;\n    let prev = null;\n    while (curr !== null) {\n        next = curr.left;\n        curr.left = temp;\n        temp = curr.right;\n        curr.right = prev;\n        prev = curr;\n        curr = next;\n    }\n    return prev;\n};\n\n// another\n\nconst upsideDownBinaryTree = function (root) {\n    if (root == null || root.left == null) {\n        return root;\n    }\n    const newRoot = upsideDownBinaryTree(root.left);\n    root.left.left = root.right;\n    root.left.right = root;\n    root.left = null;\n    root.right = null;\n    return newRoot;\n};\n
\n

\"alt

\n
/**\n * @param {number[]} A\n * @return {number}\n */\nconst maxSubarraySumCircular = function (A) {\n    let minSum = Infinity,\n        sum = 0,\n        maxSum = -Infinity,\n        curMax = 0,\n        curMin = 0;\n    for (let a of A) {\n        sum += a;\n        curMax = Math.max(curMax + a, a);\n        maxSum = Math.max(maxSum, curMax);\n        curMin = Math.min(curMin + a, a);\n        minSum = Math.min(minSum, curMin);\n    }\n    return maxSum > 0 ? Math.max(maxSum, sum - minSum) : maxSum;\n};\n
\n

\"-----------------------------------------------------\"

\n

➤ Balanced Binary Tree - LeetCode

\n
\n

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

\n
\n

Given a binary tree, determine if it is height-balanced.

\n

For this problem, a height-balanced binary tree is defined as:

\n
\n

a binary tree in which the left and right subtrees of every node differ in height by no more than 1.

\n
\n

Example 1:

\n

\n

Input: root = [3,9,20,null,null,15,7]\nOutput: true

\n

Example 2:

\n

\n

Input: root = [1,2,2,3,3,null,null,4,4]\nOutput: false

\n

Example 3:

\n

Input: root = []\nOutput: true

\n

Constraints:

\n\n

Source# Convert Sorted Array to Binary Search Tree

\n
\n

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

\n
\n

Given an array where elements are sorted in ascending order, convert it to a height balanced BST.

\n

For this problem, a height-balanced binary tree is defined as a binary tree in which the depth of the two subtrees of every node never differ by more than 1.

\n

Example:

\n

Given the sorted array: [-10,-3,0,5,9],

\n

One possible answer is: [0,-3,9,-10,null,5], which represents the following height balanced BST:

\n
  0\n / \\\\\n
\n

-3 9\n/ /\n-10 5

\n

Source# Delete Node in a BST

\n
\n

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

\n
\n

Given a root node reference of a BST and a key, delete the node with the given key in the BST. Return the root node reference (possibly updated) of the BST.

\n

Basically, the deletion can be divided into two stages:

\n
    \n
  1. Search for a node to remove.
    2. \n
  2. If the node is found, delete the node.
    3. \n
\n

Follow up: Can you solve it with time complexity O(height of tree)?

\n

Example 1:

\n

\n

Input: root = [5,3,6,2,4,null,7], key = 3\nOutput: [5,4,6,2,null,null,7]\nExplanation: Given key to delete is 3. So we find the node with value 3 and delete it.\nOne valid answer is [5,4,6,2,null,null,7], shown in the above BST.\nPlease notice that another valid answer is [5,2,6,null,4,null,7] and it's also accepted.\n

\n

Example 2:

\n

Input: root = [5,3,6,2,4,null,7], key = 0\nOutput: [5,3,6,2,4,null,7]\nExplanation: The tree does not contain a node with value = 0.

\n

Example 3:

\n

Input: root = [], key = 0\nOutput: []

\n

Constraints:

\n\n

Source\"alt\n\"alt

\n
/**\n * @param {number[][]} intervals\n * @return {number}\n */\nconst minMeetingRooms = function (intervals) {\n    const len = intervals.length;\n    const starts = new Array(len);\n    const ends = new Array(len);\n    for (let i = 0; i < len; i++) {\n        starts[i] = intervals[i][0];\n        ends[i] = intervals[i][1];\n    }\n    starts.sort((a, b) => a - b);\n    ends.sort((a, b) => a - b);\n    let rooms = 0;\n    let endsIdx = 0;\n    for (let i = 0; i < len; i++) {\n        if (starts[i] < ends[endsIdx]) rooms++;\n        else endsIdx++;\n    }\n    return rooms;\n};\n
\n

\"-----------------------------------------------------\"

"},{"url":"/blog/","relativePath":"blog/index.md","relativeDir":"blog","base":"index.md","name":"index","frontmatter":{"title":"Blog","subtitle":"Exclusive Blog Content","image":"images/maroon-onion.gif","has_more_link":true,"more_link_text":"Read more","seo":{"title":"Blog","description":"These are blog posts... not nescisarily different from the docs section except these pieces are more subject to my own opinions.","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Blog","keyName":"property"},{"name":"og:description","value":"This is the blog page","keyName":"property"},{"name":"og:image","value":"images/my-blog.png","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Blog"},{"name":"twitter:description","value":"This is the blog page"},{"name":"twitter:image","value":"images/5.jpg","relativeUrl":true}]},"template":"blog"},"html":""},{"url":"/blog/js-closure/","relativePath":"blog/js-closure.md","relativeDir":"blog","base":"js-closure.md","name":"js-closure","frontmatter":{"title":"graphql","subtitle":"lorem-ipsum","date":"2022-01-17","thumb_image_alt":"graphql logo","excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"post"},"html":"

Etiam facilisis lacus nec pretium lobortis. Praesent dapibus justo non efficitur efficitur. Nullam viverra justo arcu, eget egestas tortor pretium id. Sed imperdiet mattis eleifend. Vivamus suscipit et neque imperdiet venenatis.

\n
\n

Vestibulum ullamcorper risus auctor eleifend consequat.

\n
\n

\"Placeholder

\n

In malesuada sed urna eget vehicula. Donec fermentum tortor sit amet nisl elementum fringilla. Pellentesque dapibus suscipit faucibus. Nullam malesuada sed urna quis rutrum. Donec facilisis lorem id maximus mattis. Vestibulum quis elit magna. Vestibulum accumsan blandit consequat. Phasellus quis posuere quam.

\n

Vivamus mollis in tellus ac ullamcorper. Vestibulum sit amet bibendum ipsum, vitae rutrum ex. Nullam cursus, urna et dapibus aliquam, urna leo euismod metus, eu luctus justo mi eget mauris. Proin felis leo, volutpat et purus in, lacinia luctus eros. Pellentesque lobortis massa scelerisque lorem ullamcorper, sit amet elementum nulla scelerisque. In volutpat efficitur nulla, aliquam ornare lectus ultricies ac. Mauris sagittis ornare dictum. Nulla vel felis ut purus fermentum pretium. Sed id lectus ac diam aliquet venenatis. Etiam ac auctor enim. Nunc velit mauris, viverra vel orci ut, egestas rhoncus diam. Morbi scelerisque nibh tellus, vel varius urna malesuada sed. Etiam ultricies sem consequat, posuere urna non, maximus ex. Mauris gravida diam sed augue condimentum pulvinar vel ac dui. Integer vel convallis justo.

"},{"url":"/blog/netlify-cms/","relativePath":"blog/netlify-cms.md","relativeDir":"blog","base":"netlify-cms.md","name":"netlify-cms","frontmatter":{"title":"Netlify CMS Reference Sheet","subtitle":"lorem-ipsum","date":"2021-09-30","thumb_image_alt":"lorem-ipsum","excerpt":"lorem-ipsum","seo":{"title":"","description":"Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows","robots":[],"extra":[{"name":"og:image","value":"images/netlify-dee8d6ae.svg","keyName":"property","relativeUrl":true},{"name":"og:title","value":"Intro to Netlify CMS","keyName":"property","relativeUrl":false},{"name":"twitter:card","value":"Intro to Netlify CMS","keyName":"name","relativeUrl":false}]},"template":"post","thumb_image":"images/netlify.png","image":"images/netlify-26904b46.svg"},"html":"

Overview\n\n

\n

Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.

\n

At its core, Netlify CMS is an open-source React app that acts as a wrapper for the Git workflow, using the GitHub, GitLab, or Bitbucket API. This provides many advantages, including:

\n\n

Netlify CMS vs. Netlify

\n

Netlify.com is a platform you can use to automatically build, deploy, serve, and manage your frontend sites and web apps. It also provides a variety of other features like form processing, serverless functions, and split testing. Not all Netlify sites use Netlify CMS, and not all sites using Netlify CMS are on Netlify.

\n

The folks at Netlify created Netlify CMS to fill a gap in the static site generation pipeline. There were some great proprietary headless CMS options, but no real contenders that were open source and extensible—that could turn into a community-built ecosystem like WordPress or Drupal. For that reason, Netlify CMS is made to be community-driven, and has never been locked to the Netlify platform (despite the name).

\n

With this in mind, you can:

\n\n

If you hook up Netlify CMS to your website, you're basically adding a tool for content editors to make commits to your site repository without touching code or learning Git.

\n\n

You can adapt Netlify CMS to a wide variety of projects. It works with any content written in markdown, JSON, YAML, or TOML files, stored in a repo on GitHub, GitLab, or Bitbucket. You can also create your own custom backend.

\n

This tutorial guides you through the steps for adding Netlify CMS to a site that's built with a common static site generator, like Jekyll, Hugo, Hexo, or Gatsby. Alternatively, you can start from a template or dive right into configuration options.

\n

App File Structure

\n

A static admin folder contains all Netlify CMS files, stored at the root of your published site. Where you store this folder in the source files depends on your static site generator. Here's the static file location for a few of the most popular static site generators:

\n

If your generator isn't listed here, you can check its documentation, or as a shortcut, look in your project for a css or images folder. The contents of folders like that are usually processed as static files, so it's likely you can store your admin folder next to those. (When you've found the location, feel free to add it to these docs by filing a pull request!)

\n

Inside the admin folder, you'll create two files:

\n

The first file, admin/index.html, is the entry point for the Netlify CMS admin interface. This means that users navigate to yoursite.com/admin/ to access it. On the code side, it's a basic HTML starter page that loads the Netlify CMS JavaScript file. The second file, admin/config.yml, is the heart of your Netlify CMS installation, and a bit more complex. The Configuration section covers the details.

\n

In this example, we pull the admin/index.html file from a public CDN.

\n

In the code above the script is loaded from the unpkg CDN. Should there be any issue, jsDelivr can be used as an alternative source. Simply set the src to https://cdn.jsdelivr.net/npm/netlify-cms@^2.0.0/dist/netlify-cms.js

\n

Installing with npm

\n

You can also use Netlify CMS as an npm module. Wherever you import Netlify CMS, it automatically runs, taking over the current page. Make sure the script that imports it only runs on your CMS page. First install the package and save it to your project:

\n

Then import it (assuming your project has tooling for imports):

\n

Configuration

\n

Configuration is different for every site, so we'll break it down into parts. Add all the code snippets in this section to your admin/config.yml file.

\n

Backend

\n

We're using Netlify for our hosting and authentication in this tutorial, so backend configuration is fairly straightforward.

\n

For GitHub and GitLab repositories, you can start your Netlify CMS config.yml file with these lines:

\n

(For Bitbucket repositories, use the _[Bitbucket backend](https://www.netlifycms.org/docs/bitbucket-backend) instructions instead.)_

\n

The configuration above specifies your backend protocol and your publication branch. Git Gateway is an open source API that acts as a proxy between authenticated users of your site and your site repo. (We'll get to the details of that in the Authentication section below.) If you leave out the branch declaration, it defaults to master.

\n

Editorial Workflow

\n

Note: Editorial workflow works with GitHub repositories, and support for GitLab and Bitbucket is in beta.

\n

By default, saving a post in the CMS interface pushes a commit directly to the publication branch specified in backend. However, you also have the option to enable the Editorial Workflow, which adds an interface for drafting, reviewing, and approving posts. To do this, add the following line to your Netlify CMS config.yml:

\n

Media and Public Folders

\n

Netlify CMS allows users to upload images directly within the editor. For this to work, the CMS needs to know where to save them. If you already have an images folder in your project, you could use its path, possibly creating an uploads sub-folder, for example:

\n

If you're creating a new folder for uploaded media, you'll need to know where your static site generator expects static files. You can refer to the paths outlined above in App File Structure, and put your media folder in the same location where you put the admin folder.

\n

Note that themedia_folder file path is relative to the project root, so the example above would work for Jekyll, GitBook, or any other generator that stores static files at the project root. However, it would not work for Hugo, Hexo, Middleman or others that store static files in a subfolder. Here's an example that could work for a Hugo site:

\n

The configuration above adds a new setting, publicfolder. While mediafolder specifies where uploaded files are saved in the repo, public_folder indicates where they are found in the published site. Image src attributes use this path, which is relative to the file where it's called. For this reason, we usually start the path at the site root, using the opening /.

\n

If publicfolder is not set, Netlify CMS defaults to the same value as mediafolder, adding an opening / if one is not included.

\n

Collections

\n

Collections define the structure for the different content types on your static site. Since every site is different, the collections settings differ greatly from one site to the next.

\n

Let's say your site has a blog, with the posts stored in _posts/blog, and files saved in a date-title format, like 1999-12-31-lets-party.md. Each post begins with settings in yaml-formatted front matter, like so:

\n

Given this example, our collections settings would look like this in your NetlifyCMS config.yml file:

\n

Let's break that down:

\n\n

As described above, the widget property specifies a built-in or custom UI widget for a given field. When a content editor enters a value into a widget, that value is saved in the document front matter as the value for the name specified for that field. A full listing of available widgets can be found in the Widgets doc.

\n

Based on this example, you can go through the post types in your site and add the appropriate settings to your Netlify CMS config.yml file. Each post type should be listed as a separate node under the collections field. See the Collections reference doc for more configuration options.

\n

Filter

\n

The entries for any collection can be filtered based on the value of a single field. The example collection below only shows post entries with the value en in the language field.

\n

Authentication

\n

Now that you have your Netlify CMS files in place and configured, all that's left is to enable authentication. We're using the Netlify platform here because it's one of the quickest ways to get started, but you can learn about other authentication options in the Backends doc.

\n

Setup on Netlify

\n

Netlify offers a built-in authentication service called Identity. In order to use it, connect your site repo with Netlify. Netlify has published a general Step-by-Step Guide for this, along with detailed guides for many popular static site generators, including Jekyll, Hugo, Hexo, Middleman, Gatsby, and more.

\n

Enable Identity and Git Gateway

\n

Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:

\n
    \n
  1. Go to Settings > Identity, and select Enable Identity service.
    2. \n
  2. Under Registration preferences, select Open or Invite only. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience.
    3. \n
  3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under External providers.
    4. \n
  4. Scroll down to Services > Git Gateway, and click Enable Git Gateway. This authenticates with your Git host and generates an API access token. In this case, we're leaving the Roles field blank, which means any logged in user may access the CMS. For information on changing this, check the Netlify Identity documentation.
    5. \n
\n

Add the Netlify Identity Widget

\n

With the backend set to handle authentication, now you need a frontend interface to connect to it. The open source Netlify Identity Widget is a drop-in widget made for just this purpose. To include the widget in your site, add the following script tag in two places:

\n

Add this to the <head> of your CMS index page at /admin/index.html, as well as the <head> of your site's main index page. Depending on how your site generator is set up, this may mean you need to add it to the default template, or to a \"partial\" or \"include\" template. If you can find where the site stylesheet is linked, that's probably the right place. Alternatively, you can include the script in your site using Netlify's Script Injection feature.

\n

When a user logs in with the Netlify Identity widget, an access token directs to the site homepage. In order to complete the login and get back to the CMS, redirect the user back to the /admin/ path. To do this, add the following script before the closing body tag of your site's main index page:

\n

Note: This example script requires modern JavaScript and does not work on IE11. For legacy browser support, use function expressions (function () {}) in place of the arrow functions (() => {}), or use a transpiler such as Babel.

\n

Accessing the CMS

\n

Your site CMS is now fully configured and ready for login!

\n

If you set your registration preference to \"Invite only,\" invite yourself (and anyone else you choose) as a site user. To do this, select the Identity tab from your site dashboard, and then select the Invite users button. Invited users receive an email invitation with a confirmation link. Clicking the link will take you to your site with a login prompt.

\n

If you left your site registration open, or for return visits after confirming an email invitation, access your site's CMS at yoursite.com/admin/.

\n

Note: No matter where you access Netlify CMS — whether running locally, in a staging environment, or in your published site — it always fetches and commits files in your hosted repository (for example, on GitHub), on the branch you configured in your Netlify CMS config.yml file. This means that content fetched in the admin UI matches the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI saves directly to the hosted repository, even if you're running the UI locally or in staging.

\n

Examples

\n

Do\nyou have a great, open source example? Submit a pull request to this page!

\n

Example\nTools\nType\nSource\nMore info

\n

Gatsby & Netlify\nCMS Meetup Group Template\nGatsby\ndemo\nrobertcoopercode/gatsby-netlify-cms\nblog\npost

\n

This\nDeveloping Journey\nmiddleman\nblog\nbdougie/blog\nblog\npost

\n

Jamstack Recipes\nHugo, Azure\ndemo\nhlaueriksson/jamstack-cms\nblog\npost

\n

Bael\nVue, Nuxt\nblog\njake-101/bael-template\nblog\npost

\n

Forest\nGarden Wales\nHugo\nblog\nforestgardenwales/forestgarden.wales\nblog\npost

\n

Jekyll Demo\nJekyll, Gulp\ndemo\nNickStees/jekyll-cms\nread me

\n

Jekyll feat Alembic\nTheme Demo\nJekyll\ndemo\nDavidDarnes/alembic-netlifycms-kit\nread\nme

\n

Eleventy Starter\nProject\nEleventy\ndemo\ndanurbanowicz/eleventy-netlify-boilerplate\nread\nme

\n

YellowCake\n- Complete website with blog\nGatsby, Netlify-CMS, Uploadcare\ndemo\nthriveweb/yellowcake\nblog\npost

\n

Vue.js\n- Nuxt.js Starter Project\nVue, Nuxt\ndemo\nrenestalder/nuxt-netlify-cms-starter-template\nread\nme

\n

Hexo\nDemo\nHexo\ndemo\nDemoMacro/Hexo-NetlifyCMS\nread me

\n

Gitbook\nDemo\nGitbook\ndemo\nDemoMacro/Gitbook-NetlifyCMS\nread me

\n

VuePress\nDemo\nVuePress\ndemo\nDemoMacro/VuePress-NetlifyCMS\nread\nme

\n

Jigsaw\nBlog Starter Template Demo\nJigsaw\ndemo\nerickpatrick/jigsaw-blog-netlify-netlifycms-template\nblog\npost

\n

Nuxt &\nNetlifyCMS Boilerplate\nVue, Nuxt\ndemo\ntylermercer/nuxt-netlifycms-boilerplate\nread\nme

\n

Next.js demo\nNext.js\nblog\nmasives/netlifycms-nextjs\nread me

\n

Delog - Jamstack\nBlog with Netlify CMS\nGatsby, Netlify-CMS\ndemo\nW3Layouts/gatsby-starter-delog\nblog\npost

\n

Netlify CMS template\nfor Gridsome\nGridsome, Vue\ndemo\nsuits-at/netlifycms-gridsome\nread me

\n

Next.js blogging\ntemplate for Netlify\nNext.js, Netlify\nblog\nwutali/nextjs-netlify-blog-template\nread\nme

\n

Netlify\nCMS and OAuth server on AWS\nNetlify, Pulumi, AWS\nblog\npulumi/examples/aws-ts-netlify-cms-and-oauth\nblog\npost

\n

Eleventy\nStarter Boilerplate\nEleventy, Netlify\ndemo\nixartz/Eleventy-Starter-Boilerplate\nread\nme

\n

Nuxt, Tailwind &\nNetlifyCMS Boilerplate\nVue, Nuxt\ndemo\nKnogobert/ntn-boilerplate\nread\nme

\n

Gatsby & Netlify\nCMS Personal Portfolio\nGatsby\nportfolio\nEarlGeorge/React-Gatsby\nread\nme

\n

Gatsby\n\n

\n

This guide will help you get started using Netlify CMS and Gatsby.

\n

To get up and running with Gatsby, you'll need to have Node.js installed on your computer. Note: Gatsby's minimum supported Node.js version is Node 8.

\n

Create a new Gatsby site

\n

Let's create a new site using the default Gatsby Starter Blog. Run the following commands in the terminal, in the folder where you'd like to create the blog:

\n

Get to know Gatsby

\n

In your favorite code editor, open up the code generated for your \"Gatsby Starter Blog\" site, and take a look at the content directory.

\n

You will see that there are multiple Markdown files that represent blog posts. Open one .md file and you will see something like this:

\n

We can see above that each blog post has a title, a date, a description and a body. Now, let's recreate this using Netlify CMS.

\n

Add Netlify CMS to your site

\n

First let's install some dependencies. We'll need netlify-cms-app and gatsby-plugin-netlify-cms. Run the following command in the terminal at the root of your site:

\n

Configuration

\n

For the purpose of this guide we will deploy to Netlify from a GitHub repository which requires the minimum configuration.

\n

Create a config.yml file in the directory structure you see below:

\n

In your config.yml file paste the following configuration:

\n

Note: The above configuration allows assets to be stored relative to their content. Therefore posts would be stored in the format below as it is in gatsby-starter-blog.

\n

Finally, add the plugin to your gatsby-config.js.

\n

Push to GitHub

\n

It's now time to commit your changes and push to GitHub. The Gatsby starter initializes Git automatically for you, so you only need to do:

\n

Add your repo to Netlify

\n

Go to Netlify and select 'New Site from Git'. Select GitHub and the repository you just pushed to. Click Configure Netlify on GitHub and give access to your repository. Finish the setup by clicking Deploy Site. Netlify will begin reading your repository and starting building your project.

\n

Enable Identity and Git Gateway

\n

Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:

\n
    \n
  1. Go to Settings > Identity, and select Enable Identity service.
    2. \n
  2. Under Registration preferences, select Open or Invite only. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience.
    3. \n
  3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under External providers.
    4. \n
  4. Scroll down to Services > Git Gateway, and click Enable Git Gateway. This authenticates with your Git host and generates an API access token. In this case, we're leaving the Roles field blank, which means any logged in user may access the CMS. For information on changing this, check the Netlify Identity documentation.
    5. \n
\n

Start publishing

\n

It's time to create your first blog post. Login to your site's /admin/ page and create a new post by clicking New Blog. Add a title, a date and some text. When you click Publish, a new commit will be created in your GitHub repo with this format Create Blog \"year-month-date-title\".

\n

Then Netlify will detect that there was a commit in your repo, and will start rebuilding your project. When your project is deployed you'll be able to see the post you created.

\n

Cleanup

\n

It is now safe to remove the default Gatsby blog posts.

"},{"url":"/blog/platform-docs/","relativePath":"blog/platform-docs.md","relativeDir":"blog","base":"platform-docs.md","name":"platform-docs","frontmatter":{"title":"Netlify CMS Intro","date":"2021-05-23","image":"images/curious-europa.gif","seo":{"title":"Platform Docs","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit","extra":[{"name":"og:type","value":"article","keyName":"property"},{"name":"og:title","value":"Platform Docs","keyName":"property"},{"name":"og:description","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit","keyName":"property"},{"name":"og:image","value":"images/curious-europa.gif","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Platform Docs"},{"name":"twitter:description","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit"},{"name":"twitter:image","value":"images/curious-europa.gif","relativeUrl":true}]},"template":"post","thumb_image":"images/redu-squarex.jpg"},"html":"

Add to Your Site | Netlify CMS

\n
\n

Open source content management for your Git workflow

\n
\n

You can adapt Netlify CMS to a wide variety of projects. It works with any content written in markdown, JSON, YAML, or TOML files, stored in a repo on GitHub, GitLab, or Bitbucket. You can also create your own custom backend.

\n

This tutorial guides you through the steps for adding Netlify CMS to a site that's built with a common static site generator, like Jekyll, Hugo, Hexo, or Gatsby. Alternatively, you can start from a template or dive right into configuration options.

\n

App File Structure

\n

A static admin folder contains all Netlify CMS files, stored at the root of your published site. Where you store this folder in the source files depends on your static site generator. Here's the static file location for a few of the most popular static site generators:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
These generatorsstore static files in
Jekyll, GitBook/ (project root)
Hugo, Gatsby, Nuxt, Gridsome, Zola, Sapper/static
Next/public
Hexo, Middleman, Jigsaw/source
Spike/views
Wyam/input
Pelican/content
VuePress/.vuepress/public
Elmstatic/_site
11ty/_site
preact-cli/src/static
\n

If your generator isn't listed here, you can check its documentation, or as a shortcut, look in your project for a css or images folder. The contents of folders like that are usually processed as static files, so it's likely you can store your admin folder next to those. (When you've found the location, feel free to add it to these docs by filing a pull request!)

\n

Inside the admin folder, you'll create two files:

\n
admin\n ├ index.html\n └ config.yml\n
\n

The first file, admin/index.html, is the entry point for the Netlify CMS admin interface. This means that users navigate to yoursite.com/admin/ to access it. On the code side, it's a basic HTML starter page that loads the Netlify CMS JavaScript file. In this example, we pull the file from a public CDN:

\n
<!doctype html>\n<html>\n<head>\n  <meta charset=\"utf-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Content Manager</title>\n</head>\n<body>\n\n  <script src=\"https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js\"></script>\n</body>\n</html>\n
\n

In the code above the script is loaded from the unpkg CDN. Should there be any issue, jsDelivr can be used as an alternative source. Simply set the src to https://cdn.jsdelivr.net/npm/netlify-cms@^2.0.0/dist/netlify-cms.js

\n

The second file, admin/config.yml, is the heart of your Netlify CMS installation, and a bit more complex. The Configuration section covers the details.

\n

Installing with npm

\n

You can also use Netlify CMS as an npm module. Wherever you import Netlify CMS, it automatically runs, taking over the current page. Make sure the script that imports it only runs on your CMS page. First install the package and save it to your project:

\n
npm install netlify-cms-app --save\n
\n

Then import it (assuming your project has tooling for imports):

\n
import CMS from 'netlify-cms-app'\n\nCMS.init()\n\nCMS.registerPreviewTemplate('my-template', MyTemplate)\n
\n

Configuration

\n

Configuration is different for every site, so we'll break it down into parts. Add all the code snippets in this section to your admin/config.yml file.

\n

Backend

\n

We're using Netlify for our hosting and authentication in this tutorial, so backend configuration is fairly straightforward.

\n

For GitHub and GitLab repositories, you can start your Netlify CMS config.yml file with these lines:

\n
backend:\n  name: git-gateway\n  branch: master\n
\n

(For Bitbucket repositories, use the Bitbucket backend instructions instead.)

\n

The configuration above specifies your backend protocol and your publication branch. Git Gateway is an open source API that acts as a proxy between authenticated users of your site and your site repo. (We'll get to the details of that in the Authentication section below.) If you leave out the branch declaration, it defaults to master.

\n

Editorial Workflow

\n

Note: Editorial workflow works with GitHub repositories, and support for GitLab and Bitbucket is in beta.

\n

By default, saving a post in the CMS interface pushes a commit directly to the publication branch specified in backend. However, you also have the option to enable the Editorial Workflow, which adds an interface for drafting, reviewing, and approving posts. To do this, add the following line to your Netlify CMS config.yml:

\n
publish_mode: editorial_workflow\n
\n

Media and Public Folders

\n

Netlify CMS allows users to upload images directly within the editor. For this to work, the CMS needs to know where to save them. If you already have an images folder in your project, you could use its path, possibly creating an uploads sub-folder, for example:

\n
media_folder: \"images/uploads\"\n
\n

If you're creating a new folder for uploaded media, you'll need to know where your static site generator expects static files. You can refer to the paths outlined above in App File Structure, and put your media folder in the same location where you put the admin folder.

\n

Note that themedia_folder file path is relative to the project root, so the example above would work for Jekyll, GitBook, or any other generator that stores static files at the project root. However, it would not work for Hugo, Hexo, Middleman or others that store static files in a subfolder. Here's an example that could work for a Hugo site:

\n
media_folder: \"static/images/uploads\"\npublic_folder: \"/images/uploads\"\n
\n

The configuration above adds a new setting, public_folder. While media_folder specifies where uploaded files are saved in the repo, public_folder indicates where they are found in the published site. Image src attributes use this path, which is relative to the file where it's called. For this reason, we usually start the path at the site root, using the opening /.

\n

If `publicfolderis not set, Netlify CMS defaults to the same value asmediafolder, adding an opening/` if one is not included.

\n

Collections

\n

Collections define the structure for the different content types on your static site. Since every site is different, the collections settings differ greatly from one site to the next.

\n

Let's say your site has a blog, with the posts stored in _posts/blog, and files saved in a date-title format, like 1999-12-31-lets-party.md. Each post begins with settings in yaml-formatted front matter, like so:

\n
---\nlayout: blog\ntitle: \"Let's Party\"\ndate: 1999-12-31 11:59:59 -0800\nthumbnail: \"/images/prince.jpg\"\nrating: 5\n---\n\nThis is the post body, where I write about our last chance to party before the Y2K bug destroys us all.\n
\n

Given this example, our collections settings would look like this in your NetlifyCMS config.yml file:

\n
collections:\n  - name: \"blog\"\n    label: \"Blog\"\n    folder: \"_posts/blog\"\n    create: true\n    slug: \"{{year}}-{{month}}-{{day}}-{{slug}}\"\n    fields:\n      - {label: \"Layout\", name: \"layout\", widget: \"hidden\", default: \"blog\"}\n      - {label: \"Title\", name: \"title\", widget: \"string\"}\n      - {label: \"Publish Date\", name: \"date\", widget: \"datetime\"}\n      - {label: \"Featured Image\", name: \"thumbnail\", widget: \"image\"}\n      - {label: \"Rating (scale of 1-5)\", name: \"rating\", widget: \"number\"}\n      - {label: \"Body\", name: \"body\", widget: \"markdown\"}\n
\n

Let's break that down:

\n
namePost type identifier, used in routes. Must be unique.
labelWhat the admin UI calls the post type.
folderWhere files of this type are stored, relative to the repo root.
createSet to true to allow users to create new files in this collection.
slugTemplate for filenames. {{year}}, {{month}}, and {{day}} pulls from the post's date field or save date. {{slug}} is a url-safe version of the post's title. Default is simply {{slug}}.
fieldsFields listed here are shown as fields in the content editor, then saved as front matter at the beginning of the document (except for body, which follows the front matter). Each field contains the following properties:
  • label: Field label in the editor UI.
  • name: Field name in the document front matter.
  • widget: Determines UI style and value data type (details below).
  • default (optional): Sets a default value for the field.
\n

As described above, the widget property specifies a built-in or custom UI widget for a given field. When a content editor enters a value into a widget, that value is saved in the document front matter as the value for the name specified for that field. A full listing of available widgets can be found in the Widgets doc.

\n

Based on this example, you can go through the post types in your site and add the appropriate settings to your Netlify CMS config.yml file. Each post type should be listed as a separate node under the collections field. See the Collections reference doc for more configuration options.

\n

Filter

\n

The entries for any collection can be filtered based on the value of a single field. The example collection below only shows post entries with the value en in the language field.

\n
collections:\n  - name: \"posts\"\n    label: \"Post\"\n    folder: \"_posts\"\n    filter:\n      field: language\n      value: en\n    fields:\n      - {label: \"Language\", name: \"language\"}\n
\n

Authentication

\n

Now that you have your Netlify CMS files in place and configured, all that's left is to enable authentication. We're using the Netlify platform here because it's one of the quickest ways to get started, but you can learn about other authentication options in the Backends doc.

\n

Setup on Netlify

\n

Netlify offers a built-in authentication service called Identity. In order to use it, connect your site repo with Netlify. Netlify has published a general Step-by-Step Guide for this, along with detailed guides for many popular static site generators, including Jekyll, Hugo, Hexo, Middleman, Gatsby, and more.

\n

Enable Identity and Git Gateway

\n

Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:

\n
    \n
  1. Go to Settings > Identity, and select Enable Identity service.
    2. \n
  2. Under Registration preferences, select Open or Invite only. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience.
    3. \n
  3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under External providers.
    4. \n
  4. Scroll down to Services > Git Gateway, and click Enable Git Gateway. This authenticates with your Git host and generates an API access token. In this case, we're leaving the Roles field blank, which means any logged in user may access the CMS. For information on changing this, check the Netlify Identity documentation.
    5. \n
\n

Add the Netlify Identity Widget

\n

With the backend set to handle authentication, now you need a frontend interface to connect to it. The open source Netlify Identity Widget is a drop-in widget made for just this purpose. To include the widget in your site, add the following script tag in two places:

\n
<script src=\"https://identity.netlify.com/v1/netlify-identity-widget.js\"></script>\n
\n

Add this to the <head> of your CMS index page at /admin/index.html, as well as the <head> of your site's main index page. Depending on how your site generator is set up, this may mean you need to add it to the default template, or to a \"partial\" or \"include\" template. If you can find where the site stylesheet is linked, that's probably the right place. Alternatively, you can include the script in your site using Netlify's Script Injection feature.

\n

When a user logs in with the Netlify Identity widget, an access token directs to the site homepage. In order to complete the login and get back to the CMS, redirect the user back to the /admin/ path. To do this, add the following script before the closing body tag of your site's main index page:

\n
<script>\n  if (window.netlifyIdentity) {\n    window.netlifyIdentity.on(\"init\", user => {\n      if (!user) {\n        window.netlifyIdentity.on(\"login\", () => {\n          document.location.href = \"/admin/\";\n        });\n      }\n    });\n  }\n</script>\n
\n

Note: This example script requires modern JavaScript and does not work on IE11. For legacy browser support, use function expressions (function () {}) in place of the arrow functions (() => {}), or use a transpiler such as Babel.

\n

Accessing the CMS

\n

Your site CMS is now fully configured and ready for login!

\n

If you set your registration preference to \"Invite only,\" invite yourself (and anyone else you choose) as a site user. To do this, select the Identity tab from your site dashboard, and then select the Invite users button. Invited users receive an email invitation with a confirmation link. Clicking the link will take you to your site with a login prompt.

\n

If you left your site registration open, or for return visits after confirming an email invitation, access your site's CMS at yoursite.com/admin/.

\n

Note: No matter where you access Netlify CMS — whether running locally, in a staging environment, or in your published site — it always fetches and commits files in your hosted repository (for example, on GitHub), on the branch you configured in your Netlify CMS config.yml file. This means that content fetched in the admin UI matches the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI saves directly to the hosted repository, even if you're running the UI locally or in staging.

\n

Happy posting!

\n

Source

"},{"url":"/blog/python-for-js-dev/","relativePath":"blog/python-for-js-dev.md","relativeDir":"blog","base":"python-for-js-dev.md","name":"python-for-js-dev","frontmatter":{"title":"Python Resources","date":"2021-06-03","image":"images/python.png","seo":{"title":"python","description":"Commodo ante vis placerat interdum massa massa primis","extra":[{"name":"og:type","value":"article","keyName":"property"},{"name":"og:title","value":"python","keyName":"property"},{"name":"og:description","value":"Commodo ante vis placerat interdum massa massa primis","keyName":"property"},{"name":"og:image","value":"images/python.png","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"python"},{"name":"twitter:description","value":"Commodo ante vis placerat interdum massa massa primis"},{"name":"twitter:image","value":"images/python.png","relativeUrl":true}]},"template":"post","thumb_image":"images/superb-triceratops.jpg","thumb_image_alt":"python logo"},"html":"

Python Study Guide for a JavaScript Programmer\n

\n

[

\n

](https://github.com/bgoonz)

\n\n
\n
\n
\n
\n

Featured Gists:

\n
const Promise = require(\"bluebird\");\nconst fs = Promise.promisifyAll(require(\"fs\"));\nconst crypto = require(\"crypto\");\nconst path = require(\"path\");\nconst pathA = \".\";\nconst pathB = \"/path/to/the/directory/you/want/to/compare/it/to\";\nlet hashes = [];\nfunction hashDirIn(folder) {\n  var pathPromiseA = fs\n    .readdirAsync(folder)\n    .map(function (fileName) {\n      var workPath = path.join(folder, fileName);\n      var statPromise = fs.statAsync(workPath);\n      return Promise.join(\n        statPromise,\n        fileName,\n        function (statPromise, fileName) {\n          if (statPromise.isFile()) {\n            function makeStream(file, callback) {\n              var result = fs.createReadStream(workPath);\n              return callback(result);\n            }\n            function process(stream) {\n              var hash = crypto.createHash(\"md5\");\n              return new Promise(function (resolve, reject) {\n                stream.on(\"data\", function updateProcess(chunk) {\n                  hash.update(chunk, \"utf8\");\n                });\n                stream.on(\"end\", resolve);\n              }).then(function publish() {\n                var digest = hash.digest(\"hex\");\n                hashes.push({ digest: digest, path: workPath });\n              });\n            }\n            return makeStream(fileName, process);\n          }\n        }\n      );\n    })\n    .then(function () {\n      if (i == 1) {\n        hashes.sort(function (a, b) {\n          if (a.digest < b.digest) {\n            return -1;\n          }\n          if (a.digest > b.digest) {\n            return 1;\n          }\n          return 0;\n        });\n        var dupe = 1;\n        hashes.map(function (obj, index) {\n          if (index - 1 >= 0) {\n            if (obj.digest == hashes[index - 1].digest) {\n              console.log(\"Dupe \" + dupe + \" found:\");\n              console.log(obj.path);\n              console.log(\"Equal to:\");\n              console.log(hashes[index - 1].path + \"\\n\");\n              dupe++;\n            }\n          }\n        });\n      }\n      i++;\n    });\n}\nvar i = 0;\nhashDirIn(pathA);\nhashDirIn(pathB);\n
\n
\n
\n
\n

will replace any spaces in file names with an underscore!

\n
\n
 for file in *; do mv \"$file\" `echo $file | tr ' ' '_'` ; done\n  ## TAKING IT A STEP FURTHER:\n # Let's do it recursivley:\n  function RecurseDirs ()\n{\n    oldIFS=$IFS\n    IFS=$'\\n'\n    for f in \"$@\"\n    do\n  # YOUR CODE HERE!\n\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)]\n\nfor file in \\*; do mv \"$file\" `echo $file | tr ' ' '_'` ; done\n        if [[ -d \"${f}\" ]]; then\ncd \"${f}\"\n            RecurseDirs $(ls -1 \".\")\n            cd ..\n        fi\n    done\n    IFS=$oldIFS\n}\nRecurseDirs \"./\"\n
\n
\n

Copy to clipboard jQuerry

\n
\n

Language: Javascript/Jquery

\n
\n
\n

In combination with the script tag : , this snippet will add a copy to clipboard button to all of your embedded blocks.

\n
\n
$(document).ready(function () {\n  $(\"code, pre\").append(\n    '<span class=\"command-copy\" ><i class=\"fa fa-clipboard\" aria-hidden=\"true\"></i></span>'\n  );\n  $(\"code span.command-copy\").click(function (e) {\n    var text = $(this).parent().text().trim(); //.text();\n    var copyHex = document.createElement(\"input\");\n    copyHex.value = text;\n    document.body.appendChild(copyHex);\n    copyHex.select();\n    document.execCommand(\"copy\");\n    console.log(copyHex.value);\n    document.body.removeChild(copyHex);\n  });\n\n  $(\"pre span.command-copy\").click(function (e) {\n    var text = $(this).parent().text().trim();\n    var copyHex = document.createElement(\"input\");\n    copyHex.value = text;\n    document.body.appendChild(copyHex);\n    copyHex.select();\n    document.execCommand(\"copy\");\n    console.log(copyHex.value);\n    document.body.removeChild(copyHex);\n  });\n});\n
\n
\n

Append Files in PWD

\n
//APPEND-DIR.js\nconst fs = require(\"fs\");\nlet cat = require(\"child_process\").execSync(\"cat *\").toString(\"UTF-8\");\nfs.writeFile(\"output.md\", cat, (err) => {\n  if (err) throw err;\n});\n
\n
\n

doesUserFrequentStarbucks.js

\n
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);\nconsole.log(isAppleDevice);\n// Result: will return true if user is on an Apple device\n
\n
\n

arr-intersection.js

\n
/*\n function named intersection(firstArr) that takes in an array and\nreturns a function. \nWhen the function returned by intersection is invoked\npassing in an array (secondArr) it returns a new array containing the elements\ncommon to both firstArr and secondArr.\n*/\nfunction intersection(firstArr) {\n  return (secondArr) => {\n    let common = [];\n    for (let i = 0; i < firstArr.length; i++) {\n      let el = firstArr[i];\n      if (secondArr.indexOf(el) > -1) {\n        common.push(el);\n      }\n    }\n    return common;\n  };\n}\nlet abc = intersection([\"a\", \"b\", \"c\"]); // returns a function\nconsole.log(abc([\"b\", \"d\", \"c\"])); // returns [ 'b', 'c' ]\n\nlet fame = intersection([\"f\", \"a\", \"m\", \"e\"]); // returns a function\nconsole.log(fame([\"a\", \"f\", \"z\", \"b\"])); // returns [ 'f', 'a' ]\n
\n
\n

arr-of-cum-partial-sums.js

\n
/*\nFirst is recurSum(arr, start) which returns the sum of the elements of arr from the index start till the very end.\nSecond is partrecurSum() that recursively concatenates the required sum into an array and when we reach the end of the array, it returns the concatenated array.\n*/\n//arr.length -1 = 5\n//                   arr   [    1,    7,    12,   6,    5,    10   ]\n//                   ind   [    0     1     2     3     4      5   ]\n//                              ↟                              ↟\n//                            start                           end\n\nfunction recurSum(arr, start = 0, sum = 0) {\n  if (start < arr.length) {\n    return recurSum(arr, start + 1, sum + arr[start]);\n  }\n  return sum;\n}\n\nfunction rPartSumsArr(arr, partSum = [], start = 0, end = arr.length - 1) {\n  if (start <= end) {\n    return rPartSumsArr(\n      arr,\n      partSum.concat(recurSum(arr, start)),\n      ++start,\n      end\n    );\n  }\n  return partSum.reverse();\n}\n\nconsole.log(\n  \"------------------------------------------------rPartSumArr------------------------------------------------\"\n);\nconsole.log(\"rPartSumsArr(arr)=[ 1, 1, 5, 2, 6, 10 ]: \", rPartSumsArr(arr));\nconsole.log(\"rPartSumsArr(arr1)=[ 1, 7, 12, 6, 5, 10 ]: \", rPartSumsArr(arr1));\nconsole.log(\n  \"------------------------------------------------rPartSumArr------------------------------------------------\"\n);\n/*\n------------------------------------------------rPartSumArr------------------------------------------------\nrPartSumsArr(arr)=[ 1, 1, 5, 2, 6, 10 ]:  [ 10, 16, 18, 23, 24, 25 ]\nrPartSumsArr(arr1)=[ 1, 7, 12, 6, 5, 10 ]:  [ 10, 15, 21, 33, 40, 41 ]\n------------------------------------------------rPartSumArr------------------------------------------------\n*/\n
\n
\n

camel2Kabab.js

\n
function camelToKebab(value) {\n  return value.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n}\n
\n
\n

camelCase.js

\n
function camel(str) {\n  return str.replace(/(?:^\\w|[A-Z]|\\b\\w|\\s+)/g, function (match, index) {\n    if (+match === 0) return \"\"; // or if (/\\s+/.test(match)) for white spaces\n    return index === 0 ? match.toLowerCase() : match.toUpperCase();\n  });\n}\n
\n
\n

concatLinkedLists.js

\n
function addTwoNumbers(l1, l2) {\n  let result = new ListNode(0);\n  let currentNode = result;\n  let carryOver = 0;\n  while (l1 != null || l2 != null) {\n    let v1 = 0;\n    let v2 = 0;\n    if (l1 != null) v1 = l1.val;\n    if (l2 != null) v2 = l2.val;\n    let sum = v1 + v2 + carryOver;\n    carryOver = Math.floor(sum / 10);\n    sum = sum % 10;\n    currentNode.next = new ListNode(sum);\n    currentNode = currentNode.next;\n    if (l1 != null) l1 = l1.next;\n    if (l2 != null) l2 = l2.next;\n  }\n  if (carryOver > 0) {\n    currentNode.next = new ListNode(carryOver);\n  }\n  return result.next;\n}\n
\n
\n

fast-is-alpha-numeric.js

\n
//Function to test if a character is alpha numeric that is faster than a regular\n//expression in JavaScript\n\nlet isAlphaNumeric = (char) => {\n  char = char.toString();\n  let id = char.charCodeAt(0);\n  if (\n    !(id > 47 && id < 58) && // if not numeric(0-9)\n    !(id > 64 && id < 91) && // if not letter(A-Z)\n    !(id > 96 && id < 123) // if not letter(a-z)\n  ) {\n    return false;\n  }\n  return true;\n};\n\nconsole.log(isAlphaNumeric(\"A\")); //true\nconsole.log(isAlphaNumeric(2)); //true\nconsole.log(isAlphaNumeric(\"z\")); //true\nconsole.log(isAlphaNumeric(\" \")); //false\nconsole.log(isAlphaNumeric(\"!\")); //false\n
\n
\n

find-n-replace.js

\n
function replaceWords(str, before, after) {\n  if (/^[A-Z]/.test(before)) {\n    after = after[0].toUpperCase() + after.substring(1);\n  } else {\n    after = after[0].toLowerCase() + after.substring(1);\n  }\n  return str.replace(before, after);\n}\nconsole.log(replaceWords(\"Let us go to the store\", \"store\", \"mall\")); //\"Let us go to the mall\"\nconsole.log(replaceWords(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\")); //\"He is Sitting on the couch\"\nconsole.log(replaceWords(\"His name is Tom\", \"Tom\", \"john\"));\n//\"His name is John\"\n
\n
\n

flatten-arr.js

\n
/*Simple Function to flatten an array into a single layer */\nconst flatten = (array) =>\n  array.reduce(\n    (accum, ele) => accum.concat(Array.isArray(ele) ? flatten(ele) : ele),\n    []\n  );\n
\n
\n

isWeekDay.js

\n
const isWeekday = (date) => date.getDay() % 6 !== 0;\nconsole.log(isWeekday(new Date(2021, 0, 11)));\n// Result: true (Monday)\nconsole.log(isWeekday(new Date(2021, 0, 10)));\n// Result: false (Sunday)\n
\n
\n

longest-common-prefix.js

\n
function longestCommonPrefix(strs) {\n  let prefix = \"\";\n  if (strs.length === 0) return prefix;\n  for (let i = 0; i < strs[0].length; i++) {\n    const character = strs[0][i];\n    for (let j = 0; j < strs.length; j++) {\n      if (strs[j][i] !== character) return prefix;\n    }\n    prefix = prefix + character;\n  }\n  return prefix;\n}\n
"},{"url":"/docs/","relativePath":"docs/index.md","relativeDir":"docs","base":"index.md","name":"index","frontmatter":{"title":"Docs","seo":{"title":"Web Dev Hub","description":"Application, Back-end, Bootstrap, Browser, Caching, Code, CSS, Content Management System (CMS) , Cookies, Domain Name ,Frameworks, Front-end, JavaScript, Python","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Web Dev Hub","keyName":"property"},{"name":"og:description","value":"Docs Home","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Web Dev Hub"},{"name":"twitter:description","value":"Docs Home"}]},"template":"docs","weight":900,"excerpt":"docs quick reference","thumb_img":"images/docs-d74e2940.png","date":"2022-01-21"},"html":"

Go To Sitemap: Go Now -->

\n
\n
\n

Actual Docs:

\n
\n
\n
   <div id=\"search\" />\n
\n
\n
\n
\n

Docs

\n
\n\n
\n
\n
\n

Gitpod Docs

\n
\n\n
\n
\n
\n
\n

Doc Websites & Repos

\n"},{"url":"/docs/search/","relativePath":"docs/search.md","relativeDir":"docs","base":"search.md","name":"search","frontmatter":{"title":"lorem-ipsum","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Search:

\n
\n

Actual Docs:

\n
\n
\n
\n
\n

Docs

\n
\n
\n
"},{"url":"/docs/privacy-policy/","relativePath":"docs/privacy-policy.md","relativeDir":"docs","base":"privacy-policy.md","name":"privacy-policy","frontmatter":{"title":"Privacy Policy","weight":0,"excerpt":"Privacy Policy","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"
PRIVACY NOTICE\n
\n\n\n\n\n
    \n
  • Engage with us in other related ways ― including any sales, marketing, or events
    • \n
\n\n
    \n
  • \"Website,\" we are referring to any website of ours that references or links to this policy
    • \n
\n\n
    \n
  • \"App,\" we are referring to any application of ours that references or links to this policy, including any listed above
    • \n
\n\n
    \n
  • \"Services,\" we are referring to our Website, App, and other related services, including any sales, marketing, or events
    • \n
\n\n
    \n
  • To facilitate account creation and logon process. If you choose to link your account with us to a third-party account (such as your Google or Facebook account), we use the information you allowed us to collect from those third parties to facilitate account creation and logon process for the performance of the contract.
    • \n
\n\n
    \n
  • To post testimonials. We post testimonials on our Services that may contain personal information. Prior to posting a testimonial, we will obtain your consent to use your name and the content of the testimonial. If you wish to update, or delete your testimonial, please contact us at __________ and be sure to include your name, testimonial location, and contact information.
    • \n
\n\n
    \n
  • **Request feedback. **We may use your information to request feedback and to contact you about your use of our Services.
    • \n
\n\n
    \n
  • To enable user-to-user communications. We may use your information in order to enable user-to-user communications with each user's consent.
    • \n
\n\n
    \n
  • **To manage user accounts. **We may use your information for the purposes of managing our account and keeping it in working order.
    • \n
\n\n
    \n
  • **To send administrative information to you. **We may use your personal information to send you product, service and new feature information and/or information about changes to our terms, conditions, and policies.
    • \n
\n\n
    \n
  • **To protect our Services. **We may use your information as part of our efforts to keep our Services safe and secure (for example, for fraud monitoring and prevention).
    • \n
\n\n
    \n
  • To enforce our terms, conditions and policies for business purposes, to comply with legal and regulatory requirements or in connection with our contract.
    • \n
\n\n
    \n
  • **To respond to legal requests and prevent harm. **If we receive a subpoena or other legal request, we may need to inspect the data we hold to determine how to respond.
    • \n
  • **Fulfill and manage your orders. **We may use your information to fulfill and manage your orders, payments, returns, and exchanges made through the Services.
    • \n
  • Administer prize draws and competitions. We may use your information to administer prize draws and competitions when you elect to participate in our competitions.
    • \n
  • To deliver and facilitate delivery of services to the user. We may use your information to provide you with the requested service.
    • \n
  • To respond to user inquiries/offer support to users. We may use your information to respond to your inquiries and solve any potential issues you might have with the use of our Services.
    • \n
\n\n
    \n
  • To send you marketing and promotional communications. We and/or our third-party marketing partners may use the personal information you send to us for our marketing purposes, if this is in accordance with your marketing preferences. For example, when expressing an interest in obtaining information about us or our Services, subscribing to marketing or otherwise contacting us, we will collect personal information from you. You can opt-out of our marketing emails at any time (see the \"WHAT ARE YOUR PRIVACY RIGHTS?\" below).
    • \n
\n\n
    \n
  • Deliver targeted advertising to you. We may use your information to develop and display personalized content and advertising (and work with third parties who do so) tailored to your interests and/or location and to measure its effectiveness.
    • \n
\n\n
    \n
  • Consent: We may process your data if you have given us specific consent to use your personal information for a specific purpose.
    • \n
\n\n
    \n
  • Legitimate Interests: We may process your data when it is reasonably necessary to achieve our legitimate business interests.
    • \n
\n\n
    \n
  • Performance of a Contract: Where we have entered into a contract with you, we may process your personal information to fulfill the terms of our contract.
    • \n
\n\n
    \n
  • Legal Obligations: We may disclose your information where we are legally required to do so in order to comply with applicable law, governmental requests, a judicial proceeding, court order, or legal process, such as in response to a court order or a subpoena (including in response to public authorities to meet national security or law enforcement requirements).
    • \n
\n\n
    \n
  • Vital Interests: We may disclose your information where we believe it is necessary to investigate, prevent, or take action regarding potential violations of our policies, suspected fraud, situations involving potential threats to the safety of any person and illegal activities, or as evidence in litigation in which we are involved.
    • \n
\n\n
    \n
  • Business Transfers. We may share or transfer your information in connection with, or during negotiations of, any merger, sale of company assets, financing, or acquisition of all or a portion of our business to another company.
    • \n
\n\n
    \n
  • Receiving help through our customer support channels;
    • \n
\n\n
    \n
  • Participation in customer surveys or contests; and
    • \n
\n\n
    \n
  • Facilitation in the delivery of our Services and to respond to your inquiries.
    • \n
\n\n
    \n
  • whether we collect and use your personal information;
    • \n
\n\n
    \n
  • the categories of personal information that we collect;
    • \n
\n\n
    \n
  • the purposes for which the collected personal information is used;
    • \n
\n\n
    \n
  • whether we sell your personal information to third parties;
    • \n
\n\n
    \n
  • the categories of personal information that we sold or disclosed for a business purpose;
    • \n
\n\n
    \n
  • the categories of third parties to whom the personal information was sold or disclosed for a business purpose; and
    • \n
\n\n
    \n
  • the business or commercial purpose for collecting or selling personal information.
    • \n
\n\n
    \n
  • you may object to the processing of your personal data
    • \n
\n\n
    \n
  • you may request correction of your personal data if it is incorrect or no longer relevant, or ask to restrict the processing of the data
    • \n
\n\n
    \n
  • you can designate an authorized agent to make a request under the CCPA on your behalf. We may deny a request from an authorized agent that does not submit proof that they have been validly authorized to act on your behalf in accordance with the CCPA.
    • \n
\n\n
    \n
  • you may request to opt-out from future selling of your personal information to third parties. Upon receiving a request to opt-out, we will act upon the request as soon as feasibly possible, but no later than 15 days from the date of the request submission.
    • \n
"},{"url":"/docs/about/eng-portfolio/","relativePath":"docs/about/eng-portfolio.md","relativeDir":"docs/about","base":"eng-portfolio.md","name":"eng-portfolio","frontmatter":{"title":"Engineering Portfolio","weight":0,"seo":{"title":"Engineering Portfolio","description":"This is an Engineering Portfolio page that contains a powerpoint portfolio of my work as an electrical engineer!","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Engineering Portfolio","keyName":"property"},{"name":"og:description","value":"This is the Engineering Portfolio page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Engineering Portfolio"},{"name":"twitter:description","value":"This is the Engineering Portfolio page"}]},"template":"docs"},"html":"

Portfolio

\n\n"},{"url":"/docs/about/README/","relativePath":"docs/about/README.md","relativeDir":"docs/about","base":"README.md","name":"README","frontmatter":{"title":"readme","weight":0,"excerpt":"readme","seo":{"title":"","description":"website documentation","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"
\n

⇨WEBSITE🗺️⇦

\n
⇨Privacy policy⇦
\n
\n
\n
\n
Cloudfare-Backup ⇨ search ⇨ Backup Repo Deploy ⇨ Github pages ⇨ Go To Site Wiki ⇨ Gatsby Cloud Version
\n
\n
\n

\"Netlify\"CodeFactor\"\"CodeScene\"Profile\"Gitter**\"\"CodeScene\"CodeQL\"

\n

\"Run\"GitHub

\n
\n
"},{"url":"/blog/web-scraping/","relativePath":"blog/web-scraping.md","relativeDir":"blog","base":"web-scraping.md","name":"web-scraping","frontmatter":{"title":"Webscraping w nodejs","date":"2021-07-26","image":"images/web-development.gif","seo":{"title":"webscraping","description":"There are a lot of use cases for web scraping","extra":[{"name":"og:type","value":"article","keyName":"property"},{"name":"og:title","value":"Platform Docs","keyName":"property"},{"name":"og:description","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit","keyName":"property"},{"name":"og:image","value":"images/curious-europa.gif","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Platform Docs"},{"name":"twitter:description","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit"},{"name":"twitter:image","value":"images/web-development.gif","relativeUrl":true}]},"template":"post","thumb_image":"images/webscrape.jpeg","thumb_image_alt":"webscraping"},"html":"

Web Scraping with Node.js

\n
\n

So what's web scraping anyway? It involves automating away the laborious task of collecting information from websites. There are a lot of use cases for web scraping: you might want to collect prices from various e-commerce sites for a price comparison site. Or perhaps you need flight times and

\n
\n

\"The

\n

So what's web scraping anyway? It involves automating away the laborious task of collecting information from websites.

\n

There are a lot of use cases for web scraping: you might want to collect prices from various e-commerce sites for a price comparison site. Or perhaps you need flight times and hotel/AirBNB listings for a travel site. Maybe you want to collect emails from various directories for sales leads, or use data from the internet to train machine learning/AI models. Or you could even be wanting to build a search engine like Google!

\n

Getting started with web scraping is easy, and the process can be broken down into two main parts:

\n
    \n
  • acquiring the data using an HTML request library or a headless browser,
    • \n
  • and parsing the data to get the exact information you want.
    • \n
\n

This guide will walk you through the process with the popular Node.js request-promise module, CheerioJS, and Puppeteer. Working through the examples in this guide, you will learn all the tips and tricks you need to become a pro at gathering any data you need with Node.js!

\n

We will be gathering a list of all the names and birthdays of U.S. presidents from Wikipedia and the titles of all the posts on the front page of Reddit.

\n

First things first: Let's install the libraries we'll be using in this guide (Puppeteer will take a while to install as it needs to download Chromium as well).

\n

Making your first request

\n
npm install --save request request-promise cheerio puppeteer
\n

Next, let's open a new text file (name the file potusScraper.js), and write a quick function to get the HTML of the Wikipedia \"List of Presidents\" page.

\n
const rp = require('request-promise');
const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';
rp(url)
.then(function(html){
//success!
console.log(html);
})
.catch(function(err){
//handle error
});
\n

Output:

\n
<!DOCTYPE html>
<html class=\"client-nojs\" lang=\"en\" dir=\"ltr\">
<head>
<meta charset=\"UTF-8\"/>
<title>List of Presidents of the United States - Wikipedia</title>
...
\n

Using Chrome DevTools

\n

Cool, we got the raw HTML from the web page! But now we need to make sense of this giant blob of text. To do that, we'll need to use Chrome DevTools to allow us to easily search through the HTML of a web page.

\n

Using Chrome DevTools is easy: simply open Google Chrome, and right click on the element you would like to scrape (in this case I am right clicking on George Washington, because we want to get links to all of the individual presidents' Wikipedia pages):

\n

\n

Now, simply click inspect, and Chrome will bring up its DevTools pane, allowing you to easily inspect the page's source HTML.

\n

\n

Parsing HTML with Cheerio.js

\n

Awesome, Chrome DevTools is now showing us the exact pattern we should be looking for in the code (a \"big\" tag with a hyperlink inside of it). Let's use Cheerio.js to parse the HTML we received earlier to return a list of links to the individual Wikipedia pages of U.S. presidents.

\n
const rp = require('request-promise');
const $ = require('cheerio');
const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';
rp(url)
.then(function(html){
//success!
console.log($('big > a', html).length);
console.log($('big > a', html));
})
.catch(function(err){
//handle error
});
\n

Output:

\n
45
{ '0':
{ type: 'tag',
name: 'a',
attribs: { href: '/wiki/George_Washington', title: 'George Washington' },
children: [ [Object] ],
next: null,
prev: null,
parent:
{ type: 'tag',
name: 'big',
attribs: {},
children: [Array],
next: null,
prev: null,
parent: [Object] } },
'1':
{ type: 'tag'
...
\n

We check to make sure there are exactly 45 elements returned (the number of U.S. presidents), meaning there aren't any extra hidden \"big\" tags elsewhere on the page. Now, we can go through and grab a list of links to all 45 presidential Wikipedia pages by getting them from the \"attribs\" section of each element.

\n
const rp = require('request-promise');
const $ = require('cheerio');
const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';
rp(url)
.then(function(html){
//success!
const wikiUrls = [];
for (let i = 0; i < 45; i++) {
wikiUrls.push($('big > a', html)[i].attribs.href);
}
console.log(wikiUrls);
})
.catch(function(err){
//handle error
});
\n

Output:

\n
[
'/wiki/George_Washington',
'/wiki/John_Adams',
'/wiki/Thomas_Jefferson',
'/wiki/James_Madison',
'/wiki/James_Monroe',
'/wiki/John_Quincy_Adams',
'/wiki/Andrew_Jackson',
...
]
\n

Now we have a list of all 45 presidential Wikipedia pages. Let's create a new file (named potusParse.js), which will contain a function to take a presidential Wikipedia page and return the president's name and birthday. First things first, let's get the raw HTML from George Washington's Wikipedia page.

\n
const rp = require('request-promise');
const url = 'https://en.wikipedia.org/wiki/George_Washington';
rp(url)
.then(function(html) {
console.log(html);
})
.catch(function(err) {
//handle error
});
\n

Output:

\n
<html class=\"client-nojs\" lang=\"en\" dir=\"ltr\">
<head>
<meta charset=\"UTF-8\"/>
<title>George Washington - Wikipedia</title>
...
\n

Let's once again use Chrome DevTools to find the syntax of the code we want to parse, so that we can extract the name and birthday with Cheerio.js.

\n

\n

\n

So we see that the name is in a class called \"firstHeading\" and the birthday is in a class called \"bday\". Let's modify our code to use Cheerio.js to extract these two classes.

\n
const rp = require('request-promise');
const $ = require('cheerio');
const url = 'https://en.wikipedia.org/wiki/George_Washington';
rp(url)
.then(function(html) {
console.log($('.firstHeading', html).text());
console.log($('.bday', html).text());
})
.catch(function(err) {
//handle error
});
\n

Output:

\n
George Washington
1732-02-22
\n

Putting it all together

\n

Perfect! Now let's wrap this up into a function and export it from this module.

\n
const rp = require('request-promise');
const $ = require('cheerio');
const potusParse = function(url) {
return rp(url)
.then(function(html) {
return {
name: $('.firstHeading', html).text(),
birthday: $('.bday', html).text(),
};
})
.catch(function(err) {
//handle error
});
};
module.exports = potusParse;
\n

Now let's return to our original file potusScraper.js and require the potusParse.js module. We'll then apply it to the list of wikiUrls we gathered earlier.

\n
const rp = require('request-promise');
const $ = require('cheerio');
const potusParse = require('./potusParse');
const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';
rp(url)
.then(function(html) {
//success!
const wikiUrls = [];
for (let i = 0; i < 45; i++) {
wikiUrls.push($('big > a', html)[i].attribs.href);
}
return Promise.all(
wikiUrls.map(function(url) {
return potusParse('https://en.wikipedia.org' + url);
})
);
})
.then(function(presidents) {
console.log(presidents);
})
.catch(function(err) {
//handle error
console.log(err);
});
\n

Output:

\n
[
{ name: 'George Washington', birthday: '1732-02-22' },
{ name: 'John Adams', birthday: '1735-10-30' },
{ name: 'Thomas Jefferson', birthday: '1743-04-13' },
{ name: 'James Madison', birthday: '1751-03-16' },
{ name: 'James Monroe', birthday: '1758-04-28' },
{ name: 'John Quincy Adams', birthday: '1767-07-11' },
{ name: 'Andrew Jackson', birthday: '1767-03-15' },
{ name: 'Martin Van Buren', birthday: '1782-12-05' },
{ name: 'William Henry Harrison', birthday: '1773-02-09' },
{ name: 'John Tyler', birthday: '1790-03-29' },
{ name: 'James K. Polk', birthday: '1795-11-02' },
{ name: 'Zachary Taylor', birthday: '1784-11-24' },
{ name: 'Millard Fillmore', birthday: '1800-01-07' },
{ name: 'Franklin Pierce', birthday: '1804-11-23' },
{ name: 'James Buchanan', birthday: '1791-04-23' },
{ name: 'Abraham Lincoln', birthday: '1809-02-12' },
{ name: 'Andrew Johnson', birthday: '1808-12-29' },
{ name: 'Ulysses S. Grant', birthday: '1822-04-27' },
{ name: 'Rutherford B. Hayes', birthday: '1822-10-04' },
{ name: 'James A. Garfield', birthday: '1831-11-19' },
{ name: 'Chester A. Arthur', birthday: '1829-10-05' },
{ name: 'Grover Cleveland', birthday: '1837-03-18' },
{ name: 'Benjamin Harrison', birthday: '1833-08-20' },
{ name: 'Grover Cleveland', birthday: '1837-03-18' },
{ name: 'William McKinley', birthday: '1843-01-29' },
{ name: 'Theodore Roosevelt', birthday: '1858-10-27' },
{ name: 'William Howard Taft', birthday: '1857-09-15' },
{ name: 'Woodrow Wilson', birthday: '1856-12-28' },
{ name: 'Warren G. Harding', birthday: '1865-11-02' },
{ name: 'Calvin Coolidge', birthday: '1872-07-04' },
{ name: 'Herbert Hoover', birthday: '1874-08-10' },
{ name: 'Franklin D. Roosevelt', birthday: '1882-01-30' },
{ name: 'Harry S. Truman', birthday: '1884-05-08' },
{ name: 'Dwight D. Eisenhower', birthday: '1890-10-14' },
{ name: 'John F. Kennedy', birthday: '1917-05-29' },
{ name: 'Lyndon B. Johnson', birthday: '1908-08-27' },
{ name: 'Richard Nixon', birthday: '1913-01-09' },
{ name: 'Gerald Ford', birthday: '1913-07-14' },
{ name: 'Jimmy Carter', birthday: '1924-10-01' },
{ name: 'Ronald Reagan', birthday: '1911-02-06' },
{ name: 'George H. W. Bush', birthday: '1924-06-12' },
{ name: 'Bill Clinton', birthday: '1946-08-19' },
{ name: 'George W. Bush', birthday: '1946-07-06' },
{ name: 'Barack Obama', birthday: '1961-08-04' },
{ name: 'Donald Trump', birthday: '1946-06-14' }
]
\n

Rendering JavaScript Pages

\n

Voilà! A list of the names and birthdays of all 45 U.S. presidents. Using just the request-promise module and Cheerio.js should allow you to scrape the vast majority of sites on the internet.

\n

Recently, however, many sites have begun using JavaScript to generate dynamic content on their websites. This causes a problem for request-promise and other similar HTTP request libraries (such as axios and fetch), because they only get the response from the initial request, but they cannot execute the JavaScript the way a web browser can.

\n

Thus, to scrape sites that require JavaScript execution, we need another solution. In our next example, we will get the titles for all of the posts on the front page of Reddit. Let's see what happens when we try to use request-promise as we did in the previous example.

\n

Output:

\n
const rp = require('request-promise');
const url = 'https://www.reddit.com';
rp(url)
.then(function(html){
//success!
console.log(html);
})
.catch(function(err){
//handle error
});
}
\n

Here's what the output looks like:

\n
<!DOCTYPE html><html
lang=\"en\"><head><title>reddit: the front page of the
internet</title>
...
\n

\n

Hmmm…not quite what we want. That's because getting the actual content requires you to run the JavaScript on the page! With Puppeteer, that's no problem.

\n

Puppeteer is an extremely popular new module brought to you by the Google Chrome team that allows you to control a headless browser. This is perfect for programmatically scraping pages that require JavaScript execution. Let's get the HTML from the front page of Reddit using Puppeteer instead of request-promise.

\n
const puppeteer = require('puppeteer');
const url = 'https://www.reddit.com';
puppeteer
.launch()
.then(function(browser) {
return browser.newPage();
})
.then(function(page) {
return page.goto(url).then(function() {
return page.content();
});
})
.then(function(html) {
console.log(html);
})
.catch(function(err) {
//handle error
});
\n

Output:

\n
<!DOCTYPE html><html lang=\"en\"><head><link
href=\"//c.amazon-adsystem.com/aax2/apstag.js\" rel=\"preload\"
as=\"script\">
...
\n

Nice! The page is filled with the correct content!

\n

\n

Now we can use Chrome DevTools like we did in the previous example.

\n

\n

It looks like Reddit is putting the titles inside \"h2\" tags. Let's use Cheerio.js to extract the h2 tags from the page.

\n
const puppeteer = require('puppeteer');
const $ = require('cheerio');
const url = 'https://www.reddit.com';
puppeteer
.launch()
.then(function(browser) {
return browser.newPage();
})
.then(function(page) {
return page.goto(url).then(function() {
return page.content();
});
})
.then(function(html) {
$('h2', html).each(function() {
console.log($(this).text());
});
})
.catch(function(err) {
//handle error
});
\n

Output:

\n
Russian Pipeline. Upvote so that this is the first image people see when they Google \"Russian Pipeline\"
John F. Kennedy Jr. Sitting in the pilot seat of the Marine One circa 1963
I didn't take it as a compliment.
How beautiful is this
Hustle like Faye
The power of a salt water crocodile's tail.
I'm 36, and will be dead inside of a year.
F***ing genius.
TIL Anthony Daniels, who endured years of discomfort in the C-3PO costume, was so annoyed by Alan Tudyk (Rogue One) playing K-2SO in the comfort of a motion-capture suit that he cursed at Tudyk. Tudyk later joked that a \"fuck you\" from Daniels was among the highest compliments he had ever received.
Reminder about the fact UC Davis paid over $100k to remove this photo from the internet.
King of the Hill reruns will start airing on Comedy Central July 24th
[Image] Slow and steady
White House: Trump open to Russia questioning US citizens
Godzilla: King of the Monsters Teaser Banner
He tried
Soldier reunited with his dog after being away.
Hiring a hitman on yourself and preparing for battle is the ultimate extreme sport.
Two paintballs colliding midair
My thoughts & prayers are with those ears
When even your fantasy starts dropping hints
Elon Musk's apology is out
\"When you're going private so you plant trees to throw some last shade at TDNW before you vanish.\" Thanos' farm advances. The soul children will have full bellies. 1024 points will give him the resources to double, and irrigate, his farm. (See comment)
Some leaders prefer chess, others prefer hungry hippos. Travis Chapman, oil, 2018
The S.S. Ste. Claire, retired from ferrying amusement park goers, now ferries The Damned across the river Styx.
A soldier is reunited with his dog
*hits blunt*
Today I Learned
Black Panther Scene Representing the Pan-African Flag
The precision of this hydraulic press.
Let bring the game to another level
When you're fighting a Dark Souls boss and you gamble to get 'just one extra hit' in instead of rolling out of range.
\"I check for traps\"
Anon finds his home at last
He's hungry
Being a single mother is a thankless job.
TIL That when you're pulling out Minigun, you're actually pulling out suitcase that then transforms into Minigun.
OMG guys don't look!!! 🙈🙈🙈
hyubsama's emote of his own face denied for political reasons because twitch thinks its a picture of Kim Jong Un
\n

Additional Resources

\n

And there's the list! At this point you should feel comfortable writing your first web scraper to gather data from any website. Here are a few additional resources that you may find helpful during your web scraping journey:

\n\n
"},{"url":"/docs/sitemap/","relativePath":"docs/sitemap.md","relativeDir":"docs","base":"sitemap.md","name":"sitemap","frontmatter":{"title":"Navigation","weight":900,"excerpt":"Navigation quick reference","seo":{"title":"Web Dev Hub","description":"This website contains docs, blogs, a personal portfolio spread out across multiple pages as well as interactive animations and tools.","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Web Dev Hub","keyName":"property"},{"name":"og:description","value":"Navigation Home","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Web Dev Hub"},{"name":"twitter:description","value":"Navigation Home"},{"name":"og:image","value":"images/background.gif","keyName":"property","relativeUrl":true}]},"template":"docs"},"html":"

204. 🖥️privacy-policy🌍

\n

205. 🖥️readme🌍

\n

206. 🏆showcase🏆

\n

207. 🏠Home🏠

\n
\n
\n

0. 🖥️blog/300-react-questions🌍

\n

1. 🖥️blog/awesome-graphql🌍

\n

2. 🖥️blog/big-o-complexity🌍

\n

3. 🖥️blog/blog-archive🌍

\n

4. 🖥️blog/blogwcomments🌍

\n

5. 🖥️blog/data-structures🌍

\n

6. 🖥️blog/flow-control-in-python🌍

\n

7. 🖥️blog/functions-in-python🌍

\n

8. 🖥️blog/git-gateway🌍

\n

9. 🖥️blog/interview-questions-js🌍

\n

10. 🖥️blog/netlify-cms🌍

\n

11. 🖥️blog/platform-docs🌍

\n

12. 🖥️blog/python-for-js-dev🌍

\n

13. 🖥️blog/python-resources🌍

\n

14. 🖥️blog/web-dev-trends🌍

\n

15. 🖥️blog/web-scraping🌍

\n

16. 🖥️blog🌍

\n
\n
\n

DOCS:

\n

17. 📖docs/about/README🌍

\n

18. 📖docs/about/eng-portfolio🌍

\n

19. 📖docs/about/intrests🌍

\n

20. 📖docs/about/job-search🌍

\n

21. 📖docs/about/resume🌍

\n

22. 📖docs/about🌍

\n

23. 📖docs/articles/basic-web-dev🌍

\n

24. 📖docs/articles/buffers🌍

\n

25. 📖docs/articles/dev-dep🌍

\n

26. 📖docs/articles/event-loop🌍

\n

27. 📖docs/articles/fs-module🌍

\n

28. 📖docs/articles/how-search-engines-work🌍

\n

29. 📖docs/articles/how-the-web-works🌍

\n

30. 📖docs/articles/http🌍

\n

31. 📖docs/articles/install🌍

\n

32. 📖docs/articles/intro🌍

\n

33. 📖docs/articles/modules🌍

\n

34. 📖docs/articles/nextjs🌍

\n

35. 📖docs/articles/node-api-express🌍

\n

36. 📖docs/articles/node-cli-args🌍

\n

37. 📖docs/articles/node-common-modules🌍

\n

38. 📖docs/articles/node-env-variables🌍

\n

39. 📖docs/articles/node-js-language🌍

\n

40. 📖docs/articles/node-package-manager🌍

\n

41. 📖docs/articles/node-repl🌍

\n

42. 📖docs/articles/node-run-cli🌍

\n

43. 📖docs/articles/nodejs🌍

\n

44. 📖docs/articles/nodevsbrowser🌍

\n

45. 📖docs/articles/npm🌍

\n

46. 📖docs/articles/npx🌍

\n

47. 📖docs/articles/os-module🌍

\n

48. 📖docs/articles/reading-files🌍

\n

49. 📖docs/articles/semantic-html🌍

\n

50. 📖docs/articles/semantic🌍

\n

51. 📖docs/articles/the-uniform-resource-locator-(url)🌍

\n

52. 📖docs/articles/understanding-firebase🌍

\n

53. 📖docs/articles/v8🌍

\n

54. 📖docs/articles/web-standards-checklist🌍

\n

55. 📖docs/articles/webdev-tools🌍

\n

56. 📖docs/articles/writing-files🌍

\n

57. 📖docs/articles🌍

\n

58. 📖docs/audio/audio-feature-extraction🌍

\n

59. 📖docs/audio/audio🌍

\n

60. 📖docs/audio/dfft🌍

\n

61. 📖docs/audio/discrete-fft🌍

\n

62. 📖docs/audio/dtw-python-explained🌍

\n

63. 📖docs/audio/dynamic-time-warping🌍

\n

64. 📖docs/audio/web-audio-api🌍

\n

65. 📖docs/audio🌍

\n

66. 📖docs/career/dev-interview🌍

\n

67. 📖docs/career/interview-dos-n-donts🌍

\n

68. 📖docs/career/job-boards🌍

\n

69. 📖docs/career🌍

\n

71. 📖docs/community/bookmarks🌍

\n

72. 📖docs/community/video-chat🌍

\n

73. 📖docs/community🌍

\n

74. 📖docs/content/algo🌍

\n

75. 📖docs/content/archive🌍

\n

76. 📖docs/content/gatsby-Queries-Mutations🌍

\n

77. 📖docs/content/history-api🌍

\n

78. 📖docs/content/main-projects🌍

\n

79. 📖docs/content/trouble-shooting🌍

\n

80. 📖docs/content🌍

\n

81. 📖docs/data-structures🌍

\n

82. 📖docs/docs/appendix🌍

\n

83. 📖docs/docs/art-of-command-line🌍

\n

84. 📖docs/docs/bash🌍

\n

85. 📖docs/docs/content🌍

\n

86. 📖docs/docs/css🌍

\n

87. 📖docs/docs/data-structures-docs🌍

\n

88. 📖docs/docs/es-6-features🌍

\n

89. 📖docs/docs/git-reference🌍

\n

90. 📖docs/docs/git-repos🌍

\n

91. 📖docs/docs/html-spec🌍

\n

92. 📖docs/docs/markdown🌍

\n

93. 📖docs/docs/no-whiteboarding🌍

\n

94. 📖docs/docs/node-docs-complete🌍

\n

95. 📖docs/docs/node-docs-full🌍

\n

96. 📖docs/docs/regex-in-js🌍

\n

97. 📖docs/docs/sitemap🌍

\n

98. 📖docs/docs🌍

\n

99. 📖docs/faq/contact🌍

\n

100. 📖docs/faq/plug-ins🌍

\n

101. 📖docs/faq🌍

\n

102. 📖docs/gists🌍

\n

103. 📖docs/interact/callstack-visual🌍

\n

104. 📖docs/interact/clock🌍

\n

105. 📖docs/interact/jupyter-notebooks🌍

\n

106. 📖docs/interact/other-sites🌍

\n

107. 📖docs/interact/video-chat🌍

\n

108. 📖docs/interact🌍

\n

109. 📖docs/interview/job-search-nav🌍

\n

110. 📖docs/interview/review-concepts🌍

\n

111. 📖docs/interview🌍

\n

112. 📖docs/javascript/arrow-functions🌍

\n

113. 📖docs/javascript/asyncjs🌍

\n

114. 📖docs/javascript/await-keyword🌍

\n

115. 📖docs/javascript/bigo🌍

\n

116. 📖docs/javascript/clean-code🌍

\n

117. 📖docs/javascript/constructor-functions🌍

\n

118. 📖docs/javascript/for-loops🌍

\n

119. 📖docs/javascript/promises🌍

\n

120. 📖docs/javascript/review🌍

\n

121. 📖docs/javascript/this-is-about-this🌍

\n

122. 📖docs/javascript🌍

\n

123. 📖docs/leetcode🌍

\n

124. 📖docs/privacy-policy🌍

\n

125. 📖docs/projects/embeded-websites🌍

\n

126. 📖docs/projects/list-of-projects🌍

\n

127. 📖docs/projects/mini-projects2🌍

\n

128. 📖docs/projects/mini-projects🌍

\n

129. 📖docs/projects/my-websites🌍

\n

130. 📖docs/projects🌍

\n

131. 📖docs/python/at-length🌍

\n

132. 📖docs/python/cheat-sheet🌍

\n

133. 📖docs/python/comprehensive-guide🌍

\n

134. 📖docs/python/examples🌍

\n

135. 📖docs/python/flow-control🌍

\n

136. 📖docs/python/functions🌍

\n

137. 📖docs/python/google-sheets-api🌍

\n

138. 📖docs/python/intro-for-js-devs🌍

\n

139. 📖docs/python/python-ds🌍

\n

140. 📖docs/python/snippets🌍

\n

141. 📖docs/python🌍

\n

142. 📖docs/quick-reference/Emmet🌍

\n

143. 📖docs/quick-reference/all-emojis🌍

\n

144. 📖docs/quick-reference/create-react-app🌍

\n

145. 📖docs/quick-reference/git-bash🌍

\n

146. 📖docs/quick-reference/git-tricks🌍

\n

147. 📖docs/quick-reference/google-firebase🌍

\n

148. 📖docs/quick-reference/heroku-error-codes🌍

\n

149. 📖docs/quick-reference/installation🌍

\n

150. 📖docs/quick-reference/markdown-dropdowns🌍

\n

151. 📖docs/quick-reference/minifiction🌍

\n

152. 📖docs/quick-reference/new-repo-instructions🌍

\n

153. 📖docs/quick-reference/psql-setup🌍

\n

154. 📖docs/quick-reference/pull-request-rubric🌍

\n

155. 📖docs/quick-reference/quick-links🌍

\n

156. 📖docs/quick-reference/topRepos🌍

\n

157. 📖docs/quick-reference/understanding-path🌍

\n

158. 📖docs/quick-reference/vscode-themes🌍

\n

159. 📖docs/quick-reference🌍

\n

160. 📖docs/react/ajax-n-apis🌍

\n

161. 📖docs/react/cheatsheet🌍

\n

162. 📖docs/react/createReactApp🌍

\n

163. 📖docs/react/demo🌍

\n

164. 📖docs/react/dont-use-index-as-keys🌍

\n

165. 📖docs/react/jsx🌍

\n

166. 📖docs/react/react-docs🌍

\n

167. 📖docs/react/react-in-depth🌍

\n

168. 📖docs/react/react2🌍

\n

169. 📖docs/react/render-elements🌍

\n

170. 📖docs/react🌍

\n

171. 📖docs/reference/awesome-lists🌍

\n

172. 📖docs/reference/awesome-nodejs🌍

\n

173. 📖docs/reference/awesome-static🌍

\n

174. 📖docs/reference/bash-commands🌍

\n

175. 📖docs/reference/bookmarks🌍

\n

176. 📖docs/reference/embed-the-web🌍

\n

177. 📖docs/reference/github-search🌍

\n

178. 📖docs/reference/google-cloud🌍

\n

179. 📖docs/reference/how-2-reinstall-npm🌍

\n

180. 📖docs/reference/how-to-kill-a-process🌍

\n

181. 📖docs/reference/installing-node🌍

\n

182. 📖docs/reference/intro-to-nodejs🌍

\n

183. 📖docs/reference/markdown-styleguide🌍

\n

184. 📖docs/reference/notes-template🌍

\n

185. 📖docs/reference/psql🌍

\n

186. 📖docs/reference/resources🌍

\n

187. 📖docs/reference/vscode🌍

\n

188. 📖docs/reference/web-api's🌍

\n

189. 📖docs/reference🌍

\n

190. 📖docs/search🌍

\n

191. 📖docs/sitemap🌍

\n

192. 📖docs/tips/array-methods🌍

\n

193. 📖docs/tips/insert-into-array🌍

\n

194. 📖docs/tips/sorting-strings🌍

\n

195. 📖docs/tips🌍

\n

196. 📖docs/tools/Archive🌍

\n

197. 📖docs/tools/data-structures🌍

\n

198. 📖docs/tools/dev-utilities🌍

\n

199. 📖docs/tools/markdown-html🌍

\n

200. 📖docs/tools🌍

\n

201. 📖docs/tutorials/enviorment-setup🌍

\n

202. 📖docs/tutorials🌍

\n

203. 🖥️docs🌍

"},{"url":"/docs/about/resume/","relativePath":"docs/about/resume.md","relativeDir":"docs/about","base":"resume.md","name":"resume","frontmatter":{"title":"Resume","weight":0,"seo":{"title":"Resume","description":"Successfully completed and delivered a platform to digitize a guitar signal and perform filtering before executing frequency & time domain analysis to track a current performance against prerecorded performance.","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Resume","keyName":"property"},{"name":"og:description","value":"This is the Resume page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Resume"},{"name":"twitter:description","value":"This is the Resume page"}]},"template":"docs"},"html":"

Resume

\n
\n

Bryan Guner

\n

551-254-5505 | bryan.guner@gmail.com

\n
\n

➤Skills

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Languages:JavaScript ES-6, NodeJS, HTML5, CSS3, SCSS, Bash Shell, SQL, MATLAB, Python, C++, Mathematica, JSON
Frameworks / Libraries:React, Redux, ExpressJS, Gatsby, NextJS, Ant-Design, Loadash, Sequelize, GraphQL, AJAX, Jest, Mocha, jQuery, Electron
Databases:PostgreSQL, MongoDB, SQlite3
Tools:Figma, Adobe XD, GitHub, GitLab, Excel, VSCode, Sublime Text, Atom, Google Analytics, Bootstrap, Tailwind, FontAwesome
Tools (continued):Docker, Firebase, Postman, Wordpress, Chrome Dev Tools, Jira, Trello, Confluence, Firebase, AWS S3, Okta, Algolia, Loadash
Hosting:Heroku, Netlify, Vercel, Wordpress, Cloudfare, AWS, Firebase, Digital Ocean
Operating Systems:Linux, Windows (WSL), IOS
\n

➤Projects

\n

Gatsby GraphQL-Blog Live Site |GitHub

\n

Stack: JavaScript, React / Gatsby | GraphQL | SCSS | Lodash | Jamstack | Facebook Comments API | jQuery | Firebase

\n

Aweb development blogfeaturing convenient web development tools and interactive content

\n
    \n
  • Implemented 4 Gatsby page models and GraphQL schema to fetch markdown content and feed it into react components.
    • \n
  • Designed and integrated a set of convenient web-hosted developer tools and GUI interfaces.
    • \n
  • Added interactive content including comments, video conferencing, data-structure visualization, games and full text search.
    • \n
\n

Autonomously Triggered Guitar Effects Platform** Live Site| GitHub**

\n

Stack: C++ | Python | MATLAB | PureData

\n

Platformdesigned to analyze a time sequence of notes and autonomously trigger guitar effects ata predetermined point in the song

\n
    \n
  • Used pure data to filter a guitar signal before executing frequency domain analysis and implementing custom built guitar effects.
    • \n
  • Implemented the Dynamic Time Warping algorithm in C++ and Python to generate a time agnostic measure of similarity between performances.
    • \n
  • Autonomously activated or adjusted guitar effects at multiple pre-designated sections of performance.
    • \n
\n
\n

Data Structures Interactive Teaching ToolLive Site |** GitHub**

\n

Stack: jQuery | ExpressJS | Google Analytics |Algolia Full Text Search | Amazon S3

\n

Awebsitefor visualizing and practicing data structures and algorithms in JavaScript & Python

\n
    \n
  • Implemented an repl.it backend to enable commenting using express and the fs module to write user comments to a storage.json file.
    • \n
  • Developed proprietary npm package to recursively walk the project directory structure and generate a site navigation page.
    • \n
  • Created multiple embedded data structure visualizations that interact with user input.
    • \n
  • Automated the generation and submission of a sitemapto (Google, Bing, and Yandex) on every build.
    • \n
\n
\n
\n

➤ Experience

\n

Product Development Engineer | Cembre, Edison, NJ\\_|_Oct 2019 - Mar 2020

\n
    \n
  • Converted client's product needs into technical specs to be sent to the development team in Italy.
    • \n
  • Reorganized internal file server structure and conducted system integration and product demonstrations.
    • \n
  • Presided over internal and end user software trainings in addition to producing customer facing documentation.
    • \n
  • Conducted electrical conductivity & tensile testing of electrical components and presided over troubleshooting railroad hardware and software in North America.
    • \n
\n

Family Promise Service Tracker

\n

Full Stack Web Development Intern | Remote | Sept 2021 - Present Live Site |GitHub

\n

Stack: React | Redux | ExpressJS | Figma | Okta | AWS

\n

Anappbuilt to helps local communities provide services to address the root causes of family homelessness

\n
    \n
  • Collaborated on state management using Redux to handle application state and middleware using redux-promise & redux-thunk.
    • \n
  • Built two graphic visuals of the user hierarchy and the scope of their permissions as well as maintained the team's docs.
    • \n
  • Created Figma UI mockups for possible future developments, such as displaying metrics data and map pinpoint functionality.
    • \n
\n
\n
\n

➤ Education

\n

Lambda School , Full Stack Web Development

\n
\n

May 2020 - Nov 2021

\n
\n

Six-month immersive software development course with a focus on full stack web development. Over 2000 hours of work invested including class time, homework, and projects.

\n

B.S. Electrical Engineering , TCNJ, Ewing NJ 2014 - 2019

\n

2 Curriculum link

\n
\n

Knowledge of circuit boards, processors, chips, electronic equipment, and computer hardware and software, including applications and programming.

\n
\n
\n

References & further work experience available upon request.

\n
"},{"url":"/docs/about/youtube/","relativePath":"docs/about/youtube.md","relativeDir":"docs/about","base":"youtube.md","name":"youtube","frontmatter":{"title":"Youtube","weight":0,"excerpt":"youtube","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"\n\n"},{"url":"/docs/articles/buffers/","relativePath":"docs/articles/buffers.md","relativeDir":"docs/articles","base":"buffers.md","name":"buffers","frontmatter":{"title":"Node Buffers","sections":[],"seo":{"title":"","description":"A buffer is an area of memory. JavaScript developers are not familiar with this concept, much less than C, C++ or Go developers","robots":[],"extra":[{"name":"og:description","value":"A buffer is an area of memory. JavaScript developers are not familiar with this concept, much less than C, C++ or Go developers","keyName":"property","relativeUrl":false},{"name":"og:title","value":"Buffer","keyName":"property","relativeUrl":false},{"name":"og:image","value":"images/javascript-4ced5a19.gif","keyName":"property","relativeUrl":true}],"type":"stackbit_page_meta"},"template":"docs"},"html":"

What is a buffer?

\n

A buffer is an area of memory. JavaScript developers are not familiar with this concept, much less than C, C++ or Go developers (or any programmer that uses a system programming language), which interact with memory every day.

\n

It represents a fixed-size chunk of memory (can't be resized) allocated outside of the V8 JavaScript engine.

\n

You can think of a buffer like an array of integers, which each represent a byte of data.

\n

It is implemented by the Node.js Buffer class.

\n

Why do we need a buffer?

\n

Buffers were introduced to help developers deal with binary data, in an ecosystem that traditionally only dealt with strings rather than binaries.

\n

Buffers are deeply linked with streams. When a stream processor receives data faster than it can digest, it puts the data in a buffer.

\n

A simple visualization of a buffer is when you are watching a YouTube video and the red line goes beyond your visualization point: you are downloading data faster than you're viewing it, and your browser buffers it.

\n

How to create a buffer

\n

A buffer is created using the Buffer.from(), Buffer.alloc(), and Buffer.allocUnsafe() methods.

\n
const buf = Buffer.from('Hey!');\n
\n\n

You can also just initialize the buffer passing the size. This creates a 1KB buffer:

\n
const buf = Buffer.alloc(1024);\n//or\nconst buf = Buffer.allocUnsafe(1024);\n
\n

While both alloc and allocUnsafe allocate a Buffer of the specified size in bytes, the Buffer created by alloc will be initialized with zeroes and the one created by allocUnsafe will be uninitialized. This means that while allocUnsafe would be quite fast in comparison to alloc, the allocated segment of memory may contain old data which could potentially be sensitive.

\n

Older data, if present in the memory, can be accessed or leaked when the Buffer memory is read. This is what really makes allocUnsafe unsafe and extra care must be taken while using it.

\n

Using a buffer

\n

Access the content of a buffer

\n

A buffer, being an array of bytes, can be accessed like an array:

\n
const buf = Buffer.from('Hey!');\nconsole.log(buf[0]); //72\nconsole.log(buf[1]); //101\nconsole.log(buf[2]); //121\n
\n

Those numbers are the Unicode Code that identifies the character in the buffer position (H => 72, e => 101, y => 121)

\n

You can print the full content of the buffer using the toString() method:

\n
console.log(buf.toString());\n
\n
\n

Notice that if you initialize a buffer with a number that sets its size, you'll get access to pre-initialized memory that will contain random data, not an empty buffer!

\n
\n

Get the length of a buffer

\n

Use the length property:

\n
const buf = Buffer.from('Hey!');\nconsole.log(buf.length);\n
\n

Iterate over the contents of a buffer

\n
const buf = Buffer.from('Hey!');\nfor (const item of buf) {\n    console.log(item); //72 101 121 33\n}\n
\n

Changing the content of a buffer

\n

You can write to a buffer a whole string of data by using the write() method:

\n
const buf = Buffer.alloc(4);\nbuf.write('Hey!');\n
\n

Just like you can access a buffer with an array syntax, you can also set the contents of the buffer in the same way:

\n
const buf = Buffer.from('Hey!');\nbuf[1] = 111; //o\nconsole.log(buf.toString()); //Hoy!\n
\n

Copy a buffer

\n

Copying a buffer is possible using the copy() method:

\n
const buf = Buffer.from('Hey!');\nlet bufcopy = Buffer.alloc(4); //allocate 4 bytes\nbuf.copy(bufcopy);\n
\n

By default you copy the whole buffer. 3 more parameters let you define the starting position, the ending position, and the new buffer length:

\n
const buf = Buffer.from('Hey!');\nlet bufcopy = Buffer.alloc(2); //allocate 2 bytes\nbuf.copy(bufcopy, 0, 0, 2);\nbufcopy.toString(); //'He'\n
\n

Slice a buffer

\n

If you want to create a partial visualization of a buffer, you can create a slice. A slice is not a copy: the original buffer is still the source of truth. If that changes, your slice changes.

\n

Use the slice() method to create it. The first parameter is the starting position, and you can specify an optional second parameter with the end position:

\n
const buf = Buffer.from('Hey!');\nbuf.slice(0).toString(); //Hey!\nconst slice = buf.slice(0, 2);\nconsole.log(slice.toString()); //He\nbuf[1] = 111; //o\nconsole.log(slice.toString()); //Ho\n
"},{"url":"/docs/about/","relativePath":"docs/about/index.md","relativeDir":"docs/about","base":"index.md","name":"index","frontmatter":{"title":"About","excerpt":"Web-Dev-Hub is my personal blogand documentation site","seo":{"title":"About","description":"Bryan Guner personal blog about page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"About","keyName":"property"},{"name":"og:description","value":"This is the About page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"About"},{"name":"twitter:description","value":"This is the About page"}]},"template":"docs","thumb_img":"images/chrome_z7gswAaLMg.png","date":"2022-01-21"},"html":"
\n

Hi 👋, I'm Bryan

\n \n\n
\n

Netlify Research Program Participant!

\n
\n

WEBSITE ⇄ Portfolio ⇄ Collaborate ⇄ Other-Websites

\n

\"Profile\"Gitter\"\"hackmd-github-sync-badge\"\"GitHub

\n

➤ Email bryan.guner@gmail.com Phone 551-254-5505

\n

A passionate Web Developer, Electrical Engineer, Musician & Producer

\n
\n See More \n\n

\"Portfolio\"\n\"Resume\n\"Bryan's\n\"Blog\"\n\"Linkedin\"\n\"AngelList\"\n\"GitHub

\n

\n \"email\"/\"facebook\"/\"twitter\"/\"youtube\"/\"instagram\"/\"linkedin\"/\n \"medium\"/\"spotify\"/\n

\n \n \n \n[![Bryans github activity graph](https://activity-graph.herokuapp.com/graph?username=bgoonz&custom_title=This%20is%20Bryans%20Activity&hide_border=true&theme=chartreuse-dark)](https://github.com/bgoonz/github-readme-activity-graph)\n\n
\n \n

\"bgoonz\"\"bgoonz\"

\n

\"ReadMe\n\"ReadMe

\n

\"trophy\"

\n

\"ReadMe

\n

\"Top

\n
\n
\n
\n
\nAbout Me\n
    \n
  • 🔭 Contract Web Development Relational Concepts
    • \n
  • 🌱 I'm currently learning React/Redux, Python, Java, Express, jQuery
    • \n
  • 👯 I'm looking to collaborate on Any web audio or open source educational tools.
    • \n
  • 🤝 I'm looking for help with Learning React
    • \n
  • 👨‍💻 All of my projects are available at https://bgoonz.github.io/
    • \n
  • 📝 I regularly write articles on medium && Web-Dev-Resource-Hub
    • \n
  • 💬 Ask me about Anything:
    • \n
  • 📫 How to reach me bryan.guner@gmail.com
    • \n
  • ⚡ Fun fact I played Bamboozle Music Festival at the Meadowlands Stadium Complex when I was 14.
    • \n
\n

i really like music :headphones:

\n

What's the most useful business-related book you've ever read?

\n
\n

A Random Walk Down Wall Street

\n
\n

What's your favorite non-business book?

\n
\n

Hitchhiker's Guide To The Galaxy

\n
\n

If money were not an issue, what would you be doing right now?

\n
\n

Designing recording software/hardware and using it

\n
\n

What words of advice would you give your younger self?

\n
\n

Try harder and listen to your parents more (the latter bit of advice would be almost certain to fall on deaf ears lol)

\n
\n

What's the most creative thing you've ever done?

\n
\n

I built a platform that listens to a guitarist's performance and automatically triggers guitar effects at the appropriate time in the song.

\n
\n

Which founders or startups do you most admire?

\n
\n

Is it to basic to say Tesla... I know they're prevalent now but I've been an avid fan since as early as 2012.

\n
\n

What's your super power?

\n
\n

Having really good ideas and forgetting them moments later.

\n
\n

What's the best way for people to get in touch with you?

\n
\n

A text

\n
\n

What aspects of your work are you most passionate about?

\n

Creating things that change my every day life.

\n

What was the most impactful class you took in school?

\n
\n

Modern Physics... almost changed my major after that class... but at the end of the day engineering was a much more fiscally secure avenue.

\n
\n

What's something you wish you had done years earlier?

\n
\n

Learned to code ... and sing

\n
\n

What words of wisdom do you live by?

\n
\n

*Disclaimer: The following wisdom is very cliche ... but... \"Be the change that you wish to see in the world.\"

\n
\n
\n

Mahatma Gandhi

\n
\n

| | ## Portfolio:

\n

netlify |

\n

| :------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Languages |
|\n| Libraries | |\n| Frameworks | |\n| Databases | |\n| Testing | |\n| Other |


|

\n
\n\n\n
\n Resume \n

➤ Technical Skills­­­

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Programming** Languages:**JavaScript ES-6, NodeJS, React, HTML5, CSS3, SCSS, Bash Shell, Excel, SQL, NoSQL, MATLAB, Python, C++
Databases:PostgreSQL, MongoDB
Cloud:Docker, AWS, Google App Engine, Netlify, Digital Ocean, Heroku, Azure Cloud Services
OS:Linux, Windows (WSL), IOS
Agile:GitHub, BitBucket, Jira, Confluence
IDEs:VSCode, Visual Studio, Atom, Code Blocks, Sublime Text 3, Brackets
\n
\n

\"-----------------------------------------------------\"

\n

➤ Experience

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Relational Concepts: Hallandale Beach, FLMarch 2020 - Present
Front End Web Developer
\n
    \n
  • Responsible for front-end development for a custom real estate application which provides sophisticated and fully customizable filtering to allow investors and real estate professionals to narrow in on exact search targets.
    • \n
  • Designed mock-up screens, wireframes, and workflows for intuitive user experience.
    • \n
  • Migrated existing multi-page user experience into singular page interfaces using React components.
    • \n
  • Participated in every stage of the design from conception through development and iterative improvement.
    • \n
  • Produced user stories and internal documentation for future site development and maintenance.
    • \n
  • Implemented modern frameworks including Bootstrap and Font-Awesome to give the site an aesthetic overhaul.
    • \n
  • Managed all test deployments using a combination of Digital Ocean and Netlify.
    • \n
  • Produced unit tests using a combination of Mocha and Chai.
    • \n
  • Injected Google Analytics to capture pertinent usage data to produce an insightful dashboard experience.
    • \n
\n\n\n\n\n\n\n\n\n\n
Environment:JavaScript, JQuery, React, HTML5 & CSS, Bootstrap, DOJO, Google Cloud, Bash Script
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Cembre: Edison, NJNov 2019 - Mar 2020
Product Development Engineer
\n
    \n
  • Converted client's product needs into technical specs to be sent to the development team in Italy.
    • \n
  • Reorganized internal file server structure.
    • \n
  • Conducted remote / in person system integration and product demonstrations.
    • \n
  • Presided over internal and end user software trainings in addition to producing the corresponding documentation.
    • \n
  • Served as the primary point of contact for troubleshooting railroad hardware and software in the North America.
    • \n
\n\n\n\n\n\n\n\n\n\n
Environment:Excel, AutoCAD, PowerPoint, Word
\n
\n

\"-----------------------------------------------------\"

\n

➤ Education

\n\n\n\n\n\n\n\n\n\n
**B.S. Electrical Engineering, TCNJ, ** Ewing NJ2014 - 2019
\n

Capstone Project - Team Lead

\n
    \n
  • Successfully completed and delivered a platform to digitize a guitar signal and perform filtering before executing frequency & time domain analysis to track a current performance against prerecorded performance.
    • \n
  • Implemented the Dynamic Time Warping algorithm in C++ and Python to autonomously activate or adjust guitar effect at multiple pre-designated section of performance.
    • \n
\n\n\n\n\n\n\n\n\n\n
Environment:C++, Python, MATLAB, PureData
\n
\n
\n My Projects\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n

\n
\n
\n
\n
\n\"hr-line\"\n
\n
\n
\n

Learning React Blog

\n

React Repo:

\n

React Repo

\n
\n

\"Foo\"

\n
\n\"hr-line\"\n
\n

react-documentation-site

\n

\"Edit

\n
\n\"hr-line\"\n
\n
\n

➤ Codepens (mostly embeded animations)

\n

code-pens-embedded

\n

\"-----------------------------------------------------\"

\n

➤ Weekly-Quick-Snips:

\n
\n

Snippet of the Day:

\n

replaceAll

\n

the method string.replaceAll(search, replaceWith) replaces all appearances of search string with replaceWith.

\n
const str = 'this is a JSsnippets example';\n\nconst updatedStr = str.replace('example', 'snippet'); // 'this is a  JSsnippets snippet'\n\n\nThe tricky part is that replace method replaces only the very first match of the substring we have passed:\n\n\nconst str = 'this is a JSsnippets example and examples are great';\n\nconst updatedStr = str.replace('example', 'snippet'); //'this is a JSsnippets snippet and examples are great'\n\nIn order to go through this, we need to use a global regexp instead:\n\n\nconst str = 'this is a JSsnippets example and examples are great';\n\nconst updatedStr = str.replace(/example/g, 'snippet'); //'this is a JSsnippets snippet and snippets are greatr'\n\nbut now we have new friend in town, replaceAll\n\nconst str = 'this is a JSsnippets example and examples are great';\n\nconst updatedStr = str.replaceAll('example', 'snippet'); //'this is a JSsnippets snippet and snippets are greatr'\n
\n
\n

Fibonacci in Python:

\n
def fib_iter(n):\n    if n == 0:\n        return 0\n    if n == 1:\n        return 1\n    p0 = 0\n    p1 = 1\n    for i in range(n-1):\n        next_val = p0 + p1\n        p0 = p1\n        p1 = next_val\n    return next_val\nfor i in range(10):\n    print(f'{i}: {fib_iter(i)}')\n
\n
\n

Yesterday's Snippet of the day:

\n
\n
def quicksort(l):\n    # One of our base cases is an empty list or list with one element\n    if len(l) == 0 or len(l) == 1:\n        return l\n    # If we have a left list, a pivot point and a right list...\n    # assigns the return values of the partition() function\n    left, pivot, right = partition(l)\n    # Our sorted list looks like left + pivot + right, but sorted.\n    # Pivot has to be in brackets to be a list, so python can concatenate all the elements to a single list\n    return quicksort(left) + [pivot] + quicksort(right)\n\n\n\nprint(quicksort([]))\n\n\n\nprint(quicksort([1]))\n\n\n\nprint(quicksort([1,2]))\n\nprint(quicksort([2,1]))\n\n\nprint(quicksort([2,2]))\n\n\nprint(quicksort([5,3,9,4,8,1,7]))\n\n\nprint(quicksort([1,2,3,4,5,6,7]))\n\n\nprint(quicksort([9,8,7,6,5,4,3,2,1]))\n
\n
\n
\n \n See Older Snippets!\n \n \n #### This Week's snippets: \n \n ---\n \n \n >will replace any spaces in file names with an underscore!\n```bash\n for file in *; do mv \"$file\" `echo $file | tr ' ' '_'` ; done\n ## TAKING IT A STEP FURTHER:\n # Let's do it recursivley:\n function RecurseDirs ()\n{\n oldIFS=$IFS\n IFS=$'\\n'\n for f in \"$@\"\n do\n # YOUR CODE HERE!\n

[\"-----------------------------------------------------\"]

\n

for file in *; do mv \"$file\" echo $file | tr ' ' '_' ; done\nif [[ -d \"${f}\" ]]; then\ncd \"${f}\"\nRecurseDirs $(ls -1 \".\")\ncd ..\nfi\ndone\nIFS=$oldIFS\n}\nRecurseDirs \"./\"

\n
 ---\n ### Copy to clipboard jQuerry\n > Language: Javascript/Jquery\n\n\n>In combination with the script tag :  <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script> , this snippet will add a copy to clipboard button to all of your embedded <code> blocks.\n\n\n```js\n$(document).ready(function() {\n  $('code, pre').append('<span class=\"command-copy\" ><i class=\"fa fa-clipboard\" aria-hidden=\"true\"></i></span>');\n\n  $('code span.command-copy').click(function(e) {\n    var text = $(this).parent().text().trim(); //.text();\n    var copyHex = document.createElement('input');\n    copyHex.value = text\n    document.body.appendChild(copyHex);\n    copyHex.select();\n    document.execCommand('copy');\n    console.log(copyHex.value)\n    document.body.removeChild(copyHex);\n  });\n\n\n  $('pre span.command-copy').click(function(e) {\n    var text = $(this).parent().text().trim();\n    var copyHex = document.createElement('input');\n    copyHex.value = text\n    document.body.appendChild(copyHex);\n    copyHex.select();\n    document.execCommand('copy');\n    console.log(copyHex.value)\n    document.body.removeChild(copyHex);\n  });\n})\n
\n
\n

Append Files in PWD

\n
//APPEND-DIR.js\nconst fs = require('fs');\nlet cat = require('child_process').execSync('cat *').toString('UTF-8');\nfs.writeFile('output.md', cat, (err) => {\n    if (err) throw err;\n});\n
\n
\n

doesUserFrequentStarbucks.js

\n
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);\nconsole.log(isAppleDevice);\n// Result: will return true if user is on an Apple device\n
\n
\n

arr-intersection.js

\n
/*\n function named intersection(firstArr) that takes in an array and\nreturns a function. \nWhen the function returned by intersection is invoked\npassing in an array (secondArr) it returns a new array containing the elements\ncommon to both firstArr and secondArr.\n*/\nfunction intersection(firstArr) {\n    return (secondArr) => {\n        let common = [];\n        for (let i = 0; i < firstArr.length; i++) {\n            let el = firstArr[i];\n            if (secondArr.indexOf(el) > -1) {\n                common.push(el);\n            }\n        }\n        return common;\n    };\n}\nlet abc = intersection(['a', 'b', 'c']); // returns a function\nconsole.log(abc(['b', 'd', 'c'])); // returns [ 'b', 'c' ]\n\nlet fame = intersection(['f', 'a', 'm', 'e']); // returns a function\nconsole.log(fame(['a', 'f', 'z', 'b'])); // returns [ 'f', 'a' ]\n
\n
\n

arr-of-cum-partial-sums.js

\n
/*\nFirst is recurSum(arr, start) which returns the sum of the elements of arr from the index start till the very end.\nSecond is partrecurSum() that recursively concatenates the required sum into an array and when we reach the end of the array, it returns the concatenated array.\n*/\n//arr.length -1 = 5\n//                   arr   [    1,    7,    12,   6,    5,    10   ]\n//                   ind   [    0     1     2     3     4      5   ]\n//                              ↟                              ↟\n//                            start                           end\n\nfunction recurSum(arr, start = 0, sum = 0) {\n    if (start < arr.length) {\n        return recurSum(arr, start + 1, sum + arr[start]);\n    }\n\n    return sum;\n}\n\nfunction rPartSumsArr(arr, partSum = [], start = 0, end = arr.length - 1) {\n    if (start <= end) {\n        return rPartSumsArr(arr, partSum.concat(recurSum(arr, start)), ++start, end);\n    }\n    return partSum.reverse();\n}\n\nconsole.log('------------------------------------------------rPartSumArr------------------------------------------------');\nconsole.log('rPartSumsArr(arr)=[ 1, 1, 5, 2, 6, 10 ]: ', rPartSumsArr(arr));\nconsole.log('rPartSumsArr(arr1)=[ 1, 7, 12, 6, 5, 10 ]: ', rPartSumsArr(arr1));\nconsole.log('------------------------------------------------rPartSumArr------------------------------------------------');\n/*\n------------------------------------------------rPartSumArr------------------------------------------------\nrPartSumsArr(arr)=[ 1, 1, 5, 2, 6, 10 ]:  [ 10, 16, 18, 23, 24, 25 ]\nrPartSumsArr(arr1)=[ 1, 7, 12, 6, 5, 10 ]:  [ 10, 15, 21, 33, 40, 41 ]\n------------------------------------------------rPartSumArr------------------------------------------------\n*/\n
\n
\n

camel2Kabab.js

\n
function camelToKebab(value) {\n    return value.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n
\n
\n

camelCase.js

\n
function camel(str) {\n    return str.replace(/(?:^\\w|[A-Z]|\\b\\w|\\s+)/g, function (match, index) {\n        if (+match === 0) return ''; // or if (/\\s+/.test(match)) for white spaces\n        return index === 0 ? match.toLowerCase() : match.toUpperCase();\n    });\n}\n
\n
\n

concatLinkedLists.js

\n
function addTwoNumbers(l1, l2) {\n    let result = new ListNode(0);\n    let currentNode = result;\n    let carryOver = 0;\n    while (l1 != null || l2 != null) {\n        let v1 = 0;\n        let v2 = 0;\n        if (l1 != null) v1 = l1.val;\n        if (l2 != null) v2 = l2.val;\n\n        let sum = v1 + v2 + carryOver;\n        carryOver = Math.floor(sum / 10);\n        sum = sum % 10;\n        currentNode.next = new ListNode(sum);\n\n        currentNode = currentNode.next;\n        if (l1 != null) l1 = l1.next;\n        if (l2 != null) l2 = l2.next;\n    }\n\n    if (carryOver > 0) {\n        currentNode.next = new ListNode(carryOver);\n    }\n\n    return result.next;\n}\n
\n
\n

fast-is-alpha-numeric.js

\n
//Function to test if a character is alpha numeric that is faster than a regular\n//expression in JavaScript\n\nlet isAlphaNumeric = (char) => {\n    char = char.toString();\n    let id = char.charCodeAt(0);\n    if (\n        !(id > 47 && id < 58) && // if not numeric(0-9)\n        !(id > 64 && id < 91) && // if not letter(A-Z)\n        !(id > 96 && id < 123) // if not letter(a-z)\n    ) {\n        return false;\n    }\n    return true;\n};\n\nconsole.log(isAlphaNumeric('A')); //true\nconsole.log(isAlphaNumeric(2)); //true\nconsole.log(isAlphaNumeric('z')); //true\nconsole.log(isAlphaNumeric(' ')); //false\nconsole.log(isAlphaNumeric('!')); //false\n
\n
\n

find-n-replace.js

\n
function replaceWords(str, before, after) {\n    if (/^[A-Z]/.test(before)) {\n        after = after[0].toUpperCase() + after.substring(1);\n    } else {\n        after = after[0].toLowerCase() + after.substring(1);\n    }\n    return str.replace(before, after);\n}\nconsole.log(replaceWords('Let us go to the store', 'store', 'mall')); //\"Let us go to the mall\"\nconsole.log(replaceWords('He is Sleeping on the couch', 'Sleeping', 'sitting')); //\"He is Sitting on the couch\"\nconsole.log(replaceWords('His name is Tom', 'Tom', 'john'));\n//\"His name is John\"\n
\n
\n

flatten-arr.js

\n
/*Simple Function to flatten an array into a single layer */\nconst flatten = (array) => array.reduce((accum, ele) => accum.concat(Array.isArray(ele) ? flatten(ele) : ele), []);\n
\n
\n

isWeekDay.js

\n
const isWeekday = (date) => date.getDay() % 6 !== 0;\nconsole.log(isWeekday(new Date(2021, 0, 11)));\n// Result: true (Monday)\nconsole.log(isWeekday(new Date(2021, 0, 10)));\n// Result: false (Sunday)\n
\n
\n

longest-common-prefix.js

\n
function longestCommonPrefix(strs) {\n    let prefix = '';\n    if (strs.length === 0) return prefix;\n    for (let i = 0; i < strs[0].length; i++) {\n        const character = strs[0][i];\n        for (let j = 0; j < strs.length; j++) {\n            if (strs[j][i] !== character) return prefix;\n        }\n        prefix = prefix + character;\n    }\n    return prefix;\n}\n
\n

\n
\n
\n

\"-----------------------------------------------------\"

\n

➤ Github Gists

\n

Github Gists

\n

list-of-my-websites

\n

\"Awesome\" \"Made

\n

\"forthebadge\"\"forthebadge\"

\n

\"Website\"Ask\"Gitter\"\"PyPI

\n

\"Maintenance\"\"Open \"Bash

\n

\"React\" \"Redux\"\n\"HTML5\" \"CSS3\" \"Sass\"\"Docker\" \"MySQL\" \"PostgresQL\" \"Git\" \"Ruby\" \"Material-UI\"

\n

\"Express\" \"Nodejs\"\"Python\" \"Bootstrap\" \"JavaScript\"

\n\n\n"},{"url":"/docs/about/job-search/","relativePath":"docs/about/job-search.md","relativeDir":"docs/about","base":"job-search.md","name":"job-search","frontmatter":{"title":"Job Search","weight":0,"excerpt":"the hunt for a webdev position","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Job Boards and The Hunt

\n

I can't imagine the kind of masochism it would take to enjoy the act of posting and daily maintenance on a job board…It's part of the…

\n
\n

Job Boards and The Hunt

\n

I can't imagine the kind of masochism it would take to enjoy the act of posting and daily maintenance on a job board…It's part of the process that you've already invested so much of yourself in, so you should take pride in it; do a good job the first time around and you'll get where your going in the blink of an eye!

\n

A list of all of my articles to link to future posts
\nYou should probably skip this one… seriously it's just for internal use!bryanguner.medium.com

\n
\n

Update(After The Interview):

\n

As a candidate, there are key next steps that you can and should after every interview to help you stand out.

\n

Send a thank you email within 24 business hours

\n

Do not miss this step! It takes less than five minutes and can make the difference between you and another candidate. It also keeps you fresh in your interviewers' memories. For example:

\n

‍

\n

Hi (name),

\n
\n

Thank you so much for taking the time to meet with me yesterday to discuss my candidacy for (role title). After learning more about (share one or two takeaways from the interview about the company/team's priorities), I'm even more excited to bring my skills in (1-3 relevant skills) to the team.

\n
\n
\n

I look forward to hearing from you about next steps, and if there is anything that I can clarify about my experience or qualifications for the (role title) position, please don't hesitate to reach out.

\n
\n
\n

Thank you for your consideration,

\n
\n
\n

(your name)

\n
\n

Follow up

\n

Don't wait for the company to reach out to you! Be proactive in showing your interest by checking in to see where you stand in the process. If a company indicates a deadline by which you will hear back, and the deadline has passed, follow-up!

\n

Check your email and phone regularly
\n‍*
\n*Don't ghost on a company at any stage in the process; make sure you add their domain to your safe senders list and respond to any messages within 24 hours.

\n

‍

\n

Be prepared
\n‍*
\n*You might be invited for another interview on short notice; review the description regularly so it doesn't slip from your memory, and keep brushing up on skills you may need for an interview (chances are, this won't be the only job you'll need them for anyway!)

\n
\n
\n
\n

Here I will maintain a running list of applicable job boards and below I will go into detail about the niches they occupy and whatever I resource I have found to use them to your maximum advantage. !

\n
\n

Update (remote work edition):

\n
    \n
  1. Arc
    2. \n
  2. We Work Remotely
    3. \n
  3. Skip The Drive
    4. \n
  4. Power to Fly
    5. \n
  5. Remote OK
    6. \n
  6. Remotive
    7. \n
  7. FlexJobs
    8. \n
  8. Dribble
    9. \n
  9. AngelList
    10. \n
  10. Remote.co
    11. \n
  11. JustRemote
    12. \n
  12. Virtual Vocations
    13. \n
  13. Pangian
    14. \n
  14. Working Nomads
    15. \n
  15. Jobspresso
    16. \n
  16. Outsourcely
    17. \n
  17. Landing.Jobs
    18. \n
  18. Authentic Jobs
    19. \n
  19. Stack Overflow
    20. \n
  20. Gun.io
    21. \n
  21. Idealist
    22. \n
  22. Fiverr
    23. \n
  23. Upwork
    24. \n
  24. Freelancer
    25. \n
  25. freelancermap
    26. \n
\n
\n

List:

\n

General Boards

\n\n

Remote or Relocation Boards:

\n\n

DS Boards:

\n\n

Design Boards

\n\n

Software Development

\n\n

I am intentionally not linking glassdoor because they have irritated me for the last time by insisting I provide a job review every time I want to access their content… (To the makers of glassdoor… HOW MANY TIMES A MONTH DO YOU THINK I CHANGE JOBS!!!!) I don't have 15 minutes to make up a job experience every time I want to read a review.

\n
\n
\n

Also here is a repo of compiled job search and interviewing resources:

\n
\n

bgoonz/INTERVIEW-PREP-COMPLETE
\nYour resume is your personal summary sheet. Your resume is the thing that gets your foot in the door. So, there's a few…github.com

\n
\n

First off I am going to introduce a few different categories for those of you who are completely overwhelmed by the prospect of even selecting a job board let alone establishing a competitive presence on one. Here's a few catorizations I think are worth distinguishing for one and other.

\n

1. Interpersonal Connections

\n

Seek to leverage the connections you have with people you know and companies you want to work with. I know that that's a violation of the premise of this article but without even feeling the need to provide quantitative proof; I can confidently assume that this is the most ROI efficient way to produce a desirable result. (Sorry introverts… 2020 may have been your year but this is our world. 😘)

\n

If personal connections don't come through, the next best thing is cold outreach (best in terms of results…. personally I hate cold calling strangers and I am an extrovert.)

\n
    \n
  1. Before or after submitting an application, identify 1-3 professionals to reach out to at the company to express interest in opportunities.
    2. \n
  2. Send a message to express interest and request an informational interview with the individual via LinkedIn, email, Twitter, or other available communication methods.
    3. \n
  3. If you hear back and the individual is willing to connect, confirm a day and time to conduct a preliminary interview. OR If you have yet to hear back after 3 business days, follow-up.
    4. \n
\n

Once you send off a message in step two, there are a variety of responses you may receive. Sometimes an individual will forward you along to someone who may be of better assistance, other times your message may be overlooked with no reply, and its possible (best case scenario) your request for a chat becomes an invitation to interview.

\n
\n
### ***2. LinkedIn***.\n

I am going to devote a lot of time to this one because it is the largest and most active of all the job board ecosystems… period… full stop regardless of your industry.

\n

LinkedIn now has almost 740 million members with over 55 million registered companies. (for comparison 12.3 million people visited Indeed in October, up 19.6 percent. Monster.com attracted 12.1 million people, and CareerBuilder.comattractedd 11.3 million in that same time) and LinkedIn is the most-used social media platform amongst Fortune 500 companies as it provides far more networking capabilities than pure recruitment.

\n

If you put your resume and skills on LinkedIn.com as a software Engineer, and state that you are open to new opportunities, you will be contacted by multiple recruiters, and if your skills are desirable possibly also directly by companies seeking to hire you. It's a developer's market; there's not enough people out there, especially in America.

\n

Here's my profile… feel free to connect… the larger your network the greater your exposure is to someone who works at your potential dream job.

\n

Bryan Guner - Web Developer - Freelance | LinkedIn
\nView Bryan Guner's profile on LinkedIn, the world's largest professional community. Bryan has 5 jobs listed on their…www.linkedin.com

\n

Here's A Linkedin Checklist I will be using before I return to the job hunt!

\n

LinkedIn
\nPersonal and Contact Information:www.notion.so

\n
\n

excerpt:

\n
\n

Experience Section

\n
    \n
  • [ ] I have listed all professional roles included on my resume in this section and any that I had to cut from my resume for space
    • \n
  • [ ] I have written 2-4 power statements for each experience listed (okay to copy and paste from resume)
    • \n
  • [ ] My power statements for each experience are bulleted, not in paragraph form.
    • \n
  • [ ] I did list responsibilities in bullet point format (I did not leave in paragraph format)
    • \n
  • [ ] I did start each bullet point with an action verb and I did not use phrases such as: Assisted with... Worked on... Helped with... (Solely responsible for... ok)
    • \n
  • [ ] I did describe past projects in past tense and current projects in present tense
    • \n
  • [ ] I did not use pronouns such as: “I,” “we,” “they, “you,” “me,” “us”
    • \n
  • [ ] Optional: Bootcamp student experience and projects can be listed under your experience section if you have no (or almost no) prior work experience.
    • \n
  • [ ] If I listed my Bootcamp student experience, my title is [name of program] Student (example: Data Science Student)
    • \n
  • [ ] I copied and pasted my Lambda projects in my student description and also included them in the Accomplishments section
    • \n
\n

Do's:

\n

Spend a good portion of your time learning and reading. Your jobs teach you so much about an organization and the business.

\n

Follow business owners and senior managers, successful team leaders in large organizations, startup owners. You would be surprised how willing some otherwise busy executives are to rub elbows with veritable newcomers. They're not just doing this out of the kindness of their hearts, just like you… they have an ulterior motive. They are hoping to build goodwill with the incoming workforce in a bid to make their company more attractive to high quality candidates. If they give you any of their time…treat it like an interview.

\n
\n

To leverage this information, (the trick is to constantly remind yourself to be on your game with speaking with them.) I do not care what your teacher's past have said… mark my words… *THERE IS MOST CERTAINLY SUCH A THING AS A STUPID QUESTION**…Anyone who tells you otherwise is either stupid themselves or just overcome with their own compassion (an admirable trait but ultimately a disservice to you the competitive job seeker).*

\n
\n

How to Ask Great Questions
\nIn Brief The Problem Some professionals such as litigators, journalists and even doctors, are taught to ask questions…hbr.org

\n
\n

Engage in networking. I would recommend finding and connecting with current attendee of any software development bootcamp. They're all (for the most part) programatically encouraged to connect network and engage in peer skill promotion (even if they have no idea of you skill level). If that weren't enough reason, all of them come from a cohort of other individuals being instructed to do the same. Once you have a few in your network other's will seek you out through Linkedin recommendations algorithm.

\n
\n
\n

Note to prospective employers please just skip the next few sentences and don't ask why…😅

\n
\n
\n

Of the 214 people that vouched for me… I guestimate about only 80 actually know me in any respectable capacity, and of those, only probably 30 or so are familiar with my competency in the skills they endorsed. It all boils down to the strategies that bootcamps instill in their students. It's the polar opposite of a zero sum game and they're more than happy to exchange personal recommendations with you. They're also far more driven to consistently engage with other members of the linkedin ecosystem because they need to a network to help compensate for their lack of a four year degree and the connections you make in that time.

\n
\n
\n
\n

Build your personal brand. Developing your brand will not only help you attract clients or recruits if you decide to start a business, but will also help you find great job opportunities. You can post anything you take pride in so long as it's fairly professional. Definitely make use of the featured section to showcase your work.

\n
\n
### Don't:\n

Don't Use LinkedIn's Default Headline

\n

LinkedIn automatically populates your headline with your current job title and company name. I hope it goes without saying… but as a rule avoid signaling to prospective employers the depths of your laziness by using any stock responses LinkedIn provides you.

\n

Don't Go Ham On Keyword Placment

\n

Placing keywords strategically into your LinkedIn profile is virtually the only way to ensure being flagged by search algorithms as a potential candidate.You could be forgiven for being tempted to heed the advice of your inner lizard brain, and just stuffing your profile with buzzwords but this will likely trigger a spam account checker and result in worse outcomes than the absence of said keywords.

\n
\n
\n

Why it matters¿

\n

Are We Really All Connected by Just Six Degrees of Separation?

\n

Most of us are familiar with the concept of six degrees of separation — the idea is that anyone in the planet can be connected to anyone else in just six steps. So through just five other people, you're effectively connected to the Queen of England, Jim Belushi or even yo mamma.

\n
\n

Back to the other Job Board Niches:

\n

3. Traditional job boards. Dice.com, Monster.com, etc. They will not find you great jobs at technology companies; they may find you openings as a software engineer at other types of more traditional companies (for example, banks, retail chains, etc though.

\n

4. Local-focused sites. The biggest is Craigslist, but there are others. Often great for contract work and opportunities you wouldn't have otherwise come across.

\n

5. Freelancer websites. oDesk.com, Elance.com, etc. Lower pay, but 100% contract work, and has a lot of flexible opportunities if you're not looking for traditional full-time employment or remote work.

\n\n
\n

Lastly Here's A Github Profile Guide:

\n
Medium is causing strange formatting… they normally form a grid!\n
### Rubric:\n
\n
\n

Discover More:

\n

Web-Dev-Hub
\nMemoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…bgoonz-blog.netlify.app

\n

General

\n\n
\n

Resume

\n\n

Cover Letter

\n\n
\n

Heroku - Use at your own risk

\n\n
\n

Trivia

\n\n
\n

Language Resources

\n\n
\n

DS&A

\n\n

Hash Tables:

\n
    \n
  • \n

    What is a Hash Table

    \n
      \n
    • O(1) for a \"good\" table
      • \n
    • O(n) for a terrible table (lots of collisions, etc.)
      • \n
    \n
    • \n
\n
\n

System Design

\n\n
\n

Interviewing

\n\n
\n

Networking

\n\n
\n

Managing and Organizing Job Search

\n
    \n
  • \n

    Notion

    \n
      \n
    • Trillo clone but with added features that make it really great! Consider creating a template for new job seekers!
      • \n
    \n
    • \n
\n
\n

Negotiations

\n\n
\n

Portfolio Sites

\n

Take 25 minutes to choose a template, download it, rename it githubusername.github.io , git init, and push it to a github repo of the same name:

\n

Template Sources

\n
    \n
  • Free CSS Templates
    • \n
  • HTML5 UP
    • \n
  • Start Bootstrap
    • \n
  • Theme Wagon
    • \n
  • Templatemo
    • \n
  • One Page Love
    • \n
  • Once you've decided on a template, download it to your machine.
    • \n
  • Rename the folder {$yourGitHubUserName}.github.io, (e.g. if my GitHub\nusername were QueenOfTheBeyhive, I would name my repo\nQueenOfTheBeyhive.github.io). This will be important for deployment to GitHub\npages later.
    • \n
  • Make sure to git init and set up your remote repository.
    • \n
  • As always, make sure to read through any provided README for any potentially\nuseful information.
    • \n
  • Take some time to explore the structure, included elements, and default assets\nincluded in the template. Take special note of style sheets and the main HTML\nfile. The main HTML must be called index.html and it must be located in the root\nof the directory. If the file is located elsewhere, relocate it to the root and adjust\nany relative paths for any imported scripts or style sheets.
    • \n
\n
\n

QA Engineering

\n\n

Alternative Roles

\n
Data Analyst\nSales Engineer\nTechnical Support Engineer\nCustomer Success Engineer\nData Engineer\nDev Ops Engineer\nQA Engineer\nSolutions Engineer\nSupport Engineer\nTechnical Product Manager\nScrum Master\nImplementation Specialist\nTechnical Account Manager\n
\n
\n

Externship

\n\n
\n

Open Source

\n\n
\n

Volunteer

\n\n
\n

Imposter Syndrome

\n\n
\n

Podcasts

\n\n
\n

Books

\n\n
\n

QA Questions

\n

10:22:12 From Alexis Kozak to Everyone : Scenario 1

\n
    \n
  • It's 7:00 pm on a Friday, and you receive a message from Dev Ops that they haven't been able to upgrade a live Production environment as planned. There were feature updates in this release that customers have planned marketing campaigns around. It also included a bug fix for one customer that's currently having to maintain a very manual workaround. What do you do?
    • \n
\n

10:24:40 From Alexis Kozak to Everyone : Scenario 2

\n
    \n
  • An application has been configured to send an email every time a patient requests a changed email. The automated email sends something to the old email, acknowledging that they changed their email, and if that isn't right, to please contact Secular Health Network. When you come into the office one morning, you see that thousands of emails have been generated in the space of two hours. What do you do? How do you find the number of emails sent?
    • \n
\n

10:28:11 From Alexis Kozak to Everyone : Scenario 3

\n
    \n
  • A customer has requested a change to SSO logic such that only users from a certain region can access SmartExam. You've implemented the rule on their demo environments and given them a testing plan that is simple and straightforward. During testing, you're included in multiple email chains with different parties, as well as some one-off calls and texts messages. Resources seem scattered, but the testing happens. After receiving confirmation from the customer that testing was successful, you're told the code is good to go into production. However, upon doing some quick checks, you discover that the rule you wrote doesn't work and would actually prevent any user from logging into SmartExam. The fix is quite simple. What do you do?
    • \n
"},{"url":"/docs/articles/dev-dep/","relativePath":"docs/articles/dev-dep.md","relativeDir":"docs/articles","base":"dev-dep.md","name":"dev-dep","frontmatter":{"title":"Dev Dependencies","sections":[],"seo":{"title":"Dependencies","description":"install an npm package using npm install you are installing it as a dependency. (npm install --production) to avoid installing those development dependencies.\n","robots":[],"extra":[{"name":"og:image","value":"images/react2.jpg","keyName":"property","relativeUrl":true},{"name":"og:description","value":"install an npm package using npm install you are installing it as a dependency. (npm install --production) to avoid installing those development dependencies.\n","keyName":"property","relativeUrl":false},{"name":"og:type","value":"website","keyName":"property","relativeUrl":false},{"name":"twitter:image","value":"images/browserify-25532eef.png","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image","keyName":"name","relativeUrl":false},{"name":"og:title","value":"Dev Dependencies","keyName":"property","relativeUrl":false}],"type":"stackbit_page_meta"},"template":"docs"},"html":"

When you install an npm package using npm install <package-name>, you are installing it as a dependency.

\n

The package is automatically listed in the package.json file, under the dependencies list (as of npm 5: before you had to manually specify --save).

\n

When you add the -D flag, or --save-dev, you are installing it as a development dependency, which adds it to the devDependencies list.

\n

Development dependencies are intended as development-only packages, that are unneeded in production. For example testing packages, webpack or Babel.

\n

When you go in production, if you type npm install and the folder contains a package.json file, they are installed, as npm assumes this is a development deploy.

\n

You need to set the --production flag (npm install --production) to avoid installing those development dependencies.

"},{"url":"/docs/articles/fs-module/","relativePath":"docs/articles/fs-module.md","relativeDir":"docs/articles","base":"fs-module.md","name":"fs-module","frontmatter":{"title":"Fs-Module","sections":[],"seo":{"title":"","description":"Fs-Module","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

The fs module provides a lot of very useful functionality to access and interact with the file system.

\n

There is no need to install it. Being part of the Node.js core, it can be used by simply requiring it:

\n
const fs = require('fs');\n
\n

Once you do so, you have access to all its methods, which include:

\n
    \n
  • fs.access(): check if the file exists and Node.js can access it with its permissions
    • \n
  • fs.appendFile(): append data to a file. If the file does not exist, it's created
    • \n
  • fs.chmod(): change the permissions of a file specified by the filename passed. Related: fs.lchmod(), fs.fchmod()
    • \n
  • fs.chown(): change the owner and group of a file specified by the filename passed. Related: fs.fchown(), fs.lchown()
    • \n
  • fs.close(): close a file descriptor
    • \n
  • fs.copyFile(): copies a file
    • \n
  • fs.createReadStream(): create a readable file stream
    • \n
  • fs.createWriteStream(): create a writable file stream
    • \n
  • fs.link(): create a new hard link to a file
    • \n
  • fs.mkdir(): create a new folder
    • \n
  • fs.mkdtemp(): create a temporary directory
    • \n
  • fs.open(): set the file mode
    • \n
  • fs.readdir(): read the contents of a directory
    • \n
  • fs.readFile(): read the content of a file. Related: fs.read()
    • \n
  • fs.readlink(): read the value of a symbolic link
    • \n
  • fs.realpath(): resolve relative file path pointers (., ..) to the full path
    • \n
  • fs.rename(): rename a file or folder
    • \n
  • fs.rmdir(): remove a folder
    • \n
  • fs.stat(): returns the status of the file identified by the filename passed. Related: fs.fstat(), fs.lstat()
    • \n
  • fs.symlink(): create a new symbolic link to a file
    • \n
  • fs.truncate(): truncate to the specified length the file identified by the filename passed. Related: fs.ftruncate()
    • \n
  • fs.unlink(): remove a file or a symbolic link
    • \n
  • fs.unwatchFile(): stop watching for changes on a file
    • \n
  • fs.utimes(): change the timestamp of the file identified by the filename passed. Related: fs.futimes()
    • \n
  • fs.watchFile(): start watching for changes on a file. Related: fs.watch()
    • \n
  • fs.writeFile(): write data to a file. Related: fs.write()
    • \n
\n

One peculiar thing about the fs module is that all the methods are asynchronous by default, but they can also work synchronously by appending Sync.

\n

For example:

\n
    \n
  • fs.rename()
    • \n
  • fs.renameSync()
    • \n
  • fs.write()
    • \n
  • fs.writeSync()
    • \n
\n

This makes a huge difference in your application flow.

\n
\n

Node.js 10 includes experimental support for a promise based API

\n
\n

For example let's examine the fs.rename() method. The asynchronous API is used with a callback:

\n
const fs = require('fs');\n\nfs.rename('before.json', 'after.json', (err) => {\n    if (err) {\n        return console.error(err);\n    }\n\n    //done\n});\n
\n

A synchronous API can be used like this, with a try/catch block to handle errors:

\n
const fs = require('fs');\n\ntry {\n    fs.renameSync('before.json', 'after.json');\n    //done\n} catch (err) {\n    console.error(err);\n}\n
\n

The key difference here is that the execution of your script will block in the second example, until the file operation succeeded.

"},{"url":"/docs/articles/event-loop/","relativePath":"docs/articles/event-loop.md","relativeDir":"docs/articles","base":"event-loop.md","name":"event-loop","frontmatter":{"title":"The Node.js Event Loop","sections":[],"seo":{"title":"","description":"The Event Loop is one of the most important aspects to understand about Node.js","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Introduction

\n

The Event Loop is one of the most important aspects to understand about Node.js.

\n

Why is this so important? Because it explains how Node.js can be asynchronous and have non-blocking I/O, and so it explains basically the \"killer app\" of Node.js, the thing that made it this successful.

\n

The Node.js JavaScript code runs on a single thread. There is just one thing happening at a time.

\n

This is a limitation that's actually very helpful, as it simplifies a lot how you program without worrying about concurrency issues.

\n

You just need to pay attention to how you write your code and avoid anything that could block the thread, like synchronous network calls or infinite loops.

\n

In general, in most browsers there is an event loop for every browser tab, to make every process isolated and avoid a web page with infinite loops or heavy processing to block your entire browser.

\n

The environment manages multiple concurrent event loops, to handle API calls for example. Web Workers run in their own event loop as well.

\n

You mainly need to be concerned that your code will run on a single event loop, and write code with this thing in mind to avoid blocking it.

\n

Blocking the event loop

\n

Any JavaScript code that takes too long to return back control to the event loop will block the execution of any JavaScript code in the page, even block the UI thread, and the user cannot click around, scroll the page, and so on.

\n

Almost all the I/O primitives in JavaScript are non-blocking. Network requests, filesystem operations, and so on. Being blocking is the exception, and this is why JavaScript is based so much on callbacks, and more recently on promises and async/await.

\n

The call stack

\n

The call stack is a LIFO queue (Last In, First Out).

\n

The event loop continuously checks the call stack to see if there's any function that needs to run.

\n

While doing so, it adds any function call it finds to the call stack and executes each one in order.

\n

You know the error stack trace you might be familiar with, in the debugger or in the browser console? The browser looks up the function names in the call stack to inform you which function originates the current call:

\n

\"Exception

\n

A simple event loop explanation

\n

Let's pick an example:

\n\n\n\n

When this code runs, first foo() is called. Inside foo() we first call bar(), then we call baz().

\n

At this point the call stack looks like this:

\n

\"Call

\n

The event loop on every iteration looks if there's something in the call stack, and executes it:

\n

\"Execution

\n

until the call stack is empty.

\n

Queuing function execution

\n

The above example looks normal, there's nothing special about it: JavaScript finds things to execute, runs them in order.

\n

Let's see how to defer a function until the stack is clear.

\n

The use case of setTimeout(() => {}, 0) is to call a function, but execute it once every other function in the code has executed.

\n

Take this example:

\n\n\n\n

This code prints, maybe surprisingly:

\n
foo\nbaz\nbar\n
\n

When this code runs, first foo() is called. Inside foo() we first call setTimeout, passing bar as an argument, and we instruct it to run immediately as fast as it can, passing 0 as the timer. Then we call baz().

\n

At this point the call stack looks like this:

\n

\"Call

\n

Here is the execution order for all the functions in our program:

\n

\"Execution

\n

Why is this happening?

\n

The Message Queue

\n

When setTimeout() is called, the Browser or Node.js starts the timer. Once the timer expires, in this case immediately as we put 0 as the timeout, the callback function is put in the Message Queue.

\n

The Message Queue is also where user-initiated events like click or keyboard events, or fetch responses are queued before your code has the opportunity to react to them. Or also DOM events like onLoad.

\n

The loop gives priority to the call stack, and it first processes everything it finds in the call stack, and once there's nothing in there, it goes to pick up things in the message queue.

\n

We don't have to wait for functions like setTimeout, fetch or other things to do their own work, because they are provided by the browser, and they live on their own threads. For example, if you set the setTimeout timeout to 2 seconds, you don't have to wait 2 seconds - the wait happens elsewhere.

\n

ES6 Job Queue

\n

ECMAScript 2015 introduced the concept of the Job Queue, which is used by Promises (also introduced in ES6/ES2015). It's a way to execute the result of an async function as soon as possible, rather than being put at the end of the call stack.

\n

Promises that resolve before the current function ends will be executed right after the current function.

\n

I find nice the analogy of a rollercoaster ride at an amusement park: the message queue puts you at the back of the queue, behind all the other people, where you will have to wait for your turn, while the job queue is the fastpass ticket that lets you take another ride right after you finished the previous one.

\n

Example:

\n\n\n\n

That's a big difference between Promises (and Async/await, which is built on promises) and plain old asynchronous functions through setTimeout() or other platform APIs.

"},{"url":"/docs/articles/basic-web-dev/","relativePath":"docs/articles/basic-web-dev.md","relativeDir":"docs/articles","base":"basic-web-dev.md","name":"basic-web-dev","frontmatter":{"title":"Web Dev Review","sections":[],"seo":{"title":"","description":"Review-Of-Previous-Concepts","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"
\n

description: Review

\n

Review-Of-Previous-Concepts

\n

Review of Concepts

\n

Running JS Locally Concepts

\n
    \n
  • \n

    Match the commands ls, cd, pwd to their descriptions

    \n
      \n
    • ls lists contents of current directory
      • \n
    • \n

      cd changes current directory

      \n
        \n
      • cd .. takes you up one level
        • \n
      • cd alone takes you back home
        • \n
      \n
      • \n
    • pwd returns current directory
      • \n
    \n
    • \n
  • Given a folder structure diagram, a list of 'cd (path)' commands and target files, match the paths to the target files.
    • \n
  • Use VSCode to create a folder. Within the folder create a .js file containing console.log('hello new world'); and save it.
    • \n
  • Use node to execute a JavaScript file in the terminal
    • \n
\n

Plain Old JS Object Lesson Concepts

\n
    \n
  • \n

    Label variables as either Primitive vs. Reference

    \n
      \n
    • \n

      primitives: strings, booleans, numbers, null and undefined

      \n
        \n
      • primitives are immutable
        • \n
      \n
      • \n
    • \n

      refereces: objects (including arrays)

      \n
        \n
      • references are mutable
        • \n
      \n
      • \n
    \n
    • \n
  • \n

    Identify when to use . vs [] when accessing values of an object

    \n
      \n
    • \n

      dot syntax object.key

      \n
        \n
      • easier to read
        • \n
      • easier to write
        • \n
      • cannot use variables as keys
        • \n
      • keys cannot begin with a number
        • \n
      \n
      • \n
    • \n

      bracket notation object[\"key]

      \n
        \n
      • allows variables as keys
        • \n
      • strings that start with numbers can be use as keys
        • \n
      \n
      • \n
    \n
    • \n
  • \n

    Write an object literal with a variable key using interpolation

    \n
      \n
    • \n

      put it in brackets to access the value of the variable, rather than just make the value that string

      \n
      let a = 'b';\nlet obj = { a: 'letter_a', [a]: 'letter b' };\n
      \n
      • \n
    \n
    • \n
  • \n

    Use the obj[key] !== undefined pattern to check if a given variable that contains a key exists in an object

    \n
      \n
    • can also use (key in object) syntax interchangeably (returns a boolean)
      • \n
    \n
    • \n
  • \n

    Utilize Object.keys and Object.values in a function

    \n
      \n
    • Object.keys(obj) returns an array of all the keys in obj
      • \n
    • Object.values(obj) returns an array of the values in obj
      • \n
    \n
    • \n
  • \n

    Iterate through an object using a for in loop

    \n
    let printValues = function (obj) {\n    for (let key in obj) {\n        let value = obj[key];\n        console.log(value);\n    }\n};\n
    \n
    • \n
  • \n

    Define a function that utilizes ...rest syntax to accept an arbitrary number of arguments

    \n
      \n
    • ...rest syntax will store all additional arguments in an array
      • \n
    • \n

      array will be empty if there are no additional arguments

      \n
      let myFunction = function (str, ...strs) {\n    console.log('The first string is ' + str);\n    console.log('The rest of the strings are:');\n    strs.forEach(function (str) {\n        console.log(str);\n    });\n};\n
      \n
      • \n
    \n
    • \n
\n

\n
    \n
  • \n

    Use ...spread syntax for Object literals and Array literals

    \n
    let arr1 = ['a', 'b', 'c'];\nlet longer = [...arr1, 'd', 'e']; // [\"a\", \"b\", \"c\", \"d\", \"e\"]\n// without spread syntax, this would give you a nested array\nlet withoutRest = [arr1, 'd', 'e']; // [[\"a\", \"b\", \"c\"], \"d\", \"e\"]\n
    \n
    • \n
  • \n

    Destructure an array to reference specific elements

    \n

    ```javascript

    \n

    let array = [35,9];

    \n

    let [firstEl, secondEl] = array;

    \n

    console.log(firstEl); // => 35

    \n

    console.log(secondEl); // => 9

    \n
    • \n
\n

// can also destructure using ... syntax let array = [35,9,14]; let [head, ...tail] = array; console.log(head); // => 35 console.log(tail); // => [9, 14]

\n
- Destructure an object to reference specific values\n   - if you want to use variable names that don't match the keys, you can use aliasing\n      - `let { oldkeyname: newkeyname } = object`\n   - rule of thumb—only destructure values from objects that are two levels deep\n```javascript\nlet obj = {\n   name: \"Wilfred\",\n   appearance: [\"short\", \"mustache\"],\n   favorites: {\n      color: \"mauve\",\n      food: \"spaghetti squash\",\n      number: 3\n   }\n}\n// with variable names that match keys\nlet { name, appearance } = obj;\nconsole.log(name); // \"Wilfred\"\nconsole.log(appearance); // [\"short\", \"mustache\"]\n\n// with new variable names (aliasing)\nlet {name: myName, appearance: myAppearance} = obj;\n\nconsole.log(myName); // \"Wilfred\"\nconsole.log(myAppearance); // [\"short\", \"mustache\"]\n\n// in a function call\nlet sayHello = function({name}) {\nconsole.log(\"Hello, \" + name); // \"Hello Wilfred\"\n}\n\n// nested objects + aliasing\nlet { favorites: {color, food: vegetable} } = obj;\nconsole.log(color, vegetable); //=> mauve spaghetti squash\n
\n
    \n
  • \n

    Write a function that accepts a array as an argument and returns an object representing the count of each character in the array

    \n
    //\nlet elementCounts = function (array) {\n    let obj = {};\n    array.forEach(function (el) {\n        if (el in obj) obj[el] += 1;\n        else obj[el] = 1;\n    });\n    return obj;\n};\nconsole.log(elementCounts(['e', 'f', 'g', 'f'])); // => Object {e: 1, f: 2, g: 1}\n
    \n
    • \n
\n

Callbacks Lesson Concepts

\n
    \n
  • \n

    Given multiple plausible reasons, identify why functions are called \"First Class Objects\" in JavaScript.

    \n
      \n
    • they can be stored in variables, passed as arguments to other functions, and serve as return value for a function
      • \n
    • supports same basic operations as other types (strings, bools, numbers)
      • \n
    • higher-order functions take functions as arguments or return functions as values
      • \n
    \n
    • \n
  • \n

    Given a code snippet containing an anonymous callback, a named callback, and multiple console.logs, predict what will be printed

    \n
      \n
    • what is this referring to?
      • \n
    \n
    • \n
  • Write a function that takes in a value and two callbacks. The function should return the result of the callback that is greater.
    • \n
\n
let greaterCB = function (val, callback1, callback2) {\n    if (callback1(val) > callback2(val)) {\n        return callback1(val);\n    }\n    return callback2(val);\n};\n\nlet greaterCB = function (val, callback1, callback2) {\n    if (callback1(val) > callback2(val)) {\n        return callback1(val);\n    }\n    return callback2(val);\n};\n
\n

// 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));

\n
- Write a function, myMap, that takes in an array and a callback as arguments. The function should mimic the behavior of `Array#map`.\n```javascript\nlet myMap = function(array, callback) {\n   let newArr = [];\n   for (let i = 0; i < array.length; i ++) {\n      mapped = callback(array[i], i, array);\n      newArr.push(mapped);\n   }\n   return newArr;\n}\nconsole.log( myMap([16,25,36], Math.sqrt)); // => [4, 5, 6];\n\nlet myMapArrow = (array, callback) => {\n   let newArr = [];\n   array.forEach( (ele, ind, array) => {\n      newArr.push(callback(ele, ind, array));\n   })\n   return newArr;\n}\nconsole.log(myMapArrow([16,25,36], Math.sqrt)); // => [4, 5, 6];\n
\n
    \n
  • \n

    Write a function, myFilter, that takes in an array and a callback as arguments. The function should mimic the behavior of Array#filter.

    \n
    let myFilter = function (array, callback) {\n    let filtered = [];\n    for (let i = 0; i < array.length; i++) {\n        if (callback(array[i])) {\n            filtered.push(array[i], i, array);\n        }\n    }\n};\n
    \n
    • \n
  • \n

    Write a function, myEvery, that takes in an array and a callback as arguments. The function should mimic the behavior of Array#every.

    \n
    let myEvery = function (array, callback) {\n    for (let i = 0; i < array.length; i++) {\n        if (!callback(array[i], i, array)) {\n            return false;\n        }\n    }\n    return true;\n};\n// with arrow function syntax\nlet myEvery = (array, callback) => {\n    for (let i = 0; i < array.length; i++) {\n        if (!callback(array[i])) {\n            return false;\n        }\n    }\n    return true;\n};\n
    \n
    • \n
\n

Scope Lesson Concepts

\n
    \n
  • \n

    Identify the difference between const, let, and var declarations

    \n
      \n
    • const - cannot reassign variable, scoped to block
      • \n
    • let - can reassign variable, scoped to block
      • \n
    • var - outdated, may or may not be reassigned, scoped to function. can be not just reassigned, but also redeclared!
      • \n
    • a variable will always evaluate to the value it contains regardless of how it was declared
      • \n
    \n
    • \n
  • \n

    Explain the difference between const, let, and var declarations

    \n
      \n
    • \n

      var is function scoped—so if you declare it anywhere in a function, the declaration (but not assignment) is \"hoisted\"

      \n
        \n
      • so it will exist in memory as \"undefined\" which is bad and unpredictable
        • \n
      \n
      • \n
    • 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!
      • \n
    • 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
      • \n
    • block-scoped variables allow new variables with the same name in new scopes
      • \n
    • 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
      • \n
    • \n

      if you do not use var or let or const when initializing, it will be declared as global—THIS IS BAD

      \n
        \n
      • 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
        • \n
      \n
      • \n
    \n
    • \n
  • \n

    Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining

    \n
      \n
    • scope of a program means the set of variables that are available for use within the program
      • \n
    • \n

      global scope is represented by the window object in the browser and the global object in Node.js

      \n
        \n
      • global variables are available everywhere, and so increase the risk of name collisions
        • \n
      \n
      • \n
    • \n

      local scope is the set of variables available for use within the function

      \n
        \n
      • when we enter a function, we enter a new scope
        • \n
      • 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)
        • \n
      \n
      • \n
    • for blocks (denoted by curly braces {}, as in conditionals or for loops), variables can be block scoped
      • \n
    • \n

      inner scope does not have access to variables in the outer scope

      \n
        \n
      • scope chaining—if a given variable is not found in immediate scope, javascript will search all accessible outer scopes until variable is found
        • \n
      • so an inner scope can access outer scope variables
        • \n
      • but an outer scope can never access inner scope variables
        • \n
      \n
      • \n
    \n
    • \n
  • \n

    Define an arrow function

    \n

    ```javascript

    \n

    let arrowFunction = (param1, param2) => {

    \n

    let sum = param1 + param2;

    \n

    return sum;

    \n

    }

    \n
    • \n
\n

// with 1 param you can remove parens around parameters let arrowFunction = param => { param += 1; return param; }

\n

// if your return statement is one line, you can use implied return let arrowFunction = param => param + 1;

\n

// you don't have to assign to variable, can be anonymous // if you never need to use it again param => param + 1;

\n

```

\n
    \n
  • \n

    Given an arrow function, deduce the value of this without executing the code

    \n
      \n
    • arrow functions are automatically bound to the context they were declared in
      • \n
    • unlike regular function which use the context they are invoked in (unless they have been bound using Function#bind)
      • \n
    • 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
      • \n
    • \n

      so you can't use an arrow function to define a method directly

      \n

      ```javascript

      \n

      let obj = {

      \n

      name: \"my object\",

      \n

      unboundFunc: function () {

      \n

      return this.name;

      \n

      // this function will be able to be called on different objects

      \n

      },

      \n
      • \n
    \n
    • \n
\n

\n

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 },

\n
makeFuncBoundToObj: function () {\n    return () => {\n        return this.name;\n    }\n    // this function will return a function that will be bound\n    // to the object where we call the outer method\n    // because the arrow syntax is nested inside one of this\n    // function's methods, it cannot be rebound\n},\n\nmakeUnboundFunc: function () {\n    return function () {\n        return this.name;\n    }\n    //this function will return a function that will still be unbound\n},\n\nimmediatelyInvokedFunc: function () {\n    return this.name;\n}(), // this property will be set to the return value of this anonymous function,\n// which is invoked during the object definition;\n// basically, it's a way to check the context inside of an object, at this moment\n\ninnerObj: {\n    name: \"inner object\",\n    innerArrowFunc: () =>  {\n        return this.name;\n    } // the context inside a nested object is not the parent, it's still\n    // the global object. entering an object definition doesn't change the context\n},\n\n\nlet otherObj = { name: \"my other object\" }\n// 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\"\n// 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\n// 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\"\n// 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\"\n// 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\n// 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\n
\n

}

\n
- Implement a closure and explain how the closure effects scope\n   - a closure is \"the combination of a function and the lexical environment within which that function was declared\"\n      - alternatively, \"when an inner function uses or changes variables in an outer function\"\n   - 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\"\n   - closure keeps reference to all variables **even if the outer function has returned**\n      - each function has a private mutable state that cannot be accessed externally\n      - 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\n      - 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?\n      - 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\n\n\n```javascript\nfunction createCounter() {\n   // this function starts a counter at 0, then returns a\n   // new function that can access and change that counter\n   //\n   // each new counter you create will have a single internal\n   // state, that can be changed only by calling the function.\n   // you can't access that state from outside of the function,\n   // even though the count variable in question is initialized\n   // by the outer function, and it remains accessible to the\n   // inner function after the outer function returns.\n   let count = 0;\n   return function() {\n      count ++;\n      return count;\n   }\n}\n\nlet counter = createCounter();\nconsole.log(counter()); //=> 1\nconsole.log(counter()); //=> 2\n// so the closure here comes into play because\n// an inner function is accessing and changing\n// a variable from an outer function\n\n// the closure is the combination of the counter\n// function and the all the variables that existed\n// in the scope that it was declared in. because\n// inner blocks/functions have access to outer\n// scopes, that includes the scope of the outer\n// function.\n\n// so counter variable is a closure, in that\n// it contains the inner count value that was\n// initialized by the outer createCounter() function\n// count has been captured or closed over\n\n// this state is private, so if i run createCounter again\n// i get a totally separate count that doesn't interact\n// with the previous one and each of the new functions\n// will have their own internal state based on the\n// initial declaration in the now-closed outer function\n\nlet counter2 = createCounter();\nconsole.log(counter2()); // => 1\n\n// if i set a new function equal to my existing counter\n// the internal state is shared with the new function\nlet counter3 = counter2;\nconsole.log(counter3());\n
\n
    \n
  • \n

    Define a method that references this on an object literal

    \n
      \n
    • \n

      when we use this in a method it refers to the object that the method is invoked on

      \n
        \n
      • it will let you access other pieces of information from within that object, or even other methods
        • \n
      • method style invocation - object.method(args) (e.g. built in examples like Array#push, or String#toUpperCase)
        • \n
      \n
      • \n
    • context is set every time we invoke a function
      • \n
    • function style invocation sets the context to the global object no matter what
      • \n
    • being inside an object does not make the context that object! you still have to use method-style invocation
      • \n
    \n
    • \n
  • \n

    Utilize the built in Function#bind on a callback to maintain the context of this

    \n
      \n
    • 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
      • \n
    \n
    let cat = {\npurr: function () {\nconsole.log(\"meow\");\n},\npurrMore: function () {\nthis.purr();\n},\n};\nlet sayMeow = cat.purrMore; console.log(sayMeow()); // TypeError: this.purr is not a function\n\n\n// we can use the built in Function.bind to ensure our context, our this, // is the cat object let boundCat = sayMeow.bind(cat);\nboundCat(); // prints \"meow\"\n
    \n

    ``

    \n
    • \n
\n

\n

\n
   - `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\n      - 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\n- Given a code snippet, identify what `this` refers to\n   - important to recognize the difference between scope and context\n      - 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)\n      - context refers to the value of the `this` keyword\n   - the keyword `this` exists in every function and it evaluates to the object that is currently invoking that function\n   - so the context is fairly straightforward when we talk about methods being called on specific objects\n   - 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.\n```javascript\nlet dog = {\n   name: \"Bowser\",\n   changeName: function () {\n      this.name = \"Layla\";\n  },\n};\n\n// note this is **not invoked** - we are assigning the function itself\nlet change = dog.changeName;\nconsole.log(change()); // undefined\n\n// our dog still has the same name\nconsole.log(dog); // { name: 'Bowser', changeName: [Function: changeName] }\n\n// instead of changing the dog we changed the global name!!!\nconsole.log(this); // Object [global] {etc, etc, etc,  name: 'Layla'}\n
\n
    \n
  • \n

    CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP!

    \n
      \n
    • could throw an error if it expects this to have some other method or whatever that doesn't exist
      • \n
    • you could also overwrite values or assign values to exist in a space where they should not exist
      • \n
    \n
    • \n
  • \n

    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

    \n
    let cat = {\npurr: function () {\nconsole.log(\"meow\");\n},\npurrMore: function () {\nthis.purr();\n},\n};\nglobal.setTimeout(cat.purrMore, 5000); // 5 seconds later: TypeError: this.purr is not a function\n
    \n
    • \n
\n

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

\n

\n

let sayMeow = cat.purrMore; console.log(sayMeow()); // TypeError: this.purr is not a function

\n

// we can use the built in Function.bind to ensure our context, our this, // is the cat object let boundCat = sayMeow.bind(cat);

\n

boundCat(); // prints \"meow\"

\n
   - `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\n      - 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\n- Given a code snippet, identify what `this` refers to\n   - important to recognize the difference between scope and context\n      - 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)\n      - context refers to the value of the `this` keyword\n   - the keyword `this` exists in every function and it evaluates to the object that is currently invoking that function\n   - so the context is fairly straightforward when we talk about methods being called on specific objects\n   - 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.\n```javascript\nlet dog = {\n   name: \"Bowser\",\n   changeName: function () {\n      this.name = \"Layla\";\n  },\n};\n\n// note this is **not invoked** - we are assigning the function itself\nlet change = dog.changeName;\nconsole.log(change()); // undefined\n\n// our dog still has the same name\nconsole.log(dog); // { name: 'Bowser', changeName: [Function: changeName] }\n\n// instead of changing the dog we changed the global name!!!\nconsole.log(this); // Object [global] {etc, etc, etc,  name: 'Layla'}\n
\n
    \n
  • \n

    CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP!

    \n
      \n
    • could throw an error if it expects this to have some other method or whatever that doesn't exist
      • \n
    • you could also overwrite values or assign values to exist in a space where they should not exist
      • \n
    \n
    • \n
  • \n

    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

    \n

    ```javascript

    \n

    let cat = {

    \n

    purr: function () {

    \n

    console.log(\"meow\");

    \n

    },

    \n

    purrMore: function () {

    \n

    this.purr();

    \n

    },

    \n

    };

    \n
    • \n
\n

global.setTimeout(cat.purrMore, 5000); // 5 seconds later: TypeError: this.purr is not a function

\n

```

\n
    \n
  • 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
    • \n
\n

POJOs

\n

1. Label variables as either Primitive vs. Reference

\n

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.

\n
    \n
  • Boolean - Primitive
    • \n
  • Null - Primitive
    • \n
  • Undefined - Primitive
    • \n
  • Number - Primitive
    • \n
  • String - Primitive
    • \n
  • Array - Reference
    • \n
  • Object - Reference
    • \n
  • Function - Reference
    • \n
\n

2. Identify when to use . vs [] when accessing values of an object

\n
let obj = { one: 1, two: 2 };\n\n// Choose the square brackets property accessor when the property name is determined at\n// runtime, or if the property name is not a valid identifier\nlet myKey = 'one';\nconsole.log(obj[myKey]);\n\n// Choose the dot property accessor when the property name is known ahead of time.\nconsole.log(obj.two);\n
\n

3. Write an object literal with a variable key using interpolation

\n
let keyName = 'two';\n\n// If the key is not known, you can use an alternative `[]` syntax for\n// object initialization only\nlet obj2 = { [keyName]: 2 };\nconsole.log(obj2);\n
\n

4. Use the obj[key] !== undefined pattern to check if a given variable that contains a key exists in an object

\n
function doesKeyExist(obj, key) {\n    // obj[key] !== undefined\n    // or:\n    return key in obj;\n}\n\nlet course = { bootcamp: 'Lambda', course: 'Bootcamp Prep' };\nconsole.log(doesKeyExist(course, 'course')); // => true\nconsole.log(doesKeyExist(course, 'name')); // => false\n
\n

5. Utilize Object.keys and Object.values in a function

\n
function printKeys(object) {\n    return Object.keys(object);\n}\n\nfunction printValues(object) {\n    return Object.values(object);\n}\n\nconsole.log(printKeys({ dog: 'Strelka', dog2: 'Belka' }));\nconsole.log(printValues({ dog: 'Strelka', dog2: 'Belka' }));\n
\n

6. Iterate through an object using a for in loop

\n
let player = { name: 'Sergey', skill: 'hockey' };\n\nfor (let key in player) {\n    console.log(key, player[key]);\n}\n\nconsole.log(Object.entries(player));\n
\n

7. Define a function that utilizes ...rest syntax to accept an arbitrary number of arguments

\n
function restSum(...otherNums) {\n    let sum = 0;\n    console.log(otherNums);\n    otherNums.forEach(function (num) {\n        sum += num;\n    });\n\n    return sum;\n}\n\nconsole.log(restSum(3, 5, 6)); // => 14\nconsole.log(restSum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // => 45\nconsole.log(restSum(0)); // => 0\n
\n

8. Use ...spread syntax for Object literals and Array literals

\n
let numArray = [1, 2, 3];\nlet moreNums = [...numArray, 4, 5, 6];\n\nconsole.log(moreNums);\n\nlet shoe = { color: 'red', size: 10 };\nlet newShoe = { ...shoe, brand: 'Nike', size: 12 };\nconsole.log(newShoe);\nnewShoe.color = 'black';\nconsole.log(newShoe);\n\nconsole.log(shoe);\n
\n

9. Destructure an array to reference specific elements

\n
let arr = ['one', 'two', 'three'];\n\nlet [first] = arr;\nconsole.log(first);\n
\n

10. Destructure an object to reference specific values

\n
let me = {\n    name: 'Ian',\n    instruments: ['bass', 'synth', 'guitar'],\n    siblings: {\n        brothers: ['Alistair'],\n        sisters: ['Meghan']\n    }\n};\n\nlet {\n    name,\n    instruments: musical_instruments,\n    siblings: { sisters }\n} = me;\n\nconsole.log(name);\nconsole.log(musical_instruments);\nconsole.log(sisters);\n
\n

11. Write a function that accepts a string as an argument and returns an object representing the count of each character in the array

\n
function charCount(inputString) {\n    let res = inputString.split('').reduce(function (accum, el) {\n        if (el in accum) {\n            accum[el] = accum[el] + 1;\n        } else {\n            accum[el] = 1;\n        }\n        return accum;\n    }, {});\n    return res;\n}\n\nconsole.log(charCount('aaabbbeebbcdkjfalksdfjlkasdfasdfiiidkkdingds'));\n
\n

\n

Review of Concepts

\n

1. Identify the difference between const, let, and var declarations

\n

2. Explain the difference between const, let, and var declarations

\n
var a = 'a';\n
\n
    \n
  • var is the historical keyword used for variable declaration.
    • \n
  • var declares variables in function scope, or global scope if not inside a function.
    • \n
  • We consider var to be deprecated and it is never used in this course.
    • \n
\n
let b = 'b';\n
\n
    \n
  • let is the keyword we use most often for variable declaration.
    • \n
  • let declares variables in block scope.
    • \n
  • variables declared with let are re-assignable.
    • \n
\n
const c = 'c';\n
\n
    \n
  • const is a specialized form of let that can only be used to initialize a variable.
    • \n
  • Except when it is declared, you cannot assign to a const variable.
    • \n
  • const scopes variables the same way that let does.
    • \n
\n

3. Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining

\n

Consider this run function, inside which foo and bar have function scope. i and baz are scoped to the block expression.

\n
// function and block scope in this example\nfunction run() {\n    var foo = 'Foo';\n    let bar = 'Bar';\n\n    console.log(foo, bar);\n\n    {\n        console.log(foo);\n        let baz = 'Bazz';\n        console.log(baz);\n    }\n\n    console.log(baz); // ReferenceError\n}\n\nrun();\n
\n

Notice that referencing baz from outside it's block results in JavaScript throwing a ReferenceError.

\n

Consider this run function, inside of which foo has function scope.

\n
function run() {\n    console.log(foo); // undefined\n    var foo = 'Foo';\n    console.log(foo); // Foo\n}\n\nrun();\n
\n

Consider this func1 function and it's nested scopes.

\n
// global scope\nfunction func1(arg1) {\n    // func1 scope\n\n    return function func2(arg2) {\n        // func2 scope\n\n        return function func3(arg3) {\n            // func3 scope\n\n            console.log(arg1, arg2, arg3);\n        };\n    };\n}\n
\n

6. Implement a closure and explain how the closure effects scope

\n
const adder = (arg1) => {\n    return (arg2) => {\n        return arg1 + arg2;\n    };\n};\n\nconst func2 = adder(2);\nconst result = func2(2);\nconsole.log(result); // => 4;\n
\n

4. Define an arrow function

\n
const returnValue = (val) => val;\n
\n

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.

\n

Identically, we could write

\n
const returnValue = (val) => {\n    return val;\n};\n
\n

5. Given an arrow function, deduce the value of this without executing the code

\n
function fDAdder(arr) {\n    console.log(this);\n\n    return arr.reduce((acc, ele) => {\n        return acc + ele;\n    });\n}\n\nfDAdder([1, 2, 4, 6]);\n
\n

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).

\n
const adder = (arr) => {\n    console.log(this);\n    arr.reduce((acc, ele) => (sum += ele));\n};\nadder([1, 2, 4, 6]);\n
\n

In this example, we use a fat arrow style function. Note that when we declare a funciton like this this becomes

\n

7. Define a method that references this on an object literal

\n
const pokemon = {\n    firstname: 'Pika',\n    lastname: 'Chu',\n    getPokeName: function () {\n        const fullname = `${this.firstname} ${this.lastname}`;\n        return fullname;\n    }\n};\n\nconsole.log(pokemon.getPokeName());\n
\n

8. Utilize the built in Function#bind on a callback to maintain the context of this

\n
const pokemon = {\n    firstname: 'Pika',\n    lastname: 'Chu',\n    getPokeName: function () {\n        const fullname = `${this.firstname} ${this.lastname}`;\n        return fullname;\n    }\n};\n\nconst logPokemon = pokemon.getPokename.bind(pokemon);\n\nlogPokemon('sushi', 'algorithms'); // Pika Chu loves sushi and algorithms\n
\n

9. Given a code snippet, identify what this refers to

\n
function Person(name) {\n    // this.name = name;\n    // let that = this;\n\n    setTimeout(function () {\n        // console.log(this); // => Window\n        // console.log(that); // => [Function] => Person\n        // this.sayName(); // => no method error\n        that.sayName();\n    }, 1000);\n}\n\nPerson.prototype.sayName = function () {\n    console.log(this.name);\n};\n\nconst jane = new Person('Jane');\n
"},{"url":"/docs/articles/http/","relativePath":"docs/articles/http.md","relativeDir":"docs/articles","base":"http.md","name":"http","frontmatter":{"title":"The HTTP Protocol","weight":0,"excerpt":"The HTTP Protocol","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

The HTTP Protocol\n\n

\n
    \n
  • Requires: a connection between client and server
    • \n
  • Stateless: no login process, each request is independent
    • \n
  • Simple format: request header, blank line, possible payload
    • \n
  • Symmetrical: allows data to be sent and recieved
    • \n
  • Very easy to implement but scales very well
    • \n
\n

Example HTTP Request

\n

Note lines folded for display.

\n

What do each of these headers mean? Which are required? Many are defined in the HTTP standard but others can be defined via the HTTP extension framework.

\n

Example HTTP Response

\n

Example HTTP POST Request

\n

Note lines folded for display.

\n

This is a POST request, note how the data is encoded in the request body.

\n

Example HTTP GET Request

\n

Note lines folded for display.

\n

This is the same form submitted via a GET request, here the data is encoded in request URL. Note also the If-Modified-Since header in this request, sent because my browser has just asked for the same resource.

\n

HTTP Redirect

\n

Alternately

\n

The HTTP redirect is a server response that can be used to indicate that a resource has moved to a new location. An alternate is to include the above meta tag in a page header to force a redirect from the current page.

\n

HTTP Verbs

\n
    \n
  • GET - get a resource, Idempotent
    • \n
  • POST - send some data to a resource
    • \n
  • HEAD - get headers for a resource
    • \n
  • PUT - create a new resource
    • \n
  • DELETE - delete a resource
    • \n
\n

Common HTTP Response Status Codes

\n

Some notable response codes:

\n
    \n
  • 200 OK - Request succeeded and everything went well
    • \n
  • 301 Moved Permanently - Requested resource has moved and all future requests should be made to new location
    • \n
  • 403 Forbidden - Response refused by server (even if request is valid)
    • \n
  • 404 Not Found - Server could not find requested resource (though it may be available in the future)
    • \n
  • 500 Internal Server Error - Generic error message response when server encountered an error
    • \n
\n

See also: full list of HTTP status codes

\n

Resources

\n
    \n
  • Use Live HTTP Headers in Firefox to view headers of requests that you make. Also available as a Chrome Extension.
    • \n
  • Similarly, in Google Chrome, the Resources panel in the Developer tools allows you to view the request headers and content for each request that was made when you're looking at a page.
    • \n
  • Wikipedia's entry on HTTP gives a good overview of the protocol.
    • \n
"},{"url":"/docs/articles/","relativePath":"docs/articles/index.md","relativeDir":"docs/articles","base":"index.md","name":"index","frontmatter":{"title":"Articles","weight":0,"excerpt":"my web development articles","seo":{"title":"","description":"This section is similar to a blog but is more technical in nature and time invariant with regard to content.","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Articles

\n"},{"url":"/docs/articles/how-the-web-works/","relativePath":"docs/articles/how-the-web-works.md","relativeDir":"docs/articles","base":"how-the-web-works.md","name":"how-the-web-works","frontmatter":{"title":"How The Web Works","weight":0,"excerpt":"We can start by differentiating the Internet and the World Wide Web. These are often confused because the Web is the main use that most people have for the Internet and a common web browser is called \"Internet Explorer\". However, we can properly distinguish between them. The Internet is a collection of inter-connected computers using the TCP/IP protocol to exchange information.","seo":{"title":"","description":"Perhaps the first thing to establish in our discussion of the web is what exactly it is. This chapter will look in brief overview at the core technologies that go together to make the World Wide Web.","robots":[],"extra":[]},"template":"docs"},"html":"

What is the World Wide Web?\n\n

\n

Perhaps the first thing to establish in our discussion of the web is what exactly it is. This chapter will look in brief overview at the core technologies that go together to make the World Wide Web.

\n

We can start by differentiating the Internet and the World Wide Web. These are often confused because the Web is the main use that most people have for the Internet and a common web browser is called \"Internet Explorer\". However, we can properly distinguish between them. The Internet is a collection of inter-connected computers using the TCP/IP protocol to exchange information. The World Wide Web is a particular use of the Internet to exchange HTML web pages (and other documents) using the Hypertext Transfer Protocol (HTTP).

\n

Let's look briefly at the four basic ingredients of the Web:

\n
    \n
  • TCP/IP - is a low level message protocol that is used to transfer messages between computers on the Internet.
    • \n
  • HTTP - is used by a Web Client to make a request to a Web Server and for the server to return the response.
    • \n
  • URL - is a way of writing down the address of something on the Web so that a browser can work out where to get it from.
    • \n
  • HTML - is a language for writing web pages containing text, images and other content.
    • \n
\n

Together, these four technologies allow a web client - the web browser on your computer - to fetch pages from a web server anywhere in the world that might contain links to other documents and so on. It's the links between documents that make this a Web and the Internet that allows it to be the World Wide Web.

\n

Let's look at each of these technologies in a little more detail; although we'll explore most of them a lot more throughout the rest of this book.

\n

TCP/IP and DNS

\n

TCP/IP, the Transmission Control Protocol/Internet Protocol, is the standard way of exchanging messages on the Internet - in fact it effectively defines what the Internet is: a network of computers communicating via TCP/IP. For our purposes, there's no need to have a deep understanding of the low level details of TCP/IP, though many of you will learn more about it if you study any networking topics. However there are a few higher level things that touch on how we use the Internet in the context of the World Wide Web.

\n

A Protocol in this sense is a formal standard for how two machines will talk to each other over a communications channel. It describes what messages are allowed and what they mean and how data is transferred over the network. Later, we'll look at HTTP which is a higher level protocol for web requests. TCP/IP deals with the low level exchange of data and doesn't really care what the content of that data is.

\n

The Internet is a collection of computer networks joined by physical network channels. Within an organisation, there may be a physical network based on the Ethernet standard (wired or wireless) which effectively connects all computers on the network to each other. Organisations connect to each other via DSL or cable connections. These inter-connected networks make up the Internet. The role of TCP/IP is to allow a computer within one organisation (your laptop) to establish a connection to a computer in another (a web server). Importantly, this connection is a point-to-point connection - like a private channel between the two computers, even though the data is carried by this shared network of networks.

\n

TCP/IP is a packet oriented protocol. To send a message, it is broken up into small chunks (packets) which are each addressed and sent over the network. The receiving computer intercepts these packets, notices that they are addressed to them, and re-assembles the original message. Packets can arrive out of order (or not at all) and TCP/IP defines what the two communicating computers should do in this case.

\n

Each computer on the network is assigned a unique IP address which is a 32 bit number usually expressed as four 8 bit digits separated by dots. For example 192.168.1.2 or 137.111.158.22. These numbers are used as the addresses of the packets sent around the Internet. Within an organisation, all computers will share the first part of their address; for example, all Macquarie University computers will have addresses starting with 137.111. This means that any packet sent from within Macquarie to an address in the range 137.111.x.x will find it's destination somewhere inside the organisation. However, if we send a packet to 143.119.160.16 (the NSW Government website) the network protocols need to know that this packet should be forwarded to the NSW Government network before it can be delivered. We can pretend that this all happens by magic (this isn't a networking course) and rest assured that a clever network routing algorithm will get the packets to where they need to go. As long as we know the IP address of the destination computer, we can establish a point-to-point channel and send data back and forth.

\n

Within your home you might have your own private network, often established by a wireless router that connects to your ADSL or cable service. While this router will have a proper IP address, the network it establishes in your home is a private network and will use one of two address ranges: 192.168.x.x or 10.10.x.x. Both of these are reserved for private use, so that my laptop and your printer might have the same IP address of 192.168.100.13. A trick called Network Address Translation (NAT) carried out by your router allows each of these devices to connect to the Internet through the router, even though they don't have a full IP address. Again, we don't need to worry about the details but sometimes it's useful to know how to communicate directly with devices on your own network, in which case you might start finding out about these private IP addresses.

\n

A significant issue with the success and ubiquity of the Internet is that we might run out of unique addresses. Since an IP address is a 32 bit number, that means there are only 4,294,967,296 unique addresses. If every computer, mobile phone, printer and electricity meter is to be connected to the Internet, the it's clear that more addresses will be needed. There are two responses to this. The first is that many of these devices share a single IP address (using NAT) which multiplies the number available significantly. THe second is a new standard called IPv6 (rather than IPv4 which I've described here) where addresses are 128 bits long. Most modern devices are able to use IPv6 addressing so the crisis is unlikely to hit us catastrophically.

\n

IP addresses give a unique identifier for each device but they aren't very easy to remember. We're used to giving the names of web-sites via names like www.nsw.gov.au or sales.example.com. These names are translated into numerical IP addresses via the Domain Name System (DNS) which works using a clever hierarchical algorithm. For example, to work out what sales.example.com means our local DNS server would look at the last part of the address and forward the query to a server that it knows is authoritative for all addresses ending in .com. The .com server may not know which IP address corresponds to sales.example.com so it sends the query on to the DNS server for example.com which will respond with the answer. As the result is passed back to the original DNS server, it is cached (remembered) so that it can be returned more quickly the next time it is requested.

\n

DNS allows an organisation to set up whatever names it needs and link those names to its servers. It's common to have the main web server called www.example.com but the same server could also be referred to as example.com, sales.example.com or test.example.com. We'll see later how this arrangement can be used to provide a lot of flexibility when setting up web servers.

\n

HTTP

\n

In 1991 Tim Berners-Lee invented the World Wide Web. He was building on the existing technology of the Internet that allowed computers to exchange information around the world. His invention consisted essentially of three things: the Hypertext Transfer Protocol (HTTP), the Universal Resource Locator (URL) and the Hypertext Markup Language (HTML). HTTP is the language that a web client (your browser) talks to a web server to ask for a page and get the response back. It's a protocol, just like TCP/IP, but it's a much higher level protocol and it's one that we need to understand very well as web programmers.

\n

HTTP requires that we first establish a point-to-point connection between a client (who is sending a request) and a server (who will fulfil the request if possible). This connection is usually via TCP/IP over the Internet but could also be over any other communication medium such as bluetooth. Once the connection is established, the conversation can begin.

\n

One of the important features of HTTP is that it is a simple, text based protocol. The request and response consist of a number of lines of text in a well defined format. Here is an example request that might be sent to a server:

\n

The first word in the request is always one of the defined HTTP verbs (most frequently GET, HEAD or POST, we'll explore these in more detail later). A GET request asks the server to return the given resource, in this case '/storefront.html' which is probably an HTML file stored somewhere on the server. The last part of the first line (HTTP/1.1) defines the version of the standard that we are using; there was a version 1.0 but most modern browsers will use 1.1. The remaining lines of the request include other headers that qualify the request in some way. The Host header is required and denotes the server that the request is being sent to. The Accept header defines what kinds of document we'd like in return; in this case, any kind of text document is ok. The request ends with a blank line, which is how the server knows that all headers have been received.

\n

The request is received and processed by the server and a response is sent back to the client containing the web page that was asked for. Again the format of the response is easy to understand:

\n

The first word of the response must be HTTP/1.1, the remainder of the first line contains a response code (200) and explanation (OK) in this case saying everything is fine, here's the page you asked for. The second header here defines the type of document being returned (it's an HTML page). There is then a blank line which ends the headers (as with the request) and the HTML content is then sent.

\n

A real request and response pair will have many more headers than this but their format follows this basic pattern: header lines followed by a blank line and an optional body. The point here is that HTTP is a very simple conversation between web client and server.

\n

One important feature of HTTP is that each request/response pair is independent of every other. This means that all the information about your request must be included in the request headers; the server doesn't remember anything you told it last time. This is one reason that HTTP and the web have been so successful. It is very easy to implement an HTTP server and it can be done on very small devices. This might be one of the reasons why the Web succeeded where other similar systems failed. Since the protocol is so simple, it was easy to write a web server and many people did. This meant that the web was used by many small groups to publish content, forming the groundswell that led to institutional and corporate adoption.

\n

We'll look at HTTP in more detail later, for now the take home message is:

\n
    \n
  • HTTP is a simple text based protocol
    • \n
  • The client (browser) sends a request to the server
    • \n
  • The server receives the request and returns a response
    • \n
  • The server doesn't need to remember the client - every request is independant.
    • \n
  • The simple nature of HTTP makes it easy to understand and makes writing web servers relatively easy.
    • \n
\n

Uniform Resource Locators: URL

\n

Another part of Tim Berners-Lee's invention is the Uniform Resource Locator, URL. These days, URLs are ubiquitous. We see them on advertisments, on the TV, we send them to each other in email, even reference them in books and reports. Most organisations today will have at least one top-level URL for their website and often have many connected to particular services, departments or advertising campaigns.

\n

See the URL chapter for a detaile discussion.

\n

Hypertext Markup Language: HTML

\n

HTML is the last link in the chain that makes the Web. It is a language that allows authors to write Hypertext documents that include structure and formatting instructions. Hypertext describes the idea of linking one document to another via hyperlinks so that when you activate a link, you jump to a new document. There were hypertext systems before the birth of the web (Project Xanadu, Hypercard) but HTML has been much more successful than any other standard in this space.

\n

HTML is a Markup Language which means that it provides a way of adding additional information or markup to plain text. In this case, the markup defines the structure of the document - headers, paragraphs, lists, tables - as well as the hypertext features - links and anchors. There are other markup languages, for example LaTeX is used to write scientific papers by adding markup to text (e.g. \\textbf{bold text} or \\section{A heading}). All markup languages have some way of differentiating the text in a document from the markup instructions. In HTML this is via the angle brackets which surround tag names: <tag>.

\n

HTML was invented by Tim Berners-Lee but it derives from an earlier standard called SGML (Standard Generalised Markup Language) that had been in use for some years as a language for writing technical documentation. It came out of work by IBM on their technical documentation and became an industry standard ratified by the ISO. SGML is in fact a meta-standard in that it defines a way of defining a markup language. HTML is one such markup language and can strictly be treated as such; however, since HTML is so much more common than any other SGML language, it is usually treated as a special case. So, for example, while we could use general purpose SGML authoring tools to write HTML, we generally use applications tailored to writing web pages that only understand HTML.

\n

Another related markup language is XML, the eXtensible Markup Language. XML began as an attempt to streamline the SGML standard to make it more suitable for the web. Like SGML, XML is a meta-standard that defines how markup languages can be written. There is a version of HTML defined as an XML language called XHTML but this never really took off and the standardisation work around it was stopped in 2010. Instead, XML has become widely used to describe data rather than documents and we'll look at how it is used today on the web later in this book.

"},{"url":"/docs/articles/install/","relativePath":"docs/articles/install.md","relativeDir":"docs/articles","base":"install.md","name":"install","frontmatter":{"title":"Install","excerpt":"Web-Dev-Hubis a Unibit theme created for project documentations. You can use it for your project.","seo":{"title":"Install","description":"This is the Install page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Install","keyName":"property"},{"name":"og:description","value":"This is the Install page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Install"},{"name":"twitter:description","value":"This is the Install page"}]},"template":"docs"},"html":"

Node.js can be installed in different ways. This post highlights the most common and convenient ones.

\n

Official packages for all the major platforms are available at https://nodejs.org/en/download/.

\n

One very convenient way to install Node.js is through a package manager. In this case, every operating system has its own.

\n

On macOS, Homebrew is the de-facto standard, and - once installed - allows you to install Node.js very easily, by running this command in the CLI:

\n
brew install node\n
\n

Other package managers for Linux and Windows are listed in https://nodejs.org/en/download/package-manager/

\n

nvm is a popular way to run Node.js. It allows you to easily switch the Node.js version, and install new versions to try and easily rollback if something breaks, for example.

\n

It is also very useful to test your code with old Node.js versions.

\n

See https://github.com/creationix/nvm for more information about this option.

\n

My suggestion is to use the official installer if you are just starting out and you don't use Homebrew already, otherwise, Homebrew is my favorite solution.

\n

In any case, when Node.js is installed you'll have access to the node executable program in the command line.

"},{"url":"/docs/articles/intro/","relativePath":"docs/articles/intro.md","relativeDir":"docs/articles","base":"intro.md","name":"intro","frontmatter":{"title":"Intro To Node","excerpt":"Web-Dev-Hubis a Unibit theme created for project documentations. You can use it for your project.","seo":{"title":"Intro To Node","description":"This is the Intro To Node page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Intro To Node","keyName":"property"},{"name":"og:description","value":"This is the Intro To Node page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Intro To Node"},{"name":"twitter:description","value":"This is the Intro To Node page"}]},"template":"docs"},"html":"

Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project!

\n

Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser. This allows Node.js to be very performant.

\n

A Node.js app is run in a single process, without creating a new thread for every request. Node.js provides a set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the exception rather than the norm.

\n

When Node.js performs an I/O operation, like reading from the network, accessing a database or the filesystem, instead of blocking the thread and wasting CPU cycles waiting, Node.js will resume the operations when the response comes back.

\n

This allows Node.js to handle thousands of concurrent connections with a single server without introducing the burden of managing thread concurrency, which could be a significant source of bugs.

\n

Node.js has a unique advantage because millions of frontend developers that write JavaScript for the browser are now able to write the server-side code in addition to the client-side code without the need to learn a completely different language.

\n

In Node.js the new ECMAScript standards can be used without problems, as you don't have to wait for all your users to update their browsers - you are in charge of deciding which ECMAScript version to use by changing the Node.js version, and you can also enable specific experimental features by running Node.js with flags.

\n

A Vast Number of Libraries

\n

npm with its simple structure helped the ecosystem of Node.js proliferate, and now the npm registry hosts over 1,000,000 open source packages you can freely use.

\n

An Example Node.js Application

\n

The most common example Hello World of Node.js is a web server:

\n\n\n\n

This code first includes the Node.js http module.

\n

Node.js has a fantastic standard library, including first-class support for networking.

\n

The createServer() method of http creates a new HTTP server and returns it.

\n

The server is set to listen on the specified port and host name. When the server is ready, the callback function is called, in this case informing us that the server is running.

\n

Whenever a new request is received, the request event is called, providing two objects: a request (an http.IncomingMessage object) and a response (an http.ServerResponse object).

\n

Those 2 objects are essential to handle the HTTP call.

\n

The first provides the request details. In this simple example, this is not used, but you could access the request headers and request data.

\n

The second is used to return data to the caller.

\n

In this case with:

\n
res.statusCode = 200;\n
\n

we set the statusCode property to 200, to indicate a successful response.

\n

We set the Content-Type header:

\n
res.setHeader('Content-Type', 'text/plain');\n
\n

and we close the response, adding the content as an argument to end():

\n
res.end('Hello World\\n');\n
\n

Node.js Frameworks and Tools

\n

Node.js is a low-level platform. In order to make things easy and exciting for developers, thousands of libraries were built upon Node.js by the community.

\n

Many of those established over time as popular options. Here is a non-comprehensive list of the ones worth learning:

\n
    \n
  • AdonisJs: A full-stack framework highly focused on developer ergonomics, stability, and confidence. Adonis is one of the fastest Node.js web frameworks.
    • \n
  • Express: It provides one of the most simple yet powerful ways to create a web server. Its minimalist approach, unopinionated, focused on the core features of a server, is key to its success.
    • \n
  • Fastify: A web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture. Fastify is one of the fastest Node.js web frameworks.
    • \n
  • Gatsby: A React-based, GraphQL powered, static site generator with a very rich ecosystem of plugins and starters.
    • \n
  • hapi: A rich framework for building applications and services that enables developers to focus on writing reusable application logic instead of spending time building infrastructure.
    • \n
  • koa: It is built by the same team behind Express, aims to be even simpler and smaller, building on top of years of knowledge. The new project born out of the need to create incompatible changes without disrupting the existing community.
    • \n
  • Loopback.io: Makes it easy to build modern applications that require complex integrations.
    • \n
  • Meteor: An incredibly powerful full-stack framework, powering you with an isomorphic approach to building apps with JavaScript, sharing code on the client and the server. Once an off-the-shelf tool that provided everything, now integrates with frontend libs React, Vue, and Angular. Can be used to create mobile apps as well.
    • \n
  • Micro: It provides a very lightweight server to create asynchronous HTTP microservices.
    • \n
  • NestJS: A TypeScript based progressive Node.js framework for building enterprise-grade efficient, reliable and scalable server-side applications.
    • \n
  • Next.js: React framework that gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.
    • \n
  • Nx: A toolkit for full-stack monorepo development using NestJS, Express, React, Angular, and more! Nx helps scale your development from one team building one application to many teams collaborating on multiple applications!
    • \n
  • Sapper: Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing. Offers SSR and more!
    • \n
  • Socket.io: A real-time communication engine to build network applications.
    • \n
  • Strapi: Strapi is a flexible, open-source Headless CMS that gives developers the freedom to choose their favorite tools and frameworks while also allowing editors to easily manage and distribute their content. By making the admin panel and API extensible through a plugin system, Strapi enables the world's largest companies to accelerate content delivery while building beautiful digital experiences.
    • \n
"},{"url":"/docs/articles/nextjs/","relativePath":"docs/articles/nextjs.md","relativeDir":"docs/articles","base":"nextjs.md","name":"nextjs","frontmatter":{"title":"lorem-ipsum","weight":0,"excerpt":"With some basic React and JavaScript knowledge, you’ll be on your wayNext.js is a JavaScript framework created by Zeit. It lets you build server-side rendering and static web applications using React. It’s a great tool to build your next website. It has many great features and advantages.","seo":{"title":"","description":"NextJS is a JavaScript framework. It lets you build server-side rendering and static web applications using React. It’s a great tool to build your next website. It has many great features and advantages, which can make Nextjs your first option for building your next web application.","robots":[],"extra":[]},"template":"docs"},"html":"

# Nextjs for everyone — with some basic knowledge of React

\n
\n

Excerpt

\n

With some basic React and JavaScript knowledge, you’ll be on your wayNext.js is a JavaScript framework created by Zeit. It lets you build server-side rendering and static web applications using React. It’s a great tool to build your next website. It has many great features and advantages,

\n
\n
\n

With some basic React and JavaScript knowledge, you’ll be on your way

\n

Next.js is a JavaScript framework created by Zeit. It lets you build server-side rendering and static web applications using React. It’s a great tool to build your next website. It has many great features and advantages, which can make Nextjs your first option for building your next web application.

\n

You don’t need any configuration of webpack or similar to start using Next.js. It comes with its configuration. All you need is to run npm run dev and start building your application ?.

\n

In this article, we are going to explore the great features and tricks of Next.js, and how to start building your next website with it.

\n

This post assumes that you have some basic knowledge of React and JavaScript.

\n

Here are some great websites built with Next.js:

\n\n

I even used Nextjs to build my personal website saidhayani.me — you can get the source code on GitHub here.

\n

Getting starting with Next.js

\n

To start with Next.js you need to have node.js installed in your machine and that’s all. Next.js is like any other node.js application — you need npm or Yarn to install dependencies.

\n

Let’s get started and create a Next.js project.

\n

First, we need to create a folder and give it a name of our choice. I’m gonna name it nextjs-app.

\n

You can easily do that with this command line:

\n

\n
mkdir nextjs-app\n
\n

After creating the nextjs-app folder, open it on the terminal. Run npm init to create the package.json file.

\n

Next, we have to install our dependencies.

\n

Installing Next.js

\n
    \n
  • using Yarn, type
    • \n
\n
yarn add next\n
\n
    \n
  • using npm, type:
    • \n
\n
npm i next --save\n
\n

Then we have to install React because Next.js uses React. The first line below uses Yarn for the installation.

\n
yarn add react react-dom\n
\n
// with npm\n
\n
npm i react react-dom --save\n
\n

After that you have to create two necessary folders: pages and static . Next.js won’t work without them!!

\n

\n
mkdir pages static\n
\n

You must have this structure after running these commands :

\n
nextjs-app  -pages  -static  -package.json\n
\n

And then simply you can run npm next dev and then open [http://localhost:3000/](http://localhost:3000/) in your browser.

\n

The NotFound page will show up because we don't have any page yet!

\n

\n

So let’s create a home page and an entry point index.js.

\n

\n
touch index.js home.js\n
\n

And then you can write a normal React component. As I said above, Next.js is for building React applications.

\n

Here is what our home.js looks like:

\n

\n

And here is our index.js file:

\n

\n

Next.js has a live reload feature. All you need to do is just change and save, and Next.js will compile and reload the app automatically for you.

\n

Note: Next.js is like any other server-side rendering tool we need to define the default page of our application, in our case is index.js.

\n

You will see this change in the browser after running npm next dev:

\n

\n

Congratulations! We just created a Next.js app with a few simple steps. These instructions to create a Next.js app are described in the official docs of Next.js .

\n

My alternative

\n

I usually don’t use this way. I use the create-next-app CLI instead that will do all this stuff for me in one single line.

\n
npx create-next-app my-app\n
\n

\n

You can check out the documentation here to explore more features.

\n

Create custom configs for Next.js

\n

Sometimes you might want to add some additional dependencies or packages to your Next.js app.

\n

Next.js gives you the option to customize your configuration using a next-config.js file.

\n

For example, you might want to add sass support to your app. In this case you have to use the next-sass package and you have to add it to the next-config.js file as in the example below:

\n

First, install next-sass:

\n

\n
yarn add @zeit/next-sass\n
\n

Then include it inside the next-config.js file:

\n

\n

And then you can create write your sass code and import it in your component:

\n

\n

Importing the sass file in our component:

\n

\n

And here is the result:

\n

\n

Wow, wasn’t that super easy to add sass support to out Next.js app?

\n

At this point, we just covered the installation and configuration part. Now let’s talk about the features of Next.js!

\n

The features

\n

Next.js comes with a bunch of great features like server-side rendering, routers, and lazy loading.

\n

Server-side rendering

\n

Next.js performs server-side rendering by default. This makes your application optimized for search engines. Also, you can integrate any middleware such as express.js or Hapi.js, and you can run any database such as MongoDB or MySQL.

\n

Speaking of search engine optimization, Next.js comes with a Head component that allows you to add and make dynamic meta tags. It’s my favorite feature — you can make custom and dynamic meta tags. These make your website able to be indexed by search engines like Google. Here is an example of a Head component :

\n

\n

And you can import and use theHead component in any other page:

\n

\n

Awesome!

\n

Note: With Next.js you don’t need to import React because Next.js does this for you.

\n

Generating a static website with Next.js

\n

As well as server-side rendering, you still can compile and export your application as an HTML static website and deploy it on a static website hosting like a GitHub page or netlify. You can learn more how to make a static website with Next.js here in the official docs.

\n

Routers

\n

This is another one of the great features of Next.js. When you use the create-react-app, you usually need to install react-router and create its custom configuration.

\n

Next.js comes with its own routers with zero configs. You don’t need any extra configuration of your routers. Just create your page inside the pages folder and Next.js will take care of all routing configuration.

\n

Let’s go ahead and create a custom navigation to make everything clear!

\n

To navigate between pages, Next.js has the Link method to manage the navigation.

\n

\n

Let’s create blog.js and contact.js pages:

\n

blog.js

\n

\n

And here is the contact.js page:

\n

\n

And now we must be able to navigate between those pages ?

\n

\n

Wow that so easy and super awesome.

\n

Lazy loading

\n

Lazy loading makes your application deliver a better user experience. Sometimes the page might take time to load. The user may abandon your app if the loading takes more than 30 seconds.

\n

The way to avoid this is to use some trick to indicate to the user that the page is loading, for example by displaying a spinner. Lazy loading or code splitting is one of the features that allow you to deal with, and control, slow loading so you only load the necessary code in your page.

\n

Next.js comes with its own code splitting method. It provides us a method, called dynamic, to load our component, as in the example below:

\n

\n

You can find the source code of these examples on GitHub

"},{"url":"/docs/articles/node-cli-args/","relativePath":"docs/articles/node-cli-args.md","relativeDir":"docs/articles","base":"node-cli-args.md","name":"node-cli-args","frontmatter":{"title":"where-is-npm-pack","weight":0,"excerpt":"How to find out where npm installs the packages","seo":{"title":"npm packages","description":"When you install a package using npm you can perform 2 types of installation:\na local install\na global install\n\nBy default, when you type an npm install command, like:\nthe package is installed in the current file tree, under the node_modules subfolder.\n","robots":[],"extra":[{"name":"og:description","value":"When you install a package using npm you can perform 2 types of installation:\na local install\na global install\n\nBy default, when you type an npm install command, like:\nthe package is installed in the current file tree, under the node_modules subfolder.\n","keyName":"property","relativeUrl":false}],"type":"stackbit_page_meta"},"template":"docs"},"html":"

When you install a package using npm you can perform 2 types of installation:

\n
    \n
  • a local install
    • \n
  • a global install
    • \n
\n

By default, when you type an npm install command, like:

\n

the package is installed in the current file tree, under the node_modules subfolder.

\n

As this happens, npm also adds the lodash entry in the dependencies property of the package.json file present in the current folder.

\n

A global installation is performed using the -g flag:

\n

When this happens, npm won't install the package under the local folder, but instead, it will use a global location.

\n

Where, exactly?

\n

The npm root -g command will tell you where that exact location is on your machine.

\n

On macOS or Linux this location could be /usr/local/lib/nodemodules. On Windows it could be C:\\Users\\YOU\\AppData\\Roaming\\npm\\nodemodules

\n

If you use nvm to manage Node.js versions, however, that location would differ.

\n

I for example use nvm and my packages location was shown as /Users/joe/.nvm/versions/node/v8.9.0/lib/node_modules.

"},{"url":"/docs/articles/how-search-engines-work/","relativePath":"docs/articles/how-search-engines-work.md","relativeDir":"docs/articles","base":"how-search-engines-work.md","name":"how-search-engines-work","frontmatter":{"title":"The Anatomy of a Search Engine","sections":[],"seo":{"title":"","description":"hardware performance and cost have improved dramatically to partially offset the difficulty. There are, however, several notable exceptions to this progress such as disk seek time and operating system robustness. In designing Google, we have considered both the rate of growth of the Web and technological changes. Google is designed to scale well to extremely large data sets. It makes efficient use of storage space to store the index. Its data structures are optimized for fast and efficient access (see section 4.2). Further, we expect that the cost to index and store text or HTML will eventually decline relative to the amount that will be available (see Appendix B). This will result in favorable scaling properties for centralized systems like Google.","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

The Anatomy of a Search Engine

\n
\n

Excerpt

\n

These tasks are becoming increasingly difficult as the Web grows. However,\nhardware performance and cost have improved dramatically to partially offset\nthe difficulty. There are, however, several notable exceptions to this\nprogress such as disk seek time and operating system robustness. In designing\nGoogle, we have considered both the rate of growth of the Web and technological\nchanges. Google is designed to scale well to extremely large data sets.\nIt makes efficient use of storage space to store the index. Its data structures\nare optimized for fast and efficient access (see section 4.2).\nFurther, we expect that the cost to index and store text or HTML will eventually\ndecline relative to the amount that will be available (see Appendix\nB). This will result in favorable scaling properties for centralized\nsystems like Google.

\n
\n
\n

Sergey Brin and Lawrence Page

\n

{sergey, page}@cs.stanford.edu

\n

Computer Science Department, Stanford University, Stanford, CA 94305

\n

Abstract

\n
\n
   In this paper, we present Google, a prototype of a large-scale search engine which makes heavy use of the structure present in hypertext. Google is designed to crawl and index the Web efficiently and produce much more satisfying search results than existing systems. The prototype with a full text and hyperlink database of at least 24 million pages is available at [http://google.stanford.edu/](http://google.stanford.edu/)  \n   To engineer a search engine is a challenging task. Search engines index tens to hundreds of millions of web pages involving a comparable number of distinct terms. They answer tens of millions of queries every day. Despite the importance of large-scale search engines on the web, very little academic research has been done on them. Furthermore, due to rapid advance in technology and web proliferation, creating a web search engine today is very different from three years ago. This paper provides an in-depth description of our large-scale web search engine -- the first such detailed public description we know of to date.  \n   Apart from the problems of scaling traditional search techniques to data of this magnitude, there are new technical challenges involved with using the additional information present in hypertext to produce better search results. This paper addresses this question of how to build a practical large-scale system which can exploit the additional information present in hypertext. Also we look at the problem of how to effectively deal with uncontrolled hypertext collections where anyone can publish anything they want.\n
\n

Keywords: World Wide Web, Search Engines, Information Retrieval, PageRank, Google

\n
\n

1. Introduction

\n

(Note: There are two versions of this paper -- a longer full version and a shorter printed version. The full version is available on the web and the conference CD-ROM.)
\nThe web creates new challenges for information retrieval. The amount of information on the web is growing rapidly, as well as the number of new users inexperienced in the art of web research. People are likely to surf the web using its link graph, often starting with high quality human maintained indices such as Yahoo! or with search engines. Human maintained lists cover popular topics effectively but are subjective, expensive to build and maintain, slow to improve, and cannot cover all esoteric topics. Automated search engines that rely on keyword matching usually return too many low quality matches. To make matters worse, some advertisers attempt to gain people's attention by taking measures meant to mislead automated search engines. We have built a large-scale search engine which addresses many of the problems of existing systems. It makes especially heavy use of the additional structure present in hypertext to provide much higher quality search results. We chose our system name, Google, because it is a common spelling of googol, or 10100 and fits well with our goal of building very large-scale search engines.

\n

1.1 Web Search Engines -- Scaling Up: 1994 - 2000

\n

Search engine technology has had to scale dramatically to keep up with the growth of the web. In 1994, one of the first web search engines, the World Wide Web Worm (WWWW) [McBryan 94] had an index of 110,000 web pages and web accessible documents. As of November, 1997, the top search engines claim to index from 2 million (WebCrawler) to 100 million web documents (from Search Engine Watch). It is foreseeable that by the year 2000, a comprehensive index of the Web will contain over a billion documents. At the same time, the number of queries search engines handle has grown incredibly too. In March and April 1994, the World Wide Web Worm received an average of about 1500 queries per day. In November 1997, Altavista claimed it handled roughly 20 million queries per day. With the increasing number of users on the web, and automated systems which query search engines, it is likely that top search engines will handle hundreds of millions of queries per day by the year 2000. The goal of our system is to address many of the problems, both in quality and scalability, introduced by scaling search engine technology to such extraordinary numbers.

\n

1.2. Google: Scaling with the Web

\n

Creating a search engine which scales even to today's web presents many challenges. Fast crawling technology is needed to gather the web documents and keep them up to date. Storage space must be used efficiently to store indices and, optionally, the documents themselves. The indexing system must process hundreds of gigabytes of data efficiently. Queries must be handled quickly, at a rate of hundreds to thousands per second.

\n

These tasks are becoming increasingly difficult as the Web grows. However, hardware performance and cost have improved dramatically to partially offset the difficulty. There are, however, several notable exceptions to this progress such as disk seek time and operating system robustness. In designing Google, we have considered both the rate of growth of the Web and technological changes. Google is designed to scale well to extremely large data sets. It makes efficient use of storage space to store the index. Its data structures are optimized for fast and efficient access (see section 4.2). Further, we expect that the cost to index and store text or HTML will eventually decline relative to the amount that will be available (see Appendix B). This will result in favorable scaling properties for centralized systems like Google.

\n

1.3 Design Goals

\n

1.3.1 Improved Search Quality

\n

Our main goal is to improve the quality of web search engines. In 1994, some people believed that a complete search index would make it possible to find anything easily. According to Best of the Web 1994 -- Navigators, \"The best navigation service should make it easy to find almost anything on the Web (once all the data is entered).\" However, the Web of 1997 is quite different. Anyone who has used a search engine recently, can readily testify that the completeness of the index is not the only factor in the quality of search results. \"Junk results\" often wash out any results that a user is interested in. In fact, as of November 1997, only one of the top four commercial search engines finds itself (returns its own search page in response to its name in the top ten results). One of the main causes of this problem is that the number of documents in the indices has been increasing by many orders of magnitude, but the user's ability to look at documents has not. People are still only willing to look at the first few tens of results. Because of this, as the collection size grows, we need tools that have very high precision (number of relevant documents returned, say in the top tens of results). Indeed, we want our notion of \"relevant\" to only include the very best documents since there may be tens of thousands of slightly relevant documents. This very high precision is important even at the expense of recall (the total number of relevant documents the system is able to return). There is quite a bit of recent optimism that the use of more hypertextual information can help improve search and other applications [Marchiori 97] [Spertus 97] [Weiss 96] [Kleinberg 98]. In particular, link structure [Page 98] and link text provide a lot of information for making relevance judgments and quality filtering. Google makes use of both link structure and anchor text (see Sections 2.1 and 2.2).

\n

1.3.2 Academic Search Engine Research

\n

Aside from tremendous growth, the Web has also become increasingly commercial over time. In 1993, 1.5% of web servers were on .com domains. This number grew to over 60% in 1997. At the same time, search engines have migrated from the academic domain to the commercial. Up until now most search engine development has gone on at companies with little publication of technical details. This causes search engine technology to remain largely a black art and to be advertising oriented (see Appendix A). With Google, we have a strong goal to push more development and understanding into the academic realm.

\n

Another important design goal was to build systems that reasonable numbers of people can actually use. Usage was important to us because we think some of the most interesting research will involve leveraging the vast amount of usage data that is available from modern web systems. For example, there are many tens of millions of searches performed every day. However, it is very difficult to get this data, mainly because it is considered commercially valuable.

\n

Our final design goal was to build an architecture that can support novel research activities on large-scale web data. To support novel research uses, Google stores all of the actual documents it crawls in compressed form. One of our main goals in designing Google was to set up an environment where other researchers can come in quickly, process large chunks of the web, and produce interesting results that would have been very difficult to produce otherwise. In the short time the system has been up, there have already been several papers using databases generated by Google, and many others are underway. Another goal we have is to set up a Spacelab-like environment where researchers or even students can propose and do interesting experiments on our large-scale web data.

\n

2. System Features

\n

The Google search engine has two important features that help it produce high precision results. First, it makes use of the link structure of the Web to calculate a quality ranking for each web page. This ranking is called PageRank and is described in detail in [Page 98]. Second, Google utilizes link to improve search results.

\n

2.1 PageRank: Bringing Order to the Web

\n

The citation (link) graph of the web is an important resource that has largely gone unused in existing web search engines. We have created maps containing as many as 518 million of these hyperlinks, a significant sample of the total. These maps allow rapid calculation of a web page's \"PageRank\", an objective measure of its citation importance that corresponds well with people's subjective idea of importance. Because of this correspondence, PageRank is an excellent way to prioritize the results of web keyword searches. For most popular subjects, a simple text matching search that is restricted to web page titles performs admirably when PageRank prioritizes the results (demo available at google.stanford.edu). For the type of full text searches in the main Google system, PageRank also helps a great deal.

\n

2.1.1 Description of PageRank Calculation

\n

Academic citation literature has been applied to the web, largely by counting citations or backlinks to a given page. This gives some approximation of a page's importance or quality. PageRank extends this idea by not counting links from all pages equally, and by normalizing by the number of links on a page. PageRank is defined as follows:

\n
\n

We assume page A has pages T1...Tn which point to it (i.e., are citations). The parameter d is a damping factor which can be set between 0 and 1. We usually set d to 0.85. There are more details about d in the next section. Also C(A) is defined as the number of links going out of page A. The PageRank of a page A is given as follows:

\n

PR(A) = (1-d) + d (PR(T1)/C(T1) + ... + PR(Tn)/C(Tn))

\n

Note that the PageRanks form a probability distribution over web pages, so the sum of all web pages' PageRanks will be one.

\n
\n

PageRank or PR(A) can be calculated using a simple iterative algorithm, and corresponds to the principal eigenvector of the normalized link matrix of the web. Also, a PageRank for 26 million web pages can be computed in a few hours on a medium size workstation. There are many other details which are beyond the scope of this paper.

\n

2.1.2 Intuitive Justification

\n

PageRank can be thought of as a model of user behavior. We assume there is a \"random surfer\" who is given a web page at random and keeps clicking on links, never hitting \"back\" but eventually gets bored and starts on another random page. The probability that the random surfer visits a page is its PageRank. And, the d damping factor is the probability at each page the \"random surfer\" will get bored and request another random page. One important variation is to only add the damping factor d to a single page, or a group of pages. This allows for personalization and can make it nearly impossible to deliberately mislead the system in order to get a higher ranking. We have several other extensions to PageRank, again see [Page 98].

\n

Another intuitive justification is that a page can have a high PageRank if there are many pages that point to it, or if there are some pages that point to it and have a high PageRank. Intuitively, pages that are well cited from many places around the web are worth looking at. Also, pages that have perhaps only one citation from something like the Yahoo! homepage are also generally worth looking at. If a page was not high quality, or was a broken link, it is quite likely that Yahoo's homepage would not link to it. PageRank handles both these cases and everything in between by recursively propagating weights through the link structure of the web.

\n

2.2 Anchor Text

\n

The text of links is treated in a special way in our search engine. Most search engines associate the text of a link with the page that the link is on. In addition, we associate it with the page the link points to. This has several advantages. First, anchors often provide more accurate descriptions of web pages than the pages themselves. Second, anchors may exist for documents which cannot be indexed by a text-based search engine, such as images, programs, and databases. This makes it possible to return web pages which have not actually been crawled. Note that pages that have not been crawled can cause problems, since they are never checked for validity before being returned to the user. In this case, the search engine can even return a page that never actually existed, but had hyperlinks pointing to it. However, it is possible to sort the results, so that this particular problem rarely happens.

\n

This idea of propagating anchor text to the page it refers to was implemented in the World Wide Web Worm [McBryan 94] especially because it helps search non-text information, and expands the search coverage with fewer downloaded documents. We use anchor propagation mostly because anchor text can help provide better quality results. Using anchor text efficiently is technically difficult because of the large amounts of data which must be processed. In our current crawl of 24 million pages, we had over 259 million anchors which we indexed.

\n

2.3 Other Features

\n

Aside from PageRank and the use of anchor text, Google has several other features. First, it has location information for all hits and so it makes extensive use of proximity in search. Second, Google keeps track of some visual presentation details such as font size of words. Words in a larger or bolder font are weighted higher than other words. Third, full raw HTML of pages is available in a repository.

\n

3 Related Work

\n

Search research on the web has a short and concise history. The World Wide Web Worm (WWWW) [McBryan 94] was one of the first web search engines. It was subsequently followed by several other academic search engines, many of which are now public companies. Compared to the growth of the Web and the importance of search engines there are precious few documents about recent search engines [Pinkerton 94]. According to Michael Mauldin (chief scientist, Lycos Inc) [Mauldin], \"the various services (including Lycos) closely guard the details of these databases\". However, there has been a fair amount of work on specific features of search engines. Especially well represented is work which can get results by post-processing the results of existing commercial search engines, or produce small scale \"individualized\" search engines. Finally, there has been a lot of research on information retrieval systems, especially on well controlled collections. In the next two sections, we discuss some areas where this research needs to be extended to work better on the web.

\n

3.1 Information Retrieval

\n

Work in information retrieval systems goes back many years and is well developed [Witten 94]. However, most of the research on information retrieval systems is on small well controlled homogeneous collections such as collections of scientific papers or news stories on a related topic. Indeed, the primary benchmark for information retrieval, the Text Retrieval Conference [TREC 96], uses a fairly small, well controlled collection for their benchmarks. The \"Very Large Corpus\" benchmark is only 20GB compared to the 147GB from our crawl of 24 million web pages. Things that work well on TREC often do not produce good results on the web. For example, the standard vector space model tries to return the document that most closely approximates the query, given that both query and document are vectors defined by their word occurrence. On the web, this strategy often returns very short documents that are the query plus a few words. For example, we have seen a major search engine return a page containing only \"Bill Clinton Sucks\" and picture from a \"Bill Clinton\" query. Some argue that on the web, users should specify more accurately what they want and add more words to their query. We disagree vehemently with this position. If a user issues a query like \"Bill Clinton\" they should get reasonable results since there is a enormous amount of high quality information available on this topic. Given examples like these, we believe that the standard information retrieval work needs to be extended to deal effectively with the web.

\n

3.2 Differences Between the Web and Well Controlled Collections

\n

The web is a vast collection of completely uncontrolled heterogeneous documents. Documents on the web have extreme variation internal to the documents, and also in the external meta information that might be available. For example, documents differ internally in their language (both human and programming), vocabulary (email addresses, links, zip codes, phone numbers, product numbers), type or format (text, HTML, PDF, images, sounds), and may even be machine generated (log files or output from a database). On the other hand, we define external meta information as information that can be inferred about a document, but is not contained within it. Examples of external meta information include things like reputation of the source, update frequency, quality, popularity or usage, and citations. Not only are the possible sources of external meta information varied, but the things that are being measured vary many orders of magnitude as well. For example, compare the usage information from a major homepage, like Yahoo's which currently receives millions of page views every day with an obscure historical article which might receive one view every ten years. Clearly, these two items must be treated very differently by a search engine.

\n

Another big difference between the web and traditional well controlled collections is that there is virtually no control over what people can put on the web. Couple this flexibility to publish anything with the enormous influence of search engines to route traffic and companies which deliberately manipulating search engines for profit become a serious problem. This problem that has not been addressed in traditional closed information retrieval systems. Also, it is interesting to note that metadata efforts have largely failed with web search engines, because any text on the page which is not directly represented to the user is abused to manipulate search engines. There are even numerous companies which specialize in manipulating search engines for profit.

\n

4 System Anatomy

\n

First, we will provide a high level discussion of the architecture. Then, there is some in-depth descriptions of important data structures. Finally, the major applications: crawling, indexing, and searching will be examined in depth.

\n

\n

Figure 1. High Level Google Architecture

\n

4.1 Google Architecture Overview

\n

In this section, we will give a high level overview of how the whole system works as pictured in Figure 1. Further sections will discuss the applications and data structures not mentioned in this section. Most of Google is implemented in C or C++ for efficiency and can run in either Solaris or Linux.

\n

In Google, the web crawling (downloading of web pages) is done by several distributed crawlers. There is a URLserver that sends lists of URLs to be fetched to the crawlers. The web pages that are fetched are then sent to the storeserver. The storeserver then compresses and stores the web pages into a repository. Every web page has an associated ID number called a docID which is assigned whenever a new URL is parsed out of a web page. The indexing function is performed by the indexer and the sorter. The indexer performs a number of functions. It reads the repository, uncompresses the documents, and parses them. Each document is converted into a set of word occurrences called hits. The hits record the word, position in document, an approximation of font size, and capitalization. The indexer distributes these hits into a set of \"barrels\", creating a partially sorted forward index. The indexer performs another important function. It parses out all the links in every web page and stores important information about them in an anchors file. This file contains enough information to determine where each link points from and to, and the text of the link.

\n

The URLresolver reads the anchors file and converts relative URLs into absolute URLs and in turn into docIDs. It puts the anchor text into the forward index, associated with the docID that the anchor points to. It also generates a database of links which are pairs of docIDs. The links database is used to compute PageRanks for all the documents.

\n

The sorter takes the barrels, which are sorted by docID (this is a simplification, see Section 4.2.5), and resorts them by wordID to generate the inverted index. This is done in place so that little temporary space is needed for this operation. The sorter also produces a list of wordIDs and offsets into the inverted index. A program called DumpLexicon takes this list together with the lexicon produced by the indexer and generates a new lexicon to be used by the searcher. The searcher is run by a web server and uses the lexicon built by DumpLexicon together with the inverted index and the PageRanks to answer queries.

\n

4.2 Major Data Structures

\n

Google's data structures are optimized so that a large document collection can be crawled, indexed, and searched with little cost. Although, CPUs and bulk input output rates have improved dramatically over the years, a disk seek still requires about 10 ms to complete. Google is designed to avoid disk seeks whenever possible, and this has had a considerable influence on the design of the data structures.

\n

4.2.1 BigFiles

\n

BigFiles are virtual files spanning multiple file systems and are addressable by 64 bit integers. The allocation among multiple file systems is handled automatically. The BigFiles package also handles allocation and deallocation of file descriptors, since the operating systems do not provide enough for our needs. BigFiles also support rudimentary compression options.

\n

4.2.2 Repository

\n

\n

Figure 2. Repository Data Structure

\n

The repository contains the full HTML of every web page. Each page is compressed using zlib (see RFC1950). The choice of compression technique is a tradeoff between speed and compression ratio. We chose zlib's speed over a significant improvement in compression offered by bzip. The compression rate of bzip was approximately 4 to 1 on the repository as compared to zlib's 3 to 1 compression. In the repository, the documents are stored one after the other and are prefixed by docID, length, and URL as can be seen in Figure 2. The repository requires no other data structures to be used in order to access it. This helps with data consistency and makes development much easier; we can rebuild all the other data structures from only the repository and a file which lists crawler errors.

\n

4.2.3 Document Index

\n

The document index keeps information about each document. It is a fixed width ISAM (Index sequential access mode) index, ordered by docID. The information stored in each entry includes the current document status, a pointer into the repository, a document checksum, and various statistics. If the document has been crawled, it also contains a pointer into a variable width file called docinfo which contains its URL and title. Otherwise the pointer points into the URLlist which contains just the URL. This design decision was driven by the desire to have a reasonably compact data structure, and the ability to fetch a record in one disk seek during a search

\n

Additionally, there is a file which is used to convert URLs into docIDs. It is a list of URL checksums with their corresponding docIDs and is sorted by checksum. In order to find the docID of a particular URL, the URL's checksum is computed and a binary search is performed on the checksums file to find its docID. URLs may be converted into docIDs in batch by doing a merge with this file. This is the technique the URLresolver uses to turn URLs into docIDs. This batch mode of update is crucial because otherwise we must perform one seek for every link which assuming one disk would take more than a month for our 322 million link dataset.

\n

4.2.4 Lexicon

\n

The lexicon has several different forms. One important change from earlier systems is that the lexicon can fit in memory for a reasonable price. In the current implementation we can keep the lexicon in memory on a machine with 256 MB of main memory. The current lexicon contains 14 million words (though some rare words were not added to the lexicon). It is implemented in two parts -- a list of the words (concatenated together but separated by nulls) and a hash table of pointers. For various functions, the list of words has some auxiliary information which is beyond the scope of this paper to explain fully.

\n

4.2.5 Hit Lists

\n

A hit list corresponds to a list of occurrences of a particular word in a particular document including position, font, and capitalization information. Hit lists account for most of the space used in both the forward and the inverted indices. Because of this, it is important to represent them as efficiently as possible. We considered several alternatives for encoding position, font, and capitalization -- simple encoding (a triple of integers), a compact encoding (a hand optimized allocation of bits), and Huffman coding. In the end we chose a hand optimized compact encoding since it required far less space than the simple encoding and far less bit manipulation than Huffman coding. The details of the hits are shown in Figure 3.

\n

Our compact encoding uses two bytes for every hit. There are two types of hits: fancy hits and plain hits. Fancy hits include hits occurring in a URL, title, anchor text, or meta tag. Plain hits include everything else. A plain hit consists of a capitalization bit, font size, and 12 bits of word position in a document (all positions higher than 4095 are labeled 4096). Font size is represented relative to the rest of the document using three bits (only 7 values are actually used because 111 is the flag that signals a fancy hit). A fancy hit consists of a capitalization bit, the font size set to 7 to indicate it is a fancy hit, 4 bits to encode the type of fancy hit, and 8 bits of position. For anchor hits, the 8 bits of position are split into 4 bits for position in anchor and 4 bits for a hash of the docID the anchor occurs in. This gives us some limited phrase searching as long as there are not that many anchors for a particular word. We expect to update the way that anchor hits are stored to allow for greater resolution in the position and docIDhash fields. We use font size relative to the rest of the document because when searching, you do not want to rank otherwise identical documents differently just because one of the documents is in a larger font.

\n

\n

Figure 3. Forward and Reverse Indexes and the Lexicon

\n

The length of a hit list is stored before the hits themselves. To save space, the length of the hit list is combined with the wordID in the forward index and the docID in the inverted index. This limits it to 8 and 5 bits respectively (there are some tricks which allow 8 bits to be borrowed from the wordID). If the length is longer than would fit in that many bits, an escape code is used in those bits, and the next two bytes contain the actual length.

\n

4.2.6 Forward Index

\n

The forward index is actually already partially sorted. It is stored in a number of barrels (we used 64). Each barrel holds a range of wordID's. If a document contains words that fall into a particular barrel, the docID is recorded into the barrel, followed by a list of wordID's with hitlists which correspond to those words. This scheme requires slightly more storage because of duplicated docIDs but the difference is very small for a reasonable number of buckets and saves considerable time and coding complexity in the final indexing phase done by the sorter. Furthermore, instead of storing actual wordID's, we store each wordID as a relative difference from the minimum wordID that falls into the barrel the wordID is in. This way, we can use just 24 bits for the wordID's in the unsorted barrels, leaving 8 bits for the hit list length.

\n

4.2.7 Inverted Index

\n

The inverted index consists of the same barrels as the forward index, except that they have been processed by the sorter. For every valid wordID, the lexicon contains a pointer into the barrel that wordID falls into. It points to a doclist of docID's together with their corresponding hit lists. This doclist represents all the occurrences of that word in all documents.

\n

An important issue is in what order the docID's should appear in the doclist. One simple solution is to store them sorted by docID. This allows for quick merging of different doclists for multiple word queries. Another option is to store them sorted by a ranking of the occurrence of the word in each document. This makes answering one word queries trivial and makes it likely that the answers to multiple word queries are near the start. However, merging is much more difficult. Also, this makes development much more difficult in that a change to the ranking function requires a rebuild of the index. We chose a compromise between these options, keeping two sets of inverted barrels -- one set for hit lists which include title or anchor hits and another set for all hit lists. This way, we check the first set of barrels first and if there are not enough matches within those barrels we check the larger ones.

\n

4.3 Crawling the Web

\n

Running a web crawler is a challenging task. There are tricky performance and reliability issues and even more importantly, there are social issues. Crawling is the most fragile application since it involves interacting with hundreds of thousands of web servers and various name servers which are all beyond the control of the system.

\n

In order to scale to hundreds of millions of web pages, Google has a fast distributed crawling system. A single URLserver serves lists of URLs to a number of crawlers (we typically ran about 3). Both the URLserver and the crawlers are implemented in Python. Each crawler keeps roughly 300 connections open at once. This is necessary to retrieve web pages at a fast enough pace. At peak speeds, the system can crawl over 100 web pages per second using four crawlers. This amounts to roughly 600K per second of data. A major performance stress is DNS lookup. Each crawler maintains a its own DNS cache so it does not need to do a DNS lookup before crawling each document. Each of the hundreds of connections can be in a number of different states: looking up DNS, connecting to host, sending request, and receiving response. These factors make the crawler a complex component of the system. It uses asynchronous IO to manage events, and a number of queues to move page fetches from state to state.

\n

It turns out that running a crawler which connects to more than half a million servers, and generates tens of millions of log entries generates a fair amount of email and phone calls. Because of the vast number of people coming on line, there are always those who do not know what a crawler is, because this is the first one they have seen. Almost daily, we receive an email something like, \"Wow, you looked at a lot of pages from my web site. How did you like it?\" There are also some people who do not know about the robots exclusion protocol, and think their page should be protected from indexing by a statement like, \"This page is copyrighted and should not be indexed\", which needless to say is difficult for web crawlers to understand. Also, because of the huge amount of data involved, unexpected things will happen. For example, our system tried to crawl an online game. This resulted in lots of garbage messages in the middle of their game! It turns out this was an easy problem to fix. But this problem had not come up until we had downloaded tens of millions of pages. Because of the immense variation in web pages and servers, it is virtually impossible to test a crawler without running it on large part of the Internet. Invariably, there are hundreds of obscure problems which may only occur on one page out of the whole web and cause the crawler to crash, or worse, cause unpredictable or incorrect behavior. Systems which access large parts of the Internet need to be designed to be very robust and carefully tested. Since large complex systems such as crawlers will invariably cause problems, there needs to be significant resources devoted to reading the email and solving these problems as they come up.

\n

4.4 Indexing the Web

\n
    \n
  • Parsing -- Any parser which is designed to run on the entire Web must handle a huge array of possible errors. These range from typos in HTML tags to kilobytes of zeros in the middle of a tag, non-ASCII characters, HTML tags nested hundreds deep, and a great variety of other errors that challenge anyone's imagination to come up with equally creative ones. For maximum speed, instead of using YACC to generate a CFG parser, we use flex to generate a lexical analyzer which we outfit with its own stack. Developing this parser which runs at a reasonable speed and is very robust involved a fair amount of work.
    • \n
  • Indexing Documents into Barrels -- After each document is parsed, it is encoded into a number of barrels. Every word is converted into a wordID by using an in-memory hash table -- the lexicon. New additions to the lexicon hash table are logged to a file. Once the words are converted into wordID's, their occurrences in the current document are translated into hit lists and are written into the forward barrels. The main difficulty with parallelization of the indexing phase is that the lexicon needs to be shared. Instead of sharing the lexicon, we took the approach of writing a log of all the extra words that were not in a base lexicon, which we fixed at 14 million words. That way multiple indexers can run in parallel and then the small log file of extra words can be processed by one final indexer.
    • \n
  • Sorting -- In order to generate the inverted index, the sorter takes each of the forward barrels and sorts it by wordID to produce an inverted barrel for title and anchor hits and a full text inverted barrel. This process happens one barrel at a time, thus requiring little temporary storage. Also, we parallelize the sorting phase to use as many machines as we have simply by running multiple sorters, which can process different buckets at the same time. Since the barrels don't fit into main memory, the sorter further subdivides them into baskets which do fit into memory based on wordID and docID. Then the sorter, loads each basket into memory, sorts it and writes its contents into the short inverted barrel and the full inverted barrel.
    • \n
\n

4.5 Searching

\n

The goal of searching is to provide quality search results efficiently. Many of the large commercial search engines seemed to have made great progress in terms of efficiency. Therefore, we have focused more on quality of search in our research, although we believe our solutions are scalable to commercial volumes with a bit more effort. The google query evaluation process is show in Figure 4.

\n
    \n
  1. Parse the query.
    2. \n
  2. Convert words into wordIDs.
    3. \n
  3. Seek to the start of the doclist in the short barrel for every word.
    4. \n
  4. Scan through the doclists until there is a document that matches all the search terms.
    5. \n
  5. Compute the rank of that document for the query.
    6. \n
  6. If we are in the short barrels and at the end of any doclist, seek to the start of the doclist in the full barrel for every word and go to step 4.
    7. \n
  7. If we are not at the end of any doclist go to step 4.
    8. \n
\n

Sort the documents that have matched by rank and return the top k.

\n

Figure 4. Google Query Evaluation

\n

To put a limit on response time, once a certain number (currently 40,000) of matching documents are found, the searcher automatically goes to step 8 in Figure 4. This means that it is possible that sub-optimal results would be returned. We are currently investigating other ways to solve this problem. In the past, we sorted the hits according to PageRank, which seemed to improve the situation.

\n

4.5.1 The Ranking System

\n

Google maintains much more information about web documents than typical search engines. Every hitlist includes position, font, and capitalization information. Additionally, we factor in hits from anchor text and the PageRank of the document. Combining all of this information into a rank is difficult. We designed our ranking function so that no particular factor can have too much influence. First, consider the simplest case -- a single word query. In order to rank a document with a single word query, Google looks at that document's hit list for that word. Google considers each hit to be one of several different types (title, anchor, URL, plain text large font, plain text small font, ...), each of which has its own type-weight. The type-weights make up a vector indexed by type. Google counts the number of hits of each type in the hit list. Then every count is converted into a count-weight. Count-weights increase linearly with counts at first but quickly taper off so that more than a certain count will not help. We take the dot product of the vector of count-weights with the vector of type-weights to compute an IR score for the document. Finally, the IR score is combined with PageRank to give a final rank to the document.

\n

For a multi-word search, the situation is more complicated. Now multiple hit lists must be scanned through at once so that hits occurring close together in a document are weighted higher than hits occurring far apart. The hits from the multiple hit lists are matched up so that nearby hits are matched together. For every matched set of hits, a proximity is computed. The proximity is based on how far apart the hits are in the document (or anchor) but is classified into 10 different value \"bins\" ranging from a phrase match to \"not even close\". Counts are computed not only for every type of hit but for every type and proximity. Every type and proximity pair has a type-prox-weight. The counts are converted into count-weights and we take the dot product of the count-weights and the type-prox-weights to compute an IR score. All of these numbers and matrices can all be displayed with the search results using a special debug mode. These displays have been very helpful in developing the ranking system.

\n

4.5.2 Feedback

\n

The ranking function has many parameters like the type-weights and the type-prox-weights. Figuring out the right values for these parameters is something of a black art. In order to do this, we have a user feedback mechanism in the search engine. A trusted user may optionally evaluate all of the results that are returned. This feedback is saved. Then when we modify the ranking function, we can see the impact of this change on all previous searches which were ranked. Although far from perfect, this gives us some idea of how a change in the ranking function affects the search results.

\n

5 Results and Performance

\n

The most important measure of a search engine is the quality of its search results. While a complete user evaluation is beyond the scope of this paper, our own experience with Google has shown it to produce better results than the major commercial search engines for most searches. As an example which illustrates the use of PageRank, anchor text, and proximity, Figure 4 shows Google's results for a search on \"bill clinton\". These results demonstrates some of Google's features. The results are clustered by server. This helps considerably when sifting through result sets. A number of results are from the whitehouse.gov domain which is what one may reasonably expect from such a search. Currently, most major commercial search engines do not return any results from whitehouse.gov, much less the right ones. Notice that there is no title for the first result. This is because it was not crawled. Instead, Google relied on anchor text to determine this was a good answer to the query. Similarly, the fifth result is an email address which, of course, is not crawlable. It is also a result of anchor text.

\n

All of the results are reasonably high quality pages and, at last check, none were broken links. This is largely because they all have high PageRank. The PageRanks are the percentages in red along with bar graphs. Finally, there are no results about a Bill other than Clinton or about a Clinton other than Bill. This is because we place heavy importance on the proximity of word occurrences. Of course a true test of the quality of a search engine would involve an extensive user study or results analysis which we do not have room for here. Instead, we invite the reader to try Google for themselves at http://google.stanford.edu.

\n

5.1 Storage Requirements

\n

Aside from search quality, Google is designed to scale cost effectively to the size of the Web as it grows. One aspect of this is to use storage efficiently. Table 1 has a breakdown of some statistics and storage requirements of Google. Due to compression the total size of the repository is about 53 GB, just over one third of the total data it stores. At current disk prices this makes the repository a relatively cheap source of useful data. More importantly, the total of all the data used by the search engine requires a comparable amount of storage, about 55 GB. Furthermore, most queries can be answered using just the short inverted index. With better encoding and compression of the Document Index, a high quality web search engine may fit onto a 7GB drive of a new PC.

\n

Storage Statistics

\n

Total Size of Fetched Pages

\n

147.8 GB

\n

Compressed Repository

\n

53.5 GB

\n

Short Inverted Index

\n

4.1 GB

\n

Full Inverted Index

\n

37.2 GB

\n

Lexicon

\n

293 MB

\n

Temporary Anchor Data
\n(not in total)

\n

6.6 GB

\n

Document Index Incl.
\nVariable Width Data

\n

9.7 GB

\n

Links Database

\n

3.9 GB

\n

Total Without Repository

\n

55.2 GB

\n

Total With Repository

\n

108.7 GB

\n

Web Page Statistics

\n

Number of Web Pages Fetched

\n

24 million

\n

Number of Urls Seen

\n

76.5 million

\n

Number of Email Addresses

\n

1.7 million

\n

Number of 404's

\n

1.6 million

\n

Table 1. Statistics

\n

5.2 System Performance

\n

It is important for a search engine to crawl and index efficiently. This way information can be kept up to date and major changes to the system can be tested relatively quickly. For Google, the major operations are Crawling, Indexing, and Sorting. It is difficult to measure how long crawling took overall because disks filled up, name servers crashed, or any number of other problems which stopped the system. In total it took roughly 9 days to download the 26 million pages (including errors). However, once the system was running smoothly, it ran much faster, downloading the last 11 million pages in just 63 hours, averaging just over 4 million pages per day or 48.5 pages per second. We ran the indexer and the crawler simultaneously. The indexer ran just faster than the crawlers. This is largely because we spent just enough time optimizing the indexer so that it would not be a bottleneck. These optimizations included bulk updates to the document index and placement of critical data structures on the local disk. The indexer runs at roughly 54 pages per second. The sorters can be run completely in parallel; using four machines, the whole process of sorting takes about 24 hours.

\n

5.3 Search Performance

\n

Improving the performance of search was not the major focus of our research up to this point. The current version of Google answers most queries in between 1 and 10 seconds. This time is mostly dominated by disk IO over NFS (since disks are spread over a number of machines). Furthermore, Google does not have any optimizations such as query caching, subindices on common terms, and other common optimizations. We intend to speed up Google considerably through distribution and hardware, software, and algorithmic improvements. Our target is to be able to handle several hundred queries per second. Table 2 has some sample query times from the current version of Google. They are repeated to show the speedups resulting from cached IO.

\n

Initial Query

\n

Same Query Repeated (IO mostly cached)

\n

Query

\n

CPU Time(s)

\n

Total Time(s)

\n

CPU Time(s)

\n

Total Time(s)

\n

al gore

\n

0.09

\n

2.13

\n

0.06

\n

0.06

\n

vice president

\n

1.77

\n

3.84

\n

1.66

\n

1.80

\n

hard disks

\n

0.25

\n

4.86

\n

0.20

\n

0.24

\n

search engines

\n

1.31

\n

9.63

\n

1.16

\n

1.16

\n

Table 2. Search Times

\n

6 Conclusions

\n

Google is designed to be a scalable search engine. The primary goal is to provide high quality search results over a rapidly growing World Wide Web. Google employs a number of techniques to improve search quality including page rank, anchor text, and proximity information. Furthermore, Google is a complete architecture for gathering web pages, indexing them, and performing search queries over them.

\n

6.1 Future Work

\n

A large-scale web search engine is a complex system and much remains to be done. Our immediate goals are to improve search efficiency and to scale to approximately 100 million web pages. Some simple improvements to efficiency include query caching, smart disk allocation, and subindices. Another area which requires much research is updates. We must have smart algorithms to decide what old web pages should be recrawled and what new ones should be crawled. Work toward this goal has been done in [Cho 98]. One promising area of research is using proxy caches to build search databases, since they are demand driven. We are planning to add simple features supported by commercial search engines like boolean operators, negation, and stemming. However, other features are just starting to be explored such as relevance feedback and clustering (Google currently supports a simple hostname based clustering). We also plan to support user context (like the user's location), and result summarization. We are also working to extend the use of link structure and link text. Simple experiments indicate PageRank can be personalized by increasing the weight of a user's home page or bookmarks. As for link text, we are experimenting with using text surrounding links in addition to the link text itself. A Web search engine is a very rich environment for research ideas. We have far too many to list here so we do not expect this Future Work section to become much shorter in the near future.

\n

6.2 High Quality Search

\n

The biggest problem facing users of web search engines today is the quality of the results they get back. While the results are often amusing and expand users' horizons, they are often frustrating and consume precious time. For example, the top result for a search for \"Bill Clinton\" on one of the most popular commercial search engines was the Bill Clinton Joke of the Day: April 14, 1997. Google is designed to provide higher quality search so as the Web continues to grow rapidly, information can be found easily. In order to accomplish this Google makes heavy use of hypertextual information consisting of link structure and link (anchor) text. Google also uses proximity and font information. While evaluation of a search engine is difficult, we have subjectively found that Google returns higher quality search results than current commercial search engines. The analysis of link structure via PageRank allows Google to evaluate the quality of web pages. The use of link text as a description of what the link points to helps the search engine return relevant (and to some degree high quality) results. Finally, the use of proximity information helps increase relevance a great deal for many queries.

\n

6.3 Scalable Architecture

\n

Aside from the quality of search, Google is designed to scale. It must be efficient in both space and time, and constant factors are very important when dealing with the entire Web. In implementing Google, we have seen bottlenecks in CPU, memory access, memory capacity, disk seeks, disk throughput, disk capacity, and network IO. Google has evolved to overcome a number of these bottlenecks during various operations. Google's major data structures make efficient use of available storage space. Furthermore, the crawling, indexing, and sorting operations are efficient enough to be able to build an index of a substantial portion of the web -- 24 million pages, in less than one week. We expect to be able to build an index of 100 million pages in less than a month.

\n

6.4 A Research Tool

\n

In addition to being a high quality search engine, Google is a research tool. The data Google has collected has already resulted in many other papers submitted to conferences and many more on the way. Recent research such as [Abiteboul 97] has shown a number of limitations to queries about the Web that may be answered without having the Web available locally. This means that Google (or a similar system) is not only a valuable research tool but a necessary one for a wide range of applications. We hope Google will be a resource for searchers and researchers all around the world and will spark the next generation of search engine technology.

"},{"url":"/docs/articles/node-env-variables/","relativePath":"docs/articles/node-env-variables.md","relativeDir":"docs/articles","base":"node-env-variables.md","name":"node-env-variables","frontmatter":{"title":"Node Export Module","weight":0,"excerpt":"How to use the module.exports API to expose data to other files in your application, or to other applications as well","seo":{"title":"module.exports API ","description":"When you want to import something you use\n\nconst library = require('./library');","robots":[],"extra":[{"name":"og:image","value":"images/cool-comet.png","keyName":"property","relativeUrl":true}],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Node.js has a built-in module system.

\n

A Node.js file can import functionality exposed by other Node.js files.

\n

When you want to import something you use

\n

to import the functionality exposed in the library.js file that resides in the current file folder.

\n

In this file, functionality must be exposed before it can be imported by other files.

\n

Any other object or variable defined in the file by default is private and not exposed to the outer world.

\n

This is what the module.exports API offered by the module system allows us to do.

\n

When you assign an object or a function as a new exports property, that is the thing that's being exposed, and as such, it can be imported in other parts of your app, or in other apps as well.

\n

You can do so in 2 ways.

\n

The first is to assign an object to module.exports, which is an object provided out of the box by the module system, and this will make your file export just that object:

\n

The second way is to add the exported object as a property of exports. This way allows you to export multiple objects, functions or data:

\n

or directly

\n

And in the other file, you'll use it by referencing a property of your import:

\n

or

\n

What's the difference between module.exports and exports?

\n

The first exposes the object it points to. The latter exposes the properties of the object it points to.

"},{"url":"/docs/articles/node-package-manager/","relativePath":"docs/articles/node-package-manager.md","relativeDir":"docs/articles","base":"node-package-manager.md","name":"node-package-manager","frontmatter":{"title":"Sorting Algorithms","weight":0,"excerpt":"Sorting Algorithms","seo":{"title":"","description":"","robots":[],"extra":[{"name":"og:title","value":"Sorting Algorithms","keyName":"property","relativeUrl":false},{"name":"og:description","value":"We are creating the same number of variables with an exact size, independent of our input. No new arrays are created.","keyName":"property","relativeUrl":false},{"name":"og:type","value":"website","keyName":"property","relativeUrl":false},{"name":"twitter:image","value":"images/Classical-2D-floorplanning-data-structures-left-and-their-3D.png","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"sorting algos","keyName":"name","relativeUrl":false},{"name":"og:image","value":"images/image (9).png","keyName":"property","relativeUrl":true}],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Sorting Algorithms

\n

Sorting Algorithms

\n
    \n
  1. Explain the complexity of and write a function that performs bubble sort on an array of numbers.
    2. \n
  2. \n

    Time Complexity: O(n^2)

    \n
      \n
    • In our worst case, our input is in the opposite order. We have to perform n swaps and loop through our input n times because a swap is made each time.
      • \n
    \n
    3. \n
  3. \n

    Space Complexity: O(1)

    \n
      \n
    • We are creating the same number of variables with an exact size, independent of our input. No new arrays are created.
      • \n
    \n
    4. \n
  4. Code example for bubbleSort:
    5. \n
\n
function bubbleSort(array) {\n    // We could have also had a 'sorted = false' flag and flipped our logic below\n    let swapped = true;\n\n    while (swapped) {\n        swapped = false;\n\n        for (let i = 0; i < array.length - 1; i++) {\n            if (array[i] > array[i + 1]) {\n                let temp = array[i];\n                array[i] = array[i + 1];\n                array[i + 1] = temp;\n                // The above three lines could also be in a helper swap function\n                // swap(array, i, i+1);\n                swapped = true;\n            }\n        }\n    }\n\n    return array;\n}\n
\n
    \n
  1. Explain the complexity of and write a function that performs selection sort on an array of numbers.
    2. \n
  2. \n

    Time Complexity: O(n^2)

    \n
      \n
    • Our nested loop structure is dependent on the size of our input.
      • \n
    • The outer loop always occurs n times.
      • \n
    • For each of those iterations, we have another loop that runs (n - i) times. This just means that the inner loop runs one less time each iteration, but this averages out to (n/2).
      • \n
    • Our nested structure is then T(n * n/2) = O(n^2)
      • \n
    \n
    3. \n
  3. \n

    Space Complexity: O(1)

    \n
      \n
    • We are creating the same number of variables with an exact size, independent of our input. No new arrays are created.
      • \n
    \n
    4. \n
  4. Code example for selectSort:
    5. \n
\n
function selectionSort(arr) {\n    for (let i = 0; i < arr.length; i++) {\n        let minIndex = i;\n\n        for (let j = i + 1; j < arr.length; j++) {\n            if (arr[minIndex] > arr[j]) {\n                minIndex = j;\n            }\n        }\n\n        let temp = arr[i];\n        arr[i] = arr[minIndex];\n        arr[minIndex] = temp;\n        // The above three lines could also be in a helper swap function\n        // swap(arr, i, minIndex);\n    }\n    return arr;\n}\n
\n
    \n
  1. Explain the complexity of and write a function that performs insertion sort on an array of numbers.
    2. \n
  2. \n

    Time Complexity: O(n^2)

    \n
      \n
    • Our nested loop structure is dependent on the size of our input.
      • \n
    • The outer loop always occurs n times.
      • \n
    • For each of those iterations, we have another loop that runs a maximum of (i - 1) times. This just means that the inner loop runs one more time each iteration, but this averages out to (n/2).
      • \n
    • Our nested structure is then T(n * n/2) = O(n^2)
      • \n
    \n
    3. \n
  3. \n

    Space Complexity: O(1)

    \n
      \n
    • We are creating the same number of variables with an exact size, independent of our input. No new arrays are created.
      • \n
    \n
    4. \n
  4. Code example for insertionSort:
    5. \n
\n
function insertionSort(arr) {\n    for (let i = 1; i < arr.length; i++) {\n        let currElement = arr[i];\n        for (var j = i - 1; j >= 0 && currElement < arr[j]; j--) {\n            arr[j + 1] = arr[j];\n        }\n        arr[j + 1] = currElement;\n    }\n    return arr;\n}\n
\n
    \n
  1. Explain the complexity of and write a function that performs merge sort on an array of numbers.
    2. \n
  2. \n

    Time Complexity: O(n log n)

    \n
      \n
    • Our mergeSort function divides our input in half at each step, recursively calling itself with smaller and smaller input. This results in log n stack frames.
      • \n
    • On each stack frame, our worst case scenario is having to make n comparisons in our merge function in order to determine which element should come next in our sorted array.
      • \n
    • Since we have log n stack frames and n operations on each frame, we end up with an O(n log n) time complexity
      • \n
    \n
    3. \n
  3. \n

    Space Complexity: O(n)

    \n
      \n
    • We are ultimately creating n subarrays, making our space complexity linear to our input size.
      • \n
    \n
    4. \n
  4. Code example for mergeSort:
    5. \n
\n
// The merge function is what is combining our sorted sub-arrays\nfunction merge(array1, array2) {\n    let merged = [];\n\n    // keep running while either array still contains elements\n    while (array1.length || array2.length) {\n        // if array1 is nonempty, take its the first element as ele1\n        // otherwise array1 is empty, so take Infinity as ele1\n        let ele1 = array1.length ? array1[0] : Infinity;\n\n        // do the same for array2, ele2\n        let ele2 = array2.length ? array2[0] : Infinity;\n\n        let next;\n        // remove the smaller of the eles from it's array\n        if (ele1 < ele2) {\n            next = array1.shift();\n        } else {\n            next = array2.shift();\n        }\n\n        // and add that ele to the new array\n        merged.push(next);\n    }\n\n    return merged;\n}\n\n// The mergeSort function breaks apart our input into smaller sub-arrays until we have an input of length <= 1, which is inherently sorted.\n// Once we have a left and right subarray that's sorted, we can merge them together to get our sorted result of this sub-problem, passing the sorted version back up the call stack.\nfunction mergeSort(array) {\n    if (array.length <= 1) {\n        return array;\n    }\n\n    let midIdx = Math.floor(array.length / 2);\n    let leftHalf = array.slice(0, midIdx);\n    let rightHalf = array.slice(midIdx);\n\n    let sortedLeft = mergeSort(leftHalf);\n    let sortedRight = mergeSort(rightHalf);\n\n    return merge(sortedLeft, sortedRight);\n}\n
\n
    \n
  1. Explain the complexity of and write a function that performs quick sort on an array of numbers.
    2. \n
  2. \n

    Time Complexity: Average O(n log n), Worst O(n^2)

    \n
      \n
    • In our worst case, the pivot that we select results in every element going into either the left or right array. If this happens we end up making n recursive calls to quickSort, with n comparisons at each call.
      • \n
    • In our average case, we pick something that more evenly splits the arrays, resulting in approximately log n recursive calls and an overall complexity of O(n log n).
      • \n
    • Quick sort is unique in that the worst case is so exceedingly rare that it is often considered an O(n log n) complexity, even though this is not technically accurate.
      • \n
    \n
    3. \n
  3. \n

    Space Complexity: Our implementation O(n), Possible implementation O(log n)

    \n
      \n
    • The partition arrays that we create are directly proportional to the size of the input, resulting in O(n) space complexity.
      • \n
    • With some tweaking, we could implement an in-place quick sort, which would eliminate the creation of new arrays. In this case, the log n stack frames from the recursion are the only proportional amount of space that is used, resulting in O(log n) space complexity.
      • \n
    \n
    4. \n
  4. Code example for quickSort:
    5. \n
\n
function quickSort(array) {\n    if (array.length <= 1) {\n        return array;\n    }\n\n    let pivot = array.shift();\n    // This implementation uses filter, which returns a new array with any element that passes the criteria (ie the callback returns true).\n    // We also could have iterated over the array (array.forEach(el => ...)) and pushed each value into the appropriate left/right subarray as we encountered it.\n    let left = array.filter((el) => el < pivot);\n    let right = array.filter((el) => el >= pivot);\n\n    let leftSorted = quickSort(left);\n    let rightSorted = quickSort(right);\n\n    return [...leftSorted, pivot, ...rightSorted];\n    // We also could have concatenated the arrays instead of spreading their contents\n    // return leftSorted.concat([pivot]).concat(rightSorted);\n}\n
\n
    \n
  1. Explain the complexity of and write a function that performs a binary search on a sorted array of numbers.
    2. \n
  2. \n

    Time Complexity: O(log n)

    \n
      \n
    • With each recursive call, we split our input in half. This means we have to make at most log n checks to know if the element is in our array.
      • \n
    \n
    3. \n
  3. \n

    Space Complexity: Our implementation O(n), Possible implementation O(1)

    \n
      \n
    • We have to make a subarray for each recursive call. In the worst case (we don't find the element), the total length of these arrays is approximately equal to the length of the original (n).
      • \n
    • If we kept references to the beginning and end index of the portion of the array that we are searching, we could eliminate the need for creating new subarrays. We could also use a while loop to perform this functionality until we either found our target or our beginning and end indices crossed. This would eliminate the space required for recursive calls (adding stack frames). Ultimately we would be using the same number of variables independent of input size, resulting in O(1).
      • \n
    \n
    4. \n
  4. Code example for binarySearch and binarySearchIndex:
    5. \n
\n
// Returns simply true/false for presence\nfunction binarySearch(array, target) {\n    if (array.length === 0) {\n        return false;\n    }\n\n    let midIdx = Math.floor(array.length / 2);\n    let leftHalf = array.slice(0, midIdx);\n    let rightHalf = array.slice(midIdx + 1);\n\n    if (target < array[midIdx]) {\n        return binarySearch(leftHalf, target);\n    } else if (target > array[midIdx]) {\n        return binarySearch(rightHalf, target);\n    } else {\n        return true;\n    }\n}\n\n// Returns the index or -1 if not found\nfunction binarySearchIndex(array, target) {\n    if (!array.length) return -1;\n\n    const midIdx = Math.floor(array.length / 2);\n    const midEl = array[midIdx];\n\n    if (target < midEl) {\n        return binarySearchIndex(array.slice(0, midIdx), target);\n    } else if (target > midEl) {\n        // Since our recursive call will have new indices for the subarray, we have to adjust the return value to align it with the indices of our original array.\n        // If the recursive call returns -1, it was not found and we can immediately return -1\n        // If it was found in the subarray, we have to add on the number of elements that were removed from the beginning of our larger original array.\n        // For example, if we try to find 15 in an array of [5, 10, 15]:\n        // - Our first call to binarySearchIndex will check our middle element of 10\n        // - Since our target is greater, we will recursively call our search on elements to the right, being the subarray [15]\n        // - On our recursive call we found our target! It's index in this call is 0.\n        // - When we return 0 to where binarySearchIndex was called, we need to adjust it to line up with this larger array (the 0th element of this larger array is 5, but our target was at the 0th index of the subarray)\n        // - Since we sliced off 2 elements from the beginning before making our recursive call, we add 2 to the return value to adjust it back to line up with our original array.\n        const idxShift = binarySearchIndex(array.slice(midIdx + 1), target);\n        return idxShift === -1 ? -1 : idxShift + midIdx + 1;\n    } else {\n        return midIdx;\n    }\n}\n
"},{"url":"/docs/articles/node-repl/","relativePath":"docs/articles/node-repl.md","relativeDir":"docs/articles","base":"node-repl.md","name":"node-repl","frontmatter":{"title":"The-package-lock.json-file","weight":0,"seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs","excerpt":"The package-lock.json file is automatically generated when installing node packages"},"html":"

The node command is the one we use to run our Node.js scripts:

\n
node script.js\n
\n

If we omit the filename, we use it in REPL mode:

\n
node\n
\n
\n

Note: REPL also known as Read Evaluate Print Loop is a programming language environment(Basically a console window) that takes single expression as user input and returns the result back to the console after execution.

\n
\n

If you try it now in your terminal, this is what happens:

\n
❯ node\n>\n
\n

the command stays in idle mode and waits for us to enter something.

\n
\n

Tip: if you are unsure how to open your terminal, google \"How to open terminal on <your-operating-system>\".

\n
\n

The REPL is waiting for us to enter some JavaScript code, to be more precise.

\n

Start simple and enter

\n
> console.log('test')\ntest\nundefined\n>\n
\n

The first value, test, is the output we told the console to print, then we get undefined which is the return value of running console.log().

\n

We can now enter a new line of JavaScript.

\n

Use the tab to autocomplete

\n

The cool thing about the REPL is that it's interactive.

\n

As you write your code, if you press the tab key the REPL will try to autocomplete what you wrote to match a variable you already defined or a predefined one.

\n

Exploring JavaScript objects

\n

Try entering the name of a JavaScript class, like Number, add a dot and press tab.

\n

The REPL will print all the properties and methods you can access on that class:

\n

\"Pressing

\n

Explore global objects

\n

You can inspect the globals you have access to by typing global. and pressing tab:

\n

\"Globals\"

\n

The _ special variable

\n

If after some code you type _, that is going to print the result of the last operation.

\n

Dot commands

\n

The REPL has some special commands, all starting with a dot .. They are

\n
    \n
  • .help: shows the dot commands help
    • \n
  • .editor: enables editor mode, to write multiline JavaScript code with ease. Once you are in this mode, enter ctrl-D to run the code you wrote.
    • \n
  • .break: when inputting a multi-line expression, entering the .break command will abort further input. Same as pressing ctrl-C.
    • \n
  • .clear: resets the REPL context to an empty object and clears any multi-line expression currently being input.
    • \n
  • .load: loads a JavaScript file, relative to the current working directory
    • \n
  • .save: saves all you entered in the REPL session to a file (specify the filename)
    • \n
  • .exit: exits the repl (same as pressing ctrl-C two times)
    • \n
\n

The REPL knows when you are typing a multi-line statement without the need to invoke .editor.

\n

For example if you start typing an iteration like this:

\n
[1, 2, 3].forEach(num => {\n
\n

and you press enter, the REPL will go to a new line that starts with 3 dots, indicating you can now continue to work on that block.

\n
... console.log(num)\n... })\n
\n

If you type .break at the end of a line, the multiline mode will stop and the statement will not be executed.

"},{"url":"/docs/articles/node-run-cli/","relativePath":"docs/articles/node-run-cli.md","relativeDir":"docs/articles","base":"node-run-cli.md","name":"node-run-cli","frontmatter":{"title":"node-cli-args","weight":0,"excerpt":"How to accept arguments in a Node.js program passed from the command line","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

You can pass any number of arguments when invoking a Node.js application using

\n

Arguments can be standalone or have a key and a value.

\n

For example:

\n

or

\n

This changes how you will retrieve this value in the Node.js code.

\n

The way you retrieve it is using the process object built into Node.js.

\n

It exposes an argv property, which is an array that contains all the command line invocation arguments.

\n

The first element is the full path of the node command.

\n

The second element is the full path of the file being executed.

\n

All the additional arguments are present from the third position going forward.

\n

You can iterate over all the arguments (including the node path and the file path) using a loop:

\n

You can get only the additional arguments by creating a new array that excludes the first 2 params:

\n

If you have one argument without an index name, like this:

\n

you can access it using

\n

In this case:

\n

args[0] is name=joe, and you need to parse it. The best way to do so is by using the minimist library, which helps dealing with arguments:

\n

This time you need to use double dashes before each argument name:

"},{"url":"/docs/articles/nodejs/","relativePath":"docs/articles/nodejs.md","relativeDir":"docs/articles","base":"nodejs.md","name":"nodejs","frontmatter":{"title":"Javascript and Node","excerpt":"Web-Dev-Hubis a Unibit theme created for project documentations. You can use it for your project.","seo":{"title":"Javascript and Node","description":"This is the Javascript and Node page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Javascript and Node","keyName":"property"},{"name":"og:description","value":"This is the Javascript and Node page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Javascript and Node"},{"name":"twitter:description","value":"This is the Javascript and Node page"}]},"template":"docs"},"html":"

As a beginner, it's hard to get to a point where you are confident enough in your programming abilities.

\n

While learning to code, you might also be confused at where does JavaScript end, and where Node.js begins, and vice versa.

\n

I would recommend you to have a good grasp of the main JavaScript concepts before diving into Node.js:

\n
    \n
  • Lexical Structure
    • \n
  • Expressions
    • \n
  • Types
    • \n
  • Variables
    • \n
  • Functions
    • \n
  • this
    • \n
  • Arrow Functions
    • \n
  • Loops
    • \n
  • Scopes
    • \n
  • Arrays
    • \n
  • Template Literals
    • \n
  • Semicolons
    • \n
  • Strict Mode
    • \n
  • ECMAScript 6, 2016, 2017
    • \n
\n

With those concepts in mind, you are well on your road to become a proficient JavaScript developer, in both the browser and in Node.js.

\n

The following concepts are also key to understand asynchronous programming, which is one fundamental part of Node.js:

\n
    \n
  • Asynchronous programming and callbacks
    • \n
  • Timers
    • \n
  • Promises
    • \n
  • Async and Await
    • \n
  • Closures
    • \n
  • The Event Loop
    • \n
"},{"url":"/docs/articles/nodevsbrowser/","relativePath":"docs/articles/nodevsbrowser.md","relativeDir":"docs/articles","base":"nodevsbrowser.md","name":"nodevsbrowser","frontmatter":{"title":"Node vs Browser","excerpt":"Web-Dev-Hubis a Unibit theme created for project documentations. You can use it for your project.","seo":{"title":"Node vs Browser","description":"Both the browser and Node.js use JavaScript as their programming language.You can pass any number of arguments when invoking a Node.js application using\n\n","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Node vs Browser","keyName":"property"},{"name":"og:description","value":"Both the browser and Node.js use JavaScript as their programming language.\nBuilding apps that run in the browser","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Node vs Browser"},{"name":"twitter:description","value":"This is the Node vs Browser page"},{"name":"og:image","value":"images/node.jpg","keyName":"property","relativeUrl":true}]},"template":"docs"},"html":"

Both the browser and Node.js use JavaScript as their programming language.

\n

Building apps that run in the browser is a completely different thing than building a Node.js application.

\n

Despite the fact that it's always JavaScript, there are some key differences that make the experience radically different.

\n

From the perspective of a frontend developer who extensively uses JavaScript, Node.js apps bring with them a huge advantage: the comfort of programming everything - the frontend and the backend - in a single language.

\n

You have a huge opportunity because we know how hard it is to fully, deeply learn a programming language, and by using the same language to perform all your work on the web - both on the client and on the server, you're in a unique position of advantage.

\n

What changes is the ecosystem.

\n

In the browser, most of the time what you are doing is interacting with the DOM, or other Web Platform APIs like Cookies. Those do not exist in Node.js, of course. You don't have the document, window and all the other objects that are provided by the browser.

\n

And in the browser, we don't have all the nice APIs that Node.js provides through its modules, like the filesystem access functionality.

\n

Another big difference is that in Node.js you control the environment. Unless you are building an open source application that anyone can deploy anywhere, you know which version of Node.js you will run the application on. Compared to the browser environment, where you don't get the luxury to choose what browser your visitors will use, this is very convenient.

\n

This means that you can write all the modern ES6-7-8-9 JavaScript that your Node.js version supports.

\n

Since JavaScript moves so fast, but browsers can be a bit slow and users a bit slow to upgrade, sometimes on the web, you are stuck with using older JavaScript / ECMAScript releases.

\n

You can use Babel to transform your code to be ES5-compatible before shipping it to the browser, but in Node.js, you won't need that.

\n

Another difference is that Node.js uses the CommonJS module system, while in the browser we are starting to see the ES Modules standard being implemented.

\n

In practice, this means that for the time being you use require() in Node.js and import in the browser.

"},{"url":"/docs/articles/node-common-modules/","relativePath":"docs/articles/node-common-modules.md","relativeDir":"docs/articles","base":"node-common-modules.md","name":"node-common-modules","frontmatter":{"title":"Common Modules","weight":0,"excerpt":"resources","seo":{"title":"","description":"This section is similar to a blog but is more technical in nature and time invariant with regard to content.","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Modules: CommonJS modules#

\n

Stability: 2 - Stable

\n

In the Node.js module system, each file is treated as a separate module. For example, consider a file named foo.js:

\n
const circle = require('./circle.js');\nconsole.log(`The area of a circle of radius 4 is ${circle.area(4)}`);\n
\n

On the first line, foo.js loads the module circle.js that is in the same directory as foo.js.

\n

Here are the contents of circle.js:

\n
const { PI } = Math;\n\nexports.area = (r) => PI * r ** 2;\n\nexports.circumference = (r) => 2 * PI * r;\n
\n

The module circle.js has exported the functions area() and circumference(). Functions and objects are added to the root of a module by specifying additional properties on the special exports object.

\n

Variables local to the module will be private, because the module is wrapped in a function by Node.js (see module wrapper). In this example, the variable PI is private to circle.js.

\n

The module.exports property can be assigned a new value (such as a function or object).

\n

Below, bar.js makes use of the square module, which exports a Square class:

\n
const Square = require('./square.js');\nconst mySquare = new Square(2);\nconsole.log(`The area of mySquare is ${mySquare.area()}`);\n
\n

The square module is defined in square.js:

\n
// Assigning to exports will not modify module, must use module.exports\nmodule.exports = class Square {\n  constructor(width) {\n    this.width = width;\n  }\n\n  area() {\n    return this.width ** 2;\n  }\n};\n
\n

The module system is implemented in the require('module') module.

\n

Accessing the main module#

\n

When a file is run directly from Node.js, require.main is set to its module. That means that it is possible to determine whether a file has been run directly by testing require.main === module.

\n

For a file foo.js, this will be true if run via node foo.js, but false if run by require('./foo').

\n

Because module provides a filename property (normally equivalent to __filename), the entry point of the current application can be obtained by checking require.main.filename.

\n

Package manager tips#

\n

The semantics of the Node.js require() function were designed to be general enough to support reasonable directory structures. Package manager programs such as dpkg, rpm, and npm will hopefully find it possible to build native packages from Node.js modules without modification.

\n

Below we give a suggested directory structure that could work:

\n

Let's say that we wanted to have the folder at /usr/lib/node/<some-package>/<some-version> hold the contents of a specific version of a package.

\n

Packages can depend on one another. In order to install package foo, it may be necessary to install a specific version of package bar. The bar package may itself have dependencies, and in some cases, these may even collide or form cyclic dependencies.

\n

Because Node.js looks up the realpath of any modules it loads (that is, it resolves symlinks) and then looks for their dependencies in node_modules folders, this situation can be resolved with the following architecture:

\n
    \n
  • /usr/lib/node/foo/1.2.3/: Contents of the foo package, version 1.2.3.
    • \n
  • /usr/lib/node/bar/4.3.2/: Contents of the bar package that foo depends on.
    • \n
  • /usr/lib/node/foo/1.2.3/node_modules/bar: Symbolic link to /usr/lib/node/bar/4.3.2/.
    • \n
  • /usr/lib/node/bar/4.3.2/node_modules/*: Symbolic links to the packages that bar depends on.
    • \n
\n

Thus, even if a cycle is encountered, or if there are dependency conflicts, every module will be able to get a version of its dependency that it can use.

\n

When the code in the foo package does require('bar'), it will get the version that is symlinked into /usr/lib/node/foo/1.2.3/node_modules/bar. Then, when the code in the bar package calls require('quux'), it'll get the version that is symlinked into /usr/lib/node/bar/4.3.2/node_modules/quux.

\n

Furthermore, to make the module lookup process even more optimal, rather than putting packages directly in /usr/lib/node, we could put them in /usr/lib/node_modules/<name>/<version>. Then Node.js will not bother looking for missing dependencies in /usr/node_modules or /node_modules.

\n

In order to make modules available to the Node.js REPL, it might be useful to also add the /usr/lib/node_modules folder to the $NODE_PATH environment variable. Since the module lookups using node_modules folders are all relative, and based on the real path of the files making the calls to require(), the packages themselves can be anywhere.

\n

The .mjs extension#

\n

It is not possible to require() files that have the .mjs extension. Attempting to do so will throw an error. The .mjs extension is reserved for ECMAScript Modules which cannot be loaded via require(). See ECMAScript Modules for more details.

\n

All together...#

\n

To get the exact filename that will be loaded when require() is called, use the require.resolve() function.

\n

Putting together all of the above, here is the high-level algorithm in pseudocode of what require() does:

\n

require(X) from module at path Y

\n
    \n
  1. If X is a core module,\na. return the core module\nb. STOP
    2. \n
  2. If X begins with '/'\na. set Y to be the filesystem root
    3. \n
  3. If X begins with './' or '/' or '../'\na. LOADASFILE(Y + X)\nb. LOADASDIRECTORY(Y + X)\nc. THROW \"not found\"
    4. \n
  4. If X begins with '#'\na. LOADPACKAGEIMPORTS(X, dirname(Y))
    5. \n
  5. LOADPACKAGESELF(X, dirname(Y))
    6. \n
  6. LOADNODEMODULES(X, dirname(Y))
    7. \n
  7. THROW \"not found\"
    8. \n
\n

LOADASFILE(X)

\n
    \n
  1. If X is a file, load X as its file extension format. STOP
    2. \n
  2. If X.js is a file, load X.js as JavaScript text. STOP
    3. \n
  3. If X.json is a file, parse X.json to a JavaScript Object. STOP
    4. \n
  4. If X.node is a file, load X.node as binary addon. STOP
    5. \n
\n

LOAD_INDEX(X)

\n
    \n
  1. If X/index.js is a file, load X/index.js as JavaScript text. STOP
    2. \n
  2. If X/index.json is a file, parse X/index.json to a JavaScript object. STOP
    3. \n
  3. If X/index.node is a file, load X/index.node as binary addon. STOP
    4. \n
\n

LOADASDIRECTORY(X)

\n
    \n
  1. If X/package.json is a file,\na. Parse X/package.json, and look for \"main\" field.\nb. If \"main\" is a falsy value, GOTO 2.\nc. let M = X + (json main field)\nd. LOADASFILE(M)\ne. LOADINDEX(M)\nf. LOADINDEX(X) DEPRECATED\ng. THROW \"not found\"
    2. \n
  2. LOAD_INDEX(X)
    3. \n
\n

LOADNODEMODULES(X, START)

\n
    \n
  1. let DIRS = NODEMODULESPATHS(START)
    2. \n
  2. for each DIR in DIRS:\na. LOADPACKAGEEXPORTS(X, DIR)\nb. LOADASFILE(DIR/X)\nc. LOADASDIRECTORY(DIR/X)
    3. \n
\n

NODEMODULESPATHS(START)

\n
    \n
  1. let PARTS = path split(START)
    2. \n
  2. let I = count of PARTS - 1
    3. \n
  3. let DIRS = [GLOBAL_FOLDERS]
    4. \n
  4. while I >= 0,\na. if PARTS[I] = \"nodemodules\" CONTINUE\nb. DIR = path join(PARTS[0 .. I] + \"nodemodules\")\nc. DIRS = DIRS + DIR\nd. let I = I - 1
    5. \n
  5. return DIRS
    6. \n
\n

LOADPACKAGEIMPORTS(X, DIR)

\n
    \n
  1. Find the closest package scope SCOPE to DIR.
    2. \n
  2. If no scope was found, return.
    3. \n
  3. If the SCOPE/package.json \"imports\" is null or undefined, return.
    4. \n
  4. let MATCH = PACKAGEIMPORTSRESOLVE(X, pathToFileURL(SCOPE),\n[\"node\", \"require\"]) defined in the ESM resolver.
    5. \n
  5. RESOLVEESMMATCH(MATCH).
    6. \n
\n

LOADPACKAGEEXPORTS(X, DIR)

\n
    \n
  1. Try to interpret X as a combination of NAME and SUBPATH where the name\nmay have a @scope/ prefix and the subpath begins with a slash (/).
    2. \n
  2. If X does not match this pattern or DIR/NAME/package.json is not a file,\nreturn.
    3. \n
  3. Parse DIR/NAME/package.json, and look for \"exports\" field.
    4. \n
  4. If \"exports\" is null or undefined, return.
    5. \n
  5. let MATCH = PACKAGEEXPORTSRESOLVE(pathToFileURL(DIR/NAME), \".\" + SUBPATH,\npackage.json \"exports\", [\"node\", \"require\"]) defined in the ESM resolver.
    6. \n
  6. RESOLVEESMMATCH(MATCH)
    7. \n
\n

LOADPACKAGESELF(X, DIR)

\n
    \n
  1. Find the closest package scope SCOPE to DIR.
    2. \n
  2. If no scope was found, return.
    3. \n
  3. If the SCOPE/package.json \"exports\" is null or undefined, return.
    4. \n
  4. If the SCOPE/package.json \"name\" is not the first segment of X, return.
    5. \n
  5. let MATCH = PACKAGEEXPORTSRESOLVE(pathToFileURL(SCOPE),\n\".\" + X.slice(\"name\".length), package.json \"exports\", [\"node\", \"require\"])\ndefined in the ESM resolver.
    6. \n
  6. RESOLVEESMMATCH(MATCH)
    7. \n
\n

RESOLVEESMMATCH(MATCH)

\n
    \n
  1. let { RESOLVED, EXACT } = MATCH
    2. \n
  2. let RESOLVED_PATH = fileURLToPath(RESOLVED)
    3. \n
  3. If EXACT is true,\na. If the file at RESOLVEDPATH exists, load RESOLVEDPATH as its extension\nformat. STOP
    4. \n
  4. Otherwise, if EXACT is false,\na. LOADASFILE(RESOLVEDPATH)\nb. LOADASDIRECTORY(RESOLVEDPATH)
    5. \n
  5. THROW \"not found\"
    6. \n
\n

Caching#

\n

Modules are cached after the first time they are loaded. This means (among other things) that every call to require('foo') will get exactly the same object returned, if it would resolve to the same file.

\n

Provided require.cache is not modified, multiple calls to require('foo') will not cause the module code to be executed multiple times. This is an important feature. With it, \"partially done\" objects can be returned, thus allowing transitive dependencies to be loaded even when they would cause cycles.

\n

To have a module execute code multiple times, export a function, and call that function.

\n

Module caching caveats#

\n

Modules are cached based on their resolved filename. Since modules may resolve to a different filename based on the location of the calling module (loading from node_modules folders), it is not a guarantee that require('foo') will always return the exact same object, if it would resolve to different files.

\n

Additionally, on case-insensitive file systems or operating systems, different resolved filenames can point to the same file, but the cache will still treat them as different modules and will reload the file multiple times. For example, require('./foo') and require('./FOO') return two different objects, irrespective of whether or not ./foo and ./FOO are the same file.

\n

Core modules#

\n

History

\n

Node.js has several modules compiled into the binary. These modules are described in greater detail elsewhere in this documentation.

\n

The core modules are defined within the Node.js source and are located in the lib/ folder.

\n

Core modules are always preferentially loaded if their identifier is passed to require(). For instance, require('http') will always return the built in HTTP module, even if there is a file by that name.

\n

Core modules can also be identified using the node: prefix, in which case it bypasses the require cache. For instance, require('node:http') will always return the built in HTTP module, even if there is require.cache entry by that name.

\n

Cycles#

\n

When there are circular require() calls, a module might not have finished executing when it is returned.

\n

Consider this situation:

\n

a.js:

\n
console.log('a starting');\nexports.done = false;\nconst b = require('./b.js');\nconsole.log('in a, b.done = %j', b.done);\nexports.done = true;\nconsole.log('a done');\n
\n

b.js:

\n
console.log('b starting');\nexports.done = false;\nconst a = require('./a.js');\nconsole.log('in b, a.done = %j', a.done);\nexports.done = true;\nconsole.log('b done');\n
\n

main.js:

\n
console.log('main starting');\nconst a = require('./a.js');\nconst b = require('./b.js');\nconsole.log('in main, a.done = %j, b.done = %j', a.done, b.done);\n
\n

When main.js loads a.js, then a.js in turn loads b.js. At that point, b.js tries to load a.js. In order to prevent an infinite loop, an unfinished copy of the a.js exports object is returned to the b.js module. b.js then finishes loading, and its exports object is provided to the a.js module.

\n

By the time main.js has loaded both modules, they're both finished. The output of this program would thus be:

\n
$ node main.js\nmain starting\na starting\nb starting\nin b, a.done = false\nb done\nin a, b.done = true\na done\nin main, a.done = true, b.done = true\n
\n

Careful planning is required to allow cyclic module dependencies to work correctly within an application.

\n

File modules#

\n

If the exact filename is not found, then Node.js will attempt to load the required filename with the added extensions: .js, .json, and finally .node.

\n

.js files are interpreted as JavaScript text files, and .json files are parsed as JSON text files. .node files are interpreted as compiled addon modules loaded with process.dlopen().

\n

A required module prefixed with '/' is an absolute path to the file. For example, require('/home/marco/foo.js') will load the file at /home/marco/foo.js.

\n

A required module prefixed with './' is relative to the file calling require(). That is, circle.js must be in the same directory as foo.js for require('./circle') to find it.

\n

Without a leading '/', './', or '../' to indicate a file, the module must either be a core module or is loaded from a node_modules folder.

\n

If the given path does not exist, require() will throw an Error with its code property set to 'MODULE_NOT_FOUND'.

\n

Folders as modules#

\n

It is convenient to organize programs and libraries into self-contained directories, and then provide a single entry point to those directories. There are three ways in which a folder may be passed to require() as an argument.

\n

The first is to create a package.json file in the root of the folder, which specifies a main module. An example package.json file might look like this:

\n
{ \"name\" : \"some-library\",\n  \"main\" : \"./lib/some-library.js\" }\n
\n

If this was in a folder at ./some-library, then require('./some-library') would attempt to load ./some-library/lib/some-library.js.

\n

This is the extent of the awareness of package.json files within Node.js.

\n

If there is no package.json file present in the directory, or if the \"main\" entry is missing or cannot be resolved, then Node.js will attempt to load an index.js or index.node file out of that directory. For example, if there was no package.json file in the previous example, then require('./some-library') would attempt to load:

\n
    \n
  • ./some-library/index.js
    • \n
  • ./some-library/index.node
    • \n
\n

If these attempts fail, then Node.js will report the entire module as missing with the default error:

\n
Error: Cannot find module 'some-library'\n
\n

Loading from node_modules folders#

\n

If the module identifier passed to require() is not a core module, and does not begin with '/', '../', or './', then Node.js starts at the parent directory of the current module, and adds /node_modules, and attempts to load the module from that location. Node.js will not append node_modules to a path already ending in node_modules.

\n

If it is not found there, then it moves to the parent directory, and so on, until the root of the file system is reached.

\n

For example, if the file at '/home/ry/projects/foo.js' called require('bar.js'), then Node.js would look in the following locations, in this order:

\n
    \n
  • /home/ry/projects/node_modules/bar.js
    • \n
  • /home/ry/node_modules/bar.js
    • \n
  • /home/node_modules/bar.js
    • \n
  • /node_modules/bar.js
    • \n
\n

This allows programs to localize their dependencies, so that they do not clash.

\n

It is possible to require specific files or sub modules distributed with a module by including a path suffix after the module name. For instance require('example-module/path/to/file') would resolve path/to/file relative to where example-module is located. The suffixed path follows the same module resolution semantics.

\n

Loading from the global folders#

\n

If the NODE_PATH environment variable is set to a colon-delimited list of absolute paths, then Node.js will search those paths for modules if they are not found elsewhere.

\n

On Windows, NODE_PATH is delimited by semicolons (;) instead of colons.

\n

NODE_PATH was originally created to support loading modules from varying paths before the current module resolution algorithm was defined.

\n

NODE_PATH is still supported, but is less necessary now that the Node.js ecosystem has settled on a convention for locating dependent modules. Sometimes deployments that rely on NODE_PATH show surprising behavior when people are unaware that NODE_PATH must be set. Sometimes a module's dependencies change, causing a different version (or even a different module) to be loaded as the NODE_PATH is searched.

\n

Additionally, Node.js will search in the following list of GLOBAL_FOLDERS:

\n
    \n
  • 1: $HOME/.node_modules
    • \n
  • 2: $HOME/.node_libraries
    • \n
  • 3: $PREFIX/lib/node
    • \n
\n

Where $HOME is the user's home directory, and $PREFIX is the Node.js configured node_prefix.

\n

These are mostly for historic reasons.

\n

It is strongly encouraged to place dependencies in the local node_modules folder. These will be loaded faster, and more reliably.

\n

The module wrapper#

\n

Before a module's code is executed, Node.js will wrap it with a function wrapper that looks like the following:

\n
(function(exports, require, module, __filename, __dirname) {\n// Module code actually lives in here\n});\n
\n

By doing this, Node.js achieves a few things:

\n
    \n
  • It keeps top-level variables (defined with var, const or let) scoped to the module rather than the global object.
    • \n
  • \n

    It helps to provide some global-looking variables that are actually specific to the module, such as:

    \n
      \n
    • The module and exports objects that the implementor can use to export values from the module.
      • \n
    • The convenience variables __filename and __dirname, containing the module's absolute filename and directory path.
      • \n
    \n
    • \n
\n

The module scope#

\n

__dirname#

\n

Added in: v0.1.27

\n
    \n
    • \n
\n

The directory name of the current module. This is the same as the path.dirname() of the __filename.

\n

Example: running node example.js from /Users/mjr

\n
console.log(__dirname);\n// Prints: /Users/mjr\nconsole.log(path.dirname(__filename));\n// Prints: /Users/mjr\n
\n

__filename#

\n

Added in: v0.0.1

\n
    \n
    • \n
\n

The file name of the current module. This is the current module file's absolute path with symlinks resolved.

\n

For a main program this is not necessarily the same as the file name used in the command line.

\n

See __dirname for the directory name of the current module.

\n

Examples:

\n

Running node example.js from /Users/mjr

\n
console.log(__filename);\n// Prints: /Users/mjr/example.js\nconsole.log(__dirname);\n// Prints: /Users/mjr\n
\n

Given two modules: a and b, where b is a dependency of a and there is a directory structure of:

\n
    \n
  • /Users/mjr/app/a.js
    • \n
  • /Users/mjr/app/node_modules/b/b.js
    • \n
\n

References to __filename within b.js will return /Users/mjr/app/node_modules/b/b.js while references to __filename within a.js will return /Users/mjr/app/a.js.

\n

exports#

\n

Added in: v0.1.12

\n
Project NameSkills usedDescription
Web-Dev-Resource-Hub (blog)Html, Css, javascript, Python, jQuery, React, FireBase, AWS S3, Netlify, Heroku, NodeJS, PostgreSQL, C++, Web Audio APIMy blog site contains my resource sharing and blog site ... centered mostly on web development and just a bit of audio production / generally nerdy things I find interesting.
Dynamic Guitar Effects Triggering Using A Modified Dynamic Time Warping AlgorithmC, C++, Python, Java, Pure Data, MatlabSuccessfully completed and delivered a platform to digitize a guitar signal and perform filtering before executing frequency & time domain analysis to track a current performance against prerecorded performance.Implemented the Dynamic Time Warping algorithm in C++ and Python to autonomously activate or adjust guitar effect at multiple pre-designated section of performance.
Data Structures & Algorithms Interactive Learning SiteHTML, CSS, Javascript, Python, Java, jQuery, Repl.it-Database APIA interactive and comprehensive guide and learning tool for DataStructures and Algorithms ... concentrated on JS but with some examples in Python, C++ and Java as well
MihirBeg.comHtml, Css, Javascript, Bootstrap, FontAwesome, jQueryA responsive and mobile friendly content promotion site for an Audio Engineer to engage with fans and potential clients
Tetris-JSHtml, Css, JavascriptThe classic game of tetris implemented in plain javascipt and styled with a retro-futureistic theme
Git Html Preview ToolGit, Javascript, CSS3, HTML5, Bootstrap, BitBucketLoads HTML using CORS proxy, then process all links, frames, scripts and styles, and load each of them using CORS proxy, so they can be evaluated by the browser.
Mini Project ShowcaseHTML, HTML5, CSS, CSS3, Javascript, jQueryadd songs and play music, it also uses to store data in INDEXEDB Database by which we can play songs, if we not clear the catch then song will remain stored in database.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Things
✅Prepare pen, paper and earphones/headphones.
✅Find a quiet environment with good Internet connection.
✅Ensure webcam and audio are working. There were times I had to restart Chrome to get Hangouts to work again.
✅Request for the option to interview over Hangouts/Skype instead of a phone call; it is easier to send links or text across.
✅Decide on and be familiar with a programming language.
✅Familiarize yourself with the coding environment (CoderPad/CodePen). Set up the coding shortcuts, turn on autocompletion, tab spacing, etc.
✅Prepare answers to the frequently-asked behavioral questions in an interview.
✅Prepare some questions to ask at the end of the interview.
✅Dress comfortably. Usually you do not need to wear smart clothes, casual should be fine. T-shirts and jeans are acceptable at most places.
✅Stay calm and composed.
⚠️Turn off the webcam if possible. Most remote interviews will not require video chat and leaving it on only serves as a distraction.
\n

Introduction

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Things
✅Introduce yourself in a few sentences under a minute or two.
✅Mention interesting points that are relevant to the role you are applying for.
✅Sound enthusiastic! Speak with a smile and you will naturally sound more engaging.
❌Spend too long introducing yourself. The more time you spend talking the less time you have to code.
\n

Upon receiving the question

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Things
✅Repeat the question back at the interviewer.
✅Clarify any assumptions you made subconsciously. Many questions are under-specified on purpose. E.g. a tree-like diagram could very well be a graph that allows for cycles and a naive recursive solution would not work.
✅Clarify input format and range. Ask whether input can be assumed to be well-formed and non-null.
✅Work through a small example to ensure you understood the question.
✅Explain a high level approach even if it is a brute force one.
✅Improve upon the approach and optimize. Reduce duplicated work and cache repeated computations.
✅Think carefully, then state and explain the time and space complexity of your approaches.
✅If stuck, think about related problems you have seen before and how they were solved. Check out the tips in this section.
❌Ignore information given to you. Every piece is important.
❌Jump into coding straightaway.
❌Start coding without interviewer's green light.
❌Appear too unsure about your approach or analysis.
\n

Code out your solution

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Things
✅Explain what you are coding/typing to the interviewer, what you are trying to achieve.
✅Practice good coding style. Clear variable names, consistent operator spacing, proper indentation, etc.
✅Type/write at a reasonable speed. Too slow is no good.
✅As much as possible, write actual compilable code, not pseudocode.
✅Write in a modular fashion. Extract out chunks of repeated code into functions.
✅Ask for permission to use trivial functions without having to implement them; saves you some time.
✅Use the hints given by the interviewer.
✅Demonstrate mastery of your chosen programming language.
✅Demonstrate technical knowledge in data structures and algorithms.
✅If you are cutting corners in your code, state that out loud to your interviewer and say what you would do in a non-interview setting (no time constraints). E.g., \"Under non-interview settings, I would write a regex to parse this string rather than using split() which may not cover all cases.\"
✅Practice whiteboard space-management skills.
⚠️Reasonable defensive coding. Check for nulls, empty collections, etc. Can omit if input validity has been clarified with the interviewer.
❌Remain quiet the whole time while coding.
❌Spend too much time writing comments.
❌Use extremely verbose or single-character (unless they're common like i, n) variable names.
❌Copy and paste code without checking (e.g. variables need to be renamed).
❌Interrupt your interviewer when they are talking. Usually if they speak, they are trying to give you hints or steer you in the right direction.
❌Write too big (takes up too much space) or too small (illegible) if on a whiteboard.
\n

After coding

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Things
✅Scan through your code for mistakes as if it was your first time seeing code written by someone else.
✅Check for off-by-one errors.
✅Come up with test cases. Try extreme test cases - empty sets, single item sets, negative numbers
✅Step through your code with those test cases.
✅Look out for places where you can refactor.
✅Reiterate the time and space complexity of your code.
✅Explain trade-offs and how the code/approach can be improved if given more time.
❌Immediately announce that you are done coding. Do the above first!
❌Argue with the interviewer. They may be wrong but that is very unlikely given that they are familiar with the question.
\n

Wrap up

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Things
✅Ask questions. More importantly, ask good and engaging questions that are tailored to the company! Pick some questions from this list.
✅Thank the interviewer.
⚠️Ask about your interview performance. It can get awkward.
❌End the interview without asking any questions.
\n

Post interview

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Things
✅Record the interview questions and answers down as these can be useful for future reference.
⚠️Send a follow up email to your interviewer(s) thanking them for their time and the opportunity to interview with them.
"},{"url":"/docs/career/job-boards/","relativePath":"docs/career/job-boards.md","relativeDir":"docs/career","base":"job-boards.md","name":"job-boards","frontmatter":{"title":"Job Board","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Job Boards

\n

\"Awesome\"

\n

A curated list of awesome job boards.

\n

Table of Contents

\n\n

General

\n\n

Data Science

\n\n

Blockchain

\n\n

Design

\n\n

InfoSec

\n\n

Programming

\n\n

Remote

\n\n

Freelancer

\n\n

Other

\n\n

Entry Level

\n\n

Startups

\n\n

United States

\n\n

Free & Open Source

\n\n

DevOps

\n\n

Growth Hacking

\n"},{"url":"/docs/community/an-open-letter-2-future-developers/","relativePath":"docs/community/an-open-letter-2-future-developers.md","relativeDir":"docs/community","base":"an-open-letter-2-future-developers.md","name":"an-open-letter-2-future-developers","frontmatter":{"title":"New Developers","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

1. Why are frameworks useful?

\n

Essentially the allure of these is the amount of time that is saved and the resulting efficiency in getting a project rolled out faster because there's a lot less of the initial work to be done.

\n

Frameworks take care of tasks like default browser settings, file structures, and layout templates for your website. This automation generates a uniform design for page elements like text, tables, forms, and buttons, amongst other things. Even complex navigation menus become standardized with frameworks as it can be consistently applied across your website with ease.

\n

2. Types of framework

\n

There are many different kinds of this platform available for programmers. Typically, like a lot of things within this discipline can be split between frontend and backend development---first let's make the distinction between the two to help you understand the usefulness of these solutions.

\n

Backend frameworks

\n

These are designed to make the responsibility of interacting with the database an easier endeavor for the developer. It automates a lot of functions and processes that web developers use to record and retrieve user-inputted data.

\n

Frontend frameworks

\n

As the name suggests, these are very helpful on the presentation side of the website, creating a good foundation from which to build pages. These frameworks combine HTML, CSS, and Javascript to be really effective in creating conventions for various elements. Typically frontend web developers use them in conjunction with other effective tools.

\n

HTML conventions allow for standardization for elements like typography, while CSS conventions can help standardize positioning of elements in a grid-like system on the pages. This makes it easier for the developer to arrange and organize elements into a simple and uniform design across multiple displays and browsers. Javascript conventions offer the ability to style more advanced components like image carousels, lightboxes, button behaviors, and pop-ups.

\n

On another note, there are Javascript frameworks that focus on full application support---like AngularJS and Reactjs. Libraries of Javascript code like jQuery are also helpful in developing conventions that can be readily implemented in websites.

\n

To recap, the use of these tools helps the developer get up and running quickly without having to get bogged down with the initial hurdles that come with setting up a website. It creates uniform code across all pages of your website and presents a clean look for users. This in turn solves common issues like typography consistency and positioning difficulties on different pages.

\n

Best of all, frontend frameworks resolve any issues with browser compatibility and are key to responsive web design, which we'll discuss further on.

\n

Curious about a career
in Web Development?

\n

Start learning for free!

\n

\n

3. Popular frameworks

\n

There are many of these tools that have become must-haves for beginner and expert web developers alike. As well as different languages, they focus on different directives and outcomes.

\n

One of the most popular frameworks is Bootstrap, which was originally developed by Twitter to maintain consistency in their interface development. It's very polished and efficient, and makes website development easier and faster. It has standardized conventions that are well recognized for HTML elements like buttons, alerts, forms, and typography.

\n

So popular that it's now known simply as \"Rails,\" Ruby on Rails has revolutionised this language. As well as making it one of the easier programming languages to learn, Rails is particularly popular with beginners looking to code full-stack early on in their careers.

\n

Foundation was created from the Zurb style guide and much like Bootstrap, offers a complete solution for front-end design. Many large companies like Facebook, Yahoo, and Ebay utilize Foundation in their layouts. The framework encourages web developers to expand on the conventions and personalize them for developers' websites.

\n

Skeleton is a lighter example that doesn't come with all the bells and whistles that accompany the heavy-lifters like Bootstrap and Foundation. This encourages greater customization by only providing styling on the most basic and necessary elements. Developers who only need specific components to be styled utilize light-weight frameworks like Skeleton to achieve their goals.

\n

A simple Google search will turn up a lot of results for top tools being used and recommended. It's definitely beneficial to check out the different options and see which suits your development needs and design goals.

\n

4. How do I use frameworks?

\n

Regardless of whether a developer uses a full frontend framework like Bootstrap or a lightweight option like Skeleton, these are efficient tools that should be seriously considered in every developer's process.

\n

Recognized frameworks offer more ease in collaboration as developers can access the same libraries for design conventions without having to resort to individual opinionated decisions. Additionally, there is support from the specific community with tutorials and articles on how to effectively use it.

\n

The ease of implementation and efficiency makes it almost a necessity to employ these tools in a web developer's process. Any time a programmer is finding themselves creating an ever-growing proprietary list of CSS rules, it's probably a good idea to look into using a framework to tidy things up.

\n

5. What is a responsive framework?

\n

One of the best features of these systems is that they help create websites that are easily accessible and are able to be viewed across different browsers on different devices. A lot of frameworks accomplish this with dynamic code---utilizing classes that can be reused and formatted to take into consideration the device and/or browser that is being used.

\n

In other words, the layouts of webpages will change---certain elements will disappear and text will be smaller on smaller screens, while certain Javascript elements might not take effect at all. On larger screens, the extra real estate can be used to showcase higher quality images and more sophisticated design elements, as well as allowing for the white space beloved by web designers.

\n

In this current age when users are more likely to view websites on their mobile devices than their computers, it's important to have a mobile responsive website that creates an enriching user experience no matter what interface the user interacts with. In this video, our in-house web developer Abhi explains more about styling a mobile-responsive website with CSS:

\n

6. Final thoughts

\n

Critics of frontend frameworks cite them as the source of a lot of cookie-cutter websites that are identical in appearance and interaction. This however, is an oversimplification. Why? Let's go back to the cooking example: a spatula is just a spatula---a lot of people have one and use the tool in the kitchen. But the food that is created will vary wildly across the spectrum, depending on the cook.

\n

In the same light, frontend frameworks are simply a tool that can be employed to create diverse and distinctive websites. Yes they're efficient, but it's up to the developer to make sure they're effective.

\n

If you want to learn some more about web development right now, these articles may interest you:

\n"},{"url":"/docs/audio/web-audio-api/","relativePath":"docs/audio/web-audio-api.md","relativeDir":"docs/audio","base":"web-audio-api.md","name":"web-audio-api","frontmatter":{"title":"Web Apis","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Web Audio Api

\n

Basic concepts behind Web Audio API

\n

This article explains some of the audio theory behind how the features of the Web Audio API work, to help you make informed decisions while designing how audio is routed through your app.

\n

It won't turn you into a master sound engineer, but it will give you enough background to understand why the Web Audio API works like it does.

\n

Audio graphs

\n

The Web Audio API involves handling audio operations inside an audio context, and has been designed to allow modular routing. Basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. Several sources --- with different types of channel layout --- are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.

\n

Audio nodes are linked via their inputs and outputs, forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination. Although, you don't have to provide a destination if you, say, just want to visualize some audio data. A simple, typical workflow for web audio would look something like this:

\n
    \n
  1. Create the audio context.
    2. \n
  2. Inside the context, create sources --- such as <audio>, oscillator, or stream.
    3. \n
  3. Create effects nodes, such as reverb, biquad filter, panner, or compressor.
    4. \n
  4. Choose the final destination for the audio, such as the user's computer speakers.
    5. \n
  5. Establish connections from the audio sources through zero or more effects, eventually ending at the chosen destination.
    6. \n
\n

Note: The number of audio channels available on a signal is frequently presented in a numeric format, such as 2.0 or 5.1. This is called channel notation. The first number is the number of full frequency range audio channels that the signal includes. The number after the period indicates the number of those channels which are reserved for low-frequency effect (LFE) outputs; these are often referred to as subwoofers.

\n

\"A

\n

Each input or output is composed of one or more audio channels, which together represent a specific audio layout. Any discrete channel structure is supported, including mono, stereo, quad, 5.1, and so on.

\n

\"Show

\n

Audio sources can be obtained in a number of ways:

\n
    \n
  • Sound can be generated directly in JavaScript by an audio node (such as an oscillator).
    • \n
  • Created from raw PCM data (the audio context has methods to decode supported audio formats).
    • \n
  • Taken from HTML media elements (such as <video> or <audio>).
    • \n
  • Taken directly from a WebRTC MediaStream (such as a webcam or microphone).
    • \n
\n

Audio data: what's in a sample

\n

When an audio signal is processed, sampling means the conversion of a continuous signal to a discrete signal; or put another way, a continuous sound wave, such as a band playing live, is converted to a sequence of samples (a discrete-time signal) that allow a computer to handle the audio in distinct blocks.

\n

A lot more information can be found on the Wikipedia page Sampling (signal processing).

\n

Audio buffers: frames, samples and channels

\n

An AudioBuffer takes as its parameters a number of channels (1 for mono, 2 for stereo, etc), a length, meaning the number of sample frames inside the buffer, and a sample rate, which is the number of sample frames played per second.

\n

A sample is a single float32 value that represents the value of the audio stream at each specific point in time, in a specific channel (left or right, if in the case of stereo). A frame, or sample frame, is the set of all values for all channels that will play at a specific point in time: all the samples of all the channels that play at the same time (two for a stereo sound, six for 5.1, etc.)

\n

The sample rate is the number of those samples (or frames, since all samples of a frame play at the same time) that will play in one second, measured in Hz. The higher the sample rate, the better the sound quality.

\n

Let's look at a Mono and a Stereo audio buffer, each is one second long, and playing at 44100Hz:

\n
    \n
  • The Mono buffer will have 44100 samples, and 44100 frames. The length property will be 44100.
    • \n
  • The Stereo buffer will have 88200 samples, but still 44100 frames. The length property will still be 44100 since it's equal to the number of frames.
    • \n
\n

\"A

\n

When a buffer plays, you will hear the left most sample frame, and then the one right next to it, etc. In the case of stereo, you will hear both channels at the same time. Sample frames are very useful, because they are independent of the number of channels, and represent time, in a useful way for doing precise audio manipulation.

\n

Note: To get a time in seconds from a frame count, divide the number of frames by the sample rate. To get a number of frames from a number of samples, divide by the channel count.

\n

Here's a couple of simple examples:

\n
var context = new AudioContext();\nvar buffer = context.createBuffer(2, 22050, 44100);\n
\n

Note: In digital audio, 44,100 Hz (alternately represented as 44.1 kHz) is a common sampling frequency. Why 44.1kHz?

\n

Firstly, because the hearing range of human ears is roughly 20 Hz to 20,000 Hz. Via the Nyquist--Shannon sampling theorem, the sampling frequency must be greater than twice the maximum frequency one wishes to reproduce. Therefore, the sampling rate has to be greater than 40 kHz.

\n

Secondly, signals must be low-pass filtered before sampling, otherwise aliasing occurs. While an ideal low-pass filter would perfectly pass frequencies below 20 kHz (without attenuating them) and perfectly cut off frequencies above 20 kHz, in practice a transition band is necessary, where frequencies are partly attenuated. The wider this transition band is, the easier and more economical it is to make an anti-aliasing filter. The 44.1 kHz sampling frequency allows for a 2.05 kHz transition band.

\n

If you use this call above, you will get a stereo buffer with two channels, that when played back on an AudioContext running at 44100Hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames/44100Hz = 0.5 seconds.

\n
var context = new AudioContext();\nvar buffer = context.createBuffer(1, 22050, 22050);\n
\n

If you use this call, you will get a mono buffer with just one channel), that when played back on an AudioContext running at 44100Hz, will be automatically resampled to 44100Hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames/44100Hz = 1 second.

\n

Note: Audio resampling is very similar to image resizing. Say you've got a 16 x 16 image, but you want it to fill a 32x32 area. You resize (or resample) it. The result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, with the resized image taking up less space. Resampled audio is exactly the same: you save space, but in practice you will be unable to properly reproduce high frequency content, or treble sound.

\n

Planar versus interleaved buffers

\n

The Web Audio API uses a planar buffer format. The left and right channels are stored like this:

\n

LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)

\n

This is very common in audio processing: it makes it easy to process each channel independently.

\n

The alternative is to use an interleaved buffer format:

\n

LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)

\n

This format is very common for storing and playing back audio without much processing, for example a decoded MP3 stream.

\n

The Web Audio API exposes only planar buffers, because it's made for processing. It works with planar, but converts the audio to interleaved when it is sent to the sound card for playback. Conversely, when an MP3 is decoded, it starts off in interleaved format, but is converted to planar for processing.

\n

Audio channels

\n

Different audio buffers contain different numbers of channels: from the more basic mono (only one channel) and stereo (left and right channels), to more complex sets like quad and 5.1, which have different sound samples contained in each channel, leading to a richer sound experience. The channels are usually represented by standard abbreviations detailed in the table below:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameChannels
Mono0: M: mono
Stereo0: L: left 1: R: right
Quad0: L: left 1: R: right 2: SL: surround left 3: SR: surround right
5.10: L: left 1: R: right 2: C: center 3: LFE: subwoofer 4: SL: surround left 5: SR: surround right
\n

Up-mixing and down-mixing

\n

When the number of channels doesn't match between an input and an output, up- or down-mixing happens according the following rules. This can be somewhat controlled by setting the AudioNode.channelInterpretation property to speakers or discrete:

\n

Web Audio API

\n

The Web Audio API provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.

\n

Web audio concepts and usage

\n

The Web Audio API involves handling audio operations inside an audio context, and has been designed to allow modular routing. Basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. Several sources --- with different types of channel layout --- are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.

\n

Audio nodes are linked into chains and simple webs by their inputs and outputs. They typically start with one or more sources. Sources provide arrays of sound intensities (samples) at very small timeslices, often tens of thousands of them per second. These could be either computed mathematically (such as OscillatorNode), or they can be recordings from sound/video files (like AudioBufferSourceNode and MediaElementAudioSourceNode) and audio streams (MediaStreamAudioSourceNode). In fact, sound files are just recordings of sound intensities themselves, which come in from microphones or electric instruments, and get mixed down into a single, complicated wave.

\n

Outputs of these nodes could be linked to inputs of others, which mix or modify these streams of sound samples into different streams. A common modification is multiplying the samples by a value to make them louder or quieter (as is the case with GainNode). Once the sound has been sufficiently processed for the intended effect, it can be linked to the input of a destination (BaseAudioContext.destination), which sends the sound to the speakers or headphones. This last connection is only necessary if the user is supposed to hear the audio.

\n

A simple, typical workflow for web audio would look something like this:

\n
    \n
  1. Create audio context
    2. \n
  2. Inside the context, create sources --- such as <audio>, oscillator, stream
    3. \n
  3. Create effects nodes, such as reverb, biquad filter, panner, compressor
    4. \n
  4. Choose final destination of audio, for example your system speakers
    5. \n
  5. Connect the sources up to the effects, and the effects to the destination.
    6. \n
\n

\"A

\n

Timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate. So applications such as drum machines and sequencers are well within reach.

\n

The Web Audio API also allows us to control how audio is spatialized. Using a system based on a source-listener model, it allows control of the panning model and deals with distance-induced attenuation induced by a moving source (or moving listener).

\n

Note: You can read about the theory of the Web Audio API in a lot more detail in our article Basic concepts behind Web Audio API.

\n

Web Audio API target audience

\n

The Web Audio API can seem intimidating to those that aren't familiar with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a developer.

\n

It can be used to incorporate audio into your website or application, by providing atmosphere like futurelibrary.no, or auditory feedback on forms. However, it can also be used to create advanced interactive instruments. With that in mind, it is suitable for both developers and musicians alike.

\n

We have a simple introductory tutorial for those that are familiar with programming but need a good introduction to some of the terms and structure of the API.

\n

There's also a Basic Concepts Behind Web Audio API article, to help you understand the way digital audio works, specifically in the realm of the API. This also includes a good introduction to some of the concepts the API is built upon.

\n

Learning coding is like playing cards --- you learn the rules, then you play, then you go back and learn the rules again, then you play again. So if some of the theory doesn't quite fit after the first tutorial and article, there's an advanced tutorial which extends the first one to help you practice what you've learnt, and apply some more advanced techniques to build up a step sequencer.

\n

We also have other tutorials and comprehensive reference material available that covers all features of the API. See the sidebar on this page for more.

\n

If you are more familiar with the musical side of things, are familiar with music theory concepts, want to start building instruments, then you can go ahead and start building things with the advanced tutorial and others as a guide (the above-linked tutorial covers scheduling notes, creating bespoke oscillators and envelopes, as well as an LFO among other things.)

\n

If you aren't familiar with the programming basics, you might want to consult some beginner's JavaScript tutorials first and then come back here --- see our Beginner's JavaScript learning module for a great place to begin.

\n

Web Audio API interfaces

\n

The Web Audio API has a number of interfaces and associated events, which we have split up into nine categories of functionality.

\n

General audio graph definition

\n

General containers and definitions that shape audio graphs in Web Audio API usage.

\n

AudioContext

\n

The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode. An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an AudioContext before you do anything else, as everything happens inside a context.

\n

AudioNode

\n

The AudioNode interface represents an audio-processing module like an audio source (e.g. an HTML <audio> or <video> element), audio destination, intermediate processing module (e.g. a filter like BiquadFilterNode, or volume control like GainNode).

\n

AudioParam

\n

The AudioParam interface represents an audio-related parameter, like one of an AudioNode. It can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.

\n

AudioParamMap

\n

Provides a maplike interface to a group of AudioParam interfaces, which means it provides the methods forEach(), get(), has(), keys(), and values(), as well as a size property.

\n

BaseAudioContext

\n

The BaseAudioContext interface acts as a base definition for online and offline audio-processing graphs, as represented by AudioContext and OfflineAudioContext respectively. You wouldn't use BaseAudioContext directly --- you'd use its features via one of these two inheriting interfaces.

\n

The [ended](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event \"/en-US/docs/Web/Events/ended\") event

\n

The ended event is fired when playback has stopped because the end of the media was reached.

\n

Defining audio sources

\n

Interfaces that define audio sources for use in the Web Audio API.

\n

AudioScheduledSourceNode

\n

The AudioScheduledSourceNode is a parent interface for several types of audio source node interfaces. It is an AudioNode.

\n

OscillatorNode

\n

The OscillatorNode interface represents a periodic waveform, such as a sine or triangle wave. It is an AudioNode audio-processing module that causes a given frequency of wave to be created.

\n

AudioBuffer

\n

The AudioBuffer interface represents a short audio asset residing in memory, created from an audio file using the BaseAudioContext.decodeAudioData method, or created with raw data using BaseAudioContext.createBuffer. Once decoded into this form, the audio can then be put into an AudioBufferSourceNode.

\n

AudioBufferSourceNode

\n

The AudioBufferSourceNode interface represents an audio source consisting of in-memory audio data, stored in an AudioBuffer. It is an AudioNode that acts as an audio source.

\n

MediaElementAudioSourceNode

\n

The MediaElementAudioSourceNode interface represents an audio source consisting of an HTML5 <audio> or <video> element. It is an AudioNode that acts as an audio source.

\n

MediaStreamAudioSourceNode

\n

The MediaStreamAudioSourceNode interface represents an audio source consisting of a MediaStream (such as a webcam, microphone, or a stream being sent from a remote computer). If multiple audio tracks are present on the stream, the track whose id comes first lexicographically (alphabetically) is used. It is an AudioNode that acts as an audio source.

\n

MediaStreamTrackAudioSourceNode

\n

A node of type MediaStreamTrackAudioSourceNode represents an audio source whose data comes from a MediaStreamTrack. When creating the node using the createMediaStreamTrackSource() method to create the node, you specify which track to use. This provides more control than MediaStreamAudioSourceNode.

\n

Defining audio effects filters

\n

Interfaces for defining effects that you want to apply to your audio sources.

\n

BiquadFilterNode

\n

The BiquadFilterNode interface represents a simple low-order filter. It is an AudioNode that can represent different kinds of filters, tone control devices, or graphic equalizers. A BiquadFilterNode always has exactly one input and one output.

\n

ConvolverNode

\n

The ConvolverNode interface is an AudioNode that performs a Linear Convolution on a given AudioBuffer, and is often used to achieve a reverb effect.

\n

DelayNode

\n

The DelayNode interface represents a delay-line; an AudioNode audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.

\n

DynamicsCompressorNode

\n

The DynamicsCompressorNode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.

\n

GainNode

\n

The GainNode interface represents a change in volume. It is an AudioNode audio-processing module that causes a given gain to be applied to the input data before its propagation to the output.

\n

WaveShaperNode

\n

The WaveShaperNode interface represents a non-linear distorter. It is an AudioNode that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.

\n

PeriodicWave

\n

Describes a periodic waveform that can be used to shape the output of an OscillatorNode.

\n

IIRFilterNode

\n

Implements a general infinite impulse response (IIR) filter; this type of filter can be used to implement tone control devices and graphic equalizers as well.

\n

Defining audio destinations

\n

Once you are done processing your audio, these interfaces define where to output it.

\n

AudioDestinationNode

\n

The AudioDestinationNode interface represents the end destination of an audio source in a given context --- usually the speakers of your device.

\n

MediaStreamAudioDestinationNode

\n

The MediaStreamAudioDestinationNode interface represents an audio destination consisting of a WebRTC MediaStream with a single AudioMediaStreamTrack, which can be used in a similar way to a MediaStream obtained from getUserMedia(). It is an AudioNode that acts as an audio destination.

\n

Data analysis and visualization

\n

If you want to extract time, frequency, and other data from your audio, the AnalyserNode is what you need.

\n

AnalyserNode

\n

The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.

\n

Splitting and merging audio channels

\n

To split and merge audio channels, you'll use these interfaces.

\n

ChannelSplitterNode

\n

The ChannelSplitterNode interface separates the different channels of an audio source out into a set of mono outputs.

\n

ChannelMergerNode

\n

The ChannelMergerNode interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.

\n

Audio spatialization

\n

These interfaces allow you to add audio spatialization panning effects to your audio sources.

\n

AudioListener

\n

The AudioListener interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.

\n

PannerNode

\n

The PannerNode interface represents the position and behavior of an audio source signal in 3D space, allowing you to create complex panning effects.

\n

StereoPannerNode

\n

The StereoPannerNode interface represents a simple stereo panner node that can be used to pan an audio stream left or right.

\n

Audio processing in JavaScript

\n

Using audio worklets, you can define custom audio nodes written in JavaScript or WebAssembly. Audio worklets implement the Worklet interface, a lightweight version of the Worker interface.

\n

AudioWorklet

\n

The AudioWorklet interface is available through the AudioContext object's audioWorklet, and lets you add modules to the audio worklet to be executed off the main thread.

\n

AudioWorkletNode

\n

The AudioWorkletNode interface represents an AudioNode that is embedded into an audio graph and can pass messages to the corresponding AudioWorkletProcessor.

\n

AudioWorkletProcessor

\n

The AudioWorkletProcessor interface represents audio processing code running in a AudioWorkletGlobalScope that generates, processes, or analyses audio directly, and can pass messages to the corresponding AudioWorkletNode.

\n

AudioWorkletGlobalScope

\n

The AudioWorkletGlobalScope interface is a WorkletGlobalScope-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worklet thread rather than on the main thread.

\n

Obsolete: script processor nodes

\n

Before audio worklets were defined, the Web Audio API used the ScriptProcessorNode for JavaScript-based audio processing. Because the code runs in the main thread, they have bad performance. The ScriptProcessorNode is kept for historic reasons but is marked as deprecated.

\n

ScriptProcessorNode

\n

The ScriptProcessorNode interface allows the generation, processing, or analyzing of audio using JavaScript. It is an AudioNode audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the AudioProcessingEvent interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.

\n

[audioprocess](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode/audioprocess_event \"/en-US/docs/Web/Events/audioprocess\") (event)

\n

The audioprocess event is fired when an input buffer of a Web Audio API ScriptProcessorNode is ready to be processed.

\n

AudioProcessingEvent

\n

The AudioProcessingEvent represents events that occur when a ScriptProcessorNode input buffer is ready to be processed.

\n

Offline/background audio processing

\n

It is possible to process/render an audio graph very quickly in the background --- rendering it to an AudioBuffer rather than to the device's speakers --- with the following.

\n

OfflineAudioContext

\n

The OfflineAudioContext interface is an AudioContext interface representing an audio-processing graph built from linked together AudioNodes. In contrast with a standard AudioContext, an OfflineAudioContext doesn't really render the audio but rather generates it, as fast as it can, in a buffer.

\n

[complete](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext/complete_event \"/en-US/docs/Web/Events/complete\") (event)

\n

The complete event is fired when the rendering of an OfflineAudioContext is terminated.

\n

OfflineAudioCompletionEvent

\n

The OfflineAudioCompletionEvent represents events that occur when the processing of an OfflineAudioContext is terminated. The [complete](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext/complete_event \"/en-US/docs/Web/Events/complete\") event uses this interface.

\n

Guides and tutorials

\n

Advanced techniques: Creating and sequencing audio

\n

In this tutorial, we're going to cover sound creation and modification, as well as timing and scheduling. We're going to introduce sample loading, envelopes, filters, wavetables, and frequency modulation. If you're familiar with these terms and you're looking for an introduction to their application within with the Web Audio API, you've come to the right place.

\n

Background audio processing using AudioWorklet

\n

This article explains how to create an audio worklet processor and use it in a Web Audio application.

\n

Basic concepts behind Web Audio API

\n

This article explains some of the audio theory behind how the features of the Web Audio API work, to help you make informed decisions while designing how audio is routed through your app.

\n

Controlling multiple parameters with ConstantSourceNode

\n

This article demonstrates how to use a ConstantSourceNode to link multiple parameters together so they share the same value, which can be changed by setting the value of the ConstantSourceNode.offset parameter.

\n

Example and tutorial: Simple synth keyboard

\n

This article presents the code and working demo of a video keyboard you can play using the mouse. The keyboard allows you to switch among the standard waveforms as well as one custom waveform, and you can control the main gain using a volume slider beneath the keyboard. This example makes use of the following Web API interfaces: AudioContext, OscillatorNode, PeriodicWave, and GainNode.

\n

Migrating from webkitAudioContext

\n

In this article, we cover the differences in Web Audio API since it was first implemented in WebKit and how to update your code to use the modern Web Audio API.

\n

Tools for analyzing Web Audio usage

\n

While working on your Web Audio API code, you may find that you need tools to analyze the graph of nodes you create or to otherwise debug your work. This article discusses tools available to help you do that.

\n

Using IIR filters

\n

The IIRFilterNode interface of the Web Audio API is an AudioNode processor that implements a general infinite impulse response (IIR) filter; this type of filter can be used to implement tone control devices and graphic equalizers, and the filter response parameters can be specified, so that it can be tuned as needed. This article looks at how to implement one, and use it in a simple example.

\n

Using the Web Audio API

\n

Let's take a look at getting started with the Web Audio API. We'll briefly look at some concepts, then study a simple boombox example that allows us to load an audio track, play and pause it, and change its volume and stereo panning.

\n

Visualizations with Web Audio API

\n

One of the most interesting features of the Web Audio API is the ability to extract frequency, waveform, and other data from your audio source, which can then be used to create visualizations. This article explains how, and provides a couple of basic use cases.

\n

Web Audio API best practices

\n

There's no strict right or wrong way when writing creative code. As long as you consider security, performance, and accessibility, you can adapt to your own style. In this article, we'll share a number of best practices --- guidelines, tips, and tricks for working with the Web Audio API.

\n

Web audio spatialization basics

\n

As if its extensive variety of sound processing (and other) options wasn't enough, the Web Audio API also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a 3D game. The official term for this is spatialization, and this article will cover the basics of how to implement such a system.

"},{"url":"/docs/community/","relativePath":"docs/community/index.md","relativeDir":"docs/community","base":"index.md","name":"index","frontmatter":{"title":"Community","excerpt":"We'd love it if you participate in the Libris community. Find out how to get connected.","seo":{"title":"Connect ","description":"This is the community page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Where To Get Support","keyName":"property"},{"name":"og:description","value":"This is the community page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Where To Get Support"},{"name":"twitter:description","value":"This is the community page"}]},"template":"docs"},"html":"
\n\n## ➤ Connect with me:\n

\n \"email\"/\"facebook\"/\"twitter\"/\"youtube\"/\"instagram\"/\"pinterest\"/\"linkedin\"/\n \"medium\"/\"spotify\"/\n

\n
\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
GitHubGitlabBitbucketMediumcode pen
ReplitQuoraReditwebcomponents.devdev.to
runkitObservable Notebooksnpmstack-exchangeObservable Notebooks
UpworkNotionAngelListStackSharePlunk
giphykofiCodewarsDribbleGlitch
contentfulNetlifyStackblitzVercelYoutube
wordpressEdabitVinmeojs fiddle
Google Developer ProfileGitteeWakatime
\n
\n
\nTweets by bgooonz \n "},{"url":"/docs/career/dev-interview/","relativePath":"docs/career/dev-interview.md","relativeDir":"docs/career","base":"dev-interview.md","name":"dev-interview","frontmatter":{"title":"Developer Interview Questions","weight":0,"excerpt":"Developer Interview Questions","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"\n \n

Table of Contents

\n\n

Programming Languages/Frameworks/Platforms

\n

Android

\n\n

AngularJS

\n\n

Angular

\n\n

BackboneJS

\n\n

C++

\n\n

C

\n\n

C

\n\n

.NET

\n\n

Clojure

\n\n

CSS

\n\n

Cucumber

\n\n

Django

\n\n

Docker

\n\n

EmberJS

\n\n

Erlang

\n\n

Golang

\n\n

GraphQl

\n\n

HTML

\n\n

Ionic

\n\n

iOS

\n\n

Java

\n\n

JavaScript

\n\n

jQuery

\n\n

Front-end build tools

\n\n

KnockoutJS

\n\n

Less

\n\n

Lisp

\n\n

NodeJS

\n\n

Objective-C

\n\n

PHP

\n\n

Python

\n\n

Ruby on Rails

\n\n

ReactJS

\n\n

Ruby

\n\n

Rust

\n\n

Sass

\n\n

Scala

\n\n

SharePoint

\n\n

Shell

\n\n

Spark

\n\n

Swift

\n\n

Vue.js

\n\n

WordPress

\n\n

TypeScript

\n\n

Database technologies

\n

Cassandra

\n\n

Microsoft Access

\n\n

MongoDB

\n\n

MySQL

\n\n

Neo4j

\n\n

Oracle

\n\n

Postgres

\n\n

SQL

\n\n

SQLite

\n\n

Caching technologies

\n

Memcached

\n\n

Redis

\n\n

OS

\n

Linux

\n\n

Windows

\n\n

DevOps

\n\n

Algorithms

\n\n

Blockchain

\n\n

Coding exercises

\n\n

Comprehensive lists

\n\n

Design Patterns

\n\n

Data structures

\n\n

Networks

\n\n

Security

\n\n

Data Science

\n"},{"url":"/docs/community/video-chat/","relativePath":"docs/community/video-chat.md","relativeDir":"docs/community","base":"video-chat.md","name":"video-chat","frontmatter":{"title":"Video Chat","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Zumzi Instant Messenger

\n\n

"},{"url":"/docs/content/bash-intro/","relativePath":"docs/content/bash-intro.md","relativeDir":"docs/content","base":"bash-intro.md","name":"bash-intro","frontmatter":{"title":"Tuning Command Line History in Bash - ShellHacks","weight":0,"seo":{"title":" Tuning Command Line History in Bash - ShellHacks","description":" Tips that can help you to improve you Bash history file. You will learn how to add date and time to bash history file, increase history size, ignore specific commands and much more … Every command that you enter, is stored in the file ~/.bash_history. Run history to see your last commands.","robots":[],"extra":[]},"template":"docs"},"html":"

7 Tips - Tuning Command Line History in Bash - ShellHacks

\n
\n

7 Tips that can help you to improve you Bash history file. You will learn how to add date and time to bash history file, increase history size, ignore specific commands and much more … Every command that you enter, is stored in the file ~/.bash_history. Run history to see your last commands. You can […]

\n
\n

7 Tips that can help you to improve you Bash history file.

\n

You will learn how to add date and time to bash history file, increase history size, ignore specific commands and much more …

\n

Every command that you enter, is stored in the file ~/.bash_history. Run history to see your last commands.

\n

You can improve your Bash history, appending different environment variables to your ~/.bashrc file.

\n

After modifying ~/.bashrc file, execute the following command to apply changes:

\n

source ~/.bashrc

\n

1. Add Date and Time to Bash History

\n

Sometimes it would be very nice to know when some command got executed.

\n

Set HISTTIMEFORMAT to print the time stamps associated with each history entry.

\n

Append the following line to ~/.bashrc file:

\n

export HISTTIMEFORMAT=\"%h %d %H:%M:%S \"

\n

Now, when you type history, it will show something like:

\n

113 Jun 08 16:31:06 sudo ifconfig\n114 Jun 08 16:31:10 top\n115 Jun 08 16:31:19 ping 8.8.8.8\n116 Jun 08 16:31:22 history

\n

2. Increase Bash History Size

\n

Increase HISTSIZE - the number of commands to remember in the command history (the default value is 500).

\n

export HISTSIZE=10000

\n

Increase HISTFILESIZE - the maximum number of lines contained in the history file (the default value is 500).

\n

export HISTFILESIZE=10000

\n

3. Append Bash Commands to History File

\n

Bash overwrites .bash_history file?

\n

To append commands to the history file, rather than overwrite it, add the following line to ~/.bashrc:

\n

shopt -s histappend

\n

4. Store Bash History Immediately

\n

By default, Bash only records a session to the .bash_history file when the session terminates.

\n

This means that if you crash or your session terminates improperly, you lose the history up to that point.

\n

Use $PROMPT_COMMAND variable to save each command right after it has been executed.

\n

Append the following line to ~/.bashrc file, if the variable $PROMPT_COMMAND hasn't been set yet:

\n

PROMPT_COMMAND='history -a'

\n

Append the following line, if the variable $PROMPT_COMMAND has already been set:

\n

PROMPTCOMMAND='$PROMPTCOMMAND; history -a'

\n

5. Control Bash History

\n

HISTCONTROL is a colon-separated list of values controlling how commands are saved in the history file.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ValueDescription
ignorespacedon't save lines which begin with a character
ignoredupsdon't save lines matching the previous history entry
ignorebothuse both 'ignorespace' and 'ignoredups'
erasedupseliminate duplicates across the whole history
\n

Example:

\n

export HISTCONTROL=ignorespace:erasedups

\n

6. Ignore Specific Commands

\n

HISTIGNORE is a colon-separated list of patterns used to decide which command lines should be saved in the history file.

\n

Don't save ls, ps and history commands:

\n

export HISTIGNORE=\"ls:ps:history\"

\n

Don't save commands with s in the beginig:

\n

export HISTIGNORE=\"s*\"

\n

7. Use one command per line

\n

Store multi-line commands in one history entry:

\n

shopt -s cmdhist

\n

Change the History File Name

\n

Use HISTFILE to change the name of the file in which Bash history is saved. The default value is ~/.bash_history.

\n

export HISTFILE=~/.custom_file

\n

Source

"},{"url":"/docs/content/algo/","relativePath":"docs/content/algo.md","relativeDir":"docs/content","base":"algo.md","name":"algo","frontmatter":{"title":"Algorithms & Data Structures","subtitle":"The Algorithms & Data Structures provides you with a blueprint of default post and page styles.","image":"images/5.jpg","seo":{"title":"Algorithms & Data Structures","description":"A reference for suggested typographic treatment and styles for your content","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Algorithms & Data Structures","keyName":"property"},{"name":"og:description","value":"A reference for suggested typographic treatment and styles for your content","keyName":"property"},{"name":"og:image","value":"images/5.jpg","keyName":"property","relativeUrl":true},{"name":"twitter:card","value":"summary_large_image"},{"name":"twitter:title","value":"Algorithms & Data Structures"},{"name":"twitter:description","value":"A reference for suggested typographic treatment and styles for your content"},{"name":"twitter:image","value":"images/5.jpg","relativeUrl":true}]},"template":"docs"},"html":"

Fundamental Data Structures In JavaScript

\n
\n
\n
\n

Algorithms

\n
\n\n
\n
\n
\n

The Algos Bgoonz Branch

\n
\n\n
\n
\n
\n
\n\n

Fundamental Data Structures In JavaScript

\n

Data structures in JavaScript

\n

Here's a website I created to practice data structures!\ndirectory\nEdit descriptionds-algo-official-c3dw6uapg-bgoonz.vercel.app

\n

Here's the repo that the website is built on:\nbgoonz/DS-ALGO-OFFICIAL\nNavigation ####Author:Bryan Guner Big O notation is the language we use for talking about how long an algorithm takes…github.com

\n

Resources (article content below):

\n

Videos

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Books

\n\n

Coding practice

\n\n

Courses

\n\n

Guides

\n\n

space

\n
\n

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.

\n
\n

time

\n
\n

The time complexity for a data structure is in general more diverse than its space complexity.

\n
\n

Several operations

\n
\n

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.

\n
\n

Dependent on data

\n
\n

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.

\n
\n
    \n
  • The best-case complexity: when the data looks the best
    • \n
  • The worst-case complexity: when the data looks the worst
    • \n
  • The average-case complexity: when the data looks average
    • \n
\n

Big O notation

\n

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.

\n

The Array data structure

\n

\n

Definition

\n

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

\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion

\n

O(1) O(n) O(1) O(n)

\n
class ArrayADT {\n    constructor() {\n        this.array = [];\n    }\n\n    add(data) {\n        this.array.push(data);\n    }\n\n    remove(data) {\n        this.array = this.array.filter((current) => current !== data);\n    }\n\n    search(data) {\n        const foundIndex = this.array.indexOf(data);\n        if (foundIndex === -1) {\n            return foundIndex;\n        }\n\n        return null;\n    }\n\n    getAtIndex(index) {\n        return this.array[index];\n    }\n\n    length() {\n        return this.array.length;\n    }\n\n    print() {\n        console.log(this.array.join(' '));\n    }\n}\n\nconst array = new ArrayADT();\nconsole.log('const array = new ArrayADT();: ', array);\nconsole.log('-------------------------------');\n\nconsole.log('array.add(1): ', array.add(1));\narray.add(3);\narray.add(4);\nconsole.log('array.add(2);: ', array.add(2), 'array.add(3);', array.add(3), 'array.add(4); ', array.add(4));\n\nconsole.log('-------------------------------');\narray.print();\nconsole.log('-------------------------------');\n\nconsole.log('search 3 gives index 2:', array.search(3));\nconsole.log('-------------------------------');\n\nconsole.log('getAtIndex 2 gives 3:', array.getAtIndex(2));\nconsole.log('-------------------------------');\n\nconsole.log('length is 4:', array.length());\nconsole.log('-------------------------------');\n\narray.remove(3);\narray.print();\nconsole.log('-------------------------------');\n\narray.add(5);\narray.add(5);\narray.print();\nconsole.log('-------------------------------');\n\narray.remove(5);\narray.print();\nconsole.log('-------------------------------');\n/*\n     ~ final : (master) node 01-array.js \n    const array = new ArrayADT();:  ArrayADT { array: [] }\n    -------------------------------\n    array.add(1):  undefined\n    array.add(2);:  undefined array.add(3); undefined array.add(4);  undefined\n    -------------------------------\n    1 3 4 2 3 4\n    -------------------------------\n    search 3 gives index 2: null\n    -------------------------------\n    getAtIndex 2 gives 3: 4\n    -------------------------------\n    length is 4: 6\n    -------------------------------\n    1 4 2 4\n    -------------------------------\n    1 4 2 4 5 5\n    -------------------------------\n    1 4 2 4\n    -------------------------------\n     ~ final : (master) \n     */\n
\n

\n

indexvalue0 … this is the first value, stored at zero position

\n
    \n
  1. The index of an array runs in sequence
    2. \n
  2. This could be useful for storing data that are required to be ordered, such as rankings or queues
    3. \n
  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
    4. \n
\n
    // 1. Creating Arrays\n    let firstArray = [\"a\",\"b\",\"c\"];\n    let secondArray = [\"d\",\"e\",\"f\"];\n\n    // 2. Access an Array Item\n    console.log(firstArray[0]); // Results: \"a\"\n\n    // 3. Loop over an Array\n    firstArray.forEach(function(item, index, array){\n        console.log(item, index);\n    });\n    // Results:\n    // a 0\n    // b 1\n    // c 2\n\n    // 4. Add new item to END of array\n    secondArray.push('g');\n    console.log(secondArray);\n    // Results: [\"d\",\"e\",\"f\", \"g\"]\n\n    // 5. Remove item from END of array\n    secondArray.pop();\n    console.log(secondArray);\n    // Results: [\"d\",\"e\",\"f\"]\n\n    // 6. Remove item from FRONT of array\n    secondArray.shift();\n    console.log(secondArray);\n    // Results: [\"e\",\"f\"]\n\n    // 7. Add item to FRONT of array\n    secondArray.unshift(\"d\");\n    console.log(secondArray);\n    // Results: [\"d\",\"e\",\"f\"]\n\n    // 8. Find INDEX of an item in array\n    let position = secondArray.indexOf('f');\n    // Results: 2\n\n    // 9. Remove Item by Index Position\n    secondArray.splice(position, 1);\n    console.log(secondArray);\n    // Note, the second argument, in this case \"1\",\n    // represent the number of array elements to be removed\n    // Results:  [\"d\",\"e\"]\n\n    // 10. Copy an Array\n    let shallowCopy = secondArray.slice();\n    console.log(secondArray);\n    console.log(shallowCopy);\n    // Results: ShallowCopy === [\"d\",\"e\"]\n\n    // 11. JavaScript properties that BEGIN with a digit MUST be accessed using bracket notation\n    renderer.3d.setTexture(model, 'character.png');     // a syntax error\n    renderer['3d'].setTexture(model, 'character.png');  // works properly\n\n\n    // 12. Combine two Arrays\n    let thirdArray = firstArray.concat(secondArray);\n    console.log(thirdArray);\n    // [\"a\",\"b\",\"c\", \"d\", \"e\"];\n\n    // 13. Combine all Array elements into a string\n    console.log(thirdArray.join()); // Results: a,b,c,d,e\n    console.log(thirdArray.join('')); // Results: abcde\n    console.log(thirdArray.join('-')); // Results: a-b-c-d-e\n\n    // 14. Reversing an Array (in place, i.e. destructive)\n    console.log(thirdArray.reverse()); // [\"e\", \"d\", \"c\", \"b\", \"a\"]\n\n    // 15. sort\n    let unsortedArray = [\"Alphabet\", \"Zoo\", \"Products\", \"Computer Science\", \"Computer\"];\n    console.log(unsortedArray.sort());\n    // Results: [\"Alphabet\", \"Computer\", \"Computer Science\", \"Products\", \"Zoo\" ]\n
\n

2. Objects

\n

Think of objects as a logical grouping of a bunch of properties.

\n

Properties could be some variable that it's storing or some methods that it's using.

\n

I also visualize an object as a table.

\n

The main difference is that object's \"index\" need not be numbers and is not necessarily sequenced.

\n

\n
// 16. Creating an Object\n\nlet newObj = {\n    name: \"I'm an object\",\n    values: [1, 10, 11, 20],\n    others: '',\n    '1property': 'example of property name starting with digit'\n};\n\n// 17. Figure out what keys/properties are in an object\nconsole.log(Object.keys(newObj));\n// Results: [ 'name', 'values', 'others', '1property' ]\n\n// 18. Show all values stored in the object\nconsole.log(Object.values(newObj));\n\n// Results:\n// [ 'I\\'m an object',\n//   [ 1, 10, 11, 20 ],\n//   '',\n//   'example of property name starting with digit' ]\n\n// 19. Show all key and values of the object\nfor (let [key, value] of Object.entries(newObj)) {\n    console.log(`${key}: ${value}`);\n}\n// Results:\n// name: I'm an object\n// values: 1,10,11,20\n// others:\n// 1property: example of property name starting with digit\n\n// 20. Accessing Object's Properties\n// Two different ways to access properties, both produce same results\nconsole.log(newObj.name);\nconsole.log(newObj['name']);\n\n// But if the property name starts with a digit,\n// we CANNOT use dot notation\nconsole.log(newObj['1property']);\n\n// 21. Adding a Method to an Object\nnewObj.helloWorld = function () {\n    console.log('Hello World from inside an object!');\n};\n\n// 22. Invoking an Object's Method\nnewObj.helloWorld();\n
\n

The Hash Table

\n

\n

\n

Definition

\n
\n

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

\n
\n

Hash Tables are considered the more efficient data structure for lookup and for this reason, they are widely used.

\n

Complexity\nAverage\nAccess Search Insertion Deletion

\n
    \n
  • \n

    O(1) O(1) O(1)

    \n
    \n

    The code

    \n
    \n
    • \n
\n

Note, here I am storing another object for every hash in my Hash Table.

\n
class HashTable {\n    constructor(size) {\n        this.values = {};\n        this.numberOfValues = 0;\n        this.size = size;\n    }\n    add(key, value) {\n        let hash = this.calculateHash(key);\n        if (!this.values.hasOwnProperty(hash)) {\n            this.values[hash] = {};\n        }\n        if (!this.values[hash].hasOwnProperty(key)) {\n            this.numberOfValues++;\n        }\n        this.values[hash][key] = value;\n    }\n    remove(key) {\n        let hash = this.calculateHash(key);\n        if (this.values.hasOwnProperty(hash) && this.values[hash].hasOwnProperty(key)) {\n            delete this.values[hash][key];\n            this.numberOfValues--;\n        }\n    }\n    calculateHash(key) {\n        return key.toString().length % this.size;\n    }\n    search(key) {\n        let hash = this.calculateHash(key);\n        if (this.values.hasOwnProperty(hash) && this.values[hash].hasOwnProperty(key)) {\n            return this.values[hash][key];\n        } else {\n            return null;\n        }\n    }\n    length() {\n        return this.numberOfValues;\n    }\n    print() {\n        let string = '';\n        for (let value in this.values) {\n            for (let key in this.values[value]) {\n                string += this.values[value][key] + ' ';\n            }\n        }\n        console.log(string.trim());\n    }\n}\nlet hashTable = new HashTable(3);\nhashTable.add('first', 1);\nhashTable.add('second', 2);\nhashTable.add('third', 3);\nhashTable.add('fourth', 4);\nhashTable.add('fifth', 5);\nhashTable.print(); // => 2 4 1 3 5\nconsole.log('length gives 5:', hashTable.length()); // => 5\nconsole.log('search second gives 2:', hashTable.search('second')); // => 2\nhashTable.remove('fourth');\nhashTable.remove('first');\nhashTable.print(); // => 2 3 5\nconsole.log('length gives 3:', hashTable.length()); // => 3\n/*\n       ~ js-files : (master) node hash.js \n    2 4 1 3 5\n    length gives 5: 5\n    search second gives 2: 2\n    2 3 5\n    length gives 3: 3\n    */\n
\n

The Set

\n

Sets

\n

Sets are pretty much what it sounds like. It's the same intuition as Set in Mathematics. I visualize Sets as Venn Diagrams.

\n
// 23. Creating a new Set\nlet newSet = new Set();\n\n// 24. Adding new elements to a set\nnewSet.add(1); // Set[1]\nnewSet.add('text'); // Set[1, \"text\"]\n\n// 25. Check if element is in set\nnewSet.has(1); // true\n\n// 24. Check size of set\nconsole.log(newSet.size); // Results: 2\n\n// 26. Delete element from set\nnewSet.delete(1); // Set[\"text\"]\n\n// 27. Set Operations: isSuperSet\nfunction isSuperset(set, subset) {\n    for (let elem of subset) {\n        if (!set.has(elem)) {\n            return false;\n        }\n    }\n    return true;\n}\n// 28. Set Operations: union\nfunction union(setA, setB) {\n    let _union = new Set(setA);\n    for (let elem of setB) {\n        _union.add(elem);\n    }\n    return _union;\n}\n\n// 29. Set Operations: intersection\nfunction intersection(setA, setB) {\n    let _intersection = new Set();\n    for (let elem of setB) {\n        if (setA.has(elem)) {\n            _intersection.add(elem);\n        }\n    }\n    return _intersection;\n}\n// 30. Set Operations: symmetricDifference\nfunction symmetricDifference(setA, setB) {\n    let _difference = new Set(setA);\n    for (let elem of setB) {\n        if (_difference.has(elem)) {\n            _difference.delete(elem);\n        } else {\n            _difference.add(elem);\n        }\n    }\n    return _difference;\n}\n// 31. Set Operations: difference\nfunction difference(setA, setB) {\n    let _difference = new Set(setA);\n    for (let elem of setB) {\n        _difference.delete(elem);\n    }\n    return _difference;\n}\n\n// Examples\nlet setA = new Set([1, 2, 3, 4]);\nlet setB = new Set([2, 3]);\nlet setC = new Set([3, 4, 5, 6]);\n\nconsole.log(isSuperset(setA, setB)); // => true\nconsole.log(union(setA, setC)); // => Set [1, 2, 3, 4, 5, 6]\nconsole.log(intersection(setA, setC)); // => Set [3, 4]\nconsole.log(symmetricDifference(setA, setC)); // => Set [1, 2, 5, 6]\nconsole.log(difference(setA, setC)); // => Set [1, 2]\n
\n

\n

Definition

\n
\n

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

\n
\n

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…

\n

Complexity\nAverage\nAccess Search Insertion Deletion

\n
    \n
  • \n

    O(n) O(n) O(n)

    \n
    \n

    The code

    \n
    \n
    • \n
\n
function Set() {\n    this.values = [];\n    this.numberOfValues = 0;\n}\n\nSet.prototype.add = function (value) {\n    if (!~this.values.indexOf(value)) {\n        this.values.push(value);\n        this.numberOfValues++;\n    }\n};\nSet.prototype.remove = function (value) {\n    let index = this.values.indexOf(value);\n    if (~index) {\n        this.values.splice(index, 1);\n        this.numberOfValues--;\n    }\n};\nSet.prototype.contains = function (value) {\n    return this.values.indexOf(value) !== -1;\n};\nSet.prototype.union = function (set) {\n    let newSet = new Set();\n    set.values.forEach(function (value) {\n        newSet.add(value);\n    });\n    this.values.forEach(function (value) {\n        newSet.add(value);\n    });\n    return newSet;\n};\nSet.prototype.intersect = function (set) {\n    let newSet = new Set();\n    this.values.forEach(function (value) {\n        if (set.contains(value)) {\n            newSet.add(value);\n        }\n    });\n    return newSet;\n};\nSet.prototype.difference = function (set) {\n    let newSet = new Set();\n    this.values.forEach(function (value) {\n        if (!set.contains(value)) {\n            newSet.add(value);\n        }\n    });\n    return newSet;\n};\nSet.prototype.isSubset = function (set) {\n    return set.values.every(function (value) {\n        return this.contains(value);\n    }, this);\n};\nSet.prototype.length = function () {\n    return this.numberOfValues;\n};\nSet.prototype.print = function () {\n    console.log(this.values.join(' '));\n};\n\nlet set = new Set();\nset.add(1);\nset.add(2);\nset.add(3);\nset.add(4);\nset.print(); // => 1 2 3 4\nset.remove(3);\nset.print(); // => 1 2 4\nconsole.log('contains 4 is true:', set.contains(4)); // => true\nconsole.log('contains 3 is false:', set.contains(3)); // => false\nconsole.log('---');\nlet set1 = new Set();\nset1.add(1);\nset1.add(2);\nlet set2 = new Set();\nset2.add(2);\nset2.add(3);\nlet set3 = set2.union(set1);\nset3.print(); // => 1 2 3\nlet set4 = set2.intersect(set1);\nset4.print(); // => 2\nlet set5 = set.difference(set3); // 1 2 4 diff 1 2 3\nset5.print(); // => 4\nlet set6 = set3.difference(set); // 1 2 3 diff 1 2 4\nset6.print(); // => 3\nconsole.log('set1 subset of set is true:', set.isSubset(set1)); // => true\nconsole.log('set2 subset of set is false:', set.isSubset(set2)); // => false\nconsole.log('set1 length gives 2:', set1.length()); // => 2\nconsole.log('set3 length gives 3:', set3.length()); // => 3\n
\n

The Singly Linked List

\n

\n

Definition

\n
\n

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.

\n
\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(1)

\n
\n

The code

\n
\n
function Node(data) {\n    this.data = data;\n    this.next = null;\n}\n\nfunction SinglyLinkedList() {\n    this.head = null;\n    this.tail = null;\n    this.numberOfValues = 0;\n}\n\nSinglyLinkedList.prototype.add = function (data) {\n    let node = new Node(data);\n    if (!this.head) {\n        this.head = node;\n        this.tail = node;\n    } else {\n        this.tail.next = node;\n        this.tail = node;\n    }\n    this.numberOfValues++;\n};\nSinglyLinkedList.prototype.remove = function (data) {\n    let previous = this.head;\n    let current = this.head;\n    while (current) {\n        if (current.data === data) {\n            if (current === this.head) {\n                this.head = this.head.next;\n            }\n            if (current === this.tail) {\n                this.tail = previous;\n            }\n            previous.next = current.next;\n            this.numberOfValues--;\n        } else {\n            previous = current;\n        }\n        current = current.next;\n    }\n};\nSinglyLinkedList.prototype.insertAfter = function (data, toNodeData) {\n    let current = this.head;\n    while (current) {\n        if (current.data === toNodeData) {\n            let node = new Node(data);\n            if (current === this.tail) {\n                this.tail.next = node;\n                this.tail = node;\n            } else {\n                node.next = current.next;\n                current.next = node;\n            }\n            this.numberOfValues++;\n        }\n        current = current.next;\n    }\n};\nSinglyLinkedList.prototype.traverse = function (fn) {\n    let current = this.head;\n    while (current) {\n        if (fn) {\n            fn(current);\n        }\n        current = current.next;\n    }\n};\nSinglyLinkedList.prototype.length = function () {\n    return this.numberOfValues;\n};\nSinglyLinkedList.prototype.print = function () {\n    let string = '';\n    let current = this.head;\n    while (current) {\n        string += current.data + ' ';\n        current = current.next;\n    }\n    console.log(string.trim());\n};\n\nlet singlyLinkedList = new SinglyLinkedList();\nsinglyLinkedList.print(); // => ''\nsinglyLinkedList.add(1);\nsinglyLinkedList.add(2);\nsinglyLinkedList.add(3);\nsinglyLinkedList.add(4);\nsinglyLinkedList.print(); // => 1 2 3 4\nconsole.log('length is 4:', singlyLinkedList.length()); // => 4\nsinglyLinkedList.remove(3); // remove value\nsinglyLinkedList.print(); // => 1 2 4\nsinglyLinkedList.remove(9); // remove non existing value\nsinglyLinkedList.print(); // => 1 2 4\nsinglyLinkedList.remove(1); // remove head\nsinglyLinkedList.print(); // => 2 4\nsinglyLinkedList.remove(4); // remove tail\nsinglyLinkedList.print(); // => 2\nconsole.log('length is 1:', singlyLinkedList.length()); // => 1\nsinglyLinkedList.add(6);\nsinglyLinkedList.print(); // => 2 6\nsinglyLinkedList.insertAfter(3, 2);\nsinglyLinkedList.print(); // => 2 3 6\nsinglyLinkedList.insertAfter(4, 3);\nsinglyLinkedList.print(); // => 2 3 4 6\nsinglyLinkedList.insertAfter(5, 9); // insertAfter a non existing node\nsinglyLinkedList.print(); // => 2 3 4 6\nsinglyLinkedList.insertAfter(5, 4);\nsinglyLinkedList.insertAfter(7, 6); // insertAfter the tail\nsinglyLinkedList.print(); // => 2 3 4 5 6 7\nsinglyLinkedList.add(8); // add node with normal method\nsinglyLinkedList.print(); // => 2 3 4 5 6 7 8\nconsole.log('length is 7:', singlyLinkedList.length()); // => 7\nsinglyLinkedList.traverse(function (node) {\n    node.data = node.data + 10;\n});\nsinglyLinkedList.print(); // => 12 13 14 15 16 17 18\nsinglyLinkedList.traverse(function (node) {\n    console.log(node.data);\n}); // => 12 13 14 15 16 17 18\nconsole.log('length is 7:', singlyLinkedList.length()); // => 7\n
\n

The Doubly Linked List

\n

\n

Definition

\n
\n

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

\n
\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(1)

\n
\n

The code

\n
\n
class Node {\n    constructor(data) {\n        this.data = data;\n        this.previous = null;\n        this.next = null;\n    }\n}\nclass DoublyLinkedList {\n    constructor() {\n        this.head = null;\n        this.tail = null;\n        this.numberOfValues = 0;\n    }\n\n    add(data) {\n        let node = new Node(data);\n        if (!this.head) {\n            this.head = node;\n            this.tail = node;\n        } else {\n            node.previous = this.tail;\n            this.tail.next = node;\n            this.tail = node;\n        }\n        this.numberOfValues++;\n    }\n    remove(data) {\n        let current = this.head;\n        while (current) {\n            if (current.data === data) {\n                if (current === this.head && current === this.tail) {\n                    this.head = null;\n                    this.tail = null;\n                } else if (current === this.head) {\n                    this.head = this.head.next;\n                    this.head.previous = null;\n                } else if (current === this.tail) {\n                    this.tail = this.tail.previous;\n                    this.tail.next = null;\n                } else {\n                    current.previous.next = current.next;\n                    current.next.previous = current.previous;\n                }\n                this.numberOfValues--;\n            }\n            current = current.next;\n        }\n    }\n    insertAfter(data, toNodeData) {\n        let current = this.head;\n        while (current) {\n            if (current.data === toNodeData) {\n                let node = new Node(data);\n                if (current === this.tail) {\n                    this.add(data);\n                } else {\n                    current.next.previous = node;\n                    node.previous = current;\n                    node.next = current.next;\n                    current.next = node;\n                    this.numberOfValues++;\n                }\n            }\n            current = current.next;\n        }\n    }\n    traverse(fn) {\n        let current = this.head;\n        while (current) {\n            if (fn) {\n                fn(current);\n            }\n            current = current.next;\n        }\n    }\n    traverseReverse(fn) {\n        let current = this.tail;\n        while (current) {\n            if (fn) {\n                fn(current);\n            }\n            current = current.previous;\n        }\n    }\n    length() {\n        return this.numberOfValues;\n    }\n    print() {\n        let string = \"\";\n        let current = this.head;\n        while (current) {\n            string += current.data + \" \";\n            current = current.next;\n        }\n        console.log(string.trim());\n    }\n}\n\nlet doublyLinkedList = new DoublyLinkedList();\ndoublyLinkedList.print(); // => ''\ndoublyLinkedList.add(1);\ndoublyLinkedList.add(2);\ndoublyLinkedList.add(3);\ndoublyLinkedList.add(4);\ndoublyLinkedList.print(); // => 1 2 3 4\nconsole.log(\"length is 4:\", doublyLinkedList.length()); // => 4\ndoublyLinkedList.remove(3); // remove value\ndoublyLinkedList.print(); // => 1 2 4\ndoublyLinkedList.remove(9); // remove non existing value\ndoublyLinkedList.print(); // => 1 2 4\ndoublyLinkedList.remove(1); // remove head\ndoublyLinkedList.print(); // => 2 4\ndoublyLinkedList.remove(4); // remove tail\ndoublyLinkedList.print(); // => 2\nconsole.log(\"length is 1:\", doublyLinkedList.length()); // => 1\ndoublyLinkedList.remove(2); // remove tail, the list should be empty\ndoublyLinkedList.print(); // => ''\nconsole.log(\"length is 0:\", doublyLinkedList.length()); // => 0\ndoublyLinkedList.add(2);\ndoublyLinkedList.add(6);\ndoublyLinkedList.print(); // => 2 6\ndoublyLinkedList.insertAfter(3, 2);\ndoublyLinkedList.print(); // => 2 3 6\ndoublyLinkedList.traverseReverse(function (node) {\n    console.log(node.data);\n});\ndoublyLinkedList.insertAfter(4, 3);\ndoublyLinkedList.print(); // => 2 3 4 6\ndoublyLinkedList.insertAfter(5, 9); // insertAfter a non existing node\ndoublyLinkedList.print(); // => 2 3 4 6\ndoublyLinkedList.insertAfter(5, 4);\ndoublyLinkedList.insertAfter(7, 6); // insertAfter the tail\ndoublyLinkedList.print(); // => 2 3 4 5 6 7\ndoublyLinkedList.add(8); // add node with normal method\ndoublyLinkedList.print(); // => 2 3 4 5 6 7 8\nconsole.log(\"length is 7:\", doublyLinkedList.length()); // => 7\ndoublyLinkedList.traverse(function (node) {\n    node.data = node.data + 10;\n});\ndoublyLinkedList.print(); // => 12 13 14 15 16 17 18\ndoublyLinkedList.traverse(function (node) {\n    console.log(node.data);\n}); // => 12 13 14 15 16 17 18\nconsole.log(\"length is 7:\", doublyLinkedList.length()); // => 7\ndoublyLinkedList.traverseReverse(function (node) {\n    console.log(node.data);\n}); // => 18 17 16 15 14 13 12\ndoublyLinkedList.print(); // => 12 13 14 15 16 17 18\nconsole.log(\"length is 7:\", doublyLinkedList.length()); // => 7\n/*\n   ~ js-files : (master) node double-linked-list.js\n\n1 2 3 4\nlength is 4: 4\n1 2 4\n1 2 4\n2 4\n2\nlength is 1: 1\n\nlength is 0: 0\n2 6\n2 3 6\n6\n3\n2\n2 3 4 6\n2 3 4 6\n2 3 4 5 6 7\n2 3 4 5 6 7 8\nlength is 7: 7\n12 13 14 15 16 17 18\n12\n13\n14\n15\n16\n17\n18\nlength is 7: 7\n18\n17\n16\n15\n14\n13\n12\n12 13 14 15 16 17 18\nlength is 7: 7\n ~ js-files : (master)\n*/\n
\n

The Stack

\n

\n

Definition

\n
\n

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

\n
\n

A Stack often has a third method peek which allows to check the last pushed element without popping it.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(1)

\n
\n

The code

\n
\n
function Stack() {\n  this.stack = [];\n}\n\nStack.prototype.push = function(value) {\n  this.stack.push(value);\n};\nStack.prototype.pop = function() {\n  return this.stack.pop();\n};\nStack.prototype.peek = function() {\n  return this.stack[this.stack.length - 1];\n};\nStack.prototype.length = function() {\n  return this.stack.length;\n};\nStack.prototype.print = function() {\n  console.log(this.stack.join(' '));\n};\n\nlet stack = new Stack();\nstack.push(1);\nstack.push(2);\nstack.push(3);\nstack.print(); // => 1 2 3\nconsole.log('length is 3:', stack.length()); // => 3\nconsole.log('peek is 3:', stack.peek()); // => 3\nconsole.log('pop is 3:', stack.pop()); // => 3\nstack.print(); // => 1 2\nconsole.log('pop is 2:', stack.pop());  // => 2\nconsole.log('length is 1:', stack.length()); // => 1\nconsole.log('pop is 1:', stack.pop()); // => 1\nstack.print(); // => ''\nconsole.log('peek is undefined:', stack.peek()); // => undefined\nconsole.log('pop is undefined:', stack.pop()); // => undefined\n
\n

The Queue

\n

\n

Definition

\n
\n

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.

\n
\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(n)

\n
\n

The code

\n
\n
function Queue() {\n  this.queue = [];\n}\n\nQueue.prototype.enqueue = function(value) {\n  this.queue.push(value);\n};\nQueue.prototype.dequeue = function() {\n  return this.queue.shift();\n};\nQueue.prototype.peek = function() {\n  return this.queue[0];\n};\nQueue.prototype.length = function() {\n  return this.queue.length;\n};\nQueue.prototype.print = function() {\n  console.log(this.queue.join(' '));\n};\n\nlet queue = new Queue();\nqueue.enqueue(1);\nqueue.enqueue(2);\nqueue.enqueue(3);\nqueue.print(); // => 1 2 3\nconsole.log('length is 3:', queue.length()); // => 3\nconsole.log('peek is 1:', queue.peek()); // => 3\nconsole.log('dequeue is 1:', queue.dequeue()); // => 1\nqueue.print(); // => 2 3\nconsole.log('dequeue is 2:', queue.dequeue());  // => 2\nconsole.log('length is 1:', queue.length()); // => 1\nconsole.log('dequeue is 3:', queue.dequeue()); // => 3\nqueue.print(); // => ''\nconsole.log('peek is undefined:', queue.peek()); // => undefined\nconsole.log('dequeue is undefined:', queue.dequeue()); // => undefined\n
\n

The Tree

\n

\n

Definition

\n
\n

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

\n
\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(n) O(n)\nTo 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.

\n

\n
\n

The code

\n
\n
function Node(data) {\n  this.data = data;\n  this.children = [];\n}\n\nfunction Tree() {\n  this.root = null;\n}\n\nTree.prototype.add = function(data, toNodeData) {\n  let node = new Node(data);\n  let parent = toNodeData ? this.findBFS(toNodeData) : null;\n  if(parent) {\n    parent.children.push(node);\n  } else {\n    if(!this.root) {\n      this.root = node;\n    } else {\n      return 'Root node is already assigned';\n    }\n  }\n};\nTree.prototype.remove = function(data) {\n  if(this.root.data === data) {\n    this.root = null;\n  }\n\n  let queue = [this.root];\n  while(queue.length) {\n    let node = queue.shift();\n    for(let i = 0; i < node.children.length; i++) {\n      if(node.children[i].data === data) {\n        node.children.splice(i, 1);\n      } else {\n        queue.push(node.children[i]);\n      }\n    }\n  }\n};\nTree.prototype.contains = function(data) {\n  return this.findBFS(data) ? true : false;\n};\nTree.prototype.findBFS = function(data) {\n  let queue = [this.root];\n  while(queue.length) {\n    let node = queue.shift();\n    if(node.data === data) {\n      return node;\n    }\n    for(let i = 0; i < node.children.length; i++) {\n      queue.push(node.children[i]);\n    }\n  }\n  return null;\n};\nTree.prototype._preOrder = function(node, fn) {\n  if(node) {\n    if(fn) {\n      fn(node);\n    }\n    for(let i = 0; i < node.children.length; i++) {\n      this._preOrder(node.children[i], fn);\n    }\n  }\n};\nTree.prototype._postOrder = function(node, fn) {\n  if(node) {\n    for(let i = 0; i < node.children.length; i++) {\n      this._postOrder(node.children[i], fn);\n    }\n    if(fn) {\n      fn(node);\n    }\n  }\n};\nTree.prototype.traverseDFS = function(fn, method) {\n  let current = this.root;\n  if(method) {\n    this['_' + method](current, fn);\n  } else {\n    this._preOrder(current, fn);\n  }\n};\nTree.prototype.traverseBFS = function(fn) {\n  let queue = [this.root];\n  while(queue.length) {\n    let node = queue.shift();\n    if(fn) {\n      fn(node);\n    }\n    for(let i = 0; i < node.children.length; i++) {\n      queue.push(node.children[i]);\n    }\n  }\n};\nTree.prototype.print = function() {\n  if(!this.root) {\n    return console.log('No root node found');\n  }\n  let newline = new Node('|');\n  let queue = [this.root, newline];\n  let string = '';\n  while(queue.length) {\n    let node = queue.shift();\n    string += node.data.toString() + ' ';\n    if(node === newline && queue.length) {\n      queue.push(newline);\n    }\n    for(let i = 0; i < node.children.length; i++) {\n      queue.push(node.children[i]);\n    }\n  }\n  console.log(string.slice(0, -2).trim());\n};\nTree.prototype.printByLevel = function() {\n  if(!this.root) {\n    return console.log('No root node found');\n  }\n  let newline = new Node('\\n');\n  let queue = [this.root, newline];\n  let string = '';\n  while(queue.length) {\n    let node = queue.shift();\n    string += node.data.toString() + (node.data !== '\\n' ? ' ' : '');\n    if(node === newline && queue.length) {\n      queue.push(newline);\n    }\n    for(let i = 0; i < node.children.length; i++) {\n      queue.push(node.children[i]);\n    }\n  }\n  console.log(string.trim());\n};\n\nlet tree = new Tree();\ntree.add('ceo');\ntree.add('cto', 'ceo');\ntree.add('dev1', 'cto');\ntree.add('dev2', 'cto');\ntree.add('dev3', 'cto');\ntree.add('cfo', 'ceo');\ntree.add('accountant', 'cfo');\ntree.add('cmo', 'ceo');\ntree.print(); // => ceo | cto cfo cmo | dev1 dev2 dev3 accountant\ntree.printByLevel();  // => ceo \\n cto cfo cmo \\n dev1 dev2 dev3 accountant\nconsole.log('tree contains dev1 is true:', tree.contains('dev1')); // => true\nconsole.log('tree contains dev4 is false:', tree.contains('dev4')); // => false\nconsole.log('--- BFS');\ntree.traverseBFS(function(node) { console.log(node.data); }); // => ceo cto cfo cmo dev1 dev2 dev3 accountant\nconsole.log('--- DFS preOrder');\ntree.traverseDFS(function(node) { console.log(node.data); }, 'preOrder'); // => ceo cto dev1 dev2 dev3 cfo accountant cmo\nconsole.log('--- DFS postOrder');\ntree.traverseDFS(function(node) { console.log(node.data); }, 'postOrder'); // => dev1 dev2 dev3 cto accountant cfo cmo ceo\ntree.remove('cmo');\ntree.print(); // => ceo | cto cfo | dev1 dev2 dev3 accountant\ntree.remove('cfo');\ntree.print(); // => ceo | cto | dev1 dev2 dev3\n
\n

The Graph

\n

\n

Definition

\n
\n

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. From Wikipedia

\n
\n

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.).

\n

Representation\nThere are different ways of representing a graph, each of them with its own advantages and disadvantages. Here are the main 2:

\n

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.\nAdjacency 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.\nComplexity\nAdjacency list\nStorage Add Vertex Add Edge Query\nO( V + E\nAdjacency matrix\nStorage Add Vertex Add Edge Query\nO( V ^2) O(

\n

Graph

\n
\n

The code

\n
\n
//below uses the adjacency list representation.\n
\n
        function Graph() {\n          this.vertices = [];\n          this.edges = [];\n          this.numberOfEdges = 0;\n        }\n\n        Graph.prototype.addVertex = function(vertex) {\n          this.vertices.push(vertex);\n          this.edges[vertex] = [];\n        };\n        Graph.prototype.removeVertex = function(vertex) {\n          let index = this.vertices.indexOf(vertex);\n          if(~index) {\n            this.vertices.splice(index, 1);\n          }\n          while(this.edges[vertex].length) {\n            let adjacentVertex = this.edges[vertex].pop();\n            this.removeEdge(adjacentVertex, vertex);\n          }\n        };\n        Graph.prototype.addEdge = function(vertex1, vertex2) {\n          this.edges[vertex1].push(vertex2);\n          this.edges[vertex2].push(vertex1);\n          this.numberOfEdges++;\n        };\n        Graph.prototype.removeEdge = function(vertex1, vertex2) {\n          let index1 = this.edges[vertex1] ? this.edges[vertex1].indexOf(vertex2) : -1;\n          let index2 = this.edges[vertex2] ? this.edges[vertex2].indexOf(vertex1) : -1;\n          if(~index1) {\n            this.edges[vertex1].splice(index1, 1);\n            this.numberOfEdges--;\n          }\n          if(~index2) {\n            this.edges[vertex2].splice(index2, 1);\n          }\n        };\n        Graph.prototype.size = function() {\n          return this.vertices.length;\n        };\n        Graph.prototype.relations = function() {\n          return this.numberOfEdges;\n        };\n        Graph.prototype.traverseDFS = function(vertex, fn) {\n          if(!~this.vertices.indexOf(vertex)) {\n            return console.log('Vertex not found');\n          }\n          let visited = [];\n          this._traverseDFS(vertex, visited, fn);\n        };\n        Graph.prototype._traverseDFS = function(vertex, visited, fn) {\n          visited[vertex] = true;\n          if(this.edges[vertex] !== undefined) {\n            fn(vertex);\n          }\n          for(let i = 0; i < this.edges[vertex].length; i++) {\n            if(!visited[this.edges[vertex][i]]) {\n              this._traverseDFS(this.edges[vertex][i], visited, fn);\n            }\n          }\n        };\n        Graph.prototype.traverseBFS = function(vertex, fn) {\n          if(!~this.vertices.indexOf(vertex)) {\n            return console.log('Vertex not found');\n          }\n          let queue = [];\n          queue.push(vertex);\n          let visited = [];\n          visited[vertex] = true;\n\n          while(queue.length) {\n            vertex = queue.shift();\n            fn(vertex);\n            for(let i = 0; i < this.edges[vertex].length; i++) {\n              if(!visited[this.edges[vertex][i]]) {\n                visited[this.edges[vertex][i]] = true;\n                queue.push(this.edges[vertex][i]);\n              }\n            }\n          }\n        };\n        Graph.prototype.pathFromTo = function(vertexSource, vertexDestination) {\n          if(!~this.vertices.indexOf(vertexSource)) {\n            return console.log('Vertex not found');\n          }\n          let queue = [];\n          queue.push(vertexSource);\n          let visited = [];\n          visited[vertexSource] = true;\n          let paths = [];\n\n          while(queue.length) {\n            let vertex = queue.shift();\n            for(let i = 0; i < this.edges[vertex].length; i++) {\n              if(!visited[this.edges[vertex][i]]) {\n                visited[this.edges[vertex][i]] = true;\n                queue.push(this.edges[vertex][i]);\n                // save paths between vertices\n                paths[this.edges[vertex][i]] = vertex;\n              }\n            }\n          }\n          if(!visited[vertexDestination]) {\n            return undefined;\n          }\n\n          let path = [];\n          for(let j = vertexDestination; j != vertexSource; j = paths[j]) {\n            path.push(j);\n          }\n          path.push(j);\n          return path.reverse().join('-');\n        };\n        Graph.prototype.print = function() {\n          console.log(this.vertices.map(function(vertex) {\n            return (vertex + ' -> ' + this.edges[vertex].join(', ')).trim();\n          }, this).join(' | '));\n        };\n        ```\n        let graph = new Graph();\n        graph.addVertex(1);\n        graph.addVertex(2);\n        graph.addVertex(3);\n        graph.addVertex(4);\n        graph.addVertex(5);\n        graph.addVertex(6);\n        graph.print(); // 1 -> | 2 -> | 3 -> | 4 -> | 5 -> | 6 ->\n        graph.addEdge(1, 2);\n        graph.addEdge(1, 5);\n        graph.addEdge(2, 3);\n        graph.addEdge(2, 5);\n        graph.addEdge(3, 4);\n        graph.addEdge(4, 5);\n        graph.addEdge(4, 6);\n        graph.print(); // 1 -> 2, 5 | 2 -> 1, 3, 5 | 3 -> 2, 4 | 4 -> 3, 5, 6 | 5 -> 1, 2, 4 | 6 -> 4\n        console.log('graph size (number of vertices):', graph.size()); // => 6\n        console.log('graph relations (number of edges):', graph.relations()); // => 7\n        graph.traverseDFS(1, function(vertex) { console.log(vertex); }); // => 1 2 3 4 5 6\n        console.log('---');\n        graph.traverseBFS(1, function(vertex) { console.log(vertex); }); // => 1 2 5 3 4 6\n        graph.traverseDFS(0, function(vertex) { console.log(vertex); }); // => 'Vertex not found'\n        graph.traverseBFS(0, function(vertex) { console.log(vertex); }); // => 'Vertex not found'\n        console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-5-1\n        console.log('path from 3 to 5:', graph.pathFromTo(3, 5)); // => 3-2-5\n        graph.removeEdge(1, 2);\n        graph.removeEdge(4, 5);\n        graph.removeEdge(10, 11);\n        console.log('graph relations (number of edges):', graph.relations()); // => 5\n        console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-3-2-5-1\n        graph.addEdge(1, 2);\n        graph.addEdge(4, 5);\n        console.log('graph relations (number of edges):', graph.relations()); // => 7\n        console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-5-1\n        graph.removeVertex(5);\n        console.log('graph size (number of vertices):', graph.size()); // => 5\n        console.log('graph relations (number of edges):', graph.relations()); // => 4\n        console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-3-2-1\n
"},{"url":"/docs/content/gatsby-Queries-Mutations/","relativePath":"docs/content/gatsby-Queries-Mutations.md","relativeDir":"docs/content","base":"gatsby-Queries-Mutations.md","name":"gatsby-Queries-Mutations","frontmatter":{"title":"Queries and Mutations (Gatsby)","weight":0,"excerpt":"Queries and Mutations","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Querying Data in Components using StaticQuery

\n

TABLE OF CONTENTS

\n\n

Gatsby v2 introduces StaticQuery, a new API that allows components to retrieve data via a GraphQL query.

\n

In this guide, you'll see an example using StaticQuery, and learn about the difference between a StaticQuery and a page query.

\n

How to use StaticQuery in components

\n

Video hosted on egghead.io.

\n

Basic example

\n

Here is an example of a Header component using StaticQuery:

\n

src/components/header.js

\n

Copysrc/components/header.js: copy code to clipboard`

\n

import React from \"react\"

\n

import { StaticQuery, graphql } from \"gatsby\"

\n

export default function Header() {

\n

return (

\n

<StaticQuery

\n

query={graphql`

\n

query HeadingQuery {

\n

site {

\n

siteMetadata {

\n

title

\n

}

\n

}

\n

}

\n

`}

\n

render={data => (

\n
\n

{data.site.siteMetadata.title}

\n
\n

)}

\n

/>

\n

)

\n

}

\n

`

\n

By using StaticQuery, you can colocate a component with its data. It is no longer required to, say, pass data down from Layout to Header.

\n

useStaticQuery

\n

There's also a React hooks version of StaticQuery: check out the documentation on useStaticQuery

\n

Typechecking

\n

With the above pattern, you lose the ability to typecheck with PropTypes. To regain typechecking while achieving the same result, you can change the component to:

\n

src/components/header.js

\n

Copysrc/components/header.js: copy code to clipboard`

\n

import React from \"react\"

\n

import { StaticQuery, graphql } from \"gatsby\"

\n

import PropTypes from \"prop-types\"

\n

const Header = ({ data }) => (

\n
\n

{data.site.siteMetadata.title}

\n
\n

)

\n

export default function MyHeader(props) {

\n

return (

\n

<StaticQuery

\n

query={graphql`

\n

query {

\n

site {

\n

siteMetadata {

\n

title

\n

}

\n

}

\n

}

\n

`}

\n

render={data => <Header data={data} {...props} />}

\n

/>

\n

)

\n

}

\n

Header.propTypes = {

\n

data: PropTypes.shape({

\n

site: PropTypes.shape({

\n

siteMetadata: PropTypes.shape({

\n

title: PropTypes.string.isRequired,

\n

}).isRequired,

\n

}).isRequired,

\n

}).isRequired,

\n

}

\n

`

\n

How StaticQuery differs from page query

\n

StaticQuery can do most of the things that page query can, including fragments. The main differences are:

\n
    \n
  • page queries can accept variables (via pageContext) but can only be added to page components
    • \n
  • StaticQuery does not accept variables (hence the name \"static\"), but can be used in any component, including pages
    • \n
  • StaticQuery does not work with raw React.createElement calls; please use JSX, e.g. <StaticQuery />
    • \n
\n

GraphQL

\n

Queries and Mutations

\n

On this page, you'll learn in detail about how to query a GraphQL server.

\n

Fields

\n

At its simplest, GraphQL is about asking for specific fields on objects. Let's start by looking at a very simple query and the result we get when we run it:

\n

{

\n

hero {

\n

name

\n

}

\n

}

\n

{

\n

\"data\": {

\n

\"hero\": {

\n

\"name\": \"R2-D2\"

\n

}

\n

}

\n

}

\n

You can see immediately that the query has exactly the same shape as the result. This is essential to GraphQL, because you always get back what you expect, and the server knows exactly what fields the client is asking for.

\n

The field name returns a String type, in this case the name of the main hero of Star Wars, \"R2-D2\".

\n
\n

Oh, one more thing - the query above is interactive. That means you can change it as you like and see the new result. Try adding an appearsIn field to the hero object in the query, and see the new result.

\n
\n

In the previous example, we just asked for the name of our hero which returned a String, but fields can also refer to Objects. In that case, you can make a sub-selection of fields for that object. GraphQL queries can traverse related objects and their fields, letting clients fetch lots of related data in one request, instead of making several roundtrips as one would need in a classic REST architecture.

\n

{

\n

hero {

\n

name

\n

Queries can have comments!

\n

friends {

\n

name

\n

}

\n

}

\n

}

\n

{

\n

\"data\": {

\n

\"hero\": {

\n

\"name\": \"R2-D2\",

\n

\"friends\": [

\n

{

\n

\"name\": \"Luke Skywalker\"

\n

},

\n

{

\n

\"name\": \"Han Solo\"

\n

},

\n

{

\n

\"name\": \"Leia Organa\"

\n

}

\n

]

\n

}

\n

}

\n

}

\n

Note that in this example, the friends field returns an array of items. GraphQL queries look the same for both single items or lists of items, however we know which one to expect based on what is indicated in the schema.

\n

Arguments

\n

If the only thing we could do was traverse objects and their fields, GraphQL would already be a very useful language for data fetching. But when you add the ability to pass arguments to fields, things get much more interesting.

\n

{

\n

human(id: \"1000\") {

\n

name

\n

height

\n

}

\n

}

\n

{

\n

\"data\": {

\n

\"human\": {

\n

\"name\": \"Luke Skywalker\",

\n

\"height\": 1.72

\n

}

\n

}

\n

}

\n

In a system like REST, you can only pass a single set of arguments - the query parameters and URL segments in your request. But in GraphQL, every field and nested object can get its own set of arguments, making GraphQL a complete replacement for making multiple API fetches. You can even pass arguments into scalar fields, to implement data transformations once on the server, instead of on every client separately.

\n

{

\n

human(id: \"1000\") {

\n

name

\n

height(unit: FOOT)

\n

}

\n

}

\n

{

\n

\"data\": {

\n

\"human\": {

\n

\"name\": \"Luke Skywalker\",

\n

\"height\": 5.6430448

\n

}

\n

}

\n

}

\n

Arguments can be of many different types. In the above example, we have used an Enumeration type, which represents one of a finite set of options (in this case, units of length, either METER or FOOT). GraphQL comes with a default set of types, but a GraphQL server can also declare its own custom types, as long as they can be serialized into your transport format.

\n

Read more about the GraphQL type system here.

\n

Aliases

\n

If you have a sharp eye, you may have noticed that, since the result object fields match the name of the field in the query but don't include arguments, you can't directly query for the same field with different arguments. That's why you need aliases - they let you rename the result of a field to anything you want.

\n

{

\n

empireHero: hero(episode: EMPIRE) {

\n

name

\n

}

\n

jediHero: hero(episode: JEDI) {

\n

name

\n

}

\n

}

\n

{

\n

\"data\": {

\n

\"empireHero\": {

\n

\"name\": \"Luke Skywalker\"

\n

},

\n

\"jediHero\": {

\n

\"name\": \"R2-D2\"

\n

}

\n

}

\n

}

\n

In the above example, the two hero fields would have conflicted, but since we can alias them to different names, we can get both results in one request.

\n

Fragments

\n

Let's say we had a relatively complicated page in our app, which lets us look at two heroes side by side, along with their friends. You can imagine that such a query could quickly get complicated, because we would need to repeat the fields at least once - one for each side of the comparison.

\n

That's why GraphQL includes reusable units called fragments. Fragments let you construct sets of fields, and then include them in queries where you need to. Here's an example of how you could solve the above situation using fragments:

\n

{

\n

leftComparison: hero(episode: EMPIRE) {

\n

...comparisonFields

\n

}

\n

rightComparison: hero(episode: JEDI) {

\n

...comparisonFields

\n

}

\n

}

\n

​

\n

fragment comparisonFields on Character {

\n

name

\n

appearsIn

\n

friends {

\n

name

\n

}

\n

}

\n

{

\n

\"data\": {

\n

\"leftComparison\": {

\n

\"name\": \"Luke Skywalker\",

\n

\"appearsIn\": [

\n

\"NEWHOPE\",

\n

\"EMPIRE\",

\n

\"JEDI\"

\n

],

\n

\"friends\": [

\n

{

\n

\"name\": \"Han Solo\"

\n

},

\n

{

\n

\"name\": \"Leia Organa\"

\n

},

\n

{

\n

\"name\": \"C-3PO\"

\n

},

\n

{

\n

\"name\": \"R2-D2\"

\n

}

\n

]

\n

},

\n

\"rightComparison\": {

\n

\"name\": \"R2-D2\",

\n

\"appearsIn\": [

\n

\"NEWHOPE\",

\n

\"EMPIRE\",

\n

\"JEDI\"

\n

],

\n

\"friends\": [

\n

{

\n

\"name\": \"Luke Skywalker\"

\n

},

\n

{

\n

\"name\": \"Han Solo\"

\n

},

\n

{

\n

\"name\": \"Leia Organa\"

\n

}

\n

]

\n

}

\n

}

\n

}

\n

You can see how the above query would be pretty repetitive if the fields were repeated. The concept of fragments is frequently used to split complicated application data requirements into smaller chunks, especially when you need to combine lots of UI components with different fragments into one initial data fetch.

\n

Using variables inside fragments

\n

It is possible for fragments to access variables declared in the query or mutation. See variables.

\n

query HeroComparison($first: Int = 3) {

\n

leftComparison: hero(episode: EMPIRE) {

\n

...comparisonFields

\n

}

\n

rightComparison: hero(episode: JEDI) {

\n

...comparisonFields

\n

}

\n

}

\n

​

\n

fragment comparisonFields on Character {

\n

name

\n

friendsConnection(first: $first) {

\n

totalCount

\n

edges {

\n

node {

\n

name

\n

}

\n

}

\n

}

\n

}

\n

​

\n

{

\n

\"errors\": [

\n

{

\n

\"message\": \"Buffer is not defined\",

\n

\"locations\": [

\n

{

\n

\"line\": 12,

\n

\"column\": 3

\n

}

\n

],

\n

\"path\": [

\n

\"leftComparison\",

\n

\"friendsConnection\"

\n

]

\n

},

\n

{

\n

\"message\": \"Buffer is not defined\",

\n

\"locations\": [

\n

{

\n

\"line\": 12,

\n

\"column\": 3

\n

}

\n

],

\n

\"path\": [

\n

\"rightComparison\",

\n

\"friendsConnection\"

\n

]

\n

}

\n

],

\n

\"data\": {

\n

\"leftComparison\": null,

\n

\"rightComparison\": null

\n

}

\n

}

\n

Operation name

\n

Up until now, we have been using a shorthand syntax where we omit both the query keyword and the query name, but in production apps it's useful to use these to make our code less ambiguous.

\n

Here's an example that includes the keyword query as operation type and HeroNameAndFriends as operation name :

\n

query HeroNameAndFriends {

\n

hero {

\n

name

\n

friends {

\n

name

\n

}

\n

}

\n

}

\n

{

\n

\"data\": {

\n

\"hero\": {

\n

\"name\": \"R2-D2\",

\n

\"friends\": [

\n

{

\n

\"name\": \"Luke Skywalker\"

\n

},

\n

{

\n

\"name\": \"Han Solo\"

\n

},

\n

{

\n

\"name\": \"Leia Organa\"

\n

}

\n

]

\n

}

\n

}

\n

}

\n

The operation type is either query, mutation, or subscription and describes what type of operation you're intending to do. The operation type is required unless you're using the query shorthand syntax, in which case you can't supply a name or variable definitions for your operation.

\n

The operation name is a meaningful and explicit name for your operation. It is only required in multi-operation documents, but its use is encouraged because it is very helpful for debugging and server-side logging. When something goes wrong (you see errors either in your network logs, or in the logs of your GraphQL server) it is easier to identify a query in your codebase by name instead of trying to decipher the contents. Think of this just like a function name in your favorite programming language. For example, in JavaScript we can easily work only with anonymous functions, but when we give a function a name, it's easier to track it down, debug our code, and log when it's called. In the same way, GraphQL query and mutation names, along with fragment names, can be a useful debugging tool on the server side to identify different GraphQL requests.

\n

Variables

\n

So far, we have been writing all of our arguments inside the query string. But in most applications, the arguments to fields will be dynamic: For example, there might be a dropdown that lets you select which Star Wars episode you are interested in, or a search field, or a set of filters.

\n

It wouldn't be a good idea to pass these dynamic arguments directly in the query string, because then our client-side code would need to dynamically manipulate the query string at runtime, and serialize it into a GraphQL-specific format. Instead, GraphQL has a first-class way to factor dynamic values out of the query, and pass them as a separate dictionary. These values are called variables.

\n

When we start working with variables, we need to do three things:

\n
    \n
  1. Replace the static value in the query with $variableName
    2. \n
  2. Declare $variableName as one of the variables accepted by the query
    3. \n
  3. Pass variableName: value in the separate, transport-specific (usually JSON) variables dictionary
    4. \n
\n

Here's what it looks like all together:

\n

query HeroNameAndFriends($episode: Episode) {

\n

hero(episode: $episode) {

\n

name

\n

friends {

\n

name

\n

}

\n

}

\n

}

\n

{

\n

\"episode\": \"JEDI\"

\n

}

\n

{

\n

\"data\": {

\n

\"hero\": {

\n

\"name\": \"R2-D2\",

\n

\"friends\": [

\n

{

\n

\"name\": \"Luke Skywalker\"

\n

},

\n

{

\n

\"name\": \"Han Solo\"

\n

},

\n

{

\n

\"name\": \"Leia Organa\"

\n

}

\n

]

\n

}

\n

}

\n

}

\n

Now, in our client code, we can simply pass a different variable rather than needing to construct an entirely new query. This is also in general a good practice for denoting which arguments in our query are expected to be dynamic - we should never be doing string interpolation to construct queries from user-supplied values.

\n

Variable definitions

\n

The variable definitions are the part that looks like ($episode: Episode) in the query above. It works just like the argument definitions for a function in a typed language. It lists all of the variables, prefixed by $, followed by their type, in this case Episode.

\n

All declared variables must be either scalars, enums, or input object types. So if you want to pass a complex object into a field, you need to know what input type that matches on the server. Learn more about input object types on the Schema page.

\n

Variable definitions can be optional or required. In the case above, since there isn't an ! next to the Episode type, it's optional. But if the field you are passing the variable into requires a non-null argument, then the variable has to be required as well.

\n

To learn more about the syntax for these variable definitions, it's useful to learn the GraphQL schema language. The schema language is explained in detail on the Schema page.

\n

Default variables

\n

Default values can also be assigned to the variables in the query by adding the default value after the type declaration.

\n

query HeroNameAndFriends($episode: Episode = JEDI) {

\n

hero(episode: $episode) {

\n

name

\n

friends {

\n

name

\n

}

\n

}

\n

}

\n

When default values are provided for all variables, you can call the query without passing any variables. If any variables are passed as part of the variables dictionary, they will override the defaults.

\n

Directives

\n

We discussed above how variables enable us to avoid doing manual string interpolation to construct dynamic queries. Passing variables in arguments solves a pretty big class of these problems, but we might also need a way to dynamically change the structure and shape of our queries using variables. For example, we can imagine a UI component that has a summarized and detailed view, where one includes more fields than the other.

\n

Let's construct a query for such a component:

\n

query Hero($episode: Episode, $withFriends: Boolean!) {

\n

hero(episode: $episode) {

\n

name

\n

friends @include(if: $withFriends) {

\n

name

\n

}

\n

}

\n

}

\n

{

\n

\"episode\": \"JEDI\",

\n

\"withFriends\": false

\n

}

\n

{

\n

\"data\": {

\n

\"hero\": {

\n

\"name\": \"R2-D2\"

\n

}

\n

}

\n

}

\n

Try editing the variables above to instead pass true for withFriends, and see how the result changes.

\n

We needed to use a new feature in GraphQL called a directive. A directive can be attached to a field or fragment inclusion, and can affect execution of the query in any way the server desires. The core GraphQL specification includes exactly two directives, which must be supported by any spec-compliant GraphQL server implementation:

\n
    \n
  • @include(if: Boolean) Only include this field in the result if the argument is true.
    • \n
  • @skip(if: Boolean) Skip this field if the argument is true.
    • \n
\n

Directives can be useful to get out of situations where you otherwise would need to do string manipulation to add and remove fields in your query. Server implementations may also add experimental features by defining completely new directives.

\n

Mutations

\n

Most discussions of GraphQL focus on data fetching, but any complete data platform needs a way to modify server-side data as well.

\n

In REST, any request might end up causing some side-effects on the server, but by convention it's suggested that one doesn't use GET requests to modify data. GraphQL is similar - technically any query could be implemented to cause a data write. However, it's useful to establish a convention that any operations that cause writes should be sent explicitly via a mutation.

\n

Just like in queries, if the mutation field returns an object type, you can ask for nested fields. This can be useful for fetching the new state of an object after an update. Let's look at a simple example mutation:

\n

mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {

\n

createReview(episode: $ep, review: $review) {

\n

stars

\n

commentary

\n

}

\n

}

\n

{

\n

\"ep\": \"JEDI\",

\n

\"review\": {

\n

\"stars\": 5,

\n

\"commentary\": \"This is a great movie!\"

\n

}

\n

}

\n

{

\n

\"data\": {

\n

\"createReview\": {

\n

\"stars\": 5,

\n

\"commentary\": \"This is a great movie!\"

\n

}

\n

}

\n

}

\n

Note how createReview field returns the stars and commentary fields of the newly created review. This is especially useful when mutating existing data, for example, when incrementing a field, since we can mutate and query the new value of the field with one request.

\n

You might also notice that, in this example, the review variable we passed in is not a scalar. It's an input object type, a special kind of object type that can be passed in as an argument. Learn more about input types on the Schema page.

\n

Multiple fields in mutations

\n

A mutation can contain multiple fields, just like a query. There's one important distinction between queries and mutations, other than the name:

\n

While query fields are executed in parallel, mutation fields run in series, one after the other.

\n

This means that if we send two incrementCredits mutations in one request, the first is guaranteed to finish before the second begins, ensuring that we don't end up with a race condition with ourselves.

\n

Inline Fragments

\n

Like many other type systems, GraphQL schemas include the ability to define interfaces and union types. Learn about them in the schema guide.

\n

If you are querying a field that returns an interface or a union type, you will need to use inline fragments to access data on the underlying concrete type. It's easiest to see with an example:

\n

query HeroForEpisode($ep: Episode!) {

\n

hero(episode: $ep) {

\n

name

\n

... on Droid {

\n

primaryFunction

\n

}

\n

... on Human {

\n

height

\n

}

\n

}

\n

}

\n

{

\n

\"ep\": \"JEDI\"

\n

}

\n

{

\n

\"data\": {

\n

\"hero\": {

\n

\"name\": \"R2-D2\",

\n

\"primaryFunction\": \"Astromech\"

\n

}

\n

}

\n

}

\n

In this query, the hero field returns the type Character, which might be either a Human or a Droid depending on the episode argument. In the direct selection, you can only ask for fields that exist on the Character interface, such as name.

\n

To ask for a field on the concrete type, you need to use an inline fragment with a type condition. Because the first fragment is labeled as ... on Droid, the primaryFunction field will only be executed if the Character returned from hero is of the Droid type. Similarly for the height field for the Human type.

\n

Named fragments can also be used in the same way, since a named fragment always has a type attached.

\n

Meta fields

\n

Given that there are some situations where you don't know what type you'll get back from the GraphQL service, you need some way to determine how to handle that data on the client. GraphQL allows you to request __typename, a meta field, at any point in a query to get the name of the object type at that point.

\n

{

\n

search(text: \"an\") {

\n

__typename

\n

... on Human {

\n

name

\n

}

\n

... on Droid {

\n

name

\n

}

\n

... on Starship {

\n

name

\n

}

\n

}

\n

}

\n

{

\n

\"data\": {

\n

\"search\": [

\n

{

\n

\"__typename\": \"Human\",

\n

\"name\": \"Han Solo\"

\n

},

\n

{

\n

\"__typename\": \"Human\",

\n

\"name\": \"Leia Organa\"

\n

},

\n

{

\n

\"__typename\": \"Starship\",

\n

\"name\": \"TIE Advanced x1\"

\n

}

\n

]

\n

}

\n

}

\n

In the above query, search returns a union type that can be one of three options. It would be impossible to tell apart the different types from the client without the __typename field.

\n

GraphQL services provide a few meta fields, the rest of which are used to expose the Introspection system.****

"},{"url":"/docs/content/github-api/","relativePath":"docs/content/github-api.md","relativeDir":"docs/content","base":"github-api.md","name":"github-api","frontmatter":{"title":"All the Things You Can Do With GitHub API and Python","weight":0,"excerpt":"Most of us use GitHub every day either using CLI or its website. Sometimes however, you need to automate these same tasks like, for example creating Gist, querying repository analytics or just pulling, modifying and pushing new file.","seo":{"title":"All the Things You Can Do With GitHub API and Python","description":"Most of us use GitHub every day either using CLI or its website. Sometimes however, you need to automate these same tasks like, for example creating Gist, querying repository analytics or just pulling, modifying and pushing new file. All these things and more can be done easily using GitHub API, and Python is here to help with that and make it even easier.","robots":[],"extra":[]},"template":"docs"},"html":"

All the Things You Can Do With GitHub API and Python

\n
\n

All the Things You Can Do With GitHub API and Python

\n
\n

Most of us use GitHub every day either using CLI or its website. Sometimes however, you need to automate these same tasks like, for example creating Gist, querying repository analytics or just pulling, modifying and pushing new file. All these things and more can be done easily using GitHub API, and Python is here to help with that and make it even easier.

\n

What We Will Need

\n

Before we start using GitHub API, we first need to generate personal access token that will allow us to authenticate against the API. We can get one at https://github.com/settings/tokens by clicking on Generate new token. You will be asked to select scopes for the token. Which scopes you choose will determine what information and actions you will be able to perform against the API. You should be careful with the ones prefixed with write:, delete: and admin: as these might be quite destructive. You can find description of each scope in docs here.

\n

Now that we have the token, let's test whether it actually works:

\n
~ $ GITHUB_TOKEN=\"...\"\n~ $ curl -H \"Authorization: token $GITHUB_TOKEN\" https://api.github.com/gists\n
\n

And here is the expected (trimmed) response showing list of my public Gists:

\n
[\n  {\n    \"url\": \"https://api.github.com/gists/f3da4b0e3493b4bba4fb957fba1eaa02\",\n    \"forks_url\": \"https://api.github.com/gists/f3da4b0e3493b4bba4fb957fba1eaa02/forks\",\n    \"commits_url\": \"https://api.github.com/gists/f3da4b0e3493b4bba4fb957fba1eaa02/commits\",\n    \"id\": \"f3da4b0e3493b4bba4fb957fba1eaa02\",\n    \"node_id\": \"MDQ6R2lzdGYzZGE0YjBlMzQ5M2I0YmJhNGZiOTU3ZmJhMWVhYTAy\",\n    \"git_pull_url\": \"https://gist.github.com/f3da4b0e3493b4bba4fb957fba1eaa02.git\",\n    \"git_push_url\": \"https://gist.github.com/f3da4b0e3493b4bba4fb957fba1eaa02.git\",\n    \"html_url\": \"https://gist.github.com/f3da4b0e3493b4bba4fb957fba1eaa02\",\n    \"files\": {\n      \"Test\": {\n        \"filename\": \"Test\",\n        \"type\": \"text/plain\",\n        \"language\": null,\n        \"raw_url\": \"https://gist.githubusercontent.com/MartinHeinz/f3da4b0e3493b4bba4fb957fba1eaa02/raw/cebefee5794b12a1772c97673647678f057a6854/Test\",\n        \"size\": 32\n      }\n    },\n    \"truncated\": false\n  }\n]\n
\n

Doing It With Python

\n

We have the personal token and we tested it with cURL, so now we can switch to doing the same thing in Python. We have two options here though. We can use raw requests or we can use PyGitHub.

\n

PyGitHub exposes some of the GitHub API endpoints for most common operations like repository, issue or branch management. It can't be used for every single feature exposed through the GitHub API, so in the following sections, I will show mixture of PyGitHub and Requests calls depending on whether it can be done with PyGitHub or not.

\n

First things first though - let's install both libraries (PyGitHub and Requests) and see a simple example for both:

\n
~ $ pip install PyGithub requests\n
\n

Example using PyGitHub:

\n
from github import Github\nimport os\nfrom pprint import pprint\n\ntoken = os.getenv('GITHUB_TOKEN', '...')\ng = Github(token)\nrepo = g.get_repo(\"MartinHeinz/python-project-blueprint\")\nissues = repo.get_issues(state=\"open\")\npprint(issues.get_page(0))\n
\n

Example using Requests:

\n
import requests\nimport os\nfrom pprint import pprint\n\ntoken = os.getenv('GITHUB_TOKEN', '...')\nowner = \"MartinHeinz\"\nrepo = \"python-project-blueprint\"\nquery_url = f\"https://api.github.com/repos/{owner}/{repo}/issues\"\nparams = {\n    \"state\": \"open\",\n}\nheaders = {'Authorization': f'token {token}'}\nr = requests.get(query_url, headers=headers, params=params)\npprint(r.json())\n
\n

Both snippets above use the same API endpoint to retrieve all open issues for specified repository.

\n

In both cases we start by taking GitHub token from environment variable. Next, in the example with using PyGitHub we use the token to create instance of GitHub class, which is then used to get repository and query its issues in open state. The result is paginated list of issues, of which we print the first page.

\n

In the example that uses raw HTTP request, we achieve the same result by building API URL from username and repository name and sending GET request to it containing state as body parameter and token as Authorization header. Only difference is that result is not paginated. Here is the result for both examples:

\n

First one being PyGitHub output:

\n
[Issue(title=\"configure_project script not working\", number=10),\n Issue(title=\"Consider Flask-Rest\", number=9),\n Issue(title=\"Add newline to match dev.Dockerfile\", number=7),\n Issue(title=\"Consider using wemake-python-styleguide\", number=5),\n Issue(title=\"Consider versioneer\", number=4),\n Issue(title=\"Adding isort and black\", number=3),\n Issue(title=\"Consider src directory\", number=2)]\n
\n

Second, raw Python list of dictionaries (JSON):

\n
[{'assignee': None,\n  'body': 'Some Markdown text...',\n  'comments': 0,\n  'comments_url': 'https://api.github.com/repos/MartinHeinz/python-project-blueprint/issues/10/comments',\n  'created_at': '2020-04-20T22:16:33Z',\n  'html_url': 'https://github.com/MartinHeinz/python-project-blueprint/issues/10',\n  'id': 603571386,\n  'labels': [],\n  'labels_url': 'https://api.github.com/repos/MartinHeinz/python-project-blueprint/issues/10/labels{/name}',\n  'milestone': None,\n  'node_id': 'MDU6SXNzdWU2MDM1NzEzODY=',\n  'repository_url': 'https://api.github.com/repos/MartinHeinz/python-project-blueprint',\n  'state': 'open',\n  'title': 'configure_project script not working',\n  'url': 'https://api.github.com/repos/MartinHeinz/python-project-blueprint/issues/10',\n  'user': {...}},\n  ...\n]\n
\n

Create an Issue

\n

While on topic of issues, let's create one too, shall we?

\n
g = Github(token)\nrepo = g.get_repo(\"MartinHeinz/python-project-blueprint\")\ni = repo.create_issue(\n    title=\"Issue Title\",\n    body=\"Text of the body.\",\n    assignee=\"MartinHeinz\",\n    labels=[\n        repo.get_label(\"good first issue\")\n    ]\n)\npprint(i)\n
\n

This is one of the use cases, where PyGitHub is very handy. We just need to get the repository, create issues against it and specify bunch of parameters. In the snippet above we use title, body, assignee and labels parameters, but you could also add milestone or more labels which are queried using their name.

\n

Create a Gist

\n

Another things we can create is GitHub Gist, this time using Requests:

\n
query_url = \"https://api.github.com/gists\"\ndata = {\n    \"public\": True,\n    \"files\": {\n        \"code.py\": {\n            \"content\": \"print('some code')\"\n        },\n    }\n}\nheaders = {'Authorization': f'token {token}'}\nr = requests.post(query_url, headers=headers, data=json.dumps(data))\npprint(r.json())\n
\n

The request for creating Gists is pretty simple. In the POST request you need to specify whether the Gist should be public or not, next you need to populate list of files that will be part of said Gist, where each key is a file name and its content contains actual string content of the file. The code above uses json.dumps() to convert Python dictionary to JSON string to create request body and the usual Authorization header.

\n

Below you can see the relevant parts of the expected response:

\n
{\"comments\": 0,\n \"description\": null,\n \"files\": {\"code.py\": {\"content\": \"print('some code')\",\n                       \"filename\": \"code.py\",\n                       \"language\": \"Python\",\n                       \"raw_url\": \"https://gist.githubusercontent.com/MartinHeinz/383c6b450f892e169074a642a372e459/raw/8d53df5862f8b687fc09d0b3c1b3c49afe441cbe/code.py\",\n                       \"size\": 18,\n                       \"truncated\": null,\n                       \"type\": \"application/x-python\"}},\n \"forks\": [],\n \"html_url\": \"https://gist.github.com/383c6b450f892e169074a642a372e459\",\n \"id\": \"383c6b450f892e169074a642a372e459\",\n \"node_id\": \"MDQ6R2lzdDM4M2M2YjQ1MGY4OTJlMTY5MDc0YTY0MmEzNzJlNDU5\",\n \"public\": true,\n \"url\": \"https://api.github.com/gists/383c6b450f892e169074a642a372e459\"\n}\n
\n

After creating a Gist you might want to do other things with it like update it, list commits, fork it or just fetch it. For all these operations there's a API endpoint listed in these docs.

\n

Programmatically Update File

\n

One very practical, but quite complicated use case for using GitHub API, is programmatically fetching, modifying, committing and finally pushing some file to repository. Let's break this down and see an example:

\n
file_path = \"requirements.txt\"\ng = Github(token)\nrepo = g.get_repo(\"MartinHeinz/python-project-blueprint\")\n\nfile = repo.get_contents(file_path, ref=\"master\")\ndata = file.decoded_content.decode(\"utf-8\")\ndata += \"\\npytest==5.3.2\"\n\ndef push(path, message, content, branch, update=False):\n    author = InputGitAuthor(\n        \"MartinHeinz\",\n        \"martin7.heinz@gmail.com\"\n    )\n    source = repo.get_branch(\"master\")\n    repo.create_git_ref(ref=f\"refs/heads/{branch}\", sha=source.commit.sha)\n    if update:\n        contents = repo.get_contents(path, ref=branch)\n        repo.update_file(contents.path, message, content, contents.sha, branch=branch, author=author)\n    else:\n        repo.create_file(path, message, content, branch=branch, author=author)\n\npush(file_path, \"Add pytest to dependencies.\", data, \"update-dependencies\", update=True)\n
\n

Starting from the top, we get contents of a file using the usual repository reference, decode it to plain string and modify it. Next, in the push function, we create new branch originating from commit specified using source.commit.sha. Based on the if statement, we have 2 options update existing file or create new one. In case we're doing update, we first retrieve existing file to get its hash and path and then we perform the update using previously modified data (content), supplied message, branch and author object. If on the other hand we want to create a new file in the repository, then we just omit passing in the SHA of existing file and we're done.

\n

Analyzing Traffic

\n

If you are more into data science and analytics you might find useful possibility of querying views/clones statistics from your repositories:

\n
g = Github(token)\nrepo = g.get_repo(\"MartinHeinz/python-project-blueprint\")\nclones = repo.get_clones_traffic(per=\"day\")\nviews = repo.get_views_traffic(per=\"day\")\n\nprint(f\"Repository has {clones['count']} clones out of which {clones['uniques']} are unique.\")\nprint(f\"Repository has {views['count']} views out of which {views['uniques']} are unique.\")\n\nbest_day = max(*list((day.count, day.timestamp) for day in views[\"views\"]), key=itemgetter(0))\n\npprint(views)\nprint(f\"Repository had most views on {best_day[1]} with {best_day[0]} views\")\n
\n

The code needed to retrieve the data from GiHub is really just one line for clones and one line for views. Both the clones and views object contains count, uniques and views attributes. We use the first 2 in the print statements to show actual and unique clones and views respectively.

\n

The disgusting (beautiful) one liner after that iterates over list of View objects that contain view count for each day and respective timestamp which we extract into list of tuples. We then find tuple with maximum count and print its date and actual view count on last line. This gives us output shown below:

\n
Repository has 31 clones out of which 23 are unique.\nRepository has 1672 views out of which 297 are unique.\n{'count': 1672,\n 'uniques': 297,\n 'views': [View(uniques=6, timestamp=2020-04-28 00:00:00, count=29),\n           View(uniques=30, timestamp=2020-04-29 00:00:00, count=141),\n           View(uniques=37, timestamp=2020-04-30 00:00:00, count=184),\n           View(uniques=25, timestamp=2020-05-01 00:00:00, count=93),\n           View(uniques=24, timestamp=2020-05-02 00:00:00, count=131),\n           View(uniques=20, timestamp=2020-05-03 00:00:00, count=41),\n           View(uniques=26, timestamp=2020-05-04 00:00:00, count=121),\n           View(uniques=41, timestamp=2020-05-05 00:00:00, count=250),\n           View(uniques=47, timestamp=2020-05-06 00:00:00, count=184),\n           View(uniques=33, timestamp=2020-05-07 00:00:00, count=216),\n           View(uniques=15, timestamp=2020-05-08 00:00:00, count=48),\n           View(uniques=20, timestamp=2020-05-09 00:00:00, count=71),\n           View(uniques=22, timestamp=2020-05-10 00:00:00, count=51),\n           View(uniques=7, timestamp=2020-05-11 00:00:00, count=16),\n           View(uniques=14, timestamp=2020-05-12 00:00:00, count=96)]}\nRepository had most views on 2020-05-05 00:00:00 with 250 views\n
\n

Rendering Markdown

\n

This example uses GitHub API, but can be used for non-GitHub purposes. I'm talking about GitHub APIs ability to generate HTML from markdown text. This could be useful if you have website that can't render markdown directly, but rather you could use GitHub API to create HTML for you.

\n
query_url = \"https://api.github.com/markdown\"\ndata = {\n  \"text\": \"`code`, _italics_, **bold**\",\n  \"mode\": \"markdown\",\n}\nheaders = {'Authorization': f'token {token}'}\nr = requests.post(query_url, headers=headers, data=json.dumps(data))\npprint(r)\npprint(r.text)\n
\n

Once again the query is quite simple. All we need to do is send the text to be rendered in text body parameter together with mode set to markdown. The example text above includes, code snippet, italics and *bold* text and that's exactly what we get back in form of HTML:

\n

Response:

\n
<Response [200]>\n'<p><code>code</code>, <em>italics</em>, <strong>bold</strong></p>\\n'\n
\n

Update Commit Status

\n

You know these nice green check marks, yellow circles and ugly red crosses next to your commits that are added by CI tools? Do you want to change them (maybe just for fun, maybe as part of your own CI solution)? Of course you do. And there is API for that:

\n
g = Github(token)\nrepo = g.get_repo(\"MartinHeinz/python-project-blueprint\")\nbranch = repo.get_branch(branch=\"master\")\nstatus = repo.get_commit(sha=branch.commit.sha).create_status(\n    state=\"success\",\n    target_url=\"https://some-ci-url.com\",\n    description=\"CI in Progress\",\n    context=\"Just testing...\"\n)\nprint(status)\n
\n

Surprisingly (for me) this obscure API endpoint is part of PyGitHub library. To use it, we retrieve repo and its commit using commit hash. After that we create status for said commit, by describing its current state using parameters.

\n

There are 4 states we can specify, namely - error, failure, pending, or success - in this example I chose success. Next, the target_url is the URL to which the Details link points. And as you probably noticed, the description and context are the other values shown in dialog box shown below.

\n

\"GitHub

\n

To be able to verify that status change actually went through, we receive CommitStatus response which is representation of current status of commit. In this case looks like this:

\n
CommitStatus(state=\"success\", id=9617694889, context=\"Just testing...\")\n
\n

Adding Reactions to Issue Comments

\n

GitHub issue comments allow you to add various reactions to them. So, maybe you want to add +1/-1 to somebodies comment. Maybe just throw in some celebratory hooray emoji. If that's the case, then here's how you could do that in Python:

\n
owner = \"MartinHeinz\"\nrepo = \"python-project-blueprint\"\ncomment_id = \"593154350\"\nquery_url = f\"https://api.github.com/repos/{owner}/{repo}/issues/comments/{comment_id}/reactions\"\ndata = {\n  \"content\": \"hooray\"\n}\nheaders = {\n    'Authorization': f'token {token}',\n    'Accept': 'application/vnd.github.squirrel-girl-preview',\n}\nr = requests.post(query_url, headers=headers, data=json.dumps(data))\npprint(r)\npprint(r.json())\n
\n

To be able to create response, we will need the comment ID. It can be retrieved from API shown here in docs or by clicking on the three dots icon in upper right corner of issue comment and clicking Copy Link:

\n

\"Comment

\n

With that we can insert owner username, repo name and this comment_id in the URL and emoji name (e.g. hooray) in the content body parameter. Additionally we need to also include Accept header, as this endpoint is part of developer preview.

\n

The expected response here is either 201 which means that reaction was created or 200 in which case the reaction was already added previously.

\n
<Response [201]>  # First pprint from snippet above.\n
\n

And here is (trimmed) JSON response body, that we get back:

\n
{\"content\": \"hooray\",\n \"created_at\": \"2020-05-12T15:43:53Z\",\n \"id\": 71256913,\n \"node_id\": \"MDg6UmVhY3Rpb243MTI1NjkxMw==\",\n \"user\": {...}}\n
\n

Conclusion

\n

Playing with public APIs is great way to start a new project (e.g. CI tools, Repository traffic analytics, GitHub Bots) and GitHub API has a lot of data/content for such a thing. What I showed here is just a small sample. To explore full API see docs here or if you don't feel like messing with the REST API, then check out PyGitHub Examples.

\n

Source

"},{"url":"/docs/content/history-api/","relativePath":"docs/content/history-api.md","relativeDir":"docs/content","base":"history-api.md","name":"history-api","frontmatter":{"title":"History API","weight":0,"excerpt":"history API explained","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

History Api

\n

\n\n

\n

The DOM Window object provides access to the browser's session history (not to be confused for WebExtensions history) through the history object. It exposes useful methods and properties that let you navigate back and forth through the user's history, and manipulate the contents of the history stack.

\n

Concepts and usage

\n

Moving backward and forward through the user's history is done using the back(), forward(), and go() methods.

\n

Moving forward and backward

\n

To move backward through history:

\n

This acts exactly as if the user clicked on the Back button in their browser toolbar.

\n

Similarly, you can move forward (as if the user clicked the Forward button), like this:

\n

Moving to a specific point in history

\n

You can use the go() method to load a specific page from session history, identified by its relative position to the current page. (The current page's relative position is 0.)

\n

To move back one page (the equivalent of calling back()):

\n

To move forward a page, just like calling forward():

\n

Similarly, you can move forward 2 pages by passing 2, and so forth.

\n

Another use for the go() method is to refresh the current page by either passing 0, or by invoking it without an argument:

\n

You can determine the number of pages in the history stack by looking at the value of the length property:

\n

Interfaces

\n

Allows manipulation of the browser session history (that is, the pages visited in the tab or frame that the current page is loaded in).

\n

Examples

\n

The following example assigns a listener to the onpopstate property. And then illustrates some of the methods of the history object to add, replace, and move within the browser history for the current tab.

\n

Working with the History API\n

\n

HTML5 introduced the pushState() and replaceState() methods for add and modifying history entries, respectively. These methods work in conjunction with the onpopstate event.

\n

Adding and modifying history entries

\n

Using pushState() changes the referrer that gets used in the HTTP header for XMLHttpRequest objects created after you change the state. The referrer will be the URL of the document whose window is this at the time of creation of the XMLHttpRequest object.

\n

Example of pushState() method

\n

Suppose https://mozilla.org/foo.html executes the following JavaScript:

\n

This will cause the URL bar to display https://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists.

\n

Suppose now that the user navigates to https://google.com, then clicks the Back button. At this point, the URL bar will display https://mozilla.org/bar.html and history.state will contain the stateObj. The popstate event won't be fired because the page has been reloaded. The page itself will look like bar.html.

\n

If the user clicks Back once again, the URL will change to https://mozilla.org/foo.html, and the document will get a popstate event, this time with a null state object. Here too, going back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the popstate event.

\n

The pushState() method

\n

pushState() takes three parameters: a state object; a title (currently ignored); and (optionally), a URL.

\n

Let's examine each of these three parameters in more detail.

\n

The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object. The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage.

\n

All browsers but Safari currently ignore this parameter, although they may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving.

\n

The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

\n

Note: In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) through Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the passed object is serialized using JSON. Starting in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.

\n

In a sense, calling pushState() is similar to setting window.location = \"#foo\", in that both will also create and activate another history entry associated with the current document.

\n

But pushState() has a few advantages:

\n
    \n
  • The new URL can be any URL in the same origin as the current URL. In contrast, setting window.location keeps you at the same document only if you modify only the hash.
    • \n
  • You don't have to change the URL if you don't want to. In contrast, setting window.location = \"#foo\"; creates a new history entry only if the current hash isn't #foo.
    • \n
  • You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.
    • \n
  • If title is subsequently used by browsers, this data can be utilized (independent of, say, the hash).
    • \n
\n

Note that pushState() never causes a hashchange event to be fired, even if the new URL differs from the old URL only in its hash.

\n

In other documents, it creates an element with a null namespace URI.

\n

The replaceState() method

\n

history.replaceState() operates exactly like history.pushState(), except that replaceState() modifies the current history entry instead of creating a new one. Note that this doesn't prevent the creation of a new entry in the global browser history.

\n

replaceState() is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.

\n

Note: In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) through Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the passed object is serialized using JSON. Starting in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.

\n

Example of replaceState() method

\n

Suppose https://mozilla.org/foo.html executes the following JavaScript:

\n

The explanation of these two lines above can be found at the above section Example of pushState() method section.

\n

Next, suppose https://mozilla.org/bar.html executes the following JavaScript:

\n

This will cause the URL bar to display https://mozilla.org/bar2.html, but won't cause the browser to load bar2.html or even check that bar2.html exists.

\n

Suppose now that the user navigates to https://www.microsoft.com, then clicks the Back button. At this point, the URL bar will display https://mozilla.org/bar2.html. If the user now clicks Back again, the URL bar will display https://mozilla.org/foo.html, and totally bypass bar.html.

\n

The popstate event

\n

A popstate event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to pushState or affected by a call to replaceState, the popstate event's state property contains a copy of the history entry's state object.

\n

See WindowEventHandlers.onpopstate for sample usage.

\n

Reading the current state

\n

When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using pushState() or replaceState()) and then the user restarts their browser. When the page reloads, the page will receive an onload event, but no popstate event. However, if you read the history.state property, you'll get back the state object you would have gotten if a popstate had fired.

\n

You can read the state of the current history entry without waiting for a popstate event using the history.state property like this:

\n

See also

\n\n

Window.historyCopy to Clipboard\n\n

\n

The Window.history read-only property returns a reference to the History object, which provides an interface for manipulating the browser session history (pages visited in the tab or frame that the current page is loaded in).

\n

See Manipulating the browser history for examples and details. In particular, that article explains security features of the pushState() and replaceState() methods that you should be aware of before using them.

\n

Example

\n

Notes

\n

For top-level pages you can see the list of pages in the session history, accessible via the History object, in the browser's dropdowns next to the back and forward buttons.

\n

For security reasons the History object doesn't allow the non-privileged code to access the URLs of other pages in the session history, but it does allow it to navigate the session history.

\n

There is no way to clear the session history or to disable the back/forward navigation from unprivileged code. The closest available solution is the location.replace() method, which replaces the current item of the session history with the provided URL.

"},{"url":"/docs/content/archive/","relativePath":"docs/content/archive.md","relativeDir":"docs/content","base":"archive.md","name":"archive","frontmatter":{"title":"Archive","weight":0,"seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Archives:

\n
\n
\n
\n
\n

Text Tools

\n
\n\n
\n
\n
\n
\n
\n
\n

Ternary Converter

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
********************
12345
leonardomso/33-js-conceptsThis repository was created with the intention of helping developers master their concepts in JavaScript. It is not a…github.comCall stack - MDN Web Docs Glossary: Definitions of Web-related terms MDNA call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its…developer.mozilla.orgUnderstanding Javascript Function Executions — Call Stack, Event Loop , Tasks & moreWeb developers or Front end engineers, as that's what we like to be called, nowadays do everything right from acting as…medium.comUnderstanding the JavaScript call stackThe JavaScript engine (which is found in a hosting environment like the browser), is a single-threaded interpreter…medium.freecodecamp.org Javascript: What Is The Execution Context? What Is The Call Stack?What is the Execution Context in Javascript? I bet you don't know the answer. What are the most basic components of a…web.archive.orgUnderstanding Execution Context and Execution Stack in JavascriptUnderstanding execution context and stack to become a better Javascript developer.blog.bitsrc.io
JavaScript data types and data structures - JavaScript MDNProgramming languages all have built-in data structures, but these often differ from one language to another. This…developer.mozilla.orgHow numbers are encoded in JavaScriptEdit description2ality.comHere is what you need to know about JavaScript's Number typeWhy 0.1+0.2 IS NOT equal to 0.3 and 9007199254740992 IS equal to 9007199254740993medium.comWhat Every JavaScript Developer Should Know About Floating Point NumbersAfter I gave my talk on JavaScript (really, I was there trying to shamelessly plug my book - Underhanded JavaScript and…blog.chewxy.comThe Secret Life of JavaScript PrimitivesYou may not know it but, in JavaScript, whenever you interact with string, number or boolean primitives you enter a…javascriptweblog.wordpress.com
JavaScript Reference and Copy Variables Hacker NoonEach programming language has its own peculiarities (and JavaScript has a lot), and today I'm going to talk about…hackernoon.comJavaScript Primitive vs. Reference ValuesSummary: in this tutorial, you will learn the differences between primitive and reference values. In JavaScript, a…www.javascripttutorial.netJavaScript by reference vs. by valueI'm looking for some good comprehensive reading material on when JavaScript passes something by value and when by…stackoverflow.comJavaScript Interview Prep: Primitive vs. Reference Typesoriginal article In a JavaScript interview, they might ask if you understand the difference between primitive and…dev.toWhat you need to know about Javascript's Implicit CoercionJavascript's implicit coercion simply refers to Javascript attempting to coerce an unexpected value type to the…dev.to
Javascript Coercion ExplainedAlong with some practical exampleshackernoon.comWhat exactly is Type Coercion in Javascript?Let's start with a short intro to type systems which I think will help you understand the general idea of type…stackoverflow.comhttps://thedevs.network/*Weak dynamic typing is arguably one of those things everybody likes to pick at about JavaScript. For an elegant dynamic…*thedevs.networkgetify/You-Dont-Know-JSA book series on JavaScript. @YDKJS on twitter. Contribute to getify/You-Dont-Know-JS development by creating an…github.comJavaScript — Double Equals vs. Triple EqualsLearn equality in JavaScript in 3 minutescodeburst.io
Why Use the Triple-Equals Operator in JavaScript? - Impressive Webs“Determining whether two variables are equivalent is one of the most important operations in programming.” That's…www.impressivewebs.comWhat is the difference between == and === in JavaScript?_On the surface == and === appear to be functionally the same, so why bother typing an extra character? In this video…_www.oreilly.comWhy javascript's typeof always return “object”?To add in with the others, typeof returns both objects and primitives. There are 5 primitive types in javascript…stackoverflow.comChecking Types in JavascriptHave you ever wondered: what is the correct way to check if a Javascript variable is an Array? Do a Google search and…tobyho.comHow to better check data types in javascript - WebbjockeTo check what data type something has in javascript is not always the easiest. The language itself provides an operator…webbjocke.com
A JavaScript Fundamentals Cheat Sheet: Scope, Context, and “this”Scope Scope refers to where a variable can be accessed within a program. Some variables can be accessed from anywhere…dev.toQuick Tip: Function Expressions vs Function Declarations - SitePointThis article was peer reviewed by Jeff Mott. Thanks to all of SitePoint's peer reviewers for making SitePoint content…www.sitepoint.comJavaScript Function — Declaration vs ExpressionFunctions are considered as First Class citizen in JavaScript and it is really important to be clear with the concept…medium.comFunction Declarations vs. Function ExpressionsWhat is Function Statement/Declarations in JavaScript?medium.comFunction Declarations vs. Function ExpressionsLets start with a short quiz. What is alerted in each case?: Question 1: Question 2: Question 3: Question 4: If you…javascriptweblog.wordpress.com
16. ModulesEdit descriptionexploringjs.comES modules: A cartoon deep-dive - Mozilla Hacks - the Web developer blogES modules bring an official, standardized module system to JavaScript. With the release of Firefox 60 in May, all…hacks.mozilla.orgUnderstanding ES6 Modules - SitePointAlmost every language has a concept of modules - a way to include functionality declared in one file within another…www.sitepoint.comAn overview of ES6 Modules in JavaScriptIntroduction Until recently if you wanted to take full advantage of modules in JavaScript you needed to make use of…blog.cloud66.comES6 Modules in DepthWelcome back to ES6 - “Oh, good. It's not another article about Unicode” - in Depth series. If you've never been around…ponyfoo.com
How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with…Welcome to post # 4 of the series dedicated to exploring JavaScript and its building components. In the process of…blog.sessionstack.comTasks, microtasks, queues and schedulesEdit descriptionjakearchibald.comVisualising the JavaScript Event Loop with a Pizza Restaurant analogyConsider a pizza restaurant. There are two types of orders that we currently have from a single customer - one is an…dev.to✨♻️ JavaScript Visualized: Event LoopOh boi the event loop. It's one of those things that every JavaScript developer has to deal with in one way or another…dev.toScheduling: setTimeout and setIntervalEdit descriptionjavascript.info
Understanding How the Chrome V8 Engine Translates JavaScript into Machine CodeBefore diving deep into the core of Chrome's V8, first, let's get our fundamentals down. All of our systems consist of…medium.freecodecamp.orgUnderstanding V8's BytecodeV8 is Google's open source JavaScript engine. Chrome, Node.js, and many other applications use V8. This article…medium.comA Brief History of Google's V8 JavaScript EngineJavascript has a reputation in developer circles as a terrible language. It's classless, loosely typed, and plagued by…www.mediacurrent.comJavaScript essentials: why you should know how the engine worksThis article is also available in Spanish.medium.freecodecamp.orgJavaScript engine fundamentals: Shapes and Inline CachesThis article describes some key fundamentals that are common to all JavaScript engines - and not just V8, the engine…mathiasbynens.be
JavaScript engine fundamentals: optimizing prototypesThis article describes some key fundamentals that are common to all JavaScript engines - and not just V8, the engine…mathiasbynens.beElements kinds in V8Note: If you prefer watching a presentation over reading articles, then enjoy the video below! JavaScript objects can…v8.devProgramming with JS: Bitwise OperationsIn this series of articles we take a look at different Computer Science topics from the prism of JavaScript. We've…hackernoon.comUsing JavaScript's Bitwise Operators in Real LifeLet's pretend we're machine code programmers!codeburst.ioJavaScript Bitwise Operators - w3resourceBitwise operators perform an operation on the bitwise (0,1) representation of their arguments, rather than as decimal…www.w3resource.com
JavaScript DOM Tutorial with ExampleDetails JavaScript can access all the elements in a webpage making use of Document Object Model (DOM). In fact, the web…www.guru99.comWhat is the DOM?A reader recently wrote in asking me what the DOM was. They said they've heard it mentioned and alluded to, but aren't…css-tricks.comTraversing the DOM with JavaScriptA good JavaScript developer needs to know how to traverse the DOM-it's the act of selecting an element from another…zellwk.comDOM treeThe backbone of an HTML document is tags. According to the Document Object Model (DOM), every HTML tag is an object…javascript.infoHow to traverse the DOM in JavaScriptLearn how to navigate your way through the DOM tree.javascript.plainenglish.io
A Vanilla JS Guide On Mastering the DOMNote: The contents of this post are intended to be introductory and does not include use of any libraries like jQuery…dev.toHow To Use Classes in JavaScript DigitalOceanJavaScript is a prototype-based language, and every object in JavaScript has a hidden internal property called…www.digitalocean.comJavascript Classes — Under The HoodJavascript classes are nothing but a syntactic sugar over existing prototype based inheritance and constructor…medium.comES6 Classes - JavaScript JanuaryObject-Oriented Programming (OOP) can be a great way to organize your projects. Introduced with ES6, the javascript…www.javascriptjanuary.comPractical Ways to Write Better JavaScriptSolid methods of improving your JS. Tagged with javascript, webdev, beginners, react.dev.to
Better JavaScript with ES6, Pt. II: A Deep Dive into ClassesOut with the Old, In with the new Let's be clear about one thing from the start: Under the hood, ES6 classes are not…scotch.ioUnderstand the Factory Design Pattern in plain javascriptThe simplest way to understand Factory Design Patternmedium.comFactory Functions in JavaScript Aten Design GroupAs we move from an age of jQuery plugins and script drop-ins to a world of CommonJS and modular architectures it's…atendesigngroup.comThe Factory Pattern in JS ES6I'm trying to get the most out of all the new things in ES6 (ES2015). And I'm writing a new library where I need a…medium.comClass vs Factory function: exploring the way forwardECMAScript 2015 (aka ES6) comes with the class syntax, so now we have two competing patterns for creating objects. In…medium.freecodecamp.org
Prototype in Javascript CodementorBy default every function has a property name as prototype which is EMPTY ( by default). We can add properties and…www.codementor.ioPrototypes in JavaScriptIn this post, we will discuss what are prototypes in JavaScript, how they help JavaScript in achieving the concepts of…betterprogramming.pubPrototype in JavaScript: it's quirky, but here's how it worksThe following four lines are enough to confuse most JavaScript developers:medium.freecodecamp.orgUnderstanding JavaScript: Prototype and InheritanceDue to the amazing quantity of libraries, tools and all kinds of things that make your development easier, a lot of…hackernoon.comUnderstanding Classes (ES5) and Prototypal Inheritance in JavaScriptIn a nutshell the above snippet creates a Person class that can have multiple instances. By convention functional…dev.to
_Master JavaScript Prototypes & _Inheritance__\\ Inheritancecodeburst.ioJavaScript's Prototypal Inheritance Explained Using CSSPrototypal inheritance is arguably the least understood aspect of JavaScript. Well the good news is that if you…medium.freecodecamp.orgDemystifying ES6 Classes And Prototypal InheritanceIn the early history of the JavaScript language, a cloud of animosity formed over the lack of a proper syntax for…scotch.ioIntro To Prototypal Inheritance - JSIn this article I will try to give an introduction to protypal inheritance. As an “optional” pre-requisite, you can…dev.toLet's Build Prototypal Inheritance in JSThe idea for this post is pretty simple. I want to some extent build and with that, illustrate how prototypes work in…dev.to
Understanding Prototypal Inheritance In JavaScriptWhat Is Object-oriented Programming (OOP) Classical vs Prototypal Inheritance The Prototype Object And The Prototype…dev.toObject.create() - JavaScript MDNThe Object.create() method creates a new object, using an existing object as the prototype of the newly created object…developer.mozilla.orgObject.assign() - JavaScript MDNThe Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It…developer.mozilla.orgObject.create in JavaScriptThe Object.create method is one of the methods to create a new object in JavaScript.medium.comJavascript Objects A New Way to Create Objects HTML GoodiesThere are a lot of ways to create Objects in JavaScript, perhaps even more to integrate inheritance into them. Just…www.htmlgoodies.com
JavaScript Object Creation: Patterns and Best Practices - SitePointJeff Mott guides you through a step-by-step approach to JavaScript object creation - from object literals to factory…www.sitepoint.comDealing With Objects in JavaScript With Object.assign, Object.keys and hasOwnProperty …This post is a sort of grab bag to help you explore a few very useful methods to help you manage your objects in…alligator.ioCopying Objects in JavaScript DigitalOceanObjects are the fundamental blocks of JavaScript. An object is a collection of properties, and a property is an…scotch.ioJavaScript: Object.assign()Veja nesse artigo como utilizar o Object.assign() do ECMAScript 6codeburst.ioHow to deep clone a JavaScript objectCopying objects in JavaScript can be tricky. Some ways perform a shallow copy, which is the default behavior in most of…flaviocopes.com
How to Use Map, Filter, and Reduce in JavaScriptFunctional programming has been making quite a splash in the development world these days. And for good reason…code.tutsplus.comJavaScript — Learn to Chain Map, Filter, and ReduceLearn how to chain map, filter, and reduce in JavaScriptcodeburst.ioUnderstanding map, filter and reduce in JavascriptWhen working on Javascript projects you inevitably come across situations where you have to do some data manipulation…hackernoon.comFunctional Programming in JS: map, filter, reduce (Pt. 5)Note: This is part of the “Javascript and Functional Programming” series on learning functional programming techniques…hackernoon.comJavaScript: Map, Filter, ReduceJavaScript's built-in map, filter, and reduce array methods are invaluable to a modern JavaScript developer. First…wsvincent.com
A simple guide to help you understand closures in JavaScriptClosures in JavaScript are one of those concepts that many struggle to get their heads around. In the following…medium.freecodecamp.orgUnderstanding JavaScript Closures: A Practical ApproachLearning a new language involves a series of steps, whereas its mastery is a product of patience, practice, mistakes…scotch.ioUnderstanding JavaScript: ClosuresWhy learn JavaScript in depth?hackernoon.comHow to use JavaScript closures with confidenceUsing closures will be a piece of (chocolate) cakehackernoon.comJavaScript Closures by ExampleAt some point you may have run into a problem when executing functions from within a for loop. The first time it…howchoo.com
Higher-Order Functions :: Eloquent JavaScriptTzu-li and Tzu-ssu were boasting about the size of their latest programs. 'Two-hundred thousand lines,' said Tzu-li…eloquentjavascript.netHigher-Order Functions in JavaScript - SitePointContinuing his look at functional programming in JavaScript, M. David Green examines higher-order functions and how…www.sitepoint.comHigher Order Functions: Using Filter, Map and Reduce for More Maintainable CodeHigher order functions can help you to step up your JavaScript game by making your code more declarative. That is…medium.freecodecamp.orgFirst-class and Higher Order Functions: Effective Functional JavaScriptFunctions: the killer JavaScript feature we never talk about.hackernoon.comHigher Order Functions in JavaScriptHigher-order functions can be intimidating at first, but they're not that hard to learn. A higher-order function is…www.lullabot.com
ES6 Promises: Patterns and Anti-PatternsWhen I first got started with NodeJS a few years ago, I was mortified by what is now affectionately known as \"callback…medium.comA Simple Guide to ES6 PromisesThe woods are lovely, dark and deep. But I have promises to keep, and miles to go before I sleep. — Robert Frostcodeburst.ioThe ES6 PromisesA very helpful feature in ES6codeburst.ioES6 Promises in DepthPromises are a very involved paradigm, so we'll take it slow. Here's a table of contents with the topics we'll cover in…ponyfoo.comJavascript Promises: An In-Depth Approach“Write down the syntax for promises on this sheet of paper”, is enough to give nightmares to a lot of junior and even…codeburst.io
Promises - JavaScript conceptsThis is part of a series where I try to explain through each of 33 JS Concepts. This part corresponds to Promises…dev.toJavascript Promise 101Knowing how Promise works in javascript will boost your development skill exponentially. Here I will share: I promise…dev.toSimplify JavaScript PromisesI love promises. Not from people, but from JavaScript. Tweet Quote I love promises. Not from people, but from…dev.toThe Lowdown on PromisesA quick and concise guide on how Promises work in JavaScriptmedium.com⭐️🎀 JavaScript Visualized: Promises & Async/AwaitEver had to deal with JS code that just… didn't run the way you expected it to? Maybe it seemed like functions got…dev.to
How to escape async/await hellasync/await freed us from callback hell, but people have started abusing it — leading to the birth of async/await hell.medium.freecodecamp.orgUnderstanding JavaScript's async awaitLet's suppose we had code like the following. Here I'm wrapping an HTTP request in a Promise. The promise fulfills with…ponyfoo.comJavaScript Async/Await: Serial, Parallel and Complex Flow - TechBrijIf you have experience on ASP.NET MVC then probably you are familiar with async/await keywords in C#. The same thing is…techbrij.comFrom JavaScript Promises to Async/Await: why bother?In this tutorial, we will cover why we need async/await when we could achieve the same fit with JavaScript Promises, to…blog.pusher.comFlow Control in Modern JS: Callbacks to Promises to Async/Await - SitePointJavaScript is regularly claimed to be asynchronous. What does that mean? How does it affect development? How has the…www.sitepoint.com
Time Complexity Analysis in JavaScriptAn algorithm is a self-contained step-by-step set of instructions to solve a problem. It takes time for these steps to…www.jenniferbland.comAlgorithms in plain English: time complexity and Big-O notationEvery good developer has time on their mind. They want to give their users more of it, so they can do all those things…medium.freecodecamp.orgAn Introduction to Big O NotationBig O notation is a big topic, and its universal importance stems from the fact that it describes the efficiency of…dev.to[Crizstian/data-structure-and-algorithms-with-ES6Num Type Exercises Description 10.- Graph Data Structure 2 A graph consists of a set of vertices and a set of edges. A…github.com](https://github.com/Crizstian/data-structure-and-algorithms-with-ES6 \"https://github.com/Crizs
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
https://github.com/bgoonz/03-fetch-datahttps://github.com/bgoonz/gatsby-netlify-cms-norwexhttps://hub.com/bgoonz/React-movie-apphttps://github.com/bgoonz/Exploring-Promiseshttps://hub.com/bgoonz/vscode-customized-config
https://github.com/bgoonz/a-whole-bunch-o-gatsby-templateshttps://github.com/bgoonz/gatsby-react-portfoliohttps://hub.com/bgoonz/react-redux-medium-clonehttps://github.com/bgoonz/express-API-templatehttps://hub.com/bgoonz/vscode-Extension-readmes
https://github.com/bgoonz/activity-boxhttps://github.com/bgoonz/GIT-CDN-FILEShttps://hub.com/bgoonz/react-redux-notes-v5https://github.com/bgoonz/Express-basic-server-templatehttps://hub.com/bgoonz/web-crawler-node
https://github.com/bgoonz/All-Undergrad-Archivehttps://github.com/bgoonz/GIT-HTML-PREVIEW-TOOLhttps://hub.com/bgoonz/react-redux-registration-login-examplehttps://github.com/bgoonz/express-knex-postgres-boilerplatehttps://hub.com/bgoonz/web-dev-interview-prep-quiz-website
https://github.com/bgoonz/alternate-blog-themehttps://github.com/bgoonz/gitbookhttps://hub.com/bgoonz/ReactNotesV3https://github.com/bgoonz/EXPRESS-NOTEShttps://hub.com/bgoonz/web-dev-notes-resource-site
https://github.com/bgoonz/anki-cardshttps://github.com/bgoonz/github-readme-statshttps://hub.com/bgoonz/Recursion-Practice-Websitehttps://github.com/bgoonz/fast-fourier-transform-https://hub.com/bgoonz/web-dev-setup-checker
https://github.com/bgoonz/ask-me-anythinghttps://github.com/bgoonz/github-reference-repohttps://hub.com/bgoonz/Regex-and-Express-JShttps://github.com/bgoonz/form-builder-vanilla-jshttps://hub.com/bgoonz/WEB-DEV-TOOLS-HUB
https://github.com/bgoonz/atlassian-templateshttps://github.com/bgoonz/GoalsTrackerhttps://hub.com/bgoonz/repo-utilshttps://github.com/bgoonz/Front-End-Frameworks-Practicehttps://hub.com/bgoonz/web-dev-utils-package
https://github.com/bgoonz/Authentication-Noteshttps://github.com/bgoonz/graphql-experimentationhttps://hub.com/bgoonz/resume-cv-portfolio-sampleshttps://github.com/bgoonz/full-stack-react-reduxhttps://hub.com/bgoonz/WebAudioDaw
https://github.com/bgoonz/bash-commands-walkthroughhttps://github.com/bgoonz/https__mihirbeg.comhttps://hub.com/bgoonz/Revamped-Automatic-Guitar-Effect-Triggeringhttps://github.com/bgoonz/Full-Text-Searchhttps://hub.com/bgoonz/website
https://github.com/bgoonz/bash-config-backuphttps://github.com/bgoonz/iframe-showcasehttps://hub.com/bgoonz/scope-closure-contexthttps://github.com/bgoonz/Gameshttps://github.com/bgoonz/Data-Structures-Algos-Codebase
https://github.com/bgoonz/bash-shell-utility-functionshttps://github.com/bgoonz/Image-Archive-Traning-Datahttps://hub.com/bgoonz/Shell-Script-Practicehttps://github.com/bgoonz/MihirBegMusicV3https://github.com/bgoonz/DATASTRUCPYTHON_NOTES
https://github.com/bgoonz/bass-stationhttps://github.com/bgoonz/Independent-Blog-Entrieshttps://hub.com/bgoonz/site-analysishttps://github.com/bgoonz/MihirBegFinalhttps://github.com/bgoonz/design-home-page-with-routes-bq5v7k
https://github.com/bgoonz/bgoonzhttps://github.com/bgoonz/INTERVIEW-PREP-COMPLETEhttps://hub.com/bgoonz/sorting-algorithmshttps://github.com/bgoonz/mini-project-showcasehttps://github.com/bgoonz/docs-collection
https://github.com/bgoonz/BGOONZBLOG2.0STABLEhttps://github.com/bgoonz/JAMSTACK-TEMPLATEShttps://hub.com/bgoonz/sorting-algoshttps://github.com/bgoonz/Music-Theory-n-Web-Synth-Keyboardhttps://github.com/bgoonz/Documentation-site-react
https://github.com/bgoonz/BGOONZBLOG2.0https://github.com/bgoonz/Javascript-Best-Practices_--Toolshttps://hub.com/bgoonz/sqlite3-nodejs-demohttps://github.com/bgoonz/my-gistshttps://github.com/bgoonz/DS-ALGO-OFFICIAL
https://github.com/bgoonz/Binary-Searchhttps://github.com/bgoonz/jsanimatehttps://hub.com/bgoonz/stalk-photos-web-assetshttps://github.com/bgoonz/My-Medium-Bloghttps://github.com/bgoonz/DS-AND-ALGO-Notes-P2
https://github.com/bgoonz/blog-2.o-versionshttps://github.com/bgoonz/Jupyter-Notebookshttps://hub.com/bgoonz/Standalone-Metranomehttps://github.com/bgoonz/nextjs-netlify-blog-templatehttps://github.com/bgoonz/ecommerce-interactive
https://github.com/bgoonz/blog-templateshttps://github.com/bgoonz/Lambdahttps://hub.com/bgoonz/Star-wars-API-Promise-take2https://github.com/bgoonz/norwex-coff-ecomhttps://github.com/bgoonz/embedable-repl-and-integrated-code-space-playground
https://github.com/bgoonz/blog-w-commentshttps://github.com/bgoonz/Lambda-Resource-Static-Assetshttps://hub.com/bgoonz/Static-Study-Sitehttps://github.com/bgoonz/old-c-and-cpp-repos-from-undergradhttps://github.com/bgoonz/excel2html-table
https://github.com/bgoonz/Blog2.0-August-Super-Stablehttps://github.com/bgoonz/learning-nextjshttps://hub.com/bgoonz/styling-templateshttps://github.com/bgoonz/old-code-from-undergrad
https://github.com/bgoonz/bootstrap-sidebar-templatehttps://github.com/bgoonz/Learning-Reduxhttps://hub.com/bgoonz/supertemphttps://github.com/bgoonz/picture-man-bob-v2
https://github.com/bgoonz/callbackshttps://github.com/bgoonz/Links-Shortcut-Sitehttps://hub.com/bgoonz/Ternary-converterhttps://github.com/bgoonz/Project-Showcase
https://github.com/bgoonz/Commentshttps://github.com/bgoonz/live-exampleshttps://hub.com/bgoonz/TetrisJShttps://github.com/bgoonz/promises-with-async-and-await
https://github.com/bgoonz/commercejs-nextjs-demo-storehttps://github.com/bgoonz/live-formhttps://hub.com/bgoonz/TexToolshttps://github.com/bgoonz/psql-practice
https://github.com/bgoonz/Common-npm-Readme-Compilationhttps://github.com/bgoonz/loadash-es6-refactorhttps://hub.com/bgoonz/The-Algorithmshttps://github.com/bgoonz/python-playground-embed
https://github.com/bgoonz/Comparing-Web-Development-Bootcamps-2021https://github.com/bgoonz/markdown-csshttps://hub.com/bgoonz/TRASHhttps://github.com/bgoonz/python-practice-notes
https://github.com/bgoonz/Connect-Four-Final-Versionhttps://github.com/bgoonz/Markdown-Templateshttps://hub.com/bgoonz/Triggered-Guitar-Effects-Platformhttps://github.com/bgoonz/python-scripts
https://github.com/bgoonz/convert-folder-contents-2-websitehttps://github.com/bgoonz/meditation-apphttps://hub.com/bgoonz/Useful-Snippets-jshttps://github.com/bgoonz/PYTHON_PRAC
https://github.com/bgoonz/Copy-2-Clipboard-jQueryhttps://github.com/bgoonz/MihirBegMusicLabhttps://hub.com/bgoonz/UsefulResourceRepo2.0https://github.com/bgoonz/random-list-of-embedable-content
"},{"url":"/docs/content/trouble-shooting/","relativePath":"docs/content/trouble-shooting.md","relativeDir":"docs/content","base":"trouble-shooting.md","name":"trouble-shooting","frontmatter":{"title":"Trouble Shooting","weight":0,"excerpt":"Here I will save details of problems I have been troubleshooting.","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"
\n

Trouble Shooting Log

\n
\n\n
\n
\n
"},{"url":"/docs/css/","relativePath":"docs/css/index.md","relativeDir":"docs/css","base":"index.md","name":"index","frontmatter":{"title":"Css","weight":0,"excerpt":"Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.","seo":{"title":"Cascading Style Sheets","description":"Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

CSS is among the core languages of the open web and is standardized across Web browsers according to W3C specifications. Previously, development of various parts of CSS specification was done synchronously, which allowed versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, CSS3. However, CSS4 has never become an official version.

\n

From CSS3, the scope of the specification increased significantly and the progress on different CSS modules started to differ so much, that it became more effective to develop and release recommendations separately per module. Instead of versioning the CSS specification, W3C now periodically takes a snapshot of the latest stable state of the CSS specification.

\n

Key resources

\n

CSS Introduction

\n

If you're new to web development, be sure to read our CSS basics article to learn what CSS is and how to use it.

\n

CSS Tutorials

\n

Our CSS learning area contains a wealth of tutorials to take you from beginner level to proficiency, covering all the fundamentals.

\n

CSS Reference

\n

Our exhaustive CSS reference for seasoned Web developers describes every property and concept of CSS.

\n

Looking to become a front-end web developer?

\n

We have put together a course that includes all the essential information you need to work towards your goal.

\n

Get started

\n

Tutorials

\n

Our CSS Learning Area features multiple modules that teach CSS from the ground up — no previous knowledge required.

\n

CSS first steps

\n

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

\n

CSS building blocks

\n

This module carries on where CSS first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, it's time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.

\n

The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like text styling and CSS layout.

\n

Styling text

\n

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

\n

CSS layout

\n

At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and to each other. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.

\n
    \n
  • The property which is an identifier, that is a human-readable name, that defines which feature is considered.
    • \n
  • The value which describe how the feature must be handled by the engine. Each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine.
    • \n
\n

CSS declarations

\n

Setting CSS properties to specific values is the core function of the CSS language. A property and value pair is called a declaration, and any CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out, and to style it.

\n

Both properties and values are case-insensitive by default in CSS. The pair is separated by a colon, ':' (U+003A COLON), and white spaces before, between, and after properties and values, but not necessarily inside, are ignored.

\n

\"css

\n

There are more than 100 different properties in CSS and a nearly infinite number of different values. Not all pairs of properties and values are allowed and each property defines what are the valid values. When a value is not valid for a given property, the declaration is deemed invalid and is wholly ignored by the CSS engine.

\n

CSS declaration blocks

\n

Declarations are grouped in blocks, that is in a structure delimited by an opening brace, '{' (U+007B LEFT CURLY BRACKET), and a closing one, '}' (U+007D RIGHT CURLY BRACKET). Blocks sometimes can be nested, so opening and closing braces must be matched.

\n

\"css

\n

Such blocks are naturally called declaration blocks and declarations inside them are separated by a semi-colon, ';' (U+003B SEMICOLON). A declaration block may be empty, that is containing null declaration. White spaces around declarations are ignored. The last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered good style to do it as it prevents forgetting to add it when extending the block with another declaration.

\n

A CSS declaration block is visualized in the diagram below.

\n

\"css

\n

Note: The content of a CSS declaration block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an HTML style attribute.

\n

CSS rulesets

\n

If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.

\n

CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by one or more comma-separated selectors, which are conditions selecting some elements of the page. A selector group and an associated declarations block, together, are called a ruleset, or often a rule.

\n

A CSS ruleset (or rule) is visualized in the diagram below.

\n

\"css

\n

As an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the cascade algorithm.

\n

Note: It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.

\n

This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole selector is invalid and therefore the entire rule is ignored (as invalid too).

\n

CSS statements

\n

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

\n

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

\n

\"css

\n

There are two kinds of statements:

\n
    \n
  • Rulesets (or rules) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
    • \n
  • At-rules that start with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an identifier and then continuing up to the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of at-rules, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like @charset or @import), conditional information (like @media or @document), or descriptive information (like @font-face).
    • \n
\n

Any statement which isn't a ruleset or an at-rule is invalid and ignored.

\n

Nested statements

\n

There is another group of statements - the nested statements. These are statements that can be used in a specific subset of at-rules - the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which the browser runs matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.

"},{"url":"/docs/css/css-positioning/","relativePath":"docs/css/css-positioning.md","relativeDir":"docs/css","base":"css-positioning.md","name":"css-positioning","frontmatter":{"title":"lorem-ipsum","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

CSS POSITION:\n

\n

To start we are going to cover the easiest position value which you probably have never heard of but use all the time and that is the static position. static is the default value for the position property and essentially just means that an element will follow the normal document flow and will position itself based on the standard positioning rules.

\n

Any element that you do not apply a position property to will be static which means most elements you work with are statically positioned. static positioned elements cannot have the z-index, top, left, right, or bottom properties applied to them.

\n

Relative Position

\n

The next simplest position type is relative position. A relative position element works exactly the same as static position, but you can now add z-index, top, left, right, and bottom properties to it. If you make an element relative positioned without setting any of these extra properties you will notice it looks exactly the same as a static positioned element. This is because relative positioned elements also follow the normal document flow, but you can offset them using the top, left, right, and bottom properties.

\n

From the above example you can see that the one element works just like static when there is no extra properties defined. Once you add a property like left, or top, though, you can see that the element offsets itself relative to its normal position by these top, left, right, and bottom properties. You will notice, however, that the other elements do not move to account for the offset position of the relative positioned element. This is because all the other elements assume that the relative positioned element has no offsets and they determine their position based on where the relative positioned element would have been if it was static.

\n

Now on its own relative position is not that useful as you do not usually want to offset an element without also moving all the elements around it. The main use cases for position relative are to either set the z-index of the element, or to be used as a container for absolute positioned elements which we will talk about next.

\n

Absolute Position

\n

The absolute position is the first position that completely removes the element from the normal document flow. If you give an element position absolute all other elements will act as if the absolute positioned element doesn't even exist.

\n

As you can see elements two and three are laid out as if element one never even existed. You will also notice that element one no longer fills the full width. This is because absolute positioned elements have their width defaulted to auto instead of being full width like a div. Also, by default an absolute positioned element will place itself in the document where it normally would have rendered if it was a static element, but we can change that with the top, left, right, and bottom properties.

\n

Now you can see our element has moved to the top left corner of our dashed border. I am using this dashed border to represent the entire screen since by default a position absolute element will position itself relative to the body so a top and left of 0 means the element will appear in the top left corner of the body. You can change the element that the absolute positioned element is positioned off of by setting the position of one of its parent elements to anything other than static. This is one of the most common places relative position is used.

\n

By setting the purple parent element to a position of relative I am now forcing the absolute positioned child one element to be in the top left corner of the parent instead of the body. This combination of relative and absolute positions is incredibly common.

\n

Fixed Position

\n

Now we come to one of the lesser used positions which is the fixed position. fixed position is a bit like absolute position in that it removes the element from the document flow, but fixed position elements are always positioned relative to the screen no matter what position its parent elements are.

\n

As you can see our one element is fixed in the top left corner of our page. You will also notice when you scroll the page that it stays stuck in the top left corner of the page no matter where you scroll to. This is the main difference between fixed and absolute.

\n

Sticky Position

\n

The final position value is sticky. This position is a combination of both fixed and static position and combines the best of them both. An element with position sticky will act like a static positioned element until the page scrolls to a point where the element hits the top, left, right, or bottom value specified. It will then act like a fixed position element and scroll with the page until the element gets to the end of its container.

\n

At first you will notice that the one element is in its normal position in the document flow as if it were static. Once you scroll the page to the point that the top of the one element is 10px from the top of the page it will then stick to the top of the page as if it were position fixed. This will last this way all the way until the element gets to the bottom of the purple parent container in which case it will stop scrolling with the page.

\n

sticky position is the perfect position for navbars that scroll with the page, headings in long lists, and many other use cases.

\n

Absolute/Fixed Position Advanced

\n

Now there is one things about fixed and absolute position elements that you need to know since it could cause some weird, hard to find bugs. An element that is absolute positioned will use the first parent element that has a non-static position as its container to offset itself from and it will default to the body if no parent has a position value other than static. This we already know, but this is not the only way to define a parent container. absolute positioned elements will also check for a parent that has either the transform, filter, or perspective properties set. If any of those are found on a parent it will use that parent as the container.

\n

In the above example our purple parent element has a static position, but since it has a transform set it acts as the container for our absolute positioned child.

\n

The same thing works for fixed position elements. This also makes the scrolling behavior of the fixed position element not really work anymore.

\n

You will notice even as we scroll our page the fixed position element is stuck inside the purple parent container because it has a transform property set. This is generally not what you want which is why it is best to always define fixed position elements at the top level to avoid this potential bug.

"},{"url":"/docs/content/netlify/","relativePath":"docs/content/netlify.md","relativeDir":"docs/content","base":"netlify.md","name":"netlify","frontmatter":{"title":"Netlify Docs","weight":0,"excerpt":"For repositories stored on GitHub, the `github` backend allows CMS users to log in directly with their GitHub account. Note that all users must have push access to your content repository for this to work.","seo":{"title":"Netlify Docs","description":"netlify CMS docs","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Add to Your Site | Netlify CMS

\n
\n

Open source content management for your Git workflow

\n
\n

You can adapt Netlify CMS to a wide variety of projects. It works with any content written in markdown, JSON, YAML, or TOML files, stored in a repo on GitHub, GitLab, or Bitbucket. You can also create your own custom backend.

\n

This tutorial guides you through the steps for adding Netlify CMS to a site that's built with a common static site generator, like Jekyll, Hugo, Hexo, or Gatsby. Alternatively, you can start from a template or dive right into configuration options.

\n

App File Structure

\n

A static admin folder contains all Netlify CMS files, stored at the root of your published site. Where you store this folder in the source files depends on your static site generator. Here's the static file location for a few of the most popular static site generators:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
These generatorsstore static files in
Jekyll, GitBook/ (project root)
Hugo, Gatsby, Nuxt, Gridsome, Zola, Sapper/static
Next/public
Hexo, Middleman, Jigsaw/source
Spike/views
Wyam/input
Pelican/content
VuePress/.vuepress/public
Elmstatic/_site
11ty/_site
preact-cli/src/static
\n

If your generator isn't listed here, you can check its documentation, or as a shortcut, look in your project for a css or images folder. The contents of folders like that are usually processed as static files, so it's likely you can store your admin folder next to those. (When you've found the location, feel free to add it to these docs by filing a pull request!)

\n

Inside the admin folder, you'll create two files:

\n
admin\n ├ index.html\n └ config.yml\n
\n

The first file, admin/index.html, is the entry point for the Netlify CMS admin interface. This means that users navigate to yoursite.com/admin/ to access it. On the code side, it's a basic HTML starter page that loads the Netlify CMS JavaScript file. In this example, we pull the file from a public CDN:

\n
<!doctype html>\n<html>\n<head>\n  <meta charset=\"utf-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Content Manager</title>\n</head>\n<body>\n\n  <script src=\"https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js\"></script>\n</body>\n</html>\n
\n

In the code above the script is loaded from the unpkg CDN. Should there be any issue, jsDelivr can be used as an alternative source. Simply set the src to https://cdn.jsdelivr.net/npm/netlify-cms@^2.0.0/dist/netlify-cms.js

\n

The second file, admin/config.yml, is the heart of your Netlify CMS installation, and a bit more complex. The Configuration section covers the details.

\n

Installing with npm

\n

You can also use Netlify CMS as an npm module. Wherever you import Netlify CMS, it automatically runs, taking over the current page. Make sure the script that imports it only runs on your CMS page. First install the package and save it to your project:

\n
npm install netlify-cms-app --save\n
\n

Then import it (assuming your project has tooling for imports):

\n
import CMS from 'netlify-cms-app'\n\nCMS.init()\n\nCMS.registerPreviewTemplate('my-template', MyTemplate)\n
\n

Configuration

\n

Configuration is different for every site, so we'll break it down into parts. Add all the code snippets in this section to your admin/config.yml file.

\n

Backend

\n

We're using Netlify for our hosting and authentication in this tutorial, so backend configuration is fairly straightforward.

\n

For GitHub and GitLab repositories, you can start your Netlify CMS config.yml file with these lines:

\n
backend:\n  name: git-gateway\n  branch: master\n
\n

(For Bitbucket repositories, use the Bitbucket backend instructions instead.)

\n

The configuration above specifies your backend protocol and your publication branch. Git Gateway is an open source API that acts as a proxy between authenticated users of your site and your site repo. (We'll get to the details of that in the Authentication section below.) If you leave out the branch declaration, it defaults to master.

\n

Editorial Workflow

\n

Note: Editorial workflow works with GitHub repositories, and support for GitLab and Bitbucket is in beta.

\n

By default, saving a post in the CMS interface pushes a commit directly to the publication branch specified in backend. However, you also have the option to enable the Editorial Workflow, which adds an interface for drafting, reviewing, and approving posts. To do this, add the following line to your Netlify CMS config.yml:

\n
publish_mode: editorial_workflow\n
\n

Media and Public Folders

\n

Netlify CMS allows users to upload images directly within the editor. For this to work, the CMS needs to know where to save them. If you already have an images folder in your project, you could use its path, possibly creating an uploads sub-folder, for example:

\n
media_folder: \"images/uploads\"\n
\n

If you're creating a new folder for uploaded media, you'll need to know where your static site generator expects static files. You can refer to the paths outlined above in App File Structure, and put your media folder in the same location where you put the admin folder.

\n

Note that themedia_folder file path is relative to the project root, so the example above would work for Jekyll, GitBook, or any other generator that stores static files at the project root. However, it would not work for Hugo, Hexo, Middleman or others that store static files in a subfolder. Here's an example that could work for a Hugo site:

\n
media_folder: \"static/images/uploads\"\npublic_folder: \"/images/uploads\"\n
\n

The configuration above adds a new setting, public_folder. While media_folder specifies where uploaded files are saved in the repo, public_folder indicates where they are found in the published site. Image src attributes use this path, which is relative to the file where it's called. For this reason, we usually start the path at the site root, using the opening /.

\n

If `publicfolderis not set, Netlify CMS defaults to the same value asmediafolder, adding an opening/` if one is not included.

\n

Collections

\n

Collections define the structure for the different content types on your static site. Since every site is different, the collections settings differ greatly from one site to the next.

\n

Let's say your site has a blog, with the posts stored in _posts/blog, and files saved in a date-title format, like 1999-12-31-lets-party.md. Each post begins with settings in yaml-formatted front matter, like so:

\n
---\nlayout: blog\ntitle: \"Let's Party\"\ndate: 1999-12-31 11:59:59 -0800\nthumbnail: \"/images/prince.jpg\"\nrating: 5\n---\n\nThis is the post body, where I write about our last chance to party before the Y2K bug destroys us all.\n
\n

Given this example, our collections settings would look like this in your NetlifyCMS config.yml file:

\n
collections:\n  - name: \"blog\"\n    label: \"Blog\"\n    folder: \"_posts/blog\"\n    create: true\n    slug: \"{{year}}-{{month}}-{{day}}-{{slug}}\"\n    fields:\n      - {label: \"Layout\", name: \"layout\", widget: \"hidden\", default: \"blog\"}\n      - {label: \"Title\", name: \"title\", widget: \"string\"}\n      - {label: \"Publish Date\", name: \"date\", widget: \"datetime\"}\n      - {label: \"Featured Image\", name: \"thumbnail\", widget: \"image\"}\n      - {label: \"Rating (scale of 1-5)\", name: \"rating\", widget: \"number\"}\n      - {label: \"Body\", name: \"body\", widget: \"markdown\"}\n
\n

Let's break that down:

\n
namePost type identifier, used in routes. Must be unique.
labelWhat the admin UI calls the post type.
folderWhere files of this type are stored, relative to the repo root.
createSet to true to allow users to create new files in this collection.
slugTemplate for filenames. {{year}}, {{month}}, and {{day}} pulls from the post's date field or save date. {{slug}} is a url-safe version of the post's title. Default is simply {{slug}}.
fieldsFields listed here are shown as fields in the content editor, then saved as front matter at the beginning of the document (except for body, which follows the front matter). Each field contains the following properties:
  • label: Field label in the editor UI.
  • name: Field name in the document front matter.
  • widget: Determines UI style and value data type (details below).
  • default (optional): Sets a default value for the field.
\n

As described above, the widget property specifies a built-in or custom UI widget for a given field. When a content editor enters a value into a widget, that value is saved in the document front matter as the value for the name specified for that field. A full listing of available widgets can be found in the Widgets doc.

\n

Based on this example, you can go through the post types in your site and add the appropriate settings to your Netlify CMS config.yml file. Each post type should be listed as a separate node under the collections field. See the Collections reference doc for more configuration options.

\n

Filter

\n

The entries for any collection can be filtered based on the value of a single field. The example collection below only shows post entries with the value en in the language field.

\n
collections:\n  - name: \"posts\"\n    label: \"Post\"\n    folder: \"_posts\"\n    filter:\n      field: language\n      value: en\n    fields:\n      - {label: \"Language\", name: \"language\"}\n
\n

Authentication

\n

Now that you have your Netlify CMS files in place and configured, all that's left is to enable authentication. We're using the Netlify platform here because it's one of the quickest ways to get started, but you can learn about other authentication options in the Backends doc.

\n

Setup on Netlify

\n

Netlify offers a built-in authentication service called Identity. In order to use it, connect your site repo with Netlify. Netlify has published a general Step-by-Step Guide for this, along with detailed guides for many popular static site generators, including Jekyll, Hugo, Hexo, Middleman, Gatsby, and more.

\n

Enable Identity and Git Gateway

\n

Netlify's Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:

\n
    \n
  1. Go to Settings > Identity, and select Enable Identity service.
    2. \n
  2. Under Registration preferences, select Open or Invite only. In most cases, you want only invited users to access your CMS, but if you're just experimenting, you can leave it open for convenience.
    3. \n
  3. If you'd like to allow one-click login with services like Google and GitHub, check the boxes next to the services you'd like to use, under External providers.
    4. \n
  4. Scroll down to Services > Git Gateway, and click Enable Git Gateway. This authenticates with your Git host and generates an API access token. In this case, we're leaving the Roles field blank, which means any logged in user may access the CMS. For information on changing this, check the Netlify Identity documentation.
    5. \n
\n

Add the Netlify Identity Widget

\n

With the backend set to handle authentication, now you need a frontend interface to connect to it. The open source Netlify Identity Widget is a drop-in widget made for just this purpose. To include the widget in your site, add the following script tag in two places:

\n
<script src=\"https://identity.netlify.com/v1/netlify-identity-widget.js\"></script>\n
\n

Add this to the <head> of your CMS index page at /admin/index.html, as well as the <head> of your site's main index page. Depending on how your site generator is set up, this may mean you need to add it to the default template, or to a \"partial\" or \"include\" template. If you can find where the site stylesheet is linked, that's probably the right place. Alternatively, you can include the script in your site using Netlify's Script Injection feature.

\n

When a user logs in with the Netlify Identity widget, an access token directs to the site homepage. In order to complete the login and get back to the CMS, redirect the user back to the /admin/ path. To do this, add the following script before the closing body tag of your site's main index page:

\n
<script>\n  if (window.netlifyIdentity) {\n    window.netlifyIdentity.on(\"init\", user => {\n      if (!user) {\n        window.netlifyIdentity.on(\"login\", () => {\n          document.location.href = \"/admin/\";\n        });\n      }\n    });\n  }\n</script>\n
\n

Note: This example script requires modern JavaScript and does not work on IE11. For legacy browser support, use function expressions (function () {}) in place of the arrow functions (() => {}), or use a transpiler such as Babel.

\n

Accessing the CMS

\n

Your site CMS is now fully configured and ready for login!

\n

If you set your registration preference to \"Invite only,\" invite yourself (and anyone else you choose) as a site user. To do this, select the Identity tab from your site dashboard, and then select the Invite users button. Invited users receive an email invitation with a confirmation link. Clicking the link will take you to your site with a login prompt.

\n

If you left your site registration open, or for return visits after confirming an email invitation, access your site's CMS at yoursite.com/admin/.

\n

Note: No matter where you access Netlify CMS — whether running locally, in a staging environment, or in your published site — it always fetches and commits files in your hosted repository (for example, on GitHub), on the branch you configured in your Netlify CMS config.yml file. This means that content fetched in the admin UI matches the content in the repository, which may be different from your locally running site. It also means that content saved using the admin UI saves directly to the hosted repository, even if you're running the UI locally or in staging.

\n

Happy posting!

\n

Source

\n

GitHub | Netlify CMS | Open-Source Content Management System

\n
\n

Open source content management for your Git workflow

\n
\n

For repositories stored on GitHub, the github backend allows CMS users to log in directly with their GitHub account. Note that all users must have push access to your content repository for this to work.

\n

Because Github requires a server for authentication, Netlify facilitates basic GitHub authentication.

\n

To enable basic GitHub authentication:

\n
    \n
  1. Follow the authentication provider setup steps in the Netlify docs.
    2. \n
  2. \n

    Add the following lines to your Netlify CMS config.yml file:

    \n

    backend:\nname: github\nrepo: owner-name/repo-name

    \n
    3. \n
\n

Specifying a status for deploy previews

\n

The GitHub backend supports deploy preview links. Netlify CMS checks the context of a commit's statuses and infers one that seems to represent a deploy preview. If you need to customize this behavior, you can specify which context to look for using preview_context:

\n
backend:\n  name: github\n  repo: my/repo\n  preview_context: my-provider/deployment\n
\n

The above configuration would look for the status who's \"context\" is \"my-provider/deployment\".

\n

Source

\n

Netlify CMS Open Authoring

\n
\n

I like the term \"Git-backed CMS.\" That term works for an emerging style of CMS that looks and behaves much like any other CMS, with a fascinating twist:

\n
\n

I like the term \"Git-backed CMS.\" That term works for an emerging style of CMS that looks and behaves much like any other CMS, with a fascinating twist: it doesn't actually store any data for you. These CMSs are connected to a Git repo where the data lives in flat files (e.g. Markdown). You teach the CMS where those files are and how they are structured. Then, as you use the CMS to create, edit, and delete things, those changes happen as commits (or pull/merge requests) are made against that repo. So cool.

\n

For example, CloudCannon can do it specifically for hosted Jekyll sites.

\n

But more in the Indie Web / JAMstack spirit, there are players like Forestry and the one I have the most experience with: Netlify CMS.

\n

Lemme do a series of screenshots with captions to make the point very clear.

\n

\n

The site in question is our Serverless site. It happens to be Gatsby, but the important part is that that the content comes from Markdown files in a Git repo.

\n

\n

Here's an example Markdown file (with Frontmatter) in the repo. I like Markdown fine, but I'd prefer to work with content in a GUI CMS honestly. The reason I went this way is so the data is in a repo, meaning I can take content-based pull requests.

\n

\n

I really do get content-based pull requests. That's the magic right there. That's exactly what I want.

\n

\n

Netlify CMS is basically two files. An index.html that loads up a SPA interface that literally does everything. And a configuration file to teach it about your content.

\n

\n

With Netlify CMS in place, I have my GUI CMS happy place. Any changes in here turn up as commits on the repo.

\n

OK OK OK. What's this \"Open Authoring\" thing?

\n

As I write, it's a beta feature.

\n

Here's the main thing: I can use Netlify CMS for my site. My team can also use it, because I can invite them specifically to the repo. But you, random person on the internet, cannot. If you wrote to me and told me you wanted to be a volunteer content manager on the site, then maybe, OK, I'll invite you to the repo. (You being a member of the repo will allow you to auth into Netlify CMS, assuming you are using the GitHub back end, which is the only connection Open Authoring works with right now.)

\n

But that's a bummer that random internet people can't submit pull requests on content via Netlify CMS. That would be way easier than the manual process of forking the repo and all that jazz — although to be fair, click the little pencil icon while looking at a Markdown file on GitHub and editing it makes the process pretty simple by opening a pull request automatically (but it doesn't help you add new content or upload images or anything).

\n

This is where Open Authoring comes in. In my Netlify CMS config I can basically flip it on with one line of config. They explain it well:

\n
\n

you can use Netlify CMS to accept contributions from GitHub users without giving them access to your repository. When they make changes in the CMS, the CMS forks your repository for them behind the scenes, and all the changes are made to the fork. When the contributor is ready to submit their changes, they can set their draft as ready for review in the CMS. This triggers a pull request to your repository, which you can merge using the GitHub UI.

\n
\n

Emphasis mine.

\n

Wanna see the real beauty of this? Now we can put \"Edit this\" buttons on all the content, and if you click it, you'll head straight into Netlify CMS to do the editing. It works if you are me, my team member, or you, random person from the internet.

\n

\n

That's what I've always wanted. It makes the site into a wiki! But there is enough public accountability (they have to use a real GitHub account) that I wouldn't worry about much spam or obnoxious behavior.

\n

Source

\n

Open Authoring | Netlify CMS

\n
\n

Open source content management for your Git workflow

\n
\n

This is a beta feature.

\n

When using the GitHub backend, you can use Netlify CMS to accept contributions from GitHub users without giving them access to your repository. When they make changes in the CMS, the CMS forks your repository for them behind the scenes, and all the changes are made to the fork. When the contributor is ready to submit their changes, they can set their draft as ready for review in the CMS. This triggers a pull request to your repository, which you can merge using the GitHub UI.

\n

At the same time, any contributors who do have write access to the repository can continue to use Netlify CMS normally.

\n

Requirements

\n
    \n
  • \n

    You must use the GitHub backend.

    \n

    Note that the Git Gateway backend does not support Open Authoring, even when the underlying repo is on GitHub.

    \n
    • \n
  • \n

    For private GitHub repos the user must have read access on the repo, and you must explicitly set the auth_scope to repo, for example:

    \n

    backend:\nname: github\nrepo: owner-name/private-repo-name\nauthscope: repo\nopenauthoring: true

    \n
    • \n
  • Enable the editorial workflow by setting publish_mode to editorial_workflow in your config.yml.
    • \n
  • \n

    Set open_authoring to true in the backend section of your config.yml, as follows:

    \n
    backend:\n  name: github\n  repo: owner-name/repo-name\n  open_authoring: true\n
    \n
    • \n
\n

Usage

\n

When a user logs into Netlify CMS who doesn't have write access to your repo, the CMS asks for permission to create a fork of your repo (or uses their existing fork, if they already have one). They are then presented with the normal CMS interface. The published content shown is from the original repo, so it stays up-to-date as changes are made.

\n

On the editorial workflow screen, the normal three columns are replaced by two columns instead — \"Draft\" and \"Ready to Review\".

\n

When they make changes to content in the CMS, the changes are made to a branch on their fork. In the editorial workflow screen, they see only their own pending changes. Once they're ready to submit their changes, they can move the card into the \"Ready To Review\" column to create a pull request. When the pull request is merged (by a repository maintainer via the GitHub UI), Netlify CMS deletes the branch and removes the card from the user's editorial workflow screen. Open Authoring users cannot publish entries through the CMS.

\n

Users who do have write access to the original repository continue to use the CMS normally. Unpublished changes made by users via Open Authoring are not visible on the editorial workflow screen, and their unpublished changes must be merged through the GitHub UI.

\n

Alternative for external contributors with Git Gateway

\n

As noted above, Open Authoring does not work with the Git Gateway backend. However, you can use Git Gateway on a site with Netlify Identity that has open registration. This lets users create accounts on your site and log into the CMS. There are a few differences, including the following:

\n
    \n
  • Users don't need to know about GitHub or create a GitHub account. Instead, they use Netlify Identity accounts that are created on your site and managed by you.
    • \n
  • The CMS applies users' changes directly to your repo, not to a fork. (If you use the editorial workflow, you can use features like GitHub's protected branches or Netlify's locked deploys to prevent users from publishing directly to your site from the CMS.)
    • \n
  • There is no distinction between users with write access to the repo and users without — all editorial workflow entries are visible from within the CMS and can be published with the CMS. (Unpublished Open Authoring entries, on the other hand, are visible only to the author in the CMS UI or publicly as GitHub PRs.)
    • \n
\n

Linking to specific entries in the CMS

\n

Open authoring often includes some sort of \"Edit this page\" link on the live site. Netlify CMS supports this via the edit path:

\n
/#/edit/{collectionName}/{entryName}\n
\n

For the entry named \"general\" in the \"settings\" file collection

\n
https://www.example.com/path-to-cms/#/edit/settings/general\n
\n

For blog post \"test.md\" in the \"posts\" folder collection

\n
https://www.example.com/path-to-cms/#/edit/posts/test\n
\n
    \n
  • collectionName: the name of the collection as entered in the CMS config.
    • \n
  • entryName (for file collections: the name of the entry from the CMS config.
    • \n
  • entryName (for folder collections: the filename, sans extension (the slug).
    • \n
\n

Source

"},{"url":"/docs/content/","relativePath":"docs/content/index.md","relativeDir":"docs/content","base":"index.md","name":"index","frontmatter":{"title":"Content","excerpt":"In this section you'll learn how to add syntax highlighting, examples, callouts and much more.","seo":{"title":"Manage Content","description":"This is the manage content page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Manage Content","keyName":"property"},{"name":"og:description","value":"This is the manage content page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Manage Content"},{"name":"twitter:description","value":"This is the manage content page"}]},"template":"docs","weight":0},"html":"
\n \n # My Repos:\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
\"ReadMe\"ReadMe\"ReadMe\"ReadMe
"},{"url":"/docs/docs/appendix/","relativePath":"docs/docs/appendix.md","relativeDir":"docs/docs","base":"appendix.md","name":"appendix","frontmatter":{"title":"Apendix","weight":0,"excerpt":"resources","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

index

\n

This appendix is a non-exhaustive list of new syntactic features and methods that were added to JavaScript in ES6. These features are the most commonly used and most helpful.

\n

While this appendix doesn't cover ES6 classes, we go over the basics while learning about components in the book. In addition, this appendix doesn't include descriptions of some larger new features like promises and generators. If you'd like more info on those or on any topic below, we encourage you to reference the Mozilla Developer Network's website (MDN).

\n

Prefer const and let over var

\n

If you've worked with ES5 JavaScript before, you're likely used to seeing variables declared with var:

\n
ar myVariable = 5;\n
\n

Both the const and let statements also declare variables. They were introduced in ES6.

\n

Use const in cases where a variable is never re-assigned. Using const makes this clear to whoever is reading your code. It refers to the \"constant\" state of the variable in the context it is defined within.

\n

If the variable will be re-assigned, use let.

\n

We encourage the use of const and let instead of var. In addition to the restriction introduced by const, both const and let are block scoped as opposed to function scoped. This scoping can help avoid unexpected bugs.

\n

Arrow functions

\n

There are three ways to write arrow function bodies. For the examples below, let's say we have an array of city objects:

\n
onst cities = [\n  { name: 'Cairo', pop: 7764700 },\n  { name: 'Lagos', pop: 8029200 },\n];\n
\n

If we write an arrow function that spans multiple lines, we must use braces to delimit the function body like this:

\n
const formattedPopulations = cities.map((city) => {\n  const popMM = (city.pop / 1000000).toFixed(2);\n  return popMM + ' million';\n});\nconsole.log(formattedPopulations);\n
\n

Note that we must also explicitly specify a return for the function.

\n

However, if we write a function body that is only a single line (or single expression) we can use parentheses to delimit it:

\n
const formattedPopulations2 = cities.map((city) => (\n  (city.pop / 1000000).toFixed(2) + ' million'\n));\n
\n

Notably, we don't use return as it's implied.

\n

Furthermore, if your function body is terse you can write it like so:

\n
const pops = cities.map(city => city.pop);\nconsole.log(pops);\n
\n

The terseness of arrow functions is one of two reasons that we use them. Compare the one-liner above to this:

\n
const popsNoArrow = cities.map(function(city) { return city.pop });\n
\n

Of greater benefit, though, is how arrow functions bind the this object.

\n

The traditional JavaScript function declaration syntax (function () {}) will bind this in anonymous functions to the global object. To illustrate the confusion this causes, consider the following example:

\n
unction printSong() {\n  console.log(\"Oops - The Global Object\");\n}\n\nconst jukebox = {\n  songs: [\n    {\n      title: \"Wanna Be Startin' Somethin'\",\n      artist: \"Michael Jackson\",\n    },\n    {\n      title: \"Superstar\",\n      artist: \"Madonna\",\n    },\n  ],\n  printSong: function (song) {\n    console.log(song.title + \" - \" + song.artist);\n  },\n  printSongs: function () {\n\n    this.songs.forEach(function(song) {\n\n      this.printSong(song);\n    });\n  },\n}\n\njukebox.printSongs();\n
\n

The method printSongs() iterates over this.songs with forEach(). In this context, this is bound to the object (jukebox) as expected. However, the anonymous function passed to forEach() binds its internal this to the global object. As such, this.printSong(song) calls the function declared at the top of the example, not the method on jukebox.

\n

JavaScript developers have traditionally used workarounds for this behavior, but arrow functions solve the problem by capturing the this value of the enclosing context. Using an arrow function for printSongs() has the expected result:

\n
  printSongs: function () {\n    this.songs.forEach((song) => {\n\n      this.printSong(song);\n    });\n  },\n}\n\njukebox.printSongs();\n
\n

For this reason, throughout the book we use arrow functions for all anonymous functions.

\n

Modules

\n

ES6 formally supports modules using the import/export syntax.

\n

Named exports

\n

Inside any file, you can use export to specify a variable the module should expose. Here's an example of a file that exports two functions:

\n
export const sayHi = () => (console.log('Hi!'));\nexport const sayBye = () => (console.log('Bye!'));\n\nconst saySomething = () => (console.log('Something!'));\n
\n

Now, anywhere we wanted to use these functions we could use import. We need to specify which functions we want to import. A common way of doing this is using ES6's destructuring assignment syntax to list them out like this:

\n
import { sayHi, sayBye } from './greetings';\n\nsayHi();\nsayBye();\n
\n

Importantly, the function that was not exported (saySomething) is unavailable outside of the module.

\n

Also note that we supply a relative path to from, indicating that the ES6 module is a local file as opposed to an npm package.

\n

Instead of inserting an export before each variable you'd like to export, you can use this syntax to list off all the exposed variables in one area:

\n
const sayHi = () => (console.log('Hi!'));\nconst sayBye = () => (console.log('Bye!'));\n\nconst saySomething = () => (console.log('Something!'));\n\nexport { sayHi, sayBye };\n
\n

We can also specify that we'd like to import all of a module's functionality underneath a given namespace with the import * as <Namespace> syntax:

\n
import * as Greetings from './greetings';\n\nGreetings.sayHi();\n\nGreetings.sayBye();\n\nGreetings.saySomething();\n
\n

Default export

\n

The other type of export is a default export. A module can only contain one default export:

\n
const sayHi = () => (console.log('Hi!'));\nconst sayBye = () => (console.log('Bye!'));\n\nconst saySomething = () => (console.log('Something!'));\n\nconst Greetings = { sayHi, sayBye };\n\nexport default Greetings;\n
\n

This is a common pattern for libraries. It means you can easily import the library wholesale without specifying what individual functions you want:

\n
import Greetings from './greetings';\n\nGreetings.sayHi();\nGreetings.sayBye();\n
\n

It's not uncommon for a module to use a mix of both named exports and default exports. For instance, with react-dom, you can import ReactDOM (a default export) like this:

\n
import ReactDOM from 'react-dom';\n\nReactDOM.render(\n\n);\n
\n

Or, if you're only going to use the render() function, you can import the named render() function like this:

\n
import { render } from 'react-dom';\n\nrender(\n\n);\n
\n

To achieve this flexibility, the export implementation for react-dom looks something like this:

\n
export const render = (component, target) => {\n\n};\n\nconst ReactDOM = {\n  render,\n\n};\n\nexport default ReactDOM;\n
\n

If you want to play around with the module syntax, check out the folder code/webpack/es6-modules.

\n

For more reading on ES6 modules, see this article from Mozilla: \"ES6 in Depth: Modules\".

\n

Object.assign()

\n

We use Object.assign() often throughout the book. We use it in areas where we want to create a modified version of an existing object.

\n

Object.assign() accepts any number of objects as arguments. When the function receives two arguments, it copies the properties of the second object onto the first, like so:

\n
onst coffee = { };\nconst noCream = { cream: false };\nconst noMilk = { milk: false };\nObject.assign(coffee, noCream);\n
\n

It is idiomatic to pass in three arguments to Object.assign(). The first argument is a new JavaScript object, the one that Object.assign() will ultimately return. The second is the object whose properties we'd like to build off of. The last is the changes we'd like to apply:

\n
const coffeeWithMilk = Object.assign({}, coffee, { milk: true });\n
\n

Object.assign() is a handy method for working with \"immutable\" JavaScript objects.

\n

Template literals

\n

In ES5 JavaScript, you'd interpolate variables into strings like this:

\n
var greeting = 'Hello, ' + user + '! It is ' + degF + ' degrees outside.';\n
\n

With ES6 template literals, we can create the same string like this:

\n
const greeting = `Hello, ${user}! It is ${degF} degrees outside.`;\n
\n

The spread operator (...)

\n

In arrays, the ellipsis ... operator will expand the array that follows into the parent array. The spread operator enables us to succinctly construct new arrays as a composite of existing arrays.

\n

Here is an example:

\n
onst a = [ 1, 2, 3 ];\nconst b = [ 4, 5, 6 ];\nconst c = [ ...a, ...b, 7, 8, 9 ];\n\nconsole.log(c);\n
\n

Notice how this is different than if we wrote:

\n
const d = [ a, b, 7, 8, 9 ];\nconsole.log(d);\n
\n

Enhanced object literals

\n

In ES5, all objects were required to have explicit key and value declarations:

\n
const explicit = {\n  getState: getState,\n  dispatch: dispatch,\n};\n
\n

In ES6, you can use this terser syntax whenever the property name and variable name are the same:

\n
const implicit = {\n  getState,\n  dispatch,\n};\n
\n

Lots of open source libraries use this syntax, so it's good to be familiar with it. But whether you use it in your own code is a matter of stylistic preference.

\n

Default arguments

\n

With ES6, you can specify a default value for an argument in the case that it is undefined when the function is called.

\n

This:

\n
unction divide(a, b) {\n\n  const divisor = typeof b === 'undefined' ? 1 : b;\n\n  return a / divisor;\n}\n
\n

Can be written as this:

\n
function divide(a, b = 1) {\n  return a / b;\n}\n
\n

In both cases, using the function looks like this:

\n
divide(14, 2);\n\ndivide(14, undefined);\n\ndivide(14);\n
\n

Whenever the argument b in the example above is undefined, the default argument is used. Note that null will not use the default argument:

\n
divide(14, null);\n
\n

Destructuring assignments

\n

For arrays

\n

In ES5, extracting and assigning multiple elements from an array looked like this:

\n
ar fruits = [ 'apples', 'bananas', 'oranges' ];\nvar fruit1 = fruits[0];\nvar fruit2 = fruits[1];\n
\n

In ES6, we can use the destructuring syntax to accomplish the same task like this:

\n
const [ veg1, veg2 ] = [ 'asparagus', 'broccoli', 'onion' ];\nconsole.log(veg1);\nconsole.log(veg2);\n
\n

The variables in the array on the left are \"matched\" and assigned to the corresponding elements in the array on the right. Note that 'onion' is ignored and has no variable bound to it.

\n

For objects

\n

We can do something similar for extracting object properties into variables:

\n
const smoothie = {\n  fats: [ 'avocado', 'peanut butter', 'greek yogurt' ],\n  liquids: [ 'almond milk' ],\n  greens: [ 'spinach' ],\n  fruits: [ 'blueberry', 'banana' ],\n};\n\nconst { liquids, fruits } = smoothie;\n\nconsole.log(liquids);\nconsole.log(fruits);\n
\n

Parameter context matching

\n

We can use these same principles to bind arguments inside a function to properties of an object supplied as an argument:

\n
const containsSpinach = ({ greens }) => {\n  if (greens.find(g => g === 'spinach')) {\n    return true;\n  } else {\n    return false;\n  }\n};\n\ncontainsSpinach(smoothie);\n
\n

We do this often with functional React components:

\n
const IngredientList = ({ ingredients, onClick }) => (\n  <ul className='IngredientList'>\n    {\n      ingredients.map(i => (\n        <li\n          key={i.id}\n          onClick={() => onClick(i.id)}\n          className='item'\n        >\n          {i.name}\n        </li>\n      ))\n    }\n  </ul>\n)\n
\n

Here, we use destructuring to extract the props into variables (ingredients and onClick) that we then use inside the component's function body.

"},{"url":"/docs/data-structures/data-structures-in-depth/","relativePath":"docs/data-structures/data-structures-in-depth.md","relativeDir":"docs/data-structures","base":"data-structures-in-depth.md","name":"data-structures-in-depth","frontmatter":{"title":"Data Structures","weight":0,"excerpt":"Asymptotic Notation is the hardware independent notation used to tell the time and space complexity of an algorithm. Meaning it's a standardized way of measuring how much memory an algorithm uses or how long it runs for given an input.","seo":{"title":"Data Structures ","description":"In Javascript","robots":[],"extra":[]},"template":"docs"},"html":"

Fundamental Data Structures In JavaScript

\n
\n
\n
\n

Algorithms

\n
\n\n
\n
\n
\n

The Algos Bgoonz Branch

\n
\n\n
\n
\n
\n
\n\n

Fundamental Data Structures In JavaScript

\n

Data structures in JavaScript

\n

Here's a website I created to practice data structures!\ndirectory\nEdit descriptionds-algo-official-c3dw6uapg-bgoonz.vercel.app

\n

Here's the repo that the website is built on:\nbgoonz/DS-ALGO-OFFICIAL\nNavigation ####Author:Bryan Guner Big O notation is the language we use for talking about how long an algorithm takes…github.com

\n

Resources (article content below):

\n

Videos

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Books

\n\n

Coding practice

\n\n

Courses

\n\n

Guides

\n\n

space

\n
\n

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.

\n
\n

time

\n
\n

The time complexity for a data structure is in general more diverse than its space complexity.

\n
\n

Several operations

\n
\n

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.

\n
\n

Dependent on data

\n
\n

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.

\n
\n
    \n
  • The best-case complexity: when the data looks the best
    • \n
  • The worst-case complexity: when the data looks the worst
    • \n
  • The average-case complexity: when the data looks average
    • \n
\n

Big O notation

\n

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.

\n

The Array data structure

\n

\n

Definition

\n

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

\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion

\n

O(1) O(n) O(1) O(n)

\n
class ArrayADT {\n    constructor() {\n        this.array = [];\n    }\n\n    add(data) {\n        this.array.push(data);\n    }\n\n    remove(data) {\n        this.array = this.array.filter((current) => current !== data);\n    }\n\n    search(data) {\n        const foundIndex = this.array.indexOf(data);\n        if (foundIndex === -1) {\n            return foundIndex;\n        }\n\n        return null;\n    }\n\n    getAtIndex(index) {\n        return this.array[index];\n    }\n\n    length() {\n        return this.array.length;\n    }\n\n    print() {\n        console.log(this.array.join(' '));\n    }\n}\n\nconst array = new ArrayADT();\nconsole.log('const array = new ArrayADT();: ', array);\nconsole.log('-------------------------------');\n\nconsole.log('array.add(1): ', array.add(1));\narray.add(3);\narray.add(4);\nconsole.log('array.add(2);: ', array.add(2), 'array.add(3);', array.add(3), 'array.add(4); ', array.add(4));\n\nconsole.log('-------------------------------');\narray.print();\nconsole.log('-------------------------------');\n\nconsole.log('search 3 gives index 2:', array.search(3));\nconsole.log('-------------------------------');\n\nconsole.log('getAtIndex 2 gives 3:', array.getAtIndex(2));\nconsole.log('-------------------------------');\n\nconsole.log('length is 4:', array.length());\nconsole.log('-------------------------------');\n\narray.remove(3);\narray.print();\nconsole.log('-------------------------------');\n\narray.add(5);\narray.add(5);\narray.print();\nconsole.log('-------------------------------');\n\narray.remove(5);\narray.print();\nconsole.log('-------------------------------');\n/*\n     ~ final : (master) node 01-array.js \n    const array = new ArrayADT();:  ArrayADT { array: [] }\n    -------------------------------\n    array.add(1):  undefined\n    array.add(2);:  undefined array.add(3); undefined array.add(4);  undefined\n    -------------------------------\n    1 3 4 2 3 4\n    -------------------------------\n    search 3 gives index 2: null\n    -------------------------------\n    getAtIndex 2 gives 3: 4\n    -------------------------------\n    length is 4: 6\n    -------------------------------\n    1 4 2 4\n    -------------------------------\n    1 4 2 4 5 5\n    -------------------------------\n    1 4 2 4\n    -------------------------------\n     ~ final : (master) \n     */\n
\n

\n

indexvalue0 … this is the first value, stored at zero position

\n
    \n
  1. The index of an array runs in sequence
    2. \n
  2. This could be useful for storing data that are required to be ordered, such as rankings or queues
    3. \n
  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
    4. \n
\n
    // 1. Creating Arrays\n    let firstArray = [\"a\",\"b\",\"c\"];\n    let secondArray = [\"d\",\"e\",\"f\"];\n\n    // 2. Access an Array Item\n    console.log(firstArray[0]); // Results: \"a\"\n\n    // 3. Loop over an Array\n    firstArray.forEach(function(item, index, array){\n        console.log(item, index);\n    });\n    // Results:\n    // a 0\n    // b 1\n    // c 2\n\n    // 4. Add new item to END of array\n    secondArray.push('g');\n    console.log(secondArray);\n    // Results: [\"d\",\"e\",\"f\", \"g\"]\n\n    // 5. Remove item from END of array\n    secondArray.pop();\n    console.log(secondArray);\n    // Results: [\"d\",\"e\",\"f\"]\n\n    // 6. Remove item from FRONT of array\n    secondArray.shift();\n    console.log(secondArray);\n    // Results: [\"e\",\"f\"]\n\n    // 7. Add item to FRONT of array\n    secondArray.unshift(\"d\");\n    console.log(secondArray);\n    // Results: [\"d\",\"e\",\"f\"]\n\n    // 8. Find INDEX of an item in array\n    let position = secondArray.indexOf('f');\n    // Results: 2\n\n    // 9. Remove Item by Index Position\n    secondArray.splice(position, 1);\n    console.log(secondArray);\n    // Note, the second argument, in this case \"1\",\n    // represent the number of array elements to be removed\n    // Results:  [\"d\",\"e\"]\n\n    // 10. Copy an Array\n    let shallowCopy = secondArray.slice();\n    console.log(secondArray);\n    console.log(shallowCopy);\n    // Results: ShallowCopy === [\"d\",\"e\"]\n\n    // 11. JavaScript properties that BEGIN with a digit MUST be accessed using bracket notation\n    renderer.3d.setTexture(model, 'character.png');     // a syntax error\n    renderer['3d'].setTexture(model, 'character.png');  // works properly\n\n\n    // 12. Combine two Arrays\n    let thirdArray = firstArray.concat(secondArray);\n    console.log(thirdArray);\n    // [\"a\",\"b\",\"c\", \"d\", \"e\"];\n\n    // 13. Combine all Array elements into a string\n    console.log(thirdArray.join()); // Results: a,b,c,d,e\n    console.log(thirdArray.join('')); // Results: abcde\n    console.log(thirdArray.join('-')); // Results: a-b-c-d-e\n\n    // 14. Reversing an Array (in place, i.e. destructive)\n    console.log(thirdArray.reverse()); // [\"e\", \"d\", \"c\", \"b\", \"a\"]\n\n    // 15. sort\n    let unsortedArray = [\"Alphabet\", \"Zoo\", \"Products\", \"Computer Science\", \"Computer\"];\n    console.log(unsortedArray.sort());\n    // Results: [\"Alphabet\", \"Computer\", \"Computer Science\", \"Products\", \"Zoo\" ]\n
\n
\n See More \n

2. Objects

\n

Think of objects as a logical grouping of a bunch of properties.

\n

Properties could be some variable that it's storing or some methods that it's using.

\n

I also visualize an object as a table.

\n

The main difference is that object's \"index\" need not be numbers and is not necessarily sequenced.

\n

\n
// 16. Creating an Object\n\nlet newObj = {\n    name: \"I'm an object\",\n    values: [1, 10, 11, 20],\n    others: '',\n    '1property': 'example of property name starting with digit'\n};\n\n// 17. Figure out what keys/properties are in an object\nconsole.log(Object.keys(newObj));\n// Results: [ 'name', 'values', 'others', '1property' ]\n\n// 18. Show all values stored in the object\nconsole.log(Object.values(newObj));\n\n// Results:\n// [ 'I\\'m an object',\n//   [ 1, 10, 11, 20 ],\n//   '',\n//   'example of property name starting with digit' ]\n\n// 19. Show all key and values of the object\nfor (let [key, value] of Object.entries(newObj)) {\n    console.log(`${key}: ${value}`);\n}\n// Results:\n// name: I'm an object\n// values: 1,10,11,20\n// others:\n// 1property: example of property name starting with digit\n\n// 20. Accessing Object's Properties\n// Two different ways to access properties, both produce same results\nconsole.log(newObj.name);\nconsole.log(newObj['name']);\n\n// But if the property name starts with a digit,\n// we CANNOT use dot notation\nconsole.log(newObj['1property']);\n\n// 21. Adding a Method to an Object\nnewObj.helloWorld = function () {\n    console.log('Hello World from inside an object!');\n};\n\n// 22. Invoking an Object's Method\nnewObj.helloWorld();\n
\n

The Hash Table

\n

\n

\n

Definition

\n
\n

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

\n
\n

Hash Tables are considered the more efficient data structure for lookup and for this reason, they are widely used.

\n

Complexity\nAverage\nAccess Search Insertion Deletion

\n
    \n
  • \n

    O(1) O(1) O(1)

    \n
    \n

    The code

    \n
    \n
    • \n
\n

Note, here I am storing another object for every hash in my Hash Table.

\n
class HashTable {\n    constructor(size) {\n        this.values = {};\n        this.numberOfValues = 0;\n        this.size = size;\n    }\n    add(key, value) {\n        let hash = this.calculateHash(key);\n        if (!this.values.hasOwnProperty(hash)) {\n            this.values[hash] = {};\n        }\n        if (!this.values[hash].hasOwnProperty(key)) {\n            this.numberOfValues++;\n        }\n        this.values[hash][key] = value;\n    }\n    remove(key) {\n        let hash = this.calculateHash(key);\n        if (this.values.hasOwnProperty(hash) && this.values[hash].hasOwnProperty(key)) {\n            delete this.values[hash][key];\n            this.numberOfValues--;\n        }\n    }\n    calculateHash(key) {\n        return key.toString().length % this.size;\n    }\n    search(key) {\n        let hash = this.calculateHash(key);\n        if (this.values.hasOwnProperty(hash) && this.values[hash].hasOwnProperty(key)) {\n            return this.values[hash][key];\n        } else {\n            return null;\n        }\n    }\n    length() {\n        return this.numberOfValues;\n    }\n    print() {\n        let string = '';\n        for (let value in this.values) {\n            for (let key in this.values[value]) {\n                string += this.values[value][key] + ' ';\n            }\n        }\n        console.log(string.trim());\n    }\n}\nlet hashTable = new HashTable(3);\nhashTable.add('first', 1);\nhashTable.add('second', 2);\nhashTable.add('third', 3);\nhashTable.add('fourth', 4);\nhashTable.add('fifth', 5);\nhashTable.print(); // => 2 4 1 3 5\nconsole.log('length gives 5:', hashTable.length()); // => 5\nconsole.log('search second gives 2:', hashTable.search('second')); // => 2\nhashTable.remove('fourth');\nhashTable.remove('first');\nhashTable.print(); // => 2 3 5\nconsole.log('length gives 3:', hashTable.length()); // => 3\n/*\n       ~ js-files : (master) node hash.js \n    2 4 1 3 5\n    length gives 5: 5\n    search second gives 2: 2\n    2 3 5\n    length gives 3: 3\n    */\n
\n

The Set

\n

Sets

\n

Sets are pretty much what it sounds like. It's the same intuition as Set in Mathematics. I visualize Sets as Venn Diagrams.

\n
// 23. Creating a new Set\nlet newSet = new Set();\n\n// 24. Adding new elements to a set\nnewSet.add(1); // Set[1]\nnewSet.add('text'); // Set[1, \"text\"]\n\n// 25. Check if element is in set\nnewSet.has(1); // true\n\n// 24. Check size of set\nconsole.log(newSet.size); // Results: 2\n\n// 26. Delete element from set\nnewSet.delete(1); // Set[\"text\"]\n\n// 27. Set Operations: isSuperSet\nfunction isSuperset(set, subset) {\n    for (let elem of subset) {\n        if (!set.has(elem)) {\n            return false;\n        }\n    }\n    return true;\n}\n// 28. Set Operations: union\nfunction union(setA, setB) {\n    let _union = new Set(setA);\n    for (let elem of setB) {\n        _union.add(elem);\n    }\n    return _union;\n}\n\n// 29. Set Operations: intersection\nfunction intersection(setA, setB) {\n    let _intersection = new Set();\n    for (let elem of setB) {\n        if (setA.has(elem)) {\n            _intersection.add(elem);\n        }\n    }\n    return _intersection;\n}\n// 30. Set Operations: symmetricDifference\nfunction symmetricDifference(setA, setB) {\n    let _difference = new Set(setA);\n    for (let elem of setB) {\n        if (_difference.has(elem)) {\n            _difference.delete(elem);\n        } else {\n            _difference.add(elem);\n        }\n    }\n    return _difference;\n}\n// 31. Set Operations: difference\nfunction difference(setA, setB) {\n    let _difference = new Set(setA);\n    for (let elem of setB) {\n        _difference.delete(elem);\n    }\n    return _difference;\n}\n\n// Examples\nlet setA = new Set([1, 2, 3, 4]);\nlet setB = new Set([2, 3]);\nlet setC = new Set([3, 4, 5, 6]);\n\nconsole.log(isSuperset(setA, setB)); // => true\nconsole.log(union(setA, setC)); // => Set [1, 2, 3, 4, 5, 6]\nconsole.log(intersection(setA, setC)); // => Set [3, 4]\nconsole.log(symmetricDifference(setA, setC)); // => Set [1, 2, 5, 6]\nconsole.log(difference(setA, setC)); // => Set [1, 2]\n
\n

\n

Definition

\n
\n

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

\n
\n

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…

\n

Complexity\nAverage\nAccess Search Insertion Deletion

\n
    \n
  • \n

    O(n) O(n) O(n)

    \n
    \n

    The code

    \n
    \n
    • \n
\n
function Set() {\n    this.values = [];\n    this.numberOfValues = 0;\n}\n\nSet.prototype.add = function (value) {\n    if (!~this.values.indexOf(value)) {\n        this.values.push(value);\n        this.numberOfValues++;\n    }\n};\nSet.prototype.remove = function (value) {\n    let index = this.values.indexOf(value);\n    if (~index) {\n        this.values.splice(index, 1);\n        this.numberOfValues--;\n    }\n};\nSet.prototype.contains = function (value) {\n    return this.values.indexOf(value) !== -1;\n};\nSet.prototype.union = function (set) {\n    let newSet = new Set();\n    set.values.forEach(function (value) {\n        newSet.add(value);\n    });\n    this.values.forEach(function (value) {\n        newSet.add(value);\n    });\n    return newSet;\n};\nSet.prototype.intersect = function (set) {\n    let newSet = new Set();\n    this.values.forEach(function (value) {\n        if (set.contains(value)) {\n            newSet.add(value);\n        }\n    });\n    return newSet;\n};\nSet.prototype.difference = function (set) {\n    let newSet = new Set();\n    this.values.forEach(function (value) {\n        if (!set.contains(value)) {\n            newSet.add(value);\n        }\n    });\n    return newSet;\n};\nSet.prototype.isSubset = function (set) {\n    return set.values.every(function (value) {\n        return this.contains(value);\n    }, this);\n};\nSet.prototype.length = function () {\n    return this.numberOfValues;\n};\nSet.prototype.print = function () {\n    console.log(this.values.join(' '));\n};\n\nlet set = new Set();\nset.add(1);\nset.add(2);\nset.add(3);\nset.add(4);\nset.print(); // => 1 2 3 4\nset.remove(3);\nset.print(); // => 1 2 4\nconsole.log('contains 4 is true:', set.contains(4)); // => true\nconsole.log('contains 3 is false:', set.contains(3)); // => false\nconsole.log('---');\nlet set1 = new Set();\nset1.add(1);\nset1.add(2);\nlet set2 = new Set();\nset2.add(2);\nset2.add(3);\nlet set3 = set2.union(set1);\nset3.print(); // => 1 2 3\nlet set4 = set2.intersect(set1);\nset4.print(); // => 2\nlet set5 = set.difference(set3); // 1 2 4 diff 1 2 3\nset5.print(); // => 4\nlet set6 = set3.difference(set); // 1 2 3 diff 1 2 4\nset6.print(); // => 3\nconsole.log('set1 subset of set is true:', set.isSubset(set1)); // => true\nconsole.log('set2 subset of set is false:', set.isSubset(set2)); // => false\nconsole.log('set1 length gives 2:', set1.length()); // => 2\nconsole.log('set3 length gives 3:', set3.length()); // => 3\n
\n

The Singly Linked List

\n

\n

Definition

\n
\n

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.

\n
\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(1)

\n
\n

The code

\n
\n
function Node(data) {\n    this.data = data;\n    this.next = null;\n}\n\nfunction SinglyLinkedList() {\n    this.head = null;\n    this.tail = null;\n    this.numberOfValues = 0;\n}\n\nSinglyLinkedList.prototype.add = function (data) {\n    let node = new Node(data);\n    if (!this.head) {\n        this.head = node;\n        this.tail = node;\n    } else {\n        this.tail.next = node;\n        this.tail = node;\n    }\n    this.numberOfValues++;\n};\nSinglyLinkedList.prototype.remove = function (data) {\n    let previous = this.head;\n    let current = this.head;\n    while (current) {\n        if (current.data === data) {\n            if (current === this.head) {\n                this.head = this.head.next;\n            }\n            if (current === this.tail) {\n                this.tail = previous;\n            }\n            previous.next = current.next;\n            this.numberOfValues--;\n        } else {\n            previous = current;\n        }\n        current = current.next;\n    }\n};\nSinglyLinkedList.prototype.insertAfter = function (data, toNodeData) {\n    let current = this.head;\n    while (current) {\n        if (current.data === toNodeData) {\n            let node = new Node(data);\n            if (current === this.tail) {\n                this.tail.next = node;\n                this.tail = node;\n            } else {\n                node.next = current.next;\n                current.next = node;\n            }\n            this.numberOfValues++;\n        }\n        current = current.next;\n    }\n};\nSinglyLinkedList.prototype.traverse = function (fn) {\n    let current = this.head;\n    while (current) {\n        if (fn) {\n            fn(current);\n        }\n        current = current.next;\n    }\n};\nSinglyLinkedList.prototype.length = function () {\n    return this.numberOfValues;\n};\nSinglyLinkedList.prototype.print = function () {\n    let string = '';\n    let current = this.head;\n    while (current) {\n        string += current.data + ' ';\n        current = current.next;\n    }\n    console.log(string.trim());\n};\n\nlet singlyLinkedList = new SinglyLinkedList();\nsinglyLinkedList.print(); // => ''\nsinglyLinkedList.add(1);\nsinglyLinkedList.add(2);\nsinglyLinkedList.add(3);\nsinglyLinkedList.add(4);\nsinglyLinkedList.print(); // => 1 2 3 4\nconsole.log('length is 4:', singlyLinkedList.length()); // => 4\nsinglyLinkedList.remove(3); // remove value\nsinglyLinkedList.print(); // => 1 2 4\nsinglyLinkedList.remove(9); // remove non existing value\nsinglyLinkedList.print(); // => 1 2 4\nsinglyLinkedList.remove(1); // remove head\nsinglyLinkedList.print(); // => 2 4\nsinglyLinkedList.remove(4); // remove tail\nsinglyLinkedList.print(); // => 2\nconsole.log('length is 1:', singlyLinkedList.length()); // => 1\nsinglyLinkedList.add(6);\nsinglyLinkedList.print(); // => 2 6\nsinglyLinkedList.insertAfter(3, 2);\nsinglyLinkedList.print(); // => 2 3 6\nsinglyLinkedList.insertAfter(4, 3);\nsinglyLinkedList.print(); // => 2 3 4 6\nsinglyLinkedList.insertAfter(5, 9); // insertAfter a non existing node\nsinglyLinkedList.print(); // => 2 3 4 6\nsinglyLinkedList.insertAfter(5, 4);\nsinglyLinkedList.insertAfter(7, 6); // insertAfter the tail\nsinglyLinkedList.print(); // => 2 3 4 5 6 7\nsinglyLinkedList.add(8); // add node with normal method\nsinglyLinkedList.print(); // => 2 3 4 5 6 7 8\nconsole.log('length is 7:', singlyLinkedList.length()); // => 7\nsinglyLinkedList.traverse(function (node) {\n    node.data = node.data + 10;\n});\nsinglyLinkedList.print(); // => 12 13 14 15 16 17 18\nsinglyLinkedList.traverse(function (node) {\n    console.log(node.data);\n}); // => 12 13 14 15 16 17 18\nconsole.log('length is 7:', singlyLinkedList.length()); // => 7\n
\n

The Doubly Linked List

\n

\n

Definition

\n
\n

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

\n
\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(1)

\n
\n

The code

\n
\n
class Node {\n    constructor(data) {\n        this.data = data;\n        this.previous = null;\n        this.next = null;\n    }\n}\nclass DoublyLinkedList {\n    constructor() {\n        this.head = null;\n        this.tail = null;\n        this.numberOfValues = 0;\n    }\n\n    add(data) {\n        let node = new Node(data);\n        if (!this.head) {\n            this.head = node;\n            this.tail = node;\n        } else {\n            node.previous = this.tail;\n            this.tail.next = node;\n            this.tail = node;\n        }\n        this.numberOfValues++;\n    }\n    remove(data) {\n        let current = this.head;\n        while (current) {\n            if (current.data === data) {\n                if (current === this.head && current === this.tail) {\n                    this.head = null;\n                    this.tail = null;\n                } else if (current === this.head) {\n                    this.head = this.head.next;\n                    this.head.previous = null;\n                } else if (current === this.tail) {\n                    this.tail = this.tail.previous;\n                    this.tail.next = null;\n                } else {\n                    current.previous.next = current.next;\n                    current.next.previous = current.previous;\n                }\n                this.numberOfValues--;\n            }\n            current = current.next;\n        }\n    }\n    insertAfter(data, toNodeData) {\n        let current = this.head;\n        while (current) {\n            if (current.data === toNodeData) {\n                let node = new Node(data);\n                if (current === this.tail) {\n                    this.add(data);\n                } else {\n                    current.next.previous = node;\n                    node.previous = current;\n                    node.next = current.next;\n                    current.next = node;\n                    this.numberOfValues++;\n                }\n            }\n            current = current.next;\n        }\n    }\n    traverse(fn) {\n        let current = this.head;\n        while (current) {\n            if (fn) {\n                fn(current);\n            }\n            current = current.next;\n        }\n    }\n    traverseReverse(fn) {\n        let current = this.tail;\n        while (current) {\n            if (fn) {\n                fn(current);\n            }\n            current = current.previous;\n        }\n    }\n    length() {\n        return this.numberOfValues;\n    }\n    print() {\n        let string = \"\";\n        let current = this.head;\n        while (current) {\n            string += current.data + \" \";\n            current = current.next;\n        }\n        console.log(string.trim());\n    }\n}\n\nlet doublyLinkedList = new DoublyLinkedList();\ndoublyLinkedList.print(); // => ''\ndoublyLinkedList.add(1);\ndoublyLinkedList.add(2);\ndoublyLinkedList.add(3);\ndoublyLinkedList.add(4);\ndoublyLinkedList.print(); // => 1 2 3 4\nconsole.log(\"length is 4:\", doublyLinkedList.length()); // => 4\ndoublyLinkedList.remove(3); // remove value\ndoublyLinkedList.print(); // => 1 2 4\ndoublyLinkedList.remove(9); // remove non existing value\ndoublyLinkedList.print(); // => 1 2 4\ndoublyLinkedList.remove(1); // remove head\ndoublyLinkedList.print(); // => 2 4\ndoublyLinkedList.remove(4); // remove tail\ndoublyLinkedList.print(); // => 2\nconsole.log(\"length is 1:\", doublyLinkedList.length()); // => 1\ndoublyLinkedList.remove(2); // remove tail, the list should be empty\ndoublyLinkedList.print(); // => ''\nconsole.log(\"length is 0:\", doublyLinkedList.length()); // => 0\ndoublyLinkedList.add(2);\ndoublyLinkedList.add(6);\ndoublyLinkedList.print(); // => 2 6\ndoublyLinkedList.insertAfter(3, 2);\ndoublyLinkedList.print(); // => 2 3 6\ndoublyLinkedList.traverseReverse(function (node) {\n    console.log(node.data);\n});\ndoublyLinkedList.insertAfter(4, 3);\ndoublyLinkedList.print(); // => 2 3 4 6\ndoublyLinkedList.insertAfter(5, 9); // insertAfter a non existing node\ndoublyLinkedList.print(); // => 2 3 4 6\ndoublyLinkedList.insertAfter(5, 4);\ndoublyLinkedList.insertAfter(7, 6); // insertAfter the tail\ndoublyLinkedList.print(); // => 2 3 4 5 6 7\ndoublyLinkedList.add(8); // add node with normal method\ndoublyLinkedList.print(); // => 2 3 4 5 6 7 8\nconsole.log(\"length is 7:\", doublyLinkedList.length()); // => 7\ndoublyLinkedList.traverse(function (node) {\n    node.data = node.data + 10;\n});\ndoublyLinkedList.print(); // => 12 13 14 15 16 17 18\ndoublyLinkedList.traverse(function (node) {\n    console.log(node.data);\n}); // => 12 13 14 15 16 17 18\nconsole.log(\"length is 7:\", doublyLinkedList.length()); // => 7\ndoublyLinkedList.traverseReverse(function (node) {\n    console.log(node.data);\n}); // => 18 17 16 15 14 13 12\ndoublyLinkedList.print(); // => 12 13 14 15 16 17 18\nconsole.log(\"length is 7:\", doublyLinkedList.length()); // => 7\n/*\n   ~ js-files : (master) node double-linked-list.js\n\n1 2 3 4\nlength is 4: 4\n1 2 4\n1 2 4\n2 4\n2\nlength is 1: 1\n\nlength is 0: 0\n2 6\n2 3 6\n6\n3\n2\n2 3 4 6\n2 3 4 6\n2 3 4 5 6 7\n2 3 4 5 6 7 8\nlength is 7: 7\n12 13 14 15 16 17 18\n12\n13\n14\n15\n16\n17\n18\nlength is 7: 7\n18\n17\n16\n15\n14\n13\n12\n12 13 14 15 16 17 18\nlength is 7: 7\n ~ js-files : (master)\n*/\n
\n

The Stack

\n

\n

Definition

\n
\n

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

\n
\n

A Stack often has a third method peek which allows to check the last pushed element without popping it.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(1)

\n
\n

The code

\n
\n
function Stack() {\n  this.stack = [];\n}\n\nStack.prototype.push = function(value) {\n  this.stack.push(value);\n};\nStack.prototype.pop = function() {\n  return this.stack.pop();\n};\nStack.prototype.peek = function() {\n  return this.stack[this.stack.length - 1];\n};\nStack.prototype.length = function() {\n  return this.stack.length;\n};\nStack.prototype.print = function() {\n  console.log(this.stack.join(' '));\n};\n\nlet stack = new Stack();\nstack.push(1);\nstack.push(2);\nstack.push(3);\nstack.print(); // => 1 2 3\nconsole.log('length is 3:', stack.length()); // => 3\nconsole.log('peek is 3:', stack.peek()); // => 3\nconsole.log('pop is 3:', stack.pop()); // => 3\nstack.print(); // => 1 2\nconsole.log('pop is 2:', stack.pop());  // => 2\nconsole.log('length is 1:', stack.length()); // => 1\nconsole.log('pop is 1:', stack.pop()); // => 1\nstack.print(); // => ''\nconsole.log('peek is undefined:', stack.peek()); // => undefined\nconsole.log('pop is undefined:', stack.pop()); // => undefined\n
\n

The Queue

\n

\n

Definition

\n
\n

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.

\n
\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(n)

\n
\n

The code

\n
\n
function Queue() {\n  this.queue = [];\n}\n\nQueue.prototype.enqueue = function(value) {\n  this.queue.push(value);\n};\nQueue.prototype.dequeue = function() {\n  return this.queue.shift();\n};\nQueue.prototype.peek = function() {\n  return this.queue[0];\n};\nQueue.prototype.length = function() {\n  return this.queue.length;\n};\nQueue.prototype.print = function() {\n  console.log(this.queue.join(' '));\n};\n\nlet queue = new Queue();\nqueue.enqueue(1);\nqueue.enqueue(2);\nqueue.enqueue(3);\nqueue.print(); // => 1 2 3\nconsole.log('length is 3:', queue.length()); // => 3\nconsole.log('peek is 1:', queue.peek()); // => 3\nconsole.log('dequeue is 1:', queue.dequeue()); // => 1\nqueue.print(); // => 2 3\nconsole.log('dequeue is 2:', queue.dequeue());  // => 2\nconsole.log('length is 1:', queue.length()); // => 1\nconsole.log('dequeue is 3:', queue.dequeue()); // => 3\nqueue.print(); // => ''\nconsole.log('peek is undefined:', queue.peek()); // => undefined\nconsole.log('dequeue is undefined:', queue.dequeue()); // => undefined\n
\n

The Tree

\n

\n

Definition

\n
\n

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

\n
\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(n) O(n)\nTo 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.

\n

\n
\n

The code

\n
\n
function Node(data) {\n  this.data = data;\n  this.children = [];\n}\n\nfunction Tree() {\n  this.root = null;\n}\n\nTree.prototype.add = function(data, toNodeData) {\n  let node = new Node(data);\n  let parent = toNodeData ? this.findBFS(toNodeData) : null;\n  if(parent) {\n    parent.children.push(node);\n  } else {\n    if(!this.root) {\n      this.root = node;\n    } else {\n      return 'Root node is already assigned';\n    }\n  }\n};\nTree.prototype.remove = function(data) {\n  if(this.root.data === data) {\n    this.root = null;\n  }\n\n  let queue = [this.root];\n  while(queue.length) {\n    let node = queue.shift();\n    for(let i = 0; i < node.children.length; i++) {\n      if(node.children[i].data === data) {\n        node.children.splice(i, 1);\n      } else {\n        queue.push(node.children[i]);\n      }\n    }\n  }\n};\nTree.prototype.contains = function(data) {\n  return this.findBFS(data) ? true : false;\n};\nTree.prototype.findBFS = function(data) {\n  let queue = [this.root];\n  while(queue.length) {\n    let node = queue.shift();\n    if(node.data === data) {\n      return node;\n    }\n    for(let i = 0; i < node.children.length; i++) {\n      queue.push(node.children[i]);\n    }\n  }\n  return null;\n};\nTree.prototype._preOrder = function(node, fn) {\n  if(node) {\n    if(fn) {\n      fn(node);\n    }\n    for(let i = 0; i < node.children.length; i++) {\n      this._preOrder(node.children[i], fn);\n    }\n  }\n};\nTree.prototype._postOrder = function(node, fn) {\n  if(node) {\n    for(let i = 0; i < node.children.length; i++) {\n      this._postOrder(node.children[i], fn);\n    }\n    if(fn) {\n      fn(node);\n    }\n  }\n};\nTree.prototype.traverseDFS = function(fn, method) {\n  let current = this.root;\n  if(method) {\n    this['_' + method](current, fn);\n  } else {\n    this._preOrder(current, fn);\n  }\n};\nTree.prototype.traverseBFS = function(fn) {\n  let queue = [this.root];\n  while(queue.length) {\n    let node = queue.shift();\n    if(fn) {\n      fn(node);\n    }\n    for(let i = 0; i < node.children.length; i++) {\n      queue.push(node.children[i]);\n    }\n  }\n};\nTree.prototype.print = function() {\n  if(!this.root) {\n    return console.log('No root node found');\n  }\n  let newline = new Node('|');\n  let queue = [this.root, newline];\n  let string = '';\n  while(queue.length) {\n    let node = queue.shift();\n    string += node.data.toString() + ' ';\n    if(node === newline && queue.length) {\n      queue.push(newline);\n    }\n    for(let i = 0; i < node.children.length; i++) {\n      queue.push(node.children[i]);\n    }\n  }\n  console.log(string.slice(0, -2).trim());\n};\nTree.prototype.printByLevel = function() {\n  if(!this.root) {\n    return console.log('No root node found');\n  }\n  let newline = new Node('\\n');\n  let queue = [this.root, newline];\n  let string = '';\n  while(queue.length) {\n    let node = queue.shift();\n    string += node.data.toString() + (node.data !== '\\n' ? ' ' : '');\n    if(node === newline && queue.length) {\n      queue.push(newline);\n    }\n    for(let i = 0; i < node.children.length; i++) {\n      queue.push(node.children[i]);\n    }\n  }\n  console.log(string.trim());\n};\n\nlet tree = new Tree();\ntree.add('ceo');\ntree.add('cto', 'ceo');\ntree.add('dev1', 'cto');\ntree.add('dev2', 'cto');\ntree.add('dev3', 'cto');\ntree.add('cfo', 'ceo');\ntree.add('accountant', 'cfo');\ntree.add('cmo', 'ceo');\ntree.print(); // => ceo | cto cfo cmo | dev1 dev2 dev3 accountant\ntree.printByLevel();  // => ceo \\n cto cfo cmo \\n dev1 dev2 dev3 accountant\nconsole.log('tree contains dev1 is true:', tree.contains('dev1')); // => true\nconsole.log('tree contains dev4 is false:', tree.contains('dev4')); // => false\nconsole.log('--- BFS');\ntree.traverseBFS(function(node) { console.log(node.data); }); // => ceo cto cfo cmo dev1 dev2 dev3 accountant\nconsole.log('--- DFS preOrder');\ntree.traverseDFS(function(node) { console.log(node.data); }, 'preOrder'); // => ceo cto dev1 dev2 dev3 cfo accountant cmo\nconsole.log('--- DFS postOrder');\ntree.traverseDFS(function(node) { console.log(node.data); }, 'postOrder'); // => dev1 dev2 dev3 cto accountant cfo cmo ceo\ntree.remove('cmo');\ntree.print(); // => ceo | cto cfo | dev1 dev2 dev3 accountant\ntree.remove('cfo');\ntree.print(); // => ceo | cto | dev1 dev2 dev3\n
\n

The Graph

\n

\n

Definition

\n
\n

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. From Wikipedia

\n
\n

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.).

\n

Representation\nThere are different ways of representing a graph, each of them with its own advantages and disadvantages. Here are the main 2:

\n

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.\nAdjacency 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.\nComplexity\nAdjacency list\nStorage Add Vertex Add Edge Query\nO( V + E\nAdjacency matrix\nStorage Add Vertex Add Edge Query\nO( V ^2) O(

\n

Graph

\n
\n

The code

\n
\n
//below uses the adjacency list representation.\n
\n
        function Graph() {\n          this.vertices = [];\n          this.edges = [];\n          this.numberOfEdges = 0;\n        }\n\n        Graph.prototype.addVertex = function(vertex) {\n          this.vertices.push(vertex);\n          this.edges[vertex] = [];\n        };\n        Graph.prototype.removeVertex = function(vertex) {\n          let index = this.vertices.indexOf(vertex);\n          if(~index) {\n            this.vertices.splice(index, 1);\n          }\n          while(this.edges[vertex].length) {\n            let adjacentVertex = this.edges[vertex].pop();\n            this.removeEdge(adjacentVertex, vertex);\n          }\n        };\n        Graph.prototype.addEdge = function(vertex1, vertex2) {\n          this.edges[vertex1].push(vertex2);\n          this.edges[vertex2].push(vertex1);\n          this.numberOfEdges++;\n        };\n        Graph.prototype.removeEdge = function(vertex1, vertex2) {\n          let index1 = this.edges[vertex1] ? this.edges[vertex1].indexOf(vertex2) : -1;\n          let index2 = this.edges[vertex2] ? this.edges[vertex2].indexOf(vertex1) : -1;\n          if(~index1) {\n            this.edges[vertex1].splice(index1, 1);\n            this.numberOfEdges--;\n          }\n          if(~index2) {\n            this.edges[vertex2].splice(index2, 1);\n          }\n        };\n        Graph.prototype.size = function() {\n          return this.vertices.length;\n        };\n        Graph.prototype.relations = function() {\n          return this.numberOfEdges;\n        };\n        Graph.prototype.traverseDFS = function(vertex, fn) {\n          if(!~this.vertices.indexOf(vertex)) {\n            return console.log('Vertex not found');\n          }\n          let visited = [];\n          this._traverseDFS(vertex, visited, fn);\n        };\n        Graph.prototype._traverseDFS = function(vertex, visited, fn) {\n          visited[vertex] = true;\n          if(this.edges[vertex] !== undefined) {\n            fn(vertex);\n          }\n          for(let i = 0; i < this.edges[vertex].length; i++) {\n            if(!visited[this.edges[vertex][i]]) {\n              this._traverseDFS(this.edges[vertex][i], visited, fn);\n            }\n          }\n        };\n        Graph.prototype.traverseBFS = function(vertex, fn) {\n          if(!~this.vertices.indexOf(vertex)) {\n            return console.log('Vertex not found');\n          }\n          let queue = [];\n          queue.push(vertex);\n          let visited = [];\n          visited[vertex] = true;\n\n          while(queue.length) {\n            vertex = queue.shift();\n            fn(vertex);\n            for(let i = 0; i < this.edges[vertex].length; i++) {\n              if(!visited[this.edges[vertex][i]]) {\n                visited[this.edges[vertex][i]] = true;\n                queue.push(this.edges[vertex][i]);\n              }\n            }\n          }\n        };\n        Graph.prototype.pathFromTo = function(vertexSource, vertexDestination) {\n          if(!~this.vertices.indexOf(vertexSource)) {\n            return console.log('Vertex not found');\n          }\n          let queue = [];\n          queue.push(vertexSource);\n          let visited = [];\n          visited[vertexSource] = true;\n          let paths = [];\n\n          while(queue.length) {\n            let vertex = queue.shift();\n            for(let i = 0; i < this.edges[vertex].length; i++) {\n              if(!visited[this.edges[vertex][i]]) {\n                visited[this.edges[vertex][i]] = true;\n                queue.push(this.edges[vertex][i]);\n                // save paths between vertices\n                paths[this.edges[vertex][i]] = vertex;\n              }\n            }\n          }\n          if(!visited[vertexDestination]) {\n            return undefined;\n          }\n\n          let path = [];\n          for(let j = vertexDestination; j != vertexSource; j = paths[j]) {\n            path.push(j);\n          }\n          path.push(j);\n          return path.reverse().join('-');\n        };\n        Graph.prototype.print = function() {\n          console.log(this.vertices.map(function(vertex) {\n            return (vertex + ' -> ' + this.edges[vertex].join(', ')).trim();\n          }, this).join(' | '));\n        };\n        ```\n        let graph = new Graph();\n        graph.addVertex(1);\n        graph.addVertex(2);\n        graph.addVertex(3);\n        graph.addVertex(4);\n        graph.addVertex(5);\n        graph.addVertex(6);\n        graph.print(); // 1 -> | 2 -> | 3 -> | 4 -> | 5 -> | 6 ->\n        graph.addEdge(1, 2);\n        graph.addEdge(1, 5);\n        graph.addEdge(2, 3);\n        graph.addEdge(2, 5);\n        graph.addEdge(3, 4);\n        graph.addEdge(4, 5);\n        graph.addEdge(4, 6);\n        graph.print(); // 1 -> 2, 5 | 2 -> 1, 3, 5 | 3 -> 2, 4 | 4 -> 3, 5, 6 | 5 -> 1, 2, 4 | 6 -> 4\n        console.log('graph size (number of vertices):', graph.size()); // => 6\n        console.log('graph relations (number of edges):', graph.relations()); // => 7\n        graph.traverseDFS(1, function(vertex) { console.log(vertex); }); // => 1 2 3 4 5 6\n        console.log('---');\n        graph.traverseBFS(1, function(vertex) { console.log(vertex); }); // => 1 2 5 3 4 6\n        graph.traverseDFS(0, function(vertex) { console.log(vertex); }); // => 'Vertex not found'\n        graph.traverseBFS(0, function(vertex) { console.log(vertex); }); // => 'Vertex not found'\n        console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-5-1\n        console.log('path from 3 to 5:', graph.pathFromTo(3, 5)); // => 3-2-5\n        graph.removeEdge(1, 2);\n        graph.removeEdge(4, 5);\n        graph.removeEdge(10, 11);\n        console.log('graph relations (number of edges):', graph.relations()); // => 5\n        console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-3-2-5-1\n        graph.addEdge(1, 2);\n        graph.addEdge(4, 5);\n        console.log('graph relations (number of edges):', graph.relations()); // => 7\n        console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-5-1\n        graph.removeVertex(5);\n        console.log('graph size (number of vertices):', graph.size()); // => 5\n        console.log('graph relations (number of edges):', graph.relations()); // => 4\n        console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-3-2-1\n
\n
"},{"url":"/docs/docs/art-of-command-line/","relativePath":"docs/docs/art-of-command-line.md","relativeDir":"docs/docs","base":"art-of-command-line.md","name":"art-of-command-line","frontmatter":{"title":"Command Line Basics","weight":0,"excerpt":"Learn basic Bash. Actually, type man bash and at least skim the whole thing; it's pretty easy to follow and not that long. Alternate shells can be nice, but Bash is powerful and always available (learning *only* zsh, fish, etc., while tempting on your own laptop, restricts you in many situations, such as using existing servers).","seo":{"title":"Command Line Basics","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Meta

\n

Scope:

\n
    \n
  • This guide is for both beginners and experienced users. The goals are breadth (everything important), specificity (give concrete examples of the most common case), and brevity (avoid things that aren't essential or digressions you can easily look up elsewhere). Every tip is essential in some situation or significantly saves time over alternatives.
    • \n
  • This is written for Linux, with the exception of the \"macOS only\" and \"Windows only\" sections. Many of the other items apply or can be installed on other Unices or macOS (or even Cygwin).
    • \n
  • The focus is on interactive Bash, though many tips apply to other shells and to general Bash scripting.
    • \n
  • It includes both \"standard\" Unix commands as well as ones that require special package installs -- so long as they are important enough to merit inclusion.
    • \n
\n

Notes:

\n
    \n
  • To keep this to one page, content is implicitly included by reference. You're smart enough to look up more detail elsewhere once you know the idea or command to Google. Use apt, yum, dnf, pacman, pip or brew (as appropriate) to install new programs.
    • \n
  • Use Explainshell to get a helpful breakdown of what commands, options, pipes etc. do.
    • \n
\n

Basics

\n
    \n
  • Learn basic Bash. Actually, type man bash and at least skim the whole thing; it's pretty easy to follow and not that long. Alternate shells can be nice, but Bash is powerful and always available (learning only zsh, fish, etc., while tempting on your own laptop, restricts you in many situations, such as using existing servers).
    • \n
  • Learn at least one text-based editor well. The nano editor is one of the simplest for basic editing (opening, editing, saving, searching). However, for the power user in a text terminal, there is no substitute for Vim (vi), the hard-to-learn but venerable, fast, and full-featured editor. Many people also use the classic Emacs, particularly for larger editing tasks. (Of course, any modern software developer working on an extensive project is unlikely to use only a pure text-based editor and should also be familiar with modern graphical IDEs and tools.)
    • \n
  • \n

    Finding documentation:

    \n
      \n
    • Know how to read official documentation with man (for the inquisitive, man man lists the section numbers, e.g. 1 is \"regular\" commands, 5 is files/conventions, and 8 are for administration). Find man pages with apropos.
      • \n
    • Know that some commands are not executables, but Bash builtins, and that you can get help on them with help and help -d. You can find out whether a command is an executable, shell builtin or an alias by using type command.
      • \n
    • curl cheat.sh/command will give a brief \"cheat sheet\" with common examples of how to use a shell command.
      • \n
    \n
    • \n
  • Learn about redirection of output and input using > and < and pipes using |. Know > overwrites the output file and >> appends. Learn about stdout and stderr.
    • \n
  • Learn about file glob expansion with * (and perhaps ? and [...]) and quoting and the difference between double \" and single ' quotes. (See more on variable expansion below.)
    • \n
  • Be familiar with Bash job management: &, ctrl-z, ctrl-c, jobs, fg, bg, kill, etc.
    • \n
  • Know ssh, and the basics of passwordless authentication, via ssh-agent, ssh-add, etc.
    • \n
  • Basic file management: ls and ls -l (in particular, learn what every column in ls -l means), less, head, tail and tail -f (or even better, less +F), ln and ln -s (learn the differences and advantages of hard versus soft links), chown, chmod, du (for a quick summary of disk usage: du -hs *). For filesystem management, df, mount, fdisk, mkfs, lsblk. Learn what an inode is (ls -i or df -i).
    • \n
  • Basic network management: ip or ifconfig, dig, traceroute, route.
    • \n
  • Learn and use a version control management system, such as git.
    • \n
  • Know regular expressions well, and the various flags to grep/egrep. The -i, -o, -v, -A, -B, and -C options are worth knowing.
    • \n
  • Learn to use apt-get, yum, dnf or pacman (depending on distro) to find and install packages. And make sure you have pip to install Python-based command-line tools (a few below are easiest to install via pip).
    • \n
\n

Everyday use

\n
    \n
  • In Bash, use Tab to complete arguments or list all available commands and ctrl-r to search through command history (after pressing, type to search, press ctrl-r repeatedly to cycle through more matches, press Enter to execute the found command, or hit the right arrow to put the result in the current line to allow editing).
    • \n
  • In Bash, use ctrl-w to delete the last word, and ctrl-u to delete the content from current cursor back to the start of the line. Use alt-b and alt-f to move by word, ctrl-a to move cursor to beginning of line, ctrl-e to move cursor to end of line, ctrl-k to kill to the end of the line, ctrl-l to clear the screen. See man readline for all the default keybindings in Bash. There are a lot. For example alt-. cycles through previous arguments, and alt-* expands a glob.
    • \n
  • Alternatively, if you love vi-style key-bindings, use set -o vi (and set -o emacs to put it back).
    • \n
  • For editing long commands, after setting your editor (for example export EDITOR=vim), ctrl-x ctrl-e will open the current command in an editor for multi-line editing. Or in vi style, escape-v.
    • \n
  • To see recent commands, use history. Follow with !n (where n is the command number) to execute again. There are also many abbreviations you can use, the most useful probably being !$ for last argument and !! for last command (see \"HISTORY EXPANSION\" in the man page). However, these are often easily replaced with ctrl-r and alt-..
    • \n
  • Go to your home directory with cd. Access files relative to your home directory with the ~ prefix (e.g. ~/.bashrc). In sh scripts refer to the home directory as $HOME.
    • \n
  • To go back to the previous working directory: cd -.
    • \n
  • If you are halfway through typing a command but change your mind, hit alt-# to add a # at the beginning and enter it as a comment (or use ctrl-a, #, enter). You can then return to it later via command history.
    • \n
  • \n

    Use xargs (or parallel). It's very powerful. Note you can control how many items execute per line (-L) as well as parallelism (-P). If you're not sure if it'll do the right thing, use xargs echo first. Also, -I{} is handy. Examples:

    \n
      find . -name '*.py' | xargs grep some_function\n  cat hosts | xargs -I{} ssh root@{} hostname\n
    \n
    • \n
  • pstree -p is a helpful display of the process tree.
    • \n
  • Use pgrep and pkill to find or signal processes by name (-f is helpful).
    • \n
  • Know the various signals you can send processes. For example, to suspend a process, use kill -STOP [pid]. For the full list, see man 7 signal
    • \n
  • Use nohup or disown if you want a background process to keep running forever.
    • \n
  • Check what processes are listening via netstat -lntp or ss -plat (for TCP; add -u for UDP) or lsof -iTCP -sTCP:LISTEN -P -n (which also works on macOS).
    • \n
  • See also lsof and fuser for open sockets and files.
    • \n
  • See uptime or w to know how long the system has been running.
    • \n
  • Use alias to create shortcuts for commonly used commands. For example, alias ll='ls -latr' creates a new alias ll.
    • \n
  • Save aliases, shell settings, and functions you commonly use in ~/.bashrc, and arrange for login shells to source it. This will make your setup available in all your shell sessions.
    • \n
  • Put the settings of environment variables as well as commands that should be executed when you login in ~/.bash_profile. Separate configuration will be needed for shells you launch from graphical environment logins and cron jobs.
    • \n
  • Synchronize your configuration files (e.g. .bashrc and .bash_profile) among various computers with Git.
    • \n
  • Understand that care is needed when variables and filenames include whitespace. Surround your Bash variables with quotes, e.g. \"$FOO\". Prefer the -0 or -print0 options to enable null characters to delimit filenames, e.g. locate -0 pattern | xargs -0 ls -al or find / -print0 -type d | xargs -0 ls -al. To iterate on filenames containing whitespace in a for loop, set your IFS to be a newline only using IFS=$'\\n'.
    • \n
  • \n

    In Bash scripts, use set -x (or the variant set -v, which logs raw input, including unexpanded variables and comments) for debugging output. Use strict modes unless you have a good reason not to: Use set -e to abort on errors (nonzero exit code). Use set -u to detect unset variable usages. Consider set -o pipefail too, to abort on errors within pipes (though read up on it more if you do, as this topic is a bit subtle). For more involved scripts, also use trap on EXIT or ERR. A useful habit is to start a script like this, which will make it detect and abort on common errors and print a message:

    \n
      set -euo pipefail\n  trap \"echo 'error: Script failed: see failed command above'\" ERR\n
    \n
    • \n
  • \n

    In Bash scripts, subshells (written with parentheses) are convenient ways to group commands. A common example is to temporarily move to a different working directory, e.g.

    \n
      # do something in current dir\n  (cd /some/other/dir && other-command)\n  # continue in original dir\n
    \n
    • \n
  • In Bash, note there are lots of kinds of variable expansion. Checking a variable exists: ${name:?error message}. For example, if a Bash script requires a single argument, just write input_file=${1:?usage: $0 input_file}. Using a default value if a variable is empty: ${name:-default}. If you want to have an additional (optional) parameter added to the previous example, you can use something like output_file=${2:-logfile}. If $2 is omitted and thus empty, output_file will be set to logfile. Arithmetic expansion: i=$(( (i + 1) % 5 )). Sequences: {1..10}. Trimming of strings: ${var%suffix} and ${var#prefix}. For example if var=foo.pdf, then echo ${var%.pdf}.txt prints foo.txt.
    • \n
  • Brace expansion using {...} can reduce having to re-type similar text and automate combinations of items. This is helpful in examples like mv foo.{txt,pdf} some-dir (which moves both files), cp somefile{,.bak} (which expands to cp somefile somefile.bak) or mkdir -p test-{a,b,c}/subtest-{1,2,3} (which expands all possible combinations and creates a directory tree). Brace expansion is performed before any other expansion.
    • \n
  • The order of expansions is: brace expansion; tilde expansion, parameter and variable expansion, arithmetic expansion, and command substitution (done in a left-to-right fashion); word splitting; and filename expansion. (For example, a range like {1..20} cannot be expressed with variables using {$a..$b}. Use seq or a for loop instead, e.g., seq $a $b or for((i=a; i<=b; i++)); do ... ; done.)
    • \n
  • \n

    The output of a command can be treated like a file via <(some command) (known as process substitution). For example, compare local /etc/hosts with a remote one:

    \n
      diff /etc/hosts <(ssh somehost cat /etc/hosts)\n
    \n
    • \n
  • \n

    When writing scripts you may want to put all of your code in curly braces. If the closing brace is missing, your script will be prevented from executing due to a syntax error. This makes sense when your script is going to be downloaded from the web, since it prevents partially downloaded scripts from executing:

    \n
    {\n  # Your code here\n}\n
    \n
    • \n
  • \n

    A \"here document\" allows redirection of multiple lines of input as if from a file:

    \n
    cat <<EOF\ninput\non multiple lines\nEOF\n
    \n
    • \n
  • In Bash, redirect both standard output and standard error via: some-command >logfile 2>&1 or some-command &>logfile. Often, to ensure a command does not leave an open file handle to standard input, tying it to the terminal you are in, it is also good practice to add </dev/null.
    • \n
  • Use man ascii for a good ASCII table, with hex and decimal values. For general encoding info, man unicode, man utf-8, and man latin1 are helpful.
    • \n
  • Use screen or tmux to multiplex the screen, especially useful on remote ssh sessions and to detach and re-attach to a session. byobu can enhance screen or tmux by providing more information and easier management. A more minimal alternative for session persistence only is dtach.
    • \n
  • In ssh, knowing how to port tunnel with -L or -D (and occasionally -R) is useful, e.g. to access web sites from a remote server.
    • \n
  • \n

    It can be useful to make a few optimizations to your ssh configuration; for example, this ~/.ssh/config contains settings to avoid dropped connections in certain network environments, uses compression (which is helpful with scp over low-bandwidth connections), and multiplex channels to the same server with a local control file:

    \n
      TCPKeepAlive=yes\n  ServerAliveInterval=15\n  ServerAliveCountMax=6\n  Compression=yes\n  ControlMaster auto\n  ControlPath /tmp/%r@%h:%p\n  ControlPersist yes\n
    \n
    • \n
  • A few other options relevant to ssh are security sensitive and should be enabled with care, e.g. per subnet or host or in trusted networks: StrictHostKeyChecking=no, ForwardAgent=yes
    • \n
  • Consider mosh an alternative to ssh that uses UDP, avoiding dropped connections and adding convenience on the road (requires server-side setup).
    • \n
  • \n

    To get the permissions on a file in octal form, which is useful for system configuration but not available in ls and easy to bungle, use something like

    \n
      stat -c '%A %a %n' /etc/timezone\n
    \n
    • \n
  • For interactive selection of values from the output of another command, use percol or fzf.
    • \n
  • For interaction with files based on the output of another command (like git), use fpp (PathPicker).
    • \n
  • For a simple web server for all files in the current directory (and subdirs), available to anyone on your network, use:\npython -m SimpleHTTPServer 7777 (for port 7777 and Python 2) and python -m http.server 7777 (for port 7777 and Python 3).
    • \n
  • For running a command as another user, use sudo. Defaults to running as root; use -u to specify another user. Use -i to login as that user (you will be asked for your password).
    • \n
  • For switching the shell to another user, use su username or su - username. The latter with \"-\" gets an environment as if another user just logged in. Omitting the username defaults to root. You will be asked for the password of the user you are switching to.
    • \n
  • Know about the 128K limit on command lines. This \"Argument list too long\" error is common when wildcard matching large numbers of files. (When this happens alternatives like find and xargs may help.)
    • \n
  • \n

    For a basic calculator (and of course access to Python in general), use the python interpreter. For example,

    \n
    >>> 2+3\n5\n
    \n
    • \n
\n

Processing files and data

\n
    \n
  • To locate a file by name in the current directory, find . -iname '*something*' (or similar). To find a file anywhere by name, use locate something (but bear in mind updatedb may not have indexed recently created files).
    • \n
  • For general searching through source or data files, there are several options more advanced or faster than grep -r, including (in rough order from older to newer) ack, ag (\"the silver searcher\"), and rg (ripgrep).
    • \n
  • To convert HTML to text: lynx -dump -stdin
    • \n
  • For Markdown, HTML, and all kinds of document conversion, try pandoc. For example, to convert a Markdown document to Word format: pandoc README.md --from markdown --to docx -o temp.docx
    • \n
  • If you must handle XML, xmlstarlet is old but good.
    • \n
  • For JSON, use jq. For interactive use, also see jid and jiq.
    • \n
  • For YAML, use shyaml.
    • \n
  • For Excel or CSV files, csvkit provides in2csv, csvcut, csvjoin, csvgrep, etc.
    • \n
  • For Amazon S3, s3cmd is convenient and s4cmd is faster. Amazon's aws and the improved saws are essential for other AWS-related tasks.
    • \n
  • Know about sort and uniq, including uniq's -u and -d options -- see one-liners below. See also comm.
    • \n
  • Know about cut, paste, and join to manipulate text files. Many people use cut but forget about join.
    • \n
  • Know about wc to count newlines (-l), characters (-m), words (-w) and bytes (-c).
    • \n
  • Know about tee to copy from stdin to a file and also to stdout, as in ls -al | tee file.txt.
    • \n
  • For more complex calculations, including grouping, reversing fields, and statistical calculations, consider datamash.
    • \n
  • Know that locale affects a lot of command line tools in subtle ways, including sorting order (collation) and performance. Most Linux installations will set LANG or other locale variables to a local setting like US English. But be aware sorting will change if you change locale. And know i18n routines can make sort or other commands run many times slower. In some situations (such as the set operations or uniqueness operations below) you can safely ignore slow i18n routines entirely and use traditional byte-based sort order, using export LC_ALL=C.
    • \n
  • You can set a specific command's environment by prefixing its invocation with the environment variable settings, as in TZ=Pacific/Fiji date.
    • \n
  • Know basic awk and sed for simple data munging. See One-liners for examples.
    • \n
  • \n

    To replace all occurrences of a string in place, in one or more files:

    \n
      perl -pi.bak -e 's/old-string/new-string/g' my-files-*.txt\n
    \n
    • \n
  • \n

    To rename multiple files and/or search and replace within files, try repren. (In some cases the rename command also allows multiple renames, but be careful as its functionality is not the same on all Linux distributions.)

    \n
      # Full rename of filenames, directories, and contents foo -> bar:\n  repren --full --preserve-case --from foo --to bar .\n  # Recover backup files whatever.bak -> whatever:\n  repren --renames --from '(.*)\\.bak' --to '\\1' *.bak\n  # Same as above, using rename, if available:\n  rename 's/\\.bak$//' *.bak\n
    \n
    • \n
  • \n

    As the man page says, rsync really is a fast and extraordinarily versatile file copying tool. It's known for synchronizing between machines but is equally useful locally. When security restrictions allow, using rsync instead of scp allows recovery of a transfer without restarting from scratch. It also is among the fastest ways to delete large numbers of files:

    \n
    mkdir empty && rsync -r --delete empty/ some-dir && rmdir some-dir\n
    \n
    • \n
  • For monitoring progress when processing files, use pv, pycp, pmonitor, progress, rsync --progress, or, for block-level copying, dd status=progress.
    • \n
  • Use shuf to shuffle or select random lines from a file.
    • \n
  • Know sort's options. For numbers, use -n, or -h for handling human-readable numbers (e.g. from du -h). Know how keys work (-t and -k). In particular, watch out that you need to write -k1,1 to sort by only the first field; -k1 means sort according to the whole line. Stable sort (sort -s) can be useful. For example, to sort first by field 2, then secondarily by field 1, you can use sort -k1,1 | sort -s -k2,2.
    • \n
  • If you ever need to write a tab literal in a command line in Bash (e.g. for the -t argument to sort), press ctrl-v [Tab] or write $'\\t' (the latter is better as you can copy/paste it).
    • \n
  • The standard tools for patching source code are diff and patch. See also diffstat for summary statistics of a diff and sdiff for a side-by-side diff. Note diff -r works for entire directories. Use diff -r tree1 tree2 | diffstat for a summary of changes. Use vimdiff to compare and edit files.
    • \n
  • For binary files, use hd, hexdump or xxd for simple hex dumps and bvi, hexedit or biew for binary editing.
    • \n
  • Also for binary files, strings (plus grep, etc.) lets you find bits of text.
    • \n
  • For binary diffs (delta compression), use xdelta3.
    • \n
  • \n

    To convert text encodings, try iconv. Or uconv for more advanced use; it supports some advanced Unicode things. For example:

    \n
      # Displays hex codes or actual names of characters (useful for debugging):\n  uconv -f utf-8 -t utf-8 -x '::Any-Hex;' < input.txt\n  uconv -f utf-8 -t utf-8 -x '::Any-Name;' < input.txt\n  # Lowercase and removes all accents (by expanding and dropping them):\n  uconv -f utf-8 -t utf-8 -x '::Any-Lower; ::Any-NFD; [:Nonspacing Mark:] >; ::Any-NFC;' < input.txt > output.txt\n
    \n
    • \n
  • To split files into pieces, see split (to split by size) and csplit (to split by a pattern).
    • \n
  • Date and time: To get the current date and time in the helpful ISO 8601 format, use date -u +\"%Y-%m-%dT%H:%M:%SZ\" (other options are problematic). To manipulate date and time expressions, use dateadd, datediff, strptime etc. from dateutils.
    • \n
  • Use zless, zmore, zcat, and zgrep to operate on compressed files.
    • \n
  • File attributes are settable via chattr and offer a lower-level alternative to file permissions. For example, to protect against accidental file deletion the immutable flag: sudo chattr +i /critical/directory/or/file
    • \n
  • \n

    Use getfacl and setfacl to save and restore file permissions. For example:

    \n
    getfacl -R /some/path > permissions.txt\nsetfacl --restore=permissions.txt\n
    \n
    • \n
  • To create empty files quickly, use truncate (creates sparse file), fallocate (ext4, xfs, btrfs and ocfs2 filesystems), xfs_mkfile (almost any filesystems, comes in xfsprogs package), mkfile (for Unix-like systems like Solaris, Mac OS).
    • \n
\n

System debugging

\n
    \n
  • For web debugging, curl and curl -I are handy, or their wget equivalents, or the more modern httpie.
    • \n
  • To know current cpu/disk status, the classic tools are top (or the better htop), iostat, and iotop. Use iostat -mxz 15 for basic CPU and detailed per-partition disk stats and performance insight.
    • \n
  • For network connection details, use netstat and ss.
    • \n
  • For a quick overview of what's happening on a system, dstat is especially useful. For broadest overview with details, use glances.
    • \n
  • To know memory status, run and understand the output of free and vmstat. In particular, be aware the \"cached\" value is memory held by the Linux kernel as file cache, so effectively counts toward the \"free\" value.
    • \n
  • Java system debugging is a different kettle of fish, but a simple trick on Oracle's and some other JVMs is that you can run kill -3 <pid> and a full stack trace and heap summary (including generational garbage collection details, which can be highly informative) will be dumped to stderr/logs. The JDK's jps, jstat, jstack, jmap are useful. SJK tools are more advanced.
    • \n
  • Use mtr as a better traceroute, to identify network issues.
    • \n
  • For looking at why a disk is full, ncdu saves time over the usual commands like du -sh *.
    • \n
  • To find which socket or process is using bandwidth, try iftop or nethogs.
    • \n
  • The ab tool (comes with Apache) is helpful for quick-and-dirty checking of web server performance. For more complex load testing, try siege.
    • \n
  • For more serious network debugging, wireshark, tshark, or ngrep.
    • \n
  • Know about strace and ltrace. These can be helpful if a program is failing, hanging, or crashing, and you don't know why, or if you want to get a general idea of performance. Note the profiling option (-c), and the ability to attach to a running process (-p). Use trace child option (-f) to avoid missing important calls.
    • \n
  • Know about ldd to check shared libraries etc — but never run it on untrusted files.
    • \n
  • Know how to connect to a running process with gdb and get its stack traces.
    • \n
  • Use /proc. It's amazingly helpful sometimes when debugging live problems. Examples: /proc/cpuinfo, /proc/meminfo, /proc/cmdline, /proc/xxx/cwd, /proc/xxx/exe, /proc/xxx/fd/, /proc/xxx/smaps (where xxx is the process id or pid).
    • \n
  • When debugging why something went wrong in the past, sar can be very helpful. It shows historic statistics on CPU, memory, network, etc.
    • \n
  • For deeper systems and performance analyses, look at stap (SystemTap), perf, and sysdig.
    • \n
  • Check what OS you're on with uname or uname -a (general Unix/kernel info) or lsb_release -a (Linux distro info).
    • \n
  • Use dmesg whenever something's acting really funny (it could be hardware or driver issues).
    • \n
  • If you delete a file and it doesn't free up expected disk space as reported by du, check whether the file is in use by a process:\nlsof | grep deleted | grep \"filename-of-my-big-file\"
    • \n
\n

One-liners

\n

A few examples of piecing together commands:

\n
    \n
  • \n

    It is remarkably helpful sometimes that you can do set intersection, union, and difference of text files via sort/uniq. Suppose a and b are text files that are already uniqued. This is fast, and works on files of arbitrary size, up to many gigabytes. (Sort is not limited by memory, though you may need to use the -T option if /tmp is on a small root partition.) See also the note about LC_ALL above and sort's -u option (left out for clarity below).

    \n
      sort a b | uniq > c   # c is a union b\n  sort a b | uniq -d > c   # c is a intersect b\n  sort a b b | uniq -u > c   # c is set difference a - b\n
    \n
    • \n
  • \n

    Pretty-print two JSON files, normalizing their syntax, then coloring and paginating the result:

    \n
      diff <(jq --sort-keys . < file1.json) <(jq --sort-keys . < file2.json) | colordiff | less -R\n
    \n
    • \n
  • Use grep . * to quickly examine the contents of all files in a directory (so each line is paired with the filename), or head -100 * (so each file has a heading). This can be useful for directories filled with config settings like those in /sys, /proc, /etc.
    • \n
  • \n

    Summing all numbers in the third column of a text file (this is probably 3X faster and 3X less code than equivalent Python):

    \n
      awk '{ x += $3 } END { print x }' myfile\n
    \n
    • \n
  • \n

    To see sizes/dates on a tree of files, this is like a recursive ls -l but is easier to read than ls -lR:

    \n
      find . -type f -ls\n
    \n
    • \n
  • \n

    Say you have a text file, like a web server log, and a certain value that appears on some lines, such as an acct_id parameter that is present in the URL. If you want a tally of how many requests for each acct_id:

    \n
      egrep -o 'acct_id=[0-9]+' access.log | cut -d= -f2 | sort | uniq -c | sort -rn\n
    \n
    • \n
  • To continuously monitor changes, use watch, e.g. check changes to files in a directory with watch -d -n 2 'ls -rtlh | tail' or to network settings while troubleshooting your wifi settings with watch -d -n 2 ifconfig.
    • \n
  • \n

    Run this function to get a random tip from this document (parses Markdown and extracts an item):

    \n
      function taocl() {\n    curl -s https://raw.githubusercontent.com/jlevy/the-art-of-command-line/master/README.md |\n      sed '/cowsay[.]png/d' |\n      pandoc -f markdown -t html |\n      xmlstarlet fo --html --dropdtd |\n      xmlstarlet sel -t -v \"(html/body/ul/li[count(p)>0])[$RANDOM mod last()+1]\" |\n      xmlstarlet unesc | fmt -80 | iconv -t US\n  }\n
    \n
    • \n
\n

Obscure but useful

\n
    \n
  • expr: perform arithmetic or boolean operations or evaluate regular expressions
    • \n
  • m4: simple macro processor
    • \n
  • yes: print a string a lot
    • \n
  • cal: nice calendar
    • \n
  • env: run a command (useful in scripts)
    • \n
  • printenv: print out environment variables (useful in debugging and scripts)
    • \n
  • look: find English words (or lines in a file) beginning with a string
    • \n
  • cut, paste and join: data manipulation
    • \n
  • fmt: format text paragraphs
    • \n
  • pr: format text into pages/columns
    • \n
  • fold: wrap lines of text
    • \n
  • column: format text fields into aligned, fixed-width columns or tables
    • \n
  • expand and unexpand: convert between tabs and spaces
    • \n
  • nl: add line numbers
    • \n
  • seq: print numbers
    • \n
  • bc: calculator
    • \n
  • factor: factor integers
    • \n
  • gpg: encrypt and sign files
    • \n
  • toe: table of terminfo entries
    • \n
  • nc: network debugging and data transfer
    • \n
  • socat: socket relay and tcp port forwarder (similar to netcat)
    • \n
  • slurm: network traffic visualization
    • \n
  • dd: moving data between files or devices
    • \n
  • file: identify type of a file
    • \n
  • tree: display directories and subdirectories as a nesting tree; like ls but recursive
    • \n
  • stat: file info
    • \n
  • time: execute and time a command
    • \n
  • timeout: execute a command for specified amount of time and stop the process when the specified amount of time completes.
    • \n
  • lockfile: create semaphore file that can only be removed by rm -f
    • \n
  • logrotate: rotate, compress and mail logs.
    • \n
  • watch: run a command repeatedly, showing results and/or highlighting changes
    • \n
  • when-changed: runs any command you specify whenever it sees file changed. See inotifywait and entr as well.
    • \n
  • tac: print files in reverse
    • \n
  • comm: compare sorted files line by line
    • \n
  • strings: extract text from binary files
    • \n
  • tr: character translation or manipulation
    • \n
  • iconv or uconv: conversion for text encodings
    • \n
  • split and csplit: splitting files
    • \n
  • sponge: read all input before writing it, useful for reading from then writing to the same file, e.g., grep -v something some-file | sponge some-file
    • \n
  • units: unit conversions and calculations; converts furlongs per fortnight to twips per blink (see also /usr/share/units/definitions.units)
    • \n
  • apg: generates random passwords
    • \n
  • xz: high-ratio file compression
    • \n
  • ldd: dynamic library info
    • \n
  • nm: symbols from object files
    • \n
  • ab or wrk: benchmarking web servers
    • \n
  • strace: system call debugging
    • \n
  • mtr: better traceroute for network debugging
    • \n
  • cssh: visual concurrent shell
    • \n
  • rsync: sync files and folders over SSH or in local file system
    • \n
  • wireshark and tshark: packet capture and network debugging
    • \n
  • ngrep: grep for the network layer
    • \n
  • host and dig: DNS lookups
    • \n
  • lsof: process file descriptor and socket info
    • \n
  • dstat: useful system stats
    • \n
  • glances: high level, multi-subsystem overview
    • \n
  • iostat: Disk usage stats
    • \n
  • mpstat: CPU usage stats
    • \n
  • vmstat: Memory usage stats
    • \n
  • htop: improved version of top
    • \n
  • last: login history
    • \n
  • w: who's logged on
    • \n
  • id: user/group identity info
    • \n
  • sar: historic system stats
    • \n
  • iftop or nethogs: network utilization by socket or process
    • \n
  • ss: socket statistics
    • \n
  • dmesg: boot and system error messages
    • \n
  • sysctl: view and configure Linux kernel parameters at run time
    • \n
  • hdparm: SATA/ATA disk manipulation/performance
    • \n
  • lsblk: list block devices: a tree view of your disks and disk partitions
    • \n
  • lshw, lscpu, lspci, lsusb, dmidecode: hardware information, including CPU, BIOS, RAID, graphics, devices, etc.
    • \n
  • lsmod and modinfo: List and show details of kernel modules.
    • \n
  • fortune, ddate, and sl: um, well, it depends on whether you consider steam locomotives and Zippy quotations \"useful\"
    • \n
\n

macOS only

\n

These are items relevant only on macOS.

\n
    \n
  • Package management with brew (Homebrew) and/or port (MacPorts). These can be used to install on macOS many of the above commands.
    • \n
  • Copy output of any command to a desktop app with pbcopy and paste input from one with pbpaste.
    • \n
  • To enable the Option key in macOS Terminal as an alt key (such as used in the commands above like alt-b, alt-f, etc.), open Preferences -> Profiles -> Keyboard and select \"Use Option as Meta key\".
    • \n
  • To open a file with a desktop app, use open or open -a /Applications/Whatever.app.
    • \n
  • Spotlight: Search files with mdfind and list metadata (such as photo EXIF info) with mdls.
    • \n
  • Be aware macOS is based on BSD Unix, and many commands (for example ps, ls, tail, awk, sed) have many subtle variations from Linux, which is largely influenced by System V-style Unix and GNU tools. You can often tell the difference by noting a man page has the heading \"BSD General Commands Manual.\" In some cases GNU versions can be installed, too (such as gawk and gsed for GNU awk and sed). If writing cross-platform Bash scripts, avoid such commands (for example, consider Python or perl) or test carefully.
    • \n
  • To get macOS release information, use sw_vers.
    • \n
\n

Windows only

\n

These items are relevant only on Windows.

\n

Ways to obtain Unix tools under Windows

\n
    \n
  • Access the power of the Unix shell under Microsoft Windows by installing Cygwin. Most of the things described in this document will work out of the box.
    • \n
  • On Windows 10, you can use Windows Subsystem for Linux (WSL), which provides a familiar Bash environment with Unix command line utilities.
    • \n
  • If you mainly want to use GNU developer tools (such as GCC) on Windows, consider MinGW and its MSYS package, which provides utilities such as bash, gawk, make and grep. MSYS doesn't have all the features compared to Cygwin. MinGW is particularly useful for creating native Windows ports of Unix tools.
    • \n
  • Another option to get Unix look and feel under Windows is Cash. Note that only very few Unix commands and command-line options are available in this environment.
    • \n
\n

Useful Windows command-line tools

\n
    \n
  • You can perform and script most Windows system administration tasks from the command line by learning and using wmic.
    • \n
  • Native command-line Windows networking tools you may find useful include ping, ipconfig, tracert, and netstat.
    • \n
  • You can perform many useful Windows tasks by invoking the Rundll32 command.
    • \n
\n

Cygwin tips and tricks

\n
    \n
  • Install additional Unix programs with the Cygwin's package manager.
    • \n
  • Use mintty as your command-line window.
    • \n
  • Access the Windows clipboard through /dev/clipboard.
    • \n
  • Run cygstart to open an arbitrary file through its registered application.
    • \n
  • Access the Windows registry with regtool.
    • \n
  • Note that a C:\\ Windows drive path becomes /cygdrive/c under Cygwin, and that Cygwin's / appears under C:\\cygwin on Windows. Convert between Cygwin and Windows-style file paths with cygpath. This is most useful in scripts that invoke Windows programs.
    • \n
\n

More resources

\n"},{"url":"/docs/docs/data-structures-docs/","relativePath":"docs/docs/data-structures-docs.md","relativeDir":"docs/docs","base":"data-structures-docs.md","name":"data-structures-docs","frontmatter":{"title":"Data Structures Docs","weight":0,"excerpt":"Data Structures Docs","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Data Structures are a specialized means of organizing and storing data in computers in such a way that we can perform operations on the stored data more efficiently. Data structures have a wide and diverse scope of usage across the fields of Computer Science and Software Engineering.Image by author

\n

\n

Data structures are being used in almost every program or software system that has been developed. Moreover, data structures come under the fundamentals of Computer Science and Software Engineering. It is a key topic when it comes to Software Engineering interview questions. Hence as developers, we must have good knowledge about data structures.

\n

In this article, I will be briefly explaining 8 commonly used data structures every programmer must know.

\n

{% embed url=\"https://replit.com/@bgoonz/DATASTRUCTURES-NOTES\\#sorting/insertion\\_sort/insertion.py\" %}

\n

1. Arrays

\n

An array is a structure of fixed-size, which can hold items of the same data type. It can be an array of integers, an array of floating-point numbers, an array of strings or even an array of arrays (such as 2-dimensional arrays). Arrays are indexed, meaning that random access is possible.Fig 1. Visualization of basic Terminology of Arrays (Image by author)

\n

\n

Array operations

\n
    \n
  • Traverse: Go through the elements and print them.
    • \n
  • Search: Search for an element in the array. You can search the element by its value or its index
    • \n
  • Update: Update the value of an existing element at a given index
    • \n
\n

Inserting elements to an array and deleting elements from an array cannot be done straight away as arrays are fixed in size. If you want to insert an element to an array, first you will have to create a new array with increased size (current size + 1), copy the existing elements and add the new element. The same goes for the deletion with a new array of reduced size.

\n

Applications of arrays

\n
    \n
  • Used as the building blocks to build other data structures such as array lists, heaps, hash tables, vectors and matrices.
    • \n
  • Used for different sorting algorithms such as insertion sort, quick sort, bubble sort and merge sort.
    • \n
\n

2. Linked Lists

\n

A linked list is a sequential structure that consists of a sequence of items in linear order which are linked to each other. Hence, you have to access data sequentially and random access is not possible. Linked lists provide a simple and flexible representation of dynamic sets.

\n

Let's consider the following terms regarding linked lists. You can get a clear idea by referring to Figure 2.

\n
    \n
  • Elements in a linked list are known as nodes.
    • \n
  • Each node contains a key and a pointer to its successor node, known as next.
    • \n
  • The attribute named head points to the first element of the linked list.
    • \n
  • The last element of the linked list is known as the tail.
    • \n
\n

Fig 2. Visualization of basic Terminology of Linked Lists (Image by author)

\n

\n

Following are the various types of linked lists available.

\n
    \n
  • Singly linked list — Traversal of items can be done in the forward direction only.
    • \n
  • Doubly linked list — Traversal of items can be done in both forward and backward directions. Nodes consist of an additional pointer known as prev, pointing to the previous node.
    • \n
  • Circular linked lists — Linked lists where the prev pointer of the head points to the tail and the next pointer of the tail points to the head.
    • \n
\n

Linked list operations

\n
    \n
  • Search: Find the first element with the key k in the given linked list by a simple linear search and returns a pointer to this element
    • \n
  • Insert: Insert a key to the linked list. An insertion can be done in 3 different ways; insert at the beginning of the list, insert at the end of the list and insert in the middle of the list.
    • \n
  • Delete: Removes an element x from a given linked list. You cannot delete a node by a single step. A deletion can be done in 3 different ways; delete from the beginning of the list, delete from the end of the list and delete from the middle of the list.
    • \n
\n

Applications of linked lists

\n
    \n
  • Used for symbol table management in compiler design.
    • \n
  • Used in switching between programs using Alt + Tab (implemented using Circular Linked List).
    • \n
\n

3. Stacks

\n

A stack is a LIFO (Last In First Out — the element placed at last can be accessed at first) structure which can be commonly found in many programming languages. This structure is named as “stack” because it resembles a real-world stack — a stack of plates.Image by congerdesign from Pixabay

\n

\n

Stack operations

\n

Given below are the 2 basic operations that can be performed on a stack. Please refer to Figure 3 to get a better understanding of the stack operations.

\n
    \n
  • Push: Insert an element on to the top of the stack.
    • \n
  • Pop: Delete the topmost element and return it.
    • \n
\n

Fig 3. Visualization of basic Operations of Stacks (Image by author)

\n

\n

Furthermore, the following additional functions are provided for a stack in order to check its status.

\n
    \n
  • Peek: Return the top element of the stack without deleting it.
    • \n
  • isEmpty: Check if the stack is empty.
    • \n
  • isFull: Check if the stack is full.
    • \n
\n

Applications of stacks

\n
    \n
  • Used for expression evaluation (e.g.: shunting-yard algorithm for parsing and evaluating mathematical expressions).
    • \n
  • Used to implement function calls in recursion programming.
    • \n
\n

4. Queues

\n

A queue is a FIFO (First In First Out — the element placed at first can be accessed at first) structure which can be commonly found in many programming languages. This structure is named as “queue” because it resembles a real-world queue — people waiting in a queue.Image by Sabine Felidae from Pixabay

\n

\n

Queue operations

\n

Given below are the 2 basic operations that can be performed on a queue. Please refer to Figure 4 to get a better understanding of the queue operations.

\n
    \n
  • Enqueue: Insert an element to the end of the queue.
    • \n
  • Dequeue: Delete the element from the beginning of the queue.
    • \n
\n

Fig 4. Visualization of Basic Operations of Queues (Image by author)

\n

\"Fig

\n

Applications of queues

\n
    \n
  • Used to manage threads in multithreading.
    • \n
  • Used to implement queuing systems (e.g.: priority queues).
    • \n
\n

5. Hash Tables

\n

A Hash Table is a data structure that stores values which have keys associated with each of them. Furthermore, it supports lookup efficiently if we know the key associated with the value. Hence it is very efficient in inserting and searching, irrespective of the size of the data.

\n

Direct Addressing uses the one-to-one mapping between the values and keys when storing in a table. However, there is a problem with this approach when there is a large number of key-value pairs. The table will be huge with so many records and may be impractical or even impossible to be stored, given the memory available on a typical computer. To avoid this issue we use hash tables.

\n

Hash Function

\n

A special function named as the hash function (h) is used to overcome the aforementioned problem in direct addressing.

\n

In direct accessing, a value with key k is stored in the slot k. Using the hash function, we calculate the index of the table (slot) to which each value goes. The value calculated using the hash function for a given key is called the hash value which indicates the index of the table to which the value is mapped.

\n
\n

h(k) = k % m

\n
\n
    \n
  • h: Hash function
    • \n
  • k: Key of which the hash value should be determined
    • \n
  • m: Size of the hash table (number of slots available). A prime value that is not close to an exact power of 2 is a good choice for m.
    • \n
\n

Fig 5. Representation of a Hash Function (Image by author)

\n

\n

Consider the hash function h(k) = k % 20, where the size of the hash table is 20. Given a set of keys, we want to calculate the hash value of each to determine the index where it should go in the hash table. Consider we have the following keys, the hash and the hash table index.

\n
    \n
  • 1 → 1%20 → 1
    • \n
  • 5 → 5%20 → 5
    • \n
  • 23 → 23%20 → 3
    • \n
  • 63 → 63%20 → 3
    • \n
\n

From the last two examples given above, we can see that collision can arise when the hash function generates the same index for more than one key. We can resolve collisions by selecting a suitable hash function h and use techniques such as chaining and open addressing.

\n

Applications of hash tables

\n
    \n
  • Used to implement database indexes.
    • \n
  • Used to implement associative arrays.
    • \n
  • Used to implement the “set” data structure.
    • \n
\n

6. Trees

\n

A tree is a hierarchical structure where data is organized hierarchically and are linked together. This structure is different from a linked list whereas, in a linked list, items are linked in a linear order.

\n

Various types of trees have been developed throughout the past decades, in order to suit certain applications and meet certain constraints. Some examples are binary search tree, B tree, treap, red-black tree, splay tree, AVL tree and n-ary tree.

\n

Binary Search Trees

\n

A binary search tree (BST), as the name suggests, is a binary tree where data is organized in a hierarchical structure. This data structure stores values in sorted order.

\n

Every node in a binary search tree comprises the following attributes.

\n
    \n
  1. key: The value stored in the node.
    2. \n
  2. left: The pointer to the left child.
    3. \n
  3. right: The pointer to the right child.
    4. \n
  4. p: The pointer to the parent node.
    5. \n
\n

A binary search tree exhibits a unique property that distinguishes it from other trees. This property is known as the binary-search-tree property.

\n

Let x be a node in a binary search tree.

\n
    \n
  • If y is a node in the left subtree of x, then y.key ≤ x.key
    • \n
  • If y is a node in the right subtree of x, then y.key ≥ x.key
    • \n
\n

Fig 6. Visualization of Basic Terminology of Trees (Image by author)

\n

\n

Applications of trees

\n
    \n
  • Binary Trees: Used to implement expression parsers and expression solvers.
    • \n
  • Binary Search Tree: used in many search applications where data are constantly entering and leaving.
    • \n
  • Heaps: used by JVM (Java Virtual Machine) to store Java objects.
    • \n
  • Treaps: used in wireless networking.
    • \n
\n

Check my articles below on 8 useful tree data structures and self-balancing binary search trees.8 Useful Tree Data Structures Worth KnowingAn overview of 8 different tree data structurestowardsdatascience.comSelf-Balancing Binary Search Trees 101Introduction to Self-Balancing Binary Search Treestowardsdatascience.com

\n

7. Heaps

\n

A Heap is a special case of a binary tree where the parent nodes are compared to their children with their values and are arranged accordingly.

\n

Let us see how we can represent heaps. Heaps can be represented using trees as well as arrays. Figures 7 and 8 show how we can represent a binary heap using a binary tree and an array.Fig 7. Binary Tree Representation of a Heap (Image by author)Fig 8. Array Representation of a Heap (Image by author)

\n

\n

\n

Heaps can be of 2 types.

\n
    \n
  1. Min Heap — the key of the parent is less than or equal to those of its children. This is called the min-heap property. The root will contain the minimum value of the heap.
    2. \n
  2. Max Heap — the key of the parent is greater than or equal to those of its children. This is called the max-heap property. The root will contain the maximum value of the heap.
    3. \n
\n

Applications of heaps

\n
    \n
  • Used in heapsort algorithm.
    • \n
  • Used to implement priority queues as the priority values can be ordered according to the heap property where the heap can be implemented using an array.
    • \n
  • Queue functions can be implemented using heaps within O(log n) time.
    • \n
  • Used to find the kᵗʰ smallest (or largest) value in a given array.
    • \n
\n

Check my article below on implementing a heap using the python heapq module.Introduction to Python Heapq ModuleA simple introduction on how to use Python's heapq moduletowardsdatascience.com

\n

8. Graphs

\n

A graph consists of a finite set of vertices or nodes and a set of edges connecting these vertices.

\n

The order of a graph is the number of vertices in the graph. The size of a graph is the number of edges in the graph.

\n

Two nodes are said to be adjacent if they are connected to each other by the same edge.

\n

Directed Graphs

\n

A graph G is said to be a directed graph if all its edges have a direction indicating what is the start vertex and what is the end vertex.

\n

We say that (u, v) is incident from or leaves vertex u and is incident to or enters vertex v.

\n

Self-loops: Edges from a vertex to itself.

\n

Undirected Graphs

\n

A graph G is said to be an undirected graph if all its edges have no direction. It can go in both ways between the two vertices.

\n

If a vertex is not connected to any other node in the graph, it is said to be isolated.Fig 9. Visualization of Terminology of Graphs (Image by author)

\n

\n

You can read more about graph algorithms from my article 10 Graph Algorithms Visually Explained.10 Graph Algorithms Visually ExplainedA quick introduction to 10 basic graph algorithms with examples and visualisationsmedium.com

\n

Applications of graphs

\n
    \n
  • Used to represent social media networks. Each user is a vertex, and when users connect they create an edge.
    • \n
  • Used to represent web pages and links by search engines. Web pages on the internet are linked to each other by hyperlinks. Each page is a vertex and the hyperlink between two pages is an edge. Used for Page Ranking in Google.
    • \n
  • Used to represent locations and routes in GPS. Locations are vertices and the routes connecting locations are edges. Used to calculate the shortest route between two locations.
    • \n
"},{"url":"/docs/docs/css/","relativePath":"docs/docs/css.md","relativeDir":"docs/docs","base":"css.md","name":"css","frontmatter":{"title":"Learn Css","weight":0,"excerpt":"Learn Css","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Learn CSS

\n\n

CSS Selectors

\n
\n

Learn CSS So That Your Site Doesn't Look Like Garbage

\n

CSS Selectors

\n
    \n
  • CSS Selector : Applies styles to a specific DOM element(s), there are various types:
    • \n
  • Type Selectors : Matches by node name.
    • \n
  • Class Selectors : Matches by class name.
    • \n
  • ID Selectors : Matches by ID name.
    • \n
  • Universal Selectors : Selects all HTML elements on a page.
    • \n
  • 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)
    • \n
\n\n
/* Type selector */\ndiv {\n  background-color: #000000;\n}/* Class selector */\n.active {\n  color: #ffffff;\n}/* ID selector */\n#list-1 {\n  border: 1px solid gray;\n}/* Universal selector */\n* {\n  padding: 10px;\n}/* Attribute selector */\na[title] {\n  font-size: 2em;\n}\n
\n

Class Selectors

\n
    \n
  • Used to select all elements of a certain class denoted with a .[class name]
    • \n
  • You can assign multiple classes to a DOM element by separating them with a space.
    • \n
\n

Compound Class Selectors

\n
    \n
  • To get around accidentally selecting elements with multiple classes beyond what we want to grab we can chain dots.
    • \n
  • TO use a compound class selector just append the classes together when referencing them in the CSS.
    • \n
\n\n
<div class=\"box yellow\"></div>\n<div class=\"box orange\"></div>\n<div class=\"circle orange\"></div>\n
\n
    \n
  • i.e. .box.yellow will select only the first element.
    • \n
  • KEEP IN MIND that if you do include a space it will make the selector into a descendant selector.
    • \n
\n\n
h1#heading,\nh2.subheading {\n  font-style: italic;\n}\n
\n
    \n
  • When we want to target all h1 tags with the id of heading.
    • \n
\n

CSS Combinators

\n
    \n
  • CSS Combinators are used to combine other selectors into more complex or targeted selectors — they are very powerful!
    • \n
  • Be careful not to use too many of them as they will make your CSS far too complex.
    • \n
  • Descendant Selectors
    • \n
  • Separated by a space.
    • \n
  • Selects all descendants of a parent container.
    • \n
  • Direct Child Selectors
    • \n
  • Indicated with a >.
    • \n
  • Different from descendants because it only affects the direct children of an element.
    • \n
  • .menu > .is-active { background-color: #ffe0b2; }
    • \n
  • <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>
    • \n
  • Belka would be the only element selected.
    • \n
  • Adjacent Sibling Selectors
    • \n
  • Uses the + symbol.
    • \n
  • Used for elements that directly follow one another and who both have the same parent.
    • \n
  • 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>
    • \n
\n

Pseudo-Classes

\n
    \n
  • Pseudo-Class : Specifies a special state of the seleted element(s) and does not refer to any elements or attributes contained in the DOM.
    • \n
  • Format is a Selector:Pseudo-Class Name or A:B
    • \n
  • a:hover { font-family: \"Roboto Condensed\", sans-serif; color: #4fc3f7; text-decoration: none; border-bottom: 2px solid #4fc3f7; }
    • \n
  • Some common pseudo-classes that are frequently used are:
    • \n
  • active : 'push down', when ele are activated.
    • \n
  • checked : applies to things like radio buttons or checkbox inputs.
    • \n
  • disabled : any disabled element.
    • \n
  • first-child : first element in a group of children/siblings.
    • \n
  • focus : elements that have current focus.
    • \n
  • hover : elements that have cursor hovering over it.
    • \n
  • invalid : any form elements in an invalid state from client-side form validation.
    • \n
  • last-child : last element in a group of children/siblings.
    • \n
  • not(selector) : elements that do not match the provided selector.
    • \n
  • required : form elements that are required.
    • \n
  • valid : form elements in a valid state.
    • \n
  • visited : anchor tags of whih the user has already been to the URL that the href points to.
    • \n
\n

Pseudo-Selectors

\n
    \n
  • Used to create pseudo-elements as children of the elements to which the property applies.
    • \n
  • ::after
    • \n
  • ::before
    • \n
\n\n
<style>\n  p::before {\n    background-color: lightblue;\n    border-right: 4px solid violet;\n    content: \":-) \";\n    margin-right: 4px;\n    padding-left: 4px;\n  }\n</style>\n<p>This is the first paragraph</p>\n<p>This is the second paragraph</p>\n<p>This is the third paragraph</p>\n
\n
    \n
  • Will add some blue smiley faces before the p tag elements.
    • \n
\n

CSS Rules

\n
    \n
  • CSS Rule : Collection of single or compound selectors, a curly brace, zero or more properties
    • \n
  • 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.
    • \n
  • The Four Number Calculation : listed in increasing order of importance.
    • \n
\n

Who has the most IDs? If no one, continue.

\n

Who has the most classes? If no one, continue.

\n

Who has the most tags? If no one, continue.

\n

Last Read in the browser wins.

\n
\n
\n
\n
    \n
  • 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.
    • \n
\n
\n

CSS: Type, Properties, and Imports

\n

Typography

\n
    \n
  • font-family : change the font.
    • \n
\n
- Remember that not all computers have the same fonts on them.\n- You can import web fonts via an api by using\n- `@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap');` and pasting it st the top of your CSS file.\n- And then reference it in your font-family.\n- `font-size` : Changes the size of your font.\n- Keep in mind the two kind of units CSS uses:\n- `Absolute` : `Pixels`, Points, Inches, Centimeters.\n- `Relative` : Em, Rem.\n- Em: Calulating the size relative to the previous div (bubbles down)\n- Rem: Calulates relative to the parent element always.\n- `font-style` : Used to set a font to italics.\n- `font-weight` : Used to make a font bold.\n- `text-align` : Used to align your text to the left, center, or right.\n- `text-decoration` : Use to put lines above, through, or under text. Lines can be solid, dashed, or wavy!\n- `text-transform` : Used to set text to all lowercase, uppercase, or capitalize all words.\n

Background-Images

\n
    \n
  • You can use the background-image property to set a background image for an element.
    • \n
\n
\n

CSS: Colors, Borders, and Shadows

\n

Colors

\n
    \n
  • You can set colors in CSS in three popular ways: by name, by hexadecimal RGB value, and by their decimal RGB value.
    • \n
  • rgba() is used to make an rbg value more transparent, the a is used to specify the alpha channel.
    • \n
  • Color : Property used to change the color of text.
    • \n
  • Background-Color : Property to change the backgrounf color of an element.
    • \n
\n

Borders

\n
    \n
  • Borders take three values: The width of the border, the style (i.e. solid, dotted, dashed), color of the border.
    • \n
\n

Shadows

\n
    \n
  • There are two kinds of shadows in CSS: box shadows and text shadows.
    • \n
  • Box refers to HTML elements.
    • \n
  • Text refers to text.
    • \n
  • 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.
    • \n
\n
\n

The Box Model

\n

Box Model : A concept that basically boils down that every DOM element has a box around it.

\n

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.

\n

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.

\n

This bothered many programmers so they created the border box to include the calculation of the entire box's height and width.

\n

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.

\n

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!)

\n

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.

\n

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.

\n

Positioning

\n
    \n
  • 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.
    • \n
  • It accepts five values: static, relative, absolute, fixed, sticky.
    • \n
  • Every property (minus static) is used with: top, right, bottom, and left to position an element on a page.
    • \n
\n

Static Positioning

\n
    \n
  • The default position value of page elements.
    • \n
  • Most likely will not use static that much.
    • \n
\n

Relative Positioning

\n
    \n
  • Remains in it's original position in the page flow.
    • \n
  • It is positioned RELATIVE to the it's ORIGINAL PLACE on the page flow.
    • \n
  • Creates a stacking context : overlapping elements whose order can be set by the z-index property.
    • \n
\n\n
#pink-box {\n  background-color: #ff69b4;\n  bottom: 0;\n  left: -20px;\n  position: relative;\n  right: 0;\n  top: 0;\n}\n
\n
**Absolute Positioning**\n
    \n
  • 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)
    • \n
  • Here are some examples to illustration absolute positioning:
    • \n
\n\n
.container {\n  background-color: #2b2d2f;\n  position: relative;\n}#pink-box {\n  position: absolute;\n  top: 60px;\n}\n
\n
- 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.\n- 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.\n\n
.container {\n  background-color: #2b2d2f;\n  position: relative;\n}#pink-box {\n  position: absolute;\n  top: 60px;\n}#blue-box {\n  position: absolute;\n}\n
\n
- 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.\n\n
.container {\n  background-color: #2b2d2f;\n  position: relative;\n}#pink-box {\n  background-color: #ff69b4;\n  bottom: 60px;\n  position: absolute;\n}\n
\n
- Example where the absolute element has it's bottom property modified.\n\n
.container {\n  background-color: #2b2d2f;\n}#pink-box {\n  background-color: #ff69b4;\n  bottom: 60px;\n  position: absolute;\n}\n
\n
- If we removed the container's relative position. Our absolute unit would look for the nearest parent which would be the document itself.\n

Fixed Positioning

\n
    \n
  • Another positioning that removes it's element from the page flow, and automatically positions it's parent as the HTML doc itself.
    • \n
  • Fixed also uses top, right, bottom, and left.
    • \n
  • Useful for things like nav bars or other features we want to keep visible as the user scrolls.
    • \n
\n

Sticky Positioning

\n
    \n
  • 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.
    • \n
  • Behaves like a relatively positioned element until the point at which you would normally scroll past it's viewport — then it sticks!
    • \n
  • It is positioned with top, right, bottom, and left.
    • \n
  • A good example are headers in a scrollable list.
    • \n
\n
\n
\n

Flexible Box Model

\n
    \n
  • 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.
    • \n
  • Float was used back in the day to display position of elements in a container.
    • \n
  • A very inconvenient aspect of float is the need to clear the float.
    • \n
  • To 'clear' a float we need to set up a ghost div to properly align — this is already sounds so inefficient.
    • \n
\n

Using Flexbox

\n
    \n
  • Flexbox automatically resizes a container element to fit the viewport size without needing to use breakpoints.
    • \n
\n
- Flexbox layout applies styles to the parent element, and it's children.\n\n
.container {\n  display: flex; /*sets display to use flex*/\n  flex-wrap: wrap; /*bc flex tries to fit everything into one line, use wrap to have the elements wrap to the next line*/\n  flex-direction: row; /*lets us create either rows or columns*/\n}\n
\n
    \n
  • flex-flow can be used to combine wrap and direction.
    • \n
  • justify-content used to define the alignment of flex items along the main axis.
    • \n
  • align-items used to define the alignment on the Y-axis.
    • \n
  • align-content redistributes extra space on the cross axis.
    • \n
  • 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.
    • \n
  • Some other properties we can use on flex items are:
    • \n
  • flex-grow : dictates amount of avail. space the item should take up.
    • \n
  • flex-shrink : defines the ability for a flex item to shrink.
    • \n
  • flex-basis : Default size of an element before the remaining space is distributed.
    • \n
  • flex : shorthand for grow, shrink and basis.
    • \n
  • align-self : Overrides default alignment in the container.
    • \n
\n
\n

Grid Layout

\n
    \n
  • 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)
    • \n
\n

Bootstrap vs CSS Grid

\n
    \n
  • Bootstrap was a front-end library commonly used to create grid layouts but now CSS grid provides greater flexibility and control.
    • \n
  • Grid applies style to a parent container and it's child elements.
    • \n
\n\n
.grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: auto;\n  grid-template-areas:\n    \"header header header\"\n    \"main . sidebar\"\n    \"footer footer footer\";  grid-column-gap: 20px;\n  grid-row-gap: 30px;\n  justify-items: stretch;\n  align-items: stretch;\n  justify-content: stretch;\n  align-content: stretch;\n}.item-1 {\n  grid-area: header;\n}\n.item-2 {\n  grid-area: main;\n}\n.item-3 {\n  grid-area: sidebar;\n}\n.item-4 {\n  grid-area: footer;\n}\n
\n
    \n
  • Columns and Rows can be defined with: pixels, percentages, auto, named grid lines, using repeat, fractions.
    • \n
  • Grid Template Areas gives us a handy way to map out and visualize areas of the grid layout.
    • \n
  • Combine areas with templates to define how much space an area should take up.
    • \n
  • Grid Gaps can be used to create 'gutters' between grid item.s
    • \n
  • The way we have defined our grid with grid-templates and areas are considered explicit.
    • \n
  • We can also implicitly define grids.
    • \n
\n\n
.grid-container {\n  display: grid;\n  grid-template-columns: 100px 100px 100px 100px;\n  grid-template-rows: 50px 50px 50px;\n  grid-auto-columns: 100px;\n  grid-auto-rows: 50px;\n}\n
\n
    \n
  • Any grid items that aren't explicity placed are automatically placed or re-flowed
    • \n
\n

Spanning Columns & Rows

\n
    \n
  • We can use the following properties to take up a specified num of cols and rows.
    • \n
  • grid-column-start
    • \n
  • grid-column-end
    • \n
  • grid-row-start
    • \n
  • grid-row-end
    • \n
  • All four properties can take any of the following values: the line number, span #, span name, auto.
    • \n
\n\n
.item-1 {\n  grid-row-start: row2-start; /* Item starts at row line named \"row2-start\" */\n  grid-row-end: 5; /* Item ends at row line 5 */\n  grid-column-start: 1; /* Item starts at column line 1 */\n  grid-column-end: three; /* Item ends at column line named \"three\" */\n}.item-2 {\n  grid-row-start: 1; /* Item starts at row line 1 */\n  grid-row-end: span 2; /* Item spans two rows and ends at row line 3 */\n  grid-column-start: 3; /* Item starts at column line 3 */\n  grid-column-end: span col5-start; /* Item spans and ends at line named \"col5-start\" */\n}\n
\n

Grid Areas

\n
    \n
  • We use the grid areas in conjunction with grid-container property to define sections of the layout.
    • \n
  • We can then assign named sections to individual element's css rules.
    • \n
\n

Justify & Align Self

\n
    \n
  • Justify items and Align Items can be used to align all grid items at once.
    • \n
  • Justify Self is used to align self on the row.
    • \n
  • It can take four values: start, end, center, stretch.
    • \n
  • Align Self is used to align self on the column.
    • \n
  • It can take four values: start, end, center, stretch.
    • \n
\n
\n

CSS Hover Effect and Handling

\n

Overflow

\n

css .btn { background-color: #00bfff; color: #ffffff; border-radius: 10px; padding: 1.5rem; }

\n

.btn--active:hover { cursor: pointer; transform: translateY(-0.25rem);

\n

/* Moves our button up/down on the Y axis */ }

\n

The Pseudo Class Selector hover activates when the cursor goes over the selected element.

\n

Content Overflow- You can apply an overflow content property to an element if it's inner contents are spilling over.

\n

There are three members in the overflow family: — overflow-x : Apply horizontally. - overflow-y : Apply vertically. - overflow : Apply both directions.

\n

Transitions

\n
    \n
  • Transitions provide a way to control animation speed when changing CSS properties.
    • \n
  • Implicit Transitions : Animations that involve transitioning between two states.
    • \n
\n

Defining Transitions

\n
    \n
  • transition-property : specifies the name of the CSS property to apply the transition.
    • \n
  • transition-duration : during of the transition.
    • \n
  • transition-delay : time before the transition should start.
    • \n
\n

Examples :

\n
#delay {\n  font-size: 14px;\n  transition-property: font-size;\n  transition-duration: 4s;\n  transition-delay: 2s;\n}#delay:hover {\n  font-size: 36px;\n}\n
\n
- After a delay of two seconds, a four second transition begins where the font size goes from 36px to 14px.\n\n
.box {\n  border-style: solid;\n  border-width: 1px;\n  display: block;\n  width: 100px;\n  height: 100px;\n  background-color: #0000ff;\n  transition: width 2s, height 2s, background-color 2s, transform 2s;\n}.box:hover {\n  background-color: #ffcccc;\n  width: 200px;\n  height: 200px;\n  transform: rotate(180deg);\n}\n
\n
- When the mouse hovers over a box, it spins due to the rotate transform. Width and height change and also the bg color.\n
\n

BEM Guidelines

\n
    \n
  • BEM was created as a guideline to solve the issue of loose standards around CSS naming conventions.
    • \n
  • BEM stands for block, element, modifier.
    • \n
  • Block
    • \n
  • A standalone entity that is meaningful on it's own.
    • \n
  • Can be nested and interact with one another.
    • \n
  • Holistic entities without DOM rep can be blocks.
    • \n
  • May consist latin letters, digits, and dashes.
    • \n
  • Any DOM node can be a block if it accepts a class name.
    • \n
  • Element
    • \n
  • Part of a block and has no standalone meaning.
    • \n
  • Any element that is semantically tied to a block.
    • \n
  • May consist latin letters, digits, and dashes.
    • \n
  • Formed by using two underscores after it's block name.
    • \n
  • Any DOM node within a block can be an element.
    • \n
  • Element classes should be used independently.
    • \n
  • Modifier
    • \n
  • A flag on blocks or elements. Use them to change appearance, behavior or state.
    • \n
  • Extra class name to add onto blocks or elements.
    • \n
  • Add mods only to the elements they modify.
    • \n
  • Modifier names may consist of Latin letters, digits, dashes and underscores.
    • \n
  • Written with two dashes.
    • \n
\n

BEM Example

\n
<form class=\"form form--theme-xmas form--simple\">\n  <input class=\"form__input\" type=\"text\" />\n  <input class=\"form__submit form__submit--disabled\" type=\"submit\" />\n</form>/* block selector */\n.form {\n}/* block modifier selector */\n.form--theme-xmas {\n}/* block modifier selector */\n.form--simple {\n}/* element selector */\n.form__input {\n}/* element selector */\n.form__submit {\n}/* element modifier selector */\n.form__submit--disabled {\n}\n
\n

If you found this guide helpful feel free to checkout my github/gists where I host similar content:

\n

bgoonz's gists · GitHub

\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

\n

Or Checkout my personal Resource Site:

\n

a/A-Student-Resources
\nEdit descriptiongoofy-euclid-1cd736.netlify.app

\n

By Bryan Guner on March 6, 2021.

"},{"url":"/docs/articles/modules/","relativePath":"docs/articles/modules.md","relativeDir":"docs/articles","base":"modules.md","name":"modules","frontmatter":{"title":"Node Modules System","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"page","image":"images/theme.png","subtitle":"how we introduce modularity into our code in the node ecosystem"},"html":"

Node.js has a built-in module system.

\n

A Node.js file can import functionality exposed by other Node.js files.

\n

When you want to import something you use

\n

to import the functionality exposed in the library.js file that resides in the current file folder.

\n

In this file, functionality must be exposed before it can be imported by other files.

\n

Any other object or variable defined in the file by default is private and not exposed to the outer world.

\n

This is what the module.exports API offered by the module system allows us to do.

\n

When you assign an object or a function as a new exports property, that is the thing that's being exposed, and as such, it can be imported in other parts of your app, or in other apps as well.

\n

You can do so in 2 ways.

\n

The first is to assign an object to module.exports, which is an object provided out of the box by the module system, and this will make your file export just that object:

\n

The second way is to add the exported object as a property of exports. This way allows you to export multiple objects, functions or data:

\n

or directly

\n

And in the other file, you'll use it by referencing a property of your import:

\n

or

\n

What's the difference between module.exports and exports?

\n

The first exposes the object it points to. The latter exposes the properties of the object it points to.

\n

Modules in Javascript

\n

Differences between Node.js and browsers

\n
\n

Modules in Javascript

\n

Differences between Node.js and browsers

\n

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 Node’s setTimeout has a slightly different return value from a browser’s setTimeout. Let’s go over a few notable differences between the two environments.

\n

Global vs Window

\n

In the Node.js runtime, the global object is the object where global variables are stored. In browsers, the window object 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.

\n

Most browsers allow you to reference global but it is really the same object as window.

\n

Document

\n

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.

\n

Location

\n

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.

\n

Require and module.exports

\n

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:

\n

If we execute animals.js in Node, the program would print ‘Sennacy is a great pet!’.

\n

Browsers don’t have a notion of a file system so we cannot use require or module.exports in the same way.

\n

The fs module

\n

Node comes with an fs module that contains methods that allow us to interact with our computer’s File System 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:

\n
// change-some-files.js\n\nconst fs = require(\"fs\");\n
\n

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.

\n

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.

\n

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.

\n

Creating a new file

\n

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:

\n

The code acreate-a-nnew-file.js (github.com)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; UTF-8 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.

\n

Beware! If the file name specified to writeFile already exists, it will completely overwrite the contents of that file.

\n

We won’t be using the foo.txt file in the rest of this reading.

\n

Reading existing files

\n

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.

\n

Our poetry.txt file will contain the following lines:

\n
My code fails\n\nI do not know why\n\nMy code works\n\nI do not know why\n
\n

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:

\n
\n

Running the code above would print the following in the terminal:

\n
\n
THE CONTENTS ARE:\n\nMy code fails\n\nI do not know why\n\nMy code works\n\nI do not know why\n
\n

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:

\n
THE CONTENTS ARE:\n\n[ 'My code fails',\n\n'I do not know why',\n\n'My code works',\n\n'I do not know why' ]\n\nThe third line is My code works\n
\n

File I/O

\n

Using the same poetry.txt file from before:

\n
My code fails\n\nI do not know why\n\nMy code works\n\nI do not know why\n
\n

Let’s replace occurrences of the phrase ‘do not’ with the word ‘should’.

\n

We can read the contents of the file as a string, manipulate this string, then write this new string back into the file.

\n

We’ll need to utilize callback chaining in order for this to work since our file I/O is asynchronous:

\n

Executing the script above will edit the poetry.txt file to contain:

\n
My code fails\n\nI should know why\n\nMy code works\n\nI should know why\n
\n

Refactor:

\n

If you found this guide helpful feel free to checkout my github/gists where I host similar content:

\n

bgoonz’s gists · GitHub

\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

"},{"url":"/docs/docs/es-6-features/","relativePath":"docs/docs/es-6-features.md","relativeDir":"docs/docs","base":"es-6-features.md","name":"es-6-features","frontmatter":{"title":"ECMAScript 6","weight":0,"excerpt":"is the latest version of the ECMAScript standard","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Introduction

\n

ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway now.

\n

See the ES6 standard for full specification of the ECMAScript 6 language.

\n

ES6 includes the following new features:

\n\n

ECMAScript 6 Features

\n

Arrows

\n

Arrows are a function shorthand using the => syntax. They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. They support both statement block bodies as well as expression bodies which return the value of the expression. Unlike functions, arrows share the same lexical this as their surrounding code.

\n
// Expression bodies\nvar odds = evens.map(v => v + 1);\nvar nums = evens.map((v, i) => v + i);\nvar pairs = evens.map(v => ({even: v, odd: v + 1}));\n\n// Statement bodies\nnums.forEach(v => {\n  if (v % 5 === 0)\n    fives.push(v);\n});\n\n// Lexical this\nvar bob = {\n  _name: \"Bob\",\n  _friends: [],\n  printFriends() {\n    this._friends.forEach(f =>\n      console.log(this._name + \" knows \" + f));\n  }\n}\n
\n

More info: MDN Arrow Functions

\n

Classes

\n

ES6 classes are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.

\n
class SkinnedMesh extends THREE.Mesh {\n  constructor(geometry, materials) {\n    super(geometry, materials);\n\n    this.idMatrix = SkinnedMesh.defaultMatrix();\n    this.bones = [];\n    this.boneMatrices = [];\n    //...\n  }\n  update(camera) {\n    //...\n    super.update();\n  }\n  get boneCount() {\n    return this.bones.length;\n  }\n  set matrixType(matrixType) {\n    this.idMatrix = SkinnedMesh[matrixType]();\n  }\n  static defaultMatrix() {\n    return new THREE.Matrix4();\n  }\n}\n
\n

More info: MDN Classes

\n

Enhanced Object Literals

\n

Object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods, making super calls, and computing property names with expressions. Together, these also bring object literals and class declarations closer together, and let object-based design benefit from some of the same conveniences.

\n
var obj = {\n    // __proto__\n    __proto__: theProtoObj,\n    // Shorthand for 'handler: handler'\n    handler,\n    // Methods\n    toString() {\n     // Super calls\n     return \"d \" + super.toString();\n    },\n    // Computed (dynamic) property names\n    [ 'prop_' + (() => 42)() ]: 42\n};\n
\n

More info: MDN Grammar and types: Object literals

\n

Template Strings

\n

Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.

\n
// Basic literal string creation\n`In JavaScript '\\n' is a line-feed.`\n\n// Multiline strings\n`In JavaScript this is\n not legal.`\n\n// String interpolation\nvar name = \"Bob\", time = \"today\";\n`Hello ${name}, how are you ${time}?`\n\n// Construct an HTTP request prefix is used to interpret the replacements and construction\nPOST`http://foo.org/bar?a=${a}&b=${b}\n     Content-Type: application/json\n     X-Credentials: ${credentials}\n     { \"foo\": ${foo},\n       \"bar\": ${bar}}`(myOnReadyStateChangeHandler);\n
\n

More info: MDN Template Strings

\n

Destructuring

\n

Destructuring allows binding using pattern matching, with support for matching arrays and objects. Destructuring is fail-soft, similar to standard object lookup foo[\"bar\"], producing undefined values when not found.

\n
// list matching\nvar [a, , b] = [1,2,3];\n\n// object matching\nvar { op: a, lhs: { op: b }, rhs: c }\n       = getASTNode()\n\n// object matching shorthand\n// binds `op`, `lhs` and `rhs` in scope\nvar {op, lhs, rhs} = getASTNode()\n\n// Can be used in parameter position\nfunction g({name: x}) {\n  console.log(x);\n}\ng({name: 5})\n\n// Fail-soft destructuring\nvar [a] = [];\na === undefined;\n\n// Fail-soft destructuring with defaults\nvar [a = 1] = [];\na === 1;\n
\n

More info: MDN Destructuring assignment

\n

Default + Rest + Spread

\n

Callee-evaluated default parameter values. Turn an array into consecutive arguments in a function call. Bind trailing parameters to an array. Rest replaces the need for arguments and addresses common cases more directly.

\n
function f(x, y=12) {\n  // y is 12 if not passed (or passed as undefined)\n  return x + y;\n}\nf(3) == 15\n
\n
function f(x, ...y) {\n  // y is an Array\n  return x * y.length;\n}\nf(3, \"hello\", true) == 6\n
\n
function f(x, y, z) {\n  return x + y + z;\n}\n// Pass each elem of array as argument\nf(...[1,2,3]) == 6\n
\n

More MDN info: Default parameters, Rest parameters, Spread Operator

\n

Let + Const

\n

Block-scoped binding constructs. let is the new var. const is single-assignment. Static restrictions prevent use before assignment.

\n
function f() {\n  {\n    let x;\n    {\n      // okay, block scoped name\n      const x = \"sneaky\";\n      // error, const\n      x = \"foo\";\n    }\n    // error, already declared in block\n    let x = \"inner\";\n  }\n}\n
\n

More MDN info: let statement, const statement

\n

Iterators + For..Of

\n

Iterator objects enable custom iteration like CLR IEnumerable or Java Iterable. Generalize for..in to custom iterator-based iteration with for..of. Don't require realizing an array, enabling lazy design patterns like LINQ.

\n
let fibonacci = {\n  [Symbol.iterator]() {\n    let pre = 0, cur = 1;\n    return {\n      next() {\n        [pre, cur] = [cur, pre + cur];\n        return { done: false, value: cur }\n      }\n    }\n  }\n}\n\nfor (var n of fibonacci) {\n  // truncate the sequence at 1000\n  if (n > 1000)\n    break;\n  console.log(n);\n}\n
\n

Iteration is based on these duck-typed interfaces (using TypeScript type syntax for exposition only):

\n
interface IteratorResult {\n  done: boolean;\n  value: any;\n}\ninterface Iterator {\n  next(): IteratorResult;\n}\ninterface Iterable {\n  [Symbol.iterator](): Iterator\n}\n
\n

More info: MDN for...of

\n

Generators

\n

Generators simplify iterator-authoring using function* and yield. A function declared as function* returns a Generator instance. Generators are subtypes of iterators which include additional next and throw. These enable values to flow back into the generator, so yield is an expression form which returns a value (or throws).

\n

Note: Can also be used to enable 'await'-like async programming, see also ES7 await proposal.

\n
var fibonacci = {\n  [Symbol.iterator]: function*() {\n    var pre = 0, cur = 1;\n    for (;;) {\n      var temp = pre;\n      pre = cur;\n      cur += temp;\n      yield cur;\n    }\n  }\n}\n\nfor (var n of fibonacci) {\n  // truncate the sequence at 1000\n  if (n > 1000)\n    break;\n  console.log(n);\n}\n
\n

The generator interface is (using TypeScript type syntax for exposition only):

\n
interface Generator extends Iterator {\n    next(value?: any): IteratorResult;\n    throw(exception: any);\n}\n
\n

More info: MDN Iteration protocols

\n

Unicode

\n

Non-breaking additions to support full Unicode, including new Unicode literal form in strings and new RegExp u mode to handle code points, as well as new APIs to process strings at the 21bit code points level. These additions support building global apps in JavaScript.

\n
// same as ES5.1\n\"𠮷\".length == 2\n\n// new RegExp behaviour, opt-in 'u'\n\"𠮷\".match(/./u)[0].length == 2\n\n// new form\n\"\\u{20BB7}\"==\"𠮷\"==\"\\uD842\\uDFB7\"\n\n// new String ops\n\"𠮷\".codePointAt(0) == 0x20BB7\n\n// for-of iterates code points\nfor(var c of \"𠮷\") {\n  console.log(c);\n}\n
\n

More info: MDN RegExp.prototype.unicode

\n

Modules

\n

Language-level support for modules for component definition. Codifies patterns from popular JavaScript module loaders (AMD, CommonJS). Runtime behaviour defined by a host-defined default loader. Implicitly async model - no code executes until requested modules are available and processed.

\n
// lib/math.js\nexport function sum(x, y) {\n  return x + y;\n}\nexport var pi = 3.141593;\n
\n
// app.js\nimport * as math from \"lib/math\";\nalert(\"2π = \" + math.sum(math.pi, math.pi));\n
\n
// otherApp.js\nimport {sum, pi} from \"lib/math\";\nalert(\"2π = \" + sum(pi, pi));\n
\n

Some additional features include export default and export *:

\n
// lib/mathplusplus.js\nexport * from \"lib/math\";\nexport var e = 2.71828182846;\nexport default function(x) {\n    return Math.log(x);\n}\n
\n
// app.js\nimport ln, {pi, e} from \"lib/mathplusplus\";\nalert(\"2π = \" + ln(e)*pi*2);\n
\n

More MDN info: import statement, export statement

\n

Module Loaders

\n

Module loaders support:

\n
    \n
  • Dynamic loading
    • \n
  • State isolation
    • \n
  • Global namespace isolation
    • \n
  • Compilation hooks
    • \n
  • Nested virtualization
    • \n
\n

The default module loader can be configured, and new loaders can be constructed to evaluate and load code in isolated or constrained contexts.

\n
// Dynamic loading - 'System' is default loader\nSystem.import('lib/math').then(function(m) {\n  alert(\"2π = \" + m.sum(m.pi, m.pi));\n});\n\n// Create execution sandboxes - new Loaders\nvar loader = new Loader({\n  global: fixup(window) // replace 'console.log'\n});\nloader.eval(\"console.log('hello world!');\");\n\n// Directly manipulate module cache\nSystem.get('jquery');\nSystem.set('jquery', Module({$: $})); // WARNING: not yet finalized\n
\n

Map + Set + WeakMap + WeakSet

\n

Efficient data structures for common algorithms. WeakMaps provides leak-free object-key'd side tables.

\n
// Sets\nvar s = new Set();\ns.add(\"hello\").add(\"goodbye\").add(\"hello\");\ns.size === 2;\ns.has(\"hello\") === true;\n\n// Maps\nvar m = new Map();\nm.set(\"hello\", 42);\nm.set(s, 34);\nm.get(s) == 34;\n\n// Weak Maps\nvar wm = new WeakMap();\nwm.set(s, { extra: 42 });\nwm.size === undefined\n\n// Weak Sets\nvar ws = new WeakSet();\nws.add({ data: 42 });\n// Because the added object has no other references, it will not be held in the set\n
\n

More MDN info: Map, Set, WeakMap, WeakSet

\n

Proxies

\n

Proxies enable creation of objects with the full range of behaviors available to host objects. Can be used for interception, object virtualization, logging/profiling, etc.

\n
// Proxying a normal object\nvar target = {};\nvar handler = {\n  get: function (receiver, name) {\n    return `Hello, ${name}!`;\n  }\n};\n\nvar p = new Proxy(target, handler);\np.world === 'Hello, world!';\n
\n
// Proxying a function object\nvar target = function () { return 'I am the target'; };\nvar handler = {\n  apply: function (receiver, ...args) {\n    return 'I am the proxy';\n  }\n};\n\nvar p = new Proxy(target, handler);\np() === 'I am the proxy';\n
\n

There are traps available for all of the runtime-level meta-operations:

\n
var handler =\n{\n  get:...,\n  set:...,\n  has:...,\n  deleteProperty:...,\n  apply:...,\n  construct:...,\n  getOwnPropertyDescriptor:...,\n  defineProperty:...,\n  getPrototypeOf:...,\n  setPrototypeOf:...,\n  enumerate:...,\n  ownKeys:...,\n  preventExtensions:...,\n  isExtensible:...\n}\n
\n

More info: MDN Proxy

\n

Symbols

\n

Symbols enable access control for object state. Symbols allow properties to be keyed by either string (as in ES5) or symbol. Symbols are a new primitive type. Optional description parameter used in debugging - but is not part of identity. Symbols are unique (like gensym), but not private since they are exposed via reflection features like Object.getOwnPropertySymbols.

\n
var MyClass = (function() {\n\n  // module scoped symbol\n  var key = Symbol(\"key\");\n\n  function MyClass(privateData) {\n    this[key] = privateData;\n  }\n\n  MyClass.prototype = {\n    doStuff: function() {\n      ... this[key] ...\n    }\n  };\n\n  return MyClass;\n})();\n\nvar c = new MyClass(\"hello\")\nc[\"key\"] === undefined\n
\n

More info: MDN Symbol

\n

Subclassable Built-ins

\n

In ES6, built-ins like Array, Date and DOM Elements can be subclassed.

\n

Object construction for a function named Ctor now uses two-phases (both virtually dispatched):

\n
    \n
  • Call Ctor[@@create] to allocate the object, installing any special behavior
    • \n
  • Invoke constructor on new instance to initialize
    • \n
\n

The known @@create symbol is available via Symbol.create. Built-ins now expose their @@create explicitly.

\n
// Pseudo-code of Array\nclass Array {\n    constructor(...args) { /* ... */ }\n    static [Symbol.create]() {\n        // Install special [[DefineOwnProperty]]\n        // to magically update 'length'\n    }\n}\n\n// User code of Array subclass\nclass MyArray extends Array {\n    constructor(...args) { super(...args); }\n}\n\n// Two-phase 'new':\n// 1) Call @@create to allocate object\n// 2) Invoke constructor on new instance\nvar arr = new MyArray();\narr[1] = 12;\narr.length == 2\n
\n

Math + Number + String + Array + Object APIs

\n

Many new library additions, including core Math libraries, Array conversion helpers, String helpers, and Object.assign for copying.

\n
Number.EPSILON\nNumber.isInteger(Infinity) // false\nNumber.isNaN(\"NaN\") // false\n\nMath.acosh(3) // 1.762747174039086\nMath.hypot(3, 4) // 5\nMath.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2\n\n\"abcde\".includes(\"cd\") // true\n\"abc\".repeat(3) // \"abcabcabc\"\n\nArray.from(document.querySelectorAll('*')) // Returns a real Array\nArray.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior\n[0, 0, 0].fill(7, 1) // [0,7,7]\n[1, 2, 3].find(x => x == 3) // 3\n[1, 2, 3].findIndex(x => x == 2) // 1\n[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]\n[\"a\", \"b\", \"c\"].entries() // iterator [0, \"a\"], [1,\"b\"], [2,\"c\"]\n[\"a\", \"b\", \"c\"].keys() // iterator 0, 1, 2\n[\"a\", \"b\", \"c\"].values() // iterator \"a\", \"b\", \"c\"\n\nObject.assign(Point, { origin: new Point(0,0) })\n
\n

More MDN info: Number, Math, Array.from, Array.of, Array.prototype.copyWithin, Object.assign

\n

Binary and Octal Literals

\n

Two new numeric literal forms are added for binary (b) and octal (o).

\n
0b111110111 === 503 // true\n0o767 === 503 // true\n
\n

Promises

\n

Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future. Promises are used in many existing JavaScript libraries.

\n
function timeout(duration = 0) {\n    return new Promise((resolve, reject) => {\n        setTimeout(resolve, duration);\n    })\n}\n\nvar p = timeout(1000).then(() => {\n    return timeout(2000);\n}).then(() => {\n    throw new Error(\"hmm\");\n}).catch(err => {\n    return Promise.all([timeout(100), timeout(200)]);\n})\n
\n

More info: MDN Promise

\n

Reflect API

\n

Full reflection API exposing the runtime-level meta-operations on objects. This is effectively the inverse of the Proxy API, and allows making calls corresponding to the same meta-operations as the proxy traps. Especially useful for implementing proxies.

\n
// No sample yet\n
\n

More info: MDN Reflect

\n

Tail Calls

\n

Calls in tail-position are guaranteed to not grow the stack unboundedly. Makes recursive algorithms safe in the face of unbounded inputs.

\n
function factorial(n, acc = 1) {\n    'use strict';\n    if (n <= 1) return acc;\n    return factorial(n - 1, n * acc);\n}\n\n// Stack overflow in most implementations today,\n// but safe on arbitrary inputs in ES6\nfactorial(100000)\n
"},{"url":"/docs/docs/git-repos/","relativePath":"docs/docs/git-repos.md","relativeDir":"docs/docs","base":"git-repos.md","name":"git-repos","frontmatter":{"title":"Git Repo List","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

My Repos:

\n"},{"url":"/docs/docs/","relativePath":"docs/docs/index.md","relativeDir":"docs/docs","base":"index.md","name":"index","frontmatter":{"title":"Docs","weight":0,"excerpt":"Documentation","seo":{"title":"Documentation","description":"Documentation","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

\\

\n
\n

My DevDocs Deploy

\n
\n\n
\n"},{"url":"/docs/docs/jamstack/","relativePath":"docs/docs/jamstack.md","relativeDir":"docs/docs","base":"jamstack.md","name":"jamstack","frontmatter":{"title":"lorem-ipsum","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Etiam facilisis lacus nec pretium lobortis. Praesent dapibus justo non efficitur efficitur. Nullam viverra justo arcu, eget egestas tortor pretium id. Sed imperdiet mattis eleifend. Vivamus suscipit et neque imperdiet venenatis.

\n
\n

Vestibulum ullamcorper risus auctor eleifend consequat.

\n
\n

\"Placeholder

\n

In malesuada sed urna eget vehicula. Donec fermentum tortor sit amet nisl elementum fringilla. Pellentesque dapibus suscipit faucibus. Nullam malesuada sed urna quis rutrum. Donec facilisis lorem id maximus mattis. Vestibulum quis elit magna. Vestibulum accumsan blandit consequat. Phasellus quis posuere quam.

\n

Vivamus mollis in tellus ac ullamcorper. Vestibulum sit amet bibendum ipsum, vitae rutrum ex. Nullam cursus, urna et dapibus aliquam, urna leo euismod metus, eu luctus justo mi eget mauris. Proin felis leo, volutpat et purus in, lacinia luctus eros. Pellentesque lobortis massa scelerisque lorem ullamcorper, sit amet elementum nulla scelerisque. In volutpat efficitur nulla, aliquam ornare lectus ultricies ac. Mauris sagittis ornare dictum. Nulla vel felis ut purus fermentum pretium. Sed id lectus ac diam aliquet venenatis. Etiam ac auctor enim. Nunc velit mauris, viverra vel orci ut, egestas rhoncus diam. Morbi scelerisque nibh tellus, vel varius urna malesuada sed. Etiam ultricies sem consequat, posuere urna non, maximus ex. Mauris gravida diam sed augue condimentum pulvinar vel ac dui. Integer vel convallis justo.

"},{"url":"/docs/docs/git-reference/","relativePath":"docs/docs/git-reference.md","relativeDir":"docs/docs","base":"git-reference.md","name":"git-reference","frontmatter":{"title":"Git Reference","weight":0,"excerpt":"Git Reference","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Git Reference

\n\n
\n
\n
\n

Git is a distributed version control and source code management system.

\n

It does this through a series of snapshots of your project, and it works\nwith those snapshots to provide you with functionality to version and\nmanage your source code.

\n

Versioning Concepts

\n

What is version control?

\n

Version control is a system that records changes to a file(s), over time.

\n

Centralized Versioning vs. Distributed Versioning

\n
    \n
  • Centralized version control focuses on synchronizing, tracking, and backing\nup files.
    • \n
  • Distributed version control focuses on sharing changes. Every change has a\nunique id.
    • \n
  • Distributed systems have no defined structure. You could easily have a SVN\nstyle, centralized system, with git.
    • \n
\n

Additional Information

\n

Why Use Git?

\n
    \n
  • Can work offline.
    • \n
  • Collaborating with others is easy!
    • \n
  • Branching is easy!
    • \n
  • Branching is fast!
    • \n
  • Merging is easy!
    • \n
  • Git is fast.
    • \n
  • Git is flexible.
    • \n
\n

Git Architecture

\n

Repository

\n

A set of files, directories, historical records, commits, and heads. Imagine it\nas a source code data structure, with the attribute that each source code\n\"element\" gives you access to its revision history, among other things.

\n

A git repository is comprised of the .git directory & working tree.

\n

.git Directory (component of repository)

\n

The .git directory contains all the configurations, logs, branches, HEAD, and\nmore.\nDetailed List.

\n

Working Tree (component of repository)

\n

This is basically the directories and files in your repository. It is often\nreferred to as your working directory.

\n

Index (component of .git dir)

\n

The Index is the staging area in git. It's basically a layer that separates\nyour working tree from the Git repository. This gives developers more power\nover what gets sent to the Git repository.

\n

Commit

\n

A git commit is a snapshot of a set of changes, or manipulations to your\nWorking Tree. For example, if you added 5 files, and removed 2 others, these\nchanges will be contained in a commit (or snapshot). This commit can then be\npushed to other repositories, or not!

\n

Branch

\n

A branch is essentially a pointer to the last commit you made. As you go on\ncommitting, this pointer will automatically update to point to the latest commit.

\n

Tag

\n

A tag is a mark on specific point in history. Typically people use this\nfunctionality to mark release points (v1.0, and so on).

\n

HEAD and head (component of .git dir)

\n

HEAD is a pointer that points to the current branch. A repository only has 1\nactive HEAD.\nhead is a pointer that points to any commit. A repository can have any number\nof heads.

\n

Stages of Git

\n
    \n
  • Modified - Changes have been made to a file but file has not been committed\nto Git Database yet
    • \n
  • Staged - Marks a modified file to go into your next commit snapshot
    • \n
  • Committed - Files have been committed to the Git Database
    • \n
\n

Conceptual Resources

\n\n

Commands

\n

init

\n

Create an empty Git repository. The Git repository's settings, stored\ninformation, and more is stored in a directory (a folder) named \".git\".

\n
$ git init\n
\n

config

\n

To configure settings. Whether it be for the repository, the system itself,\nor global configurations ( global config file is ~/.gitconfig ).

\n
# Print & Set Some Basic Config Variables (Global)\n$ git config --global user.email \"MyEmail@Zoho.com\"\n$ git config --global user.name \"My Name\"\n
\n

Learn More About git config.

\n

help

\n

To give you quick access to an extremely detailed guide of each command. Or to\njust give you a quick reminder of some semantics.

\n
# Quickly check available commands\n$ git help\n\n# Check all available commands\n$ git help -a\n\n# Command specific help - user manual\n# git help <command_here>\n$ git help add\n$ git help commit\n$ git help init\n# or git <command_here> --help\n$ git add --help\n$ git commit --help\n$ git init --help\n
\n

ignore files

\n

To intentionally untrack file(s) & folder(s) from git. Typically meant for\nprivate & temp files which would otherwise be shared in the repository.

\n
$ echo \"temp/\" >> .gitignore\n$ echo \"private_key\" >> .gitignore\n
\n

status

\n

To show differences between the index file (basically your working copy/repo)\nand the current HEAD commit.

\n
# Will display the branch, untracked files, changes and other differences\n$ git status\n\n# To learn other \"tid bits\" about git status\n$ git help status\n
\n

add

\n

To add files to the staging area/index. If you do not git add new files to\nthe staging area/index, they will not be included in commits!

\n
# add a file in your current working directory\n$ git add HelloWorld.java\n\n# add a file in a nested dir\n$ git add /path/to/file/HelloWorld.c\n\n# Regular Expression support!\n$ git add ./*.java\n\n# You can also add everything in your working directory to the staging area.\n$ git add -A\n
\n

This only adds a file to the staging area/index, it doesn't commit it to the\nworking directory/repo.

\n

branch

\n

Manage your branches. You can view, edit, create, delete branches using this\ncommand.

\n
# list existing branches & remotes\n$ git branch -a\n\n# create a new branch\n$ git branch myNewBranch\n\n# delete a branch\n$ git branch -d myBranch\n\n# rename a branch\n# git branch -m <oldname> <newname>\n$ git branch -m myBranchName myNewBranchName\n\n# edit a branch's description\n$ git branch myBranchName --edit-description\n
\n

tag

\n

Manage your tags

\n
# List tags\n$ git tag\n\n# Create a annotated tag\n# The -m specifies a tagging message, which is stored with the tag.\n# If you don't specify a message for an annotated tag,\n# Git launches your editor so you can type it in.\n$ git tag -a v2.0 -m 'my version 2.0'\n\n# Show info about tag\n# That shows the tagger information, the date the commit was tagged,\n# and the annotation message before showing the commit information.\n$ git show v2.0\n\n# Push a single tag to remote\n$ git push origin v2.0\n\n# Push a lot of tags to remote\n$ git push origin --tags\n
\n

checkout

\n

Updates all files in the working tree to match the version in the index, or\nspecified tree.

\n
# Checkout a repo - defaults to master branch\n$ git checkout\n\n# Checkout a specified branch\n$ git checkout branchName\n\n# Create a new branch & switch to it\n# equivalent to \"git branch <name>; git checkout <name>\"\n\n$ git checkout -b newBranch\n
\n

clone

\n

Clones, or copies, an existing repository into a new directory. It also adds\nremote-tracking branches for each branch in the cloned repo, which allows you\nto push to a remote branch.

\n
# Clone learnxinyminutes-docs\n$ git clone https://github.com/adambard/learnxinyminutes-docs.git\n\n# shallow clone - faster cloning that pulls only latest snapshot\n$ git clone --depth 1 https://github.com/adambard/learnxinyminutes-docs.git\n\n# clone only a specific branch\n$ git clone -b master-cn https://github.com/adambard/learnxinyminutes-docs.git --single-branch\n
\n

commit

\n

Stores the current contents of the index in a new \"commit.\" This commit\ncontains the changes made and a message created by the user.

\n
# commit with a message\n$ git commit -m \"Added multiplyNumbers() function to HelloWorld.c\"\n\n# signed commit with a message (user.signingkey must have been set\n# with your GPG key e.g. git config --global user.signingkey 5173AAD5)\n$ git commit -S -m \"signed commit message\"\n\n# automatically stage modified or deleted files, except new files, and then commit\n$ git commit -a -m \"Modified foo.php and removed bar.php\"\n\n# change last commit (this deletes previous commit with a fresh commit)\n$ git commit --amend -m \"Correct message\"\n
\n

diff

\n

Shows differences between a file in the working directory, index and commits.

\n
# Show difference between your working dir and the index\n$ git diff\n\n# Show differences between the index and the most recent commit.\n$ git diff --cached\n\n# Show differences between your working dir and the most recent commit\n$ git diff HEAD\n
\n

grep

\n

Allows you to quickly search a repository.

\n

Optional Configurations:

\n
# Thanks to Travis Jeffery for these\n# Set line numbers to be shown in grep search results\n$ git config --global grep.lineNumber true\n\n# Make search results more readable, including grouping\n$ git config --global alias.g \"grep --break --heading --line-number\"\n
\n
# Search for \"variableName\" in all java files\n$ git grep 'variableName' -- '*.java'\n\n# Search for a line that contains \"arrayListName\" and, \"add\" or \"remove\"\n$ git grep -e 'arrayListName' --and \\( -e add -e remove \\)\n
\n

Google is your friend; for more examples\nGit Grep Ninja

\n

log

\n

Display commits to the repository.

\n
# Show all commits\n$ git log\n\n# Show only commit message & ref\n$ git log --oneline\n\n# Show merge commits only\n$ git log --merges\n\n# Show all commits represented by an ASCII graph\n$ git log --graph\n
\n

merge

\n

\"Merge\" in changes from external commits into the current branch.

\n
# Merge the specified branch into the current.\n$ git merge branchName\n\n# Always generate a merge commit when merging\n$ git merge --no-ff branchName\n
\n

mv

\n

Rename or move a file

\n
# Renaming a file\n$ git mv HelloWorld.c HelloNewWorld.c\n\n# Moving a file\n$ git mv HelloWorld.c ./new/path/HelloWorld.c\n\n# Force rename or move\n# \"existingFile\" already exists in the directory, will be overwritten\n$ git mv -f myFile existingFile\n
\n

pull

\n

Pulls from a repository and merges it with another branch.

\n
# Update your local repo, by merging in new changes\n# from the remote \"origin\" and \"master\" branch.\n# git pull <remote> <branch>\n$ git pull origin master\n\n# By default, git pull will update your current branch\n# by merging in new changes from its remote-tracking branch\n$ git pull\n\n# Merge in changes from remote branch and rebase\n# branch commits onto your local repo, like: \"git fetch <remote> <branch>, git\n# rebase <remote>/<branch>\"\n$ git pull origin master --rebase\n
\n

push

\n

Push and merge changes from a branch to a remote & branch.

\n
# Push and merge changes from a local repo to a\n# remote named \"origin\" and \"master\" branch.\n# git push <remote> <branch>\n$ git push origin master\n\n# By default, git push will push and merge changes from\n# the current branch to its remote-tracking branch\n$ git push\n\n# To link up current local branch with a remote branch, add -u flag:\n$ git push -u origin master\n# Now, anytime you want to push from that same local branch, use shortcut:\n$ git push\n
\n

stash

\n

Stashing takes the dirty state of your working directory and saves it on a\nstack of unfinished changes that you can reapply at any time.

\n

Let's say you've been doing some work in your git repo, but you want to pull\nfrom the remote. Since you have dirty (uncommitted) changes to some files, you\nare not able to run git pull. Instead, you can run git stash to save your\nchanges onto a stack!

\n
$ git stash\nSaved working directory and index state \\\n  \"WIP on master: 049d078 added the index file\"\n  HEAD is now at 049d078 added the index file\n  (To restore them type \"git stash apply\")\n
\n

Now you can pull!

\n
git pull\n
\n

...changes apply...

\n

Now check that everything is OK

\n
$ git status\n# On branch master\nnothing to commit, working directory clean\n
\n

You can see what \"hunks\" you've stashed so far using git stash list.\nSince the \"hunks\" are stored in a Last-In-First-Out stack, our most recent\nchange will be at top.

\n
$ git stash list\nstash@{0}: WIP on master: 049d078 added the index file\nstash@{1}: WIP on master: c264051 Revert \"added file_size\"\nstash@{2}: WIP on master: 21d80a5 added number to log\n
\n

Now let's apply our dirty changes back by popping them off the stack.

\n
$ git stash pop\n# On branch master\n# Changes not staged for commit:\n#   (use \"git add <file>...\" to update what will be committed)\n#\n#      modified:   index.html\n#      modified:   lib/simplegit.rb\n#\n
\n

git stash apply does the same thing

\n

Now you're ready to get back to work on your stuff!

\n

Additional Reading.

\n

rebase (caution)

\n

Take all changes that were committed on one branch, and replay them onto\nanother branch.\nDo not rebase commits that you have pushed to a public repo.

\n
# Rebase experimentBranch onto master\n# git rebase <basebranch> <topicbranch>\n$ git rebase master experimentBranch\n
\n

Additional Reading.

\n

reset (caution)

\n

Reset the current HEAD to the specified state. This allows you to undo merges,\npulls, commits, adds, and more. It's a great command but also dangerous if you\ndon't know what you are doing.

\n
# Reset the staging area, to match the latest commit (leaves dir unchanged)\n$ git reset\n\n# Reset the staging area, to match the latest commit, and overwrite working dir\n$ git reset --hard\n\n# Moves the current branch tip to the specified commit (leaves dir unchanged)\n# all changes still exist in the directory.\n$ git reset 31f2bb1\n\n# Moves the current branch tip backward to the specified commit\n# and makes the working dir match (deletes uncommitted changes and all commits\n# after the specified commit).\n$ git reset --hard 31f2bb1\n
\n

reflog (caution)

\n

Reflog will list most of the git commands you have done for a given time period,\ndefault 90 days.

\n

This give you the chance to reverse any git commands that have gone wrong\n(for instance, if a rebase has broken your application).

\n

You can do this:

\n
    \n
  1. git reflog to list all of the git commands for the rebase
    2. \n
\n
38b323f HEAD@{0}: rebase -i (finish): returning to refs/heads/feature/add_git_reflog\n38b323f HEAD@{1}: rebase -i (pick): Clarify inc/dec operators\n4fff859 HEAD@{2}: rebase -i (pick): Update java.html.markdown\n34ed963 HEAD@{3}: rebase -i (pick): [yaml/en] Add more resources (#1666)\ned8ddf2 HEAD@{4}: rebase -i (pick): pythonstatcomp spanish translation (#1748)\n2e6c386 HEAD@{5}: rebase -i (start): checkout 02fb96d\n
\n
    \n
  1. Select where to reset to, in our case its 2e6c386, or HEAD@{5}
    2. \n
  2. 'git reset --hard HEAD@{5}' this will reset your repo to that head
    3. \n
  3. You can start the rebase again or leave it alone.
    4. \n
\n

Additional Reading.

\n

revert

\n

Revert can be used to undo a commit. It should not be confused with reset which\nrestores the state of a project to a previous point. Revert will add a new\ncommit which is the inverse of the specified commit, thus reverting it.

\n
# Revert a specified commit\n$ git revert <commit>\n
\n

rm

\n

The opposite of git add, git rm removes files from the current working tree.

\n
# remove HelloWorld.c\n$ git rm HelloWorld.c\n\n# Remove a file from a nested dir\n$ git rm /pather/to/the/file/HelloWorld.c\n
\n
    \n
  • git checkout
    • \n
  • git reset
    • \n
  • git restore
    • \n
  • git switch
    • \n
\n

I'll throw in one more, the misnamed git revert, as well.

\n

From an end-user perspective

\n

All you need are git checkout, git reset, and git revert. These commands have been in Git all along.

\n

But git checkout has, in effect, two modes of operation. One mode is \"safe\": it won't accidentally destroy any unsaved work. The other mode is \"unsafe\": if you use it, and it tells Git to wipe out some unsaved file, Git assumes that (a) you knew it meant that and (b) you really did mean to wipe out your unsaved file, so Git immediately wipes out your unsaved file.

\n

This is not very friendly, so the Git folks finally---after years of users griping---split git checkout into two new commands. This leads us to:

\n

From a historical perspective

\n

git restore is new, having first come into existence in August 2019, in Git 2.23. git reset is very old, having been in Git all along, dating back to before 2005. Both commands have the ability to destroy unsaved work.

\n

The git switch command is also new, introduced along with git restore in Git 2.23. It implements the \"safe half\" of git checkout; git restore implements the \"unsafe half\".

\n

When would you use which command?

\n

This is the most complicated part, and to really understand it, we need to know the following items:

\n
    \n
  • Git is really all about commits. Commits get stored in the Git repository. The git push and git fetch commands transfer commits---whole commits, as an all-or-nothing deal^1^---to the other Git. You either have all of a commit, or you don't have it. Other commands, such as git merge or git rebase, all work with local commits. The pull command runs fetch (to get commits) followed by a second command to work with the commits once they're local.
    • \n
  • New commits add to the repository. You almost never remove a commit from the repository. Only one of the five commands listed here---checkout, reset, restore, revert, and switch---is capable of removing commits.^2^
    • \n
  • Each commit is numbered by its hash ID, which is unique to that one particular commit. It's actually computed from what's in the commit, which is how Git makes these numbers work across all Gits eveywhere. This means that what is in the commit is frozen for all time: if you change anything, what you get is a new commit with a new number, and the old commit is still there, with its same old number.
    • \n
  • Each commit stores two things: a snapshot, and metadata. The metadata include the hash ID(s) of some previous commit(s). This makes commits form backwards-looking chains.
    • \n
  • \n

    A branch name holds the hash ID of one commit. This makes the branch name find that commit, which in turn means two things:

    \n
      \n
    • that particular commit is the tip commit of that branch; and
      • \n
    • all commits leading up to and including that tip commit are on that branch.
      • \n
    \n
    • \n
  • We're also going to talk about Git's index in a moment, and your working tree. They're separate from these but worth mentioning early, especially since the index has three names: Git sometimes calls it the index, sometimes calls it the staging area, and sometimes---rarely these days---calls it the cache. All three names refer to the same thing.
    • \n
\n

Everything up through the branch name is, I think, best understood via pictures (at least for most people). If we draw a series of commits, with newer commits towards the right, using o for each commit and omitting some commits for space or whatever, we get something like this:

\n
        o--o---o   <-- feature-top\n       /\\\no--o--o--o--...--o---o--o   <-- main\n    \\               /\n     o--o--...--o--o   <-- feature-hull\n
\n

which, as you can see, is a boat repository. 😀 There are three branches. The mainline branch holds every commit, including all the commits on the top row and bottom (hull) row. The feature-top branch holds the top three commits and also the three commits along the main line to the left, but not any of the commits on the bottom row. All the connectors between commits are---well, should be but I don't have a good enough font---one-way arrows, pointing left, or down-and-left, or up-and-left.

\n

These \"arrows\", or one way connections from commit to commit, are technically arcs, or one-way edges, in a directed graph. This directed graph is one without cycles, making it a Directed Acyclic Graph or DAG, which has a bunch of properties that are useful to Git.

\n

If you're just using Git to store files inside commits, all you really care about are the round o nodes or vertices (again two words for the same thing), each of which acts to store your files, but you should at least be vaguely aware of how they are arranged. It matters, especially because of merges. Merge commits are those with two outgoing arcs, pointing backwards to two of what Git calls parent commits. The child commit is the one \"later\": just as human parents are always older than their children, Git parent commits are older than their children.

\n

We need one more thing, though: Where do new commits come from? We noted that what's in a commit---both the snapshot, holding all the files, and the metadata, holding the rest of the information Git keeps about a commit---is all read-only. Your files are not only frozen, they're also transformed, and the transformed data are then de-duplicated, so that even though every commit has a full snapshot of every file, the repository itself stays relatively slim. But this means that the files in a commit can only be read by Git, and nothing---not even Git itself---can write to them. They get saved once, and are de-duplicated from then on. The commits act as archives, almost like tar or rar or winzip or whatever.

\n

To work with a Git repository, then, we have to have Git extract the files. This takes the files out of some commit, turning those special archive-formatted things into regular, usable files. Note that Git may well be able to store files that your computer literally can't store: a classic example is a file named aux.h, for some C program, on a Windows machine. We won't go into all the details, but it is theoretically possible to still get work done with this repository, which was probably built on a Linux system, even if you're on a Windows system where you can't work with the aux.h file directly.

\n

Anyway, assuming there are no nasty little surprises like aux.h, you would just run git checkout or git switch to get some commit out of Git. This will fill in your working tree, populating it from the files stored in the tip commit of some branch. The tip commit is, again, the last commit on that branch, as found by the branch name. Your git checkout or git switch selected that commit to be the current commit, by selecting that branch name to be the current branch. You now have all the files from that commit, in an area where you can see them and work on them: your working tree.

\n

Note that the files in your working tree are not actually in Git itself. They were just extracted from Git. This matters a lot, because when git checkout extracts the files from Git, it actually puts each file in two places. One of those places is the ordinary everyday file you see and work on / with. The other place Git puts each file is into Git's index.

\n

As I mentioned a moment ago, the index has three names: index, staging area, and cache. All refer to the same thing: the place Git sticks these \"copies\" of each file. Each one is actually pre-de-duplicated, so the word \"copy\" is slightly wrong, but---unlike much of the rest of its innards---Git actually does a really good job of hiding the de-duplication aspect. Unless you start getting into internal commands like git ls-files and git update-index, you don't need to know about this part, and can just think of the index as holding a copy of the file, ready to go into the next commit.

\n

What this all means for you as someone just using Git is that the index / staging-area acts as your proposed next commit. When you run git commit, Git is going to package up these copies of the file as the ones to be archived in the snapshot. The copies you have in your working tree are yours; the index / staging-area copies are Git's, ready to go. So, if you change your copies and want the changed copy to be what goes in the next snapshot, you must tell Git: Update the Git copy, in the Git index / staging-area. You do this with git add.^3^ The git add command means make the proposed-next-commit copy match the working-tree copy. It's the add command that does the updating: this is when Git compresses and de-duplicates the file and makes it ready for archiving, not at git commit time.^4^

\n

Then, assuming you have some series of commits ending with the one with hash-N:

\n
[hash1] <-[hash2] ... <-[hashN]   <--branch\n
\n

you run git commit, give it any metadata it needs (a commit log message), and you get an N+1'th commit:

\n
[hash1] <-[hash2] ... <-[hashN] <-[hashN+1]   <--branch\n
\n

Git automatically updates the branch name to point to the new commit, which has therefore been added to the branch.

\n

Let's look at each of the various commands now:

\n
    \n
  • \n

    git checkout: this is a large and complicated command.

    \n

    We already saw this one, or at least, half of this one. We used it to pick out a branch name, and therefore a particular commit. This kind of checkout first looks at our current commit, index, and working tree. It makes sure that we have committed all our modified files, or---this part gets a bit complicated---that if we haven't committed all our modified files, switching to that other branch is \"safe\". If it's not safe, git checkout tells you that you can't switch due to having modified files. If it is safe, git checkout will switch; if you didn't mean to switch, you can just switch back. (See also Checkout another branch when there are uncommitted changes on the current branch)

    \n

    But git checkout has an unsafe half. Suppose you have modified some file in your working tree, such as README.md or aux.h or whatever. You now look back at what you changed and think: No, that's a bad idea. I should get rid of this change. I'd like the file back exactly as it was before.

    \n

    To get this---to wipe out your changes to, say, README.md---you can run:

    \n
    git checkout -- README.md\n
    \n

    The -- part here is optional. It's a good idea to use it, because it tells Git that the part that comes after -- is a file name, not a branch name.

    \n

    Suppose you have a branch named hello and a file named hello. What does:

    \n
    git checkout hello\n
    \n

    mean? Are we asking Git to clobber the file hello to remove the changes we made, or are we asking Git to check out the branch hello? To make this unambiguous, you have to write either:

    \n
    git checkout -- hello        (clobber the file)\n
    \n

    or:

    \n
    git checkout hello --        (get the branch)\n
    \n

    This case, where there are branches and files or directories with the same name, is a particularly insidious one. It has bitten real users. It's why git switch exists now. The git switch command never means clobber my files. It only means do the safe kind of git checkout.

    \n

    (The git checkout command has been smartened up too, so that if you have the new commands and you run the \"bad\" kind of ambiguous git checkout, Git will just complain at you and do nothing at all. Either use the smarter split-up commands, or add the -- at the right place to pick which kind of operation you want.)

    \n

    More precisely, this kind of git checkout, ideally spelled git checkout -- *paths*, is a request for Git to copy files from Git's index to your working tree. This means clobber my files. You can also run git checkout *tree-ish* -- *paths*, where you add a commit hash ID^5^ to the command. This tells Git to copy the files from that commit, first to Git's index, and then on to your working tree. This, too, means clobber my files: the difference is where Git gets the copies of the files it's extracting.

    \n

    If you ran git add on some file and thus copied it into Git's index, you need git checkout HEAD -- *file* to get it back from the current commit. The copy that's in Git's index is the one you git add-ed. So these two forms of git checkout, with a commit hash ID (or the name HEAD), the optional --, and the file name, are the unsafe clobber my files forms.

    \n
    • \n
  • \n

    git reset: this is also a large and complicated command.

    \n

    There are, depending on how you count, up to about five or six different forms of git reset. We'll concentrate on a smaller subset here.

    \n
      \n
    • \n

      git reset [ --hard | --mixed | --soft ] [ *commit* ]

      \n

      Here, we're asking Git to do several things. First, if we give a commit argument, such as HEAD or HEAD~3 or some such, we've picked a particular commit that Git should reset to. This is the kind of command that will remove commits by ejecting them off the end of the branch. Of all the commands listed here, this is the only one that removes any commits. One other command---git commit --amend---has the effect of ejecting the last commit while putting on a new replacement, but that one is limited to ejecting one commit.

      \n

      Let's show this as a drawing. Suppose we have:

      \n
      ...--E--F--G--H   <-- branch\n
      \n

      That is, this branch, named branch, ends with four commits whose hash IDs we'll call E, F, G, and H in that order. The name branch currently stores the hash ID of the last of these commits, H. If we use git reset --hard HEAD~3, we're telling Git to eject the last three commits. The result is:

      \n
             F--G--H   ???\n      /\n...--E   <-- branch\n
      \n

      The name branch now selects commit E, not commit H. If we did not write down (on paper, on a whiteboard, in a file) the hash IDs of the last three commits, they've just become somewhat hard to find. Git does gives a way to find them again, for a while, but mostly they just seem to be gone.

      \n

      The HEAD~3 part of this command is how we chose to drop the last three commits. It's part of a whole sub-topic in Git, documented in the gitrevisions manual, on ways to name specific commits. The reset command just needs the hash ID of an actual commit, or anything equivalent, and HEAD~3 means go back three first-parent steps, which in this case gets us from commit H back to commit E.

      \n

      The --hard part of the git reset is how we tell Git what to do with (a) its index and (b) our working tree files. We have three choices here:

      \n
        \n
      • --soft tells Git: leave both alone. Git will move the branch name without touching the index or our working tree. If you run git commit now, whatever is (still) in the index is what goes into the new commit. If the index matches the snapshot in commit H, this gets you a new commit whose snapshot is H, but whose parent is E, as if commits F through H had all been collapsed into a single new commit. People usually call this squashing.
        • \n
      • --mixed tells Git: reset your index, but leave my working tree alone. Git will move the branch name, then replace every file that is in the index with the one from the newly selected commit. But Git will leave all your working tree files alone. This means that as far as Git is concerned, you can start git adding files to make a new commit. Your new commit won't match H unless you git add everything, so this means you could, for instance, build a new intermediate commit, sort of like E+F or something, if you wanted.
        • \n
      • --hard tells Git: *reset your index and my working tree.* Git will move the branch name, replace all the files in its index, and replace all the files in your working tree, all as one big thing. It's now as if you never made those three commits at all. You no longer have the files from F, or G, or H: you have the files from commit E.
        • \n
      \n

      Note that if you leave out the commit part of this kind of (hard/soft/mixed) reset, Git will use HEAD. Since HEAD names the current commit (as selected by the current branch name), this leaves the branch name itself unchanged: it still selects the same commit as before. So this is only useful with --mixed or --hard, because git reset --soft, with no commit hash ID, means don't move the branch name, don't change Git's index, and don't touch my working tree. Those are the three things this kind of git reset can do---move the branch name, change what's in Git's index, and change what's in your working tree---and you just ruled all three out. Git is OK with doing nothing, but why bother?

      \n
      • \n
    • \n

      git reset [ *tree-ish* ] -- *path*

      \n

      This is the other kind of git reset we'll care about here. It's a bit like a mixed reset, in that it means clobber some of the index copies of files, but here you specify which files to clobber. It's also a bit unlike a mixed reset, because this kind of git reset will never move the branch name.

      \n

      Instead, you pick which files you want copied from somewhere. The somewhere is the tree-ish you give; if you don't give one, the somewhere is HEAD, i.e., the current commit. This can only restore files in the proposed next commit to the form they have in some existing commit. By defaulting to the current existing commit, this kind of git reset -- *path* has the effect of undoing a git add -- *path*.^6^

      \n

      There are several other forms of git reset. To see what they all mean, consult the documentation.

      \n
      • \n
    \n
    • \n
  • \n

    git restore: this got split off from git checkout.

    \n

    Basically, this does the same thing as the various forms of git checkout and git reset that clobber files (in your working tree and/or in Git's index). It's smarter than the old git checkout-and-clobber-my-work variant, in that you get to choose where the files come from and where they go, all in the one command line.

    \n

    To do what you used to do with git checkout -- *file*, you just run git restore --staged --worktree -- *file*. (You can leave out the -- part, as with git checkout, in most cases, but it's just generally wise to get in the habit of using it. Like git add, this command is designed such that only files named -whatever are actually problematic.)

    \n

    To do what you used to do with git reset -- *file*, you just run git restore --staged -- *file*. That is, you tell git restore to copy from HEAD to staging area / index, which is how git reset operates.

    \n

    Note that you can copy a file from some existing commit, to Git's index, without touching your working tree copy of that file: git restore --source *commit* --staged -- *file* does that. You can't do that at all with the old git checkout but you can do that with the old git reset, as git reset *commit* -- *file*. And, you can copy a file from some existing commit, to your working tree, without touching the staged copy: git restore --source *commit* --worktree -- *file* does that. The overlapping part (restore and reset) exists because git restore is new, and this kind of restore makes sense; probably, ideally, we should always use git restore here, instead of using the old git reset way of doing things, but Git tries to maintain backwards compatibility.

    \n

    The new ability---to copy from any arbitrary source, to your working tree, without touching Git's index / staging-area copy---is just that: new. You couldn't do it before. (You could run git show *commit*:*path* > *path*, before, but that falls outside our five commands to examine.)

    \n
    • \n
  • git switch: this just does the \"safe half\" of git checkout. That's really all you need to know. Using git switch, without --force, Git won't overwrite your unsaved work, even if you make a typo or whatever. The old git checkout command could overwrite unsaved work: if your typo turns a branch name into a file name, for instance, well, oops.
    • \n
  • \n

    git revert (I added this for completeness): this makes a new commit. The point of the new commit is to back out what someone did in some existing commit. You therefore need to name the existing commit that revert should back out. This command probably should have been named git backout.

    \n

    If you back out the most recent commit, this does revert to the second-most-recent snapshot:

    \n
      ...--G--H   <-- branch\n
    \n

    becomes:

    \n
      ...--G--H--Ħ   <-- branch\n
    \n

    where commit Ħ (H-bar) \"undoes\" commit H and therefore leaves us with the same files as commit G. But we don't have to undo the most recent commit. We could take:

    \n
      ...--E--F--G--H   <-- branch\n
    \n

    and add a commit Ǝ that undoes E to get:

    \n
      ...--E--F--G--H--Ǝ   <-- branch\n
    \n

    which may not match the source snapshot of any previous commit!

    \n
    • \n
\n

Further Information

\n"},{"url":"/docs/docs/markdown/","relativePath":"docs/docs/markdown.md","relativeDir":"docs/docs","base":"markdown.md","name":"markdown","frontmatter":{"title":"Markdown","weight":0,"excerpt":"Markdown","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Markdown:

\n

Why markdown?

\n

Markdown is a universal doc format that is easy to write and easy to add to a version control system.

\n
    \n
  • Open - Anyone can submit content, fix typos & update anything via pull requests
    • \n
  • Version control - Roll back & see the history of any given post
    • \n
  • No CMS lock in - We can easily port to any static site generator
    • \n
  • It's just simple - No user accounts to manage, no CMS software to upgrade, no plugins to install.
    • \n
\n
\n

Markdown basics

\n

The basics of markdown can be found here & here. Super easy!

\n

Advanced Formatting tips

\n

left alignment

\n\n

This is the code you need to align images to the left:

\n
<img align=\"left\" width=\"100\" height=\"100\" src=\"http://www.fillmurray.com/100/100\">\n
\n
\n

right alignment

\n\n

This is the code you need to align images to the right:

\n
<img align=\"right\" width=\"100\" height=\"100\" src=\"http://www.fillmurray.com/100/100\">\n
\n
\n

center alignment example

\n

\n \n

\n
<p align=\"center\">\n  <img width=\"460\" height=\"300\" src=\"http://www.fillmurray.com/460/300\">\n</p>\n
\n
\n

collapse Sections

\n

Collapsing large blocks of text can make your markdown much easier to digest

\n
\n\"Click to expand\"\nthis is hidden block\n
\n
<details>\n<summary>\"Click to expand\"</summary>\nthis is hidden\n</details>\n
\n

Collapsing large blocks of Markdown text

\n
\nTo make sure markdown is rendered correctly in the collapsed section...\n
    \n
  1. Put an empty line after the <summary> block.
    2. \n
  2. Insert your markdown syntax
    3. \n
  3. Put an empty line before the </details> tag
    4. \n
\n
\n
<details>\n<summary>To make sure markdown is rendered correctly in the collapsed section...</summary>\n\n 1. Put an **empty line** after the `<summary>` block.\n 2. *Insert your markdown syntax*\n 3. Put an **empty line** before the `</details>` tag\n\n</details>\n
\n
\n

additional links

\n

Website • Email Updates • Gitter • Forum • Meetups • Twitter • Facebook • Contact Us

\n
[Website](http://www.serverless.com) • [Email Updates](http://eepurl.com/b8dv4P) • [Gitter](https://gitter.im/serverless/serverless) • [Forum](http://forum.serverless.com) • [Meetups](https://github.com/serverless-meetups/main) • [Twitter](https://twitter.com/goserverless) • [Facebook](https://www.facebook.com/serverless) • [Contact Us](mailto:hello@serverless.com)\n
\n
\n

Badges

\n

I hate them so. Don't use badges.

\n
\n

Nice looking file tree

\n

For whatever reason the graphql syntax will nicely highlight file trees like below:

\n
# Code & components for pages\n./src/*\n  ├─ src/assets - # Minified images, fonts, icon files\n  ├─ src/components - # Individual smaller components\n  ├─ src/fragments - # Larger chunks of a page composed of multiple components\n  ├─ src/layouts - # Page layouts used for different types of pages composed of components and fragments\n  ├─ src/page - # Custom pages or pages composed of layouts with hardcoded data components, fragments, & layouts\n  ├─ src/pages/* - # Next.js file based routing\n  │  ├─ _app.js - # next.js app entry point\n  │  ├─ _document.js - # next.js document wrapper\n  │  ├─ global.css - #  Global CSS styles\n  │  └─ Everything else... - # File based routing\n  └─ src/utils - # Utility functions used in various places\n
\n
\n

Useful packages

\n
    \n
  1. gray-matter
    2. \n
\n

YAML front-matter is your friend. You can keep metadata in markdown files

\n
title: Serverless Framework Documentation\ndescription: \"Great F'in docs!\"\nmenuText: Docs\nlayout: Doc\n
\n
    \n
  1. Remark
    2. \n
\n

Useful for rendering markdown in HTML/React

\n
    \n
  1. Markdown Magic
    2. \n
  2. Repo
    3. \n
  3. Plugins
    4. \n
  4. Show automatic doc generation. Example 1 | Example 2
    5. \n
\n
\n

Useful utilities

\n
    \n
  1. Schedule Posts - Post scheduler for static sites
    2. \n
\n

Show DEMO

\n
    \n
  1. Zero friction inline content editing
    2. \n
\n

Show DEMO

\n
    \n
  1. Byword & Typora - Good Editors
    2. \n
  2. Monodraw - Flow charts for days
    3. \n
  3. Kap - Make gifs
    4. \n
  4. IDE markdown preview
    5. \n
  5. Stuck on WordPress? Try easy-markdown plugin
    6. \n
\n
\n

How Serverless uses markdown

\n

Serverless.com is comprised of 3 separate repositories

\n\n

Why multiple repos?

\n
    \n
  1. We wanted documentation about the framework to live in the serverless github repo for easy access
    2. \n
  2. We wanted our blog content to be easily portable to any static site generator separate from the implementation (site)
    3. \n
  3. prebuild npm script pulls the content together & processes them for site build
    4. \n
\n

A single repo is easier to manage but harder for people to find/edit/PR content.

\n
\n

DEMO

\n\n

Other Markdown Resources

\n
    \n
  • Verb - Documentation generator for GitHub projects
    • \n
  • ACSII docs - Markdown alternative
    • \n
"},{"url":"/docs/faq/","relativePath":"docs/faq/index.md","relativeDir":"docs/faq","base":"index.md","name":"index","frontmatter":{"title":"FAQ","excerpt":"In this section you'll find commonly asked questions regarding the Libris theme. If you have questions, don't hesitate to ask us directly.","seo":{"title":"FAQ","description":"FAQ What's your favorite non-business book?\nHitchhiker's Guide To The Galaxy","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"FAQ","keyName":"property"},{"name":"og:description","value":"This is the faqpage","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"FAQ"},{"name":"twitter:description","value":"This is the faqpage"}]},"template":"docs","weight":900},"html":"

What's the most useful business-related book you've ever read?

\n
\n

A Random Walk Down Wall Street

\n
\n

What's your favorite non-business book?

\n
\n

Hitchhiker's Guide To The Galaxy

\n
\n

If money were not an issue, what would you be doing right now?

\n
\n

Designing recording software/hardware and using it

\n
\n

What words of advice would you give your younger self?

\n
\n

Try harder and listen to your parents more (the latter bit of advice would be almost certain to fall on deaf ears lol)

\n
\n

What's the most creative thing you've ever done?

\n
\n

I built a platform that listens to a guitarist's performance and automatically triggers guitar effects at the appropriate time in the song.

\n
\n

Which founders or startups do you most admire?

\n
\n

Is it to basic to say Tesla... I know they're prevalent now but I've been an avid fan since as early as 2012.

\n
\n

What's your super power?

\n
\n

Having really good ideas and forgetting them moments later.

\n
\n

What's the best way for people to get in touch with you?

\n
\n

A text

\n
\n

What aspects of your work are you most passionate about?

\n

Creating things that change my every day life.

\n

What was the most impactful class you took in school?

\n
\n

Modern Physics... almost changed my major after that class... but at the end of the day engineering was a much more fiscally secure avenue.

\n
\n

What's something you wish you had done years earlier?

\n
\n

Learned to code ... and sing

\n
\n

What words of wisdom do you live by?

\n
\n

*Disclaimer: The following wisdom is very cliche ... but... \"Be the change that you wish to see in the world.\"

\n
"},{"url":"/docs/faq/contact/","relativePath":"docs/faq/contact.md","relativeDir":"docs/faq","base":"contact.md","name":"contact","frontmatter":{"title":"Contact!","sections":[],"seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"
\n
\n\n
\n
\n
\n
\n
\n\n

Calendar:

\n"},{"url":"/docs/docs/regex-in-js/","relativePath":"docs/docs/regex-in-js.md","relativeDir":"docs/docs","base":"regex-in-js.md","name":"regex-in-js","frontmatter":{"title":"Regular Expressions","weight":0,"excerpt":"Regular Expressions","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Regular Expressions

\n

description:

\n
\n

CODEX

\n

Regular Expressions

\n
### description:\n

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.

\n

Creating a regular expression

\n

You construct a regular expression in one of two ways:

\n
    \n
  1. Using a regular expression literal, which consists of a pattern enclosed between slashes, as follows:
    2. \n
\n

let re = /ab+c/;

\n
    \n
  • 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.
    • \n
\n

2. Or calling the constructor function of the RegExp object, as follows:

\n
    \n
  • let re = new RegExp('ab+c');
    • \n
\n
\n

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.

\n
\n

Writing a regular expression pattern

\n

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*/.

\n

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.

\n

Using simple patterns

\n

Simple patterns are constructed of characters for which you want to find a direct match.

\n

For example, the pattern /abc/ matches character combinations in strings only when the exact sequence \"abc\" occurs (all characters together and in that order).

\n

Such a match would succeed in the strings \"Hi, do you know your abc's?\" and \"The latest airplane designs evolved from slabcraft.\"

\n

In both cases the match is with the substring \"abc\".

\n

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\".

\n

Using special characters

\n

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.

\n

For example, to match a single \"a\" followed by zero or more \"b\"s followed by \"c\", you'd use the pattern /ab*c/:

\n
\n

the * after \"b\" means \"0 or more occurrences of the preceding item.\" In the string \"cbbabbbbcdebc\", this pattern will match the substring \"abbbbc\".

\n
\n

Assertions** : 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).**

\n

Character classes** : Distinguish different types of characters. For example, distinguishing between letters and digits.**

\n

Groups and ranges** : Indicate groups and ranges of expression characters.**

\n

Quantifiers** : Indicate numbers of characters or expressions to match.**

\n

Unicode property escapes** : Distinguish based on unicode character properties, for example, upper- and lower-case letters, math symbols, and punctuation.**

\n

If you want to look at all the special characters that can be used in regular expressions in a single table, see the following:

\n
### Special characters in regular expressions.\n

Escaping

\n

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.

\n

For instance, to search for \"a\" followed by \"*\" followed by \"b\",

\n
\n

you'd use /a\\*b/ --- the backslash \"escapes\" the \"*\", making it literal instead of special.

\n
\n

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)

\n

For instance, to search for the string \"/example/\" followed by one or more alphabetic characters, you'd use /\\/example\\/[a-z]+/i

\n

--the backslashes before each slash make them literal.

\n

To match a literal backslash, you need to escape the backslash.

\n

For instance, to match the string \"C:\\\" where \"C\" can be any letter,

\n

you'd use /[A-Z]:\\\\/

\n

--- the first backslash escapes the one after it, so the expression searches for a single literal backslash.

\n

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.

\n

/a\\*b/ and new RegExp(\"a\\\\*b\") create the same expression,

\n

which searches for \"a\" followed by a literal \"*\" followed by \"b\".

\n

If escape strings are not already part of your pattern you can add them using String.replace:

\n
function escapeRegExp(string) {\n  return string.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&'); // $& means the whole matched string\n}\n
\n

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.

\n

Using parentheses

\n

Parentheses around any part of the regular expression pattern causes that part of the matched substring to be remembered.

\n

Once remembered, the substring can be recalled for other use.

\n

Using regular expressions in JavaScript

\n

Regular expressions are used with the RegExp methods

\n

test() and exec()

\n

and with the String methods match(), replace(), search(), and split().

\n
\n

Method Descriptions

\n

exec()

\n

Executes a search for a match in a string.

\n

It returns an array of information or null on a mismatch.

\n

test()

\n

Tests for a match in a string.

\n

It returns true or false.

\n

match()

\n

Returns an array containing all of the matches, including capturing groups, or null if no match is found.

\n

matchAll()

\n

Returns an iterator containing all of the matches, including capturing groups.

\n

search()

\n

Tests for a match in a string.

\n

It returns the index of the match, or -1 if the search fails.

\n

replace()

\n

Executes a search for a match in a string, and replaces the matched substring with a replacement substring.

\n

replaceAll()

\n

Executes a search for all matches in a string, and replaces the matched substrings with a replacement substring.

\n

split()

\n

Uses a regular expression or a fixed string to break a string into an array of substrings.

\n

Methods that use regular expressions

\n

When you want to know whether a pattern is found in a string, use the test() or search() methods;

\n

for more information (but slower execution) use the exec() or match() methods.

\n

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.

\n

If the match fails, the exec() method returns null (which coerces to false).

\n

In the following example, the script uses the exec() method to find a match in a string.

\n
let myRe = /d(b+)d/g;\nlet myArray = myRe.exec('cdbbdbsbz');\n
\n

If you do not need to access the properties of the regular expression, an alternative way of creating myArray is with this script:

\n
let myArray = /d(b+)d/g.exec('cdbbdbsbz');\n    // similar to \"cdbbdbsbz\".match(/d(b+)d/g); however,\n    // \"cdbbdbsbz\".match(/d(b+)d/g) outputs Array [ \"dbbd\" ], while\n    // /d(b+)d/g.exec('cdbbdbsbz') outputs Array [ 'dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ].\n
\n

(See different behaviors for further info about the different behaviors.)

\n

If you want to construct the regular expression from a string, yet another alternative is this script:

\n
let myRe = new RegExp('d(b+)d', 'g');\nlet myArray = myRe.exec('cdbbdbsbz');\n
\n

With these scripts, the match succeeds and returns the array and updates the properties shown in the following table.

\n

Results of regular expression execution.

\n

You can use a regular expression created with an object initializer without assigning it to a letiable.

\n

If you do, however, every occurrence is a new regular expression.

\n

For this reason, if you use this form without assigning it to a letiable, you cannot subsequently access the properties of that regular expression.

\n

For example, assume you have this script:

\n
let myRe = /d(b+)d/g;\nlet myArray = myRe.exec('cdbbdbsbz');\nconsole.log('The value of lastIndex is ' + myRe.lastIndex);\n\n// \"The value of lastIndex is 5\"\n
\n

However, if you have this script:

\n
let myArray = /d(b+)d/g.exec('cdbbdbsbz');\nconsole.log('The value of lastIndex is ' + /d(b+)d/g.lastIndex);\n\n// \"The value of lastIndex is 0\"\n
\n

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.

\n

If you need to access the properties of a regular expression created with an object initializer, you should first assign it to a variable.

\n

[Advanced searching with flags]

\n

Regular expressions have six optional flags that allow for functionality like global and case insensitive searching.

\n

These flags can be used separately or together in any order, and are included as part of the regular expression.

\n

Flag Description Corresponding property

\n
\n

g Global search. RegExp.prototype.global

\n

i Case-insensitive search. RegExp.prototype.ignoreCase

\n

m Multi-line search. RegExp.prototype.multiline

\n

s Allows . to match newline characters. RegExp.prototype.dotAll

\n

u \"unicode\"; treat a pattern as a sequence of unicode code points. RegExp.prototype.unicode

\n

y Perform a \"sticky\" search that matches starting at the current position in the target string. RegExp.prototype.sticky

\n

Regular expression flags

\n

To include a flag with the regular expression, use this syntax:

\n
let re = /pattern/flags;\n
\n

or

\n
let re = new RegExp('pattern', 'flags');\n
\n

Note that the flags are an integral part of a regular expression. They cannot be added or removed later.

\n

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.

\n
let re = /\\w+\\s/g;\nlet str = 'fee fi fo fum';\nlet myArray = str.match(re);\nconsole.log(myArray);\n\n// [\"fee \", \"fi \", \"fo \"]\n
\n

You could replace the line:

\n
let re = /\\w+\\s/g;\n
\n

with:

\n
let re = new RegExp('\\\\w+\\\\s', 'g');\n
\n

and get the same result.

\n

The behavior associated with the g flag is different when the .exec() method is used.

\n

The roles of \"class\" and \"argument\" get reversed:

\n

In the case of .match(), the string class (or data type) owns the method and the regular expression is just an argument,

\n

while in the case of .exec(), it is the regular expression that owns the method, with the string being the argument.

\n

Contrast this str.match(re) versus re.exec(str).

\n

The g flag is used with the .exec() method to get iterative progression.

\n
let xArray; while(xArray = re.exec(str)) console.log(xArray);\n// produces:\n// [\"fee \", index: 0, input: \"fee fi fo fum\"]\n// [\"fi \", index: 4, input: \"fee fi fo fum\"]\n// [\"fo \", index: 7, input: \"fee fi fo fum\"]\n
\n

The m flag is used to specify that a multiline input string should be treated as multiple lines.

\n

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.

\n

Using special characters to verify input

\n

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.

\n

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}.

\n

The Change event activated when the user presses Enter sets the value of RegExp.input.

\n

HTML

\n
<p>\n  Enter your phone number (with area code) and then click \"Check\".\n  <br>\n  The expected format is like ###-###-####.\n</p>\n<form action=\"#\">\n  <input id=\"phone\">\n    <button onclick=\"testInfo(document.getElementById('phone'));\">Check</button>\n</form>\n
\n

JavaScript

\n
let re = /(?:\\d{3}|\\(\\d{3}\\))([-\\/\\.])\\d{3}\\1\\d{4}/;\nfunction testInfo(phoneInput) {\n  let OK = re.exec(phoneInput.value);\n  if (!OK) {\n    console.error(phoneInput.value + ' isn\\'t a phone number with area code!');\n  } else {\n    console.log('Thanks, your phone number is ' + OK[0]);}\n}\n
\n

Cheat Sheet

\n
#### If you found this guide helpful feel free to checkout my GitHub/gist's where I host similar content:\n
\n

bgoonz's gists · GitHub

\n
\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

\n

Or Checkout my personal Resource Site:

\n

a/A-Student-Resources
\nEdit descriptiongoofy-euclid-1cd736.netlify.app

\n

By Bryan Guner on March 6, 2021.

\n

Canonical link

\n

Exported from Medium on August 17, 2021.

"},{"url":"/docs/interact/callstack-visual/","relativePath":"docs/interact/callstack-visual.md","relativeDir":"docs/interact","base":"callstack-visual.md","name":"callstack-visual","frontmatter":{"title":"Callstack Visualizer","weight":0,"excerpt":"Callstack Visualizer","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"\n\n

\n See the Pen \n Data Structures Viz by Bryan C Guner (@bgoonz)\n on CodePen.\n

\n\n

Callstack Visualizer

\n\n
About the Call Stack
\n

TL;DR *The Call Stack tracks function calls. It is a LIFO stack of frames. Each frame represents a function call.*

\n
\n

The Call Stack is a fundamental part of the JavaScript language. It is a record-keeping structure that allows us to perform function calls. Each function call is represented as a frame on the Call Stack. This is how the JavaScript engine keeps track of which functions have been called and in what order. The JS engine uses this information to ensure execution picks back up in the right spot after a function returns.

\n

When a JavaScript program first starts executing, the Call Stack is empty. When the first function call is made, a new frame is pushed onto the top of the Call Stack. When that function returns, its frame is popped off of the Call Stack.

\n
About the Event Loop
\n

TL;DR *The Event Loop processes Tasks and Microtasks. It places them into the Call Stack for execution one at a time. It also controls when rerendering occurs.*

\n
\n

The Event Loop is a looping algorithm that processes the Tasks/Microtasks in the Task Queue and Microtask Queue. It handles selecting the next Task/Microtask to be run and placing it in the Call Stack for execution.

\n

The Event Loop algorithm consists of four key steps:

\n
    \n
  1. Evaluate Script: Synchronously execute the script as though it were a function body. Run until the Call Stack is empty.
    2. \n
  2. Run a Task: Select the oldest Task from the Task Queue. Run it until the Call Stack is empty.
    3. \n
  3. Run all Microtasks: Select the oldest Microtask from the Microtask Queue. Run it until the Call Stack is empty. Repeat until the Microtask Queue is empty.
    4. \n
  4. Rerender the UI: Rerender the UI. Then, return to step 2. (This step only applies to browsers, not NodeJS).
    5. \n
\n

Let's model the Event Loop with some JavaScript psuedocode:

\n
while (EventLoop.waitForTask()) {\n  const taskQueue = EventLoop.selectTaskQueue();\n  if (taskQueue.hasNextTask()) {\n    taskQueue.processNextTask();\n  }\n\n  const microtaskQueue = EventLoop.microTaskQueue;\n  while (microtaskQueue.hasNextMicrotask()) {\n    microtaskQueue.processNextMicrotask();\n  }\n\n  rerender();\n}\n
"},{"url":"/docs/docs/sitemap/","relativePath":"docs/docs/sitemap.md","relativeDir":"docs/docs","base":"sitemap.md","name":"sitemap","frontmatter":{"title":"Sitemap","weight":0,"excerpt":"Sitemap","seo":{"title":"Sitemap","description":"Sitemap","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

204. 🖥️privacy-policy🌍

\n

205. 🖥️readme🌍

\n

206. 🏆showcase🏆

\n

207. 🏠Home🏠

\n
\n
\n

0. 🖥️blog/300-react-questions🌍

\n

1. 🖥️blog/awesome-graphql🌍

\n

2. 🖥️blog/big-o-complexity🌍

\n

3. 🖥️blog/blog-archive🌍

\n

4. 🖥️blog/blogwcomments🌍

\n

5. 🖥️blog/data-structures🌍

\n

6. 🖥️blog/flow-control-in-python🌍

\n

7. 🖥️blog/functions-in-python🌍

\n

8. 🖥️blog/git-gateway🌍

\n

9. 🖥️blog/interview-questions-js🌍

\n

10. 🖥️blog/netlify-cms🌍

\n

11. 🖥️blog/platform-docs🌍

\n

12. 🖥️blog/python-for-js-dev🌍

\n

13. 🖥️blog/python-resources🌍

\n

14. 🖥️blog/web-dev-trends🌍

\n

15. 🖥️blog/web-scraping🌍

\n

16. 🖥️blog🌍

\n
\n
\n

DOCS:

\n

17. 📖docs/about/README🌍

\n

18. 📖docs/about/eng-portfolio🌍

\n

19. 📖docs/about/intrests🌍

\n

20. 📖docs/about/job-search🌍

\n

21. 📖docs/about/resume🌍

\n

22. 📖docs/about🌍

\n

23. 📖docs/articles/basic-web-dev🌍

\n

24. 📖docs/articles/buffers🌍

\n

25. 📖docs/articles/dev-dep🌍

\n

26. 📖docs/articles/event-loop🌍

\n

27. 📖docs/articles/fs-module🌍

\n

28. 📖docs/articles/how-search-engines-work🌍

\n

29. 📖docs/articles/how-the-web-works🌍

\n

30. 📖docs/articles/http🌍

\n

31. 📖docs/articles/install🌍

\n

32. 📖docs/articles/intro🌍

\n

33. 📖docs/articles/modules🌍

\n

34. 📖docs/articles/nextjs🌍

\n

35. 📖docs/articles/node-api-express🌍

\n

36. 📖docs/articles/node-cli-args🌍

\n

37. 📖docs/articles/node-common-modules🌍

\n

38. 📖docs/articles/node-env-variables🌍

\n

39. 📖docs/articles/node-js-language🌍

\n

40. 📖docs/articles/node-package-manager🌍

\n

41. 📖docs/articles/node-repl🌍

\n

42. 📖docs/articles/node-run-cli🌍

\n

43. 📖docs/articles/nodejs🌍

\n

44. 📖docs/articles/nodevsbrowser🌍

\n

45. 📖docs/articles/npm🌍

\n

46. 📖docs/articles/npx🌍

\n

47. 📖docs/articles/os-module🌍

\n

48. 📖docs/articles/reading-files🌍

\n

49. 📖docs/articles/semantic-html🌍

\n

50. 📖docs/articles/semantic🌍

\n

51. 📖docs/articles/the-uniform-resource-locator-(url)🌍

\n

52. 📖docs/articles/understanding-firebase🌍

\n

53. 📖docs/articles/v8🌍

\n

54. 📖docs/articles/web-standards-checklist🌍

\n

55. 📖docs/articles/webdev-tools🌍

\n

56. 📖docs/articles/writing-files🌍

\n

57. 📖docs/articles🌍

\n

58. 📖docs/audio/audio-feature-extraction🌍

\n

59. 📖docs/audio/audio🌍

\n

60. 📖docs/audio/dfft🌍

\n

61. 📖docs/audio/discrete-fft🌍

\n

62. 📖docs/audio/dtw-python-explained🌍

\n

63. 📖docs/audio/dynamic-time-warping🌍

\n

64. 📖docs/audio/web-audio-api🌍

\n

65. 📖docs/audio🌍

\n

66. 📖docs/career/dev-interview🌍

\n

67. 📖docs/career/interview-dos-n-donts🌍

\n

68. 📖docs/career/job-boards🌍

\n

69. 📖docs/career🌍

\n

71. 📖docs/community/bookmarks🌍

\n

72. 📖docs/community/video-chat🌍

\n

73. 📖docs/community🌍

\n

74. 📖docs/content/algo🌍

\n

75. 📖docs/content/archive🌍

\n

76. 📖docs/content/gatsby-Queries-Mutations🌍

\n

77. 📖docs/content/history-api🌍

\n

78. 📖docs/content/main-projects🌍

\n

79. 📖docs/content/trouble-shooting🌍

\n

80. 📖docs/content🌍

\n

81. 📖docs/data-structures🌍

\n

82. 📖docs/docs/appendix🌍

\n

83. 📖docs/docs/art-of-command-line🌍

\n

84. 📖docs/docs/bash🌍

\n

85. 📖docs/docs/content🌍

\n

86. 📖docs/docs/css🌍

\n

87. 📖docs/docs/data-structures-docs🌍

\n

88. 📖docs/docs/es-6-features🌍

\n

89. 📖docs/docs/git-reference🌍

\n

90. 📖docs/docs/git-repos🌍

\n

91. 📖docs/docs/html-spec🌍

\n

92. 📖docs/docs/markdown🌍

\n

93. 📖docs/docs/no-whiteboarding🌍

\n

94. 📖docs/docs/node-docs-complete🌍

\n

95. 📖docs/docs/node-docs-full🌍

\n

96. 📖docs/docs/regex-in-js🌍

\n

97. 📖docs/docs/sitemap🌍

\n

98. 📖docs/docs🌍

\n

99. 📖docs/faq/contact🌍

\n

100. 📖docs/faq/plug-ins🌍

\n

101. 📖docs/faq🌍

\n

102. 📖docs/gists🌍

\n

103. 📖docs/interact/callstack-visual🌍

\n

104. 📖docs/interact/clock🌍

\n

105. 📖docs/interact/jupyter-notebooks🌍

\n

106. 📖docs/interact/other-sites🌍

\n

107. 📖docs/interact/video-chat🌍

\n

108. 📖docs/interact🌍

\n

109. 📖docs/interview/job-search-nav🌍

\n

110. 📖docs/interview/review-concepts🌍

\n

111. 📖docs/interview🌍

\n

112. 📖docs/javascript/arrow-functions🌍

\n

113. 📖docs/javascript/asyncjs🌍

\n

114. 📖docs/javascript/await-keyword🌍

\n

115. 📖docs/javascript/bigo🌍

\n

116. 📖docs/javascript/clean-code🌍

\n

117. 📖docs/javascript/constructor-functions🌍

\n

118. 📖docs/javascript/for-loops🌍

\n

119. 📖docs/javascript/promises🌍

\n

120. 📖docs/javascript/review🌍

\n

121. 📖docs/javascript/this-is-about-this🌍

\n

122. 📖docs/javascript🌍

\n

123. 📖docs/leetcode🌍

\n

124. 📖docs/privacy-policy🌍

\n

125. 📖docs/projects/embeded-websites🌍

\n

126. 📖docs/projects/list-of-projects🌍

\n

127. 📖docs/projects/mini-projects2🌍

\n

128. 📖docs/projects/mini-projects🌍

\n

129. 📖docs/projects/my-websites🌍

\n

130. 📖docs/projects🌍

\n

131. 📖docs/python/at-length🌍

\n

132. 📖docs/python/cheat-sheet🌍

\n

133. 📖docs/python/comprehensive-guide🌍

\n

134. 📖docs/python/examples🌍

\n

135. 📖docs/python/flow-control🌍

\n

136. 📖docs/python/functions🌍

\n

137. 📖docs/python/google-sheets-api🌍

\n

138. 📖docs/python/intro-for-js-devs🌍

\n

139. 📖docs/python/python-ds🌍

\n

140. 📖docs/python/snippets🌍

\n

141. 📖docs/python🌍

\n

142. 📖docs/quick-reference/Emmet🌍

\n

143. 📖docs/quick-reference/all-emojis🌍

\n

144. 📖docs/quick-reference/create-react-app🌍

\n

145. 📖docs/quick-reference/git-bash🌍

\n

146. 📖docs/quick-reference/git-tricks🌍

\n

147. 📖docs/quick-reference/google-firebase🌍

\n

148. 📖docs/quick-reference/heroku-error-codes🌍

\n

149. 📖docs/quick-reference/installation🌍

\n

150. 📖docs/quick-reference/markdown-dropdowns🌍

\n

151. 📖docs/quick-reference/minifiction🌍

\n

152. 📖docs/quick-reference/new-repo-instructions🌍

\n

153. 📖docs/quick-reference/psql-setup🌍

\n

154. 📖docs/quick-reference/pull-request-rubric🌍

\n

155. 📖docs/quick-reference/quick-links🌍

\n

156. 📖docs/quick-reference/topRepos🌍

\n

157. 📖docs/quick-reference/understanding-path🌍

\n

158. 📖docs/quick-reference/vscode-themes🌍

\n

159. 📖docs/quick-reference🌍

\n

160. 📖docs/react/ajax-n-apis🌍

\n

161. 📖docs/react/cheatsheet🌍

\n

162. 📖docs/react/createReactApp🌍

\n

163. 📖docs/react/demo🌍

\n

164. 📖docs/react/dont-use-index-as-keys🌍

\n

165. 📖docs/react/jsx🌍

\n

166. 📖docs/react/react-docs🌍

\n

167. 📖docs/react/react-in-depth🌍

\n

168. 📖docs/react/react2🌍

\n

169. 📖docs/react/render-elements🌍

\n

170. 📖docs/react🌍

\n

171. 📖docs/reference/awesome-lists🌍

\n

172. 📖docs/reference/awesome-nodejs🌍

\n

173. 📖docs/reference/awesome-static🌍

\n

174. 📖docs/reference/bash-commands🌍

\n

175. 📖docs/reference/bookmarks🌍

\n

176. 📖docs/reference/embed-the-web🌍

\n

177. 📖docs/reference/github-search🌍

\n

178. 📖docs/reference/google-cloud🌍

\n

179. 📖docs/reference/how-2-reinstall-npm🌍

\n

180. 📖docs/reference/how-to-kill-a-process🌍

\n

181. 📖docs/reference/installing-node🌍

\n

182. 📖docs/reference/intro-to-nodejs🌍

\n

183. 📖docs/reference/markdown-styleguide🌍

\n

184. 📖docs/reference/notes-template🌍

\n

185. 📖docs/reference/psql🌍

\n

186. 📖docs/reference/resources🌍

\n

187. 📖docs/reference/vscode🌍

\n

188. 📖docs/reference/web-api's🌍

\n

189. 📖docs/reference🌍

\n

190. 📖docs/search🌍

\n

191. 📖docs/sitemap🌍

\n

192. 📖docs/tips/array-methods🌍

\n

193. 📖docs/tips/insert-into-array🌍

\n

194. 📖docs/tips/sorting-strings🌍

\n

195. 📖docs/tips🌍

\n

196. 📖docs/tools/Archive🌍

\n

197. 📖docs/tools/data-structures🌍

\n

198. 📖docs/tools/dev-utilities🌍

\n

199. 📖docs/tools/markdown-html🌍

\n

200. 📖docs/tools🌍

\n

201. 📖docs/tutorials/enviorment-setup🌍

\n

202. 📖docs/tutorials🌍

\n

203. 🖥️docs🌍

"},{"url":"/docs/interact/clock/","relativePath":"docs/interact/clock.md","relativeDir":"docs/interact","base":"clock.md","name":"clock","frontmatter":{"title":"Clock","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"
\n

World Clock(Click To See Localized Time)

\n
\n"},{"url":"/docs/interact/","relativePath":"docs/interact/index.md","relativeDir":"docs/interact","base":"index.md","name":"index","frontmatter":{"title":"Interactive","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Interactive Examples","description":"here is content the user can interact with","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"\n\n\n\n\n"},{"url":"/docs/interact/other-sites/","relativePath":"docs/interact/other-sites.md","relativeDir":"docs/interact","base":"other-sites.md","name":"other-sites","frontmatter":{"title":"Other Websites","weight":0,"seo":{"title":"Typography","description":"This is the typography page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Typography","keyName":"property"},{"name":"og:description","value":"This is the typography page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Typography"},{"name":"twitter:description","value":"This is the typography page"}]},"template":"docs"},"html":"

Here are some other websites I have worked on since endeavoring to learn web development!

\n
\n

Alternate Blog

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

Games

\n
\n\n
\n
\n

Projects

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

Wordpress Site

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

Interview

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Speach Recognition api

\n
\n\n
\n
\n
\n
\n

The Algos Bgoonz Branch

\n
\n\n
\n
\n
\n
\n\n
"},{"url":"/docs/interview/job-search-nav/","relativePath":"docs/interview/job-search-nav.md","relativeDir":"docs/interview","base":"job-search-nav.md","name":"job-search-nav","frontmatter":{"title":"Job Search Navigation","weight":0,"excerpt":"These are some of my active projects.","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Navigation

\n\n

Resume

\n\n

Cover Letter

\n\n

Portfolio

\n\n

📈 Slack&Lambda

\n\n

Aux-Resources

\n\n

🖋 Interview Prep

\n\n

Tutorials

\n\n\n\n

Applications & Job Postings

\n\n

Job Boards

\n\n

Networking

\n\n

Lambda Guidance & Meetings

\n\n

MISC

\n\n

Notes

\n\n

🖨 Interviewing

\n\n

"},{"url":"/docs/interact/video-chat/","relativePath":"docs/interact/video-chat.md","relativeDir":"docs/interact","base":"video-chat.md","name":"video-chat","frontmatter":{"title":"Zumzi Video Conferencing (Mesibo API Backend)","weight":0,"excerpt":"Video chat front end app","seo":{"title":"Zumzi Video Conference:","description":"Features:\nGroup Voice and Video Call with unlimited members\nLive Streaming\nScreen Sharing\nSupports video streaming at various resolutions.","robots":[],"extra":[{"name":"og:description","value":"Features:\nGroup Voice and Video Call with unlimited members\nLive Streaming\nScreen Sharing\nSupports video streaming at various resolutions.","keyName":"property","relativeUrl":false},{"name":"og:title","value":"Zumzi Video Conference:","keyName":"property","relativeUrl":false},{"name":"og:image","value":"images/zumzi-video-chat-0aba1c15.png","keyName":"property","relativeUrl":true}],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Zumzi Video Conference:

\n\n

Zumzi Live Demo

\n

\"demo\"

\n

Features:

\n
    \n
  • Group Voice and Video Call with unlimited members
    • \n
  • Live Streaming
    • \n
  • Screen Sharing
    • \n
  • Fine control over all video & audio parameters and user permissions
    • \n
  • Supports video streaming at various resolutions: Standard, HD, FHD and 4K
    • \n
  • Group Chat
    • \n
  • One-to-One chat
    • \n
  • Invite Participants
    • \n
\n

There are two sub-folders:

\n
    \n
  • backend contains the source code for hosting the backend APIs for the app
    • \n
  • web contains the source code for the app which you can directly integrate into your website.
    • \n
\n

Apendix

\n
    \n
  • \n

    access token:

    \n
    \n

    An Access Token needs to be generated for every user who needs to access mesibo real-time messaging API. You can generate Access Token for every user of your application on demand and send it to the user. The user will then use this access token to initialize mesibo client-side API..

    \n
    \n
    • \n
\n
\n
    \n
  • \n

    api key

    \n
    \n

    API key is a unique alphanumeric identifier associated with your Mesibo account. You can view, change or regenerate the API key from the Mesibo console.

    \n
    \n
    • \n
\n
\n
    \n
  • \n

    Application Token

    \n
    \n

    is a unique alphanumeric identifier with one of your application. You can view and change the app token from the Mesibo Console.

    \n
    \n
    • \n
\n
\n
    \n
  • \n

    Mesibo container

    \n
    \n

    A container is a runtime instance of mesibo in-premises docker image.

    \n
    \n
    • \n
\n
\n
    \n
  • \n

    MAU

    \n
    \n

    MAU is counted when a user connects to mesibo server within monthly billing period. To further clarify, it will be only counted as one when a unique user connects to mesibo server multiple times within monthly billing period

    \n
    \n
    • \n
\n
\n
    \n
  • \n

    High-availability clusters

    \n
    \n

    (also known as HA clusters or fail-over clusters) are\ngroups of computers that support server applications that can be reliably utilized with a minimum amount of down-time

    \n
    \n
    • \n
\n
\n
    \n
  • \n

    namespace

    \n
    \n

    in mesibo is refer to a mesibo feature that isolates users and groups of an application from another application. Users can only interact with users and groups of the same application that are part of the same namespace. Namespaces are an important part of Mesibo's isolation model

    \n
    \n
    • \n
\n
\n
    \n
  • \n

    node

    \n
    \n

    A [node]is a physical or virtual machine running an instance of the mesibo.

    \n
    \n
    • \n
\n
\n
    \n
  • \n

    On premises deployment

    \n
    \n

    Mesibo On-premises deploment allows you to run Mesibo in your own data center or cloud.

    \n
    \n
    • \n
\n
\n
    \n
  • \n

    1-1 Communication

    \n
    \n

    Communication is between two parties; for example, a chat or a call

    \n
    \n
    • \n
\n
\n
    \n
  • \n

    Peer-to-peer\n(P2P)

    \n
    \n

    It is a distributed application architecture that partitions tasks or workloads between peers. Peers are equally privileged, equipotent participants in the application.They are said to form a peer-to-peer network of nodes.

    \n
    \n
    • \n
\n
\n

\"zzumzi\"

\n
[.](.)<br>\n├── [./backend](./backend)\n│ ├── [./backend/activation.php](./backend/activation.php)\n│ ├── [./backend/api_functions.php](./backend/api_functions.php)\n│ ├── [./backend/api.php](./backend/api.php)\n│ ├── [./backend/captcha.php](./backend/captcha.php)\n│ ├── [./backend/config.php](./backend/config.php)\n│ ├── [./backend/consts.php](./backend/consts.php)\n│ ├── [./backend/db.sql](./backend/db.sql)\n│ ├── [./backend/errorhandler.php](./backend/errorhandler.php)\n│ ├── [./backend/httpheaders.php](./backend/httpheaders.php)\n│ ├── [./backend/image.php](./backend/image.php)\n│ ├── [./backend/json.php](./backend/json.php)\n│ ├── [./backend/mesiboapi.php](./backend/mesiboapi.php)\n│ ├── [./backend/mesibohelper.php](./backend/mesibohelper.php)\n│ ├── [./backend/mysqldb.php](./backend/mysqldb.php)\n│ ├── [./backend/mysql-wrapper.php](./backend/mysql-wrapper.php)\n│ ├── [./backend/README.md](./backend/README.md)\n│ ├── [./backend/upload.php](./backend/upload.php)\n│ └── [./backend/utility.php](./backend/utility.php)\n├── [./glossary_files](./glossary_files)\n│ ├── [./glossary_files/559862854355634.js](./glossary_files/559862854355634.js)\n│ ├── [./glossary_files/analytics.js](./glossary_files/analytics.js)\n│ ├── [./glossary_files/archive.js](./glossary_files/archive.js)\n│ ├── [./glossary_files/bootstrap.min.css](./glossary_files/bootstrap.min.css)\n│ ├── [./glossary_files/bootstrap.min.js](./glossary_files/bootstrap.min.js)\n│ ├── [./glossary_files/buttons.js](./glossary_files/buttons.js)\n│ ├── [./glossary_files/collections_tocs.js](./glossary_files/collections_tocs.js)\n│ ├── [./glossary_files/css.css](./glossary_files/css.css)\n│ ├── [./glossary_files/docs.js](./glossary_files/docs.js)\n│ ├── [./glossary_files/fbevents.js](./glossary_files/fbevents.js)\n│ ├── [./glossary_files/font-awesome.min.css](./glossary_files/font-awesome.min.css)\n│ ├── [./glossary_files/github.css](./glossary_files/github.css)\n│ ├── [./glossary_files/glossary.js](./glossary_files/glossary.js)\n│ ├── [./glossary_files/jquery.js](./glossary_files/jquery.js)\n│ ├── [./glossary_files/menu.js](./glossary_files/menu.js)\n│ ├── [./glossary_files/mesibo-logo.svg](./glossary_files/mesibo-logo.svg)\n│ ├── [./glossary_files/mesibo-logo-white.png](./glossary_files/mesibo-logo-white.png)\n│ ├── [./glossary_files/metadata.js](./glossary_files/metadata.js)\n│ ├── [./glossary_files/perldoc.css](./glossary_files/perldoc.css)\n│ ├── [./glossary_files/stickyfill.min.js](./glossary_files/stickyfill.min.js)\n│ ├── [./glossary_files/style.css](./glossary_files/style.css)\n│ └── [./glossary_files/toc.js](./glossary_files/toc.js)<br>\n├── [./glossary.html](./glossary.html)<br>\n├── [./index.html](./index.html)<br>\n├── [./package-lock.json](./package-lock.json)<br>\n├── [./README.md](./README.md)<br>\n├── [./scrap.md](./scrap.md)<br>\n├── [./tree.md](./tree.md)<br>\n├── [./TREE.md](./TREE.md)<br>\n├── [./web](./web)\n│ ├── [./web/assets](./web/assets)\n│ │ ├── [./web/assets/audio](./web/assets/audio)\n│ │ │ ├── [./web/assets/audio/join.mp3](./web/assets/audio/join.mp3)\n│ │ │ └── [./web/assets/audio/join.ogg](./web/assets/audio/join.ogg)\n│ │ ├── [./web/assets/fonts](./web/assets/fonts)\n│ │ │ └── [./web/assets/fonts/font-awesome](./web/assets/fonts/font-awesome)\n│ │ │ └── [./web/assets/fonts/font-awesome/css](./web/assets/fonts/font-awesome/css)\n│ │ │ └── [./web/assets/fonts/font-awesome/css/font-awesome.css](./web/assets/fonts/font-awesome/css/font-awesome.css)\n│ │ ├── [./web/assets/images](./web/assets/images)\n│ │ │ ├── [./web/assets/images/blank-white.jpg](./web/assets/images/blank-white.jpg)\n│ │ │ ├── [./web/assets/images/file](./web/assets/images/file)\n│ │ │ │ └── [./web/assets/images/file/default_file_icon.jpg](./web/assets/images/file/default_file_icon.jpg)\n│ │ │ ├── [./web/assets/images/mesibo-logo-m.png](./web/assets/images/mesibo-logo-m.png)\n│ │ │ ├── [./web/assets/images/mesibo-logo.png](./web/assets/images/mesibo-logo.png)\n│ │ │ ├── [./web/assets/images/profile](./web/assets/images/profile)\n│ │ │ │ ├── [./web/assets/images/profile/default-group-icon.jpg](./web/assets/images/profile/default-group-icon.jpg)\n│ │ │ │ └── [./web/assets/images/profile/default-profile-icon.jpg](./web/assets/images/profile/default-profile-icon.jpg)\n│ │ │ └── [./web/assets/images/social.png](./web/assets/images/social.png)\n│ │ └── [./web/assets/scripts](./web/assets/scripts)\n│ │ └── [./web/assets/scripts/platform.js](./web/assets/scripts/platform.js)\n│ ├── [./web/index.html](./web/index.html)\n│ ├── [./web/listing.md](./web/listing.md)\n│ ├── [./web/login.html](./web/login.html)\n│ ├── [./web/mesibo](./web/mesibo)\n│ │ ├── [./web/mesibo/app.js](./web/mesibo/app.js)\n│ │ ├── [./web/mesibo/calls.js](./web/mesibo/calls.js)\n│ │ ├── [./web/mesibo/config.js](./web/mesibo/config.js)\n│ │ ├── [./web/mesibo/files.js](./web/mesibo/files.js)\n│ │ ├── [./web/mesibo/notify.js](./web/mesibo/notify.js)\n│ │ └── [./web/mesibo/utils.js](./web/mesibo/utils.js)\n│ ├── [./web/README.md](./web/README.md)\n│ ├── [./web/scripts](./web/scripts)\n│ │ ├── [./web/scripts/app-utils.js](./web/scripts/app-utils.js)\n│ │ ├── [./web/scripts/controller.js](./web/scripts/controller.js)\n│ │ └── [./web/scripts/login.js](./web/scripts/login.js)\n│ ├── [./web/styles](./web/styles)\n│ │ ├── [./web/styles/live.css](./web/styles/live.css)\n│ │ ├── [./web/styles/mesibolive.css](./web/styles/mesibolive.css)\n│ │ ├── [./web/styles/popup.css](./web/styles/popup.css)\n│ │ └── [./web/styles/popupdesign.css](./web/styles/popupdesign.css)\n│ └── [./web/vendor](./web/vendor)\n│ ├── [./web/vendor/bootstrap.min.css](./web/vendor/bootstrap.min.css)\n│ └── [./web/vendor/bootstrap.min.js](./web/vendor/bootstrap.min.js)<br>\n└── [./zumzi-video-chat.PNG](./zumzi-video-chat.PNG)<br>\n
\n

Messenger

\n

Edit config.js and provide the AUTH TOKEN & APP ID.

\n

You can obtain the AUTH TOKEN and APP ID for a user from Mesibo Console.

\n

Refer to the Get-Started Guide to learn about the basics of mesibo.

\n

To open messenger demo launch messenger.html

\n
const MESIBO_ACCESS_TOKEN = 'xxxxxxx';\nconst MESIBO_APP_ID = 'xxxx';\nconst MESIBO_API_URL = 'https://app.mesibo.com/api.php';\n
\n

If you are hosting mesibo-backend on your own server, you need to change the API URL to point to your server.

\n

Messenger Login

\n

You can synchronize contacts, by using a phone number to login to mesibo messenger-javascript.

\n

To login to the mesibo messenger web app, in the login screen provide the phone number along with country code starting with + For Example, If your country code is 91 and your ten-digit phone number is XXXXXXXXXX, enter your phone number as +91XXXXXXXXXX (with out any spaces or special characters in between)

\n

Use OTP 123456 to login. Mesibo will generate and store MESIBO_ACCESS_TOKEN if login is successful.

\n

Please note that you only need to login once as for later sessions your token will be stored in local storage.

\n

If you DO NOT wish to login with your phone number, make sure you configure a valid MESIBO_ACCESS_TOKEN in config.js and set isLoginEnabled = false

\n

Synchronizing contacts on Messenger

\n

To synchronize contacts set isContactSync = true

\n

For the best experience using the messenger app, make sure you have some contacts who are using Mesibo Messenger. These contacts will be displayed as a list of available users to whom you can send messages or make calls. Optionally, you can also manually provide a list of phone numbers of contacts who are using mesibo in MESIBO_LOCAL_CONTACTS or by clicking on the Add Contact button.

\n

You can provide a list of local contacts that will be loaded as a list of available users. Set local contacts as follows in config.js

\n
var MESIBO_LOCAL_CONTACTS =[\n\n{\n        \"address\" : \"18885551001\",\n        \"groupid\" : 0,\n        \"picture\" : \"images/profile/default-profile-icon.jpg\",\n        \"name\"    : \"MesiboTest\",\n        \"status\": \"Let's Chat..\"\n},\n\n{\n        \"groupid\" : 104661,\n        \"picture\" : \"images/profile/default-group-icon.jpg\",\n        \"name\"    : \"Mesibo Group\",\n        \"members\" : \"1:123,456,789\"             //Members list. Add 1: to mark as admin\n},\n\n]\n
\n

Popup

\n

To launch popup demo you can configure the following for setting the displayed user avatar and destination user(to which all messages will be sent) in config.js and launch popup.html

\n
const POPUP_DISPLAY_NAME = 'xxxx';\nconst POPUP_DISPLAY_PICTURE = 'images/profile/default-profile-icon.jpg';\nconst POPUP_DESTINATION_USER = 'xxxx';\n
\n

FAQ & Troubleshooting

\n

Getting AUTHFAIL with getcontacts API

\n

This means the token you have provided in MESIBO_ACCESS_TOKEN is not generated or validated with your phone number which is required for synchronizing contacts.

\n

To generate a token by validating your phone number, make sure you have set isLoginEnabled = true. A login screen will then appear during app start, where you can enter your phone number(Example +91XXXXXXXXXX), get an OTP, and log in.

\n

If you do not wish to synchronize contacts, set isContactSync = false and provide a list of local contacts in MESIBO_LOCAL_CONTACTS.

\n

I do not wish to use phone login, what should I do?

\n

Set isLoginEnabled = false and make sure that you provide a valid MESIBO_ACCESS_TOKEN

\n

I do not want to synchronize with my phone contacts, how do I configure that?

\n

If you do not wish to synchronize contacts, set isContactSync = false and provide a list of local contacts in MESIBO_LOCAL_CONTACTS.

\n

Do I need to log in with my phone number every time I load the app?

\n

No the first time you log in with your phone number with a valid OTP the token will be stored in localStorage. In future loading of the app, the token will be loaded from local storage. Or if you have provided a valid MESIBO_ACCESS_TOKEN in config.js that will be loaded.

\n

Getting $scope.mesibo.X is not a function

\n

Ensure that you perform a hard reload so that you have the latest Mesibo Javascript API

\n

Install Mesibo Javascript SDK

\n

The easiest way to install Mesibo Javascript SDK is to include following in <HEAD> section of your HTML file:

\n
<script type=\"text/javascript\" src=\"https://api.mesibo.com/mesibo.js\"></script>\n
\n

You can also use async and defer attributes inside script tag if requires.

\n

Alternatively, you may also use DOM method to load the mesibo JS on demand when it is not possible to use the script tag.

\n
const script = document.createElement(\"script\");\nscript.src = \"https://api.mesibo.com/mesibo.js\";\ndocument.body.appendChild(script);\n
\n
\n

You must use a secure website (https) to use mesibo javascript. It may NOT work from http:// or file:// sites due to browser security restrictions.

\n
\n

Notes when using it for Calls and Conferencing

\n

Due to the browser security model, camera and microphone access require the following:

\n
    \n
  • You MUST use a secure URL (https://). The http:// or file:// URLs will NOT work.
    • \n
  • You MUST also use a valid certificate with recognized authority, the self-signed certificate will NOT work.
    • \n
\n

The browser will not grant the camera and microphone permissions unless your app meets the above requirements. If permissions are not granted, calls and conferencing will not work.

\n

These restrictions are by the browsers and NOT by the mesibo. Refer Security section in the Mozilla documentation for more information.

\n

That's All!

\n

You can now begin developing features with mesibo.

\n

javascript chat sdk, messaging sdk for javascript, javascript sdk for chat, install sdk through javascript

"},{"url":"/docs/javascript/arrow-functions/","relativePath":"docs/javascript/arrow-functions.md","relativeDir":"docs/javascript","base":"arrow-functions.md","name":"arrow-functions","frontmatter":{"title":"JS Fat Arrow Functions","weight":0,"excerpt":"JS Fat Arrow Functions","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

JS Fat Arrow Functions

\n

Classical JavaScript function syntax doesn't provide for any flexibility, be that a 1 statement function or an unfortunate multi-page function. Every time you need a function you have to type out the dreaded function () {}. More concise function syntax was one of the many reasons why CoffeeScript gained so much momentum back in the day. This is especially pronounced in the case of tiny callback functions. Lets look at a Promise chain:

\n
function getVerifiedToken(selector) {\n  return getUsers(selector)\n    .then(function (users) { return users[0]; })\n    .then(verifyUser)\n    .then(function (user, verifiedToken) { return verifiedToken; })\n    .catch(function (err) { log(err.stack); });\n}\n
\n

Above is more or less plausible piece of code written using classical JavaScript function syntax. Here is what the same code could look like rewritten using the arrow syntax:

\n
function getVerifiedToken(selector) {\n  return getUsers(selector)\n    .then(users => users[0])\n    .then(verifyUser)\n    .then((user, verifiedToken) => verifiedToken)\n    .catch(err => log(err.stack));\n}\n
\n

A few important things to notice here:

\n
    \n
  1. We've lost function and {} because all of our callback functions are one liners.
    2. \n
  2. We've lost () around the argument list when there's just one argument (rest arguments are an exception, eg (...args) => ...)
    3. \n
  3. We've lost the return keyword because when omitting {}, single line arrow functions perform an implicit return (these functions are often referred to as lambda functions in other languages).
    4. \n
\n

It's important to reinforce the last point. Implicit return only happens for single statement arrow functions. When arrow function is declared with {}, even if it's a single statement, implicit return does not happen:

\n
const getVerifiedToken = selector => {\n  return getUsers()\n    .then(users => users[0])\n    .then(verifyUser)\n    .then((user, verifiedToken) => verifiedToken)\n    .catch(err => log(err.stack));\n}\n
\n

Here's the really fun bit. Because our function has only one statement, we can still get rid of the {} and it will look almost exactly like CoffeeScript syntax:

\n
const getVerifiedToken = selector =>\n  getUsers()\n    .then(users => users[0])\n    .then(verifyUser)\n    .then((user, verifiedToken) => verifiedToken)\n    .catch(err => log(err.stack));\n
\n

Yep, the example above is completely valid ES2015 syntax (I was also surprised that it compiles fine). When we talk about single statement arrow functions, it doesn't mean the statement can't be spread out to multiple lines for better comprehension.

\n

There's one caveat, however, with omitting {} from arrow functions -- how do you return an empty object, eg {}?

\n
const emptyObject = () => {};\nemptyObject(); // ?\n
\n

Unfortunately there's no way to distinguish between empty block {} and an object {}. Because of that emptyObject() evaluates to undefined and {} interpreted as empty block. To return an empty object from fat arrow functions you have to surround it with brackets like so ({}):

\n
const emptyObject = () => ({});\nemptyObject(); // {}\n
\n

Here's all of the above together:

\n
function () { return 1; }\n() => { return 1; }\n() => 1\n\nfunction (a) { return a * 2; }\n(a) => { return a * 2; }\n(a) => a * 2\na => a * 2\n\nfunction (a, b) { return a * b; }\n(a, b) => { return a * b; }\n(a, b) => a * b\n\nfunction () { return arguments[0]; }\n(...args) => args[0]\n\n() => {} // undefined\n() => ({}) // {}\n
\n

Lexical this

\n

The story of clobbering this in JavaScript is a really old one. Each function in JavaScript defines its own this context, which is as easy to get around as it is annoying. The example below tries to display a clock that updates every second using jQuery:

\n
$('.current-time').each(function () {\n  setInterval(function () {\n    $(this).text(Date.now());\n  }, 1000);\n});\n
\n

When attempting to reference the DOM element this set by each in the setInterval callback, we unfortunately get a brand new this that belongs to the callback itself. A common way around this is to declare that or self variable:

\n
$('.current-time').each(function () {\n  var self = this;\n\n  setInterval(function () {\n    $(self).text(Date.now());\n  }, 1000);\n});\n
\n

The fat arrow functions allow you to solve this problem because they don't introduce their own this:

\n
$('.current-time').each(function () {\n  setInterval(() => $(this).text(Date.now()), 1000);\n});\n
\n

What about arguments?

\n

One of the caveats with arrow functions is that they also don't have their own arguments variable like regular functions:

\n
function log(msg) {\n  const print = () => console.log(arguments[0]);\n  print(`LOG: ${msg}`);\n}\n\nlog('hello'); // hello\n
\n

To reiterate, fat arrow functions don't have their own this and arguments. Having said that, you can still get all arguments passed into the arrow functions using rest parameters (also known as spread operator):

\n
function log(msg) {\n  const print = (...args) => console.log(args[0]);\n  print(`LOG: ${msg}`);\n}\n\nlog('hello'); // LOG: hello\n
\n

What about yield?

\n

Fat arrow functions can't be used as generators. That's it -- no exceptions, no caveats and no workarounds.

\n

Bottom Line

\n

Fat arrow functions are one of my favorite additions to JavaScript. It might be very tempting to just start using => instead of function everywhere. I've seen whole libraries written just using => and I don't think it's the right thing to do because of the special features that => introduces. I recommend using arrow functions only in places where you explicitly want to use the new features:

\n
    \n
  • Single statement functions that immediately return (lambdas)
    • \n
  • Functions that need to work with parent scope this
    • \n
"},{"url":"/docs/javascript/bigo/","relativePath":"docs/javascript/bigo.md","relativeDir":"docs/javascript","base":"bigo.md","name":"bigo","frontmatter":{"title":"A Very Quick Guide To Calculating Big O Computational Complexity","weight":0,"excerpt":"A quick guide to big O","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

A Very Quick Guide To Calculating Big O Computational Complexity\n\n

\n

Big O: big picture, broad strokes, not details

\n

\n

\n

\n

\n

For a more complete guide… checkout :

\n
    \n
  • way we analyze how efficient algorithms are without getting too mired in details
    • \n
  • can model how much time any function will take given n inputs
    • \n
  • interested in order of magnitude of number of the exact figure
    • \n
  • O absorbs all fluff and n = biggest term
    • \n
  • Big O of 3x^2 +x + 1 = O(n^2)
    • \n
\n

Time Complexity

\n

no loops or exit & return = O(1)

\n

0 nested loops = O(n)\n1 nested loops = O(n^2)\n2 nested loops = O(n^3)\n3 nested loops = O(n^4)

\n

recursive: as you add more terms, increase in time as you add input diminishes\nrecursion: when you define something in terms of itself, a function that calls itself

\n
    \n
  • used because of ability to maintain state at diffferent levels of recursion
    • \n
  • inherently carries large footprint
    • \n
  • every time function called, you add call to stack
    • \n
\n

iterative: use loops instead of recursion (preferred)\n- favor readability over performance

\n

O(n log(n)) & O(log(n)): dividing/halving

\n
    \n
  • if code employs recursion/divide-and-conquer strategy
    • \n
  • what power do i need to power my base to get n
    • \n
\n

Time Definitions

\n
    \n
  • constant: does not scale with input, will take same amount of time
    • \n
  • for any input size n, constant time performs same number of operations every time
    • \n
  • logarithmic: increases number of operations it performs as logarithmic function of input size n
    • \n
  • function log n grows very slowly, so as n gets longer, number of operations the algorithm needs to perform doesn't increase very much
    • \n
  • halving
    • \n
  • linear: increases number of operations it performs as linear function of input size n
    • \n
  • number of additional operations needed to perform grows in direct proportion to increase in input size n
    • \n
  • log-linear: increases number of operations it performs as log-linear function of input size n
    • \n
  • looking over every element and doing work on each one
    • \n
  • quadratic: increases number of operations it performs as quadratic function of input size n
    • \n
  • exponential: increases number of operations it performs as exponential function of input size n
    • \n
  • number of nested loops increases as function of n
    • \n
  • polynomial: as size of input increases, runtime/space used will grow at a faster rate
    • \n
  • factorial: as size of input increases, runtime/space used will grow astronomically even with relatively small inputs
    • \n
  • rate of growth: how fast a function grows with input size
    • \n
\n

Space Complexity

\n
    \n
  • How does the space usage scale/change as input gets very large?
    • \n
  • What auxiliary space does your algorithm use or is it in place (constant)?
    • \n
  • Runtime stack space counts as part of space complexity unless told otherwise.
    • \n
\n

Data Structures & Algos In JS

\n
"},{"url":"/docs/javascript/await-keyword/","relativePath":"docs/javascript/await-keyword.md","relativeDir":"docs/javascript","base":"await-keyword.md","name":"await-keyword","frontmatter":{"title":"Await ","weight":0,"excerpt":"Async and await","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

await

\n

The await operator is used to wait for a Promise. It can only be used inside an async function within regular JavaScript code; however it can be used on its own with JavaScript modules.

\n

Syntax

\n
[rv] = await expression;\n
\n

expression
\nA Promise or any value to wait for.

\n

rv
\nReturns the fulfilled value of the promise, or the value itself if it's not a Promise.

\n

Description

\n

The await expression causes async function execution to pause until a Promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise.

\n

If the Promise is rejected, the await expression throws the rejected value.

\n

If the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise.

\n

An await splits execution flow, allowing the caller of the async function to resume execution. After the await defers the continuation of the async function, execution of subsequent statements ensues. If this await is the last expression executed by its function, execution continues by returning to the function's caller a pending Promise for completion of the await's function and resuming execution of that caller.

\n

Examples

\n

Awaiting a promise to be fulfilled

\n

If a Promise is passed to an await expression, it waits for the Promise to be fulfilled and returns the fulfilled value.

\n
function resolveAfter2Seconds(x) {\n  return new Promise(resolve => {\n    setTimeout(() => {\n      resolve(x);\n    }, 2000);\n  });\n}\n\nasync function f1() {\n  var x = await resolveAfter2Seconds(10);\n  console.log(x); // 10\n}\n\nf1();\n
\n

Thenable objects

\n

Thenable objects will be fulfilled just the same.

\n
async function f2() {\n  const thenable = {\n    then: function(resolve, _reject) {\n      resolve('resolved!')\n    }\n  };\n  console.log(await thenable); // resolved!\n}\n\nf2();\n
\n

Conversion to promise

\n

If the value is not a Promise, it converts the value to a resolved Promise, and waits for it.

\n
async function f3() {\n  var y = await 20;\n  console.log(y); // 20\n}\n\nf3();\n
\n

Promise rejection

\n

If the Promise is rejected, the rejected value is thrown.

\n
async function f4() {\n  try {\n    var z = await Promise.reject(30);\n  } catch(e) {\n    console.error(e); // 30\n  }\n}\n\nf4();\n
\n

Handling rejected promises

\n

Handle rejected Promise without try block.

\n
var response = await promisedFunction().catch((err) => { console.error(err); });\n// response will be undefined if the promise is rejected\n
\n

Top level await

\n

You can use the await keyword on its own (outside of an async function) within a JavaScript module. This means modules, with child modules that use await, wait for the child module to execute before they themselves run. All while not blocking other child modules from loading.

\n

Here is an example of a simple module using the Fetch API and specifying await within the export statement. Any modules that include this will wait for the fetch to resolve before running any code.

\n
// fetch request\nconst colors = fetch('../data/colors.json')\n  .then(response => response.json());\n\nexport default await colors;\n
"},{"url":"/docs/javascript/asyncjs/","relativePath":"docs/javascript/asyncjs.md","relativeDir":"docs/javascript","base":"asyncjs.md","name":"asyncjs","frontmatter":{"title":"Asynchronous-JS","weight":0,"excerpt":"Asynchronous-JS","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Asynchronous JavaScript

\n

Async functions:

\n

Let's start with the async keyword. It can be placed before a function, like this:

\n
async function f() {\n    return 1;\n}\n
\n

The word \"async\" before a function means one simple thing: a function always returns a promise. Other values are wrapped in a resolved promise automatically.

\n

For instance, this function returns a resolved promise with the result of 1; let's test it:

\n
async function f() {\n    return 1;\n}\n\nf().then(alert); // 1\n
\n

...We could explicitly return a promise, which would be the same:

\n
async function f() {\n    return Promise.resolve(1);\n}\n\nf().then(alert); // 1\n
\n

So, async ensures that the function returns a promise, and wraps non-promises in it. Simple enough, right? But not only that. There's another keyword, await, that works only inside async functions, and it's pretty cool.

\n

Await

\n

The syntax:

\n
// works only inside async functions\nlet value = await promise;\n
\n

The keyword await makes JavaScript wait until that promise settles and returns its result.

\n

Here's an example with a promise that resolves in 1 second:

\n
async function f() {\n    let promise = new Promise((resolve, reject) => {\n        setTimeout(() => resolve('done!'), 1000);\n    });\n\n    let result = await promise; // wait until the promise resolves (*)\n\n    alert(result); // \"done!\"\n}\n\nf();\n
\n

The function execution \"pauses\" at the line (*) and resumes when the promise settles, with result becoming its result. So the code above shows \"done!\" in one second.

\n

Let's emphasize: await literally suspends the function execution until the promise settles, and then resumes it with the promise result. That doesn't cost any CPU resources, because the JavaScript engine can do other jobs in the meantime: execute other scripts, handle events, etc.

\n

It's just a more elegant syntax of getting the promise result than promise.then. And, it's easier to read and write.

\n

Can't use await in regular functions

\n

If we try to use await in a non-async function, there would be a syntax error:

\n
function f() {\n    let promise = Promise.resolve(1);\n    let result = await promise; // Syntax error\n}\n
\n

We may get this error if we forget to put async before a function. As stated earlier, await only works inside an async function.

\n

Let's take the showAvatar() example from the chapter Promises chaining and rewrite it using async/await:

\n
    \n
  1. We'll need to replace .then calls with await.
    2. \n
  2. Also we should make the function async for them to work.
    3. \n
\n
async function showAvatar() {\n    // read our JSON\n    let response = await fetch('/article/promise-chaining/user.json');\n    let user = await response.json();\n\n    // read github user\n    let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);\n    let githubUser = await githubResponse.json();\n\n    // show the avatar\n    let img = document.createElement('img');\n    img.src = githubUser.avatar_url;\n    img.className = 'promise-avatar-example';\n    document.body.append(img);\n\n    // wait 3 seconds\n    await new Promise((resolve, reject) => setTimeout(resolve, 3000));\n\n    img.remove();\n\n    return githubUser;\n}\n\nshowAvatar();\n
\n

Pretty clean and easy to read, right? Much better than before.

\n
await` won't work in the top-level code\n\nPeople who are just starting to use `await` tend to forget the fact that we can't use `await` in top-level code. For example, this will not work:\n\n\n```js\n// syntax error in top-level code\nlet response = await fetch('/article/promise-chaining/user.json');\nlet user = await response.json();\n
\n

But we can wrap it into an anonymous async function, like this:

\n
(async () => {\n  let response = await fetch('/article/promise-chaining/user.json');\n  let user = await response.json();\n  ...\n})();\n
\n

P.S. New feature: starting from V8 engine version 8.9+, top-level await works in modules.

\n
await` accepts \"thenables\"\n\nLike `promise.then`, `await` allows us to use thenable objects (those with a callable `then` method). The idea is that a third-party object may not be a promise, but promise-compatible: if it supports `.then`, that's enough to use it with `await`.\n\nHere's a demo `Thenable` class; the `await` below accepts its instances:\n\n\n```js\nclass Thenable {\n  constructor(num) {\n    this.num = num;\n  }\n  then(resolve, reject) {\n    alert(resolve);\n    // resolve with this.num*2 after 1000ms\n    setTimeout(() => resolve(this.num * 2), 1000); // (*)\n  }\n}\n\nasync function f() {\n  // waits for 1 second, then result becomes 2\n  let result = await new Thenable(1);\n  alert(result);\n}\n\nf();\n
\n

If await gets a non-promise object with .then, it calls that method providing the built-in functions resolve and reject as arguments (just as it does for a regular Promise executor). Then await waits until one of them is called (in the example above it happens in the line (*)) and then proceeds with the result.

\n

Async class methods

\n

To declare an async class method, just prepend it with async:

\n
class Waiter {\n    async wait() {\n        return await Promise.resolve(1);\n    }\n}\n\nnew Waiter().wait().then(alert); // 1 (this is the same as (result => alert(result)))\n
\n

The meaning is the same: it ensures that the returned value is a promise and enables await.

\n

[Error handling]

\n

If a promise resolves normally, then await promise returns the result. But in the case of a rejection, it throws the error, just as if there were a throw statement at that line.

\n

This code:

\n
async function f() {\n    await Promise.reject(new Error('Whoops!'));\n}\n
\n

...is the same as this:

\n
async function f() {\n    throw new Error('Whoops!');\n}\n
\n

In real situations, the promise may take some time before it rejects. In that case there will be a delay before await throws an error.

\n

We can catch that error using try..catch, the same way as a regular throw:

\n
async function f() {\n    try {\n        let response = await fetch('http://no-such-url');\n    } catch (err) {\n        alert(err); // TypeError: failed to fetch\n    }\n}\n\nf();\n
\n

In the case of an error, the control jumps to the catch block. We can also wrap multiple lines:

\n
async function f() {\n    try {\n        let response = await fetch('/no-user-here');\n        let user = await response.json();\n    } catch (err) {\n        // catches errors both in fetch and response.json\n        alert(err);\n    }\n}\n\nf();\n
\n

If we don't have try..catch, then the promise generated by the call of the async function f() becomes rejected. We can append .catch to handle it:

\n
async function f() {\n    let response = await fetch('http://no-such-url');\n}\n\n// f() becomes a rejected promise\nf().catch(alert); // TypeError: failed to fetch // (*)\n
\n

If we forget to add .catch there, then we get an unhandled promise error (viewable in the console). We can catch such errors using a global unhandledrejection event handler as described in the chapter Error handling with promises.

\n
async/await` and `promise.then/catch\n
\n

When we use async/await, we rarely need .then, because await handles the waiting for us. And we can use a regular try..catch instead of .catch. That's usually (but not always) more convenient.

\n

But at the top level of the code, when we're outside any async function, we're syntactically unable to use await, so it's a normal practice to add .then/catch to handle the final result or falling-through error, like in the line (*) of the example above.

\n
async/await` works well with `Promise.all\n
\n

When we need to wait for multiple promises, we can wrap them in Promise.all and then await:

\n
// wait for the array of results\nlet results = await Promise.all([\n  fetch(url1),\n  fetch(url2),\n  ...\n]);\n
\n

In the case of an error, it propagates as usual, from the failed promise to Promise.all, and then becomes an exception that we can catch using try..catch around the call.

\n

Summary

\n

The async keyword before a function has two effects:

\n
    \n
  1. Makes it always return a promise.
    2. \n
  2. Allows await to be used in it.
    3. \n
\n

The await keyword before a promise makes JavaScript wait until that promise settles, and then:

\n
    \n
  1. If it's an error, the exception is generated --- same as if throw error were called at that very place.
    2. \n
  2. Otherwise, it returns the result.
    3. \n
\n

Together they provide a great framework to write asynchronous code that is easy to both read and write.

\n

With async/await we rarely need to write promise.then/catch, but we still shouldn't forget that they are based on promises, because sometimes (e.g. in the outermost scope) we have to use these methods. Also Promise.all is nice when we are waiting for many tasks simultaneously.

\n

Cleaning up your asynchronous code with await

\n

REPLs have traditionally had a difficult time allowing you to interact with asynchronous code since they encourage a coding style where you evaluate expressions and use those results in the next field. But if you are using promises or callbacks, this breaks down because these results exist only in the callback, not the next line:

\n

In RunKit, you can use top-level await to get the same behavior of synchronous code.

\n

Now we can treat this code as synchronous, despite the fact that the code is still executing asynchronously.

\n

Let's look how. It helps to have a more complex example, where we need to do a few asynchronous operations in sequence. You can see how await, promises and callbacks achieve the same results, but the await style works better in a REPL:

\n
    \n
  • await
    • \n
  • promises
    • \n
  • callbacks
    • \n
\n

Here, we use await on lines 4 and 8, and the results from each request remain in scope.

\n

Remember, await expects a promise so you can either write your own or use one of the many libraries that natively supports promises, and npm is full of packages that add promise support to existing libraries. Here are a few of our favorites:

\n\n

Further Reading

\n"},{"url":"/docs/interview/review-concepts/","relativePath":"docs/interview/review-concepts.md","relativeDir":"docs/interview","base":"review-concepts.md","name":"review-concepts","frontmatter":{"title":"Review Of Concepts","weight":0,"excerpt":"Basic Concepts review","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"
\n

Review-Of-Previous-Concepts

\n

Review of Concepts

\n

Running JS Locally Concepts

\n
    \n
  • \n

    Match the commands ls, cd, pwd to their descriptions

    \n
      \n
    • ls lists contents of current directory
      • \n
    • cd changes current directory
      • \n
    • cd .. takes you up one level
      • \n
    • cd alone takes you back home
      • \n
    • pwd returns current directory
      • \n
    \n
    • \n
  • Given a folder structure diagram, a list of 'cd (path)' commands and target files, match the paths to the target files.
    • \n
  • Use VSCode to create a folder. Within the folder create a .js file containing console.log('hello new world'); and save it.
    • \n
  • Use node to execute a JavaScript file in the terminal
    • \n
\n

Plain Old JS Object Lesson Concepts

\n
    \n
  • \n

    Label variables as either Primitive vs. Reference

    \n
      \n
    • primitives: strings, booleans, numbers, null and undefined
      • \n
    • primitives are immutable
      • \n
    • refereces: objects (including arrays)
      • \n
    • references are mutable
      • \n
    \n
    • \n
  • \n

    Identify when to use . vs [] when accessing values of an object

    \n
      \n
    • dot syntax object.key
      • \n
    • easier to read
      • \n
    • easier to write
      • \n
    • cannot use variables as keys
      • \n
    • keys cannot begin with a number
      • \n
    • bracket notation object[\"key]
      • \n
    • allows variables as keys
      • \n
    • strings that start with numbers can be use as keys
      • \n
    \n
    • \n
  • \n

    Write an object literal with a variable key using interpolation

    \n
      \n
    • put it in brackets to access the value of the variable, rather than just make the value that string
      • \n
    \n
    • \n
\n
let a = \"b\";\nlet obj = { a: \"letter_a\", [a]: \"letter b\" };\n
\n
    \n
  • \n

    Use the obj[key] !== undefined pattern to check if a given variable that contains a key exists in an object

    \n
      \n
    • can also use (key in object) syntax interchangeably (returns a boolean)
      • \n
    \n
    • \n
  • \n

    Utilize Object.keys and Object.values in a function

    \n
      \n
    • Object.keys(obj) returns an array of all the keys in obj
      • \n
    • Object.values(obj) returns an array of the values in obj
      • \n
    \n
    • \n
  • Iterate through an object using a for in loop
    • \n
\n
let printValues = function (obj) {\n  for (let key in obj) {\n    let value = obj[key];\n    console.log(value);\n  }\n};\n
\n
    \n
  • \n

    Define a function that utilizes ...rest syntax to accept an arbitrary number of arguments

    \n
      \n
    • ...rest syntax will store all additional arguments in an array
      • \n
    • array will be empty if there are no additional arguments
      • \n
    \n
    • \n
\n
let myFunction = function (str, ...strs) {\n  console.log(\"The first string is \" + str);\n  console.log(\"The rest of the strings are:\");\n  strs.forEach(function (str) {\n    console.log(str);\n  });\n};\n
\n

\n
    \n
  • Use ...spread syntax for Object literals and Array literals
    • \n
\n
let arr1 = [\"a\", \"b\", \"c\"];\nlet longer = [...arr1, \"d\", \"e\"]; // [\"a\", \"b\", \"c\", \"d\", \"e\"]\n// without spread syntax, this would give you a nested array\nlet withoutRest = [arr1, \"d\", \"e\"]; // [[\"a\", \"b\", \"c\"], \"d\", \"e\"]\n
\n
    \n
  • Destructure an array to reference specific elements
    • \n
\n
    let array = \\[35,9\\];\n    let \\[firstEl, secondEl\\] = array;\n    console.log\\(firstEl\\); // =&gt; 35\n    console.log\\(secondEl\\); // =&gt; 9\n> can also destructure using ... syntax let array = \\[35,9,14\\]; let \\[head, ...tail\\] = array; console.log\\(head\\); // =&gt; 35 console.log\\(tail\\); // =&gt; \\[9, 14\\]\n\n\n\n```js\n\n\n- Destructure an object to reference specific values\n   - if you want to use variable names that don't match the keys, you can use aliasing\n      - `let { oldkeyname: newkeyname } = object`\n   - rule of thumb—only destructure values from objects that are two levels deep\n\n```js\n\nlet obj = {\n   name: \"Wilfred\",\n   appearance: [\"short\", \"mustache\"],\n   favorites: {\n      color: \"mauve\",\n      food: \"spaghetti squash\",\n      number: 3\n   }\n}\n//  with variable names that match keys\nlet { name, appearance } = obj;\nconsole.log(name); // \"Wilfred\"\nconsole.log(appearance); // [\"short\", \"mustache\"]\n> with new variable names (aliasing)\nlet {name: myName, appearance: myAppearance} = obj;\nconsole.log(myName); // \"Wilfred\"\nconsole.log(myAppearance); // [\"short\", \"mustache\"]\n> in a function call\nlet sayHello = function({name}) {\nconsole.log(\"Hello, \" + name); // \"Hello Wilfred\"\n}\n//  nested objects + aliasing\nlet { favorites: {color, food: vegetable} } = obj;\nconsole.log(color, vegetable); //=> mauve spaghetti squash\n
\n
    \n
  • Write a function that accepts a array as an argument and returns an object representing the count of each character in the array
    • \n
\n
//\nlet elementCounts = function (array) {\n  let obj = {};\n  array.forEach(function (el) {\n    if (el in obj) obj[el] += 1;\n    else obj[el] = 1;\n  });\n  return obj;\n};\nconsole.log(elementCounts([\"e\", \"f\", \"g\", \"f\"])); // => Object {e: 1, f: 2, g: 1}\n
\n

Callbacks Lesson Concepts

\n
    \n
  • \n

    Given multiple plausible reasons, identify why functions are called \"First Class Objects\" in JavaScript.

    \n
      \n
    • they can be stored in variables, passed as arguments to other functions, and serve as return value for a function
      • \n
    • supports same basic operations as other types (strings, bools, numbers)
      • \n
    • higher-order functions take functions as arguments or return functions as values
      • \n
    \n
    • \n
  • \n

    Given a code snippet containing an anonymous callback, a named callback, and multiple console.logs, predict what will be printed

    \n
      \n
    • what is this referring to?
      • \n
    \n
    • \n
  • Write a function that takes in a value and two callbacks. The function should return the result of the callback that is greater.
    • \n
\n
let greaterCB = function (val, callback1, callback2) {\n  if (callback1(val) > callback2(val)) {\n    return callback1(val);\n  }\n  return callback2(val);\n};\nlet greaterCB = function (val, callback1, callback2) {\n  if (callback1(val) > callback2(val)) {\n    return callback1(val);\n  }\n  return callback2(val);\n};\n
\n
\n

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));

\n
\n
- Write a function, myMap, that takes in an array and a callback as arguments. The function should mimic the behavior of `Array#map`.\n\n```js\n\nlet myMap = function(array, callback) {\n   let newArr = [];\n   for (let i = 0; i < array.length; i ++) {\n      mapped = callback(array[i], i, array);\n      newArr.push(mapped);\n   }\n   return newArr;\n}\nconsole.log( myMap([16,25,36], Math.sqrt)); // => [4, 5, 6];\nlet myMapArrow = (array, callback) => {\n   let newArr = [];\n   array.forEach( (ele, ind, array) => {\n      newArr.push(callback(ele, ind, array));\n   })\n   return newArr;\n}\nconsole.log(myMapArrow([16,25,36], Math.sqrt)); // => [4, 5, 6];\n
\n
    \n
  • Write a function, myFilter, that takes in an array and a callback as arguments. The function should mimic the behavior of Array#filter.
    • \n
\n
let myFilter = function (array, callback) {\n  let filtered = [];\n  for (let i = 0; i < array.length; i++) {\n    if (callback(array[i])) {\n      filtered.push(array[i], i, array);\n    }\n  }\n};\n
\n
    \n
  • Write a function, myEvery, that takes in an array and a callback as arguments. The function should mimic the behavior of Array#every.
    • \n
\n
let myEvery = function (array, callback) {\n  for (let i = 0; i < array.length; i++) {\n    if (!callback(array[i], i, array)) {\n      return false;\n    }\n  }\n  return true;\n};\n// with arrow function syntax\nlet myEvery = (array, callback) => {\n  for (let i = 0; i < array.length; i++) {\n    if (!callback(array[i])) {\n      return false;\n    }\n  }\n  return true;\n};\n
\n

Scope Lesson Concepts

\n
    \n
  • \n

    Identify the difference between const, let, and var declarations

    \n
      \n
    • const - cannot reassign variable, scoped to block
      • \n
    • let - can reassign variable, scoped to block
      • \n
    • var - outdated, may or may not be reassigned, scoped to function. can be not just reassigned, but also redeclared!
      • \n
    • a variable will always evaluate to the value it contains regardless of how it was declared
      • \n
    \n
    • \n
  • \n

    Explain the difference between const, let, and var declarations

    \n
      \n
    • var is function scoped—so if you declare it anywhere in a function, the declaration (but not assignment) is \"hoisted\"
      • \n
    • so it will exist in memory as \"undefined\" which is bad and unpredictable
      • \n
    • 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!
      • \n
    • 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
      • \n
    • block-scoped variables allow new variables with the same name in new scopes
      • \n
    • 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
      • \n
    • if you do not use var or let or const when initializing, it will be declared as global—THIS IS BAD
      • \n
    • 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
      • \n
    \n
    • \n
  • \n

    Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining

    \n
      \n
    • scope of a program means the set of variables that are available for use within the program
      • \n
    • global scope is represented by the window object in the browser and the global object in Node.js
      • \n
    • global variables are available everywhere, and so increase the risk of name collisions
      • \n
    • local scope is the set of variables available for use within the function
      • \n
    • when we enter a function, we enter a new scope
      • \n
    • 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)
      • \n
    • for blocks (denoted by curly braces {}, as in conditionals or for loops), variables can be block scoped
      • \n
    • inner scope does not have access to variables in the outer scope
      • \n
    • scope chaining—if a given variable is not found in immediate scope, javascript will search all accessible outer scopes until variable is found
      • \n
    • so an inner scope can access outer scope variables
      • \n
    • but an outer scope can never access inner scope variables
      • \n
    \n
    • \n
  • Define an arrow function
    • \n
\n
    let arrowFunction = \\(param1, param2\\) =&gt; {\n    let sum = param1 + param2;\n    return sum;\n    }\n//  with 1 param you can remove parens around parameters let arrowFunction = param =&gt; { param += 1; return param; }\n//  if your return statement is one line, you can use implied return let arrowFunction = param =&gt; param + 1;\n> you don't have to assign to variable, can be anonymous // if you never need to use it again param =&gt; param + 1;\n
\n
    \n
  • \n

    Given an arrow function, deduce the value of this without executing the code

    \n
      \n
    • arrow functions are automatically bound to the context they were declared in
      • \n
    • unlike regular function which use the context they are invoked in (unless they have been bound using Function#bind)
      • \n
    • 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
      • \n
    • so you can't use an arrow function to define a method directly
      • \n
    \n
    • \n
\n
        let obj = {\n        name: \"my object\",\n        unboundFunc: function \\(\\) {\n        return this.name;\n        // this function will be able to be called on different objects\n        },\n###\nboundToGlobal: \\(\\) =&gt; { 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 },\n\n```js\n\nmakeFuncBoundToObj: function () {\n    return () => {\n        return this.name;\n    }\n    // this function will return a function that will be bound\n    // to the object where we call the outer method\n    // because the arrow syntax is nested inside one of this\n    // function's methods, it cannot be rebound\n},\nmakeUnboundFunc: function () {\n    return function () {\n        return this.name;\n    }\n    //this function will return a function that will still be unbound\n},\nimmediatelyInvokedFunc: function () {\n    return this.name;\n}(), // this property will be set to the return value of this anonymous function,\n> which is invoked during the object definition;\n> basically, it's a way to check the context inside of an object, at this moment\ninnerObj: {\n    name: \"inner object\",\n    innerArrowFunc: () =>  {\n        return this.name;\n    } // the context inside a nested object is not the parent, it's still\n    // the global object. entering an object definition doesn't change the context\n},\nlet otherObj = { name: \"my other object\" }\n//  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\"\n> 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\n> 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\"\n> 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\"\n> 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\n> 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\n
\n

}

\n
- Implement a closure and explain how the closure effects scope\n   - a closure is \"the combination of a function and the lexical environment within which that function was declared\"\n      - alternatively, \"when an inner function uses or changes variables in an outer function\"\n   - 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\"\n   - closure keeps reference to all variables **even if the outer function has returned**\n      - each function has a private mutable state that cannot be accessed externally\n      - 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\n      - 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?\n      - 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\n\n```js\n\nfunction createCounter() {\n   // this function starts a counter at 0, then returns a\n   // new function that can access and change that counter\n   //\n   // each new counter you create will have a single internal\n   // state, that can be changed only by calling the function.\n   // you can't access that state from outside of the function,\n   // even though the count variable in question is initialized\n   // by the outer function, and it remains accessible to the\n   // inner function after the outer function returns.\n   let count = 0;\n   return function() {\n      count ++;\n      return count;\n   }\n}\nlet counter = createCounter();\nconsole.log(counter()); //=> 1\nconsole.log(counter()); //=> 2\n> so the closure here comes into play because\n> an inner function is accessing and changing\n> a variable from an outer function\n> the closure is the combination of the counter\n> function and the all the variables that existed\n> in the scope that it was declared in. because\n> inner blocks/functions have access to outer\n> scopes, that includes the scope of the outer\n> function.\n> so counter variable is a closure, in that\n> it contains the inner count value that was\n> initialized by the outer createCounter() function\n> count has been captured or closed over\n> this state is private, so if i run createCounter again\n> i get a totally separate count that doesn't interact\n> with the previous one and each of the new functions\n> will have their own internal state based on the\n> initial declaration in the now-closed outer function\nlet counter2 = createCounter();\nconsole.log(counter2()); // => 1\n> if i set a new function equal to my existing counter\n> the internal state is shared with the new function\nlet counter3 = counter2;\nconsole.log(counter3());\n
\n
    \n
  • \n

    Define a method that references this on an object literal

    \n
      \n
    • when we use this in a method it refers to the object that the method is invoked on
      • \n
    • it will let you access other pieces of information from within that object, or even other methods
      • \n
    • method style invocation - object.method(args) (e.g. built in examples like Array#push, or String#toUpperCase)
      • \n
    • context is set every time we invoke a function
      • \n
    • function style invocation sets the context to the global object no matter what
      • \n
    • being inside an object does not make the context that object! you still have to use method-style invocation
      • \n
    \n
    • \n
  • \n

    Utilize the built in Function#bind on a callback to maintain the context of this

    \n
      \n
    • 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
      • \n
    \n
    • \n
\n
text\n    let cat = {\n    purr: function () {\n    console.log(\"meow\");\n    },\n    purrMore: function () {\n    this.purr();\n    },\n    };\n    let sayMeow = cat.purrMore; console.log(sayMeow()); // TypeError: this.purr is not a function\n    // we can use the built in Function.bind to ensure our context, our this, // is the cat object let boundCat = sayMeow.bind(cat);\n    boundCat(); // prints \"meow\"\n
\n
\\`\\`\n
\n

\n

\n
   - `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\n      - 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\n- Given a code snippet, identify what `this` refers to\n   - important to recognize the difference between scope and context\n      - 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)\n      - context refers to the value of the `this` keyword\n   - the keyword `this` exists in every function and it evaluates to the object that is currently invoking that function\n   - so the context is fairly straightforward when we talk about methods being called on specific objects\n   - 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.\n\n```js\n\nlet dog = {\n   name: \"Bowser\",\n   changeName: function () {\n      this.name = \"Layla\";\n  },\n};\n> note this is **not invoked** - we are assigning the function itself\nlet change = dog.changeName;\nconsole.log(change()); // undefined\n> our dog still has the same name\nconsole.log(dog); // { name: 'Bowser', changeName: [Function: changeName] }\n//  instead of changing the dog we changed the global name!!!\nconsole.log(this); // Object [global] {etc, etc, etc,  name: 'Layla'}\n
\n
    \n
  • \n

    CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP!

    \n
      \n
    • could throw an error if it expects this to have some other method or whatever that doesn't exist
      • \n
    • you could also overwrite values or assign values to exist in a space where they should not exist
      • \n
    \n
    • \n
  • 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
    • \n
\n
text\n    let cat = {\n    purr: function () {\n    console.log(\"meow\");\n    },\n    purrMore: function () {\n    this.purr();\n    },\n    };\n    global.setTimeout(cat.purrMore, 5000); // 5 seconds later: TypeError: this.purr is not a function\n
\n

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

\n

\n

let sayMeow = cat.purrMore; console.log(sayMeow()); // TypeError: this.purr is not a function

\n
\n

we can use the built in Function.bind to ensure our context, our this, // is the cat object let boundCat = sayMeow.bind(cat);\nboundCat(); // prints \"meow\"

\n
\n
text\n   - `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\n      - 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\n- Given a code snippet, identify what `this` refers to\n   - important to recognize the difference between scope and context\n      - 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)\n      - context refers to the value of the `this` keyword\n   - the keyword `this` exists in every function and it evaluates to the object that is currently invoking that function\n   - so the context is fairly straightforward when we talk about methods being called on specific objects\n   - 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.\n\n```js\n\nlet dog = {\n   name: \"Bowser\",\n   changeName: function () {\n      this.name = \"Layla\";\n  },\n};\n> note this is **not invoked** - we are assigning the function itself\nlet change = dog.changeName;\nconsole.log(change()); // undefined\n> our dog still has the same name\nconsole.log(dog); // { name: 'Bowser', changeName: [Function: changeName] }\n//  instead of changing the dog we changed the global name!!!\nconsole.log(this); // Object [global] {etc, etc, etc,  name: 'Layla'}\n
\n
    \n
  • \n

    CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP!

    \n
      \n
    • could throw an error if it expects this to have some other method or whatever that doesn't exist
      • \n
    • you could also overwrite values or assign values to exist in a space where they should not exist
      • \n
    \n
    • \n
  • 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
    • \n
\n
    let cat = {\n    purr: function \\(\\) {\n    console.log\\(\"meow\"\\);\n    },\n    purrMore: function \\(\\) {\n    this.purr\\(\\);\n    },\n    };\nglobal.setTimeout\\(cat.purrMore, 5000\\); // 5 seconds later: TypeError: this.purr is not a function\n
\n
    \n
  • 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
    • \n
\n

POJOs

\n

1. Label variables as either Primitive vs. Reference

\n

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.

\n
    \n
  • Boolean - Primitive
    • \n
  • Null - Primitive
    • \n
  • Undefined - Primitive
    • \n
  • Number - Primitive
    • \n
  • String - Primitive
    • \n
  • Array - Reference
    • \n
  • Object - Reference
    • \n
  • Function - Reference
    • \n
\n

2. Identify when to use . vs [] when accessing values of an object

\n
let obj = { one: 1, two: 2 };\n> Choose the square brackets property accessor when the property name is determined at\n> runtime, or if the property name is not a valid identifier\nlet myKey = 'one';\nconsole.log(obj[myKey]);\n> Choose the dot property accessor when the property name is known ahead of time.\nconsole.log(obj.two);\n
\n

3. Write an object literal with a variable key using interpolation

\n
let keyName = 'two';\n> If the key is not known, you can use an alternative `[]` syntax for\n> object initialization only\nlet obj2 = { [keyName]: 2 };\nconsole.log(obj2);\n
\n

4. Use the obj[key] !== undefined pattern to check if a given variable that contains a key exists in an object

\n
function doesKeyExist(obj, key) {\n  // obj[key] !== undefined\n  // or:\n  return key in obj;\n}\nlet course = { bootcamp: \"Lambda\", course: \"Bootcamp Prep\" };\nconsole.log(doesKeyExist(course, \"course\")); // => true\nconsole.log(doesKeyExist(course, \"name\")); // => false\n
\n

5. Utilize Object.keys and Object.values in a function

\n
function printKeys(object) {\n  return Object.keys(object);\n}\nfunction printValues(object) {\n  return Object.values(object);\n}\nconsole.log(printKeys({ dog: \"Strelka\", dog2: \"Belka\" }));\nconsole.log(printValues({ dog: \"Strelka\", dog2: \"Belka\" }));\n
\n

6. Iterate through an object using a for in loop

\n
let player = { name: \"Sergey\", skill: \"hockey\" };\nfor (let key in player) {\n  console.log(key, player[key]);\n}\nconsole.log(Object.entries(player));\n
\n

7. Define a function that utilizes ...rest syntax to accept an arbitrary number of arguments

\n
function restSum(...otherNums) {\n  let sum = 0;\n  console.log(otherNums);\n  otherNums.forEach(function (num) {\n    sum += num;\n  });\n  return sum;\n}\nconsole.log(restSum(3, 5, 6)); // => 14\nconsole.log(restSum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // => 45\nconsole.log(restSum(0)); // => 0\n
\n

8. Use ...spread syntax for Object literals and Array literals

\n
let numArray = [1, 2, 3];\nlet moreNums = [...numArray, 4, 5, 6];\nconsole.log(moreNums);\nlet shoe = { color: \"red\", size: 10 };\nlet newShoe = { ...shoe, brand: \"Nike\", size: 12 };\nconsole.log(newShoe);\nnewShoe.color = \"black\";\nconsole.log(newShoe);\nconsole.log(shoe);\n
\n

9. Destructure an array to reference specific elements

\n
let arr = [\"one\", \"two\", \"three\"];\nlet [first] = arr;\nconsole.log(first);\n
\n

10. Destructure an object to reference specific values

\n
let me = {\n  name: \"Ian\",\n  instruments: [\"bass\", \"synth\", \"guitar\"],\n  siblings: {\n    brothers: [\"Alistair\"],\n    sisters: [\"Meghan\"],\n  },\n};\nlet {\n  name,\n  instruments: musical_instruments,\n  siblings: { sisters },\n} = me;\nconsole.log(name);\nconsole.log(musical_instruments);\nconsole.log(sisters);\n
\n

11. Write a function that accepts a string as an argument and returns an object representing the count of each character in the array

\n
function charCount(inputString) {\n  let res = inputString.split(\"\").reduce(function (accum, el) {\n    if (el in accum) {\n      accum[el] = accum[el] + 1;\n    } else {\n      accum[el] = 1;\n    }\n    return accum;\n  }, {});\n  return res;\n}\nconsole.log(charCount(\"aaabbbeebbcdkjfalksdfjlkasdfasdfiiidkkdingds\"));\n
\n

\n

Review of Concepts

\n

1. Identify the difference between const, let, and var declarations

\n

2. Explain the difference between const, let, and var declarations

\n
var a = \"a\";\n
\n
    \n
  • var is the historical keyword used for variable declaration.
    • \n
  • var declares variables in function scope, or global scope if not inside a function.
    • \n
  • We consider var to be deprecated and it is never used in this course.
    • \n
\n
let b = \"b\";\n
\n
    \n
  • let is the keyword we use most often for variable declaration.
    • \n
  • let declares variables in block scope.
    • \n
  • variables declared with let are re-assignable.
    • \n
\n
const c = \"c\";\n
\n
    \n
  • const is a specialized form of let that can only be used to initialize a variable.
    • \n
  • Except when it is declared, you cannot assign to a const variable.
    • \n
  • const scopes variables the same way that let does.
    • \n
\n

3. Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining

\n

Consider this run function, inside which foo and bar have function scope. i and baz are scoped to the block expression.

\n
> function and block scope in this example\nfunction run() {\n    var foo = 'Foo';\n    let bar = 'Bar';\n    console.log(foo, bar);\n    {\n        console.log(foo);\n        let baz = 'Bazz';\n        console.log(baz);\n    }\n    console.log(baz); // ReferenceError\n}\nrun();\n
\n

Notice that referencing baz from outside it's block results in JavaScript throwing a ReferenceError.\nConsider this run function, inside of which foo has function scope.

\n
function run() {\n  console.log(foo); // undefined\n  var foo = \"Foo\";\n  console.log(foo); // Foo\n}\nrun();\n
\n

Consider this func1 function and it's nested scopes.

\n
> global scope\nfunction func1(arg1) {\n    // func1 scope\n    return function func2(arg2) {\n        // func2 scope\n        return function func3(arg3) {\n            // func3 scope\n            console.log(arg1, arg2, arg3);\n        };\n    };\n}\n
\n

6. Implement a closure and explain how the closure effects scope

\n
const adder = (arg1) => {\n  return (arg2) => {\n    return arg1 + arg2;\n  };\n};\nconst func2 = adder(2);\nconst result = func2(2);\nconsole.log(result); // => 4;\n
\n

4. Define an arrow function

\n
const returnValue = (val) => val;\n
\n

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.\nIdentically, we could write

\n
const returnValue = (val) => {\n  return val;\n};\n
\n

5. Given an arrow function, deduce the value of this without executing the code

\n
function fDAdder(arr) {\n  console.log(this);\n  return arr.reduce((acc, ele) => {\n    return acc + ele;\n  });\n}\nfDAdder([1, 2, 4, 6]);\n
\n

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).

\n
const adder = (arr) => {\n  console.log(this);\n  arr.reduce((acc, ele) => (sum += ele));\n};\nadder([1, 2, 4, 6]);\n
\n

In this example, we use a fat arrow style function. Note that when we declare a funciton like this this becomes

\n

7. Define a method that references this on an object literal

\n
const pokemon = {\n  firstname: \"Pika\",\n  lastname: \"Chu\",\n  getPokeName: function () {\n    const fullname = `${this.firstname} ${this.lastname}`;\n    return fullname;\n  },\n};\nconsole.log(pokemon.getPokeName());\n
\n

8. Utilize the built in Function#bind on a callback to maintain the context of this

\n
const pokemon = {\n  firstname: \"Pika\",\n  lastname: \"Chu\",\n  getPokeName: function () {\n    const fullname = `${this.firstname} ${this.lastname}`;\n    return fullname;\n  },\n};\nconst logPokemon = pokemon.getPokename.bind(pokemon);\nlogPokemon(\"sushi\", \"algorithms\"); // Pika Chu loves sushi and algorithms\n
\n

9. Given a code snippet, identify what this refers to

\n
function Person(name) {\n  // this.name = name;\n  // let that = this;\n  setTimeout(function () {\n    // console.log(this); // => Window\n    // console.log(that); // => [Function] => Person\n    // this.sayName(); // => no method error\n    that.sayName();\n  }, 1000);\n}\nPerson.prototype.sayName = function () {\n  console.log(this.name);\n};\nconst jane = new Person(\"Jane\");\n
"},{"url":"/docs/interview/","relativePath":"docs/interview/index.md","relativeDir":"docs/interview","base":"index.md","name":"index","frontmatter":{"title":"Interviewing","weight":0,"excerpt":"These are some of my active projects.","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Navigation

\n\n

Resume

\n\n

Cover Letter

\n\n

Portfolio

\n\n

📈 Slack&Lambda

\n\n

Aux-Resources

\n\n

🖋 Interview Prep

\n\n

Tutorials

\n\n\n\n

Applications & Job Postings

\n\n

Job Boards

\n\n

Networking

\n\n

Lambda Guidance & Meetings

\n\n

MISC

\n\n

Notes

\n\n

🖨 Interviewing

\n\n

Programming Languages/Frameworks/Platforms

\n

Android

\n\n

AngularJS

\n\n

Angular

\n\n

BackboneJS

\n\n

C++

\n\n

C

\n\n

C

\n\n

.NET

\n\n

Clojure

\n\n

CSS

\n\n

Cucumber

\n\n

Django

\n\n

Docker

\n\n

Elastic

\n\n

EmberJS

\n\n

Erlang

\n\n

Golang

\n\n

GraphQl

\n\n

HTML

\n\n

Ionic

\n\n

iOS

\n\n

Java

\n\n

JavaScript

\n\n

jQuery

\n\n

Front-end build tools

\n\n

KnockoutJS

\n\n

Less

\n\n

Lisp

\n\n

NodeJS

\n\n

Objective-C

\n\n

PHP

\n\n

Python

\n\n

Ruby on Rails

\n\n

ReactJS

\n\n

Ruby

\n\n

Rust

\n\n

Sass

\n\n

Scala

\n\n

SharePoint

\n\n

Shell

\n\n

Spark

\n\n

Swift

\n\n

Vue.js

\n\n

WordPress

\n\n

TypeScript

\n\n

Database technologies

\n

Cassandra

\n\n

Microsoft Access

\n\n

MongoDB

\n\n

MySQL

\n\n

Neo4j

\n\n

Oracle

\n\n

Postgres

\n\n

SQL

\n\n

SQLite

\n\n

Caching technologies

\n

Memcached

\n\n

Redis

\n\n

OS

\n

Linux

\n\n

Windows

\n\n

DevOps

\n\n

Algorithms

\n\n

Blockchain

\n\n

Coding exercises

\n\n

Comprehensive lists

\n\n

Design Patterns

\n\n

Data structures

\n\n

Networks

\n\n

Security

\n\n

Data Science

\n"},{"url":"/docs/javascript/for-loops/","relativePath":"docs/javascript/for-loops.md","relativeDir":"docs/javascript","base":"for-loops.md","name":"for-loops","frontmatter":{"title":"lorem-ipsum","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Etiam facilisis lacus nec pretium lobortis. Praesent dapibus justo non efficitur efficitur. Nullam viverra justo arcu, eget egestas tortor pretium id. Sed imperdiet mattis eleifend. Vivamus suscipit et neque imperdiet venenatis.

\n
\n

Vestibulum ullamcorper risus auctor eleifend consequat.

\n
\n

\"Placeholder

\n

In malesuada sed urna eget vehicula. Donec fermentum tortor sit amet nisl elementum fringilla. Pellentesque dapibus suscipit faucibus. Nullam malesuada sed urna quis rutrum. Donec facilisis lorem id maximus mattis. Vestibulum quis elit magna. Vestibulum accumsan blandit consequat. Phasellus quis posuere quam.

\n

Vivamus mollis in tellus ac ullamcorper. Vestibulum sit amet bibendum ipsum, vitae rutrum ex. Nullam cursus, urna et dapibus aliquam, urna leo euismod metus, eu luctus justo mi eget mauris. Proin felis leo, volutpat et purus in, lacinia luctus eros. Pellentesque lobortis massa scelerisque lorem ullamcorper, sit amet elementum nulla scelerisque. In volutpat efficitur nulla, aliquam ornare lectus ultricies ac. Mauris sagittis ornare dictum. Nulla vel felis ut purus fermentum pretium. Sed id lectus ac diam aliquet venenatis. Etiam ac auctor enim. Nunc velit mauris, viverra vel orci ut, egestas rhoncus diam. Morbi scelerisque nibh tellus, vel varius urna malesuada sed. Etiam ultricies sem consequat, posuere urna non, maximus ex. Mauris gravida diam sed augue condimentum pulvinar vel ac dui. Integer vel convallis justo.

"},{"url":"/docs/javascript/cs-basics-in-js/","relativePath":"docs/javascript/cs-basics-in-js.md","relativeDir":"docs/javascript","base":"cs-basics-in-js.md","name":"cs-basics-in-js","frontmatter":{"title":"CS Basics","weight":0,"excerpt":"Computer Science Basics In JavaScript","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Anonymous Closures

\n

This is the fundamental construct that makes it all possible, and really is the single best feature of JavaScript. We’ll simply create an anonymous function, and execute it immediately. All of the code that runs inside the function lives in a closure, which provides privacy and state throughout the lifetime of our application.

\n
(function () {\n    // ... all vars and functions are in this scope only\n    // still maintains access to all globals\n})();\n
\n

Notice the () around the anonymous function. This is required by the language, since statements that begin with the token function are always considered to be function declarations. Including () creates a function expression instead.

\n

Global Import

\n

JavaScript has a feature known as implied globals. Whenever a name is used, the interpreter walks the scope chain backwards looking for a var statement for that name. If none is found, that variable is assumed to be global. If it’s used in an assignment, the global is created if it doesn’t already exist. This means that using or creating global variables in an anonymous closure is easy. Unfortunately, this leads to hard-to-manage code, as it’s not obvious (to humans) which variables are global in a given file.

\n
Luckily, our anonymous function provides an easy alternative. By passing globals as parameters to our anonymous function, we import them into our code, which is both clearer and faster than implied globals. Here’s an example:
\n
(function ($, YAHOO) {\n// now have access to globals jQuery (as $) and YAHOO in this code\n}(jQuery, YAHOO));\n
\n

Module Export

\n

Sometimes you don’t just want to use globals, but you want to declare them. We can easily do this by exporting them, using the anonymous function’s return value. Doing so will complete the basic module pattern, so here’s a complete example:

\n
let MODULE = (function () {\n    let my = {},\n        privateVariable = 1;\n\n    function privateMethod() {\n        // ...\n    }\n\n    my.moduleProperty = 1;\n    my.moduleMethod = function () {\n        // ...\n    };\n\n    return my;\n})();\n
\n

Notice that we’ve declared a global module named MODULE, with two public properties: a method named MODULE.moduleMethod and a variable named MODULE.moduleProperty. In addition, it maintains private internal state using the closure of the anonymous function. Also, we can easily import needed globals, using the pattern we learned above.

\n
## Advanced Patterns
\n

While the above is enough for many uses, we can take this pattern farther and create some very powerful, extensible constructs. Lets work through them one-by-one, continuing with our module named MODULE.

\n

Augmentation

\n

One limitation of the module pattern so far is that the entire module must be in one file. Anyone who has worked in a large code-base understands the value of splitting among multiple files. Luckily, we have a nice solution to augment modules. First, we import the module, then we add properties, then we export it. Here’s an example, augmenting our MODULE from above:

\n
let MODULE = (function (my) {\n    my.anotherMethod = function () {\n        // added method...\n    };\n\n    return my;\n})(MODULE);\n
\n

We use the var keyword again for consistency, even though it’s not necessary. After this code has run, our module will have gained a new public method named MODULE.anotherMethod. This augmentation file will also maintain its own private internal state and imports.

\n

Loose Augmentation

\n

While our example above requires our initial module creation to be first, and the augmentation to happen second, that isn’t always necessary. One of the best things a JavaScript application can do for performance is to load scripts asynchronously. We can create flexible multi-part modules that can load themselves in any order with loose augmentation. Each file should have the following structure:

\n
let MODULE = (function (my) {\n// add capabilities...\n\n###### return my;\n}(MODULE || {}));\n
\n

In this pattern, the var statement is always necessary. Note that the import will create the module if it does not already exist. This means you can use a tool like LABjs and load all of your module files in parallel, without needing to block.

\n

Tight Augmentation

\n

While loose augmentation is great, it does place some limitations on your module. Most importantly, you cannot override module properties safely. You also cannot use module properties from other files during initialization (but you can at run-time after intialization). Tight augmentation implies a set loading order, but allows overrides. Here is a simple example (augmenting our original MODULE):

\n
let MODULE = (function (my) {\n    let old_moduleMethod = my.moduleMethod;\n\n    my.moduleMethod = function () {\n        // method override, has access to old through old_moduleMethod...\n    };\n\n    return my;\n})(MODULE);\n
\n

Here we’ve overridden MODULE.moduleMethod, but maintain a reference to the original method, if needed.

\n

Cloning and Inheritance

\n
let MODULE_TWO = (function (old) {\n    let my = {},\n        key;\n\n    for (key in old) {\n        if (old.hasOwnProperty(key)) {\n            my[key] = old[key];\n        }\n    }\n\n    let super_moduleMethod = old.moduleMethod;\n    my.moduleMethod = function () {\n        // override method on the clone, access to super through super_moduleMethod\n    };\n\n    return my;\n})(MODULE);\n
\n

This pattern is perhaps the least flexible option. It does allow some neat compositions, but that comes at the expense of flexibility. As I’ve written it, properties which are objects or functions will not be duplicated, they will exist as one object with two references. Changing one will change the other. This could be fixed for objects with a recursive cloning process, but probably cannot be fixed for functions, except perhaps with eval. Nevertheless, I’ve included it for completeness.

\n

Cross-File Private State

\n

One severe limitation of splitting a module across multiple files is that each file maintains its own private state, and does not get access to the private state of the other files. This can be fixed. Here is an example of a loosely augmented module that will maintain private state across all augmentations:

\n
let MODULE = (function (my) {\n    let _private = (my._private = my._private || {}),\n        _seal = (my._seal =\n            my._seal ||\n            function () {\n                delete my._private;\n                delete my._seal;\n                delete my._unseal;\n            }),\n        _unseal = (my._unseal =\n            my._unseal ||\n            function () {\n                my._private = _private;\n                my._seal = _seal;\n                my._unseal = _unseal;\n            });\n\n    // permanent access to _private, _seal, and _unseal\n\n    return my;\n})(MODULE || {});\n
\n

Any file can set properties on their local variable _private, and it will be immediately available to the others. Once this module has loaded completely, the application should call MODULE._seal(), which will prevent external access to the internal _private. If this module were to be augmented again, further in the application’s lifetime, one of the internal methods, in any file, can call _unseal() before loading the new file, and call _seal() again after it has been executed. This pattern occurred to me today while I was at work, I have not seen this elsewhere. I think this is a very useful pattern, and would have been worth writing about all on its own.

\n

Sub-modules

\n

Our final advanced pattern is actually the simplest. There are many good cases for creating sub-modules. It is just like creating regular modules:

\n
MODULE.sub = (function () {\n    let my = {};\n    // ...\n\n######     return my;\n})();\n
\n

While this may have been obvious, I thought it worth including. Sub-modules have all the advanced capabilities of normal modules, including augmentation and private state.

\n
## Conclusions
\n

Most of the advanced patterns can be combined with each other to create more useful patterns. If I had to advocate a route to take in designing a complex application, I’d combine loose augmentation, private state, and sub-modules.

\n
I haven’t touched on performance here at all, but I’d like to put in one quick note: The module pattern is good for performance. It minifies really well, which makes downloading the code faster. Using loose augmentation allows easy non-blocking parallel downloads, which also speeds up download speeds. Initialization time is probably a bit slower than other methods, but worth the trade-off. Run-time performance should suffer no penalties so long as globals are imported correctly, and will probably gain speed in sub-modules by shortening the reference chain with local variables.
\n
To close, here’s an example of a sub-module that loads itself dynamically to its parent (creating it if it does not exist). I’ve left out private state for brevity, but including it would be simple. This code pattern allows an entire complex heirarchical code-base to be loaded completely in parallel with itself, sub-modules and all.
\n
let UTIL = (function (parent, $) {\n    let my = (parent.ajax = parent.ajax || {});\n\n    my.get = function (url, params, callback) {\n        // ok, so I'm cheating a bit :)\n        return $.getJSON(url, params, callback);\n    };\n\n    // etc...\n\n######     return parent;\n})(UTIL || {}, jQuery);\n
\n

Summary:

\n
\n recitation \n

Anonymous Closures

\n
(function () {\n    // ... all vars and functions are in this scope only\n    // still maintains access to all globals\n})();\n
\n

Global Import

\n
(function ($, YAHOO) {\n    // now have access to globals jQuery (as $) and YAHOO in this code\n})(jQuery, YAHOO);\n
\n

Module Export

\n
let MODULE = (function () {\n    let my = {},\n        privateVariable = 1;\n\n    function privateMethod() {\n        // ...\n    }\n\n    my.moduleProperty = 1;\n    my.moduleMethod = function () {\n        // ...\n    };\n\n    return my;\n})();\n
\n

Advanced Patterns

\n

Augmentation

\n
let MODULE = (function (my) {\n    my.anotherMethod = function () {\n        // added method...\n    };\n\n    return my;\n})(MODULE);\n
\n

Loose Augmentation

\n

In this pattern, the let statement is always necessary. Note that the import will create the module if it does not already exist. This means you can use a tool like LABjs and load all of your module files in parallel, without needing to block.

\n
`javascript
\n

let MODULE = (function (my) {\n// add capabilities...

\n
return my;
\n

})(MODULE || {});

\n
### Tight Augmentation\n\nHere we’ve overridden MODULE.moduleMethod, but maintain a reference to the original method, if needed.\n\n###### ```javascript\nlet MODULE = (function (my) {\n    let old_moduleMethod = my.moduleMethod;\n\n    my.moduleMethod = function () {\n        // method override, has access to old through old_moduleMethod...\n    };\n\n    return my;\n})(MODULE);\n
\n

Cloning and Inheritance

\n
let MODULE_TWO = (function (old) {\n    let my = {},\n        key;\n\n    for (key in old) {\n        if (old.hasOwnProperty(key)) {\n            my[key] = old[key];\n        }\n    }\n\n    let super_moduleMethod = old.moduleMethod;\n    my.moduleMethod = function () {\n        // override method on the clone, access to super through super_moduleMethod\n    };\n\n    return my;\n})(MODULE);\n
\n

Cross-File Private State

\n
let MODULE = (function (my) {\n    let _private = (my._private = my._private || {}),\n        _seal = (my._seal =\n            my._seal ||\n            function () {\n                delete my._private;\n                delete my._seal;\n                delete my._unseal;\n            }),\n        _unseal = (my._unseal =\n            my._unseal ||\n            function () {\n                my._private = _private;\n                my._seal = _seal;\n                my._unseal = _unseal;\n            });\n\n    // permanent access to _private, _seal, and _unseal\n\n    return my;\n})(MODULE || {});\n
\n

Sub-modules

\n
MODULE.sub = (function () {\n    let my = {};\n    // ...\n\n######     return my;\n})();\n
\n
"},{"url":"/docs/javascript/constructor-functions/","relativePath":"docs/javascript/constructor-functions.md","relativeDir":"docs/javascript","base":"constructor-functions.md","name":"constructor-functions","frontmatter":{"title":"Constructor Functions","weight":0,"excerpt":"Constructor Functions","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Constructor Functions

\n

Defining a constructor function\nExample of an object using object initialiation

\n
const fellowshipOfTheRing = {\n    title: 'The Fellowship of the Ring',\n    series: 'The Lord of the Rings',\n    author: 'J.R.R. Tolkien'\n};\n
\n
    \n
  • The above literal is a \"Book\" object type.
    • \n
  • \n

    Object Type is defined by it's attributes and behaviors.

    \n
      \n
    • Behaviors are represented by methods.
      • \n
    \n
    • \n
  • \n

    Constructor Functions : Handle the creation of an object - it's a factory for creating objects of a specific type.

    \n
      \n
    • \n

      There are a few specific things to constructors worth noting:

      \n
        \n
      • The name of the constructor function is capitalized
        • \n
      • The Function does not explicityly return a value
        • \n
      • Within the body, the this keyword references the newly created object
        • \n
      \n
      • \n
    \n
    • \n
\n
function Book(title, series, author) {\n    this.title = title;\n    this.series = series;\n    this.author = author;\n}\n
\n

Invoking a constructor function

\n
    \n
  • We can invoke a constructor function using the new keyword.
    • \n
\n
function Book(title, series, author) {\n    this.title = title;\n    this.series = series;\n    this.author = author;\n}\n\nconst fellowshipOfTheRing = new Book('The Fellowship of the Ring', 'The Lord of the Rings', 'J.R.R. Tolkien');\n\nconsole.log(fellowshipOfTheRing); // Book { title: 'The Fellowship of the Ring', ... }\n
\n
    \n
  • \n

    Four Things will happen when invoking a constructor function

    \n
      \n
    1. A new empty object is created {};
      2. \n
    2. The new obj's prototype is set to the object referenced by the constructors prototype property.
      3. \n
    3. This is bound to the new object.
      4. \n
    4. The new object is returned after the constructor function has completed.
      5. \n
    \n
    • \n
\n

Understanding New Object Instances

\n
    \n
  • Instance : term to describe an objected created from a constructor function.
    • \n
  • Every instance created is a unique object and therefore not equal to each other.
    • \n
\n

Using the instanceof operator to check an object's type

\n
console.log(fellowshipOfTheRing instanceof Book); // true\n
\n
    \n
  • \n

    By using the instanceof operator we can verify that an object was created from a certain object type.

    \n
      \n
    • 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.
      • \n
    \n
    • \n
\n

Invoking a constructor function without the new keyword

\n
    \n
  • \n

    If we invoke a constructor function without the new keyword, we may result in one of two unexpected outcomes:

    \n
      \n
    1. In non-strict mode, this will be bound to the global object instead.
      2. \n
    2. \n

      In strict mode, this will become undefined.

      \n
        \n
      • You can enable strict mode by typing \"use strict\" at the top of your file.
        • \n
      \n
      3. \n
    \n
    • \n
\n

Defining Sharable Methods

\n
    \n
  • 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.
    • \n
  • \n

    Prototype : An object that is delegated to when a reference to an object property or method can't be resolved.

    \n
      \n
    • Every instance created by a constructor function shares the same prototype.
      • \n
    \n
    • \n
  • \n

    Object.setPrototypeOf() and Object.getPrototypeOf() are just used to set a prototype of one object to another object; and also the verify a prototype.

    \n
      \n
    • 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.
      • \n
    \n
    • \n
\n
function Book(title, series, author) {\n    this.title = title;\n    this.series = series;\n    this.author = author;\n}\n\n// Any method defined on the `Book.prototype` property\n// will be shared across all `Book` instances.\nBook.prototype.getInformation = function () {\n    return `${this.title} by ${this.author}`;\n};\n\nconst fellowshipOfTheRing = new Book('The Fellowship of the Ring', 'The Lord of the Rings', 'J.R.R. Tolkien');\n\nconsole.log(fellowshipOfTheRing.getInformation());\n
\n
    \n
  • Every method we define on a constructor function's prototype property will be shared across all instances of that object type.
    • \n
\n

The Problem with Arrow Functions

\n
    \n
  • \n

    We cannot use arrow functions when defining methods on a constructor function's prototype property.

    \n
      \n
    • Arrow functions don't include their own this binding; therefore it will not reference the current instance - always stick with the function () keyword.
      • \n
    \n
    • \n
\n
\n

Putting the Class in Javascript Classes

\n

In ES2015, JS gained the class keyword - replacing the need to use only constructor functions & prototypes to mimic classes!

\n
    \n
  • 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.
    • \n
\n

Defining a ES2015 class

\n
class Book {\n    constructor(title, series, author) {\n        this.title = title;\n        this.series = series;\n        this.author = author;\n    }\n}\n
\n
    \n
  • Class names also begin only with capital letters.
    • \n
  • \n

    Although not required, class definitions can include a class constructor function - these are similar to regular constructors in that:

    \n
      \n
    • They don't explicitly return a value.
      • \n
    • The this keyword references the newly created object instance.
      • \n
    \n
    • \n
\n

Instantiating an instance of a class

\n
    \n
  • \n

    We can also use the new.

    \n
      \n
    • Four things occur when instantiating an instance of a class:
      • \n
    • New empty object is created {};
      • \n
    • The new obj's prototype is set to the class prototype's property value.
      • \n
    • This is bound to the new object.
      • \n
    • After the constructor method has completed, the new obj is returned.
      • \n
    \n
    • \n
  • Don't try to instatiate a class object without the new keyword.
    • \n
\n

Class Definitions are NOT hoisted

\n
test();\n\nfunction test() {\n    console.log('This works!');\n}\n
\n
    \n
  • In JS you can call a function before it's declared - this is known as hoisting.
    • \n
  • Class defs are NOT hoisted, so just get in the habit of declaring them before you use them.
    • \n
\n

Defining Methods

\n
    \n
  • A class can contain two types of methods:
    • \n
  • \n

    Instance Method : Methods that are invoked on an instance of the class - useful for performing an action on a specific instance.

    \n
      \n
    • Instance methods are also sometimes referred to as prototype methods because they are defined on a shared prototype object.
      • \n
    \n
    • \n
  • \n

    Static Method : Methods that invoked directly on a class, not on an instance.

    \n
      \n
    • Important: Invoking a static method on an instance will result in a runtime error.
      • \n
    • Prepending the static keyword at the beginning on the method name will make it static.
      • \n
    \n
    • \n
\n
class Book {\n    constructor(title, series, author) {\n        this.title = title;\n        this.series = series;\n        this.author = author;\n    }\n\n    // Notice the use of a rest parameter (...books)\n    // to capture the passed parameters as an array of values.\n    static getTitles(...books) {\n        return books.map((book) => book.title);\n    }\n\n    getInformation() {\n        return `${this.title} by ${this.author}`;\n    }\n}\n\nconst fellowshipOfTheRing = new Book('The Fellowship of the Ring', 'The Lord of the Rings', 'J.R.R. Tolkien');\n\nconst theTwoTowers = new Book('The Two Towers', 'The Lord of the Rings', 'J.R.R. Tolkien');\n\nconst bookTitles = Book.getTitles(fellowshipOfTheRing, theTwoTowers);\n\nconsole.log(bookTitles.join(', ')); // The Fellowship of the Ring, The Two Towers\n
\n
    \n
  • 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.
    • \n
\n
function Book(title, series, author) {\n    this.title = title;\n    this.series = series;\n    this.author = author;\n}\n\n// Static methods are defined\n// directly on the constructor function.\nBook.getTitles = function (...books) {\n    return books.map((book) => book.title);\n};\n\n// Instance methods are defined\n// on the constructor function's `prototype` property.\nBook.prototype.getInformation = function () {\n    return `${this.title} by ${this.author}`;\n};\n\nconst fellowshipOfTheRing = new Book('The Fellowship of the Ring', 'The Lord of the Rings', 'J.R.R. Tolkien');\n\nconst theTwoTowers = new Book('The Two Towers', 'The Lord of the Rings', 'J.R.R. Tolkien');\n\nconsole.log(fellowshipOfTheRing.getInformation()); // The Fellowship of the Ring by J.R.R. Tolkien\n\nconsole.log(theTwoTowers.getInformation()); // The Two Towers by J.R.R. Tolkien\n\n// Call the static `Book.getTitles()` method\n// to get an array of the book titles.\nconst bookTitles = Book.getTitles(fellowshipOfTheRing, theTwoTowers);\n\nconsole.log(bookTitles.join(', ')); // The Fellowship of the Ring, The Two Towers\n
\n

Comparing Classes to Constructor Functions

\n
\n

ES2015 Classes are essentially syntactic sugar over traditional constructor functions and prototypes.

\n
\n
\n

Javascript Inheritance

\n
    \n
  • Child Class : Class that is based upon another class and inherits properties and methods from that other class.
    • \n
  • Parent Class : Class that is being inherited downwards.
    • \n
  • Inheritance : The process of basing a class upon another class.
    • \n
\n
class CatalogItem {\n    constructor(title, series) {\n        this.title = title;\n        this.series = series;\n    }\n\n    getInformation() {\n        if (this.series) {\n            return `${this.title} (${this.series})`;\n        } else {\n            return this.title;\n        }\n    }\n}\n\nclass Book extends CatalogItem {\n    constructor(title, series, author) {\n        super(title, series);\n        this.author = author;\n    }\n}\n\nclass Movie extends CatalogItem {\n    constructor(title, series, director) {\n        super(title, series);\n        this.director = director;\n    }\n}\n\nconst theGrapesOfWrath = new Book('The Grapes of Wrath', null, 'John Steinbeck');\nconst aNewHope = new Movie('Episode 4: A New Hope', 'Star Wars', 'George Lucas');\n\nconsole.log(theGrapesOfWrath.getInformation()); // The Grapes of Wrath\nconsole.log(aNewHope.getInformation()); // Episode 4: A New Hope (Star Wars)\nconsole.log(Catalogitem instanceof Function); // true\nconsole.log(Book instanceof Function); // true\n
\n
    \n
  • \n

    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.

    \n
    console.log(theGrapesOfWrath.getInformation()); // The Grapes of Wrath\n
    \n

    When the getInformation() method is invoked:

    \n
      \n
    • JS looks for get() on the current object.
      • \n
    • If it isn't found, the method call is delegated to the object's prototype.
      • \n
    • It continues up the prototype chain until the method is found.
      • \n
    \n
    • \n
\n

Overriding a method in a parent class

\n
    \n
  • Method Overriding : when a child class provides an implementation of a method that's already defined in a parent class.
    • \n
\n
class Movie extends CatalogItem {\n    constructor(title, series, director) {\n        super(title, series);\n        this.director = director;\n    }\n\n    getInformation() {\n        let result = super.getInformation();\n\n        if (this.director) {\n            result += ` [directed by ${this.director}]`;\n        }\n\n        return result;\n    }\n}\n
\n
    \n
  • We can simply declare our own method of the same name in our child class to override our parent's version of getInformation()
    • \n
\n
\n

Javascript Modules

\n

Introducing Node.js modules

\n
    \n
  • In Node.js, each JS file in a project defines a module.
    • \n
  • Module's contents are private by default.
    • \n
  • Local Modules : Modules defined within your project.
    • \n
  • Core Modules : Native modules contained within Node.js that you can use to perform tasks or to add functionality to your application.
    • \n
  • CommonJS : A legacy module system.
    • \n
  • ES Modules : Newer module sysem that will eventually replace CommonJS.
    • \n
  • Entry Point : JS File that is passed to Node for access to the entire application.
    • \n
  • \n

    Syntax for exporting modules:

    \n
    module.exports.Book = Book;\nmodule.exports.Movie = Movie;\n
    \n
    module.exports = {\n    Book,\n    Movie\n};\n
    \n
    • \n
  • \n

    Syntax for importing modules:

    \n
    const classes = require('./classes');\n
    \n
    const { Book, Movie } = require('./classes');\n
    \n

    Using Single Item Modules

    \n
    \n

    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.

    \n
    \n

    Understanding Module Loading

    \n
      \n
    • \n

      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:

      \n
        \n
      • Local Module: identifier starts with ./ ../ or /
        • \n
      • Node.js Core: identifier matches name
        • \n
      • Third-Party: identifier matches a module in the node modules folder (installed package)
        • \n
      \n
      • \n
    \n
    \n
    • \n
"},{"url":"/docs/javascript/review/","relativePath":"docs/javascript/review.md","relativeDir":"docs/javascript","base":"review.md","name":"review","frontmatter":{"title":"Javascript Concepts Review","weight":0,"excerpt":"Javascript Concepts Review","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Core Concept Review

\n

Core Concepts

\n

index

\n

This appendix is a non-exhaustive list of new syntactic features and methods that were added to JavaScript in ES6. These features are the most commonly used and most helpful.

\n

While this appendix doesn't cover ES6 classes, we go over the basics while learning about components in the book. In addition, this appendix doesn't include descriptions of some larger new features like promises and generators. If you'd like more info on those or on any topic below, we encourage you to reference the Mozilla Developer Network's website (MDN).

\n

Prefer const and let over var

\n

If you've worked with ES5 JavaScript before, you're likely used to seeing variables declared with var:

\n
ar myVariable = 5;\n
\n

Both the const and let statements also declare variables. They were introduced in ES6.

\n

Use const in cases where a variable is never re-assigned. Using const makes this clear to whoever is reading your code. It refers to the \"constant\" state of the variable in the context it is defined within.

\n

If the variable will be re-assigned, use let.

\n

We encourage the use of const and let instead of var. In addition to the restriction introduced by const, both const and let are block scoped as opposed to function scoped. This scoping can help avoid unexpected bugs.

\n

Arrow functions

\n

There are three ways to write arrow function bodies. For the examples below, let's say we have an array of city objects:

\n
onst cities = [\n  { name: 'Cairo', pop: 7764700 },\n  { name: 'Lagos', pop: 8029200 },\n];\n
\n

If we write an arrow function that spans multiple lines, we must use braces to delimit the function body like this:

\n
const formattedPopulations = cities.map((city) => {\n    const popMM = (city.pop / 1000000).toFixed(2);\n    return popMM + ' million';\n});\nconsole.log(formattedPopulations);\n
\n

Note that we must also explicitly specify a return for the function.

\n

However, if we write a function body that is only a single line (or single expression) we can use parentheses to delimit it:

\n
const formattedPopulations2 = cities.map((city) => (city.pop / 1000000).toFixed(2) + ' million');\n
\n

Notably, we don't use return as it's implied.

\n

Furthermore, if your function body is terse you can write it like so:

\n
const pops = cities.map((city) => city.pop);\nconsole.log(pops);\n
\n

The terseness of arrow functions is one of two reasons that we use them. Compare the one-liner above to this:

\n
const popsNoArrow = cities.map(function (city) {\n    return city.pop;\n});\n
\n

Of greater benefit, though, is how arrow functions bind the this object.

\n

The traditional JavaScript function declaration syntax (function () {}) will bind this in anonymous functions to the global object. To illustrate the confusion this causes, consider the following example:

\n
unction printSong() {\n  console.log(\"Oops - The Global Object\");\n}\n\nconst jukebox = {\n  songs: [\n    {\n      title: \"Wanna Be Startin' Somethin'\",\n      artist: \"Michael Jackson\",\n    },\n    {\n      title: \"Superstar\",\n      artist: \"Madonna\",\n    },\n  ],\n  printSong: function (song) {\n    console.log(song.title + \" - \" + song.artist);\n  },\n  printSongs: function () {\n\n    this.songs.forEach(function(song) {\n\n      this.printSong(song);\n    });\n  },\n}\n\njukebox.printSongs();\n
\n

The method printSongs() iterates over this.songs with forEach(). In this context, this is bound to the object (jukebox) as expected. However, the anonymous function passed to forEach() binds its internal this to the global object. As such, this.printSong(song) calls the function declared at the top of the example, not the method on jukebox.

\n

JavaScript developers have traditionally used workarounds for this behavior, but arrow functions solve the problem by capturing the this value of the enclosing context. Using an arrow function for printSongs() has the expected result:

\n
  printSongs: function () {\n    this.songs.forEach((song) => {\n\n      this.printSong(song);\n    });\n  },\n}\n\njukebox.printSongs();\n
\n

For this reason, throughout the book we use arrow functions for all anonymous functions.

\n

Modules

\n

ES6 formally supports modules using the import/export syntax.

\n

Named exports

\n

Inside any file, you can use export to specify a variable the module should expose. Here's an example of a file that exports two functions:

\n
export const sayHi = () => console.log('Hi!');\nexport const sayBye = () => console.log('Bye!');\n\nconst saySomething = () => console.log('Something!');\n
\n

Now, anywhere we wanted to use these functions we could use import. We need to specify which functions we want to import. A common way of doing this is using ES6's destructuring assignment syntax to list them out like this:

\n
import { sayHi, sayBye } from './greetings';\n\nsayHi();\nsayBye();\n
\n

Importantly, the function that was not exported (saySomething) is unavailable outside of the module.

\n

Also note that we supply a relative path to from, indicating that the ES6 module is a local file as opposed to an npm package.

\n

Instead of inserting an export before each variable you'd like to export, you can use this syntax to list off all the exposed variables in one area:

\n
const sayHi = () => console.log('Hi!');\nconst sayBye = () => console.log('Bye!');\n\nconst saySomething = () => console.log('Something!');\n\nexport { sayHi, sayBye };\n
\n

We can also specify that we'd like to import all of a module's functionality underneath a given namespace with the import * as <Namespace> syntax:

\n
import * as Greetings from './greetings';\n\nGreetings.sayHi();\n\nGreetings.sayBye();\n\nGreetings.saySomething();\n
\n

Default export

\n

The other type of export is a default export. A module can only contain one default export:

\n
const sayHi = () => console.log('Hi!');\nconst sayBye = () => console.log('Bye!');\n\nconst saySomething = () => console.log('Something!');\n\nconst Greetings = { sayHi, sayBye };\n\nexport default Greetings;\n
\n

This is a common pattern for libraries. It means you can easily import the library wholesale without specifying what individual functions you want:

\n
import Greetings from './greetings';\n\nGreetings.sayHi();\nGreetings.sayBye();\n
\n

It's not uncommon for a module to use a mix of both named exports and default exports. For instance, with react-dom, you can import ReactDOM (a default export) like this:

\n
import ReactDOM from 'react-dom';\n\nReactDOM.render();\n
\n

Or, if you're only going to use the render() function, you can import the named render() function like this:

\n
import { render } from 'react-dom';\n\nrender();\n
\n

To achieve this flexibility, the export implementation for react-dom looks something like this:

\n
export const render = (component, target) => {};\n\nconst ReactDOM = {\n    render\n};\n\nexport default ReactDOM;\n
\n

If you want to play around with the module syntax, check out the folder code/webpack/es6-modules.

\n

For more reading on ES6 modules, see this article from Mozilla: \"ES6 in Depth: Modules\".

\n

Object.assign()

\n

We use Object.assign() often throughout the book. We use it in areas where we want to create a modified version of an existing object.

\n

Object.assign() accepts any number of objects as arguments. When the function receives two arguments, it copies the properties of the second object onto the first, like so:

\n
onst coffee = { };\nconst noCream = { cream: false };\nconst noMilk = { milk: false };\nObject.assign(coffee, noCream);\n
\n

It is idiomatic to pass in three arguments to Object.assign(). The first argument is a new JavaScript object, the one that Object.assign() will ultimately return. The second is the object whose properties we'd like to build off of. The last is the changes we'd like to apply:

\n
const coffeeWithMilk = Object.assign({}, coffee, { milk: true });\n
\n

Object.assign() is a handy method for working with \"immutable\" JavaScript objects.

\n

Template literals

\n

In ES5 JavaScript, you'd interpolate variables into strings like this:

\n
var greeting = 'Hello, ' + user + '! It is ' + degF + ' degrees outside.';\n
\n

With ES6 template literals, we can create the same string like this:

\n
const greeting = `Hello, ${user}! It is ${degF} degrees outside.`;\n
\n

The spread operator (...)

\n

In arrays, the ellipsis ... operator will expand the array that follows into the parent array. The spread operator enables us to succinctly construct new arrays as a composite of existing arrays.

\n

Here is an example:

\n
onst a = [ 1, 2, 3 ];\nconst b = [ 4, 5, 6 ];\nconst c = [ ...a, ...b, 7, 8, 9 ];\n\nconsole.log(c);\n
\n

Notice how this is different than if we wrote:

\n
const d = [a, b, 7, 8, 9];\nconsole.log(d);\n
\n

Enhanced object literals

\n

In ES5, all objects were required to have explicit key and value declarations:

\n
const explicit = {\n    getState: getState,\n    dispatch: dispatch\n};\n
\n

In ES6, you can use this terser syntax whenever the property name and variable name are the same:

\n
const implicit = {\n    getState,\n    dispatch\n};\n
\n

Lots of open source libraries use this syntax, so it's good to be familiar with it. But whether you use it in your own code is a matter of stylistic preference.

\n

Default arguments

\n

With ES6, you can specify a default value for an argument in the case that it is undefined when the function is called.

\n

This:

\n
unction divide(a, b) {\n\n  const divisor = typeof b === 'undefined' ? 1 : b;\n\n  return a / divisor;\n}\n
\n

Can be written as this:

\n
function divide(a, b = 1) {\n    return a / b;\n}\n
\n

In both cases, using the function looks like this:

\n
divide(14, 2);\n\ndivide(14, undefined);\n\ndivide(14);\n
\n

Whenever the argument b in the example above is undefined, the default argument is used. Note that null will not use the default argument:

\n
divide(14, null);\n
\n

Destructuring assignments

\n

For arrays

\n

In ES5, extracting and assigning multiple elements from an array looked like this:

\n
ar fruits = [ 'apples', 'bananas', 'oranges' ];\nvar fruit1 = fruits[0];\nvar fruit2 = fruits[1];\n
\n

In ES6, we can use the destructuring syntax to accomplish the same task like this:

\n
const [veg1, veg2] = ['asparagus', 'broccoli', 'onion'];\nconsole.log(veg1);\nconsole.log(veg2);\n
\n

The variables in the array on the left are \"matched\" and assigned to the corresponding elements in the array on the right. Note that 'onion' is ignored and has no variable bound to it.

\n

For objects

\n

We can do something similar for extracting object properties into variables:

\n
const smoothie = {\n    fats: ['avocado', 'peanut butter', 'greek yogurt'],\n    liquids: ['almond milk'],\n    greens: ['spinach'],\n    fruits: ['blueberry', 'banana']\n};\n\nconst { liquids, fruits } = smoothie;\n\nconsole.log(liquids);\nconsole.log(fruits);\n
\n

Parameter context matching

\n

We can use these same principles to bind arguments inside a function to properties of an object supplied as an argument:

\n
const containsSpinach = ({ greens }) => {\n    if (greens.find((g) => g === 'spinach')) {\n        return true;\n    } else {\n        return false;\n    }\n};\n\ncontainsSpinach(smoothie);\n
\n

We do this often with functional React components:

\n
const IngredientList = ({ ingredients, onClick }) => (\n    <ul className=\"IngredientList\">\n        {ingredients.map((i) => (\n            <li key={i.id} onClick={() => onClick(i.id)} className=\"item\">\n                {i.name}\n            </li>\n        ))}\n    </ul>\n);\n
\n

Here, we use destructuring to extract the props into variables (ingredients and onClick) that we then use inside the component's function body.

\n

Share To Linkedin:

"},{"url":"/docs/javascript/clean-code/","relativePath":"docs/javascript/clean-code.md","relativeDir":"docs/javascript","base":"clean-code.md","name":"clean-code","frontmatter":{"title":"Clean Code","weight":0,"excerpt":"Clean Code","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

clean-code-javascript

\n

Table of Contents

\n
    \n
  1. Introduction
    2. \n
  2. Variables
    3. \n
  3. Functions
    4. \n
  4. Objects and Data Structures
    5. \n
  5. Classes
    6. \n
  6. SOLID
    7. \n
  7. Testing
    8. \n
  8. Concurrency
    9. \n
  9. Error Handling
    10. \n
  10. Formatting
    11. \n
  11. Comments
    12. \n
  12. Translation
    13. \n
\n

Introduction

\n

\"Humorous

\n

Software engineering principles, from Robert C. Martin's book\nClean Code,\nadapted for JavaScript. This is not a style guide. It's a guide to producing\nreadable, reusable, and refactorable software in JavaScript.

\n

Not every principle herein has to be strictly followed, and even fewer will be\nuniversally agreed upon. These are guidelines and nothing more, but they are\nones codified over many years of collective experience by the authors of\nClean Code.

\n

Our craft of software engineering is just a bit over 50 years old, and we are\nstill learning a lot. When software architecture is as old as architecture\nitself, maybe then we will have harder rules to follow. For now, let these\nguidelines serve as a touchstone by which to assess the quality of the\nJavaScript code that you and your team produce.

\n

One more thing: knowing these won't immediately make you a better software\ndeveloper, and working with them for many years doesn't mean you won't make\nmistakes. Every piece of code starts as a first draft, like wet clay getting\nshaped into its final form. Finally, we chisel away the imperfections when\nwe review it with our peers. Don't beat yourself up for first drafts that need\nimprovement. Beat up the code instead!

\n

Variables

\n

Use meaningful and pronounceable variable names

\n

Bad:

\n
const yyyymmdstr = moment().format('YYYY/MM/DD');\n
\n

Good:

\n
const currentDate = moment().format('YYYY/MM/DD');\n
\n

Use the same vocabulary for the same type of variable

\n

Bad:

\n
getUserInfo();\ngetClientData();\ngetCustomerRecord();\n
\n

Good:

\n
getUser();\n
\n

Use searchable names

\n

We will read more code than we will ever write. It's important that the code we\ndo write is readable and searchable. By not naming variables that end up\nbeing meaningful for understanding our program, we hurt our readers.\nMake your names searchable. Tools like\nbuddy.js and\nESLint\ncan help identify unnamed constants.

\n

Bad:

\n
// What the heck is 86400000 for?\nsetTimeout(blastOff, 86400000);\n
\n

Good:

\n
// Declare them as capitalized named constants.\nconst MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;\n\nsetTimeout(blastOff, MILLISECONDS_PER_DAY);\n
\n

Use explanatory variables

\n

Bad:

\n
const address = 'One Infinite Loop, Cupertino 95014';\nconst cityZipCodeRegex = /^[^,\\\\]+[,\\\\\\s]+(.+?)\\s*(\\d{5})?$/;\nsaveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);\n
\n

Good:

\n
const address = 'One Infinite Loop, Cupertino 95014';\nconst cityZipCodeRegex = /^[^,\\\\]+[,\\\\\\s]+(.+?)\\s*(\\d{5})?$/;\nconst [_, city, zipCode] = address.match(cityZipCodeRegex) || [];\nsaveCityZipCode(city, zipCode);\n
\n

Avoid Mental Mapping

\n

Explicit is better than implicit.

\n

Bad:

\n
const locations = ['Austin', 'New York', 'San Francisco'];\nlocations.forEach((l) => {\n    doStuff();\n    doSomeOtherStuff();\n    // ...\n    // ...\n    // ...\n    // Wait, what is `l` for again?\n    dispatch(l);\n});\n
\n

Good:

\n
const locations = ['Austin', 'New York', 'San Francisco'];\nlocations.forEach((location) => {\n    doStuff();\n    doSomeOtherStuff();\n    // ...\n    // ...\n    // ...\n    dispatch(location);\n});\n
\n

Don't add unneeded context

\n

If your class/object name tells you something, don't repeat that in your\nvariable name.

\n

Bad:

\n
const Car = {\n    carMake: 'Honda',\n    carModel: 'Accord',\n    carColor: 'Blue'\n};\n\nfunction paintCar(car, color) {\n    car.carColor = color;\n}\n
\n

Good:

\n
const Car = {\n    make: 'Honda',\n    model: 'Accord',\n    color: 'Blue'\n};\n\nfunction paintCar(car, color) {\n    car.color = color;\n}\n
\n

Use default arguments instead of short circuiting or conditionals

\n

Default arguments are often cleaner than short circuiting. Be aware that if you\nuse them, your function will only provide default values for undefined\narguments. Other \"falsy\" values such as '', \"\", false, null, 0, and\nNaN, will not be replaced by a default value.

\n

Bad:

\n
function createMicrobrewery(name) {\n    const breweryName = name || 'Hipster Brew Co.';\n    // ...\n}\n
\n

Good:

\n
function createMicrobrewery(name = 'Hipster Brew Co.') {\n    // ...\n}\n
\n

Functions

\n

Function arguments (2 or fewer ideally)

\n

Limiting the amount of function parameters is incredibly important because it\nmakes testing your function easier. Having more than three leads to a\ncombinatorial explosion where you have to test tons of different cases with\neach separate argument.

\n

One or two arguments is the ideal case, and three should be avoided if possible.\nAnything more than that should be consolidated. Usually, if you have\nmore than two arguments then your function is trying to do too much. In cases\nwhere it's not, most of the time a higher-level object will suffice as an\nargument.

\n

Since JavaScript allows you to make objects on the fly, without a lot of class\nboilerplate, you can use an object if you are finding yourself needing a\nlot of arguments.

\n

To make it obvious what properties the function expects, you can use the ES2015/ES6\ndestructuring syntax. This has a few advantages:

\n
    \n
  1. When someone looks at the function signature, it's immediately clear what\nproperties are being used.
    2. \n
  2. It can be used to simulate named parameters.
    3. \n
  3. Destructuring also clones the specified primitive values of the argument\nobject passed into the function. This can help prevent side effects. Note:\nobjects and arrays that are destructured from the argument object are NOT\ncloned.
    4. \n
  4. Linters can warn you about unused properties, which would be impossible\nwithout destructuring.
    5. \n
\n

Bad:

\n
function createMenu(title, body, buttonText, cancellable) {\n    // ...\n}\n\ncreateMenu('Foo', 'Bar', 'Baz', true);\n
\n

Good:

\n
function createMenu({ title, body, buttonText, cancellable }) {\n    // ...\n}\n\ncreateMenu({\n    title: 'Foo',\n    body: 'Bar',\n    buttonText: 'Baz',\n    cancellable: true\n});\n
\n

Functions should do one thing

\n

This is by far the most important rule in software engineering. When functions\ndo more than one thing, they are harder to compose, test, and reason about.\nWhen you can isolate a function to just one action, it can be refactored\neasily and your code will read much cleaner. If you take nothing else away from\nthis guide other than this, you'll be ahead of many developers.

\n

Bad:

\n
function emailClients(clients) {\n    clients.forEach((client) => {\n        const clientRecord = database.lookup(client);\n        if (clientRecord.isActive()) {\n            email(client);\n        }\n    });\n}\n
\n

Good:

\n
function emailActiveClients(clients) {\n    clients.filter(isActiveClient).forEach(email);\n}\n\nfunction isActiveClient(client) {\n    const clientRecord = database.lookup(client);\n    return clientRecord.isActive();\n}\n
\n

Function names should say what they do

\n

Bad:

\n
function addToDate(date, month) {\n    // ...\n}\n\nconst date = new Date();\n\n// It's hard to tell from the function name what is added\naddToDate(date, 1);\n
\n

Good:

\n
function addMonthToDate(month, date) {\n    // ...\n}\n\nconst date = new Date();\naddMonthToDate(1, date);\n
\n

Functions should only be one level of abstraction

\n

When you have more than one level of abstraction your function is usually\ndoing too much. Splitting up functions leads to reusability and easier\ntesting.

\n

Bad:

\n
function parseBetterJSAlternative(code) {\n    const REGEXES = [\n        // ...\n    ];\n\n    const statements = code.split(' ');\n    const tokens = [];\n    REGEXES.forEach((REGEX) => {\n        statements.forEach((statement) => {\n            // ...\n        });\n    });\n\n    const ast = [];\n    tokens.forEach((token) => {\n        // lex...\n    });\n\n    ast.forEach((node) => {\n        // parse...\n    });\n}\n
\n

Good:

\n
function parseBetterJSAlternative(code) {\n    const tokens = tokenize(code);\n    const syntaxTree = parse(tokens);\n    syntaxTree.forEach((node) => {\n        // parse...\n    });\n}\n\nfunction tokenize(code) {\n    const REGEXES = [\n        // ...\n    ];\n\n    const statements = code.split(' ');\n    const tokens = [];\n    REGEXES.forEach((REGEX) => {\n        statements.forEach((statement) => {\n            tokens.push(/* ... */);\n        });\n    });\n\n    return tokens;\n}\n\nfunction parse(tokens) {\n    const syntaxTree = [];\n    tokens.forEach((token) => {\n        syntaxTree.push(/* ... */);\n    });\n\n    return syntaxTree;\n}\n
\n

Remove duplicate code

\n

Do your absolute best to avoid duplicate code. Duplicate code is bad because it\nmeans that there's more than one place to alter something if you need to change\nsome logic.

\n

Imagine if you run a restaurant and you keep track of your inventory: all your\ntomatoes, onions, garlic, spices, etc. If you have multiple lists that\nyou keep this on, then all have to be updated when you serve a dish with\ntomatoes in them. If you only have one list, there's only one place to update!

\n

Oftentimes you have duplicate code because you have two or more slightly\ndifferent things, that share a lot in common, but their differences force you\nto have two or more separate functions that do much of the same things. Removing\nduplicate code means creating an abstraction that can handle this set of\ndifferent things with just one function/module/class.

\n

Getting the abstraction right is critical, that's why you should follow the\nSOLID principles laid out in the Classes section. Bad abstractions can be\nworse than duplicate code, so be careful! Having said this, if you can make\na good abstraction, do it! Don't repeat yourself, otherwise you'll find yourself\nupdating multiple places anytime you want to change one thing.

\n

Bad:

\n
function showDeveloperList(developers) {\n    developers.forEach((developer) => {\n        const expectedSalary = developer.calculateExpectedSalary();\n        const experience = developer.getExperience();\n        const githubLink = developer.getGithubLink();\n        const data = {\n            expectedSalary,\n            experience,\n            githubLink\n        };\n\n        render(data);\n    });\n}\n\nfunction showManagerList(managers) {\n    managers.forEach((manager) => {\n        const expectedSalary = manager.calculateExpectedSalary();\n        const experience = manager.getExperience();\n        const portfolio = manager.getMBAProjects();\n        const data = {\n            expectedSalary,\n            experience,\n            portfolio\n        };\n\n        render(data);\n    });\n}\n
\n

Good:

\n
function showEmployeeList(employees) {\n    employees.forEach((employee) => {\n        const expectedSalary = employee.calculateExpectedSalary();\n        const experience = employee.getExperience();\n\n        const data = {\n            expectedSalary,\n            experience\n        };\n\n        switch (employee.type) {\n            case 'manager':\n                data.portfolio = employee.getMBAProjects();\n                break;\n            case 'developer':\n                data.githubLink = employee.getGithubLink();\n                break;\n        }\n\n        render(data);\n    });\n}\n
\n

Set default objects with Object.assign

\n

Bad:

\n
const menuConfig = {\n    title: null,\n    body: 'Bar',\n    buttonText: null,\n    cancellable: true\n};\n\nfunction createMenu(config) {\n    config.title = config.title || 'Foo';\n    config.body = config.body || 'Bar';\n    config.buttonText = config.buttonText || 'Baz';\n    config.cancellable = config.cancellable !== undefined ? config.cancellable : true;\n}\n\ncreateMenu(menuConfig);\n
\n

Good:

\n
const menuConfig = {\n    title: 'Order',\n    // User did not include 'body' key\n    buttonText: 'Send',\n    cancellable: true\n};\n\nfunction createMenu(config) {\n    let finalConfig = Object.assign(\n        {\n            title: 'Foo',\n            body: 'Bar',\n            buttonText: 'Baz',\n            cancellable: true\n        },\n        config\n    );\n    return finalConfig;\n    // config now equals: {title: \"Order\", body: \"Bar\", buttonText: \"Send\", cancellable: true}\n    // ...\n}\n\ncreateMenu(menuConfig);\n
\n

Don't use flags as function parameters

\n

Flags tell your user that this function does more than one thing. Functions should do one thing. Split out your functions if they are following different code paths based on a boolean.

\n

Bad:

\n
function createFile(name, temp) {\n    if (temp) {\n        fs.create(`./temp/${name}`);\n    } else {\n        fs.create(name);\n    }\n}\n
\n

Good:

\n
function createFile(name) {\n    fs.create(name);\n}\n\nfunction createTempFile(name) {\n    createFile(`./temp/${name}`);\n}\n
\n

Avoid Side Effects (part 1)

\n

A function produces a side effect if it does anything other than take a value in\nand return another value or values. A side effect could be writing to a file,\nmodifying some global variable, or accidentally wiring all your money to a\nstranger.

\n

Now, you do need to have side effects in a program on occasion. Like the previous\nexample, you might need to write to a file. What you want to do is to\ncentralize where you are doing this. Don't have several functions and classes\nthat write to a particular file. Have one service that does it. One and only one.

\n

The main point is to avoid common pitfalls like sharing state between objects\nwithout any structure, using mutable data types that can be written to by anything,\nand not centralizing where your side effects occur. If you can do this, you will\nbe happier than the vast majority of other programmers.

\n

Bad:

\n
// Global variable referenced by following function.\n// If we had another function that used this name, now it'd be an array and it could break it.\nlet name = 'Ryan McDermott';\n\nfunction splitIntoFirstAndLastName() {\n    name = name.split(' ');\n}\n\nsplitIntoFirstAndLastName();\n\nconsole.log(name); // ['Ryan', 'McDermott'];\n
\n

Good:

\n
function splitIntoFirstAndLastName(name) {\n    return name.split(' ');\n}\n\nconst name = 'Ryan McDermott';\nconst newName = splitIntoFirstAndLastName(name);\n\nconsole.log(name); // 'Ryan McDermott';\nconsole.log(newName); // ['Ryan', 'McDermott'];\n
\n

Avoid Side Effects (part 2)

\n

In JavaScript, some values are unchangeable (immutable) and some are changeable\n(mutable). Objects and arrays are two kinds of mutable values so it's important\nto handle them carefully when they're passed as parameters to a function. A\nJavaScript function can change an object's properties or alter the contents of\nan array which could easily cause bugs elsewhere.

\n

Suppose there's a function that accepts an array parameter representing a\nshopping cart. If the function makes a change in that shopping cart array -\nby adding an item to purchase, for example - then any other function that\nuses that same cart array will be affected by this addition. That may be\ngreat, however it could also be bad. Let's imagine a bad situation:

\n

The user clicks the \"Purchase\" button which calls a purchase function that\nspawns a network request and sends the cart array to the server. Because\nof a bad network connection, the purchase function has to keep retrying the\nrequest. Now, what if in the meantime the user accidentally clicks an \"Add to Cart\"\nbutton on an item they don't actually want before the network request begins?\nIf that happens and the network request begins, then that purchase function\nwill send the accidentally added item because the cart array was modified.

\n

A great solution would be for the addItemToCart function to always clone the\ncart, edit it, and return the clone. This would ensure that functions that are still\nusing the old shopping cart wouldn't be affected by the changes.

\n

Two caveats to mention to this approach:

\n
    \n
  1. There might be cases where you actually want to modify the input object,\nbut when you adopt this programming practice you will find that those cases\nare pretty rare. Most things can be refactored to have no side effects!
    2. \n
  2. Cloning big objects can be very expensive in terms of performance. Luckily,\nthis isn't a big issue in practice because there are\ngreat libraries that allow\nthis kind of programming approach to be fast and not as memory intensive as\nit would be for you to manually clone objects and arrays.
    3. \n
\n

Bad:

\n
const addItemToCart = (cart, item) => {\n    cart.push({ item, date: Date.now() });\n};\n
\n

Good:

\n
const addItemToCart = (cart, item) => {\n    return [...cart, { item, date: Date.now() }];\n};\n
\n

Don't write to global functions

\n

Polluting globals is a bad practice in JavaScript because you could clash with another\nlibrary and the user of your API would be none-the-wiser until they get an\nexception in production. Let's think about an example: what if you wanted to\nextend JavaScript's native Array method to have a diff method that could\nshow the difference between two arrays? You could write your new function\nto the Array.prototype, but it could clash with another library that tried\nto do the same thing. What if that other library was just using diff to find\nthe difference between the first and last elements of an array? This is why it\nwould be much better to just use ES2015/ES6 classes and simply extend the Array global.

\n

Bad:

\n
Array.prototype.diff = function diff(comparisonArray) {\n    const hash = new Set(comparisonArray);\n    return this.filter((elem) => !hash.has(elem));\n};\n
\n

Good:

\n
class SuperArray extends Array {\n    diff(comparisonArray) {\n        const hash = new Set(comparisonArray);\n        return this.filter((elem) => !hash.has(elem));\n    }\n}\n
\n

Favor functional programming over imperative programming

\n

JavaScript isn't a functional language in the way that Haskell is, but it has\na functional flavor to it. Functional languages can be cleaner and easier to test.\nFavor this style of programming when you can.

\n

Bad:

\n
const programmerOutput = [\n    {\n        name: 'Uncle Bobby',\n        linesOfCode: 500\n    },\n    {\n        name: 'Suzie Q',\n        linesOfCode: 1500\n    },\n    {\n        name: 'Jimmy Gosling',\n        linesOfCode: 150\n    },\n    {\n        name: 'Gracie Hopper',\n        linesOfCode: 1000\n    }\n];\n\nlet totalOutput = 0;\n\nfor (let i = 0; i < programmerOutput.length; i++) {\n    totalOutput += programmerOutput[i].linesOfCode;\n}\n
\n

Good:

\n
const programmerOutput = [\n    {\n        name: 'Uncle Bobby',\n        linesOfCode: 500\n    },\n    {\n        name: 'Suzie Q',\n        linesOfCode: 1500\n    },\n    {\n        name: 'Jimmy Gosling',\n        linesOfCode: 150\n    },\n    {\n        name: 'Gracie Hopper',\n        linesOfCode: 1000\n    }\n];\n\nconst totalOutput = programmerOutput.reduce((totalLines, output) => totalLines + output.linesOfCode, 0);\n
\n

Encapsulate conditionals

\n

Bad:

\n
if (fsm.state === 'fetching' && isEmpty(listNode)) {\n    // ...\n}\n
\n

Good:

\n
function shouldShowSpinner(fsm, listNode) {\n    return fsm.state === 'fetching' && isEmpty(listNode);\n}\n\nif (shouldShowSpinner(fsmInstance, listNodeInstance)) {\n    // ...\n}\n
\n

Avoid negative conditionals

\n

Bad:

\n
function isDOMNodeNotPresent(node) {\n    // ...\n}\n\nif (!isDOMNodeNotPresent(node)) {\n    // ...\n}\n
\n

Good:

\n
function isDOMNodePresent(node) {\n    // ...\n}\n\nif (isDOMNodePresent(node)) {\n    // ...\n}\n
\n

Avoid conditionals

\n

This seems like an impossible task. Upon first hearing this, most people say,\n\"how am I supposed to do anything without an if statement?\" The answer is that\nyou can use polymorphism to achieve the same task in many cases. The second\nquestion is usually, \"well that's great but why would I want to do that?\" The\nanswer is a previous clean code concept we learned: a function should only do\none thing. When you have classes and functions that have if statements, you\nare telling your user that your function does more than one thing. Remember,\njust do one thing.

\n

Bad:

\n
class Airplane {\n    // ...\n    getCruisingAltitude() {\n        switch (this.type) {\n            case '777':\n                return this.getMaxAltitude() - this.getPassengerCount();\n            case 'Air Force One':\n                return this.getMaxAltitude();\n            case 'Cessna':\n                return this.getMaxAltitude() - this.getFuelExpenditure();\n        }\n    }\n}\n
\n

Good:

\n
class Airplane {\n    // ...\n}\n\nclass Boeing777 extends Airplane {\n    // ...\n    getCruisingAltitude() {\n        return this.getMaxAltitude() - this.getPassengerCount();\n    }\n}\n\nclass AirForceOne extends Airplane {\n    // ...\n    getCruisingAltitude() {\n        return this.getMaxAltitude();\n    }\n}\n\nclass Cessna extends Airplane {\n    // ...\n    getCruisingAltitude() {\n        return this.getMaxAltitude() - this.getFuelExpenditure();\n    }\n}\n
\n

Avoid type-checking (part 1)

\n

JavaScript is untyped, which means your functions can take any type of argument.\nSometimes you are bitten by this freedom and it becomes tempting to do\ntype-checking in your functions. There are many ways to avoid having to do this.\nThe first thing to consider is consistent APIs.

\n

Bad:

\n
function travelToTexas(vehicle) {\n    if (vehicle instanceof Bicycle) {\n        vehicle.pedal(this.currentLocation, new Location('texas'));\n    } else if (vehicle instanceof Car) {\n        vehicle.drive(this.currentLocation, new Location('texas'));\n    }\n}\n
\n

Good:

\n
function travelToTexas(vehicle) {\n    vehicle.move(this.currentLocation, new Location('texas'));\n}\n
\n

Avoid type-checking (part 2)

\n

If you are working with basic primitive values like strings and integers,\nand you can't use polymorphism but you still feel the need to type-check,\nyou should consider using TypeScript. It is an excellent alternative to normal\nJavaScript, as it provides you with static typing on top of standard JavaScript\nsyntax. The problem with manually type-checking normal JavaScript is that\ndoing it well requires so much extra verbiage that the faux \"type-safety\" you get\ndoesn't make up for the lost readability. Keep your JavaScript clean, write\ngood tests, and have good code reviews. Otherwise, do all of that but with\nTypeScript (which, like I said, is a great alternative!).

\n

Bad:

\n
function combine(val1, val2) {\n    if ((typeof val1 === 'number' && typeof val2 === 'number') || (typeof val1 === 'string' && typeof val2 === 'string')) {\n        return val1 + val2;\n    }\n\n    throw new Error('Must be of type String or Number');\n}\n
\n

Good:

\n
function combine(val1, val2) {\n    return val1 + val2;\n}\n
\n

Don't over-optimize

\n

Modern browsers do a lot of optimization under-the-hood at runtime. A lot of\ntimes, if you are optimizing then you are just wasting your time. There are good\nresources\nfor seeing where optimization is lacking. Target those in the meantime, until\nthey are fixed if they can be.

\n

Bad:

\n
// On old browsers, each iteration with uncached `list.length` would be costly\n// because of `list.length` recomputation. In modern browsers, this is optimized.\nfor (let i = 0, len = list.length; i < len; i++) {\n    // ...\n}\n
\n

Good:

\n
for (let i = 0; i < list.length; i++) {\n    // ...\n}\n
\n

Remove dead code

\n

Dead code is just as bad as duplicate code. There's no reason to keep it in\nyour codebase. If it's not being called, get rid of it! It will still be safe\nin your version history if you still need it.

\n

Bad:

\n
function oldRequestModule(url) {\n    // ...\n}\n\nfunction newRequestModule(url) {\n    // ...\n}\n\nconst req = newRequestModule;\ninventoryTracker('apples', req, 'www.inventory-awesome.io');\n
\n

Good:

\n
function newRequestModule(url) {\n    // ...\n}\n\nconst req = newRequestModule;\ninventoryTracker('apples', req, 'www.inventory-awesome.io');\n
\n

Objects and Data Structures

\n

Use getters and setters

\n

Using getters and setters to access data on objects could be better than simply\nlooking for a property on an object. \"Why?\" you might ask. Well, here's an\nunorganized list of reasons why:

\n
    \n
  • When you want to do more beyond getting an object property, you don't have\nto look up and change every accessor in your codebase.
    • \n
  • Makes adding validation simple when doing a set.
    • \n
  • Encapsulates the internal representation.
    • \n
  • Easy to add logging and error handling when getting and setting.
    • \n
  • You can lazy load your object's properties, let's say getting it from a\nserver.
    • \n
\n

Bad:

\n
function makeBankAccount() {\n    // ...\n\n    return {\n        balance: 0\n        // ...\n    };\n}\n\nconst account = makeBankAccount();\naccount.balance = 100;\n
\n

Good:

\n
function makeBankAccount() {\n    // this one is private\n    let balance = 0;\n\n    // a \"getter\", made public via the returned object below\n    function getBalance() {\n        return balance;\n    }\n\n    // a \"setter\", made public via the returned object below\n    function setBalance(amount) {\n        // ... validate before updating the balance\n        balance = amount;\n    }\n\n    return {\n        // ...\n        getBalance,\n        setBalance\n    };\n}\n\nconst account = makeBankAccount();\naccount.setBalance(100);\n
\n

Make objects have private members

\n

This can be accomplished through closures (for ES5 and below).

\n

Bad:

\n
const Employee = function (name) {\n    this.name = name;\n};\n\nEmployee.prototype.getName = function getName() {\n    return this.name;\n};\n\nconst employee = new Employee('John Doe');\nconsole.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe\ndelete employee.name;\nconsole.log(`Employee name: ${employee.getName()}`); // Employee name: undefined\n
\n

Good:

\n
function makeEmployee(name) {\n    return {\n        getName() {\n            return name;\n        }\n    };\n}\n\nconst employee = makeEmployee('John Doe');\nconsole.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe\ndelete employee.name;\nconsole.log(`Employee name: ${employee.getName()}`); // Employee name: John Doe\n
\n

Classes

\n

Prefer ES2015/ES6 classes over ES5 plain functions

\n

It's very difficult to get readable class inheritance, construction, and method\ndefinitions for classical ES5 classes. If you need inheritance (and be aware\nthat you might not), then prefer ES2015/ES6 classes. However, prefer small functions over\nclasses until you find yourself needing larger and more complex objects.

\n

Bad:

\n
const Animal = function (age) {\n    if (!(this instanceof Animal)) {\n        throw new Error('Instantiate Animal with `new`');\n    }\n\n    this.age = age;\n};\n\nAnimal.prototype.move = function move() {};\n\nconst Mammal = function (age, furColor) {\n    if (!(this instanceof Mammal)) {\n        throw new Error('Instantiate Mammal with `new`');\n    }\n\n    Animal.call(this, age);\n    this.furColor = furColor;\n};\n\nMammal.prototype = Object.create(Animal.prototype);\nMammal.prototype.constructor = Mammal;\nMammal.prototype.liveBirth = function liveBirth() {};\n\nconst Human = function (age, furColor, languageSpoken) {\n    if (!(this instanceof Human)) {\n        throw new Error('Instantiate Human with `new`');\n    }\n\n    Mammal.call(this, age, furColor);\n    this.languageSpoken = languageSpoken;\n};\n\nHuman.prototype = Object.create(Mammal.prototype);\nHuman.prototype.constructor = Human;\nHuman.prototype.speak = function speak() {};\n
\n

Good:

\n
class Animal {\n    constructor(age) {\n        this.age = age;\n    }\n\n    move() {\n        /* ... */\n    }\n}\n\nclass Mammal extends Animal {\n    constructor(age, furColor) {\n        super(age);\n        this.furColor = furColor;\n    }\n\n    liveBirth() {\n        /* ... */\n    }\n}\n\nclass Human extends Mammal {\n    constructor(age, furColor, languageSpoken) {\n        super(age, furColor);\n        this.languageSpoken = languageSpoken;\n    }\n\n    speak() {\n        /* ... */\n    }\n}\n
\n

Use method chaining

\n

This pattern is very useful in JavaScript and you see it in many libraries such\nas jQuery and Lodash. It allows your code to be expressive, and less verbose.\nFor that reason, I say, use method chaining and take a look at how clean your code\nwill be. In your class functions, simply return this at the end of every function,\nand you can chain further class methods onto it.

\n

Bad:

\n
class Car {\n    constructor(make, model, color) {\n        this.make = make;\n        this.model = model;\n        this.color = color;\n    }\n\n    setMake(make) {\n        this.make = make;\n    }\n\n    setModel(model) {\n        this.model = model;\n    }\n\n    setColor(color) {\n        this.color = color;\n    }\n\n    save() {\n        console.log(this.make, this.model, this.color);\n    }\n}\n\nconst car = new Car('Ford', 'F-150', 'red');\ncar.setColor('pink');\ncar.save();\n
\n

Good:

\n
class Car {\n    constructor(make, model, color) {\n        this.make = make;\n        this.model = model;\n        this.color = color;\n    }\n\n    setMake(make) {\n        this.make = make;\n        // NOTE: Returning this for chaining\n        return this;\n    }\n\n    setModel(model) {\n        this.model = model;\n        // NOTE: Returning this for chaining\n        return this;\n    }\n\n    setColor(color) {\n        this.color = color;\n        // NOTE: Returning this for chaining\n        return this;\n    }\n\n    save() {\n        console.log(this.make, this.model, this.color);\n        // NOTE: Returning this for chaining\n        return this;\n    }\n}\n\nconst car = new Car('Ford', 'F-150', 'red').setColor('pink').save();\n
\n

Prefer composition over inheritance

\n

As stated famously in Design Patterns by the Gang of Four,\nyou should prefer composition over inheritance where you can. There are lots of\ngood reasons to use inheritance and lots of good reasons to use composition.\nThe main point for this maxim is that if your mind instinctively goes for\ninheritance, try to think if composition could model your problem better. In some\ncases it can.

\n

You might be wondering then, \"when should I use inheritance?\" It\ndepends on your problem at hand, but this is a decent list of when inheritance\nmakes more sense than composition:

\n
    \n
  1. Your inheritance represents an \"is-a\" relationship and not a \"has-a\"\nrelationship (Human->Animal vs. User->UserDetails).
    2. \n
  2. You can reuse code from the base classes (Humans can move like all animals).
    3. \n
  3. You want to make global changes to derived classes by changing a base class.\n(Change the caloric expenditure of all animals when they move).
    4. \n
\n

Bad:

\n
class Employee {\n    constructor(name, email) {\n        this.name = name;\n        this.email = email;\n    }\n\n    // ...\n}\n\n// Bad because Employees \"have\" tax data. EmployeeTaxData is not a type of Employee\nclass EmployeeTaxData extends Employee {\n    constructor(ssn, salary) {\n        super();\n        this.ssn = ssn;\n        this.salary = salary;\n    }\n\n    // ...\n}\n
\n

Good:

\n
class EmployeeTaxData {\n    constructor(ssn, salary) {\n        this.ssn = ssn;\n        this.salary = salary;\n    }\n\n    // ...\n}\n\nclass Employee {\n    constructor(name, email) {\n        this.name = name;\n        this.email = email;\n    }\n\n    setTaxData(ssn, salary) {\n        this.taxData = new EmployeeTaxData(ssn, salary);\n    }\n    // ...\n}\n
\n

SOLID

\n

Single Responsibility Principle (SRP)

\n

As stated in Clean Code, \"There should never be more than one reason for a class\nto change\". It's tempting to jam-pack a class with a lot of functionality, like\nwhen you can only take one suitcase on your flight. The issue with this is\nthat your class won't be conceptually cohesive and it will give it many reasons\nto change. Minimizing the amount of times you need to change a class is important.\nIt's important because if too much functionality is in one class and you modify\na piece of it, it can be difficult to understand how that will affect other\ndependent modules in your codebase.

\n

Bad:

\n
class UserSettings {\n    constructor(user) {\n        this.user = user;\n    }\n\n    changeSettings(settings) {\n        if (this.verifyCredentials()) {\n            // ...\n        }\n    }\n\n    verifyCredentials() {\n        // ...\n    }\n}\n
\n

Good:

\n
class UserAuth {\n    constructor(user) {\n        this.user = user;\n    }\n\n    verifyCredentials() {\n        // ...\n    }\n}\n\nclass UserSettings {\n    constructor(user) {\n        this.user = user;\n        this.auth = new UserAuth(user);\n    }\n\n    changeSettings(settings) {\n        if (this.auth.verifyCredentials()) {\n            // ...\n        }\n    }\n}\n
\n

Open/Closed Principle (OCP)

\n

As stated by Bertrand Meyer, \"software entities (classes, modules, functions,\netc.) should be open for extension, but closed for modification.\" What does that\nmean though? This principle basically states that you should allow users to\nadd new functionalities without changing existing code.

\n

Bad:

\n
class AjaxAdapter extends Adapter {\n    constructor() {\n        super();\n        this.name = 'ajaxAdapter';\n    }\n}\n\nclass NodeAdapter extends Adapter {\n    constructor() {\n        super();\n        this.name = 'nodeAdapter';\n    }\n}\n\nclass HttpRequester {\n    constructor(adapter) {\n        this.adapter = adapter;\n    }\n\n    fetch(url) {\n        if (this.adapter.name === 'ajaxAdapter') {\n            return makeAjaxCall(url).then((response) => {\n                // transform response and return\n            });\n        } else if (this.adapter.name === 'nodeAdapter') {\n            return makeHttpCall(url).then((response) => {\n                // transform response and return\n            });\n        }\n    }\n}\n\nfunction makeAjaxCall(url) {\n    // request and return promise\n}\n\nfunction makeHttpCall(url) {\n    // request and return promise\n}\n
\n

Good:

\n
class AjaxAdapter extends Adapter {\n    constructor() {\n        super();\n        this.name = 'ajaxAdapter';\n    }\n\n    request(url) {\n        // request and return promise\n    }\n}\n\nclass NodeAdapter extends Adapter {\n    constructor() {\n        super();\n        this.name = 'nodeAdapter';\n    }\n\n    request(url) {\n        // request and return promise\n    }\n}\n\nclass HttpRequester {\n    constructor(adapter) {\n        this.adapter = adapter;\n    }\n\n    fetch(url) {\n        return this.adapter.request(url).then((response) => {\n            // transform response and return\n        });\n    }\n}\n
\n

Liskov Substitution Principle (LSP)

\n

This is a scary term for a very simple concept. It's formally defined as \"If S\nis a subtype of T, then objects of type T may be replaced with objects of type S\n(i.e., objects of type S may substitute objects of type T) without altering any\nof the desirable properties of that program (correctness, task performed,\netc.).\" That's an even scarier definition.

\n

The best explanation for this is if you have a parent class and a child class,\nthen the base class and child class can be used interchangeably without getting\nincorrect results. This might still be confusing, so let's take a look at the\nclassic Square-Rectangle example. Mathematically, a square is a rectangle, but\nif you model it using the \"is-a\" relationship via inheritance, you quickly\nget into trouble.

\n

Bad:

\n
class Rectangle {\n    constructor() {\n        this.width = 0;\n        this.height = 0;\n    }\n\n    setColor(color) {\n        // ...\n    }\n\n    render(area) {\n        // ...\n    }\n\n    setWidth(width) {\n        this.width = width;\n    }\n\n    setHeight(height) {\n        this.height = height;\n    }\n\n    getArea() {\n        return this.width * this.height;\n    }\n}\n\nclass Square extends Rectangle {\n    setWidth(width) {\n        this.width = width;\n        this.height = width;\n    }\n\n    setHeight(height) {\n        this.width = height;\n        this.height = height;\n    }\n}\n\nfunction renderLargeRectangles(rectangles) {\n    rectangles.forEach((rectangle) => {\n        rectangle.setWidth(4);\n        rectangle.setHeight(5);\n        const area = rectangle.getArea(); // BAD: Returns 25 for Square. Should be 20.\n        rectangle.render(area);\n    });\n}\n\nconst rectangles = [new Rectangle(), new Rectangle(), new Square()];\nrenderLargeRectangles(rectangles);\n
\n

Good:

\n
class Shape {\n    setColor(color) {\n        // ...\n    }\n\n    render(area) {\n        // ...\n    }\n}\n\nclass Rectangle extends Shape {\n    constructor(width, height) {\n        super();\n        this.width = width;\n        this.height = height;\n    }\n\n    getArea() {\n        return this.width * this.height;\n    }\n}\n\nclass Square extends Shape {\n    constructor(length) {\n        super();\n        this.length = length;\n    }\n\n    getArea() {\n        return this.length * this.length;\n    }\n}\n\nfunction renderLargeShapes(shapes) {\n    shapes.forEach((shape) => {\n        const area = shape.getArea();\n        shape.render(area);\n    });\n}\n\nconst shapes = [new Rectangle(4, 5), new Rectangle(4, 5), new Square(5)];\nrenderLargeShapes(shapes);\n
\n

Interface Segregation Principle (ISP)

\n

JavaScript doesn't have interfaces so this principle doesn't apply as strictly\nas others. However, it's important and relevant even with JavaScript's lack of\ntype system.

\n

ISP states that \"Clients should not be forced to depend upon interfaces that\nthey do not use.\" Interfaces are implicit contracts in JavaScript because of\nduck typing.

\n

A good example to look at that demonstrates this principle in JavaScript is for\nclasses that require large settings objects. Not requiring clients to setup\nhuge amounts of options is beneficial, because most of the time they won't need\nall of the settings. Making them optional helps prevent having a\n\"fat interface\".

\n

Bad:

\n
class DOMTraverser {\n    constructor(settings) {\n        this.settings = settings;\n        this.setup();\n    }\n\n    setup() {\n        this.rootNode = this.settings.rootNode;\n        this.settings.animationModule.setup();\n    }\n\n    traverse() {\n        // ...\n    }\n}\n\nconst $ = new DOMTraverser({\n    rootNode: document.getElementsByTagName('body'),\n    animationModule() {} // Most of the time, we won't need to animate when traversing.\n    // ...\n});\n
\n

Good:

\n
class DOMTraverser {\n    constructor(settings) {\n        this.settings = settings;\n        this.options = settings.options;\n        this.setup();\n    }\n\n    setup() {\n        this.rootNode = this.settings.rootNode;\n        this.setupOptions();\n    }\n\n    setupOptions() {\n        if (this.options.animationModule) {\n            // ...\n        }\n    }\n\n    traverse() {\n        // ...\n    }\n}\n\nconst $ = new DOMTraverser({\n    rootNode: document.getElementsByTagName('body'),\n    options: {\n        animationModule() {}\n    }\n});\n
\n

Dependency Inversion Principle (DIP)

\n

This principle states two essential things:

\n
    \n
  1. High-level modules should not depend on low-level modules. Both should\ndepend on abstractions.
    2. \n
  2. Abstractions should not depend upon details. Details should depend on\nabstractions.
    3. \n
\n

This can be hard to understand at first, but if you've worked with AngularJS,\nyou've seen an implementation of this principle in the form of Dependency\nInjection (DI). While they are not identical concepts, DIP keeps high-level\nmodules from knowing the details of its low-level modules and setting them up.\nIt can accomplish this through DI. A huge benefit of this is that it reduces\nthe coupling between modules. Coupling is a very bad development pattern because\nit makes your code hard to refactor.

\n

As stated previously, JavaScript doesn't have interfaces so the abstractions\nthat are depended upon are implicit contracts. That is to say, the methods\nand properties that an object/class exposes to another object/class. In the\nexample below, the implicit contract is that any Request module for an\nInventoryTracker will have a requestItems method.

\n

Bad:

\n
class InventoryRequester {\n    constructor() {\n        this.REQ_METHODS = ['HTTP'];\n    }\n\n    requestItem(item) {\n        // ...\n    }\n}\n\nclass InventoryTracker {\n    constructor(items) {\n        this.items = items;\n\n        // BAD: We have created a dependency on a specific request implementation.\n        // We should just have requestItems depend on a request method: `request`\n        this.requester = new InventoryRequester();\n    }\n\n    requestItems() {\n        this.items.forEach((item) => {\n            this.requester.requestItem(item);\n        });\n    }\n}\n\nconst inventoryTracker = new InventoryTracker(['apples', 'bananas']);\ninventoryTracker.requestItems();\n
\n

Good:

\n
class InventoryTracker {\n    constructor(items, requester) {\n        this.items = items;\n        this.requester = requester;\n    }\n\n    requestItems() {\n        this.items.forEach((item) => {\n            this.requester.requestItem(item);\n        });\n    }\n}\n\nclass InventoryRequesterV1 {\n    constructor() {\n        this.REQ_METHODS = ['HTTP'];\n    }\n\n    requestItem(item) {\n        // ...\n    }\n}\n\nclass InventoryRequesterV2 {\n    constructor() {\n        this.REQ_METHODS = ['WS'];\n    }\n\n    requestItem(item) {\n        // ...\n    }\n}\n\n// By constructing our dependencies externally and injecting them, we can easily\n// substitute our request module for a fancy new one that uses WebSockets.\nconst inventoryTracker = new InventoryTracker(['apples', 'bananas'], new InventoryRequesterV2());\ninventoryTracker.requestItems();\n
\n

Testing

\n

Testing is more important than shipping. If you have no tests or an\ninadequate amount, then every time you ship code you won't be sure that you\ndidn't break anything. Deciding on what constitutes an adequate amount is up\nto your team, but having 100% coverage (all statements and branches) is how\nyou achieve very high confidence and developer peace of mind. This means that\nin addition to having a great testing framework, you also need to use a\ngood coverage tool.

\n

There's no excuse to not write tests. There are plenty of good JS test frameworks, so find one that your team prefers.\nWhen you find one that works for your team, then aim to always write tests\nfor every new feature/module you introduce. If your preferred method is\nTest Driven Development (TDD), that is great, but the main point is to just\nmake sure you are reaching your coverage goals before launching any feature,\nor refactoring an existing one.

\n

Single concept per test

\n

Bad:

\n
import assert from 'assert';\n\ndescribe('MomentJS', () => {\n    it('handles date boundaries', () => {\n        let date;\n\n        date = new MomentJS('1/1/2015');\n        date.addDays(30);\n        assert.equal('1/31/2015', date);\n\n        date = new MomentJS('2/1/2016');\n        date.addDays(28);\n        assert.equal('02/29/2016', date);\n\n        date = new MomentJS('2/1/2015');\n        date.addDays(28);\n        assert.equal('03/01/2015', date);\n    });\n});\n
\n

Good:

\n
import assert from 'assert';\n\ndescribe('MomentJS', () => {\n    it('handles 30-day months', () => {\n        const date = new MomentJS('1/1/2015');\n        date.addDays(30);\n        assert.equal('1/31/2015', date);\n    });\n\n    it('handles leap year', () => {\n        const date = new MomentJS('2/1/2016');\n        date.addDays(28);\n        assert.equal('02/29/2016', date);\n    });\n\n    it('handles non-leap year', () => {\n        const date = new MomentJS('2/1/2015');\n        date.addDays(28);\n        assert.equal('03/01/2015', date);\n    });\n});\n
\n

Concurrency

\n

Use Promises, not callbacks

\n

Callbacks aren't clean, and they cause excessive amounts of nesting. With ES2015/ES6,\nPromises are a built-in global type. Use them!

\n

Bad:

\n
import { get } from 'request';\nimport { writeFile } from 'fs';\n\nget('https://en.wikipedia.org/wiki/Robert_Cecil_Martin', (requestErr, response, body) => {\n    if (requestErr) {\n        console.error(requestErr);\n    } else {\n        writeFile('article.html', body, (writeErr) => {\n            if (writeErr) {\n                console.error(writeErr);\n            } else {\n                console.log('File written');\n            }\n        });\n    }\n});\n
\n

Good:

\n
import { get } from 'request-promise';\nimport { writeFile } from 'fs-extra';\n\nget('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')\n    .then((body) => {\n        return writeFile('article.html', body);\n    })\n    .then(() => {\n        console.log('File written');\n    })\n    .catch((err) => {\n        console.error(err);\n    });\n
\n

Async/Await are even cleaner than Promises

\n

Promises are a very clean alternative to callbacks, but ES2017/ES8 brings async and await\nwhich offer an even cleaner solution. All you need is a function that is prefixed\nin an async keyword, and then you can write your logic imperatively without\na then chain of functions. Use this if you can take advantage of ES2017/ES8 features\ntoday!

\n

Bad:

\n
import { get } from 'request-promise';\nimport { writeFile } from 'fs-extra';\n\nget('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')\n    .then((body) => {\n        return writeFile('article.html', body);\n    })\n    .then(() => {\n        console.log('File written');\n    })\n    .catch((err) => {\n        console.error(err);\n    });\n
\n

Good:

\n
import { get } from 'request-promise';\nimport { writeFile } from 'fs-extra';\n\nasync function getCleanCodeArticle() {\n    try {\n        const body = await get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin');\n        await writeFile('article.html', body);\n        console.log('File written');\n    } catch (err) {\n        console.error(err);\n    }\n}\n\ngetCleanCodeArticle();\n
\n

Error Handling

\n

Thrown errors are a good thing! They mean the runtime has successfully\nidentified when something in your program has gone wrong and it's letting\nyou know by stopping function execution on the current stack, killing the\nprocess (in Node), and notifying you in the console with a stack trace.

\n

Don't ignore caught errors

\n

Doing nothing with a caught error doesn't give you the ability to ever fix\nor react to said error. Logging the error to the console (console.log)\nisn't much better as often times it can get lost in a sea of things printed\nto the console. If you wrap any bit of code in a try/catch it means you\nthink an error may occur there and therefore you should have a plan,\nor create a code path, for when it occurs.

\n

Bad:

\n
try {\n    functionThatMightThrow();\n} catch (error) {\n    console.log(error);\n}\n
\n

Good:

\n
try {\n    functionThatMightThrow();\n} catch (error) {\n    // One option (more noisy than console.log):\n    console.error(error);\n    // Another option:\n    notifyUserOfError(error);\n    // Another option:\n    reportErrorToService(error);\n    // OR do all three!\n}\n
\n

Don't ignore rejected promises

\n

For the same reason you shouldn't ignore caught errors\nfrom try/catch.

\n

Bad:

\n
getdata()\n    .then((data) => {\n        functionThatMightThrow(data);\n    })\n    .catch((error) => {\n        console.log(error);\n    });\n
\n

Good:

\n
getdata()\n    .then((data) => {\n        functionThatMightThrow(data);\n    })\n    .catch((error) => {\n        // One option (more noisy than console.log):\n        console.error(error);\n        // Another option:\n        notifyUserOfError(error);\n        // Another option:\n        reportErrorToService(error);\n        // OR do all three!\n    });\n
\n

Formatting

\n

Formatting is subjective. Like many rules herein, there is no hard and fast\nrule that you must follow. The main point is DO NOT ARGUE over formatting.\nThere are tons of tools to automate this.\nUse one! It's a waste of time and money for engineers to argue over formatting.

\n

For things that don't fall under the purview of automatic formatting\n(indentation, tabs vs. spaces, double vs. single quotes, etc.) look here\nfor some guidance.

\n

Use consistent capitalization

\n

JavaScript is untyped, so capitalization tells you a lot about your variables,\nfunctions, etc. These rules are subjective, so your team can choose whatever\nthey want. The point is, no matter what you all choose, just be consistent.

\n

Bad:

\n
const DAYS_IN_WEEK = 7;\nconst daysInMonth = 30;\n\nconst songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude'];\nconst Artists = ['ACDC', 'Led Zeppelin', 'The Beatles'];\n\nfunction eraseDatabase() {}\nfunction restore_database() {}\n\nclass animal {}\nclass Alpaca {}\n
\n

Good:

\n
const DAYS_IN_WEEK = 7;\nconst DAYS_IN_MONTH = 30;\n\nconst SONGS = ['Back In Black', 'Stairway to Heaven', 'Hey Jude'];\nconst ARTISTS = ['ACDC', 'Led Zeppelin', 'The Beatles'];\n\nfunction eraseDatabase() {}\nfunction restoreDatabase() {}\n\nclass Animal {}\nclass Alpaca {}\n
\n

Function callers and callees should be close

\n

If a function calls another, keep those functions vertically close in the source\nfile. Ideally, keep the caller right above the callee. We tend to read code from\ntop-to-bottom, like a newspaper. Because of this, make your code read that way.

\n

Bad:

\n
class PerformanceReview {\n    constructor(employee) {\n        this.employee = employee;\n    }\n\n    lookupPeers() {\n        return db.lookup(this.employee, 'peers');\n    }\n\n    lookupManager() {\n        return db.lookup(this.employee, 'manager');\n    }\n\n    getPeerReviews() {\n        const peers = this.lookupPeers();\n        // ...\n    }\n\n    perfReview() {\n        this.getPeerReviews();\n        this.getManagerReview();\n        this.getSelfReview();\n    }\n\n    getManagerReview() {\n        const manager = this.lookupManager();\n    }\n\n    getSelfReview() {\n        // ...\n    }\n}\n\nconst review = new PerformanceReview(employee);\nreview.perfReview();\n
\n

Good:

\n
class PerformanceReview {\n    constructor(employee) {\n        this.employee = employee;\n    }\n\n    perfReview() {\n        this.getPeerReviews();\n        this.getManagerReview();\n        this.getSelfReview();\n    }\n\n    getPeerReviews() {\n        const peers = this.lookupPeers();\n        // ...\n    }\n\n    lookupPeers() {\n        return db.lookup(this.employee, 'peers');\n    }\n\n    getManagerReview() {\n        const manager = this.lookupManager();\n    }\n\n    lookupManager() {\n        return db.lookup(this.employee, 'manager');\n    }\n\n    getSelfReview() {\n        // ...\n    }\n}\n\nconst review = new PerformanceReview(employee);\nreview.perfReview();\n
\n

Comments

\n

Only comment things that have business logic complexity.

\n

Comments are an apology, not a requirement. Good code mostly documents itself.

\n

Bad:

\n
function hashIt(data) {\n    // The hash\n    let hash = 0;\n\n    // Length of string\n    const length = data.length;\n\n    // Loop through every character in data\n    for (let i = 0; i < length; i++) {\n        // Get character code.\n        const char = data.charCodeAt(i);\n        // Make the hash\n        hash = (hash << 5) - hash + char;\n        // Convert to 32-bit integer\n        hash &= hash;\n    }\n}\n
\n

Good:

\n
function hashIt(data) {\n    let hash = 0;\n    const length = data.length;\n\n    for (let i = 0; i < length; i++) {\n        const char = data.charCodeAt(i);\n        hash = (hash << 5) - hash + char;\n\n        // Convert to 32-bit integer\n        hash &= hash;\n    }\n}\n
\n

Don't leave commented out code in your codebase

\n

Version control exists for a reason. Leave old code in your history.

\n

Bad:

\n
doStuff();\n// doOtherStuff();\n// doSomeMoreStuff();\n// doSoMuchStuff();\n
\n

Good:

\n
doStuff();\n
\n

Don't have journal comments

\n

Remember, use version control! There's no need for dead code, commented code,\nand especially journal comments. Use git log to get history!

\n

Bad:

\n
/**\n * 2016-12-20: Removed monads, didn't understand them (RM)\n * 2016-10-01: Improved using special monads (JP)\n * 2016-02-03: Removed type-checking (LI)\n * 2015-03-14: Added combine with type-checking (JR)\n */\nfunction combine(a, b) {\n    return a + b;\n}\n
\n

Good:

\n
function combine(a, b) {\n    return a + b;\n}\n
\n

Avoid positional markers

\n

They usually just add noise. Let the functions and variable names along with the\nproper indentation and formatting give the visual structure to your code.

\n

Bad:

\n
////////////////////////////////////////////////////////////////////////////////\n// Scope Model Instantiation\n////////////////////////////////////////////////////////////////////////////////\n$scope.model = {\n    menu: 'foo',\n    nav: 'bar'\n};\n\n////////////////////////////////////////////////////////////////////////////////\n// Action setup\n////////////////////////////////////////////////////////////////////////////////\nconst actions = function () {\n    // ...\n};\n
\n

Good:

\n
$scope.model = {\n    menu: 'foo',\n    nav: 'bar'\n};\n\nconst actions = function () {\n    // ...\n};\n
\n

Translation

\n

This is also available in other languages:

\n"},{"url":"/docs/javascript/this-is-about-this/","relativePath":"docs/javascript/this-is-about-this.md","relativeDir":"docs/javascript","base":"this-is-about-this.md","name":"this-is-about-this","frontmatter":{"title":"WhatisTHIS","weight":0,"excerpt":"Arrow functions are great because the inner value of this cant be changed, its *always* the same as the outer this.","seo":{"title":"This in JavaScript","description":"Arrow functions are great because the inner value of this cant be changed, its *always* the same as the outer this.","robots":[],"extra":[]},"template":"docs"},"html":"

What is THIS

\n

If the function is defined as an arrow function: #

\n
const arrowFunction = () => {  console.log(this);};\n
\n

In this case, the value of this is always the same as this in the parent scope:

\n
const outerThis = this;const arrowFunction = () => {  // Always logs `true`:  console.log(this === outerThis);};\n
\n

Arrow functions are great because the inner value of this can't be changed, it's always the same as the outer this.

\n

Other examples #

\n

With arrow functions, the value of this can't be changed with bind:

\n
// Logs `true` - bound `this` value is ignored:arrowFunction.bind({foo: 'bar'})();\n
\n

With arrow functions, the value of this can't be changed with call or apply:

\n
// Logs `true` - called `this` value is ignored:arrowFunction.call({foo: 'bar'});// Logs `true` - applied `this` value is ignored:arrowFunction.apply({foo: 'bar'});\n
\n

With arrow functions, the value of this can't be changed by calling the function as a member of another object:

\n
const obj = {arrowFunction};// Logs `true` - parent object is ignored:obj.arrowFunction();\n
\n

With arrow functions, the value of this can't be changed by calling the function as a constructor:

\n
// TypeError: arrowFunction is not a constructornew arrowFunction();\n
\n

'Bound' instance methods #

\n

With instance methods, if you want to ensure this always refers to the class instance, the best way is to use arrow functions and class fields:

\n
class Whatever {  someMethod = () => {    // Always the instance of Whatever:    console.log(this);  };}\n
\n

This pattern is really useful when using instance methods as event listeners in components (such as React components, or web components).

\n

The above might feel like it's breaking the \"this will be the same as this in the parent scope\" rule, but it starts to make sense if you think of class fields as syntactic sugar for setting things in the constructor:

\n
class Whatever {  someMethod = (() => {    const outerThis = this;    return () => {      // Always logs `true`:      console.log(this === outerThis);    };  })();}// ...is roughly equivalent to:class Whatever {  constructor() {    const outerThis = this;    this.someMethod = () => {      // Always logs `true`:      console.log(this === outerThis);    };  }}\n
\n

Alternative pattens involve binding an existing function in the constructor, or assigning the function in the constructor. If you can't use class fields for some reason, assigning functions in the constructor is a reasonable alternative:

\n
class Whatever {  constructor() {    this.someMethod = () => {      // ...    };  }}\n
\n

Otherwise, if the function/class is called with new: #

\n
new Whatever();\n
\n

The above will call Whatever (or its constructor function if it's a class) with this set to the result of Object.create(Whatever.prototype).

\n
class MyClass {  constructor() {    console.log(      this.constructor === Object.create(MyClass.prototype).constructor,    );  }}// Logs `true`:new MyClass();\n
\n

The same is true for older-style constructors:

\n
function MyClass() {  console.log(    this.constructor === Object.create(MyClass.prototype).constructor,  );}// Logs `true`:new MyClass();\n
\n

Other examples #

\n

When called with new, the value of this can't be changed with bind:

\n
const BoundMyClass = MyClass.bind({foo: 'bar'});// Logs `true` - bound `this` value is ignored:new BoundMyClass();\n
\n

When called with new, the value of this can't be changed by calling the function as a member of another object:

\n
const obj = {MyClass};// Logs `true` - parent object is ignored:new obj.MyClass();\n
\n

Otherwise, if the function has a 'bound' this value: #

\n
function someFunction() {  return this;}const boundObject = {hello: 'world'};const boundFunction = someFunction.bind(boundObject);\n
\n

Whenever boundFunction is called, its this value will be the object passed to bind (boundObject).

\n
// Logs `false`:console.log(someFunction() === boundObject);// Logs `true`:console.log(boundFunction() === boundObject);\n
\n

Warning: Avoid using bind to bind a function to its outer this. Instead, use arrow functions, as they make this clear from the function declaration, rather than something that happens later in the code.

\n

Don't use bind to set this to some value unrelated to the parent object; it's usually unexpected and it's why this gets such a bad reputation. Consider passing the value as an argument instead; it's more explicit, and works with arrow functions.

\n

Other examples #

\n

When calling a bound function, the value of this can't be changed with call or apply:

\n
// Logs `true` - called `this` value is ignored:console.log(boundFunction.call({foo: 'bar'}) === boundObject);// Logs `true` - applied `this` value is ignored:console.log(boundFunction.apply({foo: 'bar'}) === boundObject);\n
\n

When calling a bound function, the value of this can't be changed by calling the function as a member of another object:

\n
const obj = {boundFunction};// Logs `true` - parent object is ignored:console.log(obj.boundFunction() === boundObject);\n
\n

Otherwise, if this is set at call-time: #

\n
function someFunction() {  return this;}const someObject = {hello: 'world'};// Logs `true`:console.log(someFunction.call(someObject) === someObject);// Logs `true`:console.log(someFunction.apply(someObject) === someObject);\n
\n

The value of this is the object passed to call/apply.

\n

Warning: Don't use call/apply to set this to some value unrelated to the parent object; it's usually unexpected and it's why this gets such a bad reputation. Consider passing the value as an argument instead; it's more explicit, and works with arrow functions.

\n

Unfortunately this is set to some other value by things like DOM event listeners, and using it can result in difficult-to-understand code:

\n

Don't

\n
element.addEventListener('click', function (event) {  // Logs `element`, since the DOM spec sets `this` to  // the element the handler is attached to.  console.log(this);});\n
\n

I avoid using this in cases like above, and instead:

\n

Do

\n
element.addEventListener('click', (event) => {  // Ideally, grab it from a parent scope:  console.log(element);  // But if you can't do that, get it from the event object:  console.log(event.currentTarget);});\n
\n

Otherwise, if the function is called via a parent object (parent.func()): #

\n
const obj = {  someMethod() {    return this;  },};// Logs `true`:console.log(obj.someMethod() === obj);\n
\n

In this case the function is called as a member of obj, so this will be obj. This happens at call-time, so the link is broken if the function is called without its parent object, or with a different parent object:

\n
const {someMethod} = obj;// Logs `false`:console.log(someMethod() === obj);const anotherObj = {someMethod};// Logs `false`:console.log(anotherObj.someMethod() === obj);// Logs `true`:console.log(anotherObj.someMethod() === anotherObj);\n
\n

someMethod() === obj is false because someMethod isn't called as a member of obj. You might have encountered this gotcha when trying something like this:

\n
const $ = document.querySelector;// TypeError: Illegal invocationconst el = $('.some-element');\n
\n

This breaks because the implementation of querySelector looks at its own this value and expects it to be a DOM node of sorts, and the above breaks that connection. To achieve the above correctly:

\n
const $ = document.querySelector.bind(document);// Or:const $ = (...args) => document.querySelector(...args);\n
\n

Fun fact: Not all APIs use this internally. Console methods like console.log were changed to avoid this references, so log doesn't need to be bound to console.

\n

Warning: Don't transplant a function onto an object just to set this to some value unrelated to the parent object; it's usually unexpected and it's why this gets such a bad reputation. Consider passing the value as an argument instead; it's more explicit, and works with arrow functions.

\n

Otherwise, if the function or parent scope is in strict mode: #

\n
function someFunction() {  'use strict';  return this;}// Logs `true`:console.log(someFunction() === undefined);\n
\n

In this case, the value of this is undefined. 'use strict' isn't needed in the function if the parent scope is in strict mode (and all modules are in strict mode).

\n

Warning: Don't rely on this. I mean, there are easier ways to get an undefined value 😀.

\n

Otherwise: #

\n
function someFunction() {  return this;}// Logs `true`:console.log(someFunction() === globalThis);\n
\n

In this case, the value of this is the same as globalThis.

"},{"url":"/docs/leetcode/004._Median_of_Two_Sorted_Arrays/","relativePath":"docs/leetcode/004._Median_of_Two_Sorted_Arrays.md","relativeDir":"docs/leetcode","base":"004._Median_of_Two_Sorted_Arrays.md","name":"004._Median_of_Two_Sorted_Arrays","frontmatter":{"title":"004._Median_of_Two_Sorted_Arrays","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

4. Median of Two Sorted Arrays

\n

Problem:

\n

There are two sorted arrays nums1 and nums2 of size m and n respectively.

\n

Find the median of the two sorted arrays. The overall run time complexity should be O(log (m+n)).

\n

Example 1:

\n
nums1 = [1, 3]\nnums2 = [2]\n\nThe median is 2.0\n
\n

Example 2:

\n
nums1 = [1, 2]\nnums2 = [3, 4]\n\nThe median is (2 + 3)/2 = 2.5\n
\n

Solution:

\n

O(log (m+n)) means half of the sequence is ruled out on each loop. So obviously we need binary search.

\n

To do it on two sorted arrays, we need a formula to guide division.

\n

Let nums3 be the sorted array combining all the items in nums1 and nums2.

\n

If nums2[j-1] <= nums1[i] <= nums2[j], then we know nums1[i] is at num3[i+j]. Same goes nums1[i-1] <= nums2[j] <= nums1[i].

\n

Let k be ⌊(m+n-1)/2⌋. We need to find nums3[k] (and also nums3[k+1] if m+n is even).

\n

Let i + j = k, if we find nums2[j-1] <= nums1[i] <= nums2[j] or nums1[i-1] <= nums2[j] <= nums1[i], then we got k.

\n

Otherwise, if nums1[i] <= nums2[j] then we know nums1[i] < nums2[j-1] (because we did not find k).

\n
    \n
  • There are i items before nums1[i], and j-1 items brefor nums2[j-1], which means nums1[0...i] are before nums3[i+j-1]. So we now know nums1[0...i] < nums3[k]. They can be safely discarded.
    • \n
  • We Also have nums1[i] < nums2[j], which means nums2[j...n) are after nums3[i+j]. So nums2[j...n) > nums3[k].
    • \n
\n

Same goes nums1[i-1] <= nums2[j] <= nums1[i].

\n
/**\n * @param {number[]} nums1\n * @param {number[]} nums2\n * @return {number}\n */\nlet findMedianSortedArrays = function (nums1, nums2) {\n  const mid = ((nums1.length + nums2.length - 1) / 2) | 0;\n\n  if ((nums1.length + nums2.length) % 2 === 0) {\n    return (_find(nums1, nums2, mid) + _find(nums1, nums2, mid + 1)) / 2;\n  }\n\n  return _find(nums1, nums2, mid);\n};\n\nfunction _find(nums1, nums2, k) {\n  if (nums1.length > nums2.length) {\n    // So that the `i` below is always smalller than k,\n    // which makes `j` always non-negative\n    [nums1, nums2] = [nums2, nums1];\n  }\n  let s1 = 0;\n  let s2 = 0;\n  let e1 = nums1.length;\n  let e2 = nums2.length;\n\n  while (s1 < e1 || s2 < e2) {\n    const i = s1 + (((e1 - s1) / 2) | 0);\n    const j = k - i;\n    const ni = i >= e1 ? Infinity : nums1[i];\n    const nj = j >= e2 ? Infinity : nums2[j];\n    const ni_1 = i <= 0 ? -Infinity : nums1[i - 1];\n    const nj_1 = j <= 0 ? -Infinity : nums2[j - 1];\n\n    if (nj_1 <= ni && ni <= nj) {\n      return ni;\n    }\n\n    if (ni_1 <= nj && nj <= ni) {\n      return nj;\n    }\n\n    if (ni <= nj) {\n      s1 = i + 1;\n      e2 = j;\n    } else {\n      s2 = j + 1;\n      e1 = i;\n    }\n  }\n}\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/006._ZigZag_Conversion/","relativePath":"docs/leetcode/006._ZigZag_Conversion.md","relativeDir":"docs/leetcode","base":"006._ZigZag_Conversion.md","name":"006._ZigZag_Conversion","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

6. ZigZag Conversion

\n

Problem:

\n

The string \"PAYPALISHIRING\" is written in a zigzag pattern on a given number of rows like this: (you may want to display this pattern in a fixed font for better legibility)

\n
P   A   H   N\nA P L S I I G\nY   I   R\n
\n

And then read line by line: \"PAHNAPLSIIGYIR\"

\n

Write the code that will take a string and make this conversion given a number of rows:

\n
string convert(string s, int numRows);\n
\n

Example 1:

\n
Input: s = \"PAYPALISHIRING\", numRows = 3\nOutput: \"PAHNAPLSIIGYIR\"\n
\n

Example 2:

\n
Input: s = \"PAYPALISHIRING\", numRows = 4\nOutput: \"PINALSIGYAHRPI\"\nExplanation:\n\nP     I    N\nA   L S  I G\nY A   H R\nP     I\n
\n

Solution:

\n

Squeeze the zigzag pattern horizontally to form a matrix. Now deal with the odd and even columns respectively.

\n

For example let numRows be 5, if we list out the indecies:

\n
row\n 1    00    08    16\n 2    01 07 09 15 17\n 3    02 06 10 14 18\n 4    03 05 11 13 19\n 5    04    12    20\n
\n

First calculate the matrix width:

\n
pairs = floor( len(s) / (numRows + numRows - 2) )\nwidth = pairs * 2 + ceil( (len(s) - pairs * (numRows + numRows - 2)) / numRows )\n
\n

We can easily make a observation that the direction of odd and even columns and different.

\n

Let the first column be index 0 and let i be the current position at column col.

\n

We need to count the items between matrix[row][col] and matrix[row][col+1], exclusive.

\n
next_i = i + (numRows - row) + (numRows - row), if col is even && 1 < row < numRows\nnext_i = i + row - 2 + row, if col is odd && 1 < row < numRows\n
\n

If row == 1 or row == numRows, skip the odd columns.

\n
next_i = i + numRows + (numRows - 2), if col is even && (row == 1 || row == numRows)\n
\n
/**\n * @param {string} s\n * @param {number} numRows\n * @return {string}\n */\nlet convert = function (s, numRows) {\n  if (numRows <= 1) {\n    return s;\n  }\n\n  const pairs = Math.floor(s.length / (numRows + numRows - 2));\n  const width =\n    pairs * 2 +\n    Math.ceil((s.length - pairs * (numRows + numRows - 2)) / numRows);\n\n  let result = \"\";\n\n  for (let row = 1; row <= numRows; row++) {\n    let i = row - 1;\n    result += s[i] || \"\";\n    for (let col = 0; col < width; col++) {\n      if (row === 1 || row === numRows) {\n        if (col % 2 === 0) {\n          i += numRows + (numRows - 2);\n        } else {\n          continue;\n        }\n      } else {\n        if (col % 2 === 0) {\n          i += numRows - row + (numRows - row);\n        } else {\n          i += row - 2 + row;\n        }\n      }\n      result += s[i] || \"\";\n    }\n  }\n\n  return result;\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/009._Palindrome_Number/","relativePath":"docs/leetcode/009._Palindrome_Number.md","relativeDir":"docs/leetcode","base":"009._Palindrome_Number.md","name":"009._Palindrome_Number","frontmatter":{"title":"009._Palindrome_Number","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

9. Palindrome Number

\n

Problem:

\n

Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same backward as forward.

\n

Example 1:

\n
Input: 121\nOutput: true\n
\n

Example 2:

\n
Input: -121\nOutput: false\nExplanation: From left to right, it reads -121. From right to left, it becomes 121-. Therefore it is not a palindrome.\n
\n

Example 3:

\n
Input: 10\nOutput: false\nExplanation: Reads 01 from right to left. Therefore it is not a palindrome.\n
\n

Follow up:

\n

Coud you solve it without converting the integer to a string?

\n

Solution:

\n

ONE

\n

Easy to write but slow since it generates an array.

\n
/**\n * @param {number} x\n * @return {boolean}\n */\nlet isPalindrome = function (x) {\n  return x == String(x).split(\"\").reverse().join(\"\");\n};\n
\n

TWO

\n

A bit faster.

\n
/**\n * @param {number} x\n * @return {boolean}\n */\nlet isPalindrome = function (x) {\n  const s = String(x);\n  for (let i = 0, j = s.length - 1; i < j; i++, j--) {\n    if (s[i] !== s[j]) {\n      return false;\n    }\n  }\n  return true;\n};\n
\n

THREE

\n

General solution. Combining 7. Reverse Integer.

\n
/**\n * @param {number} x\n * @return {boolean}\n */\nlet isPalindrome = function (x) {\n  if (x < 0) {\n    return false;\n  }\n  return x === reverse(x);\n};\n\n/**\n * @param {number} x\n * @return {number}\n */\nfunction reverse(x) {\n  let result = 0;\n  while (x) {\n    result = result * 10 + (x % 10);\n    x = (x / 10) | 0;\n  }\n  return result;\n}\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/008._String_to_Integer_(atoi)/","relativePath":"docs/leetcode/008._String_to_Integer_(atoi).md","relativeDir":"docs/leetcode","base":"008._String_to_Integer_(atoi).md","name":"008._String_to_Integer_(atoi)","frontmatter":{"title":"008._String_to_Integer","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

8. String to Integer (atoi)

\n

Problem:

\n

Implement atoi which converts a string to an integer.

\n

The function first discards as many whitespace characters as necessary until the first non-whitespace character is found. Then, starting from this character, takes an optional initial plus or minus sign followed by as many numerical digits as possible, and interprets them as a numerical value.

\n

The string can contain additional characters after those that form the integral number, which are ignored and have no effect on the behavior of this function.

\n

If the first sequence of non-whitespace characters in str is not a valid integral number, or if no such sequence exists because either str is empty or it contains only whitespace characters, no conversion is performed.

\n

If no valid conversion could be performed, a zero value is returned.

\n

Note:

\n

Only the space character ' ' is considered as whitespace character.\nAssume we are dealing with an environment which could only store integers within the 32-bit signed integer range: [−231, 231 − 1]. If the numerical value is out of the range of representable values, INTMAX (231 − 1) or INTMIN (−231) is returned.

\n

Example 1:

\n
Input: \"42\"\nOutput: 42\n
\n

Example 2:

\n
Input: \"   -42\"\nOutput: -42\nExplanation: The first non-whitespace character is '-', which is the minus sign.\n             Then take as many numerical digits as possible, which gets 42.\n
\n

Example 3:

\n
Input: \"4193 with words\"\nOutput: 4193\nExplanation: Conversion stops at digit '3' as the next character is not a numerical digit.\n
\n

Example 4:

\n
Input: \"words and 987\"\nOutput: 0\nExplanation: The first non-whitespace character is 'w', which is not a numerical\n             digit or a +/- sign. Therefore no valid conversion could be performed.\n
\n

Example 5:

\n
Input: \"-91283472332\"\nOutput: -2147483648\nExplanation: The number \"-91283472332\" is out of the range of a 32-bit signed integer.\n             Thefore INT_MIN (−231) is returned.\n
\n

Solution:

\n

ONE

\n
/**\n * @param {string} str\n * @return {number}\n */\nlet myAtoi = function (str) {\n  return Math.min(2147483647, Math.max(-2147483648, parseInt(str))) || 0;\n};\n
\n

TWO

\n

Looks like Number() is faster than parseInt().

\n
/**\n * @param {string} str\n * @return {number}\n */\nlet myAtoi = function (str) {\n  return Math.min(\n    2147483647,\n    Math.max(-2147483648, (/^ *[-+]?\\d+/.exec(str) || [0])[0])\n  );\n};\n
\n

THREE

\n

General solution.

\n
/**\n * @param {string} str\n * @return {number}\n */\nlet myAtoi = function (str) {\n  let sign = 1;\n  let i = 0;\n\n  while (i < str.length) {\n    const cc = str.charCodeAt(i++);\n    if (cc === 45) {\n      // -\n      sign = -1;\n      break;\n    } else if (cc === 43) {\n      // +\n      break;\n    } else if (cc >= 48 && cc <= 57) {\n      // 0-9\n      i--;\n      break;\n    } else if (cc !== 32) {\n      // space\n      return 0;\n    }\n  }\n\n  let result = 0;\n  while (i < str.length) {\n    const digit = str.charCodeAt(i++) - 48;\n    if (digit < 0 || digit > 9) {\n      break;\n    }\n    result = result * 10 + digit;\n  }\n\n  return Math.min(2147483647, Math.max(-2147483648, result * sign));\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/javascript/promises/","relativePath":"docs/javascript/promises.md","relativeDir":"docs/javascript","base":"promises.md","name":"promises","frontmatter":{"title":"Promises","weight":0,"excerpt":"Promises","seo":{"title":"Promises","description":"JavaScript is single threaded, meaning that two bits of script cannot run at the same time; they have to run one after another.","robots":[],"extra":[]},"template":"docs"},"html":"

Promises

\n

JavaScript is single threaded, meaning that two bits of script cannot run at the same time; they have to run one after another. In browsers, JavaScript shares a thread with a load of other stuff that differs from browser to browser. But typically JavaScript is in the same queue as painting, updating styles, and handling user actions (such as highlighting text and interacting with form controls). Activity in one of these things delays the others.

\n

As a human being, you're multithreaded. You can type with multiple fingers, you can drive and hold a conversation at the same time. The only blocking function we have to deal with is sneezing, where all current activity must be suspended for the duration of the sneeze. That's pretty annoying, especially when you're driving and trying to hold a conversation. You don't want to write code that's sneezy.

\n

You've probably used events and callbacks to get around this. Here are events:

\n
var img1 = document.querySelector('.img-1');\nimg1.addEventListener('load', function() {  \n// woo yey image loaded\n});\nimg1.addEventListener('error', function() {  \n// argh everything's broken\n});\n
\n

This isn't sneezy at all. We get the image, add a couple of listeners, then JavaScript can stop executing until one of those listeners is called.

\n

Unfortunately, in the example above, it's possible that the events happened before we started listening for them, so we need to work around that using the \"complete\" property of images:

\n
var img1 = document.querySelector('.img-1');\nfunction loaded() {  \n// woo yey image loaded}if (img1.complete) {  \nloaded();\n}else {  \nimg1.addEventListener('load', loaded);\n}img1.addEventListener('error', function() {  \n// argh everything's broken\n});\n
\n

This doesn't catch images that errored before we got a chance to listen for them; unfortunately the DOM doesn't give us a way to do that. Also, this is loading one image. Things get even more complex if we want to know when a set of images have loaded.

\n

Events aren't always the best way #

\n

Events are great for things that can happen multiple times on the same object---keyup, touchstart etc. With those events you don't really care about what happened before you attached the listener. But when it comes to async success/failure, ideally you want something like this:

\n
img1.callThisIfLoadedOrWhenLoaded(function() {  \n// loaded}).orIfFailedCallThis(function() {  \n// failed\n});\n// and...whenAllTheseHaveLoaded([img1, img2]).callThis(function() {  \n// all loaded}).orIfSomeFailedCallThis(function() {  \n// one or more failed\n});\n
\n

This is what promises do, but with better naming. If HTML image elements had a \"ready\" method that returned a promise, we could do this:

\n
img1.ready().then(function() {  \n// loaded}, function() {  \n// failed\n});\n// and...Promise.all([img1.ready(), img2.ready()]).then(function() {  \n// all loaded}, function() {  \n// one or more failed\n});\n
\n

At their most basic, promises are a bit like event listeners except:

\n
    \n
  • A promise can only succeed or fail once. It cannot succeed or fail twice, neither can it switch from success to failure or vice versa.
    • \n
  • If a promise has succeeded or failed and you later add a success/failure callback, the correct callback will be called, even though the event took place earlier.
    • \n
\n

This is extremely useful for async success/failure, because you're less interested in the exact time something became available, and more interested in reacting to the outcome.

\n

Promise terminology #

\n

Domenic Denicola proof read the first draft of this article and graded me \"F\" for terminology. He put me in detention, forced me to copy out States and Fates 100 times, and wrote a worried letter to my parents. Despite that, I still get a lot of the terminology mixed up, but here are the basics:

\n

A promise can be:

\n
    \n
  • fulfilled - The action relating to the promise succeeded
    • \n
  • rejected - The action relating to the promise failed
    • \n
  • pending - Hasn't fulfilled or rejected yet
    • \n
  • settled - Has fulfilled or rejected
    • \n
\n

The spec also uses the term thenable to describe an object that is promise-like, in that it has a then method. This term reminds me of ex-England Football Manager Terry Venables so I'll be using it as little as possible.

\n

Promises arrive in JavaScript! #

\n

Promises have been around for a while in the form of libraries, such as:

\n\n

The above and JavaScript promises share a common, standardized behaviour called Promises/A+. If you're a jQuery user, they have something similar called Deferreds. However, Deferreds aren't Promise/A+ compliant, which makes them subtly different and less useful, so beware. jQuery also has a Promise type, but this is just a subset of Deferred and has the same issues.

\n

Although promise implementations follow a standardized behaviour, their overall APIs differ. JavaScript promises are similar in API to RSVP.js. Here's how you create a promise:

\n
var promise = new Promise(function(resolve, reject) {  \n// do a thing, possibly async, then...  if (/* everything turned out fine */) {  \n  resolve(\"Stuff worked!\");\n  }  else {  \n  reject(Error(\"It broke\"));\n  }\n});\n
\n

The promise constructor takes one argument, a callback with two parameters, resolve and reject. Do something within the callback, perhaps async, then call resolve if everything worked, otherwise call reject.

\n

Like throw in plain old JavaScript, it's customary, but not required, to reject with an Error object. The benefit of Error objects is they capture a stack trace, making debugging tools more helpful.

\n

Here's how you use that promise:

\n
promise.then(function(result) {  \nconsole.log(result);\n // \"Stuff worked!\"}, function(err) {  \nconsole.log(err);\n // Error: \"It broke\"\n});\n
\n

then() takes two arguments, a callback for a success case, and another for the failure case. Both are optional, so you can add a callback for the success or failure case only.

\n

JavaScript promises started out in the DOM as \"Futures\", renamed to \"Promises\", and finally moved into JavaScript. Having them in JavaScript rather than the DOM is great because they'll be available in non-browser JS contexts such as Node.js (whether they make use of them in their core APIs is another question).

\n

Although they're a JavaScript feature, the DOM isn't afraid to use them. In fact, all new DOM APIs with async success/failure methods will use promises. This is happening already with Quota Management, Font Load Events, ServiceWorker, Web MIDI, Streams, and more.

\n

Browser support & polyfill #

\n

There are already implementations of promises in browsers today.

\n

As of Chrome 32, Opera 19, Firefox 29, Safari 8 & Microsoft Edge, promises are enabled by default.

\n

To bring browsers that lack a complete promises implementation up to spec compliance, or add promises to other browsers and Node.js, check out the polyfill (2k gzipped).

\n

Compatibility with other libraries #

\n

The JavaScript promises API will treat anything with a then() method as promise-like (or thenable in promise-speak sigh), so if you use a library that returns a Q promise, that's fine, it'll play nice with the new JavaScript promises.

\n

Although, as I mentioned, jQuery's Deferreds are a bit ... unhelpful. Thankfully you can cast them to standard promises, which is worth doing as soon as possible:

\n
var jsPromise = Promise.resolve($.ajax('/whatever.json'))\n
\n

Here, jQuery's $.ajax returns a Deferred. Since it has a then() method, Promise.resolve() can turn it into a JavaScript promise. However, sometimes deferreds pass multiple arguments to their callbacks, for example:

\n
var jqDeferred = $.ajax('/whatever.json');\njqDeferred.then(function(response, statusText, xhrObj) {  \n// ...}, function(xhrObj, textStatus, err) {  \n// ...})\n
\n

Whereas JS promises ignore all but the first:

\n
jsPromise.then(function(response) {  \n// ...}, function(xhrObj) {  \n// ...})\n
\n

Thankfully this is usually what you want, or at least gives you access to what you want. Also, be aware that jQuery doesn't follow the convention of passing Error objects into rejections.

\n

Complex async code made easier #

\n

Right, let's code some things. Say we want to:

\n
    \n
  1. Start a spinner to indicate loading
    2. \n
  2. Fetch some JSON for a story, which gives us the title, and urls for each chapter
    3. \n
  3. Add title to the page
    4. \n
  4. Fetch each chapter
    5. \n
  5. Add the story to the page
    6. \n
  6. Stop the spinner
    7. \n
\n

... but also tell the user if something went wrong along the way. We'll want to stop the spinner at that point too, else it'll keep on spinning, get dizzy, and crash into some other UI.

\n

Of course, you wouldn't use JavaScript to deliver a story, serving as HTML is faster, but this pattern is pretty common when dealing with APIs: Multiple data fetches, then do something when it's all done.

\n

To start with, let's deal with fetching data from the network:

\n

Promisifying XMLHttpRequest #

\n

Old APIs will be updated to use promises, if it's possible in a backwards compatible way. XMLHttpRequest is a prime candidate, but in the mean time let's write a simple function to make a GET request:

\n
function get(url) {\n  // Return a new promise.\n  return new Promise(function(resolve, reject) {\n    // Do the usual XHR stuff\n    var req = new XMLHttpRequest();\n\n    req.open('GET', url);\n\n\n    req.onload = function() {\n      // This is called even on 404 etc\n      // so check the status\n      if (req.status == 200) {\n        // Resolve the promise with the response text\n        resolve(req.response);\n\n      }\n      else {\n        // Otherwise reject with the status text\n        // which will hopefully be a meaningful error\n        reject(Error(req.statusText));\n\n      }\n    };\n\n    // Handle network errors\n    req.onerror = function() {\n      reject(Error(\"Network Error\"));\n\n    };\n\n    // Make the request\n    req.send();\n\n  \n});\n\n}\n
\n

Now let's use it:

\n
get('story.json').then(function(response) {\n  console.log(\"Success!\", response);\n\n}, function(error) {\n  console.error(\"Failed!\", error);\n\n})\n
\n

Now we can make HTTP requests without manually typing XMLHttpRequest, which is great, because the less I have to see the infuriating camel-casing of XMLHttpRequest, the happier my life will be.

\n

Chaining #

\n

then() isn't the end of the story, you can chain thens together to transform values or run additional async actions one after another.

\n

Transforming values #

\n

You can transform values simply by returning the new value:

\n
var promise = new Promise(function(resolve, reject) {\n  resolve(1);\n\n\n});\n\n\npromise.then(function(val) {\n  console.log(val);\n // 1\n  return val + 2;\n}).then(function(val) {\n  console.log(val);\n // 3\n})\n
\n

As a practical example, let's go back to:

\n
get('story.json').then(function(response) {\n  console.log(\"Success!\", response);\n\n})\n
\n

The response is JSON, but we're currently receiving it as plain text. We could alter our get function to use the JSON responseType, but we could also solve it in promises land:

\n
get('story.json').then(function(response) {\n  return JSON.parse(response);\n\n}).then(function(response) {\n  console.log(\"Yey JSON!\", response);\n\n})\n
\n

Since JSON.parse() takes a single argument and returns a transformed value, we can make a shortcut:

\n
get('story.json').then(JSON.parse).then(function(response) {\n  console.log(\"Yey JSON!\", response);\n\n})\n
\n

In fact, we could make a getJSON() function really easily:

\n
function getJSON(url) {  \nreturn get(url).then(JSON.parse);\n}\n
\n

getJSON() still returns a promise, one that fetches a url then parses the response as JSON.

\n

Queuing asynchronous actions #

\n

You can also chain thens to run async actions in sequence.

\n

When you return something from a then() callback, it's a bit magic. If you return a value, the next then() is called with that value. However, if you return something promise-like, the next then() waits on it, and is only called when that promise settles (succeeds/fails). For example:

\n
getJSON('story.json').then(function(story) {  \nreturn getJSON(story.chapterUrls[0]);\n}).then(function(chapter1) {  \nconsole.log(\"Got chapter 1!\", chapter1);\n})\n
\n

Here we make an async request to story.json, which gives us a set of URLs to request, then we request the first of those. This is when promises really start to stand out from simple callback patterns.

\n

You could even make a shortcut method to get chapters:

\n
var storyPromise;\n\nfunction getChapter(i) {\n  storyPromise = storyPromise || getJSON('story.json');\n\n\n  return storyPromise.then(function(story) {\n    return getJSON(story.chapterUrls[i]);\n\n  })\n}\n\n// and using it is simple:\ngetChapter(0).then(function(chapter) {\n  console.log(chapter);\n\n  return getChapter(1);\n\n}).then(function(chapter) {\n  console.log(chapter);\n\n})\n
\n

We don't download story.json until getChapter is called, but the next time(s) getChapter is called we reuse the story promise, so story.json is only fetched once. Yay Promises!

\n

Error handling #

\n

As we saw earlier, then() takes two arguments, one for success, one for failure (or fulfill and reject, in promises-speak):

\n
get('story.json').then(function(response) {  \nconsole.log(\"Success!\", response);\n}, function(error) {  \nconsole.log(\"Failed!\", error);\n})\n
\n

You can also use catch():

\n
get('story.json').then(function(response) {  \nconsole.log(\"Success!\", response);\n}).catch(function(error) {  \nconsole.log(\"Failed!\", error);\n})\n
\n

There's nothing special about catch(), it's just sugar for then(undefined, func), but it's more readable. Note that the two code examples above do not behave the same, the latter is equivalent to:

\n
get('story.json').then(function(response) {  \nconsole.log(\"Success!\", response);\n}).then(undefined, function(error) {  \nconsole.log(\"Failed!\", error);\n})\n
\n

The difference is subtle, but extremely useful. Promise rejections skip forward to the next then() with a rejection callback (or catch(), since it's equivalent). With then(func1, func2), func1 or func2 will be called, never both. But with then(func1).catch(func2), both will be called if func1 rejects, as they're separate steps in the chain. Take the following:

\n
asyncThing1().then(function() {\n  return asyncThing2();\n\n}).then(function() {\n  return asyncThing3();\n\n}).catch(function(err) {\n  return asyncRecovery1();\n\n}).then(function() {\n  return asyncThing4();\n\n}, function(err) {\n  return asyncRecovery2();\n\n}).catch(function(err) {\n  console.log(\"Don't worry about it\");\n\n}).then(function() {\n  console.log(\"All done!\");\n\n})\n
\n

The flow above is very similar to normal JavaScript try/catch, errors that happen within a \"try\" go immediately to the catch() block. Here's the above as a flowchart (because I love flowcharts):

\n

Follow the blue lines for promises that fulfill, or the red for ones that reject.

\n

JavaScript exceptions and promises #

\n

Rejections happen when a promise is explicitly rejected, but also implicitly if an error is thrown in the constructor callback:

\n
var jsonPromise = new Promise(function(resolve, reject) {  \n// JSON.parse throws an error if you feed it some  // invalid JSON, so this implicitly rejects:  resolve(JSON.parse(\"This ain't JSON\"));\n\n});\njsonPromise.then(function(data) {  \n// This never happens:  console.log(\"It worked!\", data);\n}).catch(function(err) {  \n// Instead, this happens:  console.log(\"It failed!\", err);\n})\n
\n

This means it's useful to do all your promise-related work inside the promise constructor callback, so errors are automatically caught and become rejections.

\n

The same goes for errors thrown in then() callbacks.

\n
get('/').then(JSON.parse).then(function() {  \n// This never happens, '/' is an HTML page, not JSON  // so JSON.parse throws  console.log(\"It worked!\", data);\n}).catch(function(err) {  \n// Instead, this happens:  console.log(\"It failed!\", err);\n})\n
\n

Error handling in practice #

\n

With our story and chapters, we can use catch to display an error to the user:

\n
getJSON('story.json').then(function(story) {  \nreturn getJSON(story.chapterUrls[0]);\n}).then(function(chapter1) {  \naddHtmlToPage(chapter1.html);\n}).catch(function() {  \naddTextToPage(\"Failed to show chapter\");\n}).then(function() {  \ndocument.querySelector('.spinner').style.display = 'none';})\n
\n

If fetching story.chapterUrls[0] fails (e.g., http 500 or user is offline), it'll skip all following success callbacks, which includes the one in getJSON() which tries to parse the response as JSON, and also skips the callback that adds chapter1.html to the page. Instead it moves onto the catch callback. As a result, \"Failed to show chapter\" will be added to the page if any of the previous actions failed.

\n

Like JavaScript's try/catch, the error is caught and subsequent code continues, so the spinner is always hidden, which is what we want. The above becomes a non-blocking async version of:

\n
try {  \nvar story = getJSONSync('story.json');\n  var chapter1 = getJSONSync(story.chapterUrls[0]);\n  addHtmlToPage(chapter1.html);\n}catch (e) {  \naddTextToPage(\"Failed to show chapter\");\n}document.querySelector('.spinner').style.display = 'none'\n
\n

You may want to catch() simply for logging purposes, without recovering from the error. To do this, just rethrow the error. We could do this in our getJSON() method:

\n
function getJSON(url) {  \nreturn get(url).then(JSON.parse).catch(function(err) {  \n  console.log(\"getJSON failed for\", url, err);\n    throw err;  \n});\n}\n
\n

So we've managed to fetch one chapter, but we want them all. Let's make that happen.

\n

Parallelism and sequencing: getting the best of both #

\n

Thinking async isn't easy. If you're struggling to get off the mark, try writing the code as if it were synchronous. In this case:

\n
try {  \nvar story = getJSONSync('story.json');\n  addHtmlToPage(story.heading);\n  story.chapterUrls.forEach(function(chapterUrl) {  \n  var chapter = getJSONSync(chapterUrl);\n    addHtmlToPage(chapter.html);\n  \n});\n  addTextToPage(\"All done\");\n}catch (err) {  \naddTextToPage(\"Argh, broken: \" + err.message);\n}document.querySelector('.spinner').style.display = 'none'\n
\n

That works! But it's sync and locks up the browser while things download. To make this work async we use then() to make things happen one after another.

\n
getJSON('story.json').then(function(story) {  \naddHtmlToPage(story.heading);\n  // TODO: for each url in story.chapterUrls, fetch &amp; display}).then(function() {  \n// And we're all done!  addTextToPage(\"All done\");\n}).catch(function(err) {  \n// Catch any error that happened along the way  addTextToPage(\"Argh, broken: \" + err.message);\n}).then(function() {  \n// Always hide the spinner  document.querySelector('.spinner').style.display = 'none';})\n
\n

But how can we loop through the chapter urls and fetch them in order? This doesn't work:

\n
story.chapterUrls.forEach(function(chapterUrl) {  \n// Fetch chapter  getJSON(chapterUrl).then(function(chapter) {  \n  // and add it to the page    addHtmlToPage(chapter.html);\n  \n});\n})\n
\n

forEach isn't async-aware, so our chapters would appear in whatever order they download, which is basically how Pulp Fiction was written. This isn't Pulp Fiction, so let's fix it.

\n

Creating a sequence #

\n

We want to turn our chapterUrls array into a sequence of promises. We can do that using then():

\n
// Start off with a promise that always resolvesvar sequence = Promise.resolve();\n// Loop through our chapter urlsstory.chapterUrls.forEach(function(chapterUrl) {  \n// Add these actions to the end of the sequence  sequence = sequence.then(function() {  \n  return getJSON(chapterUrl);\n  }).then(function(chapter) {  \n  addHtmlToPage(chapter.html);\n  \n});\n})\n
\n

This is the first time we've seen Promise.resolve(), which creates a promise that resolves to whatever value you give it. If you pass it an instance of Promise it'll simply return it (note: this is a change to the spec that some implementations don't yet follow). If you pass it something promise-like (has a then() method), it creates a genuine Promise that fulfills/rejects in the same way. If you pass in any other value, e.g., Promise.resolve('Hello'), it creates a promise that fulfills with that value. If you call it with no value, as above, it fulfills with \"undefined\".

\n

There's also Promise.reject(val), which creates a promise that rejects with the value you give it (or undefined).

\n

We can tidy up the above code using array.reduce:

\n
// Loop through our chapter urlsstory.chapterUrls.reduce(function(sequence, chapterUrl) {  \n// Add these actions to the end of the sequence  return sequence.then(function() {  \n  return getJSON(chapterUrl);\n  }).then(function(chapter) {  \n  addHtmlToPage(chapter.html);\n  \n});\n}, Promise.resolve())\n
\n

This is doing the same as the previous example, but doesn't need the separate \"sequence\" variable. Our reduce callback is called for each item in the array. \"sequence\" is Promise.resolve() the first time around, but for the rest of the calls \"sequence\" is whatever we returned from the previous call. array.reduce is really useful for boiling an array down to a single value, which in this case is a promise.

\n

Let's put it all together:

\n
getJSON('story.json').then(function(story) {  \naddHtmlToPage(story.heading);\n  return story.chapterUrls.reduce(function(sequence, chapterUrl) {  \n  // Once the last chapter's promise is done...    return sequence.then(function() {  \n    // ...fetch the next chapter      return getJSON(chapterUrl);\n    }).then(function(chapter) {  \n    // and add it to the page      addHtmlToPage(chapter.html);\n    \n});\n  }, Promise.resolve());\n}).then(function() {  \n// And we're all done!  addTextToPage(\"All done\");\n}).catch(function(err) {  \n// Catch any error that happened along the way  addTextToPage(\"Argh, broken: \" + err.message);\n}).then(function() {  \n// Always hide the spinner  document.querySelector('.spinner').style.display = 'none';})\n
\n

And there we have it, a fully async version of the sync version. But we can do better. At the moment our page is downloading like this:

\n

Browsers are pretty good at downloading multiple things at once, so we're losing performance by downloading chapters one after the other. What we want to do is download them all at the same time, then process them when they've all arrived. Thankfully there's an API for this:

\n
Promise.all(arrayOfPromises).then(function(arrayOfResults) {  \n//...})\n
\n

Promise.all takes an array of promises and creates a promise that fulfills when all of them successfully complete. You get an array of results (whatever the promises fulfilled to) in the same order as the promises you passed in.

\n
getJSON('story.json').then(function(story) {  \naddHtmlToPage(story.heading);\n  // Take an array of promises and wait on them all  return Promise.all(    // Map our array of chapter urls to    // an array of chapter json promises    story.chapterUrls.map(getJSON)  );\n}).then(function(chapters) {  \n// Now we have the chapters jsons in order! Loop through...  chapters.forEach(function(chapter) {  \n  // ...and add to the page    addHtmlToPage(chapter.html);\n  \n});\n  addTextToPage(\"All done\");\n}).catch(function(err) {  \n// catch any error that happened so far  addTextToPage(\"Argh, broken: \" + err.message);\n}).then(function() {  \ndocument.querySelector('.spinner').style.display = 'none';})\n
\n

Depending on connection, this can be seconds faster than loading one-by-one, and it's less code than our first try. The chapters can download in whatever order, but they appear on screen in the right order.

\n

However, we can still improve perceived performance. When chapter one arrives we should add it to the page. This lets the user start reading before the rest of the chapters have arrived. When chapter three arrives, we wouldn't add it to the page because the user may not realize chapter two is missing. When chapter two arrives, we can add chapters two and three, etc etc.

\n

To do this, we fetch JSON for all our chapters at the same time, then create a sequence to add them to the document:

\n
getJSON('story.json').then(function(story) {  \naddHtmlToPage(story.heading);\n  // Map our array of chapter urls to  // an array of chapter json promises.  // This makes sure they all download in parallel.  return story.chapterUrls.map(getJSON)    .reduce(function(sequence, chapterPromise) {  \n    // Use reduce to chain the promises together,      // adding content to the page for each chapter      return sequence      .then(function() {  \n      // Wait for everything in the sequence so far,        // then wait for this chapter to arrive.        return chapterPromise;      }).then(function(chapter) {  \n      addHtmlToPage(chapter.html);\n      \n});\n    }, Promise.resolve());\n}).then(function() {  \naddTextToPage(\"All done\");\n}).catch(function(err) {  \n// catch any error that happened along the way  addTextToPage(\"Argh, broken: \" + err.message);\n}).then(function() {  \ndocument.querySelector('.spinner').style.display = 'none';})\n
\n

Async Await:

\n
\n Async Await: \n

The basics of async/await

\n

There are two parts to using async/await in your code.

\n

The async keyword

\n

First of all we have the async keyword, which you put in front of a function declaration to turn it into an async function. An async function is a function that knows how to expect the possibility of the await keyword being used to invoke asynchronous code.

\n

Try typing the following lines into your browser's JS console:

\n
function hello() { return \"Hello\" };\nhello();\n
\n

The function returns \"Hello\" — nothing special, right?

\n

But what if we turn this into an async function? Try the following:

\n
async function hello() { return \"Hello\" };\nhello();\n
\n

Ah. Invoking the function now returns a promise. This is one of the traits of async functions — their return values are guaranteed to be converted to promises.

\n

You can also create an async function expression, like so:

\n
let hello = async function() { return \"Hello\" };\nhello();\n
\n

And you can use arrow functions:

\n
let hello = async () => \"Hello\";\n
\n

These all do basically the same thing.

\n

To actually consume the value returned when the promise fulfills, since it is returning a promise, we could use a .then() block:

\n
hello().then((value) => console.log(value))\n
\n

or even just shorthand such as

\n
hello().then(console.log)\n
\n

Like we saw in the last article.

\n

So the async keyword is added to functions to tell them to return a promise rather than directly returning the value.

\n

The await keyword

\n

The advantage of an async function only becomes apparent when you combine it with the await keyword. await only works inside async functions within regular JavaScript code, however it can be used on its own with JavaScript modules.

\n

await can be put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the resulting value.

\n

You can use await when calling any function that returns a Promise, including web API functions.

\n

Here is a trivial example:

\n
async function hello() {\n  return await Promise.resolve(\"Hello\");\n\n};\n\nhello().then(alert);\n
\n

Of course, the above example is not very useful, although it does serve to illustrate the syntax. Let's move on and look at a real example.

\n

Rewriting promise code with async/await

\n

Let's look back at a simple fetch example that we saw in the previous article:

\n
fetch('coffee.jpg')\n  .then(response => {\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n\n    }\n    return response.blob();\n\n  })\n  .then(myBlob => {\n    let objectURL = URL.createObjectURL(myBlob);\n\n    let image = document.createElement('img');\n\n    image.src = objectURL;\n    document.body.appendChild(image);\n\n  })\n  .catch(e => {\n    console.log('There has been a problem with your fetch operation: ' + e.message);\n\n  \n});\n
\n

By now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things:

\n
async function myFetch() {\n  let response = await fetch('coffee.jpg');\n\n\n  if (!response.ok) {\n    throw new Error(`HTTP error! status: ${response.status}`);\n\n  }\n\n  let myBlob = await response.blob();\n\n\n  let objectURL = URL.createObjectURL(myBlob);\n\n  let image = document.createElement('img');\n\n  image.src = objectURL;\n  document.body.appendChild(image);\n\n}\n\nmyFetch()\n  .catch(e => {\n    console.log('There has been a problem with your fetch operation: ' + e.message);\n\n  \n});\n
\n

It makes code much simpler and easier to understand — no more .then() blocks everywhere!

\n

Since an async keyword turns a function into a promise, you could refactor your code to use a hybrid approach of promises and await, bringing the second half of the function out into a new block to make it more flexible:

\n
async function myFetch() {\n  let response = await fetch('coffee.jpg');\n\n  if (!response.ok) {\n    throw new Error(`HTTP error! status: ${response.status}`);\n\n  }\n  return await response.blob();\n\n}\n\nmyFetch()\n  .then(blob => {\n    let objectURL = URL.createObjectURL(blob);\n\n    let image = document.createElement('img');\n\n    image.src = objectURL;\n    document.body.appendChild(image);\n\n  })\n  .catch(e => console.log(e));\n
\n

You can try typing in the example yourself, or running our live example (see also the source code).

\n

But how does it work?

\n

You'll note that we've wrapped the code inside a function, and we've included the async keyword before the function keyword. This is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, await only works inside of async functions.

\n

Inside the myFetch() function definition you can see that the code closely resembles the previous promise version, but there are some differences. Instead of needing to chain a .then() block on to the end of each promise-based method, you just need to add an await keyword before the method call, and then assign the result to a variable. The await keyword causes the JavaScript runtime to pause your code on this line, not allowing further code to execute in the meantime until the async function call has returned its result — very useful if subsequent code relies on that result!

\n

Once that's complete, your code continues to execute starting on the next line. For example:

\n
let response = await fetch('coffee.jpg');\n
\n

The response returned by the fulfilled fetch() promise is assigned to the response variable when that response becomes available, and the parser pauses on this line until that occurs. Once the response is available, the parser moves to the next line, which creates a Blob out of it. This line also invokes an async promise-based method, so we use await here as well. When the result of operation returns, we return it out of the myFetch() function.

\n

This means that when we call the myFetch() function, it returns a promise, so we can chain a .then() onto the end of it inside which we handle displaying the blob onscreen.

\n

You are probably already thinking \"this is really cool!\", and you are right — fewer .then() blocks to wrap around code, and it mostly just looks like synchronous code, so it is really intuitive.

\n

Adding error handling

\n

And if you want to add error handling, you've got a couple of options.

\n

You can use a synchronous try...catch structure with async/await. This example expands on the first version of the code we showed above:

\n
async function myFetch() {\n  try {\n    let response = await fetch('coffee.jpg');\n\n\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n\n    }\n    let myBlob = await response.blob();\n\n    let objectURL = URL.createObjectURL(myBlob);\n\n    let image = document.createElement('img');\n\n    image.src = objectURL;\n    document.body.appendChild(image);\n\n  } catch(e) {\n    console.log(e);\n\n  }\n}\n\nmyFetch();\n
\n

The catch() {} block is passed an error object, which we've called e; we can now log that to the console, and it will give us a detailed error message showing where in the code the error was thrown.

\n

If you wanted to use the second (refactored) version of the code that we showed above, you would be better off just continuing the hybrid approach and chaining a .catch() block onto the end of the .then() call, like this:

\n
async function myFetch() {\n  let response = await fetch('coffee.jpg');\n\n  if (!response.ok) {\n    throw new Error(`HTTP error! status: ${response.status}`);\n\n  }\n  return await response.blob();\n\n}\n\nmyFetch()\n  .then(blob => {\n    let objectURL = URL.createObjectURL(blob);\n\n    let image = document.createElement('img');\n\n    image.src = objectURL;\n    document.body.appendChild(image);\n\n  })\n  .catch(e => console.log(e));\n
\n

This is because the .catch() block will catch errors occurring in both the async function call and the promise chain. If you used the try/catch block here, you might still get unhandled errors in the myFetch() function when it's called.

\n

You can find both of these examples on GitHub:

\n\n

Awaiting a Promise.all()

\n

async/await is built on top of promises, so it's compatible with all the features offered by promises. This includes Promise.all() — you can quite happily await a Promise.all() call to get all the results returned into a variable in a way that looks like simple synchronous code. Again, let's return to an example we saw in our previous article. Keep it open in a separate tab so you can compare and contrast with the new version shown below.

\n

Converting this to async/await (see live demo and source code), this now looks like so:

\n
async function fetchAndDecode(url, type) {\n  let response = await fetch(url);\n\n\n  let content;\n\n  if (!response.ok) {\n    throw new Error(`HTTP error! status: ${response.status}`);\n\n  } else {\n    if(type === 'blob') {\n      content = await response.blob();\n\n    } else if(type === 'text') {\n      content = await response.text();\n\n    }\n  }\n  return content;\n}\n\nasync function displayContent() {\n  let coffee = fetchAndDecode('coffee.jpg', 'blob');\n\n  let tea = fetchAndDecode('tea.jpg', 'blob');\n\n  let description = fetchAndDecode('description.txt', 'text');\n\n\n  let values = await Promise.all([coffee, tea, description]);\n\n\n  let objectURL1 = URL.createObjectURL(values[0]);\n\n  let objectURL2 = URL.createObjectURL(values[1]);\n\n  let descText = values[2];\n\n  let image1 = document.createElement('img');\n\n  let image2 = document.createElement('img');\n\n  image1.src = objectURL1;\n  image2.src = objectURL2;\n  document.body.appendChild(image1);\n\n  document.body.appendChild(image2);\n\n\n  let para = document.createElement('p');\n\n  para.textContent = descText;\n  document.body.appendChild(para);\n\n}\n\ndisplayContent()\n  .catch(e => console.log(e));\n
\n

You'll see that the fetchAndDecode() function has been converted easily into an async function with just a few changes. See the Promise.all() line:

\n
let values = await Promise.all([coffee, tea, description]);\n
\n

By using await here we are able to get all the results of the three promises returned into the values array, when they are all available, in a way that looks very much like sync code. We've had to wrap all the code in a new async function, displayContent(), and we've not reduced the code by a lot of lines, but being able to move the bulk of the code out of the .then() block provides a nice, useful simplification, leaving us with a much more readable program.

\n

For error handling, we've included a .catch() block on our displayContent() call; this will handle errors occurring in both functions.

\n
\n

Note: It is also possible to use a sync finally block within an async function, in place of a .finally() async block, to show a final report on how the operation went — you can see this in action in our live example (see also the source code).

\n
\n

Handling async/await slowdown

\n

Async/await makes your code look synchronous, and in a way it makes it behave more synchronously. The await keyword blocks execution of all the code that follows it until the promise fulfills, exactly as it would with a synchronous operation. It does allow other tasks to continue to run in the meantime, but the awaited code is blocked. For example:

\n
async function makeResult(items) {\n  let newArr = [];\n  for(let i = 0; i < items.length; i++) {\n    newArr.push('word_' + i);\n\n  }\n  return newArr;\n}\n\nasync function getResult() {\n  let result = await makeResult(items);\n // Blocked on this line\n  useThatResult(result);\n // Will not be executed before makeResult() is done\n}\n
\n

As a result, your code could be slowed down by a significant number of awaited promises happening straight after one another. Each await will wait for the previous one to finish, whereas actually what you might want is for the promises to begin processing simultaneously, like they would do if we weren't using async/await.

\n

Let's look at two examples — slow-async-await.html (see source code) and fast-async-await.html (see source code). Both of them start off with a custom promise function that fakes an async process with a setTimeout() call:

\n
function timeoutPromise(interval) {\n  return new Promise((resolve, reject) => {\n    setTimeout(function(){\n      resolve(\"done\");\n\n    }, interval);\n\n  \n});\n\n};\n
\n

Then each one includes a timeTest() async function that awaits three timeoutPromise() calls:

\n
async function timeTest() {\n  ...\n}\n
\n

Each one ends by recording a start time, seeing how long the timeTest() promise takes to fulfill, then recording an end time and reporting how long the operation took in total:

\n
let startTime = Date.now();\n\ntimeTest()\n  .then(() => {\n    let finishTime = Date.now();\n\n    let timeTaken = finishTime - startTime;\n    alert(\"Time taken in milliseconds: \" + timeTaken);\n\n  })\n
\n

It is the timeTest() function that differs in each case.

\n

In the slow-async-await.html example, timeTest() looks like this:

\n
async function timeTest() {\n  await timeoutPromise(3000);\n\n  await timeoutPromise(3000);\n\n  await timeoutPromise(3000);\n\n}\n
\n

Here we await all three timeoutPromise() calls directly, making each one alert after 3 seconds. Each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds.

\n

In the fast-async-await.html example, timeTest() looks like this:

\n
async function timeTest() {\n  const timeoutPromise1 = timeoutPromise(3000);\n\n  const timeoutPromise2 = timeoutPromise(3000);\n\n  const timeoutPromise3 = timeoutPromise(3000);\n\n\n  await timeoutPromise1;\n  await timeoutPromise2;\n  await timeoutPromise3;\n}\n
\n

Here we store the three Promise objects in variables, which has the effect of setting off their associated processes all running simultaneously.

\n

Next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds!

\n

Handling errors

\n

There is an issue with the above pattern however — it could lead to unhandled errors.

\n

Let's update the previous examples, this time adding a rejected promise and a catch statement in the end:

\n
function timeoutPromiseResolve(interval) {\n  return new Promise((resolve, reject) => {\n    setTimeout(function(){\n      resolve(\"successful\");\n\n    }, interval);\n\n  \n});\n\n};\n\nfunction timeoutPromiseReject(interval) {\n  return new Promise((resolve, reject) => {\n    setTimeout(function(){\n      reject(\"error\");\n\n    }, interval);\n\n  \n});\n\n};\n\nasync function timeTest() {\n  await timeoutPromiseResolve(5000);\n\n  await timeoutPromiseReject(2000);\n\n  await timeoutPromiseResolve(3000);\n\n}\n\nlet startTime = Date.now();\n\n\ntimeTest()\n  .then(() => {})\n  .catch(e => {\n    console.log(e);\n\n    let finishTime = Date.now();\n\n    let timeTaken = finishTime - startTime;\n    alert(\"Time taken in milliseconds: \" + timeTaken);\n\n  })\n
\n

In the above example, the error is handled properly, and the alert appears after approximately 7 seconds.

\n

Now onto the second pattern:

\n
function timeoutPromiseResolve(interval) {\n  return new Promise((resolve, reject) => {\n    setTimeout(function(){\n      resolve(\"successful\");\n\n    }, interval);\n\n  \n});\n\n};\n\nfunction timeoutPromiseReject(interval) {\n  return new Promise((resolve, reject) => {\n    setTimeout(function(){\n      reject(\"error\");\n\n    }, interval);\n\n  \n});\n\n};\n\nasync function timeTest() {\n  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);\n\n  const timeoutPromiseReject2 = timeoutPromiseReject(2000);\n\n  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);\n\n\n  await timeoutPromiseResolve1;\n  await timeoutPromiseReject2;\n  await timeoutPromiseResolve3;\n}\n\nlet startTime = Date.now();\n\n\ntimeTest()\n  .then(() => {})\n  .catch(e => {\n    console.log(e);\n\n    let finishTime = Date.now();\n\n    let timeTaken = finishTime - startTime;\n    alert(\"Time taken in milliseconds: \" + timeTaken);\n\n  })\n
\n

In this example, we have an unhandled error in the console (after 2 seconds), and the alert appears after approximately 5 seconds.

\n

To start the promises in parallel and catch the error properly, we could use Promise.all(), as discussed earlier:

\n
function timeoutPromiseResolve(interval) {\n  return new Promise((resolve, reject) => {\n    setTimeout(function(){\n      resolve(\"successful\");\n\n    }, interval);\n\n  \n});\n\n};\n\nfunction timeoutPromiseReject(interval) {\n  return new Promise((resolve, reject) => {\n    setTimeout(function(){\n      reject(\"error\");\n\n    }, interval);\n\n  \n});\n\n};\n\nasync function timeTest() {\n  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);\n\n  const timeoutPromiseReject2 = timeoutPromiseReject(2000);\n\n  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);\n\n\n  const results = await Promise.all([timeoutPromiseResolve1, timeoutPromiseReject2, timeoutPromiseResolve3]);\n\n  return results;\n}\n\nlet startTime = Date.now();\n\n\ntimeTest()\n  .then(() => {})\n  .catch(e => {\n    console.log(e);\n\n    let finishTime = Date.now();\n\n    let timeTaken = finishTime - startTime;\n    alert(\"Time taken in milliseconds: \" + timeTaken);\n\n  })\n
\n

In this example, the error is handled properly after around 2 seconds and we also see the alert after around 2 seconds.

\n

The Promise.all() rejects when any of the input promises are rejected. If you want all the promises to settle and then use some of their fulfilled values, even when some of\nthem are rejected, you could use Promise.allSettled() instead.

\n

Async/await class methods

\n

As a final note before we move on, you can even add async in front of class/object methods to make them return promises, and await promises inside them. Take a look at the ES class code we saw in our object-oriented JavaScript article, and then look at our modified version with an async method:

\n
class Person {\n  constructor(first, last, age, gender, interests) {\n    this.name = {\n      first,\n      last\n    };\n    this.age = age;\n    this.gender = gender;\n    this.interests = interests;\n  }\n\n  async greeting() {\n    return await Promise.resolve(`Hi! I'm ${this.name.first}`);\n\n  };\n\n  farewell() {\n    console.log(`${this.name.first} has left the building. Bye for now!`);\n\n  };\n}\n\nlet han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);\n
\n

The first class method could now be used something like this:

\n
han.greeting().then(console.log);\n
\n
"},{"url":"/docs/leetcode/011._Container_With_Most_Water/","relativePath":"docs/leetcode/011._Container_With_Most_Water.md","relativeDir":"docs/leetcode","base":"011._Container_With_Most_Water.md","name":"011._Container_With_Most_Water","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

11. Container With Most Water

\n

Problem:

\n

Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai). n vertical lines are drawn such that the two endpoints of line i is at (i, ai) and (i, 0). Find two lines, which together with x-axis forms a container, such that the container contains the most water.

\n

Note: You may not slant the container and n is at least 2.

\n

Solution:

\n

Greedy Algorithm.

\n

If we look at the simple brute force approach, where we choose one point at a time and calculate all the possible areas with other points on the right, it is easy to make a observation that we are narrowing down the horizontal distance.

\n

Greedy Algorithm can help us skip some of the conditions. It is base on a fact that the area between two columns are determined by the shorter one.

\n

Let's say we have pointer l and r at the begin and end of a distance, and the area is area(l, r), how should we narrow down the distance?

\n

If height[l] < height[r], we know that the height of the area will never be greater than height[l] if we keep l. Now if we get rid of r, the area can only get smaller since the distance is shorter, and the height is at most height[l].

\n

Here we conclude rule NO.1: Get rid of the smaller one.

\n

What if height[l] == height[r]? It is safe to get rid of both. We do not need any of them to constrain the max height of the rest points.

\n
/**\n * @param {number[]} height\n * @return {number}\n */\nlet maxArea = function (height) {\n  let max = 0;\n  for (let l = 0, r = height.length - 1; l < r; l++, r--) {\n    max = Math.max(max, (r - l) * Math.min(height[l], height[r]));\n    if (height[l] < height[r]) {\n      r++;\n    } else {\n      l--;\n    }\n  }\n  return max;\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/012._Integer_to_Roman/","relativePath":"docs/leetcode/012._Integer_to_Roman.md","relativeDir":"docs/leetcode","base":"012._Integer_to_Roman.md","name":"012._Integer_to_Roman","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

12. Integer to Roman

\n

Problem:

\n

Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M.

\n
Symbol       Value\nI             1\nV             5\nX             10\nL             50\nC             100\nD             500\nM             1000\n
\n

For example, two is written as II in Roman numeral, just two one's added together. Twelve is written as, XII, which is simply X + II. The number twenty seven is written as XXVII, which is XX + V + II.

\n

Roman numerals are usually written largest to smallest from left to right. However, the numeral for four is not IIII. Instead, the number four is written as IV. Because the one is before the five we subtract it making four. The same principle applies to the number nine, which is written as IX. There are six instances where subtraction is used:

\n
    \n
  • I can be placed before V (5) and X (10) to make 4 and 9.
    • \n
  • X can be placed before L (50) and C (100) to make 40 and 90.
    • \n
  • C can be placed before D (500) and M (1000) to make 400 and 900.
    • \n
\n

Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from 1 to 3999.

\n

Example 1:

\n
Input: 3\nOutput: \"III\"\n
\n

Example 2:

\n
Input: 4\nOutput: \"IV\"\n
\n

Example 3:

\n
Input: 9\nOutput: \"IX\"\n
\n

Example 4:

\n
Input: 58\nOutput: \"LVIII\"\nExplanation: C = 100, L = 50, XXX = 30 and III = 3.\n
\n

Example 5:

\n
Input: 1994\nOutput: \"MCMXCIV\"\nExplanation: M = 1000, CM = 900, XC = 90 and IV = 4.\n
\n

Solution:

\n

Treat 4, 40, 400 and 9, 90, 900 specially.

\n
/**\n * @param {number} num\n * @return {string}\n */\nlet intToRoman = function (num) {\n  const e = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];\n  const s = [\n    \"M\",\n    \"CM\",\n    \"D\",\n    \"CD\",\n    \"C\",\n    \"XC\",\n    \"L\",\n    \"XL\",\n    \"X\",\n    \"IX\",\n    \"V\",\n    \"IV\",\n    \"I\",\n  ];\n\n  let result = \"\";\n  for (let i = 0; num; i++) {\n    const d = e[i];\n    const v = s[i];\n    while (num >= d) {\n      num -= d;\n      result += v;\n    }\n  }\n  return result;\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/013._Roman_to_Integer/","relativePath":"docs/leetcode/013._Roman_to_Integer.md","relativeDir":"docs/leetcode","base":"013._Roman_to_Integer.md","name":"013._Roman_to_Integer","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

13. Roman to Integer

\n

Problem:

\n

Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M.

\n
Symbol       Value\nI             1\nV             5\nX             10\nL             50\nC             100\nD             500\nM             1000\n
\n

For example, two is written as II in Roman numeral, just two one's added together. Twelve is written as, XII, which is simply X + II. The number twenty seven is written as XXVII, which is XX + V + II.

\n

Roman numerals are usually written largest to smallest from left to right. However, the numeral for four is not IIII. Instead, the number four is written as IV. Because the one is before the five we subtract it making four. The same principle applies to the number nine, which is written as IX. There are six instances where subtraction is used:

\n
    \n
  • I can be placed before V (5) and X (10) to make 4 and 9.
    • \n
  • X can be placed before L (50) and C (100) to make 40 and 90.
    • \n
  • C can be placed before D (500) and M (1000) to make 400 and 900.
    • \n
\n

Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from 1 to 3999.

\n

Example 1:

\n
Input: \"III\"\nOutput: 3\n
\n

Example 2:

\n
Input: \"IV\"\nOutput: 4\n
\n

Example 3:

\n
Input: \"IX\"\nOutput: 9\n
\n

Example 4:

\n
Input: \"LVIII\"\nOutput: 58\nExplanation: C = 100, L = 50, XXX = 30 and III = 3.\n
\n

Example 5:

\n
Input: \"MCMXCIV\"\nOutput: 1994\nExplanation: M = 1000, CM = 900, XC = 90 and IV = 4.\n
\n

Solution:

\n

Normally we just add up the digits, except when the digit is greater than its left (e.g. IV). In that case we need to fallback and remove the last digit then combine the two as new digit. That is why we subtract the last digit twice.

\n
/**\n * @param {string} s\n * @return {number}\n */\nlet romanToInt = function (s) {\n  const rdigit = {\n    I: 1,\n    V: 5,\n    X: 10,\n    L: 50,\n    C: 100,\n    D: 500,\n    M: 1000,\n  };\n\n  let result = 0;\n  for (let i = 0, lastDigit = Infinity; i < s.length; i++) {\n    let digit = rdigit[s[i]];\n    result += digit <= lastDigit ? digit : digit - lastDigit * 2;\n    lastDigit = digit;\n  }\n  return result;\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/014._Longest_Common_Prefix/","relativePath":"docs/leetcode/014._Longest_Common_Prefix.md","relativeDir":"docs/leetcode","base":"014._Longest_Common_Prefix.md","name":"014._Longest_Common_Prefix","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

14. Longest Common Prefix

\n

Problem:

\n

Write a function to find the longest common prefix string amongst an array of strings.

\n

If there is no common prefix, return an empty string \"\".

\n

Example 1:

\n
Input: [\"flower\",\"flow\",\"flight\"]\nOutput: \"fl\"\n
\n

Example 2:

\n
Input: [\"dog\",\"racecar\",\"car\"]\nOutput: \"\"\nExplanation: There is no common prefix among the input strings.\n
\n

Note:

\n

All given inputs are in lowercase letters a-z.

\n

Solution:

\n

ONE

\n

JavaScript specific solution. Get the min len then narrow down the prefix.

\n
/**\n * @param {string[]} strs\n * @return {string}\n */\nlet longestCommonPrefix = function (strs) {\n  if (strs.length > 0) {\n    let minLen = Math.min(...strs.map((s) => s.length));\n    const anyStr = strs[0];\n    while (minLen) {\n      const prefix = anyStr.slice(0, minLen--);\n      if (strs.every((s) => s.startsWith(prefix))) {\n        return prefix;\n      }\n    }\n  }\n  return \"\";\n};\n
\n

TWO

\n
/**\n * @param {string[]} strs\n * @return {string}\n */\nlet longestCommonPrefix = function (strs) {\n  if (strs.length <= 0) {\n    return \"\";\n  }\n\n  let i = 0;\n  while (strs.every((s) => s[i] && s[i] === strs[0][i])) {\n    i++;\n  }\n  return strs[0].slice(0, i);\n};\n
\n

THREE

\n

General solution. Build up the prefix.

\n
/**\n * @param {string[]} strs\n * @return {string}\n */\nlet longestCommonPrefix = function (strs) {\n  let prefix = \"\";\n  if (strs.length > 0) {\n    for (let i = 0; ; i++) {\n      const c = strs[0][i];\n      if (!c) {\n        return prefix;\n      }\n      for (let j = 0; j < strs.length; j++) {\n        if (strs[j][i] !== c) {\n          return prefix;\n        }\n      }\n      prefix += c;\n    }\n  }\n  return prefix;\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/010._Regular_Expression_Matching/","relativePath":"docs/leetcode/010._Regular_Expression_Matching.md","relativeDir":"docs/leetcode","base":"010._Regular_Expression_Matching.md","name":"010._Regular_Expression_Matching","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

10. Regular Expression Matching

\n

Problem:

\n

Given an input string (s) and a pattern (p), implement regular expression matching with support for '.' and '*'.

\n
'.' Matches any single character.\n'*' Matches zero or more of the preceding element.\n
\n

The matching should cover the entire input string (not partial).

\n

Note:

\n

s could be empty and contains only lowercase letters a-z.\np could be empty and contains only lowercase letters a-z, and characters like . or *.

\n

Example 1:

\n
Input:\ns = \"aa\"\np = \"a\"\nOutput: false\nExplanation: \"a\" does not match the entire string \"aa\".\n
\n

Example 2:

\n
Input:\ns = \"aa\"\np = \"a*\"\nOutput: true\nExplanation: '*' means zero or more of the precedeng element, 'a'. Therefore, by repeating 'a' once, it becomes \"aa\".\n
\n

Example 3:

\n
Input:\ns = \"ab\"\np = \".*\"\nOutput: true\nExplanation: \".*\" means \"zero or more (*) of any character (.)\".\n
\n

Example 4:

\n
Input:\ns = \"aab\"\np = \"c*a*b\"\nOutput: true\nExplanation: c can be repeated 0 times, a can be repeated 1 time. Therefore it matches \"aab\".\n
\n

Example 5:

\n
Input:\ns = \"mississippi\"\np = \"mis*is*p*.\"\nOutput: false\n
\n

Solution:

\n

ONE

\n

Cheating with real RegExp matching.

\n
/**\n * @param {string} s\n * @param {string} p\n * @return {boolean}\n */\nlet isMatch = function (s, p) {\n  if (p[0] === \"*\") {\n    return false;\n  }\n  return new RegExp(`^${p}$`).test(s);\n};\n
\n

TWO

\n

Let f(i, j) be the matching result of s[0...i) and p[0...j).

\n
f(0, j) =\n    j == 0 || // empty\n    p[j-1] == '*' && f(i, j-2) // matches 0 time, which matches empty string\n\nf(i, 0) = false // pattern must cover the entire input string\n\nf(i, j) =\n    if p[j-1] == '.'\n        f(i-1, j-1)\n    else if p[j-1] == '*'\n        f(i, j-2) || // matches 0 time\n        f(i-1, j) && (s[i-1] == p[j-2] || p[j-2] == '.') // matches 1 or multiple times\n    else\n        f(i-1, j-1) && s[i-1] == p[j-1]\n
\n
/**\n * @param {string} s\n * @param {string} p\n * @return {boolean}\n */\nlet isMatch = function (s, p) {\n  if (p[0] === \"*\") {\n    return false;\n  }\n\n  const dp = [[true]];\n\n  for (let j = 2; j <= p.length; j++) {\n    dp[0][j] = p[j - 1] === \"*\" && dp[0][j - 2];\n  }\n\n  for (let i = 1; i <= s.length; i++) {\n    dp[i] = [];\n    for (let j = 1; j <= p.length; j++) {\n      switch (p[j - 1]) {\n        case \".\":\n          dp[i][j] = dp[i - 1][j - 1];\n          break;\n        case \"*\":\n          dp[i][j] =\n            dp[i][j - 2] ||\n            (dp[i - 1][j] && (p[j - 2] === \".\" || s[i - 1] === p[j - 2]));\n          break;\n        default:\n          dp[i][j] = dp[i - 1][j - 1] && s[i - 1] === p[j - 1];\n      }\n    }\n  }\n\n  return !!dp[s.length][p.length];\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/017._Letter_Combinations_of_a_Phone_Number/","relativePath":"docs/leetcode/017._Letter_Combinations_of_a_Phone_Number.md","relativeDir":"docs/leetcode","base":"017._Letter_Combinations_of_a_Phone_Number.md","name":"017._Letter_Combinations_of_a_Phone_Number","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

17. Letter Combinations of a Phone Number

\n

Problem:

\n

Given a string containing digits from 2-9 inclusive, return all possible letter combinations that the number could represent.

\n

A mapping of digit to letters (just like on the telephone buttons) is given below. Note that 1 does not map to any letters.

\n

\"200px-Telephone-keypad2\"

\n

Example:

\n
Input: \"23\"\nOutput: [\"ad\", \"ae\", \"af\", \"bd\", \"be\", \"bf\", \"cd\", \"ce\", \"cf\"].\n
\n

Note:

\n

Although the above answer is in lexicographical order, your answer could be in any order you want.

\n

Solution:

\n

ONE

\n

JavaScript specific optimization.

\n

Array.prototype.push accepts arbitrary arguments which enables tighter loops.

\n

Also, appending string is faster than prepending.

\n
/**\n * @param {string} digits\n * @return {string[]}\n */\nlet letterCombinations = function (digits) {\n  if (digits.length <= 0) {\n    return [];\n  }\n\n  const letters = [\n    ,\n    ,\n    [\"a\", \"b\", \"c\"],\n    [\"d\", \"e\", \"f\"],\n    [\"g\", \"h\", \"i\"],\n    [\"j\", \"k\", \"l\"],\n    [\"m\", \"n\", \"o\"],\n    [\"p\", \"q\", \"r\", \"s\"],\n    [\"t\", \"u\", \"v\"],\n    [\"w\", \"x\", \"y\", \"z\"],\n  ];\n\n  let result = [\"\"];\n\n  for (let i = 0; i < digits.length; i++) {\n    const arr = letters[digits[i]];\n    let newResult = [];\n    arr.forEach((c) => newResult.push(...result.map((r) => r + c)));\n    result = newResult;\n  }\n\n  return result;\n};\n
\n

TWO

\n

General recursive DFS solution.

\n
/**\n * @param {string} digits\n * @return {string[]}\n */\nlet letterCombinations = function (digits) {\n  const letters = [\n    ,\n    ,\n    \"abc\",\n    \"def\",\n    \"ghi\",\n    \"jkl\",\n    \"mno\",\n    \"pqrs\",\n    \"tuv\",\n    \"wxyz\",\n  ];\n  const result = [];\n  if (digits.length > 0) {\n    dfs(digits, 0, \"\", letters, result);\n  }\n  return result;\n};\n\nfunction dfs(digits, idigit, path, letters, result) {\n  if (idigit >= digits.length) {\n    result.push(path);\n    return;\n  }\n  const str = letters[digits[idigit]];\n  for (let i = 0; i < str.length; i++) {\n    dfs(digits, idigit + 1, path + str[i], letters, result);\n  }\n}\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/019._Remove_Nth_Node_From_End_of_List/","relativePath":"docs/leetcode/019._Remove_Nth_Node_From_End_of_List.md","relativeDir":"docs/leetcode","base":"019._Remove_Nth_Node_From_End_of_List.md","name":"019._Remove_Nth_Node_From_End_of_List","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

19. Remove Nth Node From End of List

\n

Problem:

\n

Given a linked list, remove the n-th node from the end of list and return its head.

\n

Example:

\n
Given linked list: 1->2->3->4->5, and n = 2.\n\nAfter removing the second node from the end, the linked list becomes 1->2->3->5.\n
\n

Note:

\n

Given n will always be valid.

\n

Follow up:

\n

Could you do this in one pass?

\n

Solution:

\n

Set a pointer p1 for iterating, and p2 which is n nodes behind, pointing at the (n+1)-th node from the end of list.

\n

Boundaries that should be awared of:

\n
    \n
  • p2 could be one node before head, which means the head should be removed.
    • \n
  • p2 could be larger than the length of the list (Though the description says n will always be valid, we take care of it anyway).
    • \n
  • It should be p1.next touches the end rather than p1 because we want p1 pointing at the last node.
    • \n
\n
/**\n * Definition for singly-linked list.\n * function ListNode(val) {\n *     this.val = val;\n *     this.next = null;\n * }\n */\n/**\n * @param {ListNode} head\n * @param {number} n\n * @return {ListNode}\n */\nlet removeNthFromEnd = function (head, n) {\n  let p1 = head;\n  while (p1 && n--) {\n    p1 = p1.next;\n  }\n\n  if (!p1) {\n    return n ? head : head.next;\n  }\n\n  let p2 = head;\n  while (p1.next) {\n    p1 = p1.next;\n    p2 = p2.next;\n  }\n\n  p2.next = p2.next.next;\n\n  return head;\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/020._Valid_Parentheses/","relativePath":"docs/leetcode/020._Valid_Parentheses.md","relativeDir":"docs/leetcode","base":"020._Valid_Parentheses.md","name":"020._Valid_Parentheses","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

20. Valid Parentheses

\n

Problem:

\n

Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.

\n

An input string is valid if:

\n
    \n
  1. Open brackets must be closed by the same type of brackets.
    2. \n
  2. Open brackets must be closed in the correct order.
    3. \n
\n

Note that an empty string is also considered valid.

\n

Example 1:

\n
Input: \"()\"\nOutput: true\n
\n

Example 2:

\n
Input: \"()[]{}\"\nOutput: true\n
\n

Example 3:

\n
Input: \"(]\"\nOutput: false\n
\n

Example 4:

\n
Input: \"([)]\"\nOutput: false\n
\n

Example 5:

\n
Input: \"{[]}\"\nOutput: true\n
\n

Solution:

\n

Stack 101.

\n

Whenever we meet a close bracket, we want to compare it to the last open bracket.

\n

That is why we use stack to store open brackets: first in, last out.

\n

And since there is only bracket characters, the last open bracket happens to be the last character.

\n
/**\n * @param {string} s\n * @return {boolean}\n */\nlet isValid = function (s) {\n  const stack = [];\n  const pairs = {\n    \"}\": \"{\",\n    \"]\": \"[\",\n    \")\": \"(\",\n  };\n  for (const c of s) {\n    const open = pairs[c];\n    if (open) {\n      if (stack.pop() !== open) {\n        return false;\n      }\n    } else {\n      stack.push(c);\n    }\n  }\n  return stack.length <= 0;\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/022._Generate_Parentheses/","relativePath":"docs/leetcode/022._Generate_Parentheses.md","relativeDir":"docs/leetcode","base":"022._Generate_Parentheses.md","name":"022._Generate_Parentheses","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

22. Generate Parentheses

\n

Problem:

\n

Given n pairs of parentheses, write a function to generate all combinations of well-formed parentheses.

\n

For example, given n = 3, a solution set is:

\n
[\n  \"((()))\",\n  \"(()())\",\n  \"(())()\",\n  \"()(())\",\n  \"()()()\"\n]\n
\n

Solution:

\n

ONE

\n

Recursive DFS backtracking.

\n
/**\n * @param {number} n\n * @return {string[]}\n */\nlet generateParenthesis = function (n) {\n  const result = [];\n  if (n > 0) {\n    dfs(n, 0, 0, \"\", result);\n  }\n  return result;\n};\n\nfunction dfs(n, nopen, nclose, path, result) {\n  if (path.length === n * 2) {\n    result.push(path);\n    return;\n  }\n\n  if (nopen < n) {\n    dfs(n, nopen + 1, nclose, path + \"(\", result);\n  }\n\n  if (nclose < nopen) {\n    dfs(n, nopen, nclose + 1, path + \")\", result);\n  }\n}\n
\n

TWO

\n

BFS.

\n
/**\n * @param {number} n\n * @return {string[]}\n */\nlet generateParenthesis = function (n) {\n  if (n <= 0) {\n    return [];\n  }\n\n  const queue = [\n    {\n      path: \"(\",\n      open: 1,\n      close: 0,\n    },\n  ];\n\n  while (true) {\n    const { path, open, close } = queue.shift();\n    if (open + close === n * 2) {\n      queue.unshift({ path, open, close });\n      break;\n    }\n\n    if (open < n) {\n      queue.push({\n        path: path + \"(\",\n        open: open + 1,\n        close,\n      });\n    }\n\n    if (close < open) {\n      queue.push({\n        path: path + \")\",\n        open,\n        close: close + 1,\n      });\n    }\n  }\n\n  return queue.map((x) => x.path);\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/026._Remove_Duplicates_from_Sorted_Array/","relativePath":"docs/leetcode/026._Remove_Duplicates_from_Sorted_Array.md","relativeDir":"docs/leetcode","base":"026._Remove_Duplicates_from_Sorted_Array.md","name":"026._Remove_Duplicates_from_Sorted_Array","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

26. Remove Duplicates from Sorted Array

\n

Problem:

\n

Given a sorted array nums, remove the duplicates in-place such that each element appear only once and return the new length.

\n

Do not allocate extra space for another array, you must do this by modifying the input array in-place with O(1) extra memory.

\n

Example 1:

\n
Given nums = [1,1,2],\n\nYour function should return length = 2, with the first two elements of nums being 1 and 2 respectively.\n\nIt doesn't matter what you leave beyond the returned length.\n
\n

Example 2:

\n
Given nums = [0,0,1,1,1,2,2,3,3,4],\n\nYour function should return length = 5, with the first five elements of nums being modified to 0, 1, 2, 3, and 4 respectively.\n\nIt doesn't matter what values are set beyond the returned length.\n
\n

Clarification:

\n

Confused why the returned value is an integer but your answer is an array?

\n

Note that the input array is passed in by reference, which means modification to the input array will be known to the caller as well.

\n

Internally you can think of this:

\n
// nums is passed in by reference. (i.e., without making a copy)\nint len = removeDuplicates(nums);\n\n// any modification to nums in your function would be known by the caller.\n// using the length returned by your function, it prints the first len elements.\nfor (int i = 0; i < len; i++) {\n    print(nums[i]);\n}\n
\n

Solution:

\n

The result array can only be shorter. That is why we can build the array in-place with the new length.

\n
/**\n * @param {number[]} nums\n * @return {number}\n */\nlet removeDuplicates = function (nums) {\n  let len = 0;\n  for (let i = 0; i < nums.length; i++) {\n    if (nums[i] !== nums[i - 1]) {\n      nums[len++] = nums[i];\n    }\n  }\n  return len;\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/031._Next_Permutation/","relativePath":"docs/leetcode/031._Next_Permutation.md","relativeDir":"docs/leetcode","base":"031._Next_Permutation.md","name":"031._Next_Permutation","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

31. Next Permutation

\n

Problem:

\n

Implement next permutation, which rearranges numbers into the lexicographically next greater permutation of numbers.

\n

If such arrangement is not possible, it must rearrange it as the lowest possible order (ie, sorted in ascending order).

\n

The replacement must be in-place and use only constant extra memory.

\n

Here are some examples. Inputs are in the left-hand column and its corresponding outputs are in the right-hand column.

\n

1,2,3 → 1,3,2
\n3,2,1 → 1,2,3
\n1,1,5 → 1,5,1

\n

Solution:

\n

Observe a few longer examples and the pattern is self-evident.

\n

Divide the list into two parts. The first half must be incremental and the second half must be decremental.

\n

Reverse the second half and find the smallest number in it that is greater the last number of the first half.

\n

Swap the two.

\n
/**\n * @param {number[]} nums\n * @return {void} Do not return anything, modify nums in-place instead.\n */\nlet nextPermutation = function (nums) {\n  const len = nums.length;\n  if (len <= 1) {\n    return;\n  }\n\n  for (let i = len - 1; i > 0; i--) {\n    if (nums[i] > nums[i - 1]) {\n      let t;\n      for (let s = i, e = len - 1; s < e; s++, e--) {\n        t = nums[s];\n        nums[s] = nums[e];\n        nums[e] = t;\n      }\n\n      let j = len - 1;\n      while (nums[j] <= nums[i - 1]) {\n        j--;\n      }\n\n      t = nums[j];\n      nums[j] = nums[i - 1];\n      nums[i - 1] = t;\n\n      break;\n    }\n  }\n\n  if (i === 0) {\n    nums.reverse();\n  }\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/029._Divide_Two_Integers/","relativePath":"docs/leetcode/029._Divide_Two_Integers.md","relativeDir":"docs/leetcode","base":"029._Divide_Two_Integers.md","name":"029._Divide_Two_Integers","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

29. Divide Two Integers

\n

Problem:

\n

Given two integers dividend and divisor, divide two integers without using multiplication, division and mod operator.

\n

Return the quotient after dividing dividend by divisor.

\n

The integer division should truncate toward zero.

\n

Example 1:

\n
Input: dividend = 10, divisor = 3\nOutput: 3\n
\n

Example 2:

\n
Input: dividend = 7, divisor = -3\nOutput: -2\n
\n

Note:

\n
    \n
  • Both dividend and divisor will be 32-bit signed integers.
    • \n
  • The divisor will never be 0.
    • \n
  • Assume we are dealing with an environment which could only store integers within the 32-bit signed integer range: [−231, 231 − 1]. For the purpose of this problem, assume that your function returns 231 − 1 when the division result overflows.
    • \n
\n

Solution:

\n

Every decimal number can be represented as a0*2^0 + a1*2^1 + a2*2^2 + ... + an*2^n.

\n

Replace multiplication and division with binary shifting.

\n
/**\n * @param {number} dividend\n * @param {number} divisor\n * @return {number}\n */\nlet divide = function (dividend, divisor) {\n  if (\n    divisor === 0 ||\n    (divisor === -1 && dividend < -2147483647) ||\n    dividend > 2147483647 ||\n    dividend < -2147483648\n  ) {\n    return 2147483647;\n  }\n\n  const isNegative =\n    (dividend < 0 && divisor >= 0) || (dividend >= 0 && divisor < 0);\n  const pDividend = Math.abs(dividend);\n  const pDivisor = Math.abs(divisor);\n\n  if (dividend === 0 || pDividend < pDivisor) {\n    return 0;\n  }\n\n  let doubling = pDivisor;\n  let count = 1;\n  while (doubling < pDividend && !(doubling & (1 << 30))) {\n    doubling <<= 1;\n    count <<= 1;\n  }\n  if (doubling > pDividend) {\n    doubling >>>= 1;\n    count >>>= 1;\n  }\n\n  const result = count + divide(pDividend - doubling, pDivisor);\n  return isNegative ? -result : result;\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/033._Search_in_Rotated_Sorted_Array/","relativePath":"docs/leetcode/033._Search_in_Rotated_Sorted_Array.md","relativeDir":"docs/leetcode","base":"033._Search_in_Rotated_Sorted_Array.md","name":"033._Search_in_Rotated_Sorted_Array","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

33. Search in Rotated Sorted Array

\n

Problem:

\n

Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand.

\n

(i.e., [0,1,2,4,5,6,7] might become [4,5,6,7,0,1,2]).

\n

You are given a target value to search. If found in the array return its index, otherwise return -1.

\n

You may assume no duplicate exists in the array.

\n

Your algorithm's runtime complexity must be in the order of O(log n).

\n

Example 1:

\n
Input: nums = [4,5,6,7,0,1,2], target = 0\nOutput: 4\n
\n

Example 2:

\n
Input: nums = [4,5,6,7,0,1,2], target = 3\nOutput: -1\n
\n

Solution:

\n

Obviously the problem requires binary search.

\n

The core idea of binary search is to pick the middle item and then decide to keep which half.

\n

The precondition of it is the array must be sorted.

\n

But take a closer look and we realize that only one of the two halves needs to be sorted. This is sufficient for us to know if the target is in that half. If not, then it must be in the other.

\n

Whenever we choose a pivot, it must be in one of the two sorted parts of the rotated array.

\n
    \n
  • If the pivot is in the left part. We know that the begin of the left part to the pivot are sorted.
    • \n
  • Otherwise the pivot is in the right part. We know that the end of the right part to the pivot are sorted.
    • \n
\n
/**\n * @param {number[]} nums\n * @param {number} target\n * @return {number}\n */\nlet search = function (nums, target) {\n  let s = 0;\n  let e = nums.length - 1;\n\n  while (s <= e) {\n    const p = ((e + s) / 2) | 0;\n    const pivot = nums[p];\n\n    if (pivot === target) {\n      return p;\n    }\n\n    if (pivot < nums[e]) {\n      // right half is sorted\n      if (target > pivot && target <= nums[e]) {\n        // target is inside the right half\n        s = p + 1;\n      } else {\n        e = p - 1;\n      }\n    } else {\n      // left half is sorted\n      if (target < pivot && target >= nums[s]) {\n        // target is inside the left half\n        e = p - 1;\n      } else {\n        s = p + 1;\n      }\n    }\n  }\n\n  return -1;\n};\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
\n
\n

☆: .｡. o(≧▽≦)o .｡.:☆☆: .｡. o(≧▽≦)o .｡.:☆

\n
"},{"url":"/docs/leetcode/","relativePath":"docs/leetcode/index.md","relativeDir":"docs/leetcode","base":"index.md","name":"index","frontmatter":{"title":"Leetcode","weight":0,"excerpt":"feel free to try the examples","seo":{"title":"Leetcode Examples","description":"Leetcode practice","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"
\n
\n

Leetcode

\n
\n\n"},{"url":"/docs/projects/main-projects/","relativePath":"docs/projects/main-projects.md","relativeDir":"docs/projects","base":"main-projects.md","name":"main-projects","frontmatter":{"title":"RECENT PROJECTS","weight":0,"excerpt":"embedded utilities","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"
\n
\n
\n
\n
\n
\n
\n
\n
\n

Potluck Planner

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

Meditation App

\n
\n\n
\n
\n

Web Audio DAW

\n
\n\n
\n
\n
\n
\n
\n
\n
\n

React & Shopify Ecommerce Site (Norwex)

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Bgoonz Bookmarks

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Goal Tracker

\n
\n\n
\n
\n
"},{"url":"/docs/projects/","relativePath":"docs/projects/index.md","relativeDir":"docs/projects","base":"index.md","name":"index","frontmatter":{"title":"Projects","excerpt":"We'd love it if you participate in the Web-Dev-Hubcommunity. Find out how to get connected.","seo":{"title":"Projects","description":"introductory-react-part-2\na-very-quick-guide-to-calculating-big-o-computational-complexity\nintroduction-to-react css-animations\n","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Projects Articles","keyName":"property"},{"name":"og:description","value":"","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Projectss"},{"name":"twitter:description","value":"This is the community page"},{"name":"og:image","value":"images/beige-maple.png","keyName":"property","relativeUrl":true}]},"template":"docs","weight":0},"html":"
\n

Links:

\n
\n\n
\n

Search Awesome Lists

\n
\n\n
\n
\n
\n
\n
\n
\n

Useful Resource Archive #3

\n
\n\n
\n
\n
\n
\n
\n

Anywhere Fitness

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Project Image Portfolio

\n
\n\n
\n
\n
\n
\n
\n

Web Audio DAW

\n
\n\n
\n
\n
\n
\n
\n
\n
\n

React & Shopify Ecommerce Site (Norwex)

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Bgoonz Bookmarks

\n
\n\n
\n
\n
\n
\n
\n
\n

Portfolio

\n
\n\n
\n
\n

Goal Tracker

\n
\n\n
\n
\n
\n
\n
\n
\n

Potluck Planner

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

Meditation App

\n
\n\n
\n
"},{"url":"/docs/projects/mini-projects2/","relativePath":"docs/projects/mini-projects2.md","relativeDir":"docs/projects","base":"mini-projects2.md","name":"mini-projects2","frontmatter":{"title":"Mini Projects 2","excerpt":"In this section you'll learn how to add syntax highlighting, examples, callouts and much more.","seo":{"title":"Mini Projects 2","description":"This is the Mini Projects page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Mini Projects","keyName":"property"},{"name":"og:description","value":"This is the Mini Projects page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Mini Projects"},{"name":"twitter:description","value":"This is the Mini Projects page"}]},"template":"docs","weight":0},"html":"
\n
\n
\n
\n
\n

Random Embedable Content

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Fractions Website

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Dev Journal

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Blood Sugars for

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Norwex Ecommerce

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Sidebar Blog

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Markdown Templates

\n
\n\n \n
\n
\n
\n
\n
"},{"url":"/docs/projects/embeded-websites/","relativePath":"docs/projects/embeded-websites.md","relativeDir":"docs/projects","base":"embeded-websites.md","name":"embeded-websites","frontmatter":{"title":"Embeded Websites & Projects","weight":0,"seo":{"title":"Gatsby Plugins For This Sites Content Model","description":"This is my markdown notes tempate","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Gatsby Plugins For This Sites Content Model","keyName":"property"},{"name":"og:description","value":"This is the Gatsby Plugins For This Sites Content Model page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Gatsby Plugins For This Sites Content Model"},{"name":"twitter:description","value":"This is the Gatsby Plugins For This Sites Content Model page"}]},"template":"docs"},"html":"
\n
\n
\n

Family Promise Project:

\n

Table of contents

\n\n

navigation

\n\n

UX

\n\n

CANVAS

\n\n

Front End

\n\n

Back End

\n\n

Research

\n\n

DS_API

\n\n

ROLES

\n\n

Action Items

\n\n

ARCHITECTURE

\n\n

Questions

\n\n

Standup Notes

\n\n

GitHub & Project Practice

\n\n

MISC

\n\n

Background Information

\n\n

DOCS

\n\n

Workflow

\n\n

AWS

\n\n

Career & Job Hunt

\n\n

Group 1

\n\n\n\n
\n
\n
\n
\n
\n
\n

Family-Promise Application

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

Speach Recognition api

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Paste To Markdown

\n
\n\n \n \n \n
\n
\n

Paste Excel Tabel To Markdown

\n\n
\n
\n
\n

Paste excel to HTML

\n
\n\n
\n

Cloud Storage

\n
\n

Up to 1TB of cloud Storage for file sharing!

\n\n
\n
\n
\n
\n
\n
\n

Resource Archive

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

Lambda Student Site

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Text Tools

\n
\n\n
\n
\n
\n
\n
\n
\n

Ternary Converter

\n
\n\n
\n
\n
\n
\n
\n
\n

Github HTML Render from link

\n
\n\n
\n
\n
\n
\n
\n
\n

Data Structures

\n
\n\n
\n
\n
\n
\n
\n
\n

Interview

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

Form Builder GUI

\n
\n\n
\n
\n
\n

Border Builder

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

\n
\n\n \n \n \n
\n
\n
\n

\n
\n \n \n \n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n\\\n
\n
\n
\n \n
\n
\n
\n \n src=\"//jsfiddle.net/bgoonz/1dye9uws/2/embedded/js,html,css,result/dark/\" allowfullscreen=\"allowfullscreen\"\n frameborder=\"0\">\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n \n
\n \n
\n
\n
\n \n \n \n
\n
\n \n
\n
\n
\n
\n \n

\n
\n \n
\n \n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n
\n \n
\n\n
\n
\n \n \n
\n
\n
\n \n
\n \n \n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n \n
\n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n
\n \n \n
\n
\n
"},{"url":"/docs/projects/list-of-projects/","relativePath":"docs/projects/list-of-projects.md","relativeDir":"docs/projects","base":"list-of-projects.md","name":"list-of-projects","frontmatter":{"title":"List Of Projects","excerpt":"We'd love it if you participate in the Web-Dev-Hubcommunity. Find out how to get connected.","seo":{"title":"List Of Projects","description":"introductory-react-part-2\na-very-quick-guide-to-calculating-big-o-computational-complexity\nintroduction-to-react css-animations\n","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"List Of Projects Articles","keyName":"property"},{"name":"og:description","value":"","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"List Of Projectss"},{"name":"twitter:description","value":"This is the community page"},{"name":"og:image","value":"images/beige-maple.png","keyName":"property","relativeUrl":true}]},"template":"docs","weight":0},"html":"
    \n
  1. WEB DEV RESOURCE HUB
    2. \n
  2. Learn Redux
    3. \n
  3. Data Structures Website
    4. \n
  4. Web-Dev-Quizzes
    5. \n
  5. Recursion
    6. \n
  6. React Documentation Site
    7. \n
  7. Blogs-from-webdevhub
    8. \n
  8. Realty Website Demo
    9. \n
  9. Best-Prac & Tools
    10. \n
  10. site-analysis
    11. \n
  11. a/AOpen Notes
    12. \n
  12. Iframe Embed Playground
    13. \n
  13. Triggered Effects Guitar Platform
    14. \n
  14. Live Form
    15. \n
  15. Interview Questions
    16. \n
  16. Resources Compilation
    17. \n
  17. React Blog Depreciated
    18. \n
  18. MihirBeg.com
    19. \n
  19. Embeded Html Projects
    20. \n
  20. Cheat Sheets
    21. \n
  21. Early Version Of WebDevHub
    22. \n
  22. My Gists
    23. \n
  23. DS-Algo-Links
    24. \n
  24. Video Chat App
    25. \n
  25. Ciriculumn
    26. \n
  26. Cheat Sheets
    27. \n
  27. Links
    28. \n
  28. Medium Articles
    29. \n
  29. NextJS Blog Template
    30. \n
  30. React Demo
    31. \n
  31. Ecomerce Norwex V1
    32. \n
  32. Gifs
    33. \n
  33. Excel2HTML
    34. \n
  34. Data Structures Site
    35. \n
  35. Portfolio
    36. \n
  36. Page Templates
    37. \n
  37. Photo Gallary
    38. \n
  38. Coffee Website
    39. \n
  39. Awesome Resources
    40. \n
  40. Cheat Sheets
    41. \n
  41. Link City
    42. \n
  42. VSCODE Extensions
    43. \n
  43. webdevhub manual attempt
    44. \n
  44. Norwex Resources
    45. \n
  45. idk
    46. \n
  46. heroku bare bones template
    47. \n
  47. bad reads
    48. \n
  48. docusaurus
    49. \n
  49. stackbit
    50. \n
\n
\n

More:

\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n"},{"url":"/docs/projects/my-websites/","relativePath":"docs/projects/my-websites.md","relativeDir":"docs/projects","base":"my-websites.md","name":"my-websites","frontmatter":{"title":"My Sites","excerpt":"In this section you'll learn how to add syntax highlighting, examples, callouts and much more.","seo":{"title":"My Sites","description":"This is the My Sites page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"My Sites","keyName":"property"},{"name":"og:description","value":"This is the My Sites page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"My Sites"},{"name":"twitter:description","value":"This is the My Sites page"}]},"template":"docs","weight":0},"html":"\n

Links

\n
\n\n
\n
\n
\n
\n
\n

Wikipedia Viewer

\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n/\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n/intro-js2.html\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n/intro-js2.html\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n/\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n \n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
"},{"url":"/docs/projects/mini-projects/","relativePath":"docs/projects/mini-projects.md","relativeDir":"docs/projects","base":"mini-projects.md","name":"mini-projects","frontmatter":{"title":"Mini Projects","excerpt":"We'd love it if you participate in the Web-Dev-Hubcommunity. Find out how to get connected.","seo":{"title":"Mini Projects","description":"introductory-react-part-2\na-very-quick-guide-to-calculating-big-o-computational-complexity\nintroduction-to-react css-animations\n","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Mini Projects Articles","keyName":"property"},{"name":"og:description","value":"","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Mini Projectss"},{"name":"twitter:description","value":"This is the community page"},{"name":"og:image","value":"images/beige-maple.png","keyName":"property","relativeUrl":true}]},"template":"docs","weight":0},"html":"\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\nsrc=\"//jsfiddle.net/bgoonz/1dye9uws/2/embedded/js,html,css,result/dark/\" allowfullscreen=\"allowfullscreen\"\nframeborder=\"0\">\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n
\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n

\n
\n\n
\n
\n
\n
\n
\n
\n\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n

\nSee the Pen \n Simple Responsive Form by Bryan Guner (@bgoonz)\n on CodePen.\n

\n\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n
\n
"},{"url":"/docs/python/flow-control/","relativePath":"docs/python/flow-control.md","relativeDir":"docs/python","base":"flow-control.md","name":"flow-control","frontmatter":{"title":"lorem-ipsum","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Flow Control:

\n

Read It

\n\n

Flow Control

\n

Comparison Operators

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OperatorMeaning
==Equal to
!=Not equal to
<Less than
>Greater Than
<=Less than or Equal to
>=Greater than or Equal to
\n

These operators evaluate to True or False depending on the values you give them.

\n

Examples:

\n
42 == 42\n
\n
40 == 42\n
\n
'hello' == 'hello'\n
\n
'hello' == 'Hello'\n
\n
'dog' != 'cat'\n
\n
42 == 42.0\n
\n
42 == '42'\n
\n

Boolean evaluation

\n

Never use == or != operator to evaluate boolean operation. Use the is or is not operators,\nor use implicit boolean evaluation.

\n

NO (even if they are valid Python):

\n
True == True\n
\n
True != False\n
\n

YES (even if they are valid Python):

\n
True is True\n
\n
True is not False\n
\n

These statements are equivalent:

\n
if a is True:\n   pass\nif a is not False:\n   pass\nif a:\n   pass\n
\n

And these as well:

\n
if a is False:\n   pass\nif a is not True:\n   pass\nif not a:\n   pass\n
\n

Boolean Operators

\n

There are three Boolean operators: and, or, and not.

\n

The and Operator's Truth Table:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ExpressionEvaluates to
True and TrueTrue
True and FalseFalse
False and TrueFalse
False and FalseFalse
\n

The or Operator's Truth Table:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ExpressionEvaluates to
True or TrueTrue
True or FalseTrue
False or TrueTrue
False or FalseFalse
\n

The not Operator's Truth Table:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ExpressionEvaluates to
not TrueFalse
not FalseTrue
\n

Mixing Boolean and Comparison Operators

\n
(4 < 5) and (5 < 6)\n
\n
(4 < 5) and (9 < 6)\n
\n
(1 == 2) or (2 == 2)\n
\n

You can also use multiple Boolean operators in an expression, along with the comparison operators:

\n
2 + 2 == 4 and not 2 + 2 == 5 and 2 * 2 == 2 + 2\n
\n

if Statements

\n
if name == 'Alice':\n    print('Hi, Alice.')\n
\n

else Statements

\n
name = 'Bob'\n\nif name == 'Alice':\n    print('Hi, Alice.')\nelse:\n    print('Hello, stranger.')\n
\n

elif Statements

\n
name = 'Bob'\nage = 5\n\nif name == 'Alice':\n    print('Hi, Alice.')\nelif age < 12:\n    print('You are not Alice, kiddo.')\n
\n
name = 'Bob'\nage = 30\n\nif name == 'Alice':\n    print('Hi, Alice.')\nelif age < 12:\n    print('You are not Alice, kiddo.')\nelse:\n    print('You are neither Alice nor a little kid.')\n
\n

while Loop Statements

\n
spam = 0\n\nwhile spam < 5:\n    print('Hello, world.')\n    spam = spam + 1\n
\n

break Statements

\n

If the execution reaches a break statement, it immediately exits the while loop's clause:

\n
while True:\n    print('Please type your name.')\n    name = input()\n    if name == 'your name':\n        break\n\nprint('Thank you!')\n
\n

continue Statements

\n

When the program execution reaches a continue statement, the program execution immediately jumps back to the start of the loop.

\n
while True:\n    print('Who are you?')\n    name = input()\n    if name != 'Joe':\n        continue\n    print('Hello, Joe. What is the password? (It is a fish.)')\n    password = input()\n    if password == 'swordfish':\n        break\n\nprint('Access granted.')\n
\n

for Loops and the range() Function

\n
print('My name is')\nfor i in range(5):\n    print('Jimmy Five Times ({})'.format(str(i)))\n
\n

The range() function can also be called with three arguments. The first two arguments will be the start and stop values, and the third will be the step argument. The step is the amount that the variable is increased by after each iteration.

\n
for i in range(0, 10, 2):\n   print(i)\n
\n

You can even use a negative number for the step argument to make the for loop count down instead of up.

\n
for i in range(5, -1, -1):\n    print(i)\n
\n

For else statement

\n

This allows you to specify a statement to execute after the full loop has been executed. Only\nuseful when a break condition can occur in the loop:

\n
for i in [1, 2, 3, 4, 5]:\n   if i == 3:\n       break\nelse:\n   print(\"only executed when no item of the list is equal to 3\")\n
\n

Importing Modules

\n
import random\n\nfor i in range(5):\n    print(random.randint(1, 10))\n
\n
import random, sys, os, math\n
\n
from random import *\n
\n

Ending a Program with sys.exit

\n
import sys\n\nwhile True:\n    print('Type exit to exit.')\n    response = input()\n    if response == 'exit':\n        sys.exit()\n    print('You typed {}.'.format(response))\n
"},{"url":"/docs/python/examples/","relativePath":"docs/python/examples.md","relativeDir":"docs/python","base":"examples.md","name":"examples","frontmatter":{"title":"Practice","weight":0,"excerpt":"Example Problems","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Python Practice:

\n

Python Problems & Solutions For Beginners

\n

Introduction to python taught through example problems. Solutions are included in embedded repl.it at the bottom of this page for you to…

\n
\n

Python Problems & Solutions For Beginners

\n

Introduction to python taught through example problems. Solutions are included in embedded repl.it at the bottom of this page for you to practice and refactor.

\n

Python Practice Problems

\n
\n
\n

Here are some other articles for reference if you need them:

\n

Beginners Guide To Python
\nMy favorite language for maintainability is Python. It has simple, clean syntax, object encapsulation, good library…medium.com

\n

Python Study Guide for a JavaScript Programmer
\nA guide to commands in Python from what you know in JavaScriptlevelup.gitconnected.com

\n
\n

Here are the problems without solutions for you to practice with:

\n
\n

Problem 1

\n

Create a program that asks the user to enter their name and their age. Print out a message addressed to them that tells them the year that they will turn 100 years old.

\n

The datetime module supplies classes for manipulating dates and times.

\n

While date and time arithmetic is supported, the focus of the implementation is on efficient attribute extraction for output formatting and manipulation.

\n

datetime - Basic date and time types - Python 3.9.6 documentation
\nOnly one concrete class, the class, is supplied by the module. The class can represent simple timezones with fixed…docs.python.org

\n

Problem 2

\n

Ask the user for a number. Depending on whether the number is even or odd, print out an appropriate message to the user.

\n

Bonus:

\n
    \n
  1. If the number is a multiple of 4, print out a different message.
    2. \n
  2. Ask the user for two numbers: one number to check (call it num) and one number to divide by (check). If check divides evenly into num, tell that to the user. If not, print a different appropriate message.
    3. \n
\n

Problem 3

\n

Take a list and write a program that prints out all the elements of the list that are less than 5.

\n

Extras:

\n
    \n
  1. Instead of printing the elements one by one, make a new list that has all the elements less than 5 from this list in it and print out this new list.
    2. \n
  2. Write this in one line of Python.
    3. \n
  3. Ask the user for a number and return a list that contains only elements from the original list a that are smaller than that number given by the user.
    4. \n
\n

Problem 4

\n

Create a program that asks the user for a number and then prints out a list of all the divisors of that number. (If you don't know what a divisor is, it is a number that divides evenly into another number.

\n

For example, 13 is a divisor of 26 because 26 / 13 has no remainder.)

\n

Problem 5

\n

Take two lists, and write a program that returns a list that contains only the elements that are common between the lists (without duplicates). Make sure your program works on two lists of different sizes.

\n

random - Generate pseudo-random numbers - Python 3.9.6 documentation
\nSource code: Lib/random.py This module implements pseudo-random number generators for various distributions. For…docs.python.org

\n

Bonus:

\n
    \n
  1. Randomly generate two lists to test this.
    2. \n
  2. Write this in one line of Python.
    3. \n
\n

Problem 6

\n

Ask the user for a string and print out whether this string is a palindrome or not. (A palindrome is a string that reads the same forwards and backwards.)

\n
\n

Here's 5 ways to reverse a string (courtesy of geeksforgeeks)

\n
\n
\n

Problem 7

\n

Let's say I give you a list saved in a variable: a = [1, 4, 9, 16, 25, 36, 49, 64, 81, 100].

\n

Write one line of Python that takes this list a and makes a new list that has only the even elements of this list in it.

\n

Problem 8

\n

Make a two-player Rock-Paper-Scissors game.

\n

Hint:
\nAsk for player plays (using input), compare them. Print out a message of congratulations to the winner, and ask if the players want to start a new game.

\n
### Problem 9\n

Generate a random number between 1 and 100 (including 1 and 100). Ask the user to guess the number, then tell them whether they guessed too low, too high, or exactly right.

\n
\n

Hint:
\nRemember to use the user input from the very first exercise.

\n
\n

Extras:
\nKeep the game going until the user types “exit”.
\nKeep track of how many guesses the user has taken, and when the game ends, print this out.

\n

Problem 10

\n

Write a program that asks the user how many Fibonacci numbers to generate and then generates them. Take this opportunity to think about how you can use functions. Make sure to ask the user to enter the number of numbers in the sequence to generate.

\n

Hint:
\nThe Fibonacci sequence is a sequence of numbers where the next number in the sequence is the sum of the previous two numbers in the sequence. The sequence looks like this: 1, 1, 2, 3, 5, 8, 13, …

\n
\n
\n

Intermediate Problems:

\n
\n
\n

Problem 11

\n

In linear algebra, a Toeplitz matrix is one in which the elements on any given diagonal from top left to bottom right are identical.
\nHere is an example:

\n
1 2 3 4 8\n5 1 2 3 4\n4 5 1 2 3\n7 4 5 1 2\n
\n

Write a program to determine whether a given input is a Toeplitz matrix.

\n

Problem 12

\n

Given a positive integer N, find the smallest number of steps it will take to reach 1.

\n

There are two kinds of permitted steps:
\n— -> You may decrement N to N — 1.
\n— -> If a * b = N, you may decrement N to the larger of a and b.

\n

For example, given 100, you can reach 1 in 5 steps with the following route:
\n100 -> 10 -> 9 -> 3 -> 2 -> 1.

\n

Problem 13

\n

Consider the following scenario: there are N mice and N holes placed at integer points along a line. Given this, find a method that maps mice to holes such that the largest number of steps any mouse takes is minimized.

\n

Each move consists of moving one mouse one unit to the left or right, and only one mouse can fit inside each hole.

\n

For example, suppose the mice are positioned at [1, 4, 9, 15], and the holes are located at [10, -5, 0, 16]. In this case, the best pairing would require us to send the mouse at 1 to the hole at -5, so our function should return 6.

\n

My Blog:

\n

Web-Dev-Hub
\nMemoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…master--bgoonz-blog.netlify.app

\n

A list of all of my articles to link to future posts
\nYou should probably skip this one… seriously it's just for internal use!bryanguner.medium.com

\n
\n

Python

\n
    \n
  • Python is an interpreted, high-level and general-purpose, dynamically typed programming language
    • \n
  • It is also Object oriented, modular oriented and a scripting language.
    • \n
  • In Python, everything is considered as an Object.
    • \n
  • A python file has an extension of .py
    • \n
  • Python follows Indentation to separate code blocks instead of flower brackets({}).
    • \n
  • \n

    We can run a python file by the following command in cmd(Windows) or shell(mac/linux).

    \n

    python <filename.py>

    \n
    • \n
\n

By default, the python doesn't require any imports to run a python file.

\n

Create and execute a program

\n
    \n
  1. Open up a terminal/cmd
    2. \n
  2. Create the program: nano/cat > nameProgram.py
    3. \n
  3. Write the program and save it
    4. \n
  4. python nameProgram.py
    5. \n
\n
\n

Basic Datatypes

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Data TypeDescription
intInteger values [0, 1, -2, 3]
floatFloating point values [0.1, 4.532, -5.092]
charCharacters [a, b, @, !, `]
strStrings [abc, AbC, A@B, sd!, `asa]
boolBoolean Values [True, False]
charCharacters [a, b, @, !, `]
complexComplex numbers [2+3j, 4-1j]
\n
\n

Keywords

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeywordDescription
breakused to exit loop and used to exit
charbasic declaration of a type character
constprefix declaration meaning variable can not be changed
continuego to bottom of loop in for, while loops
classto define a class
defto define a function
elifshortcut for (else if) used in else if ladder
elseexecutable statement, part of \"if\" structure
floatbasic declaration of floating point
forexecutable statement, for loop
fromexecutable statement, used to import only specific objects from a package
ifexecutable statement
importto import modules
passkeyword to specify noting is happening in the codeblock, generally used in classes
returnexecutable statement with or without a value
whileexecutable statement, while loop
\n
\n

Operators

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OperatorDescription
( )grouping parenthesis, function call, tuple declaration
[ ]array indexing, also declaring lists etc.
!relational not, complement, ! a yields true or false
~bitwise not, ones complement, ~a
-unary minus, - a
+unary plus, + a
*multiply, a * b
/divide, a / b
%modulo, a % b
+add, a + b
-subtract, a - b
<<shift left, left operand is shifted left by right operand bits
>>shift right, left operand is shifted right by right operand bits
<less than, result is true or false, a %lt; b
<=less than or equal, result is true or false, a <= b
>greater than, result is true or false, a > b
>=greater than or equal, result is true or false, a >= b
==equal, result is true or false, a == b
!=not equal, result is true or false, a != b
&bitwise and, a & b
^bitwise exclusive or XOR, a ^ b
|bitwise or, ab
&&, andrelational and, result is true or false, a < b && c >= d
||, orrelational or, result is true or false, a < b || c >= d
=store or assignment
+=add and store
-=subtract and store
*=multiply and store
/=divide and store
%=modulo and store
<<=shift left and store
>>=shift right and store
&=bitwise and and store
^=bitwise exclusive or and store
|=bitwise or and store
,separator as in ( y=x,z=++x )
\n

Basic Data Structures

\n

List

\n
    \n
  • List is a collection which is ordered and changeable. Allows duplicate members.
    • \n
  • Lists are created using square brackets:
    • \n
\n
thislist = [\"apple\", \"banana\", \"cherry\"]\n
\n
    \n
  • List items are ordered, changeable, and allow duplicate values.
    • \n
  • List items are indexed, the first item has index [0], the second item has index [1] etc.
    • \n
  • The list is changeable, meaning that we can change, add, and remove items in a list after it has been created.
    • \n
  • To determine how many items a list has, use the len() function.
    • \n
  • A list can contain different data types:
    • \n
\n
list1 = [\"abc\", 34, True, 40, \"male\"]\n
\n
    \n
  • It is also possible to use the list() constructor when creating a new list
    • \n
\n
thislist = list((\"apple\", \"banana\", \"cherry\"))  # note the double round-brackets\n
\n

Tuple

\n
    \n
  • Tuple is a collection which is ordered and unchangeable. Allows duplicate members.
    • \n
  • A tuple is a collection which is ordered and unchangeable.
    • \n
  • Tuples are written with round brackets.
    • \n
\n
thistuple = (\"apple\", \"banana\", \"cherry\")\n
\n
    \n
  • Tuple items are ordered, unchangeable, and allow duplicate values.
    • \n
  • Tuple items are indexed, the first item has index [0], the second item has index [1] etc.
    • \n
  • When we say that tuples are ordered, it means that the items have a defined order, and that order will not change.
    • \n
  • Tuples are unchangeable, meaning that we cannot change, add or remove items after the tuple has been created.
    • \n
  • Since tuple are indexed, tuples can have items with the same value:
    • \n
  • Tuples allow duplicate values:
    • \n
\n
thistuple = (\"apple\", \"banana\", \"cherry\", \"apple\", \"cherry\")\n
\n
    \n
  • To determine how many items a tuple has, use the len()function:
    • \n
\n
thistuple = (\"apple\", \"banana\", \"cherry\")\nprint(len(thistuple))\n
\n
    \n
  • To create a tuple with only one item, you have to add a comma after the item, otherwise Python will not recognize it as a tuple.
    • \n
\n
thistuple = (\"apple\",)\nprint(type(thistuple))\n\n#NOT a tuple\nthistuple = (\"apple\")\nprint(type(thistuple))\n
\n
    \n
  • It is also possible to use the tuple() constructor to make a tuple.
    • \n
\n
thistuple = tuple((\"apple\", \"banana\", \"cherry\")) # note the double round-brackets\nprint(thistuple)\n
\n

Set

\n
    \n
  • Set is a collection which is unordered and unindexed. No duplicate members.
    • \n
  • A set is a collection which is both unordered and unindexed.
    • \n
\n
thisset = {\"apple\", \"banana\", \"cherry\"}\n
\n
    \n
  • Set items are unordered, unchangeable, and do not allow duplicate values.
    • \n
  • Unordered means that the items in a set do not have a defined order.
    • \n
  • Set items can appear in a different order every time you use them, and cannot be referred to by index or key.
    • \n
  • Sets are unchangeable, meaning that we cannot change the items after the set has been created.
    • \n
  • Duplicate values will be ignored.
    • \n
  • To determine how many items a set has, use the len() method.
    • \n
\n
thisset = {\"apple\", \"banana\", \"cherry\"}\n\nprint(len(thisset))\n
\n
    \n
  • Set items can be of any data type:
    • \n
\n
set1 = {\"apple\", \"banana\", \"cherry\"}\nset2 = {1, 5, 7, 9, 3}\nset3 = {True, False, False}\nset4 = {\"abc\", 34, True, 40, \"male\"}\n
\n
    \n
  • It is also possible to use the set() constructor to make a set.
    • \n
\n
thisset = set((\"apple\", \"banana\", \"cherry\")) # note the double round-brackets\n
\n

Dictionary

\n
    \n
  • Dictionary is a collection which is unordered and changeable. No duplicate members.
    • \n
  • Dictionaries are used to store data values in key:value pairs.
    • \n
  • Dictionaries are written with curly brackets, and have keys and values:
    • \n
\n
thisdict = {\n  \"brand\": \"Ford\",\n  \"model\": \"Mustang\",\n  \"year\": 1964\n}\n
\n
    \n
  • Dictionary items are presented in key:value pairs, and can be referred to by using the key name.
    • \n
\n
thisdict = {\n  \"brand\": \"Ford\",\n  \"model\": \"Mustang\",\n  \"year\": 1964\n}\nprint(thisdict[\"brand\"])\n
\n
    \n
  • Dictionaries are changeable, meaning that we can change, add or remove items after the dictionary has been created.
    • \n
  • Dictionaries cannot have two items with the same key.
    • \n
  • Duplicate values will overwrite existing values.
    • \n
  • To determine how many items a dictionary has, use the len() function.
    • \n
\n
print(len(thisdict))\n
\n
    \n
  • The values in dictionary items can be of any data type
    • \n
\n
thisdict = {\n  \"brand\": \"Ford\",\n  \"electric\": False,\n  \"year\": 1964,\n  \"colors\": [\"red\", \"white\", \"blue\"]\n}\n
\n

Conditional branching

\n
    if condition:\n        pass\n    elif condition2:\n        pass\n    else:\n        pass\n
\n

Loops

\n

Python has two primitive loop commands:

\n
    \n
  1. while loops
    2. \n
  2. for loops
    3. \n
\n

While loop

\n
    \n
  • With the while loop we can execute a set of statements as long as a condition is true.
    • \n
  • Example: Print i as long as i is less than 6
    • \n
\n
i = 1\nwhile i < 6:\n  print(i)\n  i += 1\n
\n
    \n
  • The while loop requires relevant variables to be ready, in this example we need to define an indexing variable, i, which we set to 1.
    • \n
  • With the break statement we can stop the loop even if the while condition is true
    • \n
  • With the continue statement we can stop the current iteration, and continue with the next.
    • \n
  • With the else statement we can run a block of code once when the condition no longer is true.
    • \n
\n

For loop

\n
    \n
  • A for loop is used for iterating over a sequence (that is either a list, a tuple, a dictionary, a set, or a string).
    • \n
  • This is less like the for keyword in other programming languages, and works more like an iterator method as found in other object-orientated programming languages.
    • \n
  • With the for loop we can execute a set of statements, once for each item in a list, tuple, set etc.
    • \n
\n
fruits = [\"apple\", \"banana\", \"cherry\"]\nfor x in fruits:\n  print(x)\n
\n
    \n
  • The for loop does not require an indexing variable to set beforehand.
    • \n
  • To loop through a set of code a specified number of times, we can use the range() function.
    • \n
  • The range() function returns a sequence of numbers, starting from 0 by default, and increments by 1 (by default), and ends at a specified number.
    • \n
  • The range() function defaults to increment the sequence by 1, however it is possible to specify the increment value by adding a third parameter: range(2, 30, 3).
    • \n
  • The else keyword in a for loop specifies a block of code to be executed when the loop is finished.\nA nested loop is a loop inside a loop.
    • \n
  • The \"inner loop\" will be executed one time for each iteration of the \"outer loop\":
    • \n
\n
adj = [\"red\", \"big\", \"tasty\"]\nfruits = [\"apple\", \"banana\", \"cherry\"]\n\nfor x in adj:\n  for y in fruits:\n    print(x, y)\n
\n
    \n
  • for loops cannot be empty, but if you for some reason have a for loop with no content, put in the pass statement to avoid getting an error.
    • \n
\n
for x in [0, 1, 2]:\n  pass\n
\n

Function definition

\n
def function_name():\n    return\n
\n

Function call

\n
function_name()\n
\n
    \n
  • We need not to specify the return type of the function.
    • \n
  • Functions by default return None
    • \n
  • We can return any datatype.
    • \n
\n
def say_hi(name):\n    \"\"\"<---- Multi-Line Comments and Docstrings\n    This is where you put your content for help() to inform the user\n    about what your function does and how to use it\n    \"\"\"\n    print(f\"Hello {name}!\")\n\nprint(say_hi(\"Bryan\"))  # Should get the print inside the function, then None\n# Boolean Values\n# Work the same as in JS, except they are title case: True and False\na = True\nb = False\n# Logical Operators\n# ! = not, || = or, && = and\nprint(True and True)\nprint(True and not True)\nprint(True or True)\n# Truthiness - Everything is True except...\n# False - None, False, '', [], (), set(), range(0)\n# Number Values\n# Integers are numbers without a floating decimal point\nprint(type(3))  # type returns the type of whatever argument you pass in\n# Floating Point values are numbers with a floating decimal point\nprint(type(3.5))\n# Type Casting\n# You can convert between ints and floats (along with other types...)\nprint(float(3))  # If you convert a float to an int, it will truncate the decimal\nprint(int(4.5))\nprint(type(str(3)))\n# Python does not automatically convert types like JS\n# print(17.0 + ' heyooo ' + 17)  # TypeError\n# Arithmetic Operators\n# ** - exponent (comparable to Math.pow(num, pow))\n# // - integer division\n# There is no ++ or -- in Python\n# String Values\n# We can use single quotes, double quotes, or f'' for string formats\n# We can use triple single quotes for multiline strings\nprint(\n    \"\"\"This here's a story\nAll about how\nMy life got twist\nTurned upside down\n\"\"\"\n)\n# Three double quotes can also be used, but we typically reserve these for\n# multi-line comments and function docstrings (refer to lines 6-9)(Nice :D)\n# We use len() to get the length of something\nprint(len(\"Bryan G\"))  # 7 characters\nprint(len([\"hey\", \"ho\", \"hey\", \"hey\", \"ho\"]))  # 5 list items\nprint(len({1, 2, 3, 4, 5, 6, 7, 9}))  # 8 set items\n# We can index into strings, list, etc..self.\nname = \"Bryan\"\nfor i in range(len(name)):\n    print(name[i])  # B, r, y, a, n\n# We can index starting from the end as well, with negatives\noccupation = \"Full Stack Software Engineer\"\nprint(occupation[-3])  # e\n# We can also get ranges in the index with the [start:stop:step] syntax\nprint(occupation[0:4:1])  # step and stop are optional, stop is exclusive\nprint(occupation[::4])  # beginning to end, every 4th letter\nprint(occupation[4:14:2])  # Let's get weird with it!\n# NOTE: Indexing out of range will give you an IndexError\n# We can also get the index og things with the .index() method, similar to indexOf()\nprint(occupation.index(\"Stack\"))\nprint([\"Mike\", \"Barry\", \"Cole\", \"James\", \"Mark\"].index(\"Cole\"))\n# We can count how many times a substring/item appears in something as well\nprint(occupation.count(\"S\"))\nprint(\n    \"\"\"Now this here's a story all about how\nMy life got twist turned upside down\nI forget the rest but the the the potato\nsmells like the potato\"\"\".count(\n        \"the\"\n    )\n)\n# We concatenate the same as Javascript, but we can also multiply strings\nprint(\"dog \" + \"show\")\nprint(\"ha\" * 10)\n# We can use format for a multitude of things, from spaces to decimal places\nfirst_name = \"Bryan\"\nlast_name = \"Guner\"\nprint(\"Your name is {0} {1}\".format(first_name, last_name))\n# Useful String Methods\nprint(\"Hello\".upper())  # HELLO\nprint(\"Hello\".lower())  # hello\nprint(\"HELLO\".islower())  # False\nprint(\"HELLO\".isupper())  # True\nprint(\"Hello\".startswith(\"he\"))  # False\nprint(\"Hello\".endswith(\"lo\"))  # True\nprint(\"Hello There\".split())  # [Hello, There]\nprint(\"hello1\".isalpha())  # False,  must consist only of letters\nprint(\"hello1\".isalnum())  # True, must consist of only letters and numbers\nprint(\"3215235123\".isdecimal())  # True, must be all numbers\n# True, must consist of only spaces/tabs/newlines\nprint(\"       \\n     \".isspace())\n# False, index 0 must be upper case and the rest lower\nprint(\"Bryan Guner\".istitle())\nprint(\"Michael Lee\".istitle())  # True!\n# Duck Typing - If it walks like a duck, and talks like a duck, it must be a duck\n# Assignment - All like JS, but there are no special keywords like let or const\na = 3\nb = a\nc = \"heyoo\"\nb = [\"reassignment\", \"is\", \"fine\", \"G!\"]\n# Comparison Operators - Python uses the same equality operators as JS, but no ===\n# < - Less than\n# > - Greater than\n# <= - Less than or Equal\n# >= - Greater than or Equal\n# == - Equal to\n# != - Not equal to\n# is - Refers to exact same memory location\n# not - !\n# Precedence - Negative Signs(not) are applied first(part of each number)\n#            - Multiplication and Division(and) happen next\n#            - Addition and Subtraction(or) are the last step\n#  NOTE: Be careful when using not along with ==\nprint(not a == b)  # True\n# print(a == not b) # Syntax Error\nprint(a == (not b))  # This fixes it. Answer: False\n# Python does short-circuit evaluation\n# Assignment Operators - Mostly the same as JS except Python has **= and //= (int division)\n# Flow Control Statements - if, while, for\n# Note: Python smushes 'else if' into 'elif'!\nif 10 < 1:\n    print(\"We don't get here\")\nelif 10 < 5:\n    print(\"Nor here...\")\nelse:\n    print(\"Hey there!\")\n# Looping over a string\nfor c in \"abcdefgh\":\n    print(c)\n# Looping over a range\nfor i in range(5):\n    print(i + 1)\n# Looping over a list\nlst = [1, 2, 3, 4]\nfor i in lst:\n    print(i)\n# Looping over a dictionary\nspam = {\"color\": \"red\", \"age\": 42, \"items\": [(1, \"hey\"), (2, \"hooo!\")]}\nfor v in spam.values():\n    print(v)\n# Loop over a list of tuples and destructuring the values\n# Assuming spam.items returns a list of tuples each containing two items (k, v)\nfor k, v in spam.items():\n    print(f\"{k}: {v}\")\n# While loops as long as the condition is True\n#  - Exit loop early with break\n#  - Exit iteration early with continue\nspam = 0\nwhile True:\n    print(\"Sike That's the wrong Numba\")\n    spam += 1\n    if spam < 5:\n        continue\n    break\n\n# Functions - use def keyword to define a function in Python\ndef printCopyright():\n    print(\"Copyright 2021, Bgoonz\")\n\n# Lambdas are one liners! (Should be at least, you can use parenthesis to disobey)\navg = lambda num1, num2: print(num1 + num2)\navg(1, 2)\n# Calling it with keyword arguments, order does not matter\navg(num2=20, num1=1252)\nprintCopyright()\n# We can give parameters default arguments like JS\ndef greeting(name, saying=\"Hello\"):\n    print(saying, name)\n\ngreeting(\"Mike\")  # Hello Mike\ngreeting(\"Bryan\", saying=\"Hello there...\")\n# A common gotcha is using a mutable object for a default parameter\n# All invocations of the function reference the same mutable object\ndef append_item(item_name, item_list=[]):  # Will it obey and give us a new list?\n    item_list.append(item_name)\n    return item_list\n\n# Uses same item list unless otherwise stated which is counterintuitive\nprint(append_item(\"notebook\"))\nprint(append_item(\"notebook\"))\nprint(append_item(\"notebook\", []))\n# Errors - Unlike JS, if we pass the incorrect amount of arguments to a function,\n#          it will throw an error\n# avg(1)  # TypeError\n# avg(1, 2, 2) # TypeError\n# ----------------------------------- DAY 2 ----------------------------------------\n# Functions - * to get rest of position arguments as tuple\n#           - ** to get rest of keyword arguments as a dictionary\n# Variable Length positional arguments\ndef add(a, b, *args):\n    # args is a tuple of the rest of the arguments\n    total = a + b\n    for n in args:\n        total += n\n    return total\n\nprint(add(1, 2))  # args is None, returns 3\nprint(add(1, 2, 3, 4, 5, 6))  # args is (3, 4, 5, 6), returns 21\n# Variable Length Keyword Arguments\ndef print_names_and_countries(greeting, **kwargs):\n    # kwargs is a dictionary of the rest of the keyword arguments\n    for k, v in kwargs.items():\n        print(greeting, k, \"from\", v)\n\nprint_names_and_countries(\n    \"Hey there\", Monica=\"Sweden\", Mike=\"The United States\", Mark=\"China\"\n)\n# We can combine all of these together\ndef example2(arg1, arg2, *args, kw_1=\"cheese\", kw_2=\"horse\", **kwargs):\n    pass\n\n# Lists are mutable arrays\nempty_list = []\nroomates = [\"Beau\", \"Delynn\"]\n# List built-in function makes a list too\nspecials = list()\n# We can use 'in' to test if something is in the list, like 'includes' in JS\nprint(1 in [1, 2, 4])  # True\nprint(2 in [1, 3, 5])  # False\n# Dictionaries - Similar to JS POJO's or Map, containing key value pairs\na = {\"one\": 1, \"two\": 2, \"three\": 3}\nb = dict(one=1, two=2, three=3)\n# Can use 'in' on dictionaries too (for keys)\nprint(\"one\" in a)  # True\nprint(3 in b)  # False\n# Sets - Just like JS, unordered collection of distinct objects\nbedroom = {\"bed\", \"tv\", \"computer\", \"clothes\", \"playstation 4\"}\n# bedroom = set(\"bed\", \"tv\", \"computer\", \"clothes\", \"playstation 5\")\nschool_bag = set(\n    [\"book\", \"paper\", \"pencil\", \"pencil\", \"book\", \"book\", \"book\", \"eraser\"]\n)\nprint(school_bag)\nprint(bedroom)\n# We can use 'in' on sets as wel\nprint(1 in {1, 2, 3})  # True\nprint(4 in {1, 3, 5})  # False\n# Tuples are immutable lists of items\ntime_blocks = (\"AM\", \"PM\")\ncolors = \"red\", \"green\", \"blue\"  # Parenthesis not needed but encouraged\n# The tuple built-in function can be used to convert things to tuples\nprint(tuple(\"abc\"))\nprint(tuple([1, 2, 3]))\n# 'in' may be used on tuples as well\nprint(1 in (1, 2, 3))  # True\nprint(5 in (1, 4, 3))  # False\n# Ranges are immutable lists of numbers, often used with for loops\n#   - start - default: 0, first number in sequence\n#   - stop - required, next number past last number in sequence\n#   - step - default: 1, difference between each number in sequence\nrange1 = range(5)  # [0,1,2,3,4]\nrange2 = range(1, 5)  # [1,2,3,4]\nrange3 = range(0, 25, 5)  # [0,5,10,15,20]\nrange4 = range(0)  # []\nfor i in range1:\n    print(i)\n# Built-in functions:\n# Filter\nisOdd = lambda num: num % 2 == 1\nfiltered = filter(isOdd, [1, 2, 3, 4])\nprint(list(filtered))\nfor num in filtered:\n    print(f\"first way: {num}\")\nprint(\"--\" * 20)\n[print(f\"list comprehension: {i}\") for i in [1, 2, 3, 4, 5, 6, 7, 8] if i % 2 == 1]\n# Map\ndef toUpper(str):\n    return str.upper()\n\nupperCased = map(toUpper, [\"a\", \"b\", \"c\", \"d\"])\nprint(list(upperCased))\n# Sorted\nsorted_items = sorted([\"john\", \"tom\", \"sonny\", \"Mike\"])\nprint(list(sorted_items))  # Notice uppercase comes before lowercase\n# Using a key function to control the sorting and make it case insensitive\nsorted_items = sorted([\"john\", \"tom\", \"sonny\", \"Mike\"], key=str.lower)\nprint(sorted_items)\n# You can also reverse the sort\nsorted_items = sorted([\"john\", \"tom\", \"sonny\", \"Mike\"], key=str.lower, reverse=True)\nprint(sorted_items)\n# Enumerate creates a tuple with an index for what you're enumerating\nquarters = [\"First\", \"Second\", \"Third\", \"Fourth\"]\nprint(list(enumerate(quarters)))\nprint(list(enumerate(quarters, start=1)))\n# Zip takes list and combines them as key value pairs, or really however you need\nkeys = (\"Name\", \"Email\")\nvalues = (\"Buster\", \"cheetoh@johhnydepp.com\")\nzipped = zip(keys, values)\nprint(list(zipped))\n# You can zip more than 2\nx_coords = [0, 1, 2, 3, 4]\ny_coords = [4, 6, 10, 9, 10]\nz_coords = [20, 10, 5, 9, 1]\ncoords = zip(x_coords, y_coords, z_coords)\nprint(list(coords))\n# Len reports the length of strings along with list and any other object data type\nprint_len = lambda item: print(len(item))  # doing this to save myself some typing\nprint_len(\"Mike\")\nprint_len([1, 5, 2, 10, 3, 10])\nprint_len({1, 5, 10, 9, 10})  # 4 because there is a duplicate here (10)\nprint_len((1, 4, 10, 9, 20))\n# Max will return the max number in a given scenario\nprint(max(1, 2, 35, 1012, 1))\n# Min\nprint(min(1, 5, 2, 10))\nprint(min([1, 4, 7, 10]))\n# Sum\nprint(sum([1, 2, 4]))\n# Any\nprint(any([True, False, False]))\nprint(any([False, False, False]))\n# All\nprint(all([True, True, False]))\nprint(all([True, True, True]))\n# Dir returns all the attributes of an object including it's methods and dunder methods\nuser = {\"Name\": \"Bob\", \"Email\": \"bob@bob.com\"}\nprint(dir(user))\n# Importing packages and modules\n#  - Module - A Python code in a file or directory\n#  - Package - A module which is a directory containing an __init__.py file\n#  - Submodule - A module which is contained within a package\n#  - Name - An exported function, class, or variable in a module\n# Unlike JS, modules export ALL names contained within them without any special export key\n# Assuming we have the following package with four submodules\n#  math\n#  |  __init__.py\n#  | addition.py\n#  | subtraction.py\n#  | multiplication.py\n#  | division.py\n# If we peek into the addition.py file we see there's an add function\n# addition.py\n# We can import 'add' from other places because it's a 'name' and is automatically exported\ndef add(num1, num2):\n    return num1 + num2\n\n# Notice the . syntax because this package can import it's own submodules.\n# Our __init__.py has the following files\n# This imports the 'add' function\n# And now it's also re-exported in here as well\n# from .addition import add\n# These import and re-export the rest of the functions from the submodule\n# from .subtraction import subtract\n# from .division import divide\n# from .multiplication import multiply\n# So if we have a script.py and want to import add, we could do it many ways\n# This will load and execute the 'math/__init__.py' file and give\n# us an object with the exported names in 'math/__init__.py'\nimport math\n# print(math.add(1,2))\n# This imports JUST the add from 'math/__init__.py'\n# from math import add\n# print(add(1, 2))\n# This skips importing from 'math/__init__.py' (although it still runs)\n# and imports directly from the addition.py file\n# from math.addition import add\n# This imports all the functions individually from 'math/__init__.py'\n# from math import add, subtract, multiply, divide\n# print(add(1, 2))\n# print(subtract(2, 1))\n# This imports 'add' renames it to 'add_some_numbers'\n# from math import add as add_some_numbers\n# --------------------------------------- DAY 3 ---------------------------------------\n# Classes, Methods, and Properties\nclass AngryBird:\n    # Slots optimize property access and memory usage and prevent you\n    # from arbitrarily assigning new properties the instance\n    __slots__ = [\"_x\", \"_y\"]\n    # Constructor\n    def __init__(self, x=0, y=0):\n        # Doc String\n        \"\"\"\n        Construct a new AngryBird by setting it's position to (0, 0)\n        \"\"\"\n        ## Instance Variables\n        self._x = x\n        self._y = y\n    # Instance Method\n    def move_up_by(self, delta):\n        self._y += delta\n    # Getter\n    @property\n    def x(self):\n        return self._x\n    # Setter\n    @x.setter\n    def x(self, value):\n        if value < 0:\n            value = 0\n        self._x = value\n    @property\n    def y(self):\n        return self._y\n    @y.setter\n    def y(self, value):\n        self._y = value\n    # Dunder Repr... called by 'print'\n    def __repr__(self):\n        return f\"<AngryBird ({self._x}, {self._y})>\"\n\n# JS to Python Classes cheat table\n#        JS                    Python\n#   constructor()         def __init__(self):\n#      super()            super().__init__()\n#   this.property           self.property\n#    this.method            self.method()\n# method(arg1, arg2){}    def method(self, arg1, ...)\n# get someProperty(){}    @property\n# set someProperty(){}    @someProperty.setter\n# List Comprehensions are a way to transform a list from one format to another\n#  - Pythonic Alternative to using map or filter\n#  - Syntax of a list comprehension\n#     - new_list = [value loop condition]\n# Using a for loop\nsquares = []\nfor i in range(10):\n    squares.append(i ** 2)\nprint(squares)\n# value = i ** 2\n# loop = for i in range(10)\nsquares = [i ** 2 for i in range(10)]\nprint(list(squares))\nsentence = \"the rocket came back from mars\"\nvowels = [character for character in sentence if character in \"aeiou\"]\nprint(vowels)\n# You can also use them on dictionaries. We can use the items() method\n# for the dictionary to loop through it getting the keys and values out at once\nperson = {\"name\": \"Corina\", \"age\": 32, \"height\": 1.4}\n# This loops through and capitalizes the first letter of all keys\nnewPerson = {key.title(): value for key, value in person.items()}\nprint(list(newPerson.items()))\n
"},{"url":"/docs/python/functions/","relativePath":"docs/python/functions.md","relativeDir":"docs/python","base":"functions.md","name":"functions","frontmatter":{"title":"Python Functions","weight":0,"excerpt":"When creating a function using the def statement, you can specify what the return value should be with a return statement.","seo":{"title":"","description":"When creating a function using the def statement, you can specify what the return value should be with a return statement.","robots":[],"extra":[]},"template":"docs"},"html":"

Functions

\n
def hello(name):\n    print('Hello {}'.format(name))\n
\n

Return Values and return Statements

\n

When creating a function using the def statement, you can specify what the return value should be with a return statement. A return statement consists of the following:

\n
    \n
  • The return keyword.
    • \n
  • The value or expression that the function should return.
    • \n
\n
import random\ndef getAnswer(answerNumber):\n    if answerNumber == 1:\n        return 'It is certain'\n    elif answerNumber == 2:\n        return 'It is decidedly so'\n    elif answerNumber == 3:\n        return 'Yes'\n    elif answerNumber == 4:\n        return 'Reply hazy try again'\n    elif answerNumber == 5:\n        return 'Ask again later'\n    elif answerNumber == 6:\n        return 'Concentrate and ask again'\n    elif answerNumber == 7:\n        return 'My reply is no'\n    elif answerNumber == 8:\n        return 'Outlook not so good'\n    elif answerNumber == 9:\n        return 'Very doubtful'\n\nr = random.randint(1, 9)\nfortune = getAnswer(r)\nprint(fortune)\n
\n

The None Value

\n
spam = print('Hello!')\nspam is None\n
\n

Note: never compare to None with the == operator. Always use is.

\n

print Keyword Arguments

\n
print('Hello', end='')\nprint('World')\n
\n
print('cats', 'dogs', 'mice')\n
\n
print('cats', 'dogs', 'mice', sep=',')\n
\n

Local and Global Scope

\n
    \n
  • Code in the global scope cannot use any local variables.
    • \n
  • However, a local scope can access global variables.
    • \n
  • Code in a function's local scope cannot use variables in any other local scope.
    • \n
  • You can use the same name for different variables if they are in different scopes. That is, there can be a local variable named spam and a global variable also named spam.
    • \n
\n

The global Statement

\n

If you need to modify a global variable from within a function, use the global statement:

\n
def spam():\n    global eggs\n    eggs = 'spam'\n\neggs = 'global'\nspam()\nprint(eggs)\n
\n

There are four rules to tell whether a variable is in a local scope or global scope:

\n
    \n
  1. If a variable is being used in the global scope (that is, outside of all functions), then it is always a global variable.
    2. \n
  2. If there is a global statement for that variable in a function, it is a global variable.
    3. \n
  3. Otherwise, if the variable is used in an assignment statement in the function, it is a local variable.
    4. \n
  4. But if the variable is not used in an assignment statement, it is a global variable.
    5. \n
"},{"url":"/docs/python/google-sheets-api/","relativePath":"docs/python/google-sheets-api.md","relativeDir":"docs/python","base":"google-sheets-api.md","name":"google-sheets-api","frontmatter":{"title":"google-sheets-api","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

If you're maintaining a dataset that frequently has to be updated in a predictable and consistent manner, automating that process has obvious benefits. It might cost some time to set up the code to automate the work, but you'll likely save time in the long run. And, if you're like me, writing the code will be less mind-numbing than repeatedly updating the same spreadsheet over and over again!

\n

\n

Screenshot of Google Cloud Console edited by the author.

\n

taken after successfully running the quickstart script.

\n

\n

.

\n

Screenshot by the author.

\n

Google spreadsheets provide excellent functionality for maintaining basic datasets. Some of the obvious advantages are that they are free, easy to access, and easy to share. Moreover, Google spreadsheets can be especially powerful because of their ability to connect with tools like Zapier or Phantombuster that can create automated workflows between a plethora of different online applications.

\n

Although these kinds of tools usually offer functionalities to automatically manipulate Google spreadsheets as well, I've experienced a lack of flexibility on how to update your spreadsheets. A customized Python script can offer way more flexibility and possibilities.

\n

To update your Google spreadsheets with Python, you can use the Google sheets API. Google offers free API access to several of their workspace apps, like Gmail, Google Calendar, Google Drive, and Google Sheets. You can check out their API library here.

\n

Below I'll walk you through the steps to set up the Google Sheets API with Python and show a couple of basic examples of how to manipulate spreadsheets using the API.

\n

Setting Up the API

\n

Step 1: Create a Google Cloud Platform project

\n

To get started with any of the Google workspace APIs, you need to have a so-called Google Cloud Platform (GCP) project. A GCP project forms the basis for all of Google's cloud computing services, including their API library. Setting up a project and using the APIs is completely free. Follow the steps outlined here to create your GCP project. It should be pretty straightforward.

\n

Step 2: Create Credentials

\n

After creating a GCP project (step 1), we need to set up our credentials for accessing the API. Our credentials are like a key for the API to know who is requesting access to its data and services. You can follow the steps listed here to create desktop application credentials. In my experience, some steps were missing in this tutorial, so I'm giving the detailed version below.

\n
    \n
  • Start by navigating back to your Google Cloud Console.
    • \n
  • Find the APIs & Services tab, and then select the Credentials page
    • \n
  • Click on *+Create Credentials *and select OAuth client ID.
    • \n
\n\n
    \n
  • Select Desktop app as the application type and give your app a name. Then click create.
    • \n
  • You will be prompted to set up your OAuth consent screen. Follow the steps you are prompted with and make sure to add yourself as a test user.
    • \n
  • After generating your client ID, you will be able to see it on your credentials page.
    • \n
  • Click the download button to download a JSON file with your credentials. Rename it to credentials.json. You will need this in the next step.
    • \n
\n

Step 3: Set up the API

\n

After creating a GCP project and generating your credentials, it is time to connect to the API with Python for the first time. You can follow the steps outlined here. The steps given on the Google developers page are pretty self-explanatory. Three things I want to add:

\n
    \n
  • Make sure to have a look at the prerequisites before diving in.
    • \n
  • Don't forget to move your credentials.json file to the same folder where your quickstart.py file is.
    • \n
  • Change the URL in the SCOPE list in the quickstart script to https://www.googleapis.com/auth/spreadsheets to make sure that you have both read and write access.
    • \n
\n

If everything goes as expected, you should see this in your browser after running the sample script:

\n

After successfully running the sample, you will also find a token.json file in your workspace. This file is used for authentication on any of your future calls to the API. You're now ready to use the API!

\n

Using the API

\n

Now that we have set up the API connection, we can use the API to create, read, and edit Google spreadsheets! Extensive documentation on how to use the API can be found here. I'll run through a few basic examples below.

\n

Reading from an existing spreadsheet

\n

Reading from an existing spreadsheet is a key functionality if you want to automate your spreadsheets. Let's create a new spreadsheet in the Google workspace and input some data. Below is a screenshot of the table I created.

\n

The API identifies spreadsheets using a spreadsheet ID. To connect to a spreadsheet that already exists, you can find the spreadsheet ID in the Google Sheets URL as follows:

\n

After identifying the spreadsheet ID of the spreadsheet we just created, we can use the API to connect to the spreadsheet and to read its data. Below is a code example of how to do this. The main functionalities to retrieve data from an existing spreadsheet are provided by sheet.values().get().execute()* on line 17. *Note that this is where we pass the spreadsheet ID and the range of values in the sheet we want to retrieve. All code before that establishes the connection to the API and is very similar to the quickstart.py file we used to connect to the API for the first time.

\n

The code returns a list of lists containing the data of our spreadsheet. Note that the data is returned row-by-row this way.

\n

Writing to an existing spreadsheet

\n

Next, let's try to add a new value to the spreadsheet. After all, this is the second key bit we need to automatically update our spreadsheets.

\n

The code below shows how to add a row to the existing data with the values [6, f]. Similar to reading values from an existing sheet, we need to start with establishing the connection to the API and identifying the spreadsheet ID. Because we are now writing new data to the spreadsheet, it is essential to make sure that you have not specified read-only permission in your SCOPES list (line 5).

\n

The main functionalities to append new data to an existing spreadsheet are provided by *sheet.values().append().execute() on lines 17-22. *Note that this is where we pass the spreadsheet ID, spreadsheet range, and several other parameters that specify how the data has to be inserted and what data has to be inserted. The body parameter takes a dictionary with values to append to the existing data table, using the same list-of-list format we saw before.

\n

After running the code, the spreadsheet is automatically updated with our new entry. The new row is neatly appended to the data that we manually wrote in the spreadsheet.

\n

Final Thoughts

\n

The Google workspace API library is a really powerful and relatively user-friendly way to automate workflows related to any of the Google workspace applications. In this tutorial, I walked you through setting up the Google Sheets API with Python and showed a few examples of how to manipulate spreadsheets using this API. The possibilities of how to use this are endless.

\n

Setting up access to the other APIs involves a very similar process and would allow for even more elaborate and complex automation flows.

"},{"url":"/docs/python/intro-for-js-devs/","relativePath":"docs/python/intro-for-js-devs.md","relativeDir":"docs/python","base":"intro-for-js-devs.md","name":"intro-for-js-devs","frontmatter":{"title":"lorem-ipsum","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Lorem ipsum

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

\n
    \n
  • Lorem ipsum
    • \n
  • dolor sit amet
    • \n
"},{"url":"/docs/python/install-python-ubuntu/","relativePath":"docs/python/install-python-ubuntu.md","relativeDir":"docs/python","base":"install-python-ubuntu.md","name":"install-python-ubuntu","frontmatter":{"title":"How to install Python 2.7 on Ubuntu 20.04 LTS","weight":0,"excerpt":"Working commands to install Python 2.7 on Ubuntu 20.04 LTS Linux along with Pip 2 to install and run various server applications.","seo":{"title":"How to install Python 2.7 on Ubuntu 20.04 LTS","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

How to install Python 2.7 on Ubuntu 20.04 LTS

\n
\n

Working commands to install Python 2.7 on Ubuntu 20.04 LTS Linux along with Pip 2 to install and run various server applications.

\n
\n

How to install Python 2.7 on Ubuntu 20.04 LTS

\n

Last Updated: January 19, 2021 Ubuntu

\n

As we know Ubuntu 20.04 LTS which is the Long term version of Canonical has dropped the previous version of Python that is 2, to give space to the latest version of Python 3. Therefore, if there is some application that required Python 2.7 then you would not find it on Ubuntu 20.04 by default. However, there is a way to install it using the command line terminal.

\n

Install Python 2.7 on Ubuntu 20.04 LTS Linux and make it default

\n

1. Open a command terminal

\n

Although everybody is familiar with how to run the command terminal, however, those who don't know can use the shortcut key combination i.e Ctrl+Alt+T.

\n

2. Add Universe repo

\n

It is quite possible that your system would already have the Universe repository, still run the below command to add or confirm it.

\n

sudo apt-add-repository universe\nsudo apt update

\n

3. Install Python2.7 on Ubuntu 20.04 LTS

\n

Once done with the above command, its time to install Python 2.7 version on Ubuntu Linux, for that, follow this syntax:

\n

sudo apt install python2-minimal

\n

Check Python2 version

\n

To view the current version of Python on your system run:

\n

python2 -V

\n

Output:

\n

Python 2.7.18

\n

4. See all available Python version on the system

\n

As we know Ubuntu 20.04 comes out of the box with Python 3 thus, let's check what are the available versions of Python are on our system.

\n

ls /usr/bin/python*

\n

\"Check

\n

5. Change the Default Python priority

\n

You will see both python 2.7 and 3 on your Ubuntu 20.04 Linux. However, by default, the system will give priority to Python3, and that's when we run python command it will give an error:

\n

Command 'python' not found, did you mean:\ncommand 'python 3' from deb python3\ncommand 'python' from deb python-is-python3

\n

Thus, we change the priority and set Python2 at the top so that it could call by applications as the default version. Whereas Python3 will be second.

\n

sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 1\nsudo update-alternatives --install /usr/bin/python python /usr/bin/python3 2

\n

Now, check the default version:

\n

python -V

\n

In the future, if you want to set Python 3 as default or first version in the priority list, simply update the alternatives list, using this command:

\n

sudo update-alternatives --config python

\n

You will get something like the below screenshot with the choice to set one at the priority. To select, just enter the number given corresponding to each version path under the Selection column and hit the Enter key.

\n

\"Switch

\n

6. Install Pip 2 on Ubuntu 20.04

\n

Now, if you are also interested in Pip 2 then here are the commands to follow.

\n

Note: Make sure you already have enabled the universe repo given in Step 2 of this article and have Python 2 on your system.

\n

sudo apt update\nsudo apt install curl\ncurl https://bootstrap.pypa.io/get-pip.py --output get-pip.py\nsudo python2 get-pip.py

\n

Check Version:

\n

pip2 --version

\n

\"Install

\n

7. Uninstall (optional)

\n

If you don't need Python 2.7 on your system then here is the command to remove it:

\n

sudo apt remove python2-minimal

\n

Source

"},{"url":"/docs/python/","relativePath":"docs/python/index.md","relativeDir":"docs/python","base":"index.md","name":"index","frontmatter":{"title":"Python","weight":0,"excerpt":"Python","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"
\n

Python Resources

\n
\n\n
\n
\n
\n

My Python Docs:

\n

My Python Website

\n

Python Study Guide for a JavaScript Programmer

\n

A guide to commands in Python from what you know in JavaScript

\n
\n

Python Study Guide for a JavaScript Programmer

\n
### Applications of Tutorial & Cheat Sheet Respectivley (At Bottom Of Tutorial):\n

Basics

\n
    \n
  • PEP8 : Python Enhancement Proposals, style-guide for Python.
    • \n
  • print is the equivalent of console.log.
    • \n
\n
\n

'print() == console.log()'

\n
\n

# is used to make comments in your code.

\n
def foo():\n    \"\"\"\n    The foo function does many amazing things that you\n    should not question. Just accept that it exists and\n    use it with caution.\n    \"\"\"\n    secretThing()\n
\n
\n

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”

\n
\n
\n

Numbers

\n
    \n
  • Python has three types of numbers:
    • \n
  • Integer
    • \n
  • Positive and Negative Counting Numbers.
    • \n
\n

No Decimal Point

\n
\n

Created by a literal non-decimal point number … or … with the int() constructor.

\n
\n
print(3) # => 3\nprint(int(19)) # => 19\nprint(int()) # => 0\n
\n

3. Complex Numbers

\n
\n

Consist of a real part and imaginary part.

\n
\n

Boolean is a subtype of integer in Python.🤷‍♂️

\n
\n

If you came from a background in JavaScript and learned to accept the premise(s) of the following meme…

\n
\n
Than I am sure you will find the means to suspend your disbelief.\n
print(2.24) # => 2.24\nprint(2.) # => 2.0\nprint(float()) # => 0.0\nprint(27e-5) # => 0.00027\n
\n

KEEP IN MIND:

\n
\n

The i is switched to a j in programming.

\n
\n

T*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.

\n
print(7j) # => 7j\nprint(5.1+7.7j)) # => 5.1+7.7j\nprint(complex(3, 5)) # => 3+5j\nprint(complex(17)) # => 17+0j\nprint(complex()) # => 0j\n
\n
    \n
  • Type Casting : The process of converting one number to another.
    • \n
\n\n
# Using Float\nprint(17)               # => 17\nprint(float(17))        # => 17.0\n\n# Using Int\nprint(17.0)             # => 17.0\nprint(int(17.0))        # => 17\n\n# Using Str\nprint(str(17.0) + ' and ' + str(17))        # => 17.0 and 17\n
\n

The arithmetic operators are the same between JS and Python, with two additions:

\n
    \n
  • “**” : Double asterisk for exponent.
    • \n
  • “//” : Integer Division.
    • \n
  • There are no spaces between math operations in Python.
    • \n
  • 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.
    • \n
  • There are no ++ and -- in Python, the only shorthand operators are:
    • \n
\n
\n
\n

Strings

\n
    \n
  • Python uses both single and double quotes.
    • \n
  • You can escape strings like so 'Jodi asked, \"What\\'s up, Sam?\"'
    • \n
  • Multiline strings use triple quotes.
    • \n
\n\n
print('''My instructions are very long so to make them\nmore readable in the code I am putting them on\nmore than one line. I can even include \"quotes\"\nof any kind because they won't get confused with\nthe end of the string!''')\n
\n

Use the len() function to get the length of a string.

\n
print(len(“Spaghetti”)) # => 9\n
\n

Python uses zero-based indexing

\n

Python allows negative indexing (thank god!)

\n
print(“Spaghetti”[-1]) # => i\n\nprint(“Spaghetti”[-4]) # => e\n
\n
    \n
  • Python let's you use ranges
    • \n
\n

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.)*

\n
print(“Spaghetti”[1:4]) # => pag\nprint(“Spaghetti”[4:-1]) # => hett\nprint(“Spaghetti”[4:4]) # => (empty string)\n
\n
    \n
  • The end range is exclusive just like slice in JS.
    • \n
\n\n
# Shortcut to get from the beginning of a string to a certain index.\nprint(\"Spaghetti\"[:4])  # => Spag\nprint(\"Spaghetti\"[:-1])    # => Spaghett\n\n# Shortcut to get from a certain index to the end of a string.\nprint(\"Spaghetti\"[1:])  # => paghetti\nprint(\"Spaghetti\"[-4:])    # => etti\n
\n
    \n
  • The index string function is the equiv. of indexOf() in JS
    • \n
\n\n
print(\"Spaghetti\".index(\"h\"))    # => 4\nprint(\"Spaghetti\".index(\"t\"))    # => 6\n
\n
    \n
  • The count function finds out how many times a substring appears in a string… pretty nifty for a hard coded feature of the language.
    • \n
\n\n
print(\"Spaghetti\".count(\"h\"))    # => 1\nprint(\"Spaghetti\".count(\"t\"))    # => 2\nprint(\"Spaghetti\".count(\"s\"))    # => 0\nprint('''We choose to go to the moon in this decade and do the other things,\nnot because they are easy, but because they are hard, because that goal will\nserve to organize and measure the best of our energies and skills, because that\nchallenge is one that we are willing to accept, one we are unwilling to\npostpone, and one which we intend to win, and the others, too.\n'''.count('the '))                # => 4\n
\n
    \n
  • You can use + to concatenate strings, just like in JS.
    • \n
  • You can also use “*” to repeat strings or multiply strings.
    • \n
  • Use the format() function to use placeholders in a string to input values later on.
    • \n
\n\n
first_name = \"Billy\"\nlast_name = \"Bob\"\nprint('Your name is {0} {1}'.format(first_name, last_name))  # => Your name is Billy Bob\n
\n
    \n
  • Shorthand way to use format function is:
    \n_`print(f'Your name is {first    name} {last_name}')`
    • \n
\n

Some useful string methods.

\n
    \n
  • Note that in JS join is used on an Array, in Python it is used on String.
    • \n
\n
- There are also many handy testing methods.\n
\n
\n
\n See More \n

Variables and Expressions

\n
    \n
  • Duck-Typing : Programming Style which avoids checking an object's type to figure out what it can do.
    • \n
  • Duck Typing is the fundamental approach of Python.
    • \n
  • Assignment of a value automatically declares a variable.
    • \n
\n\n
a = 7\nb = 'Marbles'\nprint(a)         # => 7\nprint(b)         # => Marbles\n
\n
    \n
  • You can chain variable assignments to give multiple var names the same value.
    • \n
\n

Use with caution as this is highly unreadable

\n
count = max = min = 0\nprint(count)           # => 0\nprint(max)             # => 0\nprint(min)             # => 0\n
\n

The value and type of a variable can be re-assigned at any time.

\n
a = 17\nprint(a)         # => 17\na = 'seventeen'\nprint(a)         # => seventeen\n
\n
    \n
  • NaN _does not exist in Python, but you can 'create' it like so:
    \n_print(float(\"nan\"))
    • \n
  • Python replaces null with none.
    • \n
  • none is an object and can be directly assigned to a variable.
    • \n
\n
\n

Using none is a convenient way to check to see why an action may not be operating correctly in your program.

\n
\n
\n

Boolean Data Type

\n
    \n
  • One of the biggest benefits of Python is that it reads more like English than JS does.
    • \n
\n
# Logical AND\n print(True and True) # => True\n print(True and False) # => False\n print(False and False) # => False\n
# Logical OR\nprint(True or True)     # => True\nprint(True or False)    # => True\nprint(False or False)   # => False\n\n# Logical NOT\nprint(not True)             # => False\nprint(not False and True)   # => True\nprint(not True or False)    # => False\n
\n
    \n
  • By default, Python considers an object to be true UNLESS it is one of the following:
    • \n
  • Constant None or False
    • \n
  • Zero of any numeric type.
    • \n
  • Empty Sequence or Collection.
    • \n
  • True and False must be capitalized
    • \n
\n
\n

Comparison Operators

\n
    \n
  • Python uses all the same equality operators as JS.
    • \n
  • In Python, equality operators are processed from left to right.
    • \n
  • Logical operators are processed in this order:
    • \n
  • NOT
    • \n
  • AND
    • \n
  • OR
    • \n
\n
\n

Just like in JS, you can use parentheses to change the inherent order of operations.

\n
\n
\n

Short Circuit : Stopping a program when a true or false has been reached.

\n
\n
\n
\n

Identity vs Equality

\n
print (2 == '2')    # => False\nprint (2 is '2')    # => False\n\nprint (\"2\" == '2')    # => True\nprint (\"2\" is '2')    # => True\n\n# There is a distinction between the number types.\nprint (2 == 2.0)    # => True\nprint (2 is 2.0)    # => False\n
\n
    \n
  • In the Python community it is better to use is and is not over == or !=
    • \n
\n
\n

If Statements

\n
if name == 'Monica':\n    print('Hi, Monica.')\n\nif name == 'Monica':\n    print('Hi, Monica.')\nelse:\n    print('Hello, stranger.')\n\nif name == 'Monica':\n    print('Hi, Monica.')\nelif age < 12:\n    print('You are not Monica, kiddo.')\nelif age > 2000:\n   print('Unlike you, Monica is not an undead, immortal vampire.')\nelif age > 100:\n   print('You are not Monica, grannie.')\n
\n
\n

Remember the order of elif statements matter.

\n
\n
\n

While Statements

\n
spam = 0\nwhile spam < 5:\n  print('Hello, world.')\n  spam = spam + 1\n
\n
    \n
  • Break statement also exists in Python.
    • \n
\n\n
spam = 0\nwhile True:\n  print('Hello, world.')\n  spam = spam + 1\n  if spam >= 5:\n    break\n
\n
    \n
  • As are continue statements
    • \n
\n\n
spam = 0\nwhile True:\n  print('Hello, world.')\n  spam = spam + 1\n  if spam < 5:\n    continue\n  break\n
\n
\n

Try/Except Statements

\n
    \n
  • Python equivalent to try/catch
    • \n
\n\n
a = 321\ntry:\n    print(len(a))\nexcept:\n    print('Silently handle error here')\n\n    # Optionally include a correction to the issue\n    a = str(a)\n    print(len(a)\n\na = '321'\ntry:\n    print(len(a))\nexcept:\n    print('Silently handle error here')\n\n    # Optionally include a correction to the issue\n    a = str(a)\n    print(len(a))\n
\n
    \n
  • You can name an error to give the output more specificity.
    • \n
\n\n
a = 100\nb = 0\ntry:\n    c = a / b\nexcept ZeroDivisionError:\n    c = None\nprint(c)\n
\n
    \n
  • You can also use the pass commmand to by pass a certain error.
    • \n
\n\n
a = 100\nb = 0\ntry:\n    print(a / b)\nexcept ZeroDivisionError:\n    pass\n
\n
    \n
  • The pass method won't allow you to bypass every single error so you can chain an exception series like so:
    • \n
\n\n
a = 100\n# b = \"5\"\ntry:\n    print(a / b)\nexcept ZeroDivisionError:\n    pass\nexcept (TypeError, NameError):\n    print(\"ERROR!\")\n
\n
    \n
  • You can use an else statement to end a chain of except statements.
    • \n
\n\n
# tuple of file names\nfiles = ('one.txt', 'two.txt', 'three.txt')\n\n# simple loop\nfor filename in files:\n    try:\n        # open the file in read mode\n        f = open(filename, 'r')\n    except OSError:\n        # handle the case where file does not exist or permission is denied\n        print('cannot open file', filename)\n    else:\n        # do stuff with the file object (f)\n        print(filename, 'opened successfully')\n        print('found', len(f.readlines()), 'lines')\n        f.close()\n
\n
    \n
  • finally is used at the end to clean up all actions under any circumstance.
    • \n
\n\n
def divide(x, y):\n    try:\n        result = x / y\n    except ZeroDivisionError:\n        print(\"Cannot divide by zero\")\n    else:\n        print(\"Result is\", result)\n    finally:\n        print(\"Finally...\")\n
\n
    \n
  • Using duck typing to check to see if some value is able to use a certain method.
    • \n
\n\n
# Try a number - nothing will print out\na = 321\nif hasattr(a, '__len__'):\n    print(len(a))\n\n# Try a string - the length will print out (4 in this case)\nb = \"5555\"\nif hasattr(b, '__len__'):\n    print(len(b))\n
\n
\n

Pass

\n
    \n
  • Pass Keyword is required to write the JS equivalent of :
    • \n
\n\n
if (true) {\n}\n\nwhile (true) {}\n\nif True:\n  pass\n\nwhile True:\n  pass\n
\n
\n

Functions

\n
    \n
  • Function definition includes:
    • \n
  • The def keyword
    • \n
  • The name of the function
    • \n
  • A list of parameters enclosed in parentheses.
    • \n
  • A colon at the end of the line.
    • \n
  • One tab indentation for the code to run.
    • \n
  • You can use default parameters just like in JS
    • \n
\n\n
def greeting(name, saying=\"Hello\"):\n    print(saying, name)\n\ngreeting(\"Monica\")\n# Hello Monica\n\ngreeting(\"Barry\", \"Hey\")\n# Hey Barry\n
\n

Keep in mind, default parameters must always come after regular parameters.

\n
# THIS IS BAD CODE AND WILL NOT RUN\ndef increment(delta=1, value):\n    return delta + value\n
\n
    \n
  • You can specify arguments by name without destructuring in Python.
    • \n
\n\n
def greeting(name, saying=\"Hello\"):\n    print(saying, name)\n\n# name has no default value, so just provide the value\n# saying has a default value, so use a keyword argument\ngreeting(\"Monica\", saying=\"Hi\")\n
\n
    \n
  • The lambda keyword is used to create anonymous functions and are supposed to be one-liners.
    • \n
\n

toUpper = lambda s: s.upper()

\n
\n

Notes

\n

Formatted Strings

\n
\n

Remember that in Python join() is called on a string with an array/list passed in as the argument.
\nPython has a very powerful formatting engine.
\nformat() is also applied directly to strings.

\n
\n
shopping_list = ['bread','milk','eggs']\nprint(','.join(shopping_list))\n
\n

Comma Thousands Separator

\n
print('{:,}'.format(1234567890))\n'1,234,567,890'\n
\n

Date and Time

\n
d = datetime.datetime(2020, 7, 4, 12, 15, 58)\nprint('{:%Y-%m-%d %H:%M:%S}'.format(d))\n'2020-07-04 12:15:58'\n
\n

Percentage

\n
points = 190\ntotal = 220\nprint('Correct answers: {:.2%}'.format(points/total))\nCorrect answers: 86.36%\n
\n

Data Tables

\n
width=8\nprint(' decimal hex binary')\nprint('-'*27)\nfor num in range(1,16):\nfor base in 'dXb':\nprint('{0:{width}{base}}'.format(num, base=base, width=width), end=' ')\nprint()\nGetting Input from the Command Line\nPython runs synchronously, all programs and processes will stop when listening for a user input.\nThe input function shows a prompt to a user and waits for them to type 'ENTER'.\nScripts vs Programs\nProgramming Script : A set of code that runs in a linear fashion.\nThe largest difference between scripts and programs is the level of complexity and purpose. Programs typically have many UI's.\n
\n

Python can be used to display html, css, and JS.
\nIt is common to use Python as an API (Application Programming Interface)

\n

Structured Data

\n

Sequence : The most basic data structure in Python where the index determines the order.

\n
\n

List
\nTuple
\nRange
\nCollections : Unordered data structures, hashable values.

\n
\n
\n

Dictionaries Sets

\n

Iterable : Generic name for a sequence or collection; any object that can be iterated through.

\n

Can be mutable or immutable. Built In Data Types

\n
\n

Lists are the python equivalent of arrays.

\n
empty_list = []\ndepartments = ['HR','Development','Sales','Finance','IT','Customer Support']\n
\n

You can instantiate

\n
specials = list()\n
\n

Test if a value is in a list.

\n
print(1 in [1, 2, 3]) #> True\nprint(4 in [1, 2, 3]) #> False\n# Tuples : Very similar to lists, but they are immutable\n
\n

Instantiated with parentheses

\n
time_blocks = ('AM','PM')\n
\n

Sometimes instantiated without

\n
colors = 'red','blue','green'\nnumbers = 1, 2, 3\n
\n

Tuple() built in can be used to convert other data into a tuple

\n
tuple('abc') # returns ('a', 'b', 'c')\ntuple([1,2,3]) # returns (1, 2, 3)\n# Think of tuples as constant variables.\n
\n

Ranges : A list of numbers which can't be changed; often used with for loops.

\n

Declared using one to three parameters.

\n
\n

Start : opt. default 0, first # in sequence.
\nStop : required next number past the last number in the sequence.
\nStep : opt. default 1, difference between each number in the sequence.

\n
\n
range(5) # [0, 1, 2, 3, 4]\nrange(1,5) # [1, 2, 3, 4]\nrange(0, 25, 5) # [0, 5, 10, 15, 20]\nrange(0) # [ ]\nfor let (i = 0; i < 5; i++)\nfor let (i = 1; i < 5; i++)\nfor let (i = 0; i < 25; i+=5)\nfor let(i = 0; i = 0; i++)\n# Keep in mind that stop is not included in the range.\n
\n

Dictionaries : Mappable collection where a hashable value is used as a key to ref. an object stored in the dictionary.

\n

Mutable.

\n
a = {'one':1, 'two':2, 'three':3}\nb = dict(one=1, two=2, three=3)\nc = dict([('two', 2), ('one', 1), ('three', 3)])\n# a, b, and c are all equal\n
\n

Declared with curly braces of the built in dict()

\n
\n

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.

\n
\n

Use the in operator to see if a key exists in a dictionary.

\n

Sets : Unordered collection of distinct objects; objects that need to be hashable.

\n
\n

Always be unique, duplicate items are auto dropped from the set.

\n
\n

Common Uses:

\n
\n

Removing Duplicates
\nMembership Testing
\nMathematical Operators: Intersection, Union, Difference, Symmetric Difference.

\n
\n

Standard Set is mutable, Python has a immutable version called frozenset.
\nSets created by putting comma seperated values inside braces:

\n
school_bag = {'book','paper','pencil','pencil','book','book','book','eraser'}\nprint(school_bag)\n
\n

Also can use set constructor to automatically put it into a set.

\n
letters = set('abracadabra')\nprint(letters)\n#Built-In Functions\n#Functions using iterables\n
\n

filter(function, iterable) : creates new iterable of the same type which includes each item for which the function returns true.

\n

map(function, iterable) : creates new iterable of the same type which includes the result of calling the function on every item of the iterable.

\n

sorted(iterable, key=None, reverse=False) : creates a new sorted list from the items in the iterable.

\n

Output is always a list

\n

key: opt function which coverts and item to a value to be compared.

\n

reverse: optional boolean.

\n

enumerate(iterable, start=0) : starts with a sequence and converts it to a series of tuples

\n
quarters = ['First', 'Second', 'Third', 'Fourth']\nprint(enumerate(quarters))\nprint(enumerate(quarters, start=1))\n
\n

(0, 'First'), (1, 'Second'), (2, 'Third'), (3, 'Fourth')

\n

(1, 'First'), (2, 'Second'), (3, 'Third'), (4, 'Fourth')

\n
\n

zip(*iterables) : creates a zip object filled with tuples that combine 1 to 1 the items in each provided iterable.
\nFunctions that analyze iterable

\n
\n

len(iterable) : returns the count of the number of items.

\n

max(*args, key=None) : returns the largest of two or more arguments.

\n

max(iterable, key=None) : returns the largest item in the iterable.

\n

key optional function which converts an item to a value to be compared.
\nmin works the same way as max

\n

sum(iterable) : used with a list of numbers to generate the total.

\n

There is a faster way to concatenate an array of strings into one string, so do not use sum for that.

\n

any(iterable) : returns True if any items in the iterable are true.

\n

all(iterable) : returns True is all items in the iterable are true.

\n

Working with dictionaries

\n

dir(dictionary) : returns the list of keys in the dictionary.
\nWorking with sets

\n

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.

\n
a = {1, 2, 3}\nb = {2, 4, 6}\nprint(a | b) # => {1, 2, 3, 4, 6}\n
\n

Intersection : The & operator ca be used to produce a new set of only the elements that appear in all sets.

\n
a = {1, 2, 3}\nb = {2, 4, 6}\nprint(a & b) # => {2}\nDifference : The — operator can be used to produce a new set of only the elements that appear in the first set and NOT the others.\n
\n

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.

\n
a = {1, 2, 3}\nb = {2, 4, 6}\nprint(a — b) # => {1, 3}\nprint(b — a) # => {4, 6}\nprint(a ^ b) # => {1, 3, 4, 6}\n
\n
\n

For Statements In python, there is only one for loop.

\n

Always Includes:

\n
\n
    \n
  1. The for keyword
    2. \n
  2. A variable name
    3. \n
  3. The 'in' keyword
    4. \n
  4. An iterable of some kid
    5. \n
  5. A colon
    6. \n
  6. On the next line, an indented block of code called the for clause.
    7. \n
\n
\n

You can use break and continue statements inside for loops as well.

\n

You can use the range function as the iterable for the for loop.

\n
print('My name is')\nfor i in range(5):\nprint('Carlita Cinco (' + str(i) + ')')\n\ntotal = 0\nfor num in range(101):\ntotal += num\nprint(total)\nLooping over a list in Python\nfor c in ['a', 'b', 'c']:\nprint(c)\n\nlst = [0, 1, 2, 3]\nfor i in lst:\nprint(i)\n
\n

Common technique is to use the len() on a pre-defined list with a for loop to iterate over the indices of the list.

\n
supplies = ['pens', 'staplers', 'flame-throwers', 'binders']\nfor i in range(len(supplies)):\nprint('Index ' + str(i) + ' in supplies is: ' + supplies[i])\n
\n

You can loop and destructure at the same time.

\n
l = 1, 2], [3, 4], [5, 6\nfor a, b in l:\nprint(a, ', ', b)\n
\n
\n

Prints 1, 2

\n
\n
\n

Prints 3, 4

\n
\n
\n

Prints 5, 6

\n
\n

You can use values() and keys() to loop over dictionaries.

\n
spam = {'color': 'red', 'age': 42}\nfor v in spam.values():\nprint(v)\n
\n

Prints red

\n

Prints 42

\n
for k in spam.keys():\nprint(k)\n
\n

Prints color

\n

Prints age

\n

For loops can also iterate over both keys and values.

\n

Getting tuples

\n
for i in spam.items():\nprint(i)\n
\n

Prints ('color', 'red')

\n

Prints ('age', 42)

\n

Destructuring to values

\n
for k, v in spam.items():\nprint('Key: ' + k + ' Value: ' + str(v))\n
\n

Prints Key: age Value: 42

\n

Prints Key: color Value: red

\n

Looping over string

\n
for c in “abcdefg”:\nprint(c)\n
\n

When you order arguments within a function or function call, the args need to occur in a particular order:

\n

formal positional args.

\n

*args

\n

keyword args with default values

\n

**kwargs

\n
def example(arg_1, arg_2, *args, **kwargs):\npass\n\ndef example2(arg_1, arg_2, *args, kw_1=”shark”, kw_2=”blowfish”, **kwargs):\npass\n
\n
\n

Importing in Python

\n

Modules are similar to packages in Node.js
\nCome in different types:

\n

Built-In,

\n

Third-Party,

\n

Custom.

\n

All loaded using import statements.

\n
\n

Terms

\n
\n

module : Python code in a separate file.
\npackage : Path to a directory that contains modules.
\ninit.py : Default file for a package.
\nsubmodule : Another file in a module's folder.
\nfunction : Function in a module.

\n
\n

A module can be any file but it is usually created by placing a special file init.py into a folder. pic

\n

Try to avoid importing with wildcards in Python.

\n

Use multiple lines for clarity when importing.

\n
from urllib.request import (\nHTTPDefaultErrorHandler as ErrorHandler,\nHTTPRedirectHandler as RedirectHandler,\nRequest,\npathname2url,\nurl2pathname,\nurlopen,\n)\n
\n
\n

Watching Out for Python 2

\n

Python 3 removed <> and only uses !=

\n

format() was introduced with P3

\n

All strings in P3 are unicode and encoded.
\nmd5 was removed.

\n

ConfigParser was renamed to configparser
\nsets were killed in favor of set() class.

\n

print was a statement in P2, but is a function in P3.

\n

Topics revisited (in python syntax)

\n

Cheat Sheet:

\n

If you found this guide helpful feel free to checkout my github/gists where I host similar content:

\n

bgoonz's gists · GitHub

\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

\n

Or Checkout my personal Resource Site:

\n

a/A-Student-Resources
\nEdit descriptiongoofy-euclid-1cd736.netlify.app

\n

Python Cheat Sheet:

\n

If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:

\n

bgoonz's gists
\nInstantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…gist.github.com

\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

\n
"},{"url":"/docs/quick-reference/Emmet/","relativePath":"docs/quick-reference/Emmet.md","relativeDir":"docs/quick-reference","base":"Emmet.md","name":"Emmet","frontmatter":{"title":"Emmet Cheat Sheet","excerpt":"In this section you'll find basic information about Web-Dev-Huband how to use it.","seo":{"title":"Emmet Cheat Sheet","description":"This is the Emmet Cheat Sheet page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Emmet Cheat Sheet","keyName":"property"},{"name":"og:description","value":"This is the Emmet Cheat Sheet page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Emmet Cheat Sheet"},{"name":"twitter:description","value":"This is the Emmet Cheat Sheet page"}]},"template":"docs"},"html":"

Emmet Cheat Sheet

\n

EMMET

\n
\n

Emmet Cheat Sheet

\n

EMMET

\n

The a toolkit for web-developers

\n

Introduction

\n

Emmet is a productivity toolkit for web developers that uses expressions to generate HTML snippets.

\n

Installation

\n

Normally, installation for Emmet should be a straight-forward process from the package-manager, as most of the modern text editors support Emmet.

\n

Usage

\n

You can use Emmet in two ways:

\n
    \n
  • Tab Expand Way: Type your emmet code and press Tab key
    • \n
  • Interactive Method: Press alt + ctrl + Enter and start typing your expressions. This should automatically generate HTML snippets on the fly.
    • \n
\n

This cheatsheet will assume that you pressTabafter each expressions.

\n

HTML

\n

Generating HTML 5 DOCTYPE

\n

html:5

\n

Will generate

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n  <title>Document</title>\n</head>\n<body>\n\n</body>\n</html>\n
\n

Child items

\n

Child items are created using >

\n

ul>li>p

\n
<ul>\n  <li>\n    <p></p>\n  </li>\n</ul>\n
\n

Sibling Items

\n

Sibling items are created using +

\n

html>head+body

\n
<html>\n<head></head>\n<body>\n\n</body>\n</html>\n
\n

Multiplication

\n

Items can be multiplied by *

\n

ul>li*5

\n
<ul>\n  <li></li>\n  <li></li>\n  <li></li>\n  <li></li>\n  <li></li>\n</ul>\n
\n

Grouping

\n

Items can be grouped together using ()

\n

table>(tr>th*5)+tr>t*5

\n
<table>\n  <tr>\n    <th></th>\n    <th></th>\n    <th></th>\n    <th></th>\n    <th></th>\n  </tr>\n  <tr>\n    <t></t>\n    <t></t>\n    <t></t>\n    <t></t>\n    <t></t>\n  </tr>\n</table>\n
\n

Class and ID

\n

Class and Id in Emmet can be done using . and #

\n

div.heading

\n
<div class=\"heading\"></div>\n
\n

div#heading

\n
<div id=\"heading\"></div>\n
\n

ID and Class can also be combined together

\n

div#heading.center

\n
<div id=\"heading\" class=\"center\"></div>\n
\n

Adding Content inside tags

\n

Contents inside tags can be added using {}

\n

h1{Emmet is awesome}+h2{Every front end developers should use this}+p{This is paragraph}*2

\n
<h1>Emmet is awesome</h1>\n<h2>Every front end developers should use this</h2>\n<p>This is paragraph</p>\n<p>This is paragraph</p>\n
\n

Attributes inside HTML tags

\n

Attributes can be added using []

\n

a[href=https://?google.com data-toggle=something target=_blank]

\n
<a href=\"https://?google.com\" data-toggle=\"something\" target=\"_blank\"></a>\n
\n

Numbering

\n

Numbering can be done using $

\n

You can use this inside tag or contents.

\n

h${This is so awesome $}*6

\n
<h1>This is so awesome 1</h1>\n<h2>This is so awesome 2</h2>\n<h3>This is so awesome 3</h3>\n<h4>This is so awesome 4</h4>\n<h5>This is so awesome 5</h5>\n<h6>This is so awesome 6</h6>\n
\n

Use @- to reverse the Numbering

\n

img[src=image$$@-.jpg]*5

\n
<img src=\"image05.jpg\" alt=\"\">\n<img src=\"image04.jpg\" alt=\"\">\n<img src=\"image03.jpg\" alt=\"\">\n<img src=\"image02.jpg\" alt=\"\">\n<img src=\"image01.jpg\" alt=\"\">\n
\n

To start the numbering from specific number, use this way

\n

img[src=emmet$@100.jpg]*5

\n
<img src=\"emmet100.jpg\" alt=\"\">\n<img src=\"emmet101.jpg\" alt=\"\">\n<img src=\"emmet102.jpg\" alt=\"\">\n<img src=\"emmet103.jpg\" alt=\"\">\n<img src=\"emmet104.jpg\" alt=\"\">\n
\n

Tips

\n
    \n
  • Use : to expand known abbreviations
    • \n
\n

input:date

\n
<input type=\"date\" name=\"\" id=\"\">\n
\n

form:post

\n
<form action=\"\" method=\"post\"></form>\n
\n

link:css

\n
<link rel=\"stylesheet\" href=\"style.css\">\n
\n
    \n
  • Building Navbar
    • \n
\n

.navbar>ul>li*3>a[href=#]{Item $@-}

\n
<div class=\"navbar\">\n  <ul>\n    <li><a href=\"#\">Item 3</a></li>\n    <li><a href=\"#\">Item 2</a></li>\n    <li><a href=\"#\">Item 1</a></li>\n  </ul>\n</div>\n
\n

CSS

\n

Emmet works surprisingly well with css as well.

\n
    \n
  • f:l
    • \n
\n\n
float: left;\n
\n

You can also use any options n/r/l

\n
    \n
  • pos:a­
    • \n
\n\n
position: absolute;\n
\n

Also use any options, pos:a/r/f

\n
    \n
  • d:n/b­/f/­i/ib
    • \n
\n

d:ib

\n
display: inline-block;\n
\n
    \n
  • You can use m for margin and p for padding followed by direction
    • \n
\n

mr -> margin-right

\n

pr -> padding-right

\n
    \n
  • @f will result in
    • \n
\n\n
@font-face {\n  font-family:;\n  src:url();\n}\n
\n

You can also use these shorthands

\n
#### If you found this guide helpful feel free to checkout my github/gists where I host similar content:\n

bgoonz's gists · GitHub

\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

\n

Or Checkout my personal Resource Site:

\n

a/A-Student-Resources
\nEdit descriptiongoofy-euclid-1cd736.netlify.app

\n

By Bryan Guner on March 6, 2021.

\n

Canonical link

\n

Exported from Medium on May 23, 2021.

"},{"url":"/docs/python/python-ds/","relativePath":"docs/python/python-ds.md","relativeDir":"docs/python","base":"python-ds.md","name":"python-ds","frontmatter":{"title":"Python General Notes","weight":0,"excerpt":"Python General Notes & Resources","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Python Notes

\n\n\n\n\n\n\n\n\n\n
https://lambda-6.gitbook.io/python/This Gitbook As A Website
\n
\n
\n

https://ds-unit-5-lambda.netlify.app

\n

/

\n
\n
\n
\n

https://bryan-guner.gitbook.io/datastructures-in-pytho/

\n
\n
\n
\n
\n
\n

https://replit.com/@bgoonz/DATASTRUCPYTHONNOTES-2

\n
\n

Keywords:

\n
***and       del       for       is        raise\nassert    elif      from      lambda    return\nbreak     else      global    not       try\nclass     except    if        or        while\ncontinue  exec      import    pass\ndef       finally   in        print***\n
\n

py-notes.pdf

\n

https://bryan-guner.gitbook.io/notesarchive/

\n

DOCS:

\n

https://docs.python.org/3/

\n
import math\n\ndef say_hi(name):\n    \"\"\"<---- Multi-Line Comments and Docstrings\n    This is where you put your content for help() to inform the user\n    about what your function does and how to use it\n    \"\"\"\n    print(f\"Hello {name}!\")\n\nprint(say_hi(\"Bryan\"))  # Should get the print inside the function, then None\n# Boolean Values\n# Work the same as in JS, except they are title case: True and False\na = True\nb = False\n# Logical Operators\n# ! = not, || = or, && = and\nprint(True and True)\nprint(True and not True)\nprint(True or True)\n# Truthiness - Everything is True except...\n# False - None, False, '', [], (), set(), range(0)\n# Number Values\n# Integers are numbers without a floating decimal point\nprint(type(3))  # type returns the type of whatever argument you pass in\n# Floating Point values are numbers with a floating decimal point\nprint(type(3.5))\n# Type Casting\n# You can convert between ints and floats (along with other types...)\nprint(float(3))  # If you convert a float to an int, it will truncate the decimal\nprint(int(4.5))\nprint(type(str(3)))\n# Python does not automatically convert types like JS\n# print(17.0 + ' heyooo ' + 17)  # TypeError\n# Arithmetic Operators\n# ** - exponent (comparable to Math.pow(num, pow))\n# // - integer division\n# There is no ++ or -- in Python\n# String Values\n# We can use single quotes, double quotes, or f'' for string formats\n# We can use triple single quotes for multiline strings\nprint(\n    \"\"\"This here's a story\nAll about how\nMy life got twist\nTurned upside down\n\"\"\"\n)\n# Three double quotes can also be used, but we typically reserve these for\n# multi-line comments and function docstrings (refer to lines 6-9)(Nice :D)\n# We use len() to get the length of something\nprint(len(\"Bryan G\"))  # 7 characters\nprint(len([\"hey\", \"ho\", \"hey\", \"hey\", \"ho\"]))  # 5 list items\nprint(len({1, 2, 3, 4, 5, 6, 7, 9}))  # 8 set items\n# We can index into strings, list, etc..self.\nname = \"Bryan\"\nfor i in range(len(name)):\n    print(name[i])  # B, r, y, a, n\n# We can index starting from the end as well, with negatives\noccupation = \"Full Stack Software Engineer\"\nprint(occupation[-3])  # e\n# We can also get ranges in the index with the [start:stop:step] syntax\nprint(occupation[0:4:1])  # step and stop are optional, stop is exclusive\nprint(occupation[::4])  # beginning to end, every 4th letter\nprint(occupation[4:14:2])  # Let's get weird with it!\n# NOTE: Indexing out of range will give you an IndexError\n# We can also get the index og things with the .index() method, similar to indexOf()\nprint(occupation.index(\"Stack\"))\nprint([\"Mike\", \"Barry\", \"Cole\", \"James\", \"Mark\"].index(\"Cole\"))\n# We can count how many times a substring/item appears in something as well\nprint(occupation.count(\"S\"))\nprint(\n    \"\"\"Now this here's a story all about how\nMy life got twist turned upside down\nI forget the rest but the the the potato\nsmells like the potato\"\"\".count(\n        \"the\"\n    )\n)\n# We concatenate the same as Javascript, but we can also multiply strings\nprint(\"dog \" + \"show\")\nprint(\"ha\" * 10)\n# We can use format for a multitude of things, from spaces to decimal places\nfirst_name = \"Bryan\"\nlast_name = \"Guner\"\nprint(\"Your name is {0} {1}\".format(first_name, last_name))\n# Useful String Methods\nprint(\"Hello\".upper())  # HELLO\nprint(\"Hello\".lower())  # hello\nprint(\"HELLO\".islower())  # False\nprint(\"HELLO\".isupper())  # True\nprint(\"Hello\".startswith(\"he\"))  # False\nprint(\"Hello\".endswith(\"lo\"))  # True\nprint(\"Hello There\".split())  # [Hello, There]\nprint(\"hello1\".isalpha())  # False,  must consist only of letters\nprint(\"hello1\".isalnum())  # True, must consist of only letters and numbers\nprint(\"3215235123\".isdecimal())  # True, must be all numbers\n# True, must consist of only spaces/tabs/newlines\nprint(\"       \\\\n     \".isspace())\n# False, index 0 must be upper case and the rest lower\nprint(\"Bryan Guner\".istitle())\nprint(\"Michael Lee\".istitle())  # True!\n# Duck Typing - If it walks like a duck, and talks like a duck, it must be a duck\n# Assignment - All like JS, but there are no special keywords like let or const\na = 3\nb = a\nc = \"heyoo\"\nb = [\"reassignment\", \"is\", \"fine\", \"G!\"]\n# Comparison Operators - Python uses the same equality operators as JS, but no ===\n# < - Less than\n# > - Greater than\n# <= - Less than or Equal\n# >= - Greater than or Equal\n# == - Equal to\n# != - Not equal to\n# is - Refers to exact same memory location\n# not - !\n# Precedence - Negative Signs(not) are applied first(part of each number)\n#            - Multiplication and Division(and) happen next\n#            - Addition and Subtraction(or) are the last step\n#  NOTE: Be careful when using not along with ==\nprint(not a == b)  # True\n# print(a == not b) # Syntax Error\nprint(a == (not b))  # This fixes it. Answer: False\n# Python does short-circuit evaluation\n# Assignment Operators - Mostly the same as JS except Python has **= and //= (int division)\n# Flow Control Statements - if, while, for\n# Note: Python smushes 'else if' into 'elif'!\nif 10 < 1:\n    print(\"We don't get here\")\nelif 10 < 5:\n    print(\"Nor here...\")\nelse:\n    print(\"Hey there!\")\n# Looping over a string\nfor c in \"abcdefgh\":\n    print(c)\n# Looping over a range\nfor i in range(5):\n    print(i + 1)\n# Looping over a list\nlst = [1, 2, 3, 4]\nfor i in lst:\n    print(i)\n# Looping over a dictionary\nspam = {\"color\": \"red\", \"age\": 42, \"items\": [(1, \"hey\"), (2, \"hooo!\")]}\nfor v in spam.values():\n    print(v)\n# Loop over a list of tuples and destructuring the values\n# Assuming spam.items returns a list of tuples each containing two items (k, v)\nfor k, v in spam.items():\n    print(f\"{k}: {v}\")\n# While loops as long as the condition is True\n#  - Exit loop early with break\n#  - Exit iteration early with continue\nspam = 0\nwhile True:\n    print(\"Sike That's the wrong Numba\")\n    spam += 1\n    if spam < 5:\n        continue\n    break\n\n# Functions - use def keyword to define a function in Python\n\ndef printCopyright():\n    print(\"Copyright 2021, Bgoonz\")\n\n# Lambdas are one liners! (Should be at least, you can use parenthesis to disobey)\ndef avg(num1, num2):\n    return print(num1 + num2)\n\navg(1, 2)\n# Calling it with keyword arguments, order does not matter\navg(num2=20, num1=1252)\nprintCopyright()\n# We can give parameters default arguments like JS\n\ndef greeting(name, saying=\"Hello\"):\n    print(saying, name)\n\ngreeting(\"Mike\")  # Hello Mike\ngreeting(\"Bryan\", saying=\"Hello there...\")\n# A common gotcha is using a mutable object for a default parameter\n# All invocations of the function reference the same mutable object\n\ndef append_item(item_name, item_list=[]):  # Will it obey and give us a new list?\n    item_list.append(item_name)\n    return item_list\n\n# Uses same item list unless otherwise stated which is counterintuitive\nprint(append_item(\"notebook\"))\nprint(append_item(\"notebook\"))\nprint(append_item(\"notebook\", []))\n# Errors - Unlike JS, if we pass the incorrect amount of arguments to a function,\n#          it will throw an error\n# avg(1)  # TypeError\n# avg(1, 2, 2) # TypeError\n# ----------------------------------- DAY 2 ----------------------------------------\n# Functions - * to get rest of position arguments as tuple\n#           - ** to get rest of keyword arguments as a dictionary\n# Variable Length positional arguments\n\ndef add(a, b, *args):\n    # args is a tuple of the rest of the arguments\n    total = a + b\n    for n in args:\n        total += n\n    return total\n\nprint(add(1, 2))  # args is None, returns 3\nprint(add(1, 2, 3, 4, 5, 6))  # args is (3, 4, 5, 6), returns 21\n# Variable Length Keyword Arguments\n\ndef print_names_and_countries(greeting, **kwargs):\n    # kwargs is a dictionary of the rest of the keyword arguments\n    for k, v in kwargs.items():\n        print(greeting, k, \"from\", v)\n\nprint_names_and_countries(\n    \"Hey there\", Monica=\"Sweden\", Mike=\"The United States\", Mark=\"China\"\n)\n# We can combine all of these together\n\ndef example2(arg1, arg2, *args, kw_1=\"cheese\", kw_2=\"horse\", **kwargs):\n    pass\n\n# Lists are mutable arrays\nempty_list = []\nroomates = [\"Beau\", \"Delynn\"]\n# List built-in function makes a list too\nspecials = list()\n# We can use 'in' to test if something is in the list, like 'includes' in JS\nprint(1 in [1, 2, 4])  # True\nprint(2 in [1, 3, 5])  # False\n# Dictionaries - Similar to JS POJO's or Map, containing key value pairs\na = {\"one\": 1, \"two\": 2, \"three\": 3}\nb = dict(one=1, two=2, three=3)\n# Can use 'in' on dictionaries too (for keys)\nprint(\"one\" in a)  # True\nprint(3 in b)  # False\n# Sets - Just like JS, unordered collection of distinct objects\nbedroom = {\"bed\", \"tv\", \"computer\", \"clothes\", \"playstation 4\"}\n# bedroom = set(\"bed\", \"tv\", \"computer\", \"clothes\", \"playstation 5\")\nschool_bag = set(\n    [\"book\", \"paper\", \"pencil\", \"pencil\", \"book\", \"book\", \"book\", \"eraser\"]\n)\nprint(school_bag)\nprint(bedroom)\n# We can use 'in' on sets as wel\nprint(1 in {1, 2, 3})  # True\nprint(4 in {1, 3, 5})  # False\n# Tuples are immutable lists of items\ntime_blocks = (\"AM\", \"PM\")\ncolors = \"red\", \"green\", \"blue\"  # Parenthesis not needed but encouraged\n# The tuple built-in function can be used to convert things to tuples\nprint(tuple(\"abc\"))\nprint(tuple([1, 2, 3]))\n# 'in' may be used on tuples as well\nprint(1 in (1, 2, 3))  # True\nprint(5 in (1, 4, 3))  # False\n# Ranges are immutable lists of numbers, often used with for loops\n#   - start - default: 0, first number in sequence\n#   - stop - required, next number past last number in sequence\n#   - step - default: 1, difference between each number in sequence\nrange1 = range(5)  # [0,1,2,3,4]\nrange2 = range(1, 5)  # [1,2,3,4]\nrange3 = range(0, 25, 5)  # [0,5,10,15,20]\nrange4 = range(0)  # []\nfor i in range1:\n    print(i)\n# Built-in functions:\n# Filter\n\ndef isOdd(num):\n    return num % 2 == 1\n\nfiltered = filter(isOdd, [1, 2, 3, 4])\nprint(list(filtered))\nfor num in filtered:\n    print(f\"first way: {num}\")\nprint(\"--\" * 20)\n[print(f\"list comprehension: {i}\")\n for i in [1, 2, 3, 4, 5, 6, 7, 8] if i % 2 == 1]\n# Map\n\ndef toUpper(str):\n    return str.upper()\n\nupperCased = map(toUpper, [\"a\", \"b\", \"c\", \"d\"])\nprint(list(upperCased))\n# Sorted\nsorted_items = sorted([\"john\", \"tom\", \"sonny\", \"Mike\"])\nprint(list(sorted_items))  # Notice uppercase comes before lowercase\n# Using a key function to control the sorting and make it case insensitive\nsorted_items = sorted([\"john\", \"tom\", \"sonny\", \"Mike\"], key=str.lower)\nprint(sorted_items)\n# You can also reverse the sort\nsorted_items = sorted([\"john\", \"tom\", \"sonny\", \"Mike\"],\n                      key=str.lower, reverse=True)\nprint(sorted_items)\n# Enumerate creates a tuple with an index for what you're enumerating\nquarters = [\"First\", \"Second\", \"Third\", \"Fourth\"]\nprint(list(enumerate(quarters)))\nprint(list(enumerate(quarters, start=1)))\n# Zip takes list and combines them as key value pairs, or really however you need\nkeys = (\"Name\", \"Email\")\nvalues = (\"Buster\", \"cheetoh@johhnydepp.com\")\nzipped = zip(keys, values)\nprint(list(zipped))\n# You can zip more than 2\nx_coords = [0, 1, 2, 3, 4]\ny_coords = [4, 6, 10, 9, 10]\nz_coords = [20, 10, 5, 9, 1]\ncoords = zip(x_coords, y_coords, z_coords)\nprint(list(coords))\n# Len reports the length of strings along with list and any other object data type\n# doing this to save myself some typing\n\ndef print_len(item):\n    return print(len(item))\n\nprint_len(\"Mike\")\nprint_len([1, 5, 2, 10, 3, 10])\nprint_len({1, 5, 10, 9, 10})  # 4 because there is a duplicate here (10)\nprint_len((1, 4, 10, 9, 20))\n# Max will return the max number in a given scenario\nprint(max(1, 2, 35, 1012, 1))\n# Min\nprint(min(1, 5, 2, 10))\nprint(min([1, 4, 7, 10]))\n# Sum\nprint(sum([1, 2, 4]))\n# Any\nprint(any([True, False, False]))\nprint(any([False, False, False]))\n# All\nprint(all([True, True, False]))\nprint(all([True, True, True]))\n# Dir returns all the attributes of an object including it's methods and dunder methods\nuser = {\"Name\": \"Bob\", \"Email\": \"bob@bob.com\"}\nprint(dir(user))\n# Importing packages and modules\n#  - Module - A Python code in a file or directory\n#  - Package - A module which is a directory containing an __init__.py file\n#  - Submodule - A module which is contained within a package\n#  - Name - An exported function, class, or variable in a module\n# Unlike JS, modules export ALL names contained within them without any special export key\n# Assuming we have the following package with four submodules\n#  math\n#  |  __init__.py\n#  | addition.py\n#  | subtraction.py\n#  | multiplication.py\n#  | division.py\n# If we peek into the addition.py file we see there's an add function\n# addition.py\n# We can import 'add' from other places because it's a 'name' and is automatically exported\n\n# def add(num1, num2):\n#     return num1 + num2\n\n# Notice the . syntax because this package can import it's own submodules.\n# Our __init__.py has the following files\n# This imports the 'add' function\n# And now it's also re-exported in here as well\n# from .addition import add\n# These import and re-export the rest of the functions from the submodule\n# from .subtraction import subtract\n# from .division import divide\n# from .multiplication import multiply\n# So if we have a script.py and want to import add, we could do it many ways\n# This will load and execute the 'math/__init__.py' file and give\n# us an object with the exported names in 'math/__init__.py'\n# print(math.add(1,2))\n# This imports JUST the add from 'math/__init__.py'\n# from math import add\n# print(add(1, 2))\n# This skips importing from 'math/__init__.py' (although it still runs)\n# and imports directly from the addition.py file\n# from math.addition import add\n# This imports all the functions individually from 'math/__init__.py'\n# from math import add, subtract, multiply, divide\n# print(add(1, 2))\n# print(subtract(2, 1))\n# This imports 'add' renames it to 'add_some_numbers'\n# from math import add as add_some_numbers\n# --------------------------------------- DAY 3 ---------------------------------------\n# Classes, Methods, and Properties\n\nclass AngryBird:\n    # Slots optimize property access and memory usage and prevent you\n    # from arbitrarily assigning new properties the instance\n    __slots__ = [\"_x\", \"_y\"]\n    # Constructor\n\n    def __init__(self, x=0, y=0):\n        # Doc String\n        \"\"\"\n        Construct a new AngryBird by setting it's position to (0, 0)\n        \"\"\"\n        # Instance Variables\n        self._x = x\n        self._y = y\n\n    # Instance Method\n\n    def move_up_by(self, delta):\n        self._y += delta\n\n    # Getter\n\n    @property\n    def x(self):\n        return self._x\n\n    # Setter\n\n    @x.setter\n    def x(self, value):\n        if value < 0:\n            value = 0\n        self._x = value\n\n    @property\n    def y(self):\n        return self._y\n\n    @y.setter\n    def y(self, value):\n        self._y = value\n\n    # Dunder Repr... called by 'print'\n\n    def __repr__(self):\n        return f\"<AngryBird ({self._x}, {self._y})>\"\n\n# JS to Python Classes cheat table\n#        JS                    Python\n#   constructor()         def __init__(self):\n#      super()            super().__init__()\n#   this.property           self.property\n#    this.method            self.method()\n# method(arg1, arg2){}    def method(self, arg1, ...)\n# get someProperty(){}    @property\n# set someProperty(){}    @someProperty.setter\n# List Comprehensions are a way to transform a list from one format to another\n#  - Pythonic Alternative to using map or filter\n#  - Syntax of a list comprehension\n#     - new_list = [value loop condition]\n# Using a for loop\nsquares = []\nfor i in range(10):\n    squares.append(i ** 2)\nprint(squares)\n# value = i ** 2\n# loop = for i in range(10)\nsquares = [i ** 2 for i in range(10)]\nprint(list(squares))\nsentence = \"the rocket came back from mars\"\nvowels = [character for character in sentence if character in \"aeiou\"]\nprint(vowels)\n# You can also use them on dictionaries. We can use the items() method\n# for the dictionary to loop through it getting the keys and values out at once\nperson = {\"name\": \"Corina\", \"age\": 32, \"height\": 1.4}\n# This loops through and capitalizes the first letter of all keys\nnewPerson = {key.title(): value for key, value in person.items()}\nprint(list(newPerson.items()))\n
\n

2.1.7 Indentation

\n

Leading whitespace (spaces and tabs) at the beginning of a logical line is used to compute the indentation level of the line, which in turn is used to determine the grouping of statements.

\n

First, tabs are replaced (from left to right) by one to eight spaces such that the total number of characters up to and including the replacement is a multiple of eight (this is intended to be the same rule as used by Unix). The total number of spaces preceding the first non-blank character then determines the line's indentation. Indentation cannot be split over multiple physical lines using backslashes; the whitespace up to the first backslash determines the indentation.

\n

Cross-platform compatibility note: because of the nature of text editors on non-UNIX platforms, it is unwise to use a mixture of spaces and tabs for the indentation in a single source file.

\n

A formfeed character may be present at the start of the line; it will be ignored for the indentation calculations above. Formfeed characters occurring elsewhere in the leading whitespace have an undefined effect (for instance, they may reset the space count to zero).

\n

The indentation levels of consecutive lines are used to generate INDENT and DEDENT tokens, using a stack, as follows.

\n

Before the first line of the file is read, a single zero is pushed on the stack; this will never be popped off again. The numbers pushed on the stack will always be strictly increasing from bottom to top. At the beginning of each logical line, the line's indentation level is compared to the top of the stack. If it is equal, nothing happens. If it is larger, it is pushed on the stack, and one INDENT token is generated. If it is smaller, it must be one of the numbers occurring on the stack; all numbers on the stack that are larger are popped off, and for each number popped off a DEDENT token is generated. At the end of the file, a DEDENT token is generated for each number remaining on the stack that is larger than zero.

\n

Here is an example of a correctly (though confusingly) indented piece of Python code:

\n

def perm(l): # Compute the list of all permutations of l if len(l) <= 1: return [l] r = [] for i in range(len(l)): s = l[:i] + l[i+1:] p = perm(s) for x in p: r.append(l[i:i+1] + x) return r

\n

The following example shows various indentation errors:

\n
 `def perm(l):                       # error: first line indented\nfor i in range(len(l)):             # error: not indented\n    s = l[:i] + l[i+1:]\n        p = perm(l[:i] + l[i+1:])   # error: unexpected indent\n        for x in p:\n                r.append(l[i:i+1] + x)\n            return r                # error: inconsistent dedent`\n
\n

(Actually, the first three errors are detected by the parser; only the last error is found by the lexical analyzer -- the indentation of return r does not match a level popped off the stack.)

\n

https://ds-unit-5-lambda.netlify.app/

\n

Python Study Guide for a JavaScript Programmer

\n

Bryan Guner

\n

Mar 5 · 15 min read

\n

\"https://miro.medium.com/max/1400/1*3V9VOfPk_hrFdbEAd3j-QQ.png\"

\n

Applications of Tutorial & Cheat Sheet Respectivley (At Bottom Of Tutorial):

\n

Basics

\n
    \n
  • PEP8 : Python Enhancement Proposals, style-guide for Python.
    • \n
  • print is the equivalent of console.log.
    • \n
\n
\n

'print() == console.log()'

\n
\n

** is used to make comments in your code.**

\n
def foo():\n    \"\"\"\n    The foo function does many amazing things that you\n    should not question. Just accept that it exists and\n    use it with caution.\n    \"\"\"\n    secretThing()\n
\n
\n

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”

\n
\n

Numbers

\n
    \n
  • Python has three types of numbers:
    • \n
  • Integer
    • \n
  • Positive and Negative Counting Numbers.
    • \n
\n

No Decimal Point

\n
\n

Created by a literal non-decimal point number … or … with the int() constructor.

\n
\n
print(3) # => 3\nprint(int(19)) # => 19\nprint(int()) # => 0\n
\n

3. Complex Numbers

\n
\n

Consist of a real part and imaginary part.

\n
\n

Boolean is a subtype of integer in Python.🤷‍♂️

\n
\n

If you came from a background in JavaScript and learned to accept the premise(s) of the following meme…

\n
\n
\n

Than I am sure you will find the means to suspend your disbelief.

\n
\n
print(2.24) # => 2.24\nprint(2.) # => 2.0\nprint(float()) # => 0.0\nprint(27e-5) # => 0.00027\n
\n

KEEP IN MIND:

\n
\n

The i is switched to a j in programming.

\n
\n

T*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.*

\n
print(7j) # => 7j\nprint(5.1+7.7j)) # => 5.1+7.7j\nprint(complex(3, 5)) # => 3+5j\nprint(complex(17)) # => 17+0j\nprint(complex()) # => 0j\n
\n
    \n
  • Type Casting : The process of converting one number to another.
    • \n
\n
# Using Float\nprint(17)               # => 17\nprint(float(17))        # => 17.0# Using Int\nprint(17.0)             # => 17.0\nprint(int(17.0))        # => 17# Using Str\nprint(str(17.0) + ' and ' + str(17))        # => 17.0 and 17\n
\n

The arithmetic operators are the same between JS and Python, with two additions:

\n
    \n
  • “**” : Double asterisk for exponent.
    • \n
  • “//” : Integer Division.
    • \n
  • There are no spaces between math operations in Python.
    • \n
  • 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.
    • \n
  • There are no ++ and - in Python, the only shorthand operators are:
    • \n
\n

Strings

\n
    \n
  • Python uses both single and double quotes.
    • \n
  • You can escape strings like so 'Jodi asked, \"What\\\\'s up, Sam?\"'
    • \n
  • Multiline strings use triple quotes.
    • \n
\n
print('''My instructions are very long so to make them\nmore readable in the code I am putting them on\nmore than one line. I can even include \"quotes\"\nof any kind because they won't get confused with\nthe end of the string!''')\n
\n

Use the len() function to get the length of a string.

\n
print(len(“Spaghetti”)) # => 9\n
\n

Python uses zero-based indexing

\n

Python allows negative indexing (thank god!)

\n
print(“Spaghetti”[-1]) # => i print(“Spaghetti”[-4]) # => e\n
\n
    \n
  • Python let's you use ranges
    • \n
\n

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.)

\n
print(“Spaghetti”[1:4]) # => pag\nprint(“Spaghetti”[4:-1]) # => hett\nprint(“Spaghetti”[4:4]) # => (empty string)\n
\n
    \n
  • The end range is exclusive just like slice in JS.
    • \n
\n
# Shortcut to get from the beginning of a string to a certain index.\nprint(\"Spaghetti\"[:4])  # => Spag\nprint(\"Spaghetti\"[:-1])    # => Spaghett# Shortcut to get from a certain index to the end of a string.\nprint(\"Spaghetti\"[1:])  # => paghetti\nprint(\"Spaghetti\"[-4:])    # => etti\n
\n
    \n
  • The index string function is the equiv. of indexOf() in JS
    • \n
\n
print(\"Spaghetti\".index(\"h\"))    # => 4\nprint(\"Spaghetti\".index(\"t\"))    # => 6\n
\n
    \n
  • The count function finds out how many times a substring appears in a string… pretty nifty for a hard coded feature of the language.
    • \n
\n
print(\"Spaghetti\".count(\"h\"))    # => 1\nprint(\"Spaghetti\".count(\"t\"))    # => 2\nprint(\"Spaghetti\".count(\"s\"))    # => 0\nprint('''We choose to go to the moon in this decade and do the other things,\nnot because they are easy, but because they are hard, because that goal will\nserve to organize and measure the best of our energies and skills, because that\nchallenge is one that we are willing to accept, one we are unwilling to\npostpone, and one which we intend to win, and the others, too.\n'''.count('the '))                # => 4\n
\n
    \n
  • You can use + to concatenate strings, just like in JS.
    • \n
  • You can also use “*” to repeat strings or multiply strings.
    • \n
  • Use the format() function to use placeholders in a string to input values later on.
    • \n
\n
first_name = \"Billy\"\nlast_name = \"Bob\"\nprint('Your name is {0} {1}'.format(first_name, last_name))  # => Your name is Billy Bob\n
\n
    \n
  • Shorthand way to use format function is:print(f'Your name is {first_name} {last_name}')
    • \n
\n

Some useful string methods.

\n
    \n
  • Note that in JS join is used on an Array, in Python it is used on String.
    • \n
\n

\"https://miro.medium.com/max/630/0*eE3E5H0AoqkhqK1z.png\"

\n
    \n
  • There are also many handy testing methods.
    • \n
\n

\"https://miro.medium.com/max/630/0*Q0CMqFd4PozLDFPB.png\"

\n

Variables and Expressions

\n
    \n
  • Duck-Typing : Programming Style which avoids checking an object's type to figure out what it can do.
    • \n
  • Duck Typing is the fundamental approach of Python.
    • \n
  • Assignment of a value automatically declares a variable.
    • \n
\n
a = 7\nb = 'Marbles'\nprint(a)         # => 7\nprint(b)         # => Marbles\n
\n
    \n
  • You can chain variable assignments to give multiple var names the same value.
    • \n
\n

Use with caution as this is highly unreadable

\n
count = max = min = 0\nprint(count)           # => 0\nprint(max)             # => 0\nprint(min)             # => 0\n
\n

The value and type of a variable can be re-assigned at any time.

\n
a = 17\nprint(a)         # => 17\na = 'seventeen'\nprint(a)         # => seventeen\n
\n
    \n
  • * does not exist in Python, but you can 'create' it like so:*
    • \n
  • Python replaces null with none.
    • \n
  • * is an object and can be directly assigned to a variable.*
    • \n
\n
\n

Using none is a convenient way to check to see why an action may not be operating correctly in your program.

\n
\n

Boolean Data Type

\n
    \n
  • One of the biggest benefits of Python is that it reads more like English than JS does.
    • \n
\n

\"https://miro.medium.com/max/1400/0*HQpndNhm1Z_xSoHb.png\"

\n
# Logical AND\nprint(True and True)    # => True\nprint(True and False)   # => False\nprint(False and False)  # => False# Logical OR\nprint(True or True)     # => True\nprint(True or False)    # => True\nprint(False or False)   # => False# Logical NOT\nprint(not True)             # => False\nprint(not False and True)   # => True\nprint(not True or False)    # => False\n
\n
    \n
  • By default, Python considers an object to be true UNLESS it is one of the following:
    • \n
  • Constant None or False
    • \n
  • Zero of any numeric type.
    • \n
  • Empty Sequence or Collection.
    • \n
  • True and False must be capitalized
    • \n
\n

Comparison Operators

\n
    \n
  • Python uses all the same equality operators as JS.
    • \n
  • In Python, equality operators are processed from left to right.
    • \n
  • Logical operators are processed in this order:
    • \n
  • NOT
    • \n
  • AND
    • \n
  • OR
    • \n
\n
\n

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.

\n
\n

\"https://miro.medium.com/max/630/0*qHzGRLTOMTf30miT.png\"

\n

Identity vs Equality

\n

****

\n\n\n\n\n\n\n\n\n\n
\n
print (2 == '2')    # => False\nprint (2 is '2')    # => Falseprint (\"2\" == '2')    # => True\nprint (\"2\" is '2')    # => True# There is a distinction between the number types.\nprint (2 == 2.0)    # => True\nprint (2 is 2.0)    # => False\n
\n
    \n
  • In the Python community it is better to use is and is not over == or !=
    • \n
\n

If Statements

\n

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.

\n

While Statements

\n
spam = 0\nwhile spam < 5:\n  print('Hello, world.')\n  spam = spam + 1\n
\n
    \n
  • Break statement also exists in Python.
    • \n
\n
spam = 0\nwhile True:\n  print('Hello, world.')\n  spam = spam + 1\n  if spam >= 5:\n    break\n
\n
    \n
  • As are continue statements
    • \n
\n
spam = 0\nwhile True:\n  print('Hello, world.')\n  spam = spam + 1\n  if spam < 5:\n    continue\n  break\n
\n

Try/Except Statements

\n
    \n
  • Python equivalent to try/catch
    • \n
\n
a = 321\ntry:\n    print(len(a))\nexcept:\n    print('Silently handle error here')    # Optionally include a correction to the issue\n    a = str(a)\n    print(len(a)a = '321'\ntry:\n    print(len(a))\nexcept:\n    print('Silently handle error here')    # Optionally include a correction to the issue\n    a = str(a)\n    print(len(a))\n
\n
    \n
  • You can name an error to give the output more specificity.
    • \n
\n
a = 100\nb = 0\ntry:\n    c = a / b\nexcept ZeroDivisionError:\n    c = None\nprint(c)\n
\n
    \n
  • You can also use the pass commmand to by pass a certain error.
    • \n
\n
a = 100\nb = 0\ntry:\n    print(a / b)\nexcept ZeroDivisionError:\n    pass\n
\n
    \n
  • The pass method won't allow you to bypass every single error so you can chain an exception series like so:
    • \n
\n
a = 100\n# b = \"5\"\ntry:\n    print(a / b)\nexcept ZeroDivisionError:\n    pass\nexcept (TypeError, NameError):\n    print(\"ERROR!\")\n
\n
    \n
  • You can use an else statement to end a chain of except statements.
    • \n
\n
# tuple of file names\nfiles = ('one.txt', 'two.txt', 'three.txt')# simple loop\nfor filename in files:\n    try:\n        # open the file in read mode\n        f = open(filename, 'r')\n    except OSError:\n        # handle the case where file does not exist or permission is denied\n        print('cannot open file', filename)\n    else:\n        # do stuff with the file object (f)\n        print(filename, 'opened successfully')\n        print('found', len(f.readlines()), 'lines')\n        f.close()\n
\n
    \n
  • finally is used at the end to clean up all actions under any circumstance.
    • \n
\n
def divide(x, y):\n    try:\n        result = x / y\n    except ZeroDivisionError:\n        print(\"Cannot divide by zero\")\n    else:\n        print(\"Result is\", result)\n    finally:\n        print(\"Finally...\")\n
\n
    \n
  • Using duck typing to check to see if some value is able to use a certain method.
    • \n
\n
# Try a number - nothing will print out\na = 321\nif hasattr(a, '__len__'):\n    print(len(a))# Try a string - the length will print out (4 in this case)\nb = \"5555\"\nif hasattr(b, '__len__'):\n    print(len(b))\n
\n

Pass

\n
    \n
  • Pass Keyword is required to write the JS equivalent of :
    • \n
\n
if (true) {\n}while (true) {}if True:\n  passwhile True:\n  pass\n
\n

Functions

\n
    \n
  • Function definition includes:
    • \n
  • The def keyword
    • \n
  • The name of the function
    • \n
  • A list of parameters enclosed in parentheses.
    • \n
  • A colon at the end of the line.
    • \n
  • One tab indentation for the code to run.
    • \n
  • You can use default parameters just like in JS
    • \n
\n
def greeting(name, saying=\"Hello\"):\n    print(saying, name)greeting(\"Monica\")\n# Hello Monicagreeting(\"Barry\", \"Hey\")\n# Hey Barry\n
\n

Keep in mind, default parameters must always come after regular parameters.

\n
# THIS IS BAD CODE AND WILL NOT RUN\ndef increment(delta=1, value):\n    return delta + value\n
\n
    \n
  • You can specify arguments by name without destructuring in Python.
    • \n
\n
def greeting(name, saying=\"Hello\"):\n    print(saying, name)# name has no default value, so just provide the value\n# saying has a default value, so use a keyword argument\ngreeting(\"Monica\", saying=\"Hi\")\n
\n
    \n
  • The lambda keyword is used to create anonymous functions and are supposed to be one-liners.
    • \n
\n

toUpper = lambda s: s.upper()

\n

Notes

\n

Formatted Strings

\n
\n

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.

\n
\n
shopping_list = ['bread','milk','eggs']\nprint(','.join(shopping_list))\n
\n

Comma Thousands Separator

\n
print('{:,}'.format(1234567890))\n'1,234,567,890'\n
\n

Date and Time

\n
d = datetime.datetime(2020, 7, 4, 12, 15, 58)\nprint('{:%Y-%m-%d %H:%M:%S}'.format(d))\n'2020-07-04 12:15:58'\n
\n

Percentage

\n
points = 190\ntotal = 220\nprint('Correct answers: {:.2%}'.format(points/total))\nCorrect answers: 86.36%\n
\n

Data Tables

\n
width=8\nprint(' decimal hex binary')\nprint('-'*27)\nfor num in range(1,16):\nfor base in 'dXb':\nprint('{0:{width}{base}}'.format(num, base=base, width=width), end=' ')\nprint()\nGetting Input from the Command Line\nPython runs synchronously, all programs and processes will stop when listening for a user input.\nThe input function shows a prompt to a user and waits for them to type 'ENTER'.\nScripts vs Programs\nProgramming Script : A set of code that runs in a linear fashion.\nThe largest difference between scripts and programs is the level of complexity and purpose. Programs typically have many UI's.\n
\n

**Python can be used to display html, css, and JS.**It is common to use Python as an API (Application Programming Interface)

\n

Structured Data

\n

Sequence : The most basic data structure in Python where the index determines the order.

\n
\n

List-Tuple-Range-Collections : Unordered data structures, hashable values.

\n
\n

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

\n

Lists are the python equivalent of arrays.

\n
empty_list = []\ndepartments = ['HR','Development','Sales','Finance','IT','Customer Support']\n
\n

You can instantiate

\n
specials = list()\n
\n

Test if a value is in a list.

\n
print(1 in [1, 2, 3]) #> True\nprint(4 in [1, 2, 3]) #> False\n# Tuples : Very similar to lists, but they are immutable\n
\n

Instantiated with parentheses

\n
time_blocks = ('AM','PM')\n
\n

Sometimes instantiated without

\n
colors = 'red','blue','green'\nnumbers = 1, 2, 3\n
\n

Tuple() built in can be used to convert other data into a tuple

\n
tuple('abc') # returns ('a', 'b', 'c')\ntuple([1,2,3]) # returns (1, 2, 3)\n# Think of tuples as constant variables.\n
\n

Ranges : A list of numbers which can't be changed; often used with for loops.

\n

Declared using one to three parameters.

\n
\n

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.

\n
\n
range(5) # [0, 1, 2, 3, 4]\nrange(1,5) # [1, 2, 3, 4]\nrange(0, 25, 5) # [0, 5, 10, 15, 20]\nrange(0) # [ ]\nfor let (i = 0; i < 5; i++)\nfor let (i = 1; i < 5; i++)\nfor let (i = 0; i < 25; i+=5)\nfor let(i = 0; i = 0; i++)\n# Keep in mind that stop is not included in the range.\n
\n

Dictionaries : Mappable collection where a hashable value is used as a key to ref. an object stored in the dictionary.

\n

Mutable.

\n
a = {'one':1, 'two':2, 'three':3}\nb = dict(one=1, two=2, three=3)\nc = dict([('two', 2), ('one', 1), ('three', 3)])\n# a, b, and c are all equal\n
\n

Declared with curly braces of the built in dict()

\n
\n

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.

\n
\n

Use the in operator to see if a key exists in a dictionary.

\n

Sets : Unordered collection of distinct objects; objects that need to be hashable.

\n
\n

Always be unique, duplicate items are auto dropped from the set.

\n
\n

Common Uses:

\n
\n

Removing DuplicatesMembership TestingMathematical Operators: Intersection, Union, Difference, Symmetric Difference.

\n
\n

Standard Set is mutable, Python has a immutable version called frozenset.Sets created by putting comma seperated values inside braces:

\n
school_bag = {'book','paper','pencil','pencil','book','book','book','eraser'}\nprint(school_bag)\n
\n

Also can use set constructor to automatically put it into a set.

\n
letters = set('abracadabra')\nprint(letters)\n#Built-In Functions\n#Functions using iterables\n
\n

filter(function, iterable) : creates new iterable of the same type which includes each item for which the function returns true.

\n

map(function, iterable) : creates new iterable of the same type which includes the result of calling the function on every item of the iterable.

\n

sorted(iterable, key=None, reverse=False) : creates a new sorted list from the items in the iterable.

\n

Output is always a list

\n

key: opt function which coverts and item to a value to be compared.

\n

reverse: optional boolean.

\n

enumerate(iterable, start=0) : starts with a sequence and converts it to a series of tuples

\n
quarters = ['First', 'Second', 'Third', 'Fourth']\nprint(enumerate(quarters))\nprint(enumerate(quarters, start=1))\n
\n

(0, 'First'), (1, 'Second'), (2, 'Third'), (3, 'Fourth')

\n

(1, 'First'), (2, 'Second'), (3, 'Third'), (4, 'Fourth')

\n
\n

zip(*iterables) : creates a zip object filled with tuples that combine 1 to 1 the items in each provided iterable.Functions that analyze iterable

\n
\n

len(iterable) : returns the count of the number of items.

\n

*max(args, key=None) : returns the largest of two or more arguments.

\n

max(iterable, key=None) : returns the largest item in the iterable.

\n

key optional function which converts an item to a value to be compared.min works the same way as max

\n

sum(iterable) : used with a list of numbers to generate the total.

\n

There is a faster way to concatenate an array of strings into one string, so do not use sum for that.

\n

any(iterable) : returns True if any items in the iterable are true.

\n

all(iterable) : returns True is all items in the iterable are true.

\n

Working with dictionaries

\n

dir(dictionary) : returns the list of keys in the dictionary.Working with sets

\n

*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.

\n
a = {1, 2, 3}\nb = {2, 4, 6}\nprint(a | b) # => {1, 2, 3, 4, 6}\n
\n

Intersection : The & operator ca be used to produce a new set of only the elements that appear in all sets.

\n
a = {1, 2, 3}\nb = {2, 4, 6}\nprint(a & b) # => {2}\nDifference : The — operator can be used to produce a new set of only the elements that appear in the first set and NOT the others.\n
\n

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.

\n
a = {1, 2, 3}\nb = {2, 4, 6}\nprint(a — b) # => {1, 3}\nprint(b — a) # => {4, 6}\nprint(a ^ b) # => {1, 3, 4, 6}\n
\n

For StatementsIn python, there is only one for loop.

\n

Always Includes:

\n
\n
    \n
  1. The for keyword2. A variable name3. The 'in' keyword4. An iterable of some kid5. A colon6. On the next line, an indented block of code called the for clause.
    2. \n
\n
\n

You can use break and continue statements inside for loops as well.

\n

You can use the range function as the iterable for the for loop.

\n
print('My name is')\nfor i in range(5):\nprint('Carlita Cinco (' + str(i) + ')')total = 0\nfor num in range(101):\ntotal += num\nprint(total)\nLooping over a list in Python\nfor c in ['a', 'b', 'c']:\nprint(c)lst = [0, 1, 2, 3]\nfor i in lst:\nprint(i)\n
\n

Common technique is to use the len() on a pre-defined list with a for loop to iterate over the indices of the list.

\n
supplies = ['pens', 'staplers', 'flame-throwers', 'binders']\nfor i in range(len(supplies)):\nprint('Index ' + str(i) + ' in supplies is: ' + supplies[i])\n
\n

****

\n

You can loop and destructure at the same time.

\n
l = 1, 2], [3, 4], [5, 6\nfor a, b in l:\nprint(a, ', ', b)\n
\n
\n

Prints 1, 2Prints 3, 4Prints 5, 6

\n
\n

You can use values() and keys() to loop over dictionaries.

\n
spam = {'color': 'red', 'age': 42}\nfor v in spam.values():\nprint(v)\n
\n

Prints red

\n

Prints 42

\n
for k in spam.keys():\nprint(k)\n
\n

Prints color

\n

Prints age

\n

For loops can also iterate over both keys and values.

\n

Getting tuples

\n
for i in spam.items():\nprint(i)\n
\n

Prints ('color', 'red')

\n

Prints ('age', 42)

\n

Destructuring to values

\n
for k, v in spam.items():\nprint('Key: ' + k + ' Value: ' + str(v))\n
\n

Prints Key: age Value: 42

\n

Prints Key: color Value: red

\n

Looping over string

\n
for c in “abcdefg”:\nprint(c)\n
\n

When you order arguments within a function or function call, the args need to occur in a particular order:

\n

formal positional args.

\n
    \n
  • args
    • \n
\n

keyword args with default values

\n
    \n
  • *kwargs
    • \n
\n
def example(arg_1, arg_2, *args, **kwargs):\npassdef example2(arg_1, arg_2, *args, kw_1=”shark”, kw_2=”blowfish”, **kwargs):\npass\n
\n

Importing in Python

\n

Modules are similar to packages in Node.jsCome in different types:

\n

Built-In,

\n

Third-Party,

\n

Custom.

\n

All loaded using import statements.

\n

Terms

\n
\n

module : Python code in a separate file.package : Path to a directory that contains modules.init.py : Default file for a package.submodule : Another file in a module's folder.function : Function in a module.

\n
\n

A module can be any file but it is usually created by placing a special file init.py into a folder. pic

\n

Try to avoid importing with wildcards in Python.

\n

Use multiple lines for clarity when importing.

\n
from urllib.request import (\nHTTPDefaultErrorHandler as ErrorHandler,\nHTTPRedirectHandler as RedirectHandler,\nRequest,\npathname2url,\nurl2pathname,\nurlopen,\n)\n
\n

Watching Out for Python 2

\n

Python 3 removed <> and only uses !=

\n

format() was introduced with P3

\n

All strings in P3 are unicode and encoded.md5 was removed.

\n

ConfigParser was renamed to configparsersets were killed in favor of set() class.

\n

print was a statement in P2, but is a function in P3.

\n

https://gist.github.com/bgoonz/82154f50603f73826c27377ebaa498b5#file-python-study-guide-py

\n

https://gist.github.com/bgoonz/282774d28326ff83d8b42ae77ab1fee3#file-python-cheatsheet-py

\n

https://gist.github.com/bgoonz/999163a278b987fe47fb247fd4d66904#file-python-cheat-sheet-md

\n

\"https://s3-us-west-2.amazonaws.com/secure.notion-static.com/be5715e2-c834-458f-8c5b-ea185717fe37/Untitled.png\"

\n

Built-in Functions

"},{"url":"/docs/python/python-quiz/","relativePath":"docs/python/python-quiz.md","relativeDir":"docs/python","base":"python-quiz.md","name":"python-quiz","frontmatter":{"title":"Python Quiz","weight":0,"excerpt":"Python Quiz","seo":{"title":"Python Quiz","description":"Python Quiz cheat sheet for python developers","robots":[],"extra":[{"name":"og:image","value":"images/py-code.png","keyName":"property","relativeUrl":true},{"name":"twitter:title","value":"python cheat sheet","keyName":"name","relativeUrl":false}]},"template":"docs"},"html":"

zQ1. What is an abstract class?

\n
    \n
  • An abstract class is the name for any class from which you can instantiate an object.
    • \n
  • Abstract classes must be redefined any time an object is instantiated from them.
    • \n
  • Abstract classes must inherit from concrete classes.
    • \n
  • [✅] An abstract class exists only so that other \"concrete\" classes can inherit from the abstract class.
    • \n
\n

reference

\n

Q2. What happens when you use the build-in function any() on a list?

\n
    \n
  • The any() function will randomly return any item from the list.
    • \n
  • [✅] The any() function returns True if any item in the list evaluates to True. Otherwise, it returns False.
    • \n
  • The any() function takes as arguments the list to check inside, and the item to check for. If \"any\" of the items in the list match the item to check for, the function returns True.
    • \n
  • The any() function returns a Boolean value that answers the question \"Are there any items in this list?\"
    • \n
\n

example

\n
if any([True, False, False, False]) == True:\n    print('Yes, there is True')\n>>> Yes, there is True\n
\n

Q3. What data structure does a binary tree degenerate to if it isn't balanced properly?

\n
    \n
  • [✅] linked list
    • \n
  • queue
    • \n
  • set
    • \n
  • OrderedDict
    • \n
\n

Q4. What statement about static methods is true?

\n
    \n
  • Static methods are called static because they always return None.
    • \n
  • Static methods can be bound to either a class or an instance of a class.
    • \n
  • [✅] Static methods serve mostly as utility methods or helper methods, since they can't access or modify a class's state.
    • \n
  • Static methods can access and modify the state of a class or an instance of a class.
    • \n
\n

reference

\n

Q5. What are attributes?

\n
    \n
  • Attributes are long-form version of an if/else statement, used when testing for equality between objects.
    • \n
  • [✅] Attributes are a way to hold data or describe a state for a class or an instance of a class.
    • \n
  • Attributes are strings that describe characteristics of a class.
    • \n
  • Function arguments are called \"attributes\" in the context of class methods and instance methods.
    • \n
\n

Explanation Attributes defined under the class, arguments goes under the functions. arguments usually refer as parameter, whereas attributes are the constructor of the class or an instance of a class.

\n

Q6. What is the term to describe this code?

\n

count, fruit, price = (2, 'apple', 3.5)

\n
    \n
  • tuple assignment
    • \n
  • [✅] tuple unpacking
    • \n
  • tuple matching
    • \n
  • tuple duplication
    • \n
\n

Q7. What built-in list method would you use to remove items from a list?

\n
    \n
  • .delete() method
    • \n
  • pop(my_list)
    • \n
  • del(my_list)
    • \n
  • [✅] .pop() method
    • \n
\n

example

\n
my_list = [1,2,3]\nmy_list.pop(0)\nmy_list\n>>>[2,3]\n
\n

Q8. What is one of the most common use of Python's sys library?

\n
    \n
  • [✅] to capture command-line arguments given at a file's runtime
    • \n
  • to connect various systems, such as connecting a web front end, an API service, a database, and a mobile app
    • \n
  • to take a snapshot of all the packages and libraries in your virtual environment
    • \n
  • to scan the health of your Python ecosystem while inside a virtual environment
    • \n
\n

Q9. What is the runtime of accessing a value in a dictionary by using its key?

\n
    \n
  • O(n), also called linear time.
    • \n
  • O(log n), also called logarithmic time.
    • \n
  • O(n^2), also called quadratic time.
    • \n
  • [✅] O(1), also called constant time.
    • \n
\n

Q10. What is the correct syntax for defining a class called Game, if it inherits from a parent class called LogicGame?

\n
    \n
  • [✅] class Game(LogicGame): pass
    • \n
  • def Game(LogicGame): pass
    • \n
  • def Game.LogicGame(): pass
    • \n
  • class Game.LogicGame(): pass
    • \n
\n

Explanation: The parent class which is inherited is passed as an argument to the child class. Therefore, here the first option is the right answer.

\n

Q11. What is the correct way to write a doctest?

\n
    \n
  • A
    • \n
\n
def sum(a, b):\n    \"\"\"\n    sum(4, 3)\n    7\n\n    sum(-4, 5)\n    1\n    \"\"\"\n    return a + b\n
\n
    \n
  • [✅] B
    • \n
\n
def sum(a, b):\n    \"\"\"\n    >>> sum(4, 3)\n    7\n\n    >>> sum(-4, 5)\n    1\n    \"\"\"\n    return a + b\n
\n
    \n
  • C
    • \n
\n
def sum(a, b):\n    \"\"\"\n    # >>> sum(4, 3)\n    # 7\n\n    # >>> sum(-4, 5)\n    # 1\n    \"\"\"\n    return a + b\n
\n
    \n
  • D
    • \n
\n
def sum(a, b):\n    ###\n    >>> sum(4, 3)\n    7\n\n    >>> sum(-4, 5)\n    1\n    ###\n    return a + b\n
\n

explanation - use ''' to start the doc and add output of the cell after >>>

\n

Q12. What built-in Python data type is commonly used to represent a stack?

\n
    \n
  • set
    • \n
  • [✅] list
    • \n
  • None
    • \n
  • dictionary
    • \n
\n

. You can only build a stack from scratch.

\n

Q13. What would this expression return?

\n
college_years = ['Freshman', 'Sophomore', 'Junior', 'Senior']\nreturn list(enumerate(college_years, 2019))\n
\n
    \n
  • [('Freshman', 2019), ('Sophomore', 2020), ('Junior', 2021), ('Senior', 2022)]
    • \n
  • [(2019, 2020, 2021, 2022), ('Freshman', 'Sophomore', 'Junior', 'Senior')]
    • \n
  • [('Freshman', 'Sophomore', 'Junior', 'Senior'), (2019, 2020, 2021, 2022)]
    • \n
  • [✅] [(2019, 'Freshman'), (2020, 'Sophomore'), (2021, 'Junior'), (2022, 'Senior')]
    • \n
\n

Q14. How does defaultdict work?

\n
    \n
  • defaultdict will automatically create a dictionary for you that has keys which are the integers 0-10.
    • \n
  • defaultdict forces a dictionary to only accept keys that are of the data type specified when you created the defaultdict (such as strings or integers).
    • \n
  • [✅] If you try to read from a defaultdict with a nonexistent key, a new default key-value pair will be created for you instead of throwing a KeyError.
    • \n
  • defaultdict stores a copy of a dictionary in memory that you can default to if the original gets unintentionally modified.
    • \n
\n

Q15. What is the correct syntax for defining a class called \"Game\", if it inherits from a parent class called \"LogicGame\"?

\n
    \n
  • class Game.LogicGame(): pass
    • \n
  • def Game(LogicGame): pass
    • \n
  • [✅] class Game(LogicGame): pass
    • \n
  • def Game.LogicGame(): pass
    • \n
\n

repeated but labels will be different

\n

Q16. What is the purpose of the \"self\" keyword when defining or calling instance methods?

\n
    \n
  • self means that no other arguments are required to be passed into the method.
    • \n
  • There is no real purpose for the self method; it's just historic computer science jargon that Python keeps to stay consistent with other programming languages.
    • \n
  • [✅] self refers to the instance whose method was called.
    • \n
  • self refers to the class that was inherited from to create the object using self.
    • \n
\n

Simple example

\n
class my_secrets:\n    def __init__(self, password):\n        self.password = password\n        pass\ninstance = my_secrets('1234')\ninstance.password\n>>>'1234'\n
\n

Q17. Which of these is NOT a characteristic of namedtuples?

\n
    \n
  • You can assign a name to each of the namedtuple members and refer to them that way, similarly to how you would access keys in dictionary.
    • \n
  • Each member of a namedtuple object can be indexed to directly, just like in a regular tuple.
    • \n
  • namedtuples are just as memory efficient as regular tuples.
    • \n
  • [✅] No import is needed to use namedtuples because they are available in the standard library.
    • \n
\n

**We need to import it using from collections import namedtuple **

\n

Q18. What is an instance method?

\n
    \n
  • [✅] Instance methods can modify the state of an instance or the state of its parent class.
    • \n
  • Instance methods hold data related to the instance.
    • \n
  • An instance method is any class method that doesn't take any arguments.
    • \n
  • An instance method is a regular function that belongs to a class, but it must return None.
    • \n
\n

Q19. Which choice is the most syntactically correct example of the conditional branching?

\n
    \n
  • [ ]
    • \n
\n
num_people = 5\n\nif num_people > 10:\n    print(\"There is a lot of people in the pool.\")\nelif num_people > 4;\n    print(\"There are some people in the pool.\")\nelif num_people > 0;\n    print(\"There are a few people in the pool.\")\nelse:\n    print(\"There is no one in the pool.\")\n
\n
    \n
  • [ ]
    • \n
\n
num_people = 5\n\nif num_people > 10:\n    print(\"There is a lot of people in the pool.\")\nif num_people > 4:\n    print(\"There are some people in the pool.\")\nif num_people > 0:\n    print(\"There are a few people in the pool.\")\nelse:\n    print(\"There is no one in the pool.\")\n
\n
    \n
  • [✅]
    • \n
\n
num_people = 5\n\nif num_people > 10:\n    print(\"There is a lot of people in the pool.\")\nelif num_people > 4:\n    print(\"There are some people in the pool.\")\nelif num_people > 0:\n    print(\"There are a few people in the pool.\")\nelse:\n    print(\"There is no one in the pool.\")\n
\n
    \n
  • [ ]
    • \n
\n
if num_people > 10;\n    print(\"There is a lot of people in the pool.\")\nif num_people > 4:\n    print(\"There are some people in the pool.\")\nif num_people > 0:\n    print(\"There are a few people in the pool.\")\nelse:\n    print(\"There is no one in the pool.\")\n
\n

Also see Question 85 for the same question with different answers.

\n

Q20. Which statement does NOT describe the object-oriented programming concept of encapsulation?

\n
    \n
  • It protects the data from outside interference.
    • \n
  • A parent class is encapsulated and no data from the parent class passes on to the child class.
    • \n
  • It keeps data and the methods that can manipulate that data in one place.
    • \n
  • [✅] It only allows the data to be changed by methods.
    • \n
\n

Q21. What is the purpose of an if/else statement?

\n
    \n
  • It tells the computer which chunk of code to run if the instructions you coded are incorrect.
    • \n
  • It runs one chunk of code if all the imports were successful, and another chunk of code if the imports were not successful.
    • \n
  • [✅] It executes one chunk of code if a condition is true, but a different chunk of code if the condition is false.
    • \n
  • It tells the computer which chunk of code to run if the is enough memory to handle it, and which chunk of code to run if there is not enough memory to handle it.
    • \n
\n

Q22. What built-in Python data type is best suited for implementing a queue?

\n
    \n
  • dictionary
    • \n
  • set
    • \n
  • None. You can only build a queue from scratch.
    • \n
  • [✅] list
    • \n
\n

Q23. What is the correct syntax for instantiating a new object of the type Game?

\n
    \n
  • my_game = class.Game()
    • \n
  • my_game = class(Game)
    • \n
  • [✅] my_game = Game()
    • \n
  • my_game = Game.create()
    • \n
\n

Q24. What does the built-in map() function do?

\n
    \n
  • It creates a path from multiple values in an iterable to a single value.
    • \n
  • [✅] It applies a function to each item in an iterable and returns the value of that function.
    • \n
  • It converts a complex value type into simpler value types.
    • \n
  • It creates a mapping between two different elements of different iterables.
    • \n
\n

Explanation: - The synax for map() function is list(map(function,iterable). the simple area finder using map would be like this

\n
import math\nradius = [1,2,3]\narea = list(map(lambda x: round(math.pi*(x**2), 2), radius))\narea\n>>> [3.14, 12.57, 28.27]\n
\n

Q25. If you don't explicitly return a value from a function, what happens?

\n
    \n
  • The function will return a RuntimeError if you don't return a value.
    • \n
  • [✅] If the return keyword is absent, the function will return None.
    • \n
  • If the return keyword is absent, the function will return True.
    • \n
  • The function will enter an infinite loop because it won't know when to stop executing its code.
    • \n
\n

Q26. What is the purpose of the pass statement in Python?

\n
    \n
  • It is used to skip the yield statement of a generator and return a value of None.
    • \n
  • [✅] It is a null operation used mainly as a placeholder in functions, classes, etc.
    • \n
  • It is used to pass control from one statement block to another.
    • \n
  • It is used to skip the rest of a while or for loop and return to the start of the loop.
    • \n
\n

Q27. What is the term used to describe items that may be passed into a function?

\n
    \n
  • [✅] arguments
    • \n
  • paradigms
    • \n
  • attributes
    • \n
  • decorators
    • \n
\n

Q28. Which collection type is used to associate values with unique keys?

\n
    \n
  • slot
    • \n
  • [✅] dictionary
    • \n
  • queue
    • \n
  • sorted list
    • \n
\n

Q29. When does a for loop stop iterating?

\n
    \n
  • when it encounters an infinite loop
    • \n
  • when it encounters an if/else statement that contains a break keyword
    • \n
  • [✅] when it has assessed each item in the iterable it is working on or a break keyword is encountered
    • \n
  • when the runtime for the loop exceeds O(n^2)
    • \n
\n

Q30. Assuming the node is in a singly linked list, what is the runtime complexity of searching for a specific node within a singly linked list?

\n
    \n
  • [✅] The runtime is O(n) because in the worst case, the node you are searching for is the last node, and every node in the linked list must be visited.
    • \n
  • The runtime is O(nk), with n representing the number of nodes and k representing the amount of time it takes to access each node in memory.
    • \n
  • The runtime cannot be determined unless you know how many nodes are in the singly linked list.
    • \n
  • The runtime is O(1) because you can index directly to a node in a singly linked list.
    • \n
\n

Q31. Given the following three list, how would you create a new list that matches the desired output printed below?

\n
fruits = ['Apples', 'Oranges', 'Bananas']\nquantities = [5, 3, 4]\nprices = [1.50, 2.25, 0.89]\n\n#Desired output\n[('Apples', 5, 1.50),\n('Oranges', 3, 2.25),\n('Bananas', 4, 0.89)]\n
\n
    \n
  • [ ]
    • \n
\n
output = []\n\nfruit_tuple_0 = (first[0], quantities[0], price[0])\noutput.append(fruit_tuple)\n\nfruit_tuple_1 = (first[1], quantities[1], price[1])\noutput.append(fruit_tuple)\n\nfruit_tuple_2 = (first[2], quantities[2], price[2])\noutput.append(fruit_tuple)\n\nreturn output\n
\n
    \n
  • [✅]
    • \n
\n
i = 0\noutput = []\nfor fruit in fruits:\n    temp_qty = quantities[i]\n    temp_price = prices[i]\n    output.append((fruit, temp_qty, temp_price))\n    i += 1\nreturn output\n
\n
    \n
  • [ ]
    • \n
\n
groceries = zip(fruits, quantities, prices)\nreturn groceries\n\n>>> [\n('Apples', 5, 1.50),\n('Oranges', 3, 2.25),\n('Bananas', 4, 0.89)\n]\n
\n
    \n
  • [ ]
    • \n
\n
i = 0\noutput = []\nfor fruit in fruits:\n    for qty in quantities:\n        for price in prices:\n            output.append((fruit, qty, price))\n    i += 1\nreturn output\n
\n

Q32. What happens when you use the built-in function all() on a list?

\n
    \n
  • The all() function returns a Boolean value that answers the question \"Are all the items in this list the same?
    • \n
  • The all() function returns True if all the items in the list can be converted to strings. Otherwise, it returns False.
    • \n
  • The all() function will return all the values in the list.
    • \n
  • [✅] The all() function returns True if all items in the list evaluate to True. Otherwise, it returns False.
    • \n
\n

Explaination - all() returns true if all in the list are True, see example below

\n
test = [True,False,False,False]\nif all(test) is True:\n    print('Yeah all are True')\nelse:\n    print('There is an imposter')\n>>> There is an imposter\n
\n

Q33. What is the correct syntax for calling an instance method on a class named Game?

\n

(Answer format may vary. Game and roll (or dice\\roll) should each be called with no parameters.)_

\n
    \n
  • [✅]
    • \n
\n
>>> dice = Game()\n>>> dice.roll()\n
\n
    \n
  • [ ]
    • \n
\n
>>> dice = Game(self)\n>>> dice.roll(self)\n
\n
    \n
  • [ ]
    • \n
\n
>>> dice = Game()\n>>> dice.roll(self)\n
\n
    \n
  • [ ]
    • \n
\n
>>> dice = Game(self)\n>>> dice.roll()\n
\n

Q34. What is the algorithmic paradigm of quick sort?

\n
    \n
  • backtracking
    • \n
  • dynamic programming
    • \n
  • decrease and conquer
    • \n
  • [✅] divide and conquer
    • \n
\n

Q35. What is runtime complexity of the list's built-in .append() method?

\n
    \n
  • [✅] O(1), also called constant time
    • \n
  • O(log n), also called logarithmic time
    • \n
  • O(n^2), also called quadratic time
    • \n
  • O(n), also called linear time
    • \n
\n

Q36. What is key difference between a set and a list?

\n
    \n
  • A set is an ordered collection unique items. A list is an unordered collection of non-unique items.
    • \n
  • Elements can be retrieved from a list but they cannot be retrieved from a set.
    • \n
  • A set is an ordered collection of non-unique items. A list is an unordered collection of unique items.
    • \n
  • [✅] A set is an unordered collection unique items. A list is an ordered collection of non-unique items.
    • \n
\n

Q37. What is the definition of abstraction as applied to object-oriented Python?

\n
    \n
  • Abstraction means that a different style of code can be used, since many details are already known to the program behind the scenes.
    • \n
  • [✅] Abstraction means the implementation is hidden from the user, and only the relevant data or information is shown.
    • \n
  • Abstraction means that the data and the functionality of a class are combined into one entity.
    • \n
  • Abstraction means that a class can inherit from more than one parent class.
    • \n
\n

Q38. What does this function print?

\n
def print_alpha_nums(abc_list, num_list):\n    for char in abc_list:\n        for num in num_list:\n            print(char, num)\n    return\n\nprint_alpha_nums(['a', 'b', 'c'], [1, 2, 3])\n
\n
    \n
  • [✅]
    • \n
\n
a 1\na 2\na 3\nb 1\nb 2\nb 3\nc 1\nc 2\nc 3\n
\n
    \n
  • [ ]
    • \n
\n
['a', 'b', 'c'], [1, 2, 3]\n
\n
    \n
  • [ ]
    • \n
\n
aaa\nbbb\nccc\n111\n222\n333\n
\n
    \n
  • [ ]
    • \n
\n
a 1 2 3\nb 1 2 3\nc 1 2 3\n
\n

Q39. Correct representation of doctest for function in Python

\n
    \n
  • [ ]
    • \n
\n
def sum(a, b):\n    # a = 1\n    # b = 2\n    # sum(a, b) = 3\n\n    return a + b\n
\n
    \n
  • [ ]
    • \n
\n
def sum(a, b):\n    \"\"\"\n    a = 1\n    b = 2\n    sum(a, b) = 3\n    \"\"\"\n\n    return a + b\n
\n
    \n
  • [✅]
    • \n
\n
def sum(a, b):\n    \"\"\"\n    >>> a = 1\n    >>> b = 2\n    >>> sum(a, b)\n    3\n    \"\"\"\n\n    return a + b\n
\n
    \n
  • [ ]
    • \n
\n
def sum(a, b):\n    '''\n    a = 1\n    b = 2\n    sum(a, b) = 3\n    '''\n    return a + b\n
\n

Explanation: Use \"\"\" to start and end the docstring and use >>> to represent the output. If you write this correctly you can also run the doctest using build-in doctest module

\n

Q40. Suppose a Game class inherits from two parent classes: BoardGame and LogicGame. Which statement is true about the methods of an object instantiated from the Game class?

\n
    \n
  • When instantiating an object, the object doesn't inherit any of the parent class's methods.
    • \n
  • When instantiating an object, the object will inherit the methods of whichever parent class has more methods.
    • \n
  • When instantiating an object, the programmer must specify which parent class to inherit methods from.
    • \n
  • [✅] An instance of the Game class will inherit whatever methods the BoardGame and LogicGame classes have.
    • \n
\n

Q41. What does calling namedtuple on a collection type return?

\n
    \n
  • a generic object class with iterable parameter fields
    • \n
  • a generic object class with non-iterable named fields
    • \n
  • a tuple subclass with non-iterable parameter fields
    • \n
  • [✅] a tuple subclass with iterable named fields
    • \n
\n

Example

\n
import math\nradius = [1,2,3]\narea = list(map(lambda x: round(math.pi*(x**2), 2), radius))\narea\n>>> [3.14, 12.57, 28.27]\n
\n

Q42. What symbol(s) do you use to assess equality between two elements?

\n
    \n
  • &&
    • \n
  • =
    • \n
  • [✅] ==
    • \n
  • ||
    • \n
\n

Q43. Review the code below. What is the correct syntax for changing the price to 1.5?

\n
fruit_info = {\n  'fruit': 'apple',\n  'count': 2,\n  'price': 3.5\n}\n
\n
    \n
  • [✅] fruit_info ['price'] = 1.5
    • \n
  • my_list [3.5] = 1.5
    • \n
  • 1.5 = fruit_info ['price]
    • \n
  • my_list['price'] == 1.5
    • \n
\n

Q44. What value would be returned by this check for equality?

\n

5 != 6

\n
    \n
  • yes
    • \n
  • False
    • \n
  • [✅] True
    • \n
  • None
    • \n
\n

Explanation - != is equivalent to not equal to in python

\n

Q45. What does a class's init() method do?

\n
    \n
  • The __init__ method makes classes aware of each other if more than one class is defined in a single code file.
    • \n
  • The__init__ method is included to preserve backwards compatibility from Python 3 to Python 2, but no longer needs to be used in Python 3.
    • \n
  • [✅] The __init__ method is a constructor method that is called automatically whenever a new object is created from a class. It sets the initial state of a new object.
    • \n
  • The __init__ method initializes any imports you may have included at the top of your file.
    • \n
\n

Example:

\n
class test:\n    def __init__(self):\n        print('I came here without your permission lol')\n        pass\nt1 = test()\n>>> 'I came here without your permission lol'\n
\n

Q46. What is meant by the phrase \"space complexity\"?

\n
    \n
  • How many microprocessors it would take to run your code in less than one second
    • \n
  • How many lines of code are in your code file
    • \n
  • [✅] The amount of space taken up in memory as a function of the input size
    • \n
  • How many copies of the code file could fit in 1 GB of memory
    • \n
\n

Q47. What is the correct syntax for creating a variable that is bound to a dictionary?

\n
    \n
  • [✅] fruit_info = {'fruit': 'apple', 'count': 2, 'price': 3.5}
    • \n
  • fruit_info =('fruit': 'apple', 'count': 2,'price': 3.5 ).dict()
    • \n
  • fruit_info = ['fruit': 'apple', 'count': 2,'price': 3.5 ].dict()
    • \n
  • fruit_info = to_dict('fruit': 'apple', 'count': 2, 'price': 3.5)
    • \n
\n

Q48. What is the proper way to write a list comprehension that represents all the keys in this dictionary?

\n

fruits = {'Apples': 5, 'Oranges': 3, 'Bananas': 4}

\n
    \n
  • fruit_names = [x in fruits.keys() for x]
    • \n
  • fruit_names = for x in fruits.keys() *
    • \n
  • [✅] fruit_names = [x for x in fruits.keys()]
    • \n
  • fruit_names = x for x in fruits.keys()
    • \n
\n

Q49. What is the purpose of the self keyword when defining or calling methods on an instance of an object?

\n
    \n
  • self refers to the class that was inherited from to create the object using self.
    • \n
  • There is no real purpose for the self method. It's just legacy computer science jargon that Python keeps to stay consistent with other programming languages.
    • \n
  • self means that no other arguments are required to be passed into the method.
    • \n
  • [✅] self refers to the instance whose method was called.
    • \n
\n

Explanation: - Try running the example of the Q45 without passing self argument inside the __init__, you'll understand the reason. You'll get the error like this __init__() takes 0 positional arguments but 1 was given, this means that something is going inside even if haven't specified, which is instance itself.

\n

Q50. What statement about the class methods is true?

\n
    \n
  • A class method is a regular function that belongs to a class, but it must return None.
    • \n
  • [✅] A class method can modify the state of the class, but they can't directly modify the state of an instance that inherits from that class.
    • \n
  • A class method is similar to a regular function, but a class method doesn't take any arguments.
    • \n
  • A class method hold all of the data for a particular class.
    • \n
\n

Q51. What does it mean for a function to have linear runtime?

\n
    \n
  • You did not use very many advanced computer programming concepts in your code.
    • \n
  • The difficulty level your code is written at is not that high.
    • \n
  • It will take your program less than half a second to run.
    • \n
  • [✅] The amount of time it takes the function to complete grows linearly as the input size increases.
    • \n
\n

Q52. What is the proper way to define a function?

\n
    \n
  • def getMaxNum(list_of_nums): # body of function goes here
    • \n
  • func get_max_num(list_of_nums): # body of function goes here
    • \n
  • func getMaxNum(list_of_nums): # body of function goes here
    • \n
  • [✅] def get_max_num(list_of_nums): # body of function goes here
    • \n
\n

explanation for 52 & 53

\n

Q53. According to the PEP 8 coding style guidelines, how should constant values be named in Python?

\n
    \n
  • in camel case without using underscores to separate words -- e.g. maxValue = 255
    • \n
  • in lowercase with underscores to separate words -- e.g. max_value = 255
    • \n
  • [✅] in all caps with underscores separating words -- e.g. MAX_VALUE = 255
    • \n
  • in mixed case without using underscores to separate words -- e.g. MaxValue = 255
    • \n
\n

Q54. Describe the functionality of a deque.

\n
    \n
  • A deque adds items to one side and remove items from the other side.
    • \n
  • A deque adds items to either or both sides, but only removes items from the top.
    • \n
  • [✅] A deque adds items at either or both ends, and remove items at either or both ends.
    • \n
  • A deque adds items only to the top, but remove from either or both sides.
    • \n
\n

Explanation - deque is used to create block chanin and in that there is first in first out approch, which means the last element to enter will be the first to leave.

\n

Q55. What is the correct syntax for creating a variable that is bound to a set?

\n
    \n
  • [✅] my_set = {0, 'apple', 3.5}
    • \n
  • my_set = to_set(0, 'apple', 3.5)
    • \n
  • my_set = (0, 'apple', 3.5).to_set()
    • \n
  • my_set = (0, 'apple', 3.5).set()
    • \n
\n

Q56. What is the correct syntax for defining an __init__() method that takes no parameters?

\n
    \n
  • [ ]
    • \n
\n
class __init__(self):\n    pass\n
\n
    \n
  • [ ]
    • \n
\n
def __init__():\n    pass\n
\n
    \n
  • [ ]
    • \n
\n
class __init__():\n    pass\n
\n
    \n
  • [✅]
    • \n
\n
def __init__(self):\n    pass\n
\n

Q57. Which of the following is TRUE About how numeric data would be organised in a binary Search tree?

\n
    \n
  • [✅] For any given Node in a binary Search Tree, the child node to the left is less than the value of the given node and the child node to its right is greater than the given node.
    • \n
  • Binary Search Tree cannot be used to organize and search through numeric data, given the complication that arise with very deep trees.
    • \n
  • The top node of the binary search tree would be an arbitrary number. All the nodes to the left of the top node need to be less than the top node's number, but they don't need to ordered in any particular way.
    • \n
  • The smallest numeric value would go in the top most node. The next highest number would go in its left child node, the the next highest number after that would go in its right child node. This pattern would continue until all numeric values were in their own node.
    • \n
\n

Q58. Why would you use a decorator?

\n
    \n
  • A decorator is similar to a class and should be used if you are doing functional programming instead of object oriented programming.
    • \n
  • A decorator is a visual indicator to someone reading your code that a portion of your code is critical and should not be changed.
    • \n
  • [✅] You use the decorator to alter the functionality of a function without having to modify the functions code.
    • \n
  • An import statement is preceded by a decorator, python knows to import the most recent version of whatever package or library is being imported.
    • \n
\n

Q59. When would you use a for loop?

\n
    \n
  • Only in some situations, as loops are used only for certain type of programming.
    • \n
  • [✅] When you need to check every element in an iterable of known length.
    • \n
  • When you want to minimize the use of strings in your code.
    • \n
  • When you want to run code in one file for a function in another file.
    • \n
\n

Q60. What is the most self-descriptive way to define a function that calculates sales tax on a purchase?

\n
    \n
  • [ ]
    • \n
\n
def tax(my_float):\n    '''Calculates the sales tax of a purchase. Takes in a float representing the subtotal as an argument and returns a float representing the sales tax.'''\n    pass\n
\n
    \n
  • [ ]
    • \n
\n
def tx(amt):\n    '''Gets the tax on an amount.'''\n
\n
    \n
  • [ ]
    • \n
\n
def sales_tax(amount):\n    '''Calculates the sales tax of a purchase. Takes in a float representing the subtotal as an argument and returns a float representing the sales tax.'''\n
\n
    \n
  • [✅]
    • \n
\n
def calculate_sales_tax(subtotal):\n    pass\n
\n

Q61. What would happen if you did not alter the state of the element that an algorithm is operating on recursively?

\n
    \n
  • You do not have to alter the state of the element the algorithm is recursing on.
    • \n
  • You would eventually get a KeyError when the recursive portion of the code ran out of items to recurse on.
    • \n
  • [✅] You would get a RuntimeError: maximum recursion depth exceeded.
    • \n
  • The function using recursion would return None.
    • \n
\n

explanation

\n

Q62. What is the runtime complexity of searching for an item in a binary search tree?

\n
    \n
  • The runtime for searching in a binary search tree is O(1) because each node acts as a key, similar to a dictionary.
    • \n
  • The runtime for searching in a binary search tree is O(n!) because every node must be compared to every other node.
    • \n
  • [✅] The runtime for searching in a binary search tree is generally O(h), where h is the height of the tree.
    • \n
  • The runtime for searching in a binary search tree is O(n) because every node in the tree must be visited.
    • \n
\n

explanation

\n

Q63. Why would you use mixin?

\n
    \n
  • You use a mixin to force a function to accept an argument at runtime even if the argument wasn't included in the function's definition.
    • \n
  • You use a mixin to allow a decorator to accept keyword arguments.
    • \n
  • You use a mixin to make sure that a class's attributes and methods don't interfere with global variables and functions.
    • \n
  • [✅] If you have many classes that all need to have the same functionality, you'd use a mixin to define that functionality.
    • \n
\n

explanation

\n

Q64. What is the runtime complexity of adding an item to a stack and removing an item from a stack?

\n
    \n
  • Add items to a stack in O(1) time and remove items from a stack on O(n) time.
    • \n
  • [✅] Add items to a stack in O(1) time and remove items from a stack in O(1) time.
    • \n
  • Add items to a stack in O(n) time and remove items from a stack on O(1) time.
    • \n
  • Add items to a stack in O(n) time and remove items from a stack on O(n) time.
    • \n
\n

Q65. Which statement accurately describes how items are added to and removed from a stack?

\n
    \n
  • a stacks adds items to one side and removes items from the other side.
    • \n
  • [✅] a stacks adds items to the top and removes items from the top.
    • \n
  • a stacks adds items to the top and removes items from anywhere in the stack.
    • \n
  • a stacks adds items to either end and removes items from either end.
    • \n
\n

Explanation Stack uses the first in first out approach

\n

Q66. What is a base case in a recursive function?

\n
    \n
  • [✅] A base case is the condition that allows the algorithm to stop recursing. It is usually a problem that is small enough to solve directly.
    • \n
  • The base case is summary of the overall problem that needs to be solved.
    • \n
  • The base case is passed in as an argument to a function whose body makes use of recursion.
    • \n
  • The base case is similar to a base class, in that it can be inherited by another object.
    • \n
\n

Q67. Why is it considered good practice to open a file from within a Python script by using the with keyword?

\n
    \n
  • The with keyword lets you choose which application to open the file in.
    • \n
  • The with keyword acts like a for loop, and lets you access each line in the file one by one.
    • \n
  • There is no benefit to using the with keyword for opening a file in Python.
    • \n
  • [✅] When you open a file using the with keyword in Python, Python will make sure the file gets closed, even if an exception or error is thrown.
    • \n
\n

explanation

\n

Q68. Why would you use a virtual environment?

\n
    \n
  • [✅] Virtual environments create a \"bubble\" around your project so that any libraries or packages you install within it don't affect your entire machine.
    • \n
  • Teams with remote employees use virtual environments so they can share code, do code reviews, and collaborate remotely.
    • \n
  • Virtual environments were common in Python 2 because they augmented missing features in the language. Virtual environments are not necessary in Python 3 due to advancements in the language.
    • \n
  • Virtual environments are tied to your GitHub or Bitbucket account, allowing you to access any of your repos virtually from any machine.
    • \n
\n

Q69. What is the correct way to run all the doctests in a given file from the command line?

\n
    \n
  • [✅] python3 -m doctest <filename>
    • \n
  • python3 <filename>
    • \n
  • python3 <filename> rundoctests
    • \n
  • python3 doctest
    • \n
\n

tutorial video

\n

Q70. What is a lambda function ?

\n
    \n
  • any function that makes use of scientific or mathematical constants, often represented by Greek letters in academic writing
    • \n
  • a function that get executed when decorators are used
    • \n
  • any function whose definition is contained within five lines of code or fewer
    • \n
  • [✅] a small, anonymous function that can take any number of arguments but has only expression to evaluate
    • \n
\n

Reference

\n

Explanation: the lambda notation is basically an anonymous function that can take any number of arguments with only single expression (i.e, cannot be overloaded). It has been introducted in other programming languages, such as C++ and Java. The lambda notation allows programmers to \"bypass\" function declaration.

\n

Q71. What is the primary difference between lists and tuples?

\n
    \n
  • You can access a specifc element in a list by indexing to its position, but you cannot access a specific element in a tuple unless you iterate through the tuple
    • \n
  • [✅] Lists are mutable, meaning you can change the data that is inside them at any time. Tuples are immutable, meaning you cannot change the data that is inside them once you have created the tuple.
    • \n
  • Lists are immutable, meaning you cannot change the data that is inside them once you have created the list. Tuples are mutable, meaning you can change the data that is inside them at any time.
    • \n
  • Lists can hold several data types inside them at once, but tuples can only hold the same data type if multiple elements are present.
    • \n
\n

Q72. Which statement about static method is true?

\n
    \n
  • Static methods can be bound to either a class or an instance of a class.
    • \n
  • Static methods can access and modify the state of a class or an instance of a class.
    • \n
  • [✅] Static methods serve mostly as utility or helper methods, since they cannot access or modify a class's state.
    • \n
  • Static methods are called static because they always return None.
    • \n
\n

Q73. What does a generator return?

\n
    \n
  • None
    • \n
  • [✅] An iterable object
    • \n
  • A linked list data structure from a non-empty list
    • \n
  • All the keys of the given dictionary
    • \n
\n

Q74. What is the difference between class attributes and instance attributes?

\n
    \n
  • Instance attributes can be changed, but class attributes cannot be changed
    • \n
  • [✅] Class attributes are shared by all instances of the class. Instance attributes may be unique to just that instance
    • \n
  • There is no difference between class attributes and instance attributes
    • \n
  • Class attributes belong just to the class, not to instance of that class. Instance attributes are shared among all instances of a class
    • \n
\n

Q75. What is the correct syntax of creating an instance method?

\n
    \n
  • [ ]
    • \n
\n
def get_next_card():\n  # method body goes here\n
\n
    \n
  • [✅]
    • \n
\n
def get_next_card(self):\n  # method body goes here\n
\n
    \n
  • [ ]
    • \n
\n
def self.get_next_card():\n  # method body goes here\n
\n
    \n
  • [ ]
    • \n
\n
def self.get_next_card(self):\n  # method body goes here\n
\n

Q76. What is the correct way to call a function?

\n
    \n
  • [✅] get_max_num([57, 99, 31, 18])
    • \n
  • call.(get_max_num)
    • \n
  • def get_max_num([57, 99, 31, 18])
    • \n
  • call.get_max_num([57, 99, 31, 18])
    • \n
\n

Q77. How is comment created?

\n
    \n
  • -- This is a comment
    • \n
  • [✅] # This is a comment
    • \n
  • /_ This is a comment _\\
    • \n
  • // This is a comment
    • \n
\n

Q78. What is the correct syntax for replacing the string apple in the list with the string orange?

\n
    \n
  • orange = my_list[1]
    • \n
  • [✅] my_list[1] = 'orange'
    • \n
  • my_list['orange'] = 1
    • \n
  • my_list[1] == orange
    • \n
\n

Q79. What will happen if you use a while loop and forget to include logic that eventually causes the while loop to stop?

\n
    \n
  • Nothing will happen; your computer knows when to stop running the code in the while loop.
    • \n
  • You will get a KeyError.
    • \n
  • [✅] Your code will get stuck in an infinite loop.
    • \n
  • You will get a WhileLoopError.
    • \n
\n

Q80. Describe the functionality of a queue?

\n
    \n
  • [✅] A queue adds items to either end and removes items from either end.
    • \n
  • A queue adds items to the top and removes items from the top.
    • \n
  • A queue adds items to the top, and removes items from anywhere in, a list.
    • \n
  • A queue adds items to the top and removes items from anywhere in the queue.
    • \n
\n

Q81. Which choice is the most syntactically correct example of the conditional branching?

\n
    \n
  • [✅]
    • \n
\n
num_people = 5\n\nif num_people > 10:\n    print(\"There is a lot of people in the pool.\")\nelif num_people > 4:\n    print(\"There are some people in the pool.\")\nelse:\n    print(\"There is no one in the pool.\")\n
\n
    \n
  • [ ]
    • \n
\n
num_people = 5\n\nif num_people > 10:\n    print(\"There is a lot of people in the pool.\")\nif num_people > 4:\n    print(\"There are some people in the pool.\")\nelse:\n    print(\"There is no one in the pool.\")\n
\n
    \n
  • [ ]
    • \n
\n
num_people = 5\n\nif num_people > 10;\n    print(\"There is a lot of people in the pool.\")\nelif num_people > 4;\n    print(\"There are some people in the pool.\")\nelse;\n    print(\"There is no one in the pool.\")\n
\n
    \n
  • [ ]
    • \n
\n
if num_people > 10;\n    print(\"There is a lot of people in the pool.\")\nif num_people > 4;\n    print(\"There are some people in the pool.\")\nelse;\n    print(\"There is no one in the pool.\")\n
\n

This question seems to be an updated version of Question 19.

\n

Q82. How does defaultdict work?

\n
    \n
  • defaultdict will automatically create a dictionary for you that has keys which are the integers 0-10.
    • \n
  • defaultdict forces a dictionary to only accept keys that are of the types specified when you created the defaultdict (such as strings or integers).
    • \n
  • [✅] If you try to read from a defaultdict with a nonexistent key, a new default key-value pair will be created for you instead of throwing a KeyError.
    • \n
  • defaultdict stores a copy of a dictionary in memory that you can default to if the original gets unintentionally modified.
    • \n
\n

Updated version of Question 14.

\n

Q83. What is the correct syntax for adding a key called variety to the fruit_info dictionary that has a value of Red Delicious?

\n
    \n
  • fruit_info['variety'] == 'Red Delicious'
    • \n
  • [✅] fruit_info['variety'] = 'Red Delicious'
    • \n
  • red_delicious = fruit_info['variety']
    • \n
  • red_delicious == fruit_info['variety']
    • \n
\n

Q84. When would you use a while loop?

\n
    \n
  • when you want to minimize the use of strings in your code
    • \n
  • when you want to run code in one file while code in another file is also running
    • \n
  • [✅] when you want some code to continue running as long as some condition is true
    • \n
  • when you need to run two or more chunks of code at once within the same file
    • \n
\n

Simple Example

\n
i = 1\nwhile i<6:\n    print('Countdown:',i)\n    i = i + 1\n
\n

Q85. What is the correct syntax for defining an __init__() method that sets instance-specific attributes upon creation of a new class instance?

\n
    \n
  • [ ]
    • \n
\n
def __init__(self, attr1, attr2):\n    attr1 = attr1\n    attr2 = attr2\n
\n
    \n
  • [ ]
    • \n
\n
def __init__(attr1, attr2):\n    attr1 = attr1\n    attr2 = attr2\n
\n
    \n
  • [✅]
    • \n
\n
def __init__(self, attr1, attr2):\n    self.attr1 = attr1\n    self.attr2 = attr2\n
\n
    \n
  • [ ]
    • \n
\n
def __init__(attr1, attr2):\n    self.attr1 = attr1\n    self.attr2 = attr2\n
\n

Explanation: When instantiating a new object from a given class, the __init__() method will take both attr1 and attr2, and set its values to their corresponding object attribute, that's why the need of using self.attr1 = attr1 instead of attr1 = attr1.

\n

Q86. What would this recursive function print if it is called with no parameters?

\n
def count_recursive(n=1):\n    if n > 3:\n        return\n    print(n)\n\ncount_recursive(n + 1)\n
\n
    \n
  • [ ]
    • \n
\n
1\n1\n2\n2\n3\n3\n
\n
    \n
  • [ ]
    • \n
\n
3\n2\n1\n
\n
    \n
  • [ ]
    • \n
\n
3\n3\n2\n2\n1\n1\n
\n
    \n
  • [✅]
    • \n
\n
1\n2\n3\n
\n

Q87. In Python, when using sets, you use _ to calculate the intersection between two sets and _ to calculate the union.

\n
    \n
  • Intersect;union
    • \n
  • |; &
    • \n
  • [✅] &; |
    • \n
  • &&; ||
    • \n
\n

Q88. What will this code fragment return?

\n
import numpy as np\nnp.ones([1,2,3,4,5])\n
\n
    \n
  • It returns a 5x5 matric; each row will have the values 1,2,3,4,5.
    • \n
  • It returns an array with the values 1,2,3,4,5
    • \n
  • It returns five different square matrices filled with ones. The first is 1x1, the second 2x2, and so on to 5x5
    • \n
  • [✅] It returns a 5-dimensional array of size 1x2x3x4x5 filled with 1s.
    • \n
\n

Reference

\n

Q89. You encounter a FileNotFoundException while using just the filename in the open function. What might be the easiest solution?

\n
    \n
  • Make sure the file is on the system PATH
    • \n
  • Create a symbolic link to allow better access to the file
    • \n
  • [✅] Copy the file to the same directory as where the script is running from
    • \n
  • Add the path to the file to the PYTHONPATH environment variable
    • \n
\n

Q90. what will this command return?

\n
{x for x in range(100) if x%3 == 0}\n
\n
    \n
  • [✅] a set of all the multiples of 3 less then 100
    • \n
  • a set of all the number from 0 to 100 multiplied by 3
    • \n
  • a list of all the multiples of 3 less then 100
    • \n
  • a set of all the multiples of 3 less then 100 excluding 0
    • \n
\n

Q91. What does the // operator in Python 3 allow you to do?

\n
    \n
  • [✅] Perform integer division
    • \n
  • Perform operations on exponents
    • \n
  • Find the remainder of a division operation
    • \n
  • Perform floating point division
    • \n
\n

Q92. This code provides the _ of the list of numbers

\n
num_list = [21,13,19,3,11,5,18]\nnum_list.sort()\nnum_list[len(num_list)//2]\n
\n
    \n
  • mean
    • \n
  • mode
    • \n
  • [✅] median
    • \n
  • average
    • \n
\n

Q93. Which statement about the class methods is true?

\n
    \n
  • A class method holds all of the data for a particular class.
    • \n
  • [✅] A class method can modify the state of the class, but it cannot directly modify the state of an instance that inherits from that class.
    • \n
  • A class method is a regular function that belongs to a class, but it must return None
    • \n
  • A class method is similar to a regular function, but a class method does not take any arguments.
    • \n
\n

Q94. What file is imported to use dates in python?

\n
    \n
  • [✅] datetime
    • \n
  • dateday
    • \n
  • daytime
    • \n
  • timedate
    • \n
\n

Q95. What is the correct syntax for defining a class called Game?

\n
    \n
  • def Game(): pass
    • \n
  • def Game: pass
    • \n
  • [✅] class Game: pass
    • \n
  • class Game(): pass
    • \n
\n

reference here

\n

Q96. What does a class's init() method do?

\n
    \n
  • The init method makes classes aware of each other if more than one class is defined in a single code file.
    • \n
  • The init method is included to preserve backward compatibility from Python 3 to Python 2, but no longer needs to be used in Python 3.
    • \n
  • [✅] The init method is a constructor method that is called automatically whenever a new object is created from a class. It sets the initial state of a new object.
    • \n
  • The init method initializes any imports you may have included at the top of your file.
    • \n
\n

reference here

\n

Q97. What is the correct syntax for calling an instance method on a class named Game?

\n
    \n
  • my_game = Game(self) self.my_game.roll_dice()
    • \n
  • [✅] my_game = Game() self.my_game.roll_dice()
    • \n
  • my_game = Game() my_game.roll_dice()
    • \n
  • my_game = Game(self) my_game.roll_dice(self)
    • \n
\n

Q98. What is the output of this code? (NumPy has been imported as np.)?

\n
a = np.array([1,2,3,4])\nprint(a[[False, True, False, False]])\n
\n
    \n
  • {0,2}
    • \n
  • [✅] [2]
    • \n
  • {2}
    • \n
  • [0,2,0,0]
    • \n
\n

Q99. Suppose you have a string variable defined as y=”stuff;thing;junk;”. What would be the output from this code?

\n
Z = y.split(‘;’)\nlen(z)\n
\n
    \n
  • 17
    • \n
  • [✅] 4
    • \n
  • 0
    • \n
  • 3
    • \n
\n

explanation:

\n
y=”stuff;thing;junk”\n    len(z) ==> 3\n\ny=”stuff;thing;junk;”\n    len(z) ==> 4\n
\n

Q100. What is the output of this code?

\n
num_list = [1,2,3,4,5]\nnum_list.remove(2)\nprint(num_list)\n
\n
    \n
  • [1,2,4,5]
    • \n
  • [✅] [1,3,4,5]
    • \n
  • [3,4,5]
    • \n
  • [1,2,3]
    • \n
\n

explanation:

\n
num_list = [1,2,3,4,5]\n\nnum_list.pop(2)\n    [1,2,4,5]\n\nnum_list.remove(2)\n    [1,3,4,5]\n
\n

Q101. What is the correct syntax for creating an instance method?

\n
    \n
  • def get_next_card(): # method body goes here
    • \n
  • def self.get_next_card(): # method body goes here
    • \n
  • [✅] def get_next_card(self): # method body goes here
    • \n
  • def self.get_next_card(self): # method body goes here
    • \n
"},{"url":"/docs/quick-reference/git-bash/","relativePath":"docs/quick-reference/git-bash.md","relativeDir":"docs/quick-reference","base":"git-bash.md","name":"git-bash","frontmatter":{"title":"Git Bash","weight":0,"excerpt":"Git Bash","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Git Bash‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌\n\n

\n

At its core, Git is a set of command line utility programs that are designed to execute on a Unix style command-line environment. Modern operating systems like Linux and macOS both include built-in Unix command line terminals. This makes Linux and macOS complementary operating systems when working with Git. Microsoft Windows instead uses Windows command prompt, a non-Unix terminal environment.

\n

In Windows environments, Git is often packaged as part of higher level GUI applications. GUIs for Git may attempt to abstract and hide the underlying version control system primitives. This can be a great aid for Git beginners to rapidly contribute to a project. Once a project's collaboration requirements grow with other team members, it is critical to be aware of how the actual raw Git methods work. This is when it can be beneficial to drop a GUI version for the command line tools. Git Bash is offered to provide a terminal Git experience.

\n

What is Git Bash?

\n

Git Bash is an application for Microsoft Windows environments which provides an emulation layer for a Git command line experience. Bash is an acronym for Bourne Again Shell. A shell is a terminal application used to interface with an operating system through written commands. Bash is a popular default shell on Linux and macOS. Git Bash is a package that installs Bash, some common bash utilities, and Git on a Windows operating system.

\n

How to install Git Bash

\n

Git Bash comes included as part of the Git For Windows package. Download and install Git For Windows like other Windows applications. Once downloaded find the included .exe file and open to execute Git Bash.

\n

How to use Git Bash

\n

Git Bash has the same operations as a standard Bash experience. It will be helpful to review basic Bash usage. Advanced usage of Bash is outside the scope of this Git focused document.

\n

How to navigate folders

\n

The Bash command pwd is used to print the 'present working directory'. pwd is equivalent to executing cd on a DOS(Windows console host) terminal. This is the folder or path that the current Bash session resides in.

\n

The Bash command ls is used to 'list' contents of the current working directory. ls is equivalent to DIR on a Windows console host terminal.

\n

Both Bash and Windows console host have a cd command. cd is an acronym for 'Change Directory'. cd is invoked with an appended directory name. Executing cd will change the terminal sessions current working directory to the passed directory argument.

\n

Git Bash Commands

\n

Git Bash is packaged with additional commands that can be found in the /usr/bin directory of the Git Bash emulation. Git Bash can actually provide a fairly robust shell experience on Windows. Git Bash comes packaged with the following shell commands which are outside the scope of this document: Ssh, scp, cat, find.

\n

In addition the previously discussed set of Bash commands, Git Bash includes the full set of Git core commands discussed through out this site. Learn more at the corresponding documentation pages for git clone, git commit, git checkout, git push, and more.

"},{"url":"/docs/quick-reference/create-react-app/","relativePath":"docs/quick-reference/create-react-app.md","relativeDir":"docs/quick-reference","base":"create-react-app.md","name":"create-react-app","frontmatter":{"title":"Getting Started W Create React App","excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Getting Started with Create React App

\n

This project was bootstrapped with Create React App.

\n

Available Scripts

\n

In the project directory, you can run:

\n

yarn start

\n

Runs the app in the development mode.
\nOpen http://localhost:3000 to view it in the browser.

\n

The page will reload if you make edits.
\nYou will also see any lint errors in the console.

\n

yarn test

\n

Launches the test runner in the interactive watch mode.
\nSee the section about running tests for more information.

\n

yarn build

\n

Builds the app for production to the build folder.
\nIt correctly bundles React in production mode and optimizes the build for the best performance.

\n

The build is minified and the filenames include the hashes.
\nYour app is ready to be deployed!

\n

See the section about deployment for more information.

\n

yarn eject

\n

Note: this is a one-way operation. Once you eject, you can't go back!

\n

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

\n

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

\n

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

\n

Learn More

\n

You can learn more in the Create React App documentation.

\n

To learn React, check out the React documentation.

\n

Code Splitting

\n

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

\n

Analyzing the Bundle Size

\n

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

\n

Making a Progressive Web App

\n

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

\n

Advanced Configuration

\n

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

\n

Deployment

\n

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

\n

yarn build fails to minify

\n

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

"},{"url":"/docs/quick-reference/git-tricks/","relativePath":"docs/quick-reference/git-tricks.md","relativeDir":"docs/quick-reference","base":"git-tricks.md","name":"git-tricks","frontmatter":{"title":"Git Tricks","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Useful config 🔗\n\n

\n
    \n
  • branch.autosetuprebase=always (documentation): I find it easier to work with Git this way
    • \n
  • core.editor=emacs -nw (documentation): that's the editor that will be invoked every time Git needs to ask you about a commit message, when you're squashing commits, etc (and of course, you want emacs for that)
    • \n
  • commit.gpgsign=true (documentation) and gpg.program=gpg2 (documentation): you will need to set up these variables (and possibly a couple other) if you want to sign your commits to GitHub using GPG (recommended)
    • \n
\n

Safest way to “update” a local copy 🔗

\n

I find this sequence of commands the “safest” way to quickly “refresh” a clone of some remote repo, and at the same time check its status (where “safest” means “reducing to the minimum the probability of messing up things with conflicts, outdated branches, uncommitted changes, etc”):

\n
    \n
  • $ git branch -a displays information about all branches, both local and remote
    • \n
  • $ git pull -r fetches changes from the remote and “rebases the current branch on top of the upstream branch after fetching”
    • \n
  • $ git status shows you the status of your copy: whether there are new files, missing files, unstaged changes, or commits pending push
    • \n
  • $ git remote prune origin --dry tells you if any branch in the remote has been recently removed. (Submit the same command without the --dry part to actually remove those remotes from your local origin. That will still not remove local branches automatically, but you can do that yourself with git branch -d <BRANCH> if you see some branch is no longer necessary.)
    • \n
\n

You can have those four lines as an alias, or inside a script somewhere.

\n

Even better: if you set up the aliases suggested above, the whole thing becomes:

\n

You can then type it and run it just once, and, from that moment on, simply recover the line from your shell history.

\n

For example, if you're using Bash: press Ctrl+r, then start typing a distinctive chunk of the line (eg, r;, or st;gi); if you used it not too long ago for the last time, the entire line should appear, and you can simply press Enter.

\n

An alias to view the history of the repo 🔗

\n

Then, simply type

\n

for a colourful graph of commits, tags and branches.

"},{"url":"/docs/quick-reference/google-firebase/","relativePath":"docs/quick-reference/google-firebase.md","relativeDir":"docs/quick-reference","base":"google-firebase.md","name":"google-firebase","frontmatter":{"title":"Firebase (Firebasics)","weight":0,"excerpt":"Add Firebase to your JavaScript project Note","seo":{"title":"Add Firebase to your JavaScript project Note:","description":"Add Firebase to your JavaScript project Note:","robots":[],"extra":[]},"template":"docs"},"html":"

Add Firebase to your JavaScript project Note: Upgrading from the version 8 Firebase SDK? Check out our upgrade guide.#### Create a Firebase project Note: Using the v9 SDK is strongly recommended, especially for production apps. If you need support for other SDK management options, like window.firebase, see Upgrade from version 8 to the modular Web SDK.Note: You can skip this step if you are using a JavaScript framework CLI tool like the Angular CLI, Next.js, Vue CLI, or Create React App. Check out our guide on module bundling for more information.

\n

Follow this guide to use the Firebase JavaScript SDK in your web app or as a client for end-user access, for example, in a Node.js desktop or IoT application.

\n

Step 1: Create a Firebase project and register your app

\n

Before you can add Firebase to your JavaScript app, you need to create a Firebase project and register your app with that project. When you register your app with Firebase, you'll get a Firebase configuration object that you'll use to connect your app with your Firebase project resources.

\n

Visit Understand Firebase Projects to learn more about Firebase projects and best practices for adding apps to projects.

\n

If you don't already have a JavaScript project and just want to try out a Firebase product, you can download one of our quickstart samples.

\n

Step 2: Install the SDK and initialize Firebase

\n

This page describes setup instructions for version 9 of the Firebase JS SDK, which uses a JavaScript Module format.

\n

This workflow uses npm and requires module bundlers or JavaScript framework tooling because the v9 SDK is optimized to work with module bundlers to eliminate unused code (tree-shaking) and decrease SDK size.

\n
    \n
  1. Install Firebase using npm:
    2. \n
  2. \n

    Initialize Firebase in your app and create a Firebase App object:

    \n

    A Firebase App is a container-like object that stores common configuration and shares authentication across Firebase services. After you initialize a Firebase App object in your code, you can add and start using Firebase services.

    \n

    Do you use ESM and want to use browser modules? Replace all your

    \n

    import

    \n

    lines to use the following pattern:

    \n

    import { } from 'https://www.gstatic.com/firebasejs/9.0.2/firebase-SERVICE.js'

    \n

    (where

    \n

    SERVICE

    \n

    is an SDK name such as

    \n

    firebase-firestore

    \n

    ).

    \n

    Using browser modules is a quick way to get started, but we recommend using a module bundler for production.

    \n
    3. \n
\n

Step 3: Access Firebase in your app

\n

Firebase services (like Cloud Firestore, Authentication, Realtime Database, Remote Config, and more) are available to import within individual sub-packages.

\n

The example below shows how you could use the Cloud Firestore Lite SDK to retrieve a list of data.

\n

Step 4: Use a module bundler (webpack/Rollup) for size reduction

\n

The Firebase Web SDK is designed to work with module bundlers to remove any unused code (tree-shaking). We strongly recommend using this approach for production apps. Tools such as the Angular CLI, Next.js, Vue CLI, or Create React App automatically handle module bundling for libraries installed through npm and imported into your codebase.

\n

See our guide Using module bundlers with Firebase for more information.

"},{"url":"/docs/quick-reference/all-emojis/","relativePath":"docs/quick-reference/all-emojis.md","relativeDir":"docs/quick-reference","base":"all-emojis.md","name":"all-emojis","frontmatter":{"title":"All Emojis","weight":0,"excerpt":"All Emojis","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

All Emojis

\n

😀 😃 😄 😁 😆 😅 😂 🤣 🥲 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🥸 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹️ 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤫 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 🥱 😴 🤤 😪 😵 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑 🤠 😈 👿 👹 👺 🤡 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾

\n

Gestures and Body Parts

\n

👋 🤚 🖐 ✋ 🖖 👌 🤌 🤏 ✌️ 🤞 🤟 🤘 🤙 👈 👉 👆 🖕 👇 ☝️ 👍 👎 ✊ 👊 🤛 🤜 👏 🙌 👐 🤲 🤝 🙏 ✍️ 💅 🤳 💪 🦾 🦵 🦿 🦶 👣 👂 🦻 👃 🫀 🫁 🧠 🦷 🦴 👀 👁 👅 👄 💋 🩸

\n

People and Fantasy

\n

👶 👧 🧒 👦 👩 🧑 👨 👩‍🦱 🧑‍🦱 👨‍🦱 👩‍🦰 🧑‍🦰 👨‍🦰 👱‍♀️ 👱 👱‍♂️ 👩‍🦳 🧑‍🦳 👨‍🦳 👩‍🦲 🧑‍🦲 👨‍🦲 🧔 👵 🧓 👴 👲 👳‍♀️ 👳 👳‍♂️ 🧕 👮‍♀️ 👮 👮‍♂️ 👷‍♀️ 👷 👷‍♂️ 💂‍♀️ 💂 💂‍♂️ 🕵️‍♀️ 🕵️ 🕵️‍♂️ 👩‍⚕️ 🧑‍⚕️ 👨‍⚕️ 👩‍🌾 🧑‍🌾 👨‍🌾 👩‍🍳 🧑‍🍳 👨‍🍳 👩‍🎓 🧑‍🎓 👨‍🎓 👩‍🎤 🧑‍🎤 👨‍🎤 👩‍🏫 🧑‍🏫 👨‍🏫 👩‍🏭 🧑‍🏭 👨‍🏭 👩‍💻 🧑‍💻 👨‍💻 👩‍💼 🧑‍💼 👨‍💼 👩‍🔧 🧑‍🔧 👨‍🔧 👩‍🔬 🧑‍🔬 👨‍🔬 👩‍🎨 🧑‍🎨 👨‍🎨 👩‍🚒 🧑‍🚒 👨‍🚒 👩‍✈️ 🧑‍✈️ 👨‍✈️ 👩‍🚀 🧑‍🚀 👨‍🚀 👩‍⚖️ 🧑‍⚖️ 👨‍⚖️ 👰‍♀️ 👰 👰‍♂️ 🤵‍♀️ 🤵 🤵‍♂️ 👸 🤴 🥷 🦸‍♀️ 🦸 🦸‍♂️ 🦹‍♀️ 🦹 🦹‍♂️ 🤶 🧑‍🎄 🎅 🧙‍♀️ 🧙 🧙‍♂️ 🧝‍♀️ 🧝 🧝‍♂️ 🧛‍♀️ 🧛 🧛‍♂️ 🧟‍♀️ 🧟 🧟‍♂️ 🧞‍♀️ 🧞 🧞‍♂️ 🧜‍♀️ 🧜 🧜‍♂️ 🧚‍♀️ 🧚 🧚‍♂️ 👼 🤰 🤱 👩‍🍼 🧑‍🍼 👨‍🍼 🙇‍♀️ 🙇 🙇‍♂️ 💁‍♀️ 💁 💁‍♂️ 🙅‍♀️ 🙅 🙅‍♂️ 🙆‍♀️ 🙆 🙆‍♂️ 🙋‍♀️ 🙋 🙋‍♂️ 🧏‍♀️ 🧏 🧏‍♂️ 🤦‍♀️ 🤦 🤦‍♂️ 🤷‍♀️ 🤷 🤷‍♂️ 🙎‍♀️ 🙎 🙎‍♂️ 🙍‍♀️ 🙍 🙍‍♂️ 💇‍♀️ 💇 💇‍♂️ 💆‍♀️ 💆 💆‍♂️ 🧖‍♀️ 🧖 🧖‍♂️ 💅 🤳 💃 🕺 👯‍♀️ 👯 👯‍♂️ 🕴 👩‍🦽 🧑‍🦽 👨‍🦽 👩‍🦼 🧑‍🦼 👨‍🦼 🚶‍♀️ 🚶 🚶‍♂️ 👩‍🦯 🧑‍🦯 👨‍🦯 🧎‍♀️ 🧎 🧎‍♂️ 🏃‍♀️ 🏃 🏃‍♂️ 🧍‍♀️ 🧍 🧍‍♂️ 👭 🧑‍🤝‍🧑 👬 👫 👩‍❤️‍👩 💑 👨‍❤️‍👨 👩‍❤️‍👨 👩‍❤️‍💋‍👩 💏 👨‍❤️‍💋‍👨 👩‍❤️‍💋‍👨 👪 👨‍👩‍👦 👨‍👩‍👧 👨‍👩‍👧‍👦 👨‍👩‍👦‍👦 👨‍👩‍👧‍👧 👨‍👨‍👦 👨‍👨‍👧 👨‍👨‍👧‍👦 👨‍👨‍👦‍👦 👨‍👨‍👧‍👧 👩‍👩‍👦 👩‍👩‍👧 👩‍👩‍👧‍👦 👩‍👩‍👦‍👦 👩‍👩‍👧‍👧 👨‍👦 👨‍👦‍👦 👨‍👧 👨‍👧‍👦 👨‍👧‍👧 👩‍👦 👩‍👦‍👦 👩‍👧 👩‍👧‍👦 👩‍👧‍👧 🗣 👤 👥 🫂

\n

Clothing and Accessories

\n

🧳 🌂 ☂️ 🧵 🪡 🪢 🧶 👓 🕶 🥽 🥼 🦺 👔 👕 👖 🧣 🧤 🧥 🧦 👗 👘 🥻 🩴 🩱 🩲 🩳 👙 👚 👛 👜 👝 🎒 👞 👟 🥾 🥿 👠 👡 🩰 👢 👑 👒 🎩 🎓 🧢 ⛑ 🪖 💄 💍 💼

\n

Pale Emojis

\n

👋🏻 🤚🏻 🖐🏻 ✋🏻 🖖🏻 👌🏻 🤌🏻 🤏🏻 ✌🏻 🤞🏻 🤟🏻 🤘🏻 🤙🏻 👈🏻 👉🏻 👆🏻 🖕🏻 👇🏻 ☝🏻 👍🏻 👎🏻 ✊🏻 👊🏻 🤛🏻 🤜🏻 👏🏻 🙌🏻 👐🏻 🤲🏻 🙏🏻 ✍🏻 💅🏻 🤳🏻 💪🏻 🦵🏻 🦶🏻 👂🏻 🦻🏻 👃🏻 👶🏻 👧🏻 🧒🏻 👦🏻 👩🏻 🧑🏻 👨🏻 👩🏻‍🦱 🧑🏻‍🦱 👨🏻‍🦱 👩🏻‍🦰 🧑🏻‍🦰 👨🏻‍🦰 👱🏻‍♀️ 👱🏻 👱🏻‍♂️ 👩🏻‍🦳 🧑🏻‍🦳 👨🏻‍🦳 👩🏻‍🦲 🧑🏻‍🦲 👨🏻‍🦲 🧔🏻 👵🏻 🧓🏻 👴🏻 👲🏻 👳🏻‍♀️ 👳🏻 👳🏻‍♂️ 🧕🏻 👮🏻‍♀️ 👮🏻 👮🏻‍♂️ 👷🏻‍♀️ 👷🏻 👷🏻‍♂️ 💂🏻‍♀️ 💂🏻 💂🏻‍♂️ 🕵🏻‍♀️ 🕵🏻 🕵🏻‍♂️ 👩🏻‍⚕️ 🧑🏻‍⚕️ 👨🏻‍⚕️ 👩🏻‍🌾 🧑🏻‍🌾 👨🏻‍🌾 👩🏻‍🍳 🧑🏻‍🍳 👨🏻‍🍳 👩🏻‍🎓 🧑🏻‍🎓 👨🏻‍🎓 👩🏻‍🎤 🧑🏻‍🎤 👨🏻‍🎤 👩🏻‍🏫 🧑🏻‍🏫 👨🏻‍🏫 👩🏻‍🏭 🧑🏻‍🏭 👨🏻‍🏭 👩🏻‍💻 🧑🏻‍💻 👨🏻‍💻 👩🏻‍💼 🧑🏻‍💼 👨🏻‍💼 👩🏻‍🔧 🧑🏻‍🔧 👨🏻‍🔧 👩🏻‍🔬 🧑🏻‍🔬 👨🏻‍🔬 👩🏻‍🎨 🧑🏻‍🎨 👨🏻‍🎨 👩🏻‍🚒 🧑🏻‍🚒 👨🏻‍🚒 👩🏻‍✈️ 🧑🏻‍✈️ 👨🏻‍✈️ 👩🏻‍🚀 🧑🏻‍🚀 👨🏻‍🚀 👩🏻‍⚖️ 🧑🏻‍⚖️ 👨🏻‍⚖️ 👰🏻‍♀️ 👰🏻 👰🏻‍♂️ 🤵🏻‍♀️ 🤵🏻 🤵🏻‍♂️ 👸🏻 🤴🏻 🥷🏻 🦸🏻‍♀️ 🦸🏻 🦸🏻‍♂️ 🦹🏻‍♀️ 🦹🏻 🦹🏻‍♂️ 🤶🏻 🧑🏻‍🎄 🎅🏻 🧙🏻‍♀️ 🧙🏻 🧙🏻‍♂️ 🧝🏻‍♀️ 🧝🏻 🧝🏻‍♂️ 🧛🏻‍♀️ 🧛🏻 🧛🏻‍♂️ 🧜🏻‍♀️ 🧜🏻 🧜🏻‍♂️ 🧚🏻‍♀️ 🧚🏻 🧚🏻‍♂️ 👼🏻 🤰🏻 🤱🏻 👩🏻‍🍼 🧑🏻‍🍼 👨🏻‍🍼 🙇🏻‍♀️ 🙇🏻 🙇🏻‍♂️ 💁🏻‍♀️ 💁🏻 💁🏻‍♂️ 🙅🏻‍♀️ 🙅🏻 🙅🏻‍♂️ 🙆🏻‍♀️ 🙆🏻 🙆🏻‍♂️ 🙋🏻‍♀️ 🙋🏻 🙋🏻‍♂️ 🧏🏻‍♀️ 🧏🏻 🧏🏻‍♂️ 🤦🏻‍♀️ 🤦🏻 🤦🏻‍♂️ 🤷🏻‍♀️ 🤷🏻 🤷🏻‍♂️ 🙎🏻‍♀️ 🙎🏻 🙎🏻‍♂️ 🙍🏻‍♀️ 🙍🏻 🙍🏻‍♂️ 💇🏻‍♀️ 💇🏻 💇🏻‍♂️ 💆🏻‍♀️ 💆🏻 💆🏻‍♂️ 🧖🏻‍♀️ 🧖🏻 🧖🏻‍♂️ 💃🏻 🕺🏻 🕴🏻 👩🏻‍🦽 🧑🏻‍🦽 👨🏻‍🦽 👩🏻‍🦼 🧑🏻‍🦼 👨🏻‍🦼 🚶🏻‍♀️ 🚶🏻 🚶🏻‍♂️ 👩🏻‍🦯 🧑🏻‍🦯 👨🏻‍🦯 🧎🏻‍♀️ 🧎🏻 🧎🏻‍♂️ 🏃🏻‍♀️ 🏃🏻 🏃🏻‍♂️ 🧍🏻‍♀️ 🧍🏻 🧍🏻‍♂️ 👭🏻 🧑🏻‍🤝‍🧑🏻 👬🏻 👫🏻 🧗🏻‍♀️ 🧗🏻 🧗🏻‍♂️ 🏇🏻 🏂🏻 🏌🏻‍♀️ 🏌🏻 🏌🏻‍♂️ 🏄🏻‍♀️ 🏄🏻 🏄🏻‍♂️ 🚣🏻‍♀️ 🚣🏻 🚣🏻‍♂️ 🏊🏻‍♀️ 🏊🏻 🏊🏻‍♂️ ⛹🏻‍♀️ ⛹🏻 ⛹🏻‍♂️ 🏋🏻‍♀️ 🏋🏻 🏋🏻‍♂️ 🚴🏻‍♀️ 🚴🏻 🚴🏻‍♂️ 🚵🏻‍♀️ 🚵🏻 🚵🏻‍♂️ 🤸🏻‍♀️ 🤸🏻 🤸🏻‍♂️ 🤽🏻‍♀️ 🤽🏻 🤽🏻‍♂️ 🤾🏻‍♀️ 🤾🏻 🤾🏻‍♂️ 🤹🏻‍♀️ 🤹🏻 🤹🏻‍♂️ 🧘🏻‍♀️ 🧘🏻 🧘🏻‍♂️ 🛀🏻 🛌🏻

\n

Cream White Emojis

\n

👋🏼 🤚🏼 🖐🏼 ✋🏼 🖖🏼 👌🏼 🤌🏼 🤏🏼 ✌🏼 🤞🏼 🤟🏼 🤘🏼 🤙🏼 👈🏼 👉🏼 👆🏼 🖕🏼 👇🏼 ☝🏼 👍🏼 👎🏼 ✊🏼 👊🏼 🤛🏼 🤜🏼 👏🏼 🙌🏼 👐🏼 🤲🏼 🙏🏼 ✍🏼 💅🏼 🤳🏼 💪🏼 🦵🏼 🦶🏼 👂🏼 🦻🏼 👃🏼 👶🏼 👧🏼 🧒🏼 👦🏼 👩🏼 🧑🏼 👨🏼 👩🏼‍🦱 🧑🏼‍🦱 👨🏼‍🦱 👩🏼‍🦰 🧑🏼‍🦰 👨🏼‍🦰 👱🏼‍♀️ 👱🏼 👱🏼‍♂️ 👩🏼‍🦳 🧑🏼‍🦳 👨🏼‍🦳 👩🏼‍🦲 🧑🏼‍🦲 👨🏼‍🦲 🧔🏼 👵🏼 🧓🏼 👴🏼 👲🏼 👳🏼‍♀️ 👳🏼 👳🏼‍♂️ 🧕🏼 👮🏼‍♀️ 👮🏼 👮🏼‍♂️ 👷🏼‍♀️ 👷🏼 👷🏼‍♂️ 💂🏼‍♀️ 💂🏼 💂🏼‍♂️ 🕵🏼‍♀️ 🕵🏼 🕵🏼‍♂️ 👩🏼‍⚕️ 🧑🏼‍⚕️ 👨🏼‍⚕️ 👩🏼‍🌾 🧑🏼‍🌾 👨🏼‍🌾 👩🏼‍🍳 🧑🏼‍🍳 👨🏼‍🍳 👩🏼‍🎓 🧑🏼‍🎓 👨🏼‍🎓 👩🏼‍🎤 🧑🏼‍🎤 👨🏼‍🎤 👩🏼‍🏫 🧑🏼‍🏫 👨🏼‍🏫 👩🏼‍🏭 🧑🏼‍🏭 👨🏼‍🏭 👩🏼‍💻 🧑🏼‍💻 👨🏼‍💻 👩🏼‍💼 🧑🏼‍💼 👨🏼‍💼 👩🏼‍🔧 🧑🏼‍🔧 👨🏼‍🔧 👩🏼‍🔬 🧑🏼‍🔬 👨🏼‍🔬 👩🏼‍🎨 🧑🏼‍🎨 👨🏼‍🎨 👩🏼‍🚒 🧑🏼‍🚒 👨🏼‍🚒 👩🏼‍✈️ 🧑🏼‍✈️ 👨🏼‍✈️ 👩🏼‍🚀 🧑🏼‍🚀 👨🏼‍🚀 👩🏼‍⚖️ 🧑🏼‍⚖️ 👨🏼‍⚖️ 👰🏼‍♀️ 👰🏼 👰🏼‍♂️ 🤵🏼‍♀️ 🤵🏼 🤵🏼‍♂️ 👸🏼 🤴🏼 🥷🏼 🦸🏼‍♀️ 🦸🏼 🦸🏼‍♂️ 🦹🏼‍♀️ 🦹🏼 🦹🏼‍♂️ 🤶🏼 🧑🏼‍🎄 🎅🏼 🧙🏼‍♀️ 🧙🏼 🧙🏼‍♂️ 🧝🏼‍♀️ 🧝🏼 🧝🏼‍♂️ 🧛🏼‍♀️ 🧛🏼 🧛🏼‍♂️ 🧜🏼‍♀️ 🧜🏼 🧜🏼‍♂️ 🧚🏼‍♀️ 🧚🏼 🧚🏼‍♂️ 👼🏼 🤰🏼 🤱🏼 👩🏼‍🍼 🧑🏼‍🍼 👨🏼‍🍼 🙇🏼‍♀️ 🙇🏼 🙇🏼‍♂️ 💁🏼‍♀️ 💁🏼 💁🏼‍♂️ 🙅🏼‍♀️ 🙅🏼 🙅🏼‍♂️ 🙆🏼‍♀️ 🙆🏼 🙆🏼‍♂️ 🙋🏼‍♀️ 🙋🏼 🙋🏼‍♂️ 🧏🏼‍♀️ 🧏🏼 🧏🏼‍♂️ 🤦🏼‍♀️ 🤦🏼 🤦🏼‍♂️ 🤷🏼‍♀️ 🤷🏼 🤷🏼‍♂️ 🙎🏼‍♀️ 🙎🏼 🙎🏼‍♂️ 🙍🏼‍♀️ 🙍🏼 🙍🏼‍♂️ 💇🏼‍♀️ 💇🏼 💇🏼‍♂️ 💆🏼‍♀️ 💆🏼 💆🏼‍♂️ 🧖🏼‍♀️ 🧖🏼 🧖🏼‍♂️ 💃🏼 🕺🏼 🕴🏼 👩🏼‍🦽 🧑🏼‍🦽 👨🏼‍🦽 👩🏼‍🦼 🧑🏼‍🦼 👨🏼‍🦼 🚶🏼‍♀️ 🚶🏼 🚶🏼‍♂️ 👩🏼‍🦯 🧑🏼‍🦯 👨🏼‍🦯 🧎🏼‍♀️ 🧎🏼 🧎🏼‍♂️ 🏃🏼‍♀️ 🏃🏼 🏃🏼‍♂️ 🧍🏼‍♀️ 🧍🏼 🧍🏼‍♂️ 👭🏼 🧑🏼‍🤝‍🧑🏼 👬🏼 👫🏼 🧗🏼‍♀️ 🧗🏼 🧗🏼‍♂️ 🏇🏼 🏂🏼 🏌🏼‍♀️ 🏌🏼 🏌🏼‍♂️ 🏄🏼‍♀️ 🏄🏼 🏄🏼‍♂️ 🚣🏼‍♀️ 🚣🏼 🚣🏼‍♂️ 🏊🏼‍♀️ 🏊🏼 🏊🏼‍♂️ ⛹🏼‍♀️ ⛹🏼 ⛹🏼‍♂️ 🏋🏼‍♀️ 🏋🏼 🏋🏼‍♂️ 🚴🏼‍♀️ 🚴🏼 🚴🏼‍♂️ 🚵🏼‍♀️ 🚵🏼 🚵🏼‍♂️ 🤸🏼‍♀️ 🤸🏼 🤸🏼‍♂️ 🤽🏼‍♀️ 🤽🏼 🤽🏼‍♂️ 🤾🏼‍♀️ 🤾🏼 🤾🏼‍♂️ 🤹🏼‍♀️ 🤹🏼 🤹🏼‍♂️ 🧘🏼‍♀️ 🧘🏼 🧘🏼‍♂️ 🛀🏼 🛌🏼

\n

Brown Emojis

\n

👋🏽 🤚🏽 🖐🏽 ✋🏽 🖖🏽 👌🏽 🤌🏽 🤏🏽 ✌🏽 🤞🏽 🤟🏽 🤘🏽 🤙🏽 👈🏽 👉🏽 👆🏽 🖕🏽 👇🏽 ☝🏽 👍🏽 👎🏽 ✊🏽 👊🏽 🤛🏽 🤜🏽 👏🏽 🙌🏽 👐🏽 🤲🏽 🙏🏽 ✍🏽 💅🏽 🤳🏽 💪🏽 🦵🏽 🦶🏽 👂🏽 🦻🏽 👃🏽 👶🏽 👧🏽 🧒🏽 👦🏽 👩🏽 🧑🏽 👨🏽 👩🏽‍🦱 🧑🏽‍🦱 👨🏽‍🦱 👩🏽‍🦰 🧑🏽‍🦰 👨🏽‍🦰 👱🏽‍♀️ 👱🏽 👱🏽‍♂️ 👩🏽‍🦳 🧑🏽‍🦳 👨🏽‍🦳 👩🏽‍🦲 🧑🏽‍🦲 👨🏽‍🦲 🧔🏽 👵🏽 🧓🏽 👴🏽 👲🏽 👳🏽‍♀️ 👳🏽 👳🏽‍♂️ 🧕🏽 👮🏽‍♀️ 👮🏽 👮🏽‍♂️ 👷🏽‍♀️ 👷🏽 👷🏽‍♂️ 💂🏽‍♀️ 💂🏽 💂🏽‍♂️ 🕵🏽‍♀️ 🕵🏽 🕵🏽‍♂️ 👩🏽‍⚕️ 🧑🏽‍⚕️ 👨🏽‍⚕️ 👩🏽‍🌾 🧑🏽‍🌾 👨🏽‍🌾 👩🏽‍🍳 🧑🏽‍🍳 👨🏽‍🍳 👩🏽‍🎓 🧑🏽‍🎓 👨🏽‍🎓 👩🏽‍🎤 🧑🏽‍🎤 👨🏽‍🎤 👩🏽‍🏫 🧑🏽‍🏫 👨🏽‍🏫 👩🏽‍🏭 🧑🏽‍🏭 👨🏽‍🏭 👩🏽‍💻 🧑🏽‍💻 👨🏽‍💻 👩🏽‍💼 🧑🏽‍💼 👨🏽‍💼 👩🏽‍🔧 🧑🏽‍🔧 👨🏽‍🔧 👩🏽‍🔬 🧑🏽‍🔬 👨🏽‍🔬 👩🏽‍🎨 🧑🏽‍🎨 👨🏽‍🎨 👩🏽‍🚒 🧑🏽‍🚒 👨🏽‍🚒 👩🏽‍✈️ 🧑🏽‍✈️ 👨🏽‍✈️ 👩🏽‍🚀 🧑🏽‍🚀 👨🏽‍🚀 👩🏽‍⚖️ 🧑🏽‍⚖️ 👨🏽‍⚖️ 👰🏽‍♀️ 👰🏽 👰🏽‍♂️ 🤵🏽‍♀️ 🤵🏽 🤵🏽‍♂️ 👸🏽 🤴🏽 🥷🏽 🦸🏽‍♀️ 🦸🏽 🦸🏽‍♂️ 🦹🏽‍♀️ 🦹🏽 🦹🏽‍♂️ 🤶🏽 🧑🏽‍🎄 🎅🏽 🧙🏽‍♀️ 🧙🏽 🧙🏽‍♂️ 🧝🏽‍♀️ 🧝🏽 🧝🏽‍♂️ 🧛🏽‍♀️ 🧛🏽 🧛🏽‍♂️ 🧜🏽‍♀️ 🧜🏽 🧜🏽‍♂️ 🧚🏽‍♀️ 🧚🏽 🧚🏽‍♂️ 👼🏽 🤰🏽 🤱🏽 👩🏽‍🍼 🧑🏽‍🍼 👨🏽‍🍼 🙇🏽‍♀️ 🙇🏽 🙇🏽‍♂️ 💁🏽‍♀️ 💁🏽 💁🏽‍♂️ 🙅🏽‍♀️ 🙅🏽 🙅🏽‍♂️ 🙆🏽‍♀️ 🙆🏽 🙆🏽‍♂️ 🙋🏽‍♀️ 🙋🏽 🙋🏽‍♂️ 🧏🏽‍♀️ 🧏🏽 🧏🏽‍♂️ 🤦🏽‍♀️ 🤦🏽 🤦🏽‍♂️ 🤷🏽‍♀️ 🤷🏽 🤷🏽‍♂️ 🙎🏽‍♀️ 🙎🏽 🙎🏽‍♂️ 🙍🏽‍♀️ 🙍🏽 🙍🏽‍♂️ 💇🏽‍♀️ 💇🏽 💇🏽‍♂️ 💆🏽‍♀️ 💆🏽 💆🏽‍♂️ 🧖🏽‍♀️ 🧖🏽 🧖🏽‍♂️ 💃🏽 🕺🏽 🕴🏽 👩🏽‍🦽 🧑🏽‍🦽 👨🏽‍🦽 👩🏽‍🦼 🧑🏽‍🦼 👨🏽‍🦼 🚶🏽‍♀️ 🚶🏽 🚶🏽‍♂️ 👩🏽‍🦯 🧑🏽‍🦯 👨🏽‍🦯 🧎🏽‍♀️ 🧎🏽 🧎🏽‍♂️ 🏃🏽‍♀️ 🏃🏽 🏃🏽‍♂️ 🧍🏽‍♀️ 🧍🏽 🧍🏽‍♂️ 👭🏽 🧑🏽‍🤝‍🧑🏽 👬🏽 👫🏽 🧗🏽‍♀️ 🧗🏽 🧗🏽‍♂️ 🏇🏽 🏂🏽 🏌🏽‍♀️ 🏌🏽 🏌🏽‍♂️ 🏄🏽‍♀️ 🏄🏽 🏄🏽‍♂️ 🚣🏽‍♀️ 🚣🏽 🚣🏽‍♂️ 🏊🏽‍♀️ 🏊🏽 🏊🏽‍♂️ ⛹🏽‍♀️ ⛹🏽 ⛹🏽‍♂️ 🏋🏽‍♀️ 🏋🏽 🏋🏽‍♂️ 🚴🏽‍♀️ 🚴🏽 🚴🏽‍♂️ 🚵🏽‍♀️ 🚵🏽 🚵🏽‍♂️ 🤸🏽‍♀️ 🤸🏽 🤸🏽‍♂️ 🤽🏽‍♀️ 🤽🏽 🤽🏽‍♂️ 🤾🏽‍♀️ 🤾🏽 🤾🏽‍♂️ 🤹🏽‍♀️ 🤹🏽 🤹🏽‍♂️ 🧘🏽‍♀️ 🧘🏽 🧘🏽‍♂️ 🛀🏽 🛌🏽

\n

Dark Brown Emojis

\n

👋🏾 🤚🏾 🖐🏾 ✋🏾 🖖🏾 👌🏾 🤌🏾 🤏🏾 ✌🏾 🤞🏾 🤟🏾 🤘🏾 🤙🏾 👈🏾 👉🏾 👆🏾 🖕🏾 👇🏾 ☝🏾 👍🏾 👎🏾 ✊🏾 👊🏾 🤛🏾 🤜🏾 👏🏾 🙌🏾 👐🏾 🤲🏾 🙏🏾 ✍🏾 💅🏾 🤳🏾 💪🏾 🦵🏾 🦶🏾 👂🏾 🦻🏾 👃🏾 👶🏾 👧🏾 🧒🏾 👦🏾 👩🏾 🧑🏾 👨🏾 👩🏾‍🦱 🧑🏾‍🦱 👨🏾‍🦱 👩🏾‍🦰 🧑🏾‍🦰 👨🏾‍🦰 👱🏾‍♀️ 👱🏾 👱🏾‍♂️ 👩🏾‍🦳 🧑🏾‍🦳 👨🏾‍🦳 👩🏾‍🦲 🧑🏾‍🦲 👨🏾‍🦲 🧔🏾 👵🏾 🧓🏾 👴🏾 👲🏾 👳🏾‍♀️ 👳🏾 👳🏾‍♂️ 🧕🏾 👮🏾‍♀️ 👮🏾 👮🏾‍♂️ 👷🏾‍♀️ 👷🏾 👷🏾‍♂️ 💂🏾‍♀️ 💂🏾 💂🏾‍♂️ 🕵🏾‍♀️ 🕵🏾 🕵🏾‍♂️ 👩🏾‍⚕️ 🧑🏾‍⚕️ 👨🏾‍⚕️ 👩🏾‍🌾 🧑🏾‍🌾 👨🏾‍🌾 👩🏾‍🍳 🧑🏾‍🍳 👨🏾‍🍳 👩🏾‍🎓 🧑🏾‍🎓 👨🏾‍🎓 👩🏾‍🎤 🧑🏾‍🎤 👨🏾‍🎤 👩🏾‍🏫 🧑🏾‍🏫 👨🏾‍🏫 👩🏾‍🏭 🧑🏾‍🏭 👨🏾‍🏭 👩🏾‍💻 🧑🏾‍💻 👨🏾‍💻 👩🏾‍💼 🧑🏾‍💼 👨🏾‍💼 👩🏾‍🔧 🧑🏾‍🔧 👨🏾‍🔧 👩🏾‍🔬 🧑🏾‍🔬 👨🏾‍🔬 👩🏾‍🎨 🧑🏾‍🎨 👨🏾‍🎨 👩🏾‍🚒 🧑🏾‍🚒 👨🏾‍🚒 👩🏾‍✈️ 🧑🏾‍✈️ 👨🏾‍✈️ 👩🏾‍🚀 🧑🏾‍🚀 👨🏾‍🚀 👩🏾‍⚖️ 🧑🏾‍⚖️ 👨🏾‍⚖️ 👰🏾‍♀️ 👰🏾 👰🏾‍♂️ 🤵🏾‍♀️ 🤵🏾 🤵🏾‍♂️ 👸🏾 🤴🏾 🥷🏾 🦸🏾‍♀️ 🦸🏾 🦸🏾‍♂️ 🦹🏾‍♀️ 🦹🏾 🦹🏾‍♂️ 🤶🏾 🧑🏾‍🎄 🎅🏾 🧙🏾‍♀️ 🧙🏾 🧙🏾‍♂️ 🧝🏾‍♀️ 🧝🏾 🧝🏾‍♂️ 🧛🏾‍♀️ 🧛🏾 🧛🏾‍♂️ 🧜🏾‍♀️ 🧜🏾 🧜🏾‍♂️ 🧚🏾‍♀️ 🧚🏾 🧚🏾‍♂️ 👼🏾 🤰🏾 🤱🏾 👩🏾‍🍼 🧑🏾‍🍼 👨🏾‍🍼 🙇🏾‍♀️ 🙇🏾 🙇🏾‍♂️ 💁🏾‍♀️ 💁🏾 💁🏾‍♂️ 🙅🏾‍♀️ 🙅🏾 🙅🏾‍♂️ 🙆🏾‍♀️ 🙆🏾 🙆🏾‍♂️ 🙋🏾‍♀️ 🙋🏾 🙋🏾‍♂️ 🧏🏾‍♀️ 🧏🏾 🧏🏾‍♂️ 🤦🏾‍♀️ 🤦🏾 🤦🏾‍♂️ 🤷🏾‍♀️ 🤷🏾 🤷🏾‍♂️ 🙎🏾‍♀️ 🙎🏾 🙎🏾‍♂️ 🙍🏾‍♀️ 🙍🏾 🙍🏾‍♂️ 💇🏾‍♀️ 💇🏾 💇🏾‍♂️ 💆🏾‍♀️ 💆🏾 💆🏾‍♂️ 🧖🏾‍♀️ 🧖🏾 🧖🏾‍♂️ 💃🏾 🕺🏾 🕴🏿 👩🏾‍🦽 🧑🏾‍🦽 👨🏾‍🦽 👩🏾‍🦼 🧑🏾‍🦼 👨🏾‍🦼 🚶🏾‍♀️ 🚶🏾 🚶🏾‍♂️ 👩🏾‍🦯 🧑🏾‍🦯 👨🏾‍🦯 🧎🏾‍♀️ 🧎🏾 🧎🏾‍♂️ 🏃🏾‍♀️ 🏃🏾 🏃🏾‍♂️ 🧍🏾‍♀️ 🧍🏾 🧍🏾‍♂️ 👭🏾 🧑🏾‍🤝‍🧑🏾 👬🏾 👫🏾 🧗🏾‍♀️ 🧗🏾 🧗🏾‍♂️ 🏇🏾 🏂🏾 🏌🏾‍♀️ 🏌🏾 🏌🏾‍♂️ 🏄🏾‍♀️ 🏄🏾 🏄🏾‍♂️ 🚣🏾‍♀️ 🚣🏾 🚣🏾‍♂️ 🏊🏾‍♀️ 🏊🏾 🏊🏾‍♂️ ⛹🏾‍♀️ ⛹🏾 ⛹🏾‍♂️ 🏋🏾‍♀️ 🏋🏾 🏋🏾‍♂️ 🚴🏾‍♀️ 🚴🏾 🚴🏾‍♂️ 🚵🏾‍♀️ 🚵🏾 🚵🏾‍♂️ 🤸🏾‍♀️ 🤸🏾 🤸🏾‍♂️ 🤽🏾‍♀️ 🤽🏾 🤽🏾‍♂️ 🤾🏾‍♀️ 🤾🏾 🤾🏾‍♂️ 🤹🏾‍♀️ 🤹🏾 🤹🏾‍♂️ 🧘🏾‍♀️ 🧘🏾 🧘🏾‍♂️ 🛀🏾 🛌🏾

\n

Black Emojis

\n

👋🏿 🤚🏿 🖐🏿 ✋🏿 🖖🏿 👌🏿 🤌🏿 🤏🏿 ✌🏿 🤞🏿 🤟🏿 🤘🏿 🤙🏿 👈🏿 👉🏿 👆🏿 🖕🏿 👇🏿 ☝🏿 👍🏿 👎🏿 ✊🏿 👊🏿 🤛🏿 🤜🏿 👏🏿 🙌🏿 👐🏿 🤲🏿 🙏🏿 ✍🏿 💅🏿 🤳🏿 💪🏿 🦵🏿 🦶🏿 👂🏿 🦻🏿 👃🏿 👶🏿 👧🏿 🧒🏿 👦🏿 👩🏿 🧑🏿 👨🏿 👩🏿‍🦱 🧑🏿‍🦱 👨🏿‍🦱 👩🏿‍🦰 🧑🏿‍🦰 👨🏿‍🦰 👱🏿‍♀️ 👱🏿 👱🏿‍♂️ 👩🏿‍🦳 🧑🏿‍🦳 👨🏿‍🦳 👩🏿‍🦲 🧑🏿‍🦲 👨🏿‍🦲 🧔🏿 👵🏿 🧓🏿 👴🏿 👲🏿 👳🏿‍♀️ 👳🏿 👳🏿‍♂️ 🧕🏿 👮🏿‍♀️ 👮🏿 👮🏿‍♂️ 👷🏿‍♀️ 👷🏿 👷🏿‍♂️ 💂🏿‍♀️ 💂🏿 💂🏿‍♂️ 🕵🏿‍♀️ 🕵🏿 🕵🏿‍♂️ 👩🏿‍⚕️ 🧑🏿‍⚕️ 👨🏿‍⚕️ 👩🏿‍🌾 🧑🏿‍🌾 👨🏿‍🌾 👩🏿‍🍳 🧑🏿‍🍳 👨🏿‍🍳 👩🏿‍🎓 🧑🏿‍🎓 👨🏿‍🎓 👩🏿‍🎤 🧑🏿‍🎤 👨🏿‍🎤 👩🏿‍🏫 🧑🏿‍🏫 👨🏿‍🏫 👩🏿‍🏭 🧑🏿‍🏭 👨🏿‍🏭 👩🏿‍💻 🧑🏿‍💻 👨🏿‍💻 👩🏿‍💼 🧑🏿‍💼 👨🏿‍💼 👩🏿‍🔧 🧑🏿‍🔧 👨🏿‍🔧 👩🏿‍🔬 🧑🏿‍🔬 👨🏿‍🔬 👩🏿‍🎨 🧑🏿‍🎨 👨🏿‍🎨 👩🏿‍🚒 🧑🏿‍🚒 👨🏿‍🚒 👩🏿‍✈️ 🧑🏿‍✈️ 👨🏿‍✈️ 👩🏿‍🚀 🧑🏿‍🚀 👨🏿‍🚀 👩🏿‍⚖️ 🧑🏿‍⚖️ 👨🏿‍⚖️ 👰🏿‍♀️ 👰🏿 👰🏿‍♂️ 🤵🏿‍♀️ 🤵🏿 🤵🏿‍♂️ 👸🏿 🤴🏿 🥷🏿 🦸🏿‍♀️ 🦸🏿 🦸🏿‍♂️ 🦹🏿‍♀️ 🦹🏿 🦹🏿‍♂️ 🤶🏿 🧑🏿‍🎄 🎅🏿 🧙🏿‍♀️ 🧙🏿 🧙🏿‍♂️ 🧝🏿‍♀️ 🧝🏿 🧝🏿‍♂️ 🧛🏿‍♀️ 🧛🏿 🧛🏿‍♂️ 🧜🏿‍♀️ 🧜🏿 🧜🏿‍♂️ 🧚🏿‍♀️ 🧚🏿 🧚🏿‍♂️ 👼🏿 🤰🏿 🤱🏿 👩🏿‍🍼 🧑🏿‍🍼 👨🏿‍🍼 🙇🏿‍♀️ 🙇🏿 🙇🏿‍♂️ 💁🏿‍♀️ 💁🏿 💁🏿‍♂️ 🙅🏿‍♀️ 🙅🏿 🙅🏿‍♂️ 🙆🏿‍♀️ 🙆🏿 🙆🏿‍♂️ 🙋🏿‍♀️ 🙋🏿 🙋🏿‍♂️ 🧏🏿‍♀️ 🧏🏿 🧏🏿‍♂️ 🤦🏿‍♀️ 🤦🏿 🤦🏿‍♂️ 🤷🏿‍♀️ 🤷🏿 🤷🏿‍♂️ 🙎🏿‍♀️ 🙎🏿 🙎🏿‍♂️ 🙍🏿‍♀️ 🙍🏿 🙍🏿‍♂️ 💇🏿‍♀️ 💇🏿 💇🏿‍♂️ 💆🏿‍♀️ 💆🏿 💆🏿‍♂️ 🧖🏿‍♀️ 🧖🏿 🧖🏿‍♂️ 💃🏿 🕺🏿 🕴🏿 👩🏿‍🦽 🧑🏿‍🦽 👨🏿‍🦽 👩🏿‍🦼 🧑🏿‍🦼 👨🏿‍🦼 🚶🏿‍♀️ 🚶🏿 🚶🏿‍♂️ 👩🏿‍🦯 🧑🏿‍🦯 👨🏿‍🦯 🧎🏿‍♀️ 🧎🏿 🧎🏿‍♂️ 🏃🏿‍♀️ 🏃🏿 🏃🏿‍♂️ 🧍🏿‍♀️ 🧍🏿 🧍🏿‍♂️ 👭🏿 🧑🏿‍🤝‍🧑🏿 👬🏿 👫🏿 🧗🏿‍♀️ 🧗🏿 🧗🏿‍♂️ 🏇🏿 🏂🏿 🏌🏿‍♀️ 🏌🏿 🏌🏿‍♂️ 🏄🏿‍♀️ 🏄🏿 🏄🏿‍♂️ 🚣🏿‍♀️ 🚣🏿 🚣🏿‍♂️ 🏊🏿‍♀️ 🏊🏿 🏊🏿‍♂️ ⛹🏿‍♀️ ⛹🏿 ⛹🏿‍♂️ 🏋🏿‍♀️ 🏋🏿 🏋🏿‍♂️ 🚴🏿‍♀️ 🚴🏿 🚴🏿‍♂️ 🚵🏿‍♀️ 🚵🏿 🚵🏿‍♂️ 🤸🏿‍♀️ 🤸🏿 🤸🏿‍♂️ 🤽🏿‍♀️ 🤽🏿 🤽🏿‍♂️ 🤾🏿‍♀️ 🤾🏿 🤾🏿‍♂️ 🤹🏿‍♀️ 🤹🏿 🤹🏿‍♂️ 🧘🏿‍♀️ 🧘🏿 🧘🏿‍♂️ 🛀🏿 🛌🏿

\n

Animals & Nature

\n

🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐻‍❄️ 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🐔 🐧 🐦 🐤 🐣 🐥 🦆 🦅 🦉 🦇 🐺 🐗 🐴 🦄 🐝 🪱 🐛 🦋 🐌 🐞 🐜 🪰 🪲 🪳 🦟 🦗 🕷 🕸 🦂 🐢 🐍 🦎 🦖 🦕 🐙 🦑 🦐 🦞 🦀 🐡 🐠 🐟 🐬 🐳 🐋 🦈 🐊 🐅 🐆 🦓 🦍 🦧 🦣 🐘 🦛 🦏 🐪 🐫 🦒 🦘 🦬 🐃 🐂 🐄 🐎 🐖 🐏 🐑 🦙 🐐 🦌 🐕 🐩 🦮 🐕‍🦺 🐈 🐈‍⬛ 🪶 🐓 🦃 🦤 🦚 🦜 🦢 🦩 🕊 🐇 🦝 🦨 🦡 🦫 🦦 🦥 🐁 🐀 🐿 🦔 🐾 🐉 🐲 🌵 🎄 🌲 🌳 🌴 🪵 🌱 🌿 ☘️ 🍀 🎍 🪴 🎋 🍃 🍂 🍁 🍄 🐚 🪨 🌾 💐 🌷 🌹 🥀 🌺 🌸 🌼 🌻 🌞 🌝 🌛 🌜 🌚 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 🌙 🌎 🌍 🌏 🪐 💫 ⭐️ 🌟 ✨ ⚡️ ☄️ 💥 🔥 🌪 🌈 ☀️ 🌤 ⛅️ 🌥 ☁️ 🌦 🌧 ⛈ 🌩 🌨 ❄️ ☃️ ⛄️ 🌬 💨 💧 💦 ☔️ ☂️ 🌊 🌫

\n

Food & Drink

\n

🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🍆 🥑 🥦 🥬 🥒 🌶 🫑 🌽 🥕 🫒 🧄 🧅 🥔 🍠 🥐 🥯 🍞 🥖 🥨 🧀 🥚 🍳 🧈 🥞 🧇 🥓 🥩 🍗 🍖 🦴 🌭 🍔 🍟 🍕 🫓 🥪 🥙 🧆 🌮 🌯 🫔 🥗 🥘 🫕 🥫 🍝 🍜 🍲 🍛 🍣 🍱 🥟 🦪 🍤 🍙 🍚 🍘 🍥 🥠 🥮 🍢 🍡 🍧 🍨 🍦 🥧 🧁 🍰 🎂 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🌰 🥜 🍯 🥛 🍼 🫖 ☕️ 🍵 🧃 🥤 🧋 🍶 🍺 🍻 🥂 🍷 🥃 🍸 🍹 🧉 🍾 🧊 🥄 🍴 🍽 🥣 🥡 🥢 🧂

\n

Activity and Sports

\n

⚽️ 🏀 🏈 ⚾️ 🥎 🎾 🏐 🏉 🥏 🎱 🪀 🏓 🏸 🏒 🏑 🥍 🏏 🪃 🥅 ⛳️ 🪁 🏹 🎣 🤿 🥊 🥋 🎽 🛹 🛼 🛷 ⛸ 🥌 🎿 ⛷ 🏂 🪂 🏋️‍♀️ 🏋️ 🏋️‍♂️ 🤼‍♀️ 🤼 🤼‍♂️ 🤸‍♀️ 🤸 🤸‍♂️ ⛹️‍♀️ ⛹️ ⛹️‍♂️ 🤺 🤾‍♀️ 🤾 🤾‍♂️ 🏌️‍♀️ 🏌️ 🏌️‍♂️ 🏇 🧘‍♀️ 🧘 🧘‍♂️ 🏄‍♀️ 🏄 🏄‍♂️ 🏊‍♀️ 🏊 🏊‍♂️ 🤽‍♀️ 🤽 🤽‍♂️ 🚣‍♀️ 🚣 🚣‍♂️ 🧗‍♀️ 🧗 🧗‍♂️ 🚵‍♀️ 🚵 🚵‍♂️ 🚴‍♀️ 🚴 🚴‍♂️ 🏆 🥇 🥈 🥉 🏅 🎖 🏵 🎗 🎫 🎟 🎪 🤹 🤹‍♂️ 🤹‍♀️ 🎭 🩰 🎨 🎬 🎤 🎧 🎼 🎹 🥁 🪘 🎷 🎺 🪗 🎸 🪕 🎻 🎲 ♟ 🎯 🎳 🎮 🎰 🧩

\n

Travel & Places

\n

🚗 🚕 🚙 🚌 🚎 🏎 🚓 🚑 🚒 🚐 🛻 🚚 🚛 🚜 🦯 🦽 🦼 🛴 🚲 🛵 🏍 🛺 🚨 🚔 🚍 🚘 🚖 🚡 🚠 🚟 🚃 🚋 🚞 🚝 🚄 🚅 🚈 🚂 🚆 🚇 🚊 🚉 ✈️ 🛫 🛬 🛩 💺 🛰 🚀 🛸 🚁 🛶 ⛵️ 🚤 🛥 🛳 ⛴ 🚢 ⚓️ 🪝 ⛽️ 🚧 🚦 🚥 🚏 🗺 🗿 🗽 🗼 🏰 🏯 🏟 🎡 🎢 🎠 ⛲️ ⛱ 🏖 🏝 🏜 🌋 ⛰ 🏔 🗻 🏕 ⛺️ 🛖 🏠 🏡 🏘 🏚 🏗 🏭 🏢 🏬 🏣 🏤 🏥 🏦 🏨 🏪 🏫 🏩 💒 🏛 ⛪️ 🕌 🕍 🛕 🕋 ⛩ 🛤 🛣 🗾 🎑 🏞 🌅 🌄 🌠 🎇 🎆 🌇 🌆 🏙 🌃 🌌 🌉 🌁

\n

Objects

\n

⌚️ 📱 📲 💻 ⌨️ 🖥 🖨 🖱 🖲 🕹 🗜 💽 💾 💿 📀 📼 📷 📸 📹 🎥 📽 🎞 📞 ☎️ 📟 📠 📺 📻 🎙 🎚 🎛 🧭 ⏱ ⏲ ⏰ 🕰 ⌛️ ⏳ 📡 🔋 🔌 💡 🔦 🕯 🪔 🧯 🛢 💸 💵 💴 💶 💷 🪙 💰 💳 💎 ⚖️ 🪜 🧰 🪛 🔧 🔨 ⚒ 🛠 ⛏ 🪚 🔩 ⚙️ 🪤 🧱 ⛓ 🧲 🔫 💣 🧨 🪓 🔪 🗡 ⚔️ 🛡 🚬 ⚰️ 🪦 ⚱️ 🏺 🔮 📿 🧿 💈 ⚗️ 🔭 🔬 🕳 🩹 🩺 💊 💉 🩸 🧬 🦠 🧫 🧪 🌡 🧹 🪠 🧺 🧻 🚽 🚰 🚿 🛁 🛀 🧼 🪥 🪒 🧽 🪣 🧴 🛎 🔑 🗝 🚪 🪑 🛋 🛏 🛌 🧸 🪆 🖼 🪞 🪟 🛍 🛒 🎁 🎈 🎏 🎀 🪄 🪅 🎊 🎉 🎎 🏮 🎐 🧧 ✉️ 📩 📨 📧 💌 📥 📤 📦 🏷 🪧 📪 📫 📬 📭 📮 📯 📜 📃 📄 📑 🧾 📊 📈 📉 🗒 🗓 📆 📅 🗑 📇 🗃 🗳 🗄 📋 📁 📂 🗂 🗞 📰 📓 📔 📒 📕 📗 📘 📙 📚 📖 🔖 🧷 🔗 📎 🖇 📐 📏 🧮 📌 📍 ✂️ 🖊 🖋 ✒️ 🖌 🖍 📝 ✏️ 🔍 🔎 🔏 🔐 🔒 🔓

\n

Symbols

\n

❤️ 🧡 💛 💚 💙 💜 🖤 🤍 🤎 💔 ❣️ 💕 💞 💓 💗 💖 💘 💝 💟 ☮️ ✝️ ☪️ 🕉 ☸️ ✡️ 🔯 🕎 ☯️ ☦️ 🛐 ⛎ ♈️ ♉️ ♊️ ♋️ ♌️ ♍️ ♎️ ♏️ ♐️ ♑️ ♒️ ♓️ 🆔 ⚛️ 🉑 ☢️ ☣️ 📴 📳 🈶 🈚️ 🈸 🈺 🈷️ ✴️ 🆚 💮 🉐 ㊙️ ㊗️ 🈴 🈵 🈹 🈲 🅰️ 🅱️ 🆎 🆑 🅾️ 🆘 ❌ ⭕️ 🛑 ⛔️ 📛 🚫 💯 💢 ♨️ 🚷 🚯 🚳 🚱 🔞 📵 🚭 ❗️ ❕ ❓ ❔ ‼️ ⁉️ 🔅 🔆 〽️ ⚠️ 🚸 🔱 ⚜️ 🔰 ♻️ ✅ 🈯️ 💹 ❇️ ✳️ ❎ 🌐 💠 Ⓜ️ 🌀 💤 🏧 🚾 ♿️ 🅿️ 🛗 🈳 🈂️ 🛂 🛃 🛄 🛅 🚹 🚺 🚼 ⚧ 🚻 🚮 🎦 📶 🈁 🔣 ℹ️ 🔤 🔡 🔠 🆖 🆗 🆙 🆒 🆕 🆓 0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🔢 #️⃣ *️⃣ ⏏️ ▶️ ⏸ ⏯ ⏹ ⏺ ⏭ ⏮ ⏩ ⏪ ⏫ ⏬ ◀️ 🔼 🔽 ➡️ ⬅️ ⬆️ ⬇️ ↗️ ↘️ ↙️ ↖️ ↕️ ↔️ ↪️ ↩️ ⤴️ ⤵️ 🔀 🔁 🔂 🔄 🔃 🎵 🎶 ➕ ➖ ➗ ✖️ ♾ 💲 💱 ™️ ©️ ®️ 〰️ ➰ ➿ 🔚 🔙 🔛 🔝 🔜 ✔️ ☑️ 🔘 🔴 🟠 🟡 🟢 🔵 🟣 ⚫️ ⚪️ 🟤 🔺 🔻 🔸 🔹 🔶 🔷 🔳 🔲 -️ ▫️ ◾️ ◽️ ◼️ ◻️ 🟥 🟧 🟨 🟩 🟦 🟪 ⬛️ ⬜️ 🟫 🔈 🔇 🔉 🔊 🔔 🔕 📣 📢 👁‍🗨 💬 💭 🗯 ♠️ ♣️ ♥️ ♦️ 🃏 🎴 🀄️ 🕐 🕑 🕒 🕓 🕔 🕕 🕖 🕗 🕘 🕙 🕚 🕛 🕜 🕝 🕞 🕟 🕠 🕡 🕢 🕣 🕤 🕥 🕦 🕧

\n

Non-Emoji Symbols

\n

More Unicode symbols, Hieroglpyhs and Pictographs to copy and paste.

\n

✢ ✣ ✤ ✥ ✦ ✧ ★ ☆ ✯ ✡︎ ✩ ✪ ✫ ✬ ✭ ✮ ✶ ✷ ✵ ✸ ✹ → ⇒ ⟹ ⇨ ⇾ ➾ ⇢ ☛ ☞ ➔ ➜ ➙ ➛ ➝ ➞ ♠︎ ♣︎ ♥︎ ♦︎ ♤ ♧ ♡ ♢ ♚ ♛ ♜ ♝ ♞ ♟ ♔ ♕ ♖ ♗ ♘ ♙ ⚀ ⚁ ⚂ ⚃ ⚄ ⚅ 🂠 ⚈ ⚉ ⚆ ⚇ 𓀀 𓀁 𓀂 𓀃 𓀄 𓀅 𓀆 𓀇 𓀈 𓀉 𓀊 𓀋 𓀌 𓀍 𓀎 𓀏 𓀐 𓀑 𓀒 𓀓 𓀔 𓀕 𓀖 𓀗 𓀘 𓀙 𓀚 𓀛 𓀜 𓀝

\n

Flags

\n

Note: Windows has limited flag emoji support.

\n

🏳️ 🏴 🏁 🚩 🏳️‍🌈 🏳️‍⚧️ 🏴‍☠️ 🇦🇫 🇦🇽 🇦🇱 🇩🇿 🇦🇸 🇦🇩 🇦🇴 🇦🇮 🇦🇶 🇦🇬 🇦🇷 🇦🇲 🇦🇼 🇦🇺 🇦🇹 🇦🇿 🇧🇸 🇧🇭 🇧🇩 🇧🇧 🇧🇾 🇧🇪 🇧🇿 🇧🇯 🇧🇲 🇧🇹 🇧🇴 🇧🇦 🇧🇼 🇧🇷 🇮🇴 🇻🇬 🇧🇳 🇧🇬 🇧🇫 🇧🇮 🇰🇭 🇨🇲 🇨🇦 🇮🇨 🇨🇻 🇧🇶 🇰🇾 🇨🇫 🇹🇩 🇨🇱 🇨🇳 🇨🇽 🇨🇨 🇨🇴 🇰🇲 🇨🇬 🇨🇩 🇨🇰 🇨🇷 🇨🇮 🇭🇷 🇨🇺 🇨🇼 🇨🇾 🇨🇿 🇩🇰 🇩🇯 🇩🇲 🇩🇴 🇪🇨 🇪🇬 🇸🇻 🇬🇶 🇪🇷 🇪🇪 🇪🇹 🇪🇺 🇫🇰 🇫🇴 🇫🇯 🇫🇮 🇫🇷 🇬🇫 🇵🇫 🇹🇫 🇬🇦 🇬🇲 🇬🇪 🇩🇪 🇬🇭 🇬🇮 🇬🇷 🇬🇱 🇬🇩 🇬🇵 🇬🇺 🇬🇹 🇬🇬 🇬🇳 🇬🇼 🇬🇾 🇭🇹 🇭🇳 🇭🇰 🇭🇺 🇮🇸 🇮🇳 🇮🇩 🇮🇷 🇮🇶 🇮🇪 🇮🇲 🇮🇱 🇮🇹 🇯🇲 🇯🇵 🎌 🇯🇪 🇯🇴 🇰🇿 🇰🇪 🇰🇮 🇽🇰 🇰🇼 🇰🇬 🇱🇦 🇱🇻 🇱🇧 🇱🇸 🇱🇷 🇱🇾 🇱🇮 🇱🇹 🇱🇺 🇲🇴 🇲🇰 🇲🇬 🇲🇼 🇲🇾 🇲🇻 🇲🇱 🇲🇹 🇲🇭 🇲🇶 🇲🇷 🇲🇺 🇾🇹 🇲🇽 🇫🇲 🇲🇩 🇲🇨 🇲🇳 🇲🇪 🇲🇸 🇲🇦 🇲🇿 🇲🇲 🇳🇦 🇳🇷 🇳🇵 🇳🇱 🇳🇨 🇳🇿 🇳🇮 🇳🇪 🇳🇬 🇳🇺 🇳🇫 🇰🇵 🇲🇵 🇳🇴 🇴🇲 🇵🇰 🇵🇼 🇵🇸 🇵🇦 🇵🇬 🇵🇾 🇵🇪 🇵🇭 🇵🇳 🇵🇱 🇵🇹 🇵🇷 🇶🇦 🇷🇪 🇷🇴 🇷🇺 🇷🇼 🇼🇸 🇸🇲 🇸🇦 🇸🇳 🇷🇸 🇸🇨 🇸🇱 🇸🇬 🇸🇽 🇸🇰 🇸🇮 🇬🇸 🇸🇧 🇸🇴 🇿🇦 🇰🇷 🇸🇸 🇪🇸 🇱🇰 🇧🇱 🇸🇭 🇰🇳 🇱🇨 🇵🇲 🇻🇨 🇸🇩 🇸🇷 🇸🇿 🇸🇪 🇨🇭 🇸🇾 🇹🇼 🇹🇯 🇹🇿 🇹🇭 🇹🇱 🇹🇬 🇹🇰 🇹🇴 🇹🇹 🇹🇳 🇹🇷 🇹🇲 🇹🇨 🇹🇻 🇻🇮 🇺🇬 🇺🇦 🇦🇪 🇬🇧 🏴󠁧󠁢󠁥󠁮󠁧󠁿 🏴󠁧󠁢󠁳󠁣󠁴󠁿 🏴󠁧󠁢󠁷󠁬󠁳󠁿 🇺🇳 🇺🇸 🇺🇾 🇺🇿 🇻🇺 🇻🇦 🇻🇪 🇻🇳 🇼🇫 🇪🇭 🇾🇪 🇿🇲 🇿🇼

\n

😃💁 People - 🐻🌻 Animals - 🍔🍹 Food - 🎷⚽️ Activities - 🚘🌇 Travel - 💡🎉 Objects - 💖🔣 Symbols - 🎌🏳️‍🌈 Flags

\n

New Emojis

\n

Emojis from Emoji 13.0: Added in 2020.

\n

🥲 🥸 🤌 🤌🏻 🤌🏼 🤌🏽 🤌🏾 🤌🏿 🫀 🫁 🥷 🤵‍♀️ 🤵🏻‍♀️ 🤵🏼‍♀️ 🤵🏽‍♀️ 🤵🏾‍♀️ 🤵🏿‍♀️ 🤵‍♂️ 🤵🏻‍♂️ 🤵🏼‍♂️ 🤵🏽‍♂️ 🤵🏾‍♂️ 🤵🏿‍♂️ 👰‍♀️ 👰🏻‍♀️ 👰🏼‍♀️ 👰🏽‍♀️ 👰🏾‍♀️ 👰🏿‍♀️ 👰‍♂️ 👰🏻‍♂️ 👰🏼‍♂️ 👰🏽‍♂️ 👰🏾‍♂️ 👰🏿‍♂️ 👩‍🍼 👩🏻‍🍼 👩🏼‍🍼 👩🏽‍🍼 👩🏾‍🍼 👩🏿‍🍼 🧑‍🍼 🧑🏻‍🍼 🧑🏼‍🍼 🧑🏽‍🍼 🧑🏾‍🍼 🧑🏿‍🍼 👨‍🍼 👨🏻‍🍼 👨🏼‍🍼 👨🏽‍🍼 👨🏾‍🍼 👨🏿‍🍼 🧑‍🎄 🧑🏻‍🎄 🧑🏼‍🎄 🧑🏽‍🎄 🧑🏾‍🎄 🧑🏿‍🎄 🫂 🐈‍⬛ 🦬 🦣 🦫 🐻‍❄️ 🦤 🪶 🦭 🪲 🪳 🪰 🪱 🪴 🫐 🫒 🫑 🫓 🫔 🫕 🫖 🧋 🪨 🪵 🛖 🛻 🛼 🪄 🪅 🪆 🪡 🪢 🩴 🪖 🪗 🪘 🪙 🪃 🪚 🪛 🪝 🪜 🛗 🪞 🪟 🪠 🪤 🪣 🪥 🪦 🪧 🏳️‍⚧️

\n

Emojis from Emoji 13.1: Added in 2021.

\n

😮‍💨 😵‍💫 😶‍🌫️ ❤️‍🔥 ❤️‍🩹 🧔‍♀️ 🧔🏻‍♀️ 🧔🏼‍♀️ 🧔🏽‍♀️ 🧔🏾‍♀️ 🧔🏿‍♀️ 🧔‍♂️ 🧔🏻‍♂️ 🧔🏼‍♂️ 🧔🏽‍♂️ 🧔🏾‍♂️ 🧔🏿‍♂️ 💑🏻 💑🏼 💑🏽 💑🏾 💑🏿 💏🏻 💏🏼 💏🏽 💏🏾 💏🏿 👨🏻‍❤️‍👨🏻 👨🏻‍❤️‍👨🏼 👨🏻‍❤️‍👨🏽 👨🏻‍❤️‍👨🏾 👨🏻‍❤️‍👨🏿 👨🏼‍❤️‍👨🏻 👨🏼‍❤️‍👨🏼 👨🏼‍❤️‍👨🏽 👨🏼‍❤️‍👨🏾 👨🏼‍❤️‍👨🏿 👨🏽‍❤️‍👨🏻 👨🏽‍❤️‍👨🏼 👨🏽‍❤️‍👨🏽 👨🏽‍❤️‍👨🏾 👨🏽‍❤️‍👨🏿 👨🏾‍❤️‍👨🏻 👨🏾‍❤️‍👨🏼 👨🏾‍❤️‍👨🏽 👨🏾‍❤️‍👨🏾 👨🏾‍❤️‍👨🏿 👨🏿‍❤️‍👨🏻 👨🏿‍❤️‍👨🏼 👨🏿‍❤️‍👨🏽 👨🏿‍❤️‍👨🏾 👨🏿‍❤️‍👨🏿 👩🏻‍❤️‍👨🏻 👩🏻‍❤️‍👨🏼 👩🏻‍❤️‍👨🏽 👩🏻‍❤️‍👨🏾 👩🏻‍❤️‍👨🏿 👩🏻‍❤️‍👩🏻 👩🏻‍❤️‍👩🏼 👩🏻‍❤️‍👩🏽 👩🏻‍❤️‍👩🏾 👩🏻‍❤️‍👩🏿 👩🏼‍❤️‍👨🏻 👩🏼‍❤️‍👨🏼 👩🏼‍❤️‍👨🏽 👩🏼‍❤️‍👨🏾 👩🏼‍❤️‍👨🏿 👩🏼‍❤️‍👩🏻 👩🏼‍❤️‍👩🏼 👩🏼‍❤️‍👩🏽 👩🏼‍❤️‍👩🏾 👩🏼‍❤️‍👩🏿 👩🏽‍❤️‍👨🏻 👩🏽‍❤️‍👨🏼 👩🏽‍❤️‍👨🏽 👩🏽‍❤️‍👨🏾 👩🏽‍❤️‍👨🏿 👩🏽‍❤️‍👩🏻 👩🏽‍❤️‍👩🏼 👩🏽‍❤️‍👩🏽 👩🏽‍❤️‍👩🏾 👩🏽‍❤️‍👩🏿 👩🏾‍❤️‍👨🏻 👩🏾‍❤️‍👨🏼 👩🏾‍❤️‍👨🏽 👩🏾‍❤️‍👨🏾 👩🏾‍❤️‍👨🏿 👩🏾‍❤️‍👩🏻 👩🏾‍❤️‍👩🏼 👩🏾‍❤️‍👩🏽 👩🏾‍❤️‍👩🏾 👩🏾‍❤️‍👩🏿 👩🏿‍❤️‍👨🏻 👩🏿‍❤️‍👨🏼 👩🏿‍❤️‍👨🏽 👩🏿‍❤️‍👨🏾 👩🏿‍❤️‍👨🏿 👩🏿‍❤️‍👩🏻 👩🏿‍❤️‍👩🏼 👩🏿‍❤️‍👩🏽 👩🏿‍❤️‍👩🏾 👩🏿‍❤️‍👩🏿 🧑🏻‍❤️‍🧑🏼 🧑🏻‍❤️‍🧑🏽 🧑🏻‍❤️‍🧑🏾 🧑🏻‍❤️‍🧑🏿 🧑🏼‍❤️‍🧑🏻 🧑🏼‍❤️‍🧑🏽 🧑🏼‍❤️‍🧑🏾 🧑🏼‍❤️‍🧑🏿 🧑🏽‍❤️‍🧑🏻 🧑🏽‍❤️‍🧑🏼 🧑🏽‍❤️‍🧑🏾 🧑🏽‍❤️‍🧑🏿 🧑🏾‍❤️‍🧑🏻 🧑🏾‍❤️‍🧑🏼 🧑🏾‍❤️‍🧑🏽 🧑🏾‍❤️‍🧑🏿 🧑🏿‍❤️‍🧑🏻 🧑🏿‍❤️‍🧑🏼 🧑🏿‍❤️‍🧑🏽 🧑🏿‍❤️‍🧑🏾 👨🏻‍❤️‍💋‍👨🏻 👨🏻‍❤️‍💋‍👨🏼 👨🏻‍❤️‍💋‍👨🏽 👨🏻‍❤️‍💋‍👨🏾 👨🏻‍❤️‍💋‍👨🏿 👨🏼‍❤️‍💋‍👨🏻 👨🏼‍❤️‍💋‍👨🏼 👨🏼‍❤️‍💋‍👨🏽 👨🏼‍❤️‍💋‍👨🏾 👨🏼‍❤️‍💋‍👨🏿 👨🏽‍❤️‍💋‍👨🏻 👨🏽‍❤️‍💋‍👨🏼 👨🏽‍❤️‍💋‍👨🏽 👨🏽‍❤️‍💋‍👨🏾 👨🏽‍❤️‍💋‍👨🏿 👨🏾‍❤️‍💋‍👨🏻 👨🏾‍❤️‍💋‍👨🏼 👨🏾‍❤️‍💋‍👨🏽 👨🏾‍❤️‍💋‍👨🏾 👨🏾‍❤️‍💋‍👨🏿 👨🏿‍❤️‍💋‍👨🏻 👨🏿‍❤️‍💋‍👨🏼 👨🏿‍❤️‍💋‍👨🏽 👨🏿‍❤️‍💋‍👨🏾 👨🏿‍❤️‍💋‍👨🏿 👩🏻‍❤️‍💋‍👨🏻 👩🏻‍❤️‍💋‍👨🏼 👩🏻‍❤️‍💋‍👨🏽 👩🏻‍❤️‍💋‍👨🏾 👩🏻‍❤️‍💋‍👨🏿 👩🏻‍❤️‍💋‍👩🏻 👩🏻‍❤️‍💋‍👩🏼 👩🏻‍❤️‍💋‍👩🏽 👩🏻‍❤️‍💋‍👩🏾 👩🏻‍❤️‍💋‍👩🏿 👩🏼‍❤️‍💋‍👨🏻 👩🏼‍❤️‍💋‍👨🏼 👩🏼‍❤️‍💋‍👨🏽 👩🏼‍❤️‍💋‍👨🏾 👩🏼‍❤️‍💋‍👨🏿 👩🏼‍❤️‍💋‍👩🏻 👩🏼‍❤️‍💋‍👩🏼 👩🏼‍❤️‍💋‍👩🏽 👩🏼‍❤️‍💋‍👩🏾 👩🏼‍❤️‍💋‍👩🏿 👩🏽‍❤️‍💋‍👨🏻 👩🏽‍❤️‍💋‍👨🏼 👩🏽‍❤️‍💋‍👨🏽 👩🏽‍❤️‍💋‍👨🏾 👩🏽‍❤️‍💋‍👨🏿 👩🏽‍❤️‍💋‍👩🏻 👩🏽‍❤️‍💋‍👩🏼 👩🏽‍❤️‍💋‍👩🏽 👩🏽‍❤️‍💋‍👩🏾 👩🏽‍❤️‍💋‍👩🏿 👩🏾‍❤️‍💋‍👨🏻 👩🏾‍❤️‍💋‍👨🏼 👩🏾‍❤️‍💋‍👨🏽 👩🏾‍❤️‍💋‍👨🏾 👩🏾‍❤️‍💋‍👨🏿 👩🏾‍❤️‍💋‍👩🏻 👩🏾‍❤️‍💋‍👩🏼 👩🏾‍❤️‍💋‍👩🏽 👩🏾‍❤️‍💋‍👩🏾 👩🏾‍❤️‍💋‍👩🏿 👩🏿‍❤️‍💋‍👨🏻 👩🏿‍❤️‍💋‍👨🏼 👩🏿‍❤️‍💋‍👨🏽 👩🏿‍❤️‍💋‍👨🏾 👩🏿‍❤️‍💋‍👨🏿 👩🏿‍❤️‍💋‍👩🏻 👩🏿‍❤️‍💋‍👩🏼 👩🏿‍❤️‍💋‍👩🏽 👩🏿‍❤️‍💋‍👩🏾 👩🏿‍❤️‍💋‍👩🏿 🧑🏻‍❤️‍💋‍🧑🏼 🧑🏻‍❤️‍💋‍🧑🏽 🧑🏻‍❤️‍💋‍🧑🏾 🧑🏻‍❤️‍💋‍🧑🏿 🧑🏼‍❤️‍💋‍🧑🏻 🧑🏼‍❤️‍💋‍🧑🏽 🧑🏼‍❤️‍💋‍🧑🏾 🧑🏼‍❤️‍💋‍🧑🏿 🧑🏽‍❤️‍💋‍🧑🏻 🧑🏽‍❤️‍💋‍🧑🏼 🧑🏽‍❤️‍💋‍🧑🏾 🧑🏽‍❤️‍💋‍🧑🏿 🧑🏾‍❤️‍💋‍🧑🏻 🧑🏾‍❤️‍💋‍🧑🏼 🧑🏾‍❤️‍💋‍🧑🏽 🧑🏾‍❤️‍💋‍🧑🏿 🧑🏿‍❤️‍💋‍🧑🏻 🧑🏿‍❤️‍💋‍🧑🏼 🧑🏿‍❤️‍💋‍🧑🏽 🧑🏿‍❤️‍💋‍🧑🏾

"},{"url":"/docs/quick-reference/","relativePath":"docs/quick-reference/index.md","relativeDir":"docs/quick-reference","base":"index.md","name":"index","frontmatter":{"title":"QuickRef","excerpt":"In this section you'll find basic information about Web-Dev-Hub and how to use it.","seo":{"title":"Cheat Sheets","description":"This is the Cheat Sheets page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Cheat Sheets","keyName":"property"},{"name":"og:description","value":"This is the Cheat Sheets page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Cheat Sheets"},{"name":"twitter:description","value":"This is the Cheat Sheets page"}]},"template":"docs"},"html":"

Quick Reference

\n\n\n\n"},{"url":"/docs/quick-reference/markdown-dropdowns/","relativePath":"docs/quick-reference/markdown-dropdowns.md","relativeDir":"docs/quick-reference","base":"markdown-dropdowns.md","name":"markdown-dropdowns","frontmatter":{"title":"Markdown Dropdown","weight":0,"excerpt":"Markdown Dropdown","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Markdown Dropdown:

\n
\nHow do I dropdown?\n
\nThis is how you dropdown.\n
\n
\n
\n<details>\n<summary>How do I dropdown?</summary>\n<br>\nThis is how you dropdown.\n</details>\n
\n
\n
\n
\nWant to ruin the surprise?\n
\nWell, you asked for it!\n
\n
\n
\n<details open>\n<summary>Want to ruin the surprise?</summary>\n<br>\nWell, you asked for it!\n</details>\n
\n
"},{"url":"/docs/quick-reference/installation/","relativePath":"docs/quick-reference/installation.md","relativeDir":"docs/quick-reference","base":"installation.md","name":"installation","frontmatter":{"title":"Installation","weight":0,"seo":{"title":"Installation","description":"This is the installation page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Installation","keyName":"property"},{"name":"og:description","value":"This is the installation page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Installation"},{"name":"twitter:description","value":"This is the installation page"}]},"template":"docs"},"html":"

Basic Web Development Environment Setup

\n
\n

Windows Subsystem for Linux (WSL) and Ubuntu

\n
\n

Windows Subsystem for Linux (WSL) and Ubuntu

\n

\"Bryan

\n

\n

\n

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.

\n
    \n
  1. In the application search box in the bottom bar, type “PowerShell” to find the application named “Windows PowerShell”
    2. \n
  2. Right-click on “Windows PowerShell” and choose “Run as administrator” from the popup menu
    3. \n
  3. In the blue PowerShell window, type the following: Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
    4. \n
  4. Restart your computer
    5. \n
  5. In the application search box in the bottom bar, type “Store” to find the application named “Microsoft Store”
    6. \n
  6. Click “Microsoft Store”
    7. \n
  7. Click the “Search” button in the upper-right corner of the window
    8. \n
  8. Type in “Ubuntu”
    9. \n
  9. Click “Run Linux on Windows (Get the apps)”
    10. \n
  10. Click the orange tile labeled “Ubuntu” Note that there are 3 versions in the Microsoft Store… you want the one just entitled 'Ubuntu'
    11. \n
  11. Click “Install”
    12. \n
  12. After it downloads, click “Launch”
    13. \n
  13. 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”
    14. \n
  14. When prompted to “Enter new UNIX username”, type your first name with no spaces
    15. \n
  15. When prompted, enter and retype a password for this UNIX user (it can be the same as your Windows password)
    16. \n
  16. 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)
    17. \n
  17. You need to update your packages, so type sudo apt update (if prompted for your password, enter it)
    18. \n
  18. You need to upgrade your packages, so type sudo apt upgrade (if prompted for your password, enter it)
    19. \n
\n

Git comes with Ubuntu, so there's nothing to install. However, you should configure it using the following instructions.

\n

‌Open an Ubuntu terminal if you don't have one open already.

\n
    \n
  1. You need to configure Git, so type git config --global user.name \"Your Name\" with replacing \"Your Name\" with your real name.
    2. \n
  2. You need to configure Git, so type git config --global user.email your@email.com with replacing \"your@email.com\" with your real email.
    3. \n
\n

Note: if you want git to remember your login credentials type:

\n

$ git config --global credential.helper store

\n

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.

\n
    \n
  1. Open Microsoft Edge, the blue “e” in the task bar, and type in http://chrome.google.com. 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.
    2. \n
  2. Right-click on the Chrome icon in the task bar and choose “Pin to taskbar”.
    3. \n
\n

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.

\n
    \n
  1. In the Ubuntu terminal, type sudo apt update and press Enter
    2. \n
  2. In the Ubuntu terminal, type sudo apt install build-essential and press Enter
    3. \n
  3. In the Ubuntu terminal, type curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash and press Enter
    4. \n
  4. In the Ubuntu terminal, type . ./.bashrc and press Enter
    5. \n
  5. In the Ubuntu terminal, type nvm install --lts and press Enter
    6. \n
  6. Confirm that node is installed by typing node --version and seeing it print something that is not \"Command not found\"!
    7. \n
\n

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.

\n

‌In the Ubuntu terminal type: sudo apt install unzip and press Enter

\n

‌Mocha.js

\n

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.

\n

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.

\n

‌

\n

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.

\n

# Installing build essentials
\nsudo apt-get install -y build-essential libssl-dev
\n# Nodejs and NVM
\ncurl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
\nsource ~/.profile
\nsudo nvm install 7.10.0
\nsudo nvm use 7.10.0
\nnode -v

\n

nodemon

\n

sudo npm install -g nodemon
\nsudo npm install -g loopback-cli
\n# Forever to run nodejs scripts forever
\nsudo npm install forever -g
\n# Git - a version control system
\nsudo apt-get update
\nsudo apt-get install -y git xclip
\n# Grunt - an automated task runner
\nsudo npm install -g grunt-cli
\n# Bower - a dependency manager
\nsudo npm install -g bower
\n# Yeoman - for generators
\nsudo npm install -g yo
\n# maven
\nsudo apt-get install maven -y
\n# Gulp - an automated task runner
\nsudo npm install -g gulp-cli
\n# Angular FullStack - My favorite MEAN boilerplate (MEAN = MongoDB, Express, Angularjs, Nodejs)
\nsudo npm install -g generator-angular-fullstack
\n# Vim, Curl, Python - Some random useful stuff
\nsudo apt-get install -y vim curl python-software-properties
\nsudo apt-get install -y python-dev, python-pip
\nsudo apt-get install -y libkrb5-dev
\n# Installing JDK and JRE
\nsudo apt-get install -y default-jre
\nsudo apt-get install -y default-jdk
\n# Archive Extractors
\nsudo apt-get install -y unace unrar zip unzip p7zip-full p7zip-rar sharutils rar uudeview mpack arj cabextract file-roller
\n# FileZilla - a FTP client
\nsudo apt-get install -y filezilla

\n

If you found this guide helpful feel free to checkout my github/gists where I host similar content:

\n

bgoonz's gists · GitHub

\n

Or Checkout my personal Resource Site:

\n

Source

"},{"url":"/docs/quick-reference/minifiction/","relativePath":"docs/quick-reference/minifiction.md","relativeDir":"docs/quick-reference","base":"minifiction.md","name":"minifiction","frontmatter":{"title":"How To Minify Code For Better Web Performance ","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

In production, it is recommended to minify any JavaScript code that is included with your application. Minification can help your website load several times faster, especially as the size of your JavaScript source code grows.

\n

Here's one way to set it up:

\n
    \n
  1. Install Node.js
    2. \n
  2. Run npm init -y in your project folder (don't skip this step!)
    3. \n
  3. Run npm install terser
    4. \n
\n

Now, to minify a file called like_button.js, run in the terminal:

\n

This will produce a file called like_button.min.js with the minified code in the same directory. If you're typing this often, you can create an npm script to give this command a name.

\n

How to Minify Your Minify your HTML, CSS and JavaScript Using an Online Tool\n\n

\n

Many of these online tools have a similar process which involve the following steps:

\n

Paste in your source code or upload the source code file.\nOptimize the settings for a specific output (if options are available)\nClick a button to minify or compress the code.\nCopy the minified code output or download the minified code file.

\n

For this example, I'm going to use the minify tools from minifycode.com.

\n

First, locate the css file (commonly named style.css) in your site files and open the file using a page editor. Then copy the entire css code to your clipboard.

\n

\n

Go to minifycode.com and click the CSS minifier tab. Then paste the CSS code into the input box and click the Minify CSS button.

\n

\n

After the new minified code is generated, copy the code.

\n

\n

Then go back to the css file of your website and replace the code with the new minified version.

\n

That's it!

\n

Repeat the same process to minify your site's JavaScript and Html file(s) as well.

\n

Overview\n\n

\n

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

\n

See preprocessing & context-specific optimizations to learn more.

\n

Recommendations

\n

You should minify your HTML, CSS, and JavaScript resources:

\n\n

Alternatively, the PageSpeed Module, integrates with an Apache or Nginx web server to automatically optimize your site, including resource minification.

"},{"url":"/docs/quick-reference/new-repo-instructions/","relativePath":"docs/quick-reference/new-repo-instructions.md","relativeDir":"docs/quick-reference","base":"new-repo-instructions.md","name":"new-repo-instructions","frontmatter":{"title":"new-repo-git","weight":0,"seo":{"title":"new-repo-git","description":"This is the new-repo-git page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"new-repo-git","keyName":"property"},{"name":"og:description","value":"This is the new-repo-git page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"new-repo-git"},{"name":"twitter:description","value":"This is the new-repo-git page"}]},"template":"docs"},"html":"

...or create a new repository on the command line

\n
echo \"# React-Self-Study\" >> README.md\ngit init\ngit add README.md\ngit commit -m \"first commit\"\ngit branch -M master\ngit remote add origin https://github.com/bgoonz/React-Self-Study.git\ngit push -u origin master\n
\n

...or push an existing repository from the command line

\n
git remote add origin https://github.com/bgoonz/React-Self-Study.git\ngit branch -M master\ngit push -u origin master\n
\n

...or import code from another repository

\n

You can initialize this repository with code from a Subversion, Mercurial, or TFS project.

"},{"url":"/docs/quick-reference/quick-links/","relativePath":"docs/quick-reference/quick-links.md","relativeDir":"docs/quick-reference","base":"quick-links.md","name":"quick-links","frontmatter":{"title":"Quick Links","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Gitbook Websites:

\n\n

Sites I Wish To Revisit:

\n"},{"url":"/docs/quick-reference/heroku-error-codes/","relativePath":"docs/quick-reference/heroku-error-codes.md","relativeDir":"docs/quick-reference","base":"heroku-error-codes.md","name":"heroku-error-codes","frontmatter":{"title":"Heroku Error Codes","weight":0,"excerpt":"Full List Of Heroku Error Codes","seo":{"title":"","description":"embeded developer tools and utilities","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Heroku Error Codes

\n

Last updated August 04, 2021

\n

Table of Contents

\n\n

Whenever your app experiences an error, Heroku will return a standard error page with the HTTP status code 503. To help you debug the underlying error, however, the platform will also add custom error information to your logs. Each type of error gets its own error code, with all HTTP errors starting with the letter H and all runtime errors starting with R. Logging errors start with L.

\n

H10 - App crashed

\n

A crashed web dyno or a boot timeout on the web dyno will present this error.

\n
2010-10-06T21:51:04-07:00 heroku[web.1]: State changed from down to starting\n2010-10-06T21:51:07-07:00 app[web.1]: Starting process with command: `bundle exec rails server -p 22020`\n2010-10-06T21:51:09-07:00 app[web.1]: >> Using rails adapter\n2010-10-06T21:51:09-07:00 app[web.1]: Missing the Rails 2.3.5 gem. Please `gem install -v=2.3.5 rails`, update your RAILS_GEM_VERSION setting in config/environment.rb for the Rails version you do have installed, or comment out RAILS_GEM_VERSION to use the latest version installed.\n2010-10-06T21:51:10-07:00 heroku[web.1]: Process exited\n2010-10-06T21:51:12-07:00 heroku[router]: at=error code=H10 desc=\"App crashed\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno= connect= service= status=503 bytes=\n
\n

H11 - Backlog too deep

\n

When HTTP requests arrive faster than your application can process them, they can form a large backlog on a number of routers. When the backlog on a particular router passes a threshold, the router determines that your application isn't keeping up with its incoming request volume. You'll see an H11 error for each incoming request as long as the backlog is over this size. The exact value of this threshold may change depending on various factors, such as the number of dynos in your app, response time for individual requests, and your app's normal request volume.

\n
2010-10-06T21:51:07-07:00 heroku[router]: at=error code=H11 desc=\"Backlog too deep\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno= connect= service= status=503 bytes=\n
\n

The solution is to increase your app's throughput by adding more dynos, tuning your database (for example, adding an index), or making the code itself faster. As always, increasing performance is highly application-specific and requires profiling.

\n

H12 - Request timeout

\n

For more information on request timeouts (including recommendations for resolving them), take a look at our article on the topic.

\n

An HTTP request took longer than 30 seconds to complete. In the example below, a Rails app takes 37 seconds to render the page; the HTTP router returns a 503 prior to Rails completing its request cycle, but the Rails process continues and the completion message shows after the router message.

\n
2010-10-06T21:51:07-07:00 app[web.2]: Processing PostController#list (for 75.36.147.245 at 2010-10-06 21:51:07) [GET]\n2010-10-06T21:51:08-07:00 app[web.2]: Rendering template within layouts/application\n2010-10-06T21:51:19-07:00 app[web.2]: Rendering post/list\n2010-10-06T21:51:37-07:00 heroku[router]: at=error code=H12 desc=\"Request timeout\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno=web.1 connect=6ms service=30001ms status=503 bytes=0\n2010-10-06T21:51:42-07:00 app[web.2]: Completed in 37000ms (View: 27, DB: 21) | 200 OK [http://myapp.heroku.com/]\n
\n

This 30-second limit is measured by the router, and includes all time spent in the dyno, including the kernel's incoming connection queue and the app itself.

\n

See Request Timeout for more, as well as a language-specific article on this error:

\n\n

H13 - Connection closed without response

\n

This error is thrown when a process in your web dyno accepts a connection but then closes the socket without writing anything to it.

\n
2010-10-06T21:51:37-07:00 heroku[router]: at=error code=H13 desc=\"Connection closed without response\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno=web.1 connect=3030ms service=9767ms status=503 bytes=0\n
\n

One example where this might happen is when a Unicorn web server is configured with a timeout shorter than 30s and a request has not been processed by a worker before the timeout happens. In this case, Unicorn closes the connection before any data is written, resulting in an H13.

\n

An example of an H13 can be found here.

\n

H14 - No web dynos running

\n

This is most likely the result of scaling your web dynos down to 0 dynos. To fix it, scale your web dynos to 1 or more dynos:

\n
$ heroku ps:scale web=1\n
\n

Use the heroku ps command to determine the state of your web dynos.

\n
2010-10-06T21:51:37-07:00 heroku[router]: at=error code=H14 desc=\"No web processes running\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno= connect= service= status=503 bytes=\n
\n

H15 - Idle connection

\n

The dyno did not send a full response and was terminated due to 55 seconds of inactivity. For example, the response indicated a Content-Length of 50 bytes which were not sent in time.

\n
2010-10-06T21:51:37-07:00 heroku[router]: at=error code=H15 desc=\"Idle connection\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno=web.1 connect=1ms service=55449ms status=503 bytes=18\n
\n

H16 - (No Longer in Use)

\n

Heroku no longer emits H16 errors

\n

H17 - Poorly formatted HTTP response

\n

Our HTTP routing stack has no longer accepts responses that are missing a reason phrase in the status line. 'HTTP/1.1 200 OK' will work with the new router, but 'HTTP/1.1 200' will not.

\n

This error message is logged when a router detects a malformed HTTP response coming from a dyno.

\n
2010-10-06T21:51:37-07:00 heroku[router]: at=error code=H17 desc=\"Poorly formatted HTTP response\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno=web.1 connect=1ms service=1ms status=503 bytes=0\n
\n

H18 - Server Request Interrupted

\n

An H18 signifies that the socket connected, some data was sent as part of a response by the app, but then the socket was destroyed without completing the response.

\n
2010-10-06T21:51:37-07:00 heroku[router]: sock=backend at=error code=H18 desc=\"Server Request Interrupted\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno=web.1 connect=1ms service=1ms status=503 bytes=0\n
\n

An example of an H18 can be found here.

\n

H19 - Backend connection timeout

\n

A router received a connection timeout error after 5 seconds attempting to open a socket to a web dyno. This is usually a symptom of your app being overwhelmed and failing to accept new connections in a timely manner. If you have multiple dynos, the router will retry multiple dynos before logging H19 and serving a standard error page.

\n

If your app has a single web dyno, it is possible to see H19 errors if the runtime instance running your web dyno fails and is replaced. Once the failure is detected and the instance is terminated your web dyno will be restarted somewhere else, but in the meantime, H19s may be served as the router fails to establish a connection to your dyno. This can be mitigated by running more than one web dyno.

\n
2010-10-06T21:51:07-07:00 heroku[router]: at=error code=H19 desc=\"Backend connection timeout\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno=web.1 connect=5001ms service= status=503 bytes=\n
\n

H20 - App boot timeout

\n

The router will enqueue requests for 75 seconds while waiting for starting processes to reach an \"up\" state. If after 75 seconds, no web dynos have reached an \"up\" state, the router logs H20 and serves a standard error page.

\n
2010-10-06T21:51:07-07:00 heroku[router]: at=error code=H20 desc=\"App boot timeout\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno= connect= service= status=503 bytes=\n
\n

The Ruby on Rails asset pipeline can sometimes fail to run during git push, and will instead attempt to run when your app's dynos boot. Since the Rails asset pipeline is a slow process, this can cause H20 boot timeout errors.

\n

This error differs from R10 in that the H20 75-second timeout includes platform tasks such as internal state propagation, requests between internal components, slug download, unpacking, container preparation, etc... The R10 60-second timeout applies solely to application startup tasks.

\n

If your application requires more time to boot, you may use the boot timeout tool to increase the limit. However, in general, slow boot times will make it harder to deploy your application and will make recovery from dyno failures slower, so this should be considered a temporary solution.

\n

H21 - Backend connection refused

\n

A router received a connection refused error when attempting to open a socket to your web process. This is usually a symptom of your app being overwhelmed and failing to accept new connections. If you have multiple dynos, the router will retry multiple dynos before logging H21 and serving a standard error page.

\n
2010-10-06T21:51:07-07:00 heroku[router]: at=error code=H21 desc=\"Backend connection refused\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno=web.1 connect=1ms service= status=503 bytes=\n
\n

H22 - Connection limit reached

\n

A routing node has detected an elevated number of HTTP client connections attempting to reach your app. Reaching this threshold most likely means your app is under heavy load and is not responding quickly enough to keep up. The exact value of this threshold may change depending on various factors, such as the number of dynos in your app, response time for individual requests, and your app's normal request volume.

\n
2010-10-06T21:51:07-07:00 heroku[router]: at=error code=H22 desc=\"Connection limit reached\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno= connect= service= status=503 bytes=\n
\n

H23 - Endpoint misconfigured

\n

A routing node has detected a websocket handshake, specifically the 'Sec-Websocket-Version' header in the request, that came from an endpoint (upstream proxy) that does not support websockets.

\n
2010-10-06T21:51:07-07:00 heroku[router]: at=error code=H23 desc=\"Endpoint misconfigured\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno= connect= service= status=503 bytes=\n
\n

H24 - Forced close

\n

The routing node serving this request was either shutdown for maintenance or terminated before the request completed.

\n
2010-10-06T21:51:07-07:00 heroku[router]: at=error code=H24 desc=\"Forced close\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno=web.1 connect=1ms service=80000ms status= bytes=18\n
\n

H25 - HTTP Restriction

\n

This error is logged when a routing node detects and blocks a valid HTTP response that is judged risky or too large to be safely parsed. The error comes in four types.

\n

Currently, this functionality is experimental, and is only made available to a subset of applications on the platform.

\n

Invalid content length

\n

The response has multiple content lengths declared within the same response, with varying lengths.

\n
2014-03-20T14:22:00.203382+00:00 heroku[router]: at=error code=H25 desc=\"HTTP restriction: invalid content length\" method=GET path=\"/\" host=myapp.herokuapp.com request_id=3f336f1a-9be3-4791-afe3-596a1f2a481f fwd=\"17.17.17.17\" dyno=web.1 connect=0 service=1 status=502 bytes=537\n
\n

Oversized cookies

\n

The cookie in the response will be too large to be used again in a request to the Heroku router or SSL endpoints.

\n
2014-03-20T14:18:57.403882+00:00 heroku[router]: at=error code=H25 desc=\"HTTP restriction: oversized cookie\" method=GET path=\"/\" host=myapp.herokuapp.com request_id=90cfbbd2-0397-4bab-828f-193050a076c4 fwd=\"17.17.17.17\" dyno=web.1 connect=0 service=2 status=502 bytes=537\n
\n

Oversized header

\n

A single header line is deemed too long (over 512kb) and the response is discarded on purpose.

\n
2014-03-20T14:12:28.555073+00:00 heroku[router]: at=error code=H25 desc=\"HTTP restriction: oversized header\" method=GET path=\"/\" host=myapp.herokuapp.com request_id=ab66646e-84eb-47b8-b3bb-2031ecc1bc2c fwd=\"17.17.17.17\" dyno=web.1 connect=0 service=397 status=502 bytes=542\n
\n

Oversized status line

\n

The status line is judged too long (8kb) and the response is discarded on purpose.

\n
2014-03-20T13:54:44.423083+00:00 heroku[router]: at=error code=H25 desc=\"HTTP restriction: oversized status line\" method=GET path=\"/\" host=myapp.herokuapp.com request_id=208588ac-1a66-44c1-b665-fe60c596241b fwd=\"17.17.17.17\" dyno=web.1 connect=0 service=3 status=502 bytes=537\n
\n

H26 - Request Error

\n

This error is logged when a request has been identified as belonging to a specific Heroku application, but cannot be delivered entirely to a dyno due to HTTP protocol errors in the request. Multiple possible causes can be identified in the log message.

\n

Unsupported expect header value

\n

The request has an expect header, and its value is not 100-Continue, the only expect value handled by the router. A request with an unsupported expect value is terminated with the status code 417 Expectation Failed.

\n
2014-05-14T17:17:37.456997+00:00 heroku[router]: at=error code=H26 desc=\"Request Error\" cause=\"unsupported expect header value\" method=GET path=\"/\" host=myapp.herokuapp.com request_id=3f336f1a-9be3-4791-afe3-596a1f2a481f fwd=\"17.17.17.17\" dyno= connect= service= status=417 bytes=\n
\n

Bad header

\n

The request has an HTTP header with a value that is either impossible to parse, or not handled by the router, such as connection: ,.

\n
2014-05-14T17:17:37.456997+00:00 heroku[router]: at=error code=H26 desc=\"Request Error\" cause=\"bad header\" method=GET path=\"/\" host=myapp.herokuapp.com request_id=3f336f1a-9be3-4791-afe3-596a1f2a481f fwd=\"17.17.17.17\" dyno= connect= service= status=400 bytes=\n
\n

Bad chunk

\n

The request has a chunked transfer-encoding, but with a chunk that was invalid or couldn't be parsed correctly. A request with this status code will be interrupted during transfer to the dyno.

\n
2014-05-14T17:17:37.456997+00:00 heroku[router]: at=error code=H26 desc=\"Request Error\" cause=\"bad chunk\" method=GET path=\"/\" host=myapp.herokuapp.com request_id=3f336f1a-9be3-4791-afe3-596a1f2a481f fwd=\"17.17.17.17\" dyno=web.1 connect=1 service=0 status=400 bytes=537\n
\n

H27 - Client Request Interrupted

\n

The client socket was closed either in the middle of the request or before a response could be returned. For example, the client closed their browser session before the request was able to complete.

\n
2010-10-06T21:51:37-07:00 heroku[router]: sock=client at=warning code=H27 desc=\"Client Request Interrupted\" method=POST path=\"/submit/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno=web.1 connect=1ms service=0ms status=499 bytes=0\n
\n

H28 - Client Connection Idle

\n

The client did not send a full request and was terminated due to 55 seconds of inactivity. For example, the client indicated a Content-Length of 50 bytes which were not sent in time.

\n

2010-10-06T21:51:37-07:00 heroku[router]: at=warning code=H28 desc=\"Client Connection Idle\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno=web.1 connect=1ms service=55449ms status=499 bytes=18

\n

H31 - Misdirected Request

\n

The client sent a request to the wrong endpoint. This could be because the client used stale DNS information or is accessing the app through a CDN that has stale DNS information. Verify that DNS is correctly configured for your app. If a CDN is configured for the app, consider contacting your CDN provider.

\n

If you and your app users can successfully access the app in a browser (or however the app is used), this may not be cause for concern. The errors may be caused by clients (typically web-crawlers) with cached DNS entries trying to access a now-invalid endpoint or IP address for your app.

\n

You can verify the validity of user agent through the app log error message as shown in the example below:

\n
error code=H31 desc=\"Misdirected Request\" method=GET path=\"/\" host=[host.com] request_id=[guid] fwd=\"[IP]\" dyno= connect= service= status=421 bytes= protocol=http agent=\"<agent>\"\n
\n

H80 - Maintenance mode

\n

This is not an error, but we give it a code for the sake of completeness. Note the log formatting is the same but without the word \"Error\".

\n
2010-10-06T21:51:07-07:00 heroku[router]: at=info code=H80 desc=\"Maintenance mode\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno= connect= service= status=503 bytes=\n
\n

H81 - Blank app

\n

No code has been pushed to this application. To get rid of this message you need to do one deploy. This is not an error, but we give it a code for the sake of completeness.

\n
2010-10-06T21:51:07-07:00 heroku[router]: at=info code=H81 desc=\"Blank app\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno= connect= service= status=503 bytes=\n
\n

H82 - Free dyno quota exhausted

\n

This indicates that an account's free dyno hour quota is exhausted and that apps running free dynos are sleeping. You can view your app's free dyno usage in the Heroku dashboard.

\n
2015-10-06T21:51:07-07:00 heroku[router]: at=info code=H82 desc=\"Free dyno quota exhausted\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno= connect= service= status=503 bytes=\n
\n

H99 - Platform error

\n

H99 and R99 are the only error codes that represent errors in the Heroku platform.

\n

This indicates an internal error in the Heroku platform. Unlike all of the other errors which will require action from you to correct, this one does not require action from you. Try again in a minute, or check the status site.

\n
2010-10-06T21:51:07-07:00 heroku[router]: at=error code=H99 desc=\"Platform error\" method=GET path=\"/\" host=myapp.herokuapp.com fwd=17.17.17.17 dyno= connect= service= status=503 bytes=\n
\n

R10 - Boot timeout

\n

A web process took longer than 60 seconds to bind to its assigned $PORT. When this happens, the dyno's process is killed and the dyno is considered crashed. Crashed dynos are restarted according to the dyno manager's restart policy.

\n
2011-05-03T17:31:38+00:00 heroku[web.1]: State changed from created to starting\n2011-05-03T17:31:40+00:00 heroku[web.1]: Starting process with command: `bundle exec rails server -p 22020 -e production`\n2011-05-03T17:32:40+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch\n2011-05-03T17:32:40+00:00 heroku[web.1]: Stopping process with SIGKILL\n2011-05-03T17:32:40+00:00 heroku[web.1]: Process exited\n2011-05-03T17:32:41+00:00 heroku[web.1]: State changed from starting to crashed\n
\n

This error is often caused by a process being unable to reach an external resource, such as a database, or the application doing too much work, such as parsing and evaluating numerous, large code dependencies, during startup.

\n

Common solutions are to access external resources asynchronously, so they don't block startup, and to reduce the amount of application code or its dependencies.

\n

If your application requires more time to boot, you may use the boot timeout tool to increase the limit. However, in general, slow boot times will make it harder to deploy your application and will make recovery from dyno failures slower, so this should be considered a temporary solution.

\n

One exception is for apps using the Java buildpack, Gradle buildpack, heroku-deploy toolbelt plugin, or Heroku Maven plugin, which will be allowed 90 seconds to bind to their assigned port.

\n

R12 - Exit timeout

\n

A process failed to exit within 30 seconds of being sent a SIGTERM indicating that it should stop. The process is sent SIGKILL to force an exit.

\n
2011-05-03T17:40:10+00:00 app[worker.1]: Working\n2011-05-03T17:40:11+00:00 heroku[worker.1]: Stopping process with SIGTERM\n2011-05-03T17:40:11+00:00 app[worker.1]: Ignoring SIGTERM\n2011-05-03T17:40:14+00:00 app[worker.1]: Working\n2011-05-03T17:40:18+00:00 app[worker.1]: Working\n2011-05-03T17:40:21+00:00 heroku[worker.1]: Error R12 (Exit timeout) -> Process failed to exit within 30 seconds of SIGTERM\n2011-05-03T17:40:21+00:00 heroku[worker.1]: Stopping process with SIGKILL\n2011-05-03T17:40:21+00:00 heroku[worker.1]: Process exited\n
\n

R13 - Attach error

\n

A dyno started with heroku run failed to attach to the invoking client.

\n
2011-06-29T02:13:29+00:00 app[run.3]: Awaiting client\n2011-06-29T02:13:30+00:00 heroku[run.3]: State changed from starting to up\n2011-06-29T02:13:59+00:00 app[run.3]: Error R13 (Attach error) -> Failed to attach to process\n2011-06-29T02:13:59+00:00 heroku[run.3]: Process exited\n
\n

R14 - Memory quota exceeded

\n

A dyno requires memory in excess of its quota. If this error occurs, the dyno will page to swap space to continue running, which may cause degraded process performance. The R14 error is calculated by total memory swap, rss and cache.

\n
2011-05-03T17:40:10+00:00 app[worker.1]: Working\n2011-05-03T17:40:10+00:00 heroku[worker.1]: Process running mem=1028MB(103.3%)\n2011-05-03T17:40:11+00:00 heroku[worker.1]: Error R14 (Memory quota exceeded)\n2011-05-03T17:41:52+00:00 app[worker.1]: Working\n
\n

If you are getting a large number of R14 errors, your application performance is likely severely degraded. Resolving R14 memory errors are language specific:

\n\n

R15 - Memory quota vastly exceeded

\n

A dyno requires vastly more memory than its quota and is consuming excessive swap space. If this error occurs, the dyno will be forcibly killed with SIGKILL (which cannot be caught or handled) by the platform. The R15 error is calculated by total memory swap and rss; cache is not included.

\n
2011-05-03T17:40:10+00:00 app[worker.1]: Working\n2011-05-03T17:40:10+00:00 heroku[worker.1]: Process running mem=1029MB(201.0%)\n2011-05-03T17:40:11+00:00 heroku[worker.1]: Error R15 (Memory quota vastly exceeded)\n2011-05-03T17:40:11+00:00 heroku[worker.1]: Stopping process with SIGKILL\n2011-05-03T17:40:12+00:00 heroku[worker.1]: Process exited\n
\n

In Private Spaces, dynos exceeding their memory quota do not use swap space and thus do not emit R14 errors.

\n

Private Space dynos vastly exceeding their memory quota generally will emit R15 errors but occasionally the platform may shut down the dyno before the R15 is sent, causing the error to be dropped. If an R15 is emitted it will only be visible in the app log stream but not in the dashboard Application Metrics interface. Other non-R15 types of errors from Private Space dynos are correctly surfaced in the Application Metrics interface.

\n

For Private Space dynos vastly exceeding their memory quota the platform kills dyno processes consuming large amounts of memory, but may not kill the dyno itself.

\n

R16 - Detached

\n

An attached dyno is continuing to run after being sent SIGHUP when its external connection was closed. This is usually a mistake, though some apps might want to do this intentionally.

\n
2011-05-03T17:32:03+00:00 heroku[run.1]: Awaiting client\n2011-05-03T17:32:03+00:00 heroku[run.1]: Starting process with command `bash`\n2011-05-03T17:40:11+00:00 heroku[run.1]: Client connection closed. Sending SIGHUP to all processes\n2011-05-03T17:40:16+00:00 heroku[run.1]: Client connection closed. Sending SIGHUP to all processes\n2011-05-03T17:40:21+00:00 heroku[run.1]: Client connection closed. Sending SIGHUP to all processes\n2011-05-03T17:40:26+00:00 heroku[run.1]: Error R16 (Detached) -> An attached process is not responding to SIGHUP after its external connection was closed.\n
\n

R17 - Checksum error

\n

This indicates an error with runtime slug checksum verification. If the checksum does not match or there is another problem with the checksum when launch a dyno, an R17 error will occur and the dyno will fail to launch. Check the log stream for details about the error.

\n
2016-08-16T12:39:56.439438+00:00 heroku[web.1]: State changed from provisioning to starting\n2016-08-16T12:39:57.110759+00:00 heroku[web.1]: Error R17 (Checksum error) -> Checksum does match expected value. Expected: SHA256:ed5718e83475c780145609cbb2e4f77ec8076f6f59ebc8a916fb790fbdb1ae64 Actual: SHA256:9ca15af16e06625dfd123ebc3472afb0c5091645512b31ac3dd355f0d8cc42c1\n2016-08-16T12:39:57.212053+00:00 heroku[web.1]: State changed from starting to crashed\n
\n

If this error occurs, try deploying a new release with a correct checksum or rolling back to an older release. Ensure the checksum is formatted and calculated correctly with the SHA256 algorithm. The checksum must start with SHA256: followed by the calculated SHA256 value for the compressed slug. If you did not manually calculate the checksum and error continues to occur, please contact Heroku support.

\n

R99 - Platform error

\n

R99 and H99 are the only error codes that represent errors in the Heroku platform.

\n

This indicates an internal error in the Heroku platform. Unlike all of the other errors which will require action from you to correct, this one does not require action from you. Try again in a minute, or check the status site.

\n

L10 - Drain buffer overflow

\n
2013-04-17T19:04:46+00:00 d.1234-drain-identifier-567 heroku logplex - - Error L10 (output buffer overflow): 500 messages dropped since 2013-04-17T19:04:46+00:00.\n
\n

The number of log messages being generated has temporarily exceeded the rate at which they can be received by a drain consumer (such as a log management add-on) and Logplex, Heroku's logging system, has discarded some messages in order to handle the rate difference.

\n

A common cause of L10 error messages is the exhaustion of capacity in a log consumer. If a log management add-on or similar system can only accept so many messages per time period, your application may experience L10s after crossing that threshold.

\n

Another common cause of L10 error messages is a sudden burst of log messages from a dyno. As each line of dyno output (e.g. a line of a stack trace) is a single log message, and Logplex limits the total number of un-transmitted log messages it will keep in memory to 1024 messages, a burst of lines from a dyno can overflow buffers in Logplex. In order to allow the log stream to catch up, Logplex will discard messages where necessary, keeping newer messages in favor of older ones.

\n

You may need to investigate reducing the volume of log lines output by your application (e.g. condense multiple log lines into a smaller, single-line entry). You can also use the heroku logs -t command to get a live feed of logs and find out where your problem might be. A single dyno stuck in a loop that generates log messages can force an L10 error, as can a problematic code path that causes all dynos to generate a multi-line stack trace for some code paths.

\n

L11 - Tail buffer overflow

\n

A heroku logs --tail session cannot keep up with the volume of logs generated by the application or log channel, and Logplex has discarded some log lines necessary to catch up. To avoid this error you will need run the command on a faster internet connection (increase the rate at which you can receive logs) or you will need to modify your application to reduce the logging volume (decrease the rate at which logs are generated).

\n
2011-05-03T17:40:10+00:00 heroku[logplex]: L11 (Tail buffer overflow) -> This tail session dropped 1101 messages since 2011-05-03T17:35:00+00:00\n
\n

L12 - Local buffer overflow

\n

The application is producing logs faster than the local delivery process (log-shuttle) can deliver them to logplex and has discarded some log lines in order to keep up. If this error is sustained you will need to reduce the logging volume of your application.

\n
2013-11-04T21:31:32.125756+00:00 app[log-shuttle]: Error L12: 222 messages dropped since 2013-11-04T21:31:32.125756+00:00.\n
\n

L13 - Local delivery error

\n

The local log delivery process (log-shuttle) was unable to deliver some logs to Logplex and has discarded them. This can happen during transient network errors or during logplex service degradation. If this error is sustained please contact support.

\n
2013-11-04T21:31:32.125756+00:00 app[log-shuttle]: Error L13: 111 messages lost since 2013-11-04T21:31:32.125756+00:00.\n
\n

L14 - Certificate validation error

\n

The application is configured with a TLS syslog drain that doesn't have a valid TLS certificate.

\n

You should check that:

\n
    \n
  1. You're not using a self-signed certificate.
    2. \n
  2. The certificate is up to date.
    3. \n
  3. The certificate is signed by a known and trusted CA.
    4. \n
  4. The CN hostname embedded in the certificate matches the hostname being connected to.
    5. \n
\n
2015-09-04T23:28:48+00:00 heroku[logplex]: Error L14 (certificate validation): error=\"bad certificate\" uri=\"syslog+tls://logs.example.com:6514/\"\n
\n

L15 - Tail buffer temporarily unavailable

\n

The tail buffer that stores the last 1500 lines of your logs is temporarily unavailable. Run heroku logs again. If you still encounter the error, run heroku logs -t to stream your logs (which does not use the tail buffer).

"},{"url":"/docs/quick-reference/topRepos/","relativePath":"docs/quick-reference/topRepos.md","relativeDir":"docs/quick-reference","base":"topRepos.md","name":"topRepos","frontmatter":{"title":"Top Repos","weight":0,"seo":{"title":"Top Repos","description":"This is the Top Repos page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Top Repos","keyName":"property"},{"name":"og:description","value":"This is the Top Repos page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Top Repos"},{"name":"twitter:description","value":"This is the Top Repos page"}]},"template":"docs"},"html":"

My Top Repos / Websites:

\n\n

https://pages.databricks.com/rs/094-YMS-629/images/dynamic-time-warping-background.html

"},{"url":"/docs/quick-reference/pull-request-rubric/","relativePath":"docs/quick-reference/pull-request-rubric.md","relativeDir":"docs/quick-reference","base":"pull-request-rubric.md","name":"pull-request-rubric","frontmatter":{"title":"Pull Request Template","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Pull Requests

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ObjectiveDescription1-3 (Not Passing)4 (Passing)5-7 (Exceptional)
Clearly documents the motivation and what changedIs it clear why the pull request exists? Does it link to supporting documentation (user story, product roadmap, design) to give broader context? Is the code itself appropriately commented?The PR description is either blank or only contains the boilerplate PR template or unchecked checklist items. Code comments aren't used, even when they would be helpful.The PR description outlines the motivation for the feature and/or links to a user story or other document describing the purpose of the feature.The PR description includes a clear rationale for the feature, or a screenshot showing either the intended state or completed state of the feature, and gives additional context about changes made in the PR.
Atomic, well-named commitsDoes the pull request consist of small commits with clear titles? Do all commits have relevant and sensible messages of what was changed?Commits are not named appropriately. Commits have sensible messages. Example. \"Updated\", \"Fixed a bug\"Commits are well named. Commits have descriptive messages relevant to what changed. Some commits are not atomic.Commits are well named. Commits have descriptive messages. Each commit introduces atomic changes.
Appropriately ScopedIs the pull request small enough to review easily? Is it focused on solving a single cohesive problem?Pull request introduces multiple features or solves multiple problems. PR is unreasonably big with many changed files. Some code changes that are not related to the purpose of the PRPR is relatively small. PR has some minor changes not related to the feature or primary change being introduced.PR is focused on a single problem. PR is small enough and easy to review.
Adequately reviewedHas the pull request been reviewed by at least two team members? Your release manager will be the final reviewer of the pull request. Did they leave any comments or suggestions? Were those suggestions acted on?PR was merged by the same developer who requested it. The reviewer rejected PR with no comments. PR was initiated again and suggested changes were not addressed.At least two team members reviewed PRs. Appropriate comments were left in the PR. Suggestions were acted upon.PRs were reviewed by more than one team member. PR requests were sent to multiple reviewers. Active high-quality discussions are evident in PRs.
Code is clear and maintainableIs the code formatted appropriately? Is there dead code? logs and print statements have no place in your main branches! Are there instances of duplicate code? Does code have TODOs committed to main?Code has inconsistent formatting. Significant amount of dead code across the codebase. Multiple instances on TODOs in main. Significant amount of duplicated code.Code is consistently formatted. Functions are relatively small. Few instances of duplicate code. Few instances of dead code.Code is consistently formatted. Has config files to enforce linting and formatting. No instance on duplicate code.
Code is idiomaticDoes the code follow industry standards for the language, framework, and libraries used?Code consistently does not adhere to best practices for the language, framework or libraries used.Code has apparent minor deviations from industry standards.Code follows best practices of language, framework and libraries use. Effort has been made to improve on those practices.
"},{"url":"/docs/quick-reference/understanding-path/","relativePath":"docs/quick-reference/understanding-path.md","relativeDir":"docs/quick-reference","base":"understanding-path.md","name":"understanding-path","frontmatter":{"title":"Understanding PATH","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Understanding PATH

\n

\n

\n

When you run a command like python or pip, your operating system searches through a list of directories to find an executable file with that name. This list of directories lives in an environment variable called PATH, with each directory in the list separated by a colon:

\n

Directories in PATH are searched from left to right, so a matching executable in a directory at the beginning of the list takes precedence over another one at the end. In this example, the /usr/local/bin directory will be searched first, then /usr/bin, then /bin.

\n

Understanding Shims

\n

pyenv works by inserting a directory of shims at the front of your PATH:

\n

Through a process called rehashing, pyenv maintains shims in that directory to match every Python command across every installed version of Python---python, pip, and so on.

\n

Shims are lightweight executables that simply pass your command along to pyenv. So with pyenv installed, when you run, say, pip, your operating system will do the following:

\n
    \n
  • Search your PATH for an executable file named pip
    • \n
  • Find the pyenv shim named pip at the beginning of your PATH
    • \n
  • Run the shim named pip, which in turn passes the command along to pyenv
    • \n
\n

Choosing the Python Version

\n

When you execute a shim, pyenv determines which Python version to use by reading it from the following sources, in this order:

\n
    \n
  1. The PYENV_VERSION environment variable (if specified). You can use the pyenv shell command to set this environment variable in your current shell session.
    2. \n
  2. The application-specific .python-version file in the current directory (if present). You can modify the current directory's .python-version file with the pyenv local command.
    3. \n
  3. The first .python-version file found (if any) by searching each parent directory, until reaching the root of your filesystem.
    4. \n
  4. The global $(pyenv root)/version file. You can modify this file using the pyenv global command. If the global version file is not present, pyenv assumes you want to use the \"system\" Python. (In other words, whatever version would run if pyenv weren't in your PATH.)
    5. \n
\n

NOTE: You can activate multiple versions at the same time, including multiple versions of Python2 or Python3 simultaneously. This allows for parallel usage of Python2 and Python3, and is required with tools like tox. For example, to set your path to first use your system Python and Python3 (set to 2.7.9 and 3.4.2 in this example), but also have Python 3.3.6, 3.2, and 2.5 available on your PATH, one would first pyenv install the missing versions, then set pyenv global system 3.3.6 3.2 2.5. At this point, one should be able to find the full executable path to each of these using pyenv which, e.g. pyenv which python2.5 (should display $(pyenv root)/versions/2.5/bin/python2.5), or pyenv which python3.4 (should display path to system Python3). You can also specify multiple versions in a .python-version file, separated by newlines. Lines starting with a # are ignored.

\n

Locating the Python Installation

\n

Once pyenv has determined which version of Python your application has specified, it passes the command along to the corresponding Python installation.

\n

Each Python version is installed into its own directory under $(pyenv root)/versions.

\n

For example, you might have these versions installed:

\n
    \n
  • $(pyenv root)/versions/2.7.8/
    • \n
  • $(pyenv root)/versions/3.4.2/
    • \n
  • $(pyenv root)/versions/pypy-2.4.0/
    • \n
\n

As far as Pyenv is concerned, version names are simply directories under $(pyenv root)/versions.

\n

Managing Virtual Environments

\n

There is a pyenv plugin named pyenv-virtualenv which comes with various features to help pyenv users to manage virtual environments created by virtualenv or Anaconda. Because the activate script of those virtual environments are relying on mutating $PATH variable of user's interactive shell, it will intercept pyenv's shim style command execution hooks. We'd recommend to install pyenv-virtualenv as well if you have some plan to play with those virtual environments.

"},{"url":"/docs/quick-reference/psql-setup/","relativePath":"docs/quick-reference/psql-setup.md","relativeDir":"docs/quick-reference","base":"psql-setup.md","name":"psql-setup","frontmatter":{"title":"PostgreSQL Setup","weight":0,"excerpt":"PostgreSQL Setup","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

PostgreSQL Setup For Windows & WSL/Ubuntu

\n\n

If you follow this guide to a tee… you will install PostgreSQL itself on your Windows installation. Then, you will install psql in your…

\n
\n

PostgreSQL Setup For Windows & WSL/Ubuntu

\n
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`**.**\n

Important Distinction: PSQL is the frontend interface for PostgreSQL … they are not synonymous!

\n

Postgres, is a free and open-source relational database management system (RDBMS)

\n

PSQL:

\n

The primary front-end for PostgreSQL is the psql command-line program, which can be used to enter SQL queries directly, or execute them from a file.

\n

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.

\n

pgAdmin:

\n

The pgAdmin package is a free and open-source graphical user interface (GUI) administration tool for PostgreSQL.

\n

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.

\n

Other Noteworthy Distinctions:

\n
### Installing PostgreSQL 12\n

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.

\n

Open https://www.enterprisedb.com/downloads/postgres-postgresql-downloads. Click the link for PostgreSQL 12 for Windows x86-64.

\n
Once that installer downloads, run it. You need to go through the normal steps of installing software.\n
    \n
  • Yes, Windows, let the installer make changes to my device.
    • \n
  • Thanks for the welcome. Next.
    • \n
  • Yeah, that's a good place to install it. Next.
    • \n
  • I don't want that pgAdmin nor the Stack Builder things. Uncheck. Uncheck. Next.
    • \n
\n
- Also, great looking directory. Thanks. Next.\n

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!!!!!!!!!!!!!!!

\n

I REALLY CANNOT STRESS THE ABOVE POINT ENOUGH… Experience is a great teacher but in this case … it's not worth it.

\n
    \n
  • Sure. 5432. Good to go. Next.
    • \n
  • Not even sure what that means. Default! Next.
    • \n
  • Yep. Looks good. Next.
    • \n
\n

Insert pop culture reference to pass the time

\n

Installing PostgreSQL Client Tools on Ubuntu

\n

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.)

\n

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.

\n
wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -\n
\n

If prompted for your password, type it.

\n
echo \"deb http://apt.postgresql.org/pub/repos/apt/ `lsb_release -cs`-pgdg main\" | sudo tee  /etc/apt/sources.list.d/pgdg.list\n
\n

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.

\n

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.

\n
sudo apt update\n
\n

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.

\n
sudo apt install postgresql-client-12 postgresql-common\n
\n

If it asks you if you want to install them, please tell it “Y”.

\n

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.

\n

Configuring the client tools

\n

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.

\n

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.

\n

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.

\n

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.

\n
alias psql=\"psql -h localhost\"\n
\n

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.

\n

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.

\n
psql (12.2 (Ubuntu 12.2-2.pgdg18.04+1))\nType \"help\" for help.\n\npostgres=#\n
\n

Type \\q and hit Enter to exit the PostgreSQL client tool.

\n

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.

\n

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.

\n
psql -U postgres -c \"CREATE USER `whoami` WITH PASSWORD 'password' SUPERUSER\"\n
\n

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”.

\n

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.

\n
code ~/.pgpass\n
\n

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.

\n
localhost:5432:*:«your Ubuntu user name»:«the password you just used»\n
\n

Once you have that information in the file, save it, and close Visual Studio Code.

\n

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.

\n
chmod go-rw ~/.pgpass\n
\n

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\".

\n
-rw------- 1 web-dev-hub web-dev-hub 37 Mar 28 21:20 /home/web-dev-hub/.pgpass\n
\n

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.

\n

Installing Postbird

\n

Head over to the Postbird releases page on GitHub. Click the installer for Windows which you can recognize because it's the only file in the list that ends with “.exe”.

\n
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.\n
You should get used to seeing this because many open-source applications aren't signed with the Microsoft Store for monetary and philosophical reasons.\n

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.

\n
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\n

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.

\n

Now.. if you still have some gas in the tank… let's put our new tools to work:

\n

The node-postgres

\n

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.

\n

In our examples we also use the Ramda library. See Ramda tutorial for more information.

\n

Setting up node-postgres

\n

First, we install node-postgres.

\n

$ node -v
\nv14.2

\n

$ npm init -y

\n

We initiate a new Node application.

\n

npm i pg

\n

We install node-postgres with nmp i pg.

\n

npm i ramda

\n

In addition, we install Ramda for beautiful work with data.

\n

cars.sql

\n

DROP TABLE IF EXISTS cars;

\n

CREATE TABLE cars(id SERIAL PRIMARY KEY, name VARCHAR(255), price INT);
\nINSERT INTO cars(name, price) VALUES('Audi', 52642);
\nINSERT INTO cars(name, price) VALUES('Mercedes', 57127);
\nINSERT INTO cars(name, price) VALUES('Skoda', 9000);
\nINSERT INTO cars(name, price) VALUES('Volvo', 29000);
\nINSERT INTO cars(name, price) VALUES('Bentley', 350000);
\nINSERT INTO cars(name, price) VALUES('Citroen', 21000);
\nINSERT INTO cars(name, price) VALUES('Hummer', 41400);
\nINSERT INTO cars(name, price) VALUES('Volkswagen', 21600);

\n

In some of the examples, we use this cars table.

\n

The node-postgres first example

\n

In the first example, we connect to the PostgreSQL database and return a simple SELECT query result.

\n

first.js

\n
const pg = require('pg');\nconst R = require('ramda');\nconst cs = 'postgres://postgres:s$cret@localhost:5432/ydb';\nconst client = new pg.Client(cs);\nclient.connect();\nclient.query('SELECT 1 + 4').then(res => {\n\nconst result = R.head(R.values(R.head(res.rows)))\n\nconsole.log(result)\n}).finally(() => client.end());\n
\n

The example connects to the database and issues a SELECT statement.

\n
const pg = require('pg');\nconst R = require('ramda');\n
\n

We include the pg and ramda modules.

\n
const cs = 'postgres://postgres:s$cret@localhost:5432/ydb';\n
\n

This is the PostgreSQL connection string. It is used to build a connection to the database.

\n
const client = new pg.Client(cs);\nclient.connect();\n
\n

A client is created. We connect to the database with connect().

\n
client.query('SELECT 1 + 4').then(res => {\n\nconst result = R.head(R.values(R.head(res.rows)));\n\nconsole.log(result);\n\n}).finally(() => client.end());\n
\n

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().

\n
node first.js\n5\n
\n

This is the output.

\n

The node-postgres column names

\n

In the following example, we get the columns names of a database.

\n
\n

column_names.js

\n
\n
const pg = require('pg');\n\nconst cs = 'postgres://postgres:s$cret@localhost:5432/ydb';\n\nconst client = new pg.Client(cs);\n\nclient.connect();\n\nclient.query('SELECT * FROM cars').then(res => {\n\nconst fields = res.fields.map(field => field.name);\n\nconsole.log(fields);\n\n}).catch(err => {\nconsole.log(err.stack);\n}).finally(() => {\nclient.end()\n});\n
\n

The column names are retrieved with res.fields attribute. We also use the catch clause to output potential errors.

\n
node column_names.js\n'id', 'name', 'price'′id′,′name′,′price′\n
\n

The output shows three column names of the cars table.

\n

Selecting all rows

\n

In the next example, we select all rows from the database table.

\n
\n

all_rows.js

\n
\n
const pg = require('pg');\nconst R = require('ramda');\n\nconst cs = 'postgres://postgres:s$cret@localhost:5432/ydb';\n\nconst client = new pg.Client(cs);\n\nclient.connect();\n\nclient.query('SELECT * FROM cars').then(res => {\n\nconst data = res.rows;\n\nconsole.log('all data');\ndata.forEach(row => {\n    console.log(\\`Id: ${row.id} Name: ${row.name} Price: ${row.price}\\`);\n})\n\nconsole.log('Sorted prices:');\nconst prices = R.pluck('price', R.sortBy(R.prop('price'), data));\nconsole.log(prices);\n\n}).finally(() => {\nclient.end()\n});\n
\n

TBC…

\n

If you found this guide helpful feel free to checkout my github/gists where I host similar content:

\n

bgoonz's gists · GitHub

\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

\n

Or Checkout my personal Resource Site:

\n

Stackbit Web-Dev-HubTheme
\nMemoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…bgoonz-blog.netlify.app

\n

By Bryan Guner on March 6, 2021.

\n

Canonical link

\n

Exported from Medium on August 6, 2021.

"},{"url":"/docs/react/ajax-n-apis/","relativePath":"docs/react/ajax-n-apis.md","relativeDir":"docs/react","base":"ajax-n-apis.md","name":"ajax-n-apis","frontmatter":{"title":"AJAX and APIs","weight":0,"excerpt":"AJAX and APIs","seo":{"title":"AJAX and APIs","description":"You can use any AJAX library you like with React. Some popular ones are Axios, jQuery AJAX, and the browser built-in window.fetch.","robots":[],"extra":[]},"template":"docs"},"html":"

AJAX and APIs - React

\n
\n

Excerpt

\n

A JavaScript library for building user interfaces

\n
\n
\n

How can I make an AJAX call?

\n

You can use any AJAX library you like with React. Some popular ones are Axios, jQuery AJAX, and the browser built-in window.fetch.

\n

Where in the component lifecycle should I make an AJAX call?

\n

You should populate data with AJAX calls in the componentDidMount lifecycle method. This is so you can use setState to update your component when the data is retrieved.

\n

Example: Using AJAX results to set local state

\n

The component below demonstrates how to make an AJAX call in componentDidMount to populate local component state.

\n

The example API returns a JSON object like this:

\n
{\n  \"items\": [\n    { \"id\": 1, \"name\": \"Apples\",  \"price\": \"$2\" },\n    { \"id\": 2, \"name\": \"Peaches\", \"price\": \"$5\" }\n  ] \n}\n
\n
class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      error: null,\n      isLoaded: false,\n      items: []\n    };\n  }\n\n  componentDidMount() {\n    fetch(\"https://api.example.com/items\")\n      .then(res => res.json())\n      .then(\n        (result) => {\n          this.setState({\n            isLoaded: true,\n            items: result.items\n          });\n        },\n        \n        \n        \n        (error) => {\n          this.setState({\n            isLoaded: true,\n            error\n          });\n        }\n      )\n  }\n\n  render() {\n    const { error, isLoaded, items } = this.state;\n    if (error) {\n      return <div>Error: {error.message}</div>;\n    } else if (!isLoaded) {\n      return <div>Loading...</div>;\n    } else {\n      return (\n        <ul>\n          {items.map(item => (\n            <li key={item.id}>\n              {item.name} {item.price}\n            </li>\n          ))}\n        </ul>\n      );\n    }\n  }\n}\n
\n

Here is the equivalent with Hooks:

\n
function MyComponent() {\n  const [error, setError] = useState(null);\n  const [isLoaded, setIsLoaded] = useState(false);\n  const [items, setItems] = useState([]);\n\n  \n  \n  \n  useEffect(() => {\n    fetch(\"https://api.example.com/items\")\n      .then(res => res.json())\n      .then(\n        (result) => {\n          setIsLoaded(true);\n          setItems(result);\n        },\n        \n        \n        \n        (error) => {\n          setIsLoaded(true);\n          setError(error);\n        }\n      )\n  }, [])\n\n  if (error) {\n    return <div>Error: {error.message}</div>;\n  } else if (!isLoaded) {\n    return <div>Loading...</div>;\n  } else {\n    return (\n      <ul>\n        {items.map(item => (\n          <li key={item.id}>\n            {item.name} {item.price}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n}\n
"},{"url":"/docs/quick-reference/vscode-themes/","relativePath":"docs/quick-reference/vscode-themes.md","relativeDir":"docs/quick-reference","base":"vscode-themes.md","name":"vscode-themes","frontmatter":{"title":"vscode-themes","excerpt":"To make it easy to write documentation in plain Markdown, most vscode-themes are styled using Markdown elements with few additional CSS classes.","seo":{"title":"vscode-themes","description":"This is the vscode-themes page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"vscode-themes","keyName":"property"},{"name":"og:description","value":"This is the vscode-themes page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"vscode-themes"},{"name":"twitter:description","value":"This is the vscode-themes page"}]},"template":"docs"},"html":"

My Favorite VSCode Themes

\n

Themes

\n
\n

My Favorite VSCode Themes

\n

Product Icon Themes:

\n

Fluent Icons

\n

A product icon theme for Visual Studio Code

\n
Product icons themes 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 Fluent Icons.\n

Install

\n
    \n
  1. Install the icon theme from the Marketplace
    2. \n
  2. Open the command palette (Ctrl/Cmd + Shift + P) and search for Preferences: Product Icon Theme
    3. \n
  3. Select Fluent Icons
    4. \n
\n

TBC…

\n
\n

Monokai Oblique by pushqrdx

\n

Monokai inspired theme for Visual Studio Code and Visual Studio IDE.

\n
### Monokai Pro by monokai (commercial)\n

Beautiful functionality for professional developers, from the author of the original Monokai color scheme.

\n
### Night Owl by Sarah Drasner\n

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. ✨

\n
### Plastic by Will Stone\n

A simple theme.

\n
### Nord by arcticicestudio\n

An arctic, north-bluish clean and elegant Visual Studio Code theme.

\n
### Rainglow by Dayle Rees\n

Collection of 320+ beautiful syntax and UI themes.

\n
### Relaxed Theme by Michael Kühnel\n

A relaxed theme to take a more relaxed view of things.

\n
### Shades of Purple by Ahmad Awais\n

⚡ A professional theme with hand-picked & bold shades of purple 💜 to go along with your VS Code. A custom VS Code theme with style.

\n
### 2077 theme by Endormi\n

Cyberpunk 2077 inspired theme

\n
### An Old Hope Theme by Dustin Sanders\n

VSCode theme inspired by a galaxy far far away…

\n
### Ariake Dark by wart\n

Dark VSCode theme inspired by Japanese traditional colors and the poetry composed 1000 years ago.

\n
### Atom One Dark Theme by Mahmoud Ali\n

One Dark Theme based on Atom.

\n
### Atomize by emroussel\n

A detailed and accurate Atom One Dark Theme.

\n
### Ayu by teabyii\n

A simple theme with bright colors and comes in three versions — dark, light and mirage for all day long comfortable work.

\n
### Borealis Theme by Alexander Eckert\n

VS Code theme inspired by the calm colors of the aurora borealis in Alaska.

\n
### Captain Sweetheart by ultradracula\n

Tuff but sweet theme.

\n
### City Lights by Yummygum\n

🏙 Yummygum's Official City Lights suite

\n
### Cobalt2 Theme Official by Wes Bos\n

🔥 Official theme by Wes Bos.

\n
### Dracula Official by Dracula Theme\n

Official Dracula Theme. A dark theme for many editors, shells, and more.

\n
### Edge by Bogdan Lazar\n

A simple theme with bright colors in three variants — Night Sky, Serene and Ocean for all day long comfortable work.

\n
### Eva Theme by fisheva\n

A colorful and semantic coloring code theme.

\n
### Fairy Floss by nopjmp and sailorhg\n

A fun, purple-based pastel/candy/daydream fairyfloss theme made by sailorhg.

\n
### GitHub Theme by Thomas Pink\n

GitHub Theme for Visual Studio Code.

\n
### Jellybeans Theme by Dimitar Nonov\n

Jellybeans Theme for Visual Studio Code.

\n
### Material Palenight Theme by whizkydee\n

An elegant and juicy material-like theme for Visual Studio Code.

\n
### Material Theme by Mattia Astorino\n

The most epic theme now for Visual Studio Code.

\n
### Mno by u29dc\n

Minimal monochrome theme.

\n
### Slime Theme by smlombardi\n

A dark syntax/workbench theme for Visual Studio Code — optimized for SCSS, HTML, JS, TS, Markdown, and PHP files.

\n
### Niketa Theme by Dejan Toteff\n

Collection of 18 light themes separated in 4 groups by background's brightness.

\n
### If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:\n

bgoonz's gists
\nInstantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…gist.github.com

\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

\n

By Bryan Guner on March 18, 2021.

\n

Canonical link

\n

Exported from Medium on August 6, 2021.

"},{"url":"/docs/react/createReactApp/","relativePath":"docs/react/createReactApp.md","relativeDir":"docs/react","base":"createReactApp.md","name":"createReactApp","frontmatter":{"title":"npx-create-react-app","weight":0,"seo":{"title":"npx-create-react-app","description":"This is the npx-create-react-app page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"npx-create-react-app","keyName":"property"},{"name":"og:description","value":"This is the npx-create-react-app page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"npx-create-react-app"},{"name":"twitter:description","value":"This is the npx-create-react-app page"}]},"template":"docs"},"html":"
\n

description: takes soooo much time!

\n

Generating React Project

\n

takes soooo much time!

\n
npx create-react-app my-app\ncd my-app\nnpm start\n
\n

Babel can translate between different versions of javascript so that your code can run on browsers that are limited to ES5 compatibility... included by default with every new react project.

\n
|15:25:30|bryan@LAPTOP-9LGJ3JGS:[05-installing-nodejs] 05-installing-nodejs_exitstatus:0__________________________________________________________o>\n\nnpx create-react-app my-app\ny-app\nnpm start\nCreating a new React app in /mnt/c/MY-WEB-DEV/10-React-V3/05-installing-nodejs/my-app.\n\n\nInstalling packages. This might take a couple of minutes.\nInstalling react, react-dom, and react-scripts with cra-template...\n\nyarn add v1.22.5\n[1/4] Resolving packages...\n[2/4] Fetching packages...\ninfo fsevents@1.2.13: The platform \"linux\" is incompatible with this module.\ninfo \"fsevents@1.2.13\" is an optional dependency and failed compatibility check. Excluding it from installation.\ninfo fsevents@2.3.2: The platform \"linux\" is incompatible with this module.\ninfo \"fsevents@2.3.2\" is an optional dependency and failed compatibility check. Excluding it from installation.\n[3/4] Linking dependencies...\nwarning \"react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0\" has unmet peer dependency \"typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta\".\n[----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------[4/4] Building fresh packages...\nsuccess Saved lockfile.\nsuccess Saved 7 new dependencies.\ninfo Direct dependencies\n├─ cra-template@1.1.2\n├─ react-dom@17.0.2\n├─ react-scripts@4.0.3\n└─ react@17.0.2\ninfo All dependencies\n├─ cra-template@1.1.2\n├─ immer@8.0.1\n├─ react-dev-utils@11.0.4\n├─ react-dom@17.0.2\n├─ react-scripts@4.0.3\n├─ react@17.0.2\n└─ scheduler@0.20.2\nDone in 768.43s.\n\nInstalling template dependencies using yarnpkg...\nyarn add v1.22.5\n[1/4] Resolving packages...\n[2/4] Fetching packages...\ninfo fsevents@2.3.2: The platform \"linux\" is incompatible with this module.\ninfo \"fsevents@2.3.2\" is an optional dependency and failed compatibility check. Excluding it from installation.\ninfo fsevents@1.2.13: The platform \"linux\" is incompatible with this module.\ninfo \"fsevents@1.2.13\" is an optional dependency and failed compatibility check. Excluding it from installation.\n[3/4] Linking dependencies...\nwarning \"react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0\" has unmet peer dependency \"typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta\".\nwarning \" > @testing-library/user-event@12.8.3\" has unmet peer dependency \"@testing-library/dom@>=7.21.4\".\n[4/4] Building fresh packages...\nsuccess Saved lockfile.\nsuccess Saved 17 new dependencies.\ninfo Direct dependencies\n├─ @testing-library/jest-dom@5.11.10\n├─ @testing-library/react@11.2.5\n├─ @testing-library/user-event@12.8.3\n├─ react-dom@17.0.2\n├─ react@17.0.2\n└─ web-vitals@1.1.1\ninfo All dependencies\n├─ @testing-library/dom@7.30.1\n├─ @testing-library/jest-dom@5.11.10\n├─ @testing-library/react@11.2.5\n├─ @testing-library/user-event@12.8.3\n├─ @types/aria-query@4.2.1\n├─ @types/jest@26.0.22\n├─ @types/testing-library__jest-dom@5.9.5\n├─ css.escape@1.5.1\n├─ css@3.0.0\n├─ dom-accessibility-api@0.5.4\n├─ lz-string@1.4.4\n├─ min-indent@1.0.1\n├─ react-dom@17.0.2\n├─ react@17.0.2\n├─ redent@3.0.0\n├─ strip-indent@3.0.0\n└─ web-vitals@1.1.1\nDone in 706.12s.\nRemoving template package using yarnpkg...\n\nyarn remove v1.22.5\n[1/2] Removing module cra-template...\n[2/2] Regenerating lockfile and installing missing dependencies...\ninfo fsevents@2.3.2: The platform \"linux\" is incompatible with this module.\ninfo \"fsevents@2.3.2\" is an optional dependency and failed compatibility check. Excluding it from installation.\ninfo fsevents@1.2.13: The platform \"linux\" is incompatible with this module.\ninfo \"fsevents@1.2.13\" is an optional dependency and failed compatibility check. Excluding it from installation.\nwarning \" > @testing-library/user-event@12.8.3\" has unmet peer dependency \"@testing-library/dom@>=7.21.4\".\nwarning \"react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.20.0\" has unmet peer dependency \"typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta\".\nsuccess Uninstalled packages.\nDone in 619.62s.\n\nSuccess! Created my-app at /mnt/c/MY-WEB-DEV/10-React-V3/05-installing-nodejs/my-app\nInside that directory, you can run several commands:\n\n  yarn start\n    Starts the development server.\n\n  yarn build\n    Bundles the app into static files for production.\n\n  yarn test\n    Starts the test runner.\n\n  yarn eject\n    Removes this tool and copies build dependencies, configuration files\n    and scripts into the app directory. If you do this, you can't go back!\n\nWe suggest that you begin by typing:\n\n  cd my-app\n  yarn start\n\nCompiled successfully!\n\nYou can now view my-app in the browser.\n\n  Local:            http://localhost:3000\n  On Your Network:  http://172.25.168.12:3000\n\nNote that the development build is not optimized.\nTo create a production build, use yarn build.\n
"},{"url":"/docs/react/","relativePath":"docs/react/index.md","relativeDir":"docs/react","base":"index.md","name":"index","frontmatter":{"title":"React","excerpt":"To make it easy to write documentation in plain Markdown, most React are styled using Markdown elements with few additional CSS classes.","seo":{"title":"React","description":"This is the React page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"React","keyName":"property"},{"name":"og:description","value":"This is the React page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"React"},{"name":"twitter:description","value":"This is the React page"}]},"template":"docs"},"html":"

React

\n

Examples:

\n\n\n \n### For more resources visit:\n

bgoonz/ReactNotesV3A JavaScript library for building user interfaces React makes it painless to create interactive UIs. Design simple…github.com

\n

Use this appendix to get any prerequisite concepts and terminology under your belt:

\n

Here I will walk through a demo…. skip down below for more fundamental examples and resources…

\n

Learn Redux:

\n\n
\n\n

ALL CODE:

\n
\n

React Cheat Sheet:

\n

React-Tutorial-1:react-tutorial-1A React repl by bgoonzreplit.com

\n

React Boilerplate:React.js + Babel + Webpack BoilerplateCreated by @eankeen | The ultimate trifecta - React, Babel, and Webpack - complete with hot module reloading and a…replit.com

"},{"url":"/docs/react/dont-use-index-as-keys/","relativePath":"docs/react/dont-use-index-as-keys.md","relativeDir":"docs/react","base":"dont-use-index-as-keys.md","name":"dont-use-index-as-keys","frontmatter":{"title":"Index as a key is an anti-pattern","weight":0,"excerpt":"So many times I have seen developers use the index of an item as its key when they render a list.","seo":{"title":"Lists and Keys","description":"Let me explain, a _key_ is the only thing React uses to identify DOM elements. What happens if you push an item to the list or remove something in the middle? If the _key_ is same as before React assumes that the DOM element represents the same component as before. But that is no longer true.","robots":[],"extra":[]},"template":"docs"},"html":"

> ## Excerpt

\n
\n
\n
\n

Lists and Keys - React

\n
\n

Excerpt

\n

A JavaScript library for building user interfaces

\n
\n
\n

First, let’s review how you transform lists in JavaScript.

\n

Given the code below, we use the map() function to take an array of numbers and double their values. We assign the new array returned by map() to the variable doubled and log it:

\n
const numbers = [1, 2, 3, 4, 5];\nconst doubled = numbers.map((number) => number * 2);console.log(doubled);\n
\n

This code logs [2, 4, 6, 8, 10] to the console.

\n

In React, transforming arrays into lists of elements is nearly identical.

\n

Rendering Multiple Components

\n

You can build collections of elements and include them in JSX using curly braces {}.

\n

Below, we loop through the numbers array using the JavaScript map() function. We return a <li> element for each item. Finally, we assign the resulting array of elements to listItems:

\n
const numbers = [1, 2, 3, 4, 5];\nconst listItems = numbers.map((number) =>  <li>{number}</li>);\n
\n

We include the entire listItems array inside a <ul> element, and render it to the DOM:

\n
ReactDOM.render(\n  <ul>{listItems}</ul>,  document.getElementById('root')\n);\n
\n

Try it on CodePen

\n

This code displays a bullet list of numbers between 1 and 5.

\n

Basic List Component

\n

Usually you would render lists inside a component.

\n

We can refactor the previous example into a component that accepts an array of numbers and outputs a list of elements.

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>    <li>{number}</li>  );  return (\n    <ul>{listItems}</ul>  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,  document.getElementById('root')\n);\n
\n

When you run this code, you’ll be given a warning that a key should be provided for list items. A “key” is a special string attribute you need to include when creating lists of elements. We’ll discuss why it’s important in the next section.

\n

Let’s assign a key to our list items inside numbers.map() and fix the missing key issue.

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>\n    <li key={number.toString()}>      {number}\n    </li>\n  );\n  return (\n    <ul>{listItems}</ul>\n  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,\n  document.getElementById('root')\n);\n
\n

Try it on CodePen

\n

Keys

\n

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

\n
const numbers = [1, 2, 3, 4, 5];\nconst listItems = numbers.map((number) =>\n  <li key={number.toString()}>    {number}\n  </li>\n);\n
\n

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:

\n
const todoItems = todos.map((todo) =>\n  <li key={todo.id}>    {todo.text}\n  </li>\n);\n
\n

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:

\n
const todoItems = todos.map((todo, index) =>\n    <li key={index}>    {todo.text}\n  </li>\n);\n
\n

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

\n

Here is an in-depth explanation about why keys are necessary if you’re interested in learning more.

\n

Keys only make sense in the context of the surrounding array.

\n

For example, if you extract a ListItem component, you should keep the key on the <ListItem /> elements in the array rather than on the <li> element in the ListItem itself.

\n

Example: Incorrect Key Usage

\n
function ListItem(props) {\n  const value = props.value;\n  return (\n        <li key={value.toString()}>      {value}\n    </li>\n  );\n}\n\nfunction NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>\n        <ListItem value={number} />  );\n  return (\n    <ul>\n      {listItems}\n    </ul>\n  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,\n  document.getElementById('root')\n);\n
\n

Example: Correct Key Usage

\n
function ListItem(props) {\n    return <li>{props.value}</li>;}\n\nfunction NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>\n        <ListItem key={number.toString()} value={number} />  );\n  return (\n    <ul>\n      {listItems}\n    </ul>\n  );\n}\n\nconst numbers = [1, 2, 3, 4, 5];\nReactDOM.render(\n  <NumberList numbers={numbers} />,\n  document.getElementById('root')\n);\n
\n

Try it on CodePen

\n

A good rule of thumb is that elements inside the map() call need keys.

\n

Keys Must Only Be Unique Among Siblings

\n

Keys used within arrays should be unique among their siblings. However, they don’t need to be globally unique. We can use the same keys when we produce two different arrays:

\n
function Blog(props) {\n  const sidebar = (    <ul>\n      {props.posts.map((post) =>\n        <li key={post.id}>          {post.title}\n        </li>\n      )}\n    </ul>\n  );\n  const content = props.posts.map((post) =>    <div key={post.id}>      <h3>{post.title}</h3>\n      <p>{post.content}</p>\n    </div>\n  );\n  return (\n    <div>\n      {sidebar}      <hr />\n      {content}    </div>\n  );\n}\n\nconst posts = [\n  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},\n  {id: 2, title: 'Installation', content: 'You can install React from npm.'}\n];\nReactDOM.render(\n  <Blog posts={posts} />,\n  document.getElementById('root')\n);\n
\n

Try it on CodePen

\n

Keys serve as a hint to React but they don’t get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:

\n
const content = posts.map((post) =>\n  <Post\n    key={post.id}    id={post.id}    title={post.title} />\n);\n
\n

With the example above, the Post component can read props.id, but not props.key.

\n

Embedding map() in JSX

\n

In the examples above we declared a separate listItems variable and included it in JSX:

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  const listItems = numbers.map((number) =>    <ListItem key={number.toString()}              value={number} />  );  return (\n    <ul>\n      {listItems}\n    </ul>\n  );\n}\n
\n

JSX allows embedding any expression in curly braces so we could inline the map() result:

\n
function NumberList(props) {\n  const numbers = props.numbers;\n  return (\n    <ul>\n      {numbers.map((number) =>        <ListItem key={number.toString()}                  value={number} />      )}    </ul>\n  );\n}\n
\n

Try it on CodePen

\n

Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the map() body is too nested, it might be a good time to extract a component.

\n

So many times I have seen developers use the index of an item as its key when they render a list.

\n

todos.map((todo, index) => (
\n<Todo {...todo} key={index} />
\n));
\n}

\n

It looks elegant and it does get rid of the warning (which was the ‘real’ issue, right?). What is the danger here?

\n
\n

It may break your application and display wrong data!

\n
\n

Let me explain, a key is the only thing React uses to identify DOM elements. What happens if you push an item to the list or remove something in the middle? If the key is same as before React assumes that the DOM element represents the same component as before. But that is no longer true.

\n

\n

\n

Stephen describes the problem he run into on egghead.io

\n

To demonstrate the potential danger I created a simple example (with source).

\n

\n

Screenshot of the example showing the danger of using the index as key.

\n

It turns out, when nothing is passed React uses the index as key because it is the best guess at the moment. Moreover, it will warn you that it is suboptimal (it says that in a bit confusing words, yes). If you provide it by yourself React just thinks that you know what you are doing which — remember the example — can lead to unpredictable results.

\n

Better

\n

Each such item should have a permanent and unique property. Ideally, it should be assigned when the item is created. Of course, I am speaking about an id. Then we can use it the following way:

\n

{
\ntodos.map((todo) => (
\n<Todo {...todo} key={todo.id} />
\n));
\n}

\n
\n

Note: First look at the existing properties of the items. It is possible they already have something that can be used as an id.

\n
\n

One way to do so it to just move the numbering one step up in the abstraction. Using a global index makes sure any two items would have different ids.

\n

let todoCounter = 1;const createNewTodo = (text) => ({
\ncompleted: false,
\nid: todoCounter++,
\ntext
\n}

\n

Much better

\n

A production solution should use a more robust approach that would handle a distributed creation of items. For such, I recommend nanoid. It quickly generates short non-sequential url-friendly unique ids. The code could look like the following:

\n

import { nanoid } from 'nanoid';const createNewTodo = (text) => ({
\ncompleted: false,
\nid: nanoid(),
\ntext
\n}

\n
\n

TL;DR: Generate a unique id for every item and use it as key when rendering the list.

\n
\n

Update: Exception from the rule

\n

Many people asked if they always, always have to generate ids. Others have suggested use cases when using the index as a key seems justifiable.

\n

It is true that sometimes generating new ids is redundant and may be avoided. For example translation of license terms or list of contributors.

\n

To help you decide, I put together three conditions which these examples have in common:

\n
    \n
  1. the list and items are static-they are not computed and do not change;
    2. \n
  2. the items in the list have no ids;
    3. \n
  3. the list is never reordered or filtered.
    4. \n
\n

When all of them are met, you may safely use the index as a key.

\n

Update 2: React, Preact, and *react

\n

Although in this article I write about React, the problem is not exclusive to it. In similar libraries, like Preact, the danger is present, too. However, the effects can be different.

\n

See the following StackOverflow question, where the last element disappears. Also please note the explanation in the answers provided by the creator of Preact,

"},{"url":"/docs/react/cheatsheet/","relativePath":"docs/react/cheatsheet.md","relativeDir":"docs/react","base":"cheatsheet.md","name":"cheatsheet","frontmatter":{"title":"React Cheat Sheets:","weight":0,"excerpt":"cheat sheet","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

React Patterns:

\n\n

React Cheat Sheet

\n

React:

\n
    \n
  • <script src=\"https://unpkg.com/react@15/dist/react.js\"></script>
    • \n
  • $ npm install react --save
    • \n
  • $ bower install react --save
    • \n
\n

React DOM:

\n
    \n
  • <script src=\"https://unpkg.com/react-dom@15/dist/react-dom.js\"></script>
    • \n
  • $ npm install react-dom
    • \n
  • $ bower install react-dom --save
    • \n
\n

Rendering

\n

Rendering (ES5)

\n
ReactDOM.render(React.createElement(Link, { name: 'HackHall.com' }), document.getElementById('menu'));\n
\n

Rendering (ES5+JSX)

\n
ReactDOM.render(<Link name=\"HackHall.com\" />, document.getElementById('menu'));\n
\n

Server-side Rendering

\n
var ReactDOMServer = require('react-dom/server');\nReactDOMServer.renderToString(Link, { name: 'HackHall.com' });\nReactDOMServer.renderToStaticMarkup(Link, { name: 'HackHall.com' });\n
\n

Components

\n

ES5

\n
var Link = React.createClass({\n    displayName: 'Link',\n    render: function () {\n        return React.createElement('a', { className: 'btn', title: this.props.name }, 'Click ->', this.props.name);\n    }\n});\n
\n

ES5 + JSX

\n
var Link = React.createClass({\n    render: function () {\n        return (\n            <a className=\"btn\" title={this.props.name}>\n                Click -> this.props.name\n            </a>\n        );\n    }\n});\n
\n

ES6 + JSX

\n
class Link extends React.Component {\n    render() {\n        return (\n            <a className=\"btn\" title={this.props.name}>\n                Click -> this.props.name\n            </a>\n        );\n    }\n}\n
\n
\n
\n
npm install --save react       // declarative and flexible JavaScript library for building UI\nnpm install --save react-dom   // serves as the entry point of the DOM-related rendering paths\nnpm install --save prop-types  // runtime type checking for React props and similar objects\n
\n

// notes: don't forget the command lines

\n
/* *******************************************************************************************\n * REACT\n * https://reactjs.org/docs/react-api.html\n * ******************************************************************************************* */\n\n\n// Create and return a new React element of the given type.\n// Code written with JSX will be converted to use React.createElement().\n// You will not typically invoke React.createElement() directly if you are using JSX.\nReact.createElement(\n  type,\n  [props],\n  [...children]\n)\n\n// Clone and return a new React element using element as the starting point.\n// The resulting element will have the original element's props with the new props merged in shallowly.\nReact.cloneElement(\n  element,\n  [props],\n  [...children]\n)\n\n// Verifies the object is a React element. Returns true or false.\nReact.isValidElement(object)\n\nReact.Children  // provides utilities for dealing with the this.props.children opaque data structure.\n\n// Invokes a function on every immediate child contained within children with this set to thisArg.\nReact.Children.map(children, function[(thisArg)])\n\n// Like React.Children.map() but does not return an array.\nReact.Children.forEach(children, function[(thisArg)])\n\n// Returns the total number of components in children,\n// equal to the number of times that a callback passed to map or forEach would be invoked.\nReact.Children.count(children)\n\n// Verifies that children has only one child (a React element) and returns it.\n// Otherwise this method throws an error.\nReact.Children.only(children)\n\n// Returns the children opaque data structure as a flat array with keys assigned to each child.\n// Useful if you want to manipulate collections of children in your render methods,\n// especially if you want to reorder or slice this.props.children before passing it down.\nReact.Children.toArray(children)\n\n// The React.Fragment component lets you return multiple elements in a render() method without creating an additional DOM element\n// You can also use it with the shorthand <></> syntax.\nReact.Fragment\n\n\n/* *******************************************************************************************\n * REACT.COMPONENT\n * React.Component is an abstract base class, so it rarely makes sense to refer to React.Component\n * directly. Instead, you will typically subclass it, and define at least a render() method.\n * https://reactjs.org/docs/react-component.html\n * ******************************************************************************************* */\n\n\nclass Component extends React.Component {\n  // Will be called before it is mounted\n  constructor(props) {\n    // Call this method before any other statement\n    // or this.props will be undefined in the constructor\n    super(props);\n\n    // The constructor is also often used to bind event handlers to the class instance.\n    // Binding makes sure the method has access to component attributes like this.props and this.state\n    this.method = this.method.bind(this);\n\n    // The constructor is the right place to initialize state.\n    this.state = {\n      active: true,\n\n      // In rare cases, it's okay to initialize state based on props.\n      // This effectively “forks” the props and sets the state with the initial props.\n      // If you “fork” props by using them for state, you might also want to implement componentWillReceiveProps(nextProps)\n      // to keep the state up-to-date with them. But lifting state up is often easier and less bug-prone.\n      color: props.initialColor\n    };\n  }\n\n  // Enqueues changes to the component state and\n  // tells React that this component and its children need to be re-rendered with the updated state.\n  // setState() does not always immediately update the component. It may batch or defer the update until later.\n  // This makes reading this.state right after calling setState() a potential pitfall.\n  // Instead, use componentDidUpdate or a setState callback.\n  // You may optionally pass an object as the first argument to setState() instead of a function.\n  setState(updater[, callback]) { }\n\n  // Invoked just before mounting occurs (before render())\n  // This is the only lifecycle hook called on server rendering.\n  componentWillMount() { }\n\n  // Invoked immediately after a component is mounted.\n  // Initialization that requires DOM nodes should go here.\n  // If you need to load data from a remote endpoint, this is a good place to instantiate the network request.\n  // This method is a good place to set up any subscriptions. If you do that, don't forget to unsubscribe in componentWillUnmount().\n  componentDidMount() { }\n\n  // Invoked before a mounted component receives new props.\n  // If you need to update the state in response to prop changes (for example, to reset it),\n  // you may compare this.props and nextProps and perform state transitions using this.setState() in this method.\n  componentWillReceiveProps(nextProps) { }\n\n  // Let React know if a component's output is not affected by the current change in state or props.\n  // The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.\n  // shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true.\n  // This method is not called for the initial render or when forceUpdate() is used.\n  // Returning false does not prevent child components from re-rendering when their state changes.\n  shouldComponentUpdate(nextProps, nextState) { }\n\n  // Invoked just before rendering when new props or state are being received.\n  // Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render.\n  // Note that you cannot call this.setState() here; nor should you do anything else\n  // (e.g. dispatch a Redux action) that would trigger an update to a React component before componentWillUpdate() returns.\n  // If you need to update state in response to props changes, use componentWillReceiveProps() instead.\n  componentWillUpdate(nextProps, nextState) { }\n\n  // Invoked immediately after updating occurs. This method is not called for the initial render.\n  // Use this as an opportunity to operate on the DOM when the component has been updated.\n  // This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).\n  componentDidUpdate(prevProps, prevState) { }\n\n  // Invoked immediately before a component is unmounted and destroyed.\n  // Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests,\n  // or cleaning up any subscriptions that were created in componentDidMount().\n  componentWillUnmount() { }\n\n  // Error boundaries are React components that catch JavaScript errors anywhere in their child component tree,\n  // log those errors, and display a fallback UI instead of the component tree that crashed.\n  // Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.\n  componentDidCatch() { }\n\n  // This method is required.\n  // It should be pure, meaning that it does not modify component state,\n  // it returns the same result each time it's invoked, and\n  // it does not directly interact with the browser (use lifecycle methods for this)\n  // It must return one of the following types: react elements, string and numbers, portals, null or booleans.\n  render() {\n    // Contains the props that were defined by the caller of this component.\n    console.log(this.props);\n\n    // Contains data specific to this component that may change over time.\n    // The state is user-defined, and it should be a plain JavaScript object.\n    // If you don't use it in render(), it shouldn't be in the state.\n    // For example, you can put timer IDs directly on the instance.\n    // Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made.\n    // Treat this.state as if it were immutable.\n    console.log(this.state);\n\n    return (\n      <div>\n        {/* Comment goes here */}\n        Hello, {this.props.name}!\n      </div>\n    );\n  }\n}\n\n// Can be defined as a property on the component class itself, to set the default props for the class.\n// This is used for undefined props, but not for null props.\nComponent.defaultProps = {\n  color: 'blue'\n};\n\ncomponent = new Component();\n\n// By default, when your component's state or props change, your component will re-render.\n// If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().\n// Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().\ncomponent.forceUpdate(callback)\n\n\n/* *******************************************************************************************\n * REACT.DOM\n * The react-dom package provides DOM-specific methods that can be used at the top level of\n * your app and as an escape hatch to get outside of the React model if you need to.\n * Most of your components should not need to use this module.\n * https://reactjs.org/docs/react-dom.html\n * ******************************************************************************************* */\n\n\n// Render a React element into the DOM in the supplied container and return a reference\n// to the component (or returns null for stateless components).\nReactDOM.render(element, container[, callback])\n\n// Same as render(), but is used to hydrate a container whose HTML contents were rendered\n// by ReactDOMServer. React will attempt to attach event listeners to the existing markup.\nReactDOM.hydrate(element, container[, callback])\n\n// Remove a mounted React component from the DOM and clean up its event handlers and state.\n// If no component was mounted in the container, calling this function does nothing.\n// Returns true if a component was unmounted and false if there was no component to unmount.\nReactDOM.unmountComponentAtNode(container)\n\n// If this component has been mounted into the DOM, this returns the corresponding native browser\n// DOM element. This method is useful for reading values out of the DOM, such as form field values\n// and performing DOM measurements. In most cases, you can attach a ref to the DOM node and avoid\n// using findDOMNode at all.\nReactDOM.findDOMNode(component)\n\n// Creates a portal. Portals provide a way to render children into a DOM node that exists outside\n// the hierarchy of the DOM component.\nReactDOM.createPortal(child, container)\n\n\n/* *******************************************************************************************\n * REACTDOMSERVER\n * The ReactDOMServer object enables you to render components to static markup.\n * https://reactjs.org/docs/react-dom.html\n * ******************************************************************************************* */\n\n\n// Render a React element to its initial HTML. React will return an HTML string.\n// You can use this method to generate HTML on the server and send the markup down on the initial\n// request for faster page loads and to allow search engines to crawl your pages for SEO purposes.\nReactDOMServer.renderToString(element)\n\n// Similar to renderToString, except this doesn't create extra DOM attributes that React uses\n// internally, such as data-reactroot. This is useful if you want to use React as a simple static\n// page generator, as stripping away the extra attributes can save some bytes.\nReactDOMServer.renderToStaticMarkup(element)\n\n// Render a React element to its initial HTML. Returns a Readable stream that outputs an HTML string.\n// The HTML output by this stream is exactly equal to what ReactDOMServer.renderToString would return.\n// You can use this method to generate HTML on the server and send the markup down on the initial\n// request for faster page loads and to allow search engines to crawl your pages for SEO purposes.\nReactDOMServer.renderToNodeStream(element)\n\n// Similar to renderToNodeStream, except this doesn't create extra DOM attributes that React uses\n// internally, such as data-reactroot. This is useful if you want to use React as a simple static\n// page generator, as stripping away the extra attributes can save some bytes.\nReactDOMServer.renderToStaticNodeStream(element)\n\n\n/* *******************************************************************************************\n * TYPECHECKING WITH PROPTYPES\n * https://reactjs.org/docs/typechecking-with-proptypes.html\n * ******************************************************************************************* */\n\n\nimport PropTypes from 'prop-types';\n\nMyComponent.propTypes = {\n  // You can declare that a prop is a specific JS type. By default, these\n  // are all optional.\n  optionalArray: PropTypes.array,\n  optionalBool: PropTypes.bool,\n  optionalFunc: PropTypes.func,\n  optionalNumber: PropTypes.number,\n  optionalObject: PropTypes.object,\n  optionalString: PropTypes.string,\n  optionalSymbol: PropTypes.symbol,\n\n  // Anything that can be rendered: numbers, strings, elements or an array\n  // (or fragment) containing these types.\n  optionalNode: PropTypes.node,\n\n  // A React element.\n  optionalElement: PropTypes.element,\n\n  // You can also declare that a prop is an instance of a class. This uses\n  // JS's instanceof operator.\n  optionalMessage: PropTypes.instanceOf(Message),\n\n  // You can ensure that your prop is limited to specific values by treating\n  // it as an enum.\n  optionalEnum: PropTypes.oneOf(['News', 'Photos']),\n\n  // An object that could be one of many types\n  optionalUnion: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.instanceOf(Message)\n  ]),\n\n  // An array of a certain type\n  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),\n\n  // An object with property values of a certain type\n  optionalObjectOf: PropTypes.objectOf(PropTypes.number),\n\n  // An object taking on a particular shape\n  optionalObjectWithShape: PropTypes.shape({\n    color: PropTypes.string,\n    fontSize: PropTypes.number\n  }),\n\n  // You can chain any of the above with `isRequired` to make sure a warning\n  // is shown if the prop isn't provided.\n  requiredFunc: PropTypes.func.isRequired,\n\n  // A value of any data type\n  requiredAny: PropTypes.any.isRequired,\n\n  // You can also specify a custom validator. It should return an Error\n  // object if the validation fails. Don't `console.warn` or throw, as this\n  // won't work inside `oneOfType`.\n  customProp: function(props, propName, componentName) {\n    if (!/matchme/.test(props[propName])) {\n      return new Error(\n        'Invalid prop `' + propName + '` supplied to' +\n        ' `' + componentName + '`. Validation failed.'\n      );\n    }\n  },\n\n  // You can also supply a custom validator to `arrayOf` and `objectOf`.\n  // It should return an Error object if the validation fails. The validator\n  // will be called for each key in the array or object. The first two\n  // arguments of the validator are the array or object itself, and the\n  // current item's key.\n  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {\n    if (!/matchme/.test(propValue[key])) {\n      return new Error(\n        'Invalid prop `' + propFullName + '` supplied to' +\n        ' `' + componentName + '`. Validation failed.'\n      );\n    }\n  })\n};\n
\n
\n
\n

Advanced Components

\n

Options (ES5)

\n
    \n
  • propTypes object: Type validation in development mode
    • \n
  • getDefaultProps function(): object of default props
    • \n
  • getInitialState function(): object of the initial state
    • \n
\n

ES5:

\n
var Link = React.createClass({\n    propTypes: { name: React.PropTypes.string },\n    getDefaultProps: function () {\n        return { initialCount: 0 };\n    },\n    getInitialState: function () {\n        return { count: this.props.initialCount };\n    },\n    tick: function () {\n        this.setState({ count: this.state.count + 1 });\n    },\n    render: function () {\n        return React.createElement(\n            'a',\n            { className: 'btn', href: '#', title: this.props.name, onClick: this.tick.bind(this) },\n            'Click ->',\n            this.props.name ? this.props.name : 'webapplog.com',\n            ' (Clicked: ' + this.state.count + ')'\n        );\n    }\n});\n
\n

ES5 + JSX:

\n
var Link = React.createClass({\n    propTypes: { name: React.PropTypes.string },\n    getDefaultProps: function () {\n        return { initialCount: 0 };\n    },\n    getInitialState: function () {\n        return { count: this.props.initialCount };\n    },\n    tick: function () {\n        this.setState({ count: this.state.count + 1 });\n    },\n    render: function () {\n        return (\n            <a onClick={this.tick.bind(this)} href=\"#\" className=\"btn\" title={this.props.name}>\n                Click -> {this.props.name ? this.props.name : 'webapplog.com'}\n                (Clicked: {this.state.count})\n            </a>\n        );\n    }\n});\n
\n

ES6 + JSX:

\n
export class Link extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { count: props.initialCount };\n    }\n    tick() {\n        this.setState({ count: this.state.count + 1 });\n    }\n    render() {\n        return (\n            <a onClick={this.tick.bind(this)} href=\"#\" className=\"btn\" title={this.props.name}>\n                Click -> {this.props.name ? this.props.name : 'webapplog.com'}\n                (Clicked: {this.state.count})\n            </a>\n        );\n    }\n}\nLink.propTypes = { initialCount: React.PropTypes.number };\nLink.defaultProps = { initialCount: 0 };\n
\n

Lifecycle Events

\n

Modern React lifecycle methods (v16+)\n

\n

Legacy Lifecycle Events:

\n
    \n
  • componentWillMount function()
    • \n
  • componentDidMount function()
    • \n
  • componentWillReceiveProps function(nextProps)
    • \n
  • shouldComponentUpdate function(nextProps, nextState)-> bool
    • \n
  • componentWillUpdate function(nextProps, nextState)
    • \n
  • componentDidUpdate function(prevProps, prevState)
    • \n
  • componentWillUnmount function()
    • \n
\n

Sequence of lifecycle events:

\n

\n

Inspired by http://react.tips

\n

Special Props

\n
    \n
  • key: Unique identifier for an element to turn arrays/lists into hashes for better performance, e.g., key={id}
    • \n
  • ref: Reference to an element via this.refs.NAME, e.g., ref=\"email\" will create this.refs.email DOM node or ReactDOM.findDOMNode(this.refs.email)
    • \n
  • style: Accept an object of styles, instead of a string (immutable since v0.14), e.g., style={{color: red}}
    • \n
  • className: the HTML class attribute, e.g., className=\"btn\"
    • \n
  • htmlFor: the HTML for attribute, e.g., htmlFor=\"email\"
    • \n
  • dangerouslySetInnerHTML: raw HTML by providing an object with the key __html
    • \n
  • children: content of the element via this.props.children, e.g., this.props.children[0]
    • \n
  • data-NAME: custom attribute, e.g., data-tooltip-text=\"...\"
    • \n
\n

propTypes

\n

Types available under React.PropTypes:

\n
    \n
  • any
    • \n
  • array
    • \n
  • bool
    • \n
  • element
    • \n
  • func
    • \n
  • node
    • \n
  • number
    • \n
  • object
    • \n
  • string
    • \n
\n

To make required, append .isRequired.

\n

More methods:

\n
    \n
  • instanceOf(constructor)
    • \n
  • oneOf(['News', 'Photos'])
    • \n
  • oneOfType([propType, propType])
    • \n
\n

Custom Validation

\n
propTypes: {\n  customProp: function(props, propName, componentName) {\n    if (!/regExPattern/.test(props[propName])) {\n      return new Error('Validation failed!');\n    }\n  }\n}\n
\n

Component Properties and Methods

\n

Properties:

\n
    \n
  • this.refs: Lists components with a ref prop
    • \n
  • this.props: Any props passed to an element (immutable)
    • \n
  • this.state: State set by setState and getInitialState (muttable) — avoid setting state manually with this.state=...
    • \n
  • this.isMounted: Flag whether the element has a corresponding DOM node or not
    • \n
\n

Methods:

\n
    \n
  • setState(changes): Change state (partially) to this.state and trigger re-render
    • \n
  • replaceState(newState): Replace this.state and trigger re-render
    • \n
  • forceUpdate(): Trigger DOM re-render immediately
    • \n
\n

React Addons

\n

As npm modules:

\n\n

React Components

\n"},{"url":"/docs/react/jsx/","relativePath":"docs/react/jsx.md","relativeDir":"docs/react","base":"jsx.md","name":"jsx","frontmatter":{"title":"Introducing JSX","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Introducing JSX\n\n

\n

Consider this variable declaration:

\n

This funny tag syntax is neither a string nor HTML.

\n

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

\n

JSX produces React “elements”. We will explore rendering them to the DOM in the next section. Below, you can find the basics of JSX necessary to get you started.

\n

Why JSX?

\n

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

\n

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. We will come back to components in a further section, but if you're not yet comfortable putting markup in JS, this talk might convince you otherwise.

\n

React doesn't require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

\n

With that out of the way, let's get started!

\n

Embedding Expressions in JSX

\n

In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces:

\n

You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions.

\n

In the example below, we embed the result of calling a JavaScript function, formatName(user), into an <h1> element.

\n

Try it on CodePen

\n

We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.

\n

JSX is an Expression Too

\n

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

\n

This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:

\n

Specifying Attributes with JSX

\n

You may use quotes to specify string literals as attributes:

\n

You may also use curly braces to embed a JavaScript expression in an attribute:

\n

Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.

\n
\n

Warning:

\n
\n
\n
\n
\n

Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

\n
\n
\n
\n
\n

For example, class becomes className in JSX, and tabindex becomes tabIndex.

\n
\n

Specifying Children with JSX

\n

If a tag is empty, you may close it immediately with />, like XML:

\n

JSX tags may contain children:

\n

JSX Prevents Injection Attacks

\n

It is safe to embed user input in JSX:

\n

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

\n

JSX Represents Objects

\n

Babel compiles JSX down to React.createElement() calls.

\n

These two examples are identical:

\n

React.createElement() performs a few checks to help you write bug-free code but essentially it creates an object like this:

\n

These objects are called “React elements”. You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.

\n

We will explore rendering React elements to the DOM in the next section.

\n
\n

Tip:

\n
\n
\n
\n
\n

We recommend using the “Babel” language definition for your editor of choice so that both ES6 and JSX code is properly highlighted.

\n
"},{"url":"/docs/react/demo/","relativePath":"docs/react/demo.md","relativeDir":"docs/react","base":"demo.md","name":"demo","frontmatter":{"title":"React Class Components Demo","weight":0,"excerpt":"React Class Components Demo","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

React Class Components Demo

\n

React Demo

\n
    \n
  • ex1 — A Basic React Component
    • \n
  • ex2 — A Basic React Class Component
    • \n
  • ex3 — A Class Component with State
    • \n
  • ex4 — A Class Component that Updates State
    • \n
  • ex5 — A Class Component that Iterates through State
    • \n
  • ex6 — An Example of Parent and Child Components
    • \n
\n

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,

\n
    \n
  • as well as think about what the general hierarchical component structure of your site will look like.
    • \n
  • 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.
    • \n
  • Any methods that are needed for that component to function properly can added onto your new component.
    • \n
\n

Once you've refactored your HTML components into React components, you'll want to lay them out in the desired hierarchical structure

\n
    \n
  • 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.
    • \n
\n

ex.)

\n
<!-- Hello world -->\n<div class=\"awesome\" style=\"border: 1px solid red\">\n  <label for=\"name\">Enter your name: </label>\n  <input type=\"text\" id=\"name\" />\n</div>\n<p>Enter your HTML here</p>\n
\n

Is equivalent to:

\n
let NewComponent = React.createClass({\n    render: function () {\n        return (\n            <div>\n                {/* Hello world */}\n                <div className=\"awesome\" style={{ border: '1px solid red' }}>\n                    <label htmlFor=\"name\">Enter your name: </label>\n                    <input type=\"text\" id=\"name\" />\n                </div>\n                <p>Enter your HTML here</p>\n            </div>\n        );\n    }\n});\n
\n

A Basic Component

\n

Acomponent 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.…

\n

React doesn't place any restrictions on how large or small a component can be.

\n

You could have an entire static site encapsulated in a single React component, but that would defeat the purpose of using React.

\n

So the first thing to remember about a component is that a component must render something.

\n

If nothing is being rendered from a component, then React will throw an error.

\n

Inside of BasicComponent.js , first import React at the top of the file. Our most basic of components looks like this:

\n
import React from 'react';\n\nconst BasicComponent = () => <div>Hello World!</div>;\n\nexport default BasicComponent;\n
\n
\n

This is a component that simply returns a div tag with the words Hello World! inside.

\n

The last line simply exports our component so that it can be imported
\nby another file.

\n
\n

Notice that this component looks exactly like an anonymous arrow function that we've named BasicComponent .

\n

In fact, that is literally what this is.

\n

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.

\n

A Basic Class Component

\n

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.

\n

Functional components are great when all you want a component to do is to render some stuff.

\n

Components can also be written as classes (although this paradigm is becoming outdated and you should strive to write your components functionally!

\n

For this exercise, we're going to write a class component that does exactly the same thing as the functional component we just wrote.

\n

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:

\n
import React, { Component } from 'react';\n
\n

So, in addition to importing React, we're also importing the base Component class that is included in the React library.

\n

React lets you define components as classes or functions.

\n

Components defined as classes currently provide more features . To define a React component class, you need to extend React.Component:

\n
class Welcome extends React.Component {\n    render() {\n        return <h1>Hello, {this.props.name}</h1>;\n    }\n}\n
\n

The only method you must define in a React.Component subclass is called ``.

\n

render()

\n

The render() method is the only required method in a class component.

\n

When called, it should examine this.props and this.state and return one of the following types:

\n
    \n
  • React elements. Typically created via JSX. For example, <div /> and <MyComponent /> are React elements that instruct React to render a DOM node, or another user-defined component, respectively.
    • \n
  • Arrays and fragments. Let you return multiple elements from render. See the documentation on fragments for more details.
    • \n
  • Portals. Let you render children into a different DOM subtree. See the documentation on portals for more details.
    • \n
  • String and numbers. These are rendered as text nodes in the DOM.
    • \n
  • Booleans or null. Render nothing. (Mostly exists to support return test && <Child /> pattern, where test is boolean.)
    • \n
\n

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.

\n

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.

\n
\n

Note

\n

* will not be invoked if* [](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) returns false.

\n
\n

The export statement at the bottom of the file also stays, completely unchanged. Our class component will thus look like this:

\n
import React, { Component } from 'react';\n\nclass BasicClassComponent extends Component {\n    render() {\n        return <div>Hello World!</div>;\n    }\n}\n\nexport default BasicClassComponent;\n
\n

Notice that our BasicClassComponent inherits from the base Component class that we imported from the React library, by virtue of the 'extends' keyword.

\n

That being said, there's nothing in this minimal component that takes advantage of any of those inherited methods.

\n

All we have is a method on our component class called render that returns the same div tag.

\n

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.

\n

This is because class components are much better suited for handling component state and triggering events based on the component's lifecycle.

\n

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.

\n

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.

\n

A Class Component with Some State

\n

Component state is any dynamic data that we want the component to keep track of.

\n
\n

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?

\n
\n

The answer is by using component state!

\n

There are a few important concepts regarding component state, such as how to update it, pass it to another component, render it, etc.

\n

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.

\n
\n

It is possible to handle state with functional components but that requires the use of something called the useState() hook. Hooks were added in React 16.8; prior to this release, there was no mechanism to add state to functional components.

\n
\n

Here's what the above component looks like as a functional component:

\n

Our class component with state will look a lot like the basic class component we just wrote, but with some exceptions:

\n
import React, { Component } from 'react';\n\nclass ClassComponentWithState extends Component {\n    constructor() {\n        super();\n        this.state = {};\n    }\n\n    render() {\n        return <div>Hello World!</div>;\n    }\n}\n\nexport default ClassComponentWithState;\n
\n

So far, the only new thing going on here is the constructor block. If you recall how classes in JavaScript work, classes need constructors.

\n

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.

\n

Point being, the constructor function and the call to the super function are not associated with React, they are associated with all JavaScript classes.

\n
    \n
  • Then there is the ``** property inside the constructor function that is set as an empty object**.
    • \n
  • We're adding a property called state to our class and setting it to an empty object.
    • \n
\n

State objects in React are always just plain old objects.

\n

So why is it that the basic class component we wrote in the previous exercise had no constructor function within its body?

\n

That is because we had no need for them since all our class component was doing was rendering some HTML.

\n

The constructor is needed here because that is where we need to initialize our state object.

\n

The call to super is needed because we can't reference this inside of our constructor without a call to super first.

\n

Ok, now let's actually use this state object.

\n

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.

\n

Refactoring our component class to do that:

\n
class ClassComponentWithState extends Component {\n    constructor() {\n        super();\n        this.state = {\n            someData: 8\n        };\n    }\n\n    render() {\n        return <div>{`Here's some data to render: ${this.state.someData}`}</div>;\n    }\n}\n\nexport default ClassComponentWithState;\n
\n

We added a key-value pair to our state object inside our constructor.

\n
    \n
  • Then we changed the contents of the render function.
    • \n
  • Now, it's actually rendering the data that we have inside the state object.
    • \n
  • 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.
    • \n
\n

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:

\n
class ClassComponentWithState extends Component {\n    state = {\n        someData: 8\n    };\n\n    render() {\n        return <div>{`Here's some data to render: ${this.state.someData}`}</div>;\n    }\n}\n\nexport default ClassComponentWithState;\n
\n

\n

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.

\n

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.

\n

Class Component Updating State

\n

Great, so we can render some state that our component persists for us.

\n

However, we said an important use case of component state is to handle dynamic data.

\n

A single static number isn't very dynamic at all.

\n

So now let's walk through how to update component state.

\n
import React, { Component } from 'react';\n\nclass ClassComponentUpdatingState extends Component {\n    constructor() {\n        super();\n        this.state = {\n            aNumber: 8\n        };\n    }\n\n    increment = () => {\n        this.setState({ aNumber: ++this.state.aNumber });\n    };\n\n    decrement = () => {\n        this.setState({ aNumber: --this.state.aNumber });\n    };\n\n    render() {\n        return (\n            <div>\n                <div>{`Our number: ${this.state.aNumber}`}</div>\n                <button onClick={this.increment}>+</button>\n                <button onClick={this.decrement}>-</button>\n            </div>\n        );\n    }\n}\n\nexport default ClassComponentUpdatingState;\n
\n

Notice that we've added two methods to our class: increment and decrement .

\n

increment and decrement are methods that we are adding to our class component.

\n

Unlike the render method, increment and decrement were not already a part of our class component.

\n

This is why increment and decrement are written as arrow functions, so that they are automatically bound to our class component.

\n

The alternative is using a declaration syntax function with the bind method to bind the context of our methods to the class component.

\n

The more interesting thing is what is going on within the bodies of these methods.

\n

Each calls the setState function.

\n
    \n
  • setState in fact is provided to us by React.
    • \n
\n

It is the standard way to update a component's state.

\n

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.

\n

Unlike the lifecycle methods above (which React calls for you), the methods below are the methods you can call from your components.

\n

There are just two of them: setState() and forceUpdate().

\n

setState()

\n
setState(updater, [callback])\n
\n

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.

\n

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

\n

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the updater argument below.

\n

setState() will always lead to a re-render unless shouldComponentUpdate() returns false. If mutable objects are being used and conditional rendering logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

\n

The first argument is an updater function with the signature:

\n
(state, props) => stateChange\n
\n

state is a reference to the component state at the time the change is being applied. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from state and props. For instance, suppose we wanted to increment a value in state by props.step:

\n
this.setState((state, props) => {\n  return {counter: state.counter + props.step};\n});\n
\n

Both state and props received by the updater function are guaranteed to be up-to-date. The output of the updater is shallowly merged with state.

\n

The second parameter to setState() is an optional callback function that will be executed once setState is completed and the component is re-rendered. Generally we recommend using componentDidUpdate() for such logic instead.

\n

You may optionally pass an object as the first argument to setState() instead of a function:

\n
setState(stateChange[, callback])\n
\n

This performs a shallow merge of stateChange into the new state, e.g., to adjust a shopping cart item quantity:

\n
this.setState({quantity: 2})\n
\n

This form of setState() is also asynchronous, and multiple calls during the same cycle may be batched together. For example, if you attempt to increment an item quantity more than once in the same cycle, that will result in the equivalent of:

\n
Object.assign(\n  previousState,\n  {quantity: state.quantity + 1},\n  {quantity: state.quantity + 1},\n  ...\n)\n
\n

Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the current state, we recommend using the updater function form, instead:

\n
this.setState((state) => {\n  return {quantity: state.quantity + 1};\n});\n
\n

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.

\n

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 \".

\n

The same thing happens in our decrement method, only we're subtracting instead of adding.

\n

Then the other new concept we're running into here is how to actually call these methods we've added to our class.

\n

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.

\n

Class Component Iterating State

\n

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.

\n
\n

This is often used in order to render lists.

\n
\n

Additionally, we want to be able to easily update lists and have React re-render our updated list.

\n

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.

\n
import React, { Component } from 'react';\n\nclass ClassComponentIteratingState extends Component {\n    constructor() {\n        super();\n\n        this.state = {\n            ingredients: ['flour', 'eggs', 'milk', 'sugar', 'vanilla extract'],\n            newIngredient: ''\n        };\n    }\n\n    handleIngredientInput = (event) => {\n        this.setState({ newIngredient: event.target.value });\n    };\n\n    addIngredient = (event) => {\n        event.preventDefault();\n        const ingredientsList = this.state.ingredients;\n        ingredientsList.push(this.state.newIngredient);\n        this.setState({\n            newIngredient: '',\n            ingredients: ingredientsList\n        });\n    };\n\n    render() {\n        return (\n            <div>\n                {this.state.ingredients.map((ingredient) => (\n                    <div>{ingredient}</div>\n                ))}\n                <form onSubmit={this.addIngredient}>\n                    <input type=\"text\" onChange={this.handleIngredientInput} placeholder=\"Add a new ingredient\" value={this.state.newIngredient} />\n                </form>\n            </div>\n        );\n    }\n}\n\nexport default ClassComponentIteratingState;\n
\n

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.

\n

The ingredients array contains the elements that we'll want to render in our list.

\n

The addIngredient and handleIngredientInput methods we've added to our class receives a parameter called 'event'.

\n

This event object is part of the browser's API.

\n

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.

\n
    \n
  • 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.
    • \n
  • 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.
    • \n
  • Every character the user types gets persisted in the newIngredient field on the state object.
    • \n
\n

We're able to grab the text in the input box using event.target.value

\n

Which holds the value of the string text that is currently in the input box.

\n
\n

We use that to update our newIngredient string field.

\n
\n

Breaking down the addIngredient method, we see this event.preventDefault() invocation.

\n

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).

\n
\n

event.preventDefault() will prevent this default form behavior, meaning our form will only do what we want it to do when it is submitted.

\n
\n

\n

Next, we store a reference to this.state.ingredients in a variable called ingredientsList .

\n

So we now have a copy of the array that is stored in our state object.

\n

We want to update the copy of the ingredients array first instead of directly updating the actual array itself in state.

\n

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.

\n

So all we have to do now is call setState appropriately in order to update the value in our state object.

\n

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.

\n

Now it's ready to accept more user input!

\n

\n

\n

Looking at our render function, first note the this.state.ingredients.map call.

\n

This is looping through each ingredient in our ingredients array and returning each one within its own div tag.

\n

This is a very common pattern for rendering everything inside an array.

\n

Then we have an HTML form which contains an input field.

\n

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.

\n

This means that our addIngredient method gets invoked whenever our form is submitted.

\n

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.

\n

\n

Notice that the value field in our input tag reads off of this.state.newIngredient in order to know what value to display.

\n

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.

\n

Parent and Child Components

\n

A single isolated component isn't going to do us much good.

\n
\n

The beauty of React lies in the fact that it allows us to compose modular components together.

\n

Let's start off with the component we just saw, but let's change its name to `` .

\n
\n
import React, { Component } from 'react';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends Component {\n    constructor() {\n        super();\n\n        this.state = {\n            ingredients: ['flour', 'eggs', 'milk', 'sugar', 'vanilla'],\n            newIngredient: ''\n        };\n    }\n\n    handleIngredientInput = (event) => {\n        this.setState({ newIngredient: event.target.value });\n    };\n\n    addIngredient = (event) => {\n        event.preventDefault();\n        const ingredientsList = this.state.ingredients;\n        ingredientsList.push(this.state.newIngredient);\n        this.setState({\n            newIngredient: '',\n            ingredients: ingredientsList\n        });\n    };\n\n    render() {\n        return (\n            <div>\n                {this.state.ingredients.map((ingredient) => (\n                    <ChildComponent thing={ingredient} />\n                ))}\n                <form onSubmit={this.addIngredient}>\n                    <input type=\"text\" onChange={this.handleIngredientInput} placeholder=\"Add a new ingredient\" value={this.state.newIngredient} />\n                </form>\n            </div>\n        );\n    }\n}\n\nexport default ParentComponent;\n
\n

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.

\n

ChildComponent is another React component.

\n

Notice that we're using it just as if it were any other HTML tag.

\n

This is how we lay out our component hierarchy: the ChildComponent is rendered within the ParentComponent.

\n

We can see this to be the case if we open up the developer console and inspect these elements.child-left: parent-right

\n

\n

Note also that we're passing each ingredient as a 'thing' to the ChildComponent component.

\n

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.

\n

Conceptually though, every piece of data that a parent component passes down to a child component is called a 'prop' in React lingo.

\n

Let's take a look now at the Child Component. It serves two purposes:

\n
    \n
  1. to render the props data that it gets from a parent component,
    2. \n
  2. to add the ability for a user to click on it and have it toggle a strikethrough, indicating that the item is 'complete'.
    3. \n
\n
import React, { Component } from 'react';\n\nclass ChildComponent extends Component {\n    constructor() {\n        super();\n        this.state = {\n            clicked: false\n        };\n    }\n\n    handleClick = () => {\n        this.setState({ clicked: !this.state.clicked });\n    };\n\n    render() {\n        const styles = this.state.clicked ? { textDecoration: 'line-through' } : { textDecoration: 'none' };\n        return (\n            <div style={styles} onClick={this.handleClick}>\n                {this.props.thing}\n            </div>\n        );\n    }\n}\n\nexport default ChildComponent;\n
\n

The overall structure of the child component is nothing we haven't seen. It's just another class component with its own state object and a method called handleClick .

\n

A component accesses its props via the this.props object.

\n

Any prop a parent component passes down to a child component is accessible inside the child component's this.prop object.

\n

So our child component keeps its own state that tracks whether the component has been clicked or not.

\n

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.

\n

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.

\n

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

\n

Core Concepts:

\n

1. What is react?

\n

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It uses components to update and render as your data changes.

\n
\n

React manages the creation and continuous updating of DOM nodes in your Web page.

\n
\n
    \n
  • It does not handle AJAX 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.
    • \n
\n

2. Why use react?

\n
    \n
  • Works for teams and helps UI workflow patterns
    • \n
  • The components can be reusable
    • \n
  • Componentized UI is the future of web dev
    • \n
\n

\n

Declarative programming

\n

In the same way that you use HTML to declare what the user interface should
\nlook like, React provides the same mechanism in its `` method or the higher-level language known as JSX.React… like HTML is Declarative

\n

Declarative programming is often defined as any style of programming that is not imperative.

\n

A number of other common definitions attempt to define it by simply contrasting it with imperative programming. For example:

\n
    \n
  • A high-level program that describes what a computation should perform.
    • \n
  • Any programming language that lacks side effects
    • \n
  • A language with a clear correspondence to mathematical logic.[5]
    • \n
\n

These definitions overlap substantially.

\n

Declarative 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.

\n

Functional and logical programming languages are characterized by a declarative programming style.

\n

In a pure functional language, such as Haskell, all functions are without side effects, and state changes are only represented as functions that transform the state, which is explicitly represented as a first-class object in the program.

\n

— Wikipedia

\n

What is a React pure component?

\n

Based on the concept of purity in functional programming paradigms, a function is said to be pure if:

\n
    \n
  • Its return value is only determined by its input values
    • \n
  • Its return value is always the same for the same input values
    • \n
\n

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.

\n

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.

\n

Are React functional components pure?

\n

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.

\n

However, functional components cannot leverage the performance improvements and render optimizations that come with React.PureComponent since they are not classes by definition.

\n

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.

\n
function PercentageStat({ label, score = 0, total = Math.max(1, score) }) {\n    return (\n        <div>\n            <h6>{label}</h6>\n            <span>{Math.round((score / total) * 100)}%</span>\n        </div>\n    );\n}\n\n// CONVERTED TO PURE COMPONENT\nclass PercentageStat extends React.PureComponent {\n    render() {\n        const { label, score = 0, total = Math.max(1, score) } = this.props;\n\n        return (\n            <div>\n                <h6>{label}</h6>\n                <span>{Math.round((score / total) * 100)}%</span>\n            </div>\n        );\n    }\n}\n
\n

Reusability

\n

React encourages you to think in terms of reusability as you construct the user
\ninterface from elements and components that you create. When you
\nmake 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.

\n

Component-Based

\n

Build encapsulated components that manage their own state, then compose them to make complex UIs.

\n

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.

\n

Learn Once, Write Anywhere

\n

We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

\n

React can also render on the server using Node and power mobile apps using React Native.

\n

Speed

\n

Due to the use of a virtual DOM, React handles changes to a Web page more
\nintelligently than just string manipulation. It is constantly monitors the
\nvirtual DOM for changes. It very efficiently reconciles changes in the virtual
\nDOM with what it has already produced in the real DOM. This is what
\nmakes React one of the speediest front-end libraries available.

\n

3. Who uses react?

\n
    \n
  • Companies such as Facebook app for android and Instagram
    • \n
  • Here is a link to a list of other companies who use react.
    • \n
\n

Who uses react

\n

4. Setting up react

\n
    \n
  • React can be set up in CodePen for quick practice development by adding react.js, react-dom and babel.
    • \n
  • It can also be set up by downloading a react starter project from GitHub installing node and following these instructions.
    • \n
  • Alternatively it can be set up through NPM like this.
    • \n
\n

5. Intro to eco system

\n
    \n
  • Composition, being able to wrap up sections of code into there own containers so they can be re used.
    • \n
  • How to make a large application? by combining small components to create a larger complex application.
    • \n
\n

6. Imperative vs Declarative (React is Declarative)

\n
    \n
  • Imperative, 'telling to computer HOW to do something' e.g looping over an array of numbers using a for loop.
    • \n
  • Declarative, is concerned about WHAT we want to happen. e.g using a reduce method on an array.
    • \n
  • Benefits of using declarative code:
    • \n
  • Reduce side effects
    • \n
  • Minimize mutability
    • \n
  • Less Bugs
    • \n
\n

7. Unidirectional Data Flow

\n
    \n
  • As the state collects from user interaction, the UI gets updated.
    • \n
  • Explicit Mutations
    • \n
  • Whenever the state needs to be updated in our application setState has to be called.
    • \n
\n
this.setState({\n  highlight: !this.state.highlight,\n})\n
\n

7.1. First component

\n
    \n
  • Components are the building blocks of React.
    • \n
  • They are similar to a collection of HTML,CSS, JS and data specific to that component.
    • \n
  • They can be defined in pure JavaScript or JSX.
    • \n
  • Data is either received from a component's parent component, or it's contained in the component itself.
    • \n
  • Applications can be separated into smaller components like this…
    • \n
  • React components can be created using ES6 class like this.
    • \n
\n
import React from 'react';class Hello extends React.Component {\n  render () {\n    return <h1>Hello, {this.props.name}!</h1>;\n  }\n}export default Hello;\n
\n
    \n
  • At the top with have the code to bring react and react dom libraries in.
    • \n
  • React library is used for the react syntax.
    • \n
  • React DOM is used to update the DOM.
    • \n
  • We then have the Class section which creates the component.
    • \n
  • Render() describes the specific UI for the component.
    • \n
  • Return is used to return the JSX
    • \n
  • And Finally ReactDOM.render is used to update the DOM.
    • \n
\n

8. Data flow with props

\n

Small examples of data flow, see if you can get the code to work.

\n

https://codepen.io/bgoonz/embed/WNpoLbg?default-tab=&theme-id=

\n

{% embed url=\"https://codepen.io/bgoonz/embed/BaWQGQp?default-tab=\\&theme-id=\" %}

\n

9. Creating lists with map

\n

{% embed url=\"https://codepen.io/bgoonz/embed/XWMNoJr?default-tab=\\&theme-id=\" %}

\n

The parent component passes down to the child component as props.

\n

Using props to access names and map to loop through each list item. Then passing this by using props.

\n

{% embed url=\"https://codepen.io/bgoonz/embed/gOmLZbX?default-tab=\\&theme-id=\" %}

\n

Checking data to see if Boolean is true then adding detail to the list.

\n

{% embed url=\"https://codepen.io/bgoonz/embed/WNpoLbg?default-tab=\\&theme-id=\" %}

\n

10. Prop types

\n

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.

\n

Excerpt from the React website:

\n

React — A JavaScript library for building user interfaces

\n
\n

A JavaScript library for building user interfaces

\n
\n

Declarative

\n

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.

\n

Declarative views make your code more predictable and easier to debug.

\n

A Simple Component

\n

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.

\n

JSX is optional and not required to use React. Try the Babel REPL to see the raw JavaScript code produced by the JSX compilation step.

\n

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().

\n

An Application

\n

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.

\n

A Component Using External Plugins

\n

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.

"},{"url":"/docs/react/quiz/","relativePath":"docs/react/quiz.md","relativeDir":"docs/react","base":"quiz.md","name":"quiz","frontmatter":{"title":"React Quiz Questions","weight":0,"excerpt":"cheat sheet","seo":{"title":"React Quiz Questions","description":"Of course, if you get a DOM node for the component via refs, you can do anything you want with the DOM nodes of other components, but it will likely mess up React.","robots":[],"extra":[]},"template":"docs"},"html":"

What we know:

\n

A top-level App component returns <Button /> from its render() method.

\n

Question:

\n
\n

What is the relationship between <Button /> and this in that Button’s render()?

\n
\n

Answer:

\n

<Button> is a React \"element\".
\nIf you log it, you will see a plain object like { type: Button, props: {} }.

\n

The element does not represent anything on the screen at that point.
\nIt is a description of what App wants to be rendered.

\n

At some point, React will look at that description and think: “Hmm, there was no Button here but now there should be. So I’ll create a Button instance.”

\n

This Button instance created by React is this value in the render() and lifecycle methods. It’s only useful for calling setState() or reading the props and state.

\n

If App gets re-rendered and React sees a <Button /> in its output again, it will think: “Hmm, I already have a Button instance exactly at the same spot. Rather than create a new one, I will just update props on the existing one and re-render it.”

\n

Let’s recap.

\n

<Button /> is an element, a description of what should be rendered. this inside the Button is the actual instance React created based on that description.

\n

App can return a different <Button /> element every time but as long as its key doesn’t change, and it is still a <Button /> and not a <Door />, React will keep using the same instance.

\n

Question:

\n
\n

Does rendering <Button><Icon /></Button> guarantee that an Icon mounts?

\n
\n

It doesn’t. Ultimately it’s always up to the component to decide what to do with its children. For example, the Button implementation could completely ignore them and render something else:

\n
function Button(props) {\n  return <h1>I render whatever I want</h1>\n}\n
\n

Interestingly, it could also render children multiple times:

\n
function Button(props) {\n  return (\n    <div>\n      I like to repeat things.\n      {props.children}\n      {props.children}\n      {props.children}\n    </div>\n  );\n}\n
\n

Ultimately, children is not a special prop in any way except for JSX sugar syntax. <Button><Icon /></Button> is technically the same as <Button children={<Icon />} />, and it’s up to the component how to treat its input props.

\n

Question:

\n
\n

Can the App change anything in the Button output? What and how?

\n
\n

Answer:

\n

There have been a few fun answers in the quiz comments so I will direct you to them. Indeed, since JavaScript doesn't provide any guarantees, technically you can hijack Button before React gets a chance to render it.

\n

However, normally there is no way for a parent component to control the child output except by two mechanisms: passing props and providing context. You probably already know about props, and I won’t talk about the context because it’s an experimental API and has a few pitfalls. Don’t use context in apps unless you know its pitfalls well.

\n

Of course, if you get a DOM node for the component via refs, you can do anything you want with the DOM nodes of other components, but it will likely mess up React.

\n

React.js

\n

Q1. If you want to import just the Component from the React library, what syntax do you use?

\n
    \n
  • import React.Component from 'react'
    • \n
  • import [ Component ] from 'react'
    • \n
  • import Component from 'react'
    • \n
  • [✅] import { Component } from 'react'
    • \n
\n

Q2. If a function component should always render the same way given the same props, what is a simple performance optimization available for it?

\n
    \n
  • [✅] Wrap it in the React.memo higher-order component.
    • \n
  • Implement the useReducer Hook.
    • \n
  • Implement the useMemo Hook.
    • \n
  • Implement the shouldComponentUpdate lifecycle method.
    • \n
\n

Q3. How do you fix the syntax error that results from running this code?

\n
const person =(firstName, lastName) =>\n{\n  first: firstName,\n  last: lastName\n}\nconsole.log(person(\"Jill\", \"Wilson\"))\n
\n
    \n
  • [✅] Wrap the object in parentheses.
    • \n
  • Call the function from another file.
    • \n
  • Add a return statement before the first curly brace.
    • \n
  • Replace the object with an array.
    • \n
\n

Q4. If you see the following import in a file, what is being used for state management in the component?

\n

import React, {useState} from 'react';

\n
    \n
  • [✅] React Hooks
    • \n
  • stateful components
    • \n
  • math
    • \n
  • class components
    • \n
\n

Q5. Using object literal enhancement, you can put values back into an object. When you log person to the console, what is the output?

\n
const name = \"Rachel\";\nconst age = 31;\nconst person = { name, age };\nconsole.log(person);\n
\n
    \n
  • {{name: \"Rachel\", age: 31}}
    • \n
  • [✅] {name: \"Rachel\", age: 31}
    • \n
  • {person: \"Rachel\", person: 31}}
    • \n
  • {person: {name: \"Rachel\", age: 31}}
    • \n
\n

Q6. What is the testing library most often associated with React?

\n
    \n
  • Mocha
    • \n
  • Chai
    • \n
  • Sinon
    • \n
  • [✅] Jest
    • \n
\n

Q7. To get the first item from the array (\"cooking\") using array destructuring, how do you adjust this line?

\n
const topics = [\"cooking\", \"art\", \"history\"];\n
\n
    \n
  • const first = [\"cooking\", \"art\", \"history\"]
    • \n
  • const [] = [\"cooking\", \"art\", \"history\"]
    • \n
  • const [, first][\"cooking\", \"art\", \"history\"]
    • \n
  • [✅] const [first] = [\"cooking\", \"art\", \"history\"]
    • \n
\n

Q8. How do you handle passing through the component tree without having to pass props down manually at every level?

\n
    \n
  • React Send
    • \n
  • React Pinpoint
    • \n
  • React Router
    • \n
  • [✅] React Context
    • \n
\n

Q9. What should the console read when the following code is run?

\n
const [, , animal] = [\"Horse\", \"Mouse\", \"Cat\"];\nconsole.log(animal);\n
\n
    \n
  • Horse
    • \n
  • [✅] Cat
    • \n
  • Mouse
    • \n
  • undefined
    • \n
\n

10. What is the name of the tool used to take JSX and turn it into createElement calls?

\n
    \n
  • JSX Editor
    • \n
  • ReactDOM
    • \n
  • Browser Buddy
    • \n
  • [✅] Babel
    • \n
\n

11. Why might you use useReducer over useState in a React component?

\n
    \n
  • when you want to replace Redux
    • \n
  • [✅] when you need to manage more complex state in an app
    • \n
  • when you want to improve performance
    • \n
  • when you want to break your production app
    • \n
\n

12. Which props from the props object is available to the component with the following syntax?

\n
<Message {...props} />\n
\n
    \n
  • any that have not changed
    • \n
  • [✅] all of them
    • \n
  • child props
    • \n
  • any that have changed
    • \n
\n

13. Consider the following code from React Router. What do you call :id in the path prop?

\n
<Route path=\"/:id\" />\n
\n
    \n
  • This is a route modal
    • \n
  • [✅] This is a route parameter
    • \n
  • This is a route splitter
    • \n
  • This is a route link
    • \n
\n

14. If you created a component called Dish and rendered it to the DOM, what type of element would be rendered?

\n
function Dish() {\n  return <h1>Mac and Cheese</h1>;\n}\n\nReactDOM.render(<Dish />, document.getElementById(\"root\"));\n
\n
    \n
  • div
    • \n
  • section
    • \n
  • component
    • \n
  • [✅] h1
    • \n
\n

15. What does this React element look like given the following function? (Alternative: Given the following code, what does this React element look like?)

\n
React.createElement(\"h1\", null, \"What's happening?\");\n
\n
    \n
  • <h1 props={null}>What's happening?</h1>
    • \n
  • [✅] <h1>What's happening?</h1>
    • \n
  • <h1 id=\"component\">What's happening?</h1>
    • \n
  • <h1 id=\"element\">What's happening?</h1>
    • \n
\n

16. What property do you need to add to the Suspense component in order to display a spinner or loading state?

\n
function MyComponent() {\n  return (\n    <Suspense>\n      <div>\n        <Message />\n      </div>\n    </Suspense>\n  );\n}\n
\n
    \n
  • lazy
    • \n
  • loading
    • \n
  • [✅] fallback
    • \n
  • spinner
    • \n
\n

17. What do you call the message wrapped in curly braces below?

\n
const message = \"Hi there\";\nconst element = <p>{message}</p>;\n
\n
    \n
  • a JS function
    • \n
  • a JS element
    • \n
  • [✅] a JS expression
    • \n
  • a JSX wrapper
    • \n
\n

18. What can you use to handle code splitting?

\n
    \n
  • React.memo
    • \n
  • React.split
    • \n
  • [✅] React.lazy
    • \n
  • React.fallback
    • \n
\n

19. When do you use useLayoutEffect?

\n
    \n
  • to optimize for all devices
    • \n
  • to complete the update
    • \n
  • to change the layout of the screen
    • \n
  • [✅] when you need the browser to paint before the effect runs
    • \n
\n

20. What is the difference between the click behaviors of these two buttons (assuming that this.handleClick is bound correctly)?

\n
A. <button onClick={this.handleClick}>Click Me</button>\nB. <button onClick={event => this.handleClick(event)}>Click Me</button>\n
\n
    \n
  • Button A will not have access to the event object on click of the button.
    • \n
  • Button B will not fire the handler this.handleClick successfully.
    • \n
  • Button A will not fire the handler this.handleClick successfully.
    • \n
  • [✅] There is no difference.
    • \n
\n

21. How do you destructure the properties that are sent to the Dish component?

\n
function Dish(props) {\n  return (\n    <h1>\n      {props.name} {props.cookingTime}\n    </h1>\n  );\n}\n
\n
    \n
  • function Dish([name, cookingTime]) { return <h1>{name} {cookingTime}</h1>; }
    • \n
  • [✅] function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; }
    • \n
  • function Dish(props) { return <h1>{name} {cookingTime}</h1>; }
    • \n
  • function Dish(...props) { return <h1>{name} {cookingTime}</h1>; }
    • \n
\n

22. When might you use React.PureComponent?

\n
    \n
  • when you do not want your component to have props
    • \n
  • when you have sibling components that need to be compared
    • \n
  • [✅] when you want a default implementation of shouldComponentUpdate()
    • \n
  • when you do not want your component to have state
    • \n
\n

23. Why is it important to avoid copying the values of props into a component's state where possible?

\n
    \n
  • because you should never mutate state
    • \n
  • because getDerivedStateFromProps() is an unsafe method to use
    • \n
  • [✅] because you want to allow a component to update in response to changes in the props
    • \n
  • because you want to allow data to flow back up to the parent
    • \n
\n

24. What is the children prop?

\n
    \n
  • a property that adds child components to state
    • \n
  • [✅] a property that lets you pass components as data to other components
    • \n
  • a property that lets you set an array as a property
    • \n
  • a property that lets you pass data to child elements
    • \n
\n

25. Which attribute do you use to replace innerHTML in the browser DOM?

\n
    \n
  • injectHTML
    • \n
  • [✅] dangerouslySetInnerHTML
    • \n
  • weirdSetInnerHTML
    • \n
  • strangeHTML
    • \n
\n

26. Which of these terms commonly describe React applications?

\n
    \n
  • [✅] declarative
    • \n
  • integrated
    • \n
  • closed
    • \n
  • imperative
    • \n
\n

27. When using webpack, why would you need to use a loader?

\n
    \n
  • to put together physical file folders
    • \n
  • [✅] to preprocess files
    • \n
  • to load external data
    • \n
  • to load the website into everyone's phone
    • \n
\n

28. A representation of a user interface that is kept in memory and is synced with the \"real\" DOM is called what?

\n
    \n
  • [✅] virtual DOM
    • \n
  • DOM
    • \n
  • virtual elements
    • \n
  • shadow DOM
    • \n
\n

29. You have written the following code but nothing is rendering. How do you fix this problem?

\n
const Heading = () => {\n  <h1>Hello!</h1>;\n};\n
\n
    \n
  • Add a render function.
    • \n
  • [✅] Change the curly braces to parentheses or add a return statement before the h1 tag.
    • \n
  • Move the h1 to another component.
    • \n
  • Surround the h1 in a div.
    • \n
\n

Q30. To create a constant in JavaScript, which keyword do you use?

\n
    \n
  • [✅] const
    • \n
  • let
    • \n
  • constant
    • \n
  • var
    • \n
\n

Q31. What do you call a React component that catches JavaScript errors anywhere in the child component tree?

\n
    \n
  • error bosses
    • \n
  • error catchers
    • \n
  • error helpers
    • \n
  • [✅] error boundaries
    • \n
\n

Q32. In which lifecycle method do you make requests for data in a class component?

\n
    \n
  • constructor
    • \n
  • [✅] componentDidMount
    • \n
  • componentWillReceiveProps
    • \n
  • componentWillMount
    • \n
\n

Q33. React components are composed to create a user interface. How are components composed?

\n
    \n
  • by putting them in the same file
    • \n
  • [✅] by nesting components
    • \n
  • with webpack
    • \n
  • with code splitting
    • \n
\n

Q34. All React components must act like _ with respect to their props.

\n
    \n
  • monads
    • \n
  • [✅] pure functions
    • \n
  • recursive functions
    • \n
  • higher-order functions
    • \n
\n

Q35. Why might you use a ref?

\n
    \n
  • [✅] to directly access the DOM node
    • \n
  • to refer to another JS file
    • \n
  • to call a function
    • \n
  • to bind the function
    • \n
\n

Q36. What is [e.target.id] called in the following code snippet?

\n
handleChange(e) {\n  this.setState({ [e.target.id]: e.target.value })\n}\n
\n
    \n
  • a computed property name
    • \n
  • a set value
    • \n
  • [✅] a dynamic key
    • \n
  • a JSX code string
    • \n
\n

Q37. What is the name of this component?

\n
class Clock extends React.Component {\n  render() {\n    return <h1>Look at the time: {time}</h1>;\n  }\n}\n
\n
    \n
  • [✅] Clock
    • \n
  • It does not have a name prop.
    • \n
  • React.Component
    • \n
  • Component
    • \n
\n

Q38. What is sent to an Array.map() function?

\n
    \n
  • [✅] a callback function that is called once for each element in the array
    • \n
  • the name of another array to iterate over
    • \n
  • the number of times you want to call the function
    • \n
  • a string describing what the function should do
    • \n
\n

Q39. Why is it a good idea to pass a function to setState instead of an object?

\n
    \n
  • It provides better encapsulation.
    • \n
  • It makes sure that the object is not mutated.
    • \n
  • It automatically updates a component.
    • \n
  • [✅] setState is asynchronous and might result in out of sync values.
    • \n
\n

Q40. What package contains the render() function that renders a React element tree to the DOM?

\n
    \n
  • React
    • \n
  • [✅] ReactDOM
    • \n
  • Render
    • \n
  • DOM
    • \n
\n

Q41. How do you set a default value for an uncontrolled form field?

\n
    \n
  • Use the value property.
    • \n
  • [✅] Use the defaultValue property.
    • \n
  • Use the default property.
    • \n
  • It assigns one automatically.
    • \n
\n

Q42. What do you need to change about this code to get it to run?

\n
class clock extends React.Component {\n  render() {\n    return <h1>Look at the time: {this.props.time}</h1>;\n  }\n}\n
\n
    \n
  • Add quotes around the return value
    • \n
  • Remove this
    • \n
  • Remove the render method
    • \n
  • [✅] Capitalize clock
    • \n
\n

Explanation: In JSX, lower-case tag names are considered to be HTML tags. Read this article

\n

Q43. Which Hook could be used to update the document's title?

\n
    \n
  • [✅] useEffect(function updateTitle() { document.title = name + ' ' + lastname; });
    • \n
  • useEffect(() => { title = name + ' ' + lastname; });
    • \n
  • useEffect(function updateTitle() { name + ' ' + lastname; });
    • \n
  • useEffect(function updateTitle() { title = name + ' ' + lastname; });
    • \n
\n

Q44. What can you use to wrap Component imports in order to load them lazily?

\n
    \n
  • React.fallback
    • \n
  • React.split
    • \n
  • [✅] React.lazy
    • \n
  • React.memo
    • \n
\n

Q45. How do you invoke setDone only when component mounts, using hooks?

\n
function MyComponent(props) {\n  const [done, setDone] = useState(false);\n\n  return <h1>Done: {done}</h1>;\n}\n
\n
    \n
  • useEffect(() => { setDone(true); });
    • \n
  • [✅] useEffect(() => { setDone(true); }, []);
    • \n
  • useEffect(() => { setDone(true); }, [setDone]);
    • \n
  • useEffect(() => { setDone(true); }, [done, setDone]);
    • \n
\n

Q46. Which of the following click event handlers will allow you to pass the name of the person to be hugged?

\n
class Huggable extends React.Component {\n  hug(id) {\n    console.log(\"hugging \" + id);\n  }\n\n  render() {\n    let name = \"kitteh\";\n    let button = // Missing Code\n    return button;\n  }\n}\n
\n
    \n
  • <button onClick={(name) => this.hug(name)}>Hug Button</button>
    • \n
  • <button onClick={this.hug(e, name)}>Hug Button</button>
    • \n
  • <button onClick={(e) => hug(e, name)}>Hug Button</button>
    • \n
  • [✅] <button onClick={(e) => this.hug(name,e)}>Hug Button</button>
    • \n
\n

Q47. Currently, handleClick is being called instead of passed as a reference. How do you fix this?

\n
<button onClick={this.handleClick()}>Click this</button>\n
\n
    \n
  • <button onClick={this.handleClick.bind(handleClick)}>Click this</button>
    • \n
  • <button onClick={handleClick()}>Click this</button>
    • \n
  • [✅] <button onClick={this.handleClick}>Click this</button>
    • \n
  • <button onclick={this.handleClick}>Click this</button>
    • \n
\n

Q48. Which answer best describes a function component?

\n
    \n
  • A function component is the same as a class component.
    • \n
  • [✅] A function component accepts a single props object and returns a React element.
    • \n
  • A function component is the only way to create a component.
    • \n
  • A function component is required to create a React component.
    • \n
\n

Q49. Which library does the fetch() function come from?

\n
    \n
  • FetchJS
    • \n
  • ReactDOM
    • \n
  • [✅] No library. fetch() is supported by most browsers.
    • \n
  • React
    • \n
\n

Q50. What will happen when this useEffect Hook is executed, assuming name is not already equal to John?

\n
useEffect(() => {\n  setName(\"John\");\n}, [name]);\n
\n
    \n
  • It will cause an error immediately.
    • \n
  • It will execute the code inside the function, but only after waiting to ensure that no other component is accessing the name variable.
    • \n
  • [✅] It will update the value of name once and not run again until name is changed from the outside.
    • \n
  • It will cause an infinite loop.
    • \n
\n

Q51. Which choice will not cause a React component to rerender?

\n
    \n
  • if the component calls this.setState(...)
    • \n
  • the value of one of the component's props changes
    • \n
  • if the component calls this.forceUpdate()
    • \n
  • [✅] one of the component's siblings rerenders
    • \n
\n

Q52. You have created a new method in a class component called handleClick, but it is not working. Which code is missing?

\n
class Button extends React.Component{\n\n  constructor(props) {\n    super(props);\n    // Missing line\n  }\n\n  handleClick() {...}\n}\n
\n
    \n
  • this.handleClick.bind(this);
    • \n
  • props.bind(handleClick);
    • \n
  • this.handleClick.bind();
    • \n
  • [✅] this.handleClick = this.handleClick.bind(this);
    • \n
\n

Q53. React does not render two sibling elements unless they are wrapped in a fragment. Below is one way to render a fragment. What is the shorthand for this?

\n
<React.Fragment>\n  <h1>Our Staff</h1>\n  <p>Our staff is available 9-5 to answer your questions</p>\n</React.Fragment>\n
\n
    \n
  • A
    • \n
\n
<...>\n  <h1>Our Staff</h1>\n  <p>Our staff is available 9-5 to answer your questions</p>\n</...>\n
\n
    \n
  • B
    • \n
\n
<//>\n  <h1>Our Staff</h1>\n  <p>Our staff is available 9-5 to answer your questions</p>\n<///>\n
\n
    \n
  • [✅] C
    • \n
\n
<>\n  <h1>Our Staff</h1>\n  <p>Our staff is available 9-5 to answer your questions</p>\n</>\n
\n
    \n
  • D
    • \n
\n
<Frag>\n  <h1>Our Staff</h1>\n  <p>Our staff is available 9-5 to answer your questions</p>\n</Frag>\n
\n

Q54. If you wanted to display the count state value in the component, what do you need to add to the curly braces in the h1?

\n
class Ticker extends React.component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n  render() {\n    return <h1>{}</h1>;\n  }\n}\n
\n
    \n
  • [✅] this.state.count
    • \n
  • count
    • \n
  • state
    • \n
  • state.count
    • \n
\n

Q55. Per the following code, when is the Hello component displayed?

\n
const greeting = isLoggedIn ? <Hello /> : null;\n
\n
    \n
  • never
    • \n
  • [✅] when isLoggedIn is true
    • \n
  • when a user logs in
    • \n
  • when the Hello function is called
    • \n
\n

Q56. In the following code block, what type is orderNumber?

\n
ReactDOM.render(<Message orderNumber=\"16\" />, document.getElementById(\"root\"));\n
\n
    \n
  • [✅] string
    • \n
  • boolean
    • \n
  • object
    • \n
  • number
    • \n
\n

Q57. You have added a style property to the h1 but there is an unexpected token error when it runs. How do you fix this?

\n
const element = <h1 style={ backgroundColor: \"blue\" }>Hi</h1>;\n
\n
    \n
  • const element = <h1 style=\"backgroundColor: \"blue\"\"}>Hi</h1>;
    • \n
  • [✅] const element = <h1 style={{backgroundColor: \"blue\"}}>Hi</h1>;
    • \n
  • const element = <h1 style={blue}>Hi</h1>;
    • \n
  • const element = <h1 style=\"blue\">Hi</h1>;
    • \n
\n

Q58. Which function is used to update state variables in a React class component?

\n
    \n
  • replaceState
    • \n
  • refreshState
    • \n
  • updateState
    • \n
  • [✅] setState
    • \n
\n

Q59. Consider the following component. What is the default color for the star?

\n
const Star = ({ selected = false }) => (\n  <Icon color={selected ? \"red\" : \"grey\"} />\n);\n
\n
    \n
  • black
    • \n
  • red
    • \n
  • [✅] grey
    • \n
  • white
    • \n
\n

Q60. Which answer best describes a function component?(Not sure answer)

\n
    \n
  • A function component is the same as a class component.
    • \n
  • [✅] A function component accepts a single props object and returns a React element.
    • \n
  • A function component is the only way to create a component.
    • \n
  • A function component is required to create a React component.
    • \n
\n

Q61.Which library does the fetch() function come from?

\n
    \n
  • FetchJS
    • \n
  • ReactDOM
    • \n
  • [✅] No library. fetch() is supported by most browsers.
    • \n
  • React
    • \n
\n

Q62.What is the difference between the click behaviors of these two buttons(assuming that this.handleClick is bound correctly)

\n
  A. <button onClick=this.handleClick>Click Me</button>\n  B. <button onClick={event => this.handleClick(event)}>Click Me</button>\n
\n
    \n
  • Button A will not have access to the event object on click of the button
    • \n
  • [✅] Button A will not fire the handler this.handleClick successfully
    • \n
  • There is no difference
    • \n
  • Button B will not fire the handler this.handleClick successfully
    • \n
\n

Q63.What will happen when this useEffect Hook is executed, assuming name is not already equal to John?

\n
useEffect(() => {\n  setName(\"John\");\n}, [name]);\n
\n
    \n
  • It will cause an error immediately.
    • \n
  • It will execute the code inside the function, but only after waiting to ensure that no other component is accessing the name variable.
    • \n
  • [✅] It will update the value of name once and not run again until name is changed from the outside.
    • \n
  • It will cause an infinite loop.
    • \n
\n

Q64. How would you add to this code, from React Router, to display a component called About?

\n
<Route path=\"/:id\" />\n
\n
    \n
  • [✅] A
    • \n
\n
<Route path=\"/:id\">\n  {\" \"}\n  <About />\n</Route>\n
\n
    \n
  • B
    • \n
\n
<Route path=\"/tid\" about={Component} />\n
\n
    \n
  • C
    • \n
\n
<Route path=\"/:id\" route={About} />\n
\n
    \n
  • D
    • \n
\n
<Route>\n  <About path=\"/:id\" />\n</Route>\n
\n

Q65. Which class-based component is equivalent to this function component?

\n
const Greeting ({ name }) > <h1>Hello {name}!</h1>;\n
\n
    \n
  • A
    • \n
\n
class Greeting extends React.Component {\n  constructor() {\n    return <h1>Hello {this.props.name}!</h1>;\n  }\n}\n
\n
    \n
  • B
    • \n
\n
class Greeting extends React.Component {\n  <h1>Hello {this.props.name}!</h1>;\n}\n
\n
    \n
  • [✅] C
    • \n
\n
class Greeting extends React.Component {\n  render() {\n    return <h1>Hello {this.props.name}!</h1>;\n  }\n}\n
\n
    \n
  • D
    • \n
\n
class Greeting extends React.Component {\n  render({ name }) {\n    return <h1>Hello {name}!</h1>;\n  }\n}\n
\n

Q66. Give the code below, what does the second argument that is sent to the render function describe?

\n
ReactDOM.render(\n  <h1>Hi<h1>,\n    document.getElementById('root')\n)\n
\n
    \n
  • [✅] where the React element should be added to the DOM
    • \n
  • where to call the function
    • \n
  • where the root component is
    • \n
  • where to create a new JavaScript file
    • \n
\n

Q67. Why should you use React Router's Link component instead of a basic <a> tag in React?

\n
    \n
  • The link component allows the user to use the browser's Back button.
    • \n
  • There is no difference--the Link component is just another name for the <a> tag.
    • \n
  • The <a> tag will cause an error when used in React.
    • \n
  • [✅] The <a> tag triggers a full page reload, while the Link component does not.
    • \n
\n

Q68. What is the first argument, x, that is sent to the createElement function?

\n
React.createElement(x, y, z);\n
\n
    \n
  • [✅] the element that should be created
    • \n
  • the order in which this element should be placed on the page
    • \n
  • the properties of the element
    • \n
  • data that should be displayed in the element
    • \n
\n

Q69. Which class-based lifecycle method would be called at the same time as this effect Hook?

\n
useEffect(() => {\n  // do things\n}, []);\n
\n
    \n
  • componentWillUnmount
    • \n
  • [✅] componentDidMount
    • \n
  • render
    • \n
  • componentDidUpdate
    • \n
\n

Q70. Given the code below, what does the second argument that is sent to the render function describe?

\n
ReactDOM.render(<h1>Hi</h1>, document.getElementById(\"root\"));\n
\n
    \n
  • [✅] where the React element should be added to the DOM
    • \n
  • where to call the function
    • \n
  • where the root component is
    • \n
  • where to create a new JavaScript file
    • \n
\n

Q71. What is the first argument, x, that is sent to the createElement function?

\n

React.createElement(x,y,z);

\n
    \n
  • [✅] the element that should be created
    • \n
  • the order in which this element should be placed on the page
    • \n
  • the properties of the element
    • \n
  • data that should be displayed in the element.
    • \n
\n

Q72. What is the name of this component?

\n
class Comp extends React.Component {\n  render() {\n    return <h1>Look at the time: {time}</h1>;\n  }\n}\n
\n
    \n
  • [✅] Comp
    • \n
  • h1
    • \n
  • React.Component
    • \n
  • Component
    • \n
\n

This question might be an updated version of Q37.

\n

Q73. When using a portal, what is the first argument?

\n
ReactDOM.createPortal(x, y);\n
\n
    \n
  • the current state
    • \n
  • [✅] the element to render
    • \n
  • the App component
    • \n
  • the page
    • \n
\n

Explanation: From official docs: Portals

\n

Q74. What is setCount?

\n
const [count, setCount] = useState(0);\n
\n
    \n
  • the initial state value
    • \n
  • a variable
    • \n
  • a state object
    • \n
  • [✅] a function to update the state
    • \n
\n

Reference: From official docs: Hooks-State

\n

Q75. What is the use of map function below?

\n
const database = [user1:{},user2:{},user3:{}];\ndatabase.map((user)=><h1>user.data</h1>);\n
\n
    \n
  • gives a map of all the entries in database
    • \n
  • [✅] returns a heading tag for every entry in the database containing it's data
    • \n
  • returns one heading tag for all the entries in database
    • \n
  • checks which entry in the database is suitable for heading tag
    • \n
\n

Q76. Describe what is happening in this code?

\n
const { name: firstName } = person;\n
\n
    \n
  • It is creating a new object that contains the same name property as the person object.
    • \n
  • It is assigning the value of the person object's firstName property to a constant called name.
    • \n
  • It is retrieving the value of person.name.firstName.
    • \n
  • [✅] It is assigning the value of the person object's name property to a constant called firstName.
    • \n
\n

Q77. What is wrong with this code?

\n
const MyComponent = ({ names }) => (\n  <h1>Hello</h1>\n  <p>Hello again</p>\n);\n
\n
    \n
  • React components cannot be defined using functions.
    • \n
  • [✅] React does not allow components to return more than one element.
    • \n
  • The component needs to use the return keyword.
    • \n
  • String literals must be surrounded by quotes.
    • \n
\n

Q78. When using a portal, what is the second argument?

\n
ReactDOM.createPortal(x, y);\n
\n
    \n
  • the App component
    • \n
  • the page
    • \n
  • the current state
    • \n
  • [✅] the DOM element that exists outside of the parent component
    • \n
\n

Q79. Given this code, what will be printed in the

\n

tag?

\n
const MyComponent = ({ children }) => (\n  <h1>{children.length}</h1>\n);\n...\n<MyComponent>\n<p>Hello</p>\n<p>Goodbye</p>\n</MyComponent>\n
\n
    \n
  • It will produce an error saying \"cannot read property \"length\" of undefined.\"
    • \n
  • 1
    • \n
  • undefined
    • \n
  • [✅] 2
    • \n
\n

Q80. What is this pattern called?

\n
const [count, setCount] = useState(0);\n
\n
    \n
  • object destructuring
    • \n
  • [✅] array destructuring
    • \n
  • spread operating
    • \n
  • code pushing
    • \n
"},{"url":"/docs/react/react-w-api/","relativePath":"docs/react/react-w-api.md","relativeDir":"docs/react","base":"react-w-api.md","name":"react-w-api","frontmatter":{"title":"lorem-ipsum","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Etiam facilisis lacus nec pretium lobortis. Praesent dapibus justo non efficitur efficitur. Nullam viverra justo arcu, eget egestas tortor pretium id. Sed imperdiet mattis eleifend. Vivamus suscipit et neque imperdiet venenatis.

\n
\n

Vestibulum ullamcorper risus auctor eleifend consequat.

\n
\n

\"Placeholder

\n

In malesuada sed urna eget vehicula. Donec fermentum tortor sit amet nisl elementum fringilla. Pellentesque dapibus suscipit faucibus. Nullam malesuada sed urna quis rutrum. Donec facilisis lorem id maximus mattis. Vestibulum quis elit magna. Vestibulum accumsan blandit consequat. Phasellus quis posuere quam.

\n

Vivamus mollis in tellus ac ullamcorper. Vestibulum sit amet bibendum ipsum, vitae rutrum ex. Nullam cursus, urna et dapibus aliquam, urna leo euismod metus, eu luctus justo mi eget mauris. Proin felis leo, volutpat et purus in, lacinia luctus eros. Pellentesque lobortis massa scelerisque lorem ullamcorper, sit amet elementum nulla scelerisque. In volutpat efficitur nulla, aliquam ornare lectus ultricies ac. Mauris sagittis ornare dictum. Nulla vel felis ut purus fermentum pretium. Sed id lectus ac diam aliquet venenatis. Etiam ac auctor enim. Nunc velit mauris, viverra vel orci ut, egestas rhoncus diam. Morbi scelerisque nibh tellus, vel varius urna malesuada sed. Etiam ultricies sem consequat, posuere urna non, maximus ex. Mauris gravida diam sed augue condimentum pulvinar vel ac dui. Integer vel convallis justo.

"},{"url":"/docs/react/react-patterns-by-usecase/","relativePath":"docs/react/react-patterns-by-usecase.md","relativeDir":"docs/react","base":"react-patterns-by-usecase.md","name":"react-patterns-by-usecase","frontmatter":{"title":"React Patterns & Use Cases","weight":0,"excerpt":"React Patterns & Use Cases","seo":{"title":"React Patterns & Use Cases","description":"React Patterns & Use Cases","robots":[],"extra":[{"name":"og:image","value":"images/py-code.png","keyName":"property","relativeUrl":true},{"name":"twitter:title","value":"python cheat sheet","keyName":"name","relativeUrl":false}]},"template":"docs"},"html":"

Wrapping/Mirroring

\n

Wrapping/Mirroring a HTML Element

\n

Usecase: you want to make a <Button> that takes all the normal props of <button> and does extra stuff.

\n

Strategy: extend React.ComponentPropsWithoutRef<'button'>

\n
// usage\nfunction App() {\n  // Type '\"foo\"' is not assignable to type '\"button\" | \"submit\" | \"reset\" | undefined'.(2322)\n  // return <Button type=\"foo\"> sldkj </Button>\n\n  // no error\n  return <Button type=\"button\"> text </Button>;\n}\n\n// implementation\nexport interface ButtonProps extends React.ComponentPropsWithoutRef<\"button\"> {\n  specialProp?: string;\n}\nexport function Button(props: ButtonProps) {\n  const { specialProp, ...rest } = props;\n  // do something with specialProp\n  return <button {...rest} />;\n}\n
\n

See this in the TS Playground

\n

Forwarding Refs: As the React docs themselves note, most usecases will not need to obtain a ref to the inner element. But for people making reusable component libraries, you will need to forwardRef the underlying element, and then you can use ComponentPropsWithRef to grab props for your wrapper component. Check our docs on forwarding Refs for more.

\n

In future, the need to forwardRef may go away in React 17+, but for now we still have to deal with this. 🙃

\n
\n\n

Why not ComponentProps or IntrinsicElements or [Element]HTMLAttributes or HTMLProps or HTMLAttributes?

\n\n

ComponentProps

\n

You CAN use ComponentProps in place of ComponentPropsWithRef, but you may prefer to be explicit about whether or not the component's refs are forwarded, which is what we have chosen to demonstrate. The tradeoff is slightly more intimidating terminology.

\n

More info: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/

\n

Maybe JSX.IntrinsicElements or React.[Element]HTMLAttributes

\n

There are at least 2 other equivalent ways to do this, but they are more verbose:

\n
// Method 1: JSX.IntrinsicElements\ntype btnType = JSX.IntrinsicElements[\"button\"]; // cannot inline or will error\nexport interface ButtonProps extends btnType {} // etc\n\n// Method 2: React.[Element]HTMLAttributes\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>\n
\n

Looking at the source for ComponentProps shows that this is a clever wrapper for JSX.IntrinsicElements, whereas the second method relies on specialized interfaces with unfamiliar naming/capitalization.

\n
\n

Note: There are over 50 of these specialized interfaces available - look for HTMLAttributes in our @types/react commentary.

\n
\n

Ultimately, we picked the ComponentProps method as it involves the least TS specific jargon and has the most ease of use. But you'll be fine with either of these methods if you prefer.

\n

Definitely not React.HTMLProps or React.HTMLAttributes

\n

This is what happens when you use React.HTMLProps:

\n
export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {\n  specialProp: string;\n}\nexport function Button(props: ButtonProps) {\n  const { specialProp, ...rest } = props;\n  // ERROR: Type 'string' is not assignable to type '\"button\" | \"submit\" | \"reset\" | undefined'.\n  return <button {...rest} />;\n}\n
\n

It infers a too-wide type of string for type, because it uses AllHTMLAttributes under the hood.

\n

This is what happens when you use React.HTMLAttributes:

\n
export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n  /* etc */\n}\n// usage\nfunction App() {\n  // Property 'type' does not exist on type 'IntrinsicAttributes & ButtonProps'\n  return <Button type=\"submit\"> text </Button>;\n}\n
\n
\n

Wrapping/Mirroring a Component

\n
\n

TODO: this section needs work to make it simplified.

\n
\n

Usecase: same as above, but for a React Component you don't have access to the underlying props

\n
const Box = (props: React.CSSProperties) => <div style={props} />;\n\nconst Card = (\n  { title, children, ...props }: { title: string } & $ElementProps<typeof Box> // new utility, see below\n) => (\n  <Box {...props}>\n    {title}: {children}\n  </Box>\n);\n
\n

Strategy: extract a component's props by inferring them

\n

Example:

\n
// ReactUtilityTypes.d.ts\ndeclare type $ElementProps<T> = T extends React.ComponentType<infer Props>\n  ? Props extends object\n    ? Props\n    : never\n  : never;\n
\n

Usage:

\n
import * as Recompose from \"recompose\";\nexport const defaultProps = <\n  C extends React.ComponentType,\n  D extends Partial<$ElementProps<C>>\n>(\n  defaults: D,\n  Component: C\n): React.ComponentType<$ElementProps<C> & Partial<D>> =>\n  Recompose.defaultProps(defaults)(Component);\n
\n

thanks dmisdm

\n

:new: You should also consider whether to explicitly forward refs:

\n
// base button, with ref forwarding\ntype Props = { children: React.ReactNode; type: \"submit\" | \"button\" };\nexport type Ref = HTMLButtonElement;\nexport const FancyButton = React.forwardRef<Ref, Props>((props, ref) => (\n  <button ref={ref} className=\"MyCustomButtonClass\" type={props.type}>\n    {props.children}\n  </button>\n));\n\n// second layer button, no need for forwardRef (TODO: doublecheck this)\nexport interface DoubleWrappedProps\n  extends React.ComponentPropsWithRef<typeof FancyButton> {\n  specialProp?: string;\n}\nexport function DoubleWrappedButton(props: DoubleWrappedProps) {\n  const { specialProp, ref, ...rest } = props;\n  return <button ref={ref} {...rest} />;\n}\n\n// usage\nfunction App() {\n  const btnRef = React.useRef<HTMLButtonElement>(null!);\n  return (\n    <DoubleWrappedButton type=\"button\" ref={btnRef}>\n      {\" \"}\n      text{\" \"}\n    </DoubleWrappedButton>\n  );\n}\n
\n

TS Playground link

\n

Polymorphic Components (e.g. with as props)

\n
\n

\"Polymorphic Components\" = passing a component to be rendered, e.g. with as props

\n
\n

ElementType is pretty useful to cover most types that can be passed to createElement e.g.

\n
function PassThrough(props: { as: React.ElementType<any> }) {\n  const { as: Component } = props;\n\n  return <Component />;\n}\n
\n

You might also see this with React Router:

\n
const PrivateRoute = ({ component: Component, ...rest }: PrivateRouteProps) => {\n  const { isLoggedIn } = useAuth();\n\n  return isLoggedIn ? <Component {...rest} /> : <Redirect to=\"/\" />;\n};\n
\n

For more info you can refer to these resources:

\n\n

Thanks @eps1lon and @karol-majewski for thoughts!

\n

Generic Components

\n

Just as you can make generic functions and classes in TypeScript, you can also make generic components to take advantage of the type system for reusable type safety. Both Props and State can take advantage of the same generic types, although it probably makes more sense for Props than for State. You can then use the generic type to annotate types of any variables defined inside your function / class scope.

\n
interface Props<T> {\n  items: T[];\n  renderItem: (item: T) => React.ReactNode;\n}\nfunction List<T>(props: Props<T>) {\n  const { items, renderItem } = props;\n  const [state, setState] = React.useState<T[]>([]); // You can use type T in List function scope.\n  return (\n    <div>\n      {items.map(renderItem)}\n      <button onClick={() => setState(items)}>Clone</button>\n      {JSON.stringify(state, null, 2)}\n    </div>\n  );\n}\n
\n

You can then use the generic components and get nice type safety through type inference:

\n
ReactDOM.render(\n  <List\n    items={[\"a\", \"b\"]} // type of 'string' inferred\n    renderItem={(item) => (\n      <li key={item}>\n        {/* Error: Property 'toPrecision' does not exist on type 'string'. */}\n        {item.toPrecision(3)}\n      </li>\n    )}\n  />,\n  document.body\n);\n
\n

As of TS 2.9, you can also supply the type parameter in your JSX to opt out of type inference:

\n
ReactDOM.render(\n  <List<number>\n    items={[\"a\", \"b\"]} // Error: Type 'string' is not assignable to type 'number'.\n    renderItem={(item) => <li key={item}>{item.toPrecision(3)}</li>}\n  />,\n  document.body\n);\n
\n

You can also use Generics using fat arrow function style:

\n
interface Props<T> {\n  items: T[];\n  renderItem: (item: T) => React.ReactNode;\n}\n\n// Note the <T extends unknown> before the function definition.\n// You can't use just `<T>` as it will confuse the TSX parser whether it's a JSX tag or a Generic Declaration.\n// You can also use <T,> https://github.com/microsoft/TypeScript/issues/15713#issuecomment-499474386\nconst List = <T extends unknown>(props: Props<T>) => {\n  const { items, renderItem } = props;\n  const [state, setState] = React.useState<T[]>([]); // You can use type T in List function scope.\n  return (\n    <div>\n      {items.map(renderItem)}\n      <button onClick={() => setState(items)}>Clone</button>\n      {JSON.stringify(state, null, 2)}\n    </div>\n  );\n};\n
\n

The same for using classes: (Credit: Karol Majewski's gist)

\n
interface Props<T> {\n  items: T[];\n  renderItem: (item: T) => React.ReactNode;\n}\n\ninterface State<T> {\n  items: T[];\n}\n\nclass List<T> extends React.PureComponent<Props<T>, State<T>> {\n  // You can use type T inside List class.\n  state: Readonly<State<T>> = {\n    items: [],\n  };\n  render() {\n    const { items, renderItem } = this.props;\n    // You can use type T inside List class.\n    const clone: T[] = items.slice(0);\n    return (\n      <div>\n        {items.map(renderItem)}\n        <button onClick={() => this.setState({ items: clone })}>Clone</button>\n        {JSON.stringify(this.state, null, 2)}\n      </div>\n    );\n  }\n}\n
\n

Though you can't use Generic Type Parameters for Static Members:

\n
class List<T> extends React.PureComponent<Props<T>, State<T>> {\n  // Static members cannot reference class type parameters.ts(2302)\n  static getDerivedStateFromProps(props: Props<T>, state: State<T>) {\n    return { items: props.items };\n  }\n}\n
\n

To fix this you need to convert your static function to a type inferred function:

\n
class List<T> extends React.PureComponent<Props<T>, State<T>> {\n  static getDerivedStateFromProps<T>(props: Props<T>, state: State<T>) {\n    return { items: props.items };\n  }\n}\n
\n

Generic components with children

\n

children is usually not defined as a part of the props type. Unless children are explicitly defined as a part of the props type, an attempt to use props.children in JSX or in the function body will fail:

\n
interface WrapperProps<T> {\n  item: T;\n  renderItem: (item: T) => React.ReactNode;\n}\n\n/* Property 'children' does not exist on type 'WrapperProps<T>'. */\nconst Wrapper = <T extends {}>(props: WrapperProps<T>) => {\n  return (\n    <div>\n      {props.renderItem(props.item)}\n      {props.children}\n    </div>\n  );\n};\n\n/*\nType '{ children: string; item: string; renderItem: (item: string) => string; }' is not assignable to type 'IntrinsicAttributes & WrapperProps<string>'.\n  Property 'children' does not exist on type 'IntrinsicAttributes & WrapperProps<string>'.\n*/\n\nconst wrapper = (\n  <Wrapper item=\"test\" renderItem={(item) => item}>\n    {test}\n  </Wrapper>\n);\n
\n

View in the TypeScript Playground

\n

To work around that, either add children to the WrapperProps definition (possibly narrowing down its type, as needed):

\n
interface WrapperProps<T> {\n  item: T;\n  renderItem: (item: T) => React.ReactNode;\n  children: string; // The component will only accept a single string child\n}\n\nconst Wrapper = <T extends {}>(props: WrapperProps<T>) => {\n  return (\n    <div>\n      {props.renderItem(props.item)}\n      {props.children}\n    </div>\n  );\n};\n
\n

or wrap the type of the props in React.PropsWithChildren (this is what React.FC<> does):

\n
interface WrapperProps<T> {\n  item: T;\n  renderItem: (item: T) => React.ReactNode;\n}\n\nconst Wrapper = <T extends {}>(\n  props: React.PropsWithChildren<WrapperProps<T>>\n) => {\n  return (\n    <div>\n      {props.renderItem(props.item)}\n      {props.children}\n    </div>\n  );\n};\n
\n

Typing Children

\n

Some API designs require some restriction on children passed to a parent component. It is common to want to enforce these in types, but you should be aware of limitations to this ability.

\n

What You CAN Do

\n

You can type the structure of your children: just one child, or a tuple of children.

\n

The following are valid:

\n
type OneChild = React.ReactElement;\ntype TwoChildren = [React.ReactElement, React.ReactElement];\ntype ArrayOfProps = SomeProp[];\ntype NumbersChildren = number[];\ntype TwoNumbersChildren = [number, number];\n
\n
\n\nDon't forget that you can also use `prop-types` if TS fails you.\n\n
Parent.propTypes = {\n  children: PropTypes.shape({\n    props: PropTypes.shape({\n      // could share `propTypes` to the child\n      value: PropTypes.string.isRequired,\n    }),\n  }).isRequired,\n};\n
\n
\n

What You CANNOT Do

\n

The thing you cannot do is specify which components the children are, e.g. If you want to express the fact that \"React Router <Routes> can only have <Route> as children, nothing else is allowed\" in TypeScript.

\n

This is because when you write a JSX expression (const foo = <MyComponent foo='foo' />), the resultant type is blackboxed into a generic JSX.Element type. (thanks @ferdaber)

\n

Type Narrowing based on Props

\n

What you want:

\n
// Usage\nfunction App() {\n  return (\n    <>\n      {/* 😎 All good */}\n      <Button target=\"_blank\" href=\"https://www.google.com\">\n        Test\n      </Button>\n      {/* 😭 Error, `disabled` doesnt exist on anchor element */}\n      <Button disabled href=\"x\">\n        Test\n      </Button>\n    </>\n  );\n}\n
\n

How to implement: Use type guards!

\n
// Button props\ntype ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  href?: undefined;\n};\n\n// Anchor props\ntype AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n  href?: string;\n};\n\n// Input/output options\ntype Overload = {\n  (props: ButtonProps): JSX.Element;\n  (props: AnchorProps): JSX.Element;\n};\n\n// Guard to check if href exists in props\nconst hasHref = (props: ButtonProps | AnchorProps): props is AnchorProps =>\n  \"href\" in props;\n\n// Component\nconst Button: Overload = (props: ButtonProps | AnchorProps) => {\n  // anchor render\n  if (hasHref(props)) return <a {...props} />;\n  // button render\n  return <button {...props} />;\n};\n
\n

View in the TypeScript Playground

\n

Components, and JSX in general, are analogous to functions. When a component can render differently based on their props, it's similar to how a function can be overloaded to have multiple call signatures. In the same way, you can overload a function component's call signature to list all of its different \"versions\".

\n

A very common use case for this is to render something as either a button or an anchor, based on if it receives a href attribute.

\n
type ButtonProps = JSX.IntrinsicElements[\"button\"];\ntype AnchorProps = JSX.IntrinsicElements[\"a\"];\n\n// optionally use a custom type guard\nfunction isPropsForAnchorElement(\n  props: ButtonProps | AnchorProps\n): props is AnchorProps {\n  return \"href\" in props;\n}\n\nfunction Clickable(props: ButtonProps | AnchorProps) {\n  if (isPropsForAnchorElement(props)) {\n    return <a {...props} />;\n  } else {\n    return <button {...props} />;\n  }\n}\n
\n

They don't even need to be completely different props, as long as they have at least one difference in properties:

\n
type LinkProps = Omit<JSX.IntrinsicElements[\"a\"], \"href\"> & { to?: string };\n\nfunction RouterLink(props: LinkProps | AnchorProps) {\n  if (\"href\" in props) {\n    return <a {...props} />;\n  } else {\n    return <Link {...props} />;\n  }\n}\n
\n
\n Approach: Generic Components\n

Here is an example solution, see the further discussion for other solutions. thanks to @jpavon

\n
interface LinkProps {}\ntype AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;\ntype RouterLinkProps = Omit<NavLinkProps, \"href\">;\n\nconst Link = <T extends {}>(\n  props: LinkProps & T extends RouterLinkProps ? RouterLinkProps : AnchorProps\n) => {\n  if ((props as RouterLinkProps).to) {\n    return <NavLink {...(props as RouterLinkProps)} />;\n  } else {\n    return <a {...(props as AnchorProps)} />;\n  }\n};\n\n<Link<RouterLinkProps> to=\"/\">My link</Link>; // ok\n<Link<AnchorProps> href=\"/\">My link</Link>; // ok\n<Link<RouterLinkProps> to=\"/\" href=\"/\">\n  My link\n</Link>; // error\n
\n
\n
\n Approach: Composition\n

If you want to conditionally render a component, sometimes is better to use React's composition model to have simpler components and better to understand typings:

\n
type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;\ntype RouterLinkProps = Omit<AnchorProps, \"href\">;\n\ninterface Button {\n  as: React.ComponentClass | \"a\";\n}\n\nconst Button: React.FunctionComponent<Button> = (props) => {\n  const { as: Component, children, ...rest } = props;\n  return (\n    <Component className=\"button\" {...rest}>\n      {children}\n    </Component>\n  );\n};\n\nconst AnchorButton: React.FunctionComponent<AnchorProps> = (props) => (\n  <Button as=\"a\" {...props} />\n);\n\nconst LinkButton: React.FunctionComponent<RouterLinkProps> = (props) => (\n  <Button as={NavLink} {...props} />\n);\n\n<LinkButton to=\"/login\">Login</LinkButton>;\n<AnchorButton href=\"/login\">Login</AnchorButton>;\n<AnchorButton href=\"/login\" to=\"/test\">\n  Login\n</AnchorButton>; // Error: Property 'to' does not exist on type...\n
\n
\n

You may also want to use Discriminated Unions, please check out Expressive React Component APIs with Discriminated Unions.

\n

Here is a brief intuition for Discriminated Union Types:

\n
type UserTextEvent = {\n  type: \"TextEvent\";\n  value: string;\n  target: HTMLInputElement;\n};\ntype UserMouseEvent = {\n  type: \"MouseEvent\";\n  value: [number, number];\n  target: HTMLElement;\n};\ntype UserEvent = UserTextEvent | UserMouseEvent;\nfunction handle(event: UserEvent) {\n  if (event.type === \"TextEvent\") {\n    event.value; // string\n    event.target; // HTMLInputElement\n    return;\n  }\n  event.value; // [number, number]\n  event.target; // HTMLElement\n}\n
\n
\n \n Take care: TypeScript does not narrow the type of a Discriminated Union on the basis of typeof checks. The type guard has to be on the value of a key and not it's type.\n \n
type UserTextEvent = { value: string; target: HTMLInputElement };\ntype UserMouseEvent = { value: [number, number]; target: HTMLElement };\ntype UserEvent = UserTextEvent | UserMouseEvent;\nfunction handle(event: UserEvent) {\n  if (typeof event.value === \"string\") {\n    event.value; // string\n    event.target; // HTMLInputElement | HTMLElement (!!!!)\n    return;\n  }\n  event.value; // [number, number]\n  event.target; // HTMLInputElement | HTMLElement (!!!!)\n}\n
\n

The above example does not work as we are not checking the value of event.value but only it's type. Read more about it microsoft/TypeScript#30506 (comment)

\n
\n
\n \n Discriminated Unions in TypeScript can also work with hook dependencies in React. The type matched is automatically updated when the corresponding union member based on which a hook depends, changes. Expand more to see an example usecase.\n

\n \n
type SingleElement = {\n  isArray: true;\n  value: string[];\n};\ntype MultiElement = {\n  isArray: false;\n  value: string;\n};\ntype Props = SingleElement | MultiElement;\nfunction Sequence(p: Props) {\n  return React.useMemo(\n    () => (\n      <div>\n        value(s):\n        {p.isArray && p.value.join(\",\")}\n        {!p.isArray && p.value}\n      </div>\n    ),\n    [p.isArray, p.value] // TypeScript automatically matches the corresponding value type based on dependency change\n  );\n}\nfunction App() {\n  return (\n    <div>\n      <Sequence isArray={false} value={\"foo\"} />\n      <Sequence isArray={true} value={[\"foo\", \"bar\", \"baz\"]} />\n    </div>\n  );\n}\n
\n

See this in TS Playground\n

\n

In the above example, based on the isArray union member, the type of the value hook dependency changes.

\n
\n

To streamline this you may also combine this with the concept of User-Defined Type Guards:

\n
function isString(a: unknown): a is string {\n  return typeof a === \"string\";\n}\n
\n

Read more about User-Defined Type Guards in the Handbook.

\n

Props: One or the Other but not Both

\n

Use the in keyword, function overloading, and union types to make components that take either one or another sets of props, but not both:

\n
type Props1 = { foo: string };\ntype Props2 = { bar: string };\n\nfunction MyComponent(props: Props1 | Props2) {\n  if (\"foo\" in props) {\n    // props.bar // error\n    return <div>{props.foo}</div>;\n  } else {\n    // props.foo // error\n    return <div>{props.bar}</div>;\n  }\n}\nconst UsageComponent: React.FC = () => (\n  <div>\n    <MyComponent foo=\"foo\" />\n    <MyComponent bar=\"bar\" />\n    {/* <MyComponent foo=\"foo\" bar=\"bar\"/> // invalid */}\n  </div>\n);\n
\n

View in the TypeScript Playground

\n

Further reading: how to ban passing {} if you have a NoFields type.

\n

Props: Must Pass Both

\n
type OneOrAnother<T1, T2> =\n  | (T1 & { [K in keyof T2]?: undefined })\n  | (T2 & { [K in keyof T1]?: undefined });\n\ntype Props = OneOrAnother<{ a: string; b: string }, {}>;\n\nconst a: Props = { a: \"a\" }; // error\nconst b: Props = { b: \"b\" }; // error\nconst ab: Props = { a: \"a\", b: \"b\" }; // ok\n
\n

Thanks diegohaz

\n

Props: Pass One ONLY IF the Other Is Passed

\n

Say you want a Text component that gets truncated if truncate prop is passed but expands to show the full text when expanded prop is passed (e.g. when the user clicks the text).

\n

You want to allow expanded to be passed only if truncate is also passed, because there is no use for expanded if the text is not truncated.

\n

Usage example:

\n
const App: React.FC = () => (\n  <>\n    {/* these all typecheck */}\n    <Text>not truncated</Text>\n    <Text truncate>truncated</Text>\n    <Text truncate expanded>\n      truncate-able but expanded\n    </Text>\n    {/* TS error: Property 'truncate' is missing in type '{ children: string; expanded: true; }' but required in type '{ truncate: true; expanded?: boolean | undefined; }'. */}\n    <Text expanded>truncate-able but expanded</Text>\n  </>\n);\n
\n

You can implement this by function overloads:

\n
type CommonProps = {\n  children: React.ReactNode;\n  miscProps?: any;\n};\n\ntype NoTruncateProps = CommonProps & { truncate?: false };\n\ntype TruncateProps = CommonProps & { truncate: true; expanded?: boolean };\n\n// Function overloads to accept both prop types NoTruncateProps & TruncateProps\nfunction Text(props: NoTruncateProps): JSX.Element;\nfunction Text(props: TruncateProps): JSX.Element;\nfunction Text(props: CommonProps & { truncate?: boolean; expanded?: boolean }) {\n  const { children, truncate, expanded, ...otherProps } = props;\n  const classNames = truncate ? \".truncate\" : \"\";\n  return (\n    <div className={classNames} aria-expanded={!!expanded} {...otherProps}>\n      {children}\n    </div>\n  );\n}\n
\n

Props: Omit prop from a type

\n

Note: Omit was added as a first class utility in TS 3.5! 🎉

\n

Sometimes when intersecting types, we want to define our own version of a prop. For example, I want my component to have a label, but the type I am intersecting with also has a label prop. Here's how to extract that out:

\n
export interface Props {\n  label: React.ReactNode; // this will conflict with the InputElement's label\n}\n\n// this comes inbuilt with TS 3.5\ntype Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;\n\n// usage\nexport const Checkbox = (\n  props: Props & Omit<React.HTMLProps<HTMLInputElement>, \"label\">\n) => {\n  const { label } = props;\n  return (\n    <div className=\"Checkbox\">\n      <label className=\"Checkbox-label\">\n        <input type=\"checkbox\" {...props} />\n      </label>\n      <span>{label}</span>\n    </div>\n  );\n};\n
\n

When your component defines multiple props, chances of those conflicts increase. However you can explicitly state that all your fields should be removed from the underlying component using the keyof operator:

\n
export interface Props {\n  label: React.ReactNode; // conflicts with the InputElement's label\n  onChange: (text: string) => void; // conflicts with InputElement's onChange\n}\n\nexport const Textbox = (\n  props: Props & Omit<React.HTMLProps<HTMLInputElement>, keyof Props>\n) => {\n  // implement Textbox component ...\n};\n
\n

As you can see from the Omit example above, you can write significant logic in your types as well. type-zoo is a nice toolkit of operators you may wish to check out (includes Omit), as well as utility-types (especially for those migrating from Flow).

\n

Props: Extracting Prop Types of a Component

\n

Sometimes you want the prop types of a component, but it isn't exported.

\n

A simple solution is to use React.ComponentProps:

\n
// a Modal component defined elsewhere\nconst defaultProps: React.ComponentProps<typeof Modal> = {\n  title: \"Hello World\",\n  visible: true,\n  onClick: jest.fn(),\n};\n
\n

There are advanced edge cases if you want to extract the prop types of a component taking into account internal props, propTypes, and defaultProps - check our issue here for helper utilities that resolve these.

\n

Props: Render Props

\n
\n

Advice: Where possible, you should try to use Hooks instead of Render Props. We include this merely for completeness.

\n
\n

Sometimes you will want to write a function that can take a React element or a string or something else as a prop. The best Type to use for such a situation is React.ReactNode which fits anywhere a normal, well, React Node would fit:

\n
export interface Props {\n  label?: React.ReactNode;\n  children: React.ReactNode;\n}\nexport const Card = (props: Props) => {\n  return (\n    <div>\n      {props.label && <div>{props.label}</div>}\n      {props.children}\n    </div>\n  );\n};\n
\n

If you are using a function-as-a-child render prop:

\n
export interface Props {\n  children: (foo: string) => React.ReactNode;\n}\n
\n

Something to add? File an issue.

\n

Handling Exceptions

\n

You can provide good information when bad things happen.

\n
class InvalidDateFormatError extends RangeError {}\nclass DateIsInFutureError extends RangeError {}\n\n/**\n * // optional docblock\n * @throws {InvalidDateFormatError} The user entered date incorrectly\n * @throws {DateIsInFutureError} The user entered date in future\n *\n */\nfunction parse(date: string) {\n  if (!isValid(date))\n    throw new InvalidDateFormatError(\"not a valid date format\");\n  if (isInFuture(date)) throw new DateIsInFutureError(\"date is in the future\");\n  // ...\n}\n\ntry {\n  // call parse(date) somewhere\n} catch (e) {\n  if (e instanceof InvalidDateFormatError) {\n    console.error(\"invalid date format\", e);\n  } else if (e instanceof DateIsInFutureError) {\n    console.warn(\"date is in future\", e);\n  } else {\n    throw e;\n  }\n}\n
\n

View in TypeScript Playground

\n

Simply throwing an exception is fine, however it would be nice to make TypeScript remind the consumer of your code to handle your exception. We can do that just by returning instead of throwing:

\n
function parse(\n  date: string\n): Date | InvalidDateFormatError | DateIsInFutureError {\n  if (!isValid(date))\n    return new InvalidDateFormatError(\"not a valid date format\");\n  if (isInFuture(date)) return new DateIsInFutureError(\"date is in the future\");\n  // ...\n}\n\n// now consumer *has* to handle the errors\nlet result = parse(\"mydate\");\nif (result instanceof InvalidDateFormatError) {\n  console.error(\"invalid date format\", result.message);\n} else if (result instanceof DateIsInFutureError) {\n  console.warn(\"date is in future\", result.message);\n} else {\n  /// use result safely\n}\n\n// alternately you can just handle all errors\nif (result instanceof Error) {\n  console.error(\"error\", result);\n} else {\n  /// use result safely\n}\n
\n

You can also describe exceptions with special-purpose data types (don't say monads...) like the Try, Option (or Maybe), and Either data types:

\n
interface Option<T> {\n  flatMap<U>(f: (value: T) => None): None;\n  flatMap<U>(f: (value: T) => Option<U>): FormikOption<U>;\n  getOrElse(value: T): T;\n}\nclass Some<T> implements Option<T> {\n  constructor(private value: T) {}\n  flatMap<U>(f: (value: T) => None): None;\n  flatMap<U>(f: (value: T) => Some<U>): Some<U>;\n  flatMap<U>(f: (value: T) => Option<U>): Option<U> {\n    return f(this.value);\n  }\n  getOrElse(): T {\n    return this.value;\n  }\n}\nclass None implements Option<never> {\n  flatMap<U>(): None {\n    return this;\n  }\n  getOrElse<U>(value: U): U {\n    return value;\n  }\n}\n\n// now you can use it like:\nlet result = Option(6) // Some<number>\n  .flatMap((n) => Option(n * 3)) // Some<number>\n  .flatMap((n = new None())) // None\n  .getOrElse(7);\n\n// or:\nlet result = ask() // Option<string>\n  .flatMap(parse) // Option<Date>\n  .flatMap((d) => new Some(d.toISOString())) // Option<string>\n  .getOrElse(\"error parsing string\");\n
"},{"url":"/docs/react/render-elements/","relativePath":"docs/react/render-elements.md","relativeDir":"docs/react","base":"render-elements.md","name":"render-elements","frontmatter":{"title":"Rendering Elements With React","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Rendering Elements\n\n

\n

Elements are the smallest building blocks of React apps.

\n

An element describes what you want to see on the screen:

\n

Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.

\n
\n

Note:

\n
\n
\n
\n
\n

One might confuse elements with a more widely known concept of “components”. We will introduce components in the next section. Elements are what components are “made of”, and we encourage you to read this section before jumping ahead.

\n
\n

Rendering an Element into the DOM

\n

Let's say there is a <div> somewhere in your HTML file:

\n

We call this a “root” DOM node because everything inside it will be managed by React DOM.

\n

Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.

\n

To render a React element into a root DOM node, pass both to ReactDOM.render():

\n

Try it on CodePen

\n

It displays “Hello, world” on the page.

\n

Updating the Rendered Element

\n

React elements are immutable. Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.

\n

With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render().

\n

Consider this ticking clock example:

\n

Try it on CodePen

\n

It calls ReactDOM.render() every second from a setInterval() callback.

\n
\n

Note:

\n
\n
\n
\n
\n

In practice, most React apps only call ReactDOM.render() once. In the next sections we will learn how such code gets encapsulated into stateful components.

\n
\n
\n
\n
\n

We recommend that you don't skip topics because they build on each other.

\n
\n

React Only Updates What's Necessary

\n

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

\n

You can verify by inspecting the last example with the browser tools:

\n

\n

Even though we create an element describing the whole UI tree on every tick, only the text node whose contents have changed gets updated by React DOM.

\n

In our experience, thinking about how the UI should look at any given moment, rather than how to change it over time, eliminates a whole class of bugs.

"},{"url":"/docs/reference/awesome-static/","relativePath":"docs/reference/awesome-static.md","relativeDir":"docs/reference","base":"awesome-static.md","name":"awesome-static","frontmatter":{"title":"Awesome Static Site Resources","weight":0,"excerpt":"inspired by Awesome Lists","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Awesome Static Site Resources

\n

Table of Contents

\n\n
\n

Audio

\n
    \n
  • SoundCloud - Audio hosting with an embeddable player. Up to 3 hours of content is free.
    • \n
  • Mixcloud - Audio hosting with unlimited uploads and an embeddable player.
    • \n
  • Spotify - You can embed any song, album, or playlist with a Spotify Play Button.
    • \n
\n

Books

\n\n

Calendar and Scheduling

\n
    \n
  • Google Calendar - Embeddable calendar that you can collaborate with other people.
    • \n
  • Booking.js - Beautiful embeddable booking widget.
    • \n
  • zenplanner - Paid - Online scheduling for fitness.
    • \n
\n

Images

\n
    \n
  • Flickr - Online photo hosting by Yahoo.
    • \n
  • Cloudinary - Image hosting, manipulation and delivery.
    • \n
\n

Maps

\n
    \n
  • Google Maps - Google maps are easily embeddable.
    • \n
  • Mapbox - Really nice looking embeddable maps.
    • \n
\n

Presentations

\n
    \n
  • Prezi - Online presentations with really transitions that can zoom and rotate.
    • \n
  • Reveal.js - HTML presentation framework.
    • \n
  • Slides.com - A place for creating, presenting and sharing slide decks.
    • \n
  • SpeakerDeck - Upload your slides as a PDF, and get an online, shareable presentation.
    • \n
\n

Video

\n
    \n
  • Mux - Paid - An API to play videos directly to the client. Can also power live streams.
    • \n
  • YouTube - Embeddable videos with unlimited uploads.
    • \n
  • Vimeo - Paid - Embeddable videos with no ads.
    • \n
  • Vevo - Embeddable music videos.
    • \n
  • Wistia - Free plan has a limit of 25 videos.
    • \n
\n

Code

\n
    \n
  • Codepen - A playground of embeddable front-end code examples.
    • \n
  • JS Bin - Embeddable front-end code examples.
    • \n
  • JSFiddle - Embeddable front-end code examples.
    • \n
  • highlight.js - Syntax highlighting for the web.
    • \n
\n

Functions as a Service

\n
    \n
  • 1Backend - Deploy your backend in seconds. Free tier included. Open source.
    • \n
  • AWS Lambda - AWS Lambda lets you run code without provisioning or managing servers. You pay only for the compute time you consume
    • \n
  • Google Cloud Functions - Create single-purpose, stand-alone functions that respond to Cloud events without the need to manage a server or runtime environment
    • \n
  • Webtask by Auth0 - Call code on the server with simple HTTP, easier to set up by far than Lambda or Google's
    • \n
  • Azure Functions - by Microsoft - same premise as Lambda on the Azure cloud
    • \n
  • IronWorkers - by Iron.io - Run code in a multilanguage containerized environment with unlimited scale and simple pricing
    • \n
  • IronFunctions - by Iron.io - IronFunctions is an open source serverless computing platform for any cloud - private, public, or hybrid.
    • \n
  • OpenWhisk by IBM - part of their BlueMix hosting platform, and open source, ties into their Watson AI ecosystem nicely
    • \n
  • StackPath EdgeEngine - Write functions as a service in the language of your choice and deploy them to a global network of data centers. All the networking, including intelligent routing and load balancing, is managed by StackPath over a private backbone.
    • \n
  • Vercel - Vercel lets people write functions as a service in their language of choice and deploy as part of a monorepo.
    • \n
  • Azure Static Web Apps - Full-stack static app hosting including serverless Functions, authentication, CDN and more
    • \n
\n

GraphQL

\n
    \n
  • FaunaDB - Serverless GraphQL database. Free tier with no time limit. Easily included in Netlify apps.
    • \n
\n

Community

\n

Comments

\n
    \n
  • Staticman - Staticman is a Node.js application that receives user-generated content and uploads it as data files to a GitHub repository. In practice, this allows you to have dynamic content (e.g. blog post comments) as part of a fully static website, as long as your site automatically deploys on every push to GitHub, as seen on GitHub Pages, Netlify and others.
    • \n
  • Disqus - Easily embeddable comments with nested replies, multiple login methods, and email notifications.
    • \n
  • Facebook Comments - Embeddable comments for your site by Facebook.
    • \n
  • IntenseDebate Comments - Embeddable comments with nested replies, multiple login methods, and email notifications.
    • \n
  • LiveFyre - Real-time comments, SEO-optimized, stocked with social features, and beautiful on both desktop and mobile.
    • \n
  • Redditjs Embed Widget - Embed Reddit comments on your site. If it hasn't been posted, it will show a link to encourage the user to submit.
    • \n
  • Muut.com - Embeddable comments, forum and private messaging. A lot of functionality, but really low footprint left on your website.
    • \n
  • Gitment - Comment system based on GitHub Issues, which can be used in the frontend without any server-side implementation.
    • \n
  • giscus - A comments widget built on GitHub Discussions.
    • \n
\n

Forms

\n

Really Simple Forms

\n
    \n
  • Formspree - Receive emails from a form on your static website.
    • \n
  • elFormo - Simple form processing and response retrieval via email.
    • \n
  • Flipmail - Simple form processing and response retrieval via email.
    • \n
  • MailThis - Simple form submissions via email with optional attachments.
    • \n
  • Simple Form - Simple forms with optional file attachments, email notifications, and online submission viewing.
    • \n
  • Brisk Forms - Free form submission service emails you responses while keeping your email address private and is open source.
    • \n
  • 99 Inbound - Form endpoint service with email/Slack notifications and third party app integrations (e.g. MailChimp)
    • \n
  • Getform - Form backend platform for designers and developers, with email and integrations.
    • \n
  • Form.taxi - Backend to handle form submissions easily and reliably, with email notifications, file uploads and GDPR-compliant data processing.
    • \n
\n

Normal Forms

\n
    \n
  • Formcarry - Hassle-free HTML form endpoints for your form, powerful dashboard, reliable spam blocking, attachment uploads and Zapier integrations.
    • \n
  • Formcake - The form backend built for developers: Zapier integrations, simple endpoint API, unlimited forms.
    • \n
  • Google Forms - Saves results into Google Sheets and can email you when there is a submission.
    • \n
  • FormKeep - Paid - View form submissions in a beautiful web interface. It has spam filtering and it integrates with webhooks such as Gmail, Trello, and Basecamp.
    • \n
  • 123 Contact Form - Connects to other online services such at MailChimp, Salesforce, and Google Drive. It also integrates with payment Processers and includes security and analytics.
    • \n
  • FormAssembly - Allows you to build any kind of form that can include complex branching logic and multiple pages.
    • \n
  • FormSite - Form builder with payments and form management.
    • \n
  • FormStack - Forms with A/B testing, partial submission, analytics, and integrations.
    • \n
  • Sheetsu - POST and GET your data to Google Spreadsheet.
    • \n
  • Typeform - Awesome forms that can be embedded.
    • \n
  • Wufoo - Free or Paid - Forms that you can build with a form designer, with notifications, reports, and payments.
    • \n
  • Zoho - Forms with file upload and captcha.
    • \n
  • GitHub Issues - This is an interesting way for developers to get comments/questions. See github.com/sindresorhus/ama for an example.
    • \n
  • Utterences - A lightweight comments widget built on GitHub issues.
    • \n
  • FormBackend - Create form-backends and submit your HTML forms to our backend. View the entries online and connect to other services. Receive an email every time a new entry is submitted.
    • \n
  • Pageclip - A flexible server / backend for HTML forms. View your data in the realtime web interface, or use the API to get CSV and JSON output.
    • \n
  • Formester - Forms and email marketing (lead collection, email campaigns, and newsletters) with integrations.
    • \n
  • StaticKit - Modern forms for static sites, with native support for React.
    • \n
  • SheetDB - Turn a Google Spreadsheet into a JSON API.
    • \n
\n

Provided by the Host

\n
    \n
  • Netlify - Netlify comes with built-in form handling.
    • \n
\n

Live Chat

\n
    \n
  • jivochat - JivoSite is a professional live chat for websites that was specifically designed to increase your online sales.
    • \n
  • LiveChat - Live chat on your website.
    • \n
  • Olark - Live chat on your website. You can also see who's on your website and what they're doing.
    • \n
  • SnapEngage - Live chat with integrations and custom styles.
    • \n
  • tawk.co - Lets you monitor and chat with visitors on your website.
    • \n
  • WebsiteAlive - Live chat for your website & social networks.
    • \n
  • Zopim - Live chat with free trial.
    • \n
\n

Newsletters

\n
    \n
  • MailChimp - Free email marketing. You can pay to add more features.
    • \n
  • Constant Contact - Email marketing with campaigns, autoresponders, and analytics.
    • \n
  • AWeber - Email marketing with campaigns, autoresponders, and analytics.
    • \n
  • Campaign Monitor - Email marketing with campaigns, autoresponders, and analytics.
    • \n
  • MailerLite - Free email marketing. You can pay for more subscribers.
    • \n
\n

Social Media

\n
    \n
  • Pinterest - Pin It Button.
    • \n
  • Twitter - Embedded tweets.
    • \n
  • Facebook - Facebook embedded plugins.
    • \n
  • ShareThis - Sharing buttons for multiple social networks.
    • \n
  • Kontaktify - A contact widget that provides an easy way for visitors to get in touch.
    • \n
\n

Surveys

\n
    \n
  • Google Forms - You can use Google forms for surveys or for forms on your site.
    • \n
  • SurveyMonkey - Easy to use and free surveys.
    • \n
  • Typeform - Really beautiful forms.
    • \n
  • Qualaroo - Embed surveys anywhere on your website that comes up from the bottom right side of the screen.
    • \n
  • Insight Stash - Fast, Simple survey forms.
    • \n
\n

E-Commerce

\n
    \n
  • Ecwid - Embeddable shopping cart.
    • \n
  • FoxyCart - Add a shopping cart with basic html code.
    • \n
  • Snipcart - Include a few lines of code for a full online shop.
    • \n
  • Gumroad - An all-in-one solution to sell your work.
    • \n
  • Payhip - An embeddable way to sell digital downloads & memberships
    • \n
  • Moltin - Add eCommerce functionality to anything.
    • \n
  • Trolley - Add a popup cart to any website - designed for static & JAMstack sites.
    • \n
  • Commerce Layer - Add enterprise ecommerce to your JAMstack.
    • \n
\n

Payments

\n\n

Search

\n

Self-hosted:

\n
    \n
  • lunr.js - Simple full-text search in your browser.
    • \n
  • itemsjs - Full text, faceted, almost dependency free search engine in javascript
    • \n
  • minisearch - Tiny and powerful JavaScript full-text search engine for browser and Node
    • \n
  • flexsearch - Next-Generation full text search library for Browser and Node.js
    • \n
  • fuse.js - Powerful, lightweight fuzzy-search library, with zero dependencies
    • \n
  • static-search - A Go program to generate JSON index of HTML files, and a JavaScript component with optional UI to search this index
    • \n
  • elasticlunr - Lightweight full-text search engine developed in JavaScript for browser search and offline search based on Lunr.js
    • \n
  • tinysearch - Tiny, full-text search engine for static websites built with Rust and Wasm
    • \n
  • js-search - Client-side searches of JavaScript and JSON objects, ES5 compatible and does not require jQuery or any other third-party libraries
    • \n
  • search-index - A persistent, network resilient, full text search library for the browser and Node.js
    • \n
  • fuzzysearch - Tiny and blazing-fast fuzzy search in JavaScript
    • \n
  • fuzzy - Fuzzy search / filter for browser and node
    • \n
  • fullproof - Javascript library that provides high-quality full-text search in the browser
    • \n
  • Jets.js - Native CSS search engine
    • \n
\n

Third party integration:

\n
    \n
  • Google Custom Search Engine - Search your site with a custom Google Search.
    • \n
  • Algolia - Hosted Search API that delivers instant and relevant results from the first keystroke.
    • \n
  • CloudSh - Powerful search for your website with a few lines of JavaScript.
    • \n
\n

Analytics

\n\n

Authentication

\n
    \n
  • Uthentic - Serverless, passwordless login for static sites in 2 lines of code.
    • \n
\n

Other

\n\n

Related Lists

\n"},{"url":"/docs/reference/google-cloud/","relativePath":"docs/reference/google-cloud.md","relativeDir":"docs/reference","base":"google-cloud.md","name":"google-cloud","frontmatter":{"title":"Google Cloud","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

The gcloud command-line tool cheat sheet

\n

The gcloud cheat sheet

\n

A roster of go-to gcloud commands for the gcloud tool, Google Cloud's primary command-line tool.

\n

(Also included: introductory primer, understanding commands, and a printable PDF.)

\n

Cheat sheet

\n

Getting started

\n

Get going with the gcloud command-line tool.

\n\n

Help

\n

Cloud SDK is happy to help.

\n
    \n
  • gcloud help: Search the gcloud tool reference documents for specific terms.
    • \n
  • gcloud feedback: Provide feedback for the Cloud SDK team.
    • \n
  • gcloud topic: Supplementary help material for non-command topics like accessibility, filtering, and formatting.
    • \n
\n

Personalization

\n

Make the Cloud SDK your own; personalize your configuration with properties.

\n\n

Credentials

\n

Grant and revoke authorization to Cloud SDK

\n\n

Projects

\n

Manage project access policies

\n\n

Identity & Access Management

\n

Configuring Cloud Identity & Access Management (IAM) preferences and service accounts

\n\n

Docker & Google Kubernetes Engine (GKE)

\n

Manage containerized applications on Kubernetes

\n\n

Virtual Machines & Compute Engine

\n

Create, run, and manage VMs on Google infrastructure

\n\n

Serverless & App Engine

\n

Build highly scalable applications on a fully managed serverless platform

\n\n

Miscellaneous

\n

Commands that might come in handy

\n\n

Introductory primer

\n

A quick primer for getting started with the gcloud command-line tool.

\n

Installing the Cloud SDK

\n

Install the Cloud SDK with these installation instructions.

\n

Flags, arguments, and other wondrous additions

\n

Arguments can be Positional args or Flags

\n
    \n
  • Positional args: Set after command name; must respect order of positional args.
    • \n
  • \n

    Flags: Set after positional args; order of flags doesn't matter.

    \n

    A flag can be either a:

    \n
      \n
    • Name-value pair (--foo=bar), or
      • \n
    • Boolean (--force/no-force).
      • \n
    \n

    Additionally, flags can either be:

    \n
      \n
    • Required
      • \n
    • Optional: in which case, the default value is used, if the flag is not defined
      • \n
    \n
    • \n
\n

Global flags

\n

Some flags are available throughout the gcloud command-line tool experience, like:

\n
    \n
  • --help: For when in doubt; display detailed help for a command.
    • \n
  • --project: If using a project other than the current one.
    • \n
  • --quiet: Disabling interactive prompting (and applying default values for inputs).
    • \n
  • --verbosity: Can set verbosity levels at debug, info, warning, error, critical, and none.
    • \n
  • --version: Display gcloud version information.
    • \n
  • --format: Set output format as config, csv, default, diff, disable, flattened, get, json, list, multi, none, object, table, text, value, or yaml.
    • \n
\n

Cleaning up results

\n

Extricate the most from your output with the filter, format, limit, and sort-by flags.

\n

For Compute Engine instances with prefix us and not machine type f1-micro:

\n

For a list of projects created on or after 15 January 2018, sorted from oldest to newest, presented as a table with project number, project id and creation time columns with dates and times in local timezone:

\n

For a list of ten Compute Engine instances with a label my-label (of any value):

\n

Understanding commands

\n

The underlying patterns for gcloud commands; to aid self-discovery of commands.

\n

Finding gcloud commands

\n

The gcloud command-line tool is a tree; non-leaf nodes are command groups and leaf nodes are commands. (Also, tab completion works for commands and resources!)

\n

Most gcloud commands follow the following format:

\n

For example: gcloud + compute + instances + create + example-instance-1 + --zone=us-central1-a

\n

Release level

\n

Release Level refers to the command's release status.

\n

Example: alpha for alpha commands, beta for beta commands, no release level needed for GA commands.

\n

Component

\n

Component refers to the different Google Cloud services.

\n

Example: compute for Compute Engine, app for App Engine, etc.

\n

Entity

\n

Entity refers to the plural form of an element or collection of elements under a component.

\n

Example: disks, firewalls, images, instances, regions, zones for compute

\n

Operation

\n

Operation refers to the imperative verb form of the operation to be performed on the entity.

\n

Example: Common operations are describe, list, create/update, delete/clear, import, export, copy, remove, add, reset, restart, restore, run, and deploy.

\n

Positional args

\n

Positional args refer to the required, order-specific arguments needed to execute the command.

\n

Example: <INSTANCE_NAMES> is the required positional argument for gcloud compute instances create.

\n

Flags

\n

Flags refer to the additional arguments, --flag-name(=value), passed in to the command after positional args.

\n

Example: --machine-type=<MACHINE_TYPE> and --preemptible are optional flags for gcloud compute instances create.

"},{"url":"/docs/reference/bash-commands/","relativePath":"docs/reference/bash-commands.md","relativeDir":"docs/reference","base":"bash-commands.md","name":"bash-commands","frontmatter":{"title":"Bash-Commands","weight":0,"seo":{"title":"Bash-Commands","description":"This is the Bash-Commands page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Bash-Commands","keyName":"property"},{"name":"og:description","value":"This is the Bash-Commands page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Bash-Commands"},{"name":"twitter:description","value":"This is the Bash-Commands page"}]},"template":"docs"},"html":"

My Commands:

\n

Find:

\n

To find files by case-insensitive extension (ex: .jpg, .JPG, .jpG):

\n

find . -iname \"*.jpg\"

\n

To find directories:

\n

find . -type d

\n

To find files:

\n

find . -type f

\n

To find files by octal permission:

\n

find . -type f -perm 777

\n

To find files with setuid bit set:

\n

find . -xdev ( -perm -4000 ) -type f -print0 | xargs -0 ls -l

\n

To find files with extension '.txt' and remove them:

\n

find ./path/ -name '*.txt' -exec rm '{}' ;

\n

To find files with extension '.txt' and look for a string into them:

\n

find ./path/ -name '*.txt' | xargs grep 'string'

\n

To find files with size bigger than 5 Mebibyte and sort them by size:

\n

find . -size +5M -type f -print0 | xargs -0 ls -Ssh | sort -z

\n

To find files bigger than 2 Megabyte and list them:

\n

find . -type f -size +200000000c -exec ls -lh {} ; | awk '{ print $9 \": \" $5 }'

\n

To find files modified more than 7 days ago and list file information:

\n

find . -type f -mtime +7d -ls

\n

To find symlinks owned by a user and list file information:

\n

find . -type l -user -ls

\n

To search for and delete empty directories:

\n

find . -type d -empty -exec rmdir {} ;

\n

To search for directories named build at a max depth of 2 directories:

\n

find . -maxdepth 2 -name build -type d

\n

To search all files who are not in .git directory:

\n

find . ! -iwholename '.git' -type f

\n

To find all files that have the same node (hard link) as MYFILEHERE:

\n

find . -type f -samefile MYFILEHERE 2>/dev/null

\n

To find all files in the current directory and modify their permissions:

\n

find . -type f -exec chmod 644 {} ;

\n
\n

1. Remove spaces from file and folder names and then remove numbers from files and folder names....

\n

Description: need to : sudo apt install rename

\n
\n

Notes: Issue when renaming file without numbers collides with existing file name...

\n
\n
code:
\n
find . -name \"* *\" -type d | rename 's/ /_/g'   \nfind . -name \"* *\" -type f | rename 's/ /_/g'\n
\n
```sh\nfind $dir -type f | sed 's|\\(.*/\\)[^A-Z]*\\([A-Z].*\\)|mv \\\"&\\\" \\\"\\1\\2\\\"|' | sh\n\nfind $dir -type d | sed 's|\\(.*/\\)[^A-Z]*\\([A-Z].*\\)|mv \\\"&\\\" \\\"\\1\\2\\\"|' | sh\n\nfor i in *.html; do mv \"$i\" \"${i%-*}.html\"; done\n\nfor i in *.*; do mv \"$i\" \"${i%-*}.${i##*.}\"; done\n\n---\n### Description: combine the contents of every file in the contaning directory.\n\n\n>Notes: this includes the contents of the file it's self...\n\n\n###### code:\n\n\n```js\n//APPEND-DIR.js\nconst fs = require('fs');\nlet cat = require('child_process')\n  .execSync('cat *')\n  .toString('UTF-8');\nfs.writeFile('output.md', cat, err => {\n  if (err) throw err;\n});\n
\n
\n

2. Download Website Using Wget:

\n

Description:

\n
\n

Notes: ==> sudo apt install wget

\n
\n
code:
\n
wget --limit-rate=200k --no-clobber --convert-links --random-wait -r -p -E -e robots=off -U mozilla https://bootcamp42.gitbook.io/python/\n
\n
\n

3. Clean Out Messy Git Repo:

\n

Description: recursively removes git related folders as well as internal use files / attributions in addition to empty folders

\n
\n

Notes: To clear up clutter in repositories that only get used on your local machine.

\n
\n
code:
\n
find . -empty -type d -print -delete        \n\n\nfind . \\( -name \".git\" -o -name \".gitignore\" -o -name \".gitmodules\" -o -name \".gitattributes\" \\) -exec rm -rf -- {} +\n\n\nfind . \\( -name \"*SECURITY.txt\" -o -name \"*RELEASE.txt\" -o  -name \"*CHANGELOG.txt\" -o -name \"*LICENSE.txt\" -o -name \"*CONTRIBUTING.txt\" -name \"*HISTORY.md\" -o -name \"*LICENSE\" -o -name \"*SECURITY.md\" -o -name \"*RELEASE.md\" -o  -name \"*CHANGELOG.md\" -o -name \"*LICENSE.md\" -o -name \"*CODE_OF_CONDUCT.md\" -o -name \"*CONTRIBUTING.md\" \\) -exec rm -rf -- {} +\n
\n
\n

4. clone all of a user's git repositories

\n

Description: clone all of a user or organization's git repositories.

\n
\n

Notes:

\n
\n
code:
\n

Generalized:

\n
CNTX={users|orgs}; NAME={username|orgname}; PAGE=1\ncurl \"https://api.github.com/$CNTX/$NAME/repos?page=$PAGE&per_page=100\" |\n  grep -e 'git_url*' |\n  cut -d \\\" -f 4 |\n  xargs -L1 git clone\n
\n

Clone all Git User

\n
CNTX={users}; NAME={bgoonz}; PAGE=1\ncurl \"https://api.github.com/$CNTX/$NAME/repos?page=$PAGE&per_page=200\"?branch=master |\n  grep -e 'git_url*' |\n  cut -d \\\" -f 4 |\n  xargs -L1 git clone\n
\n

Clone all Git Organization:

\n
CNTX={organizations}; NAME={TheAlgorithms}; PAGE=1\ncurl \"https://api.github.com/$CNTX/$NAME/repos?page=$PAGE&per_page=200\"?branch=master |\n  grep -e 'git_url*' |\n  cut -d \\\" -f 4 |\n  xargs -L1 git clone\n
\n
\n

5. Git Workflow

\n

Description:

\n
code:
\n
git pull\ngit init\ngit add .\ngit commit -m\"update\"\ngit push -u origin master\n
\n
git init\ngit add .\ngit commit -m\"update\"\ngit push -u origin main\n
\n
git init\ngit add .\ngit commit -m\"update\"\ngit push -u origin bryan-guner\n
\n
git init\ngit add .\ngit commit -m\"update\"\ngit push -u origin gh-pages\n
\n
git init\ngit add .\ngit commit -m\"update\"\ngit push -u origin preview\n
\n
\n

6. Recursive Unzip In Place

\n

Description: recursively unzips folders and then deletes the zip file by the same name.

\n
\n

Notes:

\n
\n
code:
\n
find . -name \"*.zip\" | while read filename; do unzip -o -d \"`dirname \"$filename\"`\" \"$filename\"; done;\n\n\n\nfind . -name \"*.zip\" -type f -print -delete\n
\n
\n

7. git pull keeping local changes:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
git stash\ngit pull\ngit stash pop\n
\n
\n

8. Prettier Code Formatter:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
sudo npm i prettier -g\n\nprettier --write .\n
\n
\n

9. Pandoc

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find ./ -iname \"*.md\" -type f -exec sh -c 'pandoc --standalone \"${0}\" -o \"${0%.md}.html\"' {} \\;\n\n\n\nfind ./ -iname \"*.html\" -type f -exec sh -c 'pandoc --wrap=none --from html --to markdown_strict \"${0}\" -o \"${0%.html}.md\"' {} \\;\n\n\n\nfind ./ -iname \"*.docx\" -type f -exec sh -c 'pandoc \"${0}\" -o \"${0%.docx}.md\"' {} \\;\n
\n
\n

10. Gitpod Installs

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
sudo apt install tree \nsudo apt install pandoc -y\nsudo apt install rename -y\nsudo apt install black -y\nsudo apt install wget -y\nnpm i lebab -g\nnpm i prettier -g\nnpm i npm-recursive-install -g\n
\n
black .\n\nprettier --write .\nnpm-recursive-install\n
\n
\n

11. Repo Utils Package:

\n

Description: my standard repo utis package

\n
\n

Notes:

\n
\n
code:
\n
npm i @bgoonz11/repoutils\n
\n
\n

12. Unix Tree Package Usage:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
tree -d -I  'node_modules'\n\ntree  -I  'node_modules'\n\ntree -f  -I  'node_modules' >TREE.md\n\ntree -f -L 2  >README.md\n\ntree -f  -I  'node_modules' >listing-path.md\n\n\ntree -f  -I  'node_modules' -d >TREE.md\n\ntree -f >README.md\n
\n
\n

13. Find & Replace string in file & folder names recursively..

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find . -type f -exec rename 's/string1/string2/g' {} +\n\n\nfind . -type d -exec rename 's/-master//g' {} +\n\n\nfind . -type f -exec rename 's/\\.download//g' {} +\n\n\n\n\nfind . -type d -exec rename 's/-main//g' {} +\n\n\n\nrename 's/\\.js\\.download$/.js/' *.js\\.download \n\n\nrename 's/\\.html\\.markdown$/.md/' *.html\\.markdown \n\n\nfind . -type d -exec rename 's/es6//g' {} +\n
\n
\n

14. Remove double extensions :

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
#!/bin/bash\n\nfor file in *.md.md\ndo\n    mv \"${file}\" \"${file%.md}\"\ndone\n\n#!/bin/bash\n\nfor file in *.html.html\ndo\n    mv \"${file}\" \"${file%.html}\"\ndone\n
\n
#!/bin/bash\n\nfor file in *.html.png\ndo\n    mv \"${file}\" \"${file%.png}\"\ndone\n\nfor file in *.jpg.jpg\ndo\n    mv \"${file}\" \"${file%.png}\"\ndone\n
\n
\n

15. Truncate folder names down to 12 characters:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
for d in ./*; do mv $d ${d:0:12}; done\n
\n
\n

16.Appendir.js

\n

Description: combine the contents of every file in the contaning directory.

\n
\n

Notes: this includes the contents of the file it's self...

\n
\n
code:
\n
//APPEND-DIR.js\nconst fs = require('fs');\nlet cat = require('child_process')\n  .execSync('cat *')\n  .toString('UTF-8');\nfs.writeFile('output.md', cat, err => {\n  if (err) throw err;\n});\n
\n
\n

17. Replace space in filename with underscore

\n

Description: followed by replace '#' with '_' in directory name

\n
\n

Notes: Can be re-purposed to find and replace any set of strings in file or folder names.

\n
\n
code:
\n
find . -name \"* *\" -type f | rename 's/_//g'\n\nfind . -name \"* *\" -type d | rename 's/#/_/g'   \n
\n
\n

18. Filter & delete files by name and extension

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find . -name '.bin' -type d -prune -exec rm -rf '{}' +\n\nfind . -name '*.html' -type d -prune -exec rm -rf '{}' +\n\nfind . -name 'nav-index' -type d -prune -exec rm -rf '{}' +\n\nfind . -name 'node-gyp' -type d -prune -exec rm -rf '{}' +\n\nfind . -name 'deleteme.txt' -type f -prune -exec rm -rf '{}' +\n\nfind . -name 'right.html' -type f -prune -exec rm -rf '{}' +\n\nfind . -name 'left.html' -type f -prune -exec rm -rf '{}' +\n
\n
\n

19. Remove lines containing string:

\n

Description:

\n
\n

Notes: Remove lines not containing '.js'

\n
\n
sudo sed -i '/\\.js/!d' ./*scrap2.md\n
\n
code:
\n
sudo sed -i '/githubusercontent/d' ./*sandbox.md\n\n\nsudo sed -i '/githubusercontent/d' ./*scrap2.md\n\n\n\nsudo sed -i '/github\\.com/d' ./*out.md\n\n\nsudo sed -i '/author/d' ./*\n
\n
\n

20. Remove duplicate lines from a text file

\n

Description:

\n
\n

Notes:\n//...syntax of uniq...//\n$uniq [OPTION] [INPUT[OUTPUT]]\nThe syntax of this is quite easy to understand. Here, INPUT refers to the input file in which repeated lines need to be filtered out and if INPUT isn’t specified then uniq reads from the standard input. OUTPUT refers to the output file in which you can store the filtered output generated by uniq command and as in case of INPUT if OUTPUT isn’t specified then uniq writes to the standard output.

\n
\n

Now, let’s understand the use of this with the help of an example. Suppose you have a text file named kt.txt which contains repeated lines that needs to be omitted. This can simply be done with uniq.

\n
code:
\n
sudo apt install uniq\nuniq -u input.txt output.txt\n
\n
\n

21. Remove lines containing string:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
sudo sed -i '/githubusercontent/d' ./*sandbox.md\n\n\nsudo sed -i '/githubusercontent/d' ./*scrap2.md\n\n\nsudo sed -i '/github\\.com/d' ./*out.md\n\n---\ntitle: add_days\ntags: date,intermediate\nfirstSeen: 2020-10-28T16:19:04+02:00\nlastUpdated: 2020-10-28T16:19:04+02:00\n---\n\nsudo sed -i '/title:/d' ./*output.md\nsudo sed -i '/firstSeen/d' ./*output.md\nsudo sed -i '/lastUpdated/d' ./*output.md\nsudo sed -i '/tags:/d' ./*output.md\n\nsudo sed -i '/badstring/d' ./*\n\n\nsudo sed -i '/stargazers/d' ./repo.txt\nsudo sed -i '/node_modules/d' ./index.html\nsudo sed -i '/right\\.html/d' ./index.html\nsudo sed -i '/right\\.html/d' ./right.html\n
\n
\n

22. Zip directory excluding .git and node_modules all the way down (Linux)

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
#!/bin/bash\nTSTAMP=`date '+%Y%m%d-%H%M%S'`\nzip -r $1.$TSTAMP.zip $1 -x \"**.git/*\" -x \"**node_modules/*\" `shift; echo $@;`\n\nprintf \"\\nCreated: $1.$TSTAMP.zip\\n\"\n\n# usage: \n# - zipdir thedir\n# - zip thedir -x \"**anotherexcludedsubdir/*\"    (important the double quotes to prevent glob expansion)\n\n# if in windows/git-bash, add 'zip' command this way: \n# https://stackoverflow.com/a/55749636/1482990\n
\n
\n

23. Delete files containing a certain string:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find . | xargs grep -l www.redhat.com | awk '{print \"rm \"$1}' > doit.sh\nvi doit.sh // check for murphy and his law\nsource doit.sh\n
\n
\n

24.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
#!/bin/sh\n\n# find ./ | grep -i \"\\.*$\" >files\nfind ./ | sed -E -e 's/([^ ]+[ ]+){8}//' | grep -i \"\\.*$\">files\nlisting=\"files\"\n\nout=\"\"\n\nhtml=\"sitemap.html\"\nout=\"basename $out.html\"\nhtml=\"sitemap.html\"\ncmd() {\n\n  echo '  <!DOCTYPE html>'\n  echo '<html>'\n  echo '<head>'\n\n  echo '  <meta http-equiv=\"Content-Type\" content=\"text/html\">'\n\n  echo '  <meta name=\"Author\" content=\"Bryan Guner\">'\n  echo '<link rel=\"stylesheet\" href=\"./assets/prism.css\">'\n  echo ' <link rel=\"stylesheet\" href=\"./assets/style.css\">'\n  echo ' <script async defer src=\"./assets/prism.js\"></script>'\n\n  echo \"  <title> directory </title>\"\n    echo '<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/bgoonz/GIT-CDN-FILES/mdn-article.css\">'\n  echo '<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/bgoonz/GIT-CDN-FILES/markdown-to-html-style.css\">'\n  echo \"\"\n  echo '<style>'\n\n\necho '    a {'\necho '      color: black;'\necho '    }'\necho ''\necho '    li {'\necho '      border: 1px solid black !important;'\necho '      font-size: 20px;'\necho '      letter-spacing: 0px;'\necho '      font-weight: 700;'\necho '      line-height: 16px;'\necho '      text-decoration: none !important;'\necho '      text-transform: uppercase;'\necho '      background: #194ccdaf !important;'\necho '      color: black !important;'\necho '      border: none;'\necho '      cursor: pointer;'\necho '      justify-content: center;'\necho '      padding: 30px 60px;'\necho '      height: 48px;'\necho '      text-align: center;'\necho '      white-space: normal;'\necho '      border-radius: 10px;'\necho '      min-width: 45em;'\necho '      padding: 1.2em 1em 0;'\necho '      box-shadow: 0 0 5px;'\necho '      margin: 1em;'\necho '      display: grid;'\necho '      -webkit-border-radius: 10px;'\necho '      -moz-border-radius: 10px;'\necho '      -ms-border-radius: 10px;'\necho '      -o-border-radius: 10px;'\necho '    }'\necho '  </style>'\n  echo '</head>'\n\n  echo '<body>'\n\n  echo \"\"\n\n  # continue with the HTML stuff\n\n  echo \"\"\n\n  echo \"\"\n\n  echo \"<ul>\"\n\n  awk '{print \"<li><a href=\\\"\"$1\"\\\">\",$1,\"&nbsp;</a></li>\"}' $listing\n\n  # awk '{print \"<li>\"};\n\n  #     {print \" <a href=\\\"\"$1\"\\\">\",$1,\"</a></li>&nbsp;\"}' \\ $listing\n\n  echo \"\"\n\n  echo \"</ul>\"\n\n  echo \"</body>\"\n\n  echo \"</html>\"\n\n}\n\ncmd $listing --sort=extension >>$html\n
\n
\n

25. Index of Iframes

\n

Description: Creates an index.html file that contains all the files in the working directory or any of it's sub folders as iframes instead of anchor tags.

\n
\n

Notes: Useful Follow up Code:

\n
\n
\n
code:
\n
#!/bin/sh\n\n# find ./ | grep -i \"\\.*$\" >files\nfind ./ | sed -E -e 's/([^ ]+[ ]+){8}//' | grep -i \"\\.*$\">files\nlisting=\"files\"\n\nout=\"\"\n\nhtml=\"index.html\"\nout=\"basename $out.html\"\nhtml=\"index.html\"\ncmd() {\n\n  echo '  <!DOCTYPE html>'\n  echo '<html>'\n  echo '<head>'\n\n  echo '  <meta http-equiv=\"Content-Type\" content=\"text/html\">'\n\n  echo '  <meta name=\"Author\" content=\"Bryan Guner\">'\n  echo '<link rel=\"stylesheet\" href=\"./assets/prism.css\">'\n  echo ' <link rel=\"stylesheet\" href=\"./assets/style.css\">'\n  echo ' <script async defer src=\"./assets/prism.js\"></script>'\n\n  echo \"  <title> directory </title>\"\n\n  echo \"\"\n  echo '<style>'\n\n\necho '    a {'\necho '      color: black;'\necho '    }'\necho ''\necho '    li {'\necho '      border: 1px solid black !important;'\necho '      font-size: 20px;'\necho '      letter-spacing: 0px;'\necho '      font-weight: 700;'\necho '      line-height: 16px;'\necho '      text-decoration: none !important;'\necho '      text-transform: uppercase;'\necho '      background: #194ccdaf !important;'\necho '      color: black !important;'\necho '      border: none;'\necho '      cursor: pointer;'\necho '      justify-content: center;'\necho '      padding: 30px 60px;'\necho '      height: 48px;'\necho '      text-align: center;'\necho '      white-space: normal;'\necho '      border-radius: 10px;'\necho '      min-width: 45em;'\necho '      padding: 1.2em 1em 0;'\necho '      box-shadow: 0 0 5px;'\necho '      margin: 1em;'\necho '      display: grid;'\necho '      -webkit-border-radius: 10px;'\necho '      -moz-border-radius: 10px;'\necho '      -ms-border-radius: 10px;'\necho '      -o-border-radius: 10px;'\necho '    }'\necho '  </style>'\n  echo '</head>'\n\n  echo '<body>'\n\n  echo \"\"\n\n  # continue with the HTML stuff\n\n  echo \"\"\n\n  echo \"\"\n\n  echo \"<ul>\"\n\n  awk '{print \"<iframe src=\\\"\"$1\"\\\">\",\"</iframe>\"}' $listing\n\n  # awk '{print \"<li>\"};\n\n  #     {print \" <a href=\\\"\"$1\"\\\">\",$1,\"</a></li>&nbsp;\"}' \\ $listing\n\n  echo \"\"\n\n  echo \"</ul>\"\n\n  echo \"</body>\"\n\n  echo \"</html>\"\n\n}\n\ncmd $listing --sort=extension >>$html\n
\n
\n

26. Filter Corrupted Git Repo For Troublesome File:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
git filter-branch --index-filter 'git rm -r --cached --ignore-unmatch assets/_index.html' HEAD\n
\n
\n

27. OVERWRITE LOCAL CHANGES:

\n

Description:

\n

Important: If you have any local changes, they will be lost. With or without --hard option, any local commits that haven't been pushed will be lost.[*]\nIf you have any files that are not tracked by Git (e.g. uploaded user content), these files will not be affected.

\n
\n

Notes:\nFirst, run a fetch to update all origin/ refs to latest:

\n
\n
code:
\n
git fetch --all\n# Backup your current branch:\n\ngit branch backup-master\n# Then, you have two options:\n\ngit reset --hard origin/master\n# OR If you are on some other branch:\n\ngit reset --hard origin/<branch_name>\n# Explanation:\n# git fetch downloads the latest from remote without trying to merge or rebase anything.\n\n# Then the git reset resets the master branch to what you just fetched. The --hard option changes all the files in your working tree to match the files in origin/master\ngit fetch --all\ngit reset --hard origin/master\n
\n
\n

28. Remove Submodules:

\n

Description: To remove a submodule you need to:

\n
\n

Notes:

\n
\n
\n

Delete the relevant section from the .gitmodules file.\nStage the .gitmodules changes git add .gitmodules\nDelete the relevant section from .git/config.\nRun git rm --cached pathtosubmodule (no trailing slash).\nRun rm -rf .git/modules/pathtosubmodule (no trailing slash).\nCommit git commit -m \"Removed submodule \"\nDelete the now untracked submodule files rm -rf pathtosubmodule

\n
\n
code:
\n
git submodule deinit\n
\n
\n

29. GET GISTS

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
sudo apt install wget\n\n\n\nwget -q -O - https://api.github.com/users/bgoonz/gists | grep raw_url | awk -F\\\" '{print $4}' | xargs -n3 wget\n\n\nwget -q -O - https://api.github.com/users/amitness/gists | grep raw_url | awk -F\\\" '{print $4}' | xargs -n3 wget\n\n\nwget -q -O - https://api.github.com/users/drodsou/gists | grep raw_url | awk -F\\\" '{print $4}' | xargs -n1 wget\n\nwget -q -O - https://api.github.com/users/thomasmb/gists | grep raw_url | awk -F\\\" '{print $4}' | xargs -n1 wget\n
\n
\n

30. Remove Remote OriginL

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
git remote remove origin\n
\n
\n

31. just clone .git folder:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
git clone --bare --branch=master --single-branch https://github.com/bgoonz/My-Web-Dev-Archive.git\n
\n
\n

32. Undo recent pull request:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
git reset --hard master@{\"10 minutes ago\"}\n
\n
\n

33. Lebab

\n

Description: ES5 --> ES6

\n
\n

Notes:

\n
\n
code:
\n
# Safe:\n\n lebab --replace ./ --transform arrow\n lebab --replace ./ --transform arrow-return\n lebab --replace ./ --transform for-of\n lebab --replace ./ --transform for-each\n lebab --replace ./ --transform arg-rest\n lebab --replace ./ --transform arg-spread\n lebab --replace ./ --transform obj-method\n lebab --replace ./ --transform obj-shorthand\n lebab --replace ./ --transform multi-var\n\n\n# ALL:\n\n\nlebab --replace ./ --transform obj-method\nlebab --replace ./ --transform class\nlebab --replace ./ --transform arrow\nlebab --replace ./ --transform let\nlebab --replace ./ --transform arg-spread\nlebab --replace ./ --transform arg-rest\nlebab --replace ./ --transform for-each\nlebab --replace ./ --transform for-of\nlebab --replace ./ --transform commonjs \nlebab --replace ./ --transform exponent\nlebab --replace ./ --transform multi-var\nlebab --replace ./ --transform template\nlebab --replace ./ --transform default-param\nlebab --replace ./ --transform  destruct-param \nlebab --replace ./ --transform includes\nlebab --replace ./ --transform obj-method\nlebab --replace ./ --transform class\nlebab --replace ./ --transform arrow\nlebab --replace ./ --transform arg-spread\nlebab --replace ./ --transform arg-rest\nlebab --replace ./ --transform for-each\nlebab --replace ./ --transform for-of\nlebab --replace ./ --transform commonjs \nlebab --replace ./ --transform exponent\nlebab --replace ./ --transform multi-var\nlebab --replace ./ --transform template\nlebab --replace ./ --transform default-param\nlebab --replace ./ --transform  destruct-param \nlebab --replace ./ --transform includes\n
\n
\n

34. Troubleshoot Ubuntu Input/Output Error

\n

Description: Open Powershell as Administrator...

\n
\n

Notes:

\n
\n
code:
\n
 wsl.exe --shutdown\n\n Get-Service LxssManager | Restart-Service\n
\n
\n

35. Export Medium as Markdown

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
npm i mediumexporter -g\n\n\nmediumexporter https://medium.com/codex/fundamental-data-structures-in-javascript-8f9f709c15b4 >ds.md\n
\n
\n

36. Delete files in violation of a given size range (100MB for git)

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find . -size +75M -a -print -a -exec rm -f {} \\;\n\n\n\n\nfind . -size +98M -a -print -a -exec rm -f {} \\;\n
\n
\n

37. download all links of given file type

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
wget -r -A.pdf https://overapi.com/git\n
\n
\n

38. Kill all node processes

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
killall -s KILL node\n
\n
\n

39. Remove string from file names recursively

\n

Description: In the example below I am using this command to remove the string \"-master\" from all file names in the working directory and all of it's sub directories.

\n
code:
\n
find <mydir> -type f -exec sed -i 's/<string1>/<string2>/g' {} +\n\n\n\n\nfind . -type f -exec rename 's/-master//g' {} +\n
\n
\n

Notes: The same could be done for folder names by changing the -type f flag (for file) to a -type d flag (for directory)

\n
\n
find <mydir> -type d -exec sed -i 's/<string1>/<string2>/g' {} +\n\n\n\n\nfind . -type d -exec rename 's/-master//g' {} +\n
\n
\n

40. Remove spaces from file and folder names recursively

\n

Description: replaces spaces in file and folder names with an _ underscore

\n
\n

Notes: need to run sudo apt install rename to use this command

\n
\n
code:
\n
find . -name \"* *\" -type d | rename 's/ /_/g'   \nfind . -name \"* *\" -type f | rename 's/ /_/g'\n
\n
\n

41. Zip Each subdirectories in a given directory into their own zip file

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
for i in */; do zip -r \"${i%/}.zip\" \"$i\"; done\n
\n
\n

42.

\n

43.

\n

44.

\n

45.

\n

46.

\n

47.

\n

48.

\n

49.

\n

50.

\n

51.

\n

52.

\n

53.

\n

54.

\n

55.

\n

56.

\n

57.

\n

58.

\n

59.

\n

60.

\n

61.

\n

62.

\n

63.

\n

64.

\n

65.

\n

66.

\n

67.

\n

68.

\n

69.

\n

70.

\n

71.

\n

72.

\n

73.

\n

74.

\n

75.

\n

76.

\n

77.

\n

78.

\n

79.

\n

80.

\n

81.

\n

82.

\n

83.

\n

84.

\n

85.

\n

86.

\n

87.

\n

88.

\n

89.

\n

90.

\n

91. Unzip PowerShell

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
PARAM (\n    [string] $ZipFilesPath = \"./\",\n    [string] $UnzipPath = \"./RESULT\"\n)\n \n$Shell = New-Object -com Shell.Application\n$Location = $Shell.NameSpace($UnzipPath)\n \n$ZipFiles = Get-Childitem $ZipFilesPath -Recurse -Include *.ZIP\n \n$progress = 1\nforeach ($ZipFile in $ZipFiles) {\n    Write-Progress -Activity \"Unzipping to $($UnzipPath)\" -PercentComplete (($progress / ($ZipFiles.Count + 1)) * 100) -CurrentOperation $ZipFile.FullName -Status \"File $($Progress) of $($ZipFiles.Count)\"\n    $ZipFolder = $Shell.NameSpace($ZipFile.fullname)\n \n \n    $Location.Copyhere($ZipFolder.items(), 1040) # 1040 - No msgboxes to the user - http://msdn.microsoft.com/en-us/library/bb787866%28VS.85%29.aspx\n    $progress++\n}\n
\n
\n

92. return to bash from zsh

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
 sudo apt --purge remove zsh\n
\n
\n

93. Symbolic Link

\n

Description: to working directory

\n
\n

Notes:

\n
\n
code:
\n
ln -s \"$(pwd)\" ~/NameOfLink\n\nln -s \"$(pwd)\" ~/Downloads\n
\n
\n

94. auto generate readme

\n

Description: rename existing readme to blueprint.md

\n
\n

Notes:

\n
\n
code:
\n
npx @appnest/readme generate\n
\n
\n

95. Log into postgres:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
sudo -u postgres psql\n
\n
\n

96. URL To Subscribe To YouTube Channel

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
https://www.youtube.com/channel/UC1HDa0wWnIKUf-b4yY9JecQ?sub_confirmation=1\n
\n
\n

97. Embed Repl.it In Medium Post:

\n
code:
\n
https://repl.it/@bgoonz/Data-Structures-Algos-Codebase?lite=true&amp;referrer=https%3A%2F%2Fbryanguner.medium.com\n\n\nhttps://repl.it/@bgoonz/node-db1-project?lite=true&amp;referrer=https%3A%2F%2Fbryanguner.medium.com\n\nhttps://repl.it/@bgoonz/interview-prac?lite=true&amp;referrer=https%3A%2F%2Fbryanguner.medium.com\n\n\nhttps://repl.it/@bgoonz/Database-Prac?lite=true&amp;referrer=https%3A%2F%2Fbryanguner.medium.com\n
\n
\n

98.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find . -name *right.html  -type f -exec sed -i 's/target=\"_parent\"//g' {} +\n\n\nfind . -name *right.html  -type f -exec sed -i 's/target=\"_parent\"//g' {} +\n
\n
\n

99. Cheat Sheet

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
#!/bin/bash\n##############################################################################\n# SHORTCUTS and HISTORY\n##############################################################################\n\nCTRL+A  # move to beginning of line\nCTRL+B  # moves backward one character\nCTRL+C  # halts the current command\nCTRL+D  # deletes one character backward or logs out of current session, similar to exit\nCTRL+E  # moves to end of line\nCTRL+F  # moves forward one character\nCTRL+G  # aborts the current editing command and ring the terminal bell\nCTRL+H  # deletes one character under cursor (same as DELETE)\nCTRL+J  # same as RETURN\nCTRL+K  # deletes (kill) forward to end of line\nCTRL+L  # clears screen and redisplay the line\nCTRL+M  # same as RETURN\nCTRL+N  # next line in command history\nCTRL+O  # same as RETURN, then displays next line in history file\nCTRL+P  # previous line in command history\nCTRL+Q  # resumes suspended shell output\nCTRL+R  # searches backward\nCTRL+S  # searches forward or suspends shell output\nCTRL+T  # transposes two characters\nCTRL+U  # kills backward from point to the beginning of line\nCTRL+V  # makes the next character typed verbatim\nCTRL+W  # kills the word behind the cursor\nCTRL+X  # lists the possible filename completions of the current word\nCTRL+Y  # retrieves (yank) last item killed\nCTRL+Z  # stops the current command, resume with fg in the foreground or bg in the background\n\nALT+B   # moves backward one word\nALT+D   # deletes next word\nALT+F   # moves forward one word\nALT+H   # deletes one character backward\nALT+T   # transposes two words\nALT+.   # pastes last word from the last command. Pressing it repeatedly traverses through command history.\nALT+U   # capitalizes every character from the current cursor position to the end of the word\nALT+L   # uncapitalizes every character from the current cursor position to the end of the word\nALT+C   # capitalizes the letter under the cursor. The cursor then moves to the end of the word.\nALT+R   # reverts any changes to a command you’ve pulled from your history if you’ve edited it.\nALT+?   # list possible completions to what is typed\nALT+^   # expand line to most recent match from history\n\nCTRL+X then (   # start recording a keyboard macro\nCTRL+X then )   # finish recording keyboard macro\nCTRL+X then E   # recall last recorded keyboard macro\nCTRL+X then CTRL+E   # invoke text editor (specified by $EDITOR) on current command line then execute resultes as shell commands\n\nBACKSPACE  # deletes one character backward\nDELETE     # deletes one character under cursor\n\nhistory   # shows command line history\n!!        # repeats the last command\n!<n>      # refers to command line 'n'\n!<string> # refers to command starting with 'string'\n\nexit      # logs out of current session\n\n\n##############################################################################\n# BASH BASICS\n##############################################################################\n\nenv                 # displays all environment variables\n\necho $SHELL         # displays the shell you're using\necho $BASH_VERSION  # displays bash version\n\nbash                # if you want to use bash (type exit to go back to your previously opened shell)\nwhereis bash        # locates the binary, source and manual-page for a command\nwhich bash          # finds out which program is executed as 'bash' (default: /bin/bash, can change across environments)\n\nclear               # clears content on window (hide displayed lines)\n\n\n##############################################################################\n# FILE COMMANDS\n##############################################################################\n\n\nls                            # lists your files in current directory, ls <dir> to print files in a specific directory\nls -l                         # lists your files in 'long format', which contains the exact size of the file, who owns the file and who has the right to look at it, and when it was last modified\nls -a                         # lists all files in 'long format', including hidden files (name beginning with '.')\nln -s <filename> <link>       # creates symbolic link to file\nreadlink <filename>           # shows where a symbolic links points to\ntree                          # show directories and subdirectories in easilly readable file tree\nmc                            # terminal file explorer (alternative to ncdu)\ntouch <filename>              # creates or updates (edit) your file\nmktemp -t <filename>            # make a temp file in /tmp/ which is deleted at next boot (-d to make directory)\ncat <filename>                # prints file raw content (will not be interpreted)\nany_command > <filename>      # '>' is used to perform redirections, it will set any_command's stdout to file instead of \"real stdout\" (generally /dev/stdout)\nmore <filename>               # shows the first part of a file (move with space and type q to quit)\nhead <filename>               # outputs the first lines of file (default: 10 lines)\ntail <filename>               # outputs the last lines of file (useful with -f option) (default: 10 lines)\nvim <filename>                # opens a file in VIM (VI iMproved) text editor, will create it if it doesn't exist\nmv <filename1> <dest>         # moves a file to destination, behavior will change based on 'dest' type (dir: file is placed into dir; file: file will replace dest (tip: useful for renaming))\ncp <filename1> <dest>         # copies a file\nrm <filename>                 # removes a file\nfind . -name <name> <type>    # searches for a file or a directory in the current directory and all its sub-directories by its name\ndiff <filename1> <filename2>  # compares files, and shows where they differ\nwc <filename>                 # tells you how many lines, words and characters there are in a file. Use -lwc (lines, word, character) to ouput only 1 of those informations\nsort <filename>               # sorts the contents of a text file line by line in alphabetical order, use -n for numeric sort and -r for reversing order.\nsort -t -k <filename>         # sorts the contents on specific sort key field starting from 1, using the field separator t.\nrev                           # reverse string characters (hello becomes olleh)\nchmod -options <filename>     # lets you change the read, write, and execute permissions on your files (more infos: SUID, GUID)\ngzip <filename>               # compresses files using gzip algorithm\ngunzip <filename>             # uncompresses files compressed by gzip\ngzcat <filename>              # lets you look at gzipped file without actually having to gunzip it\nlpr <filename>                # prints the file\nlpq                           # checks out the printer queue\nlprm <jobnumber>              # removes something from the printer queue\ngenscript                     # converts plain text files into postscript for printing and gives you some options for formatting\ndvips <filename>              # prints .dvi files (i.e. files produced by LaTeX)\ngrep <pattern> <filenames>    # looks for the string in the files\ngrep -r <pattern> <dir>       # search recursively for pattern in directory\nhead -n file_name | tail +n   # Print nth line from file.\nhead -y lines.txt | tail +x   # want to display all the lines from x to y. This includes the xth and yth lines.\n\n\n##############################################################################\n# DIRECTORY COMMANDS\n##############################################################################\n\n\nmkdir <dirname>               # makes a new directory\nrmdir <dirname>               # remove an empty directory\nrmdir -rf <dirname>           # remove a non-empty directory\nmv <dir1> <dir2>              # rename a directory from <dir1> to <dir2>\ncd                            # changes to home\ncd ..                         # changes to the parent directory\ncd <dirname>                  # changes directory\ncp -r <dir1> <dir2>           # copy <dir1> into <dir2> including sub-directories\npwd                           # tells you where you currently are\ncd ~                          # changes to home.\ncd -                          # changes to previous working directory\n\n##############################################################################\n# SSH, SYSTEM INFO & NETWORK COMMANDS\n##############################################################################\n\n\nssh user@host            # connects to host as user\nssh -p <port> user@host  # connects to host on specified port as user\nssh-copy-id user@host    # adds your ssh key to host for user to enable a keyed or passwordless login\n\nwhoami                   # returns your username\npasswd                   # lets you change your password\nquota -v                 # shows what your disk quota is\ndate                     # shows the current date and time\ncal                      # shows the month's calendar\nuptime                   # shows current uptime\nw                        # displays whois online\nfinger <user>            # displays information about user\nuname -a                 # shows kernel information\nman <command>            # shows the manual for specified command\ndf                       # shows disk usage\ndu <filename>            # shows the disk usage of the files and directories in filename (du -s give only a total)\nlast <yourUsername>      # lists your last logins\nps -u yourusername       # lists your processes\nkill <PID>               # kills the processes with the ID you gave\nkillall <processname>    # kill all processes with the name\ntop                      # displays your currently active processes\nlsof                     # lists open files\nbg                       # lists stopped or background jobs ; resume a stopped job in the background\nfg                       # brings the most recent job in the foreground\nfg <job>                 # brings job to the foreground\n\nping <host>              # pings host and outputs results\nwhois <domain>           # gets whois information for domain\ndig <domain>             # gets DNS information for domain\ndig -x <host>            # reverses lookup host\nwget <file>              # downloads file\n\ntime <command>             # report time consumed by command execution\n\n\n##############################################################################\n# VARIABLES\n##############################################################################\n\n\nvarname=value                # defines a variable\nvarname=value command        # defines a variable to be in the environment of a particular subprocess\necho $varname                # checks a variable's value\necho $$                      # prints process ID of the current shell\necho $!                      # prints process ID of the most recently invoked background job\necho $?                      # displays the exit status of the last command\nread <varname>               # reads a string from the input and assigns it to a variable\nread -p \"prompt\" <varname>   # same as above but outputs a prompt to ask user for value \ncolumn -t <filename>         # display info in pretty columns (often used with pipe)\nlet <varname> = <equation>   # performs mathematical calculation using operators like +, -, *, /, %\nexport VARNAME=value         # defines an environment variable (will be available in subprocesses)\n\narray[0]=valA                # how to define an array\narray[1]=valB\narray[2]=valC\narray=([2]=valC [0]=valA [1]=valB)  # another way\narray=(valA valB valC)              # and another\n\n${array[i]}                  # displays array's value for this index. If no index is supplied, array element 0 is assumed\n${#array[i]}                 # to find out the length of any element in the array\n${#array[@]}                 # to find out how many values there are in the array\n\ndeclare -a                   # the variables are treated as arrays\ndeclare -f                   # uses function names only\ndeclare -F                   # displays function names without definitions\ndeclare -i                   # the variables are treated as integers\ndeclare -r                   # makes the variables read-only\ndeclare -x                   # marks the variables for export via the environment\n\n${varname:-word}             # if varname exists and isn't null, return its value; otherwise return word\n${varname:word}              # if varname exists and isn't null, return its value; otherwise return word\n${varname:=word}             # if varname exists and isn't null, return its value; otherwise set it word and then return its value\n${varname:?message}          # if varname exists and isn't null, return its value; otherwise print varname, followed by message and abort the current command or script\n${varname:+word}             # if varname exists and isn't null, return word; otherwise return null\n${varname:offset:length}     # performs substring expansion. It returns the substring of $varname starting at offset and up to length characters\n\n${variable#pattern}          # if the pattern matches the beginning of the variable's value, delete the shortest part that matches and return the rest\n${variable##pattern}         # if the pattern matches the beginning of the variable's value, delete the longest part that matches and return the rest\n${variable%pattern}          # if the pattern matches the end of the variable's value, delete the shortest part that matches and return the rest\n${variable%%pattern}         # if the pattern matches the end of the variable's value, delete the longest part that matches and return the rest\n${variable/pattern/string}   # the longest match to pattern in variable is replaced by string. Only the first match is replaced\n${variable//pattern/string}  # the longest match to pattern in variable is replaced by string. All matches are replaced\n\n${#varname}                  # returns the length of the value of the variable as a character string\n\n*(patternlist)               # matches zero or more occurrences of the given patterns\n+(patternlist)               # matches one or more occurrences of the given patterns\n?(patternlist)               # matches zero or one occurrence of the given patterns\n@(patternlist)               # matches exactly one of the given patterns\n!(patternlist)               # matches anything except one of the given patterns\n\n$(UNIX command)              # command substitution: runs the command and returns standard output\n\n\n##############################################################################\n# FUNCTIONS\n##############################################################################\n\n\n# The function refers to passed arguments by position (as if they were positional parameters), that is, $1, $2, and so forth.\n# $@ is equal to \"$1\" \"$2\"... \"$N\", where N is the number of positional parameters. $# holds the number of positional parameters.\n\n\nfunction functname() {\n  shell commands\n}\n\nunset -f functname  # deletes a function definition\ndeclare -f          # displays all defined functions in your login session\n\n\n##############################################################################\n# FLOW CONTROLS\n##############################################################################\n\n\nstatement1 && statement2  # and operator\nstatement1 || statement2  # or operator\n\n-a                        # and operator inside a test conditional expression\n-o                        # or operator inside a test conditional expression\n\n# STRINGS\n\nstr1 == str2               # str1 matches str2\nstr1 != str2               # str1 does not match str2\nstr1 < str2                # str1 is less than str2 (alphabetically)\nstr1 > str2                # str1 is greater than str2 (alphabetically)\nstr1 \\> str2               # str1 is sorted after str2\nstr1 \\< str2               # str1 is sorted before str2\n-n str1                    # str1 is not null (has length greater than 0)\n-z str1                    # str1 is null (has length 0)\n\n# FILES\n\n-a file                   # file exists or its compilation is successful\n-d file                   # file exists and is a directory\n-e file                   # file exists; same -a\n-f file                   # file exists and is a regular file (i.e., not a directory or other special type of file)\n-r file                   # you have read permission\n-s file                   # file exists and is not empty\n-w file                   # your have write permission\n-x file                   # you have execute permission on file, or directory search permission if it is a directory\n-N file                   # file was modified since it was last read\n-O file                   # you own file\n-G file                   # file's group ID matches yours (or one of yours, if you are in multiple groups)\nfile1 -nt file2           # file1 is newer than file2\nfile1 -ot file2           # file1 is older than file2\n\n# NUMBERS\n\n-lt                       # less than\n-le                       # less than or equal\n-eq                       # equal\n-ge                       # greater than or equal\n-gt                       # greater than\n-ne                       # not equal\n\nif condition\nthen\n  statements\n[elif condition\n  then statements...]\n[else\n  statements]\nfi\n\nfor x in {1..10}\ndo\n  statements\ndone\n\nfor name [in list]\ndo\n  statements that can use $name\ndone\n\nfor (( initialisation ; ending condition ; update ))\ndo\n  statements...\ndone\n\ncase expression in\n  pattern1 )\n    statements ;;\n  pattern2 )\n    statements ;;\nesac\n\nselect name [in list]\ndo\n  statements that can use $name\ndone\n\nwhile condition; do\n  statements\ndone\n\nuntil condition; do\n  statements\ndone\n\n##############################################################################\n# COMMAND-LINE PROCESSING CYCLE\n##############################################################################\n\n\n# The default order for command lookup is functions, followed by built-ins, with scripts and executables last.\n# There are three built-ins that you can use to override this order: `command`, `builtin` and `enable`.\n\ncommand  # removes alias and function lookup. Only built-ins and commands found in the search path are executed\nbuiltin  # looks up only built-in commands, ignoring functions and commands found in PATH\nenable   # enables and disables shell built-ins\n\neval     # takes arguments and run them through the command-line processing steps all over again\n\n\n##############################################################################\n# INPUT/OUTPUT REDIRECTORS\n##############################################################################\n\n\ncmd1|cmd2  # pipe; takes standard output of cmd1 as standard input to cmd2\n< file     # takes standard input from file\n> file     # directs standard output to file\n>> file    # directs standard output to file; append to file if it already exists\n>|file     # forces standard output to file even if noclobber is set\nn>|file    # forces output to file from file descriptor n even if noclobber is set\n<> file    # uses file as both standard input and standard output\nn<>file    # uses file as both input and output for file descriptor n\nn>file     # directs file descriptor n to file\nn<file     # takes file descriptor n from file\nn>>file    # directs file description n to file; append to file if it already exists\nn>&        # duplicates standard output to file descriptor n\nn<&        # duplicates standard input from file descriptor n\nn>&m       # file descriptor n is made to be a copy of the output file descriptor\nn<&m       # file descriptor n is made to be a copy of the input file descriptor\n&>file     # directs standard output and standard error to file\n<&-        # closes the standard input\n>&-        # closes the standard output\nn>&-       # closes the ouput from file descriptor n\nn<&-       # closes the input from file descripor n\n\n|tee <file># output command to both terminal and a file (-a to append to file)\n\n\n##############################################################################\n# PROCESS HANDLING\n##############################################################################\n\n\n# To suspend a job, type CTRL+Z while it is running. You can also suspend a job with CTRL+Y.\n# This is slightly different from CTRL+Z in that the process is only stopped when it attempts to read input from terminal.\n# Of course, to interrupt a job, type CTRL+C.\n\nmyCommand &  # runs job in the background and prompts back the shell\n\njobs         # lists all jobs (use with -l to see associated PID)\n\nfg           # brings a background job into the foreground\nfg %+        # brings most recently invoked background job\nfg %-        # brings second most recently invoked background job\nfg %N        # brings job number N\nfg %string   # brings job whose command begins with string\nfg %?string  # brings job whose command contains string\n\nkill -l               # returns a list of all signals on the system, by name and number\nkill PID              # terminates process with specified PID\nkill -s SIGKILL 4500  # sends a signal to force or terminate the process\nkill -15 913          # Ending PID 913 process with signal 15 (TERM)\nkill %1               # Where %1 is the number of job as read from 'jobs' command.\n\nps           # prints a line of information about the current running login shell and any processes running under it\nps -a        # selects all processes with a tty except session leaders\n\ntrap cmd sig1 sig2  # executes a command when a signal is received by the script\ntrap \"\" sig1 sig2   # ignores that signals\ntrap - sig1 sig2    # resets the action taken when the signal is received to the default\n\ndisown <PID|JID>    # removes the process from the list of jobs\n\nwait                # waits until all background jobs have finished\nsleep <number>      # wait # of seconds before continuing\n\npv                  # display progress bar for data handling commands. often used with pipe like |pv\nyes                 # give yes response everytime an input is requested from script/process\n\n\n##############################################################################\n# TIPS & TRICKS\n##############################################################################\n\n\n# set an alias\ncd; nano .bash_profile\n> alias gentlenode='ssh admin@gentlenode.com -p 3404'  # add your alias in .bash_profile\n\n# to quickly go to a specific directory\ncd; nano .bashrc\n> shopt -s cdable_vars\n> export websites=\"/Users/mac/Documents/websites\"\n\nsource .bashrc\ncd $websites\n\n\n##############################################################################\n# DEBUGGING SHELL PROGRAMS\n##############################################################################\n\n\nbash -n scriptname  # don't run commands; check for syntax errors only\nset -o noexec       # alternative (set option in script)\n\nbash -v scriptname  # echo commands before running them\nset -o verbose      # alternative (set option in script)\n\nbash -x scriptname  # echo commands after command-line processing\nset -o xtrace       # alternative (set option in script)\n\ntrap 'echo $varname' EXIT  # useful when you want to print out the values of variables at the point that your script exits\n\nfunction errtrap {\n  es=$?\n  echo \"ERROR line $1: Command exited with status $es.\"\n}\n\ntrap 'errtrap $LINENO' ERR  # is run whenever a command in the surrounding script or function exits with non-zero status\n\nfunction dbgtrap {\n  echo \"badvar is $badvar\"\n}\n\ntrap dbgtrap DEBUG  # causes the trap code to be executed before every statement in a function or script\n# ...section of code in which the problem occurs...\ntrap - DEBUG  # turn off the DEBUG trap\n\nfunction returntrap {\n  echo \"A return occurred\"\n}\n\ntrap returntrap RETURN  # is executed each time a shell function or a script executed with the . or source commands finishes executing\n\n##############################################################################\n# COLORS AND BACKGROUNDS \n##############################################################################\n# note: \\e or \\x1B also work instead of \\033 \n# Reset\nColor_Off='\\033[0m' # Text Reset\n\n# Regular Colors\nBlack='\\033[0;30m'  # Black\nRed='\\033[0;31m'    # Red\nGreen='\\033[0;32m'  # Green\nYellow='\\033[0;33m' # Yellow\nBlue='\\033[0;34m'   # Blue\nPurple='\\033[0;35m' # Purple\nCyan='\\033[0;36m'   # Cyan\nWhite='\\033[0;97m'  # White\n\n# Additional colors\nLGrey='\\033[0;37m'  # Ligth Gray\nDGrey='\\033[0;90m'  # Dark Gray\nLRed='\\033[0;91m'   # Ligth Red\nLGreen='\\033[0;92m' # Ligth Green\nLYellow='\\033[0;93m'# Ligth Yellow\nLBlue='\\033[0;94m'  # Ligth Blue\nLPurple='\\033[0;95m'# Light Purple\nLCyan='\\033[0;96m'  # Ligth Cyan\n\n\n# Bold\nBBlack='\\033[1;30m' # Black\nBRed='\\033[1;31m'   # Red\nBGreen='\\033[1;32m' # Green\nBYellow='\\033[1;33m'# Yellow\nBBlue='\\033[1;34m'  # Blue\nBPurple='\\033[1;35m'# Purple\nBCyan='\\033[1;36m'  # Cyan\nBWhite='\\033[1;37m' # White\n\n# Underline\nUBlack='\\033[4;30m' # Black\nURed='\\033[4;31m'   # Red\nUGreen='\\033[4;32m' # Green\nUYellow='\\033[4;33m'# Yellow\nUBlue='\\033[4;34m'  # Blue\nUPurple='\\033[4;35m'# Purple\nUCyan='\\033[4;36m'  # Cyan\nUWhite='\\033[4;37m' # White\n\n# Background\nOn_Black='\\033[40m' # Black\nOn_Red='\\033[41m'   # Red\nOn_Green='\\033[42m' # Green\nOn_Yellow='\\033[43m'# Yellow\nOn_Blue='\\033[44m'  # Blue\nOn_Purple='\\033[45m'# Purple\nOn_Cyan='\\033[46m'  # Cyan\nOn_White='\\033[47m' # White\n\n# Example of usage\necho -e \"${Green}This is GREEN text${Color_Off} and normal text\"\necho -e \"${Red}${On_White}This is Red test on White background${Color_Off}\" \n# option -e is mandatory, it enable interpretation of backslash escapes\nprintf \"${Red} This is red \\n\"\n
"},{"url":"/docs/reference/","relativePath":"docs/reference/index.md","relativeDir":"docs/reference","base":"index.md","name":"index","frontmatter":{"title":"Reference","weight":0,"excerpt":"helpful reference guides","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Reference:

\n\n

Bookmarks:

\n\n

SearchAwesome:

\n\n

Job Search:

\n"},{"url":"/docs/reference/how-to-kill-a-process/","relativePath":"docs/reference/how-to-kill-a-process.md","relativeDir":"docs/reference","base":"how-to-kill-a-process.md","name":"how-to-kill-a-process","frontmatter":{"title":"Kill a Process in Linux","weight":0,"excerpt":"Kill a Process in Linux","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

How to Kill a Process in Linux

\n

Learn how to kill errant processes in this tutorial.

\n

Picture this: You've launched an application (be it from your favorite desktop menu or from the command line) and you start using that launched app, only to have it lock up on you, stop performing, or unexpectedly die. You try to run the app again, but it turns out the original never truly shut down completely.

\n

What do you do? You kill the process. But how? Believe it or not, your best bet most often lies within the command line. Thankfully, Linux has every tool necessary to empower you, the user, to kill an errant process. However, before you immediately launch that command to kill the process, you first have to know what the process is. How do you take care of this layered task? It's actually quite simple...once you know the tools at your disposal.

\n

Let me introduce you to said tools.

\n

The steps I'm going to outline will work on almost every Linux distribution, whether it is a desktop or a server. I will be dealing strictly with the command line, so open up your terminal and prepare to type.

\n

Locating the process

\n

The first step in killing the unresponsive process is locating it. There are two commands I use to locate a process: top *and *ps. Top is a tool every administrator should get to know. With top, you get a full listing of currently running process. From the command line, issue top to see a list of your running processes (Figure 1).

\n

\n

Figure 1: The top command gives you plenty of information.

\n

From this list you will see some rather important information. Say, for example, Chrome has become unresponsive. According to our top display, we can discern there are four instances of chrome running with Process IDs (PID) 3827, 3919, 10764, and 11679. This information will be important to have with one particular method of killing the process.

\n

Although top is incredibly handy, it's not always the most efficient means of getting the information you need. Let's say you know the Chrome process is what you need to kill, and you don't want to have to glance through the real-time information offered by top. For that, you can make use of the ps *command and filter the output through *grep. The ps command reports a snapshot of a current process and grep *prints lines matching a pattern. The reason why we filter *ps through grep is simple: If you issue the ps command by itself, you will get a snapshot listing of all current processes. We only want the listing associated with Chrome. So this command would look like:

\n

ps aux | grep chrome

\n

The aux options are as follows:

\n
    \n
  • a = show processes for all users
    • \n
  • u = display the process's user/owner
    • \n
  • x = also show processes not attached to a terminal
    • \n
\n

The x option is important when you're hunting for information regarding a graphical application.

\n

When you issue the command above, you'll be given more information than you need (Figure 2) for the killing of a process, but it is sometimes more efficient than using top.

\n

\n

Figure 2: Locating the necessary information with the ps command.

\n

Killing the process

\n

Now we come to the task of killing the process. We have two pieces of information that will help us kill the errant process:

\n
    \n
  • Process name
    • \n
  • Process ID
    • \n
\n

Which you use will determine the command used for termination. There are two commands used to kill a process:

\n
    \n
  • kill -- Kill a process by ID
    • \n
  • killall -- Kill a process by name
    • \n
\n

There are also different signals that can be sent to both kill commands. What signal you send will be determined by what results you want from the kill command. For instance, you can send the HUP (hang up) signal to the kill command, which will effectively restart the process. This is always a wise choice when you need the process to immediately restart (such as in the case of a daemon). You can get a list of all the signals that can be sent to the kill command by issuing kill -l. You'll find quite a large number of signals (Figure 3).

\n

\n

Figure 3: The available kill signals.

\n

The most common kill signals are:

\n

|

\n

Signal Name

\n

|

\n

Single Value

\n

|

\n

Effect

\n

|\n|

\n

SIGHUP

\n

|

\n

1

\n

|

\n

Hangup

\n

|\n|

\n

SIGINT

\n

|

\n

2

\n

|

\n

Interrupt from keyboard

\n

|\n|

\n

SIGKILL

\n

|

\n

9

\n

|

\n

Kill signal

\n

|\n|

\n

SIGTERM

\n

|

\n

15

\n

|

\n

Termination signal

\n

|\n|

\n

SIGSTOP

\n

|

\n

17, 19, 23

\n

|

\n

Stop the process

\n

|

\n

What's nice about this is that you can use the Signal Value in place of the Signal Name. So you don't have to memorize all of the names of the various signals.
\nSo, let's now use the *kill *command to kill our instance of chrome. The structure for this command would be:

\n

kill SIGNAL PID

\n

Where SIGNAL is the signal to be sent and PID is the Process ID to be killed. We already know, from our ps command that the IDs we want to kill are 3827, 3919, 10764, and 11679. So to send the kill signal, we'd issue the commands:

\n

kill -9 3827

\n

kill -9 3919

\n

kill -9 10764

\n

kill -9 11679

\n

Once we've issued the above commands, all of the chrome processes will have been successfully killed.

\n

Let's take the easy route! If we already know the process we want to kill is named chrome, we can make use of the *killall *command and send the same signal the process like so:

\n

killall -9 chrome

\n

The only caveat to the above command is that it may not catch all of the running chrome processes. If, after running the above command, you issue the ps aux|grep chrome command and see remaining processes running, your best bet is to go back to the *kill *command and send signal 9 to terminate the process by PID.

\n

Ending processes made easy

\n

As you can see, killing errant processes isn't nearly as challenging as you might have thought. When I wind up with a stubborn process, I tend to start off with the *killall *command as it is the most efficient route to termination. However, when you wind up with a really feisty process, the *kill *command is the way to go.

"},{"url":"/docs/reference/embed-the-web/","relativePath":"docs/reference/embed-the-web.md","relativeDir":"docs/reference","base":"embed-the-web.md","name":"embed-the-web","frontmatter":{"title":"Embed The Web","weight":0,"excerpt":"Embed The Web","seo":{"title":"embeding content","description":"A long time ago on the Web, it was popular to use **frames** to create websites ","robots":[],"extra":[]},"template":"docs"},"html":"

A short history of embedding

\n

A long time ago on the Web, it was popular to use frames to create websites — small parts of a website stored in individual HTML pages. These were embedded in a master document called a frameset, which allowed you to specify the area on the screen that each frame filled, rather like sizing the columns and rows of a table. These were considered the height of coolness in the mid to late 90s, and there was evidence that having a webpage split up into smaller chunks like this was better for download speeds — especially noticeable with network connections being so slow back then. They did however have many problems, which far outweighed any positives as network speeds got faster, so you don't see them being used anymore.

\n

A little while later (late 90s, early 2000s), plugin technologies became very popular, such as Java Applets and Flash — these allowed web developers to embed rich content into webpages such as videos and animations, which just weren't available through HTML alone. Embedding these technologies was achieved through elements like <object>, and the lesser-used <embed>, and they were very useful at the time. They have since fallen out of fashion due to many problems, including accessibility, security, file size, and more. These days major browsers have stopped supporting plugins such as Flash.

\n

Finally, the <iframe> element appeared (along with other ways of embedding content, such as <canvas>, <video>, etc.) This provides a way to embed an entire web document inside another one, as if it were an <img> or other such element, and is used regularly today.

\n

With the history lesson out of the way, let's move on and see how to use some of these.

\n

Active learning: classic embedding uses

\n

In this article we are going to jump straight into an active learning section, to immediately give you a real idea of just what embedding technologies are useful for. The online world is very familiar with YouTube, but many people don't know about some of the sharing facilities it has available. Let's look at how YouTube allows us to embed a video in any page we like using an <iframe>.

\n
    \n
  1. First, go to YouTube and find a video you like.
    2. \n
  2. Below the video, you'll find a Share button — select this to display the sharing options.
    3. \n
  3. Select the Embed button and you'll be given some <iframe> code — copy this.
    4. \n
  4. Insert it into the Input box below, and see what the result is in the Output.
    5. \n
\n

For bonus points, you could also try embedding a Google Map in the example:

\n
    \n
  1. Go to Google Maps and find a map you like.
    2. \n
  2. Click on the \"Hamburger Menu\" (three horizontal lines) in the top left of the UI.
    3. \n
  3. Select the Share or embed map option.
    4. \n
  4. Select the Embed map option, which will give you some <iframe> code — copy this.
    5. \n
  5. Insert it into the Input box below, and see what the result is in the Output.
    6. \n
\n

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer.

\n
<h2>Live output</h2>\n\n<div class=\"output\" style=\"min-height: 250px;\">\n</div>\n\n<h2>Editable code</h2>\n<p class=\"a11y-label\">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>\n\n<textarea id=\"code\" class=\"input\" style=\"width: 95%;min-height: 100px;\">\n</textarea>\n\n<div class=\"playable-buttons\">\n  <input id=\"reset\" type=\"button\" value=\"Reset\">\n  <input id=\"solution\" type=\"button\" value=\"Show solution\">\n</div>\n
\n
html {\n  font-family: sans-serif;\n}\n\nh2 {\n  font-size: 16px;\n}\n\n.a11y-label {\n  margin: 0;\n  text-align: right;\n  font-size: 0.7rem;\n  width: 98%;\n}\n\nbody {\n  margin: 10px;\n  background: #f5f9fa;\n}\n
\n
const textarea = document.getElementById('code');\nconst reset = document.getElementById('reset');\nconst solution = document.getElementById('solution');\nconst output = document.querySelector('.output');\nlet code = textarea.value;\nlet userEntry = textarea.value;\n\nfunction updateCode() {\n  output.innerHTML = textarea.value;\n}\n\nreset.addEventListener('click', function() {\n  textarea.value = code;\n  userEntry = textarea.value;\n  solutionEntry = htmlSolution;\n  solution.value = 'Show solution';\n  updateCode();\n});\n\nsolution.addEventListener('click', function() {\n  if(solution.value === 'Show solution') {\n    textarea.value = solutionEntry;\n    solution.value = 'Hide solution';\n  } else {\n    textarea.value = userEntry;\n    solution.value = 'Show solution';\n  }\n  updateCode();\n});\n\nconst htmlSolution = '<iframe width=\"420\" height=\"315\" src=\"https://www.youtube.com/embed/QH2-TGUlwu4\" frameborder=\"0\" allowfullscreen>\\n</iframe>\\n\\n<iframe src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen>\\n</iframe>';\nlet solutionEntry = htmlSolution;\n\ntextarea.addEventListener('input', updateCode);\nwindow.addEventListener('load', updateCode);\n\n\n\n\ntextarea.onkeydown = function(e){\n  if (e.keyCode === 9) {\n    e.preventDefault();\n    insertAtCaret('\\t');\n  }\n\n  if (e.keyCode === 27) {\n    textarea.blur();\n  }\n};\n\nfunction insertAtCaret(text) {\n  const scrollPos = textarea.scrollTop;\n  let caretPos = textarea.selectionStart;\n\n  const front = (textarea.value).substring(0, caretPos);\n  const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);\n  textarea.value = front + text + back;\n  caretPos = caretPos + text.length;\n  textarea.selectionStart = caretPos;\n  textarea.selectionEnd = caretPos;\n  textarea.focus();\n  textarea.scrollTop = scrollPos;\n}\n\n\n\ntextarea.onkeyup = function(){\n  \n  \n  if(solution.value === 'Show solution') {\n    userEntry = textarea.value;\n  } else {\n    solutionEntry = textarea.value;\n  }\n\n  updateCode();\n};\n
\n

iframes in detail

\n

So, that was easy and fun, right? <iframe> elements are designed to allow you to embed other web documents into the current document. This is great for incorporating third-party content into your website that you might not have direct control over and don't want to have to implement your own version of — such as video from online video providers, commenting systems like Disqus, maps from online map providers, advertising banners, etc. The live editable examples you've been using through this course are implemented using <iframe>s.

\n

There are some serious Security concerns to consider with <iframe>s, as we'll discuss below, but this doesn't mean that you shouldn't use them in your websites — it just requires some knowledge and careful thinking. Let's explore the code in a bit more detail. Say you wanted to include the MDN glossary on one of your web pages — you could try something like this:

\n
<head>\n  <style> iframe { border: none } </style>\n</head>\n<body>\n  <iframe src=\"https://developer.mozilla.org/en-US/docs/Glossary\"\n          width=\"100%\" height=\"500\" allowfullscreen sandbox>\n    <p>\n      <a href=\"/en-US/docs/Glossary\">\n         Fallback link for browsers that don't support iframes\n      </a>\n    </p>\n  </iframe>\n</body>\n
\n

This example includes the basic essentials needed to use an <iframe>:

\n

border: none

\n

If used, the <iframe> is displayed without a surrounding border. Otherwise, by default, browsers display the <iframe> with a surrounding border (which is generally undesirable).

\n

allowfullscreen

\n

If set, the <iframe> is able to be placed in fullscreen mode using the Fullscreen API (somewhat beyond the scope of this article.)

\n

src

\n

This attribute, as with <video>/<img>, contains a path pointing to the URL of the document to be embedded.

\n

width and height

\n

These attributes specify the width and height you want the iframe to be.

\n

Fallback content

\n

In the same way as other similar elements like <video>, you can include fallback content between the opening and closing <iframe></iframe> tags that will appear if the browser doesn't support the <iframe>. In this case, we have included a link to the page instead. It is unlikely that you'll come across any browser that doesn't support <iframe>s these days.

\n

sandbox

\n

This attribute, which works in slightly more modern browsers than the rest of the <iframe> features (e.g. IE 10 and above) requests heightened security settings; we'll say more about this in the next section.

\n

Note: In order to improve speed, it's a good idea to set the iframe's src attribute with JavaScript after the main content is done with loading. This makes your page usable sooner and decreases your official page load time (an important SEO metric.)

\n

Security concerns

\n

Above we mentioned security concerns — let's go into this in a bit more detail now. We are not expecting you to understand all of this content perfectly the first time; we just want to make you aware of this concern, and provide a reference to come back to as you get more experienced and start considering using <iframe>s in your experiments and work. Also, there is no need to be scared and not use <iframe>s — you just need to be careful. Read on...

\n

Browser makers and Web developers have learned the hard way that iframes are a common target (official term: attack vector) for bad people on the Web (often termed hackers, or more accurately, crackers) to attack if they are trying to maliciously modify your webpage, or trick people into doing something they don't want to do, such as reveal sensitive information like usernames and passwords. Because of this, spec engineers and browser developers have developed various security mechanisms for making <iframe>s more secure, and there are also best practices to consider — we'll cover some of these below.

\n

Note: Clickjacking is one kind of common iframe attack where hackers embed an invisible iframe into your document (or embed your document into their own malicious website) and use it to capture users' interactions. This is a common way to mislead users or steal sensitive data.

\n

A quick example first though — try loading the previous example we showed above into your browser — you can find it live on GitHub (see the source code too.) Instead of the page you expected, you'll probably see some kind of message to the effect of \"I can't open this page\", and if you look at the Console in the browser developer tools, you'll see a message telling you why. In Firefox, you'll get told something like The loading of “https://developer.mozilla.org/en-US/docs/Glossary” in a frame is denied by “X-Frame-Options“ directive set to “DENY“.. This is because the developers that built MDN have included a setting on the server that serves the website pages to disallow them from being embedded inside <iframe>s (see Configure CSP directives, below.) This makes sense — an entire MDN page doesn't really make sense to be embedded in other pages unless you want to do something like embed them on your site and claim them as your own — or attempt to steal data via clickjacking, which are both really bad things to do. Plus if everybody started to do this, all the additional bandwidth would start to cost Mozilla a lot of money.

\n

Only embed when necessary

\n

Sometimes it makes sense to embed third-party content — like youtube videos and maps — but you can save yourself a lot of headaches if you only embed third-party content when completely necessary. A good rule of thumb for web security is \"You can never be too cautious. If you made it, double-check it anyway. If someone else made it, assume it's dangerous until proven otherwise.\"

\n

Besides security, you should also be aware of intellectual property issues. Most content is copyrighted, offline and online, even content you might not expect (for example, most images on Wikimedia Commons). Never display content on your webpage unless you own it or the owners have given you written, unequivocal permission. Penalties for copyright infringement are severe. Again, you can never be too cautious.

\n

If the content is licensed, you must obey the license terms. For example, the content on MDN is licensed under CC-BY-SA. That means, you must credit us properly when you quote our content, even if you make substantial changes.

\n

Use HTTPS

\n

HTTPS is the encrypted version of HTTP. You should serve your websites using HTTPS whenever possible:

\n
    \n
  1. HTTPS reduces the chance that remote content has been tampered with in transit,
    2. \n
  2. HTTPS prevents embedded content from accessing content in your parent document, and vice versa.
    3. \n
\n

HTTPS-enabling your site requires a special security certificate to be installed. Many hosting providers offer HTTPS-enabled hosting without you needing to do any setup on your own to put a certificate in place. But if you do need to set up HTTPS support for your site on your own, Let's Encrypt provides tools and instructions you can use for automatically creating and installing the necessary certificate — with built-in support for the most widely-used web servers, including the Apache web server, Nginx, and others. The Let's Encrypt tooling is designed to make the process as easy as possible, so there’s really no good reason to avoid using it or other available means to HTTPS-enable your site.

\n

Note: GitHub pages allow content to be served via HTTPS by default, so it is useful for hosting content. If you are using a different hosting provider and are not sure, ask them about it.

\n

Always use the sandbox attribute

\n

You want to give attackers as little power as you can to do bad things on your website, therefore you should give embedded content only the permissions needed for doing its job. Of course, this applies to your own content, too. A container for code where it can be used appropriately — or for testing — but can't cause any harm to the rest of the codebase (either accidental or malicious) is called a sandbox.

\n

Unsandboxed content can do way too much (executing JavaScript, submitting forms, popup windows, etc.) By default, you should impose all available restrictions by using the sandbox attribute with no parameters, as shown in our previous example.

\n

If absolutely required, you can add permissions back one by one (inside the sandbox=\"\" attribute value) — see the sandbox reference entry for all the available options. One important note is that you should never add both allow-scripts and allow-same-origin to your sandbox attribute — in that case, the embedded content could bypass the Same-origin policy that stops sites from executing scripts, and use JavaScript to turn off sandboxing altogether.

\n

Note: Sandboxing provides no protection if attackers can fool people into visiting malicious content directly (outside an iframe). If there's any chance that certain content may be malicious (e.g., user-generated content), please serve it from a different domain to your main site.

\n

Configure CSP directives

\n

CSP stands for content security policy and provides a set of HTTP Headers (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing <iframe>s, you can configure your server to send an appropriate X-Frame-Options header. This can prevent other websites from embedding your content in their web pages (which would enable clickjacking and a host of other attacks), which is exactly what the MDN developers have done, as we saw earlier on.

\n

Note: You can read Frederik Braun's post On the X-Frame-Options Security Header for more background information on this topic. Obviously, it's rather out of scope for a full explanation in this article.

\n

and elements\">The and elements\n

The <embed> and <object> elements serve a different function to <iframe> — these elements are general purpose embedding tools for embedding external content, such as PDFs.

\n

However, you are unlikely to use these elements very much. If you need to display PDFs, it's usually better to link to them, rather than embedding them in the page.

\n

Historically these elements have also been used for embedding content handled by browser plugins such as Adobe Flash, but this technology is now obsolete and is not supported by modern browsers.

\n

If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:

\n

<embed>

\n

<object>

\n

URL of the embedded content

\n

src

\n

data

\n

accurate media type of the embedded content

\n

type

\n

type

\n

height and width (in CSS pixels) of the box controlled by the plugin

\n

height
\nwidth

\n

height
\nwidth

\n

names and values, to feed the plugin as parameters

\n

ad hoc attributes with those names and values

\n

single-tag <param> elements, contained within <object>

\n

independent HTML content as fallback for an unavailable resource

\n

not supported (<noembed> is obsolete)

\n

contained within <object>, after <param> elements

\n

Let's look at an <object> example that embeds a PDF into a page (see the live example and the source code):

\n
<object data=\"mypdf.pdf\" type=\"application/pdf\"\n        width=\"800\" height=\"1200\">\n  <p>You don't have a PDF plugin, but you can\n    <a href=\"mypdf.pdf\">download the PDF file.\n    </a>\n  </p>\n</object>\n
\n

PDFs were a necessary stepping stone between paper and digital, but they pose many accessibility challenges and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.

"},{"url":"/docs/reference/how-2-reinstall-npm/","relativePath":"docs/reference/how-2-reinstall-npm.md","relativeDir":"docs/reference","base":"how-2-reinstall-npm.md","name":"how-2-reinstall-npm","frontmatter":{"title":"How To Reinstall NPM and Node.js On Your System","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

The Node Package Manager (usually shortened to npm) and Node.js are popular technologies among JavaScript developers. npm is the default package management utility that is installed automatically on your machine when you download and install Node.js.

\n

npm assists in building, consuming, managing, and sharing small pieces of code. On the other hand, Node.js provides a server-side environment for creating powerful applications.

\n

However, at times, npm can get corrupted, become incompatible with other programs, or just experience performance issues. In such cases, it may help to reinstall npm on your system and save yourself the hassles. Similarly, reinstalling Node.js may assist you in clearing out any performance errors.

\n

And since npm is shipped with Node.js by default, installing Node.js will also install npm on your system.

\n

How to check if reinstallation succeeded

\n

Note that after completing the reinstallation process, you can check if it was successful by running the following commands on the terminal:

\n

Then, if everything went well, the system will output your installed versions.

\n

Something like this:

\n

Since npm is usually updated more frequently than Node.js, your installation may not come with the latest npm version.

\n

So, if your installed npm version is not the latest, you can update it by running the following command:

\n

The above command will install the latest, stable npm version. However, if you want to experiment with things by using a version that will be released in the future, you can run the following:

\n

If you want to update Node.js to the latest version, you can read this article.

\n

How to reinstall npm and Node.js on Windows

\n

If the npm or Node.js running on your Windows environment is broken, you can reinstall and get the most out of them.

\n

You can use any of the following methods:

\n
    \n
  • Reinstalling using a Node version manager
    • \n
  • Reinstalling using a Node installer
    • \n
\n

Let's talk about each of them.

\n

a) Reinstalling using a Node version manager

\n

A Node version manager is a tool you can use to install various versions of Node.js and npm and shift between them seamlessly.

\n

A popular Node version management tool you can use is nvm-windows. It's a powerful command line utility that allows you to manage multiple installations of Node.js comfortably.

\n

Before installing the utility, it is recommended to remove all the existing versions of Node.js and npm from your Windows computer. This will prevent any conflict issues when installing the software.

\n

You can uninstall them by doing the following:

\n
    \n
  • Go to the Windows Control Panel and uninstall the Node.js program.
    • \n
  • If any Node.js installation directories are still remaining, delete them. An example is C:\\Program Files\\mynodejs.
    • \n
  • If any npm install location is still remaining, delete it. An example is C:\\Users\\<username>\\AppData\\Roaming\\npm.
    • \n
\n

Then, once your system is clean, go to this page and download and run the latest nvm-windows installer. After it has been installed, you can start the Command Prompt or Powershell as an Administrator and use the tool to reinstall Node.js and npm.

\n

If you want to reinstall a specific Node.js version, you can run the following command:

\n

Let's say you want to reinstall Node.js version 12.18.0, you can run:

\n

If you want to reinstall the latest stable Node.js version, you can run:

\n

If you want to check the list of Node.js versions available for download, you can run:

\n

To use the installed Node.js version in your project, you can switch to it:

\n

b) Reinstalling using a Node installer

\n

Using the official Node installer is the easiest way to reinstall Node.js and npm on your Windows environment.

\n

To use this option, you can go to the Node.js download page and reinstall the latest Node.js version.

\n

It is recommended to download the version labeled LTS (Long-term Supported) because it has been tested with npm. Although the version labeled Current comes with the latest features, it may be unstable and unreliable.

\n

\n

After selecting the version you want to download, and clicking the Windows Installer option, the installation wizard will magically complete the installation process for you.

\n

Ultimately, the installer will automatically overwrite your existing, malfunctioned Node.js version with a new one.

\n

How to reinstall npm and Node.js on macOS

\n

Before reinstalling Node.js and npm on your macOS system, you'll need to remove any previously installed versions.

\n

Here are some ways you can use to uninstall them:

\n
    \n
  • Manually—this involves manually removing any references of Node and npm from your system. Unfortunately, this process is difficult since there may be several directories with Node resources. For example, you may need to delete the node executable and node_modules from /usr/local/lib, delete .npm from the home directory, and delete many other directories.
    • \n
  • Using a script—this involves running a script to uninstall Node.js and npm automatically from your macOS system. You can find a simple script to use here.
    • \n
  • Using Homebrew—this package management utility lets you complete the uninstallation process fast and easily. You can run the following command:
    • \n
\n

Then, once your system is clean, you can use any of the following methods to reinstall Node.js and npm on macOS:

\n
    \n
  • Reinstalling using a Node installer
    • \n
  • Reinstalling using Homebrew
    • \n
  • Reinstalling using a Node version manager
    • \n
\n

Let's talk about each of them.

\n

a) Reinstalling using a Node installer

\n

To use the official Node installer for reinstalling the tools, go to the Node.js download page and select the version you want to install—just as we described previously.

\n

Remember to choose the macOS installer option. If you run the installer, it will complete the reinstallation process for you automatically.

\n

b) Reinstalling using Homebrew

\n

To reinstall using Homebrew, just run the following command on the macOS terminal:

\n

c) Reinstalling using a Node version manager

\n

You can also reinstall the two tools using the nvm Node version manager. Since the process for using nvm is the same for both macOS and Linux, we'll describe how to use it in the next section.

\n

How to reinstall npm and Node.js on Linux

\n

Just like in the previous cases, you'll need to remove any installed version of Node.js and npm before reinstalling them on a Linux distribution, such as Ubuntu.

\n

Here are some ways you can use to uninstall them:

\n
    \n
  • Using the apt package manager—you can remove Node.js by running the following command:
    • \n
\n

The above command will delete the distro-stable version while retaining the configuration files for later use. However, if you intend to remove the package as well as its configuration files, run the following:

\n

Finally, you can delete any unused packages that were installed automatically with the deleted package:

\n
    \n
  • Using nvm—you can also use the nvm Node version manager to uninstall Node.js from your system. We'll illustrate how to do this in the next section.
    • \n
\n

Then, once your machine is clean, you can use any of the following methods to reinstall Node.js and npm on Linux:

\n
    \n
  • Reinstalling using a Node version manager
    • \n
  • Reinstalling using the apt package manager
    • \n
\n

Let's talk about each of them.

\n

a) Reinstalling using a Node version manager

\n

As earlier mentioned, you can use the nvm Node version manager to reinstall Node.js and npm on both macOS and Linux.

\n

To install the script-based tool, you can use either Wget or cURL.

\n

If using Wget, execute the following on the terminal:

\n

If using cURL, execute this:

\n

The above commands will install nvm version 0.35.0 on your system. Remember to check the latest version and refer to it accordingly on the command you want to run.

\n

To verify if it was installed successfully, run the following:

\n

If all went well, it would output nvm.

\n

After installing nvm, you can use it to reinstall Node.js on your system.

\n

Simply, execute the following command:

\n

To reinstall a specific Node.js version, run:

\n

For example, to reinstall Node.js version 12.18.0, execute:

\n

Once reinstallation is complete, you can set that Node.js version for use as the system-wide default version:

\n

Furthermore, you can check the list of Node.js versions available for download by executing the following:

\n

To remove a Node.js version that you've set up using nvm, start by establishing if the version is currently active on your system:

\n

If it is not actively running, execute the following to uninstall it:

\n

On the other hand, if the version targeted for removal is the current active version, you'll need to deactivate nvm first:

\n

Then, you can use the above uninstall command to remove it from your system.

\n

b) Reinstalling using the apt package manager

\n

A simpler way to reinstall Node.js and npm on a Linux distribution, such as Ubuntu, is to use the apt package manager.

\n

To do so, you can start by refreshing your local package index:

\n

Then, reinstall the distro-stable Node.js version from the repositories:

\n

In most cases, this is all you need to get up and running with Node.js. Also, you may want to reinstall npm by running the following command:

\n

Conclusion

\n

That's how to reinstall npm and Node.js on Windows, macOS, and Linux.

\n

After completing the reinstallation, you'll avoid any performance issues that often arise from using malfunctioned versions of the technologies.

\n

---

\n

---

\n

Node.js is a popular open-source, cross-platform server-side environment for building robust applications. Since a vibrant community of contributors backs it, the platform is continuously updated to introduce new features, security patches, and other performance improvements. node -version node -v wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash command -v nvm nvm install node nvm install -lts nvm install <version-number> nvm install 12.18.3 nvm use 12.18.3 nvm lsnvm ls-remotenpm install -g nn <version-number>n 12.18.3 nn ltsn latestnvm install <version-number>nvm install 12.18.3nvm use 12.18.3nvm install latestnvm listnvm list availablewget https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xzsudo apt-get install xz-utilstar -C /usr/local -strip-components 1 -xJf node-v12.18.3-linux-x64.tar.xzbrew install nodebrew update #ensure Homebrew is up to date firstbrew upgrade nodebrew switch node 12.18.3

\n

So, updating to the latest Node.js version can help you to make the most of the technology. You can decide to work with the Long-term Supported (LTS) version or the Current version that comes with the latest features.

\n

Typically, LTS is recommended for most users because it is a stable version that provides predictable update releases as well as a slower introduction of substantial changes.

\n

In this article, you will learn how to quickly and easily update Node.js on different operating systems—macOS, Linux, and Windows.

\n

As we'll demonstrate, there are many ways of updating to the next version of Node.js. So, you can choose the option that best meets your system requirements and preferences.

\n

These are the updating options we'll talk about:

\n
    \n
  • Updating using a Node version manager on macOS or Linux
    • \n
  • Updating using a Node version manager on Windows
    • \n
  • Updating using a Node installer on Linux
    • \n
  • Updating using a Node installer on macOS and Windows
    • \n
  • Updating using Homebrew on macOS
    • \n
\n

Checking your version of Node.js

\n

Before getting started, you can check the version of Node.js currently deployed on your system by running the following command on the terminal:

\n

or (shortened method):

\n

Let's now talk about the different ways on how to update Node.js.

\n

1. Updating using a Node version manager on macOS or Linux

\n

A Node version manager is a utility that lets you install different Node.js versions and switch flawlessly between them on your machine. You can also use it to update your version of Node.js.

\n

On macOS or Linux, you can use either of the following Node version managers:

\n
    \n
  • nvm
    • \n
  • n
    • \n
\n

Let's talk about each of them.

\n

a) nvm

\n

nvm is a script-based version manager for Node.js. To install it on macOS or Linux, you can use either Wget or cURL.

\n

For Wget, run the following command on the terminal:

\n

For cURL, run the following:

\n

The above commands assume that you're installing nvm version 0.35.3. So, you'll need to check the latest version before installing it on your machine.

\n

With these commands, you can clone the repository to ~/.nvm. This way, you can make changes to your bash profile, allowing you to access nvm system-wide.

\n

To confirm if the installation was successful, you can run the following command:

\n

If everything went well, it'd output nvm.

\n

Next, you can simply download and update to the latest Node.js version by running the following:

\n

Note that node refers to an alias of the latest Node.js version.

\n

You can also reference LTS versions in aliases as well as .nvmrc files using the notation lts/* for the most recent LTS releases.

\n

Here is an example:

\n

If you want to install and upgrade to a specific version, you can run the following:

\n

For example, if you want to update Node.js to version 12.18.3, you can run:

\n

After the upgrade, you can set that version to be the default version to use throughout your system:

\n

You can see the list of installed Node.js versions by running this command:

\n

Also, you can see the list of versions available for installation by running this command:

\n

b) n

\n

n is another useful Node version manager you can use for updating Node.js on macOS and Linux.

\n

Since it's an npm-based package, if you already have Node.js available on your environment, you can simply install it by running this command:

\n

Then, to download and update to your desired Node.js version, execute the following:

\n

For example, if you want to update Node.js to version 12.18.3, you can run:

\n

To see a list of your downloaded Node.js versions, run n on its own:

\n

You can specify to update to the newest LTS version by running:

\n

You can also specify to update to the latest current version by running:

\n

You can specify to update to the newest LTS version by running:

\n

\n

2. Updating using a Node version manager on Windows

\n

On Windows, you can use the following Node version manager:

\n
    \n
  • nvm-windows
    • \n
\n

Let's talk about it.

\n

a) nvm-windows

\n

nvm-windows is a Node version management tool for the Windows operating system. While it's not the same as nvm, both tools share several usage similarities for Node.js version management.

\n

Before installing nvm-windows, it's recommended to uninstall any available Node.js versions from your machine. This will avoid potential conflict issues during installation.

\n

Next, you can download and run the latest nvm-setup.zip installer.

\n

Also, since the utility runs in an Admin shell, you'll need to begin the Command Prompt or Powershell as an Administrator before using it.

\n

If you want to install and upgrade to a specific version, you can run the following:

\n

You can specify to update to the newest LTS version by running:

\n

For example, if you want to update Node.js to version 12.18.3, you can run:

\n

After the upgrade, you can switch to that version:

\n

You can also specify to update to the latest stable Node.js version:

\n

You can see the list of installed Node.js versions by running this command:

\n

Also, you can see the list of versions available for download by running this command:

\n

\n

3. Updating using a Node installer on Linux

\n

Using a Node installer is the least recommended way of upgrading Node.js on Linux. Nonetheless, if it's the only route you can use, then follow the following steps:

\n
    \n
  • Go to the official Node.js downloads site, which has different Linux binary packages, and select your preferred built-in installer or source code. You can choose either the LTS releases or the latest current releases.
    • \n
  • Download the binary package using your browser. Or, you can download it using the following Wget command on the terminal:
    • \n
\n

\n
    \n
  • Download the binary package using your browser. Or, you can download it using the following Wget command on the terminal:
    • \n
\n

Remember to change the version number on the Wget command depending on the one you want.

\n
    \n
  • Install the xz-utils utility using the following command:
    • \n
\n

This utility will be used for unpacking the binary package.

\n
    \n
  • Finally, run the following command to unpack and install the binary package on usr/local:
    • \n
\n

\n

4. Updating using a Node installer on macOS and Windows

\n

Another way of updating your Node.js on macOS and Windows is to go to the official download site and install the most recent version. This way, it'll overwrite your existing old version with the latest one.

\n

You can follow the following steps to update it using this method:

\n
    \n
  • On the Node.js download page, select either the LTS version or the latest current version.
    • \n
\n

\n
    \n
  • Depending on your system, click either the Windows Installer option or the macOS installer option.
    • \n
  • Run the installation wizard. It will magically complete the installation process and upgrade your Node.js version by replacing it with the new, updated one.
    • \n
\n

5. Updating using Homebrew on macOS

\n

Homebrew is a popular package management utility for macOS.

\n

To use it for installing Node.js, run the following command on your macOS terminal:

\n

Later, if you'd like to update it, run the following commands:

\n

Furthermore, you can switch between installed Node.js versions:

"},{"url":"/docs/reference/installing-node/","relativePath":"docs/reference/installing-node.md","relativeDir":"docs/reference","base":"installing-node.md","name":"installing-node","frontmatter":{"title":"Installing Node","weight":0,"excerpt":"Installing Node","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Android

\n

Android support is still experimental in Node.js, so precompiled binaries are not yet provided by Node.js developers.

\n

However, there are some third-party solutions. For example, Termux community provides terminal emulator and Linux environment for Android, as well as own package manager and extensive collection of many precompiled applications. This command in Termux app will install the last available Node.js version:

\n
pkg install nodejs\n
\n

Currently, Termux Node.js binaries are linked against system-icu (depending on libicu package).

\n

Arch Linux

\n

Node.js and npm packages are available in the Community Repository.

\n
pacman -S nodejs npm\n
\n

CentOS, Fedora and Red Hat Enterprise Linux

\n

Node.js is available as a module called nodejs in CentOS/RHEL 8 and Fedora.

\n
dnf module install nodejs:<stream>\n
\n

where <stream> corresponds to the major version of Node.js. To see a list of available streams:

\n
dnf module list nodejs\n
\n

For example, to install Node.js 12:

\n
dnf module install nodejs:12\n
\n

For CentOS/RHEL 7 Node.js is available via Software Collections.

\n

Alternatives

\n

These resources provide packages compatible with CentOS, Fedora, and RHEL.

\n\n

Debian and Ubuntu based Linux distributions

\n

Node.js binary distributions are available from NodeSource.

\n

Alternatives

\n

Packages compatible with Debian and Ubuntu based Linux distributions are available via Node.js snaps.

\n

fnm

\n

Fast and simple Node.js version manager built in Rust used to manage multiple released Node.js versions. It allows you to perform operations like install, uninstall, switch Node versions automatically based on the current directory, etc. To install fnm, use this install script.

\n

fnm has cross-platform support (macOS, Windows, Linux) & all popular shells (Bash, Zsh, Fish, PowerShell, Windows Command Line Prompt). fnm is built with speed in mind and compatibility support for .node-version and .nvmrc files.

\n

FreeBSD

\n

The most recent release of Node.js is available via the www/node port.

\n

Install a binary package via pkg:

\n
pkg install node\n
\n

Or compile it on your own using ports:

\n
cd /usr/ports/www/node && make install\n
\n

Gentoo

\n

Node.js is available in the portage tree.

\n
emerge nodejs\n
\n

IBM i

\n

LTS versions of Node.js are available from IBM, and are available via the 'yum' package manager. The package name is nodejs followed by the major version number (for instance, nodejs12, nodejs14 etc)

\n

To install Node.js 14.x from the command line, run the following as a user with *ALLOBJ special authority:

\n
yum install nodejs14\n
\n

Node.js can also be installed with the IBM i Access Client Solutions product. See this support document for more details

\n

macOS

\n

Download the macOS Installer directly from the nodejs.org web site.

\n

If you want to download the package with bash:

\n
curl \"https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\\.pkg</a>.*|\\1|p')}.pkg\" > \"$HOME/Downloads/node-latest.pkg\" && sudo installer -store -pkg \"$HOME/Downloads/node-latest.pkg\" -target \"/\"\n
\n

Alternatives

\n

Using Homebrew:

\n
brew install node\n
\n

Using MacPorts:

\n
port install nodejs<major version>\n\n# Example\nport install nodejs7\n
\n

Using pkgsrc:

\n

Install the binary package:

\n
pkgin -y install nodejs\n
\n

Or build manually from pkgsrc:

\n
cd pkgsrc/lang/nodejs && bmake install\n
\n

n

\n

n is a simple to use Node.js version manager for Mac and Linux. Specify the target version to install using a rich syntax, or select from a menu of previously downloaded versions. The versions are installed system-wide or user-wide, and for more targeted use you can run a version directly from the cached downloads.

\n

See the homepage for install methods (boostrap, npm, Homebrew, third-party), and all the usage details.

\n

If you already have npm then installing n and then the newest LTS node version is as simple as:

\n
npm install -g n\nn lts\n
\n

NetBSD

\n

Node.js is available in the pkgsrc tree:

\n
cd /usr/pkgsrc/lang/nodejs && make install\n
\n

Or install a binary package (if available for your platform) using pkgin:

\n
pkgin -y install nodejs\n
\n

Nodenv

\n

nodenv is a lightweight node version manager, similar to nvm. It's simple and predictable. A rich plugin ecosystem lets you tailor it to suit your needs. Use nodenv to pick a Node version for your application and guarantee that your development environment matches production.

\n

Nodenv installation instructions are maintained on its Github page. Please visit that page to ensure you're following the latest version of the installation steps.

\n

nvm

\n

Node Version Manager is a bash script used to manage multiple released Node.js versions. It allows you to perform operations like install, uninstall, switch version, etc. To install nvm, use this install script.

\n

On Unix / OS X systems Node.js built from source can be installed using nvm by installing into the location that nvm expects:

\n
env VERSION=`python tools/getnodeversion.py` make install DESTDIR=`nvm_version_path v$VERSION` PREFIX=\"\"\n
\n

After this you can use nvm to switch between released versions and versions built from source. For example, if the version of Node.js is v8.0.0-pre:

\n
nvm use 8\n
\n

Once the official release is out you will want to uninstall the version built from source:

\n
nvm uninstall 8\n
\n

nvs

\n

Windows

\n

The nvs version manager is cross-platform and can be used on Windows, macOS, and Unix-like systems

\n

To install nvs on Windows go to the release page here and download the MSI installer file of the latest release.

\n

You can also use chocolatey to install it:

\n
choco install nvs\n
\n

macOS,UnixLike

\n

You can find the documentation regarding the installation steps of nvs in macOS/Unix-like systems here

\n

Usage

\n

After this you can use nvs to switch between different versions of node.

\n

To add the latest version of node:

\n
nvs add latest\n
\n

Or to add the latest LTS version of node:

\n
nvs add lts\n
\n

Then run the nvs use command to add a version of node to your PATH for the current shell:

\n
$ nvs use lts\nPATH -= %LOCALAPPDATA%\\nvs\\default\nPATH += %LOCALAPPDATA%\\nvs\\node\\14.17.0\\x64\n
\n

To add it to PATH permanently, use nvs link:

\n
nvs link lts\n
\n

OpenBSD

\n

Node.js is available through the ports system.

\n
/usr/ports/lang/node\n
\n

Using pkg_add on OpenBSD:

\n
pkg_add node\n
\n

openSUSE and SLE

\n

Node.js is available in the main repositories under the following packages:

\n
    \n
  • openSUSE Leap 15.2: nodejs10, nodejs12, nodejs14
    • \n
  • openSUSE Tumbleweed: nodejs16
    • \n
  • SUSE Linux Enterprise Server (SLES) 12: nodejs10, nodejs12, and nodejs14 (The \"Web and Scripting Module\" must be enabled.)
    • \n
  • SUSE Linux Enterprise Server (SLES) 15 SP2: nodejs10, nodejs12, and nodejs14 (The \"Web and Scripting Module\" must be enabled.)
    • \n
\n

For example, to install Node.js 14.x on openSUSE Leap 15.2, run the following as root:

\n
zypper install nodejs14\n
\n

Different major versions of Node can be installed and used concurrently.

\n

SmartOS and illumos

\n

SmartOS images come with pkgsrc pre-installed. On other illumos distributions, first install pkgsrc, then you may install the binary package as normal:

\n
pkgin -y install nodejs\n
\n

Or build manually from pkgsrc:

\n
cd pkgsrc/lang/nodejs && bmake install\n
\n

Snap

\n

Node.js snaps are available as node on the Snap store.

\n

Solus

\n

Solus provides Node.js in its main repository.

\n
sudo eopkg install nodejs\n
\n

Void Linux

\n

Void Linux ships Node.js stable in the main repository.

\n
xbps-install -Sy nodejs\n
\n

Windows

\n

Download the Windows Installer directly from the nodejs.org web site.

\n

Alternatives

\n

Using Chocolatey:

\n
cinst nodejs\n# or for full install with npm\ncinst nodejs.install\n
\n

Using Scoop:

\n
scoop install nodejs\n
"},{"url":"/docs/reference/psql/","relativePath":"docs/reference/psql.md","relativeDir":"docs/reference","base":"psql.md","name":"psql","frontmatter":{"title":"Postgresql Cheat Sheet","weight":0,"excerpt":"Postgresql Cheat Sheet","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Postgresql Cheat Sheet

\n

PostgreSQL commands

\n
\n

CODEX

\n

PostgreSQL Cheat Sheet

\n

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.

\n
ALLOFMYOTHERARTICLES
\nbryanguner.medium.com\n

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.

\n

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.

\n

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.

\n

Although both UNIQUE and PRIMARY KEY 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.

\n

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.

\n
Create a new role:\n
CREATE ROLE role_name;\n
\n

Create a new role with a username and password:

\n
CREATE ROLE username NOINHERIT LOGIN PASSWORD password;\n
\n

Change role for the current session to the new_role:

\n
SET ROLE new_role;\n
\n

Allow role_1 to set its role as role_2:

\n
GRANT role_2 TO role_1;\n
\n

Managing databases

\n

Create a new database:

\n
CREATE DATABASE [IF NOT EXISTS] db_name;\n
\n

Delete a database permanently:

\n
DROP DATABASE [IF EXISTS] db_name;\n
\n

Managing tables

\n

Create a new table or a temporary table

\n
CREATE [TEMP] TABLE [IF NOT EXISTS] table_name(\n       pk SERIAL PRIMARY KEY,\n   c1 type(size) NOT NULL,\n   c2 type(size) NULL,\n   ...\n);\n
\n

Add a new column to a table:

\n
ALTER TABLE table_name ADD COLUMN new_column_name TYPE;\n
\n

Drop a column in a table:

\n
ALTER TABLE table_name DROP COLUMN column_name;\n
\n

Rename a column:

\n
ALTER TABLE table_name RENAME column_name TO new_column_name;\n
\n

Set or remove a default value for a column:

\n
ALTER TABLE table_name ALTER COLUMN [SET DEFAULT value | DROP DEFAULT]\n
\n

Add a primary key to a table.

\n
ALTER TABLE table_name ADD PRIMARY KEY (column,...);\n
\n

Remove the primary key from a table.

\n
ALTER TABLE table_name\nDROP CONSTRAINT primary_key_constraint_name;\n
\n

Rename a table.

\n
ALTER TABLE table_name RENAME TO new_table_name;\n
\n

Drop a table and its dependent objects:

\n
DROP TABLE [IF EXISTS] table_name CASCADE;\n
\n

Managing views

\n

Create a view:

\n
CREATE OR REPLACE view_name AS\nquery;\n
\n

Create a recursive view:

\n
CREATE RECURSIVE VIEW view_name(column_list) AS\nSELECT column_list;\n
\n

Create a materialized view:

\n
CREATE MATERIALIZED VIEW view_name\nAS\nquery\nWITH [NO] DATA;\n
\n

Refresh a materialized view:

\n
REFRESH MATERIALIZED VIEW CONCURRENTLY view_name;\n
\n

Drop a view:

\n
DROP VIEW [ IF EXISTS ] view_name;\n
\n

Drop a materialized view:

\n
DROP MATERIALIZED VIEW view_name;\n
\n

Rename a view:

\n
ALTER VIEW view_name RENAME TO new_name;\n
\n

Managing indexes

\n

Creating an index with the specified name on a table

\n
CREATE [UNIQUE] INDEX index_name\nON table (column,...)\n
\n

Removing a specified index from a table

\n
DROP INDEX index_name;\n
\n

Querying data from tables

\n

Query all data from a table:

\n
SELECT * FROM table_name;\n
\n

Query data from specified columns of all rows in a table:

\n
SELECT column_list\nFROM table;\n
\n

Query data and select only unique rows:

\n
SELECT DISTINCT (column)\nFROM table;\n
\n

Query data from a table with a filter:

\n
SELECT *\nFROM table\nWHERE condition;\n
\n

Assign an alias to a column in the result set:

\n
SELECT column_1 AS new_column_1, ...\nFROM table;\n
\n

Query data using the LIKE operator:

\n
SELECT * FROM table_name\nWHERE column LIKE '%value%'\n
\n

Query data using the BETWEENoperator:

\n
SELECT * FROM table_name\nWHERE column BETWEEN low AND high;\n
\n

Query data using the INoperator:

\n
SELECT * FROM table_name\nWHERE column IN (value1, value2,...);\n
\n

Constrain the returned rows with the LIMIT clause:

\n
SELECT * FROM table_name\nLIMIT limit OFFSET offset\nORDER BY column_name;\n
\n

Query data from multiple using the inner join, left join, full outer join, cross join and natural join:

\n
SELECT *\nFROM table1\nINNER JOIN table2 ON conditions\nSELECT *\nFROM table1\nLEFT JOIN table2 ON conditions\nSELECT *\nFROM table1\nFULL OUTER JOIN table2 ON conditions\nSELECT *\nFROM table1\nCROSS JOIN table2;\nSELECT *\nFROM table1\nNATURAL JOIN table2;\n
\n

Return the number of rows of a table.

\n
SELECT COUNT (*)\nFROM table_name;\n
\n

Sort rows in ascending or descending order:

\n
SELECT select_list\nFROM table\nORDER BY column ASC [DESC], column2 ASC [DESC],...;\n
\n

Group rows using GROUP BY clause.

\n
SELECT *\nFROM table\nGROUP BY column_1, column_2, ...;\n
\n

Filter groups using the HAVING clause.

\n
SELECT *\nFROM table\nGROUP BY column_1\nHAVING condition;\n
\n

Set operations

\n

Combine the result set of two or more queries with UNION operator:

\n
SELECT * FROM table1\nUNION\nSELECT * FROM table2;\n
\n

Minus a result set using EXCEPT operator:

\n
SELECT * FROM table1\nEXCEPT\nSELECT * FROM table2;\n
\n

Get intersection of the result sets of two queries:

\n
SELECT * FROM table1\nINTERSECT\nSELECT * FROM table2;\n
\n

Modifying data

\n

Insert a new row into a table:

\n
INSERT INTO table(column1,column2,...)\nVALUES(value_1,value_2,...);\n
\n

Insert multiple rows into a table:

\n
INSERT INTO table_name(column1,column2,...)\nVALUES(value_1,value_2,...),\n      (value_1,value_2,...),\n      (value_1,value_2,...)...\n
\n

Update data for all rows:

\n
UPDATE table_name\nSET column_1 = value_1,\n    ...;\n
\n

Update data for a set of rows specified by a condition in the WHERE clause.

\n
UPDATE table\nSET column_1 = value_1,\n    ...\nWHERE condition;\n
\n

Delete all rows of a table:

\n
DELETE FROM table_name;\n
\n

Delete specific rows based on a condition:

\n
DELETE FROM table_name\nWHERE condition;\n
\n

Performance

\n

Show the query plan for a query:

\n
EXPLAIN query;\n
\n

Show and execute the query plan for a query:

\n
EXPLAIN ANALYZE query;\n
\n

Collect statistics:

\n
ANALYZE table_name;\n
\n
\n

Postgres & JSON:

\n

Creating the DB and the Table

\n
DROP DATABASE IF EXISTS books_db;\nCREATE DATABASE books_db WITH ENCODING='UTF8' TEMPLATE template0;\n\nDROP TABLE IF EXISTS books;\n\nCREATE TABLE books (\n  id SERIAL PRIMARY KEY,\n  client VARCHAR NOT NULL,\n  data JSONb NOT NULL\n);\n
\n

Populating the DB

\n
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\" } }');\n
\n

Lets see everything inside the table books:

\n
SELECT * FROM books;\n
\n

Output:

\n
### `->` operator returns values out of JSON columns\n

Selecting 1 column:

\n
SELECT client,\n    data->'title' AS title\n    FROM books;\n
\n

Output:

\n
Selecting 2 columns:\n
SELECT client,\n   data->'title' AS title, data->'author' AS author\n   FROM books;\n
\n

Output:

\n
### `->` vs `->>`\n

The -> operator returns the original JSON type (which might be an object), whereas ->> returns text.

\n

Return NESTED objects

\n

You can use the -> to return a nested object and thus chain the operators:

\n
SELECT client,\n   data->'author'->'last_name' AS author\n   FROM books;\n
\n

Output:

\n
### Filtering\n

Select rows based on a value inside your JSON:

\n
SELECT\n client,\n data->'title' AS title\n FROM books\n  WHERE data->'title' = '\"Bryan Guner\"';\n
\n

Notice WHERE uses -> so we must compare to JSON '\"Bryan Guner\"'

\n

Or we could use ->> and compare to 'Bryan Guner'

\n

Output:

\n
### Nested filtering\n

Find rows based on the value of a nested JSON object:

\n
SELECT\n client,\n data->'title' AS title\n FROM books\n  WHERE data->'author'->>'last_name' = 'Kerouac';\n
\n

Output:

\n
### A real world example\n
CREATE TABLE events (\n  name varchar(200),\n  visitor_id varchar(200),\n  properties json,\n  browser json\n);\n
\n

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).

\n
INSERT INTO events VALUES (\n  'pageview', '1',\n  '{ \"page\": \"/\" }',\n  '{ \"name\": \"Chrome\", \"os\": \"Mac\", \"resolution\": { \"x\": 1440, \"y\": 900 } }'\n);\nINSERT INTO events VALUES (\n  'pageview', '2',\n  '{ \"page\": \"/\" }',\n  '{ \"name\": \"Firefox\", \"os\": \"Windows\", \"resolution\": { \"x\": 1920, \"y\": 1200 } }'\n);\nINSERT INTO events VALUES (\n  'pageview', '1',\n  '{ \"page\": \"/account\" }',\n  '{ \"name\": \"Chrome\", \"os\": \"Mac\", \"resolution\": { \"x\": 1440, \"y\": 900 } }'\n);\nINSERT INTO events VALUES (\n  'purchase', '5',\n  '{ \"amount\": 10 }',\n  '{ \"name\": \"Firefox\", \"os\": \"Windows\", \"resolution\": { \"x\": 1024, \"y\": 768 } }'\n);\nINSERT INTO events VALUES (\n  'purchase', '15',\n  '{ \"amount\": 200 }',\n  '{ \"name\": \"Firefox\", \"os\": \"Windows\", \"resolution\": { \"x\": 1280, \"y\": 800 } }'\n);\nINSERT INTO events VALUES (\n  'purchase', '15',\n  '{ \"amount\": 500 }',\n  '{ \"name\": \"Firefox\", \"os\": \"Windows\", \"resolution\": { \"x\": 1280, \"y\": 800 } }'\n);\n
\n

Now lets select everything:

\n
SELECT * FROM events;\n
\n

Output:

\n
### JSON operators + PostgreSQL aggregate functions\n

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.

\n
    \n
  • Lets see browser usage:
    • \n
  • SELECT browser->>'name' AS browser, count(browser) FROM events GROUP BY browser->>'name';
    • \n
\n

Output:

\n
- Total revenue per visitor:\n

SELECT visitor_id, SUM(CAST(properties->>'amount' AS integer)) AS total FROM events WHERE CAST(properties->>'amount' AS integer) > 0 GROUP BY visitor_id;

\n

Output:

\n
- Average screen resolution\n- `SELECT AVG(CAST(browser->'resolution'->>'x' AS integer)) AS width, AVG(CAST(browser->'resolution'->>'y' AS integer)) AS height FROM events;`\n

Output:

\n
#### If you found this guide helpful feel free to checkout my github/gists where I host similar content:\n

bgoonz's gists · GitHub

\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

\n

Or Checkout my personal Resource Site:

\n

a/A-Student-Resources
\nEdit descriptiongoofy-euclid-1cd736.netlify.app

\n

If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:

\n

bgoonz's gists
\nInstantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…gist.github.com

\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

\n

Or Checkout my personal Resource Site:

"},{"url":"/docs/reference/intro-to-nodejs/","relativePath":"docs/reference/intro-to-nodejs.md","relativeDir":"docs/reference","base":"intro-to-nodejs.md","name":"intro-to-nodejs","frontmatter":{"title":"Intro To NodeJS","weight":0,"excerpt":"A Node.js app runs in a single process, without creating a new thread for every request.","seo":{"title":"","description":"Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project!","robots":[],"extra":[]},"template":"docs"},"html":"

Enter the NodeJS

\n

Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project!

\n

Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser. This allows Node.js to be very performant.

\n

A Node.js app runs in a single process, without creating a new thread for every request. Node.js provides a set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the exception rather than the norm.

\n

When Node.js performs an I/O operation, like reading from the network, accessing a database or the filesystem, instead of blocking the thread and wasting CPU cycles waiting, Node.js will resume the operations when the response comes back.

\n

This allows Node.js to handle thousands of concurrent connections with a single server without introducing the burden of managing thread concurrency, which could be a significant source of bugs.

\n

Node.js has a unique advantage because millions of frontend developers that write JavaScript for the browser are now able to write the server-side code in addition to the client-side code without the need to learn a completely different language.

\n

In Node.js the new ECMAScript standards can be used without problems, as you don't have to wait for all your users to update their browsers - you are in charge of deciding which ECMAScript version to use by changing the Node.js version, and you can also enable specific experimental features by running Node.js with flags.

\n

A Vast Number of Libraries

\n

npm with its simple structure helped the ecosystem of Node.js proliferate, and now the npm registry hosts over 1,000,000 open source packages you can freely use.

\n

An Example Node.js Application

\n

The most common example Hello World of Node.js is a web server:

\n

This code first includes the Node.js http module.

\n

Node.js has a fantastic standard library, including first-class support for networking.

\n

The createServer() method of http creates a new HTTP server and returns it.

\n

The server is set to listen on the specified port and host name. When the server is ready, the callback function is called, in this case informing us that the server is running.

\n

Whenever a new request is received, the request event is called, providing two objects: a request (an http.IncomingMessage object) and a response (an http.ServerResponse object).

\n

Those 2 objects are essential to handle the HTTP call.

\n

The first provides the request details. In this simple example, this is not used, but you could access the request headers and request data.

\n

The second is used to return data to the caller.

\n

In this case with:

\n

JScopy

\n

res.statusCode = 200

\n

we set the statusCode property to 200, to indicate a successful response.

\n

We set the Content-Type header:

\n

JScopy

\n

res.setHeader('Content-Type', 'text/plain')

\n

and we close the response, adding the content as an argument to end():

\n

JScopy

\n

res.end('Hello World\\n')

\n

Node.js Frameworks and Tools

\n

Node.js is a low-level platform. In order to make things easy and exciting for developers, thousands of libraries were built upon Node.js by the community.

\n

Many of those established over time as popular options. Here is a non-comprehensive list of the ones worth learning:

\n
    \n
  • AdonisJS: A TypeScript-based fully featured framework highly focused on developer ergonomics, stability, and confidence. Adonis is one of the fastest Node.js web frameworks.
    • \n
  • Egg.js: A framework to build better enterprise frameworks and apps with Node.js & Koa.
    • \n
  • Express: It provides one of the most simple yet powerful ways to create a web server. Its minimalist approach, unopinionated, focused on the core features of a server, is key to its success.
    • \n
  • Fastify: A web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture. Fastify is one of the fastest Node.js web frameworks.
    • \n
  • FeatherJS: Feathers is a lightweight web-framework for creating real-time applications and REST APIs using JavaScript or TypeScript. Build prototypes in minutes and production-ready apps in days.
    • \n
  • Gatsby: A React-based, GraphQL powered, static site generator with a very rich ecosystem of plugins and starters.
    • \n
  • hapi: A rich framework for building applications and services that enables developers to focus on writing reusable application logic instead of spending time building infrastructure.
    • \n
  • koa: It is built by the same team behind Express, aims to be even simpler and smaller, building on top of years of knowledge. The new project born out of the need to create incompatible changes without disrupting the existing community.
    • \n
  • Loopback.io: Makes it easy to build modern applications that require complex integrations.
    • \n
  • Meteor: An incredibly powerful full-stack framework, powering you with an isomorphic approach to building apps with JavaScript, sharing code on the client and the server. Once an off-the-shelf tool that provided everything, now integrates with frontend libs React, Vue, and Angular. Can be used to create mobile apps as well.
    • \n
  • Micro: It provides a very lightweight server to create asynchronous HTTP microservices.
    • \n
  • NestJS: A TypeScript based progressive Node.js framework for building enterprise-grade efficient, reliable and scalable server-side applications.
    • \n
  • Next.js: React framework that gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.
    • \n
  • Nx: A toolkit for full-stack monorepo development using NestJS, Express, React, Angular, and more! Nx helps scale your development from one team building one application to many teams collaborating on multiple applications!
    • \n
  • Sapper: Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing. Offers SSR and more!
    • \n
  • Socket.io: A real-time communication engine to build network applications.
    • \n
  • Strapi: Strapi is a flexible, open-source Headless CMS that gives developers the freedom to choose their favorite tools and frameworks while also allowing editors to easily manage and distribute their content. By making the admin panel and API extensible through a plugin system, Strapi enables the world's largest companies to accelerate content delivery while building beautiful digital experiences.
    • \n
\n

Extended Version:

\n\n

Introduction to JavaScript

\n

JavaScript is dynamically typed single-threaded interpreted languages for the Web. That means if you are doing web development, you can use this language to perform some operating on the web page, like running some JavaScript code when a button is clicked by the user.

\n

JavaScript is a dynamically typed language which means a variable can hold any data type like String or Number in its lifetime and JavaScript interpreter won't complain about it. It's single-threaded which means your JavaScript code runs synchronously or sequentially line by line. It's interpreted which means you don't need to compile your JavaScript code.

\n

JavaScript is interactive, which means you can directly feed JavaScript code to the interpreter and it will be executed immediately. You can try this by opening DevTools in the browser (_in Chrome, press _*command** + **option** + **i*) or right-click anywhere on the page and click inspect. Then go to the console tab, here you can type any valid JavaScript code and press enter to run it. Use shift + enter to add a new-line in your code.

\n

\n

(interacting with JavaScript interpreter)

\n

Every browser ships a JavaScript Interpreter also called a JavaScript Engine. V8 is the JavaScript engine designed by Google and used in the Google Chrome browser while SpiderMonkey is a JavaScript engine developed by Mozilla for their Firefox browser.

\n

Since JavaScript engine designed by every browser is different, ECMA standardizes features of JavaScript. This standard is known as ECMAScript (pronounced as ek-ma-script). Whenever ECMA adds a feature to this JavaScript standard, the browser has to add it in their JavaScript engine to stay in the competition (though this process is very slow).

\n

JavaScript is a very easy language to learn and fun to write. Every year, new features are added to ECMAScript which brings JavaScript one more step closer to dominate the planet. The latest major revision of JavaScript is ES6 or ECMAScript 6 or ECMAScript 2015 which has dumped a ton of features to make it more fun to code in. At the moment, JavaScript supports the OOP paradigm very well and can be used in functional programming as well.

\n

Mozilla is an open-source foundation that documents JavaScript very well on their developer documentation AKA Mozilla Developer Network or MDN. It is one of the top online destinations to learn JavaScript, though there are other online resources as well. If you want to take a look at the JavaScript specifications and learn simple tutorials, visit MDN Documentation.

\n

JavaScript is sometimes abbreviated as JS or .js/.JS (dot J S) to state that an entity is related to JavaScript, like Node.js or ReactJS or AngularJS. But in no ways, JavaScript is related to Java, or so you think 👻. If you need a history lesson about JavaScript and its evolution, watch this amazing video.

\n

https://www.youtube.com/watch?v=Sh6lK57Cuk4

\n

Assuming that you are familiar with JavaScript and gained a good amount of knowledge, we can move forward. But if you don't know JavaScript at all, learn basic JavaScript from the MDN documentation I explained earlier. Because learning about Node.js without knowledge of JavaScript is like understanding web development without HTML.

\n

What is server-side JavaScript?

\n

JavaScript is a single-threaded language, it knows how to get things done one at a time. It can't do asynchronous tasks or run JavaScript code in multiple threads for efficiency. It just knows about JavaScript as defined in ECMAScript specification and nothing more.

\n

Since JavaScript is used on the web, it needs to be secure. Hence, using JavaScript, you can't access the computer it is running on, like File System, IO, Networking, etc. and neither ECMAScript has specifications for that.

\n

So it is up to the browser vendors to extend JavaScript engine with APIs that can do other things. For example, DOM API is responsible to print an HTML code into actual pixels on the screen, I have explained this process in my Medium article. Also, the XMLHttpRequest API gives us the ability to send network requests to fetch data from a remote server in the background.

\n

These sorts of APIs are responsible to perform other operations that JavaScript is not designed to perform. These APIs are provided by the browser and they are called Web APIs. These APIs are written in some Low-Level languages like C or C++ but their interface is made available through JavaScript.

\n

These Web APIs sometimes do their job in separate thread allowing other JavaScript code to run normally while the job is running in the background. Once the job is done, it then informs the main JavaScript thread.

\n
\n

So through JavaScript, you are executing C++ code and returning result back to the JavaScript, that doesn't sound so difficult.

\n
\n

For example, [setTimeout(callback, delay)](https://www.w3schools.com/jsref/met_win_settimeout.asp) function is not part of ECMAScript specification, it is provided by the browser to perform an asynchronous operation. The callback function is executed in the main JavaScript thread once delay milliseconds has elapsed.

\n

\n

\n

(an oversimplification of how JavaScript runs in a browser)

\n

So far we know that JavaScript is essential in a browser. But if you think about JavaScript engine alone, it can exist anywhere. You can take the V8 JavaScript engine and install it on your computer (let's call it as a server). With some fiddling, you can feed JavaScript code to it and it will run that code for you and may return the result. In theory, it looks pretty simple.

\n

The concept of server-side JavaScript comes from this simple idea. You can take any JavaScript engine, wrap inside an application that gives a clean interface to take the user's JavaScript code and execute it in the JavaScript engine. You can also provide APIs to perform operations like File System IO, Networking, etc. which do not run on JavaScript engine.

\n

\n

\n

(an oversimplification of how JavaScript runs on a server)

\n

Ryan Dahl took this idea and made Node.js.

\n
\n

To understand more about how a JavaScript engine works in a browser, you should read my article on How JavaScript engine works in browser and Node. This article also explain concept of Web APIs in depth.

\n
\n

How Node.js works?

\n

Sometimes, Node.js is also called simply Node or node.

\n

Node.js is a framework that contains the V8 JavaScript engine, the standard library of packages, and some binaries. In reality, it is more complex than that as explained in the below diagram (follow the link for more details).

\n

\n

(Source: Stackoverflow)

\n

Like Web APIs in the browser, Node.js has a standard library that contains JavaScript packages (we will learn about packages later) which may also provide an interface to low-level APIs. For example, Node.js comes with fs package which contains readFile function among many. This function reads the file on the disk of the machine and returns file content back.

\n

Most of these packages contain code written in a low-level programming language to communicate with the device, like for file system access. These packages export JavaScript functions and other types to run this code. Since JavaScript can not talk to C++ or some other language, Node.js has to create a binding to facilitate this communication. The process to create such packages is very tricky, but it is explained here in-depth.

\n

Node.js uses different threads to perform low-level non-JavaScript time-taking operations. This way, our JavaScript is not blocked while a time taking operation like reading a file is in progress. Since these operations are running in the background once initiated, we need a confirmation or a callback when the operation is finished. This callback is a JavaScript function that will execute as soon as the operation is finished.

\n

const fs = require('fs'); // fs is built-in packagefs.readFile('/path/to/file.txt', function(error, data){
\n// if error is not empty, show error log
\n// read data and do something with it
\n});

\n

The Node.js architecture is very complex and made of different parts as seen in the earlier diagram. It also contains an event loop that facilitates the execution of these callback functions. You should watch the below video on the event loop, though it is in the context of the browser but things are pretty similar in Node.js as well. This will clear your remaining doubts.

\n

Installing Node.js

\n

You should install Node.js from their official website at nodejs.org. If you are using Windows, Mac OS, or Linux, you can get precompiled binaries and installers. The best way to go is by using an installer.

\n

When you install Node.js, you get node and npm binaries added to your path. That means, now you can use node and npm command. We will talk about npm later, but for now, let's focus on the node.

\n

\n

Using -v or --version flag, we can check the version of the Node installed. The latest node will have the latest V8 engine, hence latest JavaScript features. If you need the flexibility to change Node version at any given time, in that case, you should not install Node.js using above method. Instead, you should use Node Version Manager or NVM.

\n
\n

Here is the list of Node.js releases with V8 engine versions.

\n
\n

Like we saw in DevTools of the browser, using the simple command node will open a JavaScript interpreter in the terminal. This way we can run some simple JavaScript code to amuse yourself.

\n

\n

\n

(node interpreter)

\n

Running JavaScript code with Node.js

\n

Now that we have a good understanding of what Node.js is and how JavaScript engine works, we can start messing with it.

\n

Using an interpreter we can perform some basic arithmetics and other basic stuff. But most of the time, your actual JavaScript code will be in a .js file. Instead of giving one line at a time to the interpreter, we need to give whole file content at once. We can do that by using node /path/to/file.js command.

\n

\n

(hello-world.js)

\n

In the above example, we have created hello-world.js file and it contains hello function. This function is executed after it was defined in the same file. Using the terminal, we executed node ./hello-world.js command. node will pick up hello-world.js file from the directory where the terminal is opened and run it using the V8 JavaScript engine.

\n

Since node can only execute .js files, adding .js extension to the file path is optional. If we provide a directory path instead of file path to node, Node.js will try to resolve index.js file inside that directory.

\n

\n

(executing index.js in the current directory with Node)

\n

Importing scripts in the program

\n

Normally our application is broken down to different parts. For example, if a set of functions are used over and over, we would like them to be contained in a separate file and import that file wherever those functions are to be used.

\n

Node.js supports this functionality natively. When you import a file inside another file, that file is called a module. Node.js uses the CommonJS module system syntax to import modules and packages.

\n
\n

Though ES6+ supports new module system, it is yet to be implemented in Node.

\n
\n

Let's create a lib directory and place math.js file inside it. This file contains some common math functions like add and multiply. We will import this file inside calculate.js file situated in the main directory. Hence math.js is a module, since we are importing it and not executing it directly with Node.

\n

To import a module, we need to use require function provided by the Node.js and available globally everywhere in the program. This function takes a relative or an absolute path of the module file and returns what module is exporting. Hence, we need to save it inside a variable.

\n

// calculate.js
\nvar math = require( './lib/math.js' ); // .js is optional

\n
\n

require() statement sometimes also called as import statement.

\n
\n

Now let's take a look at math.js file. We need to provide AKA export some values to the require() function call. This is done using exports variable. This variable is also globally available everywhere.

\n

This variable is actually an object which is empty {} at the beginning. When we import this module using require function, this is the object require() call will return.

\n

// calculate.js
\nvar math = require( './lib/math' );console.log(math); // {}

\n

Since we know that exports is an object that will be exported from the module, we can stuff it with whatever we want. As objects go, an object is a collection of key-value pairs. So let's add some math functions to it.

\n

// lib/math.js// add add function to exports
\nexports.add = function( num1, num2 ) {
\nreturn num1 + num2
\n};

\n

From math module, we are exporting add function which returns the sum of the two numbers (arguments). Let's see what math variable looks like.

\n

// calculate.js
\nvar math = require( './lib/math' );console.log(math);
\n{ add: [Function] }

\n

It shows that math variable is an object that contains add key which has a Function value. Let's execute that function and see the result.

\n

// calculate.js
\nvar math = require( './lib/math' );// add 1 + 2
\nvar result = math.add(1, 2);
\nconsole.log( result ); // 3

\n

What the heck is module.exports then?

\n

I kind of skipped over this part so that you can understand module import with ease. I have a simple question, what if my math module exports only one function like add but I don't want to export it inside an object. This is the only function my module is exporting, so I want require() call to return this function only so that I can start using it like below.

\n

// calculate.js
\nvar math = require( './lib/math' );// add 1 + 2
\nvar result = math(1, 2); // math is a function
\nconsole.log( result ); // 3

\n

This is where module global variable comes into the picture. Like exports, module is also globally available everywhere. module is an object and it contains information about module (auto injected by Node.js in key-value pairs). The important key in this object we should know about is exports.

\n

exports variable inside a module points to exports property on the module object, as you can prove in the below test.

\n

// lib/math.js
\nconsole.log(exports === module.exports); // true

\n

That means when we were setting exports.add, we were actually setting module.exports.add. So if we want our module to export only one function, we can just assign module.exports to that function.

\n
\n

We could say that since exports and module.exports is the same, why not just set exports to the function. The reason is how objects are handled in JavaScript. Read this answer to explore this topic in details.

\n
\n

// lib/math.js// export function only
\nmodule.exports = function( num1, num2 ) {
\nreturn num1 + num2
\n};

\n

If your module import path is a directory, then require function will resolve index.js file inside it. Using this feature, you can have multiple .js files in a directory that contains different exports and you can import them inside index.js to exports them again from a single point.

\n

└── lib/
\n├── index.js (import math and graph and export them)
\n├── math.js
\n└── graph.js

\n

This way, the importer does not need to target individual module files in a directory. The importer can just point to index.js file.

\n

// lib/math.js
\nexports.add = function( num1, num2 ) {
\nreturn num1 + num2
\n};// lib/index.js
\nvar math = require('./math');
\nexports.add = math.add
\n// calculate.js
\nconst lib = require('./lib'); // points to './lib/index.js'
\nlib.add(1, 2) // 3

\n

In Node.js, a module or a package is loaded only once (per thread or session) even when you require() them multiple times in the program. Once loaded, it will be cached by the Node for performance enhancement.

\n

There are other tricks with CommonJS module system and sometimes we also need to be careful. Read this article to understand more about imports.

\n

Packages in Node.js

\n

A package is nothing but a directory that contains a bunch of modules. Like for example lib in our previous example can be called a package but not quite yet. The most important feature about a node package is that, from anywhere in the program, we should be able to import it, without providing a relative or an absolute path.

\n

Well, that sounds absurd. If our .js files are nested, the import path will also change. Let's say that, we have a src directory and it contains compute.js. If we need to import lib package, the import path will be ../lib.

\n

├── lib/
\n| ├── index.js
\n| └── math.js
\n└── src/
\n├── compute.js // require( '../lib')
\n└── deep/
\n└── nested.js // require( '../../lib')

\n

As we nest our files deeper, the import path is very difficult to track. What would be easy is instead of the relative path, we would just use lib and Node.js just finds the path to that package for us.

\n

// src/compute.js
\nconst lib = require('lib'); // points to '../lib/index.js'
\nlib.add(1, 2) // 3

\n

This might sound like a fantasy but it is actually very real. Node.js can do this for us, just that we need to create node_modules directory and clone lib directory inside it. This way, when we call require('lib'), it will point to the lib directory inside node_modules. Now, lib is a package.

\n
\n

You might wonder, why they are called node_modules and not node_packages? In a conventional sense, a module is a file and package is a collection of modules. But when it comes to require function, they are ambiguous. Hence, let's stick to a common name, module. But normally, when people say node module, it is a package inside node_modules directory.

\n
\n

But the real question is, how does Node knows where the node_modules directory is. The answer is, it doesn't. When we import a package, it searches that package inside node_modules directory of the current file path (where import statement is written). If it doesn't find node_modules directory or the package directory, it performs a similar search in the parent directory.

\n

This continues until the last directory in the file system is reached. If it doesn't find the package, it throws Error: Cannot find module 'lib' error.

\n

Let's create node_modules directory in our project and clone lib directory there. From src/compute.js, we will call the add function as before.

\n

\n

(package introduction)

\n

In the above example, we are importing math.js file from lib package. If we just use require('lib'), Node.js will point to index.js file inside lib package directory. If math.js is missing, require will try to resolve math/index.js file treating math as a directory.

\n

Even though packages seems easy, their management if done manually is very difficult. Like what if we needed a 3rd-party package? I mean, should we clone the remote source code and put it inside node_module directory manually? Do you know how hard that would be for multiple people in the team? And whenever package version changes, it would be a mess to update.

\n

This is where NPM comes into the picture.

\n
\n

This whole modules and packages theory might sound familiar to you if you are a python developer. But you don't need init.py like file in Node.js 😉

\n
\n

What is NPM?

\n

When we installed Node.js, we also got npm command. NPM or Node Package Manager is the default package manager for Node.js. A role of a package manager is to download and install remote package, with ease.

\n
\n

BTW, we can also install packages from a local directory.

\n
\n

Node.js has a wide community that develop good packages for everybody to use. For example, lodash is the package that is used widely. This package contains useful utility functions like add in our earlier example. These utility functions are very well documented on their official website.

\n

When we have a remote package in our project, it is called as a dependency since our project depends on it. We need to keep track of our dependencies or at least list them down somewhere. We list all our dependencies inside a package.json file which is a JSON file that contains some information about our project and dependencies it needs.

\n

This file is essential for NPM. To create this file using npm, use npm init command. This command will ask you some question to fill project-specific data in package.json and eventually create package.json file. You can bypass the questions using -y flag.

\n

\n

(Initializing package.json)

\n

Note dependencies section in the package.json file, it is empty at the moment. This means, our project at the moment does not depend on any of the remote packages.

\n

To install a package, we use npm install <packagename> command. For example, to install lodash package, we use npm install --save lodash command. Using --save flag, we can make entry of this package inside dependencies section of the package.json file.

\n

This command will do the following things.

\n
    \n
  1. At first, it searches for this package on [registry.npm.com](http://registry.npmjs.org/) which contains the database of all packages. You can see the documentation of a package by visiting [https://www.npmjs.com/package/<packagename>](https://www.npmjs.com/package/lodash) URL.
    2. \n
  2. Then it downloads the compressed zip (or tar) file that contains all the source code of the package. If a version of the package was not specified in the command, it will download the latest version.
    3. \n
  3. Then it adds the package entry to the dependencies section of package.json with the version of the package. If the entry of the package already exists, it will just override the version of the package downloaded.
    4. \n
  4. Then it creates node_modules folder in the same directory if it doesn't already exist.
    5. \n
  5. Then it will copy all the files from the downloaded compressed file in the directory with the name of the package inside node_modules.
    6. \n
\n

Let's actually install lodash package and see how node_modules and package.json file looks like after the install.

\n

\n

(npm install -- save lodash)

\n

From the above example, npm installed the version 4.17.15 of the lodash. This type of version number system is called as Semantic Versioning. We can also specify a specific version of a package to install using the command like npm install --save lodash@4.17.10.

\n

Now that we have installed lodash, let's use its _.toUpper function to change the case of a string. But first, we need to import the package.

\n

// src/transform.js
\nvar lodash = require( 'lodash' );var result = lodash.toUpper( 'hello world!' );
\nconsole.log( result ); // HELLO WORLD!

\n

When we run this file using the command node src/transform.js, we get HELLO WORLD! printed in the terminal.

\n

When you install a package, NPM also creates package-lock.json file if not already present. This file contains a list of dependency packages with their versions that your project has installed as well as dependencies of those packages (because a package might use other packages and so on). This file including package.json should be tracked by your VCS while node_module directory should be ignored (reasons explained later).

\n
\n

NPM and package management is far more sophisticated (and for good) than this but we will discuss it later in details.

\n
\n

Built-in Packages AKA Built-in Modules

\n

Node.js ships with a collection of built-in packages called as a Node Standard Library. These packages are essential to perform low-level operations like File System I/O and Networking. We do not have to install them using NPM.

\n

Since these packages contain code in a low-level programming language tailored to a specific version of Node.js, they have to be shipped as a part of the installation process. Here is a list of built-in modules in Node.js.

\n

These packages do not exist on disk like lodash. They are compiled into low-level or intermediate stuff (explained here) but their sources are listed here.

\n

[fs](https://nodejs.org/api/fs.html) package is used to perform File System operations like file read and write while [path](https://nodejs.org/api/path.html) package is used to resolve a file or directory path on the system. Let's use these packages to demonstrate a cool example.

\n

├── res
\n| └── hello-world.txt
\n└── fs-example.js

\n

According to the above project structure, we have hello-world.txt file which contains Hello World! text. Using fs-example.js, we want to read the text in the file and log in to the console.

\n

\n

(Sample fs and path module introduction)

\n

In the above program, we imported the fs and path built-in modules.

\n
\n

When we require(name) a package, Node.js first searches for the package name in the built-in packages. If it doesn't find it in the standard library, then it searches for it in node_modules as explained earlier.

\n
\n

__dirname is a globally available variable that resolves to the absolute path of the current file on the disk. [path.resolve](https://nodejs.org/api/path.html#path_path_resolve_paths) function takes multiple path segments and joins them. This is a safe way to create an absolute path of a file on the disk, as Windows and Unix systems use different path delimiter.

\n
\n

You can also use a relative path like var filePath = './res/hello-world.txt'; in the above example but path.resolve is safer. process is a globally available object that contains information about environment variables and current process context in general. Unlike __dirname, [process.cwd()](https://nodejs.org/api/process.html#process_process_cwd) function returns the path of the directory from where the node command was executed in the terminal (or the current directory in the terminal).

\n
\n

Let's talk about the example in detail. Inside fs-example.js file, we imported built-in modules fs and path. Then we constructed a filePath which points to hello-world.txt on the disk.

\n

[fs.readFile](https://nodejs.org/api/fs.html#fs_fs_readfile_path_options_callback) function takes below arguments in series

\n
    \n
  1. filePath: A absolute or relative path to the file we are trying to read.
    2. \n
  2. options: An object that contains a configuration about reading. In the above example, we set encoding to utf-8 which converts binary data to Text format. This will convert file content to Text.
    3. \n
  3. callback: Sync file read operation using readFile function is asynchronous, we need a callback function to execute when the file is read completely. This function will receive read error (if any) as the first argument and file data as the second argument.
    4. \n
\n

Notice the console log. The first -end-of-the-program- statement got printed as fs.readFile was reading the file in the background. Once file reading was completed, the callback function was called.

\n

Node.js can also perform synchronous (blocking) operations. For example, using [fs.readFileSync](https://nodejs.org/api/fs.html#fs_fs_readfilesync_path_options), we can block the JavaScript thread until the file is read. This way, we can make sure, JavaScript code run sequentially.

\n

\n

(Reading a file synchronously)

\n

Creating an HTTP server in Node.js

\n

Node.js can do anything, literally anything. Node.js has built-in [http](https://nodejs.org/api/http.html) module as well as [https](https://nodejs.org/api/https.html) module to create an HTTP/HTTPS server. But their implementation is kind of hard.

\n

ExpressJS is a 3rd-party package that wraps the built-in http module and provide a cleaner interface to create an HTTP server. This package is listed on NPM registry under [express](https://www.npmjs.com/package/express) name. Let's create a basic HTTP server.

\n

First, we need to install express package using NPM.

\n

npm install --save express

\n

Then we will import this package and create a basic HTTP server inside server.js file. We will follow their startup documentation.

\n

\n

(Sample express HTTP server)

\n

When we executed server.js file with node, ExpressJS will lock the Node process as we want the server to be running forever. Now that server is running on the port 9000, we can open the browser and access URL <http://localhost:9000/> which will execute the .get callback.

\n

\n

(<http://localhost:9000/>)

\n

This was just a basic example of how we can create an HTTP server in Node.js. But with express.js, we can create more complex servers which can send HTML file content using response.sendFile(filePath) function or send JSON using response.json(object) function. We can also create an endpoint that serves static files like images from the disk using middlewares.

\n

To stop the server, we need to stop the locked Node.js process. We can do that by pressing ctrl+c in the terminal. But what if we need to actually run the server on the production literally forever. In that case, we can't have terminal open for years. This is where the process managers comes in.

\n

PM2 is one of the best process managers that can run a Node process in the background. When you install it, it will give you a clean command-line interface to start a Node.js process and PM2 will monitor it.

\n

Execute a Bash command from Node.js

\n

If you make Node.js your life and want to do everything from Node, then this topic is very important. Let's say that from a JavaScript program, you want to execute a BASH command. A Bash command would be echo Hello World!. You can try this command in the terminal and it will print Hello World!.

\n

Node.js provides a built-in [child_process](https://nodejs.org/api/child_process.html) command to run Bash command in a separate process. [child_process.exec](https://nodejs.org/api/child_process.html#child_process_child_process_exec_command_options_callback) function takes a Bash command and executes it. It takes an optional callback function to execute (with some process information) when the process is terminated.

\n

Let's create a echo.js file that executes echo Hello World! Bash command.

\n

\n

(child_process example)

\n

In the above program, the callback function to child_process.exec receives the standard output of the program.

\n

child_process module can do many things, like execute a Bash file using [child_process.execFile](https://nodejs.org/api/child_process.html#child_process_child_process_execfile_file_args_options_callback) function. It also supports synchronous variants to run a bash command synchronously, like [child_process.execSync](https://nodejs.org/api/child_process.html#child_process_child_process_execsync_command_options) function.

\n

How to ship your code to Production?

\n

Now that we have a good understanding of Node.js and NPM, we can move forward to this most important topic.

\n

package.json and package-lock.json files are very important as they contain information about dependencies our project has. Those dependencies are stored inside node_modules directory by the NPM.

\n

So if our project is managed using a VCS like Git then should we commit all our code? The answer is, 😱 NOOOOOOOOOOO. node_modules directory can be very large as it contains deeply nested dependencies. Hence it should be ignored by the VCS. Use .gitignore file to do that.

\n

.gitignore\\

\n

node_modules

\n

But then when your buddy takes the clone or a pull of the project, he/she won't get node_modules. Nothing to worry about here because NPM can take care of that.

\n

When we used npm install <packagename> command for the first time, NPM created node_modules directory and install packagename package. Using npm install command (without a package name), NPM will look at pakage.json to install all the dependencies listed inside it.

\n
\n

Actually, since NPM v.5, npm install command looks at package-lock.json command to install the dependencies since it contains the exact versions of the packages and their dependencies (which were installed by the developer of the project). This minimizes the conflict of versions between the development machine and production machine.

\n
\n

By ignoring node_modules, we are actually saving a lot of time and bandwidth of transferring the project from a development machine to production.

\n

\"Edit

"},{"url":"/docs/reference/markdown-styleguide/","relativePath":"docs/reference/markdown-styleguide.md","relativeDir":"docs/reference","base":"markdown-styleguide.md","name":"markdown-styleguide","frontmatter":{"title":"Markdown Lint Styleguide","weight":0,"excerpt":"Markdown Lint Styleguide","seo":{"title":"Markdown Lint Styleguide","description":"This document contains a description of all rules, what they are checking for, as well as examples of documents that break the rule and corrected versions of the examples.","robots":[],"extra":[]},"template":"docs"},"html":"

Rules

\n

This document contains a description of all rules, what they are checking for,\nas well as examples of documents that break the rule and corrected\nversions of the examples. Any rule whose heading is struck through is\ndeprecated, but still provided for backward-compatibility.

\n

\n

MD001 - Heading levels should only increment by one level at a time

\n

Tags: headings, headers

\n

Aliases: heading-increment, header-increment

\n

This rule is triggered when you skip heading levels in a markdown document, for\nexample:

\n
# Heading 1\n\n### Heading 3\n\nWe skipped out a 2nd level heading in this document\n
\n

When using multiple heading levels, nested headings should increase by only one\nlevel at a time:

\n
# Heading 1\n\n## Heading 2\n\n### Heading 3\n\n#### Heading 4\n\n## Another Heading 2\n\n### Another Heading 3\n
\n

Rationale: Headings represent the structure of a document and can be confusing\nwhen skipped - especially for accessibility scenarios. More information:\nhttps://www.w3.org/WAI/tutorials/page-structure/headings/.

\n

\n

MD002 - First heading should be a top-level heading

\n

Tags: headings, headers

\n

Aliases: first-heading-h1, first-header-h1

\n

Parameters: level (number; default 1)

\n
\n

Note: MD002 has been deprecated and is disabled by default.\nMD041/first-line-heading offers an improved implementation.

\n
\n

This rule is intended to ensure document headings start at the top level and\nis triggered when the first heading in the document isn't an h1 heading:

\n
## This isn't an H1 heading\n\n### Another heading\n
\n

The first heading in the document should be an h1 heading:

\n
# Start with an H1 heading\n\n## Then use an H2 for subsections\n
\n

Note: The level parameter can be used to change the top-level (ex: to h2) in\ncases where an h1 is added externally.

\n

Rationale: The top-level heading often acts as the title of a document. More\ninformation: https://cirosantilli.com/markdown-style-guide#top-level-header.

\n

\n

MD003 - Heading style

\n

Tags: headings, headers

\n

Aliases: heading-style, header-style

\n

Parameters: style (\"consistent\", \"atx\", \"atxclosed\", \"setext\",\n\"setextwithatx\", \"setextwithatxclosed\"; default \"consistent\")

\n

This rule is triggered when different heading styles (atx, setext, and 'closed'\natx) are used in the same document:

\n
# ATX style H1\n\n## Closed ATX style H2 ##\n\nSetext style H1\n===============\n
\n

Be consistent with the style of heading used in a document:

\n
# ATX style H1\n\n## ATX style H2\n
\n

The setextwithatx and setextwithatx_closed doc styles allow atx-style\nheadings of level 3 or more in documents with setext style headings:

\n
Setext style H1\n===============\n\nSetext style H2\n---------------\n\n### ATX style H3\n
\n

Note: the configured heading style can be a specific style to use (atx,\natxclosed, setext, setextwithatx, setextwithatxclosed), or simply require\nthat the usage is consistent within the document.

\n

Rationale: Consistent formatting makes it easier to understand a document.

\n

\n

MD004 - Unordered list style

\n

Tags: bullet, ul

\n

Aliases: ul-style

\n

Parameters: style (\"consistent\", \"asterisk\", \"plus\", \"dash\", \"sublist\"; default\n\"consistent\")

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when the symbols used in the document for unordered\nlist items do not match the configured unordered list style:

\n
* Item 1\n+ Item 2\n- Item 3\n
\n

To fix this issue, use the configured style for list items throughout the\ndocument:

\n
* Item 1\n* Item 2\n* Item 3\n
\n

The configured list style can be a specific symbol to use (asterisk, plus, dash),\nto ensure that all list styling is consistent, or to ensure that each\nsublist has a consistent symbol that differs from its parent list.

\n

For example, the following is valid for the sublist style because the outer-most\nindent uses asterisk, the middle indent uses plus, and the inner-most indent uses\ndash:

\n
* Item 1\n  + Item 2\n    - Item 3\n  + Item 4\n* Item 4\n  + Item 5\n
\n

Rationale: Consistent formatting makes it easier to understand a document.

\n

\n

MD005 - Inconsistent indentation for list items at the same level

\n

Tags: bullet, ul, indentation

\n

Aliases: list-indent

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when list items are parsed as being at the same level,\nbut don't have the same indentation:

\n
* Item 1\n  * Nested Item 1\n  * Nested Item 2\n   * A misaligned item\n
\n

Usually, this rule will be triggered because of a typo. Correct the indentation\nfor the list to fix it:

\n
* Item 1\n  * Nested Item 1\n  * Nested Item 2\n  * Nested Item 3\n
\n

Sequentially-ordered list markers are usually left-aligned such that all items\nhave the same starting column:

\n
...\n8. Item\n9. Item\n10. Item\n11. Item\n...\n
\n

This rule also supports right-alignment of list markers such that all items have\nthe same ending column:

\n
...\n 8. Item\n 9. Item\n10. Item\n11. Item\n...\n
\n

Rationale: Violations of this rule can lead to improperly rendered content.

\n

\n

MD006 - Consider starting bulleted lists at the beginning of the line

\n

Tags: bullet, ul, indentation

\n

Aliases: ul-start-left

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when top-level lists don't start at the beginning of a\nline:

\n
Some text\n\n  * List item\n  * List item\n
\n

To fix, ensure that top-level list items are not indented:

\n
Some test\n\n* List item\n* List item\n
\n

Note: This rule is triggered for the following scenario because the unordered\nsublist is not recognized as such by the parser. Not being nested 3 characters\nas required by the outer ordered list, it creates a top-level unordered list\ninstead.

\n
1. List item\n  - List item\n  - List item\n1. List item\n
\n

Rationale: Starting lists at the beginning of the line means that nested list\nitems can all be indented by the same amount when an editor's indent function\nor the tab key is used to indent. Starting a list 1 space in means that the\nindent of the first nested list is less than the indent of the second level (3\ncharacters if you use 4 space tabs, or 1 character if you use 2 space tabs).

\n

\n

MD007 - Unordered list indentation

\n

Tags: bullet, ul, indentation

\n

Aliases: ul-indent

\n

Parameters: indent, start_indented (number; default 2, boolean; default false)

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when list items are not indented by the configured\nnumber of spaces (default: 2).

\n

Example:

\n
* List item\n   * Nested list item indented by 3 spaces\n
\n

Corrected Example:

\n
* List item\n  * Nested list item indented by 2 spaces\n
\n

Note: This rule applies to a sublist only if its parent lists are all also\nunordered (otherwise, extra indentation of ordered lists interferes with the\nrule).

\n

The start_indented parameter allows the first level of lists to be indented by\nthe configured number of spaces rather than starting at zero (the inverse of\nMD006).

\n

Rationale: Indenting by 2 spaces allows the content of a nested list to be in\nline with the start of the content of the parent list when a single space is\nused after the list marker. Indenting by 4 spaces is consistent with code blocks\nand simpler for editors to implement. Additionally, this can be a compatibility\nissue for multi-markdown parsers, which require 4-space indents. More information:\nhttps://cirosantilli.com/markdown-style-guide#indentation-of-content-inside-lists\nand http://support.markedapp.com/discussions/problems/21-sub-lists-not-indenting.

\n

Note: See Prettier.md for compatibility information.

\n

\n

MD009 - Trailing spaces

\n

Tags: whitespace

\n

Aliases: no-trailing-spaces

\n\n

Parameters: brspaces, listitememptylines, strict (number; default 2, boolean; default false, boolean; default false)

\n\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered on any lines that end with unexpected whitespace. To fix this,\nremove the trailing space from the end of the line.

\n

Note: Trailing space is allowed in indented and fenced code blocks because some\nlanguages require it.

\n

The br_spaces parameter allows an exception to this rule for a specific number\nof trailing spaces, typically used to insert an explicit line break. The default\nvalue allows 2 spaces to indicate a hard break (<br> element).

\n

Note: You must set br_spaces to a value >= 2 for this parameter to take effect.\nSetting br_spaces to 1 behaves the same as 0, disallowing any trailing spaces.

\n

By default, this rule will not trigger when the allowed number of spaces is used,\neven when it doesn't create a hard break (for example, at the end of a paragraph).\nTo report such instances as well, set the strict parameter to true.

\n
Text text text\ntext[2 spaces]\n
\n

Using spaces to indent blank lines inside a list item is usually not necessary,\nbut some parsers require it. Set the list_item_empty_lines parameter to true\nto allow this (even when strict is true):

\n
- list item text\n  [2 spaces]\n  list item text\n
\n

Rationale: Except when being used to create a line break, trailing whitespace\nhas no purpose and does not affect the rendering of content.

\n

\n

MD010 - Hard tabs

\n

Tags: whitespace, hard_tab

\n

Aliases: no-hard-tabs

\n

Parameters: codeblocks, spacesper_tab (boolean; default true, number; default 1)

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered by any lines that contain hard tab characters instead\nof using spaces for indentation. To fix this, replace any hard tab characters\nwith spaces instead.

\n

Example:

\n\n
Some text\n\n    * hard tab character used to indent the list item\n
\n\n

Corrected example:

\n
Some text\n\n    * Spaces used to indent the list item instead\n
\n

You have the option to exclude this rule for code blocks. To do so, set the\ncode_blocks parameter to false. Code blocks are included by default since\nhandling of tabs by tools is often inconsistent (ex: using 4 vs. 8 spaces).

\n

If you would like the fixer to change tabs to x spaces, then configure the spaces_per_tab\nparameter to the number x. The default value would be 1.

\n

Rationale: Hard tabs are often rendered inconsistently by different editors and\ncan be harder to work with than spaces.

\n

\n

MD011 - Reversed link syntax

\n

Tags: links

\n

Aliases: no-reversed-links

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when text that appears to be a link is encountered, but\nwhere the syntax appears to have been reversed (the [] and () are\nreversed):

\n
(Incorrect link syntax)[https://www.example.com/]\n
\n

To fix this, swap the [] and () around:

\n
[Correct link syntax](https://www.example.com/)\n
\n

Note: Markdown Extra-style\nfootnotes do not trigger this rule:

\n
For (example)[^1]\n
\n

Rationale: Reversed links are not rendered as usable links.

\n

\n

MD012 - Multiple consecutive blank lines

\n

Tags: whitespace, blank_lines

\n

Aliases: no-multiple-blanks

\n

Parameters: maximum (number; default 1)

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when there are multiple consecutive blank lines in the\ndocument:

\n
Some text here\n\n\nSome more text here\n
\n

To fix this, delete the offending lines:

\n
Some text here\n\nSome more text here\n
\n

Note: this rule will not be triggered if there are multiple consecutive blank\nlines inside code blocks.

\n

Note: The maximum parameter can be used to configure the maximum number of\nconsecutive blank lines.

\n

Rationale: Except in a code block, blank lines serve no purpose and do not\naffect the rendering of content.

\n

\n

MD013 - Line length

\n

Tags: line_length

\n

Aliases: line-length

\n\n

Parameters: linelength, headinglinelength, codeblocklinelength, codeblocks, tables, headings, headers, strict, stern (number; default 80 for *length, boolean; default true (except strict/stern which default false))

\n\n
\n

If headings is not provided, headers (deprecated) will be used.

\n
\n

This rule is triggered when there are lines that are longer than the\nconfigured line_length (default: 80 characters). To fix this, split the line\nup into multiple lines. To set a different maximum length for headings, use\nheading_line_length. To set a different maximum length for code blocks, use\ncode_block_line_length

\n

This rule has an exception when there is no whitespace beyond the configured\nline length. This allows you to still include items such as long URLs without\nbeing forced to break them in the middle. To disable this exception, set the\nstrict parameter to true to report an issue when any line is too long.\nTo warn for lines that are too long and could be fixed but allow lines without\nspaces, set the stern parameter to true.

\n

For example (assuming normal behavior):

\n
IF THIS LINE IS THE MAXIMUM LENGTH\nThis line is okay because there are-no-spaces-beyond-that-length\nAnd this line is a violation because there are\nThis-line-is-also-okay-because-there-are-no-spaces\n
\n

In strict or stern modes, the two middle lines above are a violation. The\nthird line is a violation in strict mode but allowed in stern mode.

\n

You have the option to exclude this rule for code blocks, tables, or headings.\nTo do so, set the code_blocks, tables, or headings parameter(s) to false.

\n

Code blocks are included in this rule by default since it is often a\nrequirement for document readability, and tentatively compatible with code\nrules. Still, some languages do not lend themselves to short lines.

\n

Rationale: Extremely long lines can be difficult to work with in some editors.\nMore information: https://cirosantilli.com/markdown-style-guide#line-wrapping.

\n

\n

MD014 - Dollar signs used before commands without showing output

\n

Tags: code

\n

Aliases: commands-show-output

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when there are code blocks showing shell commands to be\ntyped, and all of the shell commands are preceded by dollar signs ($):

\n\n
$ ls\n$ cat foo\n$ less bar\n
\n\n

The dollar signs are unnecessary in this situation, and should not be\nincluded:

\n
ls\ncat foo\nless bar\n
\n

Showing output for commands preceded by dollar signs does not trigger this rule:

\n
$ ls\nfoo bar\n$ cat foo\nHello world\n$ cat bar\nbaz\n
\n

Because some commands do not produce output, it is not a violation if some\ncommands do not have output:

\n
$ mkdir test\nmkdir: created directory 'test'\n$ ls test\n
\n

Rationale: It is easier to copy/paste and less noisy if the dollar signs\nare omitted when they are not needed. See\nhttps://cirosantilli.com/markdown-style-guide#dollar-signs-in-shell-code\nfor more information.

\n

\n

MD018 - No space after hash on atx style heading

\n

Tags: headings, headers, atx, spaces

\n

Aliases: no-missing-space-atx

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when spaces are missing after the hash characters\nin an atx style heading:

\n
#Heading 1\n\n##Heading 2\n
\n

To fix this, separate the heading text from the hash character by a single\nspace:

\n
# Heading 1\n\n## Heading 2\n
\n

Rationale: Violations of this rule can lead to improperly rendered content.

\n

\n

MD019 - Multiple spaces after hash on atx style heading

\n

Tags: headings, headers, atx, spaces

\n

Aliases: no-multiple-space-atx

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when more than one space is used to separate the\nheading text from the hash characters in an atx style heading:

\n
#  Heading 1\n\n##  Heading 2\n
\n

To fix this, separate the heading text from the hash character by a single\nspace:

\n
# Heading 1\n\n## Heading 2\n
\n

Rationale: Extra space has no purpose and does not affect the rendering of\ncontent.

\n

\n

MD020 - No space inside hashes on closed atx style heading

\n

Tags: headings, headers, atx_closed, spaces

\n

Aliases: no-missing-space-closed-atx

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when spaces are missing inside the hash characters\nin a closed atx style heading:

\n
#Heading 1#\n\n##Heading 2##\n
\n

To fix this, separate the heading text from the hash character by a single\nspace:

\n
# Heading 1 #\n\n## Heading 2 ##\n
\n

Note: this rule will fire if either side of the heading is missing spaces.

\n

Rationale: Violations of this rule can lead to improperly rendered content.

\n

\n

MD021 - Multiple spaces inside hashes on closed atx style heading

\n

Tags: headings, headers, atx_closed, spaces

\n

Aliases: no-multiple-space-closed-atx

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when more than one space is used to separate the\nheading text from the hash characters in a closed atx style heading:

\n
#  Heading 1  #\n\n##  Heading 2  ##\n
\n

To fix this, separate the heading text from the hash character by a single\nspace:

\n
# Heading 1 #\n\n## Heading 2 ##\n
\n

Note: this rule will fire if either side of the heading contains multiple\nspaces.

\n

Rationale: Extra space has no purpose and does not affect the rendering of\ncontent.

\n

\n

MD022 - Headings should be surrounded by blank lines

\n

Tags: headings, headers, blank_lines

\n

Aliases: blanks-around-headings, blanks-around-headers

\n

Parameters: linesabove, linesbelow (number; default 1)

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when headings (any style) are either not preceded or not\nfollowed by at least one blank line:

\n
# Heading 1\nSome text\n\nSome more text\n## Heading 2\n
\n

To fix this, ensure that all headings have a blank line both before and after\n(except where the heading is at the beginning or end of the document):

\n
# Heading 1\n\nSome text\n\nSome more text\n\n## Heading 2\n
\n

The lines_above and lines_below parameters can be used to specify a different\nnumber of blank lines (including 0) above or below each heading.

\n

Note: If lines_above or lines_below are configured to require more than one\nblank line, MD012/no-multiple-blanks should also be customized.

\n

Rationale: Aside from aesthetic reasons, some parsers, including kramdown, will\nnot parse headings that don't have a blank line before, and will parse them as\nregular text.

\n

\n

MD023 - Headings must start at the beginning of the line

\n

Tags: headings, headers, spaces

\n

Aliases: heading-start-left, header-start-left

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when a heading is indented by one or more spaces:

\n
Some text\n\n  # Indented heading\n
\n

To fix this, ensure that all headings start at the beginning of the line:

\n
Some text\n\n# Heading\n
\n

Rationale: Headings that don't start at the beginning of the line will not be\nparsed as headings, and will instead appear as regular text.

\n

\n

MD024 - Multiple headings with the same content

\n

Tags: headings, headers

\n

Aliases: no-duplicate-heading, no-duplicate-header

\n

Parameters: siblingsonly, allowdifferent_nesting (boolean; default false)

\n

This rule is triggered if there are multiple headings in the document that have\nthe same text:

\n
# Some text\n\n## Some text\n
\n

To fix this, ensure that the content of each heading is different:

\n
# Some text\n\n## Some more text\n
\n

If the parameter siblings_only (alternatively allow_different_nesting) is\nset to true, heading duplication is allowed for non-sibling headings (common\nin changelogs):

\n
# Change log\n\n## 1.0.0\n\n### Features\n\n## 2.0.0\n\n### Features\n
\n

Rationale: Some markdown parsers generate anchors for headings based on the\nheading name; headings with the same content can cause problems with that.

\n

\n

MD025 - Multiple top-level headings in the same document

\n

Tags: headings, headers

\n

Aliases: single-title, single-h1

\n

Parameters: level, frontmattertitle (number; default 1, string; default \"^\\s\"?title\"?\\s[:=]\")

\n

This rule is triggered when a top-level heading is in use (the first line of\nthe file is an h1 heading), and more than one h1 heading is in use in the\ndocument:

\n
# Top level heading\n\n# Another top-level heading\n
\n

To fix, structure your document so there is a single h1 heading that is\nthe title for the document. Subsequent headings must be\nlower-level headings (h2, h3, etc.):

\n
# Title\n\n## Heading\n\n## Another heading\n
\n

Note: The level parameter can be used to change the top-level (ex: to h2) in\ncases where an h1 is added externally.

\n

If YAML front matter is present and contains\na title property (commonly used with blog posts), this rule treats that as a top\nlevel heading and will report a violation for any subsequent top-level headings.\nTo use a different property name in the front matter, specify the text of a regular\nexpression via the front_matter_title parameter. To disable the use of front\nmatter by this rule, specify \"\" for front_matter_title.

\n

Rationale: A top-level heading is an h1 on the first line of the file, and\nserves as the title for the document. If this convention is in use, then there\ncan not be more than one title for the document, and the entire document\nshould be contained within this heading.

\n

\n

MD026 - Trailing punctuation in heading

\n

Tags: headings, headers

\n

Aliases: no-trailing-punctuation

\n

Parameters: punctuation (string; default \".,;:!。，；：！\")

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered on any heading that has one of the specified normal or\nfull-width punctuation characters as the last character in the line:

\n
# This is a heading.\n
\n

To fix this, remove the trailing punctuation:

\n
# This is a heading\n
\n

Note: The punctuation parameter can be used to specify what characters count\nas punctuation at the end of a heading. For example, you can change it to\n\".,;:\" to allow headings that end with an exclamation point. ? is\nallowed by default because of how common it is in headings of FAQ-style documents.\nSetting the punctuation parameter to \"\" allows all characters - and is\nequivalent to disabling the rule.

\n

Note: The trailing semicolon of\nHTML entity references\nlike &copy;, &#169;, and &#x000A9; is ignored by this rule.

\n

Rationale: Headings are not meant to be full sentences. More information:\nhttps://cirosantilli.com/markdown-style-guide#punctuation-at-the-end-of-headers

\n

\n

MD027 - Multiple spaces after blockquote symbol

\n

Tags: blockquote, whitespace, indentation

\n

Aliases: no-multiple-space-blockquote

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when blockquotes have more than one space after the\nblockquote (>) symbol:

\n
>  This is a blockquote with bad indentation\n>  there should only be one.\n
\n

To fix, remove any extraneous space:

\n
> This is a blockquote with correct\n> indentation.\n
\n

Rationale: Consistent formatting makes it easier to understand a document.

\n

\n

MD028 - Blank line inside blockquote

\n

Tags: blockquote, whitespace

\n

Aliases: no-blanks-blockquote

\n

This rule is triggered when two blockquote blocks are separated by nothing\nexcept for a blank line:

\n
> This is a blockquote\n> which is immediately followed by\n\n> this blockquote. Unfortunately\n> In some parsers, these are treated as the same blockquote.\n
\n

To fix this, ensure that any blockquotes that are right next to each other\nhave some text in between:

\n
> This is a blockquote.\n\nAnd Jimmy also said:\n\n> This too is a blockquote.\n
\n

Alternatively, if they are supposed to be the same quote, then add the\nblockquote symbol at the beginning of the blank line:

\n
> This is a blockquote.\n>\n> This is the same blockquote.\n
\n

Rationale: Some markdown parsers will treat two blockquotes separated by one\nor more blank lines as the same blockquote, while others will treat them as\nseparate blockquotes.

\n

\n

MD029 - Ordered list item prefix

\n

Tags: ol

\n

Aliases: ol-prefix

\n

Parameters: style (\"one\", \"ordered\", \"oneorordered\", \"zero\"; default \"oneorordered\")

\n

This rule is triggered for ordered lists that do not either start with '1.' or\ndo not have a prefix that increases in numerical order (depending on the\nconfigured style). The less-common pattern of using '0.' as a first prefix or\nfor all prefixes is also supported.

\n

Example valid list if the style is configured as 'one':

\n
1. Do this.\n1. Do that.\n1. Done.\n
\n

Examples of valid lists if the style is configured as 'ordered':

\n
1. Do this.\n2. Do that.\n3. Done.\n
\n
0. Do this.\n1. Do that.\n2. Done.\n
\n

All three examples are valid when the style is configured as 'oneorordered'.

\n

Example valid list if the style is configured as 'zero':

\n
0. Do this.\n0. Do that.\n0. Done.\n
\n

Example invalid list for all styles:

\n
1. Do this.\n3. Done.\n
\n

This rule supports 0-prefixing ordered list items for uniform indentation:

\n
...\n08. Item\n09. Item\n10. Item\n11. Item\n...\n
\n

Note: This rule will report violations for cases like the following where an\nimproperly-indented code block (or similar) appears between two list items and\n\"breaks\" the list in two:

\n\n
1. First list\n\n```text\nCode block\n```\n\n1. Second list\n
\n

The fix is to indent the code block so it becomes part of the preceding list\nitem as intended:

\n
1. First list\n\n   ```text\n   Code block\n   ```\n\n2. Still first list\n
\n\n

Rationale: Consistent formatting makes it easier to understand a document.

\n

\n

MD030 - Spaces after list markers

\n

Tags: ol, ul, whitespace

\n

Aliases: list-marker-space

\n

Parameters: ulsingle, olsingle, ulmulti, olmulti (number; default 1)

\n

Fixable: Most violations can be fixed by tooling

\n

This rule checks for the number of spaces between a list marker (e.g. '-',\n'*', '+' or '1.') and the text of the list item.

\n

The number of spaces checked for depends on the document style in use, but the\ndefault is 1 space after any list marker:

\n
* Foo\n* Bar\n* Baz\n\n1. Foo\n1. Bar\n1. Baz\n\n1. Foo\n   * Bar\n1. Baz\n
\n

A document style may change the number of spaces after unordered list items\nand ordered list items independently, as well as based on whether the content\nof every item in the list consists of a single paragraph or multiple\nparagraphs (including sub-lists and code blocks).

\n

For example, the style guide at\nhttps://cirosantilli.com/markdown-style-guide#spaces-after-list-marker\nspecifies that 1 space after the list marker should be used if every item in\nthe list fits within a single paragraph, but to use 2 or 3 spaces (for ordered\nand unordered lists respectively) if there are multiple paragraphs of content\ninside the list:

\n
* Foo\n* Bar\n* Baz\n
\n

vs.

\n
*   Foo\n\n    Second paragraph\n\n*   Bar\n
\n

or

\n
1.  Foo\n\n    Second paragraph\n\n1.  Bar\n
\n

To fix this, ensure the correct number of spaces are used after the list marker\nfor your selected document style.

\n

Rationale: Violations of this rule can lead to improperly rendered content.

\n

Note: See Prettier.md for compatibility information.

\n

\n

MD031 - Fenced code blocks should be surrounded by blank lines

\n

Tags: code, blank_lines

\n

Aliases: blanks-around-fences

\n

Parameters: list_items (boolean; default true)

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when fenced code blocks are either not preceded or not\nfollowed by a blank line:

\n
Some text\n```\nCode block\n```\n\n```\nAnother code block\n```\nSome more text\n
\n

To fix this, ensure that all fenced code blocks have a blank line both before\nand after (except where the block is at the beginning or end of the document):

\n
Some text\n\n```\nCode block\n```\n\n```\nAnother code block\n```\n\nSome more text\n
\n

Set the list_items parameter to false to disable this rule for list items.\nDisabling this behavior for lists can be useful if it is necessary to create a\ntight list containing a code fence.

\n

Rationale: Aside from aesthetic reasons, some parsers, including kramdown, will\nnot parse fenced code blocks that don't have blank lines before and after them.

\n

\n

MD032 - Lists should be surrounded by blank lines

\n

Tags: bullet, ul, ol, blank_lines

\n

Aliases: blanks-around-lists

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when lists (of any kind) are either not preceded or not\nfollowed by a blank line:

\n
Some text\n* Some\n* List\n\n1. Some\n2. List\nSome text\n
\n

To fix this, ensure that all lists have a blank line both before and after\n(except where the block is at the beginning or end of the document):

\n
Some text\n\n* Some\n* List\n\n1. Some\n2. List\n\nSome text\n
\n

Rationale: Aside from aesthetic reasons, some parsers, including kramdown, will\nnot parse lists that don't have blank lines before and after them.

\n

\n

MD033 - Inline HTML

\n

Tags: html

\n

Aliases: no-inline-html

\n

Parameters: allowed_elements (array of string; default empty)

\n

This rule is triggered whenever raw HTML is used in a markdown document:

\n
<h1>Inline HTML heading</h1>\n
\n

To fix this, use 'pure' markdown instead of including raw HTML:

\n
# Markdown heading\n
\n

Note: To allow specific HTML elements, use the 'allowed_elements' parameter.

\n

Rationale: Raw HTML is allowed in markdown, but this rule is included for\nthose who want their documents to only include \"pure\" markdown, or for those\nwho are rendering markdown documents in something other than HTML.

\n

\n

MD034 - Bare URL used

\n

Tags: links, url

\n

Aliases: no-bare-urls

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered whenever a URL is given that isn't surrounded by angle\nbrackets:

\n
For more information, see https://www.example.com/.\n
\n

To fix this, add angle brackets around the URL:

\n
For more information, see <https://www.example.com/>.\n
\n

Note: To use a bare URL without it being converted into a link, enclose it in\na code block, otherwise in some markdown parsers it will be converted:

\n
`https://www.example.com`\n
\n

Note: The following scenario does not trigger this rule to avoid conflicts\nwith MD011/no-reversed-links:

\n
[https://www.example.com]\n
\n

The use of quotes around a bare link will not trigger this rule, either:

\n
\"https://www.example.com\"\n'https://www.example.com'\n
\n

Rationale: Without angle brackets, the URL isn't converted into a link by many\nmarkdown parsers.

\n

\n

MD035 - Horizontal rule style

\n

Tags: hr

\n

Aliases: hr-style

\n

Parameters: style (\"consistent\", \"---\", \"***\", or other string specifying the\nhorizontal rule; default \"consistent\")

\n

This rule is triggered when inconsistent styles of horizontal rules are used\nin the document:

\n
---\n\n- - -\n\n***\n\n* * *\n\n****\n
\n

To fix this, ensure any horizontal rules used in the document are consistent,\nor match the given style if the rule is so configured:

\n
---\n\n---\n
\n

Note: by default, this rule is configured to just require that all horizontal\nrules in the document are the same and will trigger if any of the horizontal\nrules are different than the first one encountered in the document. If you\nwant to configure the rule to match a specific style, the parameter given to\nthe 'style' option is a string containing the exact horizontal rule text that\nis allowed.

\n

Rationale: Consistent formatting makes it easier to understand a document.

\n

\n

MD036 - Emphasis used instead of a heading

\n

Tags: headings, headers, emphasis

\n

Aliases: no-emphasis-as-heading, no-emphasis-as-header

\n

Parameters: punctuation (string; default \".,;:!?。，；：！？\")

\n

This check looks for instances where emphasized (i.e. bold or italic) text is\nused to separate sections, where a heading should be used instead:

\n
**My document**\n\nLorem ipsum dolor sit amet...\n\n_Another section_\n\nConsectetur adipiscing elit, sed do eiusmod.\n
\n

To fix this, use markdown headings instead of emphasized text to denote\nsections:

\n
# My document\n\nLorem ipsum dolor sit amet...\n\n## Another section\n\nConsectetur adipiscing elit, sed do eiusmod.\n
\n

Note: This rule looks for single-line paragraphs that consist entirely\nof emphasized text. It won't fire on emphasis used within regular text,\nmulti-line emphasized paragraphs, or paragraphs ending in punctuation\n(normal or full-width). Similarly to rule MD026, you can configure what\ncharacters are recognized as punctuation.

\n

Rationale: Using emphasis instead of a heading prevents tools from inferring\nthe structure of a document. More information:\nhttps://cirosantilli.com/markdown-style-guide#emphasis-vs-headers.

\n

\n

MD037 - Spaces inside emphasis markers

\n

Tags: whitespace, emphasis

\n

Aliases: no-space-in-emphasis

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when emphasis markers (bold, italic) are used, but they\nhave spaces between the markers and the text:

\n
Here is some ** bold ** text.\n\nHere is some * italic * text.\n\nHere is some more __ bold __ text.\n\nHere is some more _ italic _ text.\n
\n

To fix this, remove the spaces around the emphasis markers:

\n
Here is some **bold** text.\n\nHere is some *italic* text.\n\nHere is some more __bold__ text.\n\nHere is some more _italic_ text.\n
\n

Rationale: Emphasis is only parsed as such when the asterisks/underscores\naren't surrounded by spaces. This rule attempts to detect where\nthey were surrounded by spaces, but it appears that emphasized text was\nintended by the author.

\n

\n

MD038 - Spaces inside code span elements

\n

Tags: whitespace, code

\n

Aliases: no-space-in-code

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered for code span elements that have spaces adjacent to the\nbackticks:

\n
`some text `\n\n` some text`\n
\n

To fix this, remove any spaces adjacent to the backticks:

\n
`some text`\n
\n

Note: A single leading and trailing space is allowed by the specification and\nautomatically trimmed (to allow for embedded backticks):

\n
`` `backticks` ``\n
\n

Note: A single leading or trailing space is allowed if used to separate code span\nmarkers from an embedded backtick:

\n
`` ` embedded backtick``\n
\n

Rationale: Violations of this rule can lead to improperly rendered content.

\n

\n

MD039 - Spaces inside link text

\n

Tags: whitespace, links

\n

Aliases: no-space-in-links

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered on links that have spaces surrounding the link text:

\n
[ a link ](https://www.example.com/)\n
\n

To fix this, remove the spaces surrounding the link text:

\n
[a link](https://www.example.com/)\n
\n

Rationale: Consistent formatting makes it easier to understand a document.

\n

\n

MD040 - Fenced code blocks should have a language specified

\n

Tags: code, language

\n

Aliases: fenced-code-language

\n

This rule is triggered when fenced code blocks are used, but a language isn't\nspecified:

\n
```\n#!/bin/bash\necho Hello world\n```\n
\n

To fix this, add a language specifier to the code block:

\n
```bash\n#!/bin/bash\necho Hello world\n```\n
\n

To display a code block without syntax highlighting, use:

\n
```text\nPlain text in a code block\n```\n
\n

Rationale: Specifying a language improves content rendering by using the\ncorrect syntax highlighting for code. More information:\nhttps://cirosantilli.com/markdown-style-guide#option-code-fenced.

\n

\n

MD041 - First line in a file should be a top-level heading

\n

Tags: headings, headers

\n

Aliases: first-line-heading, first-line-h1

\n

Parameters: level, frontmattertitle (number; default 1, string; default \"^\\s\"?title\"?\\s[:=]\")

\n

This rule is intended to ensure documents have a title and is triggered when\nthe first line in the file isn't a top-level (h1) heading:

\n
This is a file without a heading\n
\n

To fix this, add a top-level heading to the beginning of the file:

\n
# File with heading\n\nThis is a file with a top-level heading\n
\n

Because it is common for projects on GitHub to use an image for the heading of\nREADME.md and that is not well-supported by Markdown, HTML headings are also\npermitted by this rule. For example:

\n
<h1 align=\"center\"><img src=\"https://placekitten.com/300/150\"/></h1>\n\nThis is a file with a top-level HTML heading\n
\n

Note: The level parameter can be used to change the top-level (ex: to h2) in cases\nwhere an h1 is added externally.

\n

If YAML front matter is present and\ncontains a title property (commonly used with blog posts), this rule will not\nreport a violation. To use a different property name in the front matter,\nspecify the text of a regular expression via the front_matter_title parameter.\nTo disable the use of front matter by this rule, specify \"\" for front_matter_title.

\n

Rationale: The top-level heading often acts as the title of a document. More\ninformation: https://cirosantilli.com/markdown-style-guide#top-level-header.

\n

\n

MD042 - No empty links

\n

Tags: links

\n

Aliases: no-empty-links

\n

This rule is triggered when an empty link is encountered:

\n
[an empty link]()\n
\n

To fix the violation, provide a destination for the link:

\n
[a valid link](https://example.com/)\n
\n

Empty fragments will trigger this rule:

\n
[an empty fragment](#)\n
\n

But non-empty fragments will not:

\n
[a valid fragment](#fragment)\n
\n

Rationale: Empty links do not lead anywhere and therefore don't function as links.

\n

\n

MD043 - Required heading structure

\n

Tags: headings, headers

\n

Aliases: required-headings, required-headers

\n

Parameters: headings, headers (array of string; default null for disabled)

\n
\n

If headings is not provided, headers (deprecated) will be used.

\n
\n

This rule is triggered when the headings in a file do not match the array of\nheadings passed to the rule. It can be used to enforce a standard heading\nstructure for a set of files.

\n

To require exactly the following structure:

\n
# Head\n## Item\n### Detail\n
\n

Set the headings parameter to:

\n
[\n    \"# Head\",\n    \"## Item\",\n    \"### Detail\"\n]\n
\n

To allow optional headings as with the following structure:

\n
# Head\n## Item\n### Detail (optional)\n## Foot\n### Notes (optional)\n
\n

Use the special value \"*\" meaning \"zero or more unspecified headings\" or the\nspecial value \"+\" meaning \"one or more unspecified headings\" and set the\nheadings parameter to:

\n
[\n    \"# Head\",\n    \"## Item\",\n    \"*\",\n    \"## Foot\",\n    \"*\"\n]\n
\n

When an error is detected, this rule outputs the line number of the first\nproblematic heading (otherwise, it outputs the last line number of the file).

\n

Note that while the headings parameter uses the \"## Text\" ATX heading style for\nsimplicity, a file may use any supported heading style.

\n

Rationale: Projects may wish to enforce a consistent document structure across\na set of similar content.

\n

\n

MD044 - Proper names should have the correct capitalization

\n

Tags: spelling

\n

Aliases: proper-names

\n

Parameters: names, code_blocks (string array; default null, boolean; default true)

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when any of the strings in the names array do not have\nthe specified capitalization. It can be used to enforce a standard letter case\nfor the names of projects and products.

\n

For example, the language \"JavaScript\" is usually written with both the 'J' and\n'S' capitalized - though sometimes the 's' or 'j' appear in lower-case. To enforce\nthe proper capitalization, specify the desired letter case in the names array:

\n
[\n    \"JavaScript\"\n]\n
\n

Set the code_blocks parameter to false to disable this rule for code blocks.

\n

Rationale: Incorrect capitalization of proper names is usually a mistake.

\n

\n

MD045 - Images should have alternate text (alt text)

\n

Tags: accessibility, images

\n

Aliases: no-alt-text

\n

This rule is triggered when an image is missing alternate text (alt text) information.

\n

Alternate text is commonly specified inline as:

\n
![Alternate text](image.jpg)\n
\n

Or with reference syntax as:

\n
![Alternate text][ref]\n\n...\n\n[ref]: image.jpg \"Optional title\"\n
\n

Guidance for writing alternate text is available from the W3C,\nWikipedia, and\nother locations.

\n

Rationale: Alternate text is important for accessibility and describes the\ncontent of an image for people who may not be able to see it.

\n

\n

MD046 - Code block style

\n

Tags: code

\n

Aliases: code-block-style

\n

Parameters: style (\"consistent\", \"fenced\", \"indented\"; default \"consistent\")

\n

This rule is triggered when unwanted or different code block styles are used in\nthe same document.

\n

In the default configuration this rule reports a violation for the following document:

\n\n
Some text.\n\n    # Indented code\n\nMore text.\n\n```ruby\n# Fenced code\n```\n\nMore text.\n
\n\n

To fix violations of this rule, use a consistent style (either indenting or code\nfences).

\n

The specified style can be specific (fenced, indented) or simply require\nthat usage be consistent within the document (consistent).

\n

Rationale: Consistent formatting makes it easier to understand a document.

\n

\n

MD047 - Files should end with a single newline character

\n

Tags: blank_lines

\n

Aliases: single-trailing-newline

\n

Fixable: Most violations can be fixed by tooling

\n

This rule is triggered when there is not a single newline character at the end\nof a file.

\n

An example that triggers the rule:

\n
# Heading\n\nThis file ends without a newline.[EOF]\n
\n

To fix the violation, add a newline character to the end of the file:

\n
# Heading\n\nThis file ends with a newline.\n[EOF]\n
\n

Rationale: Some programs have trouble with files that do not end with a newline.\nMore information: https://unix.stackexchange.com/questions/18743/whats-the-point-in-adding-a-new-line-to-the-end-of-a-file.

\n

\n

MD048 - Code fence style

\n

Tags: code

\n

Aliases: code-fence-style

\n

Parameters: style (\"consistent\", \"tilde\", \"backtick\"; default \"consistent\")

\n

This rule is triggered when the symbols used in the document for fenced code\nblocks do not match the configured code fence style:

\n
```ruby\n# Fenced code\n```\n\n~~~ruby\n# Fenced code\n~~~\n
\n

To fix this issue, use the configured code fence style throughout the\ndocument:

\n
```ruby\n# Fenced code\n```\n\n```ruby\n# Fenced code\n```\n
\n

The configured list style can be a specific symbol to use (backtick, tilde), or\ncan require that usage be consistent within the document.

\n

Rationale: Consistent formatting makes it easier to understand a document.

"},{"url":"/docs/reference/notes-template/","relativePath":"docs/reference/notes-template.md","relativeDir":"docs/reference","base":"notes-template.md","name":"notes-template","frontmatter":{"title":"Notes Template","weight":0,"seo":{"title":"Gatsby Plugins For This Sites Content Model","description":"This is my markdown notes tempate","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Gatsby Plugins For This Sites Content Model","keyName":"property"},{"name":"og:description","value":"This is the Gatsby Plugins For This Sites Content Model page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Gatsby Plugins For This Sites Content Model"},{"name":"twitter:description","value":"This is the Gatsby Plugins For This Sites Content Model page"}]},"template":"docs"},"html":"

\n

Title

\n

\"-----------------------------------------------------\"

\n
    \n
  • \n

    Description:

    \n
    \n

    /_ Description here _/

    \n
    \n
    • \n
\n

\"-----------------------------------------------------\"

\n

ToC:

\n\n

\"-----------------------------------------------------\"

\n

Main Notes:

\n
\n

\"-----------------------------------------------------\"

\n

\"-----------------------------------------------------\"

\n

\"-----------------------------------------------------\"

\n

\"-----------------------------------------------------\"

\n

\"-----------------------------------------------------\"

\n

\"-----------------------------------------------------\"

\n

\"-----------------------------------------------------\"

\n

Resource Links:

\n
    \n
    2. \n
    3. \n
    4. \n
    5. \n
    6. \n
    7. \n
\n

\"-----------------------------------------------------\"

\n

10 X 10 Table

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
          
          
          
          
          
          
          
          
          
          
\n\n

Headers

\n
# H1\n## H2\n### H3\n#### H4\n##### H5\n###### H6\n\nAlternatively, for H1 and H2, an underline-ish style:\n\nAlt-H1\n======\n\nAlt-H2\n------\n
\n

H1

\n

H2

\n

H3

\n

H4

\n
H5
\n
H6
\n

Alternatively, for H1 and H2, an underline-ish style:

\n

Alt-H1

\n

Alt-H2

\n\n

Emphasis

\n
Emphasis, aka italics, with *asterisks* or _underscores_.\n\nStrong emphasis, aka bold, with **asterisks** or __underscores__.\n\nCombined emphasis with **asterisks and _underscores_**.\n\nStrikethrough uses two tildes. ~~Scratch this.~~\n
\n

Emphasis, aka italics, with asterisks or underscores.

\n

Strong emphasis, aka bold, with asterisks or underscores.

\n

Combined emphasis with asterisks and underscores.

\n

Strikethrough uses two tildes. Scratch this.

\n\n

Lists

\n

(In this example, leading and trailing spaces are shown with with dots: ⋅)

\n
1. First ordered list item\n2. Another item\n⋅⋅* Unordered sub-list.\n1. Actual numbers don't matter, just that it's a number\n⋅⋅1. Ordered sub-list\n4. And another item.\n\n⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).\n\n⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅\n⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅\n⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)\n\n* Unordered list can use asterisks\n- Or minuses\n+ Or pluses\n
\n
    \n
  1. First ordered list item
    2. \n
  2. Another item
    3. \n
  3. Unordered sub-list.
    4. \n
  4. Actual numbers don't matter, just that it's a number
    5. \n
  5. Ordered sub-list
    6. \n
  6. \n

    And another item.

    \n

    You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

    \n

    To have a line break without a paragraph, you will need to use two trailing spaces.
    \nNote that this line is separate, but within the same paragraph.
    \n(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

    \n
    7. \n
  7. Unordered list can use asterisks
    8. \n
\n\n
    \n
  • Or minuses
    • \n
\n\n
    \n
  • Or pluses
    • \n
\n\n

Links

\n

There are two ways to create links.

\n
[I'm an inline-style link](https://www.google.com)\n\n[I'm an inline-style link with title](https://www.google.com \"Google's Homepage\")\n\n[I'm a reference-style link][Arbitrary case-insensitive reference text]\n\n[I'm a relative reference to a repository file](../blob/master/LICENSE)\n\n[You can use numbers for reference-style link definitions][1]\n\nOr leave it empty and use the [link text itself].\n\nURLs and URLs in angle brackets will automatically get turned into links.\nhttp://www.example.com or <http://www.example.com> and sometimes\nexample.com (but not on Github, for example).\n\nSome text to show that the reference links can follow later.\n\n[arbitrary case-insensitive reference text]: https://www.mozilla.org\n[1]: http://slashdot.org\n[link text itself]: http://www.reddit.com\n
\n

I'm an inline-style link

\n

I'm an inline-style link with title

\n

I'm a reference-style link

\n

I'm a relative reference to a repository file

\n

You can use numbers for reference-style link definitions

\n

Or leave it empty and use the link text itself.

\n

URLs and URLs in angle brackets will automatically get turned into links.\nhttp://www.example.com or http://www.example.com and sometimes\nexample.com (but not on Github, for example).

\n

Some text to show that the reference links can follow later.

\n\n

Images

\n

\n
Here's our logo (hover to see the title text):\n\nInline-style:\n![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png \"Logo Title Text 1\")\n\nReference-style:\n![alt text][logo]\n\n[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png \"Logo Title Text 2\"\n
\n

Here's our logo (hover to see the title text):

\n

Inline-style:\n\"alt

\n

Reference-style:\n\"alt

\n\n

Code and Syntax Highlighting

\n

Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and Markdown Here -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the highlight.js demo page.

\n
Inline `code` has `back-ticks around` it.\n
\n

Inline code has back-ticks around it.

\n

Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.

\n
```javascript\nvar s = \"JavaScript syntax highlighting\";\nalert(s);\n```\n \n```python\ns = \"Python syntax highlighting\"\nprint s\n```\n \n```\nNo language indicated, so no syntax highlighting. \nBut let's throw in a <b>tag</b>.\n```\n
\n
var s = 'JavaScript syntax highlighting';\nalert(s);\n
\n
s = \"Python syntax highlighting\"\nprint s\n
\n
No language indicated, so no syntax highlighting in Markdown Here (varies on Github).\nBut let's throw in a <b>tag</b>.\n
\n\n

Tables

\n

Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.

\n
Colons can be used to align columns.\n\n| Tables        |      Are      |  Cool |\n| ------------- | :-----------: | ----: |\n| col 3 is      | right-aligned | $1600 |\n| col 2 is      |   centered    |   $12 |\n| zebra stripes |   are neat    |    $1 |\n\nThere must be at least 3 dashes separating each header cell.\nThe outer pipes (|) are optional, and you don't need to make the\nraw Markdown line up prettily. You can also use inline Markdown.\n\n| Markdown | Less      | Pretty     |\n| -------- | --------- | ---------- |\n| *Still*  | `renders` | **nicely** |\n| 1        | 2         | 3          |\n
\n

Colons can be used to align columns.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1
\n

There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
MarkdownLessPretty
Stillrendersnicely
123
\n\n

Blockquotes

\n
> Blockquotes are very handy in email to emulate reply text.\n> This line is part of the same quote.\n\nQuote break.\n\n> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.\n
\n
\n

Blockquotes are very handy in email to emulate reply text.\nThis line is part of the same quote.

\n
\n

Quote break.

\n
\n

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

\n
\n\n

Inline HTML

\n

You can also use raw HTML in your Markdown, and it'll mostly work pretty well.

\n
<dl>\n  <dt>Definition list</dt>\n  <dd>Is something people use sometimes.</dd>\n\n  <dt>Markdown in HTML</dt>\n  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>\n</dl>\n
\n
\n
Definition list
\n
Is something people use sometimes.
\n
Markdown in HTML
\n
Does *not* work **very** well. Use HTML tags.
\n
\n\n

Horizontal Rule

\n
Three or more...\n\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#-)\n\nHyphens\n\n***\n\nAsterisks\n\n___\n\nUnderscores\n
\n

Three or more...

\n

\"-----------------------------------------------------\"

\n

Hyphens

\n
\n

Asterisks

\n
\n

Underscores

\n\n

Line Breaks

\n

My basic recommendation for learning how line breaks work is to experiment and discover -- hit <Enter> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. \"Markdown Toggle\" is your friend.

\n

Here are some things to try out:

\n
Here's a line for us to start with.\n\nThis line is separated from the one above by two newlines, so it will be a *separate paragraph*.\n\nThis line is also a separate paragraph, but...\nThis line is only separated by a single newline, so it's a separate line in the *same paragraph*.\n
\n

Here's a line for us to start with.

\n

This line is separated from the one above by two newlines, so it will be a separate paragraph.

\n

This line is also begins a separate paragraph, but...
\nThis line is only separated by a single newline, so it's a separate line in the same paragraph.

\n

(Technical note: Markdown Here uses GFM line breaks, so there's no need to use MD's two-space line breaks.)

\n\n

YouTube Videos

\n

They can't be added directly but you can add an image with a link to the video like this:

\n
<a href=\"http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE\n\" target=\"_blank\"><img src=\"http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg\"\nalt=\"IMAGE ALT TEXT HERE\" width=\"240\" height=\"180\" border=\"10\" /></a>\n
\n

Or, in pure Markdown, but losing the image sizing and border:

\n
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)\n
\n

This is a paragraph. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

\n

This is an H1

\n

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, this is marked text ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.

\n

This is an H2

\n

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

\n

This is an H3

\n

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

\n

This is an H4

\n

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.

\n

Quoting

\n

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

\n
\n

Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep. - Scott Adams

\n
\n

Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

\n
\n

Unordered Lists

\n
    \n
  • Donec non tortor in arcu mollis feugiat
    • \n
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit
    • \n
  • Donec id eros eget quam aliquam gravida
    • \n
  • Vivamus convallis urna id felis
    • \n
  • Nulla porta tempus sapien
    • \n
\n

Ordered Lists

\n
    \n
  1. Donec non tortor in arcu mollis feugiat
    2. \n
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
    3. \n
  3. Donec id eros eget quam aliquam gravida
    4. \n
  4. Vivamus convallis urna id felis
    5. \n
  5. Nulla porta tempus sapien
    6. \n
\n

Video Embeds

\n\n

Code Blocks

\n

Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces.

\n
<!-- Some example CSS code -->\nbody {\n  color:red;\n}\n
\n
window.$docsify = {\n    coverpage: true,\n\n    // Custom file name\n    coverpage: 'cover.md',\n\n    // mutiple covers\n    coverpage: ['/', '/zh-cn/'],\n\n    // mutiple covers and custom file name\n    coverpage: {\n        '/': 'cover.md',\n        '/zh-cn/': 'cover.md'\n    }\n};\n
\n

Tables

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Table with thead, tfoot, and tbody
Header content 1Header content 2
Body content 1Body content 2
Footer content 1Footer content 2
\n
\n
Note: Both of the features you used above are parts of the Document Object Model (DOM) API, which allows you to manipulate documents.
\n
Important: In this article, try entering the example code lines into your JavaScript console to see what happens. For more details on JavaScript consoles, see Discover browser developer tools.
"},{"url":"/docs/tips/array-methods/","relativePath":"docs/tips/array-methods.md","relativeDir":"docs/tips","base":"array-methods.md","name":"array-methods","frontmatter":{"title":"Tips","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Lorem ipsum

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

\n
    \n
  • Lorem ipsum
    • \n
  • dolor sit amet
    • \n
"},{"url":"/docs/reference/resources/","relativePath":"docs/reference/resources.md","relativeDir":"docs/reference","base":"resources.md","name":"resources","frontmatter":{"title":"Developer Resources","weight":0,"excerpt":"Developer Resources","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Web Dev Resources

\n
\"Photo
Photo by Roman Synkevych on Unsplash
### Web Development\n\n

JavaScript

\n\n

GIT

\n\n

Express

\n\n

Node.js

\n\n

Study Guides

\n\n

React

\n\n

Redux

\n\n

Redux Middleware

\n\n

Command Line

\n
    \n
  • Useful commands
    • \n
  • Get your IP address in Mac OSX/Unix: ifconfig | grep 'inet '
    • \n
\n

Atom

\n\n

VS Code

\n\n

Sublime

\n\n

Whiteboard Interviews

\n\n

Here's a repo where I hoard resource lists!

\n

bgoonz/Cumulative-Resource-List
\nInspired by Awesome Lists. Contribute to bgoonz/Cumulative-Resource-List development by creating an account on GitHub.github.com

\n

MOAR!

\n
- Ansible\n- Awesome Lists\n- CI/CD\n- Data Science\n- Docker\n- DynamoDB\n- Elasticsearch\n- Environment Setups\n- Epic Github Repos\n- Golang\n- Grafana\n- Great Blogs\n- Knowledge Base\n- Kubernetes\n- Kubernetes Storage\n- Machine Learning\n- Monitoring\n- MongoDB\n- Programming\n- Queues\n- Self Hosting\n- Email Server Setups\n- Mailscanner Server Setups\n- Serverless\n- Sysadmin References\n- VPN\n- Web Frameworks\n

Ansible

\n\n

Awesome Lists

\n\n

Epic Github Repos

\n\n

Authentication

\n\n

Data Science

\n\n

Grafana

\n\n

Docker

\n

Deploy Stacks to your Swarm: 🐳 ❤️

\n

Logging:

\n\n

Metrics:

\n\n

Awesome Docker Repos

\n\n

RaspberryPi ARM Images:

\n\n

Docker Image Repositories

\n\n

Docker-Awesome-Lists

\n\n

Docker Blogs:

\n\n

Docker Storage

\n\n

OpenFaas:

\n\n

Prometheus / Grafana on Swarm:

\n\n

Logging / Kibana / Beats

\n

Libraries

\n\n

Frameworks

\n\n

Continious Integration:

\n

Circle-CI

\n\n

Concourse

\n\n

Jenkins

\n\n

SwarmCi

\n\n

Travis-CI

\n\n

LambCI

\n\n

DynamoDB

\n

DynamoDB Docs

\n\n

DynamoDB Best Practices

\n\n

DynamoDB General Info

\n\n

Elasticsearch

\n

Elasticsearch Documentation

\n\n

Elasticsearch Cheetsheets:

\n\n

Elasticsearch Blogs

\n\n

Elasticsearch Tools

\n\n

Environment Setups:

\n\n

Knowledge Base

\n

KB HTTPS

\n\n

Kubernetes

\n\n

Kubernetes Storage

\n\n

Golang

\n\n

Great Blogs

\n\n

Linuxkit:

\n\n

Logging Stacks

\n\n

Machine Learning:

\n\n

Metrics:

\n\n

MongoDB:

\n\n

Monitoring

\n\n

Monitoring and Alerting

\n\n

Monitoring as Statuspages

\n\n

Programming

\n

Golang:

\n\n

Java:

\n\n

Python

\n

Ruby:

\n\n

Ruby on Rails:

\n\n

Queues

\n\n

Sysadmin References:

\n\n

Self Hosting

\n

Email Server Setups

\n\n

Mailscanner Server Setups

\n\n

Financial

\n\n

Self Hosting Frameworks:

\n\n

Serverless

\n\n

VPN:

\n

VPN-Howto:

\n\n

Website Templates

\n

Resume Templates

\n\n

Web Frameworks

\n

Python Flask:

\n\n

If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:

\n

bgoonz's gists
\nInstantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…gist.github.com

\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

\n

Ada

\n\n

Android

\n\n

Bash

\n\n

C

\n\n

C Sharp

\n\n

C++

\n\n

Clojure

\n\n

Cloud Computing

\n\n

CoffeeScript

\n\n

Dart

\n\n

Erlang

\n\n

Git

\n\n

GLSL

\n\n

Go

\n\n

Haskell

\n\n

HTML / CSS

\n\n

Bootstrap

\n\n

Java

\n\n

JavaScript

\n\n

Angular.js

\n\n

jQuery

\n\n

React

\n\n

Kotlin

\n\n

Language Agnostic

\n\n

Operating systems

\n\n

LaTeX

\n\n

Lisp

\n\n

MATLAB

\n\n

Node

\n\n

NoSQL

\n\n

Objective-C

\n\n

Ocaml

\n\n

PHP

\n\n

PostgreSQL

\n\n

Python

\n\n

Ruby

\n\n

Rust

\n\n

Scala

\n\n

Selenium

\n\n

SQL

\n\n

Vim

\n"},{"url":"/docs/reference/vscode/","relativePath":"docs/reference/vscode.md","relativeDir":"docs/reference","base":"vscode.md","name":"vscode","frontmatter":{"title":"vscode","weight":0,"seo":{"title":"vscode","description":"This is the vscode page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"vscode","keyName":"property"},{"name":"og:description","value":"This is the vscode page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"vscode"},{"name":"twitter:description","value":"This is the vscode page"}]},"template":"docs"},"html":"

Everything You Need to Get Started With VSCode + Extensions & Resources

\n

Commands:

\n
\n

Everything You Need to Get Started With VSCode + Extensions & Resources

\n

Every extension or tool you could possibly need

\n
\n

Here's a rudimentary static site I made that goes into more detail on the extensions I use…

\n

VSCodeExtensions
\n5fff5b9a2430bb564bfd451d--stoic-mccarthy-2c335f.netlify.app

\n

Here's the repo it was deployed from:

\n

https://github.com/bgoonz/vscode-Extension-readmes

\n
\n

Commands:

\n
\n

Command Palette

\n
\n
\n

Access all available commands based on your current context.

\n
\n
\n

Keyboard Shortcut: Ctrl+Shift+P

\n
\n
### Command palette\n

⇧⌘P Show all commands ⌘P Show files

\n

Sidebars

\n

⌘B Toggle sidebar ⇧⌘E Explorer ⇧⌘F Search ⇧⌘D Debug ⇧⌘X Extensions ⇧^G Git (SCM)

\n

Search

\n

⌘F Find ⌥⌘F Replace ⇧⌘F Find in files ⇧⌘H Replace in files

\n

Panel

\n

⌘J Toggle panel ⇧⌘M Problems ⇧⌘U Output ⇧⌘Y Debug console ^` Terminal

\n

View

\n

⌘k z Zen mode ⌘k u Close unmodified ⌘k w Close all

\n

Debug

\n

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

\n
\n
\n

Tips-N-Tricks:

\n

Here is a selection of common features for editing code. If the keyboard shortcuts aren't comfortable for you, consider installing a keymap extension for your old editor.

\n

Tip: You can see recommended keymap extensions in the Extensions view with Ctrl+K Ctrl+M which filters the search to @recommended:keymaps .

\n

Multi cursor selection

\n

To add cursors at arbitrary positions, select a position with your mouse and use Alt+Click (Option+click on macOS).

\n

To set cursors above or below the current position use:

\n

Keyboard Shortcut: Ctrl+Alt+Up or Ctrl+Alt+Down

\n
You can add additional cursors to all occurrences of the current selection with Ctrl+Shift+L.\n
*Note: You can also change the modifier to Ctrl/Cmd for applying multiple cursors with the* `editor.multiCursorModifier` setting* . See* Multi-cursor Modifier *for details.*\n

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.

\n
### Column (box) selection\n

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.

\n
You can also use keyboard shortcuts to trigger column selection.\n
\n

Extensions:

\n

AutoHotkey Plus

\n
\n

Syntax Highlighting, Snippets, Go to Definition, Signature helper and Code formatter

\n
\n

Bash Debug

\n
\n

A debugger extension for Bash scripts based on bashdb

\n
\n
### Shellman\n
\n

Bash script snippets extension

\n
\n
### C++\n
\n

C/C++ — Preview C/C++ extension by Microsoft, read official blog post for the details

\n
\n
\n

Clangd — 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.

\n
\n
\n

gnu-global-tags — Provide Intellisense for C/C++ with the help of the GNU Global tool.

\n
\n
\n

YouCompleteMe — Provides semantic completions for C/C++ (and TypeScript, JavaScript, Objective-C, Golang, Rust) using YouCompleteMe.

\n
\n
\n

C/C++ Clang Command Adapter — Completion and Diagnostic for C/C++/Objective-C using Clang command.

\n
\n
\n

CQuery — C/C++ language server supporting multi-million line code base, powered by libclang. Cross references, completion, diagnostics, semantic highlighting and more.

\n
\n

More

\n\n

C#, ASP . NET and . NET Core

\n
\n

C# — C# extension by Microsoft, read official documentation for the details

\n
\n
\n

C# FixFormat — Fix format of usings / indents / braces / empty lines

\n
\n
\n

C# Extensions — Provides extensions to the IDE that will speed up your development workflow.

\n
\n
\n

MSBuild Project Tools

\n
\n
\n

VSCode Solution Explorer

\n
\n
\n

. NET Core Test Explorer

\n
\n
\n
\n

CSS

\n

CSS Peek

\n
\n

Peek or Jump to a CSS definition directly from HTML, just like in Brackets!

\n
\n
- stylelint — Lint CSS/SCSS.\n
    \n
  • Autoprefixer Parse CSS, SCSS, LESS and add vendor prefixes automatically.
    • \n
\n
- Intellisense for CSS class names — Provides CSS class name completion for the HTML class attribute based on the CSS files in your workspace. Also supports React's className attribute.\n
### Groovy\n\n
### Haskell\n\n
\n

Java

\n\n
\n

JavaScript

\n\n
See the difference between these two here\n
\n

tslint — TSLint for Visual Studio Code (with \"tslint.jsEnable\": true ).

\n
\n
\n

eslint — Linter for eslint.

\n
\n
\n

XO — Linter for XO.

\n
\n
\n

AVA — Snippets for AVA.

\n
\n
\n

Prettier — Linter, Formatter and Pretty printer for Prettier.

\n
\n
\n

Schema.org Snippets — Snippets for Schema.org.

\n
\n
\n

Code Spell Checker — Spelling Checker for Visual Studio Code.

\n
\n

Framework-specific:

\n

Vetur — Toolkit for Vue.js

\n
\n
\n

Debugger for Chrome

\n
\n

A VS Code extension to debug your JavaScript code in the Chrome browser, or other targets that support the Chrome Debugging Protocol.

\n
\n

Facebook Flow

\n
    \n
  • Flow Language Support — provides all the functionality you would expect — linting, intellisense, type tooltips and click-to-definition
    • \n
  • vscode-flow-ide — an alternative Flowtype extension for Visual Studio Code
    • \n
\n

TypeScript

\n
    \n
  • tslint — TSLint for Visual Studio Code
    • \n
  • TypeScript Hero — Code outline view of your open TS, sort and organize your imports.
    • \n
\n
\n

Markdown

\n

markdownlint

\n
\n

Linter for markdownlint.

\n
\n

Markdown All in One

\n
\n

All-in-one markdown plugin (keyboard shortcuts, table of contents, auto preview, list editing and more)

\n
\n
### Markdown Emoji\n
\n

Adds emoji syntax support to VS Code's built-in Markdown preview

\n
\n
\n
\n

PHP

\n

IntelliSense

\n

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.

\n\n

Laravel

\n\n
- Laravel Model Snippets — Quickly get models up and running with Laravel Model Snippets.\n
- Laravel Artisan — Laravel Artisan commands within Visual Studio Code\n
- DotENV — Support for dotenv file syntax\n
\n
\n

Other extensions

\n
    \n
  • Format HTML in PHP — Formatting for the HTML in PHP files. Runs before the save action so you can still have a PHP formatter.
    • \n
\n
- Composer\n
    \n
  • PHP Debug — XDebug extension for Visual Studio Code
    • \n
  • PHP DocBlocker
    • \n
  • php cs fixer — PHP CS Fixer extension for VS Code, php formatter, php code beautify tool
    • \n
  • phpcs — PHP CodeSniffer for Visual Studio Code
    • \n
  • phpfmt — phpfmt for Visual Studio Code
    • \n
\n
\n

Python

\n
    \n
  • Python — Linting, Debugging (multi threaded, web apps), Intellisense, auto-completion, code formatting, snippets, unit testing, and more.
    • \n
\n

TensorFlow

\n
    \n
  • TensorFlow Snippets — This extension includes a set of useful code snippets for developing TensorFlow models in Visual Studio Code.
    • \n
\n
\n
\n

Rust

\n
    \n
  • Rust — Linting, auto-completion, code formatting, snippets and more
    • \n
\n
\n

Productivity

\n

ARM Template Viewer

\n
\n

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.

\n
\n
### Azure Cosmos DB\n
\n

Browse your database inside the vs code editor

\n
\n
### Azure IoT Toolkit\n
\n

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

\n
\n
### Bookmarks\n
\n

Mark lines and jump to them

\n
\n

Color Tabs

\n
\n

An extension for big projects or monorepos that colors your tab/titlebar based on the current package

\n
\n
### Create tests\n
\n

An extension to quickly generate test files.

\n
\n
### Deploy\n
\n

Commands for upload or copy files of a workspace to a destination.

\n
\n
### Duplicate Action\n
\n

Ability to duplicate files and directories.

\n
\n

Error Lens

\n
\n

Show language diagnostics inline (errors/warnings/…).

\n
\n
### ES7 React/Redux/GraphQL/React-Native snippets\n
\n

Provides Javascript and React/Redux snippets in ES7

\n
\n
### Gi\n
\n

Generating .gitignore files made easy

\n
\n
### GistPad\n
\n

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.

\n
\n
### Git History\n
\n

View git log, file or line History

\n
\n

Git Project Manager

\n
\n

Automatically indexes your git projects and lets you easily toggle between them

\n
\n

GitLink

\n
\n

GoTo current file's online link in browser and Copy the link in clipboard.

\n
\n
### GitLens\n
\n

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.

\n
\n
### Git Indicators\n
\n

Atom-like git indicators on active panel

\n
\n
### GitHub\n
\n

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 README.md on how to get started with the setup for this extension.

\n
\n

GitHub Pull Request Monitor

\n
\n

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.

\n
\n
### GitLab Workflow\n
\n

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._

\n
\n

Gradle Tasks

\n
\n

Run gradle tasks in VS Code.

\n
\n
### Icon Fonts\n
\n

Snippets for popular icon fonts such as Font Awesome, Ionicons, Glyphicons, Octicons, Material Design Icons and many more!

\n
\n

Import Cost

\n
\n

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.

\n
\n

Jira and Bitbucket

\n
\n

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!

\n
\n
### JS Parameter Annotations\n
\n

Provides annotations on function calls in JS/TS files to provide parameter names to arguments.

\n
\n
### Jumpy\n
\n

Provides fast cursor movement, inspired by Atom's package of the same name.

\n
\n
### Kanban\n
*Simple Kanban board for use in Visual Studio Code, with time tracking and Markdown support.*\n

Live Server

\n
\n

Launch a development local Server with live reload feature for static & dynamic pages.

\n
\n
### Multiple clipboards\n
\n

Override the regular Copy and Cut commands to keep selections in a clipboard ring

\n
\n

ngrok for VSCode

\n
\n

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 ngrok from the VSCode command palette

\n
\n
### Instant Markdown\n
\n

Simply, edit markdown documents in vscode and instantly preview it in your browser as you type.

\n
\n
### npm Intellisense\n
\n

Visual Studio Code plugin that autocompletes npm modules in import statements.

\n
\n
### Parameter Hints\n
\n

Provides parameter hints on function calls in JS/TS/PHP files.

\n
\n
### Partial Diff\n
\n

Compare (diff) text selections within a file, across different files, or to the clipboard

\n
\n
### Paste JSON as Code\n
\n

Infer the structure of JSON and paste is as types in many programming languages

\n
\n
### Path IntelliSense\n
\n

Visual Studio Code plugin that autocompletes filenames

\n
\n
### Power Tools\n
\n

Extends Visual Studio Code via things like Node.js based scripts or shell commands, without writing separate extensions

\n
\n
### PrintCode\n
\n

PrintCode converts the code being edited into an HTML file, displays it by browser and prints it.

\n
\n
### Project Manager\n
\n

Easily switch between projects.

\n
\n

Project Dashboard

\n
\n

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.

\n
\n
### Rainbow CSV\n
\n

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.

\n
\n
### Remote Development\n
\n

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.

\n
\n
### Remote VSCode\n
\n

Allow user to edit files from Remote server in Visual Studio Code directly.

\n
\n

REST Client

\n
\n

Allows you to send HTTP request and view the response in Visual Studio Code directly.

\n
\n
### Settings Sync\n
\n

Synchronize settings, snippets, themes, file icons, launch, key bindings, workspaces and extensions across multiple machines using GitHub Gist

\n
\n
### Text Power Tools\n
\n

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.

\n
\n
### Todo Tree\n
\n

Custom keywords, highlighting, and colors for TODO comments. As well as a sidebar to view all your current tags.

\n
\n
### Toggle Quotes\n
\n

Cycle between single, double and backtick quotes

\n
\n
### Typescript Destructure\n
\n

TypeScript Language Service Plugin providing a set of source actions for easy objects destructuring

\n
\n
### WakaTime\n
\n

Automatic time tracker and productivity dashboard showing how long you coded in each project, file, branch, and language.

\n
\n
\n

Formatting & Beautification

\n

Better Align

\n
\n

Align your code by colon(:), assignment(=, +=, -=, *=, /=) and arrow(=> ). It has additional support for comma-first coding style and trailing comment.

\n
\n
\n

And it doesn't require you to select what to be aligned, the extension will figure it out by itself.

\n
\n
### Auto Close Tag\n
\n

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text

\n
\n
### Auto Rename Tag\n
\n

Auto rename paired HTML/XML tags

\n
\n
### beautify\n
\n

Beautify code in place for VS Code

\n
\n

html2pug

\n
\n

Transform html to pug inside your Visual Studio Code, forget about using an external page anymore.

\n
\n

ECMAScript Quotes Transformer

\n
\n

Transform quotes of ECMAScript string literals

\n
\n
### Paste and Indent\n
\n

Paste code with “correct” indentation

\n
\n

Sort Lines

\n
\n

Sorts lines of text in specific order

\n
\n
### Surround\n
\n

A simple yet powerful extension to add wrapper templates around your code blocks.

\n
\n
### Wrap Selection\n
\n

Wraps selection or multiple selections with symbol or multiple symbols

\n
\n

Formatting Toggle

\n
\n

Allows you to toggle your formatter on and off with a simple click

\n
\n

Bracket Pair Colorizer

\n
\n

This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.

\n
\n
### Auto Import\n
\n

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

\n
\n

shell-format

\n
\n

shell script & Dockerfile & dotenv format

\n
\n
### Vscode Google Translate\n
\n

Quickly translate selected text right in your code

\n
\n
### Explorer Icons\n

Material Icon Theme

\n
### Uncategorized\n

Browser Preview

\n
\n

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!

\n
\n
\n

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.

\n
\n
### CodeRoad\n
\n

Play interactive tutorials in your favorite editor.

\n
\n
### Code Runner\n
\n

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

\n
\n
### Code Time\n
\n

Automatic time reports by project and other programming metrics right in VS Code.

\n
\n
### Color Highlight\n
\n

Highlight web colors in your editor

\n
\n
### Output Colorizer\n
\n

Syntax highlighting for the VS Code Output Panel and log files

\n
\n
### Dash\n
\n

Dash integration in Visual Studio Code

\n
\n
### Edit with Shell Command\n
\n

Leverage your favourite shell commands to edit text

\n
\n
### Editor Config for VS Code\n
\n

Editor Config for VS Code

\n
\n

ftp-sync

\n
\n

Auto-sync your work to remote FTP server

\n
\n
### Highlight JSX/HTML tags\n
\n

Highlights matching tags in the file.

\n
\n

Indent Rainbow

\n
\n

A simple extension to make indentation more readable.

\n
\n
### Password Generator\n
\n

Create a secure password using our generator tool. Help prevent a security threat by getting a strong password today.

\n
\n
### PlatformIO\n
\n

An open source ecosystem for IoT development: supports 350+ embedded boards, 20+ development platforms, 10+ frameworks. Arduino and ARM mbed compatible.

\n
\n
### Polacode\n
\n

Polaroid for your code 📸.

\n
\n
\n

Note: Polacode no longer works as of the most recent update… go for Polacode2020 or CodeSnap…

\n
\n
### Quokka\n

This one is super cool!

\n
\n

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.

\n
\n
### Slack\n
\n

Send messages and code snippets, upload files to Slack

\n
\n

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

\n
### Spotify\n

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.

\n
\n

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.

\n
\n
### SVG\n
\n

A Powerful SVG Language Support Extension(beta). Almost all the features you need to handle SVG.

\n
\n
### SVG Viewer\n
\n

View an SVG in the editor and export it as data URI scheme or PNG.

\n
\n

Text Marker (Highlighter)

\n
\n

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.

\n
\n
### ESDOC MDN\n

THIS IS A MUST HAVE

\n
\n

Quickly bring up helpful MDN documentation in the editor

\n
\n
### Themes:\n

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!

\n

My Favorite VSCode Themes
\nThemesbryanguner.medium.com

\n
\n

If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:

\n

bgoonz's gists
\nInstantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…gist.github.com

\n

bgoonz — Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com

\n

Or Checkout my personal Resource Site:

\n

Web-Dev-Resource-Hub
\nEdit descriptionweb-dev-resource-hub.netlify.app

\n

By Bryan Guner on March 18, 2021.

\n

Canonical link

\n

Exported from Medium on May 23, 2021.

"},{"url":"/docs/tips/","relativePath":"docs/tips/index.md","relativeDir":"docs/tips","base":"index.md","name":"index","frontmatter":{"title":"Tips","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Lorem ipsum

"},{"url":"/docs/tips/regex-tips/","relativePath":"docs/tips/regex-tips.md","relativeDir":"docs/tips","base":"regex-tips.md","name":"regex-tips","frontmatter":{"title":"Regex Tricks","weight":0,"excerpt":"Regex Tricks","seo":{"title":"Regex Tricks","description":"Regular expressions make light work of single-character delimiters, which is why it’s so easy to remove markup from a string:","robots":[],"extra":[]},"template":"docs"},"html":"

Regular expressions make light work of single-character delimiters, which is why it’s so easy to remove markup from a string:

\n
str = str.replace(/(<[\\/]?[^>]+>)/g, '');\n
\n

It’s the negation in the character class that does the real work:

\n
[^>]\n
\n

Which means “anything except <“. So the expression looks for the starting tag-delimiter and possible slash, then anything except the closing tag-delimiter, and then the delimiter itself. Easy.

\n

However comments are not so simple, because comment delimiters are comprised of more than one character. Multi-line comments in CSS and JavaScript, for example, start with /* and end with */, but between those two delimiters there could be any number of unrelated stars.

\n

I often use multiple stars in comments, to indicate the severity of a bug I’ve just noticed, for example:

\n
/*** this is a bug with 3-star severity ***/\n
\n

But if we tried to parse that with a single negation character, it would fail:

\n
str = str.replace(/(\\/\\*[^\\*]+\\*\\/)/g, '');\n
\n

Yet it’s not possible with regular expressions to say: “anything except [this sequence of characters]”, we can only say: “anything except [one of these single characters]”.

\n

So here’s the regular expression we need instead:

\n
str = str.replace(/(\\/\\*([^*]|(\\*+[^*\\/]))*\\*+\\/)/gm, '');\n
\n

The expression handles unrelated characters by looking at what comes after them — stars are allowed as long as they’re not followed by a slash, until we find one that is, and that’s the end of the comment.

\n

So it says: “/ then * (then anything except * OR any number of * followed by anything except /)(and any number of instances of that) then any number of * then /“.

\n

(The syntax looks particular convoluted, because * and / are both special characters in regular expressions, so the ambiguous literal ones have to be escaped. Also note the m flag at the end of the expression, which means multi-line, and specifies that the regular expression should search across more than one line of text.)

\n

Using the same principle then, we can adapt the expression to search for any kind of complex delimiters. Here’s another one that matches HTML comments:

\n
str = str.replace(/(<!\\-\\-([^\\-]|(\\-+[^>]))*\\-+>)/gm, '');\n
\n

And here’s one for CDATA sections:

\n
str = str.replace(/(<\\!\\[CDATA\\[([^\\]]|(\\]+[^>]))*\\]+>)/gm, '');\n
\n

2. Using Replacement Callbacks

\n

The replace function can also be passed a callback as its second parameter, and this is invaluable in cases where the replacement you want can’t be described in a simple expression. For example:

\n
isocode = isocode.replace(/^([a-z]+)(\\-[a-z]+)?$/i, \n  function(match, lang, country)\n  {\n    return lang.toLowerCase() \n      + (country ? country.toUpperCase() : '');\n  });\n
\n

That example normalizes the capitalisation in language codes — so \"EN\" would become \"en\", while \"en-us\" would become \"en-US\".

\n

The first argument that’s passed to the callback is always the complete match, then each subsequent argument corresponds with the backreferences (i.e. arguments[1] is what a string replacement would refer to as $1, and so on).

\n

So taking \"en-us\" as the input, we’d get the three arguments:

\n
    \n
  1. \"en-us\"
    2. \n
  2. \"en\"
    3. \n
  3. \"-us\"
    4. \n
\n

Then all the function has to do is enforce the appropriate cases, re-combine the parts and return them. Whatever the callback returns is what the replacement itself returns.

\n

But we don’t actually have to assign the return value (or return at all), and if we don’t, then the original string will be unaffected. This means we can use replace as a general-purpose string processor — to extract data from a string without changing it.

\n

Here’s another example, that combines the multi-line comment expression from the previous section, with a callback that extracts and saves the text of each comment:

\n
let comments = [];\nstr.replace(/(\\/\\*([^*]|(\\*+[^*\\/]))*\\*+\\/)/gm, \n  function(match)\n  {\n    comments.push(match);\n  });\n
\n

Since nothing is returned, the original string remains unchanged. Although if we wanted to extract and remove the comments, we could simply return and assign an empty-string:

\n
let comments = [];\nstr = str.replace(/(\\/\\*([^*]|(\\*+[^*\\/]))*\\*+\\/)/gm, \n  function(match)\n  {\n    comments.push(match);\n    return '';\n  });\n
\n

3. Working With Invisible Delimiters

\n

Extracting content is all very well when it uses standard delimiters, but what if you’re using custom delimiters that only your program knows about? The problem there is that the string might already contain your delimiter, literally character for character, and then what do you?

\n

Well, recently I came up with a very cute trick, that not only avoids this problem, it’s also as simple to use as the single-character class we saw at the start! The trick is to use unicode characters that the document can’t contain.

\n

Originally I tried this with undefined characters, and that certainly worked, but it’s not safe to assume that any such character will always be undefined (or that the document won’t already contain it anyway). Then I discovered that Unicode actually reserves a set of code-points specifically for this kind of thing — so-called noncharacters, which will never be used to define actual characters. A valid Unicode document is not allowed to contain noncharacters, but a program can use them internally for its own purposes.

\n

I was working on CSS processor, and I needed to remove all the comments before parsing the selectors, so they wouldn’t confuse the selector-matching expressions. But they had to be replaced in the source with something that took up the same number of lines, so that the line-numbers would remain accurate. Then later they would have to be added back to the source, for final output.

\n

So first we use a regex callback to extract and save the comments. The callback returns a copy of the match in which all non-whitespace is converted to space, and which is delimited with a noncharacter either side:

\n
let comments = [];\ncsstext = csstext.replace(/(\\/\\*([^*]|(\\*+([^*\\/])))*\\*+\\/)/gm, \n  function(match)\n  {\n    comments.push(match);\n    return '\\ufddf' + match.replace(/[\\S]/gim, ' ') + '\\ufddf';\n  });\n
\n

That creates an array of comments in the same source-order as the spaces they leave behind, while the spaces themselves take-up as many lines as the original comment.

\n

Then the originals can be restored simply by replacing each delimited space with its corresponding saved comment — and since the delimiters are single characters, we only need a simple character class to match each pair:

\n
csstext = csstext.replace(/(\\ufddf[^\\ufddf]+\\ufddf)/gim, \n  function()\n  {\n    return comments.shift();\n  });\n
\n

How easy is that!

"},{"url":"/docs/tips/insert-into-array/","relativePath":"docs/tips/insert-into-array.md","relativeDir":"docs/tips","base":"insert-into-array.md","name":"insert-into-array","frontmatter":{"title":"Insert Into Array","weight":0,"excerpt":"Insert Into Array","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Insert Into Array

\n

We have some in-built methods to add at elements at the beginning and end of the array.

\n

push(value) → Add an element to the end of the array.

\n

unshift(value) → Add an element to the beginning of an array.

\n

To add an element to the specific index there is no method available in Array object. But we can use already available splice method in Array object to achieve this.

\n

An array starts from index 0 ,So if we want to add an element as first element of the array , then the index of the element is 0 .If we want to add an element to nth position , then the index is (n-1) th index.

\n

MDN : The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements, in the original array(which means the source array is modified)

\n

splice() method takes three argument

\n
    \n
  1. *start** → *The index at which to start changing the array.
    2. \n
  2. *deleteCount(optional) → *An integer indicating the number of elements in the array to remove from start.
    3. \n
  3. *(elem1, elem2 ...) → *The elements to add to the array, beginning from start. If you do not specify any elements, splice() will only remove elements from the array.
    4. \n
\n

In order to insert an element to the specific index , we need to provide arguments as

\n
    \n
  1. start → index where to insert the element
    2. \n
  2. deleteCount → 0 (because we don't need to delete element)
    3. \n
  3. elem → elements to insert
    4. \n
\n

Let's Write the function
\nfunction insertAt(array, index, ...elementsArray) { array.splice(index, 0, ...elements);}

\n

Now Let's call the function

\n

var num = [1,2,3,6,7,8];/*
\narguments\\

\n
    \n
  • \n
      \n
    1. source array - num\\
      2. \n
    \n
    • \n
  • \n
      \n
    1. index to insert - 3\\
      2. \n
    \n
    • \n
  • \n
      \n
    1. remaining are elements to insert
      \n*/insertAt(num, 3, 4, 5); // [1,2,3,4,5,6,7,8]____// let's try changing the indexvar num = [1,2,3,6,7,8];insertAt(numbers, 2, 4,5); // [1,2,4,5,3,6,7,8]
      2. \n
    \n
    • \n
"},{"url":"/docs/tips/sorting-strings/","relativePath":"docs/tips/sorting-strings.md","relativeDir":"docs/tips","base":"sorting-strings.md","name":"sorting-strings","frontmatter":{"title":"Sorting Strings","weight":0,"excerpt":"Sorting Strings","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Javascript has a native method sort that allows sorting arrays. Doing a simple array.sort() will treat each array entry as a string and sort it alphabetically. Also you can provide your own custom sorting function.

\n
['Shanghai', 'New York', 'Mumbai', 'Buenos Aires'].sort();\n// [\"Buenos Aires\", \"Mumbai\", \"New York\", \"Shanghai\"]\n
\n

But when you try order an array of non ASCII characters like this ['é', 'a', 'ú', 'c'], you will obtain a strange result ['c', 'e', 'á', 'ú']. That happens because sort works only with the English language.

\n

See the next example:

\n
// Spanish\n['único', 'árbol', 'cosas', 'fútbol'].sort();\n// [\"cosas\", \"fútbol\", \"árbol\", \"único\"] // bad order\n\n// German\n['Woche', 'wöchentlich', 'wäre', 'Wann'].sort();\n// [\"Wann\", \"Woche\", \"wäre\", \"wöchentlich\"] // bad order\n
\n

Fortunately, there are two ways to overcome this behavior localeCompare and Intl.Collator provided by ECMAScript Internationalization API.

\n
\n

Both methods have their own custom parameters in order to configure it to work adequately.

\n
\n

Using localeCompare()

\n
['único', 'árbol', 'cosas', 'fútbol'].sort(function (a, b) {\n    return a.localeCompare(b);\n});\n// [\"árbol\", \"cosas\", \"fútbol\", \"único\"]\n\n['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) {\n    return a.localeCompare(b);\n});\n// [\"Wann\", \"wäre\", \"Woche\", \"wöchentlich\"]\n
\n

Using Intl.Collator()

\n
['único', 'árbol', 'cosas', 'fútbol'].sort(Intl.Collator().compare);\n// [\"árbol\", \"cosas\", \"fútbol\", \"único\"]\n\n['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare);\n// [\"Wann\", \"wäre\", \"Woche\", \"wöchentlich\"]\n
\n
    \n
  • For each method you can customize the location.
    • \n
  • According to Firefox Intl.Collator is faster when comparing large numbers of strings.
    • \n
\n

So when you are working with arrays of strings in a language other than English, remember to use this method to avoid unexpected sorting.

"},{"url":"/docs/tools/dev-utilities/","relativePath":"docs/tools/dev-utilities.md","relativeDir":"docs/tools","base":"dev-utilities.md","name":"dev-utilities","frontmatter":{"title":"General Utilities","weight":0,"excerpt":"General Utilities","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

General Utilities

\n
\n
\n
\n

Semvar Checker

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Photo Editor

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

Github HTML Render from link

\n
\n\n
\n
\n
\n
\n
\n
\n

Form Builder GUI

\n
\n\n
\n
\n
\n

Border Builder

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

Archives

\n
\n
\n
\n

Original Blog Site

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Ternary Converter

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n"},{"url":"/docs/tools/archive/","relativePath":"docs/tools/archive.md","relativeDir":"docs/tools","base":"archive.md","name":"archive","frontmatter":{"title":"Archive","weight":0,"excerpt":"more tools that I have created or collaborated on.","seo":{"title":"Embed Archive","description":"embeded developer tools and utilities","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Archive

\n\n
\n
\n
\n

Archive

\n
\n\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n

Resource Archive

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Google Drive

\n\n
\n
\n
\n
\n
\n

Cloud Storage

\n
\n

Up to 1TB of cloud Storage for file sharing!

\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Internet Archive

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n

Lambda Student Site

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Bass Station CSS Showcase

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Interview

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Speach Recognition api

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

The Algos Bgoonz Branch

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Markdown Templates

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

CURL

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n

Text Tools

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Ternary Converter

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Github HTML Render from link

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Form Builder GUI

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n

Border Builder

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Archives

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Original Blog Site

\n
\n
\n
\n
\n\n
\n
\n
\n
"},{"url":"/docs/tools/","relativePath":"docs/tools/index.md","relativeDir":"docs/tools","base":"index.md","name":"index","frontmatter":{"title":"Tools","excerpt":"See some interesting tools developed by the Web-Dev-Hubcommunity to help automate parts of your workflow.","seo":{"title":"Tools","description":"paste to markdown, excel table to markdown, excel to html, cloud storage, text manipulation, ternary converter, github html preview, form builder, border","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Tools","keyName":"property"},{"name":"og:description","value":"paste to markdown, excel table to markdown, excel to html, cloud storage, text manipulation, ternary converter, github html preview, form builder, border","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Tools"},{"name":"twitter:description","value":"This is the tools page"},{"name":"og:image","value":"images/tex.PNG","keyName":"property","relativeUrl":true}]},"template":"docs"},"html":"
\n
\n

Markdown tools

\n
\n\n\n
\n
\n
\n
\n
\n

PDF Tools

\n
\n\n
\n
\n
\n
\n
\n

React Calculator

\n
\n\n \n
\n
\n
\n
\n
\n

Number Base Converter

\n
\n\n \n
\n
\n

Text Tools

\n
\n \n \n

Paste excel to HTML

\n\n
\n
\n
\n

Awesome Search

\n
\n\n
\n
\n\n
\n
\n
\n

Github HTML Render from link

\n
\n\n
\n
\n
\n
\n
\n
\n

Form Builder GUI

\n
\n\n\n
\n
\n

\n
\n\n \n \n \n
\n
\n
\n

\n
\n \n \n "},{"url":"/docs/tools/markdown-html/","relativePath":"docs/tools/markdown-html.md","relativeDir":"docs/tools","base":"markdown-html.md","name":"markdown-html","frontmatter":{"title":"md and html","weight":0,"excerpt":"Tools For Markdown & Html","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Tools For Markdown & Html

\n
\n
\n
\n
\n

Paste To Markdown

\n
\n\n \n \n \n
\n
\n

Paste Excel Tabel To Markdown

\n\n
\n
\n
\n

Paste excel to HTML

\n
\n\n
\n
\n

Html To Markdown Converter

\n
\n\n
"},{"url":"/docs/tutorials/how-to-use-google-sheets-as-cms/","relativePath":"docs/tutorials/how-to-use-google-sheets-as-cms.md","relativeDir":"docs/tutorials","base":"how-to-use-google-sheets-as-cms.md","name":"how-to-use-google-sheets-as-cms","frontmatter":{"title":"lorem-ipsum","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Etiam facilisis lacus nec pretium lobortis. Praesent dapibus justo non efficitur efficitur. Nullam viverra justo arcu, eget egestas tortor pretium id. Sed imperdiet mattis eleifend. Vivamus suscipit et neque imperdiet venenatis.

\n
\n

Vestibulum ullamcorper risus auctor eleifend consequat.

\n
\n

\"Placeholder

\n

In malesuada sed urna eget vehicula. Donec fermentum tortor sit amet nisl elementum fringilla. Pellentesque dapibus suscipit faucibus. Nullam malesuada sed urna quis rutrum. Donec facilisis lorem id maximus mattis. Vestibulum quis elit magna. Vestibulum accumsan blandit consequat. Phasellus quis posuere quam.

\n

Vivamus mollis in tellus ac ullamcorper. Vestibulum sit amet bibendum ipsum, vitae rutrum ex. Nullam cursus, urna et dapibus aliquam, urna leo euismod metus, eu luctus justo mi eget mauris. Proin felis leo, volutpat et purus in, lacinia luctus eros. Pellentesque lobortis massa scelerisque lorem ullamcorper, sit amet elementum nulla scelerisque. In volutpat efficitur nulla, aliquam ornare lectus ultricies ac. Mauris sagittis ornare dictum. Nulla vel felis ut purus fermentum pretium. Sed id lectus ac diam aliquet venenatis. Etiam ac auctor enim. Nunc velit mauris, viverra vel orci ut, egestas rhoncus diam. Morbi scelerisque nibh tellus, vel varius urna malesuada sed. Etiam ultricies sem consequat, posuere urna non, maximus ex. Mauris gravida diam sed augue condimentum pulvinar vel ac dui. Integer vel convallis justo.

"},{"url":"/docs/tutorials/enviorment-setup/","relativePath":"docs/tutorials/enviorment-setup.md","relativeDir":"docs/tutorials","base":"enviorment-setup.md","name":"enviorment-setup","frontmatter":{"title":"Basic Bash Proficiency","weight":0,"excerpt":null,"seo":{"title":"","description":"bash shell tutorial","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Basic Bash Proficiency:

\n

Everyday use

\n
    \n
  • In Bash, use Tab to complete arguments or list all available commands and ctrl-r to search through command history (after pressing, type to search, press ctrl-r repeatedly to cycle through more matches, press Enter to execute the found command, or hit the right arrow to put the result in the current line to allow editing).
    • \n
  • In Bash, use ctrl-w to delete the last word, and ctrl-u to delete the content from current cursor back to the start of the line. Use alt-b and alt-f to move by word, ctrl-a to move cursor to beginning of line, ctrl-e to move cursor to end of line, ctrl-k to kill to the end of the line, ctrl-l to clear the screen. See man readline for all the default keybindings in Bash. There are a lot. For example alt-. cycles through previous arguments, and alt-* expands a glob.
    • \n
  • Alternatively, if you love vi-style key-bindings, use set -o vi (and set -o emacs to put it back).
    • \n
  • For editing long commands, after setting your editor (for example export EDITOR=vim), ctrl-x ctrl-e will open the current command in an editor for multi-line editing. Or in vi style, escape-v.
    • \n
  • To see recent commands, use history. Follow with !n (where n is the command number) to execute again. There are also many abbreviations you can use, the most useful probably being !$ for last argument and !! for last command (see \"HISTORY EXPANSION\" in the man page). However, these are often easily replaced with ctrl-r and alt-..
    • \n
  • Go to your home directory with cd. Access files relative to your home directory with the ~ prefix (e.g. ~/.bashrc). In sh scripts refer to the home directory as $HOME.
    • \n
  • To go back to the previous working directory: cd -.
    • \n
  • If you are halfway through typing a command but change your mind, hit alt-# to add a # at the beginning and enter it as a comment (or use ctrl-a, #, enter). You can then return to it later via command history.
    • \n
  • \n

    Use xargs (or parallel). It's very powerful. Note you can control how many items execute per line (-L) as well as parallelism (-P). If you're not sure if it'll do the right thing, use xargs echo first. Also, -I{} is handy. Examples:

    \n
      find . -name '*.py' | xargs grep some_function\n  cat hosts | xargs -I{} ssh root@{} hostname\n
    \n
    • \n
  • pstree -p is a helpful display of the process tree.
    • \n
  • Use pgrep and pkill to find or signal processes by name (-f is helpful).
    • \n
  • Know the various signals you can send processes. For example, to suspend a process, use kill -STOP [pid]. For the full list, see man 7 signal
    • \n
  • Use nohup or disown if you want a background process to keep running forever.
    • \n
  • Check what processes are listening via netstat -lntp or ss -plat (for TCP; add -u for UDP) or lsof -iTCP -sTCP:LISTEN -P -n (which also works on macOS).
    • \n
  • See also lsof and fuser for open sockets and files.
    • \n
  • See uptime or w to know how long the system has been running.
    • \n
  • Use alias to create shortcuts for commonly used commands. For example, alias ll='ls -latr' creates a new alias ll.
    • \n
  • Save aliases, shell settings, and functions you commonly use in ~/.bashrc, and arrange for login shells to source it. This will make your setup available in all your shell sessions.
    • \n
  • Put the settings of environment variables as well as commands that should be executed when you login in ~/.bash_profile. Separate configuration will be needed for shells you launch from graphical environment logins and cron jobs.
    • \n
  • Synchronize your configuration files (e.g. .bashrc and .bash_profile) among various computers with Git.
    • \n
  • Understand that care is needed when variables and filenames include whitespace. Surround your Bash variables with quotes, e.g. \"$FOO\". Prefer the -0 or -print0 options to enable null characters to delimit filenames, e.g. locate -0 pattern | xargs -0 ls -al or find / -print0 -type d | xargs -0 ls -al. To iterate on filenames containing whitespace in a for loop, set your IFS to be a newline only using IFS=$'\\n'.
    • \n
  • \n

    In Bash scripts, use set -x (or the variant set -v, which logs raw input, including unexpanded variables and comments) for debugging output. Use strict modes unless you have a good reason not to: Use set -e to abort on errors (nonzero exit code). Use set -u to detect unset variable usages. Consider set -o pipefail too, to abort on errors within pipes (though read up on it more if you do, as this topic is a bit subtle). For more involved scripts, also use trap on EXIT or ERR. A useful habit is to start a script like this, which will make it detect and abort on common errors and print a message:

    \n
      set -euo pipefail\n  trap \"echo 'error: Script failed: see failed command above'\" ERR\n
    \n
    • \n
  • \n

    In Bash scripts, subshells (written with parentheses) are convenient ways to group commands. A common example is to temporarily move to a different working directory, e.g.

    \n
      # do something in current dir\n  (cd /some/other/dir && other-command)\n  # continue in original dir\n
    \n
    • \n
  • In Bash, note there are lots of kinds of variable expansion. Checking a variable exists: ${name:?error message}. For example, if a Bash script requires a single argument, just write input_file=${1:?usage: $0 input_file}. Using a default value if a variable is empty: ${name:-default}. If you want to have an additional (optional) parameter added to the previous example, you can use something like output_file=${2:-logfile}. If $2 is omitted and thus empty, output_file will be set to logfile. Arithmetic expansion: i=$(( (i + 1) % 5 )). Sequences: {1..10}. Trimming of strings: ${var%suffix} and ${var#prefix}. For example if var=foo.pdf, then echo ${var%.pdf}.txt prints foo.txt.
    • \n
  • Brace expansion using {...} can reduce having to re-type similar text and automate combinations of items. This is helpful in examples like mv foo.{txt,pdf} some-dir (which moves both files), cp somefile{,.bak} (which expands to cp somefile somefile.bak) or mkdir -p test-{a,b,c}/subtest-{1,2,3} (which expands all possible combinations and creates a directory tree). Brace expansion is performed before any other expansion.
    • \n
  • The order of expansions is: brace expansion; tilde expansion, parameter and variable expansion, arithmetic expansion, and command substitution (done in a left-to-right fashion); word splitting; and filename expansion. (For example, a range like {1..20} cannot be expressed with variables using {$a..$b}. Use seq or a for loop instead, e.g., seq $a $b or for((i=a; i<=b; i++)); do ... ; done.)
    • \n
  • \n

    The output of a command can be treated like a file via <(some command) (known as process substitution). For example, compare local /etc/hosts with a remote one:

    \n
      diff /etc/hosts <(ssh somehost cat /etc/hosts)\n
    \n
    • \n
  • \n

    When writing scripts you may want to put all of your code in curly braces. If the closing brace is missing, your script will be prevented from executing due to a syntax error. This makes sense when your script is going to be downloaded from the web, since it prevents partially downloaded scripts from executing:

    \n
    {\n  # Your code here\n}\n
    \n
    • \n
  • \n

    A \"here document\" allows redirection of multiple lines of input as if from a file:

    \n
    cat <<EOF\ninput\non multiple lines\nEOF\n
    \n
    • \n
  • In Bash, redirect both standard output and standard error via: some-command >logfile 2>&1 or some-command &>logfile. Often, to ensure a command does not leave an open file handle to standard input, tying it to the terminal you are in, it is also good practice to add </dev/null.
    • \n
  • Use man ascii for a good ASCII table, with hex and decimal values. For general encoding info, man unicode, man utf-8, and man latin1 are helpful.
    • \n
  • Use screen or tmux to multiplex the screen, especially useful on remote ssh sessions and to detach and re-attach to a session. byobu can enhance screen or tmux by providing more information and easier management. A more minimal alternative for session persistence only is dtach.
    • \n
  • In ssh, knowing how to port tunnel with -L or -D (and occasionally -R) is useful, e.g. to access web sites from a remote server.
    • \n
  • \n

    It can be useful to make a few optimizations to your ssh configuration; for example, this ~/.ssh/config contains settings to avoid dropped connections in certain network environments, uses compression (which is helpful with scp over low-bandwidth connections), and multiplex channels to the same server with a local control file:

    \n
      TCPKeepAlive=yes\n  ServerAliveInterval=15\n  ServerAliveCountMax=6\n  Compression=yes\n  ControlMaster auto\n  ControlPath /tmp/%r@%h:%p\n  ControlPersist yes\n
    \n
    • \n
  • A few other options relevant to ssh are security sensitive and should be enabled with care, e.g. per subnet or host or in trusted networks: StrictHostKeyChecking=no, ForwardAgent=yes
    • \n
  • Consider mosh an alternative to ssh that uses UDP, avoiding dropped connections and adding convenience on the road (requires server-side setup).
    • \n
  • \n

    To get the permissions on a file in octal form, which is useful for system configuration but not available in ls and easy to bungle, use something like

    \n
      stat -c '%A %a %n' /etc/timezone\n
    \n
    • \n
  • For interactive selection of values from the output of another command, use percol or fzf.
    • \n
  • For interaction with files based on the output of another command (like git), use fpp (PathPicker).
    • \n
  • For a simple web server for all files in the current directory (and subdirs), available to anyone on your network, use:\npython -m SimpleHTTPServer 7777 (for port 7777 and Python 2) and python -m http.server 7777 (for port 7777 and Python 3).
    • \n
  • For running a command as another user, use sudo. Defaults to running as root; use -u to specify another user. Use -i to login as that user (you will be asked for your password).
    • \n
  • For switching the shell to another user, use su username or su - username. The latter with \"-\" gets an environment as if another user just logged in. Omitting the username defaults to root. You will be asked for the password of the user you are switching to.
    • \n
  • Know about the 128K limit on command lines. This \"Argument list too long\" error is common when wildcard matching large numbers of files. (When this happens alternatives like find and xargs may help.)
    • \n
  • \n

    For a basic calculator (and of course access to Python in general), use the python interpreter. For example,

    \n
    >>> 2+3\n5\n
    \n
    • \n
\n

Processing files and data

\n
    \n
  • To locate a file by name in the current directory, find . -iname '*something*' (or similar). To find a file anywhere by name, use locate something (but bear in mind updatedb may not have indexed recently created files).
    • \n
  • For general searching through source or data files, there are several options more advanced or faster than grep -r, including (in rough order from older to newer) ack, ag (\"the silver searcher\"), and rg (ripgrep).
    • \n
  • To convert HTML to text: lynx -dump -stdin
    • \n
  • For Markdown, HTML, and all kinds of document conversion, try pandoc. For example, to convert a Markdown document to Word format: pandoc README.md --from markdown --to docx -o temp.docx
    • \n
  • If you must handle XML, xmlstarlet is old but good.
    • \n
  • For JSON, use jq. For interactive use, also see jid and jiq.
    • \n
  • For YAML, use shyaml.
    • \n
  • For Excel or CSV files, csvkit provides in2csv, csvcut, csvjoin, csvgrep, etc.
    • \n
  • For Amazon S3, s3cmd is convenient and s4cmd is faster. Amazon's aws and the improved saws are essential for other AWS-related tasks.
    • \n
  • Know about sort and uniq, including uniq's -u and -d options -- see one-liners below. See also comm.
    • \n
  • Know about cut, paste, and join to manipulate text files. Many people use cut but forget about join.
    • \n
  • Know about wc to count newlines (-l), characters (-m), words (-w) and bytes (-c).
    • \n
  • Know about tee to copy from stdin to a file and also to stdout, as in ls -al | tee file.txt.
    • \n
  • For more complex calculations, including grouping, reversing fields, and statistical calculations, consider datamash.
    • \n
  • Know that locale affects a lot of command line tools in subtle ways, including sorting order (collation) and performance. Most Linux installations will set LANG or other locale variables to a local setting like US English. But be aware sorting will change if you change locale. And know i18n routines can make sort or other commands run many times slower. In some situations (such as the set operations or uniqueness operations below) you can safely ignore slow i18n routines entirely and use traditional byte-based sort order, using export LC_ALL=C.
    • \n
  • You can set a specific command's environment by prefixing its invocation with the environment variable settings, as in TZ=Pacific/Fiji date.
    • \n
  • Know basic awk and sed for simple data munging. See One-liners for examples.
    • \n
  • \n

    To replace all occurrences of a string in place, in one or more files:

    \n
      perl -pi.bak -e 's/old-string/new-string/g' my-files-*.txt\n
    \n
    • \n
  • \n

    To rename multiple files and/or search and replace within files, try repren. (In some cases the rename command also allows multiple renames, but be careful as its functionality is not the same on all Linux distributions.)

    \n
      # Full rename of filenames, directories, and contents foo -> bar:\n  repren --full --preserve-case --from foo --to bar .\n  # Recover backup files whatever.bak -> whatever:\n  repren --renames --from '(.*)\\.bak' --to '\\1' *.bak\n  # Same as above, using rename, if available:\n  rename 's/\\.bak$//' *.bak\n
    \n
    • \n
  • \n

    As the man page says, rsync really is a fast and extraordinarily versatile file copying tool. It's known for synchronizing between machines but is equally useful locally. When security restrictions allow, using rsync instead of scp allows recovery of a transfer without restarting from scratch. It also is among the fastest ways to delete large numbers of files:

    \n
    mkdir empty && rsync -r --delete empty/ some-dir && rmdir some-dir\n
    \n
    • \n
  • For monitoring progress when processing files, use pv, pycp, pmonitor, progress, rsync --progress, or, for block-level copying, dd status=progress.
    • \n
  • Use shuf to shuffle or select random lines from a file.
    • \n
  • Know sort's options. For numbers, use -n, or -h for handling human-readable numbers (e.g. from du -h). Know how keys work (-t and -k). In particular, watch out that you need to write -k1,1 to sort by only the first field; -k1 means sort according to the whole line. Stable sort (sort -s) can be useful. For example, to sort first by field 2, then secondarily by field 1, you can use sort -k1,1 | sort -s -k2,2.
    • \n
  • If you ever need to write a tab literal in a command line in Bash (e.g. for the -t argument to sort), press ctrl-v [Tab] or write $'\\t' (the latter is better as you can copy/paste it).
    • \n
  • The standard tools for patching source code are diff and patch. See also diffstat for summary statistics of a diff and sdiff for a side-by-side diff. Note diff -r works for entire directories. Use diff -r tree1 tree2 | diffstat for a summary of changes. Use vimdiff to compare and edit files.
    • \n
  • For binary files, use hd, hexdump or xxd for simple hex dumps and bvi, hexedit or biew for binary editing.
    • \n
  • Also for binary files, strings (plus grep, etc.) lets you find bits of text.
    • \n
  • For binary diffs (delta compression), use xdelta3.
    • \n
  • \n

    To convert text encodings, try iconv. Or uconv for more advanced use; it supports some advanced Unicode things. For example:

    \n
      # Displays hex codes or actual names of characters (useful for debugging):\n  uconv -f utf-8 -t utf-8 -x '::Any-Hex;' < input.txt\n  uconv -f utf-8 -t utf-8 -x '::Any-Name;' < input.txt\n  # Lowercase and removes all accents (by expanding and dropping them):\n  uconv -f utf-8 -t utf-8 -x '::Any-Lower; ::Any-NFD; [:Nonspacing Mark:] >; ::Any-NFC;' < input.txt > output.txt\n
    \n
    • \n
  • To split files into pieces, see split (to split by size) and csplit (to split by a pattern).
    • \n
  • Date and time: To get the current date and time in the helpful ISO 8601 format, use date -u +\"%Y-%m-%dT%H:%M:%SZ\" (other options are problematic). To manipulate date and time expressions, use dateadd, datediff, strptime etc. from dateutils.
    • \n
  • Use zless, zmore, zcat, and zgrep to operate on compressed files.
    • \n
  • File attributes are settable via chattr and offer a lower-level alternative to file permissions. For example, to protect against accidental file deletion the immutable flag: sudo chattr +i /critical/directory/or/file
    • \n
  • \n

    Use getfacl and setfacl to save and restore file permissions. For example:

    \n
    getfacl -R /some/path > permissions.txt\nsetfacl --restore=permissions.txt\n
    \n
    • \n
  • To create empty files quickly, use truncate (creates sparse file), fallocate (ext4, xfs, btrfs and ocfs2 filesystems), xfs_mkfile (almost any filesystems, comes in xfsprogs package), mkfile (for Unix-like systems like Solaris, Mac OS).
    • \n
\n

System debugging

\n
    \n
  • For web debugging, curl and curl -I are handy, or their wget equivalents, or the more modern httpie.
    • \n
  • To know current cpu/disk status, the classic tools are top (or the better htop), iostat, and iotop. Use iostat -mxz 15 for basic CPU and detailed per-partition disk stats and performance insight.
    • \n
  • For network connection details, use netstat and ss.
    • \n
  • For a quick overview of what's happening on a system, dstat is especially useful. For broadest overview with details, use glances.
    • \n
  • To know memory status, run and understand the output of free and vmstat. In particular, be aware the \"cached\" value is memory held by the Linux kernel as file cache, so effectively counts toward the \"free\" value.
    • \n
  • Java system debugging is a different kettle of fish, but a simple trick on Oracle's and some other JVMs is that you can run kill -3 <pid> and a full stack trace and heap summary (including generational garbage collection details, which can be highly informative) will be dumped to stderr/logs. The JDK's jps, jstat, jstack, jmap are useful. SJK tools are more advanced.
    • \n
  • Use mtr as a better traceroute, to identify network issues.
    • \n
  • For looking at why a disk is full, ncdu saves time over the usual commands like du -sh *.
    • \n
  • To find which socket or process is using bandwidth, try iftop or nethogs.
    • \n
  • The ab tool (comes with Apache) is helpful for quick-and-dirty checking of web server performance. For more complex load testing, try siege.
    • \n
  • For more serious network debugging, wireshark, tshark, or ngrep.
    • \n
  • Know about strace and ltrace. These can be helpful if a program is failing, hanging, or crashing, and you don't know why, or if you want to get a general idea of performance. Note the profiling option (-c), and the ability to attach to a running process (-p). Use trace child option (-f) to avoid missing important calls.
    • \n
  • Know about ldd to check shared libraries etc — but never run it on untrusted files.
    • \n
  • Know how to connect to a running process with gdb and get its stack traces.
    • \n
  • Use /proc. It's amazingly helpful sometimes when debugging live problems. Examples: /proc/cpuinfo, /proc/meminfo, /proc/cmdline, /proc/xxx/cwd, /proc/xxx/exe, /proc/xxx/fd/, /proc/xxx/smaps (where xxx is the process id or pid).
    • \n
  • When debugging why something went wrong in the past, sar can be very helpful. It shows historic statistics on CPU, memory, network, etc.
    • \n
  • For deeper systems and performance analyses, look at stap (SystemTap), perf, and sysdig.
    • \n
  • Check what OS you're on with uname or uname -a (general Unix/kernel info) or lsb_release -a (Linux distro info).
    • \n
  • Use dmesg whenever something's acting really funny (it could be hardware or driver issues).
    • \n
  • If you delete a file and it doesn't free up expected disk space as reported by du, check whether the file is in use by a process:\nlsof | grep deleted | grep \"filename-of-my-big-file\"
    • \n
\n

One-liners

\n

A few examples of piecing together commands:

\n
    \n
  • \n

    It is remarkably helpful sometimes that you can do set intersection, union, and difference of text files via sort/uniq. Suppose a and b are text files that are already uniqued. This is fast, and works on files of arbitrary size, up to many gigabytes. (Sort is not limited by memory, though you may need to use the -T option if /tmp is on a small root partition.) See also the note about LC_ALL above and sort's -u option (left out for clarity below).

    \n
      sort a b | uniq > c   # c is a union b\n  sort a b | uniq -d > c   # c is a intersect b\n  sort a b b | uniq -u > c   # c is set difference a - b\n
    \n
    • \n
  • \n

    Pretty-print two JSON files, normalizing their syntax, then coloring and paginating the result:

    \n
      diff <(jq --sort-keys . < file1.json) <(jq --sort-keys . < file2.json) | colordiff | less -R\n
    \n
    • \n
  • Use grep . * to quickly examine the contents of all files in a directory (so each line is paired with the filename), or head -100 * (so each file has a heading). This can be useful for directories filled with config settings like those in /sys, /proc, /etc.
    • \n
  • \n

    Summing all numbers in the third column of a text file (this is probably 3X faster and 3X less code than equivalent Python):

    \n
      awk '{ x += $3 } END { print x }' myfile\n
    \n
    • \n
  • \n

    To see sizes/dates on a tree of files, this is like a recursive ls -l but is easier to read than ls -lR:

    \n
      find . -type f -ls\n
    \n
    • \n
  • \n

    Say you have a text file, like a web server log, and a certain value that appears on some lines, such as an acct_id parameter that is present in the URL. If you want a tally of how many requests for each acct_id:

    \n
      egrep -o 'acct_id=[0-9]+' access.log | cut -d= -f2 | sort | uniq -c | sort -rn\n
    \n
    • \n
  • To continuously monitor changes, use watch, e.g. check changes to files in a directory with watch -d -n 2 'ls -rtlh | tail' or to network settings while troubleshooting your wifi settings with watch -d -n 2 ifconfig.
    • \n
  • \n

    Run this function to get a random tip from this document (parses Markdown and extracts an item):

    \n
      function taocl() {\n    curl -s https://raw.githubusercontent.com/jlevy/the-art-of-command-line/master/README.md |\n      sed '/cowsay[.]png/d' |\n      pandoc -f markdown -t html |\n      xmlstarlet fo --html --dropdtd |\n      xmlstarlet sel -t -v \"(html/body/ul/li[count(p)>0])[$RANDOM mod last()+1]\" |\n      xmlstarlet unesc | fmt -80 | iconv -t US\n  }\n
    \n
    • \n
\n

Obscure but useful

\n
    \n
  • expr: perform arithmetic or boolean operations or evaluate regular expressions
    • \n
  • m4: simple macro processor
    • \n
  • yes: print a string a lot
    • \n
  • cal: nice calendar
    • \n
  • env: run a command (useful in scripts)
    • \n
  • printenv: print out environment variables (useful in debugging and scripts)
    • \n
  • look: find English words (or lines in a file) beginning with a string
    • \n
  • cut, paste and join: data manipulation
    • \n
  • fmt: format text paragraphs
    • \n
  • pr: format text into pages/columns
    • \n
  • fold: wrap lines of text
    • \n
  • column: format text fields into aligned, fixed-width columns or tables
    • \n
  • expand and unexpand: convert between tabs and spaces
    • \n
  • nl: add line numbers
    • \n
  • seq: print numbers
    • \n
  • bc: calculator
    • \n
  • factor: factor integers
    • \n
  • gpg: encrypt and sign files
    • \n
  • toe: table of terminfo entries
    • \n
  • nc: network debugging and data transfer
    • \n
  • socat: socket relay and tcp port forwarder (similar to netcat)
    • \n
  • slurm: network traffic visualization
    • \n
  • dd: moving data between files or devices
    • \n
  • file: identify type of a file
    • \n
  • tree: display directories and subdirectories as a nesting tree; like ls but recursive
    • \n
  • stat: file info
    • \n
  • time: execute and time a command
    • \n
  • timeout: execute a command for specified amount of time and stop the process when the specified amount of time completes.
    • \n
  • lockfile: create semaphore file that can only be removed by rm -f
    • \n
  • logrotate: rotate, compress and mail logs.
    • \n
  • watch: run a command repeatedly, showing results and/or highlighting changes
    • \n
  • when-changed: runs any command you specify whenever it sees file changed. See inotifywait and entr as well.
    • \n
  • tac: print files in reverse
    • \n
  • comm: compare sorted files line by line
    • \n
  • strings: extract text from binary files
    • \n
  • tr: character translation or manipulation
    • \n
  • iconv or uconv: conversion for text encodings
    • \n
  • split and csplit: splitting files
    • \n
  • sponge: read all input before writing it, useful for reading from then writing to the same file, e.g., grep -v something some-file | sponge some-file
    • \n
  • units: unit conversions and calculations; converts furlongs per fortnight to twips per blink (see also /usr/share/units/definitions.units)
    • \n
  • apg: generates random passwords
    • \n
  • xz: high-ratio file compression
    • \n
  • ldd: dynamic library info
    • \n
  • nm: symbols from object files
    • \n
  • ab or wrk: benchmarking web servers
    • \n
  • strace: system call debugging
    • \n
  • mtr: better traceroute for network debugging
    • \n
  • cssh: visual concurrent shell
    • \n
  • rsync: sync files and folders over SSH or in local file system
    • \n
  • wireshark and tshark: packet capture and network debugging
    • \n
  • ngrep: grep for the network layer
    • \n
  • host and dig: DNS lookups
    • \n
  • lsof: process file descriptor and socket info
    • \n
  • dstat: useful system stats
    • \n
  • glances: high level, multi-subsystem overview
    • \n
  • iostat: Disk usage stats
    • \n
  • mpstat: CPU usage stats
    • \n
  • vmstat: Memory usage stats
    • \n
  • htop: improved version of top
    • \n
  • last: login history
    • \n
  • w: who's logged on
    • \n
  • id: user/group identity info
    • \n
  • sar: historic system stats
    • \n
  • iftop or nethogs: network utilization by socket or process
    • \n
  • ss: socket statistics
    • \n
  • dmesg: boot and system error messages
    • \n
  • sysctl: view and configure Linux kernel parameters at run time
    • \n
  • hdparm: SATA/ATA disk manipulation/performance
    • \n
  • lsblk: list block devices: a tree view of your disks and disk partitions
    • \n
  • lshw, lscpu, lspci, lsusb, dmidecode: hardware information, including CPU, BIOS, RAID, graphics, devices, etc.
    • \n
  • lsmod and modinfo: List and show details of kernel modules.
    • \n
  • fortune, ddate, and sl: um, well, it depends on whether you consider steam locomotives and Zippy quotations \"useful\"
    • \n
\n

macOS only

\n

These are items relevant only on macOS.

\n
    \n
  • Package management with brew (Homebrew) and/or port (MacPorts). These can be used to install on macOS many of the above commands.
    • \n
  • Copy output of any command to a desktop app with pbcopy and paste input from one with pbpaste.
    • \n
  • To enable the Option key in macOS Terminal as an alt key (such as used in the commands above like alt-b, alt-f, etc.), open Preferences -> Profiles -> Keyboard and select \"Use Option as Meta key\".
    • \n
  • To open a file with a desktop app, use open or open -a /Applications/Whatever.app.
    • \n
  • Spotlight: Search files with mdfind and list metadata (such as photo EXIF info) with mdls.
    • \n
  • Be aware macOS is based on BSD Unix, and many commands (for example ps, ls, tail, awk, sed) have many subtle variations from Linux, which is largely influenced by System V-style Unix and GNU tools. You can often tell the difference by noting a man page has the heading \"BSD General Commands Manual.\" In some cases GNU versions can be installed, too (such as gawk and gsed for GNU awk and sed). If writing cross-platform Bash scripts, avoid such commands (for example, consider Python or perl) or test carefully.
    • \n
  • To get macOS release information, use sw_vers.
    • \n
\n

Windows only

\n

These items are relevant only on Windows.

\n

Ways to obtain Unix tools under Windows

\n
    \n
  • Access the power of the Unix shell under Microsoft Windows by installing Cygwin. Most of the things described in this document will work out of the box.
    • \n
  • On Windows 10, you can use Windows Subsystem for Linux (WSL), which provides a familiar Bash environment with Unix command line utilities.
    • \n
  • If you mainly want to use GNU developer tools (such as GCC) on Windows, consider MinGW and its MSYS package, which provides utilities such as bash, gawk, make and grep. MSYS doesn't have all the features compared to Cygwin. MinGW is particularly useful for creating native Windows ports of Unix tools.
    • \n
  • Another option to get Unix look and feel under Windows is Cash. Note that only very few Unix commands and command-line options are available in this environment.
    • \n
\n

Useful Windows command-line tools

\n
    \n
  • You can perform and script most Windows system administration tasks from the command line by learning and using wmic.
    • \n
  • Native command-line Windows networking tools you may find useful include ping, ipconfig, tracert, and netstat.
    • \n
  • You can perform many useful Windows tasks by invoking the Rundll32 command.
    • \n
\n

Cygwin tips and tricks

\n
    \n
  • Install additional Unix programs with the Cygwin's package manager.
    • \n
  • Use mintty as your command-line window.
    • \n
  • Access the Windows clipboard through /dev/clipboard.
    • \n
  • Run cygstart to open an arbitrary file through its registered application.
    • \n
  • Access the Windows registry with regtool.
    • \n
  • Note that a C:\\ Windows drive path becomes /cygdrive/c under Cygwin, and that Cygwin's / appears under C:\\cygwin on Windows. Convert between Cygwin and Windows-style file paths with cygpath. This is most useful in scripts that invoke Windows programs.
    • \n
\n

More resources

\n"},{"url":"/docs/tutorials/","relativePath":"docs/tutorials/index.md","relativeDir":"docs/tutorials","base":"index.md","name":"index","frontmatter":{"title":"Tutorials","weight":0,"excerpt":"Walkthroughs of various development activities and skills","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

This section is dedicated to coding walkthroughs:

"},{"url":"/docs/articles/node-api-express/","relativePath":"docs/articles/node-api-express.md","relativeDir":"docs/articles","base":"node-api-express.md","name":"node-api-express","frontmatter":{"title":"Node APIs With Express","sections":[],"seo":{"title":" Node APIs With Express","description":"Review-Of-Previous-Concepts","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Overview

\n

REST is a generally agreed-upon set of principles and constraints. They are recommendations, not a standard.

\n
// inside /api/apiRoutes.js <- this can be place anywhere and called anything\nconst express = require('express');\n\n// if the other routers are not nested inside /api then the paths would change\nconst userRoutes = require('./users/userRoutes');\nconst productRoutes = require('./products/productRoutes');\nconst clientRoutes = require('./clients/clientRoutes');\n\nconst router = express.Router(); // notice the Uppercase R\n\n// this file will only be used when the route begins with \"/api\"\n// so we can remove that from the URLs, so \"/api/users\" becomes simply \"/users\"\nrouter.use('/users', userRoutes);\nrouter.use('/products', productRoutes);\nrouter.use('/clients', clientRoutes);\n\n// .. and any other endpoint related to the user's resource\n\n// after the route has been fully configured, we then export it so it can be required where needed\nmodule.exports = router; // standard convention dictates that this is the last line on the file\n
\n
### Objective 1 — explain the role of a foreign key\n

Overview

\n

Foreign keys are a type of table field used for creating links between tables. Like primary keys, they are most often integers that identify (rather than store) data. However, whereas a primary key is used to id rows in a table, foreign keys are used to connect a record in one table to a record in a second table.

\n

Follow Along

\n

Consider the following farms and ranchers tables.

\n

Untitled

\n

Untitled

\n

The farm_id in the ranchers table is an example of a foreign key. Each entry in the farm_id (foreign key) column corresponds to an id (primary key) in the farms table. This allows us to track which farm each rancher belongs to while keeping the tables normalized.

\n

If we could only see the ranchers table, we would know that John, Jane, and Jen all work together and that Jim and Jay also work together. However, to know where any of them work, we would need to look at the farms table.

\n

Challenge

\n

Open SQLTryIT (Links to an external site.).

\n

How many records in the products table belong to the category “confections”?

\n

Objective 2 — query data from multiple tables

\n

Now that we understand the basics of querying data from a single table, let's move on to selecting data from multiple tables using JOIN operations.

\n

Overview

\n

We can use a JOIN to combine query data from multiple tables using a single SELECT statement.

\n

There are different types of joins; some are listed below:

\n
    \n
  • inner joins.
    • \n
  • outer joins.
    • \n
  • left joins.
    • \n
  • right joins.
    • \n
  • cross joins.
    • \n
  • non-equality joins.
    • \n
  • self joins.
    • \n
\n

Using joins requires that the two tables of interest contain at least one field with shared information. For example, if a departments table has an id field, and an employee table has a departmentid_ field, and the values that exist in the id column of the departments table live in the departmentid_ field of the employee table, we can use those fields to join both tables like so:

\n
select * from employees\njoin departments on employees.department_id = departments.id\n
\n

This query will return the data from both tables for every instance where the ON condition is true. If there are employees with no value for departmentid or where the value stored in the field does not correspond to an existing id in the departments table, then that record will NOT be returned. In a similar fashion, any records from the departments table that don't have an employee associated with them will also be omitted from the results. Basically, if the id* does not show as the value of department_id for an employee, it won't be able to join.

\n

We can shorten the condition by giving the table names an alias. This is a common practice. Below is the same example using aliases, picking which fields to return and sorting the results:

\n
select d.id, d.name, e.id, e.first_name, e.last_name, e.salary\nfrom employees as e\njoin departments as d\n  on e.department_id = d.id\norder by d.name, e.last_name\n
\n

Notice that we can take advantage of white space and indentation to make queries more readable.

\n

There are several ways of writing joins, but the one shown here should work on all database management systems and avoid some pitfalls, so we recommend it.

\n

The syntax for performing a similar join using Knex is as follows:

\n
db('employees as e')\n  .join('departments as d', 'e.department_id', 'd.id')\n  .select('d.id', 'd.name', 'e.first_name', 'e.last_name', 'e.salary')\n
\n

Follow Along

\n

A good explanation of how the different types of joins can be seen in this article from w3resource.com (Links to an external site.).

\n

Challenge

\n

Use this online tool (Links to an external site.) to write the following queries:

\n
    \n
  • list the products, including their category name.
    • \n
  • list the products, including the supplier name.
    • \n
  • list the products, including both the category name and supplier name.
    • \n
\n

What is SQL Joins?

\n

An SQL JOIN clause combines rows from two or more tables. It creates a set of rows in a temporary table.

\n

How to Join two tables in SQL?

\n

A JOIN works on two or more tables if they have at least one common field and have a relationship between them.

\n

JOIN keeps the base tables (structure and data) unchanged.

\n

Join vs. Subquery

\n
    \n
  • JOINs are faster than a subquery and it is very rare that the opposite.
    • \n
  • In JOINs the RDBMS calculates an execution plan, that can predict, what data should be loaded and how much it will take to processed and as a result this process save some times, unlike the subquery there is no pre-process calculation and run all the queries and load all their data to do the processing.
    • \n
  • A JOIN is checked conditions first and then put it into table and displays; where as a subquery take separate temp table internally and checking condition.
    • \n
  • When joins are using, there should be connection between two or more than two tables and each table has a relation with other while subquery means query inside another query, has no need to relation, it works on columns and conditions.
    • \n
\n

SQL JOINS: EQUI JOIN and NON EQUI JOIN

\n

The are two types of SQL JOINS — EQUI JOIN and NON EQUI JOIN

\n
    \n
  1. SQL EQUI JOIN :
    2. \n
\n

The SQL EQUI JOIN is a simple SQL join uses the equal sign(=) as the comparison operator for the condition. It has two types — SQL Outer join and SQL Inner join.

\n
    \n
  1. SQL NON EQUI JOIN :
    2. \n
\n

The SQL NON EQUI JOIN is a join uses comparison operator other than the equal sign like >, <, >=, <= with the condition.

\n

SQL EQUI JOIN : INNER JOIN and OUTER JOIN

\n

The SQL EQUI JOIN can be classified into two types — INNER JOIN and OUTER JOIN

\n
    \n
  1. SQL INNER JOIN
    2. \n
\n

This type of EQUI JOIN returns all rows from tables where the key record of one table is equal to the key records of another table.

\n
    \n
  1. SQL OUTER JOIN
    2. \n
\n

This type of EQUI JOIN returns all rows from one table and only those rows from the secondary table where the joined condition is satisfying i.e. the columns are equal in both tables.

\n

In order to perform a JOIN query, the required information we need are:

\n

a) The name of the tablesb) Name of the columns of two or more tables, based on which a condition will perform.

\n

Syntax:

\n
FROM table1\njoin_type table2\n[ON (join_condition)]\n
\n

Parameters:

\n

Untitled

\n

Pictorial Presentation of SQL Joins:

\n
**Example:**\n

Sample table: company

\n

Sample table: foods

\n

To join two tables 'company' and 'foods', the following SQL statement can be used :

\n

SQL Code:

\n
SELECT  company.company_id,company.company_name,\nfoods.item_id,foods.item_name\nFROM company,foods;\n
\n

Copy

\n

Output:

\n
COMPAN COMPANY_NAME              ITEM_ID  ITEM_NAME\n------ ------------------------- -------- ---------------\n18     Order All                 1        Chex Mix\n18     Order All                 6        Cheez-It\n18     Order All                 2        BN Biscuit\n18     Order All                 3        Mighty Munch\n18     Order All                 4        Pot Rice\n18     Order All                 5        Jaffa Cakes\n18     Order All                 7        Salt n Shake\n15     Jack Hill Ltd             1        Chex Mix\n15     Jack Hill Ltd             6        Cheez-It\n15     Jack Hill Ltd             2        BN Biscuit\n15     Jack Hill Ltd             3        Mighty Munch\n15     Jack Hill Ltd             4        Pot Rice\n15     Jack Hill Ltd             5        Jaffa Cakes\n15     Jack Hill Ltd             7        Salt n Shake\n16     Akas Foods                1        Chex Mix\n16     Akas Foods                6        Cheez-It\n16     Akas Foods                2        BN Biscuit\n16     Akas Foods                3        Mighty Munch\n16     Akas Foods                4        Pot Rice\n16     Akas Foods                5        Jaffa Cakes\n16     Akas Foods                7        Salt n Shake\n.........\n.........\n.........\n
\n

JOINS: Relational Databases

\n\n

Key points to remember:

\n

Click on the following to get the slides presentation -

\n
###\n

Practice SQL Exercises

\n\n

Objective 3 — write database access methods

\n

Overview

\n

While we can write database code directly into our endpoints, best practices dictate that all database logic exists in separate, modular methods. These files containing database access helpers are often called models

\n

Follow Along

\n

To handle CRUD operations for a single resource, we would want to create a model (or database access file) containing the following methods:

\n
function find() {\n}\n\nfunction findById(id) {\n}\n\nfunction add(user) {\n}\n\nfunction update(changes, id) {\n}\n\nfunction remove(id) {\n}\n
\n

Each of these functions would use Knex logic to perform the necessary database operation.

\n
function find() {\n  return db('users');\n}\n
\n

For each method, we can choose what value to return. For example, we may prefer findById() to return a single user object rather than an array.

\n
function findById(id) {\n// first() returns the first entry in the db matching the query\n  return db('users').where({ id }).first();\n}\n
\n

We can also use existing methods like findById() to help add() return the new user (instead of just the id).

\n
function add(user) {\n  db('users').insert(user)\n    .then(ids => {\n      return findById(ids[0]);\n    });\n}\n
\n

Once all methods are written as desired, we can export them like so:

\n
module.exports = {\n  find,\n  findById,\n  add,\n  update,\n  delete,\n}\n
\n

…and use the helpers in our endpoints

\n
const User = require('./user-model.js');\n\nrouter.get('/', (req, res) => {\n  User.find()\n    .then(users => {\n      res.json(users);\n    })\n    .catch(&nbsp;err => {});\n});\n
\n

There should no be knex code in the endpoints themselves.

\n
\n
### A database is a collection of data organized for easy retrieval and manipulation.\n

We're concerned only with digital databases, those that run on computers or other electronic devices. Digital databases have been around since the 1960s. Relational databases, those which store “related” data, are the oldest and most common type of database in use today.

\n

Data Persistence

\n

A database is often necessary because our application or code requires data persistence. This term refers to data that is infrequently accessed and not likely to be modified. In less technical terms, the information will be safely stored and remain untouched unless intentionally modified.

\n

A familiar example of non-persistent data would be JavaScript objects and arrays, which reset each time the code runs.

\n

Relational Databases

\n

In relational databases, the data is stored in tabular format grouped into rows and columns (similar to spreadsheets). A collection of rows is called a table. Each row represents a single record in the table and is made up of one or more columns.

\n

These kinds of databases are relational because a relation is a mathematical idea equivalent to a table. So relational databases are databases that store their data in tables.

\n

Tables

\n

Below are some basic facts about tables:

\n
\n

Tables organize data in rows and columns.

\n
\n
\n

Each row in a table represents one distinct record.

\n
\n
\n

Each column represents a field or attribute that is common to all the records.

\n
\n
\n

Fields should have a descriptive name and a data type appropriate for the attribute it represents.

\n
\n
\n

Tables usually have more rows than columns.

\n
\n
\n

Tables have primary keys that uniquely identify each row.

\n
\n
\n

Foreign keys represent the relationships with other tables.

\n
\n
### SQL:\n

SQL is a standard language, which means that it almost certainly will be supported, no matter how your database is managed. That said, be aware that the SQL language can vary depending on database management tools. This lesson focuses on a set of core commands that never change. Learning the standard commands is an excellent introduction since the knowledge transfers between database products.

\n

The syntax for SQL is English-like and requires fewer symbols than programming languages like C, Java, and JavaScript.

\n

It is declarative and concise, which means there is a lot less to learn to use it effectively.

\n

When learning SQL, it is helpful to understand that each command is designed for a different purpose. If we classify the commands by purpose, we'll end up with the following sub-categories of SQL:

\n
    \n
  • Data Definition Language (DDL): used to modify database objects. Some examples are: CREATE TABLE, ALTER TABLE, and DROP TABLE.
    • \n
  • Data Manipulation Language (DML): used to manipulate the data stored in the database. Some examples are: INSERT, UPDATE, and DELETE.
    • \n
  • Data Query Language (DQL): used to ask questions about the data stored in the database. The most commonly used SQL command is SELECT, and it falls in this category.
    • \n
  • Data Control Language (DCL): used to manage database security and user's access to data. These commands fall into the realm of Database Administrators. Some examples are GRANT and REVOKE.
    • \n
  • Transaction Control Commands: used for managing groups of statements that must execute as a unit or not execute at all. Examples are COMMIT and ROLLBACK.
    • \n
\n

As a developer, you'll need to get familiar with DDL and become proficient using DML and DQL. This lesson will cover only DML and DQL commands.

\n

\n
The four SQL operations covered in this section will allow a user to **query**, **insert**, and **modify** a database table.\n

Query

\n

A query is a SQL statement used to retrieve data from a database. The command used to write queries is SELECT, and it is one of the most commonly used SQL commands.

\n

The basic syntax for a SELECT statement is this:

\n
select <selection> from <table name>;\n
\n

To see all the fields on a table, we can use a * as the selection.

\n
select * from employees;\n
\n

The preceding statement would show all the records and all the columns for each record in the employees table.

\n

To pick the fields we want to see, we use a comma-separated list:

\n
select first_name, last_name, salary from employees;\n
\n

The return of that statement would hold all records from the listed fields.

\n

We can extend the SELECT command's capabilities using clauses for things like filtering, sorting, pagination, and more.

\n

It is possible to query multiple tables in a single query. But, in this section, we only perform queries on a single table. We will cover performing queries on multiple tables in another section.

\n

Insert

\n

To insert new data into a table, we'll use the INSERT command. The basic syntax for an INSERT statement is this:

\n
insert into <table name> (<selection>) values (<values>)\n
\n

Using this formula, we can specify which values will be inserted into which fields like so:

\n
insert into Customers (Country, CustomerName, ContactName, Address, City, PostalCode)\nvalues ('USA', 'WebDev School', 'Austen Allred', '1 WebDev Court', 'Provo', '84601');\n
\n

Modify

\n

Modifying a database consists of updating and removing records. For these operations, we'll use UPDATE and DELETE commands, respectively.

\n

The basic syntax for an UPDATE statement is:

\n
update <table name> set <field> = <value> where <condition>;\n
\n

The basic syntax for a DELETE statement is:

\n
delete from <table name> where <condition>;\n
\n

\n
### Filtering results using WHERE clause\n

When querying a database, the default result will be every entry in the given table. However, often, we are looking for a specific record or a set of records that meets certain criteria.

\n

A WHERE clause can help in both cases.

\n

Here's an example where we might only want to find customers living in Berlin.

\n
select City, CustomerName, ContactName\nfrom Customers\nwhere City = 'Berlin'\n
\n

We can also chain together WHERE clauses using OR and AND to limit our results further.

\n

The following query includes only records that match both criteria.

\n
select City, CustomerName, ContactName\nfrom Customers\nwhere Country = 'France' and City = 'Paris'\n
\n

And this query includes records that match either criteria.

\n
select City, CustomerName, ContactName\nfrom Customers\nwhere Country = 'France' or City = 'Paris'\n
\n

These operators can be combined and grouped with parentheses to add complex selection logic. They behave similarly to what you're used to in programming languages.

\n

You can read more about SQLite operators from w3resource (Links to an external site.).

\n

To select a single record, we can use a WHERE statement with a uniquely identifying field, like an id:

\n
select * from Customers\nwhere CustomerId=3;\n
\n

Other comparison operators also work in WHERE conditions, such as >, <, <=, and >=.

\n
select * from employees where salary >= 50000\n
\n

Ordering results using the ORDER BY clause

\n

Query results are shown in the same order the data was inserted. To control how the data is sorted, we can use the ORDER BY clause. Let's see an example.

\n
-- sorts the results first by salary in descending order, then by the last name in ascending order\nselect * from employees order by salary desc, last_name;\n
\n

We can pass a list of field names to order by and optionally choose asc or desc for the sort direction. The default is asc, so it doesn't need to be specified.

\n

Some SQL engines also support using field abbreviations when sorting.

\n
select name, salary, department from employees order by 3, 2 desc;\n
\n

In this case, the results are sorted by the department in ascending order first and then by salary in descending order. The numbers refer to the fields' position in the selection portion of the query, so 1 would be name, 2 would be salary, and so on.

\n

Note that the WHERE clause should come after the FROM clause. The ORDER BY clause always goes last.

\n
select * from employees where salary > 50000 order by last_name;\n
\n

Limiting results using the LIMIT clause

\n

When we wish to see only a limited number of records, we can use a LIMIT clause.

\n

The following returns the first ten records in the products table:

\n
select * from products\nlimit 10\n
\n

LIMIT clauses are often used in conjunction with ORDER BY. The following shows us the five cheapest products:

\n
select * from products\norder by price desc\nlimit 5\n
\n

Inserting data using INSERT

\n

An insert statement adds a new record to the database. All non-null fields must be listed out in the same order as their values. Some fields, like ids and timestamps, may be auto-generated and do not need to be included in an INSERT statement.

\n
-- we can add fields in any order; the values need to be in the same ordinal position\n-- the id will be assigned automatically\n  insert into Customers (Country, CustomerName, ContactName, Address, City, PostalCode)\n  values ('USA', 'WebDev School', 'Austen Allred', '1 WebDev Court', 'Provo', '84601');\n
\n

The values in an insert statement must not violate any restrictions and constraints that the database has in place, such as expected datatypes. We will learn more about constraints and schema design in a later section.

\n

Modifying recording using UPDATE

\n

When modifying a record, we identify a single record or a set of records to update using a WHERE clause. Then we can set the new value(s) in place.

\n
update Customers\nset City = 'Silicon Valley', Country = 'USA'\nwhere CustomerName = 'WebDev School'\n
\n

Technically the WHERE clause is not required, but leaving it off would result in every record within the table receiving the update.

\n

Removing records using DELETE

\n

When removing a record or set of records, we need only identify which record(s) to remove using a WHERE clause:

\n
delete from Customers\nwhere CustomerName = 'WebDev School`;\n
\n

Once again, the WHERE clause is not required, but leaving it off would remove every record in the table, so it's essential.

\n

\n
Raw SQL is a critical baseline skill. However, Node developers generally use an **Object Relational Mapper (ORM)** or **query builder** to write database commands in a backend codebase. Both **ORMs** and **query builders** are JavaScript libraries that allow us to interface with the database using a JavaScript version of the SQL language.\n

For example, instead of a raw SQL SELECT:

\n
SELECT * FROM users;\n
\n

We could use a query builder to write the same logic in JavaScript:

\n
db.select('*').from('users');\n
\n

Query builders are lightweight and easy to get off the ground, whereas ORMs use an object-oriented model and provide more heavy lifting within their rigid structure.

\n

We will use a query builder called knex.js (Links to an external site.).

\n

\n
### Knex Setup\n

To use Knex in a repository, we'll need to add two libraries:

\n
npm install knex sqlite3\n
\n

knex is our query builder library, and sqlite3 allows us to interface with a sqlite database. We'll learn more about sqlite and other database management systems in the following module. For now, know that you need both libraries.

\n

Next, we use Knex to set up a config file:

\n
const knex = require('knex');\n\nconst config = {\n  client: 'sqlite3',\n  connection: {\n    filename: './data/posts.db3',\n  },\n  useNullAsDefault: true,\n};\n\nmodule.exports = knex(config);\n
\n

To use the query builder elsewhere in our code, we need to call knex and pass in a config object. We'll be discussing Knex configuration more in a future module. Still, we only need the client, connection, and useNullAsDefault keys as shown above. The filename should point towards the pre-existing database file, which can be recognized by the .db3 extension.

\n

GOTCHA: The file path to the database should be with respect to the root of the repo, not the configuration file itself.

\n

Once Knex is configured, we can import the above config file anywhere in our codebase to access the database.

\n
const db = require('../data/db-config.js);\n
\n

The db object provides methods that allow us to begin building queries.

\n

SELECT using Knex

\n

In Knex, the equivalent of SELECT * FROM users is:

\n
db.select('*').from('users');\n
\n

There's a simpler way to write the same command:

\n
db('users');\n
\n

Using this, we could write a GET endpoint.

\n
router.get('/api/users', (req, res) => {\n  db('users')\n  .then(users => {\n    res.json(users);\n  })\n  .catch (err => {\n    res.status(500).json({ message: 'Failed to get users' });\n  });\n});\n
\n

NOTE: All Knex queries return promises.

\n

Knex also allows for a where clause. In Knex, we could write SELECT * FROM users WHERE id=1 as

\n
db('users').where({ id: 1 });\n
\n

This method will resolve to an array containing a single entry like so: [{ id: 1, name: 'bill' }].

\n

Using this, we might add a GET endpoint where a specific user:

\n
server.get('api/users/:id', (req, res) => {\n  const { id } = req.params;\n\ndb('users').where({ id })\n  .then(users => {\n    // we must check the length to find our if our user exists\n    if (users.length) {\n      res.json(users);\n    } else {\n      res.status(404).json({ message: 'Could not find user with given id.' })\n   })\n  .catch (err => {\n    res.status(500).json({ message: 'Failed to get user' });\n  });\n});\n
\n

INSERT using Knex

\n

In Knex, the equivalent of INSERT INTO users (name, age) VALUES ('Eva', 32) is:

\n
db('users').insert({ name: 'Eva', age: 32 });\n
\n

The insert method in Knex will resolve to an array containing the newly created id for that user like so: [3].

\n

UPDATE using Knex

\n

In knex, the equivalent of UPDATE users SET name='Ava', age=33 WHERE id=3; is:

\n
db('users').where({ id: 3 })\n.update({name: 'Ava', age: 33 });\n
\n

Note that the where method comes before update, unlike in SQL.

\n

Update will resolve to a count of rows updated.

\n

DELETE using Knex

\n

In Knex, the equivalent of DELETE FROM users WHERE age=33; is:

\n
db('users').where({ age: 33}).del();\n
\n

Once again, the where must come before the del. This method will resolve to a count of records removed.

\n
\n

\n
###\n

Here's a small project you can practice with.

\n

SQLlite Studio is an application that allows us to create, open, view, and modify SQLite databases. To fully understand what SQLite Studio is and how it works, we must also understand the concept of the Database Management Systems (DBMS).

\n

What is a DBMS?

\n

To manage digital databases we use specialized software called DataBase Management Systems (DBMS). These systems typically run on servers and are managed by DataBase Administrators (DBAs).

\n

In less technical terms, we need a type of software that will allow us to create, access, and generally manage our databases. In the world of relational databases, we specifically use Relational Database Mangement Systems (RDBMs). Some examples are Postgres, SQLite, MySQL, and Oracle.

\n

Choosing a DBMS determines everything from how you set up your database, to where and how the data is stored, to what SQL commands you can use. Most systems share the core of the SQL language that you've already learned.

\n

In other words, you can expect SELECT, UPDATE, INSERT, WHERE , and the like to be the same across all DBMSs, but the subtleties of the language may vary.

\n

What is SQLite?

\n

SQLite is the DBMS, as the name suggests, it is a more lightweight system and thus easier to get set up than some others.

\n

SQLite allows us to store databases as single files. SQLite projects have a .db3 extension. That is the database.

\n

SQLite is not a database (like relational, graph, or document are databases) but rather a database management system.

\n

Opening an existing database in SQLite Studio

\n

One useful visual interface we might use with a SQLite database is called SQLite Studio. Install SQLITE Studio here. (Links to an external site.)

\n

Once installed, we can use SQLite Studio to open any .db3 file from a previous lesson. We may view the tables, view the data, and even make changes to the database.

\n

For a more detailed look at SQLite Studio, follow along in the video above.

\n

\n
A **database schema** is the shape of our database. It defines what tables we'll have, which columns should exist within the tables and any restrictions on each column.\n

A well-designed database schema keeps the data well organized and can help ensure high-quality data.

\n

Note that while schema design is usually left to Database Administrators (DBAs), understanding schema helps when designing APIs and database logic. And in a smaller team, this step may fall on the developer.

\n

\n
For a look at schema design in SQLite Studio, follow along in the video above.\n

When designing a single table, we need to ask three things:

\n
    \n
  • What fields (or columns) are present?
    • \n
  • What type of data do we expect for each field?
    • \n
  • Are there other restrictions needed for each column?
    • \n
\n

Looking at the following schema diagram for an accounts table, we can the answer to each other those questions:

\n

Untitled

\n

Table Fields

\n

Choosing which fields to include in a table is relatively straight forward. What information needs to be tracked regarding this resource? In the real world, this is determined by the intended use of the product or app.

\n

However, this is one requirement every table should satisfy: a primary key. A primary key is a way to identify each entry in the database uniquely. It is most often represented as a auto-incrementing integer called id or [tablename]Id.

\n

Datatypes

\n

Each field must also have a specified datatype. The datatype available depends on our DBMS. Some supported datatype in SQLite include:

\n
    \n
  • Null: Missing or unknown information.
    • \n
  • Integer: Whole numbers.
    • \n
  • Real: Any number, including decimals.
    • \n
  • Text: Character data.
    • \n
  • Blob: a large binary object that can be used to store miscellaneous data.
    • \n
\n

Any data inserted into the table must match the datatypes determined in schema design.

\n

Constraints

\n

Beyond datatypes, we may add additional constraints on each field. Some examples include:

\n
    \n
  • Not Null: The field cannot be left empty
    • \n
  • Unique: No two records can have the same value in this field
    • \n
  • Primary key: — Indicates this field is the primary key. Both the not null and unique constraints will be enforced.
    • \n
  • Default: — Sets a default value if none is provided.
    • \n
\n

As with data types, any data that does not satisfy the schema constraints will be rejected from the database.

\n

\n

\n
### Multi-Table Design\n

Another critical component of schema design is to understand how different tables relate to each other. This will be covered in later lesson.

\n

Knex provides a schema builder, which allows us to write code to design our database schema. However, beyond thinking about columns and constraints, we must also consider updates.

\n

When a schema needs to be updated, a developer must feel confident that the changes go into effect everywhere. This means schema updates on the developer's local machine, on any testing or staging versions, on the production database, and then on any other developer's local machines. This is where migrations come into play.

\n

A database migration describes changes made to the structure of a database. Migrations include things like adding new objects, adding new tables, and modifying existing objects or tables.

\n

\n
### Knex Cli\n

To use migrations (and to make Knex setup easier), we need to use knex cli. Install knex globally with npm install -g knex.

\n

This allows you to use Knex commands within any repo that has knex as a local dependency. If you have any issues with this global install, you can use the npx knex command instead.

\n

Initializing Knex

\n

To start, add the knex and sqlite3 libraries to your repository.

\n

npm install knex sqlite3

\n

We've seen how to use manually create a config object to get started with Knex, but the best practice is to use the following command:

\n
knex init\n
\n

Or, if Knex isn't globally installed:

\n
npx knex init\n
\n

This command will generate a file in your root folder called knexfile.js. It will be auto populated with three config objects, based on different environments. We can delete all except for the development object.

\n
module.exports = {\n\ndevelopment: {\n    client: 'sqlite3',\n    connection: {\n      filename: './dev.sqlite3'\n    }\n  }\n\n};\n
\n

We'll need to update the location (or desired location) of the database as well as add the useNullAsDefault option. The latter option prevents crashes when working with sqlite3.

\n
module.exports = {\n\ndevelopment: {\n    // our DBMS driver\n    client: 'sqlite3',\n    // the location of our db\n    connection: {\n      filename: './data/database_file.db3',\n    },\n    // necessary when using sqlite3\n    useNullAsDefault: true\n  }\n\n};\n
\n

Now, wherever we configure our database, we may use the following syntax instead of hardcoding in a config object.

\n
const knex = require('knex');\n\nconst config = require('../knexfile.js');\n\n// we must select the development object from our knexfile\nconst db = knex(config.development);\n\n// export for use in codebase\nmodule.exports = db;\n
\n

Knex Migrations

\n

Once our knexfile is set up, we can begin creating migrations. Though it's not required, we are going to add an addition option to the config object to specify a directory for the migration files.

\n
development: {\n    client: 'sqlite3',\n    connection: {\n      filename: './data/produce.db3',\n    },\n    useNullAsDefault: true,\n    // generates migration files in a data/migrations/ folder\n    migrations: {\n      directory: './data/migrations'\n    }\n  }\n
\n

We can generate a new migration with the following command:

\n

knex migrate:make [migration-name]

\n

If we needed to create an accounts table, we might run:

\n

knex migrate:make create-accounts

\n

Note that inside data/migrations/ a new file has appeared. Migrations have a timestamp in their filenames automatically. Wither you like this or not, do not edit migration names.

\n

The migration file should have both an up and a down function. Within the up function, we write the ended database changes. Within the down function, we write the code to undo the up functions. This allows us to undo any changes made to the schema if necessary.

\n
exports.up = function(knex, Promise) {\n  // don't forget the return statement\n  return knex.schema.createTable('accounts', tbl => {\n    // creates a primary key called id\n    tbl.increments();\n    // creates a text field called name which is both required and unique\n    tbl.text('name', 128).unique().notNullable();\n    // creates a numeric field called budget which is required\n    tbl.decimal('budget').notNullable();\n  });\n};\n\nexports.down = function(knex, Promise) {\n  // drops the entire table\n  return knex.schema.dropTableIfExists('accounts');\n};\n
\n

References for these methods are found in the schema builder section of the Knex docs (Links to an external site.).

\n

At this point, the table is not yet created. To run this (and any other) migrations, use the command:

\n

knex migrate:latest

\n

Note if the database does not exist, this command will auto-generate one. We can use SQLite Studio to confirm that the accounts table has been created.

\n

Changes and Rollbacks

\n

If later down the road, we realize you need to update your schema, you shouldn't edit the migration file. Instead, you will want to create a new migration with the command:

\n

knex migrate:make accounts-schema-update

\n

Once we've written our updates into this file we save and close with:

\n

knex migrate:latest

\n

If we migrate our database and then quickly realize something isn't right, we can edit the migration file. However, first, we need to rolllback (or undo) our last migration with:

\n

knex migrate:rollback

\n

Finally, we are free to rerun that file with knex migrate latest.

\n

NOTE: A rollback should not be used to edit an old migration file once that file has accepted into a main branch. However, an entire team may use a rollback to return to a previous version of a database.

\n

Overview

\n

Knex provides a schema builder, which allows us to write code to design our database schema. However, beyond thinking about columns and constraints, we must also consider updates.

\n

When a schema needs to be updated, a developer must feel confident that the changes go into effect everywhere. This means schema updates on the developer's local machine, on any testing or staging versions, on the production database, and then on any other developer's local machines. This is where migrations come into play.

\n

A database migration describes changes made to the structure of a database. Migrations include things like adding new objects, adding new tables, and modifying existing objects or tables.

\n

\n
### Knex Cli\n

To use migrations (and to make Knex setup easier), we need to use knex cli. Install knex globally with npm install -g knex.

\n

This allows you to use Knex commands within any repo that has knex as a local dependency. If you have any issues with this global install, you can use the npx knex command instead.

\n

Initializing Knex

\n

To start, add the knex and sqlite3 libraries to your repository.

\n

npm install knex sqlite3

\n

We've seen how to use manually create a config object to get started with Knex, but the best practice is to use the following command:

\n
knex init\n
\n

Or, if Knex isn't globally installed:

\n
npx knex init\n
\n

This command will generate a file in your root folder called knexfile.js. It will be auto populated with three config objects, based on different environments. We can delete all except for the development object.

\n
module.exports = {\n\ndevelopment: {\n    client: 'sqlite3',\n    connection: {\n      filename: './dev.sqlite3'\n    }\n  }\n\n};\n
\n

We'll need to update the location (or desired location) of the database as well as add the useNullAsDefault option. The latter option prevents crashes when working with sqlite3.

\n
module.exports = {\n\ndevelopment: {\n    // our DBMS driver\n    client: 'sqlite3',\n    // the location of our db\n    connection: {\n      filename: './data/database_file.db3',\n    },\n    // necessary when using sqlite3\n    useNullAsDefault: true\n  }\n\n};\n
\n

Now, wherever we configure our database, we may use the following syntax instead of hardcoding in a config object.

\n
const knex = require('knex');\n\nconst config = require('../knexfile.js');\n\n// we must select the development object from our knexfile\nconst db = knex(config.development);\n\n// export for use in codebase\nmodule.exports = db;\n
\n

Knex Migrations

\n

Once our knexfile is set up, we can begin creating migrations. Though it's not required, we are going to add an addition option to the config object to specify a directory for the migration files.

\n
development: {\n    client: 'sqlite3',\n    connection: {\n      filename: './data/produce.db3',\n    },\n    useNullAsDefault: true,\n    // generates migration files in a data/migrations/ folder\n    migrations: {\n      directory: './data/migrations'\n    }\n  }\n
\n

We can generate a new migration with the following command:

\n

knex migrate:make [migration-name]

\n

If we needed to create an accounts table, we might run:

\n

knex migrate:make create-accounts

\n

Note that inside data/migrations/ a new file has appeared. Migrations have a timestamp in their filenames automatically. Wither you like this or not, do not edit migration names.

\n

The migration file should have both an up and a down function. Within the up function, we write the ended database changes. Within the down function, we write the code to undo the up functions. This allows us to undo any changes made to the schema if necessary.

\n
exports.up = function(knex, Promise) {\n  // don't forget the return statement\n  return knex.schema.createTable('accounts', tbl => {\n    // creates a primary key called id\n    tbl.increments();\n    // creates a text field called name which is both required and unique\n    tbl.text('name', 128).unique().notNullable();\n    // creates a numeric field called budget which is required\n    tbl.decimal('budget').notNullable();\n  });\n};\n\nexports.down = function(knex, Promise) {\n  // drops the entire table\n  return knex.schema.dropTableIfExists('accounts');\n};\n
\n

References for these methods are found in the schema builder section of the Knex docs (Links to an external site.).

\n

At this point, the table is not yet created. To run this (and any other) migrations, use the command:

\n

knex migrate:latest

\n

Note if the database does not exist, this command will auto-generate one. We can use SQLite Studio to confirm that the accounts table has been created.

\n

Changes and Rollbacks

\n

If later down the road, we realize you need to update your schema, you shouldn't edit the migration file. Instead, you will want to create a new migration with the command:

\n

knex migrate:make accounts-schema-update

\n

Once we've written our updates into this file we save and close with:

\n

knex migrate:latest

\n

If we migrate our database and then quickly realize something isn't right, we can edit the migration file. However, first, we need to rolllback (or undo) our last migration with:

\n

knex migrate:rollback

\n

Finally, we are free to rerun that file with knex migrate latest.

\n

NOTE: A rollback should not be used to edit an old migration file once that file has accepted into a main branch. However, an entire team may use a rollback to return to a previous version of a database.

\n

Overview

\n

Often we want to pre-populate our database with sample data for testing. Seeds allow us to add and reset sample data easily.

\n

Follow Along

\n

The Knex command-line tool offers a way to seed our database; in other words, pre-populate our tables.

\n

Similarly to migrations, we want to customize where our seed files are generated using our knexfile

\n
development: {\n    client: 'sqlite3',\n    connection: {\n      filename: './data/produce.db3',\n    },\n    useNullAsDefault: true,\n    // generates migration files in a data/migrations/ folder\n    migrations: {\n      directory: './data/migrations'\n    },\n    seeds: {\n      directory: './data/seeds'\n    }\n  }\n
\n

To create a seed run: knex seed:make 001-seedName

\n

Numbering is a good idea because Knex doesn't attach a timestamp to the name like migrate does. Adding numbers to the file name, we can control the order in which they run.

\n

We want to create seeds for our accounts table:

\n

knex seed:make 001-accounts

\n

A file will appear in the designated seed folder.

\n
exports.seed = function(knex, Promise) {\n  // we want to remove all data before seeding\n  // truncate will reset the primary key each time\n  return knex('accounts').truncate()\n    .then(function () {\n      // add data into insert\n      return knex('accounts').insert([\n        { name: 'Stephenson', budget: 10000 },\n        { name: 'Gordon & Gale', budget: 40400 },\n      ]);\n    });\n};\n
\n

Run the seed files by typing:

\n

knex seed:run

\n

You can now use SQLite Studio to confirm that the accounts table has two entries.

\n
\n

\n
### SQL & PostgreSQL\n

Foreign keys are a type of table field used for creating links between tables. Like primary keys, they are most often integers that identify (rather than store) data. However, whereas a primary key is used to id rows in a table, foreign keys are used to connect a record in one table to a record in a second table.

\n

\n

Consider the following farms and ranchers tables.

\n

Untitled

\n

Untitled

\n

The farm_id in the ranchers table is an example of a foreign key. Each entry in the farm_id (foreign key) column corresponds to an id (primary key) in the farms table. This allows us to track which farm each rancher belongs to while keeping the tables normalized.

\n

If we could only see the ranchers table, we would know that John, Jane, and Jen all work together and that Jim and Jay also work together. However, to know where any of them work, we would need to look at the farms table.

\n

Now that we understand the basics of querying data from a single table, let's move on to selecting data from multiple tables using JOIN operations.

\n

Overview

\n

We can use a JOIN to combine query data from multiple tables using a single SELECT statement.

\n

There are different types of joins; some are listed below:

\n
    \n
  • inner joins.
    • \n
  • outer joins.
    • \n
  • left joins.
    • \n
  • right joins.
    • \n
  • cross joins.
    • \n
  • non-equality joins.
    • \n
  • self joins.
    • \n
\n

Using joins requires that the two tables of interest contain at least one field with shared information. For example, if a departments table has an id field, and an employee table has a departmentid_ field, and the values that exist in the id column of the departments table live in the departmentid_ field of the employee table, we can use those fields to join both tables like so:

\n
select * from employees\njoin departments on employees.department_id = departments.id\n
\n

This query will return the data from both tables for every instance where the ON condition is true. If there are employees with no value for departmentid or where the value stored in the field does not correspond to an existing id in the departments table, then that record will NOT be returned. In a similar fashion, any records from the departments table that don't have an employee associated with them will also be omitted from the results. Basically, if the id* does not show as the value of department_id for an employee, it won't be able to join.

\n

We can shorten the condition by giving the table names an alias. This is a common practice. Below is the same example using aliases, picking which fields to return and sorting the results:

\n
select d.id, d.name, e.id, e.first_name, e.last_name, e.salary\nfrom employees as e\njoin departments as d\n  on e.department_id = d.id\norder by d.name, e.last_name\n
\n

Notice that we can take advantage of white space and indentation to make queries more readable.

\n

There are several ways of writing joins, but the one shown here should work on all database management systems and avoid some pitfalls, so we recommend it.

\n

The syntax for performing a similar join using Knex is as follows:

\n
db('employees as e')\n  .join('departments as d', 'e.department_id', 'd.id')\n  .select('d.id', 'd.name', 'e.first_name', 'e.last_name', 'e.salary')\n
\n

Follow Along

\n

A good explanation of how the different types of joins can be seen in this article from w3resource.com (Links to an external site.).

\n

What is SQL Joins?

\n

An SQL JOIN clause combines rows from two or more tables. It creates a set of rows in a temporary table.

\n

How to Join two tables in SQL?

\n

A JOIN works on two or more tables if they have at least one common field and have a relationship between them.

\n

JOIN keeps the base tables (structure and data) unchanged.

\n

Join vs. Subquery

\n
    \n
  • JOINs are faster than a subquery and it is very rare that the opposite.
    • \n
  • In JOINs the RDBMS calculates an execution plan, that can predict, what data should be loaded and how much it will take to processed and as a result this process save some times, unlike the subquery there is no pre-process calculation and run all the queries and load all their data to do the processing.
    • \n
  • A JOIN is checked conditions first and then put it into table and displays; where as a subquery take separate temp table internally and checking condition.
    • \n
  • When joins are using, there should be connection between two or more than two tables and each table has a relation with other while subquery means query inside another query, has no need to relation, it works on columns and conditions.
    • \n
\n

SQL JOINS: EQUI JOIN and NON EQUI JOIN

\n

The are two types of SQL JOINS — EQUI JOIN and NON EQUI JOIN

\n
    \n
  1. SQL EQUI JOIN :
    2. \n
\n

The SQL EQUI JOIN is a simple SQL join uses the equal sign(=) as the comparison operator for the condition. It has two types — SQL Outer join and SQL Inner join.

\n
    \n
  1. SQL NON EQUI JOIN :
    2. \n
\n

The SQL NON EQUI JOIN is a join uses comparison operator other than the equal sign like >, <, >=, <= with the condition.

\n

SQL EQUI JOIN : INNER JOIN and OUTER JOIN

\n

The SQL EQUI JOIN can be classified into two types — INNER JOIN and OUTER JOIN

\n
    \n
  1. SQL INNER JOIN
    2. \n
\n

This type of EQUI JOIN returns all rows from tables where the key record of one table is equal to the key records of another table.

\n
    \n
  1. SQL OUTER JOIN
    2. \n
\n

This type of EQUI JOIN returns all rows from one table and only those rows from the secondary table where the joined condition is satisfying i.e. the columns are equal in both tables.

\n

In order to perform a JOIN query, the required information we need are:

\n

a) The name of the tablesb) Name of the columns of two or more tables, based on which a condition will perform.

\n

Syntax:

\n
FROM table1\njoin_type table2\n[ON (join_condition)]\n
\n

Parameters:

\n

Untitled

\n

Pictorial Presentation of SQL Joins:

\n
**Example:**\n

Sample table: company

\n

Sample table: foods

\n

To join two tables 'company' and 'foods', the following SQL statement can be used :

\n

SQL Code:

\n
SELECT  company.company_id,company.company_name,\nfoods.item_id,foods.item_name\nFROM company,foods;\n
\n

Copy

\n

Output:

\n
COMPAN COMPANY_NAME              ITEM_ID  ITEM_NAME\n------ ------------------------- -------- ---------------\n18     Order All                 1        Chex Mix\n18     Order All                 6        Cheez-It\n18     Order All                 2        BN Biscuit\n18     Order All                 3        Mighty Munch\n18     Order All                 4        Pot Rice\n18     Order All                 5        Jaffa Cakes\n18     Order All                 7        Salt n Shake\n15     Jack Hill Ltd             1        Chex Mix\n15     Jack Hill Ltd             6        Cheez-It\n15     Jack Hill Ltd             2        BN Biscuit\n15     Jack Hill Ltd             3        Mighty Munch\n15     Jack Hill Ltd             4        Pot Rice\n15     Jack Hill Ltd             5        Jaffa Cakes\n15     Jack Hill Ltd             7        Salt n Shake\n16     Akas Foods                1        Chex Mix\n16     Akas Foods                6        Cheez-It\n16     Akas Foods                2        BN Biscuit\n16     Akas Foods                3        Mighty Munch\n16     Akas Foods                4        Pot Rice\n16     Akas Foods                5        Jaffa Cakes\n16     Akas Foods                7        Salt n Shake\n.........\n.........\n.........\n
\n

Overview

\n

While we can write database code directly into our endpoints, best practices dictate that all database logic exists in separate, modular methods. These files containing database access helpers are often called models

\n

Follow Along

\n

To handle CRUD operations for a single resource, we would want to create a model (or database access file) containing the following methods:

\n
function find() {\n}\n\nfunction findById(id) {\n}\n\nfunction add(user) {\n}\n\nfunction update(changes, id) {\n}\n\nfunction remove(id) {\n}\n
\n

Each of these functions would use Knex logic to perform the necessary database operation.

\n
function find() {\n  return db('users');\n}\n
\n

For each method, we can choose what value to return. For example, we may prefer findById() to return a single user object rather than an array.

\n
function findById(id) {\n// first() returns the first entry in the db matching the query\n  return db('users').where({ id }).first();\n}\n
\n

We can also use existing methods like findById() to help add() return the new user (instead of just the id).

\n
function add(user) {\n  db('users').insert(user)\n    .then(ids => {\n      return findById(ids[0]);\n    });\n}\n
\n

Once all methods are written as desired, we can export them like so:

\n
module.exports = {\n  find,\n  findById,\n  add,\n  update,\n  delete,\n}\n
\n

…and use the helpers in our endpoints

\n
const User = require('./user-model.js');\n\nrouter.get('/', (req, res) => {\n  User.find()\n    .then(users => {\n      res.json(users);\n    })\n    .catch(&nbsp;err => {});\n});\n
\n

There should no be knex code in the endpoints themselves.

\n
\n

\n
###\n

Normalization is the process of designing or refactoring database tables for maximum consistency and minimum redundancy.

\n

With objects, we're used to denormalized data, stored with ease of use and speed in mind. Non-normalized tables are considered ineffective in relational databases.

\n

\n

Data normalization is a deep topic in database design. To begin thinking about it, we'll explore a few basic guidelines and some data examples that violate these rules.

\n

Normalization Guidelines

\n
\n

Each record has a primary key.

\n
\n
\n

No fields are repeated.

\n
\n
\n

All fields relate directly to the key data.

\n
\n
\n

Each field entry contains a single data point.

\n
\n
\n

There are no redundant entries.

\n
\n

Denormalized Data

\n

Untitled

\n

This table has two issues. There is no proper id field (as multiple farms may have the same name), and multiple fields are representing the same type of data: animals.

\n

Untitled

\n

While we have now eliminated the first two issues, we now have multiple entries in one field, separated by commas. This isn't good either, as its another example of denormalization. There is no “array” data type in a relational database, so each field must contain only one data point.

\n

Untitled

\n

Now we've solved the multiple fields issue, but we created repeating data (the farm field), which is also an example of denormalization. As well, we can see that if we were tracking additional ranch information (such as annual revenue), that field is only vaguely related to the animal information.

\n

When these issues begin arising in your schema design, it means that you should separate information into two or more tables.

\n

Anomalies

\n

Obeying the above guidelines prevent anomalies in your database when inserting, updating, or deleting. For example, imagine if the revenue of Beech Ranch changed. With our denormalized schema, it may get updated in some records but not others:

\n

Untitled

\n

Similarly, if Beech Ranch shut down, there would be three (if not more) records that needed to be deleted to remove a single farm.

\n

Thus a denormalized table opens the door for contradictory, confusing, and unusable data.

\n

\n

What issues does the following table have?

\n

Untitled

\n

\n

There are three types of relationships:

\n
\n

One to one.

\n
\n
\n

One to many.

\n
\n
\n

Many to many.

\n
\n

Determining how data is related can provide a set of guidelines for table representation and guides the use of foreign keys to connect said tables.

\n

\n

One to One Relationships

\n

Imagine we are storing the financial projections for a series of farms.

\n

We may wish to attach fields like farm name, address, description, projected revenue, and projected expenses. We could divide these fields into two categories: information related to the farm directly (name, address, description) and information related to the financial projections (revenue, expenses).

\n

We would say that farms and projections have a one-to-one relationship. This is to say that every farm has exactly one projection, and every project corresponds to exactly one farm.

\n

This data can be represented in two tables: farms and projections

\n

Untitled

\n

Untitled

\n

The farm_id is the foreign key that links farms and projections together.

\n

Notes about one-to-one relationships:

\n
    \n
  • The foreign key should always have a unique constraint to prevent duplicate entries. In the example above, we wouldn't want to allow multiple projections records for one farm.
    • \n
  • The foreign key can be in either table. For example, we may have had a projection_id in the farms table instead. A good rule of thumb is to put the foreign key in whichever table is more auxiliary to the other.
    • \n
  • You can represent one-to-one data in a single table without creating anomalies. However, it is sometimes prudent to use two tables as shown above to keep separate concerns in separate tables.
    • \n
\n

One to Many Relationships

\n

Now imagine, we are storing the full-time ranchers employed at each farm. In this case, each rancher would only work at one farm however, each farm may have multiple ranchers.

\n

This is called a one-to-many relationship.

\n

This is the most common type of relationship between entities. Some other examples:

\n
    \n
  • One customer can have many orders.
    • \n
  • One user can have many posts.
    • \n
  • One post can have many comments.
    • \n
\n

Manage this type of relationship by adding a foreign key on the “many” table of the relationship that points to the primary key on the “one” table. Consider the farms and ranchers tables.

\n

Untitled

\n

Untitled

\n

In a many-to-many relationship, the foreign key (in this case farm_id) should not be unique.

\n

Many to Many Relationships

\n

If we want to track animals on a farm as well, we must explore the many-to-many relationship. A farm has multiple animals, and multiple of each type of animal is present at multiple different farms.

\n

Some other examples:

\n
    \n
  • an order can have many products and the same product will appear in many orders.
    • \n
  • a book can have more than one author, and an author can write more than one book.
    • \n
\n

To model this relationship, we need to introduce an intermediary table that holds foreign keys that reference the primary key on the related tables. We now have a farms, animals, and farm_animals table.

\n

Untitled

\n

Untitled

\n

Untitled

\n

While each foreign key on the intermediary table is not unique, the combinations of keys should be unique.

\n

\n
The Knex query builder library also allows us to create multi-table schemas include foreign keys. However, there are a few extra things to keep in mind when designing a multi-table schema, such as using the correct order when creating tables, dropping tables, seeding data, and removing data.\n

We have to consider the way that delete and updates through our API will impact related data.

\n

\n

Foreign Key Setup

\n

In Knex, foreign key restrictions don't automatically work. Whenever using foreign keys in your schema, add the following code to your knexfile. This will prevent users from entering bad data into a foreign key column.

\n
development: {\n  client: 'sqlite3',\n  useNullAsDefault: true,\n  connection: {\n    filename: './data/database.db3',\n  },\n  // needed when using foreign keys\n  pool: {\n    afterCreate: (conn, done) => {\n      // runs after a connection is made to the sqlite engine\n      conn.run('PRAGMA foreign_keys = ON', done); // turn on FK enforcement\n    },\n  },\n},\n
\n

Migrations

\n

Let's look at how we might track our farms and ranchers using Knex. In our migration file's up function, we would want to create two tables:

\n
exports.up = function(knex, Promise) {\n  return knex.schema\n    .createTable('farms', tbl => {\n      tbl.increments();\n      tbl.string('farm_name', 128)\n        .notNullable();\n    })\n    // we can chain together createTable\n    .createTable('ranchers', tbl => {\n      tbl.increments();\n      tbl.string('rancher_name', 128);\n      tbl.integer('farm_id')\n        // forces integer to be positive\n        .unsigned()\n        .notNullable()\n        .references('id')\n        // this table must exist already\n        .inTable('farms')\n    })\n};\n
\n

Note that the foreign key can only be created after the reference table.

\n

In the down function, the opposite is true. We always want to drop a table with a foreign key before dropping the table it references.

\n
exports.down = function(knex, Promise) {\n  // drop in the opposite order\n  return knex.schema\n    .dropTableIfExists('ranchers')\n    .dropTableIfExists('farms')\n};\n
\n

In the case of a many-to-many relationship, the syntax for creating an intermediary table is identical, except for one additional piece. We need a way to make sure our combination of foreign keys is unique.

\n
.createTable('farm_animals', tbl => {\n  tbl.integer('farm_id')\n    .unsigned()\n    .notNullable()\n    .references('id')\n    // this table must exist already\n    .inTable('farms')\n  tbl.integer('animal_id')\n    .unsigned()\n    .notNullable()\n    .references('id')\n    // this table must exist already\n    .inTable('animals')\n\n// the combination of the two keys becomes our primary key\n  // will enforce unique combinations of ids\n  tbl.primary(['farm_id', 'animal_id']);\n});\n
\n

Seeds

\n

Order is also a concern when seeding. We want to create seeds in the same order we created our tables. In other words, don't create a seed with a foreign key, until that reference record exists.

\n

In our example, make sure to write the 01-farms seed file and then the 02-ranchers seed file.

\n

However, we run into a problem with truncating our seeds, because we want to truncate 02-ranchers before 01-farms. A library called knex-cleaner provides an easy solution for us.

\n

Run knex seed:make 00-cleanup and npm install knex-cleaner. Inside the cleanup seed, use the following code.

\n
const cleaner = require('knex-cleaner');\n\nexports.seed = function(knex) {\n  return cleaner.clean(knex, {\n    mode: 'truncate', // resets ids\n    ignoreTables: ['knex_migrations', 'knex_migrations_lock'], // don't empty migration tables\n  });\n};\n
\n

This removes all tables (excluding the two tables that track migrations) in the correct order before any seed files run.

\n

Cascading

\n

If a user attempt to delete a record that is referenced by another record (such as attempting to delete Morton Ranch when entries in our ranchers table reference that record), by default, the database will block the action. The same thing can happen when updating a record when a foreign key reference.

\n

If we want that to override this default, we can delete or update with cascade. With cascade, deleting a record also deletes all referencing records, we can set that up in our schema.

\n
.createTable('ranchers', tbl => {\n    tbl.increments();\n    tbl.string('rancher_name', 128);\n    tbl.integer('farm_id')\n    .unsigned()\n    .notNullable()\n    .references('id')\n    .inTable('farms')\n    .onUpdate('CASCADE');\n    .onDelete('CASCADE')\n})\n
"},{"url":"/docs/data-structures/big-o/","relativePath":"docs/data-structures/big-o.md","relativeDir":"docs/data-structures","base":"big-o.md","name":"big-o","frontmatter":{"title":"Big-O Notation","weight":0,"excerpt":"Why is looking at runtime not a reliable method of calculating time complexity?","seo":{"title":"Big-O Notation","description":"A Quick Guide to Big-O Notation, Memoization, Tabulation, and Sorting Algorithms by Example","robots":[],"extra":[]},"template":"docs"},"html":"

A Quick Guide to Big-O Notation, Memoization, Tabulation, and Sorting Algorithms by Example

\n

\n\n
    \n
  • Why is looking at runtime not a reliable method of calculating time complexity?
    • \n
  • Not all computers are made equal( some may be stronger and therefore boost our runtime speed )
    • \n
  • How many background processes ran concurrently with our program that was being tested?
    • \n
  • We also need to ask if our code remains performant if we increase the size of the input.
    • \n
  • \n

    The real question we need to answering is: How does our performance scale?.

    \n\n### big 'O' notation\n
    • \n
  • Big O Notation is a tool for describing the efficiency of algorithms with respect to the size of the input arguments.
    • \n
  • Since we use mathematical functions in Big-O, there are a few big picture ideas that we'll want to keep in mind:
    • \n
  • The function should be defined by the size of the input.
    • \n
  • Smaller Big O is better (lower time complexity)
    • \n
  • Big O is used to describe the worst case scenario.
    • \n
  • Big O is simplified to show only its most dominant mathematical term.
    • \n
\n

Simplifying Math Terms

\n
    \n
  • We can use the following rules to simplify the our Big O functions:
    • \n
  • Simplify Products : If the function is a product of many terms, we drop the terms that don't depend on n.
    • \n
  • Simplify Sums : If the function is a sum of many terms, we drop the non-dominant terms.
    • \n
  • n : size of the input
    • \n
  • T(f) : unsimplified math function
    • \n
  • O(f) : simplified math function.
    • \n
\n

Putting it all together

\n

\n
    \n
  • First we apply the product rule to drop all constants.
    • \n
  • Then we apply the sum rule to select the single most dominant term.
    • \n
\n
\n

Complexity Classes

\n

Common Complexity Classes

\n

There are 7 major classes in Time Complexity

\n

\n

O(1) Constant

\n
\n

The algorithm takes roughly the same number of steps for any input size.

\n
\n

O(log(n)) Logarithmic

\n
\n

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!)

\n
\n
// O(log(n))\nfunction logarithmic1(n) {\n  if (n <= 1) return;\n  logarithmic1(n / 2);\n}\n\n// O(log(n))\nfunction logarithmic2(n) {\n  let i = n;\n  while (i > 1) {\n    i /= 2;\n  }\n}\n
\n

view rawlogorithmic.js hosted with ❤ by GitHub

\n

O(n) Linear

\n
\n

Linear algorithm's will access each item of the input \"once\".

\n
\n
// O(n)\nfunction linear1(n) {\n  for (let i = 1; i <= n; i++) {\n    console.log(i);\n  }\n}\n\n// O(n), where n is the length of the array\nfunction linear2(array) {\n  for (let i = 0; i < array.length; i++) {\n    console.log(i);\n  }\n}\n\n// O(n)\nfunction linear3(n) {\n  if (n === 1) return;\n  linear3(n - 1);\n}\n
\n

view rawlinear.js hosted with ❤ by GitHub

\n

O(nlog(n)) Log Linear Time

\n
\n

Combination of linear and logarithmic behavior, we will see features from both classes.

\n
\n
\n

Algorithm's that are log-linear will use** both recursion AND iteration.**

\n
\n
// O(n * log(n))\nfunction loglinear(n) {\n  if (n <= 1) return;\n\n  for (let i = 1; i <= n; i++) {\n    console.log(i);\n  }\n\n  loglinear(n / 2);\n  loglinear(n / 2);\n}\n
\n

view rawloglin.js hosted with ❤ by GitHub

\n

O(nc) Polynomial

\n
\n

C is a fixed constant.\n`

\n
\n
// O(n^2)\nfunction quadratic(n) {\n  for (let i = 1; i <= n; i++) {\n    for (let j = 1; j <= n; j++) {}\n  }\n}\n//Example of Quadratic and Cubic runtime.\n// O(n^3)\nfunction cubic(n) {\n  for (let i = 1; i <= n; i++) {\n    for (let j = 1; j <= n; j++) {\n      for (let k = 1; k <= n; k++) {}\n    }\n  }\n}\n
\n

view rawpoly.js hosted with ❤ by GitHub

\n

O(c^n) Exponential

\n
\n

C is now the number of recursive calls made in each stack frame.

\n
\n
\n

Algorithm's with exponential time are VERY SLOW.

\n
\n
// O(2^n)\nfunction exponential2n(n) {\n  if (n === 1) return;\n  exponential_2n(n - 1);\n  exponential_2n(n - 1);\n}\n\n// O(3^n)\nfunction exponential3n(n) {\n  if (n === 0) return;\n  exponential_3n(n - 1);\n  exponential_3n(n - 1);\n  exponential_3n(n - 1);\n}\n
\n

view rawexponential.js hosted with ❤ by GitHub

\n
\n

Memoization

\n
    \n
  • Memoization : a design pattern used to reduce the overall number of calculations that can occur in algorithms that use recursive strategies to solve.
    • \n
  • 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.
    • \n
  • Two features that comprise memoization:
    • \n
  • FUNCTION MUST BE RECURSIVE.
    • \n
  • Our additional Data Structure is usually an object (we refer to it as our memo... or sometimes cache!)
    • \n
\n

\n

\n

Memoizing Factorial

\n

Our memo object is mapping out our arguments of factorial to it's return value.

\n
    \n
  • Keep in mind we didn't improve the speed of our algorithm.
    • \n
\n

Memoizing Fibonacci

\n

\n
    \n
  • Our time complexity for Fibonacci goes from O(2^n) to O(n) after applying memoization.
    • \n
\n

The Memoization Formula

\n
\n

Rules:

\n
\n
    \n
  1. Write the unoptimized brute force recursion (make sure it works);
    2. \n
  2. Add memo object as an additional argument .
    3. \n
  3. Add a base case condition that returns the stored value if the function's argument is in the memo.
    4. \n
  4. 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.
    5. \n
\n

Things to remember

\n
    \n
  1. When solving DP problems with Memoization, it is helpful to draw out the visual tree first.
    2. \n
  2. When you notice duplicate sub-tree's that means we can memoize.
    3. \n
\n
   function fastFib(n, memo = {}) { \n   if (n in memo) return memo[n]; \n   if (n === 1 || n === 2) return 1; \n   memo[n] = fastFib(n - 1, memo) + fastFib(n - 2, memo); \n   return memo[n]; \n   } \n   fastFib(6); // => 8 \n   fastFib(50); // => 12586269025 |\n
\n

view rawfastfib.js hosted with ❤ by GitHub

\n
\n

Tabulation

\n

Tabulation Strategy

\n
\n

Use When:

\n
\n
    \n
  • The function is iterative and not recursive.
    • \n
  • The accompanying DS is usually an array.
    • \n
\n
   function fib(n) { \n   let mostRecentCalcs = [0, 1]; \n   if (n === 0) return mostRecentCalcs[0]; \n   for (let i = 2; i <= n; i++) { \n   const [secondLast, last] = mostRecentCalcs; \n   mostRecentCalcs = [last, secondLast + last]; \n   } \n   return mostRecentCalcs[1]; \n   } |\n
\n

view rawtabfib.js hosted with ❤ by GitHub

\n

Steps for tabulation

\n
    \n
  • Create a table array based off the size of the input.
    • \n
  • Initialize some values in the table to 'answer' the trivially small subproblem.
    • \n
  • Iterate through the array and fill in the remaining entries.
    • \n
  • Your final answer is usually the last entry in the table.
    • \n
\n
\n

Memo and Tab Demo with Fibonacci

\n
\n

Normal Recursive Fibonacci

\n
\n

function fibonacci(n) {
\nif (n <= 2) return 1;
\nreturn fibonacci(n - 1) + fibonacci(n - 2);
\n}

\n
\n

Memoization Fibonacci 1

\n
\n
   function fibMemo(n, memo = { 0: 0, 1: 1 }) { \n   if (n in memo) return memo[n]; \n   memo[n] = fibMemo(n - 1) + fibMemo(n - 2); \n   return memo[n]; \n   } |\n
\n

view rawfib-memo.js hosted with ❤ by GitHub

\n
\n

Memoization Fibonacci 2

\n
\n
   function fib(n, memo) { \n   memo = memo || {}; \n   if (memo[n]) return memo[n]; \n   if (n <= 2) return 1; \n   return (memo[n] = fib(n - 1, memo) + fib(n - 2, memo)); \n   } |\n
\n

view rawmemo-fib2.js hosted with ❤ by GitHub

\n
\n

Tabulated Fibonacci

\n
\n
   function tabFib(n) { \n   let table = new Array(n); \n   table[0] = 0; \n   table[1] = 1; \n   table[2] = 1; \n   for (i = 3; i <= n; i++) { \n   table[i] = table[i - 1] + table[i - 2]; \n   console.log(table); \n   } \n   return table[n]; \n   } |\n
\n

view rawtabfib.js hosted with ❤ by GitHub

\n

Example of Linear Search

\n
   function search(array, term) { \n   for (let i = 0; i < array.length; i++) { \n   if (array[i] === term) { \n   return i; \n   } \n   } \n   return -1; \n   } |\n
\n

view rawlinsearch.js hosted with ❤ by GitHub

\n
    \n
  • Worst Case Scenario: The term does not even exist in the array.
    • \n
  • Meaning: If it doesn't exist then our for loop would run until the end therefore making our time complexity O(n).
    • \n
\n
\n

Sorting Algorithms

\n

Bubble Sort

\n

Time Complexity: Quadratic O(n^2)

\n
    \n
  • 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.
    • \n
\n

Space Complexity: O(1)

\n
    \n
  • Bubble Sort will always use the same amount of memory regardless of n.
    • \n
\n

\n
   function swap(array, idx1, idx2) { \n   [array[idx1], array[idx2]] = [array[idx2], array[idx1]]; \n   } \n   function bubbleSort(array) { \n   let swapped = false; \n   while (!swapped) { \n   swapped = true; \n   for (let i = 0; i < array.length; i++) { \n   if (array[i] > array[i + 1]) { \n   swap(array, i, i + 1); \n   swapped = false; \n   } \n   } \n   } \n   return array; \n   } \n   //Alt SLN------------------------------------------------- \n   function bubbleSort(array) { \n   let sorted = false; \n   while (!sorted) { \n   sorted = true; \n   for (let i = 0; i < array.length; i++) { \n   if (array[i] > array[i + 1]) { \n   let temp = arr[i]; \n   array[i] = array[i + 1]; \n   array[i + 1] = temp; \n   sorted = false; \n   } \n   } \n   } \n   return array; \n   } |\n
\n

view rawbub2.js hosted with ❤ by GitHub

\n
    \n
  • The first major sorting algorithm one learns in introductory programming courses.
    • \n
  • Gives an intro on how to convert unsorted data into sorted data.
    • \n
\n
\n

It's almost never used in production code because:

\n
\n
    \n
  • It's not efficient
    • \n
  • It's not commonly used
    • \n
  • There is stigma attached to it
    • \n
  • *Bubbling Up** : Term that infers that an item is in motion, moving in some direction, and has some final resting destination.*
    • \n
  • Bubble sort, sorts an array of integers by bubbling the largest integer to the top.
    • \n
\n
   // Bubble Sort \n   function bubble(array) { \n   let sorted = true; \n   for (let i = 0; i < array.length; i++) { \n   let num1 = array[i]; \n   let num2 = array[i + 1]; \n   if (num1 > num2) { \n   array[i + 1] = num1; \n   array[i] = num2; \n   sorted = false; \n   } \n   } \n   if (sorted) { \n   return array; \n   } else { \n   return bubble(array); \n   } \n   } |\n
\n

view rawbub.js hosted with ❤ by GitHub

\n
   function bubbleSort(items) { \n   let length = items.length; \n   for (let i = 0; i < length; i++) { \n   for (let j = 0; j < length - i - 1; j++) { \n   if (items[j] > items[j + 1]) { \n   let tmp = items[j]; \n   items[j] = items[j + 1]; \n   items[j + 1] = tmp; \n   } \n   } \n   } \n   } |\n
\n

view rawbubble.js hosted with ❤ by GitHub

\n
    \n
  • Worst Case & Best Case are always the same because it makes nested loops.
    • \n
  • Double for loops are polynomial time complexity or more specifically in this case Quadratic (Big O) of: O(n²)
    • \n
\n

Selection Sort

\n

Time Complexity: Quadratic O(n^2)

\n
    \n
  • 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²);
    • \n
\n

Space Complexity: O(1)

\n
    \n
  • Selection Sort will always use the same amount of memory regardless of n.
    • \n
\n

\n
   function swap(array, idx1, idx2) { \n   [array[idx1], array[idx2]] = [array[idx2], array[idx2]]; \n   } \n   function selectionSort(array) { \n   for (let i = 0; i < array.length; i++) { \n   let lowest = i; \n   for (let j = i + 1; j < array.length; j++) { \n   if (list[j] < list[lowest]) { \n   lowest = j; \n   } \n   } \n   if (place !== i) { \n   swap(array, i, lowest); \n   } \n   } \n   } \n   //Alt Solution---------------------------------------------------- \n   function selectionSort(array) { \n   for (let i = 0; i < array.length; i++) { \n   let lowest = i; \n   for (let j = 0; j < array.length; j++) { \n   if (array[j] < array[i]) { \n   lowest = j; \n   } \n   } \n   if (lowest !== i) { \n   let temp = array[i]; \n   array[i] = array[lowest]; \n   array[lowest] = temp; \n   } \n   } \n   return array; \n   } |\n
\n

view rawselectionsort.js hosted with ❤ by GitHub

\n
    \n
  • Selection sort organizes the smallest elements to the start of the array.
    • \n
\n

\n
\n

Summary of how Selection Sort should work:

\n
\n
    \n
  1. Set MIN to location 0
    2. \n
  2. Search the minimum element in the list.
    3. \n
  3. Swap with value at location Min
    4. \n
  4. Increment Min to point to next element.
    5. \n
  5. Repeat until list is sorted.
    6. \n
\n
   let selectionSort = (arr) => { \n   let len = arr.length; \n   for (let i = 0; i < len; i++) { \n   let min = i; \n   for (let j = i + 1; j < len; j++) { \n   if (arr[min] > arr[j]) { \n   min = j; \n   } \n   } \n   if (min !== i) { \n   let tmp = arr[i]; \n   arr[i] = arr[min]; \n   arr[min] = tmp; \n   } \n   } \n   return arr; \n   }; |\n
\n

view rawselectsort.js hosted with ❤ by GitHub

\n

Insertion Sort

\n

Time Complexity: Quadratic O(n^2)

\n
    \n
  • 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²);
    • \n
\n

Space Complexity: O(n)

\n
    \n
  • Because we are creating a subArray for each element in the original input, our Space Comlexity becomes linear.
    • \n
\n

\n
   function insertionSort(array) { \n   for (let i = 1; i < array.length; i++) { \n   let value = list[i]; \n   let hole = i; \n   while (hole > 0 && list[hole - 1] > value) { \n   list[hole] = list[hole - 1]; \n   hole--; \n   } \n   list[hole] = value; \n   } \n   return array; \n   } \n   //Alt Solution-------------------------------------------- \n   function insertionSort(arr) { \n   for (let i = 1; i < arr.length; i++) { \n   let current = arr[i]; \n   let j = i - 1; \n   while (j > -1 && current < arr[j]) { \n   arr[j + 1] = arr[j]; \n   j--; \n   } \n   arr[j + 1] = current; \n   } \n   return arr; \n   } |\n
\n

view rawinsertionsort.js hosted with ❤ by GitHub

\n

Merge Sort

\n

Time Complexity: Log Linear O(nlog(n))

\n
    \n
  • 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)
    • \n
  • We are linear O(n) time because we are creating subArrays.
    • \n
\n

\n

\n

Example of Merge Sort

\n
   function merge(leftArray, rightArray) { \n   const sorted = []; \n   while (letArray.length > 0 && rightArray.length > 0) { \n   const leftItem = leftArray[0]; \n   const rightItem = rightArray[0]; \n   if (leftItem > rightItem) { \n   sorted.push(rightItem); \n   rightArray.shift(); \n   } else { \n   sorted.push(leftItem); \n   leftArray.shift(); \n   } \n   } \n   while (leftArray.length !== 0) { \n   const value = leftArray.shift(); \n   sorted.push(value); \n   } \n   while (rightArray.length !== 0) { \n   const value = rightArray.shift(); \n   sorted.push(value); \n   } \n   return sorted; \n   } \n   function mergeSort(array) { \n   const length = array.length; \n   if (length === 1) { \n   return array; \n   } \n   const middleIndex = Math.ceil(length / 2); \n   const leftArray = array.slice(0, middleIndex); \n   const rightArray = array.slice(middleIndex, length); \n   leftArray = mergeSort(leftArray); \n   rightArray = mergeSort(rightArray); \n   return merge(leftArray, rightArray); \n   } |\n
\n

view rawmergesort.js hosted with ❤ by GitHub

\n
   function merge(arr1, arr2) { \n   let result = []; \n   while (arr1.length && arr2.length) { \n   if (arr1[0] < arr2[0]) { \n   result.push(arr1.shift()); \n   } else { \n   result.push(arr2.shift()); \n   } \n   } \n   return [...result, ...arr1, ...arr2]; \n   } \n   function mergeSort(arr) { \n   if (arr.length <= 1) return arr; \n   const mid = Math.floor(arr.length / 2); \n   const left = mergeSort(arr.slice(0, mid)); \n   const right = mergeSort(arr.slice(mid)); \n   return merge(left, right); \n   } |\n
\n

view rawmerge2.js hosted with ❤ by GitHub

\n

\n
    \n
  • Merge sort is O(nlog(n)) time.
    • \n
  • We need a function for merging and a function for sorting.
    • \n
\n
\n

Steps:

\n
\n
    \n
  1. If there is only one element in the list, it is already sorted; return the array.
    2. \n
  2. Otherwise, divide the list recursively into two halves until it can no longer be divided.
    3. \n
  3. Merge the smallest lists into new list in a sorted order.
    4. \n
\n

Quick Sort

\n

Time Complexity: Quadratic O(n^2)

\n
    \n
  • Even though the average time complexity O(nLog(n)), the worst case scenario is always quadratic.
    • \n
\n

Space Complexity: O(n)

\n
    \n
  • Our space complexity is linear O(n) because of the partition arrays we create.
    • \n
  • QS is another Divide and Conquer strategy.
    • \n
  • Some key ideas to keep in mind:
    • \n
  • It is easy to sort elements of an array relative to a particular target value.
    • \n
  • An array of 0 or 1 elements is already trivially sorted.
    • \n
\n

\n

\n
   function quickSort(array) { \n   if (array.length <= 1) return array; \n   let pivot = array.shift(); \n   let left = array.filter((x) => x < pivot); \n   let right = array.filter((x) => x >= pivot); \n   let sortedLeft = quickSort(left); \n   let sortedRight = quickSort(right); \n   return [...sortedLeft, pivot, ...sortedRight]; \n   } |\n
\n

view rawquicksort.js hosted with ❤ by GitHub

\n

Binary Search

\n

Time Complexity: Log Time O(log(n))

\n

Space Complexity: O(1)

\n

\n
\n

Recursive Solution

\n
\n
   function binarySearch(array, target) { \n   if (array.length === 0) return false; \n   let midPt = Math.floor(array.length / 2); \n   if (array[midPt] === target) { \n   return true; \n   } else if (list[midPt] > target) { \n   return binarySearch(list.slice(0, mid), target); \n   } else { \n   return binarySearch(list.slice(midPt + 1), target); \n   } \n   } |\n
\n

view rawrecur-bin-search.js hosted with ❤ by GitHub

\n
\n

Min Max Solution

\n
\n
   function binarySearch(array, target) { \n   let start = 0; \n   let end = array.length - 1; \n   while (start <= end) { \n   let midpoint = Math.floor((start + end) / 2); \n   if (target === array[midpoint]) { \n   return midpoint; \n   } \n   if (target > array[midpoint]) { \n   start = midpoint + 1; \n   } \n   if (target < array[midpoint]) { \n   end = midpoint - 1; \n   } \n   } \n   return -1; \n   } |\n
\n

view rawminmaxbinsearch.js hosted with ❤ by GitHub

\n
   function binarySearch(arr, x, start, end) { \n   if (start > end) return false; \n   let mid = Math.floor((start + end) / 2); \n   if (arr[mid] === x) return true; \n   if (arr[mid] > x) { \n   return binarySearch(arr, x, start, mid - 1); \n   } else { \n   return binarySearch(arr, x, mid + 1, end); \n   } \n   } |\n
\n

view rawbinsearch.js hosted with ❤ by GitHub

\n
    \n
  • Must be conducted on a sorted array.
    • \n
  • Binary search is logarithmic time, not exponential b/c n is cut down by two, not growing.
    • \n
  • Binary Search is part of Divide and Conquer.
    • \n
\n

Insertion Sort

\n
    \n
  • Works by building a larger and larger sorted region at the left-most end of the array.
    • \n
\n
\n

Steps:

\n
\n
    \n
  1. If it is the first element, and it is already sorted; return 1.
    2. \n
  2. Pick next element.
    3. \n
  3. Compare with all elements in the sorted sub list
    4. \n
  4. Shift all the elements in the sorted sub list that is greater than the value to be sorted.
    5. \n
  5. Insert the value
    6. \n
  6. Repeat until list is sorted.
    7. \n
\n
   let insertionSort = (inputArr) => { \n   let length = inputArr.length; \n   for (let i = 1; i < length; i++) { \n   let key = inputArr[i]; \n   let j = i - 1; \n   while (j >= 0 && inputArr[j] > key) { \n   inputArr[j + 1] = inputArr[j]; \n   j = j - 1; \n   } \n   inputArr[j + 1] = key; \n   } \n   return inputArr; \n   }; |\n
\n

view rawinsertionsort.js hosted with ❤ by GitHub

\n

If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:

\n

bgoonz's gists
\nInstantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |...gist.github.com

\n

bgoonz --- Overview
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize...github.com

\n

Or Checkout my personal Resource Site:

\n

Web-Dev-Hub
\nMemoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of...bgoonz-blog.netlify.app

\n

\n
   /**************************************BIG-O***********************************/ \n   /***********************Common Algorithms for Analysis********************/ \n   //mdn Object; \n   //-**************-recursive factorial:*********************/ \n   /* \n   Factorial: the product of a given positive integer multiplied by all lesser positive integers: \n   The quantity four factorial (4!) = 4 ⋅ 3 ⋅ 2 ⋅ 1 = 24. \n   Symbol:n!, where n is the given integer. \n   */ \n   function factorial(n) { \n   if (n === 1) return 1; //* Base Case ... 1 * 1 = 1 \n   return n * factorial(n - 1); //* n! = n * (n-1) * (n-2) * (n-3) * ... * 1 \n   } \n   factorial(5); //*5 * 4 * 3 * 2 * 1 = 120 <----expected \n   //console.log( \"factorial(5): \", factorial( 5 ) ); //- factorial(5): 120 \n   /* \n   Fibonacci numbers are the numbers such that every number in the series after the first two is the sum of the two preceding ones. \n   The series starts with 1, 1. Example -1, 1, 2, 3, 5, 8, 13, 21, 34, .... \n   Mathematical Expression: fib(n) = fib(n-1) + fib(n-2) \n   ! fib-tree-structure-diagram.png \n   https://miro.medium.com/max/700/1*svQ784qk1hvBE3iz7VGGgQ.jpeg \n   */ \n   function fibonacci(n) { \n   if (n === 1 || n === 2) return 1; \n   return fibonacci(n - 1) + fibonacci(n - 2); \n   } \n   fibonacci(5); \n   //console.log(\"fib(5): \", fibonacci(5)); //- fib(5): 5 \n   /* \n   the major differences between tabulation and memoization are: \n   1.) tabulation has to look through the entire search space; memoization does not \n   2.) tabulation requires careful ordering of the subproblems is; memoization doesn't care much about the order of recursive calls. \n   */ \n   const memo = { \n   0: 0, \n   1: 0, \n   2: 1, \n   }; \n   const fib = (n) => { \n   if (memo[n] !== undefined) return memo[n]; \n   const n1 = fib(n - 1); \n   const n2 = fib(n - 2); \n   memo[n] = fib(n - 1) + fib(n - 2); \n   return memo[n]; \n   }; \n   //console.log(\"fib(50): \", fib(20)); //- fib(50): 4181 \n   /******************End of Common Algorithms for Analysis*****************/ \n   /***********Comparing two functions that calculate the sum of all numbers from 1 up to n**********************/ \n   function addUpTo(n) { \n   let total = 0; \n   for (let i = 0; i <= n; i++) { \n   //! Number of operations will grow with input n. \n   total += i; \n   } \n   return total; \n   } \n   addUpTo(4); \n   //console.log(\"addUpTo( 4 ): \", addUpTo(4)); //- addUpTo( 4 ): 10 \n   //! Would be O(n) or Linear Time. \n   //---------------------------------------------------------------- \n   /* \n   The infinite series whose terms are the natural numbers 1 + 2 + 3 + 4 + ⋯ is a divergent series. \n   The nth partial sum of the series is the triangular number( https://en.wikipedia.org/wiki/Triangular_number ) \n   addUpTo(n)=(n * (n + 1)) / 2 \n   https://wikimedia.org/api/rest_v1/media/math/render/svg/99476e25466549387c585cb4de44e90f6cbe4cf2 \n   */ \n   function constantAddUpTo(n) { \n   return (n * (n + 1)) / 2; \n   } \n   constantAddUpTo(4); //- constantAddUpTo(4): 10 \n   //console.log(\"constantAddUpTo(4): \", constantAddUpTo(4)); \n   //! Has three simple operations: 1 Multiplication 1 Addition 1 Division. \n   //!(Regardless of n) Would be O(1) or Constant Time. \n   /***********End of Comparing two functions that calculate the sum of all numbers from 1 up to n*******************/ \n   /* \n   !Simplifying Math Terms \n   We want our Big-O notation to describe the performance of our algorithm with respect to the input size and nothing else. \n   !Use the following rules to simplify our Big-O functions using the following rules: \n   1.) Simplify Products: if the function is a product of many terms, we drop the terms that don't depend on the size of the input. \n   2.) Simplify Sums: if the function is a sum of many terms, we keep the term with the largest growth rate and drop the other terms. \n   * n is the size of the input \n   * T(f) refers to an un-simplified mathematical function \n   * O(f) refers to the Big-O simplified mathematical function \n   * Simplifying a Product \n   If a function consists of a product of many factors, \n   !we drop the factors that don't depend on the size of the input, n. \n   The factors that we drop are called constant factors because their size remains consistent as we increase the size of the input. \n   examples-of-big-O-simplification.png \n   simplifying-a-sum.png \n   simp-examples.png \n   */ \n   /***********Comparing two functions with nested for loops*********************/ \n   // function countUpAndDown(n) { \n   // console.log(\"going up!\"); \n   // for (let i = 0; i < n; i++) { \n   // console.log(i); \n   // } \n   // console.log(\"at the top, going down!\"); \n   // for (let j = n - 1; j >= 0; j--) { \n   // console.log(j); \n   // } \n   // console.log(\"Back down, bye!\"); \n   // } \n   // countUpAndDown(5); \n   // console.log(\"countUpAndDown(5): \", countUpAndDown(5)); \n   /* \n   going up! \n   0 1 2 3 4 \n   at the top, going down! \n   4 3 2 1 0 \n   Back down, bye! \n   countUpAndDown(5): undefined //- because there was no return statment... only console.log \n   */ \n   //------------------------------------------------ \n   //!Both loops are O(n) but since we just want the big picture, O(n); \n   //----------------------------------------------- \n   // function printAllPairs(n) { \n   // for (let i = 0; i < n; i++) { \n   // for (let j = 0; j < n; j++) { \n   // console.log(i, j); \n   // } \n   // } \n   // } \n   // printAllPairs(4); \n   /* \n   0 0 0 1 0 2 0 3 1 0 1 1 1 2 1 3 2 0 2 1 2 2 2 3 3 0 3 1 3 2 3 3 \n   */ \n   //!Nested loops who's number of iterations depend on the size of the input are never a good thing when trying to write fast code. \n   //!O(n^2) or Quadratic Time. \n   /***********END of Comparing two functions with nested for loops**********************/ \n   /**************************Big-O-Operations**********************/ \n   //! Arithmetic Operations are Constant \n   //! Variable assignment is constant \n   //! Accessing elements in an array (by index) or by object (by key) is constant. \n   //! In a loop, the complexity is the length of the loop times the complexity of whatever is inside of the loop. \n   /**************************More Examples**********************/ \n   //---------------------logAtLeast5--------------------------------- \n   function logAtLeast5(n) { \n   for (let i = 1; i <= Math.max(5, n); i++) { \n   //console.log(i); \n   } \n   } \n   //! O(n) Linear Time \n   //logAtLeast5(2); \n   /* \n   1 2 3 4 5 \n   ---------------------------- \n   */ \n   //logAtLeast5(6); \n   /* \n   ---------------------------- \n   1 2 3 4 5 6 \n   */ \n   //---------------------logAtMost5--------------------------------- \n   function logAtMost5(n) { \n   for (var i = 1; i <= Math.min(5, n); i++) { \n   //console.log(i); \n   } \n   } \n   logAtMost5(20); \n   //! O(1) Constant Time. \n   /* \n   1 2 3 4 5 \n   */ \n   //***********************Big-O Complexity Classes*************************** */ \n   /* \n   //! O(1) Constant \n   The algorithm takes roughly the same number of steps for any input size. \n   */ \n   function constant1(n) { \n   return n * 2 + 1; \n   } \n   constant1(5); //constant1(5): 11 \n   //console.log(\"constant1(5): \", constant1(5)); \n   //-------- \n   //! O(1) \n   //-------- \n   function constant2(n) { \n   for (let i = 1; i <= 100; i++) { \n   console.log(i); \n   } \n   } \n   //constant2(5); \n   ////console.log(\"constant2(5): \", constant2(5)); \n   //1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 \n   //------------------------------------------ \n   /* \n   O(log(n)) Logarithmic \n   In most cases our hidden base of Logarithmic time is 2, \n   log complexity algo's will typically display 'halving' the size of the input ?? \n   ? (like binary search!) \n   */ \n   // O(log(n)) \n   function logarithmic1(n) { \n   if (n <= 1) { \n   return \"base case\"; \n   } else { \n   return logarithmic1(n / 2); //*Recursive call on **half** the input \n   } \n   } \n   //! O(log(n)) \n   function logarithmic2(n) { \n   let i = n; \n   while (i > 1) { \n   i /= 2; \n   return i; \n   } \n   } \n   logarithmic1(5); \n   ////console.log(\"logarithmic1(5): \", logarithmic1(5)); //logarithmic1(5): base case \n   logarithmic2(6); \n   ////console.log(\"logarithmic2(6): \", logarithmic2(6)); //logarithmic2(6): 3 \n   //------------------------------------------ \n   /* \n   * O(n) Linear \n   Linear algo's will access each item of the input \"once\". \n   */ \n   // O(n) \n   function linear1(n) { \n   for (let i = 1; i <= n; i++) { \n   //console.log(\"linear1\", i); \n   } \n   } \n   linear1(3); \n   /* \n   linear1 1 \n   linear1 2 \n   linear1 3 \n   */ \n   // O(n), where n is the length of the array \n   function linear2(array) { \n   for (let i = 0; i < array.length; i++) { \n   //console.log(\"linear2\", i); \n   } \n   } \n   linear2([1, 2, 3]); \n   /* \n   linear2 0 \n   linear2 1 \n   linear2 2 \n   */ \n   //! O(n) \n   function linear3(n) { \n   if (n === 1) { \n   return 1; \n   } else { \n   //console.log(`linear3(${n})--->`, linear3(n - 1)); \n   /* \n   */ \n   } \n   } \n   //!linear3(6); \n   //linear3(2)---> 1 linear3(3)---> undefined linear3(4)---> undefined \n   //linear3(5)---> undefined linear3(6)---> undefined \n   //!linear3(5); \n   // linear3(2)---> 1 linear3(3)---> undefined linear3(4)---> undefined \n   //linear3(5)---> undefined \n   //// in the two function calls above we can see that size of output corresponds to a proportional change in the size of the input \n   //console.log(\"linear3(4): \", linear3(4)); //// linear3(4): undefined \n   //------------------------------------------ \n   /* \n   * O(nlog(n)) Log Linear Time \n   Combination of linear and logarithmic behavior, \n   we will see features from both classes. \n   !Algorithm's that are log-linear will use both recursion AND iteration. \n   */ \n   // O(n * log(n)) \n   // function loglinear(n) { \n   // if (n <= 1) return; // base case \n   // for (let i = 1; i <= n; i++) { \n   // console.log( \n   // `for an input (n=${n}):`, \n   // `we are on the ${i}'th itteration where i = ${i}` \n   // ); \n   // } \n   // console.log(\" first call n('old n'):\", n); \n   // loglinear(n / 2); \n   // console.log(` new n is = (${n})`); \n   // } \n   // loglinear(4); \n   /* \n   for an input (n=4): we are on the 1'th itteration where i = 1 \n   for an input (n=4): we are on the 2'th itteration where i = 2 \n   for an input (n=4): we are on the 3'th itteration where i = 3 \n   for an input (n=4): we are on the 4'th itteration where i = 4 \n   first call n('old n'): 4 \n   for an input (n=2): we are on the 1'th itteration where i = 1 \n   for an input (n=2): we are on the 2'th itteration where i = 2 \n   first call n('old n'): 2 \n   new n is = (2) \n   new n is = (4) \n   */ \n   function loglinear(n) { \n   if (n <= 1) return; // base case \n   for (let i = 1; i <= n; i++) { \n   console.log( \n   `for an input (n=${n}):`, \n   `we are on the ${i}'th itteration where i = ${i}` \n   ); \n   } \n   console.log(\" first call n('old n'):\", n, `new n is = (${n / 2})`); \n   loglinear(n / 2); \n   console.log(` new n is = (${n})`); \n   loglinear(n / 2); \n   console.log(` Second Call : new n is = (${n})`); \n   } \n   //loglinear(4); \n   /* \n   for an input (n=4): we are on the 1'th itteration where i = 1 \n   for an input (n=4): we are on the 2'th itteration where i = 2 \n   for an input (n=4): we are on the 3'th itteration where i = 3 \n   for an input (n=4): we are on the 4'th itteration where i = 4 \n   first call n('old n'): 4 new n is = (2) \n   for an input (n=2): we are on the 1'th itteration where i = 1 \n   for an input (n=2): we are on the 2'th itteration where i = 2 \n   first call n('old n'): 2 new n is = (1) \n   new n is = (2) \n   Second Call : new n is = (2) \n   new n is = (4) \n   for an input (n=2): we are on the 1'th itteration where i = 1 \n   for an input (n=2): we are on the 2'th itteration where i = 2 \n   first call n('old n'): 2 new n is = (1) \n   new n is = (2) \n   Second Call : new n is = (2) \n   Second Call : new n is = (4) \n   */ \n   //------------------------------------------ \n   /* \n   O(nc) Polynomial \n   C is a fixed constant. \n   */ \n   // O(n^3) \n   function cubic(n) { \n   let count = 0; \n   for (let i = 1; i <= n; i++) { \n   //console.log(`i is ${i}`, \"count:\", count); \n   for (let j = 1; j <= n; j++) { \n   //console.log(` for i: ${i} j is:${j}`); \n   for (let k = 1; k <= n; k++) { \n   count += 1; \n   // console.log( ` itteration #${count}: i: is ${i}, j: is ${j}, k:is ${k}`); \n   } \n   } \n   } \n   } \n   cubic(3); \n   /* \n   i is 1 count: 0 \n   for i: 1 j is:1 \n   itteration #1: i: is 1, j: is 1, k: is 1 \n   itteration #2: i: is 1, j: is 1, k: is 2 \n   itteration #3: i: is 1, j: is 1, k: is 3 \n   for i: 1 j is:2 \n   itteration #4: i: is 1, j: is 2, k: is 1 \n   itteration #5: i: is 1, j: is 2, k: is 2 \n   itteration #6: i: is 1, j: is 2, k: is 3 \n   for i: 1 j is:3 \n   itteration #7: i: is 1, j: is 3, k: is 1 \n   itteration #8: i: is 1, j: is 3, k: is 2 \n   itteration #9: i: is 1, j: is 3, k: is 3 \n   i is 2 count: 9 \n   for i: 2 j is:1 \n   itteration #10: i: is 2, j: is 1, k: is 1 \n   itteration #11: i: is 2, j: is 1, k: is 2 \n   itteration #12: i: is 2, j: is 1, k: is 3 \n   for i: 2 j is:2 \n   itteration #13: i: is 2, j: is 2, k: is 1 \n   itteration #14: i: is 2, j: is 2, k: is 2 \n   itteration #15: i: is 2, j: is 2, k: is 3 \n   for i: 2 j is:3 \n   itteration #16: i: is 2, j: is 3, k: is 1 \n   itteration #17: i: is 2, j: is 3, k: is 2 \n   itteration #18: i: is 2, j: is 3, k: is 3 \n   i is 3 count: 18 \n   for i: 3 j is:1 \n   itteration #19: i: is 3, j: is 1, k: is 1 \n   itteration #20: i: is 3, j: is 1, k: is 2 \n   itteration #21: i: is 3, j: is 1, k: is 3 \n   for i: 3 j is:2 \n   itteration #22: i: is 3, j: is 2, k: is 1 \n   itteration #23: i: is 3, j: is 2, k: is 2 \n   itteration #24: i: is 3, j: is 2, k: is 3 \n   for i: 3 j is:3 \n   itteration #25: i: is 3, j: is 3, k: is 1 \n   itteration #26: i: is 3, j: is 3, k: is 2 \n   itteration #27: i: is 3, j: is 3, k: is 3 \n   */ \n   //------------------------------------------ \n   /* \n   Example of Quadratic and Cubic runtime. \n   !O(c^n) Exponential \n   C is now the number of recursive calls made in each stack frame. \n   -Algo's with exponential time are VERY SLOW. \n   */ \n   // O(3^n) \n   function exponential3n(n) { \n   if (n === 0) return; \n   //console.log(\"1.) first call n('old n'):\", n, `....new n is = (${n - 1})`); \n   exponential3n(n - 1); \n    \n   // console.log(\"---------------------(__1__)---------------------------\", \"\\n\"); \n   // console.log( \n   // \"2.) after first call ('old n'):\", \n   // n, \n   // `....new n is = (${n - 1})` \n   // ); \n    \n   exponential3n(n - 1); \n    \n   //console.log(\"-------------------------(__2__)---------------------\", \"\\n\"); \n   //console.log( \n   // \"3.) after second call ('old n'):\", \n   // n, \n   // `....new n is = (${n - 1})` \n   // ); \n    \n   exponential3n(n - 1); \n    \n   //console.log(\"-----------------------(__3__)-------------------------\", \"\\n\"); \n   //console.log( \n   // \"4.) after third call ('old n'):\", \n   // n, \n   // `....new n is = (${n - 1})` \n   //); \n   } \n   exponential3n(3); \n    \n   //***********************__Memoization__*************************** */ \n   /* \n   Memoization : a design pattern used to reduce the overall number of calculations that can occur \n   in algorithms that use recursive strategies to solve. \n   MZ stores the results of the sub-problems in some other data structure, so that we can avoid \n   duplicate calculations and only 'solve' each problem once. \n   Two features that comprise memoization: \n   1\\. FUNCTION MUST BE RECURSIVE. \n   2\\. Our additional DS is usually an object (we refer to it as our memo!) \n   */ \n    \n   //! _____Memoizing Factorial_____ \n    \n   // function fib(n, memo = {}) { \n   // if (n in memo) return memo[n]; // If we already calculated this value, return it \n   // if (n === 1 || n === 2) return 1; \n    \n   // // Store the result in the memo first before returning \n   // // Make sure to pass the memo in to your calls to fib! \n   // memo[n] = fib(n - 1, memo) + fib(n - 2, memo); \n   // return memo[n]; \n   // } \n   function factorial(n, memo2 = {}) { \n   const key = JSON.stringify(n); \n   if (key in memo2) return memo2[key]; \n   if (n === 1) return 1; \n   memo2[key] = n * factorial(n - 1, memo2); \n   //console.log(\"this is memo\", memo2); \n   return memo2[key]; \n   } \n    \n   //console.log(memo2); \n   // //factorial(6); // => 720, requires 6 calls \n   //console.log(\"factorial(6): \", factorial(6)); \n   // //factorial(6); // => 720, requires 1 call \n   // //factorial(5); // => 120, requires 1 call \n   // console.log(\"factorial(5): \", factorial(5)); \n   //factorial(7); // => 5040, requires 2 calls \n   //console.log(\"factorial(7): \", factorial(7)); \n   //console.log(\"factorial(20): \", factorial(20)); // 2432902008176640000 \n   /* \n   this is memo { '2': 2 } \n   this is memo { '2': 2, '3': 6 } \n   this is memo { '2': 2, '3': 6, '4': 24 } \n   this is memo { '2': 2, '3': 6, '4': 24, '5': 120 } \n   this is memo { '2': 2 } \n   this is memo { '2': 2, '3': 6 } \n   this is memo { '2': 2, '3': 6, '4': 24 } \n   this is memo { '2': 2, '3': 6, '4': 24, '5': 120 } \n   this is memo { '2': 2, '3': 6, '4': 24, '5': 120, '6': 720 } \n   factorial(6): 720 \n   this is memo { '2': 2 } \n   this is memo { '2': 2, '3': 6 } \n   this is memo { '2': 2, '3': 6, '4': 24 } \n   this is memo { '2': 2, '3': 6, '4': 24, '5': 120 } \n   this is memo { '2': 2, '3': 6, '4': 24, '5': 120, '6': 720 } \n   this is memo { '2': 2, '3': 6, '4': 24, '5': 120, '6': 720, '7': 5040 } \n   factorial(7): 5040 \n   */ \n    \n   /* \n   The Memoization Formula \n   Rules \n   1\\. Write the unoptimized brute force recursion (make sure it works); \n   2\\. Add memo object as an additional arugmnt . \n   3\\. Add a base case condition that returns the stored value if the function's argument is in the memo. \n   4\\. Before returning the result of the recursive case, store it in the memo as a value and make the \n   function's argument it's key. \n    \n   !Things to remember \n   *1. When solving DP problems with Memoization, it is helpful to draw out the visual tree first. \n   *2. When you notice duplicate sub-tree's that means we can memoize. \n    \n   */ \n   function fastFib(n, memo = {}) { \n   if (n in memo) return memo[n]; \n   if (n === 1 || n === 2) return 1; \n   memo[n] = fastFib(n - 1, memo) + fastFib(n - 2, memo); \n   return memo[n]; \n   } \n   //fastFib(6); // => 8 \n   //console.log(\"fastFib(6): \", fastFib(6)); //fastFib(6): 8 \n   //fastFib(50); // => 12586269025 \n   //console.log(\"fastFib(50): \", fastFib(50)); //fastFib(50): 12586269025 \n    \n   //***********************__Tabulation__*************************** */ \n   /* \n   Tabulation Strategy \n   //Use When: \n   -The function is iterative and not recursive. \n   -The accompanying Data Structure is usually an array. \n   */ \n   function fibTab(n) { \n   let table = [0, 1, 1]; \n    \n   // if(n === 0 || n === 1){ \n   // return 1; \n   // } \n    \n   while (table.length - 1 < n) { \n   table.push(table[table.length - 1] + table[table.length - 2]); \n   } \n    \n   return table[n]; \n   } \n    \n   console.log(fibTab(1)); //1 \n   console.log(fibTab(2)); //1 \n   console.log(fibTab(3)); //2 \n   console.log(fibTab(4)); //3 \n   console.log(fibTab(5)); //5 \n   console.log(fibTab(50)); //12586269025 |\n
\n

view rawalgo-time-complexity-by-example.js hosted with ❤ by GitHub

\n
\n Big O Examples In JavaScript \n
/**************************************BIG-O***********************************/\n/***********************Common Algorithms for Analysis********************/\n//mdn Object;\n//-**************-recursive factorial:*********************/\n/*\nFactorial: the product of a given positive integer multiplied by all lesser positive integers:\nThe quantity four factorial (4!) = 4 ⋅ 3 ⋅ 2 ⋅ 1 = 24.\nSymbol:n!, where n is the given integer.\n */\nfunction factorial(n) {\n    if (n === 1) return 1; //* Base Case ... 1 * 1 = 1\n    return n * factorial(n - 1); //*  n! = n * (n-1) *  (n-2) * (n-3) * ... * 1\n}\nfactorial(5); //*5 * 4 * 3 * 2 * 1 = 120 <----expected\n//console.log( \"factorial(5): \", factorial( 5 ) ); //-    factorial(5):  120\n/*\nFibonacci numbers are the numbers such that every number in the series after the first two is the sum of the two preceding ones.\nThe series starts with 1, 1. Example −1, 1, 2, 3, 5, 8, 13, 21, 34, ….\nMathematical Expression: fib(n) = fib(n−1) + fib(n−2)\n! fib-tree-structure-diagram.png\nhttps://miro.medium.com/max/700/1*svQ784qk1hvBE3iz7VGGgQ.jpeg\n */\nfunction fibonacci(n) {\n    if (n === 1 || n === 2) return 1;\n    return fibonacci(n - 1) + fibonacci(n - 2);\n}\nfibonacci(5);\n//console.log(\"fib(5): \", fibonacci(5)); //-  fib(5):  5\n/*\nthe major differences between tabulation and memoization are:\n1.)     tabulation has to look through the entire search space; memoization does not\n2.)     tabulation requires careful ordering of the subproblems is; memoization doesn’t care much about the order of recursive calls.\n*/\nconst memo = {\n    0: 0,\n    1: 0,\n    2: 1\n};\nconst fib = (n) => {\n    if (memo[n] !== undefined) return memo[n];\n    const n1 = fib(n - 1);\n    const n2 = fib(n - 2);\n    memo[n] = fib(n - 1) + fib(n - 2);\n    return memo[n];\n};\n//console.log(\"fib(50): \", fib(20));      //-  fib(50):  4181\n/******************End of Common Algorithms for Analysis*****************/\n/***********Comparing two functions that calculate the sum of all numbers from 1 up to n**********************/\nfunction addUpTo(n) {\n    let total = 0;\n    for (let i = 0; i <= n; i++) {\n        //! Number of operations will grow with input n.\n        total += i;\n    }\n    return total;\n}\naddUpTo(4);\n//console.log(\"addUpTo( 4 ): \", addUpTo(4)); //-  addUpTo( 4 ):  10\n//! Would be O(n) or Linear Time.\n//----------------------------------------------------------------\n/*\nThe infinite series whose terms are the natural numbers 1 + 2 + 3 + 4 + ⋯ is a divergent series.\nThe nth partial sum of the series is the triangular number( https://en.wikipedia.org/wiki/Triangular_number )\naddUpTo(n)=(n * (n + 1)) / 2\nhttps://wikimedia.org/api/rest_v1/media/math/render/svg/99476e25466549387c585cb4de44e90f6cbe4cf2\n*/\nfunction constantAddUpTo(n) {\n    return (n * (n + 1)) / 2;\n}\nconstantAddUpTo(4); //-  constantAddUpTo(4):  10\n//console.log(\"constantAddUpTo(4): \", constantAddUpTo(4));\n//! Has three simple operations: 1 Multiplication 1 Addition 1 Division.\n//!(Regardless of n) Would be O(1) or Constant Time.\n/***********End of Comparing two functions that calculate the sum of all numbers from 1 up to n*******************/\n/*\n!Simplifying Math Terms\nWe want our Big-O notation to describe the performance of our algorithm with respect to the input size and nothing else.\n !Use the following rules to simplify our Big-O functions using the following rules:\n1.)   Simplify Products: if the function is a product of many terms, we drop the terms that don't depend on the size of the input.\n2.)   Simplify Sums: if the function is a sum of many terms, we keep the term with the largest growth rate and drop the other terms.\n*   n is the size of the input\n*   T(f) refers to an un-simplified mathematical function\n*   O(f) refers to the Big-O simplified mathematical function\n*   Simplifying a Product\nIf a function consists of a product of many factors,\n!we drop the factors that don't depend on the size of the input, n.\nThe factors that we drop are called constant factors because their size remains consistent as we increase the size of the input.\nexamples-of-big-O-simplification.png\nsimplifying-a-sum.png\nsimp-examples.png\n*/\n/***********Comparing two functions with nested for loops*********************/\n// function countUpAndDown(n) {\n//   console.log(\"going up!\");\n//   for (let i = 0; i < n; i++) {\n//     console.log(i);\n//   }\n//   console.log(\"at the top, going down!\");\n//   for (let j = n - 1; j >= 0; j--) {\n//     console.log(j);\n//   }\n//   console.log(\"Back down, bye!\");\n// }\n// countUpAndDown(5);\n// console.log(\"countUpAndDown(5): \", countUpAndDown(5));\n/*\ngoing up!\n0 1 2   3   4\nat the top, going down!\n4   3   2   1   0\nBack down, bye!\ncountUpAndDown(5):  undefined //- because there was no return statment... only console.log\n*/\n//------------------------------------------------\n//!Both loops are O(n) but since we just want the big picture, O(n);\n//-----------------------------------------------\n// function printAllPairs(n) {\n//   for (let i = 0; i < n; i++) {\n//     for (let j = 0; j < n; j++) {\n//       console.log(i, j);\n//     }\n//   }\n// }\n// printAllPairs(4);\n/*\n0 0 0 1 0 2 0 3 1 0 1 1 1 2 1 3 2 0 2 1 2 2 2 3 3 0 3 1 3 2 3 3\n*/\n//!Nested loops who's number of iterations depend on the size of the input are never a good thing when trying to write fast code.\n//!O(n^2) or Quadratic Time.\n/***********END of Comparing two functions with nested for loops**********************/\n/**************************Big-O-Operations**********************/\n//! Arithmetic Operations are Constant\n//! Variable assignment is constant\n//! Accessing elements in an array (by index) or by object (by key) is constant.\n//! In a loop, the complexity is the length of the loop times the complexity of whatever is inside of the loop.\n/**************************More Examples**********************/\n//---------------------logAtLeast5---------------------------------\nfunction logAtLeast5(n) {\n    for (let i = 1; i <= Math.max(5, n); i++) {\n        //console.log(i);\n    }\n}\n//!   O(n) Linear Time\n//logAtLeast5(2);\n/*\n1   2   3   4   5\n----------------------------\n*/\n//logAtLeast5(6);\n/*\n----------------------------\n1   2   3   4   5   6\n*/\n//---------------------logAtMost5---------------------------------\nfunction logAtMost5(n) {\n    for (var i = 1; i <= Math.min(5, n); i++) {\n        //console.log(i);\n    }\n}\nlogAtMost5(20);\n//! O(1) Constant Time.\n/*\n1   2   3   4   5\n*/\n//***********************Big-O Complexity Classes*************************** */\n/*\n//! O(1) Constant\nThe algorithm takes roughly the same number of steps for any input size.\n*/\nfunction constant1(n) {\n    return n * 2 + 1;\n}\nconstant1(5); //constant1(5):  11\n//console.log(\"constant1(5): \", constant1(5));\n//--------\n//! O(1)\n//--------\nfunction constant2(n) {\n    for (let i = 1; i <= 100; i++) {\n        console.log(i);\n    }\n}\n//constant2(5);\n////console.log(\"constant2(5): \", constant2(5));\n//1 2   3   4   5   6   7   8   9   10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  39  40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  55  56  57  58  59  60  61  62  63  64  65  66  67  68  69  70  71  72  73  74  75  76  77  78  79  80  81  82  83  84  85  86  87  88  89  90  91  92  93  94  95  96  97  98  99  100\n//------------------------------------------\n/*\nO(log(n)) Logarithmic\nIn most cases our hidden base of Logarithmic time is 2,\nlog complexity algo's will typically display 'halving' the size of the input ??\n? (like binary search!)\n*/\n// O(log(n))\nfunction logarithmic1(n) {\n    if (n <= 1) {\n        return \"base case\";\n    } else {\n        return logarithmic1(n / 2); //*Recursive call on **half** the input\n    }\n}\n//! O(log(n))\nfunction logarithmic2(n) {\n    let i = n;\n    while (i > 1) {\n        i /= 2;\n        return i;\n    }\n}\nlogarithmic1(5);\n////console.log(\"logarithmic1(5): \", logarithmic1(5)); //logarithmic1(5):  base case\nlogarithmic2(6);\n////console.log(\"logarithmic2(6): \", logarithmic2(6)); //logarithmic2(6):  3\n//------------------------------------------\n/*\n*  O(n) Linear\nLinear algo's will access each item of the input \"once\".\n */\n// O(n)\nfunction linear1(n) {\n    for (let i = 1; i <= n; i++) {\n        //console.log(\"linear1\", i);\n    }\n}\nlinear1(3);\n/*\nlinear1 1\nlinear1 2\nlinear1 3\n*/\n// O(n), where n is the length of the array\nfunction linear2(array) {\n    for (let i = 0; i < array.length; i++) {\n        //console.log(\"linear2\", i);\n    }\n}\nlinear2([1, 2, 3]);\n/*\nlinear2 0\nlinear2 1\nlinear2 2\n*/\n//!  O(n)\nfunction linear3(n) {\n    if (n === 1) {\n        return 1;\n    } else {\n        //console.log(`linear3(${n})--->`, linear3(n - 1));\n        /*\n         */\n    }\n}\n//!linear3(6);\n//linear3(2)---> 1  linear3(3)---> undefined    linear3(4)---> undefined\n//linear3(5)---> undefined  linear3(6)---> undefined\n//!linear3(5);\n// linear3(2)---> 1 linear3(3)---> undefined    linear3(4)---> undefined\n//linear3(5)---> undefined\n//// in the two function calls above we can see that size of output corresponds to a proportional change in the size of the input\n//console.log(\"linear3(4): \", linear3(4)); //// linear3(4):  undefined\n//------------------------------------------\n/*\n* O(nlog(n)) Log Linear Time\nCombination of linear and logarithmic behavior,\nwe will see features from both classes.\n!Algorithm's that are log-linear will use both recursion AND iteration.\n */\n// O(n * log(n))\n// function loglinear(n) {\n//   if (n <= 1) return; // base case\n//   for (let i = 1; i <= n; i++) {\n//     console.log(\n//       `for an input (n=${n}):`,\n//       `we are on the ${i}'th itteration where i = ${i}`\n//     );\n//   }\n//   console.log(\" first call n('old n'):\", n);\n//   loglinear(n / 2);\n//   console.log(`   new n is = (${n})`);\n// }\n// loglinear(4);\n/*\nfor an input (n=4): we are on the 1'th itteration where i = 1\nfor an input (n=4): we are on the 2'th itteration where i = 2\nfor an input (n=4): we are on the 3'th itteration where i = 3\nfor an input (n=4): we are on the 4'th itteration where i = 4\n first call n('old n'): 4\nfor an input (n=2): we are on the 1'th itteration where i = 1\nfor an input (n=2): we are on the 2'th itteration where i = 2\n first call n('old n'): 2\n   new n is = (2)\n   new n is = (4)\n*/\nfunction loglinear(n) {\n    if (n <= 1) return; // base case\n    for (let i = 1; i <= n; i++) {\n        console.log(\n            `for an input (n=${n}):`,\n            `we are on the ${i}'th itteration where i = ${i}`\n        );\n    }\n    console.log(\" first call n('old n'):\", n, `new n is = (${n / 2})`);\n    loglinear(n / 2);\n    console.log(`   new n is = (${n})`);\n    loglinear(n / 2);\n    console.log(`   Second Call : new n is = (${n})`);\n}\n//loglinear(4);\n/*\nfor an input (n=4): we are on the 1'th itteration where i = 1\nfor an input (n=4): we are on the 2'th itteration where i = 2\nfor an input (n=4): we are on the 3'th itteration where i = 3\nfor an input (n=4): we are on the 4'th itteration where i = 4\n first call n('old n'): 4 new n is = (2)\nfor an input (n=2): we are on the 1'th itteration where i = 1\nfor an input (n=2): we are on the 2'th itteration where i = 2\n first call n('old n'): 2 new n is = (1)\n   new n is = (2)\n   Second Call : new n is = (2)\n   new n is = (4)\nfor an input (n=2): we are on the 1'th itteration where i = 1\nfor an input (n=2): we are on the 2'th itteration where i = 2\n first call n('old n'): 2 new n is = (1)\n   new n is = (2)\n   Second Call : new n is = (2)\n   Second Call : new n is = (4)\n*/\n//------------------------------------------\n/*\nO(nc) Polynomial\nC is a fixed constant.\n */\n// O(n^3)\nfunction cubic(n) {\n    let count = 0;\n    for (let i = 1; i <= n; i++) {\n        //console.log(`i is ${i}`, \"count:\", count);\n        for (let j = 1; j <= n; j++) {\n            //console.log(`  for i:    ${i}      j is:${j}`);\n            for (let k = 1; k <= n; k++) {\n                count += 1;\n                // console.log(  `     itteration #${count}:       i: is  ${i},   j: is  ${j},     k:is   ${k}`);\n            }\n        }\n    }\n}\ncubic(3);\n/*\ni is 1 count: 0\n  for i:    1      j is:1\n     itteration #1:       i: is  1,   j: is  1,     k: is   1\n     itteration #2:       i: is  1,   j: is  1,     k: is   2\n     itteration #3:       i: is  1,   j: is  1,     k: is   3\n  for i:    1      j is:2\n     itteration #4:       i: is  1,   j: is  2,     k: is   1\n     itteration #5:       i: is  1,   j: is  2,     k: is   2\n     itteration #6:       i: is  1,   j: is  2,     k: is   3\n  for i:    1      j is:3\n     itteration #7:       i: is  1,   j: is  3,     k: is   1\n     itteration #8:       i: is  1,   j: is  3,     k: is   2\n     itteration #9:       i: is  1,   j: is  3,     k: is   3\ni is 2 count: 9\n  for i:    2      j is:1\n     itteration #10:       i: is  2,   j: is  1,     k: is   1\n     itteration #11:       i: is  2,   j: is  1,     k: is   2\n     itteration #12:       i: is  2,   j: is  1,     k: is   3\n  for i:    2      j is:2\n     itteration #13:       i: is  2,   j: is  2,     k: is   1\n     itteration #14:       i: is  2,   j: is  2,     k: is   2\n     itteration #15:       i: is  2,   j: is  2,     k: is   3\n  for i:    2      j is:3\n     itteration #16:       i: is  2,   j: is  3,     k: is   1\n     itteration #17:       i: is  2,   j: is  3,     k: is   2\n     itteration #18:       i: is  2,   j: is  3,     k: is   3\ni is 3 count: 18\n  for i:    3      j is:1\n     itteration #19:       i: is  3,   j: is  1,     k: is   1\n     itteration #20:       i: is  3,   j: is  1,     k: is   2\n     itteration #21:       i: is  3,   j: is  1,     k: is   3\n  for i:    3      j is:2\n     itteration #22:       i: is  3,   j: is  2,     k: is   1\n     itteration #23:       i: is  3,   j: is  2,     k: is   2\n     itteration #24:       i: is  3,   j: is  2,     k: is   3\n  for i:    3      j is:3\n     itteration #25:       i: is  3,   j: is  3,     k: is   1\n     itteration #26:       i: is  3,   j: is  3,     k: is   2\n     itteration #27:       i: is  3,   j: is  3,     k: is   3\n*/\n//------------------------------------------\n/*\nExample of Quadratic and Cubic runtime.\n!O(c^n) Exponential\nC is now the number of recursive calls made in each stack frame.\n-Algo's with exponential time are VERY SLOW.\n*/\n// O(3^n)\nfunction exponential3n(n) {\n    if (n === 0) return;\n    //console.log(\"1.)  first call n('old n'):\", n, `....new n is = (${n - 1})`);\n    exponential3n(n - 1);\n\n    // console.log(\"---------------------(__1__)---------------------------\", \"\\n\");\n    // console.log(\n    //   \"2.)  after first call ('old n'):\",\n    //   n,\n    //   `....new n is = (${n - 1})`\n    // );\n\n    exponential3n(n - 1);\n\n    //console.log(\"-------------------------(__2__)---------------------\", \"\\n\");\n    //console.log(\n    //   \"3.)  after second call ('old n'):\",\n    //   n,\n    //   `....new n is = (${n - 1})`\n    // );\n\n    exponential3n(n - 1);\n\n    //console.log(\"-----------------------(__3__)-------------------------\", \"\\n\");\n    //console.log(\n    //  \"4.)   after third call ('old n'):\",\n    //  n,\n    // `....new n is = (${n - 1})`\n    //);\n}\nexponential3n(3);\n\n//***********************__Memoization__*************************** */\n/*\nMemoization : a design pattern used to reduce the overall number of calculations that can occur\nin algorithms that use recursive strategies to solve.\nMZ stores the results of the sub-problems in some other data structure, so that we can avoid\nduplicate calculations and only 'solve' each problem once.\nTwo features that comprise memoization:\n1. FUNCTION MUST BE RECURSIVE.\n2. Our additional DS is usually an object (we refer to it as our memo!)\n*/\n\n//!    _____Memoizing Factorial_____\n\n// function fib(n, memo = {}) {\n//   if (n in memo) return memo[n]; // If we already calculated this value, return it\n//   if (n === 1 || n === 2) return 1;\n\n//   // Store the result in the memo first before returning\n//   // Make sure to pass the memo in to your calls to fib!\n//   memo[n] = fib(n - 1, memo) + fib(n - 2, memo);\n//   return memo[n];\n// }\nfunction factorial(n, memo2 = {}) {\n    const key = JSON.stringify(n);\n    if (key in memo2) return memo2[key];\n    if (n === 1) return 1;\n    memo2[key] = n * factorial(n - 1, memo2);\n    //console.log(\"this is memo\", memo2);\n    return memo2[key];\n}\n\n//console.log(memo2);\n// //factorial(6); // => 720, requires 6 calls\n//console.log(\"factorial(6): \", factorial(6));\n// //factorial(6); // => 720, requires 1 call\n// //factorial(5); // => 120, requires 1 call\n// console.log(\"factorial(5): \", factorial(5));\n//factorial(7); // => 5040, requires 2 calls\n//console.log(\"factorial(7): \", factorial(7));\n//console.log(\"factorial(20): \", factorial(20)); // 2432902008176640000\n/*\nthis is memo { '2': 2 }\nthis is memo { '2': 2, '3': 6 }\nthis is memo { '2': 2, '3': 6, '4': 24 }\nthis is memo { '2': 2, '3': 6, '4': 24, '5': 120 }\nthis is memo { '2': 2 }\nthis is memo { '2': 2, '3': 6 }\nthis is memo { '2': 2, '3': 6, '4': 24 }\nthis is memo { '2': 2, '3': 6, '4': 24, '5': 120 }\nthis is memo { '2': 2, '3': 6, '4': 24, '5': 120, '6': 720 }\nfactorial(6):  720\nthis is memo { '2': 2 }\nthis is memo { '2': 2, '3': 6 }\nthis is memo { '2': 2, '3': 6, '4': 24 }\nthis is memo { '2': 2, '3': 6, '4': 24, '5': 120 }\nthis is memo { '2': 2, '3': 6, '4': 24, '5': 120, '6': 720 }\nthis is memo { '2': 2, '3': 6, '4': 24, '5': 120, '6': 720, '7': 5040 }\nfactorial(7):  5040\n*/\n\n/*\nThe Memoization Formula\nRules\n1. Write the unoptimized brute force recursion (make sure it works);\n2. Add memo object as an additional arugmnt .\n3. Add a base case condition that returns the stored value if the function's argument is in the memo.\n4. Before returning the result of the recursive case, store it in the memo as a value and make the\nfunction's argument it's key.\n!Things to remember\n*1. When solving DP problems with Memoization, it is helpful to draw out the visual tree first.\n*2. When you notice duplicate sub-tree's that means we can memoize.\n*/\nfunction fastFib(n, memo = {}) {\n    if (n in memo) return memo[n];\n    if (n === 1 || n === 2) return 1;\n    memo[n] = fastFib(n - 1, memo) + fastFib(n - 2, memo);\n    return memo[n];\n}\n//fastFib(6); // => 8\n//console.log(\"fastFib(6): \", fastFib(6)); //fastFib(6):  8\n//fastFib(50); // => 12586269025\n//console.log(\"fastFib(50): \", fastFib(50)); //fastFib(50):  12586269025\n\n//***********************__Tabulation__*************************** */\n/*\nTabulation Strategy\n//Use When:\n-The function is iterative and not recursive.\n-The accompanying Data Structure is usually an array.\n*/\nfunction fibTab(n) {\n    let table = [0, 1, 1];\n\n    // if(n === 0 || n === 1){\n    //    return 1;\n    // }\n\n    while (table.length - 1 < n) {\n        table.push(table[table.length - 1] + table[table.length - 2]);\n    }\n\n    return table[n];\n}\n\nconsole.log(fibTab(1)); //1\nconsole.log(fibTab(2)); //1\nconsole.log(fibTab(3)); //2\nconsole.log(fibTab(4)); //3\nconsole.log(fibTab(5)); //5\nconsole.log(fibTab(50)); //12586269025\n
\n
"},{"url":"/docs/community/github-profiles/","relativePath":"docs/community/github-profiles.md","relativeDir":"docs/community","base":"github-profiles.md","name":"github-profiles","frontmatter":{"title":"Cool Github Profiles","weight":0,"excerpt":"Cool Github Profiles","seo":{"title":" Cool Github Profiles","description":" Cool Github Profiles","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Cool Github Profiles

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Aakarsh Teja

\"\"

(💯 give your vote)

Aaquib Ali

\"\"

(💯 give your vote)

Abdul Farhan

\"\"

(💯 give your vote)

Abhay Anand

\"\"

(💯 give your vote)

Abhishek Kumar Vikrant

\"\"

(💯 give your vote)

Abiola Farounbi

\"\"

(💯 give your vote)

Aditya Garde

\"\"

(💯 give your vote)

Aditya Mangal

\"\"

(💯 give your vote)

Aditya Oberai

\"\"

(💯 give your vote)

Aditya Vikram Singh

\"\"

(💯 give your vote)

Adriano Laureano

\"\"

(💯 give your vote)

Advaith U

\"\"

(💯 give your vote)

Ahamed Basha N

\"\"

(💯 give your vote)

Ahammad Shawki

\"\"

(💯 give your vote)

Ahmed Muhammed Galadima

\"\"

(💯 give your vote)

Akas Rai

\"\"

(💯 give your vote)

Akshaya Kulasekaran

\"\"

(💯 give your vote)

Akshayan Sinha

\"\"

(💯 give your vote)

Akshita Gupta

\"\"

(💯 give your vote)

Aleksey Voko

\"\"

(💯 give your vote)

Aman Upadhyay

\"\"

(💯 give your vote)

Amit Kumar

\"\"

(💯 give your vote)

Ampolu Nisa

\"\"

(💯 give your vote)

Anas Khan

\"\"

(💯 give your vote)

Andreas Karabetian

\"\"

(💯 give your vote)

Angshu Bhadra

\"\"

(💯 give your vote)

Anh Hoang Chi Tran

\"\"

(💯 give your vote)

Anik Chakraborty

\"\"

(💯 give your vote)

Aniket Kumar

\"\"

(💯 give your vote)

Aniket Singh

\"\"

(💯 give your vote)

Animesh Pathak

\"\"

(💯 give your vote)

Anirudh Anup

\"\"

(💯 give your vote)

Anirudh Panda

\"\"

(💯 give your vote)

Anish De

\"\"

(💯 give your vote)

Anjan Diyora

\"\"

(💯 give your vote)

Ankit

\"\"

(💯 give your vote)

Ankush Chauhan

\"\"

(💯 give your vote)

Ankush Chavan

\"\"

(💯 give your vote)

Ankush Singh

\"\"

(💯 give your vote)

Ankush Singh Gandhi

\"\"

(💯 give your vote)

Annu

\"\"

(💯 give your vote)

Antonio Martínez

\"\"

(💯 give your vote)

Antonio Riccelli

\"\"

(💯 give your vote)

Anubhav

\"\"

(💯 give your vote)

Anurag Hazra

\"\"

(💯 give your vote)

Anurag Pathak

\"\"

(💯 give your vote)

Arturs Smirnovs

\"\"

(💯 give your vote)

Arwaz Khan

\"\"

(💯 give your vote)

Arya Soni

\"\"

(💯 give your vote)

Ashutosh Dwivedi

\"\"

(💯 give your vote)

Asmit Malakannawar

\"\"

(💯 give your vote)

Astha Nayak

\"\"

(💯 give your vote)

Avid Coder

\"\"

(💯 give your vote)

Avinash Sharma

\"\"

(💯 give your vote)

Avneesh Agarwal

\"\"

(💯 give your vote)

Ayush Kumar

\"\"

(💯 give your vote)

Ayush Parikh

\"\"

(💯 give your vote)

Ayush Tamra

\"\"

(💯 give your vote)

Ayush Varshney

\"\"

(💯 give your vote)

Beven Nyamande

\"\"

(💯 give your vote)

Bhuvanesh Hingal

\"\"

(💯 give your vote)

Bolaji Ayodeji

\"\"

(💯 give your vote)

Brian Douglas

\"\"

(💯 give your vote)

Bryson Mundia

\"\"

(💯 give your vote)

Carlos Souza

\"\"

(💯 give your vote)

Cas Martens

\"\"

(💯 give your vote)

Chandrika Deb

\"\"

(💯 give your vote)

Chayan Debbarma

\"\"

(💯 give your vote)

Chetan Thakral

\"\"

(💯 give your vote)

Chinmay Mhatre

\"\"

(💯 give your vote)

CodingSpecies

\"\"

(💯 give your vote)

CyberBoyAyush

\"\"

(💯 give your vote)

Damian Ziolo

\"\"

(💯 give your vote)

Daniel F

\"\"

(💯 give your vote)

Danish Ul Hassan

\"\"

(💯 give your vote)

Darsh Gupta

\"\"

(💯 give your vote)

David Leal

\"\"

(💯 give your vote)

Dedar Alam

\"\"

(💯 give your vote)

Devesh Anand

\"\"

(💯 give your vote)

Dipto Chakrabarty

\"\"

(💯 give your vote)

Diya Jaiswal

\"\"

(💯 give your vote)

Dmitry Labuzov

\"\"

(💯 give your vote)

Eke Victor

\"\"

(💯 give your vote)

Ekta Arora

\"\"

(💯 give your vote)

Eshan Gupta

\"\"

(💯 give your vote)

Evaristo Cuesta

\"\"

(💯 give your vote)

Fabricio Cavalcante

\"\"

(💯 give your vote)

Falguni Sarkar

\"\"

(💯 give your vote)

Faouzi Mohamed

\"\"

(💯 give your vote)

Fayas Noushad

\"\"

(💯 give your vote)

Filippo Fonseca

\"\"

(💯 give your vote)

Franklin Okolie

\"\"

(💯 give your vote)

Franklin U.O. Ohaegbulam

\"\"

(💯 give your vote)

Gagan Bhatia

\"\"

(💯 give your vote)

Gourav Khunger

\"\"

(💯 give your vote)

Grawish Sachdeva

\"\"

(💯 give your vote)

Gunjan Paneri

\"\"

(💯 give your vote)

Gurjot Singh

\"\"

(💯 give your vote)

Hanshul Chandel

\"\"

(💯 give your vote)

Hariharan B

\"\"

(💯 give your vote)

Hariket Sukesh Kumar Sheth

\"\"

(💯 give your vote)

Harikrushn kanani

\"\"

(💯 give your vote)

Harkirat Singh

\"\"

(💯 give your vote)

Harsh Kumar Khatri

\"\"

(💯 give your vote)

Henok B Ademtew

\"\"

(💯 give your vote)

Hossain Rabbi

\"\"

(💯 give your vote)

Hrishikesh Nikam

\"\"

(💯 give your vote)

Hritik Jaiswal

\"\"

(💯 give your vote)

Hrittik Roy

\"\"

(💯 give your vote)

Ibrahim Ramadhan

\"\"

(💯 give your vote)

Ibtihel Ouni

\"\"

(💯 give your vote)

Idris Olubisi

\"\"

(💯 give your vote)

Israel Antonio Rosales Laguan

\"\"

(💯 give your vote)

Ivan Pesenti

\"\"

(💯 give your vote)

Ivelin Iliev

\"\"

(💯 give your vote)

Jaideep Guntupalli

\"\"

(💯 give your vote)

Jakob Jung

\"\"

(💯 give your vote)

Jaskeerat Singh

\"\"

(💯 give your vote)

Jaskirat Singh

\"\"

(💯 give your vote)

Jay Patel

\"\"

(💯 give your vote)

Jayant Goel

\"\"

(💯 give your vote)

Jayesh Srivastava

\"\"

(💯 give your vote)

Jaynil Gaglani

\"\"

(💯 give your vote)

Jennifer Rosa

\"\"

(💯 give your vote)

Joel Nickson

\"\"

(💯 give your vote)

Jonah Lawrence

\"\"

(💯 give your vote)

Jose Jimmy

\"\"

(💯 give your vote)

Joykishan Sharma

\"\"

(💯 give your vote)

Kaiwalya Koparkar

\"\"

(💯 give your vote)

Kamlesh Joshi

\"\"

(💯 give your vote)

Karan Singh

\"\"

(💯 give your vote)

Karthik Nayak

\"\"

(💯 give your vote)

Karuna Tata

\"\"

(💯 give your vote)

Khushhal Reddy

\"\"

(💯 give your vote)

Khushi Saxena

\"\"

(💯 give your vote)

Khushi Sharma

\"\"

(💯 give your vote)

Kingsley Victor

\"\"

(💯 give your vote)

Kira

\"\"

(💯 give your vote)

Komal Pal

\"\"

(💯 give your vote)

Krish

\"\"

(💯 give your vote)

Krish Gupta

\"\"

(💯 give your vote)

Krishna Kumar

\"\"

(💯 give your vote)

Kshitij Arvikar

\"\"

(💯 give your vote)

Kumaran KM

\"\"

(💯 give your vote)

Kushal Das

\"\"

(💯 give your vote)

Lee Reilly

\"\"

(💯 give your vote)

Leticia Rosário

\"\"

(💯 give your vote)

Makuza Mugabo Verite

\"\"

(💯 give your vote)

Mallikarjun H T

\"\"

(💯 give your vote)

Matt Eden

\"\"

(💯 give your vote)

Max Bridgland

\"\"

(💯 give your vote)

Mayank Choudhary

\"\"

(💯 give your vote)

Md. Manzum Rahman

\"\"

(💯 give your vote)

Md. Moshfiqur Rahman Rony

\"\"

(💯 give your vote)

Meghna Das

\"\"

(💯 give your vote)

Michelle Sandford

\"\"

(💯 give your vote)

Mohamed Fazil

\"\"

(💯 give your vote)

Mohamed Yaseen Sheriff S

\"\"

(💯 give your vote)

Mohammad Shakib

\"\"

(💯 give your vote)

Mohit singh

\"\"

(💯 give your vote)

Motasim

\"\"

(💯 give your vote)

Muhammad Awais

\"\"

(💯 give your vote)

Nandani Paliwal

\"\"

(💯 give your vote)

Nelson T. Alba Jr.

\"\"

(💯 give your vote)

Nikita jain

\"\"

(💯 give your vote)

Nirmal Silwal

\"\"

(💯 give your vote)

Nisarg Kapkar

\"\"

(💯 give your vote)

Nitesh Thapliyal

\"\"

(💯 give your vote)

Nitish Kumar

\"\"

(💯 give your vote)

Oktay Kır

\"\"

(💯 give your vote)

Olanrewaju Alaba

\"\"

(💯 give your vote)

Omkar Kulkarni

\"\"

(💯 give your vote)

Pascal Ojinnaka

\"\"

(💯 give your vote)

Patrick Guo

\"\"

(💯 give your vote)

Paulson J Paul

\"\"

(💯 give your vote)

Pradumna Saraf

\"\"

(💯 give your vote)

Pranjal Verma

\"\"

(💯 give your vote)

Pratham Bhagat

\"\"

(💯 give your vote)

Prathamesh Borse

\"\"

(💯 give your vote)

Prathamesh Giri

\"\"

(💯 give your vote)

Praveen

\"\"

(💯 give your vote)

Prify Philip

\"\"

(💯 give your vote)

Priyanka Mishra

\"\"

(💯 give your vote)

Priyanshu Kumawat

\"\"

(💯 give your vote)

Pushkar Thakur

\"\"

(💯 give your vote)

Rachit Tandon

\"\"

(💯 give your vote)

Rajiv Ranjan Mars

\"\"

(💯 give your vote)

Rakesh Mahato

\"\"

(💯 give your vote)

Ranjit Yadav

\"\"

(💯 give your vote)

Ravi M Damor

\"\"

(💯 give your vote)

Rayman

\"\"

(💯 give your vote)

Rayyan Rasheed

\"\"

(💯 give your vote)

Reeha

\"\"

(💯 give your vote)

Rehan Punjwani

\"\"

(💯 give your vote)

Remco Halman

\"\"

(💯 give your vote)

Rishabh Dwivedi

\"\"

(💯 give your vote)

Rishabh Rathore

\"\"

(💯 give your vote)

Ritesh Kumar

\"\"

(💯 give your vote)

Ritik Rawal

\"\"

(💯 give your vote)

Ritika Das

\"\"

(💯 give your vote)

Ritvij Kumar Sharma

\"\"

(💯 give your vote)

Ritwik Sinha

\"\"

(💯 give your vote)

Roald Nefs

\"\"

(💯 give your vote)

Rohan Gupta

\"\"

(💯 give your vote)

Rohan Kulkarni

\"\"

(💯 give your vote)

Rohan Saini

\"\"

(💯 give your vote)

Rohit Yadav

\"\"

(💯 give your vote)

Rudra Barad

\"\"

(💯 give your vote)

Rupam Shil

\"\"

(💯 give your vote)

Russ Perry

\"\"

(💯 give your vote)

Saad Irfan

\"\"

(💯 give your vote)

Saatvik Nagpal

\"\"

(💯 give your vote)

Sachin Chaurasiya

\"\"

(💯 give your vote)

Sahitya

\"\"

(💯 give your vote)

Sairam Nomula

\"\"

(💯 give your vote)

Sam Varghese

\"\"

(💯 give your vote)

Samriddhi

\"\"

(💯 give your vote)

Samuel Bartels

\"\"

(💯 give your vote)

Sanchit Vijay

\"\"

(💯 give your vote)

Sandip Roy

\"\"

(💯 give your vote)

Saswat Samal

\"\"

(💯 give your vote)

Saumya Ranjan Nayak

\"\"

(💯 give your vote)

Savio Martin

\"\"

(💯 give your vote)

Sayantani Deb

\"\"

(💯 give your vote)

Sefat Siddiquea Sifa

\"\"

(💯 give your vote)

Shajeen Ahamed

\"\"

(💯 give your vote)

Sharannyo Basu

\"\"

(💯 give your vote)

Shashank Indukuri

\"\"

(💯 give your vote)

Shivendra K Jha

\"\"

(💯 give your vote)

Shoaib Khalid

\"\"

(💯 give your vote)

Shrejal Singh

\"\"

(💯 give your vote)

Shreya Purohit

\"\"

(💯 give your vote)

Shreyaans Jain

\"\"

(💯 give your vote)

Shubham Hadake

\"\"

(💯 give your vote)

Shubham Kukreti

\"\"

(💯 give your vote)

Shyam Praveen Singh

\"\"

(💯 give your vote)

Siddhi Bhanushali

\"\"

(💯 give your vote)

Slim Coder

\"\"

(💯 give your vote)

Sonal Tiwari

\"\"

(💯 give your vote)

Soumyadeep Dutta

\"\"

(💯 give your vote)

Sri Subathra Devi B

\"\"

(💯 give your vote)

Sriniketh J

\"\"

(💯 give your vote)

Stephen Mount

\"\"

(💯 give your vote)

Subham Raoniar

\"\"

(💯 give your vote)

Subhampreet Mohanty

\"\"

(💯 give your vote)

Sulthan Mohaideen

\"\"

(💯 give your vote)

Supraja Arthi

\"\"

(💯 give your vote)

Suraj Bokde

\"\"

(💯 give your vote)

Sushant Gaurav

\"\"

(💯 give your vote)

Tara Choudhary

\"\"

(💯 give your vote)

Tarun Kamboj

\"\"

(💯 give your vote)

Tawfik Yasser

\"\"

(💯 give your vote)

Thales Brederodes Montarroyos Candido

\"\"

(💯 give your vote)

Thejaswin S

\"\"

(💯 give your vote)

Tim Burgan

\"\"

(💯 give your vote)

Tipu khan

\"\"

(💯 give your vote)

Tom Hill

\"\"

(💯 give your vote)

Utkarsh Mishra

\"\"

(💯 give your vote)

Utkarsh Mishra

(💯 give your vote)

Utkarsh Singh

\"\"

(💯 give your vote)

Uttam Kumar

\"\"

(💯 give your vote)

Vaidhyanathan S M

\"\"

(💯 give your vote)

Vanshika Pandey

\"\"

(💯 give your vote)

Varghese Jose

\"\"

(💯 give your vote)

Vasudev Jaiswal

\"\"

(💯 give your vote)

Vatsal Kesarwani

\"\"

(💯 give your vote)

Vedant Khairnar

\"\"

(💯 give your vote)

Victor Ikechukwu

\"\"

(💯 give your vote)

Victoria Lo

\"\"

(💯 give your vote)

Vignesh CK

\"\"

(💯 give your vote)

Vincent Villafuerte

\"\"

(💯 give your vote)

Vineel Sai

\"\"

(💯 give your vote)

Vivek Singh

\"\"

(💯 give your vote)

Yajush Vyas

\"\"

(💯 give your vote)

Yash Indane

\"\"

(💯 give your vote)

Yash Sehgal

\"\"

(💯 give your vote)

Zaid Khan

\"\"

(💯 give your vote)

afc163

\"\"

(💯 give your vote)

aminos

\"\"

(💯 give your vote)

charan

\"\"

(💯 give your vote)

schmelto

\"\"

(💯 give your vote)

vonhyou

\"\"

(💯 give your vote)

"},{"url":"/docs/data-structures/","relativePath":"docs/data-structures/index.md","relativeDir":"docs/data-structures","base":"index.md","name":"index","frontmatter":{"title":"Data Structures","excerpt":"In this section you'll learn how to add syntax highlighting, examples, callouts and much more.","seo":{"title":"Data Structures","description":"This is the Data Structures page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Data Structures","keyName":"property"},{"name":"og:description","value":"This is the Data Structures page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Data Structures"},{"name":"twitter:description","value":"This is the Data Structures page"}]},"template":"docs","weight":0},"html":"

Data structures

\n


https://ds-unit-5-lambda.netlify.app/#.\n
\n
\n

\n

Algorithms

\n
\n\n
\n
\n
\n

The Algos Bgoonz Branch

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

Python Data Structures

\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Leetcode

\n
\n\n
\n
\n
\n
\n
\n
\n

Algorithms

\n
\n\n
\n
\n
\n

Data structures in JavaScript

\n

Here's a website I created to practice data structures!

\n

directory
\nEdit descriptionds-algo-official-c3dw6uapg-bgoonz.vercel.app

\n

Here's the repo that the website is built on:

\n

bgoonz/DS-ALGO-OFFICIAL
\nNavigation ####Author:Bryan Guner Big O notation is the language we use for talking about how long an algorithm takes…github.com

\n

Here's a live code editor where you can mess with any of the examples…

\n

Resources (article content below):

\n

Videos

\n\n

Books

\n\n

Coding practice

\n\n

Courses

\n\n

Guides

\n\n

space

\n
\n

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.

\n
\n

time

\n
\n

The time complexity for a data structure is in general more diverse than its space complexity.

\n
\n

Several operations

\n
\n

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.

\n
\n

Dependent on data

\n
\n

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.

\n
\n
    \n
  • The best-case complexity: when the data looks the best
    • \n
  • The worst-case complexity: when the data looks the worst
    • \n
  • The average-case complexity: when the data looks average
    • \n
\n

Big O notation

\n

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.

\n

The Array data structure

\n
### Definition\n

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

\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion

\n

O(1) O(n) O(1) O(n)

\n
indexvalue0 … this is the first value, stored at zero position\n
    \n
  1. The index of an array runs in sequence
    2. \n
  2. This could be useful for storing data that are required to be ordered, such as rankings or queues
    3. \n
  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
    4. \n
\n

2. Objects

\n

Think of objects as a logical grouping of a bunch of properties.

\n

Properties could be some variable that it's storing or some methods that it's using.

\n

I also visualize an object as a table.

\n

The main difference is that object's “index” need not be numbers and is not necessarily sequenced.

\n
\n

The Hash Table

\n
### *Definition*\n
\n

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

\n
\n

Hash Tables are considered the more efficient data structure for lookup and for this reason, they are widely used.

\n

Complexity\nAverage\nAccess Search Insertion Deletion

\n
    \n
  • O(1) O(1) O(1)
    • \n
\n
\n

The code

\n
\n

Note, here I am storing another object for every hash in my Hash Table.

\n

The Set

\n

Sets

\n

Sets are pretty much what it sounds like. It's the same intuition as Set in Mathematics. I visualize Sets as Venn Diagrams.

\n
### *Definition*\n
\n

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

\n
\n

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…

\n

Complexity\nAverage\nAccess Search Insertion Deletion

\n
    \n
  • O(n) O(n) O(n)
    • \n
\n
\n

The code

\n
\n

The Singly Linked List

\n
### *Definition*\n
\n

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.

\n
\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(1)

\n
\n

The code

\n
\n
\n

The Doubly Linked List

\n
### *Definition*\n
\n

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

\n
\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(1)

\n
\n

The code

\n
\n

The Stack

\n
\n

Definition

\n
\n

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

\n
\n

A Stack often has a third method peek which allows to check the last pushed element without popping it.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(1)

\n
\n

The code

\n
\n

The Queue

\n
### *Definition*\n
\n

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.

\n
\n

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.

\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(1) O(n)

\n
\n

The code

\n
\n

The Tree

\n
### *Definition*\n
\n

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

\n
\n

Complexity\nAverage\nAccess Search Insertion Deletion\nO(n) O(n) O(n) O(n)\nTo 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.

\n
*The code*\n

The Graph

\n
### *Definition*\n
\n

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.

\n
\n
    \n
  • A graph is any collection of nodes and edges.
    • \n
  • Much more relaxed in structure than a tree.
    • \n
  • It doesn't need to have a root node (not every node needs to be accessible from a single node)
    • \n
  • It can have cycles (a group of nodes whose paths begin and end at the same node)
    • \n
  • 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.
    • \n
  • Any number of edges may leave a given node
    • \n
  • A Path is a sequence of nodes on a graph
    • \n
\n

Cycle Visual

\n
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.).\n

Representation\nThere are different ways of representing a graph, each of them with its own advantages and disadvantages. Here are the main 2:

\n

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.\nAdjacency 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.

\n

Graph

\n
\n

The code

\n
\n
\n

Leetcode

\n

Data Structures & Algorithms

\n

DS Algo Codebase

\n

\"-----------------------------------------------------\"

\n

➤ 115. Distinct Subsequences

\n

Problem:

\n

Given a string S and a string T, count the number of distinct subsequences of S which equals T.

\n

A subsequence of a string is a new string which is formed from the original string by deleting some (can be none) of the characters without disturbing the relative positions of the remaining characters. (ie, \"ACE\" is a subsequence of \"ABCDE\" while \"AEC\" is not).

\n

Example 1:

\n
Input: S = \"rabbbit\", T = \"rabbit\"\nOutput: 3\nExplanation:\n\nAs shown below, there are 3 ways you can generate \"rabbit\" from S.\n(The caret symbol ^ means the chosen letters)\n\nrabbbit\n^^^^ ^^\nrabbbit\n^^ ^^^^\nrabbbit\n^^^ ^^^\n
\n

Example 2:

\n
Input: S = \"babgbag\", T = \"bag\"\nOutput: 5\nExplanation:\n\nAs shown below, there are 5 ways you can generate \"bag\" from S.\n(The caret symbol ^ means the chosen letters)\n\nbabgbag\n^^ ^\nbabgbag\n^^    ^\nbabgbag\n^    ^^\nbabgbag\n  ^  ^^\nbabgbag\n    ^^^\n
\n

Solution:

\n

Define f(i, j) to be the number of ways that generate T[0...j) from S[0...i).

\n

For f(i, j) you can always skip S[i-1], but can only take it when S[i-1] === T[j-1].

\n
f(0, j) = 0, j > 0 // nothing to delete\nf(i, 0) = 1 // delete all\nf(i, j) = f(i-1, j) + (S[i-1] === T[j-1] ? f(i-1, j-1) : 0)\n
\n

Dynamic array can be used.

\n
/**\n * @param {string} s\n * @param {string} t\n * @return {number}\n */\nlet numDistinct = function (s, t) {\n    const lens = s.length;\n    const lent = t.length;\n    const dp = new Array(lent + 1).fill(0);\n    dp[0] = 1;\n    for (let i = 1; i <= lens; i++) {\n        for (let j = lent; j >= 1; j--) {\n            if (s[i - 1] === t[j - 1]) {\n                dp[j] += dp[j - 1];\n            }\n        }\n    }\n    return dp[lent];\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Tree\": https://leetcode.com/tag/tree\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\nSimilar Questions:\n\"Populating Next Right Pointers in Each Node II\": https://leetcode.com/problems/populating-next-right-pointers-in-each-node-ii\n\"Binary Tree Right Side View\": https://leetcode.com/problems/binary-tree-right-side-view

\n
\n

\"-----------------------------------------------------\"

\n

➤ 116. Populating Next Right Pointers in Each Node

\n

Problem:

\n

Given a binary tree

\n
struct TreeLinkNode {\n  TreeLinkNode *left;\n  TreeLinkNode *right;\n  TreeLinkNode *next;\n}\n
\n

Populate each next pointer to point to its next right node. If there is no next right node, the next pointer should be set to NULL.

\n

Initially, all next pointers are set to NULL.

\n

Note:

\n
    \n
  • You may only use constant extra space.
    • \n
  • Recursive approach is fine, implicit stack space does not count as extra space for this problem.
    • \n
  • You may assume that it is a perfect binary tree (ie, all leaves are at the same level, and every parent has two children).
    • \n
\n

Example:

\n

Given the following perfect binary tree,

\n
     1\n   /  \\\n  2    3\n / \\  / \\\n4  5  6  7\n
\n

After calling your function, the tree should look like:

\n
     1 -> NULL\n   /  \\\n  2 -> 3 -> NULL\n / \\  / \\\n4->5->6->7 -> NULL\n
\n

Solution:

\n

ONE

\n

Recursive.

\n

For every node:

\n
    \n
  • Left child: points to node.right.
    • \n
  • Right child: points to node.next.left if node.next exists.
    • \n
\n
/**\n * Definition for binary tree with next pointer.\n * function TreeLinkNode(val) {\n *     this.val = val;\n *     this.left = this.right = this.next = null;\n * }\n */\n\n/**\n * @param {TreeLinkNode} root\n * @return {void} Do not return anything, modify tree in-place instead.\n */\nlet connect = function (root) {\n    if (!root) {\n        return;\n    }\n    if (root.left !== null) {\n        root.left.next = root.right;\n        connect(root.left);\n    }\n    if (root.right !== null) {\n        if (root.next !== null) {\n            root.right.next = root.next.left;\n        }\n        connect(root.right);\n    }\n};\n
\n

TWO

\n

Level order traversal.

\n
/**\n * Definition for binary tree with next pointer.\n * function TreeLinkNode(val) {\n *     this.val = val;\n *     this.left = this.right = this.next = null;\n * }\n */\n\n/**\n * @param {TreeLinkNode} root\n * @return {void} Do not return anything, modify tree in-place instead.\n */\nlet connect = function (root) {\n    if (!root) {\n        return;\n    }\n\n    const queue = [NaN, root];\n    while (queue.length > 1) {\n        const node = queue.shift();\n        if (node !== node) {\n            for (let i = 0; i < queue.length; i++) {\n                queue[i].next = queue[i + 1] || null;\n            }\n            queue.push(NaN);\n        } else {\n            if (node.left !== null) {\n                queue.push(node.left);\n            }\n            if (node.right !== null) {\n                queue.push(node.right);\n            }\n        }\n    }\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Tree\": https://leetcode.com/tag/tree\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\nSimilar Questions:\n\"Populating Next Right Pointers in Each Node\": https://leetcode.com/problems/populating-next-right-pointers-in-each-node

\n
\n

\"-----------------------------------------------------\"

\n

➤ 117. Populating Next Right Pointers in Each Node II

\n

Problem:

\n

Given a binary tree

\n
struct TreeLinkNode {\n  TreeLinkNode *left;\n  TreeLinkNode *right;\n  TreeLinkNode *next;\n}\n
\n

Populate each next pointer to point to its next right node. If there is no next right node, the next pointer should be set to NULL.

\n

Initially, all next pointers are set to NULL.

\n

Note:

\n
    \n
  • You may only use constant extra space.
    • \n
  • Recursive approach is fine, implicit stack space does not count as extra space for this problem.
    • \n
\n

Example:

\n

Given the following binary tree,

\n
     1\n   /  \\\n  2    3\n / \\    \\\n4   5    7\n
\n

After calling your function, the tree should look like:

\n
     1 -> NULL\n   /  \\\n  2 -> 3 -> NULL\n / \\    \\\n4-> 5 -> 7 -> NULL\n
\n

Solution:

\n

ONE

\n

Recursive. See 116. Populating Next Right Pointers in Each Node.

\n

The tree may not be perfect now. So keep finding next until there is a node with children, or null.

\n

This also means post-order traversal is required.

\n
/**\n * Definition for binary tree with next pointer.\n * function TreeLinkNode(val) {\n *     this.val = val;\n *     this.left = this.right = this.next = null;\n * }\n */\n\n/**\n * @param {TreeLinkNode} root\n * @return {void} Do not return anything, modify tree in-place instead.\n */\nlet connect = function (root) {\n    if (!root) {\n        return;\n    }\n    let next = null;\n    for (let node = root.next; node !== null; node = node.next) {\n        if (node.left !== null) {\n            next = node.left;\n            break;\n        }\n        if (node.right !== null) {\n            next = node.right;\n            break;\n        }\n    }\n    if (root.right !== null) {\n        root.right.next = next;\n    }\n    if (root.left !== null) {\n        root.left.next = root.right || next;\n    }\n    connect(root.right);\n    connect(root.left);\n};\n
\n

TWO

\n

Level order traversal. Exact same as 116. Populating Next Right Pointers in Each Node.

\n
/**\n * Definition for binary tree with next pointer.\n * function TreeLinkNode(val) {\n *     this.val = val;\n *     this.left = this.right = this.next = null;\n * }\n */\n\n/**\n * @param {TreeLinkNode} root\n * @return {void} Do not return anything, modify tree in-place instead.\n */\nlet connect = function (root) {\n    if (!root) {\n        return;\n    }\n\n    const queue = [NaN, root];\n    while (queue.length > 1) {\n        const node = queue.shift();\n        if (node !== node) {\n            for (let i = 0; i < queue.length; i++) {\n                queue[i].next = queue[i + 1] || null;\n            }\n            queue.push(NaN);\n        } else {\n            if (node.left !== null) {\n                queue.push(node.left);\n            }\n            if (node.right !== null) {\n                queue.push(node.right);\n            }\n        }\n    }\n};\n
\n
\n

Difficulty: Easy\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\nSimilar Questions:\n\"Pascal's Triangle II\": https://leetcode.com/problems/pascals-triangle-ii

\n
\n

\"-----------------------------------------------------\"

\n

➤ 118. Pascal's Triangle

\n

Problem:

\n

Given a non-negative integer numRows, generate the first numRows of Pascal's triangle.

\n

\"PascalTriangleAnimated2.gif\"

\n

In Pascal's triangle, each number is the sum of the two numbers directly above it.

\n

Example:

\n
Input: 5\nOutput:\n[\n     [1],\n    [1,1],\n   [1,2,1],\n  [1,3,3,1],\n [1,4,6,4,1]\n]\n
\n

Solution:

\n

Dynamic Programming 101.

\n
/**\n * @param {number} numRows\n * @return {number[][]}\n */\nlet generate = function (numRows) {\n    if (numRows <= 0) {\n        return [];\n    }\n\n    const result = [[1]];\n    for (let i = 1; i < numRows; i++) {\n        const lastRow = result[i - 1];\n        const row = [1];\n        for (let j = 1; j < i; j++) {\n            row[j] = lastRow[j] + lastRow[j - 1];\n        }\n        row.push(1);\n        result.push(row);\n    }\n\n    return result;\n};\n
\n
\n

Difficulty: Easy\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\nSimilar Questions:\n\"Pascal's Triangle\": https://leetcode.com/problems/pascals-triangle

\n
\n

\"-----------------------------------------------------\"

\n

➤ 119. Pascal's Triangle II

\n

Problem:

\n

Given a non-negative index k where k ≤ 33, return the kth index row of the Pascal's triangle.

\n

Note that the row index starts from 0.

\n

\"PascalTriangleAnimated2.gif\"

\n

In Pascal's triangle, each number is the sum of the two numbers directly above it.

\n

Example:

\n
Input: 3\nOutput: [1,3,3,1]\n
\n

Follow up:

\n

Could you optimize your algorithm to use only O(k) extra space?

\n

Solution:

\n

Dynamic Programming 101 with dynamic array.

\n

State (i, j) depends on (i-1, j) and (i-1, j-1). So to access (i-1, j-1) iteration must be from right to left.

\n
/**\n * @param {number} rowIndex\n * @return {number[]}\n */\nlet getRow = function (rowIndex) {\n    if (rowIndex < 0) {\n        return [];\n    }\n\n    const row = [1];\n    for (let i = 1; i <= rowIndex; i++) {\n        for (let j = i - 1; j > 0; j--) {\n            row[j] += row[j - 1];\n        }\n        row.push(1);\n    }\n\n    return row;\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"Dynamic Programming\": https://leetcode.com/tag/dynamic-programming

\n
\n

\"-----------------------------------------------------\"

\n

➤ 120. Triangle

\n

Problem:

\n

Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent numbers on the row below.

\n

For example, given the following triangle

\n
[\n     [2],\n    [3,4],\n   [6,5,7],\n  [4,1,8,3]\n]\n
\n

The minimum path sum from top to bottom is 11 (i.e., 2 + 3 + 5 + 1 = 11).

\n

Note:

\n

Bonus point if you are able to do this using only O(n) extra space, where n is the total number of rows in the triangle.

\n

Solution:

\n

Define f(i, j) to be the minimum path sum from triangle[0][0] to triangle[i][j].

\n
f(i, 0) = f(i-1, j) + triangle[i][0]\nf(i, j) = min( f(i-1, j-1), f(i-1, j) ) + triangle[i][j], 0 < j < i\nf(i, i) = f(i-1, i-1) + triangle[i][i], i > 0\n
\n

Dynamic array can be used.

\n
/**\n * @param {number[][]} triangle\n * @return {number}\n */\nlet minimumTotal = function (triangle) {\n    if (triangle.length <= 0) {\n        return 0;\n    }\n\n    const dp = [triangle[0][0]];\n    for (let i = 1; i < triangle.length; i++) {\n        dp[i] = dp[i - 1] + triangle[i][i];\n        for (let j = i - 1; j >= 1; j--) {\n            dp[j] = Math.min(dp[j], dp[j - 1]) + triangle[i][j];\n        }\n        dp[0] += triangle[i][0];\n    }\n    return Math.min(...dp);\n};\n
\n
\n

Difficulty: Easy\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"Dynamic Programming\": https://leetcode.com/tag/dynamic-programming\nSimilar Questions:\n\"Maximum Subarray\": https://leetcode.com/problems/maximum-subarray\n\"Best Time to Buy and Sell Stock II\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii\n\"Best Time to Buy and Sell Stock III\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iii\n\"Best Time to Buy and Sell Stock IV\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv\n\"Best Time to Buy and Sell Stock with Cooldown\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown

\n
\n

\"-----------------------------------------------------\"

\n

➤ 121. Best Time to Buy and Sell Stock

\n

Problem:

\n

Say you have an array for which the ith element is the price of a given stock on day i.

\n

If you were only permitted to complete at most one transaction (i.e., buy one and sell one share of the stock), design an algorithm to find the maximum profit.

\n

Note that you cannot sell a stock before you buy one.

\n

Example 1:

\n
Input: [7,1,5,3,6,4]\nOutput: 5\nExplanation: Buy on day 2 (price = 1) and sell on day 5 (price = 6), profit = 6-1 = 5.\n             Not 7-1 = 6, as selling price needs to be larger than buying price.\n
\n

Example 2:

\n
Input: [7,6,4,3,1]\nOutput: 0\nExplanation: In this case, no transaction is done, i.e. max profit = 0.\n
\n

Solution:

\n

Only care about positive profits. Take the frist item as base and scan to the right. If we encounter an item j whose price price[j] is lower than the base (which means if we sell now the profit would be negative), we sell j-1 instead and make j the new base.

\n

Because price[j] is lower that the base, using j as new base is guaranteed to gain more profit comparing to the old one.

\n
/**\n * @param {number[]} prices\n * @return {number}\n */\nlet maxProfit = function (prices) {\n    let max = 0;\n    let base = prices[0];\n    for (let i = 1; i < prices.length; i++) {\n        const profit = prices[i] - base;\n        if (profit > max) {\n            max = profit;\n        } else if (profit < 0) {\n            base = prices[i];\n        }\n    }\n    return max;\n};\n
\n
\n

Difficulty: Easy\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"Greedy\": https://leetcode.com/tag/greedy\nSimilar Questions:\n\"Best Time to Buy and Sell Stock\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock\n\"Best Time to Buy and Sell Stock III\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iii\n\"Best Time to Buy and Sell Stock IV\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv\n\"Best Time to Buy and Sell Stock with Cooldown\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown\n\"Best Time to Buy and Sell Stock with Transaction Fee\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-transaction-fee

\n
\n

\"-----------------------------------------------------\"

\n

➤ 122. Best Time to Buy and Sell Stock II

\n

Problem:

\n

Say you have an array for which the ith element is the price of a given stock on day i.

\n

Design an algorithm to find the maximum profit. You may complete as many transactions as you like (i.e., buy one and sell one share of the stock multiple times).

\n

Note: You may not engage in multiple transactions at the same time (i.e., you must sell the stock before you buy again).

\n

Example 1:

\n
Input: [7,1,5,3,6,4]\nOutput: 7\nExplanation: Buy on day 2 (price = 1) and sell on day 3 (price = 5), profit = 5-1 = 4.\n             Then buy on day 4 (price = 3) and sell on day 5 (price = 6), profit = 6-3 = 3.\n
\n

Example 2:

\n
Input: [1,2,3,4,5]\nOutput: 4\nExplanation: Buy on day 1 (price = 1) and sell on day 5 (price = 5), profit = 5-1 = 4.\n             Note that you cannot buy on day 1, buy on day 2 and sell them later, as you are\n             engaging multiple transactions at the same time. You must sell before buying again.\n
\n

Example 3:

\n
Input: [7,6,4,3,1]\nOutput: 0\nExplanation: In this case, no transaction is done, i.e. max profit = 0.\n
\n

Solution:

\n

Sell immediately after the price drops. Or in other perspective, it is the sum of all the incremental pairs (buy in then immediately sell out).

\n
/**\n * @param {number[]} prices\n * @return {number}\n */\nlet maxProfit = function (prices) {\n    let max = 0;\n    for (let i = 1; i < prices.length; i++) {\n        if (prices[i] > prices[i - 1]) {\n            max += prices[i] - prices[i - 1];\n        }\n    }\n    return max;\n};\n
\n
\n

Difficulty: Hard\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"Dynamic Programming\": https://leetcode.com/tag/dynamic-programming\nSimilar Questions:\n\"Best Time to Buy and Sell Stock\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock\n\"Best Time to Buy and Sell Stock II\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii\n\"Best Time to Buy and Sell Stock IV\": https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv\n\"Maximum Sum of 3 Non-Overlapping Subarrays\": https://leetcode.com/problems/maximum-sum-of-3-non-overlapping-subarrays

\n
\n

\"-----------------------------------------------------\"

\n

➤ 123. Best Time to Buy and Sell Stock III

\n

Problem:

\n

Say you have an array for which the ith element is the price of a given stock on day i.

\n

Design an algorithm to find the maximum profit. You may complete at most two transactions.

\n

**Note:**You may not engage in multiple transactions at the same time (i.e., you must sell the stock before you buy again).

\n

Example 1:

\n
Input: [3,3,5,0,0,3,1,4]\nOutput: 6\nExplanation: Buy on day 4 (price = 0) and sell on day 6 (price = 3), profit = 3-0 = 3.\n             Then buy on day 7 (price = 1) and sell on day 8 (price = 4), profit = 4-1 = 3.\n
\n

Example 2:

\n
Input: [1,2,3,4,5]\nOutput: 4\nExplanation: Buy on day 1 (price = 1) and sell on day 5 (price = 5), profit = 5-1 = 4.\n             Note that you cannot buy on day 1, buy on day 2 and sell them later, as you are\n             engaging multiple transactions at the same time. You must sell before buying again.\n
\n

Example 3:

\n
Input: [7,6,4,3,1]\nOutput: 0\nExplanation: In this case, no transaction is done, i.e. max profit = 0.\n
\n

Solution:

\n

Multiple transactions may not be engaged in at the same time. That means if we view the days that involed in the same transaction as a group, there won't be any intersection. We may complete at most two transactions, so divide the days into two groups, [0...k] and [k...n-1]. Notice k exists in both groups because technically we can sell out then immediately buy in at the same day.

\n

Define p1(i) to be the max profit of day [0...i]. This is just like the problem of 121. Best Time to Buy and Sell Stock.

\n
p1(0) = 0\np1(i) = max( p1(i-1), prices[i] - min(prices[0], ..., prices[i-1]) ), 0 < i <= n-1\n
\n

Define p2(i) to be the max profit of day [i...n-1]. This is the mirror of p1.

\n
p2(n-1) = 0\np2(i) = max( p2(i+1), max(prices[i], ..., prices[n-1]) - prices[i] ), n-1 > i >= 0\n
\n

Define f(k) to be p1(k) + p2(k). We need to get max( f(0), ..., f(n-1) ).

\n
/**\n * @param {number[]} prices\n * @return {number}\n */\nlet maxProfit = function (prices) {\n    const len = prices.length;\n    if (len <= 1) {\n        return 0;\n    }\n\n    const dp = [0];\n\n    let min = prices[0];\n    for (let i = 1; i < len; i++) {\n        dp[i] = Math.max(dp[i - 1], prices[i] - min);\n        min = Math.min(prices[i], min);\n    }\n\n    let p2 = 0;\n    let max = prices[len - 1];\n    for (let i = len - 2; i >= 0; i--) {\n        max = Math.max(prices[i], max);\n        p2 = Math.max(p2, max - prices[i]);\n        dp[i] += p2;\n    }\n\n    return Math.max(...dp);\n};\n
\n
\n

Difficulty: Hard\nRelated Topics:\n\"Tree\": https://leetcode.com/tag/tree\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\nSimilar Questions:\n\"Path Sum\": https://leetcode.com/problems/path-sum\n\"Sum Root to Leaf Numbers\": https://leetcode.com/problems/sum-root-to-leaf-numbers\n\"Path Sum IV\": https://leetcode.com/problems/path-sum-iv\n\"Longest Univalue Path\": https://leetcode.com/problems/longest-univalue-path

\n
\n

\"-----------------------------------------------------\"

\n

➤ 124. Binary Tree Maximum Path Sum

\n

Problem:

\n

Given a non-empty binary tree, find the maximum path sum.

\n

For this problem, a path is defined as any sequence of nodes from some starting node to any node in the tree along the parent-child connections. The path must contain at least one node and does not need to go through the root.

\n

Example 1:

\n
Input: [1,2,3]\n\n       1\n      / \\\n     2   3\n\nOutput: 6\n
\n

Example 2:

\n
Input: [-10,9,20,null,null,15,7]\n\n   -10\n   / \\\n  9  20\n    /  \\\n   15   7\n\nOutput: 42\n
\n

Solution:

\n

For every node, there are six possible ways to get the max path sum:

\n
    \n
  • \n

    With node.val

    \n
      \n
    1. node.val plus the max sum of a path that ends with node.left.
      2. \n
    2. node.val plus the max sum of a path that starts with node.right.
      3. \n
    3. node.val plus the max sum of both paths.
      4. \n
    4. Just node.val (the max sum of both paths are negative).
      5. \n
    \n
    • \n
  • \n

    Withoutnode.val (disconnected)

    \n
      \n
    1. The max-sum path is somewhere under the node.left subtree.
      2. \n
    2. The max-sum path is somewhere under the node.right subtree.
      3. \n
    \n
    • \n
\n

There are two ways to implement this.

\n

ONE

\n

Define a function that returns two values. The max sum of a path that may or may not end with root node, and the max sum of the path that ends with root node.

\n
/**\n * Definition for a binary tree node.\n * function TreeNode(val) {\n *     this.val = val;\n *     this.left = this.right = null;\n * }\n */\n/**\n * @param {TreeNode} root\n * @return {number}\n */\nlet maxPathSum = function (root) {\n    return Math.max(..._maxPathSum(root));\n};\n\n/**\n * @param {TreeNode} root\n * @return {number[]}\n */\nfunction _maxPathSum(root) {\n    if (!root) {\n        return [-Infinity, -Infinity];\n    }\n\n    const left = _maxPathSum(root.left);\n    const right = _maxPathSum(root.right);\n    return [Math.max(left[0], right[0], root.val + Math.max(0, left[1], right[1], left[1] + right[1])), Math.max(left[1], right[1], 0) + root.val];\n}\n
\n

TWO

\n

Just return the later (max sum of a path that ends with root). Maintain a global variable to store the disconnected max sum.

\n
/**\n * Definition for a binary tree node.\n * function TreeNode(val) {\n *     this.val = val;\n *     this.left = this.right = null;\n * }\n */\n/**\n * @param {TreeNode} root\n * @return {number}\n */\nlet maxPathSum = function (root) {\n    const global = { max: -Infinity };\n    _maxPathSum(root, global);\n    return global.max;\n};\n\n/**\n * @param {TreeNode} root\n * @param {object} global\n * @param {number} global.max\n * @return {number[]}\n */\nfunction _maxPathSum(root, global) {\n    if (!root) {\n        return -Infinity;\n    }\n\n    const left = _maxPathSum(root.left, global);\n    const right = _maxPathSum(root.right, global);\n    const localMax = Math.max(left, right, 0) + root.val;\n    global.max = Math.max(global.max, localMax, root.val + left + right);\n    return localMax;\n}\n
\n
\n

Difficulty: Easy\nRelated Topics:\n\"Two Pointers\": https://leetcode.com/tag/two-pointers\n\"String\": https://leetcode.com/tag/string\nSimilar Questions:\n\"Palindrome Linked List\": https://leetcode.com/problems/palindrome-linked-list\n\"Valid Palindrome II\": https://leetcode.com/problems/valid-palindrome-ii

\n
\n

\"-----------------------------------------------------\"

\n

➤ 125. Valid Palindrome

\n

Problem:

\n

Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignoring cases.

\n

Note: For the purpose of this problem, we define empty string as valid palindrome.

\n

Example 1:

\n
Input: \"A man, a plan, a canal: Panama\"\nOutput: true\n
\n

Example 2:

\n
Input: \"race a car\"\nOutput: false\n
\n

Solution:

\n

ONE

\n
/**\n * @param {string} s\n * @return {boolean}\n */\nlet isPalindrome = function (s) {\n    const clean = s.toLowerCase().split(/[^a-z0-9]*/);\n    return clean.join('') === clean.reverse().join('');\n};\n
\n

TWO

\n

Remove non-alphanumeric characters then compare.

\n
/**\n * @param {string} s\n * @return {boolean}\n */\nlet isPalindrome = function (s) {\n    const clean = s.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();\n    for (let i = 0, j = clean.length - 1; i < j; i++, j--) {\n        if (clean[i] !== clean[j]) {\n            return false;\n        }\n    }\n    return true;\n};\n
\n

THREE

\n

Compare the char codes.

\n
/**\n * @param {string} s\n * @return {boolean}\n */\nlet isPalindrome = function (s) {\n    for (let i = 0, j = s.length - 1; i < j; i++, j--) {\n        let left = s.charCodeAt(i);\n        while (i < j && (left < 48 || (left > 57 && left < 65) || (left > 90 && left < 97) || left > 122)) {\n            left = s.charCodeAt(++i);\n        }\n        if (i >= j) {\n            return true;\n        }\n        if (left >= 65 && left <= 90) {\n            left += 32;\n        }\n\n        let right = s.charCodeAt(j);\n        while (i < j && (right < 48 || (right > 57 && right < 65) || (right > 90 && right < 97) || right > 122)) {\n            right = s.charCodeAt(--j);\n        }\n        if (i >= j) {\n            return true;\n        }\n        if (right >= 65 && right <= 90) {\n            right += 32;\n        }\n\n        if (left !== right) {\n            return false;\n        }\n    }\n\n    return true;\n};\n
\n
\n

Difficulty: Hard\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"String\": https://leetcode.com/tag/string\n\"Backtracking\": https://leetcode.com/tag/backtracking\n\"Breadth-first Search\": https://leetcode.com/tag/breadth-first-search\nSimilar Questions:\n\"Word Ladder\": https://leetcode.com/problems/word-ladder

\n
\n

\"-----------------------------------------------------\"

\n

➤ 126. Word Ladder II

\n

Problem:

\n

Given two words (beginWord and endWord), and a dictionary's word list, find all shortest transformation sequence(s) from beginWord to endWord, such that:

\n
    \n
  1. Only one letter can be changed at a time
    2. \n
  2. Each transformed word must exist in the word list. Note that beginWord is not a transformed word.
    3. \n
\n

Note:

\n
    \n
  • Return an empty list if there is no such transformation sequence.
    • \n
  • All words have the same length.
    • \n
  • All words contain only lowercase alphabetic characters.
    • \n
  • You may assume no duplicates in the word list.
    • \n
  • You may assume beginWord and endWord are non-empty and are not the same.
    • \n
\n

Example 1:

\n
Input:\nbeginWord = \"hit\",\nendWord = \"cog\",\nwordList = [\"hot\",\"dot\",\"dog\",\"lot\",\"log\",\"cog\"]\n\nOutput:\n[\n  [\"hit\",\"hot\",\"dot\",\"dog\",\"cog\"],\n  [\"hit\",\"hot\",\"lot\",\"log\",\"cog\"]\n]\n
\n

Example 2:

\n
Input:\nbeginWord = \"hit\"\nendWord = \"cog\"\nwordList = [\"hot\",\"dot\",\"dog\",\"lot\",\"log\"]\n\nOutput: []\n\nExplanation: The endWord \"cog\" is not in wordList, therefore no possible transformation.\n
\n

Solution:

\n

This is just like 127. Word Ladder.

\n

The constrain still works, but instead of deleting the words right away, collect them and delete them all when a level ends, so that we can reuse the words (matching different parents in the same level).

\n

The items in the queue are not just words now. Parent nodes are also kept so that we can backtrack the path from the end.

\n
/**\n * @param {string} beginWord\n * @param {string} endWord\n * @param {string[]} wordList\n * @return {string[][]}\n */\nfunction findLadders(beginWord, endWord, wordList) {\n    wordList = new Set(wordList);\n    if (!wordList.has(endWord)) {\n        return [];\n    }\n\n    const ALPHABET = 'abcdefghijklmnopqrstuvwxyz';\n\n    const result = [];\n    let isEndWordFound = false;\n    const levelWords = new Set();\n    const queue = [[beginWord, null], null];\n    while (queue.length > 1) {\n        const node = queue.shift();\n\n        if (node === null) {\n            if (isEndWordFound) {\n                break;\n            }\n            levelWords.forEach((word) => wordList.delete(word));\n            levelWords.clear();\n            queue.push(null);\n            continue;\n        }\n\n        const word = node[0];\n\n        for (let i = word.length - 1; i >= 0; i--) {\n            const head = word.slice(0, i);\n            const tail = word.slice(i + 1);\n\n            for (let c = 0; c < 26; c++) {\n                if (ALPHABET[c] !== word[i]) {\n                    const w = head + ALPHABET[c] + tail;\n                    if (w === endWord) {\n                        const path = [endWord];\n                        for (let n = node; n !== null; n = n[1]) {\n                            path.unshift(n[0]);\n                        }\n                        result.push(path);\n                        isEndWordFound = true;\n                    }\n                    if (wordList.has(w)) {\n                        levelWords.add(w);\n                        queue.push([w, node]);\n                    }\n                }\n            }\n        }\n    }\n\n    return result;\n}\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Breadth-first Search\": https://leetcode.com/tag/breadth-first-search\nSimilar Questions:\n\"Word Ladder II\": https://leetcode.com/problems/word-ladder-ii\n\"Minimum Genetic Mutation\": https://leetcode.com/problems/minimum-genetic-mutation

\n
\n

\"-----------------------------------------------------\"

\n

➤ 127. Word Ladder

\n

Problem:

\n

Given two words (beginWord and endWord), and a dictionary's word list, find the length of shortest transformation sequence from beginWord to endWord, such that:

\n
    \n
  1. Only one letter can be changed at a time.
    2. \n
  2. Each transformed word must exist in the word list. Note that beginWord is not a transformed word.
    3. \n
\n

Note:

\n
    \n
  • Return 0 if there is no such transformation sequence.
    • \n
  • All words have the same length.
    • \n
  • All words contain only lowercase alphabetic characters.
    • \n
  • You may assume no duplicates in the word list.
    • \n
  • You may assume beginWord and endWord are non-empty and are not the same.
    • \n
\n

Example 1:

\n
Input:\nbeginWord = \"hit\",\nendWord = \"cog\",\nwordList = [\"hot\",\"dot\",\"dog\",\"lot\",\"log\",\"cog\"]\n\nOutput: 5\n\nExplanation: As one shortest transformation is \"hit\" -> \"hot\" -> \"dot\" -> \"dog\" -> \"cog\",\nreturn its length 5.\n
\n

Example 2:

\n
Input:\nbeginWord = \"hit\"\nendWord = \"cog\"\nwordList = [\"hot\",\"dot\",\"dog\",\"lot\",\"log\"]\n\nOutput: 0\n\nExplanation: The endWord \"cog\" is not in wordList, therefore no possible transformation.\n
\n

Solution:

\n

Think of it as building a tree, with begineWord as root and endWord as leaves.

\n

The best way control the depth (length of the shortest transformations) while building the tree is level-order traversal (BFS).

\n

We do not actually build the tree because it is expensive (astronomical if the list is huge). In fact, we only need one shortest path. So just like Dijkstra's algorithm, we say that the first time (level i) we encounter a word that turns out to be in a shortest path, then level i is the lowest level this word could ever get. We can safely remove it from the wordList.

\n

To find all the next words, instead of filtering the wordList, enumerate all 25 possible words and check if in wordList.

\n
/**\n * @param {string} beginWord\n * @param {string} endWord\n * @param {string[]} wordList\n * @return {number}\n */\nlet ladderLength = function (beginWord, endWord, wordList) {\n    wordList = new Set(wordList);\n    if (!wordList.has(endWord)) {\n        return 0;\n    }\n\n    const ALPHABET = 'abcdefghijklmnopqrstuvwxyz';\n\n    let level = 1;\n    const queue = [beginWord, null];\n    while (queue.length > 1) {\n        const word = queue.shift();\n\n        if (word === null) {\n            level++;\n            queue.push(null);\n            continue;\n        }\n\n        for (let i = word.length - 1; i >= 0; i--) {\n            const head = word.slice(0, i);\n            const tail = word.slice(i + 1);\n\n            for (let c = 0; c < 26; c++) {\n                if (ALPHABET[c] !== word[i]) {\n                    const word = head + ALPHABET[c] + tail;\n                    if (word === endWord) {\n                        return level + 1;\n                    }\n                    if (wordList.delete(word)) {\n                        queue.push(word);\n                    }\n                }\n            }\n        }\n    }\n\n    return 0;\n};\n
\n
\n

Difficulty: Hard\nRelated Topics:\n\"Array\": https://leetcode.com/tag/array\n\"Union Find\": https://leetcode.com/tag/union-find\nSimilar Questions:\n\"Binary Tree Longest Consecutive Sequence\": https://leetcode.com/problems/binary-tree-longest-consecutive-sequence

\n
\n

\"-----------------------------------------------------\"

\n

➤ 128. Longest Consecutive Sequence

\n

Problem:

\n

Given an unsorted array of integers, find the length of the longest consecutive elements sequence.

\n

Your algorithm should run in O(n) complexity.

\n

Example:

\n
Input: [100, 4, 200, 1, 3, 2]\nOutput: 4\nExplanation: The longest consecutive elements sequence is [1, 2, 3, 4]. Therefore its length is 4.\n
\n

Solution:

\n

Build a Set from the list. Pick a number, find all it's adjacent numbers that are also in the Set. Count them and remove them all from the Set. Repeat until the Set is empty. Time complexity O(n + n) = O(n).

\n
/**\n * @param {number[]} nums\n * @return {number}\n */\nlet longestConsecutive = function (nums) {\n    const numSet = new Set(nums);\n    let maxCount = 0;\n    while (numSet.size > 0) {\n        const num = numSet.values().next().value;\n        numSet.delete(num);\n        let count = 1;\n        for (let n = num + 1; numSet.delete(n); n++) {\n            count++;\n        }\n        for (let n = num - 1; numSet.delete(n); n--) {\n            count++;\n        }\n        if (count > maxCount) {\n            maxCount = count;\n        }\n    }\n    return maxCount;\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Tree\": https://leetcode.com/tag/tree\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\nSimilar Questions:\n\"Path Sum\": https://leetcode.com/problems/path-sum\n\"Binary Tree Maximum Path Sum\": https://leetcode.com/problems/binary-tree-maximum-path-sum

\n
\n

\"-----------------------------------------------------\"

\n

➤ 129. Sum Root to Leaf Numbers

\n

Problem:

\n

Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number.

\n

An example is the root-to-leaf path 1->2->3 which represents the number 123.

\n

Find the total sum of all root-to-leaf numbers.

\n

Note: A leaf is a node with no children.

\n

Example:

\n
Input: [1,2,3]\n    1\n   / \\\n  2   3\nOutput: 25\nExplanation:\nThe root-to-leaf path 1->2 represents the number 12.\nThe root-to-leaf path 1->3 represents the number 13.\nTherefore, sum = 12 + 13 = 25.\n
\n

Example 2:

\n
Input: [4,9,0,5,1]\n    4\n   / \\\n  9   0\n / \\\n5   1\nOutput: 1026\nExplanation:\nThe root-to-leaf path 4->9->5 represents the number 495.\nThe root-to-leaf path 4->9->1 represents the number 491.\nThe root-to-leaf path 4->0 represents the number 40.\nTherefore, sum = 495 + 491 + 40 = 1026.\n
\n

Solution:

\n

To write a clean solution for this promblem, use 0 as indicator of leaf node. If all the children get 0, it is a leaf node, return the sum of current level.

\n
/**\n * Definition for a binary tree node.\n * function TreeNode(val) {\n *     this.val = val;\n *     this.left = this.right = null;\n * }\n */\n/**\n * @param {TreeNode} root\n * @return {number}\n */\nlet sumNumbers = function (root, sum = 0) {\n    if (!root) {\n        return 0;\n    }\n    sum = sum * 10 + root.val;\n    return sumNumbers(root.left, sum) + sumNumbers(root.right, sum) || sum;\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\n\"Breadth-first Search\": https://leetcode.com/tag/breadth-first-search\n\"Union Find\": https://leetcode.com/tag/union-find\nSimilar Questions:\n\"Number of Islands\": https://leetcode.com/problems/number-of-islands\n\"Walls and Gates\": https://leetcode.com/problems/walls-and-gates

\n
\n

\"-----------------------------------------------------\"

\n

➤ 130. Surrounded Regions

\n

Problem:

\n

Given a 2D board containing 'X' and 'O' (the letter O), capture all regions surrounded by 'X'.

\n

A region is captured by flipping all 'O's into 'X's in that surrounded region.

\n

Example:

\n
X X X X\nX O O X\nX X O X\nX O X X\n
\n

After running your function, the board should be:

\n
X X X X\nX X X X\nX X X X\nX O X X\n
\n

Explanation:

\n

Surrounded regions shouldn't be on the border, which means that any 'O' on the border of the board are not flipped to 'X'. Any 'O' that is not on the border and it is not connected to an 'O' on the border will be flipped to 'X'. Two cells are connected if they are adjacent cells connected horizontally or vertically.

\n

Solution:

\n

Find all the Os that are connected to the Os on the border, change them to #. Then scan the board, change O to X and # back to O.

\n

The process of finding the connected Os is just like tree traversal. Os on the border are the same level. Their children are the second level. And so on.

\n

So both BFS and DFS are good. I prefer BFS when pruning is not needed in favor of its readability.

\n
/**\n * @param {character[][]} board\n * @return {void} Do not return anything, modify board in-place instead.\n */\nlet solve = function (board) {\n    const height = board.length;\n    if (height <= 1) {\n        return;\n    }\n    const width = board[0].length;\n    if (width <= 1) {\n        return;\n    }\n\n    const rowend = height - 1;\n    const colend = width - 1;\n\n    const queue = [];\n\n    for (let row = 0; row < height; row++) {\n        if (board[row][0] === 'O') {\n            board[row][0] = '#';\n            queue.push(row, 0);\n        }\n        if (board[row][colend] === 'O') {\n            board[row][colend] = '#';\n            queue.push(row, colend);\n        }\n    }\n\n    for (let col = 0; col < width; col++) {\n        if (board[0][col] === 'O') {\n            board[0][col] = '#';\n            queue.push(0, col);\n        }\n        if (board[rowend][col] === 'O') {\n            board[rowend][col] = '#';\n            queue.push(rowend, col);\n        }\n    }\n\n    while (queue.length > 0) {\n        const row = queue.shift();\n        const col = queue.shift();\n        if (row < rowend && board[row + 1][col] === 'O') {\n            board[row + 1][col] = '#';\n            queue.push(row + 1, col);\n        }\n        if (row > 0 && board[row - 1][col] === 'O') {\n            board[row - 1][col] = '#';\n            queue.push(row - 1, col);\n        }\n        if (board[row][col + 1] === 'O') {\n            board[row][col + 1] = '#';\n            queue.push(row, col + 1);\n        }\n        if (board[row][col - 1] === 'O') {\n            board[row][col - 1] = '#';\n            queue.push(row, col - 1);\n        }\n    }\n\n    for (let row = 0; row < height; row++) {\n        for (let col = 0; col < width; col++) {\n            if (board[row][col] === '#') {\n                board[row][col] = 'O';\n            } else if (board[row][col] === 'O') {\n                board[row][col] = 'X';\n            }\n        }\n    }\n};\n
\n
\n

Difficulty: Medium\nRelated Topics:\n\"Depth-first Search\": https://leetcode.com/tag/depth-first-search\n\"Breadth-first Search\": https://leetcode.com/tag/breadth-first-search\n\"Graph\": https://leetcode.com/tag/graph\nSimilar Questions:\n\"Copy List with Random Pointer\": https://leetcode.com/problems/copy-list-with-random-pointer

\n
\n

\"-----------------------------------------------------\"

\n

➤ 133. Clone Graph

\n

Problem:

\n

Given the head of a graph, return a deep copy (clone) of the graph. Each node in the graph contains a label (int) and a list (List[UndirectedGraphNode]) of its neighbors. There is an edge between the given node and each of the nodes in its neighbors.

\n

OJ's undirected graph serialization (so you can understand error output):

\n

Nodes are labeled uniquely.

\n

We use # as a separator for each node, and , as a separator for node label and each neighbor of the node.

\n

As an example, consider the serialized graph {0,1,2#1,2#2,2}.

\n

The graph has a total of three nodes, and therefore contains three parts as separated by #.

\n
    \n
  1. First node is labeled as 0. Connect node 0 to both nodes 1 and 2.
    2. \n
  2. Second node is labeled as 1. Connect node 1 to node 2.
    3. \n
  3. Third node is labeled as 2. Connect node 2 to node 2 (itself), thus forming a self-cycle.
    4. \n
\n

Visually, the graph looks like the following:

\n
       1\n      / \\\n     /   \\\n    0 --- 2\n         / \\\n         \\_/\n
\n

Note: The information about the tree serialization is only meant so that you can understand error output if you get a wrong answer. You don't need to understand the serialization to solve the problem.

\n

Solution:

\n

DFS. Cache the visited node before entering the next recursion.

\n
/**\n * Definition for undirected graph.\n * function UndirectedGraphNode(label) {\n *     this.label = label;\n *     this.neighbors = [];   // Array of UndirectedGraphNode\n * }\n */\n\n/**\n * @param {UndirectedGraphNode} graph\n * @return {UndirectedGraphNode}\n */\nlet cloneGraph = function (graph) {\n    const cache = {};\n    return _clone(graph);\n\n    function _clone(graph) {\n        if (!graph) {\n            return graph;\n        }\n        const label = graph.label;\n        if (!cache[label]) {\n            cache[label] = new UndirectedGraphNode(label);\n            cache[label].neighbors = graph.neighbors.map(_clone);\n        }\n        return cache[label];\n    }\n};\n
\n

\"alt

\n
/**\n * Definition for a binary tree node.\n * function TreeNode(val) {\n *     this.val = val;\n *     this.left = this.right = null;\n * }\n */\n/**\n * @param {TreeNode} root\n * @return {TreeNode}\n */\nconst upsideDownBinaryTree = function (root) {\n    let curr = root;\n    let next = null;\n    let temp = null;\n    let prev = null;\n    while (curr !== null) {\n        next = curr.left;\n        curr.left = temp;\n        temp = curr.right;\n        curr.right = prev;\n        prev = curr;\n        curr = next;\n    }\n    return prev;\n};\n\n// another\n\nconst upsideDownBinaryTree = function (root) {\n    if (root == null || root.left == null) {\n        return root;\n    }\n    const newRoot = upsideDownBinaryTree(root.left);\n    root.left.left = root.right;\n    root.left.right = root;\n    root.left = null;\n    root.right = null;\n    return newRoot;\n};\n
\n

\"alt

\n
/**\n * @param {number[]} A\n * @return {number}\n */\nconst maxSubarraySumCircular = function (A) {\n    let minSum = Infinity,\n        sum = 0,\n        maxSum = -Infinity,\n        curMax = 0,\n        curMin = 0;\n    for (let a of A) {\n        sum += a;\n        curMax = Math.max(curMax + a, a);\n        maxSum = Math.max(maxSum, curMax);\n        curMin = Math.min(curMin + a, a);\n        minSum = Math.min(minSum, curMin);\n    }\n    return maxSum > 0 ? Math.max(maxSum, sum - minSum) : maxSum;\n};\n
\n

\"-----------------------------------------------------\"

\n

➤ Balanced Binary Tree - LeetCode

\n
\n

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

\n
\n

Given a binary tree, determine if it is height-balanced.

\n

For this problem, a height-balanced binary tree is defined as:

\n
\n

a binary tree in which the left and right subtrees of every node differ in height by no more than 1.

\n
\n

Example 1:

\n

\n

Input: root = [3,9,20,null,null,15,7]\nOutput: true

\n

Example 2:

\n

\n

Input: root = [1,2,2,3,3,null,null,4,4]\nOutput: false

\n

Example 3:

\n

Input: root = []\nOutput: true

\n

Constraints:

\n
    \n
  • The number of nodes in the tree is in the range [0, 5000].
    • \n
  • -104 <= Node.val <= 104
    • \n
\n

Source# Convert Sorted Array to Binary Search Tree

\n
\n

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

\n
\n

Given an array where elements are sorted in ascending order, convert it to a height balanced BST.

\n

For this problem, a height-balanced binary tree is defined as a binary tree in which the depth of the two subtrees of every node never differ by more than 1.

\n

Example:

\n

Given the sorted array: [-10,-3,0,5,9],

\n

One possible answer is: [0,-3,9,-10,null,5], which represents the following height balanced BST:

\n
  0\n / \\\\\n
\n

-3 9\n/ /\n-10 5

\n

Source# Delete Node in a BST

\n
\n

Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

\n
\n

Given a root node reference of a BST and a key, delete the node with the given key in the BST. Return the root node reference (possibly updated) of the BST.

\n

Basically, the deletion can be divided into two stages:

\n
    \n
  1. Search for a node to remove.
    2. \n
  2. If the node is found, delete the node.
    3. \n
\n

Follow up: Can you solve it with time complexity O(height of tree)?

\n

Example 1:

\n

\n

Input: root = [5,3,6,2,4,null,7], key = 3\nOutput: [5,4,6,2,null,null,7]\nExplanation: Given key to delete is 3. So we find the node with value 3 and delete it.\nOne valid answer is [5,4,6,2,null,null,7], shown in the above BST.\nPlease notice that another valid answer is [5,2,6,null,4,null,7] and it's also accepted.\n

\n

Example 2:

\n

Input: root = [5,3,6,2,4,null,7], key = 0\nOutput: [5,3,6,2,4,null,7]\nExplanation: The tree does not contain a node with value = 0.

\n

Example 3:

\n

Input: root = [], key = 0\nOutput: []

\n

Constraints:

\n
    \n
  • The number of nodes in the tree is in the range [0, 104].
    • \n
  • -105 <= Node.val <= 105
    • \n
  • Each node has a unique value.
    • \n
  • root is a valid binary search tree.
    • \n
  • -105 <= key <= 105
    • \n
\n

Source\"alt\n\"alt

\n
/**\n * @param {number[][]} intervals\n * @return {number}\n */\nconst minMeetingRooms = function (intervals) {\n    const len = intervals.length;\n    const starts = new Array(len);\n    const ends = new Array(len);\n    for (let i = 0; i < len; i++) {\n        starts[i] = intervals[i][0];\n        ends[i] = intervals[i][1];\n    }\n    starts.sort((a, b) => a - b);\n    ends.sort((a, b) => a - b);\n    let rooms = 0;\n    let endsIdx = 0;\n    for (let i = 0; i < len; i++) {\n        if (starts[i] < ends[endsIdx]) rooms++;\n        else endsIdx++;\n    }\n    return rooms;\n};\n
\n

\"-----------------------------------------------------\"

"},{"url":"/docs/docs/bash/","relativePath":"docs/docs/bash.md","relativeDir":"docs/docs","base":"bash.md","name":"bash","frontmatter":{"title":"Bash Commands That Save Me Time and Frustration","weight":0,"excerpt":"Bash Commands That Save Me Time and Frustration","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Bash Commands

\n

Bash Commands That Save Me Time and Frustration

\n

Here's a list of bash commands that stand between me and insanity.

\n
\n

Bash Commands That Save Me Time and Frustration

\n

Here's a list of bash commands that stand between me and insanity.

\n
https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b\n
\n

This article will be accompanied by the following github repository which will contain all the commands listed as well as folders that demonstrate before and after usage!

\n
\n

bgoonz/bash-commands-walkthrough
\nto accompany the medium article I am writing. Contribute to bgoonz/bash-commands-walkthrough development by creating an…github.com

\n
\n

The readme for this git repo will provide a much more condensed list… whereas this article will break up the commands with explanations… images & links!

\n
\n

I will include the code examples as both github gists (for proper syntax highlighting) and as code snippets adjacent to said gists so that they can easily be copied and pasted… or … if you're like me for instance; and like to use an extension to grab the markdown content of a page… the code will be included rather than just a link to the gist!

\n
\n

Here's a Cheatsheet:

\n

Getting Started (Advanced Users Skip Section):

\n
\n

✔ Check the Current Directory ➡ pwd:

\n

On the command line, it's important to know the directory we are currently working on. For that, we can use pwd command.

\n
It shows that I'm working on my Desktop directory.\n

✔ Display List of Files ➡ ls:

\n

To see the list of files and directories in the current directory use ls command in your CLI.

\n
Shows all of my files and directories of my Desktop directory.\n
    \n
  • To show the contents of a directory pass the directory name to the ls command i.e. ls directory_name.
    • \n
  • Some useful ls command options:-
    • \n
\n

OptionDescriptionls -alist all files including hidden file starting with '.'ls -llist with the long formatls -lalist long format including hidden files

\n

✔ Create a Directory ➡ mkdir:

\n

We can create a new folder using the mkdir command. To use it type mkdir folder_name.

\n
Use `ls` command to see the directory is created or not.\n

I created a cli-practice directory in my working directory i.e. Desktop directory.

\n

✔ Move Between Directories ➡ cd:

\n

It's used to change directory or to move other directories. To use it type cd directory_name.

\n
Can use `pwd` command to confirm your directory name.\n

Changed my directory to the cli-practice directory. And the rest of the tutorial I'm gonna work within this directory.

\n

✔ Parent Directory ➡ ..:

\n

We have seen cd command to change directory but if we want to move back or want to move to the parent directory we can use a special symbol .. after cd command, like cd ..

\n

✔ Create Files ➡ touch:

\n

We can create an empty file by typing touch file_name. It's going to create a new file in the current directory (the directory you are currently in) with your provided name.

\n
I created a hello.txt file in my current working directory. Again you can use `ls` command to see the file is created or not.\n

Now open your hello.txt file in your text editor and write Hello Everyone! into your hello.txt file and save it.

\n

✔ Display the Content of a File ➡ cat:

\n

We can display the content of a file using the cat command. To use it type cat file_name.

\n
Shows the content of my hello.txt file.\n

✔ Move Files & Directories ➡ mv:

\n

To move a file and directory, we use mv command.

\n

By typing mv file_to_move destination_directory, you can move a file to the specified directory.

\n

By entering mv directory_to_move destination_directory, you can move all the files and directories under that directory.

\n

Before using this command, we are going to create two more directories and another txt file in our cli-practice directory.

\n

mkdir html css touch bye.txt

\n
Yes, we can use multiple directories & files names one after another to create multiple directories & files in one command.\n
Moved my bye.txt file into my css directory and then moved my css directory into my html directory.\n

✔ Rename Files & Directories ➡ mv:

\n

mv command can also be used to rename a file and a directory.

\n

You can rename a file by typing mv old_file_name new_file_name & also rename a directory by typing mv old_directory_name new_directory_name.

\n
Renamed my hello.txt file to the hi.txt file and html directory to the folder directory.\n

✔ Copy Files & Directories ➡ cp:

\n

To do this, we use the cp command.

\n
    \n
  • You can copy a file by entering cp file_to_copy new_file_name.
    • \n
\n
Copied my hi.txt file content into hello.txt file. For confirmation open your hello.txt file in your text editor.\n
    \n
  • You can also copy a directory by adding the -r option, like cp -r directory_to_copy new_directory_name.
    • \n
\n

The -r option for \"recursive\" means that it will copy all of the files including the files inside of subfolders.

\n
Here I copied all of the files from the folder to folder-copy.\n

✔ Remove Files & Directories ➡ rm:

\n

To do this, we use the rm command.

\n
    \n
  • To remove a file, you can use the command like rm file_to_remove.
    • \n
\n
Here I removed my hi.txt file.\n
    \n
  • To remove a directory, use the command like rm -r directory_to_remove.
    • \n
\n
I removed my folder-copy directory from my cli-practice directory i.e. current working directory.\n

✔ Clear Screen ➡ clear:

\n

Clear command is used to clear the terminal screen.

\n

✔ Home Directory ➡ ~:

\n

The Home directory is represented by ~. The Home directory refers to the base directory for the user. If we want to move to the Home directory we can use cd ~ command. Or we can only use cd command.

\n
\n

MY COMMANDS:

\n

1.) Recursively unzip zip files and then delete the archives when finished:

\n

here is a folder containing the before and after… I had to change folder names slightly due to a limit on the length of file-paths in a github repo.

\n
find . -name \"*.zip\" | while read filename; do unzip -o -d \"`dirname \"$filename\"`\" \"$filename\"; done;\n\nfind . -name \"*.zip\" -type f -print -delete\n
\n
\n

2.) Install node modules recursively:

\n
npm i -g recursive-install\n\nnpm-recursive-install\n
\n
\n

3.) Clean up unnecessary files/folders in git repo:

\n
find . -empty -type f -print -delete #Remove empty files\n\n# -------------------------------------------------------\nfind . -empty -type d -print -delete #Remove empty folders\n\n# -------------------------------------------------------\n\n# This will remove .git folders...    .gitmodule files as well as .gitattributes and .gitignore files.\n\nfind . \\( -name \".git\" -o -name \".gitignore\" -o -name \".gitmodules\" -o -name \".gitattributes\" \\) -exec rm -rf -- {} +\n\n# -------------------------------------------------------\n\n# This will remove the filenames you see listed below that just take up space if a repo has been downloaded for use exclusively in your personal file system (in which case the following files just take up space)# Disclaimer... you should not use this command in a repo that you intend to use with your work as it removes files that attribute the work to their original creators!\n\nfind . \\( -name \"*SECURITY.txt\" -o -name \"*RELEASE.txt\" -o -name \"*CHANGELOG.txt\" -o -name \"*LICENSE.txt\" -o -name \"*CONTRIBUTING.txt\" -name \"*HISTORY.md\" -o -name \"*LICENSE\" -o -name \"*SECURITY.md\" -o -name \"*RELEASE.md\" -o -name \"*CHANGELOG.md\" -o -name \"*LICENSE.md\" -o -name \"*CODE_OF_CONDUCT.md\" -o -name \"\\*CONTRIBUTING.md\" \\) -exec rm -rf -- {} +\n
\n

In Action:

\n

The following output from my bash shell corresponds to the directory:

\n

bgoonz/bash-commands-walkthrough
\nDeployment github-pages Navigation Big O notation is the language we use for talking about how long an algorithm takes…github.com

\n

which was created by running the aforementioned commands in in a perfect copy of this directory:

\n

bgoonz/DS-ALGO-OFFICIAL
\nDeployment github-pages Navigation Big O notation is the language we use for talking about how long an algorithm takes…github.com

\n
\n

…..below is the terminal output for the following commands:

\n
\n
pwd\n/mnt/c/Users/bryan/Downloads/bash-commands/steps/3-clean-up-fluf/DS-ALGO-OFFICIAL-master\n
\n
\n

After printing the working directory for good measure:

\n
\n
find . -empty -type f -print -delete\n
\n
\n

The above command deletes empty files recursively starting from the directory in which it was run:

\n
\n
./CONTENT/DS-n-Algos/File-System/file-utilities/node_modules/line-reader/test/data/empty_file.txt\n./CONTENT/DS-n-Algos/_Extra-Practice/free-code-camp/nodejs/http-collect.js\n./CONTENT/Resources/Comments/node_modules/mime/.npmignore\n./markdown/tree2.md\n./node_modules/loadashes6/lodash/README.md\n./node_modules/loadashes6/lodash/release.md\n./node_modules/web-dev-utils/Markdown-Templates/Markdown-Templates-master/filled-out-readme.md\n|01:33:16|bryan@LAPTOP-9LGJ3JGS:[DS-ALGO-OFFICIAL-master] DS-ALGO-OFFICIAL-master_exitstatus:0[╗___________o>\n
\n
\n

The command seen below deletes empty folders recursively starting from the directory in which it was run:

\n
\n
find . -empty -type d -print -delete\n
\n
\n

The resulting directories….

\n
\n
|01:33:16|bryan@LAPTOP-9LGJ3JGS:[DS-ALGO-OFFICIAL-master] DS-ALGO-OFFICIAL-master_exitstatus:0[╗___________o>\n\nfind . -empty -type d -print -delete\n./.git/branches\n./.git/objects/info\n./.git/refs/tags\n|01:33:31|bryan@LAPTOP-9LGJ3JGS:[DS-ALGO-OFFICIAL-master] DS-ALGO-OFFICIAL-master_exitstatus:0[╗___________o>\n
\n
\n

The command seen below deletes .git folders as well as .gitignore, .gitattributes, .gitmodule files

\n
\n
find . \\( -name \".git\" -o -name \".gitignore\" -o -name \".gitmodules\" -o -name \".gitattributes\" \\) -exec rm -rf -- {} +\n
\n

The command seen below deletes most SECURITY, RELEASE, CHANGELOG, LICENSE, CONTRIBUTING, & HISTORY files that take up pointless space in repo's you wish to keep exclusively for your own reference.

\n

!!!Use with caution as this command removes the attribution of the work from it's original authors!!!!!

\n
\"!!!Use
!!!Use with caution as this command removes the attribution of the work from it's original authors!!!!!
find . \\( -name \"*SECURITY.txt\" -o -name \"*RELEASE.txt\" -o -name \"*CHANGELOG.txt\" -o -name \"*LICENSE.txt\" -o -name \"*CONTRIBUTING.txt\" -name \"*HISTORY.md\" -o -name \"*LICENSE\" -o -name \"*SECURITY.md\" -o -name \"*RELEASE.md\" -o -name \"*CHANGELOG.md\" -o -name \"*LICENSE.md\" -o -name \"*CODE_OF_CONDUCT.md\" -o -name \"*CONTRIBUTING.md\" \\) -exec rm -rf -- {} +\n
\n

4.) Generate index.html file that links to all other files in working directory:

\n
#!/bin/sh\n# find ./ | grep -i \"\\.*$\" >files\nfind ./ | sed -E -e 's/([^ ]+[ ]+){8}//' | grep -i \"\\.*$\">files\nlisting=\"files\"\nout=\"\"\nhtml=\"index.html\"\nout=\"basename $out.html\"\nhtml=\"index.html\"\ncmd() {\n  echo '  <!DOCTYPE html>'\n  echo '<html>'\n  echo '<head>'\n  echo '  <meta http-equiv=\"Content-Type\" content=\"text/html\">'\n  echo '  <meta name=\"Author\" content=\"Bryan Guner\">'\n  echo '<link rel=\"stylesheet\" href=\"./assets/prism.css\">'\n  echo ' <link rel=\"stylesheet\" href=\"./assets/style.css\">'\n  echo ' <script async defer src=\"./assets/prism.js\"></script>'\n  echo \"  <title> directory </title>\"\n  echo \"\"\n  echo '<style>'\necho '    a {'\necho '      color: black;'\necho '    }'\necho ''\necho '    li {'\necho '      border: 1px solid black !important;'\necho '      font-size: 20px;'\necho '      letter-spacing: 0px;'\necho '      font-weight: 700;'\necho '      line-height: 16px;'\necho '      text-decoration: none !important;'\necho '      text-transform: uppercase;'\necho '      background: #194ccdaf !important;'\necho '      color: black !important;'\necho '      border: none;'\necho '      cursor: pointer;'\necho '      justify-content: center;'\necho '      padding: 30px 60px;'\necho '      height: 48px;'\necho '      text-align: center;'\necho '      white-space: normal;'\necho '      border-radius: 10px;'\necho '      min-width: 45em;'\necho '      padding: 1.2em 1em 0;'\necho '      box-shadow: 0 0 5px;'\necho '      margin: 1em;'\necho '      display: grid;'\necho '      -webkit-border-radius: 10px;'\necho '      -moz-border-radius: 10px;'\necho '      -ms-border-radius: 10px;'\necho '      -o-border-radius: 10px;'\necho '    }'\necho '  </style>'\n  echo '</head>'\n  echo '<body>'\n  echo \"\"\n  # continue with the HTML stuff\n  echo \"\"\n  echo \"\"\n  echo \"<ul>\"\n  awk '{print \"<li><a href=\\\"\"$1\"\\\">\",$1,\"&nbsp;</a></li>\"}' $listing\n  # awk '{print \"<li>\"};\n  #  {print \" <a href=\\\"\"$1\"\\\">\",$1,\"</a></li>&nbsp;\"}' \\ $listing\n  echo \"\"\n  echo \"</ul>\"\n  echo \"</body>\"\n  echo \"</html>\"\n}\ncmd $listing --sort=extension >>$html\n
\n

In Action:

\n

I will use this copy of my Data Structures Practice Site to demonstrate the result:

\n

side-projects-42/DS-Bash-Examples-Deploy
\nDeployment github-pages Navigation Big O notation is the language we use for talking about how long an algorithm takes…github.com

\n
#### The result is a index.html file that contains a list of links to each file in the directory:\n
\n

here is a link to and photo of the resulting html file:

\n
\n

index.html
\nCONTENT/DS-n-Algos/quirky-meninsky-4181b5.netlify.app

\n
\n
\n

5.) Download all links to a files of a specified extension on a user provided (url) webpage:

\n
wget -r -A.pdf https://overapi.com/gitwget --wait=2 --level=inf --limit-rate=20K --recursive --page-requisites --user-agent=Mozilla --no-parent --convert-links --adjust-extension --no-clobber -e robots=off\n
\n
\n

The result is stored in this directory:

\n
\n
\n
\n

6.)Recursively remove lines of text containing the string badFolder from files in the working directory.

\n
find . -type f -exec sed -i '/badFolder/d' ./* {} \\;\n\n# OR\n\nfind . -name 'result.md'  -type f -exec sed -i '/badFolder/d' ./* {} \\;\n
\n

As an example I will run this command on a file containing the text:

\n
Hacks Blog\n\nRead more at hacks.mozilla.org\n\nbadFolder\n\nbadFolder Implementing Private Fields for JavaScript\n\nWhen implementing a language feature for JavaScript, an implementer must make decisions about how the language in the specification maps to the implementation. Private fields is an example of where the specification language and implementation reality diverge, at least in SpiderMonkey- the JavaScript engine which powers Firefox. To understand more, I'll explain what private fields are, a couple of models for thinking about them, and explain why our implementation diverges from the specification language.The post Implementing Private Fields for JavaScript appeared first on Mozilla Hacks - the Web developer blog.\n\nPosted Tuesday, June 8, 2021 by Matthew Gaudet\n\nLooking fine with Firefox 89\n\nFirefox 89 has smartened up and brings with it a slimmed-down, slightly more minimalist interface.badFolder Along with this new look, we get some great styling features including a force-colours feature for media queries and better control over how fonts are displayed. The long-awaited top-level await keyword for JavaScript modules is now enabled, as well as the PerformanceEventTiming interface, which is another addition to the performance suite of APIs: 89 really has been working out!The post Looking fine with Firefox 89 appeared first on Mozilla Hacks - the Web developer blog.\n\nbadFolder\n\nPosted Tuesday, June 1, 2021 by Chris Mills\n\nbadFolder\n\nImproving Firefox stability on Linux\n\nRoughly a year ago at Mozilla we started an effort to improve Firefox stability on Linux. This effort quickly became an example of good synergies between FOSS projects.The post Improving Firefox stability on Linux appeared first on Mozilla Hacks - the Web developer blog.\n\nPosted Wednesday, May 19, 2021 by Gabriele Svelto badFolder\n\nIntroducing Firefox's new Site Isolation Security Architecture\n\nLike any web browser, Firefox loads code from untrusted and potentially hostile websites and runs it on your computer. To protect you against new types of attacks from malicious sites and to meet the security principles of Mozilla, we set out to redesign Firefox on desktop.The post Introducing Firefox's new Site Isolation Security Architecture appeared first on Mozilla Hacks - the Web developer blog.\n\nPosted Tuesday, May 18, 2021 by Anny Gakhokidze\n\nPyodide Spin Out and 0.17 Release\n\nWe are happy to announce that Pyodide has become an independent and community-driven project. We are also pleased to announce the 0.17 release for Pyodide with many new features and improvements. Pyodide consists of the CPython 3.8 interpreter compiled to WebAssembly which allows Python to run in the browser.The post Pyodide Spin Out and 0.17 Release appeared first on Mozilla Hacks - the Web developer blog. badFolder\n\nPosted Thursday, April 22, 2021 by Teon Brooks\n
\n

I modified the command slightly to apply only to files called 'result.md':

\n
\n

The result is :

\n
\n
Hacks Blog\n\nRead more at hacks.mozilla.org\n\nWhen implementing a language feature for JavaScript, an implementer must make decisions about how the language in the specification maps to the implementation. Private fields is an example of where the specification language and implementation reality diverge, at least in SpiderMonkey- the JavaScript engine which powers Firefox. To understand more, I'll explain what private fields are, a couple of models for thinking about them, and explain why our implementation diverges from the specification language.The post Implementing Private Fields for JavaScript appeared first on Mozilla Hacks - the Web developer blog.\n\nPosted Tuesday, June 8, 2021 by Matthew Gaudet\n\nLooking fine with Firefox 89\n\nPosted Tuesday, June 1, 2021 by Chris Mills\n\nImproving Firefox stability on Linux\n\nRoughly a year ago at Mozilla we started an effort to improve Firefox stability on Linux. This effort quickly became an example of good synergies between FOSS projects.The post Improving Firefox stability on Linux appeared first on Mozilla Hacks - the Web developer blog.\n\nIntroducing Firefox's new Site Isolation Security Architecture\n\nLike any web browser, Firefox loads code from untrusted and potentially hostile websites and runs it on your computer. To protect you against new types of attacks from malicious sites and to meet the security principles of Mozilla, we set out to redesign Firefox on desktop.The post Introducing Firefox's new Site Isolation Security Architecture appeared first on Mozilla Hacks - the Web developer blog.\n\nPosted Tuesday, May 18, 2021 by Anny Gakhokidze\n\nPyodide Spin Out and 0.17 Release\n\nPosted Thursday, April 22, 2021 by Teon Brooks\n
\n
\n

the test.txt and result.md files can be found here:

\n

bgoonz/bash-commands-walkthrough
\nto accompany the medium article I am writing. Contribute to bgoonz/bash-commands-walkthrough development by creating an…github.com

\n
\n

7.) Execute command recursively:

\n

Here I have modified the command I wish to run recursively to account for the fact that the 'find' command already works recursively, by appending the -maxdepth 1 flag…

\n
\n

I am essentially removing the recursive action of the find command…

\n
\n

That way, if the command affects the more deeply nested folders we know the outer RecurseDirs function we are using to run the find/pandoc line once in every subfolder of the working directory… is working properly!

\n
**Run in the folder shown to the left… we would expect every .md file to be accompanied by a newly generated html file by the same name.**\n

The results of said operation can be found in the following directory

\n

In Action:

\n

🢃 Below 🢃

\n
\n

The final result is:

\n
\n

If you want to run any bash script recursively all you have to do is substitue out line #9 with the command you want to run once in every sub-folder.

\n
function RecurseDirs ()\n{\n    oldIFS=$IFS\n    IFS=$'\\n'\n    for f in \"$@\"\n    do\n\n#Replace the line below with your own command!\n\n#find ./ -iname \"*.md\" -maxdepth 1 -type f -exec sh -c 'pandoc --standalone \"${0}\" -o \"${0%.md}.html\"' {} \\;\n\n#####################################################\n# YOUR CODE BELOW!\n\n#####################################################\n\nif [[ -d \"${f}\" ]]; then\n            cd \"${f}\"\n            RecurseDirs $(ls -1 \".\")\n            cd ..\n        fi\n    done\n    IFS=$oldIFS\n}\nRecurseDirs \"./\"\n
\n
\n

TBC….

\n

Here are some of the other commands I will cover in greater detail… at a later time:

\n

9. Copy any text between <script> tags in a file called example.html to be inserted into a new file: out.js

\n
sed -n -e '/<script>/,/<\\/script>/p' example.html >out.js\n
\n
\n

10. Recursively Delete node_modules folders

\n
find . -name 'node_modules' -type d -print -prune -exec rm -rf '{}' +\n
\n
\n

11. Sanatize file and folder names to remove illegal characters and reserved words.

\n
sanitize() {\n  shopt -s extglob;\n\n  filename=$(basename \"$1\")\n  directory=$(dirname \"$1\")\n\n  filename_clean=$(echo \"$filename\" | sed -e 's/[\\\\/:\\*\\?\"<>\\|\\x01-\\x1F\\x7F]//g' -e 's/^\\(nul\\|prn\\|con\\|lpt[0-9]\\|com[0-9]\\|aux\\)\\(\\.\\|$\\)//i' -e 's/^\\.*$//' -e 's/^$/NONAME/')\n\n  if (test \"$filename\" != \"$filename_clean\")\n  then\n    mv -v \"$1\" \"$directory/$filename_clean\"\n  fi\n}\n\nexport -f sanitize\n\nsanitize_dir() {\n  find \"$1\" -depth -exec bash -c 'sanitize \"$0\"' {} \\;\n\n}\n\nsanitize_dir '/path/to/somewhere'\n
\n
\n

12. Start postgresql in terminal

\n
sudo -u postgres psql\n
\n
\n

13. Add closing body and script tags to each html file in working directory.

\n
for f in * ; do\n  mv \"$f\" \"$f.html\"\ndoneecho \"<form>\n <input type=\"button\" value=\"Go back!\" onclick=\"history.back()\">\n</form>\n  </body></html>\" | tee -a *.html\n
\n
\n

14. Batch Download Videos

\n
#!/bin/bash\n\nlink=\"#insert url here#\"\n#links were a set of strings with just the index of the video as the variable\n\nnum=3\n#first video was numbered 3 - weird.\n\next=\".mp4\"\n\nwhile [ $num -le 66 ]\ndo\n      wget $link$num$ext -P ~/Downloads/\n      num=$(($num+1))\ndone\n
\n
\n

15. Change File Extension from '.txt' to .doc for all files in working directory.

\n
sudo apt install rename\n\nrename 's/\\.txt$/.doc/' *.txt\n
\n

16. Recursivley change any file with extension .js.download to .js

\n
find . -name \"*.\\.js\\.download\" -exec rename 's/\\.js\\.download$/.js/' '{}' +\n
\n
\n

17. Copy folder structure including only files of a specific extension into an ouput Folder

\n
find . -name '*.md' | cpio -pdm './../outputFolder'\n
\n
\n

Discover More:

\n

Web-Dev-Hub
\nMemoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…bgoonz-blog.netlify.app

\n

Part 2 of this series:

\n

Medium
\nContinued!!!medium.com

\n
\n

By Bryan Guner on June 29, 2021.

\n

Canonical link

\n

Exported from Medium on August 31, 2021.

\n

Resources:

\n\n

1. Remove spaces from file and folder names and then remove numbers from files and folder names....

\n

Description: need to : sudo apt install rename

\n
\n

Notes: Issue when renaming file without numbers collides with existing file name...

\n
\n
code:
\n
find . -name \"* *\" -type d | rename 's/ /_/g'\nfind . -name \"* *\" -type f | rename 's/ /_/g'\n
\n
```sh\nfind $dir -type f | sed 's|\\(.*/\\)[^A-Z]*\\([A-Z].*\\)|mv \\\"&\\\" \\\"\\1\\2\\\"|' | sh\n\nfind $dir -type d | sed 's|\\(.*/\\)[^A-Z]*\\([A-Z].*\\)|mv \\\"&\\\" \\\"\\1\\2\\\"|' | sh\n\nfor i in *.html; do mv \"$i\" \"${i%-*}.html\"; done\n\nfor i in *.*; do mv \"$i\" \"${i%-*}.${i##*.}\"; done\n\n---\n### Description: combine the contents of every file in the contaning directory.\n\n\n>Notes: this includes the contents of the file it's self...\n\n\n###### code:\n\n\n```js\n//APPEND-DIR.js\nconst fs = require('fs');\nlet cat = require('child_process')\n  .execSync('cat *')\n  .toString('UTF-8');\nfs.writeFile('output.md', cat, err => {\n  if (err) throw err;\n});\n
\n
\n

2. Download Website Using Wget:

\n

Description:

\n
\n

Notes: ==> sudo apt install wget

\n
\n
code:
\n
wget --limit-rate=200k --no-clobber --convert-links --random-wait -r -p -E -e robots=off -U mozilla https://bootcamp42.gitbook.io/python/\n
\n
\n

3. Clean Out Messy Git Repo:

\n

Description: recursively removes git related folders as well as internal use files / attributions in addition to empty folders

\n
\n

Notes: To clear up clutter in repositories that only get used on your local machine.

\n
\n
code:
\n
find . -empty -type d -print -delete\n\n\nfind . \\( -name \".git\" -o -name \".gitignore\" -o -name \".gitmodules\" -o -name \".gitattributes\" \\) -exec rm -rf -- {} +\n\n\nfind . \\( -name \"*SECURITY.txt\" -o -name \"*RELEASE.txt\" -o  -name \"*CHANGELOG.txt\" -o -name \"*LICENSE.txt\" -o -name \"*CONTRIBUTING.txt\" -name \"*HISTORY.md\" -o -name \"*LICENSE\" -o -name \"*SECURITY.md\" -o -name \"*RELEASE.md\" -o  -name \"*CHANGELOG.md\" -o -name \"*LICENSE.md\" -o -name \"*CODE_OF_CONDUCT.md\" -o -name \"*CONTRIBUTING.md\" \\) -exec rm -rf -- {} +\n
\n
\n

4. clone all of a user's git repositories

\n

Description: clone all of a user or organization's git repositories.

\n
\n

Notes:

\n
\n
code:
\n

Generalized:

\n
CNTX={users|orgs}; NAME={username|orgname}; PAGE=1\ncurl \"https://api.github.com/$CNTX/$NAME/repos?page=$PAGE&per_page=100\" |\n  grep -e 'git_url*' |\n  cut -d \\\" -f 4 |\n  xargs -L1 git clone\n
\n

Clone all Git User

\n
CNTX={users}; NAME={bgoonz}; PAGE=1\ncurl \"https://api.github.com/$CNTX/$NAME/repos?page=$PAGE&per_page=200\"?branch=master |\n  grep -e 'git_url*' |\n  cut -d \\\" -f 4 |\n  xargs -L1 git clone\n
\n

Clone all Git Organization:

\n
CNTX={organizations}; NAME={TheAlgorithms}; PAGE=1\ncurl \"https://api.github.com/$CNTX/$NAME/repos?page=$PAGE&per_page=200\"?branch=master |\n  grep -e 'git_url*' |\n  cut -d \\\" -f 4 |\n  xargs -L1 git clone\n
\n
\n

5. Git Workflow

\n

Description:

\n
code:
\n
git pull\ngit init\ngit add .\ngit commit -m\"update\"\ngit push -u origin master\n
\n
git init\ngit add .\ngit commit -m\"update\"\ngit push -u origin main\n
\n
git init\ngit add .\ngit commit -m\"update\"\ngit push -u origin bryan-guner\n
\n
git init\ngit add .\ngit commit -m\"update\"\ngit push -u origin gh-pages\n
\n
git init\ngit add .\ngit commit -m\"update\"\ngit push -u origin preview\n
\n
\n

6. Recursive Unzip In Place

\n

Description: recursively unzips folders and then deletes the zip file by the same name.

\n
\n

Notes:

\n
\n
code:
\n
find . -name \"*.zip\" | while read filename; do unzip -o -d \"`dirname \"$filename\"`\" \"$filename\"; done;\n\n\n\nfind . -name \"*.zip\" -type f -print -delete\n
\n
\n

7. git pull keeping local changes:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
git stash\ngit pull\ngit stash pop\n
\n
\n

8. Prettier Code Formatter:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
sudo npm i prettier -g\n\nprettier --write .\n
\n
\n

9. Pandoc

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find ./ -iname \"*.md\" -type f -exec sh -c 'pandoc --standalone \"${0}\" -o \"${0%.md}.html\"' {} \\;\n\n\n\nfind ./ -iname \"*.html\" -type f -exec sh -c 'pandoc --wrap=none --from html --to markdown_strict \"${0}\" -o \"${0%.html}.md\"' {} \\;\n\n\n\nfind ./ -iname \"*.docx\" -type f -exec sh -c 'pandoc \"${0}\" -o \"${0%.docx}.md\"' {} \\;\n
\n
\n

10. Gitpod Installs

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
sudo apt install tree\nsudo apt install pandoc -y\nsudo apt install rename -y\nsudo apt install black -y\nsudo apt install wget -y\nnpm i lebab -g\nnpm i prettier -g\nnpm i npm-recursive-install -g\n
\n
black .\n\nprettier --write .\nnpm-recursive-install\n
\n
\n

11. Repo Utils Package:

\n

Description: my standard repo utis package

\n
\n

Notes:

\n
\n
code:
\n
npm i @bgoonz11/repoutils\n
\n
\n

12. Unix Tree Package Usage:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
tree -d -I  'node_modules'\n\ntree  -I  'node_modules'\n\ntree -f  -I  'node_modules' >TREE.md\n\ntree -f -L 2  >README.md\n\ntree -f  -I  'node_modules' >listing-path.md\n\n\ntree -f  -I  'node_modules' -d >TREE.md\n\ntree -f >README.md\n
\n
\n

13. Find & Replace string in file & folder names recursively..

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find . -type f -exec rename 's/string1/string2/g' {} +\n\n\nfind . -type d -exec rename 's/-master//g' {} +\n\n\nfind . -type f -exec rename 's/\\.download//g' {} +\n\n\n\n\nfind . -type d -exec rename 's/-main//g' {} +\n\n\n\nrename 's/\\.js\\.download$/.js/' *.js\\.download\n\n\nrename 's/\\.html\\.markdown$/.md/' *.html\\.markdown\n\n\nfind . -type d -exec rename 's/es6//g' {} +\n
\n
\n

14. Remove double extensions :

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
#!/bin/bash\n\nfor file in *.md.md\ndo\n    mv \"${file}\" \"${file%.md}\"\ndone\n\n#!/bin/bash\n\nfor file in *.html.html\ndo\n    mv \"${file}\" \"${file%.html}\"\ndone\n
\n
#!/bin/bash\n\nfor file in *.html.png\ndo\n    mv \"${file}\" \"${file%.png}\"\ndone\n\nfor file in *.jpg.jpg\ndo\n    mv \"${file}\" \"${file%.png}\"\ndone\n
\n
\n

15. Truncate folder names down to 12 characters:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
for d in ./*; do mv $d ${d:0:12}; done\n
\n
\n

16.Appendir.js

\n

Description: combine the contents of every file in the contaning directory.

\n
\n

Notes: this includes the contents of the file it's self...

\n
\n
code:
\n
//APPEND-DIR.js\nconst fs = require('fs');\nlet cat = require('child_process').execSync('cat *').toString('UTF-8');\nfs.writeFile('output.md', cat, (err) => {\n    if (err) throw err;\n});\n
\n
\n

17. Replace space in filename with underscore

\n

Description: followed by replace '#' with '_' in directory name

\n
\n

Notes: Can be re-purposed to find and replace any set of strings in file or folder names.

\n
\n
code:
\n
find . -name \"* *\" -type f | rename 's/_//g'\n\nfind . -name \"* *\" -type d | rename 's/#/_/g'\n
\n
\n

18. Filter & delete files by name and extension

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find . -name '.bin' -type d -prune -exec rm -rf '{}' +\n\nfind . -name '*.html' -type d -prune -exec rm -rf '{}' +\n\nfind . -name 'nav-index' -type d -prune -exec rm -rf '{}' +\n\nfind . -name 'node-gyp' -type d -prune -exec rm -rf '{}' +\n\nfind . -name 'deleteme.txt' -type f -prune -exec rm -rf '{}' +\n\nfind . -name 'right.html' -type f -prune -exec rm -rf '{}' +\n\nfind . -name 'left.html' -type f -prune -exec rm -rf '{}' +\n
\n
\n

19. Remove lines containing string:

\n

Description:

\n
\n

Notes: Remove lines not containing '.js'

\n
\n
sudo sed -i '/\\.js/!d' ./*scrap2.md\n
\n
code:
\n
sudo sed -i '/githubusercontent/d' ./*sandbox.md\n\n\nsudo sed -i '/githubusercontent/d' ./*scrap2.md\n\n\n\nsudo sed -i '/github\\.com/d' ./*out.md\n\n\nsudo sed -i '/author/d' ./*\n
\n
\n

20. Remove duplicate lines from a text file

\n

Description:

\n
\n

Notes:\n//...syntax of uniq...//\n$uniq [OPTION] [INPUT[OUTPUT]]\nThe syntax of this is quite easy to understand. Here, INPUT refers to the input file in which repeated lines need to be filtered out and if INPUT isn't specified then uniq reads from the standard input. OUTPUT refers to the output file in which you can store the filtered output generated by uniq command and as in case of INPUT if OUTPUT isn't specified then uniq writes to the standard output.

\n
\n

Now, let's understand the use of this with the help of an example. Suppose you have a text file named kt.txt which contains repeated lines that needs to be omitted. This can simply be done with uniq.

\n
code:
\n
sudo apt install uniq\nuniq -u input.txt output.txt\n
\n
\n

21. Remove lines containing string:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
sudo sed -i '/githubusercontent/d' ./*sandbox.md\n\n\nsudo sed -i '/githubusercontent/d' ./*scrap2.md\n\n\nsudo sed -i '/github\\.com/d' ./*out.md\n\n---\ntitle: add_days\ntags: date,intermediate\nfirstSeen: 2020-10-28T16:19:04+02:00\nlastUpdated: 2020-10-28T16:19:04+02:00\n---\n\nsudo sed -i '/title:/d' ./*output.md\nsudo sed -i '/firstSeen/d' ./*output.md\nsudo sed -i '/lastUpdated/d' ./*output.md\nsudo sed -i '/tags:/d' ./*output.md\n\nsudo sed -i '/badstring/d' ./*\n\n\nsudo sed -i '/stargazers/d' ./repo.txt\nsudo sed -i '/node_modules/d' ./index.html\nsudo sed -i '/right\\.html/d' ./index.html\nsudo sed -i '/right\\.html/d' ./right.html\n
\n
\n

22. Zip directory excluding .git and node_modules all the way down (Linux)

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
#!/bin/bash\nTSTAMP=`date '+%Y%m%d-%H%M%S'`\nzip -r $1.$TSTAMP.zip $1 -x \"**.git/*\" -x \"**node_modules/*\" `shift; echo $@;`\n\nprintf \"\\nCreated: $1.$TSTAMP.zip\\n\"\n\n# usage:\n# - zipdir thedir\n# - zip thedir -x \"**anotherexcludedsubdir/*\"    (important the double quotes to prevent glob expansion)\n\n# if in windows/git-bash, add 'zip' command this way:\n# https://stackoverflow.com/a/55749636/1482990\n
\n
\n

23. Delete files containing a certain string:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find . | xargs grep -l www.redhat.com | awk '{print \"rm \"$1}' > doit.sh\nvi doit.sh // check for murphy and his law\nsource doit.sh\n
\n
\n

24.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
#!/bin/sh\n\n# find ./ | grep -i \"\\.*$\" >files\nfind ./ | sed -E -e 's/([^ ]+[ ]+){8}//' | grep -i \"\\.*$\">files\nlisting=\"files\"\n\nout=\"\"\n\nhtml=\"sitemap.html\"\nout=\"basename $out.html\"\nhtml=\"sitemap.html\"\ncmd() {\n\n  echo '  <!DOCTYPE html>'\n  echo '<html>'\n  echo '<head>'\n\n  echo '  <meta http-equiv=\"Content-Type\" content=\"text/html\">'\n\n  echo '  <meta name=\"Author\" content=\"Bryan Guner\">'\n  echo '<link rel=\"stylesheet\" href=\"./assets/prism.css\">'\n  echo ' <link rel=\"stylesheet\" href=\"./assets/style.css\">'\n  echo ' <script async defer src=\"./assets/prism.js\"></script>'\n\n  echo \"  <title> directory </title>\"\n    echo '<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/bgoonz/GIT-CDN-FILES/mdn-article.css\">'\n  echo '<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/bgoonz/GIT-CDN-FILES/markdown-to-html-style.css\">'\n  echo \"\"\n  echo '<style>'\n\n\necho '    a {'\necho '      color: black;'\necho '    }'\necho ''\necho '    li {'\necho '      border: 1px solid black !important;'\necho '      font-size: 20px;'\necho '      letter-spacing: 0px;'\necho '      font-weight: 700;'\necho '      line-height: 16px;'\necho '      text-decoration: none !important;'\necho '      text-transform: uppercase;'\necho '      background: #194ccdaf !important;'\necho '      color: black !important;'\necho '      border: none;'\necho '      cursor: pointer;'\necho '      justify-content: center;'\necho '      padding: 30px 60px;'\necho '      height: 48px;'\necho '      text-align: center;'\necho '      white-space: normal;'\necho '      border-radius: 10px;'\necho '      min-width: 45em;'\necho '      padding: 1.2em 1em 0;'\necho '      box-shadow: 0 0 5px;'\necho '      margin: 1em;'\necho '      display: grid;'\necho '      -webkit-border-radius: 10px;'\necho '      -moz-border-radius: 10px;'\necho '      -ms-border-radius: 10px;'\necho '      -o-border-radius: 10px;'\necho '    }'\necho '  </style>'\n  echo '</head>'\n\n  echo '<body>'\n\n  echo \"\"\n\n  # continue with the HTML stuff\n\n  echo \"\"\n\n  echo \"\"\n\n  echo \"<ul>\"\n\n  awk '{print \"<li><a href=\\\"\"$1\"\\\">\",$1,\"&nbsp;</a></li>\"}' $listing\n\n  # awk '{print \"<li>\"};\n\n  #     {print \" <a href=\\\"\"$1\"\\\">\",$1,\"</a></li>&nbsp;\"}' \\ $listing\n\n  echo \"\"\n\n  echo \"</ul>\"\n\n  echo \"</body>\"\n\n  echo \"</html>\"\n\n}\n\ncmd $listing --sort=extension >>$html\n
\n
\n

25. Index of Iframes

\n

Description: Creates an index.html file that contains all the files in the working directory or any of it's sub folders as iframes instead of anchor tags.

\n
\n

Notes: Useful Follow up Code:

\n
\n
\n
code:
\n
#!/bin/sh\n\n# find ./ | grep -i \"\\.*$\" >files\nfind ./ | sed -E -e 's/([^ ]+[ ]+){8}//' | grep -i \"\\.*$\">files\nlisting=\"files\"\n\nout=\"\"\n\nhtml=\"index.html\"\nout=\"basename $out.html\"\nhtml=\"index.html\"\ncmd() {\n\n  echo '  <!DOCTYPE html>'\n  echo '<html>'\n  echo '<head>'\n\n  echo '  <meta http-equiv=\"Content-Type\" content=\"text/html\">'\n\n  echo '  <meta name=\"Author\" content=\"Bryan Guner\">'\n  echo '<link rel=\"stylesheet\" href=\"./assets/prism.css\">'\n  echo ' <link rel=\"stylesheet\" href=\"./assets/style.css\">'\n  echo ' <script async defer src=\"./assets/prism.js\"></script>'\n\n  echo \"  <title> directory </title>\"\n\n  echo \"\"\n  echo '<style>'\n\n\necho '    a {'\necho '      color: black;'\necho '    }'\necho ''\necho '    li {'\necho '      border: 1px solid black !important;'\necho '      font-size: 20px;'\necho '      letter-spacing: 0px;'\necho '      font-weight: 700;'\necho '      line-height: 16px;'\necho '      text-decoration: none !important;'\necho '      text-transform: uppercase;'\necho '      background: #194ccdaf !important;'\necho '      color: black !important;'\necho '      border: none;'\necho '      cursor: pointer;'\necho '      justify-content: center;'\necho '      padding: 30px 60px;'\necho '      height: 48px;'\necho '      text-align: center;'\necho '      white-space: normal;'\necho '      border-radius: 10px;'\necho '      min-width: 45em;'\necho '      padding: 1.2em 1em 0;'\necho '      box-shadow: 0 0 5px;'\necho '      margin: 1em;'\necho '      display: grid;'\necho '      -webkit-border-radius: 10px;'\necho '      -moz-border-radius: 10px;'\necho '      -ms-border-radius: 10px;'\necho '      -o-border-radius: 10px;'\necho '    }'\necho '  </style>'\n  echo '</head>'\n\n  echo '<body>'\n\n  echo \"\"\n\n  # continue with the HTML stuff\n\n  echo \"\"\n\n  echo \"\"\n\n  echo \"<ul>\"\n\n  awk '{print \"<iframe src=\\\"\"$1\"\\\">\",\"</iframe>\"}' $listing\n\n  # awk '{print \"<li>\"};\n\n  #     {print \" <a href=\\\"\"$1\"\\\">\",$1,\"</a></li>&nbsp;\"}' \\ $listing\n\n  echo \"\"\n\n  echo \"</ul>\"\n\n  echo \"</body>\"\n\n  echo \"</html>\"\n\n}\n\ncmd $listing --sort=extension >>$html\n
\n
\n

26. Filter Corrupted Git Repo For Troublesome File:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
git filter-branch --index-filter 'git rm -r --cached --ignore-unmatch assets/_index.html' HEAD\n
\n
\n

27. OVERWRITE LOCAL CHANGES:

\n

Description:

\n

Important: If you have any local changes, they will be lost. With or without --hard option, any local commits that haven't been pushed will be lost.[*]\nIf you have any files that are not tracked by Git (e.g. uploaded user content), these files will not be affected.

\n
\n

Notes:\nFirst, run a fetch to update all origin/ refs to latest:

\n
\n
code:
\n
git fetch --all\n# Backup your current branch:\n\ngit branch backup-master\n# Then, you have two options:\n\ngit reset --hard origin/master\n# OR If you are on some other branch:\n\ngit reset --hard origin/<branch_name>\n# Explanation:\n# git fetch downloads the latest from remote without trying to merge or rebase anything.\n\n# Then the git reset resets the master branch to what you just fetched. The --hard option changes all the files in your working tree to match the files in origin/master\ngit fetch --all\ngit reset --hard origin/master\n
\n
\n

28. Remove Submodules:

\n

Description: To remove a submodule you need to:

\n
\n

Notes:

\n
\n
\n

Delete the relevant section from the .gitmodules file.\nStage the .gitmodules changes git add .gitmodules\nDelete the relevant section from .git/config.\nRun git rm --cached pathtosubmodule (no trailing slash).\nRun rm -rf .git/modules/pathtosubmodule (no trailing slash).\nCommit git commit -m \"Removed submodule \"\nDelete the now untracked submodule files rm -rf pathtosubmodule

\n
\n
code:
\n
git submodule deinit\n
\n
\n

29. GET GISTS

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
sudo apt install wget\n\n\n\nwget -q -O - https://api.github.com/users/bgoonz/gists | grep raw_url | awk -F\\\" '{print $4}' | xargs -n3 wget\n\n\nwget -q -O - https://api.github.com/users/amitness/gists | grep raw_url | awk -F\\\" '{print $4}' | xargs -n3 wget\n\n\nwget -q -O - https://api.github.com/users/drodsou/gists | grep raw_url | awk -F\\\" '{print $4}' | xargs -n1 wget\n\nwget -q -O - https://api.github.com/users/thomasmb/gists | grep raw_url | awk -F\\\" '{print $4}' | xargs -n1 wget\n
\n
\n

30. Remove Remote OriginL

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
git remote remove origin\n
\n
\n

31. just clone .git folder:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
git clone --bare --branch=master --single-branch https://github.com/bgoonz/My-Web-Dev-Archive.git\n
\n
\n

32. Undo recent pull request:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
git reset --hard master@{\"10 minutes ago\"}\n
\n
\n

33. Lebab

\n

Description: ES5 --> ES6

\n
\n

Notes:

\n
\n
code:
\n
# Safe:\n\n lebab --replace ./ --transform arrow\n lebab --replace ./ --transform arrow-return\n lebab --replace ./ --transform for-of\n lebab --replace ./ --transform for-each\n lebab --replace ./ --transform arg-rest\n lebab --replace ./ --transform arg-spread\n lebab --replace ./ --transform obj-method\n lebab --replace ./ --transform obj-shorthand\n lebab --replace ./ --transform multi-var\n\n\n# ALL:\n\n\nlebab --replace ./ --transform obj-method\nlebab --replace ./ --transform class\nlebab --replace ./ --transform arrow\nlebab --replace ./ --transform let\nlebab --replace ./ --transform arg-spread\nlebab --replace ./ --transform arg-rest\nlebab --replace ./ --transform for-each\nlebab --replace ./ --transform for-of\nlebab --replace ./ --transform commonjs\nlebab --replace ./ --transform exponent\nlebab --replace ./ --transform multi-var\nlebab --replace ./ --transform template\nlebab --replace ./ --transform default-param\nlebab --replace ./ --transform  destruct-param\nlebab --replace ./ --transform includes\nlebab --replace ./ --transform obj-method\nlebab --replace ./ --transform class\nlebab --replace ./ --transform arrow\nlebab --replace ./ --transform arg-spread\nlebab --replace ./ --transform arg-rest\nlebab --replace ./ --transform for-each\nlebab --replace ./ --transform for-of\nlebab --replace ./ --transform commonjs\nlebab --replace ./ --transform exponent\nlebab --replace ./ --transform multi-var\nlebab --replace ./ --transform template\nlebab --replace ./ --transform default-param\nlebab --replace ./ --transform  destruct-param\nlebab --replace ./ --transform includes\n
\n
\n

34. Troubleshoot Ubuntu Input/Output Error

\n

Description: Open Powershell as Administrator...

\n
\n

Notes:

\n
\n
code:
\n
 wsl.exe --shutdown\n\n Get-Service LxssManager | Restart-Service\n
\n
\n

35. Export Medium as Markdown

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
npm i mediumexporter -g\n\n\nmediumexporter https://medium.com/codex/fundamental-data-structures-in-javascript-8f9f709c15b4 >ds.md\n
\n
\n

36. Delete files in violation of a given size range (100MB for git)

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find . -size +75M -a -print -a -exec rm -f {} \\;\n\n\n\n\nfind . -size +98M -a -print -a -exec rm -f {} \\;\n
\n
\n

37. download all links of given file type

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
wget -r -A.pdf https://overapi.com/git\n
\n
\n

38. Kill all node processes

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
killall -s KILL node\n
\n
\n

39. Remove string from file names recursively

\n

Description: In the example below I am using this command to remove the string \"-master\" from all file names in the working directory and all of it's sub directories.

\n
code:
\n
find <mydir> -type f -exec sed -i 's/<string1>/<string2>/g' {} +\n\n\n\n\nfind . -type f -exec rename 's/-master//g' {} +\n
\n
\n

Notes: The same could be done for folder names by changing the -type f flag (for file) to a -type d flag (for directory)

\n
\n
find <mydir> -type d -exec sed -i 's/<string1>/<string2>/g' {} +\n\n\n\n\nfind . -type d -exec rename 's/-master//g' {} +\n
\n
\n

40. Remove spaces from file and folder names recursively

\n

Description: replaces spaces in file and folder names with an _ underscore

\n
\n

Notes: need to run sudo apt install rename to use this command

\n
\n
code:
\n
find . -name \"* *\" -type d | rename 's/ /_/g'\nfind . -name \"* *\" -type f | rename 's/ /_/g'\n
\n
\n

41. Zip Each subdirectories in a given directory into their own zip file

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
for i in */; do zip -r \"${i%/}.zip\" \"$i\"; done\n
\n
\n

42.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

43.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

44.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

45.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

46.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

47.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

48.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

49.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

50.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

51.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

52.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

53.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

54.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

55.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

56.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

57.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

58.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

59.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

60.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

61.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

62.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

63.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

64.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

65.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

66.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

67.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

68.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

69.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

70.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

71.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

72.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

73.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

74.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

75.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

76.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

77.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

78.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

79.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

80.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

81.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

82.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

83.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

84.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

85.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

86.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

87.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

88.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

89.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

90.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
\n
\n

91. Unzip PowerShell

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
PARAM (\n    [string] $ZipFilesPath = \"./\",\n    [string] $UnzipPath = \"./RESULT\"\n)\n\n$Shell = New-Object -com Shell.Application\n$Location = $Shell.NameSpace($UnzipPath)\n\n$ZipFiles = Get-Childitem $ZipFilesPath -Recurse -Include *.ZIP\n\n$progress = 1\nforeach ($ZipFile in $ZipFiles) {\n    Write-Progress -Activity \"Unzipping to $($UnzipPath)\" -PercentComplete (($progress / ($ZipFiles.Count + 1)) * 100) -CurrentOperation $ZipFile.FullName -Status \"File $($Progress) of $($ZipFiles.Count)\"\n    $ZipFolder = $Shell.NameSpace($ZipFile.fullname)\n\n\n    $Location.Copyhere($ZipFolder.items(), 1040) # 1040 - No msgboxes to the user - http://msdn.microsoft.com/en-us/library/bb787866%28VS.85%29.aspx\n    $progress++\n}\n
\n
\n

92. return to bash from zsh

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
 sudo apt --purge remove zsh\n
\n
\n

93. Symbolic Link

\n

Description: to working directory

\n
\n

Notes:

\n
\n
code:
\n
ln -s \"$(pwd)\" ~/NameOfLink\n\nln -s \"$(pwd)\" ~/Downloads\n
\n
\n

94. auto generate readme

\n

Description: rename existing readme to blueprint.md

\n
\n

Notes:

\n
\n
code:
\n
npx @appnest/readme generate\n
\n
\n

95. Log into postgres:

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
sudo -u postgres psql\n
\n
\n

96. URL To Subscribe To YouTube Channel

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
https://www.youtube.com/channel/UC1HDa0wWnIKUf-b4yY9JecQ?sub_confirmation=1\n
\n
\n

97. Embed Repl.it In Medium Post:

\n
code:
\n
https://repl.it/@bgoonz/Data-Structures-Algos-Codebase?lite=true&amp;referrer=https%3A%2F%2Fbryanguner.medium.com\n\n\nhttps://repl.it/@bgoonz/node-db1-project?lite=true&amp;referrer=https%3A%2F%2Fbryanguner.medium.com\n\nhttps://repl.it/@bgoonz/interview-prac?lite=true&amp;referrer=https%3A%2F%2Fbryanguner.medium.com\n\n\nhttps://repl.it/@bgoonz/Database-Prac?lite=true&amp;referrer=https%3A%2F%2Fbryanguner.medium.com\n
\n
\n

98.

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
find . -name *right.html  -type f -exec sed -i 's/target=\"_parent\"//g' {} +\n\n\nfind . -name *right.html  -type f -exec sed -i 's/target=\"_parent\"//g' {} +\n
\n
\n

99. Cheat Sheet

\n

Description:

\n
\n

Notes:

\n
\n
code:
\n
#!/bin/bash\n##############################################################################\n# SHORTCUTS and HISTORY\n##############################################################################\n\nCTRL+A  # move to beginning of line\nCTRL+B  # moves backward one character\nCTRL+C  # halts the current command\nCTRL+D  # deletes one character backward or logs out of current session, similar to exit\nCTRL+E  # moves to end of line\nCTRL+F  # moves forward one character\nCTRL+G  # aborts the current editing command and ring the terminal bell\nCTRL+H  # deletes one character under cursor (same as DELETE)\nCTRL+J  # same as RETURN\nCTRL+K  # deletes (kill) forward to end of line\nCTRL+L  # clears screen and redisplay the line\nCTRL+M  # same as RETURN\nCTRL+N  # next line in command history\nCTRL+O  # same as RETURN, then displays next line in history file\nCTRL+P  # previous line in command history\nCTRL+Q  # resumes suspended shell output\nCTRL+R  # searches backward\nCTRL+S  # searches forward or suspends shell output\nCTRL+T  # transposes two characters\nCTRL+U  # kills backward from point to the beginning of line\nCTRL+V  # makes the next character typed verbatim\nCTRL+W  # kills the word behind the cursor\nCTRL+X  # lists the possible filename completions of the current word\nCTRL+Y  # retrieves (yank) last item killed\nCTRL+Z  # stops the current command, resume with fg in the foreground or bg in the background\n\nALT+B   # moves backward one word\nALT+D   # deletes next word\nALT+F   # moves forward one word\nALT+H   # deletes one character backward\nALT+T   # transposes two words\nALT+.   # pastes last word from the last command. Pressing it repeatedly traverses through command history.\nALT+U   # capitalizes every character from the current cursor position to the end of the word\nALT+L   # uncapitalizes every character from the current cursor position to the end of the word\nALT+C   # capitalizes the letter under the cursor. The cursor then moves to the end of the word.\nALT+R   # reverts any changes to a command you've pulled from your history if you've edited it.\nALT+?   # list possible completions to what is typed\nALT+^   # expand line to most recent match from history\n\nCTRL+X then (   # start recording a keyboard macro\nCTRL+X then )   # finish recording keyboard macro\nCTRL+X then E   # recall last recorded keyboard macro\nCTRL+X then CTRL+E   # invoke text editor (specified by $EDITOR) on current command line then execute resultes as shell commands\n\nBACKSPACE  # deletes one character backward\nDELETE     # deletes one character under cursor\n\nhistory   # shows command line history\n!!        # repeats the last command\n!<n>      # refers to command line 'n'\n!<string> # refers to command starting with 'string'\n\nexit      # logs out of current session\n\n\n##############################################################################\n# BASH BASICS\n##############################################################################\n\nenv                 # displays all environment variables\n\necho $SHELL         # displays the shell you're using\necho $BASH_VERSION  # displays bash version\n\nbash                # if you want to use bash (type exit to go back to your previously opened shell)\nwhereis bash        # locates the binary, source and manual-page for a command\nwhich bash          # finds out which program is executed as 'bash' (default: /bin/bash, can change across environments)\n\nclear               # clears content on window (hide displayed lines)\n\n\n##############################################################################\n# FILE COMMANDS\n##############################################################################\n\n\nls                            # lists your files in current directory, ls <dir> to print files in a specific directory\nls -l                         # lists your files in 'long format', which contains the exact size of the file, who owns the file and who has the right to look at it, and when it was last modified\nls -a                         # lists all files in 'long format', including hidden files (name beginning with '.')\nln -s <filename> <link>       # creates symbolic link to file\nreadlink <filename>           # shows where a symbolic links points to\ntree                          # show directories and subdirectories in easilly readable file tree\nmc                            # terminal file explorer (alternative to ncdu)\ntouch <filename>              # creates or updates (edit) your file\nmktemp -t <filename>            # make a temp file in /tmp/ which is deleted at next boot (-d to make directory)\ncat <filename>                # prints file raw content (will not be interpreted)\nany_command > <filename>      # '>' is used to perform redirections, it will set any_command's stdout to file instead of \"real stdout\" (generally /dev/stdout)\nmore <filename>               # shows the first part of a file (move with space and type q to quit)\nhead <filename>               # outputs the first lines of file (default: 10 lines)\ntail <filename>               # outputs the last lines of file (useful with -f option) (default: 10 lines)\nvim <filename>                # opens a file in VIM (VI iMproved) text editor, will create it if it doesn't exist\nmv <filename1> <dest>         # moves a file to destination, behavior will change based on 'dest' type (dir: file is placed into dir; file: file will replace dest (tip: useful for renaming))\ncp <filename1> <dest>         # copies a file\nrm <filename>                 # removes a file\nfind . -name <name> <type>    # searches for a file or a directory in the current directory and all its sub-directories by its name\ndiff <filename1> <filename2>  # compares files, and shows where they differ\nwc <filename>                 # tells you how many lines, words and characters there are in a file. Use -lwc (lines, word, character) to ouput only 1 of those informations\nsort <filename>               # sorts the contents of a text file line by line in alphabetical order, use -n for numeric sort and -r for reversing order.\nsort -t -k <filename>         # sorts the contents on specific sort key field starting from 1, using the field separator t.\nrev                           # reverse string characters (hello becomes olleh)\nchmod -options <filename>     # lets you change the read, write, and execute permissions on your files (more infos: SUID, GUID)\ngzip <filename>               # compresses files using gzip algorithm\ngunzip <filename>             # uncompresses files compressed by gzip\ngzcat <filename>              # lets you look at gzipped file without actually having to gunzip it\nlpr <filename>                # prints the file\nlpq                           # checks out the printer queue\nlprm <jobnumber>              # removes something from the printer queue\ngenscript                     # converts plain text files into postscript for printing and gives you some options for formatting\ndvips <filename>              # prints .dvi files (i.e. files produced by LaTeX)\ngrep <pattern> <filenames>    # looks for the string in the files\ngrep -r <pattern> <dir>       # search recursively for pattern in directory\nhead -n file_name | tail +n   # Print nth line from file.\nhead -y lines.txt | tail +x   # want to display all the lines from x to y. This includes the xth and yth lines.\n\n\n##############################################################################\n# DIRECTORY COMMANDS\n##############################################################################\n\n\nmkdir <dirname>               # makes a new directory\nrmdir <dirname>               # remove an empty directory\nrmdir -rf <dirname>           # remove a non-empty directory\nmv <dir1> <dir2>              # rename a directory from <dir1> to <dir2>\ncd                            # changes to home\ncd ..                         # changes to the parent directory\ncd <dirname>                  # changes directory\ncp -r <dir1> <dir2>           # copy <dir1> into <dir2> including sub-directories\npwd                           # tells you where you currently are\ncd ~                          # changes to home.\ncd -                          # changes to previous working directory\n\n##############################################################################\n# SSH, SYSTEM INFO & NETWORK COMMANDS\n##############################################################################\n\n\nssh user@host            # connects to host as user\nssh -p <port> user@host  # connects to host on specified port as user\nssh-copy-id user@host    # adds your ssh key to host for user to enable a keyed or passwordless login\n\nwhoami                   # returns your username\npasswd                   # lets you change your password\nquota -v                 # shows what your disk quota is\ndate                     # shows the current date and time\ncal                      # shows the month's calendar\nuptime                   # shows current uptime\nw                        # displays whois online\nfinger <user>            # displays information about user\nuname -a                 # shows kernel information\nman <command>            # shows the manual for specified command\ndf                       # shows disk usage\ndu <filename>            # shows the disk usage of the files and directories in filename (du -s give only a total)\nlast <yourUsername>      # lists your last logins\nps -u yourusername       # lists your processes\nkill <PID>               # kills the processes with the ID you gave\nkillall <processname>    # kill all processes with the name\ntop                      # displays your currently active processes\nlsof                     # lists open files\nbg                       # lists stopped or background jobs ; resume a stopped job in the background\nfg                       # brings the most recent job in the foreground\nfg <job>                 # brings job to the foreground\n\nping <host>              # pings host and outputs results\nwhois <domain>           # gets whois information for domain\ndig <domain>             # gets DNS information for domain\ndig -x <host>            # reverses lookup host\nwget <file>              # downloads file\n\ntime <command>             # report time consumed by command execution\n\n\n##############################################################################\n# VARIABLES\n##############################################################################\n\n\nvarname=value                # defines a variable\nvarname=value command        # defines a variable to be in the environment of a particular subprocess\necho $varname                # checks a variable's value\necho $$                      # prints process ID of the current shell\necho $!                      # prints process ID of the most recently invoked background job\necho $?                      # displays the exit status of the last command\nread <varname>               # reads a string from the input and assigns it to a variable\nread -p \"prompt\" <varname>   # same as above but outputs a prompt to ask user for value\ncolumn -t <filename>         # display info in pretty columns (often used with pipe)\nlet <varname> = <equation>   # performs mathematical calculation using operators like +, -, *, /, %\nexport VARNAME=value         # defines an environment variable (will be available in subprocesses)\n\narray[0]=valA                # how to define an array\narray[1]=valB\narray[2]=valC\narray=([2]=valC [0]=valA [1]=valB)  # another way\narray=(valA valB valC)              # and another\n\n${array[i]}                  # displays array's value for this index. If no index is supplied, array element 0 is assumed\n${#array[i]}                 # to find out the length of any element in the array\n${#array[@]}                 # to find out how many values there are in the array\n\ndeclare -a                   # the variables are treated as arrays\ndeclare -f                   # uses function names only\ndeclare -F                   # displays function names without definitions\ndeclare -i                   # the variables are treated as integers\ndeclare -r                   # makes the variables read-only\ndeclare -x                   # marks the variables for export via the environment\n\n${varname:-word}             # if varname exists and isn't null, return its value; otherwise return word\n${varname:word}              # if varname exists and isn't null, return its value; otherwise return word\n${varname:=word}             # if varname exists and isn't null, return its value; otherwise set it word and then return its value\n${varname:?message}          # if varname exists and isn't null, return its value; otherwise print varname, followed by message and abort the current command or script\n${varname:+word}             # if varname exists and isn't null, return word; otherwise return null\n${varname:offset:length}     # performs substring expansion. It returns the substring of $varname starting at offset and up to length characters\n\n${variable#pattern}          # if the pattern matches the beginning of the variable's value, delete the shortest part that matches and return the rest\n${variable##pattern}         # if the pattern matches the beginning of the variable's value, delete the longest part that matches and return the rest\n${variable%pattern}          # if the pattern matches the end of the variable's value, delete the shortest part that matches and return the rest\n${variable%%pattern}         # if the pattern matches the end of the variable's value, delete the longest part that matches and return the rest\n${variable/pattern/string}   # the longest match to pattern in variable is replaced by string. Only the first match is replaced\n${variable//pattern/string}  # the longest match to pattern in variable is replaced by string. All matches are replaced\n\n${#varname}                  # returns the length of the value of the variable as a character string\n\n*(patternlist)               # matches zero or more occurrences of the given patterns\n+(patternlist)               # matches one or more occurrences of the given patterns\n?(patternlist)               # matches zero or one occurrence of the given patterns\n@(patternlist)               # matches exactly one of the given patterns\n!(patternlist)               # matches anything except one of the given patterns\n\n$(UNIX command)              # command substitution: runs the command and returns standard output\n\n\n##############################################################################\n# FUNCTIONS\n##############################################################################\n\n\n# The function refers to passed arguments by position (as if they were positional parameters), that is, $1, $2, and so forth.\n# $@ is equal to \"$1\" \"$2\"... \"$N\", where N is the number of positional parameters. $# holds the number of positional parameters.\n\n\nfunction functname() {\n  shell commands\n}\n\nunset -f functname  # deletes a function definition\ndeclare -f          # displays all defined functions in your login session\n\n\n##############################################################################\n# FLOW CONTROLS\n##############################################################################\n\n\nstatement1 && statement2  # and operator\nstatement1 || statement2  # or operator\n\n-a                        # and operator inside a test conditional expression\n-o                        # or operator inside a test conditional expression\n\n# STRINGS\n\nstr1 == str2               # str1 matches str2\nstr1 != str2               # str1 does not match str2\nstr1 < str2                # str1 is less than str2 (alphabetically)\nstr1 > str2                # str1 is greater than str2 (alphabetically)\nstr1 \\> str2               # str1 is sorted after str2\nstr1 \\< str2               # str1 is sorted before str2\n-n str1                    # str1 is not null (has length greater than 0)\n-z str1                    # str1 is null (has length 0)\n\n# FILES\n\n-a file                   # file exists or its compilation is successful\n-d file                   # file exists and is a directory\n-e file                   # file exists; same -a\n-f file                   # file exists and is a regular file (i.e., not a directory or other special type of file)\n-r file                   # you have read permission\n-s file                   # file exists and is not empty\n-w file                   # your have write permission\n-x file                   # you have execute permission on file, or directory search permission if it is a directory\n-N file                   # file was modified since it was last read\n-O file                   # you own file\n-G file                   # file's group ID matches yours (or one of yours, if you are in multiple groups)\nfile1 -nt file2           # file1 is newer than file2\nfile1 -ot file2           # file1 is older than file2\n\n# NUMBERS\n\n-lt                       # less than\n-le                       # less than or equal\n-eq                       # equal\n-ge                       # greater than or equal\n-gt                       # greater than\n-ne                       # not equal\n\nif condition\nthen\n  statements\n[elif condition\n  then statements...]\n[else\n  statements]\nfi\n\nfor x in {1..10}\ndo\n  statements\ndone\n\nfor name [in list]\ndo\n  statements that can use $name\ndone\n\nfor (( initialisation ; ending condition ; update ))\ndo\n  statements...\ndone\n\ncase expression in\n  pattern1 )\n    statements ;;\n  pattern2 )\n    statements ;;\nesac\n\nselect name [in list]\ndo\n  statements that can use $name\ndone\n\nwhile condition; do\n  statements\ndone\n\nuntil condition; do\n  statements\ndone\n\n##############################################################################\n# COMMAND-LINE PROCESSING CYCLE\n##############################################################################\n\n\n# The default order for command lookup is functions, followed by built-ins, with scripts and executables last.\n# There are three built-ins that you can use to override this order: `command`, `builtin` and `enable`.\n\ncommand  # removes alias and function lookup. Only built-ins and commands found in the search path are executed\nbuiltin  # looks up only built-in commands, ignoring functions and commands found in PATH\nenable   # enables and disables shell built-ins\n\neval     # takes arguments and run them through the command-line processing steps all over again\n\n\n##############################################################################\n# INPUT/OUTPUT REDIRECTORS\n##############################################################################\n\n\ncmd1|cmd2  # pipe; takes standard output of cmd1 as standard input to cmd2\n< file     # takes standard input from file\n> file     # directs standard output to file\n>> file    # directs standard output to file; append to file if it already exists\n>|file     # forces standard output to file even if noclobber is set\nn>|file    # forces output to file from file descriptor n even if noclobber is set\n<> file    # uses file as both standard input and standard output\nn<>file    # uses file as both input and output for file descriptor n\nn>file     # directs file descriptor n to file\nn<file     # takes file descriptor n from file\nn>>file    # directs file description n to file; append to file if it already exists\nn>&        # duplicates standard output to file descriptor n\nn<&        # duplicates standard input from file descriptor n\nn>&m       # file descriptor n is made to be a copy of the output file descriptor\nn<&m       # file descriptor n is made to be a copy of the input file descriptor\n&>file     # directs standard output and standard error to file\n<&-        # closes the standard input\n>&-        # closes the standard output\nn>&-       # closes the ouput from file descriptor n\nn<&-       # closes the input from file descripor n\n\n|tee <file># output command to both terminal and a file (-a to append to file)\n\n\n##############################################################################\n# PROCESS HANDLING\n##############################################################################\n\n\n# To suspend a job, type CTRL+Z while it is running. You can also suspend a job with CTRL+Y.\n# This is slightly different from CTRL+Z in that the process is only stopped when it attempts to read input from terminal.\n# Of course, to interrupt a job, type CTRL+C.\n\nmyCommand &  # runs job in the background and prompts back the shell\n\njobs         # lists all jobs (use with -l to see associated PID)\n\nfg           # brings a background job into the foreground\nfg %+        # brings most recently invoked background job\nfg %-        # brings second most recently invoked background job\nfg %N        # brings job number N\nfg %string   # brings job whose command begins with string\nfg %?string  # brings job whose command contains string\n\nkill -l               # returns a list of all signals on the system, by name and number\nkill PID              # terminates process with specified PID\nkill -s SIGKILL 4500  # sends a signal to force or terminate the process\nkill -15 913          # Ending PID 913 process with signal 15 (TERM)\nkill %1               # Where %1 is the number of job as read from 'jobs' command.\n\nps           # prints a line of information about the current running login shell and any processes running under it\nps -a        # selects all processes with a tty except session leaders\n\ntrap cmd sig1 sig2  # executes a command when a signal is received by the script\ntrap \"\" sig1 sig2   # ignores that signals\ntrap - sig1 sig2    # resets the action taken when the signal is received to the default\n\ndisown <PID|JID>    # removes the process from the list of jobs\n\nwait                # waits until all background jobs have finished\nsleep <number>      # wait # of seconds before continuing\n\npv                  # display progress bar for data handling commands. often used with pipe like |pv\nyes                 # give yes response everytime an input is requested from script/process\n\n\n##############################################################################\n# TIPS & TRICKS\n##############################################################################\n\n\n# set an alias\ncd; nano .bash_profile\n> alias gentlenode='ssh admin@gentlenode.com -p 3404'  # add your alias in .bash_profile\n\n# to quickly go to a specific directory\ncd; nano .bashrc\n> shopt -s cdable_vars\n> export websites=\"/Users/mac/Documents/websites\"\n\nsource .bashrc\ncd $websites\n\n\n##############################################################################\n# DEBUGGING SHELL PROGRAMS\n##############################################################################\n\n\nbash -n scriptname  # don't run commands; check for syntax errors only\nset -o noexec       # alternative (set option in script)\n\nbash -v scriptname  # echo commands before running them\nset -o verbose      # alternative (set option in script)\n\nbash -x scriptname  # echo commands after command-line processing\nset -o xtrace       # alternative (set option in script)\n\ntrap 'echo $varname' EXIT  # useful when you want to print out the values of variables at the point that your script exits\n\nfunction errtrap {\n  es=$?\n  echo \"ERROR line $1: Command exited with status $es.\"\n}\n\ntrap 'errtrap $LINENO' ERR  # is run whenever a command in the surrounding script or function exits with non-zero status\n\nfunction dbgtrap {\n  echo \"badvar is $badvar\"\n}\n\ntrap dbgtrap DEBUG  # causes the trap code to be executed before every statement in a function or script\n# ...section of code in which the problem occurs...\ntrap - DEBUG  # turn off the DEBUG trap\n\nfunction returntrap {\n  echo \"A return occurred\"\n}\n\ntrap returntrap RETURN  # is executed each time a shell function or a script executed with the . or source commands finishes executing\n\n##############################################################################\n# COLORS AND BACKGROUNDS\n##############################################################################\n# note: \\e or \\x1B also work instead of \\033\n# Reset\nColor_Off='\\033[0m' # Text Reset\n\n# Regular Colors\nBlack='\\033[0;30m'  # Black\nRed='\\033[0;31m'    # Red\nGreen='\\033[0;32m'  # Green\nYellow='\\033[0;33m' # Yellow\nBlue='\\033[0;34m'   # Blue\nPurple='\\033[0;35m' # Purple\nCyan='\\033[0;36m'   # Cyan\nWhite='\\033[0;97m'  # White\n\n# Additional colors\nLGrey='\\033[0;37m'  # Ligth Gray\nDGrey='\\033[0;90m'  # Dark Gray\nLRed='\\033[0;91m'   # Ligth Red\nLGreen='\\033[0;92m' # Ligth Green\nLYellow='\\033[0;93m'# Ligth Yellow\nLBlue='\\033[0;94m'  # Ligth Blue\nLPurple='\\033[0;95m'# Light Purple\nLCyan='\\033[0;96m'  # Ligth Cyan\n\n\n# Bold\nBBlack='\\033[1;30m' # Black\nBRed='\\033[1;31m'   # Red\nBGreen='\\033[1;32m' # Green\nBYellow='\\033[1;33m'# Yellow\nBBlue='\\033[1;34m'  # Blue\nBPurple='\\033[1;35m'# Purple\nBCyan='\\033[1;36m'  # Cyan\nBWhite='\\033[1;37m' # White\n\n# Underline\nUBlack='\\033[4;30m' # Black\nURed='\\033[4;31m'   # Red\nUGreen='\\033[4;32m' # Green\nUYellow='\\033[4;33m'# Yellow\nUBlue='\\033[4;34m'  # Blue\nUPurple='\\033[4;35m'# Purple\nUCyan='\\033[4;36m'  # Cyan\nUWhite='\\033[4;37m' # White\n\n# Background\nOn_Black='\\033[40m' # Black\nOn_Red='\\033[41m'   # Red\nOn_Green='\\033[42m' # Green\nOn_Yellow='\\033[43m'# Yellow\nOn_Blue='\\033[44m'  # Blue\nOn_Purple='\\033[45m'# Purple\nOn_Cyan='\\033[46m'  # Cyan\nOn_White='\\033[47m' # White\n\n# Example of usage\necho -e \"${Green}This is GREEN text${Color_Off} and normal text\"\necho -e \"${Red}${On_White}This is Red test on White background${Color_Off}\"\n# option -e is mandatory, it enable interpretation of backslash escapes\nprintf \"${Red} This is red \\n\"\n
\n
"},{"url":"/docs/docs/node-docs-full/","relativePath":"docs/docs/node-docs-full.md","relativeDir":"docs/docs","base":"node-docs-full.md","name":"node-docs-full","frontmatter":{"title":"Node Docs","weight":0,"excerpt":"Node docs","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

Cheat Sheet:

\n
/* *******************************************************************************************\n * SYNOPSIS\n * http://nodejs.org/api/synopsis.html\n * ******************************************************************************************* */\n\n\nvar http = require('http');\n\n// An example of a web server written with Node which responds with 'Hello World'.\n// To run the server, put the code into a file called example.js and execute it with the node program.\nhttp.createServer(function (request, response) {\n  response.writeHead(200, {'Content-Type': 'text/plain'});\n  response.end('Hello World\\n');\n}).listen(8124);\n\nconsole.log('Server running at http://127.0.0.1:8124/');\n\n\n/* *******************************************************************************************\n * GLOBAL OBJECTS\n * http://nodejs.org/api/globals.html\n * ******************************************************************************************* */\n\n\n// In browsers, the top-level scope is the global scope.\n// That means that in browsers if you're in the global scope var something will define a global variable.\n// In Node this is different. The top-level scope is not the global scope; var something inside a Node module will be local to that module.\n\n__filename;  // The filename of the code being executed. (absolute path)\n__dirname;   // The name of the directory that the currently executing script resides in. (absolute path)\nmodule;      // A reference to the current module. In particular module.exports is used for defining what a module exports and makes available through require().\nexports;     // A reference to the module.exports that is shorter to type.\nprocess;     // The process object is a global object and can be accessed from anywhere. It is an instance of EventEmitter.\nBuffer;      // The Buffer class is a global type for dealing with binary data directly.\n\n\n/* *******************************************************************************************\n * CONSOLE\n * http://nodejs.org/api/console.html\n * ******************************************************************************************* */\n\n\nconsole.log([data], [...]);             // Prints to stdout with newline.\nconsole.info([data], [...]);            // Same as console.log.\nconsole.error([data], [...]);           // Same as console.log but prints to stderr.\nconsole.warn([data], [...]);            // Same as console.error.\nconsole.dir(obj);                       // Uses util.inspect on obj and prints resulting string to stdout.\nconsole.time(label);                    // Mark a time.\nconsole.timeEnd(label);                 // Finish timer, record output.\nconsole.trace(label);                   // Print a stack trace to stderr of the current position.\nconsole.assert(expression, [message]);  // Same as assert.ok() where if the expression evaluates as false throw an AssertionError with message.\n\n\n/* *******************************************************************************************\n * TIMERS\n * http://nodejs.org/api/timers.html\n * ******************************************************************************************* */\n\n\nsetTimeout(callback, delay, [arg], [...]);   // To schedule execution of a one-time callback after delay milliseconds. Optionally you can also pass arguments to the callback.\nclearTimeout(t);                             // Stop a timer that was previously created with setTimeout().\nsetInterval(callback, delay, [arg], [...]);  // To schedule the repeated execution of callback every delay milliseconds. Optionally you can also pass arguments to the callback.\nclearInterval(t);                            // Stop a timer that was previously created with setInterval().\nsetImmediate(callback, [arg], [...]);        // To schedule the \"immediate\" execution of callback after I/O events callbacks and before setTimeout and setInterval.\nclearImmediate(immediateObject);             // Stop a timer that was previously created with setImmediate().\n\nunref();  // Allow you to create a timer that is active but if it is the only item left in the event loop, node won't keep the program running.\nref();    // If you had previously unref()d a timer you can call ref() to explicitly request the timer hold the program open.\n\n\n/* *******************************************************************************************\n * MODULES\n * http://nodejs.org/api/modules.html\n * ******************************************************************************************* */\n\n\nvar module = require('./module.js');    // Loads the module module.js in the same directory.\nmodule.require('./another_module.js');  // load another_module as if require() was called from the module itself.\n\nmodule.id;        // The identifier for the module. Typically this is the fully resolved filename.\nmodule.filename;  // The fully resolved filename to the module.\nmodule.loaded;    // Whether or not the module is done loading, or is in the process of loading.\nmodule.parent;    // The module that required this one.\nmodule.children;  // The module objects required by this one.\n\nexports.area = function (r) {\n  return Math.PI * r * r;\n};\n\n// If you want the root of your module's export to be a function (such as a constructor)\n// or if you want to export a complete object in one assignment instead of building it one property at a time,\n// assign it to module.exports instead of exports.\nmodule.exports = function(width) {\n  return {\n    area: function() {\n      return width * width;\n    }\n  };\n}\n\n\n/* *******************************************************************************************\n * PROCESS\n * http://nodejs.org/api/process.html\n * ******************************************************************************************* */\n\n\nprocess.on('exit', function(code) {});              // Emitted when the process is about to exit\nprocess.on('uncaughtException', function(err) {});  // Emitted when an exception bubbles all the way back to the event loop. (should not be used)\n\nprocess.stdout;           // A writable stream to stdout.\nprocess.stderr;           // A writable stream to stderr.\nprocess.stdin;            // A readable stream for stdin.\n\nprocess.argv;             // An array containing the command line arguments.\nprocess.env;              // An object containing the user environment.\nprocess.execPath;         // This is the absolute pathname of the executable that started the process.\nprocess.execArgv;         // This is the set of node-specific command line options from the executable that started the process.\n\nprocess.arch;             // What processor architecture you're running on: 'arm', 'ia32', or 'x64'.\nprocess.config;           // An Object containing the JavaScript representation of the configure options that were used to compile the current node executable.\nprocess.pid;              // The PID of the process.\nprocess.platform;         // What platform you're running on: 'darwin', 'freebsd', 'linux', 'sunos' or 'win32'.\nprocess.title;            // Getter/setter to set what is displayed in 'ps'.\nprocess.version;          // A compiled-in property that exposes NODE_VERSION.\nprocess.versions;         // A property exposing version strings of node and its dependencies.\n\nprocess.abort();          // This causes node to emit an abort. This will cause node to exit and generate a core file.\nprocess.chdir(dir);       // Changes the current working directory of the process or throws an exception if that fails.\nprocess.cwd();            // Returns the current working directory of the process.\nprocess.exit([code]);     // Ends the process with the specified code. If omitted, exit uses the 'success' code 0.\nprocess.getgid();         // Gets the group identity of the process.\nprocess.setgid(id);       // Sets the group identity of the process.\nprocess.getuid();         // Gets the user identity of the process.\nprocess.setuid(id);       // Sets the user identity of the process.\nprocess.getgroups();      // Returns an array with the supplementary group IDs.\nprocess.setgroups(grps);  // Sets the supplementary group IDs.\n\nprocess.initgroups(user, extra_grp);  // Reads /etc/group and initializes the group access list, using all groups of which the user is a member.\nprocess.kill(pid, [signal]);          // Send a signal to a process. pid is the process id and signal is the string describing the signal to send.\nprocess.memoryUsage();                // Returns an object describing the memory usage of the Node process measured in bytes.\nprocess.nextTick(callback);           // On the next loop around the event loop call this callback.\nprocess.maxTickDepth;                 // Callbacks passed to process.nextTick will usually be called at the end of the current flow of execution, and are thus approximately as fast as calling a function synchronously.\nprocess.umask([mask]);                // Sets or reads the process's file mode creation mask.\nprocess.uptime();                     // Number of seconds Node has been running.\nprocess.hrtime();                     // Returns the current high-resolution real time in a [seconds, nanoseconds] tuple Array.\n\n\n/* *******************************************************************************************\n * CHILD PROCESS\n * http://nodejs.org/api/child_process.html\n * ******************************************************************************************* */\n\n\n// Node provides a tri-directional popen facility through the child_process module.\n// It is possible to stream data through a child's stdin, stdout, and stderr in a fully non-blocking way.\n\nChildProcess;                                                 // Class. ChildProcess is an EventEmitter.\n\nchild.stdin;                                                  // A Writable Stream that represents the child process's stdin\nchild.stdout;                                                 // A Readable Stream that represents the child process's stdout\nchild.stderr;                                                 // A Readable Stream that represents the child process's stderr.\nchild.pid;                                                    // The PID of the child process\nchild.connected;                                              // If .connected is false, it is no longer possible to send messages\nchild.kill([signal]);                                         // Send a signal to the child process\nchild.send(message, [sendHandle]);                            // When using child_process.fork() you can write to the child using child.send(message, [sendHandle]) and messages are received by a 'message' event on the child.\nchild.disconnect();                                           // Close the IPC channel between parent and child, allowing the child to exit gracefully once there are no other connections keeping it alive.\nchild_process.spawn(command, [args], [options]);              // Launches a new process with the given command, with command line arguments in args. If omitted, args defaults to an empty Array.\nchild_process.exec(command, [options], callback);             // Runs a command in a shell and buffers the output.\nchild_process.execFile(file, [args], [options], [callback]);  // Runs a command in a shell and buffers the output.\nchild_process.fork(modulePath, [args], [options]);            // This is a special case of the spawn() functionality for spawning Node processes. In addition to having all the methods in a normal ChildProcess instance, the returned object has a communication channel built-in. \n\n\n/* *******************************************************************************************\n * UTIL\n * http://nodejs.org/api/util.html\n * ******************************************************************************************* */\n\n\n// These functions are in the module 'util'. Use require('util') to access them.\n\nutil.format(format, [...]);    // Returns a formatted string using the first argument as a printf-like format. (%s, %d, %j)\nutil.debug(string);            // A synchronous output function. Will block the process and output string immediately to stderr.\nutil.error([...]);             // Same as util.debug() except this will output all arguments immediately to stderr.\nutil.puts([...]);              // A synchronous output function. Will block the process and output all arguments to stdout with newlines after each argument.\nutil.print([...]);             // A synchronous output function. Will block the process, cast each argument to a string then output to stdout. (no newlines)\nutil.log(string);              // Output with timestamp on stdout.\nutil.inspect(object, [opts]);  // Return a string representation of object, which is useful for debugging. (options: showHidden, depth, colors, customInspect)\nutil.isArray(object);          // Returns true if the given \"object\" is an Array. false otherwise.\nutil.isRegExp(object);         // Returns true if the given \"object\" is a RegExp. false otherwise.\nutil.isDate(object);           // Returns true if the given \"object\" is a Date. false otherwise.\nutil.isError(object);          // Returns true if the given \"object\" is an Error. false otherwise.\nutil.promisify(fn)             // Takes a function whose last argument is a callback and returns a version that returns promises.\n\nutil.inherits(constructor, superConstructor);  // Inherit the prototype methods from one constructor into another.\n\n\n/* *******************************************************************************************\n * EVENTS\n * http://nodejs.org/api/events.html\n * ******************************************************************************************* */\n\n\n// All objects which emit events are instances of events.EventEmitter. You can access this module by doing: require(\"events\");\n// To access the EventEmitter class, require('events').EventEmitter.\n// All EventEmitters emit the event 'newListener' when new listeners are added and 'removeListener' when a listener is removed.\n\nemitter.addListener(event, listener);        // Adds a listener to the end of the listeners array for the specified event.\nemitter.on(event, listener);                 // Same as emitter.addListener().\nemitter.once(event, listener);               // Adds a one time listener for the event. This listener is invoked only the next time the event is fired, after which it is removed.\nemitter.removeListener(event, listener);     // Remove a listener from the listener array for the specified event.\nemitter.removeAllListeners([event]);         // Removes all listeners, or those of the specified event.\nemitter.setMaxListeners(n);                  // By default EventEmitters will print a warning if more than 10 listeners are added for a particular event.\nemitter.listeners(event);                    // Returns an array of listeners for the specified event.\nemitter.emit(event, [arg1], [arg2], [...]);  // Execute each of the listeners in order with the supplied arguments. Returns true if event had listeners, false otherwise.\n\nEventEmitter.listenerCount(emitter, event);  // Return the number of listeners for a given event.\n\n\n/* *******************************************************************************************\n * STREAM\n * http://nodejs.org/api/stream.html\n * ******************************************************************************************* */\n\n\n// A stream is an abstract interface implemented by various objects in Node. For example a request to an HTTP server is a stream, as is stdout.\n// Streams are readable, writable, or both. All streams are instances of EventEmitter.\n\n// The Readable stream interface is the abstraction for a source of data that you are reading from.\n// In other words, data comes out of a Readable stream.\n// A Readable stream will not start emitting data until you indicate that you are ready to receive it.\n// Examples of readable streams include: http responses on the client, http requests on the server, fs read streams\n// zlib streams, crypto streams, tcp sockets, child process stdout and stderr, process.stdin.\n\nvar readable = getReadableStreamSomehow();\n\nreadable.on('readable', function() {});   // When a chunk of data can be read from the stream, it will emit a 'readable' event.\nreadable.on('data', function(chunk) {});  // If you attach a data event listener, then it will switch the stream into flowing mode, and data will be passed to your handler as soon as it is available.\nreadable.on('end', function() {});        // This event fires when there will be no more data to read.\nreadable.on('close', function() {});      // Emitted when the underlying resource (for example, the backing file descriptor) has been closed. Not all streams will emit this.\nreadable.on('error', function() {});      // Emitted if there was an error receiving data.\n\n// The read() method pulls some data out of the internal buffer and returns it. If there is no data available, then it will return null.\n// This method should only be called in non-flowing mode. In flowing-mode, this method is called automatically until the internal buffer is drained.\nreadable.read([size]);\n\nreadable.setEncoding(encoding);           // Call this function to cause the stream to return strings of the specified encoding instead of Buffer objects.\nreadable.resume();                        // This method will cause the readable stream to resume emitting data events.\nreadable.pause();                         // This method will cause a stream in flowing-mode to stop emitting data events.\nreadable.pipe(destination, [options]);    // This method pulls all the data out of a readable stream, and writes it to the supplied destination, automatically managing the flow so that the destination is not overwhelmed by a fast readable stream.\nreadable.unpipe([destination]);           // This method will remove the hooks set up for a previous pipe() call. If the destination is not specified, then all pipes are removed.\nreadable.unshift(chunk);                  // This is useful in certain cases where a stream is being consumed by a parser, which needs to \"un-consume\" some data that it has optimistically pulled out of the source, so that the stream can be passed on to some other party.\n\n\n// The Writable stream interface is an abstraction for a destination that you are writing data to.\n// Examples of writable streams include: http requests on the client, http responses on the server, fs write streams,\n// zlib streams, crypto streams, tcp sockets, child process stdin, process.stdout, process.stderr.\n\nvar writer = getWritableStreamSomehow();\n\nwritable.write(chunk, [encoding], [callback]);  // This method writes some data to the underlying system, and calls the supplied callback once the data has been fully handled.\nwriter.once('drain', write);                    // If a writable.write(chunk) call returns false, then the drain event will indicate when it is appropriate to begin writing more data to the stream.\n\nwritable.end([chunk], [encoding], [callback]);  // Call this method when no more data will be written to the stream.\nwriter.on('finish', function() {});             // When the end() method has been called, and all data has been flushed to the underlying system, this event is emitted.\nwriter.on('pipe', function(src) {});            // This is emitted whenever the pipe() method is called on a readable stream, adding this writable to its set of destinations.\nwriter.on('unpipe', function(src) {});          // This is emitted whenever the unpipe() method is called on a readable stream, removing this writable from its set of destinations.\nwriter.on('error', function(src) {});           // Emitted if there was an error when writing or piping data.\n\n\n// Duplex streams are streams that implement both the Readable and Writable interfaces. See above for usage.\n// Examples of Duplex streams include: tcp sockets, zlib streams, crypto streams.\n\n// Transform streams are Duplex streams where the output is in some way computed from the input. They implement both the Readable and Writable interfaces. See above for usage.\n// Examples of Transform streams include: zlib streams, crypto streams.\n\n\n/* *******************************************************************************************\n * FILE SYSTEM\n * http://nodejs.org/api/fs.html\n * ******************************************************************************************* */\n\n\n// To use this module do require('fs').\n// All the methods have asynchronous and synchronous forms.\n\nfs.rename(oldPath, newPath, callback);  // Asynchronous rename. No arguments other than a possible exception are given to the completion callback.Asynchronous ftruncate. No arguments other than a possible exception are given to the completion callback.\nfs.renameSync(oldPath, newPath);        // Synchronous rename.\n\nfs.ftruncate(fd, len, callback);        // Asynchronous ftruncate. No arguments other than a possible exception are given to the completion callback.\nfs.ftruncateSync(fd, len);              // Synchronous ftruncate.\nfs.truncate(path, len, callback);       // Asynchronous truncate. No arguments other than a possible exception are given to the completion callback.\nfs.truncateSync(path, len);             // Synchronous truncate.\n\nfs.chown(path, uid, gid, callback);     // Asynchronous chown. No arguments other than a possible exception are given to the completion callback.\nfs.chownSync(path, uid, gid);           // Synchronous chown.\nfs.fchown(fd, uid, gid, callback);      // Asynchronous fchown. No arguments other than a possible exception are given to the completion callback.\nfs.fchownSync(fd, uid, gid);            // Synchronous fchown.\nfs.lchown(path, uid, gid, callback);    // Asynchronous lchown. No arguments other than a possible exception are given to the completion callback.\nfs.lchownSync(path, uid, gid);          // Synchronous lchown.\n\nfs.chmod(path, mode, callback);         // Asynchronous chmod. No arguments other than a possible exception are given to the completion callback.\nfs.chmodSync(path, mode);               // Synchronous chmod.\nfs.fchmod(fd, mode, callback);          // Asynchronous fchmod. No arguments other than a possible exception are given to the completion callback.\nfs.fchmodSync(fd, mode);                // Synchronous fchmod.\nfs.lchmod(path, mode, callback);        // Asynchronous lchmod. No arguments other than a possible exception are given to the completion callback.\nfs.lchmodSync(path, mode);              // Synchronous lchmod.\n\nfs.stat(path, callback);                // Asynchronous stat. The callback gets two arguments (err, stats) where stats is a fs.Stats object. \nfs.statSync(path);                      // Synchronous stat. Returns an instance of fs.Stats.\nfs.lstat(path, callback);               // Asynchronous lstat. The callback gets two arguments (err, stats) where stats is a fs.Stats object. lstat() is identical to stat(), except that if path is a symbolic link, then the link itself is stat-ed, not the file that it refers to.\nfs.lstatSync(path);                     // Synchronous lstat. Returns an instance of fs.Stats.\nfs.fstat(fd, callback);                 // Asynchronous fstat. The callback gets two arguments (err, stats) where stats is a fs.Stats object. fstat() is identical to stat(), except that the file to be stat-ed is specified by the file descriptor fd.\nfs.fstatSync(fd);                       // Synchronous fstat. Returns an instance of fs.Stats.\n\nfs.link(srcpath, dstpath, callback);             // Asynchronous link. No arguments other than a possible exception are given to the completion callback.\nfs.linkSync(srcpath, dstpath);                   // Synchronous link.\nfs.symlink(srcpath, dstpath, [type], callback);  // Asynchronous symlink. No arguments other than a possible exception are given to the completion callback. The type argument can be set to 'dir', 'file', or 'junction' (default is 'file') and is only available on Windows (ignored on other platforms)\nfs.symlinkSync(srcpath, dstpath, [type]);        // Synchronous symlink.\nfs.readlink(path, callback);                     // Asynchronous readlink. The callback gets two arguments (err, linkString).\nfs.readlinkSync(path);                           // Synchronous readlink. Returns the symbolic link's string value.\nfs.unlink(path, callback);                       // Asynchronous unlink. No arguments other than a possible exception are given to the completion callback.\nfs.unlinkSync(path);                             // Synchronous unlink.\n\nfs.realpath(path, [cache], callback);     // Asynchronous realpath. The callback gets two arguments (err, resolvedPath).\nfs.realpathSync(path, [cache]);           // Synchronous realpath. Returns the resolved path.\n\nfs.rmdir(path, callback);                 // Asynchronous rmdir. No arguments other than a possible exception are given to the completion callback.\nfs.rmdirSync(path);                       // Synchronous rmdir.\nfs.mkdir(path, [mode], callback);         // Asynchronous mkdir. No arguments other than a possible exception are given to the completion callback. mode defaults to 0777.\nfs.mkdirSync(path, [mode]);               // Synchronous mkdir.\nfs.readdir(path, callback);               // Asynchronous readdir. Reads the contents of a directory. The callback gets two arguments (err, files) where files is an array of the names of the files in the directory excluding '.' and '..'.\nfs.readdirSync(path);                     // Synchronous readdir. Returns an array of filenames excluding '.' and '..'.\nfs.close(fd, callback);                   // Asynchronous close. No arguments other than a possible exception are given to the completion callback.\nfs.closeSync(fd);                         // Synchronous close.\nfs.open(path, flags, [mode], callback);   // Asynchronous file open.\nfs.openSync(path, flags, [mode]);         // Synchronous version of fs.open().\nfs.utimes(path, atime, mtime, callback);  // Change file timestamps of the file referenced by the supplied path.\nfs.utimesSync(path, atime, mtime);        // Synchronous version of fs.utimes().\nfs.futimes(fd, atime, mtime, callback);   // Change the file timestamps of a file referenced by the supplied file descriptor.\nfs.futimesSync(fd, atime, mtime);         // Synchronous version of fs.futimes().\nfs.fsync(fd, callback);                   // Asynchronous fsync. No arguments other than a possible exception are given to the completion callback.\nfs.fsyncSync(fd);                         // Synchronous fsync.\n\nfs.write(fd, buffer, offset, length, position, callback);  // Write buffer to the file specified by fd.\nfs.writeSync(fd, buffer, offset, length, position);        // Synchronous version of fs.write(). Returns the number of bytes written.\nfs.read(fd, buffer, offset, length, position, callback);   // Read data from the file specified by fd.\nfs.readSync(fd, buffer, offset, length, position);         // Synchronous version of fs.read. Returns the number of bytesRead.\nfs.readFile(filename, [options], callback);                // Asynchronously reads the entire contents of a file.\nfs.readFileSync(filename, [options]);                      // Synchronous version of fs.readFile. Returns the contents of the filename. If the encoding option is specified then this function returns a string. Otherwise it returns a buffer.\n\nfs.writeFile(filename, data, [options], callback);   // Asynchronously writes data to a file, replacing the file if it already exists. data can be a string or a buffer.\nfs.writeFileSync(filename, data, [options]);         // The synchronous version of fs.writeFile.\nfs.appendFile(filename, data, [options], callback);  // Asynchronously append data to a file, creating the file if it not yet exists. data can be a string or a buffer.\nfs.appendFileSync(filename, data, [options]);        // The synchronous version of fs.appendFile.\nfs.watch(filename, [options], [listener]);           // Watch for changes on filename, where filename is either a file or a directory. The returned object is a fs.FSWatcher. The listener callback gets two arguments (event, filename). event is either 'rename' or 'change', and filename is the name of the file which triggered the event.\nfs.exists(path, callback);                           // Test whether or not the given path exists by checking with the file system. Then call the callback argument with either true or false. (should not be used)\nfs.existsSync(path);                                 // Synchronous version of fs.exists. (should not be used)\n\n// fs.Stats: objects returned from fs.stat(), fs.lstat() and fs.fstat() and their synchronous counterparts are of this type.\nstats.isFile();\nstats.isDirectory()\nstats.isBlockDevice()\nstats.isCharacterDevice()\nstats.isSymbolicLink()  // (only valid with fs.lstat())\nstats.isFIFO()\nstats.isSocket()\n\nfs.createReadStream(path, [options]);   // Returns a new ReadStream object.\nfs.createWriteStream(path, [options]);  // Returns a new WriteStream object.\n\n\n/* *******************************************************************************************\n * PATH\n * http://nodejs.org/api/fs.html\n * ******************************************************************************************* */\n\n\n// Use require('path') to use this module.\n// This module contains utilities for handling and transforming file paths.\n// Almost all these methods perform only string transformations.\n// The file system is not consulted to check whether paths are valid.\n\npath.normalize(p);                    // Normalize a string path, taking care of '..' and '.' parts.\npath.join([path1], [path2], [...]);   // Join all arguments together and normalize the resulting path.\npath.resolve([from ...], to);         // Resolves 'to' to an absolute path.\npath.relative(from, to);              // Solve the relative path from 'from' to 'to'.\npath.dirname(p);                      // Return the directory name of a path. Similar to the Unix dirname command.\npath.basename(p, [ext]);              // Return the last portion of a path. Similar to the Unix basename command.\npath.extname(p);                      // Return the extension of the path, from the last '.' to end of string in the last portion of the path.\n\npath.sep;                             // The platform-specific file separator. '\\\\' or '/'.\npath.delimiter;                       // The platform-specific path delimiter, ';' or ':'.\n\n\n/* *******************************************************************************************\n * HTTP\n * http://nodejs.org/api/http.html\n * ******************************************************************************************* */\n\n\n// To use the HTTP server and client one must require('http').\n\nhttp.STATUS_CODES;                                             // A collection of all the standard HTTP response status codes, and the short description of each.\nhttp.request(options, [callback]);                             // This function allows one to transparently issue requests.\nhttp.get(options, [callback]);                                 // Set the method to GET and calls req.end() automatically.\n\nserver = http.createServer([requestListener]);                 // Returns a new web server object. The requestListener is a function which is automatically added to the 'request' event.\nserver.listen(port, [hostname], [backlog], [callback]);        // Begin accepting connections on the specified port and hostname.\nserver.listen(path, [callback]);                               // Start a UNIX socket server listening for connections on the given path.\nserver.listen(handle, [callback]);                             // The handle object can be set to either a server or socket (anything with an underlying _handle member), or a {fd: <n>} object.\nserver.close([callback]);                                      // Stops the server from accepting new connections. \nserver.setTimeout(msecs, callback);                            // Sets the timeout value for sockets, and emits a 'timeout' event on the Server object, passing the socket as an argument, if a timeout occurs.\n\nserver.maxHeadersCount;  // Limits maximum incoming headers count, equal to 1000 by default. If set to 0 - no limit will be applied.\nserver.timeout;          // The number of milliseconds of inactivity before a socket is presumed to have timed out.\n\nserver.on('request', function (request, response) { });        // Emitted each time there is a request.\nserver.on('connection', function (socket) { });                // When a new TCP stream is established.\nserver.on('close', function () { });                           // Emitted when the server closes.\nserver.on('checkContinue', function (request, response) { });  // Emitted each time a request with an http Expect: 100-continue is received.\nserver.on('connect', function (request, socket, head) { });    // Emitted each time a client requests a http CONNECT method.\nserver.on('upgrade', function (request, socket, head) { });    // Emitted each time a client requests a http upgrade.\nserver.on('clientError', function (exception, socket) { });    // If a client connection emits an 'error' event - it will forwarded here.\n\nrequest.write(chunk, [encoding]);                              // Sends a chunk of the body.\nrequest.end([data], [encoding]);                               // Finishes sending the request. If any parts of the body are unsent, it will flush them to the stream.\nrequest.abort();                                               // Aborts a request.\nrequest.setTimeout(timeout, [callback]);                       // Once a socket is assigned to this request and is connected socket.setTimeout() will be called.\nrequest.setNoDelay([noDelay]);                                 // Once a socket is assigned to this request and is connected socket.setNoDelay() will be called.\nrequest.setSocketKeepAlive([enable], [initialDelay]);          // Once a socket is assigned to this request and is connected socket.setKeepAlive() will be called.\n\nrequest.on('response', function(response) { });                // Emitted when a response is received to this request. This event is emitted only once.\nrequest.on('socket', function(socket) { });                    // Emitted after a socket is assigned to this request.\nrequest.on('connect', function(response, socket, head) { });   // Emitted each time a server responds to a request with a CONNECT method. If this event isn't being listened for, clients receiving a CONNECT method will have their connections closed.\nrequest.on('upgrade', function(response, socket, head) { });   // Emitted each time a server responds to a request with an upgrade. If this event isn't being listened for, clients receiving an upgrade header will have their connections closed.\nrequest.on('continue', function() { });                        // Emitted when the server sends a '100 Continue' HTTP response, usually because the request contained 'Expect: 100-continue'. This is an instruction that the client should send the request body.\n\nresponse.write(chunk, [encoding]);                             // This sends a chunk of the response body. If this merthod is called and response.writeHead() has not been called, it will switch to implicit header mode and flush the implicit headers.\nresponse.writeContinue();                                      // Sends a HTTP/1.1 100 Continue message to the client, indicating that the request body should be sent.\nresponse.writeHead(statusCode, [reasonPhrase], [headers]);     // Sends a response header to the request.\nresponse.setTimeout(msecs, callback);                          // Sets the Socket's timeout value to msecs. If a callback is provided, then it is added as a listener on the 'timeout' event on the response object.\nresponse.setHeader(name, value);                               // Sets a single header value for implicit headers. If this header already exists in the to-be-sent headers, its value will be replaced. Use an array of strings here if you need to send multiple headers with the same name.\nresponse.getHeader(name);                                      // Reads out a header that's already been queued but not sent to the client. Note that the name is case insensitive.\nresponse.removeHeader(name);                                   // Removes a header that's queued for implicit sending.\nresponse.addTrailers(headers);                                 // This method adds HTTP trailing headers (a header but at the end of the message) to the response.\nresponse.end([data], [encoding]);                              // This method signals to the server that all of the response headers and body have been sent; that server should consider this message complete. The method, response.end(), MUST be called on each response.\n\nresponse.statusCode;                                           // When using implicit headers (not calling response.writeHead() explicitly), this property controls the status code that will be sent to the client when the headers get flushed.\nresponse.headersSent;                                          // Boolean (read-only). True if headers were sent, false otherwise.\nresponse.sendDate;                                             // When true, the Date header will be automatically generated and sent in the response if it is not already present in the headers. Defaults to true.\n\nresponse.on('close', function () { });  // Indicates that the underlying connection was terminated before response.end() was called or able to flush.\nresponse.on('finish', function() { });  // Emitted when the response has been sent. \n\nmessage.httpVersion;                    // In case of server request, the HTTP version sent by the client. In the case of client response, the HTTP version of the connected-to server.\nmessage.headers;                        // The request/response headers object.\nmessage.trailers;                       // The request/response trailers object. Only populated after the 'end' event.\nmessage.method;                         // The request method as a string. Read only. Example: 'GET', 'DELETE'.\nmessage.url;                            // Request URL string. This contains only the URL that is present in the actual HTTP request.\nmessage.statusCode;                     // The 3-digit HTTP response status code. E.G. 404.\nmessage.socket;                         // The net.Socket object associated with the connection.\n\nmessage.setTimeout(msecs, callback);    // Calls message.connection.setTimeout(msecs, callback).\n\n\n/* *******************************************************************************************\n * URL\n * http://nodejs.org/api/url.html\n * ******************************************************************************************* */\n\n\n// This module has utilities for URL resolution and parsing. Call require('url') to use it.\n\nurl.parse(urlStr, [parseQueryString], [slashesDenoteHost]);  // Take a URL string, and return an object.\nurl.format(urlObj);                                          // Take a parsed URL object, and return a formatted URL string.\nurl.resolve(from, to);                                       // Take a base URL, and a href URL, and resolve them as a browser would for an anchor tag.\n\n\n/* *******************************************************************************************\n * QUERY STRING\n * http://nodejs.org/api/querystring.html\n * ******************************************************************************************* */\n\n\n// This module provides utilities for dealing with query strings. Call require('querystring') to use it.\n\nquerystring.stringify(obj, [sep], [eq]);         // Serialize an object to a query string. Optionally override the default separator ('&') and assignment ('=') characters.\nquerystring.parse(str, [sep], [eq], [options]);  // Deserialize a query string to an object. Optionally override the default separator ('&') and assignment ('=') characters.\n\n\n/* *******************************************************************************************\n * ASSERT\n * http://nodejs.org/api/assert.html\n * ******************************************************************************************* */\n\n\n// This module is used for writing unit tests for your applications, you can access it with require('assert').\n\nassert.fail(actual, expected, message, operator);     // Throws an exception that displays the values for actual and expected separated by the provided operator.\nassert(value, message); assert.ok(value, [message]);  // Tests if value is truthy, it is equivalent to assert.equal(true, !!value, message);\nassert.equal(actual, expected, [message]);            // Tests shallow, coercive equality with the equal comparison operator ( == ).\nassert.notEqual(actual, expected, [message]);         // Tests shallow, coercive non-equality with the not equal comparison operator ( != ).\nassert.deepEqual(actual, expected, [message]);        // Tests for deep equality.\nassert.notDeepEqual(actual, expected, [message]);     // Tests for any deep inequality.\nassert.strictEqual(actual, expected, [message]);      // Tests strict equality, as determined by the strict equality operator ( === )\nassert.notStrictEqual(actual, expected, [message]);   // Tests strict non-equality, as determined by the strict not equal operator ( !== )\nassert.throws(block, [error], [message]);             // Expects block to throw an error. error can be constructor, RegExp or validation function.\nassert.doesNotThrow(block, [message]);                // Expects block not to throw an error, see assert.throws for details.\nassert.ifError(value);                                // Tests if value is not a false value, throws if it is a true value. Useful when testing the first argument, error in callbacks.\n\n\n/* *******************************************************************************************\n * OS\n * http://nodejs.org/api/os.html\n * ******************************************************************************************* */\n\n\n// Provides a few basic operating-system related utility functions.\n// Use require('os') to access this module.\n\nos.tmpdir();             // Returns the operating system's default directory for temp files.\nos.endianness();         // Returns the endianness of the CPU. Possible values are \"BE\" or \"LE\".\nos.hostname();           // Returns the hostname of the operating system.\nos.type();               // Returns the operating system name.\nos.platform();           // Returns the operating system platform.\nos.arch();               // Returns the operating system CPU architecture.\nos.release();            // Returns the operating system release.\nos.uptime();             // Returns the system uptime in seconds.\nos.loadavg();            // Returns an array containing the 1, 5, and 15 minute load averages.\nos.totalmem();           // Returns the total amount of system memory in bytes.\nos.freemem();            // Returns the amount of free system memory in bytes.\nos.cpus();               // Returns an array of objects containing information about each CPU/core installed: model, speed (in MHz), and times (an object containing the number of milliseconds the CPU/core spent in: user, nice, sys, idle, and irq).\nos.networkInterfaces();  // Get a list of network interfaces.\nos.EOL;                  // A constant defining the appropriate End-of-line marker for the operating system.\n\n\n/* *******************************************************************************************\n * BUFFER\n * http://nodejs.org/api/buffer.html\n * ******************************************************************************************* */\n\n\n// Buffer is used to dealing with binary data\n// Buffer is similar to an array of integers but corresponds to a raw memory allocation outside the V8 heap\n\nBuffer.from(size);                                                  // Allocates a new buffer of size octets.\nBuffer.from(array);                                                 // Allocates a new buffer using an array of octets.\nBuffer.from(str, [encoding]);                                       // Allocates a new buffer containing the given str. encoding defaults to 'utf8'.\n\nBuffer.isEncoding(encoding);                                        // Returns true if the encoding is a valid encoding argument, or false otherwise.\nBuffer.isBuffer(obj);                                               // Tests if obj is a Buffer\nBuffer.concat(list, [totalLength]);                                 // Returns a buffer which is the result of concatenating all the buffers in the list together.\nBuffer.byteLength(string, [encoding]);                              // Gives the actual byte length of a string.\n\nbuf.write(string, [offset], [length], [encoding]);                  // Writes string to the buffer at offset using the given encoding\nbuf.toString([encoding], [start], [end]);                           // Decodes and returns a string from buffer data encoded with encoding (defaults to 'utf8') beginning at start (defaults to 0) and ending at end (defaults to buffer.length).\nbuf.toJSON();                                                       // Returns a JSON-representation of the Buffer instance, which is identical to the output for JSON Arrays\nbuf.copy(targetBuffer, [targetStart], [sourceStart], [sourceEnd]);  // Does copy between buffers. The source and target regions can be overlapped\nbuf.slice([start], [end]);                                          // Returns a new buffer which references the same memory as the old, but offset and cropped by the start (defaults to 0) and end (defaults to buffer.length) indexes. Negative indexes start from the end of the buffer.   \nbuf.fill(value, [offset], [end]);                                   // Fills the buffer with the specified value\nbuf[index];                                                         // Get and set the octet at index\nbuf.length;                                                         // The size of the buffer in bytes, Note that this is not necessarily the size of the contents\n\nbuffer.INSPECT_MAX_BYTES;                                           // How many bytes will be returned when buffer.inspect() is called. This can be overridden by user modules.\n
\n

Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project!

\n

Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser. This allows Node.js to be very performant.

\n

A Node.js app runs in a single process, without creating a new thread for every request. Node.js provides a set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the exception rather than the norm.

\n

When Node.js performs an I/O operation, like reading from the network, accessing a database or the filesystem, instead of blocking the thread and wasting CPU cycles waiting, Node.js will resume the operations when the response comes back.

\n

This allows Node.js to handle thousands of concurrent connections with a single server without introducing the burden of managing thread concurrency, which could be a significant source of bugs.

\n

Node.js has a unique advantage because millions of frontend developers that write JavaScript for the browser are now able to write the server-side code in addition to the client-side code without the need to learn a completely different language.

\n

In Node.js the new ECMAScript standards can be used without problems, as you don't have to wait for all your users to update their browsers - you are in charge of deciding which ECMAScript version to use by changing the Node.js version, and you can also enable specific experimental features by running Node.js with flags.

\n

A Vast Number of Libraries

\n

npm with its simple structure helped the ecosystem of Node.js proliferate, and now the npm registry hosts over 1,000,000 open source packages you can freely use.

\n

An Example Node.js Application

\n

The most common example Hello World of Node.js is a web server:

\n

This code first includes the Node.js http module.

\n

Node.js has a fantastic standard library, including first-class support for networking.

\n

The createServer() method of http creates a new HTTP server and returns it.

\n

The server is set to listen on the specified port and host name. When the server is ready, the callback function is called, in this case informing us that the server is running.

\n

Whenever a new request is received, the request event is called, providing two objects: a request (an http.IncomingMessage object) and a response (an http.ServerResponse object).

\n

Those 2 objects are essential to handle the HTTP call.

\n

The first provides the request details. In this simple example, this is not used, but you could access the request headers and request data.

\n

The second is used to return data to the caller.

\n

In this case with:

\n

JS

\n

res.statusCode = 200

\n

we set the statusCode property to 200, to indicate a successful response.

\n

We set the Content-Type header:

\n

JS

\n

res.setHeader('Content-Type', 'text/plain')

\n

and we close the response, adding the content as an argument to end():

\n

JS

\n

res.end('Hello World\\n')

\n

Node.js is a low-level platform. In order to make things easy and exciting for developers, thousands of libraries were built upon Node.js by the community.

\n

Many of those established over time as popular options. Here is a non-comprehensive list of the ones worth learning:

\n
    \n
  • AdonisJS: A TypeScript-based fully featured framework highly focused on developer ergonomics, stability, and confidence. Adonis is one of the fastest Node.js web frameworks.
    • \n
  • Egg.js: A framework to build better enterprise frameworks and apps with Node.js & Koa.
    • \n
  • Express: It provides one of the most simple yet powerful ways to create a web server. Its minimalist approach, unopinionated, focused on the core features of a server, is key to its success.
    • \n
  • Fastify: A web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture. Fastify is one of the fastest Node.js web frameworks.
    • \n
  • FeatherJS: Feathers is a lightweight web-framework for creating real-time applications and REST APIs using JavaScript or TypeScript. Build prototypes in minutes and production-ready apps in days.
    • \n
  • Gatsby: A React-based, GraphQL powered, static site generator with a very rich ecosystem of plugins and starters.
    • \n
  • hapi: A rich framework for building applications and services that enables developers to focus on writing reusable application logic instead of spending time building infrastructure.
    • \n
  • koa: It is built by the same team behind Express, aims to be even simpler and smaller, building on top of years of knowledge. The new project born out of the need to create incompatible changes without disrupting the existing community.
    • \n
  • Loopback.io: Makes it easy to build modern applications that require complex integrations.
    • \n
  • Meteor: An incredibly powerful full-stack framework, powering you with an isomorphic approach to building apps with JavaScript, sharing code on the client and the server. Once an off-the-shelf tool that provided everything, now integrates with frontend libs React, Vue, and Angular. Can be used to create mobile apps as well.
    • \n
  • Micro: It provides a very lightweight server to create asynchronous HTTP microservices.
    • \n
  • NestJS: A TypeScript based progressive Node.js framework for building enterprise-grade efficient, reliable and scalable server-side applications.
    • \n
  • Next.js: React framework that gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.
    • \n
  • Nx: A toolkit for full-stack monorepo development using NestJS, Express, React, Angular, and more! Nx helps scale your development from one team building one application to many teams collaborating on multiple applications!
    • \n
  • Sapper: Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing. Offers SSR and more!
    • \n
  • Socket.io: A real-time communication engine to build network applications.
    • \n
  • Strapi: Strapi is a flexible, open-source Headless CMS that gives developers the freedom to choose their favorite tools and frameworks while also allowing editors to easily manage and distribute their content. By making the admin panel and API extensible through a plugin system, Strapi enables the world's largest companies to accelerate content delivery while building beautiful digital experiences.
    • \n
\n

Node.js can be installed in different ways. This post highlights the most common and convenient ones.

\n

Official packages for all the major platforms are available at https://nodejs.dev/download/.

\n

One very convenient way to install Node.js is through a package manager. In this case, every operating system has its own.

\n

Other package managers for MacOS, Linux, and Windows are listed in https://nodejs.dev/download/package-manager/

\n

nvm is a popular way to run Node.js. It allows you to easily switch the Node.js version, and install new versions to try and easily rollback if something breaks, for example.

\n

It is also very useful to test your code with old Node.js versions.

\n

See https://github.com/nvm-sh/nvm for more information about this option.

\n

In any case, when Node.js is installed you'll have access to the node executable program in the command line.

\n

How much JavaScript do you need to know to use Node.js

\n

As a beginner, it's hard to get to a point where you are confident enough in your programming abilities.

\n

While learning to code, you might also be confused at where does JavaScript end, and where Node.js begins, and vice versa.

\n

I would recommend you to have a good grasp of the main JavaScript concepts before diving into Node.js:

\n
    \n
  • Lexical Structure
    • \n
  • Expressions
    • \n
  • Types
    • \n
  • Classes
    • \n
  • Variables
    • \n
  • Functions
    • \n
  • this
    • \n
  • Arrow Functions
    • \n
  • Loops
    • \n
  • Scopes
    • \n
  • Arrays
    • \n
  • Template Literals
    • \n
  • Semicolons
    • \n
  • Strict Mode
    • \n
  • ECMAScript 6, 2016, 2017
    • \n
\n

With those concepts in mind, you are well on your road to become a proficient JavaScript developer, in both the browser and in Node.js.

\n

The following concepts are also key to understand asynchronous programming, which is one of the fundamental parts of Node.js:

\n\n

Differences between Node.js and the Browser

\n

Both the browser and Node.js use JavaScript as their programming language.

\n

Building apps that run in the browser is a completely different thing than building a Node.js application.

\n

Despite the fact that it's always JavaScript, there are some key differences that make the experience radically different.

\n

From the perspective of a frontend developer who extensively uses JavaScript, Node.js apps bring with them a huge advantage: the comfort of programming everything - the frontend and the backend - in a single language.

\n

You have a huge opportunity because we know how hard it is to fully, deeply learn a programming language, and by using the same language to perform all your work on the web - both on the client and on the server, you're in a unique position of advantage.

\n

What changes is the ecosystem.

\n

In the browser, most of the time what you are doing is interacting with the DOM, or other Web Platform APIs like Cookies. Those do not exist in Node.js, of course. You don't have the document, window and all the other objects that are provided by the browser.

\n

And in the browser, we don't have all the nice APIs that Node.js provides through its modules, like the filesystem access functionality.

\n

Another big difference is that in Node.js you control the environment. Unless you are building an open source application that anyone can deploy anywhere, you know which version of Node.js you will run the application on. Compared to the browser environment, where you don't get the luxury to choose what browser your visitors will use, this is very convenient.

\n

This means that you can write all the modern ES6-7-8-9 JavaScript that your Node.js version supports.

\n

Since JavaScript moves so fast, but browsers can be a bit slow to upgrade, sometimes on the web you are stuck with using older JavaScript / ECMAScript releases.

\n

You can use Babel to transform your code to be ES5-compatible before shipping it to the browser, but in Node.js, you won't need that.

\n

Another difference is that Node.js uses the CommonJS module system, while in the browser we are starting to see the ES Modules standard being implemented.

\n

In practice, this means that for the time being you use require() in Node.js and import in the browser.

\n

The V8 JavaScript Engine

\n

V8 is the name of the JavaScript engine that powers Google Chrome. It's the thing that takes our JavaScript and executes it while browsing with Chrome.

\n

V8 provides the runtime environment in which JavaScript executes. The DOM, and the other Web Platform APIs are provided by the browser.

\n

The cool thing is that the JavaScript engine is independent of the browser in which it's hosted. This key feature enabled the rise of Node.js. V8 was chosen to be the engine that powered Node.js back in 2009, and as the popularity of Node.js exploded, V8 became the engine that now powers an incredible amount of server-side code written in JavaScript.

\n

The Node.js ecosystem is huge and thanks to V8 which also powers desktop apps, with projects like Electron.

\n

Other JS engines

\n

Other browsers have their own JavaScript engine:

\n\n

and many others exist as well.

\n

All those engines implement the ECMA ES-262 standard, also called ECMAScript, the standard used by JavaScript.

\n

The quest for performance

\n

V8 is written in C++, and it's continuously improved. It is portable and runs on Mac, Windows, Linux and several other systems.

\n

In this V8 introduction, we will ignore the implementation details of V8: they can be found on more authoritative sites (e.g. the V8 official site), and they change over time, often radically.

\n

V8 is always evolving, just like the other JavaScript engines around, to speed up the Web and the Node.js ecosystem.

\n

On the web, there is a race for performance that's been going on for years, and we (as users and developers) benefit a lot from this competition because we get faster and more optimized machines year after year.

\n

Compilation

\n

JavaScript is generally considered an interpreted language, but modern JavaScript engines no longer just interpret JavaScript, they compile it.

\n

This has been happening since 2009, when the SpiderMonkey JavaScript compiler was added to Firefox 3.5, and everyone followed this idea.

\n

JavaScript is internally compiled by V8 with just-in-time (JIT) compilation to speed up the execution.

\n

This might seem counter-intuitive, but since the introduction of Google Maps in 2004, JavaScript has evolved from a language that was generally executing a few dozens of lines of code to complete applications with thousands to hundreds of thousands of lines running in the browser.

\n

Our applications can now run for hours inside a browser, rather than being just a few form validation rules or simple scripts.

\n

In this new world, compiling JavaScript makes perfect sense because while it might take a little bit more to have the JavaScript ready, once done it's going to be much more performant than purely interpreted code.

\n

Run Node.js scripts from the command line

\n

The usual way to run a Node.js program is to run the node globally available command (once you install Node.js) and pass the name of the file you want to execute.

\n

If your main Node.js application file is app.js, you can call it by typing:

\n

BASH

\n

node app.js

\n

Above, you are explicitly telling the shell to run your script with node. You can also embed this information into your JavaScript file with a \"shebang\" line. The \"shebang\" is the first line in the file, and tells the OS which interpreter to use for running the script. Below is the first line of JavaScript:

\n

BASH

\n

!/usr/bin/node

\n

Above, we are explicitly giving the absolute path of interpreter. Not all operating systems have node in the bin folder, but all should have env. You can tell the OS to run env with node as parameter:

\n

BASH

\n

!/usr/bin/env node

\n

// your code

\n

To use a shebang, your file should have executable permission. You can give app.js the executable permission by running:

\n

BASH

\n

chmod u+x app.js

\n

While running the command, make sure you are in the same directory which contains the app.js file.

\n

How to exit from a Node.js program

\n
\n

created: 2021-11-27T11:28:53 (UTC -05:00)\ntags: []\nsource: https://nodejs.dev/learn\nauthor:

\n
\n

How to exit from a Node.js program

\n
\n

Excerpt

\n

Learn how to terminate a Node.js app in the best possible way

\n
\n
\n

There are various ways to terminate a Node.js application.

\n

When running a program in the console you can close it with ctrl-C, but what we want to discuss here is programmatically exiting.

\n

Let's start with the most drastic one, and see why you're better off not using it.

\n

The process core module provides a handy method that allows you to programmatically exit from a Node.js program: process.exit().

\n

When Node.js runs this line, the process is immediately forced to terminate.

\n

This means that any callback that's pending, any network request still being sent, any filesystem access, or processes writing to stdout or stderr - all is going to be ungracefully terminated right away.

\n

If this is fine for you, you can pass an integer that signals the operating system the exit code:

\n

JS

\n

process.exit(1)

\n

By default the exit code is 0, which means success. Different exit codes have different meaning, which you might want to use in your own system to have the program communicate to other programs.

\n

You can read more on exit codes at https://nodejs.org/api/process.html#process_exit_codes

\n

You can also set the process.exitCode property:

\n

JS

\n

process.exitCode = 1

\n

and when the program ends, Node.js will return that exit code.

\n

A program will gracefully exit when all the processing is done.

\n

Many times with Node.js we start servers, like this HTTP server:

\n

JS

\n

const express = require('express')

\n

const app = express()

\n

app.get('/', (req, res) => {

\n

res.send('Hi!')

\n

})

\n

app.listen(3000, () => console.log('Server ready'))

\n
\n

Express is a framework that uses the http module under the hood, app.listen() returns an instance of http. You would use https.createServer if you needed to serve your app using HTTPS, as app.listen only uses the http module.

\n
\n

This program is never going to end. If you call process.exit(), any currently pending or running request is going to be aborted. This is not nice.

\n

In this case you need to send the command a SIGTERM signal, and handle that with the process signal handler:

\n
\n

Note: process does not require a \"require\", it's automatically available.

\n
\n

JS

\n

const express = require('express')

\n

const app = express()

\n

app.get('/', (req, res) => {

\n

res.send('Hi!')

\n

})

\n

const server = app.listen(3000, () => console.log('Server ready'))

\n

process.on('SIGTERM', () => {

\n

server.close(() => {

\n

console.log('Process terminated')

\n

})

\n

})

\n
\n

What are signals? Signals are a POSIX intercommunication system: a notification sent to a process in order to notify it of an event that occurred.

\n
\n

SIGKILL is the signal that tells a process to immediately terminate, and would ideally act like process.exit().

\n

SIGTERM is the signal that tells a process to gracefully terminate. It is the signal that's sent from process managers like upstart or supervisord and many others.

\n

You can send this signal from inside the program, in another function:

\n

JS

\n

process.kill(process.pid, 'SIGTERM')

\n

Or from another Node.js running program, or any other app running in your system that knows the PID of the process you want to terminate.

"},{"url":"/docs/docs/html-spec/","relativePath":"docs/docs/html-spec.md","relativeDir":"docs/docs","base":"html-spec.md","name":"html-spec","frontmatter":{"title":"HTML SPEC","weight":0,"excerpt":"HTML SPEC","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

HTML SPEC

\n

File an issue about the selected text

\n

\"WHATWG\"

\n

Living Standard — Last Updated 29 October 2021

\n
\n

Table of contents

\n
    \n
  1. 1 Introduction
    2. \n
  2. 2 Common infrastructure
    3. \n
  3. 3 Semantics, structure, and APIs of HTML documents
    4. \n
  4. 4 The elements of HTML
    5. \n
  5. 5 Microdata
    6. \n
  6. 6 User interaction
    7. \n
  7. 7 Loading web pages
    8. \n
  8. 8 Web application APIs
    9. \n
  9. 9 Communication
    10. \n
  10. 10 Web workers
    11. \n
  11. 11 Worklets
    12. \n
  12. 12 Web storage
    13. \n
  13. 13 The HTML syntax
    14. \n
  14. 14 The XML syntax
    15. \n
  15. 15 Rendering
    16. \n
  16. 16 Obsolete features
    17. \n
  17. 17 IANA considerations
    18. \n
  18. Index
    19. \n
  19. References
    20. \n
  20. Acknowledgments
    21. \n
  21. Intellectual property rights
    22. \n
\n

Full table of contents

\n
    \n
  1. \n

    1 Introduction

    \n
      \n
    1. 1.1 Where does this specification fit?
      2. \n
    2. 1.2 Is this HTML5?
      3. \n
    3. 1.3 Background
      4. \n
    4. 1.4 Audience
      5. \n
    5. 1.5 Scope
      6. \n
    6. 1.6 History
      7. \n
    7. \n

      1.7 Design notes

      \n
        \n
      1. 1.7.1 Serializability of script execution
        2. \n
      2. 1.7.2 Compliance with other specifications
        3. \n
      3. 1.7.3 Extensibility
        4. \n
      \n
      8. \n
    8. 1.8 HTML vs XML syntax
      9. \n
    9. \n

      1.9 Structure of this specification

      \n
        \n
      1. 1.9.1 How to read this specification
        2. \n
      2. 1.9.2 Typographic conventions
        3. \n
      \n
      10. \n
    10. 1.10 A quick introduction to HTML
      11. \n
    11. 1.10.1 Writing secure applications with HTML
      12. \n
    12. 1.10.2 Common pitfalls to avoid when using the scripting APIs
      13. \n
    13. 1.10.3 How to catch mistakes when writing HTML: validators and conformance checkers
      14. \n
    14. 1.11 Conformance requirements for authors
      15. \n
    15. 1.11.1 Presentational markup
      16. \n
    16. 1.11.2 Syntax errors
      17. \n
    17. 1.11.3 Restrictions on content models and on attribute values
      18. \n
    18. 1.12 Suggested reading
      19. \n
    \n
    2. \n
  2. \n

    2 Common infrastructure

    \n
      \n
    1. \n

      2.1 Terminology

      \n
        \n
      1. 2.1.1 Parallelism
        2. \n
      2. 2.1.2 Resources
        3. \n
      3. 2.1.3 XML compatibility
        4. \n
      4. 2.1.4 DOM trees
        5. \n
      5. 2.1.5 Scripting
        6. \n
      6. 2.1.6 Plugins
        7. \n
      7. 2.1.7 Character encodings
        8. \n
      8. 2.1.8 Conformance classes
        9. \n
      9. 2.1.9 Dependencies
        10. \n
      10. 2.1.10 Extensibility
        11. \n
      11. 2.1.11 Interactions with XPath and XSLT
        12. \n
      \n
      2. \n
    2. 2.2 Policy-controlled features
      3. \n
    3. \n

      2.3 Common microsyntaxes

      \n
        \n
      1. 2.3.1 Common parser idioms
        2. \n
      2. 2.3.2 Boolean attributes
        3. \n
      3. 2.3.3 Keywords and enumerated attributes
        4. \n
      4. \n

        2.3.4 Numbers

        \n
          \n
        1. 2.3.4.1 Signed integers
          2. \n
        2. 2.3.4.2 Non-negative integers
          3. \n
        3. 2.3.4.3 Floating-point numbers
          4. \n
        4. 2.3.4.4 Percentages and lengths
          5. \n
        5. 2.3.4.5 Nonzero percentages and lengths
          6. \n
        6. 2.3.4.6 Lists of floating-point numbers
          7. \n
        7. 2.3.4.7 Lists of dimensions
          8. \n
        \n
        5. \n
      5. \n

        2.3.5 Dates and times

        \n
          \n
        1. 2.3.5.1 Months
          2. \n
        2. 2.3.5.2 Dates
          3. \n
        3. 2.3.5.3 Yearless dates
          4. \n
        4. 2.3.5.4 Times
          5. \n
        5. 2.3.5.5 Local dates and times
          6. \n
        6. 2.3.5.6 Time zones
          7. \n
        7. 2.3.5.7 Global dates and times
          8. \n
        8. 2.3.5.8 Weeks
          9. \n
        9. 2.3.5.9 Durations
          10. \n
        10. 2.3.5.10 Vaguer moments in time
          11. \n
        \n
        6. \n
      6. 2.3.6 Colors
        7. \n
      7. 2.3.7 Space-separated tokens
        8. \n
      8. 2.3.8 Comma-separated tokens
        9. \n
      9. 2.3.9 References
        10. \n
      10. 2.3.10 Media queries
        11. \n
      \n
      4. \n
    4. \n

      2.4 URLs

      \n
        \n
      1. 2.4.1 Terminology
        2. \n
      2. 2.4.2 Parsing URLs
        3. \n
      3. 2.4.3 Dynamic changes to base URLs
        4. \n
      \n
      5. \n
    5. \n

      2.5 Fetching resources

      \n
        \n
      1. 2.5.1 Terminology
        2. \n
      2. 2.5.2 Determining the type of a resource
        3. \n
      3. 2.5.3 Extracting character encodings from meta elements
        4. \n
      4. 2.5.4 CORS settings attributes
        5. \n
      5. 2.5.5 Referrer policy attributes
        6. \n
      6. 2.5.6 Nonce attributes
        7. \n
      7. 2.5.7 Lazy loading attributes
        8. \n
      \n
      6. \n
    6. \n

      2.6 Common DOM interfaces

      \n
        \n
      1. 2.6.1 Reflecting content attributes in IDL attributes
        2. \n
      2. \n

        2.6.2 Collections

        \n
          \n
        1. \n

          2.6.2.1 The HTMLAllCollection interface

          \n
            \n
          1. 2.6.2.1.1 [[Call]] ( thisArgument, argumentsList )
            2. \n
          \n
          2. \n
        2. 2.6.2.2 The HTMLFormControlsCollection interface
          3. \n
        3. 2.6.2.3 The HTMLOptionsCollection interface
          4. \n
        \n
        3. \n
      3. 2.6.3 The DOMStringList interface
        4. \n
      \n
      7. \n
    7. \n

      2.7 Safe passing of structured data

      \n
        \n
      1. 2.7.1 Serializable objects
        2. \n
      2. 2.7.2 Transferable objects
        3. \n
      3. 2.7.3 StructuredSerializeInternal ( value, forStorage [ , memory ] )
        4. \n
      4. 2.7.4 StructuredSerialize ( value )
        5. \n
      5. 2.7.5 StructuredSerializeForStorage ( value )
        6. \n
      6. 2.7.6 StructuredDeserialize ( serialized, targetRealm [ , memory ] )
        7. \n
      7. 2.7.7 StructuredSerializeWithTransfer ( value, transferList )
        8. \n
      8. 2.7.8 StructuredDeserializeWithTransfer ( serializeWithTransferResult, targetRealm )
        9. \n
      9. 2.7.9 Performing serialization and transferring from other specifications
        10. \n
      10. 2.7.10 Structured cloning API
        11. \n
      \n
      8. \n
    \n
    3. \n
  3. \n

    3 Semantics, structure, and APIs of HTML documents

    \n
      \n
    1. \n

      3.1 Documents

      \n
        \n
      1. 3.1.1 The Document object
        2. \n
      2. 3.1.2 The DocumentOrShadowRoot interface
        3. \n
      3. 3.1.3 Resource metadata management
        4. \n
      4. 3.1.4 Reporting document loading status
        5. \n
      5. 3.1.5 DOM tree accessors
        6. \n
      \n
      2. \n
    2. \n

      3.2 Elements

      \n
        \n
      1. 3.2.1 Semantics
        2. \n
      2. 3.2.2 Elements in the DOM
        3. \n
      3. 3.2.3 HTML element constructors
        4. \n
      4. \n

        3.2.4 Element definitions

        \n
          \n
        1. 3.2.4.1 Attributes
          2. \n
        \n
        5. \n
      5. \n

        3.2.5 Content models

        \n
          \n
        1. 3.2.5.1 The \"nothing\" content model
          2. \n
        2. \n

          3.2.5.2 Kinds of content

          \n
            \n
          1. 3.2.5.2.1 Metadata content
            2. \n
          2. 3.2.5.2.2 Flow content
            3. \n
          3. 3.2.5.2.3 Sectioning content
            4. \n
          4. 3.2.5.2.4 Heading content
            5. \n
          5. 3.2.5.2.5 Phrasing content
            6. \n
          6. 3.2.5.2.6 Embedded content
            7. \n
          7. 3.2.5.2.7 Interactive content
            8. \n
          8. 3.2.5.2.8 Palpable content
            9. \n
          9. 3.2.5.2.9 Script-supporting elements
            10. \n
          \n
          3. \n
        3. 3.2.5.3 Transparent content models
          4. \n
        4. 3.2.5.4 Paragraphs
          5. \n
        \n
        6. \n
      6. \n

        3.2.6 Global attributes

        \n
          \n
        1. 3.2.6.1 The title attribute
          2. \n
        2. 3.2.6.2 The lang and xml:lang attributes
          3. \n
        3. 3.2.6.3 The translate attribute
          4. \n
        4. 3.2.6.4 The dir attribute
          5. \n
        5. 3.2.6.5 The style attribute
          6. \n
        6. 3.2.6.6 Embedding custom non-visible data with the data-* attributes
          7. \n
        \n
        7. \n
      7. 3.2.7 The innerText and outerText properties
        8. \n
      8. \n

        3.2.8 Requirements relating to the bidirectional algorithm

        \n
          \n
        1. 3.2.8.1 Authoring conformance criteria for bidirectional-algorithm formatting characters
          2. \n
        2. 3.2.8.2 User agent conformance criteria
          3. \n
        \n
        9. \n
      9. 3.2.9 Requirements related to ARIA and to platform accessibility APIs
        10. \n
      \n
      3. \n
    \n
    4. \n
  4. \n

    4 The elements of HTML

    \n
      \n
    1. \n

      4.1 The document element

      \n
        \n
      1. 4.1.1 The html element
        2. \n
      \n
      2. \n
    2. \n

      4.2 Document metadata

      \n
        \n
      1. 4.2.1 The head element
        2. \n
      2. 4.2.2 The title element
        3. \n
      3. 4.2.3 The base element
        4. \n
      4. \n

        4.2.4 The link element

        \n
          \n
        1. 4.2.4.1 Processing the media attribute
          2. \n
        2. 4.2.4.2 Processing the type attribute
          3. \n
        3. 4.2.4.3 Fetching and processing a resource from a link element
          4. \n
        4. 4.2.4.4 Processing `Link` headers
          5. \n
        5. 4.2.4.5 Providing users with a means to follow hyperlinks created using the link element
          6. \n
        \n
        5. \n
      5. \n

        4.2.5 The meta element

        \n
          \n
        1. 4.2.5.1 Standard metadata names
          2. \n
        2. 4.2.5.2 Other metadata names
          3. \n
        3. 4.2.5.3 Pragma directives
          4. \n
        4. 4.2.5.4 Specifying the document's character encoding
          5. \n
        \n
        6. \n
      6. 4.2.6 The style element
        7. \n
      7. 4.2.7 Interactions of styling and scripting
        8. \n
      \n
      3. \n
    3. \n

      4.3 Sections

      \n
        \n
      1. 4.3.1 The body element
        2. \n
      2. 4.3.2 The article element
        3. \n
      3. 4.3.3 The section element
        4. \n
      4. 4.3.4 The nav element
        5. \n
      5. 4.3.5 The aside element
        6. \n
      6. 4.3.6 The h1, h2, h3, h4, h5, and h6 elements
        7. \n
      7. 4.3.7 The hgroup element
        8. \n
      8. 4.3.8 The header element
        9. \n
      9. 4.3.9 The footer element
        10. \n
      10. 4.3.10 The address element
        11. \n
      11. 4.3.11 Headings and sections
        12. \n
      12. 4.3.11.1 Creating an outline
        13. \n
      13. 4.3.11.2 Sample outlines
        14. \n
      14. 4.3.11.3 Exposing outlines to users
        15. \n
      15. 4.3.12 Usage summary
        16. \n
      16. 4.3.12.1 Article or section?
        17. \n
      \n
      4. \n
    4. \n

      4.4 Grouping content

      \n
        \n
      1. 4.4.1 The p element
        2. \n
      2. 4.4.2 The hr element
        3. \n
      3. 4.4.3 The pre element
        4. \n
      4. 4.4.4 The blockquote element
        5. \n
      5. 4.4.5 The ol element
        6. \n
      6. 4.4.6 The ul element
        7. \n
      7. 4.4.7 The menu element
        8. \n
      8. 4.4.8 The li element
        9. \n
      9. 4.4.9 The dl element
        10. \n
      10. 4.4.10 The dt element
        11. \n
      11. 4.4.11 The dd element
        12. \n
      12. 4.4.12 The figure element
        13. \n
      13. 4.4.13 The figcaption element
        14. \n
      14. 4.4.14 The main element
        15. \n
      15. 4.4.15 The div element
        16. \n
      \n
      5. \n
    5. \n

      4.5 Text-level semantics

      \n
        \n
      1. 4.5.1 The a element
        2. \n
      2. 4.5.2 The em element
        3. \n
      3. 4.5.3 The strong element
        4. \n
      4. 4.5.4 The small element
        5. \n
      5. 4.5.5 The s element
        6. \n
      6. 4.5.6 The cite element
        7. \n
      7. 4.5.7 The q element
        8. \n
      8. 4.5.8 The dfn element
        9. \n
      9. 4.5.9 The abbr element
        10. \n
      10. 4.5.10 The ruby element
        11. \n
      11. 4.5.11 The rt element
        12. \n
      12. 4.5.12 The rp element
        13. \n
      13. 4.5.13 The data element
        14. \n
      14. 4.5.14 The time element
        15. \n
      15. 4.5.15 The code element
        16. \n
      16. 4.5.16 The var element
        17. \n
      17. 4.5.17 The samp element
        18. \n
      18. 4.5.18 The kbd element
        19. \n
      19. 4.5.19 The sub and sup elements
        20. \n
      20. 4.5.20 The i element
        21. \n
      21. 4.5.21 The b element
        22. \n
      22. 4.5.22 The u element
        23. \n
      23. 4.5.23 The mark element
        24. \n
      24. 4.5.24 The bdi element
        25. \n
      25. 4.5.25 The bdo element
        26. \n
      26. 4.5.26 The span element
        27. \n
      27. 4.5.27 The br element
        28. \n
      28. 4.5.28 The wbr element
        29. \n
      29. 4.5.29 Usage summary
        30. \n
      \n
      6. \n
    6. \n

      4.6 Links

      \n
        \n
      1. 4.6.1 Introduction
        2. \n
      2. 4.6.2 Links created by a and area elements
        3. \n
      3. 4.6.3 API for a and area elements
        4. \n
      4. 4.6.4 Following hyperlinks
        5. \n
      5. \n

        4.6.5 Downloading resources

        \n
          \n
        1. 4.6.5.1 Hyperlink auditing
          2. \n
        \n
        6. \n
      6. \n

        4.6.6 Link types

        \n
          \n
        1. 4.6.6.1 Link type \"alternate\"
          2. \n
        2. 4.6.6.2 Link type \"author\"
          3. \n
        3. 4.6.6.3 Link type \"bookmark\"
          4. \n
        4. 4.6.6.4 Link type \"canonical\"
          5. \n
        5. 4.6.6.5 Link type \"dns-prefetch\"
          6. \n
        6. 4.6.6.6 Link type \"external\"
          7. \n
        7. 4.6.6.7 Link type \"help\"
          8. \n
        8. 4.6.6.8 Link type \"icon\"
          9. \n
        9. 4.6.6.9 Link type \"license\"
          10. \n
        10. 4.6.6.10 Link type \"manifest\"
          11. \n
        11. 4.6.6.11 Link type \"modulepreload\"
          12. \n
        12. 4.6.6.12 Link type \"nofollow\"
          13. \n
        13. 4.6.6.13 Link type \"noopener\"
          14. \n
        14. 4.6.6.14 Link type \"noreferrer\"
          15. \n
        15. 4.6.6.15 Link type \"opener\"
          16. \n
        16. 4.6.6.16 Link type \"pingback\"
          17. \n
        17. 4.6.6.17 Link type \"preconnect\"
          18. \n
        18. 4.6.6.18 Link type \"prefetch\"
          19. \n
        19. 4.6.6.19 Link type \"preload\"
          20. \n
        20. 4.6.6.20 Link type \"prerender\"
          21. \n
        21. 4.6.6.21 Link type \"search\"
          22. \n
        22. 4.6.6.22 Link type \"stylesheet\"
          23. \n
        23. 4.6.6.23 Link type \"tag\"
          24. \n
        24. 4.6.6.24 Sequential link types
          25. \n
        25. 4.6.6.24.1 Link type \"next\"
          26. \n
        26. 4.6.6.24.2 Link type \"prev\"
          27. \n
        27. 4.6.6.25 Other link types
          28. \n
        \n
        7. \n
      \n
      7. \n
    7. \n

      4.7 Edits

      \n
        \n
      1. 4.7.1 The ins element
        2. \n
      2. 4.7.2 The del element
        3. \n
      3. 4.7.3 Attributes common to ins and del elements
        4. \n
      4. 4.7.4 Edits and paragraphs
        5. \n
      5. 4.7.5 Edits and lists
        6. \n
      6. 4.7.6 Edits and tables
        7. \n
      \n
      8. \n
    8. \n

      4.8 Embedded content

      \n
        \n
      1. 4.8.1 The picture element
        2. \n
      2. 4.8.2 The source element
        3. \n
      3. 4.8.3 The img element
        4. \n
      4. \n

        4.8.4 Images

        \n
          \n
        1. \n

          4.8.4.1 Introduction

          \n
            \n
          1. 4.8.4.1.1 Adaptive images
            2. \n
          \n
          2. \n
        2. \n

          4.8.4.2 Attributes common to source, img, and link elements

          \n
            \n
          1. 4.8.4.2.1 Srcset attributes
            2. \n
          2. 4.8.4.2.2 Sizes attributes
            3. \n
          \n
          3. \n
        3. \n

          4.8.4.3 Processing model

          \n
            \n
          1. 4.8.4.3.1 When to obtain images
            2. \n
          2. 4.8.4.3.2 Reacting to DOM mutations
            3. \n
          3. 4.8.4.3.3 The list of available images
            4. \n
          4. 4.8.4.3.4 Decoding images
            5. \n
          5. 4.8.4.3.5 Updating the image data
            6. \n
          6. 4.8.4.3.6 Preparing an image for presentation
            7. \n
          7. 4.8.4.3.7 Selecting an image source
            8. \n
          8. 4.8.4.3.8 Updating the source set
            9. \n
          9. 4.8.4.3.9 Parsing a srcset attribute
            10. \n
          10. 4.8.4.3.10 Parsing a sizes attribute
            11. \n
          11. 4.8.4.3.11 Normalizing the source densities
            12. \n
          12. 4.8.4.3.12 Reacting to environment changes
            13. \n
          \n
          4. \n
        4. \n

          4.8.4.4 Requirements for providing text to act as an alternative for images

          \n
            \n
          1. 4.8.4.4.1 General guidelines
            2. \n
          2. 4.8.4.4.2 A link or button containing nothing but the image
            3. \n
          3. 4.8.4.4.3 A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
            4. \n
          4. 4.8.4.4.4 A short phrase or label with an alternative graphical representation: icons, logos
            5. \n
          5. 4.8.4.4.5 Text that has been rendered to a graphic for typographical effect
            6. \n
          6. 4.8.4.4.6 A graphical representation of some of the surrounding text
            7. \n
          7. 4.8.4.4.7 Ancillary images
            8. \n
          8. 4.8.4.4.8 A purely decorative image that doesn't add any information
            9. \n
          9. 4.8.4.4.9 A group of images that form a single larger picture with no links
            10. \n
          10. 4.8.4.4.10 A group of images that form a single larger picture with links
            11. \n
          11. 4.8.4.4.11 A key part of the content
            12. \n
          12. 4.8.4.4.12 An image not intended for the user
            13. \n
          13. 4.8.4.4.13 An image in an email or private document intended for a specific person who is known to be able to view images
            14. \n
          14. 4.8.4.4.14 Guidance for markup generators
            15. \n
          15. 4.8.4.4.15 Guidance for conformance checkers
            16. \n
          \n
          5. \n
        \n
        5. \n
      5. 4.8.5 The iframe element
        6. \n
      6. 4.8.6 The embed element
        7. \n
      7. 4.8.7 The object element
        8. \n
      8. 4.8.8 The param element
        9. \n
      9. 4.8.9 The video element
        10. \n
      10. 4.8.10 The audio element
        11. \n
      11. 4.8.11 The track element
        12. \n
      12. 4.8.12 Media elements
        13. \n
      13. 4.8.12.1 Error codes
        14. \n
      14. 4.8.12.2 Location of the media resource
        15. \n
      15. 4.8.12.3 MIME types
        16. \n
      16. 4.8.12.4 Network states
        17. \n
      17. 4.8.12.5 Loading the media resource
        18. \n
      18. 4.8.12.6 Offsets into the media resource
        19. \n
      19. 4.8.12.7 Ready states
        20. \n
      20. 4.8.12.8 Playing the media resource
        21. \n
      21. 4.8.12.9 Seeking
        22. \n
      22. 4.8.12.10 Media resources with multiple media tracks
        23. \n
      23. 4.8.12.10.1 AudioTrackList and VideoTrackList objects
        24. \n
      24. 4.8.12.10.2 Selecting specific audio and video tracks declaratively
        25. \n
      25. 4.8.12.11 Timed text tracks
        26. \n
      26. 4.8.12.11.1 Text track model
        27. \n
      27. 4.8.12.11.2 Sourcing in-band text tracks
        28. \n
      28. 4.8.12.11.3 Sourcing out-of-band text tracks
        29. \n
      29. 4.8.12.11.4 Guidelines for exposing cues in various formats as text track cues
        30. \n
      30. 4.8.12.11.5 Text track API
        31. \n
      31. 4.8.12.11.6 Event handlers for objects of the text track APIs
        32. \n
      32. 4.8.12.11.7 Best practices for metadata text tracks
        33. \n
      33. 4.8.12.12 Identifying a track kind through a URL
        34. \n
      34. 4.8.12.13 User interface
        35. \n
      35. 4.8.12.14 Time ranges
        36. \n
      36. 4.8.12.15 The TrackEvent interface
        37. \n
      37. 4.8.12.16 Events summary
        38. \n
      38. 4.8.12.17 Security and privacy considerations
        39. \n
      39. 4.8.12.18 Best practices for authors using media elements
        40. \n
      40. 4.8.12.19 Best practices for implementers of media elements
        41. \n
      41. 4.8.13 The map element
        42. \n
      42. 4.8.14 The area element
        43. \n
      43. 4.8.15 Image maps
        44. \n
      44. 4.8.15.1 Authoring
        45. \n
      45. 4.8.15.2 Processing model
        46. \n
      46. 4.8.16 MathML
        47. \n
      47. 4.8.17 SVG
        48. \n
      48. 4.8.18 Dimension attributes
        49. \n
      \n
      9. \n
    9. \n

      4.9 Tabular data

      \n
        \n
      1. \n

        4.9.1 The table element

        \n
          \n
        1. 4.9.1.1 Techniques for describing tables
          2. \n
        2. 4.9.1.2 Techniques for table design
          3. \n
        \n
        2. \n
      2. 4.9.2 The caption element
        3. \n
      3. 4.9.3 The colgroup element
        4. \n
      4. 4.9.4 The col element
        5. \n
      5. 4.9.5 The tbody element
        6. \n
      6. 4.9.6 The thead element
        7. \n
      7. 4.9.7 The tfoot element
        8. \n
      8. 4.9.8 The tr element
        9. \n
      9. 4.9.9 The td element
        10. \n
      10. 4.9.10 The th element
        11. \n
      11. 4.9.11 Attributes common to td and th elements
        12. \n
      12. 4.9.12 Processing model
        13. \n
      13. 4.9.12.1 Forming a table
        14. \n
      14. 4.9.12.2 Forming relationships between data cells and header cells
        15. \n
      15. 4.9.13 Examples
        16. \n
      \n
      10. \n
    10. 4.10 Forms
      11. \n
    11. \n

      4.10.1 Introduction

      \n
        \n
      1. 4.10.1.1 Writing a form's user interface
        2. \n
      2. 4.10.1.2 Implementing the server-side processing for a form
        3. \n
      3. 4.10.1.3 Configuring a form to communicate with a server
        4. \n
      4. 4.10.1.4 Client-side form validation
        5. \n
      5. 4.10.1.5 Enabling client-side automatic filling of form controls
        6. \n
      6. 4.10.1.6 Improving the user experience on mobile devices
        7. \n
      7. 4.10.1.7 The difference between the field type, the autofill field name, and the input modality
        8. \n
      8. 4.10.1.8 Date, time, and number formats
        9. \n
      \n
      12. \n
    12. 4.10.2 Categories
      13. \n
    13. 4.10.3 The form element
      14. \n
    14. 4.10.4 The label element
      15. \n
    15. \n

      4.10.5 The input element

      \n
        \n
      1. \n

        4.10.5.1 States of the type attribute

        \n
          \n
        1. 4.10.5.1.1 Hidden state (type=hidden)
          2. \n
        2. 4.10.5.1.2 Text (type=text) state and Search state (type=search)
          3. \n
        3. 4.10.5.1.3 Telephone state (type=tel)
          4. \n
        4. 4.10.5.1.4 URL state (type=url)
          5. \n
        5. 4.10.5.1.5 Email state (type=email)
          6. \n
        6. 4.10.5.1.6 Password state (type=password)
          7. \n
        7. 4.10.5.1.7 Date state (type=date)
          8. \n
        8. 4.10.5.1.8 Month state (type=month)
          9. \n
        9. 4.10.5.1.9 Week state (type=week)
          10. \n
        10. 4.10.5.1.10 Time state (type=time)
          11. \n
        11. 4.10.5.1.11 Local Date and Time state (type=datetime-local)
          12. \n
        12. 4.10.5.1.12 Number state (type=number)
          13. \n
        13. 4.10.5.1.13 Range state (type=range)
          14. \n
        14. 4.10.5.1.14 Color state (type=color)
          15. \n
        15. 4.10.5.1.15 Checkbox state (type=checkbox)
          16. \n
        16. 4.10.5.1.16 Radio Button state (type=radio)
          17. \n
        17. 4.10.5.1.17 File Upload state (type=file)
          18. \n
        18. 4.10.5.1.18 Submit Button state (type=submit)
          19. \n
        19. 4.10.5.1.19 Image Button state (type=image)
          20. \n
        20. 4.10.5.1.20 Reset Button state (type=reset)
          21. \n
        21. 4.10.5.1.21 Button state (type=button)
          22. \n
        \n
        2. \n
      2. 4.10.5.2 Implementation notes regarding localization of form controls
        3. \n
      3. \n

        4.10.5.3 Common input element attributes

        \n
          \n
        1. 4.10.5.3.1 The maxlength and minlength attributes
          2. \n
        2. 4.10.5.3.2 The size attribute
          3. \n
        3. 4.10.5.3.3 The readonly attribute
          4. \n
        4. 4.10.5.3.4 The required attribute
          5. \n
        5. 4.10.5.3.5 The multiple attribute
          6. \n
        6. 4.10.5.3.6 The pattern attribute
          7. \n
        7. 4.10.5.3.7 The min and max attributes
          8. \n
        8. 4.10.5.3.8 The step attribute
          9. \n
        9. 4.10.5.3.9 The list attribute
          10. \n
        10. 4.10.5.3.10 The placeholder attribute
          11. \n
        \n
        4. \n
      4. 4.10.5.4 Common input element APIs
        5. \n
      5. 4.10.5.5 Common event behaviors
        6. \n
      \n
      16. \n
    16. 4.10.6 The button element
      17. \n
    17. 4.10.7 The select element
      18. \n
    18. 4.10.8 The datalist element
      19. \n
    19. 4.10.9 The optgroup element
      20. \n
    20. 4.10.10 The option element
      21. \n
    21. 4.10.11 The textarea element
      22. \n
    22. 4.10.12 The output element
      23. \n
    23. 4.10.13 The progress element
      24. \n
    24. 4.10.14 The meter element
      25. \n
    25. 4.10.15 The fieldset element
      26. \n
    26. 4.10.16 The legend element
      27. \n
    27. 4.10.17 Form control infrastructure
      28. \n
    28. 4.10.17.1 A form control's value
      29. \n
    29. 4.10.17.2 Mutability
      30. \n
    30. 4.10.17.3 Association of controls and forms
      31. \n
    31. 4.10.18 Attributes common to form controls
      32. \n
    32. 4.10.18.1 Naming form controls: the name attribute
      33. \n
    33. 4.10.18.2 Submitting element directionality: the dirname attribute
      34. \n
    34. 4.10.18.3 Limiting user input length: the maxlength attribute
      35. \n
    35. 4.10.18.4 Setting minimum input length requirements: the minlength attribute
      36. \n
    36. 4.10.18.5 Enabling and disabling form controls: the disabled attribute
      37. \n
    37. 4.10.18.6 Form submission attributes
      38. \n
    38. \n

      4.10.18.7 Autofill

      \n
        \n
      1. 4.10.18.7.1 Autofilling form controls: the autocomplete attribute
        2. \n
      2. 4.10.18.7.2 Processing model
        3. \n
      \n
      39. \n
    39. 4.10.19 APIs for the text control selections
      40. \n
    40. 4.10.20 Constraints
      41. \n
    41. 4.10.20.1 Definitions
      42. \n
    42. 4.10.20.2 Constraint validation
      43. \n
    43. 4.10.20.3 The constraint validation API
      44. \n
    44. 4.10.20.4 Security
      45. \n
    45. 4.10.21 Form submission
      46. \n
    46. 4.10.21.1 Introduction
      47. \n
    47. 4.10.21.2 Implicit submission
      48. \n
    48. 4.10.21.3 Form submission algorithm
      49. \n
    49. 4.10.21.4 Constructing the entry list
      50. \n
    50. 4.10.21.5 Selecting a form submission encoding
      51. \n
    51. 4.10.21.6 Converting an entry list to a list of name-value pairs
      52. \n
    52. 4.10.21.7 URL-encoded form data
      53. \n
    53. 4.10.21.8 Multipart form data
      54. \n
    54. 4.10.21.9 Plain text form data
      55. \n
    55. 4.10.21.10 The SubmitEvent interface
      56. \n
    56. 4.10.21.11 The FormDataEvent interface
      57. \n
    57. 4.10.22 Resetting a form
      58. \n
    58. 4.11 Interactive elements
      59. \n
    59. 4.11.1 The details element
      60. \n
    60. 4.11.2 The summary element
      61. \n
    61. \n

      4.11.3 Commands

      \n
        \n
      1. 4.11.3.1 Facets
        2. \n
      2. 4.11.3.2 Using the a element to define a command
        3. \n
      3. 4.11.3.3 Using the button element to define a command
        4. \n
      4. 4.11.3.4 Using the input element to define a command
        5. \n
      5. 4.11.3.5 Using the option element to define a command
        6. \n
      6. 4.11.3.6 Using the accesskey attribute on a legend element to define a command
        7. \n
      7. 4.11.3.7 Using the accesskey attribute to define a command on other elements
        8. \n
      \n
      62. \n
    62. 4.11.4 The dialog element
      63. \n
    63. 4.12 Scripting
      64. \n
    64. \n

      4.12.1 The script element

      \n
        \n
      1. 4.12.1.1 Processing model
        2. \n
      2. 4.12.1.2 Scripting languages
        3. \n
      3. 4.12.1.3 Restrictions for contents of script elements
        4. \n
      4. 4.12.1.4 Inline documentation for external scripts
        5. \n
      5. 4.12.1.5 Interaction of script elements and XSLT
        6. \n
      \n
      65. \n
    65. 4.12.2 The noscript element
      66. \n
    66. \n

      4.12.3 The template element

      \n
        \n
      1. 4.12.3.1 Interaction of template elements with XSLT and XPath
        2. \n
      \n
      67. \n
    67. 4.12.4 The slot element
      68. \n
    68. \n

      4.12.5 The canvas element

      \n
        \n
      1. \n

        4.12.5.1 The 2D rendering context

        \n
          \n
        1. 4.12.5.1.1 Implementation notes
          2. \n
        2. 4.12.5.1.2 The canvas state
          3. \n
        3. 4.12.5.1.3 Line styles
          4. \n
        4. 4.12.5.1.4 Text styles
          5. \n
        5. 4.12.5.1.5 Building paths
          6. \n
        6. 4.12.5.1.6 Path2D objects
          7. \n
        7. 4.12.5.1.7 Transformations
          8. \n
        8. 4.12.5.1.8 Image sources for 2D rendering contexts
          9. \n
        9. 4.12.5.1.9 Fill and stroke styles
          10. \n
        10. 4.12.5.1.10 Drawing rectangles to the bitmap
          11. \n
        11. 4.12.5.1.11 Drawing text to the bitmap
          12. \n
        12. 4.12.5.1.12 Drawing paths to the canvas
          13. \n
        13. 4.12.5.1.13 Drawing focus rings and scrolling paths into view
          14. \n
        14. 4.12.5.1.14 Drawing images
          15. \n
        15. 4.12.5.1.15 Pixel manipulation
          16. \n
        16. 4.12.5.1.16 Compositing
          17. \n
        17. 4.12.5.1.17 Image smoothing
          18. \n
        18. 4.12.5.1.18 Shadows
          19. \n
        19. 4.12.5.1.19 Filters
          20. \n
        20. 4.12.5.1.20 Working with externally-defined SVG filters
          21. \n
        21. 4.12.5.1.21 Drawing model
          22. \n
        22. 4.12.5.1.22 Best practices
          23. \n
        23. 4.12.5.1.23 Examples
          24. \n
        \n
        2. \n
      2. \n

        4.12.5.2 The ImageBitmap rendering context

        \n
          \n
        1. 4.12.5.2.1 Introduction
          2. \n
        2. 4.12.5.2.2 The ImageBitmapRenderingContext interface
          3. \n
        \n
        3. \n
      3. \n

        4.12.5.3 The OffscreenCanvas interface

        \n
          \n
        1. 4.12.5.3.1 The offscreen 2D rendering context
          2. \n
        \n
        4. \n
      4. 4.12.5.4 Color spaces and color space conversion
        5. \n
      5. 4.12.5.5 Serializing bitmaps to a file
        6. \n
      6. 4.12.5.6 Security with canvas elements
        7. \n
      7. 4.12.5.7 Premultiplied alpha and the 2D rendering context
        8. \n
      \n
      69. \n
    69. 4.13 Custom elements
      70. \n
    70. \n

      4.13.1 Introduction

      \n
        \n
      1. 4.13.1.1 Creating an autonomous custom element
        2. \n
      2. 4.13.1.2 Creating a form-associated custom element
        3. \n
      3. 4.13.1.3 Creating a custom element with default accessible roles, states, and properties
        4. \n
      4. 4.13.1.4 Creating a customized built-in element
        5. \n
      5. 4.13.1.5 Drawbacks of autonomous custom elements
        6. \n
      6. 4.13.1.6 Upgrading elements after their creation
        7. \n
      \n
      71. \n
    71. 4.13.2 Requirements for custom element constructors and reactions
      72. \n
    72. 4.13.3 Core concepts
      73. \n
    73. 4.13.4 The CustomElementRegistry interface
      74. \n
    74. 4.13.5 Upgrades
      75. \n
    75. 4.13.6 Custom element reactions
      76. \n
    76. \n

      4.13.7 Element internals

      \n
        \n
      1. 4.13.7.1 The ElementInternals interface
        2. \n
      2. 4.13.7.2 Shadow root access
        3. \n
      3. 4.13.7.3 Form-associated custom elements
        4. \n
      4. 4.13.7.4 Accessibility semantics
        5. \n
      \n
      77. \n
    77. 4.14 Common idioms without dedicated elements
      78. \n
    78. 4.14.1 Breadcrumb navigation
      79. \n
    79. 4.14.2 Tag clouds
      80. \n
    80. 4.14.3 Conversations
      81. \n
    81. 4.14.4 Footnotes
      82. \n
    82. 4.15 Disabled elements
      83. \n
    83. 4.16 Matching HTML elements using selectors and CSS
      84. \n
    84. 4.16.1 Case-sensitivity of the CSS 'attr()' function
      85. \n
    85. 4.16.2 Case-sensitivity of selectors
      86. \n
    86. 4.16.3 Pseudo-classes
      87. \n
    \n
    5. \n
  5. \n

    5 Microdata

    \n
      \n
    1. \n

      5.1 Introduction

      \n
        \n
      1. 5.1.1 Overview
        2. \n
      2. 5.1.2 The basic syntax
        3. \n
      3. 5.1.3 Typed items
        4. \n
      4. 5.1.4 Global identifiers for items
        5. \n
      5. 5.1.5 Selecting names when defining vocabularies
        6. \n
      \n
      2. \n
    2. \n

      5.2 Encoding microdata

      \n
        \n
      1. 5.2.1 The microdata model
        2. \n
      2. 5.2.2 Items
        3. \n
      3. 5.2.3 Names: the itemprop attribute
        4. \n
      4. 5.2.4 Values
        5. \n
      5. 5.2.5 Associating names with items
        6. \n
      6. 5.2.6 Microdata and other namespaces
        7. \n
      \n
      3. \n
    3. \n

      5.3 Sample microdata vocabularies

      \n
        \n
      1. \n

        5.3.1 vCard

        \n
          \n
        1. 5.3.1.1 Conversion to vCard
          2. \n
        2. 5.3.1.2 Examples
          3. \n
        \n
        2. \n
      2. \n

        5.3.2 vEvent

        \n
          \n
        1. 5.3.2.1 Conversion to iCalendar
          2. \n
        2. 5.3.2.2 Examples
          3. \n
        \n
        3. \n
      3. \n

        5.3.3 Licensing works

        \n
          \n
        1. 5.3.3.1 Examples
          2. \n
        \n
        4. \n
      \n
      4. \n
    4. \n

      5.4 Converting HTML to other formats

      \n
        \n
      1. 5.4.1 JSON
        2. \n
      \n
      5. \n
    \n
    6. \n
  6. \n

    6 User interaction

    \n
      \n
    1. 6.1 The hidden attribute
      2. \n
    2. 6.2 Inert subtrees
      3. \n
    3. \n

      6.3 Tracking user activation

      \n
        \n
      1. 6.3.1 Data model
        2. \n
      2. 6.3.2 Processing model
        3. \n
      3. 6.3.3 APIs gated by user activation
        4. \n
      \n
      4. \n
    4. 6.4 Activation behavior of elements
      5. \n
    5. \n

      6.5 Focus

      \n
        \n
      1. 6.5.1 Introduction
        2. \n
      2. 6.5.2 Data model
        3. \n
      3. 6.5.3 The tabindex attribute
        4. \n
      4. 6.5.4 Processing model
        5. \n
      5. 6.5.5 Sequential focus navigation
        6. \n
      6. 6.5.6 Focus management APIs
        7. \n
      7. 6.5.7 The autofocus attribute
        8. \n
      \n
      6. \n
    6. \n

      6.6 Assigning keyboard shortcuts

      \n
        \n
      1. 6.6.1 Introduction
        2. \n
      2. 6.6.2 The accesskey attribute
        3. \n
      3. 6.6.3 Processing model
        4. \n
      \n
      7. \n
    7. \n

      6.7 Editing

      \n
        \n
      1. 6.7.1 Making document regions editable: The contenteditable content attribute
        2. \n
      2. 6.7.2 Making entire documents editable: the designMode getter and setter
        3. \n
      3. 6.7.3 Best practices for in-page editors
        4. \n
      4. 6.7.4 Editing APIs
        5. \n
      5. 6.7.5 Spelling and grammar checking
        6. \n
      6. 6.7.6 Autocapitalization
        7. \n
      7. 6.7.7 Input modalities: the inputmode attribute
        8. \n
      8. 6.7.8 Input modalities: the enterkeyhint attribute
        9. \n
      \n
      8. \n
    8. \n

      6.8 Find-in-page

      \n
        \n
      1. 6.8.1 Introduction
        2. \n
      2. 6.8.2 Interaction with details
        3. \n
      3. 6.8.3 Interaction with selection
        4. \n
      \n
      9. \n
    9. \n

      6.9 Drag and drop

      \n
        \n
      1. 6.9.1 Introduction
        2. \n
      2. 6.9.2 The drag data store
        3. \n
      3. \n

        6.9.3 The DataTransfer interface

        \n
          \n
        1. 6.9.3.1 The DataTransferItemList interface
          2. \n
        2. 6.9.3.2 The DataTransferItem interface
          3. \n
        \n
        4. \n
      4. 6.9.4 The DragEvent interface
        5. \n
      5. 6.9.5 Processing model
        6. \n
      6. 6.9.6 Events summary
        7. \n
      7. 6.9.7 The draggable attribute
        8. \n
      8. 6.9.8 Security risks in the drag-and-drop model
        9. \n
      \n
      10. \n
    \n
    7. \n
  7. \n

    7 Loading web pages

    \n
      \n
    1. \n

      7.1 Browsing contexts

      \n
        \n
      1. 7.1.1 Creating browsing contexts
        2. \n
      2. \n

        7.1.2 Related browsing contexts

        \n
          \n
        1. 7.1.2.1 Navigating related browsing contexts in the DOM
          2. \n
        \n
        3. \n
      3. 7.1.3 Security
        4. \n
      4. 7.1.4 Groupings of browsing contexts
        5. \n
      5. 7.1.5 Browsing context names
        6. \n
      \n
      2. \n
    2. \n

      7.2 Security infrastructure for Window, WindowProxy, and Location objects

      \n
        \n
      1. 7.2.1 Integration with IDL
        2. \n
      2. 7.2.2 Shared internal slot: [[CrossOriginPropertyDescriptorMap]]
        3. \n
      3. \n

        7.2.3 Shared abstract operations

        \n
          \n
        1. 7.2.3.1 CrossOriginProperties ( O )
          2. \n
        2. 7.2.3.2 CrossOriginPropertyFallback ( P )
          3. \n
        3. 7.2.3.3 IsPlatformObjectSameOrigin ( O )
          4. \n
        4. 7.2.3.4 CrossOriginGetOwnPropertyHelper ( O, P )
          5. \n
        5. 7.2.3.5 CrossOriginGet ( O, P, Receiver )
          6. \n
        6. 7.2.3.6 CrossOriginSet ( O, P, V, Receiver )
          7. \n
        7. 7.2.3.7 CrossOriginOwnPropertyKeys ( O )
          8. \n
        \n
        4. \n
      \n
      3. \n
    3. \n

      7.3 The Window object

      \n
        \n
      1. 7.3.1 APIs for creating and navigating browsing contexts by name
        2. \n
      2. 7.3.2 Accessing other browsing contexts
        3. \n
      3. 7.3.3 Named access on the Window object
        4. \n
      4. 7.3.4 Discarding browsing contexts
        5. \n
      5. 7.3.5 Closing browsing contexts
        6. \n
      6. 7.3.6 Browser interface elements
        7. \n
      7. 7.3.7 Script settings for Window objects
        8. \n
      \n
      4. \n
    4. \n

      7.4 The WindowProxy exotic object

      \n
        \n
      1. 7.4.1 [[GetPrototypeOf]] ( )
        2. \n
      2. 7.4.2 [[SetPrototypeOf]] ( V )
        3. \n
      3. 7.4.3 [[IsExtensible]] ( )
        4. \n
      4. 7.4.4 [[PreventExtensions]] ( )
        5. \n
      5. 7.4.5 [[GetOwnProperty]] ( P )
        6. \n
      6. 7.4.6 [[DefineOwnProperty]] ( P, Desc )
        7. \n
      7. 7.4.7 [[Get]] ( P, Receiver )
        8. \n
      8. 7.4.8 [[Set]] ( P, V, Receiver )
        9. \n
      9. 7.4.9 [[Delete]] ( P )
        10. \n
      10. 7.4.10 [[OwnPropertyKeys]] ( )
        11. \n
      \n
      5. \n
    5. \n

      7.5 Origin

      \n
        \n
      1. 7.5.1 Sites
        2. \n
      2. 7.5.2 Relaxing the same-origin restriction
        3. \n
      3. 7.5.3 Origin-keyed agent clusters
        4. \n
      \n
      6. \n
    6. 7.6 Sandboxing
      7. \n
    7. \n

      7.7 Cross-origin opener policies

      \n
        \n
      1. 7.7.1 The headers
        2. \n
      2. 7.7.2 Browsing context group switches due to cross-origin opener policy
        3. \n
      3. 7.7.3 Reporting
        4. \n
      \n
      8. \n
    8. \n

      7.8 Cross-origin embedder policies

      \n
        \n
      1. 7.8.1 The headers
        2. \n
      2. 7.8.2 Embedder policy checks
        3. \n
      \n
      9. \n
    9. 7.9 Policy containers
      10. \n
    10. 7.10 Session history and navigation
      11. \n
    11. 7.10.1 Browsing sessions
      12. \n
    12. 7.10.2 The session history of browsing contexts
      13. \n
    13. 7.10.3 The History interface
      14. \n
    14. 7.10.4 Implementation notes for session history
      15. \n
    15. \n

      7.10.5 The Location interface

      \n
        \n
      1. 7.10.5.1 [[GetPrototypeOf]] ( )
        2. \n
      2. 7.10.5.2 [[SetPrototypeOf]] ( V )
        3. \n
      3. 7.10.5.3 [[IsExtensible]] ( )
        4. \n
      4. 7.10.5.4 [[PreventExtensions]] ( )
        5. \n
      5. 7.10.5.5 [[GetOwnProperty]] ( P )
        6. \n
      6. 7.10.5.6 [[DefineOwnProperty]] ( P, Desc )
        7. \n
      7. 7.10.5.7 [[Get]] ( P, Receiver )
        8. \n
      8. 7.10.5.8 [[Set]] ( P, V, Receiver )
        9. \n
      9. 7.10.5.9 [[Delete]] ( P )
        10. \n
      10. 7.10.5.10 [[OwnPropertyKeys]] ( )
        11. \n
      \n
      16. \n
    16. 7.11 Browsing the web
      17. \n
    17. 7.11.1 Navigating across documents
      18. \n
    18. 7.11.2 Page load processing model for HTML files
      19. \n
    19. 7.11.3 Page load processing model for XML files
      20. \n
    20. 7.11.4 Page load processing model for text files
      21. \n
    21. 7.11.5 Page load processing model for multipart/x-mixed-replace resources
      22. \n
    22. 7.11.6 Page load processing model for media
      23. \n
    23. 7.11.7 Page load processing model for content that uses plugins
      24. \n
    24. 7.11.8 Page load processing model for inline content that doesn't have a DOM
      25. \n
    25. 7.11.9 Navigating to a fragment
      26. \n
    26. 7.11.10 History traversal
      27. \n
    27. 7.11.10.1 Persisted history entry state
      28. \n
    28. 7.11.10.2 The PopStateEvent interface
      29. \n
    29. 7.11.10.3 The HashChangeEvent interface
      30. \n
    30. 7.11.10.4 The PageTransitionEvent interface
      31. \n
    31. 7.11.11 Loading documents
      32. \n
    32. 7.11.12 Unloading documents
      33. \n
    33. 7.11.12.1 The BeforeUnloadEvent interface
      34. \n
    34. 7.11.13 Aborting a document load
      35. \n
    35. 7.11.14 The `X-Frame-Options` header
      36. \n
    \n
    8. \n
  8. \n

    8 Web application APIs

    \n
      \n
    1. \n

      8.1 Scripting

      \n
        \n
      1. 8.1.1 Introduction
        2. \n
      2. \n

        8.1.2 Agents and agent clusters

        \n
          \n
        1. 8.1.2.1 Integration with the JavaScript agent formalism
          2. \n
        2. 8.1.2.2 Integration with the JavaScript agent cluster formalism
          3. \n
        \n
        3. \n
      3. \n

        8.1.3 Realms and their counterparts

        \n
          \n
        1. 8.1.3.1 Environments
          2. \n
        2. 8.1.3.2 Environment settings objects
          3. \n
        3. \n

          8.1.3.3 Realms, settings objects, and global objects

          \n
            \n
          1. 8.1.3.3.1 Entry
            2. \n
          2. 8.1.3.3.2 Incumbent
            3. \n
          3. 8.1.3.3.3 Current
            4. \n
          4. 8.1.3.3.4 Relevant
            5. \n
          \n
          4. \n
        4. 8.1.3.4 Enabling and disabling scripting
          5. \n
        5. 8.1.3.5 Secure contexts
          6. \n
        \n
        4. \n
      4. \n

        8.1.4 Script processing model

        \n
          \n
        1. 8.1.4.1 Scripts
          2. \n
        2. 8.1.4.2 Fetching scripts
          3. \n
        3. 8.1.4.3 Creating scripts
          4. \n
        4. 8.1.4.4 Calling scripts
          5. \n
        5. 8.1.4.5 Killing scripts
          6. \n
        6. 8.1.4.6 Runtime script errors
          7. \n
        7. 8.1.4.7 Unhandled promise rejections
          8. \n
        \n
        5. \n
      5. \n

        8.1.5 JavaScript specification host hooks

        \n
          \n
        1. 8.1.5.1 HostEnsureCanCompileStrings(callerRealm, calleeRealm)
          2. \n
        2. 8.1.5.2 HostPromiseRejectionTracker(promise, operation)
          3. \n
        3. \n

          8.1.5.3 Job-related host hooks

          \n
            \n
          1. 8.1.5.3.1 HostCallJobCallback(callback, V, argumentsList)
            2. \n
          2. 8.1.5.3.2 HostEnqueueFinalizationRegistryCleanupJob(finalizationRegistry)
            3. \n
          3. 8.1.5.3.3 HostEnqueuePromiseJob(job, realm)
            4. \n
          4. 8.1.5.3.4 HostMakeJobCallback(callable)
            5. \n
          \n
          4. \n
        4. \n

          8.1.5.4 Module-related host hooks

          \n
            \n
          1. 8.1.5.4.1 HostGetImportMetaProperties(moduleRecord)
            2. \n
          2. 8.1.5.4.2 HostImportModuleDynamically(referencingScriptOrModule, moduleRequest, promiseCapability)
            3. \n
          3. 8.1.5.4.3 HostResolveImportedModule(referencingScriptOrModule, moduleRequest)
            4. \n
          4. 8.1.5.4.4 HostGetSupportedImportAssertions()
            5. \n
          \n
          5. \n
        \n
        6. \n
      6. \n

        8.1.6 Event loops

        \n
          \n
        1. 8.1.6.1 Definitions
          2. \n
        2. 8.1.6.2 Queuing tasks
          3. \n
        3. 8.1.6.3 Processing model
          4. \n
        4. 8.1.6.4 Generic task sources
          5. \n
        5. 8.1.6.5 Dealing with the event loop from other specifications
          6. \n
        \n
        7. \n
      7. \n

        8.1.7 Events

        \n
          \n
        1. 8.1.7.1 Event handlers
          2. \n
        2. \n

          8.1.7.2 Event handlers on elements, Document objects, and Window objects

          \n
            \n
          1. 8.1.7.2.1 IDL definitions
            2. \n
          \n
          3. \n
        3. 8.1.7.3 Event firing
          4. \n
        \n
        8. \n
      \n
      2. \n
    2. 8.2 The WindowOrWorkerGlobalScope mixin
      3. \n
    3. 8.3 Base64 utility methods
      4. \n
    4. \n

      8.4 Dynamic markup insertion

      \n
        \n
      1. 8.4.1 Opening the input stream
        2. \n
      2. 8.4.2 Closing the input stream
        3. \n
      3. 8.4.3 document.write()
        4. \n
      4. 8.4.4 document.writeln()
        5. \n
      \n
      5. \n
    5. 8.5 DOM parsing
      6. \n
    6. 8.6 Timers
      7. \n
    7. 8.7 Microtask queuing
      8. \n
    8. \n

      8.8 User prompts

      \n
        \n
      1. 8.8.1 Simple dialogs
        2. \n
      2. 8.8.2 Printing
        3. \n
      \n
      9. \n
    9. \n

      8.9 System state and capabilities

      \n
        \n
      1. \n

        8.9.1 The Navigator object

        \n
          \n
        1. 8.9.1.1 Client identification
          2. \n
        2. 8.9.1.2 Language preferences
          3. \n
        3. 8.9.1.3 Browser state
          4. \n
        4. \n

          8.9.1.4 Custom scheme handlers: the registerProtocolHandler() method

          \n
            \n
          1. 8.9.1.4.1 Security and privacy
            2. \n
          \n
          5. \n
        5. 8.9.1.5 Cookies
          6. \n
        6. 8.9.1.6 PDF viewing support
          7. \n
        \n
        2. \n
      \n
      10. \n
    10. 8.10 Images
      11. \n
    11. 8.11 Animation frames
      12. \n
    \n
    9. \n
  9. \n

    9 Communication

    \n
      \n
    1. 9.1 The MessageEvent interface
      2. \n
    2. \n

      9.2 Server-sent events

      \n
        \n
      1. 9.2.1 Introduction
        2. \n
      2. 9.2.2 The EventSource interface
        3. \n
      3. 9.2.3 Processing model
        4. \n
      4. 9.2.4 Parsing an event stream
        5. \n
      5. 9.2.5 Interpreting an event stream
        6. \n
      6. 9.2.6 Authoring notes
        7. \n
      7. 9.2.7 Connectionless push and other features
        8. \n
      8. 9.2.8 Garbage collection
        9. \n
      9. 9.2.9 Implementation advice
        10. \n
      \n
      3. \n
    3. \n

      9.3 Web sockets

      \n
        \n
      1. 9.3.1 Introduction
        2. \n
      2. 9.3.2 The WebSocket interface
        3. \n
      3. 9.3.3 Feedback from the protocol
        4. \n
      4. 9.3.4 Ping and Pong frames
        5. \n
      5. 9.3.5 The CloseEvent interface
        6. \n
      6. 9.3.6 Garbage collection
        7. \n
      \n
      4. \n
    4. \n

      9.4 Cross-document messaging

      \n
        \n
      1. 9.4.1 Introduction
        2. \n
      2. \n

        9.4.2 Security

        \n
          \n
        1. 9.4.2.1 Authors
          2. \n
        2. 9.4.2.2 User agents
          3. \n
        \n
        3. \n
      3. 9.4.3 Posting messages
        4. \n
      \n
      5. \n
    5. \n

      9.5 Channel messaging

      \n
        \n
      1. \n

        9.5.1 Introduction

        \n
          \n
        1. 9.5.1.1 Examples
          2. \n
        2. 9.5.1.2 Ports as the basis of an object-capability model on the web
          3. \n
        3. 9.5.1.3 Ports as the basis of abstracting out service implementations
          4. \n
        \n
        2. \n
      2. 9.5.2 Message channels
        3. \n
      3. 9.5.3 Message ports
        4. \n
      4. 9.5.4 Broadcasting to many ports
        5. \n
      5. 9.5.5 Ports and garbage collection
        6. \n
      \n
      6. \n
    6. 9.6 Broadcasting to other browsing contexts
      7. \n
    \n
    10. \n
  10. 10 Web workers
    11. \n
  11. \n

    10.1 Introduction

    \n
      \n
    1. 10.1.1 Scope
      2. \n
    2. \n

      10.1.2 Examples

      \n
        \n
      1. 10.1.2.1 A background number-crunching worker
        2. \n
      2. 10.1.2.2 Using a JavaScript module as a worker
        3. \n
      3. 10.1.2.3 Shared workers introduction
        4. \n
      4. 10.1.2.4 Shared state using a shared worker
        5. \n
      5. 10.1.2.5 Delegation
        6. \n
      6. 10.1.2.6 Providing libraries
        7. \n
      \n
      3. \n
    3. \n

      10.1.3 Tutorials

      \n
        \n
      1. 10.1.3.1 Creating a dedicated worker
        2. \n
      2. 10.1.3.2 Communicating with a dedicated worker
        3. \n
      3. 10.1.3.3 Shared workers
        4. \n
      \n
      4. \n
    \n
    12. \n
  12. \n

    10.2 Infrastructure

    \n
      \n
    1. \n

      10.2.1 The global scope

      \n
        \n
      1. 10.2.1.1 The WorkerGlobalScope common interface
        2. \n
      2. 10.2.1.2 Dedicated workers and the DedicatedWorkerGlobalScope interface
        3. \n
      3. 10.2.1.3 Shared workers and the SharedWorkerGlobalScope interface
        4. \n
      \n
      2. \n
    2. 10.2.2 The event loop
      3. \n
    3. 10.2.3 The worker's lifetime
      4. \n
    4. 10.2.4 Processing model
      5. \n
    5. 10.2.5 Runtime script errors
      6. \n
    6. \n

      10.2.6 Creating workers

      \n
        \n
      1. 10.2.6.1 The AbstractWorker mixin
        2. \n
      2. 10.2.6.2 Script settings for workers
        3. \n
      3. 10.2.6.3 Dedicated workers and the Worker interface
        4. \n
      4. 10.2.6.4 Shared workers and the SharedWorker interface
        5. \n
      \n
      7. \n
    7. 10.2.7 Concurrent hardware capabilities
      8. \n
    \n
    13. \n
  13. \n

    10.3 APIs available to workers

    \n
      \n
    1. 10.3.1 Importing scripts and libraries
      2. \n
    2. 10.3.2 The WorkerNavigator interface
      3. \n
    3. 10.3.3 The WorkerLocation interface
      4. \n
    \n
    14. \n
  14. 11 Worklets
    15. \n
  15. \n

    11.1 Introduction

    \n
      \n
    1. 11.1.1 Motivations
      2. \n
    2. 11.1.2 Code idempotence
      3. \n
    3. 11.1.3 Speculative evaluation
      4. \n
    \n
    16. \n
  16. \n

    11.2 Examples

    \n
      \n
    1. 11.2.1 Loading scripts
      2. \n
    2. 11.2.2 Registering a class and invoking its methods
      3. \n
    \n
    17. \n
  17. \n

    11.3 Infrastructure

    \n
      \n
    1. \n

      11.3.1 The global scope

      \n
        \n
      1. 11.3.1.1 Agents and event loops
        2. \n
      2. 11.3.1.2 Creation and termination
        3. \n
      3. 11.3.1.3 Script settings for worklets
        4. \n
      \n
      2. \n
    2. 11.3.2 The Worklet class
      3. \n
    3. 11.3.3 The worklet's lifetime
      4. \n
    \n
    18. \n
  18. 12 Web storage
    19. \n
  19. 12.1 Introduction
    20. \n
  20. \n

    12.2 The API

    \n
      \n
    1. 12.2.1 The Storage interface
      2. \n
    2. 12.2.2 The sessionStorage getter
      3. \n
    3. 12.2.3 The localStorage getter
      4. \n
    4. 12.2.4 The StorageEvent interface
      5. \n
    \n
    21. \n
  21. \n

    12.3 Privacy

    \n
      \n
    1. 12.3.1 User tracking
      2. \n
    2. 12.3.2 Sensitivity of data
      3. \n
    \n
    22. \n
  22. \n

    12.4 Security

    \n
      \n
    1. 12.4.1 DNS spoofing attacks
      2. \n
    2. 12.4.2 Cross-directory attacks
      3. \n
    3. 12.4.3 Implementation risks
      4. \n
    \n
    23. \n
  23. 13 The HTML syntax
    24. \n
  24. \n

    13.1 Writing HTML documents

    \n
      \n
    1. 13.1.1 The DOCTYPE
      2. \n
    2. \n

      13.1.2 Elements

      \n
        \n
      1. 13.1.2.1 Start tags
        2. \n
      2. 13.1.2.2 End tags
        3. \n
      3. 13.1.2.3 Attributes
        4. \n
      4. 13.1.2.4 Optional tags
        5. \n
      5. 13.1.2.5 Restrictions on content models
        6. \n
      6. 13.1.2.6 Restrictions on the contents of raw text and escapable raw text elements
        7. \n
      \n
      3. \n
    3. \n

      13.1.3 Text

      \n
        \n
      1. 13.1.3.1 Newlines
        2. \n
      \n
      4. \n
    4. 13.1.4 Character references
      5. \n
    5. 13.1.5 CDATA sections
      6. \n
    6. 13.1.6 Comments
      7. \n
    \n
    25. \n
  25. \n

    13.2 Parsing HTML documents

    \n
      \n
    1. 13.2.1 Overview of the parsing model
      2. \n
    2. 13.2.2 Parse errors
      3. \n
    3. \n

      13.2.3 The input byte stream

      \n
        \n
      1. 13.2.3.1 Parsing with a known character encoding
        2. \n
      2. 13.2.3.2 Determining the character encoding
        3. \n
      3. 13.2.3.3 Character encodings
        4. \n
      4. 13.2.3.4 Changing the encoding while parsing
        5. \n
      5. 13.2.3.5 Preprocessing the input stream
        6. \n
      \n
      4. \n
    4. \n

      13.2.4 Parse state

      \n
        \n
      1. 13.2.4.1 The insertion mode
        2. \n
      2. 13.2.4.2 The stack of open elements
        3. \n
      3. 13.2.4.3 The list of active formatting elements
        4. \n
      4. 13.2.4.4 The element pointers
        5. \n
      5. 13.2.4.5 Other parsing state flags
        6. \n
      \n
      5. \n
    5. \n

      13.2.5 Tokenization

      \n
        \n
      1. 13.2.5.1 Data state
        2. \n
      2. 13.2.5.2 RCDATA state
        3. \n
      3. 13.2.5.3 RAWTEXT state
        4. \n
      4. 13.2.5.4 Script data state
        5. \n
      5. 13.2.5.5 PLAINTEXT state
        6. \n
      6. 13.2.5.6 Tag open state
        7. \n
      7. 13.2.5.7 End tag open state
        8. \n
      8. 13.2.5.8 Tag name state
        9. \n
      9. 13.2.5.9 RCDATA less-than sign state
        10. \n
      10. 13.2.5.10 RCDATA end tag open state
        11. \n
      11. 13.2.5.11 RCDATA end tag name state
        12. \n
      12. 13.2.5.12 RAWTEXT less-than sign state
        13. \n
      13. 13.2.5.13 RAWTEXT end tag open state
        14. \n
      14. 13.2.5.14 RAWTEXT end tag name state
        15. \n
      15. 13.2.5.15 Script data less-than sign state
        16. \n
      16. 13.2.5.16 Script data end tag open state
        17. \n
      17. 13.2.5.17 Script data end tag name state
        18. \n
      18. 13.2.5.18 Script data escape start state
        19. \n
      19. 13.2.5.19 Script data escape start dash state
        20. \n
      20. 13.2.5.20 Script data escaped state
        21. \n
      21. 13.2.5.21 Script data escaped dash state
        22. \n
      22. 13.2.5.22 Script data escaped dash dash state
        23. \n
      23. 13.2.5.23 Script data escaped less-than sign state
        24. \n
      24. 13.2.5.24 Script data escaped end tag open state
        25. \n
      25. 13.2.5.25 Script data escaped end tag name state
        26. \n
      26. 13.2.5.26 Script data double escape start state
        27. \n
      27. 13.2.5.27 Script data double escaped state
        28. \n
      28. 13.2.5.28 Script data double escaped dash state
        29. \n
      29. 13.2.5.29 Script data double escaped dash dash state
        30. \n
      30. 13.2.5.30 Script data double escaped less-than sign state
        31. \n
      31. 13.2.5.31 Script data double escape end state
        32. \n
      32. 13.2.5.32 Before attribute name state
        33. \n
      33. 13.2.5.33 Attribute name state
        34. \n
      34. 13.2.5.34 After attribute name state
        35. \n
      35. 13.2.5.35 Before attribute value state
        36. \n
      36. 13.2.5.36 Attribute value (double-quoted) state
        37. \n
      37. 13.2.5.37 Attribute value (single-quoted) state
        38. \n
      38. 13.2.5.38 Attribute value (unquoted) state
        39. \n
      39. 13.2.5.39 After attribute value (quoted) state
        40. \n
      40. 13.2.5.40 Self-closing start tag state
        41. \n
      41. 13.2.5.41 Bogus comment state
        42. \n
      42. 13.2.5.42 Markup declaration open state
        43. \n
      43. 13.2.5.43 Comment start state
        44. \n
      44. 13.2.5.44 Comment start dash state
        45. \n
      45. 13.2.5.45 Comment state
        46. \n
      46. 13.2.5.46 Comment less-than sign state
        47. \n
      47. 13.2.5.47 Comment less-than sign bang state
        48. \n
      48. 13.2.5.48 Comment less-than sign bang dash state
        49. \n
      49. 13.2.5.49 Comment less-than sign bang dash dash state
        50. \n
      50. 13.2.5.50 Comment end dash state
        51. \n
      51. 13.2.5.51 Comment end state
        52. \n
      52. 13.2.5.52 Comment end bang state
        53. \n
      53. 13.2.5.53 DOCTYPE state
        54. \n
      54. 13.2.5.54 Before DOCTYPE name state
        55. \n
      55. 13.2.5.55 DOCTYPE name state
        56. \n
      56. 13.2.5.56 After DOCTYPE name state
        57. \n
      57. 13.2.5.57 After DOCTYPE public keyword state
        58. \n
      58. 13.2.5.58 Before DOCTYPE public identifier state
        59. \n
      59. 13.2.5.59 DOCTYPE public identifier (double-quoted) state
        60. \n
      60. 13.2.5.60 DOCTYPE public identifier (single-quoted) state
        61. \n
      61. 13.2.5.61 After DOCTYPE public identifier state
        62. \n
      62. 13.2.5.62 Between DOCTYPE public and system identifiers state
        63. \n
      63. 13.2.5.63 After DOCTYPE system keyword state
        64. \n
      64. 13.2.5.64 Before DOCTYPE system identifier state
        65. \n
      65. 13.2.5.65 DOCTYPE system identifier (double-quoted) state
        66. \n
      66. 13.2.5.66 DOCTYPE system identifier (single-quoted) state
        67. \n
      67. 13.2.5.67 After DOCTYPE system identifier state
        68. \n
      68. 13.2.5.68 Bogus DOCTYPE state
        69. \n
      69. 13.2.5.69 CDATA section state
        70. \n
      70. 13.2.5.70 CDATA section bracket state
        71. \n
      71. 13.2.5.71 CDATA section end state
        72. \n
      72. 13.2.5.72 Character reference state
        73. \n
      73. 13.2.5.73 Named character reference state
        74. \n
      74. 13.2.5.74 Ambiguous ampersand state
        75. \n
      75. 13.2.5.75 Numeric character reference state
        76. \n
      76. 13.2.5.76 Hexadecimal character reference start state
        77. \n
      77. 13.2.5.77 Decimal character reference start state
        78. \n
      78. 13.2.5.78 Hexadecimal character reference state
        79. \n
      79. 13.2.5.79 Decimal character reference state
        80. \n
      80. 13.2.5.80 Numeric character reference end state
        81. \n
      \n
      6. \n
    6. \n

      13.2.6 Tree construction

      \n
        \n
      1. 13.2.6.1 Creating and inserting nodes
        2. \n
      2. 13.2.6.2 Parsing elements that contain only text
        3. \n
      3. 13.2.6.3 Closing elements that have implied end tags
        4. \n
      4. \n

        13.2.6.4 The rules for parsing tokens in HTML content

        \n
          \n
        1. 13.2.6.4.1 The \"initial\" insertion mode
          2. \n
        2. 13.2.6.4.2 The \"before html\" insertion mode
          3. \n
        3. 13.2.6.4.3 The \"before head\" insertion mode
          4. \n
        4. 13.2.6.4.4 The \"in head\" insertion mode
          5. \n
        5. 13.2.6.4.5 The \"in head noscript\" insertion mode
          6. \n
        6. 13.2.6.4.6 The \"after head\" insertion mode
          7. \n
        7. 13.2.6.4.7 The \"in body\" insertion mode
          8. \n
        8. 13.2.6.4.8 The \"text\" insertion mode
          9. \n
        9. 13.2.6.4.9 The \"in table\" insertion mode
          10. \n
        10. 13.2.6.4.10 The \"in table text\" insertion mode
          11. \n
        11. 13.2.6.4.11 The \"in caption\" insertion mode
          12. \n
        12. 13.2.6.4.12 The \"in column group\" insertion mode
          13. \n
        13. 13.2.6.4.13 The \"in table body\" insertion mode
          14. \n
        14. 13.2.6.4.14 The \"in row\" insertion mode
          15. \n
        15. 13.2.6.4.15 The \"in cell\" insertion mode
          16. \n
        16. 13.2.6.4.16 The \"in select\" insertion mode
          17. \n
        17. 13.2.6.4.17 The \"in select in table\" insertion mode
          18. \n
        18. 13.2.6.4.18 The \"in template\" insertion mode
          19. \n
        19. 13.2.6.4.19 The \"after body\" insertion mode
          20. \n
        20. 13.2.6.4.20 The \"in frameset\" insertion mode
          21. \n
        21. 13.2.6.4.21 The \"after frameset\" insertion mode
          22. \n
        22. 13.2.6.4.22 The \"after after body\" insertion mode
          23. \n
        23. 13.2.6.4.23 The \"after after frameset\" insertion mode
          24. \n
        \n
        5. \n
      5. 13.2.6.5 The rules for parsing tokens in foreign content
        6. \n
      \n
      7. \n
    7. 13.2.7 The end
      8. \n
    8. 13.2.8 Speculative HTML parsing
      9. \n
    9. 13.2.9 Coercing an HTML DOM into an infoset
      10. \n
    10. 13.2.10 An introduction to error handling and strange cases in the parser
      11. \n
    11. 13.2.10.1 Misnested tags:
      12. \n
    12. 13.2.10.2 Misnested tags:

      13. \n
    13. 13.2.10.3 Unexpected markup in tables
      14. \n
    14. 13.2.10.4 Scripts that modify the page as it is being parsed
      15. \n
    15. 13.2.10.5 The execution of scripts that are moving across multiple documents
      16. \n
    16. 13.2.10.6 Unclosed formatting elements
      17. \n
    \n
    26. \n
  26. 13.3 Serializing HTML fragments
    27. \n
  27. 13.4 Parsing HTML fragments
    28. \n
  28. 13.5 Named character references
    29. \n
  29. 14 The XML syntax
    30. \n
  30. 14.1 Writing documents in the XML syntax
    31. \n
  31. 14.2 Parsing XML documents
    32. \n
  32. 14.3 Serializing XML fragments
    33. \n
  33. 14.4 Parsing XML fragments
    34. \n
  34. 15 Rendering
    35. \n
  35. 15.1 Introduction
    36. \n
  36. 15.2 The CSS user agent style sheet and presentational hints
    37. \n
  37. \n

    15.3 Non-replaced elements

    \n
      \n
    1. 15.3.1 Hidden elements
      2. \n
    2. 15.3.2 The page
      3. \n
    3. 15.3.3 Flow content
      4. \n
    4. 15.3.4 Phrasing content
      5. \n
    5. 15.3.5 Bidirectional text
      6. \n
    6. 15.3.6 Sections and headings
      7. \n
    7. 15.3.7 Lists
      8. \n
    8. 15.3.8 Tables
      9. \n
    9. 15.3.9 Margin collapsing quirks
      10. \n
    10. 15.3.10 Form controls
      11. \n
    11. 15.3.11 The hr element
      12. \n
    12. 15.3.12 The fieldset and legend elements
      13. \n
    \n
    38. \n
  38. \n

    15.4 Replaced elements

    \n
      \n
    1. 15.4.1 Embedded content
      2. \n
    2. 15.4.2 Images
      3. \n
    3. 15.4.3 Attributes for embedded content and images
      4. \n
    4. 15.4.4 Image maps
      5. \n
    \n
    39. \n
  39. \n

    15.5 Widgets

    \n
      \n
    1. 15.5.1 Introduction
      2. \n
    2. 15.5.2 Button layout
      3. \n
    3. 15.5.3 The button element
      4. \n
    4. 15.5.4 The details and summary elements
      5. \n
    5. 15.5.5 The input element as a text entry widget
      6. \n
    6. 15.5.6 The input element as domain-specific widgets
      7. \n
    7. 15.5.7 The input element as a range control
      8. \n
    8. 15.5.8 The input element as a color well
      9. \n
    9. 15.5.9 The input element as a checkbox and radio button widgets
      10. \n
    10. 15.5.10 The input element as a file upload control
      11. \n
    11. 15.5.11 The input element as a button
      12. \n
    12. 15.5.12 The marquee element
      13. \n
    13. 15.5.13 The meter element
      14. \n
    14. 15.5.14 The progress element
      15. \n
    15. 15.5.15 The select element
      16. \n
    16. 15.5.16 The textarea element
      17. \n
    \n
    40. \n
  40. 15.6 Frames and framesets
    41. \n
  41. \n

    15.7 Interactive media

    \n
      \n
    1. 15.7.1 Links, forms, and navigation
      2. \n
    2. 15.7.2 The title attribute
      3. \n
    3. 15.7.3 Editing hosts
      4. \n
    4. 15.7.4 Text rendered in native user interfaces
      5. \n
    \n
    42. \n
  42. 15.8 Print media
    43. \n
  43. 15.9 Unstyled XML documents
    44. \n
  44. 16 Obsolete features
    45. \n
  45. \n

    16.1 Obsolete but conforming features

    \n
      \n
    1. 16.1.1 Warnings for obsolete but conforming features
      2. \n
    \n
    46. \n
  46. 16.2 Non-conforming features
    47. \n
  47. \n

    16.3 Requirements for implementations

    \n
      \n
    1. 16.3.1 The marquee element
      2. \n
    2. 16.3.2 Frames
      3. \n
    3. 16.3.3 Other elements, attributes and APIs
      4. \n
    \n
    48. \n
  48. 17 IANA considerations
    49. \n
  49. 17.1 text/html
    50. \n
  50. 17.2 multipart/x-mixed-replace
    51. \n
  51. 17.3 application/xhtml+xml
    52. \n
  52. 17.4 text/ping
    53. \n
  53. 17.5 application/microdata+json
    54. \n
  54. 17.6 text/event-stream
    55. \n
  55. 17.7 `Cross-Origin-Embedder-Policy`
    56. \n
  56. 17.8 `Cross-Origin-Embedder-Policy-Report-Only`
    57. \n
  57. 17.9 `Cross-Origin-Opener-Policy`
    58. \n
  58. 17.10 `Cross-Origin-Opener-Policy-Report-Only`
    59. \n
  59. 17.11 `Origin-Agent-Cluster`
    60. \n
  60. 17.12 `Ping-From`
    61. \n
  61. 17.13 `Ping-To`
    62. \n
  62. 17.14 `Refresh`
    63. \n
  63. 17.15 `Last-Event-ID`
    64. \n
  64. 17.16 `X-Frame-Options`
    65. \n
  65. 17.17 web+ scheme prefix
    66. \n
  66. Index
    67. \n
  67. Elements
    68. \n
  68. Element content categories
    69. \n
  69. Attributes
    70. \n
  70. Element Interfaces
    71. \n
  71. All Interfaces
    72. \n
  72. Events
    73. \n
  73. MIME Types
    74. \n
  74. References
    75. \n
  75. Acknowledgments
    76. \n
  76. Intellectual property rights
    77. \n
"},{"url":"/docs/docs/no-whiteboarding/","relativePath":"docs/docs/no-whiteboarding.md","relativeDir":"docs/docs","base":"no-whiteboarding.md","name":"no-whiteboarding","frontmatter":{"title":"lorem-ipsum","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[]},"template":"docs"},"html":"

A - C\n\n

\n
    \n
  • Ableton | Berlin, Germany | Take-home programming task (discussed via Skype), then pair programming and debugging session on-site
    • \n
  • Abstract | San Francisco, CA
    • \n
  • Accenture | San Francisco, CA / Los Angeles, CA / New York, NY | Technical phone discussion with architecture manager, followed by behavioral interview focusing on soft skills
    • \n
  • Accredible | Cambridge, UK / San Francisco, CA / Remote | Take home project, then a pair-programming and discussion onsite / Skype round.
    • \n
  • Acko | Mumbai, India | Phone interview, followed by a small take home problem. Finally a F2F or skype pair programming session
    • \n
  • Acumen | London, UK | Small take home test, and sit in on some sprint rituals on-site
    • \n
  • Addstones | Paris, FR / Singapore, SG / Bucharest, RO / London, UK | Multiple interviews, discussion of technical background and experiences. Sometimes we do a on-site unsupervised small exercise.
    • \n
  • Adnymics | Munich, DE | Take home project, then work with the team for a day
    • \n
  • Adthena | London, UK | Takehome project and discussion on-site
    • \n
  • AdWyze | Bangalore, India | Short takehome project + (for fulltime) onsite pairing
    • \n
  • AeroFS | San Francisco, CA | Short takehome project + phone interview
    • \n
  • Affinity | San Francisco, CA | Implementation of a children's game, then take-home project OR real-world design questions
    • \n
  • Ageno | Bielsko-Biala, Poland | Simple Magento Take-home project and discussion on the real world problems.
    • \n
  • AgileMD | San Francisco, CA | Takehome project
    • \n
  • Agoda | Bangkok, Thailand | Take-home project, then a discussion onsite round.
    • \n
  • Agrilyst | New York, NY / Remote | Short takehome project & remote pairing
    • \n
  • Airbrake | San Francisco, CA / Remote | Take-home project & pair on a problem similar to daily work
    • \n
  • Aiwip | London, UK | Skype/phone interview followed by takehome project or worksample (or whiteboard)
    • \n
  • Ajira | Chennai, India / Austin, TX | Take home project, then pair programming, technical discussions, cultural fit
    • \n
  • Algolia | Paris, France / San Francisco, CA | Takehome project & Onsite discussions and presentation
    • \n
  • all about apps GmbH | Vienna, Austria | 2-phase technical discussion & examination with department heads and management.
    • \n
  • Allegro | Warsaw, Poland; Poznan, Poland; Torun, Poland; Wroclaw, Poland; Krakow, Poland | Take home, simple project. Series of 2 technical interviews (how to build things, how to solve specific, real world problem) and meeting with a team leader.
    • \n
  • Alluvium | Brooklyn, NY | Take-home assignment, on-site review dovetailing into collaborative project planning for extension.
    • \n
  • AlphaSights | London, UK / New York, NY / Remote | Initial interview, pair programming then final round with general technical questions
    • \n
  • AMAGI | Makati, Philippines | 1) Review of your resume, portfolio, and/or GitHub profile; 2) 1 hour discussion (in-person or Skype) about your goals, experience, personal culture, and how to apply technical solutions to real problems;
    • \n
  • Analytical Flavor Systems | Manhattan, New York | Code sample or take-home project, both with discussion.
    • \n
  • Apollo Agriculture | Nairobi, Kenya/Remote | Takehome project or Worksample (or whiteboard)
    • \n
  • Applied | London, UK | Situational judgement tests focusing on real-world soft skills (online then in structured interview)
    • \n
  • Arachnys | London, UK | Take home test, real world pair programming
    • \n
  • Articulate | Remote | Take-home project & pair program on a problem similar to daily work
    • \n
  • Artsy | New York, NY / London, UK / Berlin, Germany / Los Angeles, CA / Hong Kong, Hong Kong / Remote | Our process: 1) Informal chat 2) Application 3) Phone screen 4) In-person interview with 1 lead, 2 individual contributors and 1 non-engineer (30-45 mins each), focusing on your work habits and expertise as demonstrated in your previous work 5) ~4 in-depth professional reference calls (30-45 mins each).
    • \n
  • ASI Data Science | London, UK | Project to work at home, general technical questions, pair programming with engineers
    • \n
  • ASOS | London, UK | Take home or in-person code refactoring exercise, in-person walk-though of solution including software crafstmanship principles and design decisions, in-person freestyle architecture walk-through
    • \n
  • Ataccama | Prague, Czech Republic | Face to face interview (skype or onsite), coding task for 30 min, meeting with team members
    • \n
  • aTech Media | London, UK | Face to face interview, review of existing open source contributions or, if none are available, asked to write a library for something that interests them
    • \n
  • Aura Frames | New York, NY / San Francisco, CA | Simplified real-world coding task on Coderpad.io, followed by a few hours onsite writing code in our actual codebase.
    • \n
  • Aurora Solar | San Francisco, CA | Our process: 1) Initial phone call 2) 1 hour take home project in CoderPad along with a few essay questions relating to JavaScript, testing, etc. 3) Remote pairing session solving a problem similar to day to day work. 4) In-person interview with additional pairing exercise done on a laptop as well as culture interviews.
    • \n
  • Auth0 | Bellevue, WA / Buenos Aires, Argentina / Remote | Series of interviews, go over technical background and past experiences, take-home project
    • \n
  • Auto1 | Berlin, DE | Series of Skype interviews which covers general technical questions, followed by a take-home assignment
    • \n
  • Automattic | Remote | short take-home real-world task, then a few weeks-long real-world, part-time, and paid project on production code
    • \n
  • AutoScout24 | Munich, Germany | Skype interview followed by home assignment from our day-to-day business and then on-site interview including lunch with a team
    • \n
  • Avant | Chicago, IL | Pair programming interviews.
    • \n
  • Avarteq GmbH | Berlin, Germany / Saarbrücken, Germany | Technical interview with our developers on-site or remote followed by a work sample in a pair programming session or a previous take-home project with a follow-up discussion and detailed feedback.
    • \n
  • Avocarrot | Athens, Greece | on-site real world problem discussion and pair programming
    • \n
  • Axelerant | Remote | Take-home project, interviews with hr and engineering team.
    • \n
  • Axiacore | Bogota, Colombia | We talk about on how is your process when solving problems.
    • \n
  • Axios | Arlington, VA / New York, NY / San Francisco, CA / Remote | Take-home project, with discussion.
    • \n
  • B12 | New York, NY | Take-home exercises and pair-programming with the team.
    • \n
  • B2W Digital | Rio de Janeiro, Brazil; São Paulo, Brazil | Time-boxed coding exercise at home, on-site pair programming with engineers and live software architecture challenges based on real situations.
    • \n
  • Babylon Health iOS Team | London, UK | Take-home project, on-site presentation and discussion, design and product interview.
    • \n
  • Backbase | Amsterdam, Netherlands; Cardiff, Wales; London, UK; Atlanta, GA | Takehome project, interviews
    • \n
  • Badi | Barcelona, Spain | Phone Screen, Take-home project, then a discussion onsite round.
    • \n
  • Badoo | London, UK | Take-home project, then a discussion onsite round.
    • \n
  • BAE Systems Applied Intelligence | London, UK | Initial interview with experience based technical questions, second interview pair programming on problem similar to daily work
    • \n
  • Bakken & Bæck | Oslo, Norway; Amsterdam, Netherlands; Bonn, Germany | Skype interview followed by take-home assignment and a visit to one of our offices
    • \n
  • Balabit | Budapest, Hungary | Take-home project (medium size, with restrictions, e.g. only stdlib may be used), then discussion on-site
    • \n
  • Barracuda View Team | Chelmsford, MA / Remote | Phone screen, remote pair programming session, technical discussion interview, culture fit interview
    • \n
  • Basecamp | Chicago, IL / Remote
    • \n
  • Beam Dental | Columbus, OH | Phone Screen, Take Home Project, In-Person Pairing and Cross-Functional Interview
    • \n
  • Belka | Trento, Italy; Munich, Germany | We give you a small task that you can do alone and then we evaluate your work with you
    • \n
  • Bemind Interactive | Biella, Italy / Latina, Italy / Remote | Series of interviews, discussion about technical background and past experiences, take-home project & pair programming
    • \n
  • Bendyworks | Madison, WI | Interviews and pair programming on personal projects
    • \n
  • Betterment | New York, NY | Phone interview followed by on-site pair programming to simulate a Betterment feature build.
    • \n
  • BetterPT | New York, NY | Initial phone interview, project using our tech stack, on-site code review/pair programming and \"meet the team\".
    • \n
  • Big Nerd Ranch | Atlanta, GA & Remote | Interviews and pair programming on an internal project or problem.
    • \n
  • BioConnect | Toronto, Canada | Take-home assignment & discussion
    • \n
  • bitExpert AG | Mannheim, Germany | Interview with experience based technical questions
    • \n
  • Bits of Love | Bruges, Belgium | In-person interview to evaluate experience and motivation, potentially followed by take-home project.
    • \n
  • Blackdot Solutions | Cambridge, UK | Take-home project followed by on-site face-to-face walkthru of your code focusing on decisions/reasoning/technology used.
    • \n
  • Bleacher Report | San Francisco, CA, USA | Take-home project; on-site discussion about the project and meeting with different teams
    • \n
  • Blendle | Utrecht, The Netherlands | Take-home project & pair program on a problem similar to daily work
    • \n
  • blogfoster | Berlin, Germany | Take-home project, discussion on-site
    • \n
  • Blue Bottle Coffee | Oakland, CA | Technical Phone Screen, Take Home Challenge, Technical in-persons.
    • \n
  • Bluesoft | São Paulo, Brazil | Takehome project and an interview to evaluate the candidate's previous experience.
    • \n
  • Bocoup | Boston, MA / Remote | Pair programming with personal laptop on typical problem seen at work
    • \n
  • Bolste | Phoenix, AZ | Conversational in-person interviews with team members and pair programming through real world problems
    • \n
  • BookingSync | Remote | Small takehome project, interviews over skype with team members.
    • \n
  • BoomTown | Charleston, SC / Atlanta, GA / Remote | Conversational in-person interviews with potential team members and managers that revolve around past experience and how that could be applied to future work
    • \n
  • Bouvet | Bergen, Norway | Pair programming with senior engineers
    • \n
  • brainn.co | São Paulo, BR | Zoom/On-site interview, take-home project and interview with a team leader.
    • \n
  • BrainStation-23 | Dhaka, BD | A practical project followed by series of in-person interview sessions
    • \n
  • Breather | Montreal, Canada | Series of interviews including a conversation about the candidate's experience and a technical discussion involving real world problems
    • \n
  • BrightBytes | San Francisco, CA | Time-boxed coding exercise at home and on-site pair programming with engineers
    • \n
  • BrightHR | Manchester, UK | Telephone conversation, coding exercise at home, on-site pairing with a cultural interview, meet the team.
    • \n
  • brightwheel | San Francisco, CA | Take home exercise, and systems design.
    • \n
  • Broad Institute's Data Sciences Platform | Cambridge, MA | Phone screen, small take home project, both a technical and non-technical discussion panel, and a panel following up on the take home project walking through the solution and making a modification to the original code
    • \n
  • Bubblin Superbooks | Remote | View code, projects, libraries or any other open source story that you have been a part of, a small take-home project with real code occasionally.
    • \n
  • Buffer | Remote | Interviews over video call, code walkthrough of real code focussing on decisions and reasoning, then a 45 day full time, fully paid contract project working on production code.
    • \n
  • Bugcrowd | San Francisco, CA / Sydney, NSW | Take home exercise, half-day onsite walking through code, and pair programming.
    • \n
  • Buhler Group | Prague, CZ | Interview with a couple of technical questions. No task needed. Depending on the team there is another round with the guys in the HQ via skype.
    • \n
  • Bulb | London, UK | Phone screening, followed by a 2-4 hours take home task. If successful, on-site interview to discuss and extend with the reviewer and one other engineer, followed by 2x informal \"Meet the team\" interviews.
    • \n
  • Busbud | Montreal, Canada | Phone screening, followed by a 2-4 hours take home assignment. If the challenge is a success, on-site or remote interview with team members, including someone who reviewed it, to talk about it and potential next steps if the challenge was a real life task.
    • \n
  • Bustle | New York City, Ny / Remote | Half day pair programming on a task for production or one of our Open Source projects. We'll also buy you lunch with the team.
    • \n
  • busuu | London, UK | Video call to show real code as first stage. In office pair programming, white board real world problem that we've encountered before, and history/experience discussion.
    • \n
  • ButterCMS | Chicago, IL; Remote | Take home exercise and half-day of pair programming
    • \n
  • ByBox | Remote | Phone interview followed by interview with devs (ideally in person but sometimes Skype) covering technical experience and coding exercise with real code.
    • \n
  • CACI Rome | Rome, NY; Remote | Phone interview followed by in-person or Skype screen sharing interview with a coding exercise in either Java, web (Node.js + frontend), or both. Interview format is exclusive to the Rome, NY office and may not be shared by other regional CACI offices.
    • \n
  • Cake Solutions | Manchester, UK; London, UK; New York, NY | Skype / Hangouts / phone call to explain the technical background, current position and set expectations about the salary, relocation, etc; if all good, what to expect next. Then take-home exercise for roughly 4 hours to demonstrate good thinking and ability to pick up new things, explain & document the solution, finishing with pair programming with senior developers (remote or in person); use the code as a talking point around the more difficult things after getting through the simple starter tasks.
    • \n
  • Capgemini UK Java Team | London, UK; Woking, UK; Bristol, UK; Cardiff, Wales; Birmingham, UK; Manchester, UK; Leeds, UK; Rotherham, UK; Liverpool, UK; Newcastle, UK; Edinburgh, Scotland; Glasgow, Scotland | Technical telephone interview (30 minutes), take-home non-CompSci coding exercise (3-4 hours), face-to-face role-played consulting scenario involving a solution architecture and a delivery plan (two hours)
    • \n
  • Caravelo | Barcelona, Spain | Take home project, then technical discussion about the code in-person or Skype and hang out with the team.
    • \n
  • Cartegraph | Dubuque, IA / Remote | Phone screen, hiring manager interview, small take-home coding project, and team code review/interview
    • \n
  • CARTO | Madrid, Spain | Phone screen, take-home project, team code review/interview, hiring manager interview
    • \n
  • Casetext | San Francisco, CA | Submit code sample for review/discussion, contract for one full day (paid)
    • \n
  • CASHLINK | Frankfurt, Germany | Skype/phone interview, take-home project
    • \n
  • Causeway | United Kingdom, India | Skype or Telephonic discussion on approaches and experience in regards to solve projects related work, then face to face round to write small solutions to common problems in related field.
    • \n
  • Centroida | Sofia, Bulgaria | Series of interviews, pair programming and take-home projects
    • \n
  • Chain.Reaction | Budapest, Hungary | Partnership-fit discussion, code-review and trial days.
    • \n
  • Chargify | San Antonio, TX / Remote | Take-home project & pair on a problem similar to daily work
    • \n
  • Checkout 51 | Toronto, Canada | Phone conversation (15-20 minutes) followed by on-site pair programming and discussion focused on understanding decisions made during on-site work
    • \n
  • Chesapeake Technology | Denver, CO / Santa Barbara, CA / Camarillo, CA / Dulles, VA / California, MD / Remote | Phone screen (30 minutes), take home at leisure question based on real development followed by in person review of solution and general technical questions with actual team and opportunity for you to ask questions and provide feedback ( 2-3 hours)
    • \n
  • CircleCI | San Francisco, CA / Remote | Take-home project and discussion, followed by on-site interview that includes pair programming on actual CircleCI bugs/feature requests.
    • \n
  • City of Boston's Analytics Team | Boston, MA | Take-home project and in-person or phone/Skype interviews
    • \n
  • City of Philadelphia's Office of Open Data & Digital Transformation | Philadelphia, PA | Take-home project
    • \n
  • Civis Analytics | Chicago, IL | Take-home project and discussion via Skype, followed by pair programming exercise
    • \n
  • CJ Affiliate | Los Angeles, CA & Westlake Village, CA | Phone coding design exercise (no algorithms), followed by an on-site final interview that includes pair programming on a realistic object-oriented design problem
    • \n
  • Clara Lending | San Francisco, CA | Phone conversation around technical background and experience, followed by take-home project, pair programming and discussion
    • \n
  • Clerkie | San Francisco, CA | Phone conversation followed by take-home project
    • \n
  • ClickMagick | Austin, TX / Remote | Phone conversations and examples of Free Software/Open Source work
    • \n
  • Clippings | Sofia, Bulgaria | Video screening first, then send us code they've recently wrote, then technical interview. We could ask questions about the code they wrote at home.
    • \n
  • Clockwork Consulting | Copenhagen, Denmark | Interviews, discussion of technical background and experiences.
    • \n
  • Cloudistics | Reston, VA | Multiple interviews, discussion of technical background and experiences.
    • \n
  • Clubhouse | New York, NY & Remote | Phone interview, followed by onsite discussions and pair programming
    • \n
  • Cogent Labs | Tokyo, Japan | On-site or video call conversation around technical background and experience, followed by take-home project that resembles a problem Cogent Labs solves for. This project will serve as the base of discussion with the developers for the second interview.
    • \n
  • Cognitect, Inc. | Remote | Phone interview followed by pair programming.
    • \n
  • Cognitran | Essex, UK / Szczecin, Poland / Detroit, MI | Skype/phone interview followed by pair programming.
    • \n
  • Collabora | Cambridge, UK / Montreal, Canada / Remote | On-site or video interview, discussion of technical experience and sometimes approach for tackling a hypothetical problem.
    • \n
  • COMPEON | Duesseldorf, Germany | Phone interview, followed by onsite discussions and pair programming with our developers
    • \n
  • Concordia Publishing House | St Louis, MO | Take-home project followed by discussion of it on-site with future teammates.
    • \n
  • Contactlab | Milan, Italy | Recruiter interview, tech interview (technical background and experiences), both on-site.
    • \n
  • Contentful | Berlin, Germany & SF, USA | Multiple interviews, discussion of technical background & live coding challenge (you can use the internet).
    • \n
  • ContentSquare | Paris, France | Real-world challenges with open discussions.
    • \n
  • Cookpad | Tokyo, Japan; Bristol, UK | Interviews, discussion of technical background and experiences, remotely pair with devs.
    • \n
  • Coorp Academy | Paris, France | Technical interview as an open discussion
    • \n
  • CoverHound, Inc. | San Francisco, CA | Open technical discussion, short on-site coding challenge.
    • \n
  • Credit Kudos | London, UK | Take-home project and pair programming via Skype or on-site.
    • \n
  • CrossBrowserTesting | Memphis, TN | Take home project that resembles a problem support engineers deal with on a daily basis. On-Site interviews in a comfortable environement with a focus on hiring talented people vs exact skill-sets.
    • \n
  • Crowdstrike | Remote | Multiple interviews onsite or remote as appropriate followed by small take-home project.
    • \n
  • Crownstone | Rotterdam, Netherlands | Technical interaction using previously created Github projects, followed by in-person interview with a focus on someone's professional ambition in the short and long term.
    • \n
  • cube19 | London, UK | Take-home project, then an on-site discussion about the code and previous experience.
    • \n
  • Cultivate | Edinburgh, UK | 30 minute pair-programming screening interview on a simple exercise (remote or in-person). Half day pair programming, with 3 or 4 different team members plus informal chat, typically on-site.
    • \n
  • Culture Foundry | Austin, TX | Paid take-home project
    • \n
  • CurrencyTransfer | London, UK & Remote | Take-home project
    • \n
\n

D - F

\n
    \n
  • Dark Sky | Cambridge, MA | Phone interviews and a very short, real paid project
    • \n
  • Data Theorem | Palo Alto, CA; Paris, Fr; Bangladesh, India | Phone interview, then a take home project and finally in-person interview.
    • \n
  • Datalogue | Montreal, Canada | We Ask candidates to contribute meaningfully to an Open source project that reflects the stack they will be working with and send us a link to the PR.
    • \n
  • DataMade | Chicago, IL | After submitting an application, selected applicants are moved on to a round of interviews and will be asked to submit a piece of code for review. If you don't have any code you can share, DataMade will provide a short exercise for you to complete. An in-person (or remote) interview will be scheduled to go over your background, what draws you to DataMade, and your code sample.
    • \n
  • Datascope | Chicago, IL | Take home exploratory data project with public data, discussion about the project via video chat, and in-person office visit.
    • \n
  • Datlinq | Rotterdam, Netherlands | Take-home project based on actual work on data done by the team and in-person or Skype interviews
    • \n
  • DealTap | Toronto, Canada | Technical Interview, Solution Design, Take Home Assignment, then Culture fit interview with the team, and optional pair programming.
    • \n
  • Def Method | NYC, NY | Take home test, pair programming with dev on test and client work, receive offer same day as pairing interview
    • \n
  • Deliveroo | London, UK & Remote | Short take-home project and pair programming
    • \n
  • Dentolo | Berlin, Germany | Phone interview with the HR department, take-home project and technical interview to discuss your skill set + general questions
    • \n
  • Deskbookers | Amsterdam, Netherlands | Phone screen, take-home project, on-site interview
    • \n
  • DeSmart | Gdynia, Poland | Technical interview, take-home project and talk about your experience
    • \n
  • Despark | Sofia, Bulgaria & Remote | Culture add interview, sample code review and paid pair programming with team member or take-home project.
    • \n
  • Detroit Labs | Detroit, MI | Our technical interview starts with a take-home assignment that we will look at during the interview. You'll walk us though your thought process, add functionality if applicable to the interview, and talk about your experience. We believe that showing us your work in a practical setting is more telling of your abilities and what you will bring to the table, than writing code on a whiteboard.
    • \n
  • DevMynd | Chicago, IL; San Francisco, CA | Take-home project, take-home project phone review, a few hour-long pairing sessions on real projects.
    • \n
  • DG-i | Cologne, Germany | Take-home project and/or discussion on-site about past experiences
    • \n
  • DICE | Stockholm, Sweden | Take-home project and code review at the on-site
    • \n
  • Digitally Imported | Denver, Colorado & Remote | Video meetings on past experience and high level tech questions, take-home project
    • \n
  • Dollar Shave Club | Venice, California | Phone interview, take-home projects, on-site interview
    • \n
  • door2door | Berlin, Germany | Take home challenge + on-site interview + trial day
    • \n
  • DoorDash 🏃💨 | San Francisco, CA | Take home project + an on-site interview building off the project!
    • \n
  • Draft Fantasy | Tel Aviv, Israel | Talk about past experience and what the developer has actually built as well as pair programming or a programming exercise.
    • \n
  • Drawbotics | Brussels, Belgium | Take-home project, bootcamp on-site
    • \n
  • drchrono | Mountain View, CA | Hackerrank test (but not CS trivia, it's real product problems) & on-site/take-home project w/ presentation
    • \n
  • Drivy | Paris, France | Phone screening followed by a take-home assignment, \"Resume\" interview, technical interview, product interview, interview with another team, finalizing the hire
    • \n
  • DroneDeploy | San Francisco, CA | Pair program on a problem similar to daily work
    • \n
  • DroneSeed | Seattle, WA | Take home assignment of a real problem we've worked on, group code review in subsequent interview.
    • \n
  • dubizzle | Dubai, UAE | Take home assignment, general technical questions, pair programming with engineers or tech leads
    • \n
  • E-accent | Hilversum, Netherlands; Remote | Skype conversation, take-home assignment
    • \n
  • Easy Taxi | São Paulo, Brazil | Take-home project, interview to evaluate the candidate's previous experience.
    • \n
  • Eaze | San Francisco, CA | Take home project, on-site interview building off of the project
    • \n
  • eBay Kleinanzeigen | Berlin, Germany | 45 mins technical phone interview, take-home project/review, on-site interview including pair programming with team lead and agile interview with product manager.
    • \n
  • Echobind | Boston, MA; Remote | Meet the entire team, share examples of previous work and pair with one team member
    • \n
  • Edenspiekermann | Amsterdam, Netherlands / Berlin, Germany / Los Angeles, CA / San Francisco, CA / Singapore, Singapore | On-site chat about skills and past experiences, review some code samples or a take-home assignment
    • \n
  • EF Education First | London, UK; Boston, MA | Short phone interview, take-home project, discussion of project and real world engineering problems, meet the team.
    • \n
  • Eidu | Berlin, Germany | Take-home project, discussion of results with team, and test days with pair programming
    • \n
  • El Passion | Warsaw, Poland | Take-home project, interview to 1) discuss delivered solution and 2) previous projects
    • \n
  • Electric Pulp | Sioux Falls, SD, USA | Phone interviews with leadership team and technical team leads. We are a tight knit team, so emphasis on a great personal fit is as important as technical prowess.
    • \n
  • Elements Interactive | Almere, The Netherlands & Barcelona, Spain | Take-home project & discussion via Skype or on-site
    • \n
  • Ellucian | Reston, VA, USA | Discussion of real world problems (from resume, if possible)
    • \n
  • elmah.io | Aarhus, Denmark / Remote | Discussion about code and looking at hobby projects (if any)
    • \n
  • Elvie | London, England | Discussing real code, pairing and a paid day to see how you work with the team. No coding for free or time-restricted take-home projects, code challenges or abstract algorithm tests
    • \n
  • eMarketer | New York, NY | Short phone interview, then come in and meet the team, check out our space, and have a discussion with team members about real-world problems
    • \n
  • Emarsys | Budapest, Hungary | Take-home project (small, 1-2 days to solve), then discussion on-site
    • \n
  • Endava | Belgrade, Serbia; Bucharest, Romania; Chisinau, Moldova; Cluj-Napoca, Romania; Iasi, Romania; Pitesti, Romania; Skopje, Macedonia; Sofia, Bulgaria; Frankfurt, Germany; Glasgow, Scotland; Hilversum, Netherlands; London, UK; Oxford, UK; Bogota, Colombia; Atlanta, GA; New Jersey, NJ; New York, NY | On-site discussion about previous experience and technical questions about the target technologies.
    • \n
  • Engel & Völkers Technology | Hamburg, Germany | Remote technical interview with an Engineering Manager, followed by a practical coding challenge implemented in 5 hours, ending with a technical discussion with the team on the produced code either remotely or on-site based on geographical practicality.
    • \n
  • Enhancv | Sofia, Bulgaria | Talk is cheap, show us your code: github profile or other project examples. Explain them in person / remotely. Discuss habits and interests to see if we have a culture fit.
    • \n
  • Enigma | New York, NY | 2-part takehome project, followed by a pair programming exercise
    • \n
  • Enki | London, UK | Skype/phone interview followed by takehome project
    • \n
  • Ento.com | Melbourne, Australia | On-site interview to talk about your experiences and what you're looking for in your next role, followed by a take-home practical test relevant to the work you'll be undertaking at Ento.
    • \n
  • Equal Experts | London, UK; Manchester, UK; New York, NY; Pune, India; Lisbon, Portugal; Calgary, Canada | Fizzbuzz test done at home followed by Pair Programming session at office and finally face to face technical and attitude interview.
    • \n
  • Ericsson | Dublin, Ireland | Skype/phone interview followed by Face 2 Face interview, discussions and architecture questions followed by final small project on a problem similar to daily work.
    • \n
  • eShares, Inc | San Francisco, CA; Palo Alto, CA; Seattle, WA; Rio de Janeiro, Brazil; London, UK; New York, NY | Phone call, practical technical screen, on site to meet the team & explore the company
    • \n
  • Etix Everywhere | Luxembourg City, Luxembourg
    • \n
  • EURA NOVA | Mont-Saint-Guibert, Belgium; Marseille, France; Tunis, Tunisia | attitude interview, unpaid take-home project, technical discussion with 1 or 2 technical employees (remote or face 2 face), face 2 face discussion with HR, partner, and technical staff to have a foretaste of the collaboration
    • \n
  • Euro Payment Group | Frankfurt, Germany | Take-home project followed by face to face interview
    • \n
  • Exoscale | Bern, Switzerland | Take-home project. Discussion and presentation. Then entire team meet.
    • \n
  • F(x) | São Paulo, Brazil | Skype interview, Take-home project and onsite interview to evaluate the candidate
    • \n
  • Falcon.io | Copenhagen, Denmark | Initial call/Skype culture interview. Take-home tech assignment (game) and code review. On-site Interview about your experience and meeting the team.
    • \n
  • FATMAP | London, UK; Berlin, Germany; Vilnius, Lithuania | Skype discussion, Take-home project, Face to face
    • \n
  • Fauna | San Francisco, CA / Remote | Take home project, then follow up with interviews on-site or remote. Interviews are both technical and non-technical. Technical interviews comprehend the scope of the home project.
    • \n
  • Feather | Remote | Take-home challenge, portfolio discussion & team meeting
    • \n
  • Findy | Tokyo, Japan | Tech interview + On-site discussion
    • \n
  • FINE | Portland, OR | Small take-home challenge + follow-up discussion
    • \n
  • Firemind | Maidstone, UK; London, UK; Remote | Small pre-interview challenge on github + discussion face to face in person or via video
    • \n
  • Fitbot | Boulder, CO | Pairing & writing code with the founders for a few hours
    • \n
  • Flatfox | Zurich, Switzerland | Informal conversation to check mutual fit, small (4h) take-home assignment, discussion in team
    • \n
  • Fluidly | London, UK | Casual 30min phone call. ~1hr take home tech exercise (not pass or fail). 1 stage onsite interview - discussion about experience, 1 hour pair programming on the real code base, then your turn to interview us!
    • \n
  • Food52 | New York, NY; Remote | Take-home project, discussion on-site or remote, interviews with both technical and non-technical staff
    • \n
  • Fooji | Lexington, KY; Remote | Take-home project
    • \n
  • Formidable Labs | Seattle, WA; London, UK; Remote | Take-home project, remote pair programming, discussion on-site or remote
    • \n
  • Fortumo | Tallinn, Estonia; Tartu, Estonia | After a 30-min call you get a simplified version of a task that has recently been a challenge for the engineering team
    • \n
  • Founders | Copenhagen, Denmark | Take Home project + Interviews
    • \n
  • Foundry Interactive | Seattle, WA | On-site or remote discussion, paid trial project with pairing and code reviews
    • \n
  • fournova | Remote | Take-home project, discussion via video call
    • \n
  • FreeAgent | Edinburgh, UK | Take-home project, pair programming, discussion and interviews
    • \n
  • Freeletics | Munich, Germany | Small real-world challenge, multiple interviews on-site/remote and social gathering with team.
    • \n
  • Freetrade | London, England | Initial hangout with fizz buzz style question followed by an on-site real world coding question and systems design conversation.
    • \n
  • FRIDAY | Berlin, Germany | Take-home real-world challenge, interview on-site or remote
    • \n
  • Frontside | Austin, Texas | Phone interview with remote pairing session. Followed by in person pairing (paid for the day) and lunch with the team.
    • \n
  • Funda | Amsterdam, The Netherlands | Take Home test + Discussion On-Site/Remote
    • \n
  • FundApps | London, UK | Coffee with an Engineer; take-home kata; code review + on-site pair programming exercise.
    • \n
\n

G - I

\n
    \n
  • Gamevy | London, UK; Bilbao, ES; Remote | Informal culture discussions, pair programming with our engineers
    • \n
  • Garner | Toronto, Canada | step 1: online chat with hiring manager, step 2: at home assignment solving real-life problem, step 3: on-site pair programming with engineers, step 4: offer
    • \n
  • GatherContent | Remote | Culture-first interviews, pair programming and remote, informal technical discussions
    • \n
  • GeneralUI | Seattle, WA | A short phone screen with questions regarding general knowledge related to the open position, then a half day pair programming interview.
    • \n
  • Ginetta | Zurich, Switzerland; Braga, Portugal | Culture-first interviews, take home assignment that resembles a real-world problem we often solve, then discussion about the assignment in-person with pair-programming improvement sessions with our developers.
    • \n
  • GitHub | Remote; San Francisco, CA; Boulder, CO| Take-home exercise, code review and technical discussions.
    • \n
  • GitPrime | Denver, CO; Remote | small short term real-world project, paid project on production code
    • \n
  • Glints | Singapore, Singapore; Jakarta, Indonesia | Culture fit interview, take home assignment that resembles a real-world problem, walkthrough about the assignment
    • \n
  • GoCardless | London, UK | Project to work at home, general technical questions, pair programming with engineers
    • \n
  • GoDaddy | Sunnyvale, CA | Pair programming with senior engineers
    • \n
  • GoJek | Bangalore, India; Jakarta, Indonesia; Singapore, SG; Bangkok, Thailand | Take-home exercise, Pair programming with senior engineer, Techinal problem solving and discussion, Cultural Fit
    • \n
  • Gower Street Analytics | Remote; London, UK | Initial telephone chat, then either a) work with us, fully paid, for a day on real code with the team; or b) pair-programming on a code kata with the team members for four pomodoros. Your choice.
    • \n
  • Graffino | Sibiu, Romania | Take-home project, discussion on-site
    • \n
  • Grafton Studio | Boston, MA | Take-home project, discussion on-site
    • \n
  • Gramercy Tech | New York, NY | Pair programming & discussion on-site
    • \n
  • grandcentrix | Cologne, Germany | Take-home project, discussion on-site
    • \n
  • Grape | Vienna, Austria / Remote | Github or code samples -> Pair programming -> Skype/phone interview
    • \n
  • Graphcool | Berlin, Germany | On-site pair programming of a small, isolated real world task
    • \n
  • Graphicacy | Washington, DC | Phone interview; in-person or virtual interview depending on location and availability; two brief technical assignments focused on flexibility, creativity, and general competency
    • \n
  • Graphistry | Oakland, CA; San Francisco, CA; Remote | Engineering, culture, and product discussions, and for junior developers, choice of take home or code review.
    • \n
  • Grok Interactive | San Antonio, TX | Take-home project with code review and a follow-up in-person interview.
    • \n
  • Gruntwork | Remote | Paid, take-home project with pair coding
    • \n
  • GTM Sportswear | Manhattan, KS / Remote | Remote pairing session, then a take-home test.
    • \n
  • Happy Team | Warsaw, Poland; Remote | General technical questions, takehome paid exercise with feedback/discussion during implementation
    • \n
  • Happypie | Uppsala, Sweden | Takehome excercise with code review after, in-person interview
    • \n
  • Hash | Sao Paulo, Brazil | Take-home project and/or discussion (on-site or remote)
    • \n
  • Hashrocket | Chicago, IL/Jacksonville Beach, FL | Remote pairing session, paid week pair programming with everyone on the team
    • \n
  • Headspring | Austin, TX; Houston, TX; Monterrey, Mexico | Take-home situational questionnaire and code exercise, with in-person follow up to discuss and pair for changes
    • \n
  • Healthify | Remote & New York City, NY | Take-home project, discussion via Zoom, pair programming with us on our app for a day.
    • \n
  • Heetch | Paris, France | Values-fit interview (via zoom.us), Take-home project with review, Team Discussions (via zoom.us), on-site day
    • \n
  • HE:labs | Rio de Janeiro, Brazil & Remote | Take-home project and discussion via Skype.
    • \n
  • HelloFresh | Berlin, Germany | Take-home project, discussion via Skype or on-site
    • \n
  • Heptio | Seattle, WA; Remote | Take-home project, discussion on-site
    • \n
  • Hill Holliday | Boston, MA | Take-home project on GitHub, in-person interview / culture fit interview
    • \n
  • Hireology | Chicago, IL; Remote | Walk through personal/work projects and discuss experience
    • \n
  • Hiventive | Pessac, France | Phone interview, home coding challenge, on-site interview with general programming questions, discussion of proposed solutions and personal experience.
    • \n
  • HolidayPirates | Berlin, Germany | Take-home project, discussion via Skype or on-site
    • \n
  • HoloBuilder | Aachen, Germany | Take-home project, discussion via Skype or on-site
    • \n
  • Home Chef | Chicago, IL; Remote | Get-to-know-you meeting with the team, followed by a half-day collaborative coding session
    • \n
  • HomeLight | San Francisco, CA; Scottsdale, AZ; Seattle, WA | Phone screen, take home that is close to production code, onsite with pair programming
    • \n
  • HoxHunt | Helsinki, Finland | Take-home project, pair programming on-site
    • \n
  • Human API | Redwood City, CA | Technical phone interview, then on-site pair programming and design discussion
    • \n
  • I|O | Cape Town, South Africa
    • \n
  • Icalia Labs | Monterrey, Mexico | Pair programming, cultural fit session
    • \n
  • iConstituent | Washington, DC | Take-home project and code review in-person
    • \n
  • Ideamotive | Warsaw, Poland & Remote | Take-home project, technical interview with developer
    • \n
  • IDEO | San Francisco, CA; New York, NY; Chicago, IL; Cambridge, MA | Take home project that resembles a problem IDEO solves for, then pairing session in person or over video chat.
    • \n
  • ImmobilienScout24 | Berlin, Germany | Take-home project, discussion on-site
    • \n
  • Impraise | Amsterdam, The Netherlands | Take home test, real world pair programming
    • \n
  • Incloud | Darmstadt, Germany | Technical interview with developers, followed by a full day on site with a practical project
    • \n
  • Indellient | Oakville, Canada | Series of interviews both technical and non-technical
    • \n
  • InfluxData | San Francisco, CA & Remote | Technical and non-technical interviews, pair programming, with prospective manager and multiple prospective teammates
    • \n
  • InfoSum | Basingstoke, UK | On-site unsupervised exercise & discussion.
    • \n
  • inKind Capital | Boulder, CO | Discussing real-world problems, pair programming, dinner & drinks with the team
    • \n
  • Inmar | Winston-Salem, NC; Austin, TX & Remote | Take-home project and conversation-style interviews
    • \n
  • Innoplexus | Pune, India; Frankfurt, Germany | Take-home projects and On-site pair programming assignment.
    • \n
  • Instacart | San Francisco, CA | Take-home real world project, pair programming on-site
    • \n
  • InstantPost | Bangaluru, India | Remote assignment followed by Technical and Team round interview
    • \n
  • Integral. | Detroit, MI | Initial remote technical screen featuring test-driven development & pair programming, then on-site full day interview that involves pair programming on production code using test-driven development.
    • \n
  • Intelipost | São Paulo, BR | Take-home project, on-site code review and presentation (skype available if needed), discussion involving real world problems and interviews with different teams
    • \n
  • Intercom | San Francisco, CA; Chicago, IL; Dublin, Ireland | Real-world technical design and problem discussion, pair programming on-site
    • \n
  • Interset | Ottawa, Canada | Discussion of technical background and past experience. Relevant take-home project for junior developers
    • \n
  • Ithaka | Mumbai, India | Phone interview followed by a small development task. Finally a phone interview with CEO.
    • \n
  • iTrellis | Seattle, WA | Phone screen, then a take-home project, then pairing (remote or on-site) with 3 developers on the take-home project.
    • \n
  • iZettle | Stockholm, Sweden | Remote pair programming exercise, propose an architecture for an application and discuss about it in an informal format.
    • \n
\n

J - L

\n
    \n
  • Jamasoftware | Portland, OR | Initial phone screen with hiring manager. In person pairing on project similar to day-to-day work with a separate cultural interview
    • \n
  • Jamit Labs | Karlsruhe, Germany | Phone interview or on-site interview & take-home code challenge or on-site programming session
    • \n
  • Jiminny | Sofia, Bulgaria | Phone screen. Take-home exercise. Follow-up discussion.
    • \n
  • Jitbit | Remote; London, UK; Tel-Aviv, Israel | Take-home real-world task
    • \n
  • Jobtome | Stabio, Switzerland | Phone screen introduction with hiring manager. In site (or screen call) with Engineer Manager for a talk on skills and cultural fit.
    • \n
  • Journal Tech | Los Angeles, CA | Mini take-home project, phone interview, discussion on-site
    • \n
  • Journalism++ | Berlin, Germany | Apply through a relevant online challenge to show your technical skills and your capacity to investigate
    • \n
  • JustWatch | Berlin, Germany | Take-Home project, discussion on-site
    • \n
  • K Health | Tel Aviv, Israel | Phone screening to discuss technical background and past experience. Take-home assignment followed by on-site code review and interview. Cultural fit assessment
    • \n
  • Kahoot! | London, UK / Oslo, Norway | Phone screening to discuss technical background and past experience. Take-home assignment followed by on-site code review and interview. Cultural fit assessment
    • \n
  • Kata.ai | Malang, Indonesia / Jakarta, Indonesia | Take-home assignment, then invited to discuss the assignment and interview.
    • \n
  • Kayako | London, UK / Gurgaon, India | Take-home assignment, series of experience based interviews, cultural fit assessment
    • \n
  • Kentik | San Francisco, CA | Phone screening to discuss technical background and past experience. Take-home assignment followed by on-site code review and interview. Cultural fit assessment
    • \n
  • Keymetrics | Paris, France | Phone Interview, Take-home project based on our API, IRL meeting with the whole team
    • \n
  • Kindred Group, Native Apps Team | Stockholm SE, London UK | On-site/Skype programming task, Interview
    • \n
  • Kinnek | New York, NY | Phone screen, on-site pairing session, take-home project
    • \n
  • Kiwi.com | Brno, Czech Republic | Phone Interview, Take-home projects, On-site code review & interview
    • \n
  • KNPLabs | Nantes, France | First step: screening call directly with the CEO, to discuss company vision, assess cultural fit and experience. Second step: call or IRL interview with a developer and a project facilitator , technical discussions with focus on soft skills. The goal of the interview is for the 2 KNPeers to be able to answer: “Do I want to work with this person ?” If both say yes, the person is hired. If even at least one says no, the person is not hired.
    • \n
  • Koddi Inc. | Fort Worth, TX | Phone Interview(s), take-home project, on-site interview
    • \n
  • Kong | San Francisco, CA | Phone interview. Pairing and technical interviews. Take home assigment.
    • \n
  • Kongregate | Portland, OR | Phone screening. Take home project. On-site pairing and conversational technical interviews.
    • \n
  • Korbit | Seoul, South Korea | Take home assignment followed by on-site code review and interview
    • \n
  • Lab.Coop | Budapest, Hungary | Partnership-fit discussion, code-review and trial days.
    • \n
  • Landing.jobs | Lisbon, Portugal | Interviews (in-person or remote), Take home coding project
    • \n
  • Lanetix | San Francisco, CA | Our Hiring Process
    • \n
  • LateRooms | Manchester, UK | Telephone interview followed by coding problem at home. Suitable submissions proceed to an onsite interview.
    • \n
  • Launch Academy | Boston, Philadelphia | Nontechnical phone screen, pair programming with team member, and potentially a \"guest lecture\" for our students
    • \n
  • LaunchDarkly | Oakland, CA | Informational phone screen with Eng leadership, take home project, onsite interviews
    • \n
  • Learningbank | Copenhagen, DK | Take home assignment, followed by on-site code review.
    • \n
  • Legalstart.fr | Paris, France | Telephone interview followed by take-home challenges. Suitable applicants are asked to do further on-pair interviews on site.
    • \n
  • Leverton | Berlin, Germany | Initial chat with the HR continued with 1-2 rounds chat with the team; followed by a technical test and finally a chat with the CTO/MD. Jobs page
    • \n
  • Liberty Mutual | Seattle, WA; Boston, MA; Indianapolis, IN | Initial interview, discussion on-site, interview with peers
    • \n
  • Librato | San Francisco, CA; Boston, MA; Austin, TX; Vancouver, Canada; Krakow, Poland | Take home coding project, conversational technical interviews on-site
    • \n
  • Lightning Jar | San Antonio, Tx | Remote pairing session, Initial interview,discussion on-site
    • \n
  • Lightricks | Jerusalem, Israel | Initial interview, Take home project, discussion on-site
    • \n
  • LinkResearchTools | Vienna, Austria | Skype interview, mini take-home exercise, discussion on-site / personal interview
    • \n
  • Listium | Melbourne, Australia | Design and code proof of concept features with the team
    • \n
  • Litmus | Remote | General technical questions, take-home code challenge, discussion, on-site programming session, meet & greet with the team
    • \n
  • LittleThings | New York, NY | Take home code challenge, Discussion
    • \n
  • LoanZen | Bengaluru, India | Initial phone interview about experience, a solve-at-home project based on the kind of work we do at our company, on-site interview discussing the submitted solution and a general discussion with the whole team
    • \n
  • Lob | San Francisco, CA | Initial phone screen followed by an on-site interview. Technical problems discussed during the interview are all simplified versions of problems we've had to solve in production. Our entire interview process and what we're looking for is described in our blog post How We Interview Engineers.
    • \n
  • Locastic | Split, Croatia | Take-home code challenge, tehnical discussion & on-site programming session, meet & greet with the team
    • \n
  • Locaweb | São Paulo, Brazil | Skype interview, take-home project and discussion on-site
    • \n
  • LOGIBALL GmbH | Berlin, Hannover and Herne in Germany | Interviews and discussion
    • \n
  • Logic Soft | Chennai, India | Phone discussion, F2F pair programming exercise + discussion
    • \n
  • LonRes | London, United Kingdom | Quick introduction call with tech (Skype), coding task for ≈1 hour, face-to-face interview (or via Skype) and meeting with team members.
    • \n
  • LookBookHQ | Toronto, Canada | On-site discussion, pair programming exercise
    • \n
  • Loom | San Francisco, CA | Google Hangouts resume dive on past experience, take-home project OR architectural phone screen, on-site interviews (2 technical architecture related to work, 1 or 2 non-technical)
    • \n
  • Lydia | Paris, FR | Mini take-home project, phone interview, discussion on-site
    • \n
  • Lyft | San Francisco, CA | Pair programming on-site with your own personal laptop
    • \n
  • Lyoness Austria GmbH | Graz, Austria | Take-Home project, discussion on-site
    • \n
\n

M - O

\n
    \n
  • Made Tech | London, UK | Our hiring process
    • \n
  • Magnetis | São Paulo, Brazil & Remote | Phone interview + take home assignment, followed by pair programming and informal meeting with the team.
    • \n
  • Major League Soccer | New York, NY | Phone interview + short take home project, which is daily work focused. In person interview could involve discussing past projects or pair programming.
    • \n
  • MakeMusic | Boulder, CO; Denver, CO | Phone screen, take home project, remote and on-site interviews for technical and cultural fit
    • \n
  • MakeTime | Lexington, KY | Practical exercise and/or a pairing session on site
    • \n
  • Mango Solutions | London (UK), Chippenham (UK) | Initial phone interview, followed by on-site interview with take-home assignment
    • \n
  • Mapbox | San Francisco, CA; Washington, DC; Ayacucho, Peru; Bangalore, India; Berlin, Germany; Remote | Conversational interviews, paid onsite project with team.
    • \n
  • Mavenlink | San Francisco, CA; Irvine, CA; Salt Lake City, UT | On-site pairing with multiple engineers. Pairing exercises and pairing on company code.
    • \n
  • Maxwell Health | Boston, MA | Take-home exercise or pairing session with team. Then conversational meetings with members of the team.
    • \n
  • Me & Company | Düsseldorf, Germany | You join us for one or two paid trial days to work on an assignment and to meet the team.
    • \n
  • Media Pop | Singapore, Singapore | Take-home or unsupervised (onsite) real-world assignment
    • \n
  • Meetrics | Berlin, Germany | Initial interview, take-home code challenge and review
    • \n
  • Meltwater | Manchester, NH | Small take home exercise that will be presented to the team during a QA style interview
    • \n
  • Mention | Paris, FR | Take-home small exercise followed up by on site meetings with your future coworkers
    • \n
  • Mercatus | Toronto, Canada | Practical on-site project similar to daily work
    • \n
  • mfind | Warsaw, PL | Phone call about technical experience, Take-home project or technical test(depends on experience), Onsite interview with technical lead.
    • \n
  • miDrive | London, UK | Phone screen, Take-home project / technical test, Onsite interview with senior and peer.
    • \n
  • milch & zucker | Gießen, Germany | Interview with direct feedback, applicants providing working sample, code review (product code or personal code of applications)
    • \n
  • Mimir | Indianapolis, Indiana | Take home interview, phone screen, in person interview where you decide how you want to be interviewed (questions, pair programming, etc.)
    • \n
  • Minute Media | Tel-Aviv, Israel | Phone screening with engineer. On-site real-world challenge questions with two engineers. Sometimes a take-home assignment or existing code sample submission.
    • \n
  • Mirumee | Wroclaw, Poland; Remote | Pair programming and code review using one of the issues (or Pull Requests) in our open-source Saleor project, general discussion about programming, technology and candidate's experience
    • \n
  • Mixmax | San Francisco, CA | Takehome assignment purely based on their platform, followed by phone interview
    • \n
  • MobileCashout | Barcelona, Spain; Valencia, Spain | Quick introduction video call with a tech (less than 10-15 minutes). On-site open source contribution to a project of candidates choosing, paired with a tech from the team. Interview and a short questionaire about software design and relevant technologies. Interview and presentation of the company with a HR rep.
    • \n
  • Mobilethinking | Geneva, Switzerland | 1 hour discussion about technical background and past experiences, preferably in-person
    • \n
  • Mode | San Francisco, CA | Phone interview followed by onsite pair-architecting and discussion
    • \n
  • MokaHR | Beijing, China | Take home project/challenge, then on-site programming session taken from problems we encounter at work
    • \n
  • Moneytree Front-end Web Team | Tokyo, Japan | Pair programming exercise and social gathering with team
    • \n
  • Monzo | London, UK & Remote | Phone interview with another engineer. Take-home assignment. Call to debrief on take-home assignment. Half-day interview (on-site or Hangouts) with three conversational sessions: (1) building on take-home test & real-world system design (verbal and collaborative); (2) digging into knowledge & understanding in 1-2 other relevant technical areas; (3) general background, teams and ways of working.
    • \n
  • Moteefe | London, UK & Remote | Interview with CTO. Take home project/challenge.
    • \n
  • Mutual Mobile | Austin, TX; Hyderabad, India | Technical discussion, code test based on actual work you'll be doing, panel style discussions for cross-functional and culture-fit.
    • \n
  • Mutual of Omaha | Omaha, NE, USA | Panel Style Interviews analyzing problem solving, ability to adapt well to change, and interpersonal communication skills.
    • \n
  • Mutually Human Software | MI, OH, WA | Collaborative problem analysis and design exercise, pairing exercise
    • \n
  • Nanobox | Lehi, UT; Remote | A phone/video/person-to-person interview with a look at past projects (github, bitbucket, source code, etc.)
    • \n
  • Native Instruments | Berlin, Germany | Takehome programming assignment and personal interviews with part of the hiring team.
    • \n
  • Nearsoft Inc | Hermosillo, Mexico; Chihuahua, Mexico; Mexico City, Mexico | Takehome logic test, english interview to check communication skills, short technical interview about experience, long technical discussion about languages/tools/practices you will use on daily basis, pair programming session.
    • \n
  • Nedap | Groenlo, Netherlands / Remote | A simple conversation, human to human and a small on-site project
    • \n
  • Neoteric | Gdańsk, Warsaw Poland; Remote | Face2Face conversation, take home exercise & pair programming session
    • \n
  • Netflix | Los Gatos, CA | Takehome exercise, series of real-world interviews with engineers, HR, engineering managers and our director
    • \n
  • Netguru | Warsaw, Poland; Remote | Takehome exercise & pair programming session
    • \n
  • Netlandish | Los Angeles, CA; Remote | Takehome exercise, chat interview, video interview
    • \n
  • Netlify | San Francisco, CA | Paid takehome project and online/onsite discussion
    • \n
  • New Relic | San Francisco, CA | Takehome exercise &/ or pair programming session depending on the team
    • \n
  • NewStore | Berlin, Germany; Hannover, Germany; Erfurt, Germany; Boston, MA | Telephone technical interview, code sample submission or takeaway coding exercise, on-site pair programming, design session (1/2 day)
    • \n
  • NewVoiceMedia | Basingstoke, England; Wroclaw, Poland | Telephone interview, takeaway coding exercise, on-site pair programming, code review & technical discussion (1/2 day)
    • \n
  • Nexcess.net | Southfield, MI | We mostly chat to get a feel on both ends if there's a good cultural fit. We ask questions to see what experience you have and how you think as a programmer. At some point we look at some of your code or have you work on some of ours (1 hour).
    • \n
  • Nimbl3 | Bangkok, Thailand | Takehome exercise and specific role discussion
    • \n
  • Niteoweb | Ljubljana, Slovenia | Join us for a week to see if we fit
    • \n
  • Nitro | Dublin, Ireland; San Francisco, CA | Phone Call, Take Home Test, Hiring Manager Phone Interview followed by an onsite discussion
    • \n
  • Noa | Berlin, Germany; San Francisco, CA | 1 technical chat, 2-3 cultural chats with colleagues from different departments in the team, if these work a pair programming exercise
    • \n
  • NodeSource | Remote | A person-to-person walk through of a past project of yours
    • \n
  • Nomoko,camera | Zurich, Switzerland | Three interrogations
    • \n
  • Nord Software | Helsinki, Finland; Tampere, Finland; Stockholm, Sweden | Take-home exercise & interview with CEO and senior developer
    • \n
  • NoRedInk | San Francisco, CA | Take-home exercise & pair programming session
    • \n
  • NoviCap | Barcelona, Spain | Takehome exercise & discussion on-site
    • \n
  • Novoda | London, UK; Liverpool, UK; Berlin, Germany; Barcelona, Spain; Remote | 2 x Pairing sessions & conversational interviews (public repo)
    • \n
  • Novus Partners | New York, NY | Take-home exercise & on-site exercises (choice of laptop or whiteboard)
    • \n
  • Nozbe | Remote | Take-home exercise & interview with the team
    • \n
  • npm, Inc | Oakland, CA / Remote | No technical challenges. Just interview conversations.
    • \n
  • Nubank | São Paulo, BR | Phone conversation, take-home exercise, code walkthrough, on-site code pairing.
    • \n
  • numberly | Paris, France | Series of interviews, that go over technical background, past experiences and cultural knowledge
    • \n
  • numer.ai | San Francisco, CA
    • \n
  • Nutshell | Ann Arbor, MI, US | Email screen / take-home programming excercise (public repo)
    • \n
  • Nyon | Amsterdam, The Netherlands | 1. Skype (or real life) interview 2. Take home exercise (3-4 hours) 3. Meet entire team and pair programming sessions
    • \n
  • O'Reilly Media | Sebastopol, CA; Boston, MA; Remote | Phone conversation, take-home exercise or pair programming session, team interview, all via Google Hangout
    • \n
  • Object Partners, Inc. | Minneapolis, MN; Omaha, NE | Phone interview to gauge mutual interest, followed by a slightly more in-depth technical round-table interview
    • \n
  • Objective, Inc. | Salt Lake City, UT | Take-home programming exercise, then onsite friendly chat with team
    • \n
  • OCTO Technology | Paris, France | HR interview to go over your experiences and cultural knowledge. Then more or less informal discussion with two future team members about architecture design, agile practices, take-home project, pair programming...
    • \n
  • Olist | Curitiba, Brazil | Take-home project and remote or on-site interviews
    • \n
  • Omada Health | San Francisco, CA | Take home exercise and/or pair programming session.
    • \n
  • Onfido | London, UK; Lisbon, Portugal | Take-home exercise and on-site interview/discussion with potential team
    • \n
  • Ontame.io | Copenhagen, Denmark | Take home exercise and specific role discussion
    • \n
  • Opbeat | Copenhagen, Denmark | Pairing on a real-world problem
    • \n
  • Openmind | Monza, Italy | On-site interviews
    • \n
  • Optoro | Washington, DC | Take home exercise. Review your code onsite.
    • \n
  • Ostmodern | London, UK | Take-home exercise & discussion on-site
    • \n
  • Outbrain | NYC, Israel | Take-home exercise & discussion
    • \n
  • Outlandish | London, UK | Take-home exercise, real-world pair programming session, friendly chat with team
    • \n
  • Outlook iOS & Android | San Francisco, CA / New York, NY | Take-home project & online / onsite discussion
    • \n
  • The Nerdery | Minneapolis, MN; Chicago, IL; Phoenix, AZ; Kansas City, KS | Take-home exercise
    • \n
  • The Outline | New York, NY | Take-home exercise
    • \n
\n

P - R

\n
    \n
  • PACE Telematics | Karlsruhe, Germany | Culture and mindset check, on-site meet and great, small code challenge to see development style and strategy
    • \n
  • Paessler AG | Nuremberg, Germany | Pairing with different engineers on a real problem
    • \n
  • Pagar.me | São Paulo, BR | Skype interview, on-site pairing task and-or real world problem solving process / presentation
    • \n
  • Pager | New York, NY; Remote | Short phone interview, conversational interviews, take-home exercise & discussion
    • \n
  • PagerDuty | San Francisco, CA / Toronto, Canada / Atlanta, GA | Zoom / on-site pair programming and tasks
    • \n
  • Palatinate Tech | London, UK | Hangout/Skype/phone followed by (normally) on-site pairing task
    • \n
  • Parabol | New York, NY; Los Angeles, CA; Remote | Culture check followed by compensated, open-source contribution skills evaluation
    • \n
  • Pariveda Solutions | Dallas, TX / Houston, TX / Atlana, GA / Washington, DC / New York, NY / Chicago, IL / San Francisco, CA / Seattle, WA / Los Angeles, CA | Personality assessment (Predictive Index) and case study. Programming aptitude test (language independent) for college hires.
    • \n
  • PassFort | London, UK | Skype interview, and on-site pairing task
    • \n
  • Paws | London, UK | Phone screening, take-home project, on-site pairing/discussion on your solution and meet the team.
    • \n
  • Paybase | London, UK | Phone screening, Take home project, On-site interview for technical and culture fit, Open Q&A session with team
    • \n
  • PayByPhone | Vancouver, Canada | Remote programming interview, on-site \"meet the team\"
    • \n
  • Peaksware Companies (TrainingPeaks, TrainHeroic, MakeMusic) | Boulder, CO; Denver, CO | Phone screen, take home project, remote and on-site interviews for technical and cultural fit
    • \n
  • PeerStreet | Los Angeles, CA | Phone, take home project & on-site to meet the team
    • \n
  • Pento | Remote | Quick personal interview, take home project
    • \n
  • Persgroep, de | Amsterdam, Netherlands | Tech interview (technical background and experiences) and culture fit, both on-site
    • \n
  • Pex | Los Angeles, CA; Remote | 3 sessions: brief phone conversation (30 min); take home assignment (2 hours); on-site or video discussion without any coding (2 hours)
    • \n
  • Phoodster | Stockholm, Sweden | Take-home exercise + on-site discussion
    • \n
  • Pillar Technology | Ann Arbor, MI; Columbus, OH; Des Moines, IA | Phone, take home exercise, in-person pairing session and site visit.
    • \n
  • Pilot | Remote | Two calls. Introduction one (30m) + verification of communication skills and remote work experience (15m)
    • \n
  • Pivotal | San Francisco, CA; Los Angeles, CA; New York, NY; Boston, MA; Denver, CO; Atlanta, GA; Chicago, IL; Seattle, WA; Washington, D.C.; London, UK; Sydney, Australia; Toronto, Canada; Paris, France; Berlin, Germany; Tokyo, Japan | Initial remote technical screen featuring pair programming; on-site pair programming interview, generally a full day pairing on production code using test-driven development.
    • \n
  • Platform.sh | Paris, International | Remote Interview, Wide-Ranging discussions on many diverse subjects. Remote interviews with team members.
    • \n
  • Platform45 | Johannesburg, South Africa; Cape Town, South Africa | On-site interview, take-home project and culture fit day
    • \n
  • Playlyfe | Bangalore, India | Short personal interview, on-site demonstration of programming in browser devtools followed by discussion about the problem
    • \n
  • Pluralsight | Salt Lake City, UT; San Francisco, CA; Boston, MA; Orlando, FL | Takehome exercise & pair programming session
    • \n
  • Pointman | Buffalo, NY | Takehome exercise + on-site discussion
    • \n
  • Poki | Amsterdam, The Netherlands | Pair programming on-site w/ two engineers where we focus on teamwork, googling relevant documentation and fixing things together.
    • \n
  • Polar | Toronto, Canada | Phone interview, followed by 1-2 onsite pair-programming interviews based on their platform
    • \n
  • Popstand | Los Angeles, CA | Build MVPs for startups
    • \n
  • Popular Pays | Chicago, IL | Phone chat/coffee to determine what will be worked on during a day of pair-programming on a real problem that the candidate thinks best demonstrates their skills.
    • \n
  • Pragmateam | Sydney, Australia | Engineering Consultancy And Delivery - Takehome exercise & discussion
    • \n
  • PremiumBeat | Montreal, Canada | Discussion and general, high level questions
    • \n
  • Primary | New York, NY / Remote | Phone chat, take home exercise, pair program and discuss onsite.
    • \n
  • PromptWorks | Philadelphia, PA | Take-home project, pair programming, discussion on-site
    • \n
  • Pusher | London, UK | Solve a real-world problem through a design session with our engineers
    • \n
  • Pygmalios | Bratislava, Slovakia | Take-home project related to business and discussion with our engineers.
    • \n
  • Quiet Light Communications | Rockford, IL, USA | Discussion, work samples and/or small freelance project
    • \n
  • Quintype | Bengaluru, India / San Mateo, USA | Take home project, pair programming, discussion on-site
    • \n
  • Quizizz | Bengaluru, India | Phone chat, real world assignment, discussion w/ developers, pair programming, discussion on-site
    • \n
  • Ragnarson | Lodz, Poland; Remote | Take-home exercise & pair programming session
    • \n
  • Railslove | Cologne, Germany | Have a coffee in our office, casual chat with us, pair programming on a real project
    • \n
  • Raising IT | London, UK | Coffee with a team member, on-site pair programming and discussion
    • \n
  • Rakuten | Tokyo, Japan | Discuss about relevant experience
    • \n
  • Rapyuta Robotics | Bengaluru, India / Tokyo, Japan / Zurich, Switzerland | Take-home assignment related to our ongoing projects, series of technical / experience based interviews, candidate presentation
    • \n
  • Rayfeed | Vancouver, Warsaw | Video-call interview followed by a take-home exercise
    • \n
  • Razorpay | Bangalore, India | Phone screen, On-site pair programming, and ocassionally a take home project.
    • \n
  • ReactiveOps | Remote | Start with a brief talk with CTO or VP of Engineering, take home coding challenge, then remote interviews with several people on the engineering team
    • \n
  • Reaktor | New York, NY; Amsterdam, Netherlands; Helsinki, Finland; Tokyo, Japan | Discussion, work samples from previous projects (work or hobby), take-home exercise if needed for further info
    • \n
  • Real HQ | Austin, TX / Chicago, IL / Remote | Phone/video interviews, a take-home coding exercise, and a remote pair programming session.
    • \n
  • Realync | Chicago, IL / Carmel, IN / Remote | Quick phone interview, then a take home project and finally in person interview (open discussions instead of quizzes - anything technical are real-world problems).
    • \n
  • Red Badger | London, UK | Phone & Skype interview, take home exercise, On-site interview
    • \n
  • RedCarpet | New Delhi, India | Interview, work sample/take-home project and discussion/code reviews
    • \n
  • Reflektive | San Francisco, CA; Bengaluru, India | A short take home project/assignment, followed by a couple of technical and non-technical discussions online and offline.
    • \n
  • Relabe | San Juan, PR | First we screen for cultural fit then check for technical proficiency. 2-3 Interviews max in SJ
    • \n
  • Rentify | London, UK | Phone call, take home real-world project, on-site pair programming, product discussion
    • \n
  • RentoMojo | Bangalore, India | Short takehome project + phone interview
    • \n
  • Resin.io | Remote | Take home real-world project and a couple of technical and non-technical discussions
    • \n
  • ReSpark | London, UK | Phone conversation followed by on-site interview w/ task relevant to daily role.
    • \n
  • RestaurantOps | Scottsdale, AZ | Take Home Project & pair programming session
    • \n
  • Revlv | Manila, Philippines | Discussion about developer skills, previous projects and experiences.
    • \n
  • Rex Software | Brisbane, Australia | Take home project, feedback + interview
    • \n
  • Rizk.com | Ta' Xbiex, Malta | Take-home assignment, discussion w/ developers
    • \n
  • Rockode | Bangalore, India | Real world assignment, group hack session, discussions
    • \n
  • Rose Digital | New York, NY | Phone conversation followed by pair coding components that mirror day to day work, in person discussion about code, take home project if needed for more info
    • \n
  • RubyGarage | Dnipro, UA | Take-home project, code review and discussion on-site
    • \n
  • Runtastic | Linz, Austria; Vienna, Austria | Video call with recruiting staff, take home project, video call for code review, discussion, questions
    • \n
\n

S - U

\n
    \n
  • Sahaj Software Solutions | Bangalore, India; Chennai, India; San Jose, CA | Take home code + Pairing + Discussion
    • \n
  • Salesforce.org Tech & Products | Remote | Phone screen, hands-on programming test solving real-world problems, Google Hangouts video sessions with engineers
    • \n
  • Salesloft | Atlanta, GA | Phone interview, take-home project, cultural-fit interview, technical interview where candidate modifies take-home project
    • \n
  • Samsara | San Francisco, CA; Atlanta, GA; London, UK | Phone interview, onsite interview (technical challenges based on real problems we've faced at Samsara)
    • \n
  • SC5 Online | Helsinki, Finland; Jyväskylä, Finland | Take-home assignment (intentionally short, takes at most an hour to complete), discussion and review assignments
    • \n
  • Segment | San Francisco, CA; Vancouver, Canada | Phone interview, take-home assignment (small fun project), onsite interview (technical + core/culture) -> intended to set you up for success
    • \n
  • Sensor Tower | San Francisco, CA | Phone call, on-site interview including discussion about projects/skills and a short real-world programming challenge
    • \n
  • Sensu | Remote | Video call, choice of pairing session or take home programming assignment
    • \n
  • Séntisis | Madrid, Spain; Mexico City, Mexico; Bogotá, Colombia; Santiago de Chile, Chile; Remote | Phone call, on-site/remote interview including discussion about projects/skills and a short real-world pair-programming exercise
    • \n
  • SerpApi | Austin, TX / Remote | Skype core value and culture interview, review of contributions on GitHub or other platforms, and take-home project if online contributions are not enough.
    • \n
  • Sertis | Bangkok, Thailand | Technical & culture fit interview, take-home project, follow-up discussion
    • \n
  • Setapp Sp. z o.o. | Poznan, Poland | Online/face-to-face discussion with developers about everyday programming dilemmas & reviewing your own code
    • \n
  • Sharoo | Zurich, Switzerland; Remote | Soft skills interview, take home project, technical interview based on take home project.
    • \n
  • Shogun | Remote | Discussion about software development and past experience, code samples, paid trial period.
    • \n
  • Showmax | Beroun, Czechia; Prague, Czechia; Remote | Take home project, then a pair-programming and discussion onsite / Hangouts round.
    • \n
  • ShuttleCloud | Chicago, IL / Madrid, Spain | Take-home project, then on-site code walk through and a real world problem discussion.
    • \n
  • Signal AI | London, UK | Phone screen; take home code exercise; on-site code extension with pair programming and discussion
    • \n
  • Simple | Portland, OR | Discussion about software development and architecture skills and experience.
    • \n
  • Simpli.fi | Fort Worth, TX, USA | Takehome code challenge and review
    • \n
  • SimpliField | Lille, France | Interview with the CTO and the developer team
    • \n
  • Simply Business | London, UK / Remote | Three stage, one day interview with quick feedback. One of the stages is 1.5h pair-programming session, where interviewee is assigned a task and interviewing developer plays role of Product Owner.
    • \n
  • Skyrise Pro | Chicago, IL | Take-home coding project, on-site interview including coding enhancements to the take-home project, offsite group activity
    • \n
  • Slack | San Francisco, CA | Call with recruiter, 1 week take-home project, call with hiring manager, on-site interview covering high-level system design, best software development practices and culture-fit
    • \n
  • Small Improvements | Berlin, Germany
    • \n
  • Social Tables | Washington, DC | Chat about skills and past experiences + bring in a code sample from previous work or side project to discuss
    • \n
  • SocialCops | New Delhi, India | A mini project (to be done within 8 days), followed by a discussion with the team you're applying to. Then as the final step, a call with one of the founders.
    • \n
  • Softwear | Amsterdam, Netherlands | Writing software for the fashion industry - remotely - in an international team.
    • \n
  • Sogilis | Grenoble, France | Discussion about interests, practices, and motivation. Presentation/code review/pair programming on a personal or professional project.
    • \n
  • Sourcegraph | San Francisco, CA & Remote | Tailored to the candidate, often consists of take-home work, discussion of real-world eng challenges, and product familiarity.
    • \n
  • Splice | New York, NY; Remote | Call with recruiter, 4 hr take-home project, video interview w two engs on take-home exercise, video call with hiring manager, video call w VPE & principal eng to talk about architecture.
    • \n
  • Spreedly | Durham, NC | Take-home project related to business
    • \n
  • Springer Nature (Asia) | Tokyo, Japan | Discussion & Pair programming session
    • \n
  • Springer Nature Digital | Berlin, Germany; London, UK | Phone chat; take-home project; then a pairing session based on the project, a technical chat, and a chat with non-technical team members
    • \n
  • SpronQ | Amsterdam, Netherlands | Takehome coding challenge
    • \n
  • Square | San Francisco, CA | Pair programming in a work environment
    • \n
  • Srijan Technologies | Delhi, India | General high level questions/discussion followed by Pair programming OR take-home coding challenge
    • \n
  • Stardog Union | Washington, DC; Remote | Technical discussion and general interest conversations
    • \n
  • Statflo | Toronto, Canada | Phone screening, take home project, on-site interview discussing the take home project, high-level architectural brainstorm, and questions about career and team work.
    • \n
  • store2be | Berlin, Germany | Skype/on-site interview, take-home project
    • \n
  • Storm | Seattle, WA; Remote | Phone/skype screen --> Take-home coding assignment --> on-site/skype interview loop to discuss assignment; meet-and-greet with other teams --> +1/-1 based on team consensus
    • \n
  • STYLABS | Mumbai, India | Phone Screen, Take-home project and discussion on-site
    • \n
  • Subvertical (VerticalChange) | Remote | Phone screening, live pair programming & personal project code review
    • \n
  • Sulvo | New York, NY / Remote | Interview over video call for cultural fit first, if you pass we proceed with technical interview that doesn't include coding games or challenges
    • \n
  • Superplayer | Porto Alegre, Brazil | Skype/On-site interview, take-home project and interview with CTO and CEO
    • \n
  • SurveySparrow | Kochi, India | Skype interview, take home project and code review, interview with CTO and CEO
    • \n
  • SVTi (Sveriges Television) | Stockholm, Sweden | On-site interview, take-home project, follow up interview where you walk through how you chose to solve the task.
    • \n
  • SweetIQ | Montreal, Canada | Discussion and general, high level questions
    • \n
  • Symphony Commerce | San Francisco, CA / Remote | Take-home project (phone), design discussion, review and critique our code, debugging questions
    • \n
  • Symplicity | Arlington, VA | Take-home project and code review in-person
    • \n
  • SysGarage | Buenos Aires, Argentina | Take-home project and real world pair programming
    • \n
  • TableCheck | Tokyo, Japan | Show us your code! Brief Skype interview and take-home project or pairing for those without code.
    • \n
  • Tailor Brands | Tel Aviv-Yafo, Israel | Discuss knowledge and interests, explore previous work experience, during the technical interview we discuss real-life problems.
    • \n
  • tails.com | Richmond (London), UK | Live pair programming or take home project with review
    • \n
  • Tanooki Labs | New York, NY | Paid half-day take home project with followup review and discussion
    • \n
  • Tattoodo | Copenhagen, Denmark | Takehome exercise
    • \n
  • Telus Digital | Toronto, Canada; Vancouver, Canada | Discuss knowledge and interest, explore previous work, pair with developers when possible, alternatively take home project.
    • \n
  • Ten Thousand Coffees | Toronto, Canada | Take home project, then explain how you solved the project
    • \n
  • Tes | Remote; London, UK | Remote pair programming session on React/Node kata with small takehome exercise as prep. Remote interview with senior engineers about previous experience, technical knowledge and interests.
    • \n
  • Tesco PLC | London, United Kingdom | Pair programming and casual hypothetical system design discussion
    • \n
  • Test Double | Remote | Initial conversation, Consulting interview, Technical interview, Pair programming, Takehome exercise.
    • \n
  • Textio | Seattle, WA | Initial screen to discuss experience and interest in a role at Textio; then a take-home programming task is discussed during a 1-hour tech screen (on-site or remote); finally a larger take-home project, simulating real work, is discussed during an on-site presentation plus 1-1s; How we hire
    • \n
  • The Book of Everyone | Barcelona, Spain | Quick interview, meet the team, pairing with developers on your own project
    • \n
  • theScore | Toronto, Canada | Coding challenge & systems design challenge
    • \n
  • Thinkmill | Sydney, Australia | Initial meet and greet interview with Thinkmillers from the relevant team, take home assignment followed by tech review on a followup interview.
    • \n
  • Thinslices | Iasi, Romania | Takehome exercise & in person pair programming on a simple Kata.
    • \n
  • thoughtbot | San Francisco, CA; London, UK | Our interview process
    • \n
  • ThoughtWorks | San Francisco, CA | Interviews with ThoughtWorkers of diverse backgrounds and roles; take home assignment followed by in person pairing session.
    • \n
  • Thread | London, UK | Take home test, real world architecture design, real world pair programming.
    • \n
  • ThreatSpike Labs | London, UK | Take home computing and security related challenges to be completed over a week.
    • \n
  • Tilde | Portland, OR | Pair programming sessions with each member of the team, working on problems similar to daily work.
    • \n
  • Timbuktu | Cape Town, South Africa | On site interview and pair programming exercise
    • \n
  • Titanium | Moldova, Chisinau | High level review of public activity on GitHub/BitBucket/Gitlab (if applicable) and screening via phone, On-site technical & Team fit interview, Formal \"Meet the Team\" meeting
    • \n
  • Toggl | Remote / Tallinn, Estonia | Online test on basic programming skills, followed by interview (typically includes get-to-know questions and technical skill testing). Depending on the team, there may be a take-home or live coding assignment. Paid test week to work with the team on actual bugs/features.
    • \n
  • Torii | Raanana, Israel | Take-home fun full-stack-app exercise followed by an on-site review
    • \n
  • Toucan Toco | Paris, France | Pair-programming and TDD
    • \n
  • Touché | Singapore, Singapore; Barcelona, Spain | Skype / Phone / on-site interview, take-home project, technical interview to discuss the project, team interview.
    • \n
  • TrademarkVision | Brisbane, Australia | On site interview and quick take-home excercise
    • \n
  • TrainHeroic | Boulder, CO; Denver, CO | Phone screen, take home project, remote and on-site interviews for technical and cultural fit
    • \n
  • TrainingPeaks | Boulder, CO; Denver, CO | Phone screen, take home project, remote and on-site interviews for technical and cultural fit
    • \n
  • TripStack | Toronto, Canada | Take-home assignment, followed up by a face to face code walk through
    • \n
  • Trivago | Düsseldorf, Germany | Case Study, Skype Interview, On site Interview with some code review exercises
    • \n
  • Trōv | Remote | Take-home project with followup interview from actual prospective teammates
    • \n
  • Truefit | Pittsburgh, PA | Phone screen, Take-home project, In-person interview with the team that you would join
    • \n
  • Truora | Bogotá, Colombia; Cali, Colombia; Remote | Take-home project, followed by phone interview with tech leads to discuss the project.
    • \n
  • Truss | San Francisco, CA; Remote | Phone screen/ Take-home project that resembles a problem Truss has seen many times before / Followup interview about the project / Closing Interview, all interviews done remotely
    • \n
  • Twistlock | Tel Aviv, Israel | Takehome
    • \n
  • uberall | Berlin, Germany | 30-min coding on-site, then a trial day
    • \n
  • uBiome | San Francisco, CA / Santiago, Chile | High level screening over the phone or on-site, take home project, code review and discussion
    • \n
  • Ubots | Porto Alegre, Brazil | Skype/On-site interview, take-home project, technical interview
    • \n
  • Unbounce | Vancouver, BC | Phone screen, take-home project, project discussion, technical interview
    • \n
  • Unboxed | London, UK | Take home feature requests, pairing with developers to extend solution, team-fit interviews, chat with a director
    • \n
  • Unearth | Seattle, WA | Take home project, team-fit interviews, technical discussion
    • \n
  • Unito | Montreal, Canada | Team-fit interviews, technical discussion, take home project
    • \n
  • Untappd | Wilmington, NC; New York, NY; Los Angeles, CA | Review portfolio - What projects have you worked on? + personality assessment, + interview
    • \n
  • Updater | New York, NY | Begin-at-home assignment highly relevant to role, presented and discussed during on-site.
    • \n
  • Uprise | Uppsala, Sweden | Take-home assignment, code review and discussion on-site
    • \n
  • Urban Massage | London, UK | Project done at home, in-person walk through. Meeting the team is an integral part.
    • \n
  • UserTesting | Atlanta, GA; San Francisco, CA; Mountain View, CA | Initial interview, pair programming, and offer
    • \n
  • uSwitch | London, UK | Take-home project related to our business area, followed by pairing with developers to extend it
    • \n
\n

V - X

\n
    \n
  • Valassis Digital | Seattle, WA; San Francisco, CA; Lansing, MI; Hamburg, Germany | Phone screen, on-site interview with group, paired whiteboard problem solving and discussion, take-home project and follow-up review
    • \n
  • Valuemotive | Helsinki, Finland | Code examples from previous projects (work or hobby) or take-home exercise
    • \n
  • Varsity Tutors | Remote | Take home assignment, presentation of assignment, live code review with team. Advanced / high-level chat with team based on skillset and role.
    • \n
  • Vayu Technology | Sydney, Australia; Kathmandu, Nepal | Short interview, general programming questions and short take home challenge.
    • \n
  • Venminder, Inc. | Elizabethtown, KY; Louisville, KY | Initial phone screen to explain position. If candidate interested they get a take home assignment followed by a non-scripted in-person interview with team members to judge personality fit.
    • \n
  • Verve | London, UK | An intentionally short, take home exercise that mirrors real project work and incorporates code review elements
    • \n
  • Vingle | Seoul, Korea | Written interview, takehome project, in-person, conversational code review and interviews with engineers and engineering managers
    • \n
  • virtual7 | Kalrsruhe, Germany | Phone interview and on-site interview based on personal experience.
    • \n
  • Visma e-conomic | Copenhagen, Denmark | Take home assignment, assignment presentation and discussion
    • \n
  • Voltra Co. | Amsterdam, Netherlands / New York, NY / Remote | Show us your github account, tell us what you know. Let's pair on an OSS PR!
    • \n
  • VSX | Dresden, Germany | On-site interview, home coding challenge, presentation/discussion of proposed solutions
    • \n
  • VTEX | Rio de Janeiro, Brazil | Take-home project, Skype interview and then in-person talk.
    • \n
  • VTS | New York City, New York | Technical Phone Screen, Pair programming on-site & in-person talks with multiple engineers
    • \n
  • Waymark | Detroit, MI | Technical phone screen, take-home project, going over the project in person, follow up day in the office
    • \n
  • Wealthsimple | Toronto, Canada | Pair programming on a problem similar to daily work, discussion of system design
    • \n
  • WeAreHive | London, UK | Just walk us through your best code or we give you a small real-world exercise to do at home.
    • \n
  • Webantic | Manchester, UK | Basic TNA self-assessment and real-world problem-solving
    • \n
  • Webflow | San Francisco, CA & Remote | Short take-home challenge, followed by a paid 3-5 day freelance contract project
    • \n
  • Weebly | San Francisco, CA; Scottsdale, AZ; New York, NY | Phone screens (30 min to 1 hour) by a recruiter, an engineering manager (focused on your past experiences), an engineer (focused on system / db / api design). Followed by a paid 3 day onsite where you work on a project and then present it to a team of engineers.
    • \n
  • Weedmaps | Irvine, CA; Denver, CO; Tucson, AZ; Madrid, Spain; Remote | Phone screen, Group interview, and possible code review
    • \n
  • wemake.services | Remote | Short unpaid take-home challenge, code review, portfolio discussion
    • \n
  • Weploy | Melbourne, Australia; Sydney, Australia | Phase 1: Face to face interview to get to know the candidate. Phase 2: Problem solving session that involves designing a solution to a real-world problem followed by 1/2 day of pairing with a senior dev on implementing the proposed solution.
    • \n
  • WeTransfer | Amsterdam, Netherlands | Culture fit and fundamentals chat, skills interview - no whiteboarding! - and take-home project, communication and collaboration interview, meet with the VP of Engineering
    • \n
  • Wheely | Moscow, Russia | Get to know each other in under 30 minutes on-site or via Skype, take-home challenge, on-site review and interview with the team.
    • \n
  • Wildbit | Philadelphia, PA & Remote | Take-home project followed by interviews.
    • \n
  • Wirecard Brasil | São Paulo, Brazil | Phone or on-site Cultural Fit interview, take-home coding challenge, code review and discussing in-person.
    • \n
  • WorldGaming | Toronto, Canada | Technical Interview, Solution Design, Take Home Assignment, then Culture fit interview with the team
    • \n
  • woumedia | Remote | Getting to know each other and aligning expectations. Talking about past experiences, projects you are proud of and latest challenges you faced. It's followed by a use case study from one of our current projects.
    • \n
  • WyeWorks | Montevideo, Uruguay | Take-home project and discussion on-site
    • \n
  • X-Team | Remote | A short, fun Node.js challenge, followed by a series of culture-based interview questions, followed by a creative mock project with tons of freedom on how to approach, and follow-up questions about the approach they chose to discuss the tradeoffs. Usually a 10-30 day paid training is rewarded to top candidates to prep them for remote communication skills needed to join a team.
    • \n
  • XING | Hamburg, Germany | Take-home coding challenge, on-site review and short interviews with future team.
    • \n
\n

Y -

\n
    \n
  • 1000mercis group | Paris, France | Series of interviews, that go over technical background, past experiences and cultural knowledge
    • \n
  • 18F | Remote; Washington, DC; New York, NY; Chicago, IL; San Francisco, CA | take-home coding exercise (2-4 hours), technical and values-match interviews over video chat
    • \n
  • 3D Hubs | Amsterdam, The Netherlands | Take-home code challenge from our product's domain followed by discussion remote/on-site, sometimes do an additional on-site pair programming session.
    • \n
  • 500friends | San Francisco, CA; Remote | Take home challenge followed by onsite expansion of the submission and high level discussions (design exercise or overview of past projects)
    • \n
  • 500Tech | Tel Aviv, Israel | Pair programming on a laptop in working env
    • \n
  • 8th Light | Chicago, IL; London, UK; Los Angeles, CA; New York, NY | Take home code challenge, discussion, pair programming session
    • \n
  • Yhat | Brooklyn, NY | Demo something cool you built and walk us thru the code + design decisions
    • \n
  • YLD | London, UK | Take home-code challenge, pair-programming session and discussion about past experience
    • \n
  • Yodas | Binyamina, Israel | Coding tasks over github repository
    • \n
  • Yoyo Wallet | London, UK | Take home code challenge, discussion of the code challenge, and general, high level questions
    • \n
  • YunoJuno | London, UK | Code challenge based on a realistic feature request on a real open-source package created and used at YunoJuno; phone/video interview with members of the Product team to explore technical background, experiences, interests, cultural fit; on-site interview, usually with Product Manager and CTO
    • \n
  • ZAP Group | São Paulo, Brazil | Takehome exercise, series of real-world interviews with engineers, HR, engineering managers and product managers on site.
    • \n
  • Zencargo | London, UK | Initial interview with CTO, covering professional experience interests and expectations, followed by one technical interview focused on fundamentals and familiarity with best practices. A further short chat with co-founders to get to know each other - - either onsite or remote.
    • \n
  • Zenefits (UI Team) | San Francisco, CA | One technical phone screen focused on JS fundamentals and/or one timeboxed take-home challenge. The onsite is a series of interviews designed to test your understanding of JS, HTML/CSS, design, etc.
    • \n
  • Zerodha | Bengaluru, India | Technical call at the beginning and one take home programming task.
    • \n
  • Zype | New York, NY & Remote | Skype/Video call with VP of Product and a take-home challenge.
    • \n
"},{"url":"/docs/docs/snippets/","relativePath":"docs/docs/snippets.md","relativeDir":"docs/docs","base":"snippets.md","name":"snippets","frontmatter":{"title":"Useful Snippets","weight":0,"excerpt":"lorem-ipsum","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

A list of all of my articles to link to future posts

\n

Scope, Closures & Context In JavaScript
\n\"JavaScript's global scope is like a public toilet. You can't avoid going in there, but try to limit your contact with...bryanguner.medium.com

\n

Fundamental Javascript Concepts You Should Understand
\nPlain Old JS Object Lesson Conceptsbryanguner.medium.com

\n

Mutability And Reference VS Privative Types in JavaScript
\nMutability && Primitive && Reference Examplesbryanguner.medium.com

\n

Array Callback Methods Implemented With For Loops
\nHow to implement array callback methods in JavaScriptjavascript.plainenglish.io

\n

JavaScript in Plain English
\nNew JavaScript and Web Development articles every day.javascript.plainenglish.io

\n

Beginner's Guide To React Part 2
\nAs I learn to build web applications in React I will blog about it in this series in an attempt to capture the...bryanguner.medium.com

\n

A Very Quick Guide To Calculating Big O Computational Complexity
\nBig O: big picture, broad strokes, not detailsbryanguner.medium.com

\n

Introduction to React for Complete Beginners
\nAll of the code examples below will be included a second time at the bottom of this article as an embedded gist.javascript.plainenglish.io

\n

Scheduling: setTimeout and setInterval
\nWe may decide to execute a function not right now, but at a later time. That's called \"scheduling a call\".javascript.plainenglish.io

\n

LocalStorage VS SessionStorage
\nWeb storage objects localStorage and sessionStorage allow to save key/value pairs in the browser.bryanguner.medium.com

\n

These Are The Bash Shell Commands That Stand Between Me And Insanity.
\nI will not profess to be a bash shell wizard... but I have managed to scour some pretty helpful little scripts from Stack...bryanguner.medium.com

\n

How To Implement Native(ES6) Data Structures Using Arrays & Objects
\nSmart data structures and dumb code works better than the other way around -\"Eric S. Raymond\"bryanguner.medium.com

\n

Objects in Javascript
\nCodepen with examples for you to practice with below!medium.com

\n

The Beginner's Guide To JavaScript
\nPart 1javascript.plainenglish.io

\n

Web Developer Resource List Part 4
\nA all encompassing list of tools and resources for web developersmedium.com

\n

Star Gazers
\nThe place that enthusiastic and stargazer to everything.medium.com

\n

VSCode Extensions Specifically for JavaScript Development
\nVSCode Extensions that are indispensable in JavaScript developmentmedium.com

\n

Fundamental Data Structures in JavaScript
\nA simple to follow guide to Lists Stacks and Queues, with animated gifs, diagrams, and code examples!javascript.plainenglish.io

\n

Web Development Resources Part 3
\nI'm the psychological equivalent of a physical hoarder only instead of empty soda cans and dead racoons it's lists of...bryanguner.medium.com

\n

Web Development Interview Part 3💻
\nThis installment is going to be the least technically demanding thus far however these questions are a more realistic...medium.com

\n

The Best Cloud-Based Code Playgrounds of 2021 (Part 1)
\nA plethora of front-end code playgrounds have appeared over the years. They offer a convenient way to experiment with...bryanguner.medium.com

\n

Front End Interview Questions Part 2
\nThese will focus more on vocabulary and concepts than the application driven approach in my last post!medium.com

\n

Web Developer Resource List Part 2
\nBecause I compile these things compulsively anyway...medium.com

\n

HTTP Basics
\n\"If you want to build a ship, don't drum up the men and women to gather wood, divide the work, and give orders...levelup.gitconnected.com

\n

JavaScript Frameworks & Libraries
\nMy Awesome JavaScript List Part 2javascript.plainenglish.io

\n

My 'awesome' list of JavaScript resources
\nEveryone's seen the 'Awesome' lists on GitHub... and they are indeed awesome... so today I am going to attempt to curate my...javascript.plainenglish.io

\n

Everything You Need to Get Started With VSCode + Extensions & Resources
\nCommands:levelup.gitconnected.com

\n

My Favorite VSCode Themes
\nThemeslevelup.gitconnected.com

\n

Object Oriented Programming in JavaScript
\nObject-Oriented Programminglevelup.gitconnected.com

\n

JavaScript Rotate (Array) ProblemWalkthrough
\nExplanation for Rotate Rightmedium.com

\n

Bryan Guner - Medium
\nA plethora of front-end code playgrounds have appeared over the years. They offer a convenient way to experiment with...bryanguner.medium.com

\n

Postgresql Cheat Sheet
\nPostgreSQL commandsmedium.com

\n

Everything You Need to Get Started With VSCode + Extensions & Resources
\nCommands:levelup.gitconnected.com

\n

Super Simple Intro To HTML
\nWhat is HTML, CSS & JS and why do we need all three?levelup.gitconnected.com

\n

Understanding Git (A Beginners Guide Containing Cheat Sheets & Resources)
\nBasic Git Work Flow.levelup.gitconnected.com

\n

Git-Tricks
\nRefsbryanguner.medium.com

\n

A Quick Guide to Big-O Notation, Memoization, Tabulation, and Sorting Algorithms by Example
\nCurating Complexity: A Guide to Big-O Notationmedium.com

\n

Python Study Guide for a JavaScript Programmer
\nA guide to commands in Python from what you know in JavaScriptlevelup.gitconnected.com

\n

Lists Stacks and Queue's In JavaScript
\nA simple to follow guide to these fundamental data structures with animated gifs, diagrams, and code examples!bryanguner.medium.com

\n

Web Development Resources Part 3
\nI'm the psychological equivalent of a physical hoarder only instead of empty soda cans and dead racoons it's lists of...bryanguner.medium.com

\n

My 'awesome' list of JavaScript resources
\nEveryone's seen the 'Awesome' lists on GitHub... and they are indeed awesome... so today I am going to attempt to curate my...javascript.plainenglish.io

\n

Web Developer Resource List Part 2
\nBecause I compile these things compulsively anyway...medium.com

\n

Web Development Interview Part 3💻
\nThis installment is going to be the least technically demanding thus far however these questions are a more realistic...bryanguner.medium.com

\n

The Web Developer's Technical Interview
\nQuestions....Answers... and links to the missing pieces.medium.com

\n

Front End Interview Questions Part 2
\nThese will focus more on vocabulary and concepts than the application driven approach in my last post!medium.com

\n

Running List Of Interesting Articles, Tools and Ideas... as I Explore Them
\nTranslation if you read this today (3/21/2021) it will be exceedingly short... because it's just gonna accumulate entries...bryanguner.medium.com

\n

The Best Cloud-Based Code Playgrounds of 2021 (Part 1)
\nA plethora of front-end code playgrounds have appeared over the years. They offer a convenient way to experiment with...bryanguner.medium.com

\n

Fundamental Data Structures In JavaScript
\nData structures in JavaScriptmedium.com

\n

HTTP Basics
\n\"If you want to build a ship, don't drum up the men and women to gather wood, divide the work, and give orders...levelup.gitconnected.com

\n

JavaScript Frameworks & Libraries
\nMy Awesome JavaScript List Part 2javascript.plainenglish.io

\n

bgoonz/Cumulative-Resource-List
\nList of useful cheatsheets Inspired by @sindresorhus awesome and improved by these amazing contributors . If you see a...github.com

\n

My Favorite VSCode Themes
\nThemeslevelup.gitconnected.com

\n

JavaScript Rotate (Array) ProblemWalkthrough
\nExplanation for Rotate Rightmedium.com

\n

Everything You Need To Know About Relational Databases, SQL, PostgreSQL and Sequelize To Build...
\nFor Front end developers who like myself struggle with making the jump to fullstack.bryanguner.medium.com

\n

The Complete JavaScript Reference Guide
\nYou will want to bookmark thisjavascript.plainenglish.io

\n

Modules in Javascript
\nDifferences between Node.js and browsersmedium.com

\n

An Introduction to Markdown (Bonus Markdown Templates Included)
\nBasic Syntax Guidelevelup.gitconnected.com

\n

Web Dev Resources
\nWeb Developmentlevelup.gitconnected.com

\n

Regular Expressions
\ndescription:medium.com

\n

A Collection of my most useful Gist Entries
\nThis list is in no particular order!bryanguner.medium.com

\n

VsCode Extension Readme Compilation
\nMarkdown PDFbryanguner.medium.com

\n

Learn CSS So That Your Site Doesn't Look Like Garbage
\nCSS Selectorsjavascript.plainenglish.io

\n

PostgreSQL Setup For Windows & WSL/Ubuntu
\nIf you follow this guide to a tee... you will install PostgreSQL itself on your Windows installation. Then, you will...bryanguner.medium.com

\n

Emmet Cheat Sheet
\nEMMETbryanguner.medium.com

\n

Express Quick Sheet
\nSettingsbryanguner.medium.com

\n

Deploy React App To Heroku Using Postgres & Express
\nHeroku is an web application that makes deploying applications easy for a beginner.bryanguner.medium.com

\n

Basic Web Development Environment Setup
\nWindows Subsystem for Linux (WSL) and Ubuntulevelup.gitconnected.com

\n

Fetch Quick Sheet
\nFetchbryanguner.medium.com

\n

By Bryan Guner on March 22, 2021.

\n

Canonical link

\n

Exported from Medium on July 13, 2021.

\n

view rawA-list-of-my-articles.md hosted with ❤ by GitHub

\n

A Very Quick Guide To Calculating Big O Computational Complexity

\n

Big O: big picture, broad strokes, not details

\n
\n

A Very Quick Guide To Calculating Big O Computational Complexity

\n

Big O: big picture, broad strokes, not details

\n

For a more complete guide... checkout :

\n

A Quick Guide to Big-O Notation, Memoization, Tabulation, and Sorting Algorithms by Example
\nCurating Complexity: A Guide to Big-O Notationmedium.com

\n

\n
    \n
  • way we analyze how efficient algorithms are without getting too mired in details - can model how much time any function will take given n inputs - interested in order of magnitude of number of the exact figure - O absorbs all fluff and n = biggest term - Big O of 3x^2 +x + 1 = O(n^2)
    • \n
\n

Time Complexity

\n

no loops or exit & return = O(1)

\n

0 nested loops = O(n)
\n1 nested loops = O(n^2)
\n2 nested loops = O(n^3)
\n3 nested loops = O(n^4)

\n

recursive: as you add more terms, increase in time as you add input diminishes
\nrecursion: when you define something in terms of itself, a function that calls itself

\n
    \n
  • used because of ability to maintain state at diffferent levels of recursion
    • \n
  • inherently carries large footprint
    • \n
  • every time function called, you add call to stack
    • \n
\n

iterative: use loops instead of recursion (preferred)

\n
    \n
  • favor readability over performance
    • \n
\n

O(n log(n)) & O(log(n)): dividing/halving

\n
    \n
  • if code employs recursion/divide-and-conquer strategy
    • \n
  • what power do i need to power my base to get n
    • \n
\n

Time Definitions

\n
    \n
  • constant: does not scale with input, will take same amount of time
    • \n
  • for any input size n, constant time performs same number of operations every time
    • \n
  • logarithmic: increases number of operations it performs as logarithmic function of input size n
    • \n
  • function log n grows very slowly, so as n gets longer, number of operations the algorithm needs to perform doesn't increase very much
    • \n
  • halving
    • \n
  • linear: increases number of operations it performs as linear function of input size n
    • \n
  • number of additional operations needed to perform grows in direct proportion to increase in input size n
    • \n
  • log-linear: increases number of operations it performs as log-linear function of input size n
    • \n
  • looking over every element and doing work on each one
    • \n
  • quadratic: increases number of operations it performs as quadratic function of input size n
    • \n
  • exponential: increases number of operations it performs as exponential function of input size n
    • \n
  • number of nested loops increases as function of n
    • \n
  • polynomial: as size of input increases, runtime/space used will grow at a faster rate
    • \n
  • factorial: as size of input increases, runtime/space used will grow astronomically even with relatively small inputs
    • \n
  • rate of growth: how fast a function grows with input size
    • \n
\n

\n

Space Complexity

\n
    \n
  • How does the space usage scale/change as input gets very large?
    • \n
  • What auxiliary space does your algorithm use or is it in place (constant)?
    • \n
  • Runtime stack space counts as part of space complexity unless told otherwise.
    • \n
\n

Sorting Algorithms

\n

\n

\n

Data Structures

\n

\n

\n

For similar content check out my GitHub:

\n

bgoonz - Overview
\nWeb Developer, Electrical Engineerhttps://bryanguner.medium.com/ https://portfolio42.netlify.app/...github.com

\n

By Bryan Guner on May 19, 2021.

\n

Canonical link

\n

Exported from Medium on July 13, 2021.

\n

view rawA-Very-Qui.md hosted with ❤ by GitHub

\n

Array Callback Methods Implemented With For Loops

\n

How to implement array callback methods in JavaScript

\n
\n

Array Callback Methods Implemented With For Loops

\n

How to implement array callback methods in JavaScript

\n

\n

Functions are called \"First Class Objects\" in JavaScript because

\n
    \n
  • A function is an instance of the Object type
    • \n
  • A function can have properties and has a link back to its constructor method
    • \n
  • You can store the function in a variable
    • \n
  • You can pass the function as a parameter to another function
    • \n
  • You can return the function from a function
    • \n
\n

What do you think will be printed in the following:

\n

Anonymous callback, a named callback

\n
function foo(callback) {\n    console.log('grape');\n    callback();\n}\n\nfunction bar() {\n    console.log('banana');\n}\n\nconst fruitBasket = function() {\n    console.log('apple');\n    bar();\n    foo(bar);\n    foo(function() {\n        console.log('orange');\n    });\n    console.log('pear');\n};\n\nfruitBasket();\n
\n

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

\n
function greaterValue(value, cb1, cb2) {\n    // compare cb1 invoked with value to cb2 invoked with value\n    // return the greater result\n\n    let res1 = cb1(value);\n    let res2 = cb2(value);\n    if (res1 > res2) {\n        // if this is false, we move out of if statement\n        return res1;\n    }\n    return res2;\n}\n\nlet negate = function(num) {\n    return num * -1;\n};\n\nlet addOne = function(num) {\n    return num + 1;\n};\n\nconsole.log(greaterValue(3, negate, addOne));\nconsole.log(greaterValue(-2, negate, addOne));\n
\n

Note: we do not invoke negate or addOne (by using () to call them), we are passing the function itself.

\n

Write a function, myMap, that takes in an array and a callback as arguments. The function should mimic the behavior of Array.prototype.map

\n
function myMap(arr, callback) {\n    // iterate through the array, perform the cb on each element\n    // return a new array with those new values\n    let mapped = [];\n\n    for (let i = 0; i < arr.length; i++) {\n        // remember that map passes three args with each element.\n        let val = callback(arr[i], i, arr);\n        mapped.push(val);\n    }\n\n    return mapped;\n}\n\nlet double = function(num) {\n    return num * 2;\n};\nconsole.log(myMap([1, 2, 3], double));\n
\n

Write a function, myFilter, that takes in an array and a callback as arguments. The function should mimic the behavior of Array.prototype.filter

\n
function myFilter(arr, callback) {\n    let filtered = [];\n\n    for (let i = 0; i < arr.length; i++) {\n        let element = arr[i];\n\n        if (callback(element, i, arr)) {\n            filtered.push(element);\n        }\n    }\n\n    return filtered;\n}\n
\n

Write a function, myEvery, that takes in an array and a callback as arguments. The function should mimic the behavior of Array.prototype.every

\n
function myEvery(arr, callback) {\n    for (let i = 0; i < arr.length; i++) {\n        let element = arr[i];\n\n        if (callback(element, i, arr) === false) {\n            return false;\n        }\n    }\n    return true;\n}\n
\n

Further Examples of the above concepts

\n
const createMeowValue = () => {\n  console.log(this.name);\n  let meow = function () {\n    console.log(this);\n    console.log(this.name + ' meows');\n  }\n  meow = meow.bind(this);\n  return meow;\n};\n\nconst name = 'Fluffy';\n\nconst cat = {\n  name: name,\n  age: 12,\n  createMeow: function () {\n    console.log(this.name);\n    let meow = () => {\n      const hello = 'hello';\n      console.log(this.name + ' meows');\n    };\n    let world = '';\n    if (true) {\n      world = 'world';\n    }\n    console.log(world);\n    // meow = meow.bind(this);\n    return meow;\n  }\n};\n\ncat.newKey = function () {\n  const outermostContext = this;\n  const innerFunc = () => {\n    secondContext = this;\n    console.log(secondContext === outermostContext)\n    return function () {\n      innermostContext = this;\n    }\n  };\n  return innerFunc.bind(outermostContext);\n};\n\nconst meow = cat.createMeow(); // method-style invocation\nmeow(); // function-style invocation\n\nconsole.log('-------')\n\nconst createMeow = cat.createMeow;\nconst globalMeow = createMeow(); // function-style\nglobalMeow(); // function-style\n\nfunction createSmoothie(ingredient) {\n  const ingredients = [ingredient];\n  return ingredients;\n}\n\n// console.log(createSmoothie('banana'));\n// console.log(createSmoothie('apple'));\n\n// one parameter only\n// first argument is a string\n// return an array\n// DO NOT USE forEach\n
\n

References:

\n

App Academy Open
\nApp Academy Open is the first free, online web development course that's meant to get you hired as a developer. Get...open.appacademy.io

\n

MDN Web Docs
\nRead more at hacks.mozilla.org Roughly a year ago at Mozilla we started an effort to improve Firefox stability on...developer.mozilla.org

\n

Introduction: callbacks
\nTo demonstrate the use of callbacks, promises and other abstract concepts, we'll be using some browser methods...javascript.info

\n

More content at plainenglish.io

\n

By Bryan Guner on May 27, 2021.

\n

Canonical link

\n

Exported from Medium on July 13, 2021.

\n

view rawArray-Call.md hosted with ❤ by GitHub

\n

Bash Commands That Save Me Time and Frustration

\n

Here's a list of bash commands that stand between me and insanity.

\n
\n

Bash Commands That Save Me Time and Frustration

\n

Here's a list of bash commands that stand between me and insanity

\n

\n

This article will be accompanied by the following github repository which will contain all the commands listed as well as folders that demonstrate before and after usage!

\n

bgoonz/bash-commands-walkthrough
\nto accompany the medium article I am writing. Contribute to bgoonz/bash-commands-walkthrough development by creating an...github.com

\n
\n

The readme for this git repo will provide a much more condensed list... whereas this article will break up the commands with explanations... images & links!

\n
\n

I will include the code examples as both github gists (for proper syntax highlighting) and as code snippets adjacent to said gists so that they can easily be copied and pasted... or ... if you're like me for instance; and like to use an extension to grab the markdown content of a page... the code will be included rather than just a link to the gist!

\n

\n

Here's a Cheatsheet

\n

Getting Started (Advanced Users Skip Section)

\n
\n

✔ Check the Current Directory ➡ pwd

\n

On the command line, it's important to know the directory we are currently working on. For that, we can use pwd command.

\n

\n

It shows that I'm working on my Desktop directory.

\n

✔ Display List of Files ➡ ls

\n

To see the list of files and directories in the current directory use ls command in your CLI.

\n

\n

Shows all of my files and directories of my Desktop directory.

\n
    \n
  • To show the contents of a directory pass the directory name to the ls command i.e. ls directory_name.
    • \n
  • Some useful ls command options:-
    • \n
\n

OptionDescriptionls -alist all files including hidden file starting with '.'ls -llist with the long formatls -lalist long format including hidden files

\n

✔ Create a Directory ➡ mkdir

\n

We can create a new folder using the mkdir command. To use it type mkdir folder_name.

\n

\n

Use ls command to see the directory is created or not.

\n

I created a cli-practice directory in my working directory i.e. Desktop directory.

\n

✔ Move Between Directories ➡ cd

\n

It's used to change directory or to move other directories. To use it type cd directory_name.

\n

\n

Can use pwd command to confirm your directory name.

\n

Changed my directory to the cli-practice directory. And the rest of the tutorial I'm gonna work within this directory.

\n

✔ Parent Directory ➡ ..

\n

We have seen cd command to change directory but if we want to move back or want to move to the parent directory we can use a special symbol .. after cd command, like cd ..

\n

✔ Create Files ➡ touch

\n

We can create an empty file by typing touch file_name. It's going to create a new file in the current directory (the directory you are currently in) with your provided name.

\n

\n

I created a hello.txt file in my current working directory. Again you can use ls command to see the file is created or not.

\n

Now open your hello.txt file in your text editor and write Hello Everyone! into your hello.txt file and save it.

\n

✔ Display the Content of a File ➡ cat

\n

We can display the content of a file using the cat command. To use it type cat file_name.

\n

\n

Shows the content of my hello.txt file.

\n

✔ Move Files & Directories ➡ mv

\n

To move a file and directory, we use mv command.

\n

By typing mv file_to_move destination_directory, you can move a file to the specified directory.

\n

By entering mv directory_to_move destination_directory, you can move all the files and directories under that directory.

\n

Before using this command, we are going to create two more directories and another txt file in our cli-practice directory.

\n

mkdir html css touch bye.txt

\n

\n

Yes, we can use multiple directories & files names one after another to create multiple directories & files in one command.

\n

\n

Moved my bye.txt file into my css directory and then moved my css directory into my html directory.

\n

✔ Rename Files & Directories ➡ mv

\n

mv command can also be used to rename a file and a directory.

\n

You can rename a file by typing mv old_file_name new_file_name & also rename a directory by typing mv old_directory_name new_directory_name.

\n

\n

Renamed my hello.txt file to the hi.txt file and html directory to the folder directory.

\n

✔ Copy Files & Directories ➡ cp

\n

To do this, we use the cp command.

\n
    \n
  • You can copy a file by entering cp file_to_copy new_file_name.
    • \n
\n

\n

Copied my hi.txt file content into hello.txt file. For confirmation open your hello.txt file in your text editor.

\n
    \n
  • You can also copy a directory by adding the -r option, like cp -r directory_to_copy new_directory_name.
    • \n
\n

The -r option for \"recursive\" means that it will copy all of the files including the files inside of subfolders.

\n

\n

Here I copied all of the files from the folder to folder-copy.

\n

✔ Remove Files & Directories ➡ rm

\n

To do this, we use the rm command.

\n
    \n
  • To remove a file, you can use the command like rm file_to_remove.
    • \n
\n

\n

Here I removed my hi.txt file.

\n
    \n
  • To remove a directory, use the command like rm -r directory_to_remove.
    • \n
\n

\n

I removed my folder-copy directory from my cli-practice directory i.e. current working directory.

\n

✔ Clear Screen ➡ clear

\n

Clear command is used to clear the terminal screen.

\n

✔ Home Directory ➡ ~

\n

The Home directory is represented by ~. The Home directory refers to the base directory for the user. If we want to move to the Home directory we can use cd ~ command. Or we can only use cd command.

\n
\n

MY COMMANDS

\n

1.) Recursively unzip zip files and then delete the archives when finished

\n

here is a folder containing the before and after... I had to change folder names slightly due to a limit on the length of file-paths in a github repo.

\n
find . -name \"*.zip\" | while read filename; do unzip -o -d \"`dirname \"$filename\"`\" \"$filename\"; done;\n\nfind . -name \"*.zip\" -type f -print -delete\n
\n
\n

2.) Install node modules recursively

\n
npm i -g recursive-install\n\nnpm-recursive-install\n
\n
\n

3.) Clean up unnecessary files/folders in git repo

\n
find . -empty -type f -print -delete #Remove empty files\n\n# -------------------------------------------------------\nfind . -empty -type d -print -delete #Remove empty folders\n\n# -------------------------------------------------------\n\n# This will remove .git folders...    .gitmodule files as well as .gitattributes and .gitignore files.\n\nfind . \\( -name \".git\" -o -name \".gitignore\" -o -name \".gitmodules\" -o -name \".gitattributes\" \\) -exec rm -rf -- {} +\n\n# -------------------------------------------------------\n\n# This will remove the filenames you see listed below that just take up space if a repo has been downloaded for use exclusively in your personal file system (in which case the following files just take up space)# Disclaimer... you should not use this command in a repo that you intend to use with your work as it removes files that attribute the work to their original creators!\n\nfind . \\( -name \"*SECURITY.txt\" -o -name \"*RELEASE.txt\" -o -name \"*CHANGELOG.txt\" -o -name \"*LICENSE.txt\" -o -name \"*CONTRIBUTING.txt\" -name \"*HISTORY.md\" -o -name \"*LICENSE\" -o -name \"*SECURITY.md\" -o -name \"*RELEASE.md\" -o -name \"*CHANGELOG.md\" -o -name \"*LICENSE.md\" -o -name \"*CODE_OF_CONDUCT.md\" -o -name \"\\*CONTRIBUTING.md\" \\) -exec rm -rf -- {} +\n
\n

In Action

\n

The following output from my bash shell corresponds to the directory:

\n

bgoonz/bash-commands-walkthrough
\nDeployment github-pages Navigation Big O notation is the language we use for talking about how long an algorithm takes...github.com

\n

which was created by running the aforementioned commands in in a perfect copy of this directory

\n

bgoonz/DS-ALGO-OFFICIAL
\nDeployment github-pages Navigation Big O notation is the language we use for talking about how long an algorithm takes...github.com

\n
\n

.....below is the terminal output for the following commands:

\n
\n
pwd\n/mnt/c/Users/bryan/Downloads/bash-commands/steps/3-clean-up-fluf/DS-ALGO-OFFICIAL-master\n
\n
\n

After printing the working directory for good measure:

\n
\n
find . -empty -type f -print -delete\n
\n
\n

The above command deletes empty files recursively starting from the directory in which it was run:

\n
\n
./CONTENT/DS-n-Algos/File-System/file-utilities/node_modules/line-reader/test/data/empty_file.txt\n./CONTENT/DS-n-Algos/_Extra-Practice/free-code-camp/nodejs/http-collect.js\n./CONTENT/Resources/Comments/node_modules/mime/.npmignore\n./markdown/tree2.md\n./node_modules/loadashes6/lodash/README.md\n./node_modules/loadashes6/lodash/release.md\n./node_modules/web-dev-utils/Markdown-Templates/Markdown-Templates-master/filled-out-readme.md\n|01:33:16|bryan@LAPTOP-9LGJ3JGS:[DS-ALGO-OFFICIAL-master] DS-ALGO-OFFICIAL-master_exitstatus:0[╗___________o>\n
\n
\n

The command seen below deletes empty folders recursively starting from the directory in which it was run:

\n
\n
find . -empty -type d -print -delete\n
\n
\n

The resulting directories....

\n
\n
|01:33:16|bryan@LAPTOP-9LGJ3JGS:[DS-ALGO-OFFICIAL-master] DS-ALGO-OFFICIAL-master_exitstatus:0[╗___________o>\n\nfind . -empty -type d -print -delete\n./.git/branches\n./.git/objects/info\n./.git/refs/tags\n|01:33:31|bryan@LAPTOP-9LGJ3JGS:[DS-ALGO-OFFICIAL-master] DS-ALGO-OFFICIAL-master_exitstatus:0[╗___________o>\n
\n
\n

The command seen below deletes .git folders as well as .gitignore, .gitattributes, .gitmodule files

\n
\n
find . \\( -name \".git\" -o -name \".gitignore\" -o -name \".gitmodules\" -o -name \".gitattributes\" \\) -exec rm -rf -- {} +\n
\n

The command seen below deletes most SECURITY, RELEASE, CHANGELOG, LICENSE, CONTRIBUTING, & HISTORY files that take up pointless space in repo's you wish to keep exclusively for your own reference.

\n

!!!Use with caution as this command removes the attribution of the work from it's original authors

\n

\"!!!Use

\n

!!!Use with caution as this command removes the attribution of the work from it's original authors!!!!!find . ( -name \"SECURITY.txt\" -o -name \"RELEASE.txt\" -o -name \"CHANGELOG.txt\" -o -name \"LICENSE.txt\" -o -name \"CONTRIBUTING.txt\" -name \"HISTORY.md\" -o -name \"LICENSE\" -o -name \"SECURITY.md\" -o -name \"RELEASE.md\" -o -name \"CHANGELOG.md\" -o -name \"LICENSE.md\" -o -name \"CODEOFCONDUCT.md\" -o -name \"*CONTRIBUTING.md\" ) -exec rm -rf -- {} +

\n
\n

4.) Generate index.html file that links to all other files in working directory

\n
#!/bin/sh\n# find ./ | grep -i \"\\.*$\" >files\nfind ./ | sed -E -e 's/([^ ]+[ ]+){8}//' | grep -i \"\\.*$\">files\nlisting=\"files\"\nout=\"\"\nhtml=\"index.html\"\nout=\"basename $out.html\"\nhtml=\"index.html\"\ncmd() {\n  echo '  <!DOCTYPE html>'\n  echo '<html>'\n  echo '<head>'\n  echo '  <meta http-equiv=\"Content-Type\" content=\"text/html\">'\n  echo '  <meta name=\"Author\" content=\"Bryan Guner\">'\n  echo '<link rel=\"stylesheet\" href=\"./assets/prism.css\">'\n  echo ' <link rel=\"stylesheet\" href=\"./assets/style.css\">'\n  echo ' <script async defer src=\"./assets/prism.js\"></script>'\n  echo \"  <title> directory </title>\"\n  echo \"\"\n  echo '<style>'\necho '    a {'\necho '      color: black;'\necho '    }'\necho ''\necho '    li {'\necho '      border: 1px solid black !important;'\necho '      font-size: 20px;'\necho '      letter-spacing: 0px;'\necho '      font-weight: 700;'\necho '      line-height: 16px;'\necho '      text-decoration: none !important;'\necho '      text-transform: uppercase;'\necho '      background: #194ccdaf !important;'\necho '      color: black !important;'\necho '      border: none;'\necho '      cursor: pointer;'\necho '      justify-content: center;'\necho '      padding: 30px 60px;'\necho '      height: 48px;'\necho '      text-align: center;'\necho '      white-space: normal;'\necho '      border-radius: 10px;'\necho '      min-width: 45em;'\necho '      padding: 1.2em 1em 0;'\necho '      box-shadow: 0 0 5px;'\necho '      margin: 1em;'\necho '      display: grid;'\necho '      -webkit-border-radius: 10px;'\necho '      -moz-border-radius: 10px;'\necho '      -ms-border-radius: 10px;'\necho '      -o-border-radius: 10px;'\necho '    }'\necho '  </style>'\n  echo '</head>'\n  echo '<body>'\n  echo \"\"\n  # continue with the HTML stuff\n  echo \"\"\n  echo \"\"\n  echo \"<ul>\"\n  awk '{print \"<li><a href=\\\"\"$1\"\\\">\",$1,\"&nbsp;</a></li>\"}' $listing\n  # awk '{print \"<li>\"};\n  #  {print \" <a href=\\\"\"$1\"\\\">\",$1,\"</a></li>&nbsp;\"}' \\ $listing\n  echo \"\"\n  echo \"</ul>\"\n  echo \"</body>\"\n  echo \"</html>\"\n}\ncmd $listing --sort=extension >>$html\n
\n

In Action

\n

I will use this copy of my Data Structures Practice Site to demonstrate the result:

\n

side-projects-42/DS-Bash-Examples-Deploy
\nDeployment github-pages Navigation Big O notation is the language we use for talking about how long an algorithm takes...github.com

\n

\n

The result is a index.html file that contains a list of links to each file in the directory

\n
\n

here is a link to and photo of the resulting html file:

\n
\n

index.html
\nCONTENT/DS-n-Algos/quirky-meninsky-4181b5.netlify.app

\n

\n
\n

5.) Download all links to a files of a specified extension on a user provided (url) webpage

\n
wget -r -A.pdf https://overapi.com/gitwget --wait=2 --level=inf --limit-rate=20K --recursive --page-requisites --user-agent=Mozilla --no-parent --convert-links --adjust-extension --no-clobber -e robots=off\n
\n
\n

The result is stored in this directory:

\n
\n

\n
\n

6.)Recursively remove lines of text containing the string badFolder from files in the working directory

\n
find . -type f -exec sed -i '/badFolder/d' ./* {} \\;\n\n# OR\n\nfind . -name 'result.md'  -type f -exec sed -i '/badFolder/d' ./* {} \\;\n
\n

As an example I will run this command on a file containing the text:

\n
Hacks Blog\n\nRead more at hacks.mozilla.org\n\nbadFolder\n\nbadFolder Implementing Private Fields for JavaScript\n\nWhen implementing a language feature for JavaScript, an implementer must make decisions about how the language in the specification maps to the implementation. Private fields is an example of where the specification language and implementation reality diverge, at least in SpiderMonkey-- the JavaScript engine which powers Firefox. To understand more, I'll explain what private fields are, a couple of models for thinking about them, and explain why our implementation diverges from the specification language.The post Implementing Private Fields for JavaScript appeared first on Mozilla Hacks - the Web developer blog.\n\nPosted Tuesday, June 8, 2021 by Matthew Gaudet\n\nLooking fine with Firefox 89\n\nFirefox 89 has smartened up and brings with it a slimmed-down, slightly more minimalist interface.badFolder Along with this new look, we get some great styling features including a force-colours feature for media queries and better control over how fonts are displayed. The long-awaited top-level await keyword for JavaScript modules is now enabled, as well as the PerformanceEventTiming interface, which is another addition to the performance suite of APIs: 89 really has been working out!The post Looking fine with Firefox 89 appeared first on Mozilla Hacks - the Web developer blog.\n\nbadFolder\n\nPosted Tuesday, June 1, 2021 by Chris Mills\n\nbadFolder\n\nImproving Firefox stability on Linux\n\nRoughly a year ago at Mozilla we started an effort to improve Firefox stability on Linux. This effort quickly became an example of good synergies between FOSS projects.The post Improving Firefox stability on Linux appeared first on Mozilla Hacks - the Web developer blog.\n\nPosted Wednesday, May 19, 2021 by Gabriele Svelto badFolder\n\nIntroducing Firefox's new Site Isolation Security Architecture\n\nLike any web browser, Firefox loads code from untrusted and potentially hostile websites and runs it on your computer. To protect you against new types of attacks from malicious sites and to meet the security principles of Mozilla, we set out to redesign Firefox on desktop.The post Introducing Firefox's new Site Isolation Security Architecture appeared first on Mozilla Hacks - the Web developer blog.\n\nPosted Tuesday, May 18, 2021 by Anny Gakhokidze\n\nPyodide Spin Out and 0.17 Release\n\nWe are happy to announce that Pyodide has become an independent and community-driven project. We are also pleased to announce the 0.17 release for Pyodide with many new features and improvements. Pyodide consists of the CPython 3.8 interpreter compiled to WebAssembly which allows Python to run in the browser.The post Pyodide Spin Out and 0.17 Release appeared first on Mozilla Hacks - the Web developer blog. badFolder\n\nPosted Thursday, April 22, 2021 by Teon Brooks\n
\n

I modified the command slightly to apply only to files called 'result.md':

\n
\n

The result is :

\n
\n
Hacks Blog\n\nRead more at hacks.mozilla.org\n\nWhen implementing a language feature for JavaScript, an implementer must make decisions about how the language in the specification maps to the implementation. Private fields is an example of where the specification language and implementation reality diverge, at least in SpiderMonkey-- the JavaScript engine which powers Firefox. To understand more, I'll explain what private fields are, a couple of models for thinking about them, and explain why our implementation diverges from the specification language.The post Implementing Private Fields for JavaScript appeared first on Mozilla Hacks - the Web developer blog.\n\nPosted Tuesday, June 8, 2021 by Matthew Gaudet\n\nLooking fine with Firefox 89\n\nPosted Tuesday, June 1, 2021 by Chris Mills\n\nImproving Firefox stability on Linux\n\nRoughly a year ago at Mozilla we started an effort to improve Firefox stability on Linux. This effort quickly became an example of good synergies between FOSS projects.The post Improving Firefox stability on Linux appeared first on Mozilla Hacks - the Web developer blog.\n\nIntroducing Firefox's new Site Isolation Security Architecture\n\nLike any web browser, Firefox loads code from untrusted and potentially hostile websites and runs it on your computer. To protect you against new types of attacks from malicious sites and to meet the security principles of Mozilla, we set out to redesign Firefox on desktop.The post Introducing Firefox's new Site Isolation Security Architecture appeared first on Mozilla Hacks - the Web developer blog.\n\nPosted Tuesday, May 18, 2021 by Anny Gakhokidze\n\nPyodide Spin Out and 0.17 Release\n\nPosted Thursday, April 22, 2021 by Teon Brooks\n
\n

\n

the test.txt and result.md files can be found here:

\n

bgoonz/bash-commands-walkthrough
\nto accompany the medium article I am writing. Contribute to bgoonz/bash-commands-walkthrough development by creating an...github.com

\n
\n

7.) Execute command recursively

\n

Here I have modified the command I wish to run recursively to account for the fact that the 'find' command already works recursively, by appending the -maxdepth 1 flag...

\n
\n

I am essentially removing the recursive action of the find command...

\n
\n

That way, if the command affects the more deeply nested folders we know the outer RecurseDirs function we are using to run the find/pandoc line once in every subfolder of the working directory... is working properly!

\n

\n

Run in the folder shown to the left... we would expect every .md file to be accompanied by a newly generated html file by the same name.

\n

The results of said operation can be found in the following directory

\n

In Action

\n

🢃 Below 🢃

\n

\n

The final result is

\n

\n

If you want to run any bash script recursively all you have to do is substitue out line #9 with the command you want to run once in every sub-folder.

\n
function RecurseDirs ()\n{\n    oldIFS=$IFS\n    IFS=$'\\n'\n    for f in \"$@\"\n    do\n\n#Replace the line below with your own command!\n\n#find ./ -iname \"*.md\" -maxdepth 1 -type f -exec sh -c 'pandoc --standalone \"${0}\" -o \"${0%.md}.html\"' {} \\;\n\n#####################################################\n# YOUR CODE BELOW!\n\n#####################################################\n\nif [[ -d \"${f}\" ]]; then\n            cd \"${f}\"\n            RecurseDirs $(ls -1 \".\")\n            cd ..\n        fi\n    done\n    IFS=$oldIFS\n}\nRecurseDirs \"./\"\n
\n
\n

TBC

\n

Here are some of the other commands I will cover in greater detail... at a later time:

\n

9. Copy any text between