Created
January 24, 2022 21:31
-
-
Save bgoonz/6a0632d4083293be4ee9fc60618ca6c6 to your computer and use it in GitHub Desktop.
blog-content.json
This file has been truncated, but you can view the full file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "componentChunkName": "component---src-templates-advanced-js", | |
| "path": "/", | |
| "result": { | |
| "data": { "sitePage": { "id": "SitePage /" } }, | |
| "pageContext": { | |
| "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/)[](mailto:[email protected])[](https://www.youtube.com/channel/UC9-rYyUMsnEBK8G8fCyrXXA/videos)[](https://www.instagram.com/bgoonz/?hl=en)[](https://www.pinterest.com/bryanguner/\\_saved/)[](https://www.linkedin.com/in/bryan-guner-046199128/)\n\n[ ](https://webpack.js.org/)[ ](https://www.adobe.com/products/xd.html)\n\n[](https://app.netlify.com/sites/bgoonz-blog/deploys)\n\n[](https://github.com/bgoonz/github-readme-activity-graph)\n\n\n\n          \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": "<div id=\"search\"></div> <div id=\"search\" />\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)\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://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": "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": "<iframe src=\"https://random-static-html-deploys.netlify.app/\" class=\"block-content\" width=\"100% width=\"1200px!important\"\nheight=\"1000px!important\">\n</iframe>", | |
| "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<iframe class=\"block-content\" width=\"100% width=\"1200px!important\"\nheight=\"1000px!important\"\n src=\"https://web-dev-utility-tools-bgoonz.netlify.app/\"\n frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write;\n encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n<iframe class=\"block-content\" width=\"100% width=\"1200px!important\"\nheight=\"1000px!important\"\n src=\"https://cheatsheets-42.netlify.app/\"\n frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write;\n encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n<iframe class=\"block-content\" width=\"100% width=\"1200px!important\"\nheight=\"1000px!important\"\n src=\"https://bgoonz.github.io/fb-and-twitter-api-embeds/\"\n frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write;\n encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n", | |
| "actions": [], | |
| "type": "section_content" | |
| }, | |
| { | |
| "section_id": "tools", | |
| "image_alt": "web tools", | |
| "image_position": "left", | |
| "content": "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:[email protected]", | |
| "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": "", | |
| "pages": [ | |
| { | |
| "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": "<pre><code>PRIVACY NOTICE\n</code></pre>\n<ul>\n<li>Note: Visit our website at <a href=\"https://bgoonz-blog.netlify.app/\">https://bgoonz-blog.netlify.app/</a></li>\n</ul>\n<!---->\n<ul>\n<li>Note: Use our Facebook application — <a href=\"https://bgoonz-blog.netlify.app/\">https://bgoonz-blog.netlify.app/</a></li>\n</ul>\n<!---->\n<ul>\n<li>Note: Engage with us in other related ways ― including any sales, marketing, or events</li>\n</ul>\n<!---->\n<ul>\n<li>Important: \"<strong>Website</strong>,\" we are referring to any website of ours that references or links to this policy</li>\n</ul>\n<!---->\n<ul>\n<li>Important: \"<strong>App</strong>,\" we are referring to any application of ours that references or links to this policy, including any listed above</li>\n</ul>\n<!---->\n<ul>\n<li>Important: \"<strong>Services</strong>,\" we are referring to our Website, App, and other related services, including any sales, marketing, or events</li>\n</ul>\n<!---->\n<ul>\n<li>Important: <strong>To facilitate account creation and logon process.</strong> 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.</li>\n</ul>\n<!---->\n<ul>\n<li>Important: <strong>To post testimonials.</strong> 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.</li>\n</ul>\n<!---->\n<ul>\n<li>Note: **Request feedback. **We may use your information to request feedback and to contact you about your use of our Services.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>To enable user-to-user communications.</strong> We may use your information in order to enable user-to-user communications with each user's consent.</li>\n</ul>\n<!---->\n<ul>\n<li>**To manage user accounts. **We may use your information for the purposes of managing our account and keeping it in working order.</li>\n</ul>\n<!---->\n<ul>\n<li>**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.</li>\n</ul>\n<!---->\n<ul>\n<li>**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).</li>\n</ul>\n<!---->\n<ul>\n<li><strong>To enforce our terms, conditions and policies for business purposes, to comply with legal and regulatory requirements or in connection with our contract.</strong></li>\n</ul>\n<!---->\n<ul>\n<li>**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.</li>\n<li>**Fulfill and manage your orders. **We may use your information to fulfill and manage your orders, payments, returns, and exchanges made through the Services.</li>\n<li><strong>Administer prize draws and competitions.</strong> We may use your information to administer prize draws and competitions when you elect to participate in our competitions.</li>\n<li><strong>To deliver and facilitate delivery of services to the user.</strong> We may use your information to provide you with the requested service.</li>\n<li><strong>To respond to user inquiries/offer support to users.</strong> We may use your information to respond to your inquiries and solve any potential issues you might have with the use of our Services.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>To send you marketing and promotional communications.</strong> 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 \"<a href=\"https://cdpn.io/bgoonz/fullpage/LYLJZrW#privacyrights\">WHAT ARE YOUR PRIVACY RIGHTS?</a>\" below).</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Deliver targeted advertising to you.</strong> 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.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Consent:</strong> We may process your data if you have given us specific consent to use your personal information for a specific purpose.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Legitimate Interests:</strong> We may process your data when it is reasonably necessary to achieve our legitimate business interests.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Performance of a Contract:</strong> Where we have entered into a contract with you, we may process your personal information to fulfill the terms of our contract.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Legal Obligations:</strong> 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).</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Vital Interests:</strong> 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.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Business Transfers.</strong> 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.</li>\n</ul>\n<!---->\n<ul>\n<li>Receiving help through our customer support channels;</li>\n</ul>\n<!---->\n<ul>\n<li>Participation in customer surveys or contests; and</li>\n</ul>\n<!---->\n<ul>\n<li>Facilitation in the delivery of our Services and to respond to your inquiries.</li>\n</ul>\n<!---->\n<ul>\n<li>whether we collect and use your personal information;</li>\n</ul>\n<!---->\n<ul>\n<li>the categories of personal information that we collect;</li>\n</ul>\n<!---->\n<ul>\n<li>the purposes for which the collected personal information is used;</li>\n</ul>\n<!---->\n<ul>\n<li>whether we sell your personal information to third parties;</li>\n</ul>\n<!---->\n<ul>\n<li>the categories of personal information that we sold or disclosed for a business purpose;</li>\n</ul>\n<!---->\n<ul>\n<li>the categories of third parties to whom the personal information was sold or disclosed for a business purpose; and</li>\n</ul>\n<!---->\n<ul>\n<li>the business or commercial purpose for collecting or selling personal information.</li>\n</ul>\n<!---->\n<ul>\n<li>you may object to the processing of your personal data</li>\n</ul>\n<!---->\n<ul>\n<li>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</li>\n</ul>\n<!---->\n<ul>\n<li>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.</li>\n</ul>\n<!---->\n<ul>\n<li>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.</li>\n</ul>" | |
| }, | |
| { | |
| "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": "/docs/gists/", | |
| "relativePath": "docs/gists.md", | |
| "relativeDir": "docs", | |
| "base": "gists.md", | |
| "name": "gists", | |
| "frontmatter": { | |
| "title": "my gists", | |
| "weight": 0, | |
| "excerpt": null, | |
| "seo": { | |
| "title": "Gist Archive", | |
| "description": "A collection of my github gists", | |
| "robots": [], | |
| "extra": [], | |
| "type": "stackbit_page_meta" | |
| }, | |
| "template": "docs" | |
| }, | |
| "html": "<h2>Gist Archive</h2>\n<h2>Gist Archive</h2>\n<iframe src=\"https://bgoonzgist.netlify.app/\" height=\"1000px\" width=\"1400px\" scrolling=\"yes\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\" frameborder=\"0\" ></iframe>\n<br>\n<hr>\n<br>\n<hr>\n<h2>Featured Gists:</h2>\n<pre><code class=\"language-js\">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</code></pre>\n<hr>\n<hr>\n<blockquote>\n<p>will replace any spaces in file names with an underscore!</p>\n</blockquote>\n<pre><code class=\"language-bash\"> 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[]\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</code></pre>\n<hr>\n<h3>Copy to clipboard jQuerry</h3>\n<blockquote>\n<p>Language: Javascript/Jquery</p>\n</blockquote>\n<blockquote>\n<p>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.</p>\n</blockquote>\n<pre><code class=\"language-js\">$(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</code></pre>\n<hr>\n<h3>Append Files in PWD</h3>\n<pre><code class=\"language-js\">//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</code></pre>\n<hr>\n<h3>doesUserFrequentStarbucks.js</h3>\n<pre><code class=\"language-js\">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</code></pre>\n<hr>\n<h3>arr-intersection.js</h3>\n<pre><code class=\"language-js\">/*\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</code></pre>\n<hr>\n<h3>arr-of-cum-partial-sums.js</h3>\n<pre><code class=\"language-js\">/*\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</code></pre>\n<hr>\n<h3>camel2Kabab.js</h3>\n<pre><code class=\"language-js\">function camelToKebab(value) {\n return value.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n}\n</code></pre>\n<hr>\n<h3>camelCase.js</h3>\n<pre><code class=\"language-js\">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</code></pre>\n<hr>\n<h3>concatLinkedLists.js</h3>\n<pre><code class=\"language-js\">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</code></pre>\n<hr>\n<h3>fast-is-alpha-numeric.js</h3>\n<pre><code class=\"language-js\">//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</code></pre>\n<hr>\n<h3>find-n-replace.js</h3>\n<pre><code class=\"language-js\">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</code></pre>\n<hr>\n<h3>flatten-arr.js</h3>\n<pre><code class=\"language-js\">/*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</code></pre>\n<hr>\n<h3>isWeekDay.js</h3>\n<pre><code class=\"language-js\">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</code></pre>\n<hr>\n<h3>longest-common-prefix.js</h3>\n<pre><code class=\"language-js\">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</code></pre>" | |
| }, | |
| { | |
| "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/)[](mailto:[email protected])[](https://www.youtube.com/channel/UC9-rYyUMsnEBK8G8fCyrXXA/videos)[](https://www.instagram.com/bgoonz/?hl=en)[](https://www.pinterest.com/bryanguner/\\_saved/)[](https://www.linkedin.com/in/bryan-guner-046199128/)\n\n[ ](https://webpack.js.org/)[ ](https://www.adobe.com/products/xd.html)\n\n[](https://app.netlify.com/sites/bgoonz-blog/deploys)\n\n[](https://github.com/bgoonz/github-readme-activity-graph)\n\n\n\n          \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": "<div id=\"search\"></div> <div id=\"search\" />\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)\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://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": "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": "<iframe src=\"https://random-static-html-deploys.netlify.app/\" class=\"block-content\" width=\"100% width=\"1200px!important\"\nheight=\"1000px!important\">\n</iframe>", | |
| "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<iframe class=\"block-content\" width=\"100% width=\"1200px!important\"\nheight=\"1000px!important\"\n src=\"https://web-dev-utility-tools-bgoonz.netlify.app/\"\n frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write;\n encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n<iframe class=\"block-content\" width=\"100% width=\"1200px!important\"\nheight=\"1000px!important\"\n src=\"https://cheatsheets-42.netlify.app/\"\n frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write;\n encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n<iframe class=\"block-content\" width=\"100% width=\"1200px!important\"\nheight=\"1000px!important\"\n src=\"https://bgoonz.github.io/fb-and-twitter-api-embeds/\"\n frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write;\n encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n", | |
| "actions": [], | |
| "type": "section_content" | |
| }, | |
| { | |
| "section_id": "tools", | |
| "image_alt": "web tools", | |
| "image_position": "left", | |
| "content": "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:[email protected]", | |
| "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": "/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": "<h1>Go To Sitemap: <a href=\"./docs/sitemap/\">Go Now --></a></h1>\n<hr>\n<div id=\"search\"></div>\n<h1>Actual Docs:</h1>\n<br>\n<br>\n<pre><code> <div id=\"search\" />\n</code></pre>\n<br>\n <div id=\"search\" className=\"inner\"></div>\n<br>\n<h1> Docs</h1>\n<br>\n<iframe class=\"inner\" src=\"https://docs42.netlify.app/#C:/MY-WEB-DEV/__NEW_GIT/DOCS/docs-collection\" height=\"1000px\" width=\"1400px\" scrolling=\"yes\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\" frameborder=\"0\" ></iframe>\n<br>\n<hr>\n<br>\n<h1>Gitpod Docs</h1>\n<br>\n<iframe class=\"inner\" src=\"https://archive-42.github.io/my-docs-gitpod-html/\" height=\"1000px\" width=\"1400px\" scrolling=\"yes\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\" frameborder=\"0\" ></iframe>\n<br>\n<hr>\n<br>\n<hr>\n<h2>Doc Websites & Repos</h2>\n<ul>\n<li><a href=\"https://github.com/bgoonz/PYTHON_PRAC\">Python Practice</a></li>\n<li><a href=\"https://lambda-resources.netlify.app/\">Lambda Bootcamp Website</a></li>\n<li><a href=\"https://github.com/bgoonz/React_Notes_V3\">React Notes</a></li>\n<li><a href=\"https://github.com/bgoonz/Project-Showcase\">Project Showcase</a></li>\n<li><a href=\"https://github.com/bgoonz/DS-ALGO-OFFICIAL\">Data Structures & Algorithms</a></li>\n<li><a href=\"https://github.com/bgoonz/Lambda-Resource-Static-Assets\">Lambda Site Static Content Server</a></li>\n<li><a href=\"https://github.com/bgoonz/mini-project-showcase\">Mini-Project Showcase</a></li>\n<li><a href=\"https://github.com/bgoonz/Useful-Snippets-js\">Useful Snippets</a></li>\n<li><a href=\"https://github.com/bgoonz/Markdown-Templates\">Markdown Templates</a></li>\n<li><a href=\"https://github.com/bgoonz/zumzi-chat-messenger\">Zumzi Video Conferencing App (mesibo api backend)</a></li>\n</ul>" | |
| }, | |
| { | |
| "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": "<pre><code>PRIVACY NOTICE\n</code></pre>\n<ul>\n<li>Visit our website at <a href=\"https://bgoonz-blog.netlify.app/\">https://bgoonz-blog.netlify.app/</a></li>\n</ul>\n<!---->\n<ul>\n<li>Use our Facebook application — <a href=\"https://bgoonz-blog.netlify.app/\">https://bgoonz-blog.netlify.app/</a></li>\n</ul>\n<!---->\n<ul>\n<li>Engage with us in other related ways ― including any sales, marketing, or events</li>\n</ul>\n<!---->\n<ul>\n<li>\"<strong>Website</strong>,\" we are referring to any website of ours that references or links to this policy</li>\n</ul>\n<!---->\n<ul>\n<li>\"<strong>App</strong>,\" we are referring to any application of ours that references or links to this policy, including any listed above</li>\n</ul>\n<!---->\n<ul>\n<li>\"<strong>Services</strong>,\" we are referring to our Website, App, and other related services, including any sales, marketing, or events</li>\n</ul>\n<!---->\n<ul>\n<li><strong>To facilitate account creation and logon process.</strong> 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.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>To post testimonials.</strong> 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.</li>\n</ul>\n<!---->\n<ul>\n<li>**Request feedback. **We may use your information to request feedback and to contact you about your use of our Services.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>To enable user-to-user communications.</strong> We may use your information in order to enable user-to-user communications with each user's consent.</li>\n</ul>\n<!---->\n<ul>\n<li>**To manage user accounts. **We may use your information for the purposes of managing our account and keeping it in working order.</li>\n</ul>\n<!---->\n<ul>\n<li>**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.</li>\n</ul>\n<!---->\n<ul>\n<li>**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).</li>\n</ul>\n<!---->\n<ul>\n<li><strong>To enforce our terms, conditions and policies for business purposes, to comply with legal and regulatory requirements or in connection with our contract.</strong></li>\n</ul>\n<!---->\n<ul>\n<li>**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.</li>\n<li>**Fulfill and manage your orders. **We may use your information to fulfill and manage your orders, payments, returns, and exchanges made through the Services.</li>\n<li><strong>Administer prize draws and competitions.</strong> We may use your information to administer prize draws and competitions when you elect to participate in our competitions.</li>\n<li><strong>To deliver and facilitate delivery of services to the user.</strong> We may use your information to provide you with the requested service.</li>\n<li><strong>To respond to user inquiries/offer support to users.</strong> We may use your information to respond to your inquiries and solve any potential issues you might have with the use of our Services.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>To send you marketing and promotional communications.</strong> 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 \"<a href=\"https://cdpn.io/bgoonz/fullpage/LYLJZrW#privacyrights\">WHAT ARE YOUR PRIVACY RIGHTS?</a>\" below).</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Deliver targeted advertising to you.</strong> 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.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Consent:</strong> We may process your data if you have given us specific consent to use your personal information for a specific purpose.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Legitimate Interests:</strong> We may process your data when it is reasonably necessary to achieve our legitimate business interests.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Performance of a Contract:</strong> Where we have entered into a contract with you, we may process your personal information to fulfill the terms of our contract.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Legal Obligations:</strong> 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).</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Vital Interests:</strong> 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.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>Business Transfers.</strong> 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.</li>\n</ul>\n<!---->\n<ul>\n<li>Receiving help through our customer support channels;</li>\n</ul>\n<!---->\n<ul>\n<li>Participation in customer surveys or contests; and</li>\n</ul>\n<!---->\n<ul>\n<li>Facilitation in the delivery of our Services and to respond to your inquiries.</li>\n</ul>\n<!---->\n<ul>\n<li>whether we collect and use your personal information;</li>\n</ul>\n<!---->\n<ul>\n<li>the categories of personal information that we collect;</li>\n</ul>\n<!---->\n<ul>\n<li>the purposes for which the collected personal information is used;</li>\n</ul>\n<!---->\n<ul>\n<li>whether we sell your personal information to third parties;</li>\n</ul>\n<!---->\n<ul>\n<li>the categories of personal information that we sold or disclosed for a business purpose;</li>\n</ul>\n<!---->\n<ul>\n<li>the categories of third parties to whom the personal information was sold or disclosed for a business purpose; and</li>\n</ul>\n<!---->\n<ul>\n<li>the business or commercial purpose for collecting or selling personal information.</li>\n</ul>\n<!---->\n<ul>\n<li>you may object to the processing of your personal data</li>\n</ul>\n<!---->\n<ul>\n<li>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</li>\n</ul>\n<!---->\n<ul>\n<li>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.</li>\n</ul>\n<!---->\n<ul>\n<li>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.</li>\n</ul>" | |
| }, | |
| { | |
| "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": "<h2>Search:</h2>\n<hr>\n<h1>Actual Docs:</h1>\n<br>\n<br>\n<br>\n<br>\n<h1> Docs</h1>\n<br>\n<div id=\"search\"></div>\n<div id=\"search\" />" | |
| }, | |
| { | |
| "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": "<h3>204. <a href=\"https://bgoonz-blog.netlify.app/privacy-policy\"><strong>🖥️privacy-policy🌍</strong></a></h3>\n<h3>205. <a href=\"https://bgoonz-blog.netlify.app/readme\"><strong>🖥️readme🌍</strong></a></h3>\n<h3>206. <a href=\"https://bgoonz-blog.netlify.app/showcase\"><strong>🏆showcase🏆</strong></a></h3>\n<h3>207. <a href=\"https://bgoonz-blog.netlify.app/\"><strong>🏠Home🏠</strong></a></h3>\n<hr>\n<hr>\n<h3>0. <a href=\"https://bgoonz-blog.netlify.app/blog/300-react-questions\"><strong>🖥️blog/300-react-questions🌍</strong></a></h3>\n<h3>1. <a href=\"https://bgoonz-blog.netlify.app/blog/awesome-graphql\"><strong>🖥️blog/awesome-graphql🌍</strong></a></h3>\n<h3>2. <a href=\"https://bgoonz-blog.netlify.app/blog/big-o-complexity\"><strong>🖥️blog/big-o-complexity🌍</strong></a></h3>\n<h3>3. <a href=\"https://bgoonz-blog.netlify.app/blog/blog-archive\"><strong>🖥️blog/blog-archive🌍</strong></a></h3>\n<h3>4. <a href=\"https://bgoonz-blog.netlify.app/blog/blogwcomments\"><strong>🖥️blog/blogwcomments🌍</strong></a></h3>\n<h3>5. <a href=\"https://bgoonz-blog.netlify.app/blog/data-structures\"><strong>🖥️blog/data-structures🌍</strong></a></h3>\n<h3>6. <a href=\"https://bgoonz-blog.netlify.app/blog/flow-control-in-python\"><strong>🖥️blog/flow-control-in-python🌍</strong></a></h3>\n<h3>7. <a href=\"https://bgoonz-blog.netlify.app/blog/functions-in-python\"><strong>🖥️blog/functions-in-python🌍</strong></a></h3>\n<h3>8. <a href=\"https://bgoonz-blog.netlify.app/blog/git-gateway\"><strong>🖥️blog/git-gateway🌍</strong></a></h3>\n<h3>9. <a href=\"https://bgoonz-blog.netlify.app/blog/interview-questions-js\"><strong>🖥️blog/interview-questions-js🌍</strong></a></h3>\n<h3>10. <a href=\"https://bgoonz-blog.netlify.app/blog/netlify-cms\"><strong>🖥️blog/netlify-cms🌍</strong></a></h3>\n<h3>11. <a href=\"https://bgoonz-blog.netlify.app/blog/platform-docs\"><strong>🖥️blog/platform-docs🌍</strong></a></h3>\n<h3>12. <a href=\"https://bgoonz-blog.netlify.app/blog/python-for-js-dev\"><strong>🖥️blog/python-for-js-dev🌍</strong></a></h3>\n<h3>13. <a href=\"https://bgoonz-blog.netlify.app/blog/python-resources\"><strong>🖥️blog/python-resources🌍</strong></a></h3>\n<h3>14. <a href=\"https://bgoonz-blog.netlify.app/blog/web-dev-trends\"><strong>🖥️blog/web-dev-trends🌍</strong></a></h3>\n<h3>15. <a href=\"https://bgoonz-blog.netlify.app/blog/web-scraping\"><strong>🖥️blog/web-scraping🌍</strong></a></h3>\n<h3>16. <a href=\"https://bgoonz-blog.netlify.app/blog\"><strong>🖥️blog🌍</strong></a></h3>\n<hr>\n<hr>\n<h2>DOCS:</h2>\n<h3>17. <a href=\"https://bgoonz-blog.netlify.app/docs/about/README\"><strong>📖docs/about/README🌍</strong></a></h3>\n<h3>18. <a href=\"https://bgoonz-blog.netlify.app/docs/about/eng-portfolio\"><strong>📖docs/about/eng-portfolio🌍</strong></a></h3>\n<h3>19. <a href=\"https://bgoonz-blog.netlify.app/docs/about/intrests\"><strong>📖docs/about/intrests🌍</strong></a></h3>\n<h3>20. <a href=\"https://bgoonz-blog.netlify.app/docs/about/job-search\"><strong>📖docs/about/job-search🌍</strong></a></h3>\n<h3>21. <a href=\"https://bgoonz-blog.netlify.app/docs/about/resume\"><strong>📖docs/about/resume🌍</strong></a></h3>\n<h3>22. <a href=\"https://bgoonz-blog.netlify.app/docs/about\"><strong>📖docs/about🌍</strong></a></h3>\n<h3>23. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/basic-web-dev\"><strong>📖docs/articles/basic-web-dev🌍</strong></a></h3>\n<h3>24. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/buffers\"><strong>📖docs/articles/buffers🌍</strong></a></h3>\n<h3>25. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/dev-dep\"><strong>📖docs/articles/dev-dep🌍</strong></a></h3>\n<h3>26. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/event-loop\"><strong>📖docs/articles/event-loop🌍</strong></a></h3>\n<h3>27. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/fs-module\"><strong>📖docs/articles/fs-module🌍</strong></a></h3>\n<h3>28. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/how-search-engines-work\"><strong>📖docs/articles/how-search-engines-work🌍</strong></a></h3>\n<h3>29. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/how-the-web-works\"><strong>📖docs/articles/how-the-web-works🌍</strong></a></h3>\n<h3>30. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/http\"><strong>📖docs/articles/http🌍</strong></a></h3>\n<h3>31. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/install\"><strong>📖docs/articles/install🌍</strong></a></h3>\n<h3>32. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/intro\"><strong>📖docs/articles/intro🌍</strong></a></h3>\n<h3>33. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/modules\"><strong>📖docs/articles/modules🌍</strong></a></h3>\n<h3>34. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/nextjs\"><strong>📖docs/articles/nextjs🌍</strong></a></h3>\n<h3>35. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/node-api-express\"><strong>📖docs/articles/node-api-express🌍</strong></a></h3>\n<h3>36. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/node-cli-args\"><strong>📖docs/articles/node-cli-args🌍</strong></a></h3>\n<h3>37. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/node-common-modules\"><strong>📖docs/articles/node-common-modules🌍</strong></a></h3>\n<h3>38. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/node-env-variables\"><strong>📖docs/articles/node-env-variables🌍</strong></a></h3>\n<h3>39. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/node-js-language\"><strong>📖docs/articles/node-js-language🌍</strong></a></h3>\n<h3>40. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/node-package-manager\"><strong>📖docs/articles/node-package-manager🌍</strong></a></h3>\n<h3>41. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/node-repl\"><strong>📖docs/articles/node-repl🌍</strong></a></h3>\n<h3>42. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/node-run-cli\"><strong>📖docs/articles/node-run-cli🌍</strong></a></h3>\n<h3>43. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/nodejs\"><strong>📖docs/articles/nodejs🌍</strong></a></h3>\n<h3>44. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/nodevsbrowser\"><strong>📖docs/articles/nodevsbrowser🌍</strong></a></h3>\n<h3>45. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/npm\"><strong>📖docs/articles/npm🌍</strong></a></h3>\n<h3>46. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/npx\"><strong>📖docs/articles/npx🌍</strong></a></h3>\n<h3>47. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/os-module\"><strong>📖docs/articles/os-module🌍</strong></a></h3>\n<h3>48. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/reading-files\"><strong>📖docs/articles/reading-files🌍</strong></a></h3>\n<h3>49. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/semantic-html\"><strong>📖docs/articles/semantic-html🌍</strong></a></h3>\n<h3>50. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/semantic\"><strong>📖docs/articles/semantic🌍</strong></a></h3>\n<h3>51. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/%20%5B**%F0%9F%96%A5%EF%B8%8Fthe-uniform-resource-locator-(url)\"><strong>📖docs/articles/the-uniform-resource-locator-(url)🌍</strong></a></h3>\n<h3>52. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/understanding-firebase\"><strong>📖docs/articles/understanding-firebase🌍</strong></a></h3>\n<h3>53. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/v8\"><strong>📖docs/articles/v8🌍</strong></a></h3>\n<h3>54. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/web-standards-checklist\"><strong>📖docs/articles/web-standards-checklist🌍</strong></a></h3>\n<h3>55. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/webdev-tools\"><strong>📖docs/articles/webdev-tools🌍</strong></a></h3>\n<h3>56. <a href=\"https://bgoonz-blog.netlify.app/docs/articles/writing-files\"><strong>📖docs/articles/writing-files🌍</strong></a></h3>\n<h3>57. <a href=\"https://bgoonz-blog.netlify.app/docs/articles\"><strong>📖docs/articles🌍</strong></a></h3>\n<h3>58. <a href=\"https://bgoonz-blog.netlify.app/docs/audio/audio-feature-extraction\"><strong>📖docs/audio/audio-feature-extraction🌍</strong></a></h3>\n<h3>59. <a href=\"https://bgoonz-blog.netlify.app/docs/audio/audio\"><strong>📖docs/audio/audio🌍</strong></a></h3>\n<h3>60. <a href=\"https://bgoonz-blog.netlify.app/docs/audio/dfft\"><strong>📖docs/audio/dfft🌍</strong></a></h3>\n<h3>61. <a href=\"https://bgoonz-blog.netlify.app/docs/audio/discrete-fft\"><strong>📖docs/audio/discrete-fft🌍</strong></a></h3>\n<h3>62. <a href=\"https://bgoonz-blog.netlify.app/docs/audio/dtw-python-explained\"><strong>📖docs/audio/dtw-python-explained🌍</strong></a></h3>\n<h3>63. <a href=\"https://bgoonz-blog.netlify.app/docs/audio/dynamic-time-warping\"><strong>📖docs/audio/dynamic-time-warping🌍</strong></a></h3>\n<h3>64. <a href=\"https://bgoonz-blog.netlify.app/docs/audio/web-audio-api\"><strong>📖docs/audio/web-audio-api🌍</strong></a></h3>\n<h3>65. <a href=\"https://bgoonz-blog.netlify.app/docs/audio\"><strong>📖docs/audio🌍</strong></a></h3>\n<h3>66. <a href=\"https://bgoonz-blog.netlify.app/docs/career/dev-interview\"><strong>📖docs/career/dev-interview🌍</strong></a></h3>\n<h3>67. <a href=\"https://bgoonz-blog.netlify.app/docs/career/interview-dos-n-donts\"><strong>📖docs/career/interview-dos-n-donts🌍</strong></a></h3>\n<h3>68. <a href=\"https://bgoonz-blog.netlify.app/docs/career/job-boards\"><strong>📖docs/career/job-boards🌍</strong></a></h3>\n<h3>69. <a href=\"https://bgoonz-blog.netlify.app/docs/career\"><strong>📖docs/career🌍</strong></a></h3>\n<h3>71. <a href=\"https://bgoonz-blog.netlify.app/docs/community/bookmarks\"><strong>📖docs/community/bookmarks🌍</strong></a></h3>\n<h3>72. <a href=\"https://bgoonz-blog.netlify.app/docs/community/video-chat\"><strong>📖docs/community/video-chat🌍</strong></a></h3>\n<h3>73. <a href=\"https://bgoonz-blog.netlify.app/docs/community\"><strong>📖docs/community🌍</strong></a></h3>\n<h3>74. <a href=\"https://bgoonz-blog.netlify.app/docs/content/algo\"><strong>📖docs/content/algo🌍</strong></a></h3>\n<h3>75. <a href=\"https://bgoonz-blog.netlify.app/docs/content/archive\"><strong>📖docs/content/archive🌍</strong></a></h3>\n<h3>76. <a href=\"https://bgoonz-blog.netlify.app/docs/content/gatsby-Queries-Mutations\"><strong>📖docs/content/gatsby-Queries-Mutations🌍</strong></a></h3>\n<h3>77. <a href=\"https://bgoonz-blog.netlify.app/docs/content/history-api\"><strong>📖docs/content/history-api🌍</strong></a></h3>\n<h3>78. <a href=\"https://bgoonz-blog.netlify.app/docs/content/main-projects\"><strong>📖docs/content/main-projects🌍</strong></a></h3>\n<h3>79. <a href=\"https://bgoonz-blog.netlify.app/docs/content/trouble-shooting\"><strong>📖docs/content/trouble-shooting🌍</strong></a></h3>\n<h3>80. <a href=\"https://bgoonz-blog.netlify.app/docs/content\"><strong>📖docs/content🌍</strong></a></h3>\n<h3>81. <a href=\"https://bgoonz-blog.netlify.app/docs/data-structures\"><strong>📖docs/data-structures🌍</strong></a></h3>\n<h3>82. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/appendix\"><strong>📖docs/docs/appendix🌍</strong></a></h3>\n<h3>83. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/art-of-command-line\"><strong>📖docs/docs/art-of-command-line🌍</strong></a></h3>\n<h3>84. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/bash\"><strong>📖docs/docs/bash🌍</strong></a></h3>\n<h3>85. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/content\"><strong>📖docs/docs/content🌍</strong></a></h3>\n<h3>86. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/css\"><strong>📖docs/docs/css🌍</strong></a></h3>\n<h3>87. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/data-structures-docs\"><strong>📖docs/docs/data-structures-docs🌍</strong></a></h3>\n<h3>88. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/es-6-features\"><strong>📖docs/docs/es-6-features🌍</strong></a></h3>\n<h3>89. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/git-reference\"><strong>📖docs/docs/git-reference🌍</strong></a></h3>\n<h3>90. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/git-repos\"><strong>📖docs/docs/git-repos🌍</strong></a></h3>\n<h3>91. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/html-spec\"><strong>📖docs/docs/html-spec🌍</strong></a></h3>\n<h3>92. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/markdown\"><strong>📖docs/docs/markdown🌍</strong></a></h3>\n<h3>93. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/no-whiteboarding\"><strong>📖docs/docs/no-whiteboarding🌍</strong></a></h3>\n<h3>94. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/node-docs-complete\"><strong>📖docs/docs/node-docs-complete🌍</strong></a></h3>\n<h3>95. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/node-docs-full\"><strong>📖docs/docs/node-docs-full🌍</strong></a></h3>\n<h3>96. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/regex-in-js\"><strong>📖docs/docs/regex-in-js🌍</strong></a></h3>\n<h3>97. <a href=\"https://bgoonz-blog.netlify.app/docs/docs/sitemap\"><strong>📖docs/docs/sitemap🌍</strong></a></h3>\n<h3>98. <a href=\"https://bgoonz-blog.netlify.app/docs/docs\"><strong>📖docs/docs🌍</strong></a></h3>\n<h3>99. <a href=\"https://bgoonz-blog.netlify.app/docs/faq/contact\"><strong>📖docs/faq/contact🌍</strong></a></h3>\n<h3>100. <a href=\"https://bgoonz-blog.netlify.app/docs/faq/plug-ins\"><strong>📖docs/faq/plug-ins🌍</strong></a></h3>\n<h3>101. <a href=\"https://bgoonz-blog.netlify.app/docs/faq\"><strong>📖docs/faq🌍</strong></a></h3>\n<h3>102. <a href=\"https://bgoonz-blog.netlify.app/docs/gists\"><strong>📖docs/gists🌍</strong></a></h3>\n<h3>103. <a href=\"https://bgoonz-blog.netlify.app/docs/interact/callstack-visual\"><strong>📖docs/interact/callstack-visual🌍</strong></a></h3>\n<h3>104. <a href=\"https://bgoonz-blog.netlify.app/docs/interact/clock\"><strong>📖docs/interact/clock🌍</strong></a></h3>\n<h3>105. <a href=\"https://bgoonz-blog.netlify.app/docs/interact/jupyter-notebooks\"><strong>📖docs/interact/jupyter-notebooks🌍</strong></a></h3>\n<h3>106. <a href=\"https://bgoonz-blog.netlify.app/docs/interact/other-sites\"><strong>📖docs/interact/other-sites🌍</strong></a></h3>\n<h3>107. <a href=\"https://bgoonz-blog.netlify.app/docs/interact/video-chat\"><strong>📖docs/interact/video-chat🌍</strong></a></h3>\n<h3>108. <a href=\"https://bgoonz-blog.netlify.app/docs/interact\"><strong>📖docs/interact🌍</strong></a></h3>\n<h3>109. <a href=\"https://bgoonz-blog.netlify.app/docs/interview/job-search-nav\"><strong>📖docs/interview/job-search-nav🌍</strong></a></h3>\n<h3>110. <a href=\"https://bgoonz-blog.netlify.app/docs/interview/review-concepts\"><strong>📖docs/interview/review-concepts🌍</strong></a></h3>\n<h3>111. <a href=\"https://bgoonz-blog.netlify.app/docs/interview\"><strong>📖docs/interview🌍</strong></a></h3>\n<h3>112. <a href=\"https://bgoonz-blog.netlify.app/docs/javascript/arrow-functions\"><strong>📖docs/javascript/arrow-functions🌍</strong></a></h3>\n<h3>113. <a href=\"https://bgoonz-blog.netlify.app/docs/javascript/asyncjs\"><strong>📖docs/javascript/asyncjs🌍</strong></a></h3>\n<h3>114. <a href=\"https://bgoonz-blog.netlify.app/docs/javascript/await-keyword\"><strong>📖docs/javascript/await-keyword🌍</strong></a></h3>\n<h3>115. <a href=\"https://bgoonz-blog.netlify.app/docs/javascript/bigo\"><strong>📖docs/javascript/bigo🌍</strong></a></h3>\n<h3>116. <a href=\"https://bgoonz-blog.netlify.app/docs/javascript/clean-code\"><strong>📖docs/javascript/clean-code🌍</strong></a></h3>\n<h3>117. <a href=\"https://bgoonz-blog.netlify.app/docs/javascript/constructor-functions\"><strong>📖docs/javascript/constructor-functions🌍</strong></a></h3>\n<h3>118. <a href=\"https://bgoonz-blog.netlify.app/docs/javascript/for-loops\"><strong>📖docs/javascript/for-loops🌍</strong></a></h3>\n<h3>119. <a href=\"https://bgoonz-blog.netlify.app/docs/javascript/promises\"><strong>📖docs/javascript/promises🌍</strong></a></h3>\n<h3>120. <a href=\"https://bgoonz-blog.netlify.app/docs/javascript/review\"><strong>📖docs/javascript/review🌍</strong></a></h3>\n<h3>121. <a href=\"https://bgoonz-blog.netlify.app/docs/javascript/this-is-about-this\"><strong>📖docs/javascript/this-is-about-this🌍</strong></a></h3>\n<h3>122. <a href=\"https://bgoonz-blog.netlify.app/docs/javascript\"><strong>📖docs/javascript🌍</strong></a></h3>\n<h3>123. <a href=\"https://bgoonz-blog.netlify.app/docs/leetcode\"><strong>📖docs/leetcode🌍</strong></a></h3>\n<h3>124. <a href=\"https://bgoonz-blog.netlify.app/docs/privacy-policy\"><strong>📖docs/privacy-policy🌍</strong></a></h3>\n<h3>125. <a href=\"https://bgoonz-blog.netlify.app/docs/projects/embeded-websites\"><strong>📖docs/projects/embeded-websites🌍</strong></a></h3>\n<h3>126. <a href=\"https://bgoonz-blog.netlify.app/docs/projects/list-of-projects\"><strong>📖docs/projects/list-of-projects🌍</strong></a></h3>\n<h3>127. <a href=\"https://bgoonz-blog.netlify.app/docs/projects/mini-projects2\"><strong>📖docs/projects/mini-projects2🌍</strong></a></h3>\n<h3>128. <a href=\"https://bgoonz-blog.netlify.app/docs/projects/mini-projects\"><strong>📖docs/projects/mini-projects🌍</strong></a></h3>\n<h3>129. <a href=\"https://bgoonz-blog.netlify.app/docs/projects/my-websites\"><strong>📖docs/projects/my-websites🌍</strong></a></h3>\n<h3>130. <a href=\"https://bgoonz-blog.netlify.app/docs/projects\"><strong>📖docs/projects🌍</strong></a></h3>\n<h3>131. <a href=\"https://bgoonz-blog.netlify.app/docs/python/at-length\"><strong>📖docs/python/at-length🌍</strong></a></h3>\n<h3>132. <a href=\"https://bgoonz-blog.netlify.app/docs/python/cheat-sheet\"><strong>📖docs/python/cheat-sheet🌍</strong></a></h3>\n<h3>133. <a href=\"https://bgoonz-blog.netlify.app/docs/python/comprehensive-guide\"><strong>📖docs/python/comprehensive-guide🌍</strong></a></h3>\n<h3>134. <a href=\"https://bgoonz-blog.netlify.app/docs/python/examples\"><strong>📖docs/python/examples🌍</strong></a></h3>\n<h3>135. <a href=\"https://bgoonz-blog.netlify.app/docs/python/flow-control\"><strong>📖docs/python/flow-control🌍</strong></a></h3>\n<h3>136. <a href=\"https://bgoonz-blog.netlify.app/docs/python/functions\"><strong>📖docs/python/functions🌍</strong></a></h3>\n<h3>137. <a href=\"https://bgoonz-blog.netlify.app/docs/python/google-sheets-api\"><strong>📖docs/python/google-sheets-api🌍</strong></a></h3>\n<h3>138. <a href=\"https://bgoonz-blog.netlify.app/docs/python/intro-for-js-devs\"><strong>📖docs/python/intro-for-js-devs🌍</strong></a></h3>\n<h3>139. <a href=\"https://bgoonz-blog.netlify.app/docs/python/python-ds\"><strong>📖docs/python/python-ds🌍</strong></a></h3>\n<h3>140. <a href=\"https://bgoonz-blog.netlify.app/docs/python/snippets\"><strong>📖docs/python/snippets🌍</strong></a></h3>\n<h3>141. <a href=\"https://bgoonz-blog.netlify.app/docs/python\"><strong>📖docs/python🌍</strong></a></h3>\n<h3>142. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/Emmet\"><strong>📖docs/quick-reference/Emmet🌍</strong></a></h3>\n<h3>143. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/all-emojis\"><strong>📖docs/quick-reference/all-emojis🌍</strong></a></h3>\n<h3>144. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/create-react-app\"><strong>📖docs/quick-reference/create-react-app🌍</strong></a></h3>\n<h3>145. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/git-bash\"><strong>📖docs/quick-reference/git-bash🌍</strong></a></h3>\n<h3>146. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/git-tricks\"><strong>📖docs/quick-reference/git-tricks🌍</strong></a></h3>\n<h3>147. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/google-firebase\"><strong>📖docs/quick-reference/google-firebase🌍</strong></a></h3>\n<h3>148. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/heroku-error-codes\"><strong>📖docs/quick-reference/heroku-error-codes🌍</strong></a></h3>\n<h3>149. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/installation\"><strong>📖docs/quick-reference/installation🌍</strong></a></h3>\n<h3>150. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/markdown-dropdowns\"><strong>📖docs/quick-reference/markdown-dropdowns🌍</strong></a></h3>\n<h3>151. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/minifiction\"><strong>📖docs/quick-reference/minifiction🌍</strong></a></h3>\n<h3>152. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/new-repo-instructions\"><strong>📖docs/quick-reference/new-repo-instructions🌍</strong></a></h3>\n<h3>153. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/psql-setup\"><strong>📖docs/quick-reference/psql-setup🌍</strong></a></h3>\n<h3>154. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/pull-request-rubric\"><strong>📖docs/quick-reference/pull-request-rubric🌍</strong></a></h3>\n<h3>155. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/quick-links\"><strong>📖docs/quick-reference/quick-links🌍</strong></a></h3>\n<h3>156. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/topRepos\"><strong>📖docs/quick-reference/topRepos🌍</strong></a></h3>\n<h3>157. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/understanding-path\"><strong>📖docs/quick-reference/understanding-path🌍</strong></a></h3>\n<h3>158. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference/vscode-themes\"><strong>📖docs/quick-reference/vscode-themes🌍</strong></a></h3>\n<h3>159. <a href=\"https://bgoonz-blog.netlify.app/docs/quick-reference\"><strong>📖docs/quick-reference🌍</strong></a></h3>\n<h3>160. <a href=\"https://bgoonz-blog.netlify.app/docs/react/ajax-n-apis\"><strong>📖docs/react/ajax-n-apis🌍</strong></a></h3>\n<h3>161. <a href=\"https://bgoonz-blog.netlify.app/docs/react/cheatsheet\"><strong>📖docs/react/cheatsheet🌍</strong></a></h3>\n<h3>162. <a href=\"https://bgoonz-blog.netlify.app/docs/react/createReactApp\"><strong>📖docs/react/createReactApp🌍</strong></a></h3>\n<h3>163. <a href=\"https://bgoonz-blog.netlify.app/docs/react/demo\"><strong>📖docs/react/demo🌍</strong></a></h3>\n<h3>164. <a href=\"https://bgoonz-blog.netlify.app/docs/react/dont-use-index-as-keys\"><strong>📖docs/react/dont-use-index-as-keys🌍</strong></a></h3>\n<h3>165. <a href=\"https://bgoonz-blog.netlify.app/docs/react/jsx\"><strong>📖docs/react/jsx🌍</strong></a></h3>\n<h3>166. <a href=\"https://bgoonz-blog.netlify.app/docs/react/react-docs\"><strong>📖docs/react/react-docs🌍</strong></a></h3>\n<h3>167. <a href=\"https://bgoonz-blog.netlify.app/docs/react/react-in-depth\"><strong>📖docs/react/react-in-depth🌍</strong></a></h3>\n<h3>168. <a href=\"https://bgoonz-blog.netlify.app/docs/react/react2\"><strong>📖docs/react/react2🌍</strong></a></h3>\n<h3>169. <a href=\"https://bgoonz-blog.netlify.app/docs/react/render-elements\"><strong>📖docs/react/render-elements🌍</strong></a></h3>\n<h3>170. <a href=\"https://bgoonz-blog.netlify.app/docs/react\"><strong>📖docs/react🌍</strong></a></h3>\n<h3>171. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/awesome-lists\"><strong>📖docs/reference/awesome-lists🌍</strong></a></h3>\n<h3>172. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/awesome-nodejs\"><strong>📖docs/reference/awesome-nodejs🌍</strong></a></h3>\n<h3>173. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/awesome-static\"><strong>📖docs/reference/awesome-static🌍</strong></a></h3>\n<h3>174. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/bash-commands\"><strong>📖docs/reference/bash-commands🌍</strong></a></h3>\n<h3>175. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/bookmarks\"><strong>📖docs/reference/bookmarks🌍</strong></a></h3>\n<h3>176. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/embed-the-web\"><strong>📖docs/reference/embed-the-web🌍</strong></a></h3>\n<h3>177. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/github-search\"><strong>📖docs/reference/github-search🌍</strong></a></h3>\n<h3>178. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/google-cloud\"><strong>📖docs/reference/google-cloud🌍</strong></a></h3>\n<h3>179. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/how-2-reinstall-npm\"><strong>📖docs/reference/how-2-reinstall-npm🌍</strong></a></h3>\n<h3>180. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/how-to-kill-a-process\"><strong>📖docs/reference/how-to-kill-a-process🌍</strong></a></h3>\n<h3>181. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/installing-node\"><strong>📖docs/reference/installing-node🌍</strong></a></h3>\n<h3>182. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/intro-to-nodejs\"><strong>📖docs/reference/intro-to-nodejs🌍</strong></a></h3>\n<h3>183. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/markdown-styleguide\"><strong>📖docs/reference/markdown-styleguide🌍</strong></a></h3>\n<h3>184. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/notes-template\"><strong>📖docs/reference/notes-template🌍</strong></a></h3>\n<h3>185. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/psql\"><strong>📖docs/reference/psql🌍</strong></a></h3>\n<h3>186. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/resources\"><strong>📖docs/reference/resources🌍</strong></a></h3>\n<h3>187. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/vscode\"><strong>📖docs/reference/vscode🌍</strong></a></h3>\n<h3>188. <a href=\"https://bgoonz-blog.netlify.app/docs/reference/web-api's\"><strong>📖docs/reference/web-api's🌍</strong></a></h3>\n<h3>189. <a href=\"https://bgoonz-blog.netlify.app/docs/reference\"><strong>📖docs/reference🌍</strong></a></h3>\n<h3>190. <a href=\"https://bgoonz-blog.netlify.app/docs/search\"><strong>📖docs/search🌍</strong></a></h3>\n<h3>191. <a href=\"https://bgoonz-blog.netlify.app/docs/sitemap\"><strong>📖docs/sitemap🌍</strong></a></h3>\n<h3>192. <a href=\"https://bgoonz-blog.netlify.app/docs/tips/array-methods\"><strong>📖docs/tips/array-methods🌍</strong></a></h3>\n<h3>193. <a href=\"https://bgoonz-blog.netlify.app/docs/tips/insert-into-array\"><strong>📖docs/tips/insert-into-array🌍</strong></a></h3>\n<h3>194. <a href=\"https://bgoonz-blog.netlify.app/docs/tips/sorting-strings\"><strong>📖docs/tips/sorting-strings🌍</strong></a></h3>\n<h3>195. <a href=\"https://bgoonz-blog.netlify.app/docs/tips\"><strong>📖docs/tips🌍</strong></a></h3>\n<h3>196. <a href=\"https://bgoonz-blog.netlify.app/docs/tools/Archive\"><strong>📖docs/tools/Archive🌍</strong></a></h3>\n<h3>197. <a href=\"https://bgoonz-blog.netlify.app/docs/tools/data-structures\"><strong>📖docs/tools/data-structures🌍</strong></a></h3>\n<h3>198. <a href=\"https://bgoonz-blog.netlify.app/docs/tools/dev-utilities\"><strong>📖docs/tools/dev-utilities🌍</strong></a></h3>\n<h3>199. <a href=\"https://bgoonz-blog.netlify.app/docs/tools/markdown-html\"><strong>📖docs/tools/markdown-html🌍</strong></a></h3>\n<h3>200. <a href=\"https://bgoonz-blog.netlify.app/docs/tools\"><strong>📖docs/tools🌍</strong></a></h3>\n<h3>201. <a href=\"https://bgoonz-blog.netlify.app/docs/tutorials/enviorment-setup\"><strong>📖docs/tutorials/enviorment-setup🌍</strong></a></h3>\n<h3>202. <a href=\"https://bgoonz-blog.netlify.app/docs/tutorials\"><strong>📖docs/tutorials🌍</strong></a></h3>\n<h3>203. <a href=\"https://bgoonz-blog.netlify.app/docs\"><strong>🖥️docs🌍</strong></a></h3>" | |
| }, | |
| { | |
| "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": "<h2>React Interview Questions & Answers</h2>\n<iframe width=\"700\" height=\"800\" frameborder=\"0\" scrolling=\"no\" src=\"https://onedrive.live.com/embed?resid=D21009FDD967A241%21738451&authkey=%21AOsv3osLtuIzGr0&em=2&AllowTyping=True&ActiveCell='Sheet1'!C5&wdDownloadButton=True&wdInConfigurator=True\"></iframe>\n<details>\n<summary> Questions Table </summary> \n<h4>Table of Contents</h4>\n<table>\n<thead>\n<tr>\n<th>No.</th>\n<th>Questions</th>\n<th data-type=\"checkbox\">\n</th>\n<th>Answer</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>\n</td>\n<td>\n<strong>Core React</strong>\n</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>1</td>\n<td>What is React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>2</td>\n<td>What are the major features of React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>3</td>\n<td>What is JSX?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>4</td>\n<td>What is the difference between Element and Component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>5</td>\n<td>How to create components in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>6</td>\n<td>When to use a Class Component over a Function Component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>7</td>\n<td>What are Pure Components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>8</td>\n<td>What is state in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>9</td>\n<td>What are props in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>10</td>\n<td>What is the difference between state and props?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>11</td>\n<td>Why should we not update the state directly?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>12</td>\n<td>What is the purpose of callback function as an argument of setState()?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>13</td>\n<td>What is the difference between HTML and React event handling?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>14</td>\n<td>How to bind methods or event handlers in JSX callbacks?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>15</td>\n<td>How to pass a parameter to an event handler or callback?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>16</td>\n<td>What are synthetic events in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>17</td>\n<td>What are inline conditional expressions?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>18</td>\n<td>What is \"key\" prop and what is the benefit of using it in arrays of elements?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>19</td>\n<td>What is the use of refs?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>20</td>\n<td>How to create refs?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>21</td>\n<td>What are forward refs?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>22</td>\n<td>Which is preferred option with in callback refs and findDOMNode()?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>23</td>\n<td>Why are String Refs legacy?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>24</td>\n<td>What is Virtual DOM?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>25</td>\n<td>How Virtual DOM works?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>26</td>\n<td>What is the difference between Shadow DOM and Virtual DOM?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>27</td>\n<td>What is React Fiber?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>28</td>\n<td>What is the main goal of React Fiber?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>29</td>\n<td>What are controlled components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>30</td>\n<td>What are uncontrolled components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>31</td>\n<td>What is the difference between createElement and cloneElement?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>32</td>\n<td>What is Lifting State Up in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>33</td>\n<td>What are the different phases of component lifecycle?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>34</td>\n<td>What are the lifecycle methods of React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>35</td>\n<td>What are Higher-Order components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>36</td>\n<td>How to create props proxy for HOC component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>37</td>\n<td>What is context?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>38</td>\n<td>What is children prop?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>39</td>\n<td>How to write comments in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>40</td>\n<td>What is the purpose of using super constructor with props argument?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>41</td>\n<td>What is reconciliation?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>42</td>\n<td>How to set state with a dynamic key name?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>43</td>\n<td>What would be the common mistake of function being called every time the component renders?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>44</td>\n<td>Is lazy function supports named exports?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>45</td>\n<td>Why React uses className over class attribute?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>46</td>\n<td>What are fragments?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>47</td>\n<td>Why fragments are better than container divs?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>48</td>\n<td>What are portals in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>49</td>\n<td>What are stateless components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>50</td>\n<td>What are stateful components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>51</td>\n<td>How to apply validation on props in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>52</td>\n<td>What are the advantages of React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>53</td>\n<td>What are the limitations of React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>54</td>\n<td>What are error boundaries in React v16</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>55</td>\n<td>How error boundaries handled in React v15?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>56</td>\n<td>What are the recommended ways for static type checking?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>57</td>\n<td>What is the use of react-dom package?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>58</td>\n<td>What is the purpose of render method of react-dom?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>59</td>\n<td>What is ReactDOMServer?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>60</td>\n<td>How to use InnerHtml in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>61</td>\n<td>How to use styles in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>62</td>\n<td>How events are different in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>63</td>\n<td>What will happen if you use setState in constructor?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>64</td>\n<td>What is the impact of indexes as keys?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>65</td>\n<td>Is it good to use setState() in componentWillMount() method?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>66</td>\n<td>What will happen if you use props in initial state?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>67</td>\n<td>How do you conditionally render components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>68</td>\n<td>Why we need to be careful when spreading props on DOM elements??</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>69</td>\n<td>How you use decorators in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>70</td>\n<td>How do you memoize a component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>71</td>\n<td>How you implement Server-Side Rendering or SSR?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>72</td>\n<td>How to enable production mode in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>73</td>\n<td>What is CRA and its benefits?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>74</td>\n<td>What is the lifecycle methods order in mounting?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>75</td>\n<td>What are the lifecycle methods going to be deprecated in React v16?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>76</td>\n<td>What is the purpose of getDerivedStateFromProps() lifecycle method?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>77</td>\n<td>What is the purpose of getSnapshotBeforeUpdate() lifecycle method?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>78</td>\n<td>Do Hooks replace render props and higher order components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>79</td>\n<td>What is the recommended way for naming components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>80</td>\n<td>What is the recommended ordering of methods in component class?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>81</td>\n<td>What is a switching component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>82</td>\n<td>Why we need to pass a function to setState()?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>83</td>\n<td>What is strict mode in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>84</td>\n<td>What are React Mixins?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>85</td>\n<td>Why is isMounted() an anti-pattern and what is the proper solution?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>86</td>\n<td>What are the Pointer Events supported in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>87</td>\n<td>Why should component names start with capital letter?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>88</td>\n<td>Are custom DOM attributes supported in React v16?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>89</td>\n<td>What is the difference between constructor and getInitialState?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>90</td>\n<td>Can you force a component to re-render without calling setState?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>91</td>\n<td>What is the difference between super() and super(props) in React using ES6 classes?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>92</td>\n<td>How to loop inside JSX?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>93</td>\n<td>How do you access props in attribute quotes?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>94</td>\n<td>What is React PropType array with shape?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>95</td>\n<td>How to conditionally apply class attributes?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>96</td>\n<td>What is the difference between React and ReactDOM?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>97</td>\n<td>Why ReactDOM is separated from React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>98</td>\n<td>How to use React label element?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>99</td>\n<td>How to combine multiple inline style objects?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>100</td>\n<td>How to re-render the view when the browser is resized?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>101</td>\n<td>What is the difference between setState and replaceState methods?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>102</td>\n<td>How to listen to state changes?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>103</td>\n<td>What is the recommended approach of removing an array element in react state?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>104</td>\n<td>Is it possible to use React without rendering HTML?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>105</td>\n<td>How to pretty print JSON with React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>106</td>\n<td>Why you can't update props in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>107</td>\n<td>How to focus an input element on page load?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>108</td>\n<td>What are the possible ways of updating objects in state?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>110</td>\n<td>How can we find the version of React at runtime in the browser?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>111</td>\n<td>What are the approaches to include polyfills in your create-react-app?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>112</td>\n<td>How to use https instead of http in create-react-app?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>113</td>\n<td>How to avoid using relative path imports in create-react-app?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>114</td>\n<td>How to add Google Analytics for react-router?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>115</td>\n<td>How to update a component every second?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>116</td>\n<td>How do you apply vendor prefixes to inline styles in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>117</td>\n<td>How to import and export components using react and ES6?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>118</td>\n<td>What are the exceptions on React component naming?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>119</td>\n<td>Why is a component constructor called only once?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>120</td>\n<td>How to define constants in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>121</td>\n<td>How to programmatically trigger click event in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>122</td>\n<td>Is it possible to use async/await in plain React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>123</td>\n<td>What are the common folder structures for React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>124</td>\n<td>What are the popular packages for animation?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>125</td>\n<td>What is the benefit of styles modules?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>126</td>\n<td>What are the popular React-specific linters?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>127</td>\n<td>How to make AJAX call and In which component lifecycle methods should I make an AJAX call?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>128</td>\n<td>What are render props?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>\n</td>\n<td>\n<strong>React Router</strong>\n</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>129</td>\n<td>What is React Router?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>130</td>\n<td>How React Router is different from history library?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>131</td>\n<td>What are the <Router> components of React Router v4?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>132</td>\n<td>What is the purpose of push and replace methods of history?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>133</td>\n<td>How do you programmatically navigate using React router v4?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>134</td>\n<td>How to get query parameters in React Router v4</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>135</td>\n<td>Why you get \"Router may have only one child element\" warning?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>136</td>\n<td>How to pass params to history.push method in React Router v4?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>137</td>\n<td>How to implement default or NotFound page?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>138</td>\n<td>How to get history on React Router v4?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>139</td>\n<td>How to perform automatic redirect after login?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>\n</td>\n<td>\n<strong>React Internationalization</strong>\n</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>140</td>\n<td>What is React-Intl?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>141</td>\n<td>What are the main features of React Intl?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>142</td>\n<td>What are the two ways of formatting in React Intl?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>143</td>\n<td>How to use FormattedMessage as placeholder using React Intl?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>144</td>\n<td>How to access current locale with React Intl</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>145</td>\n<td>How to format date using React Intl?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>\n</td>\n<td>\n<strong>React Testing</strong>\n</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>146</td>\n<td>What is Shallow Renderer in React testing?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>147</td>\n<td>What is TestRenderer package in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>148</td>\n<td>What is the purpose of ReactTestUtils package?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>149</td>\n<td>What is Jest?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>150</td>\n<td>What are the advantages of Jest over Jasmine?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>151</td>\n<td>Give a simple example of Jest test case</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>\n</td>\n<td>\n<strong>React Redux</strong>\n</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>152</td>\n<td>What is Flux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>153</td>\n<td>What is Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>154</td>\n<td>What are the core principles of Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>155</td>\n<td>What are the downsides of Redux compared to Flux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>156</td>\n<td>What is the difference between mapStateToProps() and mapDispatchToProps()?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>157</td>\n<td>Can I dispatch an action in reducer?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>158</td>\n<td>How to access Redux store outside a component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>159</td>\n<td>What are the drawbacks of MVW pattern</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>160</td>\n<td>Are there any similarities between Redux and RxJS?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>161</td>\n<td>How to dispatch an action on load?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>162</td>\n<td>How to use connect from React Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>163</td>\n<td>How to reset state in Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>164</td>\n<td>Whats the purpose of at symbol in the redux connect decorator?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>165</td>\n<td>What is the difference between React context and React Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>166</td>\n<td>Why are Redux state functions called reducers?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>167</td>\n<td>How to make AJAX request in Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>168</td>\n<td>Should I keep all component's state in Redux store?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>169</td>\n<td>What is the proper way to access Redux store?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>170</td>\n<td>What is the difference between component and container in React Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>171</td>\n<td>What is the purpose of the constants in Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>172</td>\n<td>What are the different ways to write mapDispatchToProps()?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>173</td>\n<td>What is the use of the ownProps parameter in mapStateToProps() and mapDispatchToProps()?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>174</td>\n<td>How to structure Redux top level directories?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>175</td>\n<td>What is redux-saga?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>176</td>\n<td>What is the mental model of redux-saga?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>177</td>\n<td>What are the differences between call and put in redux-saga</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>178</td>\n<td>What is Redux Thunk?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>179</td>\n<td>What are the differences between redux-saga and redux-thunk</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>180</td>\n<td>What is Redux DevTools?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>181</td>\n<td>What are the features of Redux DevTools?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>182</td>\n<td>What are Redux selectors and Why to use them?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>183</td>\n<td>What is Redux Form?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>184</td>\n<td>What are the main features of Redux Form?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>185</td>\n<td>How to add multiple middlewares to Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>186</td>\n<td>How to set initial state in Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>187</td>\n<td>How Relay is different from Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>188</td>\n<td>What is an action in Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>\n</td>\n<td>\n<strong>React Native</strong>\n</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>188</td>\n<td>What is the difference between React Native and React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>189</td>\n<td>How to test React Native apps?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>190</td>\n<td>How to do logging in React Native?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>191</td>\n<td>How to debug your React Native?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>\n</td>\n<td>\n<strong>React supported libraries and Integration</strong>\n</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>192</td>\n<td>What is reselect and how it works?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>193</td>\n<td>What is Flow?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>194</td>\n<td>What is the difference between Flow and PropTypes?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>195</td>\n<td>How to use font-awesome icons in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>196</td>\n<td>What is React Dev Tools?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>197</td>\n<td>Why is DevTools not loading in Chrome for local files?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>198</td>\n<td>How to use Polymer in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>199</td>\n<td>What are the advantages of React over Vue.js?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>200</td>\n<td>What is the difference between React and Angular?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>201</td>\n<td>Why React tab is not showing up in DevTools?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>202</td>\n<td>What are styled components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>203</td>\n<td>Give an example of Styled Components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>204</td>\n<td>What is Relay?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>205</td>\n<td>How to use TypeScript in create-react-app application?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>\n</td>\n<td>\n<strong>Miscellaneous</strong>\n</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>206</td>\n<td>What are the main features of reselect library?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>207</td>\n<td>Give an example of reselect usage?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>209</td>\n<td>Does the statics object work with ES6 classes in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>210</td>\n<td>Can Redux only be used with React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>211</td>\n<td>Do you need to have a particular build tool to use Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>212</td>\n<td>How Redux Form initialValues get updated from state?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>213</td>\n<td>How React PropTypes allow different type for one prop?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>214</td>\n<td>Can I import an SVG file as react component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>215</td>\n<td>Why are inline ref callbacks or functions not recommended?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>216</td>\n<td>What is render hijacking in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>217</td>\n<td>What are HOC factory implementations?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>218</td>\n<td>How to pass numbers to React component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>219</td>\n<td>Do I need to keep all my state into Redux? Should I ever use react internal state?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>220</td>\n<td>What is the purpose of registerServiceWorker in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>221</td>\n<td>What is React memo function?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>222</td>\n<td>What is React lazy function?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>223</td>\n<td>How to prevent unnecessary updates using setState?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>224</td>\n<td>How do you render Array, Strings and Numbers in React 16 Version?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>225</td>\n<td>How to use class field declarations syntax in React classes?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>226</td>\n<td>What are hooks?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>227</td>\n<td>What are the rules needs to follow for hooks?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>228</td>\n<td>How to ensure hooks followed the rules in your project?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>229</td>\n<td>What are the differences between Flux and Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>230</td>\n<td>What are the benefits of React Router V4?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>231</td>\n<td>Can you describe about componentDidCatch lifecycle method signature?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>232</td>\n<td>In which scenarios error boundaries do not catch errors?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>233</td>\n<td>Why do you not need error boundaries for event handlers?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>234</td>\n<td>What is the difference between try catch block and error boundaries?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>235</td>\n<td>What is the behavior of uncaught errors in react 16?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>236</td>\n<td>What is the proper placement for error boundaries?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>237</td>\n<td>What is the benefit of component stack trace from error boundary?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>238</td>\n<td>What is the required method to be defined for a class component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>239</td>\n<td>What are the possible return types of render method?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>240</td>\n<td>What is the main purpose of constructor?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>241</td>\n<td>Is it mandatory to define constructor for React component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>242</td>\n<td>What are default props?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>243</td>\n<td>Why should not call setState in componentWillUnmount?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>244</td>\n<td>What is the purpose of getDerivedStateFromError?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>245</td>\n<td>What is the methods order when component re-rendered?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>246</td>\n<td>What are the methods invoked during error handling?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>247</td>\n<td>What is the purpose of displayName class property?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>248</td>\n<td>What is the browser support for react applications?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>249</td>\n<td>What is the purpose of unmountComponentAtNode method?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>250</td>\n<td>What is code-splitting?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>251</td>\n<td>What is the benefit of strict mode?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>252</td>\n<td>What are Keyed Fragments?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>253</td>\n<td>Does React support all HTML attributes?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>254</td>\n<td>What are the limitations with HOCs?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>255</td>\n<td>How to debug forwardRefs in DevTools?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>256</td>\n<td>When component props defaults to true?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>257</td>\n<td>What is NextJS and major features of it?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>258</td>\n<td>How do you pass an event handler to a component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>259</td>\n<td>Is it good to use arrow functions in render methods?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>260</td>\n<td>How to prevent a function from being called multiple times?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>261</td>\n<td>How JSX prevents Injection Attacks?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>262</td>\n<td>How do you update rendered elements?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>263</td>\n<td>How do you say that props are read only?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>264</td>\n<td>How do you say that state updates are merged?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>265</td>\n<td>How do you pass arguments to an event handler?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>266</td>\n<td>How to prevent component from rendering?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>267</td>\n<td>What are the conditions to safely use the index as a key?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>268</td>\n<td>Is it keys should be globally unique?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>269</td>\n<td>What is the popular choice for form handling?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>270</td>\n<td>What are the advantages of formik over redux form library?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>271</td>\n<td>Why do you not required to use inheritance?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>272</td>\n<td>Can I use web components in react application?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>273</td>\n<td>What is dynamic import?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>274</td>\n<td>What are loadable components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>275</td>\n<td>What is suspense component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>276</td>\n<td>What is route based code splitting?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>277</td>\n<td>Give an example on How to use context?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>278</td>\n<td>What is the purpose of default value in context?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>279</td>\n<td>How do you use contextType?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>280</td>\n<td>What is a consumer?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>281</td>\n<td>How do you solve performance corner cases while using context?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>282</td>\n<td>What is the purpose of forward ref in HOCs?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>283</td>\n<td>Is it ref argument available for all functions or class components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>284</td>\n<td>Why do you need additional care for component libraries while using forward refs?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>285</td>\n<td>How to create react class components without ES6?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>286</td>\n<td>Is it possible to use react without JSX?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>287</td>\n<td>What is diffing algorithm?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>288</td>\n<td>What are the rules covered by diffing algorithm?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>289</td>\n<td>When do you need to use refs?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>290</td>\n<td>Is it prop must be named as render for render props?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>291</td>\n<td>What are the problems of using render props with pure components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>292</td>\n<td>How do you create HOC using render props?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>293</td>\n<td>What is windowing technique?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>294</td>\n<td>How do you print falsy values in JSX?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>295</td>\n<td>What is the typical use case of portals?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>296</td>\n<td>How do you set default value for uncontrolled component?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>297</td>\n<td>What is your favorite React stack?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>298</td>\n<td>What is the difference between Real DOM and Virtual DOM?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>299</td>\n<td>How to add Bootstrap to a react application?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>300</td>\n<td>Can you list down top websites or applications using react as front end framework?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>301</td>\n<td>Is it recommended to use CSS In JS technique in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>302</td>\n<td>Do I need to rewrite all my class components with hooks?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>303</td>\n<td>How to fetch data with React Hooks?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>304</td>\n<td>Is Hooks cover all use cases for classes?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>305</td>\n<td>What is the stable release for hooks support?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>306</td>\n<td>Why do we use array destructuring (square brackets notation) in useState?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>307</td>\n<td>What are the sources used for introducing hooks?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>308</td>\n<td>How do you access imperative API of web components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>309</td>\n<td>What is formik?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>310</td>\n<td>What are typical middleware choices for handling asynchronous calls in Redux?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>311</td>\n<td>Do browsers understand JSX code?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>312</td>\n<td>Describe about data flow in react?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>313</td>\n<td>What is react scripts?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>314</td>\n<td>What are the features of create react app?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>315</td>\n<td>What is the purpose of renderToNodeStream method?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>316</td>\n<td>What is MobX?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>317</td>\n<td>What are the differences between Redux and MobX?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>318</td>\n<td>Should I learn ES6 before learning ReactJS?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>319</td>\n<td>What is Concurrent Rendering?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>320</td>\n<td>What is the difference between async mode and concurrent mode?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>321</td>\n<td>Can I use javascript urls in react16.9?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>322</td>\n<td>What is the purpose of eslint plugin for hooks?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>323</td>\n<td>What is the difference between Imperative and Declarative in React?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>324</td>\n<td>What are the benefits of using typescript with reactjs?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>325</td>\n<td>How do you make sure that user remains authenticated on page refresh while using Context API State Management?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>326</td>\n<td>What are the benefits of new JSX transform?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>327</td>\n<td>How does new JSX transform different from old transform?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>328</td>\n<td>How do you get redux scaffolding using create-react-app?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n<tr>\n<td>329</td>\n<td>What are React Server components?</td>\n<td>false</td>\n<td>\n</td>\n</tr>\n</tbody>\n</table>\n</details>" | |
| }, | |
| { | |
| "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": "<h3>Sorting Algorithms<img src=\"https://cdn-images-1.medium.com/max/800/0*Ck9aeGY-d5tbz7dT\"><img src=\"https://cdn-images-1.medium.com/max/800/0*AByxtBjFrPVVYmyu\"><img src=\"https://cdn-images-1.medium.com/max/800/0*GeYNxlRcbt2cf0rY\"><img src=\"https://cdn-images-1.medium.com/max/800/0*gbNU6wrszGPrfAZG\"><img src=\"https://cdn-images-1.medium.com/max/800/0*GeU8YwwCoK8GiSTD\"><img src=\"https://cdn-images-1.medium.com/max/800/0*IxqGb72XDVDeeiMl\"><img src=\"https://cdn-images-1.medium.com/max/800/0*HMCR--9niDt5zY6M\"><img src=\"https://cdn-images-1.medium.com/max/800/0*WLl_HpdBGXYx284T\"><img src=\"https://cdn-images-1.medium.com/max/800/0*-LyHJXGPTYsWLDZf\"><img src=\"https://cdn-images-1.medium.com/max/800/0*-naVYGTXzE2Yoali\">\n\n</h3>\n<h3>Bubble Sort</h3>\n<p>Time Complexity: Quadratic O(n^2)</p>\n<ul>\n<li>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.</li>\n</ul>\n<p>Space Complexity: O(1)</p>\n<ul>\n<li>Bubble Sort will always use the same amount of memory regardless of n.</li>\n</ul>\n<p><a href=\"https://gist.github.com/eengineergz/e67e56bed7c5a20a54851867ba5efef6\">https://gist.github.com/eengineergz/e67e56bed7c5a20a54851867ba5efef6</a></p>\n<ul>\n<li>The first major sorting algorithm one learns in introductory programming courses.</li>\n<li>Gives an intro on how to convert unsorted data into sorted data.</li>\n</ul>\n<blockquote>\n<p>It's almost never used in production code because:</p>\n</blockquote>\n<ul>\n<li><em>It's not efficient</em></li>\n<li><em>It's not commonly used</em></li>\n<li><em>There is stigma attached to it</em></li>\n<li><em>Bubbling Up : Term that infers that an item is in motion, moving in some direction, and has some final resting destination.</em></li>\n<li><em>Bubble sort, sorts an array of integers by bubbling the largest integer to the top.</em></li>\n</ul>\n<p><a href=\"https://gist.github.com/eengineergz/fd4acc0c89033bd219ebf9d3ec40b053\">https://gist.github.com/eengineergz/fd4acc0c89033bd219ebf9d3ec40b053</a><a href=\"https://gist.github.com/eengineergz/80934783c628c70ac2a5a48119a82d54\">https://gist.github.com/eengineergz/80934783c628c70ac2a5a48119a82d54</a></p>\n<ul>\n<li><em>Worst Case & Best Case are always the same because it makes nested loops.</em></li>\n<li><em>Double for loops are polynomial time complexity or more specifically in this case Quadratic (Big O) of: O(n²)</em></li>\n</ul>\n<h3>Selection Sort</h3>\n<p>Time Complexity: Quadratic O(n^2)</p>\n<ul>\n<li>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²);</li>\n</ul>\n<p>Space Complexity: O(1)</p>\n<ul>\n<li>Selection Sort will always use the same amount of memory regardless of n.</li>\n</ul>\n<p><a href=\"https://gist.github.com/eengineergz/4abc0fe0bf01599b0c4104b0ba633402\">https://gist.github.com/eengineergz/4abc0fe0bf01599b0c4104b0ba633402</a></p>\n<ul>\n<li>Selection sort organizes the smallest elements to the start of the array.</li>\n</ul>\n<blockquote>\n<p>Summary of how Selection Sort should work:</p>\n</blockquote>\n<ol>\n<li><em>Set MIN to location 0</em></li>\n<li><em>Search the minimum element in the list.</em></li>\n<li><em>Swap with value at location Min</em></li>\n<li><em>Increment Min to point to next element.</em></li>\n<li><em>Repeat until list is sorted.</em></li>\n</ol>\n<p><a href=\"https://gist.github.com/eengineergz/61f130c8e0097572ed908fe2629bdee0\">https://gist.github.com/eengineergz/61f130c8e0097572ed908fe2629bdee0</a></p>\n<h3>Insertion Sort</h3>\n<p>Time Complexity: Quadratic O(n^2)</p>\n<ul>\n<li>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²);</li>\n</ul>\n<p>Space Complexity: O(n)</p>\n<ul>\n<li>Because we are creating a subArray for each element in the original input, our Space Comlexity becomes linear.</li>\n</ul>\n<p><a href=\"https://gist.github.com/eengineergz/a9f4b8596c7546ac92746db659186d8c\">https://gist.github.com/eengineergz/a9f4b8596c7546ac92746db659186d8c</a></p>\n<h3>Merge Sort</h3>\n<p>Time Complexity: Log Linear O(nlog(n))</p>\n<ul>\n<li>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)</li>\n<li>We are linear O(n) time because we are creating subArrays.</li>\n</ul>\n<h3>Example of Merge Sort</h3>\n<p><a href=\"https://gist.github.com/eengineergz/18fbb7edc9f5c4820ccfcecacf3c5e48\">https://gist.github.com/eengineergz/18fbb7edc9f5c4820ccfcecacf3c5e48</a><a href=\"https://gist.github.com/eengineergz/cbb533137a7f957d3bc4077395c1ff64\">https://gist.github.com/eengineergz/cbb533137a7f957d3bc4077395c1ff64</a></p>\n<ul>\n<li><strong>Merge sort is O(nlog(n)) time.</strong></li>\n<li><em>We need a function for merging and a function for sorting.</em></li>\n</ul>\n<blockquote>\n<p>Steps:</p>\n</blockquote>\n<ol>\n<li><em>If there is only one element in the list, it is already sorted; return the array.</em></li>\n<li><em>Otherwise, divide the list recursively into two halves until it can no longer be divided.</em></li>\n<li><em>Merge the smallest lists into new list in a sorted order.</em></li>\n</ol>\n<h3>Quick Sort</h3>\n<p>Time Complexity: Quadratic O(n^2)</p>\n<ul>\n<li>Even though the average time complexity O(nLog(n)), the worst case scenario is always quadratic.</li>\n</ul>\n<p>Space Complexity: O(n)</p>\n<ul>\n<li>Our space complexity is linear O(n) because of the partition arrays we create.</li>\n<li>QS is another Divide and Conquer strategy.</li>\n<li>Some key ideas to keep in mind:</li>\n<li>It is easy to sort elements of an array relative to a particular target value.</li>\n<li>An array of 0 or 1 elements is already trivially sorted.</li>\n</ul>\n<p><a href=\"https://gist.github.com/eengineergz/24bcbc5248a8c4e1671945e9512da57e\">https://gist.github.com/eengineergz/24bcbc5248a8c4e1671945e9512da57e</a></p>\n<h3>Binary Search</h3>\n<p>Time Complexity: Log Time O(log(n))</p>\n<p>Space Complexity: O(1)</p>\n<blockquote>\n<p><em>Recursive Solution</em></p>\n</blockquote>\n<p><a href=\"https://gist.github.com/eengineergz/c82c00a4bcba4b69b7d326d6cad3ac8c\">https://gist.github.com/eengineergz/c82c00a4bcba4b69b7d326d6cad3ac8c</a></p>\n<blockquote>\n<p><em>Min Max Solution</em></p>\n</blockquote>\n<p><a href=\"https://gist.github.com/eengineergz/eb8d1e1684db15cc2c8af28e13f38751\">https://gist.github.com/eengineergz/eb8d1e1684db15cc2c8af28e13f38751</a><a href=\"https://gist.github.com/eengineergz/bc3f576b9795ccef12a108e36f9f820a\">https://gist.github.com/eengineergz/bc3f576b9795ccef12a108e36f9f820a</a></p>\n<ul>\n<li><em>Must be conducted on a sorted array.</em></li>\n<li><em>Binary search is logarithmic time, not exponential b/c n is cut down by two, not growing.</em></li>\n<li><em>Binary Search is part of Divide and Conquer.</em></li>\n</ul>\n<h3>Insertion Sort</h3>\n<ul>\n<li><strong>Works by building a larger and larger sorted region at the left-most end of the array.</strong></li>\n</ul>\n<blockquote>\n<p>Steps:</p>\n</blockquote>\n<ol>\n<li><em>If it is the first element, and it is already sorted; return 1.</em></li>\n<li><em>Pick next element.</em></li>\n<li><em>Compare with all elements in the sorted sub list</em></li>\n<li><em>Shift all the elements in the sorted sub list that is greater than the value to be sorted.</em></li>\n<li><em>Insert the value</em></li>\n<li><em>Repeat until list is sorted.</em></li>\n</ol>\n<p><a href=\"https://gist.github.com/eengineergz/ffead1de0836c4bcc6445780a604f617\">https://gist.github.com/eengineergz/ffead1de0836c4bcc6445780a604f617</a></p>" | |
| }, | |
| { | |
| "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": "<h2>Blog Archive</h2>\n <iframe style=\"z-index:-1!important; overflow:scroll;resize:both;\" width=\"400\" height=\"575\"\n src=\"https://bgoonz.blogspot.com/\" \n frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write;\n encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>" | |
| }, | |
| { | |
| "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": "<h2>Table of Contents\n\n</h2>\n<ul>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#spec\">Specification</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#community\">Community</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#meetups\">GraphQL Meetups</a></li>\n<li>\n<p><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib\">Libraries</a></p>\n<ul>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-js\">Javascript</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-ts\">Typescript</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-rb\">Ruby</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-php\">PHP</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-py\">Python</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-java\">Java</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-c\">C/C++</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-go\">Go</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-scala\">Scala</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-perl\">Perl</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-dotnet\">.NET</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-erlang\">Erlang</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-elixir\">Elixir</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-haskell\">Haskell</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-sql\">SQL</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-lua\">Lua</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-elm\">Elm</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-clojure\">Clojure</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-clojurescript\">ClojureScript</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-swift\">Swift</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-ocaml\">OCaml</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-rust\">Rust</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-r\">R</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-julia\">Julia</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-kotlin\">Kotlin</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-unity\">Unity</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#lib-crystal\">Crystal</a></li>\n</ul>\n</li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#tools\">Tools</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#services\">Services</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#databases\">Databases</a></li>\n<li>\n<p><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#example\">Examples</a></p>\n<ul>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#example-js\">Javascript</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#example-ts\">Typescript</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#example-rb\">Ruby</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#example-go\">Go</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#example-scala\">Scala</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#example-python\">Python</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#example-elixir\">Elixir</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#example-php\">PHP</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#example-reasonml\">ReasonML</a></li>\n</ul>\n</li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#video\">Videos</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#blogs\">Blogs</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#post\">Posts</a></li>\n<li><a href=\"https://github.com/dhruv-kumar-jha/awesome-graphql#workshopper\">Workshoppers</a></li>\n</ul>\n<h2>Specification</h2>\n<ul>\n<li><a href=\"http://facebook.github.io/graphql/\">facebook/graphql</a> - Working Draft of the Specification for GraphQL created by Facebook.</li>\n</ul>\n<h2>Community</h2>\n<ul>\n<li><a href=\"https://graphql.slack.com/messages/general\">Slack</a> - Share and help people on the chat. Get your invite <a href=\"https://graphql-slack.herokuapp.com/\">here</a></li>\n<li><a href=\"https://webchat.freenode.net/?channels=#graphql\">#graphql on Freenode</a> - The official IRC channel for GraphQL</li>\n<li><a href=\"https://www.facebook.com/groups/795330550572866/\">Facebook</a> - Group for discussions, articles and knowledge sharing</li>\n<li><a href=\"https://twitter.com/search?q=%23GraphQL\">Twitter</a> - Use the hashtag <a href=\"https://twitter.com/search?q=%23GraphQL\">#graphql</a></li>\n<li><a href=\"https://stackoverflow.com/questions/tagged/graphql\">StackOverflow</a> - Questions and answers. Use the tag <a href=\"http://stackoverflow.com/questions/tagged/graphql\">graphql</a></li>\n<li><a href=\"https://github.com/APIs-guru/graphql-apis\">GraphQL APIs</a> - A collective list of public GraphQL APIs</li>\n<li><a href=\"https://graphql-world.com/\">GraphQL World</a> - The fastest growing community of GraphQL developers</li>\n</ul>\n<h2>GraphQL Meetups</h2>\n<ul>\n<li><a href=\"https://www.meetup.com/graphql-berlin/\">Berlin</a></li>\n<li><a href=\"https://www.meetup.com/es-ES/GraphQL-BA/\">Buenos Aires</a></li>\n<li><a href=\"https://www.meetup.com/DFW-GraphQL-Meetup/\">Dallas-Fort Worth</a></li>\n<li><a href=\"https://www.meetup.com/GraphQL-Istanbul/\">Istanbul</a></li>\n<li><a href=\"https://www.meetup.com/GraphQL-London/\">London</a></li>\n<li><a href=\"https://www.meetup.com/GraphQL-Melbourne/\">Melbourne</a></li>\n<li><a href=\"https://www.meetup.com/GraphQL-Munich/\">Munich</a></li>\n<li><a href=\"https://www.meetup.com/GraphQL-NYC/\">New York City</a></li>\n<li><a href=\"https://www.meetup.com/GraphQL-SF/\">San Francisco</a></li>\n<li><a href=\"https://www.meetup.com/GraphQL-Sydney/\">Sydney</a></li>\n<li><a href=\"https://www.meetup.com/GraphQL-TLV/\">Tel Aviv</a></li>\n<li><a href=\"https://www.meetup.com/GraphQL-Toronto/\">Toronto</a></li>\n</ul>\n<h2>Libraries</h2>\n<h3>JavaScript Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/graphql/graphql-js\">GraphQL.js</a> - A reference implementation of GraphQL for JavaScript.</li>\n<li><a href=\"https://github.com/graphql/express-graphql\">express-graphql</a> - GraphQL Express Middleware.</li>\n<li><a href=\"https://github.com/chentsulin/koa-graphql\">koa-graphql</a> - GraphQL Koa Middleware.</li>\n<li><a href=\"https://github.com/SimonDegraeve/hapi-graphql\">hapi-graphql</a> - Create a GraphQL HTTP server with Hapi.</li>\n<li><a href=\"https://github.com/graphql/codemirror-graphql\">codemirror-graphql</a> - GraphQL mode and helpers for CodeMirror.</li>\n<li><a href=\"https://github.com/devknoll/graphql-schema\">graphql-schema</a> - Create GraphQL schemas with a fluent/chainable interface.</li>\n<li><a href=\"https://github.com/mickhansen/graphql-sequelize\">graphql-sequelize</a> - Sequelize helpers for GraphQL.</li>\n<li><a href=\"https://github.com/Glavin001/graphql-sequelize-crud\">graphql-sequelize-crud</a> - Automatically generate queries and mutations from Sequelize models.</li>\n<li><a href=\"https://github.com/RisingStack/graffiti\">graffiti</a> - Node.js GraphQL ORM.</li>\n<li><a href=\"https://github.com/RisingStack/graffiti-mongoose\">graffiti-mongoose</a> - Mongoose (MongoDB) adapter for graffiti (Node.js GraphQL ORM).</li>\n<li><a href=\"https://github.com/ooflorent/babel-plugin-graphql\">babel-plugin-graphql</a> - Babel plugin that compile GraphQL tagged template strings.</li>\n<li><a href=\"https://github.com/gyzerok/adrenaline\">adrenaline</a> - React bindings for Redux with Relay in mind.</li>\n<li><a href=\"https://github.com/brysgo/graphql-bookshelf\">graphql-bookshelf</a> - Some help defining GraphQL schema around BookshelfJS models.</li>\n<li><a href=\"https://github.com/weyoss/graphql-bookshelfjs\">graphql-bookshelfjs</a> - A simple bridge between your graphql queries and your bookshelf models, perform batched and optimised queries.</li>\n<li><a href=\"https://github.com/matthewmueller/graph.ql\">graph.ql</a> - Faster and simpler technique for creating and querying GraphQL schemas.</li>\n<li><a href=\"https://github.com/kennetpostigo/react-reach\">react-reach</a> - A library to communicate with Graphql through Redux</li>\n<li><a href=\"https://github.com/kadirahq/lokka\">Lokka</a> - Simple JavaScript client for GraphQL, which you can use anywhere.</li>\n<li><a href=\"http://strapi.io/documentation/graphql\">Strapi</a> - Open-source Node.js framework that supports \"GraphQL\" out of the box.</li>\n<li><a href=\"https://github.com/larsbs/graysql\">GraysQL</a> - A GraphQL manager and loader.</li>\n<li><a href=\"https://github.com/larsbs/graysql-orm-loader\">graysql-orm-loader</a> - A GraysQL extension to load a GraphQL schema from an ORM.</li>\n<li><a href=\"https://github.com/almilo/annotated-graphql\">Annotated GraphQL</a> - Proof of Concept for annotations in GraphQL (i.e.: transform an existing REST api into a GraphQL endpoint).</li>\n<li><a href=\"https://github.com/apollographql/apollo-client\">Apollo Client</a> - A well-documented GraphQL client. Has React and Angular bindings.</li>\n<li><a href=\"https://github.com/apollographql/graphql-tools\">graphql-tools</a> - Tool library for building and maintaining GraphQL-JS servers.</li>\n<li><a href=\"https://github.com/apollographql/graphql-anywhere\">graphql-anywhere</a> - Run a GraphQL query anywhere, against any data, with no schema.</li>\n<li><a href=\"https://github.com/apollographql/graphql-tag\">graphql-tag</a> - A JavaScript template literal tag that parses GraphQL queries.</li>\n<li><a href=\"https://github.com/julienvincent/modelizr\">modelizr</a> - A library for simplifying the process of writing GraphQL queries, mocking them and normalizing their responses.</li>\n<li><a href=\"https://github.com/Akryum/vue-apollo\">vue-apollo</a> - Vue integration for apollo.</li>\n<li><a href=\"https://github.com/fenos/graphql-thinky\">graphql-thinky</a> - Build an optimized GraphQL schema from Thinky RethinkDB models.</li>\n<li><a href=\"https://github.com/MikeBild/graphql-pouch\">graphql-pouch</a> - A GraphQL-API runtime on top of PouchDB created by GraphQL shorthand notation as a self contained service with CouchDB synchronization.</li>\n<li><a href=\"https://github.com/almilo/gql-tools\">gql-tools</a> - Tool library with CLI for schema generation and manipulation.</li>\n<li><a href=\"https://github.com/excitement-engineer/graphql-iso-date\">graphql-iso-date</a> - A GraphQL date scalar type to be used with GraphQL.js. This scalar represents a date in the ISO 8601 format YYYY-MM-DD.</li>\n<li><a href=\"https://github.com/nodkz/graphql-compose\">graphql-compose</a> - Tool which allows you to construct flexible graphql schema from different data sources via plugins.</li>\n<li><a href=\"https://github.com/mwilliamson/node-graphjoiner\">node-graphjoiner</a> - Create GraphQL APIs using joins, SQL or otherwise.</li>\n<li><a href=\"https://github.com/gucheen/FetchQL\">FetchQL</a> - GraphQL query client with Fetch</li>\n<li><a href=\"https://github.com/stems/join-monster\">Join Monster</a> - A GraphQL-to-SQL query execution layer for batch data fetching.</li>\n<li><a href=\"https://github.com/graphql-community/create-graphql\">Create-GraphQL</a> - Command-line utility to build production-ready servers with GraphQL.</li>\n<li><a href=\"https://github.com/lucasbento/graphql-pokemon\">GraphQL-Pokémon</a> - Get information of a Pokémon with GraphQL!</li>\n<li><a href=\"https://github.com/graphql-factory\">graphql-factory</a> - Create GraphQL types from JSON definitions</li>\n<li><a href=\"https://chrome.google.com/webstore/detail/chromeiql/fkkiamalmpiidkljmicmjfbieiclmeij\">ChromeiQL</a> - Chrome extension to use GraphiQL anywhere</li>\n<li><a href=\"https://github.com/ejoebstl/graphql-auto-mutation\">graphql-auto-mutation</a> - Automatically generates functions for mutations specified in a GraphQL schema.</li>\n<li><a href=\"https://github.com/graphitejs/graphitejs\">GraphiteJS</a> - Full stack GraphQL framework.</li>\n<li><a href=\"https://github.com/tallyb/loopback-graphql\">loopback-graphql</a> - GraphQL Server for Loopback.</li>\n<li><a href=\"https://github.com/octet-stream/parasprite\">parasprite</a> - Describe your GraphQL schema using chainable interface.</li>\n<li><a href=\"https://github.com/f/graphql.js\">GraphQL.js</a> - JavaScript GraphQL Client for Browser and Node.js Usage</li>\n<li><a href=\"https://github.com/arangodb/graphql-sync\">graphql-sync</a> - Promise-free wrapper to GraphQL.js for synchronous environments</li>\n<li><a href=\"https://github.com/apollographql/apollo-fetch\">apollo-fetch</a> - Lightweight GraphQL client that supports custom fetch functions, middleware, and afterware</li>\n<li><a href=\"https://github.com/spikenail/spikenail\">Spikenail</a> - Node.js framework for building GraphQL API almost without coding.</li>\n<li><a href=\"https://github.com/AEB-labs/graphql-weaver\">graphql-weaver</a> - A tool to combine, link and transform GraphQL schemas; combine multiple GraphQL servers into one API.</li>\n<li><a href=\"https://github.com/APIs-guru/graphql-lodash\">graphql-lodash</a> - Data manipulation for GraphQL queries with lodash syntax.</li>\n<li><a href=\"https://github.com/apollographql/apollo-angular\">apollo-angular</a> - Angular integration for Apollo.</li>\n<li><a href=\"https://github.com/lucasconstantino/graphql-resolvers\">graphql-resolvers</a> - Resolver composition library for GraphQL.</li>\n<li><a href=\"https://github.com/thebigredgeek/apollo-resolvers\">apollo-resolvers</a> - Expressive and composable resolvers for Apollo Server and graphql-tools.</li>\n<li><a href=\"https://github.com/thebigredgeek/apollo-errors\">apollo-errors</a> - Machine-readable custom errors for Apollo Server.</li>\n<li><a href=\"https://github.com/helfer/graphql-disable-introspection\">graphql-disable-introspection</a> - Graphql Disable Introspection</li>\n<li><a href=\"https://github.com/arackaf/mongo-graphql-starter\">mongo-graphql-starter</a> - Flexible and robust Mongo based resolvers for Node.</li>\n<li><a href=\"https://github.com/imolorhe/altair\">altair-express-middleware</a> - An express middleware for mounting an instance of Altair GraphQL client.</li>\n<li><a href=\"https://github.com/pa-bru/graphql-cost-analysis\">graphql-cost-analysis</a> - A Graphql query cost analyzer.</li>\n</ul>\n<h5>Relay Related</h5>\n<ul>\n<li><a href=\"https://github.com/facebook/relay\">relay</a> - Relay is a JavaScript framework for building data-driven React applications.</li>\n<li><a href=\"https://github.com/graphql/graphql-relay-js\">graphql-relay-js</a> - A library to help construct a graphql-js server supporting react-relay.</li>\n<li><a href=\"https://github.com/MattMcFarland/sequelize-relay\">sequelize-relay</a> - Serverside library that connects sequelize and graphql-relay-js together.</li>\n<li><a href=\"https://github.com/graphcool/babel-plugin-react-relay\">babel-plugin-react-relay</a> - Babel Plugin for Relay with support for JSON & graphql-js schemas and URL endpoints.</li>\n<li><a href=\"https://www.npmjs.com/package/babel-relay-plugin\">babel-relay-plugin</a> - Babel Relay Plugin for transpiling GraphQL queries for use with Relay.</li>\n<li><a href=\"https://github.com/relay-tools/react-router-relay\">react-router-relay</a> - Relay integration for React Router.</li>\n<li><a href=\"https://github.com/relay-tools/relay-local-schema\">relay-local-schema</a> - Use Relay without a GraphQL server.</li>\n<li><a href=\"https://github.com/acdlite/relay-sink\">relay-sink</a> - Use Relay to fetch and store data outside of a React component.</li>\n<li><a href=\"https://github.com/acdlite/recompose/tree/master/src/packages/recompose-relay\">recompose-relay</a> - Recompose helpers for Relay.</li>\n<li><a href=\"https://github.com/larsbs/graysql#Graylay\">Graylay</a> - A GraysQL extension to create a Relay compatible Schema.</li>\n<li><a href=\"https://github.com/apollographql/apollo-client\">Apollo Client</a> - A simple alternative to Relay, comes with React and Angular bindings.</li>\n<li><a href=\"https://github.com/nodkz/react-relay-network-layer\">react-relay-network-layer</a> - A network layer for Relay with query batching and middleware support (urlThunk, retryThunk, auth, defer and other).</li>\n<li><a href=\"https://github.com/edvinerikson/relay-subscriptions\">relay-subscriptions</a> - Subscription support for Relay.</li>\n<li><a href=\"https://github.com/alex-cory/portfolio\">Portfolio Relay Example</a> - An example website that fetches data from various apis and uses Relay and GraphQL to feed the data to React components!</li>\n<li><a href=\"https://github.com/lucasbento/react-relay-pokemon\">Relay Pokédex</a> - Project using GraphQL Pokémon to show how powerful Relay is.</li>\n<li><a href=\"https://github.com/ntkme/vue-relay\">vue-relay</a> - A framework for building GraphQL-driven Vue.js applications.</li>\n</ul>\n<h3>TypeScript Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/19majkel94/type-graphql\">TypeGraphQL</a> - Create GraphQL schema and resolvers with TypeScript, using classes and decorators!</li>\n<li><a href=\"http://vesper-framework.com/\">Vesper</a> - NodeJS framework that helps you to create scalable, maintainable, extensible, declarative and fast GraphQL-based server applications.</li>\n<li><a href=\"https://github.com/calebmer/graphql-strong\">graphql-strong</a> - Define your GraphQL schemas with confidence that your values are correct.</li>\n<li><a href=\"https://github.com/3VLINC/graphql-to-typescript\">graphql-to-typescript</a> - Compiles GraphQL files into an importable typescript module with type definitions</li>\n<li><a href=\"https://github.com/Quramy/graphql-decorator\">graphql-decorator</a> - Helps to build GraphQL schema with TypeScript.</li>\n<li><a href=\"https://github.com/indigotech/graphql-schema-decorator\">graphql-schema-decorator</a> - This package makes possible the use of decorators to define a GraphQL schema.</li>\n<li><a href=\"https://github.com/vichyssoise/graphql-typescript\">graphql-typescript</a> - Define and build GraphQL Schemas using typed classes</li>\n<li><a href=\"https://github.com/prismake/typegql\">typegql</a> - Create GraphQL schema with type-safe class decorators.</li>\n</ul>\n<h3>Ruby Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/rmosolgo/graphql-ruby\">graphql-ruby</a> - Ruby implementation of Facebook's GraphQL.</li>\n<li><a href=\"https://github.com/Shopify/graphql-parser\">graphql-parser</a> - A small ruby gem wrapping the libgraphqlparser C library for parsing GraphQL.</li>\n<li><a href=\"https://github.com/github/graphql-client\">graphql-client</a> - A Ruby library for declaring, composing and executing GraphQL queries.</li>\n<li><a href=\"https://github.com/Shopify/graphql-batch\">graphql-batch</a> - A query batching executor for the graphql gem.</li>\n<li><a href=\"https://github.com/exaspark/batch-loader\">batch-loader</a> - A powerful tool to avoid N+1 queries without extra dependencies or primitives.</li>\n<li><a href=\"https://github.com/exAspArk/graphql-guard\">graphql-guard</a> - A simple field-level authorization for the graphql gem.</li>\n</ul>\n<h3>PHP Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/webonyx/graphql-php\">graphql-php</a> - A PHP port of GraphQL reference implementation.</li>\n<li><a href=\"https://github.com/ivome/graphql-relay-php\">graphql-relay-php</a> - Relay helpers for GraphQL & PHP.</li>\n<li><a href=\"https://github.com/api-platform/api-platform\">API Platform</a> - API framework compatible with Symfony having native GraphQL support.</li>\n<li><a href=\"https://github.com/Folkloreatelier/laravel-graphql\">laravel-graphql</a> - Facebook GraphQL for Laravel 5.</li>\n<li><a href=\"https://github.com/nuwave/laravel-graphql-relay\">laravel-graphql-relay</a> - A Laravel library to help construct a server supporting react-relay.</li>\n<li><a href=\"https://github.com/4rthem/graphql-mapper\">graphql-mapper</a> - This library allows to build a GraphQL schema based on your model.</li>\n<li><a href=\"https://github.com/suribit/GraphQLBundle\">graphql-bundle</a> - GraphQL Bundle for Symfony 2.</li>\n<li><a href=\"https://github.com/overblog/GraphQLBundle\">overblog/graphql-bundle</a> - This bundle provides tools to build a complete GraphQL server in your Symfony App. Supports react-relay.</li>\n<li><a href=\"https://github.com/Youshido/GraphQL\">GraphQL</a> - Well documented PHP implementation with no dependencies.</li>\n<li><a href=\"https://github.com/Youshido/GraphQLBundle\">GraphQL Symfony Bundle</a> - GraphQL Bundle for the Symfony 3 (supports 2.6+).</li>\n<li><a href=\"https://github.com/wp-graphql/wp-graphql\">WPGraphQL</a> - WordPress plugin that exposes a Relay compliant GraphQL endpoint</li>\n<li><a href=\"https://github.com/tim-field/graphql-wp\">graphql-wp</a> - a WordPress plugin that exposes a GraphQL endpoint.</li>\n<li><a href=\"https://www.symfony.fi/entry/graphql-bundle-adds-protocol-support-to-ez-platform-symfony-cms\">eZ Platform GraphQL Bundle</a> - GraphQL Bundle for the eZ Platform Symfony CMS.</li>\n<li><a href=\"https://github.com/stefanorg/graphql-middleware\">GraphQL Middleware</a> - GraphQL Psr7 Middleware</li>\n<li><a href=\"https://github.com/stefanorg/zend-expressive-graphiql\">Zend Expressive GraphiQL Extension</a> - GraphiQL extension for zend expressive</li>\n<li><a href=\"https://github.com/digiaonline/graphql-php\">GraphQL for PHP7</a> - A batteries-included, standard-compliant and easy to work with implementation of the GraphQL specification in PHP7 (based on the reference implementation).</li>\n</ul>\n<h3>Python Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/tryolabs/graphql-parser\">graphql-parser</a> - GraphQL parser for Python.</li>\n<li><a href=\"https://github.com/graphql-python/graphql-core\">graphql-core</a> - GraphQL implementation for Python.</li>\n<li><a href=\"https://github.com/graphql-python/graphql-relay-py\">graphql-relay-py</a> - A library to help construct a graphql-py server supporting react-relay.</li>\n<li><a href=\"https://github.com/tallstreet/graphql-parser-python\">graphql-parser-python</a> - A python wrapper around libgraphqlparser.</li>\n<li><a href=\"https://github.com/graphql-python/graphene\">graphene</a> - A package for creating GraphQL schemas/types in a Pythonic easy way.</li>\n<li><a href=\"https://github.com/graphql-python/graphene-gae\">graphene-gae</a> - Adds GraphQL support to Google AppEngine (GAE).</li>\n<li><a href=\"https://github.com/graphql-python/flask-graphql\">flask-graphql</a> - Adds GraphQL support to your Flask application.</li>\n<li><a href=\"https://github.com/graphcool/python-graphql-client\">python-graphql-client</a> - Simple GraphQL client for Python 2.7+</li>\n<li><a href=\"https://github.com/healx/python-graphjoiner\">python-graphjoiner</a> - Create GraphQL APIs using joins, SQL or otherwise.</li>\n<li><a href=\"https://github.com/graphql-python/graphene-django\">graphene-django</a> - A Django integration for Graphene.</li>\n</ul>\n<h3>Java Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/graphql-java/graphql-java\">graphql-java</a> - GraphQL Java implementation.</li>\n<li><a href=\"https://github.com/graphql-java/graphql-java-type-generator\">graphql-java-type-generator</a> - Auto-generates types for use with GraphQL Java</li>\n<li><a href=\"https://github.com/bpatters/schemagen-graphql\">schemagen-graphql</a> - Schema generation and execution package that turns POJO's into a GraphQL Java queryable set of objects. Enables exposing any service as a GraphQL service using Annotations.</li>\n<li><a href=\"https://github.com/graphql-java/graphql-java-annotations\">graphql-java-annotations</a> - Provides annotations-based syntax for schema definition with GraphQL Java.</li>\n<li><a href=\"https://github.com/oembedler/spring-graphql-common\">spring-graphql-common</a> - Spring Framework GraphQL Library.</li>\n<li><a href=\"https://github.com/graphql-java/graphql-spring-boot\">graphql-spring-boot</a> - GraphQL and GraphiQL Spring Framework Boot Starters.</li>\n<li><a href=\"https://github.com/neo4j-graphql/neo4j-graphql\">neo4j-graphql</a> - GraphQL bindings for Neo4j, generates and runs Cypher.</li>\n<li><a href=\"https://github.com/engagingspaces/vertx-graphql-service-discovery\">vertx-graphql-service-discovery</a> - Asynchronous GraphQL service discovery and querying for your microservices.</li>\n<li><a href=\"https://github.com/engagingspaces/vertx-dataloader\">vertx-dataloader</a> - Port of Facebook DataLoader for efficient, asynchronous batching and caching in clustered GraphQL environments</li>\n<li><a href=\"https://github.com/Billy-Bichon/LiveGQL\">LiveGQL</a> - GraphQL subscription client in Java.</li>\n<li><a href=\"https://github.com/ebridges/rdbms-to-graphql\">rdbms-to-graphql</a> - A Java CLI program that generates a GraphQL schema from a JDBC data source.</li>\n<li><a href=\"https://github.com/google/rejoiner\">Rejoiner</a> - Generates a GraphQL schema based on one or more gRPC microservices, or any other Protobuf source.</li>\n<li><a href=\"https://github.com/leangen/graphql-spqr\">graphql-spqr</a> - GraphQL SPQR aims to make it dead simple to add a GraphQL API to any Java project. It works by dynamically generating a GraphQL schema from Java code.</li>\n</ul>\n<h3>C/C++ Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/graphql/libgraphqlparser\">libgraphqlparser</a> - A GraphQL query parser in C++ with C and C++ APIs.</li>\n</ul>\n<h3>Go Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/graphql-go/graphql\">graphql</a> - An implementation of GraphQL for Go follows graphql-js</li>\n<li><a href=\"https://github.com/machinebox/graphql\">machinebox/graphql</a> - Simple low-level GraphQL client for Go</li>\n<li><a href=\"https://github.com/graphql-go/relay\">graphql-relay-go</a> - A Go/Golang library to help construct a server supporting react-relay.</li>\n<li><a href=\"https://github.com/neelance/graphql-go\">graphql-go</a> - GraphQL server with a focus on ease of use.</li>\n<li><a href=\"https://github.com/tecbot/c-graphqlparser\">c-graphqlparser</a> - Go-gettable version of the libgraphqlparser C library for parsing GraphQL.</li>\n<li><a href=\"https://github.com/tallstreet/graphql\">tallstreet-graphql</a> - GraphQL parser and server for Go that leverages libgraphqlparser</li>\n<li><a href=\"https://github.com/playlyfe/go-graphql\">go-graphql</a> - A powerful GraphQL server implementation for Golang</li>\n<li><a href=\"https://github.com/nicksrandall/dataloader\">dataloader</a> - Implementation of Facebook's DataLoader in Golang</li>\n</ul>\n<h3>Scala Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/sangria-graphql/sangria\">sangria</a> - Scala GraphQL client and server library.</li>\n<li><a href=\"https://github.com/sangria-graphql/sangria-relay\">sangria-relay</a> - Sangria Relay Support.</li>\n<li><a href=\"https://github.com/hrosenhorn/graphql-scala\">graphql-scala</a> - An attempt to get GraphQL going with Scala.</li>\n</ul>\n<h3>Perl Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/CurtTilmes/Perl6-GraphQL\">Perl6-GraphQL</a> - GraphQL for Perl6.</li>\n<li><a href=\"https://github.com/graphql-perl/graphql-perl\">graphql-perl</a> - GraphQL for Perl5.</li>\n</ul>\n<h3>.NET Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/graphql-dotnet/graphql-dotnet\">graphql-dotnet</a> - GraphQL for .NET.</li>\n<li><a href=\"https://github.com/graphql-dotnet/conventions\">Conventions</a> - Reflection-based schema generation for .NET.</li>\n<li><a href=\"https://github.com/ckimes89/graphql-net\">graphql-net</a> - GraphQL to IQueryable for .NET</li>\n<li><a href=\"https://github.com/fsprojects/FSharp.Data.GraphQL\">FSharp.Data.GraphQL</a> - FSharp GraphQL.</li>\n<li><a href=\"https://github.com/graphql-dotnet/graphql-client\">GraphQL.Client</a> - GraphQL Client for .NET.</li>\n</ul>\n<h3>Erlang Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/shopgun/graphql-erlang\">graphql-erlang</a> - Pure Erlang implementation with IDL and pattern-matching.</li>\n</ul>\n<h3>Elixir Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/absinthe-graphql/absinthe\">absinthe-graphql</a> - Fully Featured Elixir GraphQL Library.</li>\n<li><a href=\"https://github.com/graphql-elixir/graphql\">graphql-elixir</a> - GraphQL Elixir.</li>\n<li><a href=\"https://github.com/graphql-elixir/plug_graphql\">plug_graphql</a> - Plug integration for GraphQL Elixir.</li>\n<li><a href=\"https://github.com/graphql-elixir/graphql_relay\">graphql_relay</a> - Relay helpers for GraphQL Elixir.</li>\n<li><a href=\"https://github.com/graphql-elixir/graphql_parser\">graphql_parser</a> - Elixir bindings for <a href=\"https://github.com/graphql/libgraphqlparser\">libgraphqlparser</a></li>\n<li><a href=\"https://github.com/asonge/graphql\">graphql</a> - Elixir GraphQL parser.</li>\n<li><a href=\"https://github.com/peburrows/plot\">plot</a> - GraphQL parser and resolver for Elixir.</li>\n</ul>\n<h3>Haskell Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/jdnavarro/graphql-haskell\">graphql-haskell</a> - GraphQL AST and parser for Haskell.</li>\n</ul>\n<h3>SQL Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/solidsnack/GraphpostgresQL\">GraphpostgresQL</a> - GraphQL for Postgres.</li>\n<li><a href=\"https://github.com/rexxars/sql-to-graphql\">sql-to-graphql</a> - Generate a GraphQL API based on your SQL database structure.</li>\n<li><a href=\"https://github.com/graphile/postgraphile\">PostGraphile</a> - A GraphQL API created by reflection over a PostgreSQL schema.</li>\n<li><a href=\"https://github.com/ebridges/rdbms-to-graphql\">rdbms-to-graphql</a> - A Java CLI program that generates a GraphQL schema from a JDBC data source.</li>\n<li><a href=\"https://github.com/graphcool/prisma\">Prisma</a> - Turn your database into a GraphQL API. Prisma lets you design your data model and have a production ready GraphQL API online in minutes.</li>\n<li><a href=\"https://github.com/bradleyboy/tuql\">tuql</a> - Automatically create a GraphQL server from any sqlite database.</li>\n</ul>\n<h3>Lua Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/bjornbytes/graphql-lua\">graphql-lua</a> - GraphQL for Lua.</li>\n</ul>\n<h3>Elm Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/jamesmacaulay/elm-graphql\">jamesmacaulay/elm-graphql</a> - Client library that lets you build GraphQL queries in Elm.</li>\n<li><a href=\"https://github.com/ghivert/elm-graphql\">ghivert/elm-graphql</a> - Client library that lets you build GraphQL queries in Elm with your own decoders.</li>\n<li><a href=\"https://github.com/jahewson/elm-graphql\">jahewson/elm-graphql</a> - Command-line tool that generates Elm code from queries in .graphql files.</li>\n</ul>\n<h3>Clojure Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/tendant/graphql-clj\">graphql-clj</a> - A Clojure library designed to provide GraphQL implementation.</li>\n<li><a href=\"https://github.com/walmartlabs/lacinia\">lacinia</a> - GraphQL implementation in pure Clojure.</li>\n<li><a href=\"https://github.com/alumbra/alumbra\">alumbra</a> - Simple & Elegant GraphQL for Clojure!</li>\n</ul>\n<h3>ClojureScript Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/johanatan/speako\">speako</a> - A ClojureScript/NPM compiler for GraphQL Schema Language.</li>\n<li><a href=\"https://github.com/Vincit/venia\">venia</a> - A Clojure(Script) GraphQL query generation</li>\n</ul>\n<h3>Swift Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/GraphQLSwift/GraphQL\">GraphQL</a> - Build GraphQL APIs with Swift.</li>\n<li><a href=\"https://github.com/GraphQLSwift/Graphiti\">Graphiti</a> - Build Swiftier GraphQL APIs with Swift.</li>\n<li><a href=\"https://github.com/dbart01/Gryphin\">Gryphin</a> - Type-safe GraphQL client for iOS and MacOS written in Swift.</li>\n<li><a href=\"https://github.com/apollographql/apollo-ios\">Apollo-iOS</a> - Strongly typed, code-generating, caching GraphQL client for Swift.</li>\n<li><a href=\"https://github.com/florianmari/LiveGQL\">LiveGQL</a> - GraphQL Subscription client in Swift.</li>\n</ul>\n<h3>OCaml Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/andreas/ocaml-graphql-server\">ocaml-graphql-server</a> - GraphQL servers in OCaml.</li>\n</ul>\n<h3>Rust Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/mhallin/juniper\">juniper</a> - GraphQL server library for Rust.</li>\n</ul>\n<h3>R Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/ropensci/graphql\">graphql</a> - Bindings to libgraphqlparser for R.</li>\n<li><a href=\"https://github.com/schloerke/gqlr\">gqlr</a> - GraphQL server package for R.</li>\n<li><a href=\"https://github.com/ropensci/ghql\">ghql</a> - GraphQL client package for R.</li>\n</ul>\n<h3>Julia Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/codeneomatrix/Diana.jl\">Diana.jl</a> - Julia client for GraphQL.</li>\n</ul>\n<h3>Kotlin Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/prestongarno/ktq\">ktq</a> - Kotlin gradle plugin SDL type generator & runtime client</li>\n</ul>\n<h3>Unity Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/Gazuntype/graphQL-client-unity\">graphQL-client-unity</a> - A Unity client for GraphQL.</li>\n</ul>\n<h3>Crystal Libraries</h3>\n<ul>\n<li><a href=\"https://github.com/ziprandom/graphql-crystal\">graphql-crystal</a> - A graphql implementation for Crystal</li>\n</ul>\n<h2>Tools</h2>\n<ul>\n<li><a href=\"https://github.com/graphql/graphiql\">graphiql</a> - An in-browser IDE for exploring GraphQL.</li>\n<li><a href=\"https://github.com/graphcool/graphql-playground\">GraphQL Playground</a> - GraphQL IDE that supports multi-column schema docs, tabs, query history, configuration of HTTP headers and GraphQL Subscriptions.</li>\n<li><a href=\"https://github.com/skevy/graphiql-app\">GraphiQL.app</a> - A light, Electron-based wrapper around GraphiQL.</li>\n<li><a href=\"https://github.com/Macroz/GraphQLviz\">GraphQLviz</a> - GraphQLviz marries GraphQL (schemas) with Graphviz.</li>\n<li><a href=\"https://github.com/sheerun/graphqlviz\">graphqlviz</a> - GraphQL API visualizer in Node.js</li>\n<li><a href=\"http://facebook.github.io/relay/prototyping/playground.html\">Relay Playground</a></li>\n<li><a href=\"http://dferber90.github.io/graphql-ast-explorer/\">GraphQL AST Explorer</a> - Explore the AST of a GraphQL document interactively</li>\n<li><a href=\"https://www.graphqlhub.com/\">GraphQLHub</a> - Query public API's schemas (e.g. Reddit, Twitter, Github, etc) using GraphiQL</li>\n<li><a href=\"https://github.com/jimkyndemeyer/js-graphql-intellij-plugin/\">js-graphql-intellij-plugin</a> - GraphQL language support for IntelliJ IDEA and WebStorm, including Relay.QL tagged templates in JavaScript and TypeScript.</li>\n<li><a href=\"https://github.com/syrusakbary/gdom\">gdom</a> - DOM Traversing and Scraping using GraphQL.</li>\n<li><a href=\"https://github.com/almilo/annotated-graphql-server\">Annotated GraphQL Server</a> - Server for annotated GraphQL showing how to transform a REST api into a GraphQL endpoint with annotations.</li>\n<li><a href=\"http://nathanrandal.com/graphql-visualizer/\">Model Visualizer</a> - A small webapp that generates an ERD-like visualization of a GraphQL endpoint from an introspection query.</li>\n<li><a href=\"https://github.com/Ghirro/graphql-network\">GraphQL Network</a> - A chrome dev-tools extension for debugging GraphQL network requests.</li>\n<li><a href=\"https://github.com/apollographql/eslint-plugin-graphql\">eslint-plugin-graphql</a> - An ESLint plugin that checks your GraphQL strings against a schema.</li>\n<li><a href=\"https://astexplorer.net/\">AST Explorer</a> - Select \"GraphQL\" at the top, explore the GraphQL AST and highlight different parts by clicking in the query.</li>\n<li><a href=\"https://github.com/jparise/vim-graphql\">vim-graphql</a> - A Vim plugin that provides GraphQL file detection and syntax highlighting.</li>\n<li><a href=\"https://github.com/sarkistlt/graphql-auto-generating-cms\">GraphQL CMS</a> - Use your existing GraphQL schema to generate simple for use, fully functional CMS in a couple steps.</li>\n<li><a href=\"https://github.com/2fd/graphdoc\">graphdoc</a> - Static page generator for documenting GraphQL Schema.</li>\n<li><a href=\"https://github.com/orionsoft/atom-graphql-autocomplete\">graphql-autocomplete</a> - Autocomplete and lint from a GraphQL endpoint in Atom.</li>\n<li><a href=\"https://github.com/redound/graphql-ide\">GraphQL IDE</a> - An extensive IDE for exploring GraphQL API's.</li>\n<li><a href=\"https://github.com/yarax/swagger-to-graphql\">Swagger to GraphQL</a> - GraphQL types builder based on REST API described in Swagger. Allows to migrate to GraphQL from REST for 5 minutes</li>\n<li><a href=\"https://github.com/APIs-guru/graphql-voyager\">GraphQL Voyager</a> - Represent any GraphQL API as an interactive graph.</li>\n<li><a href=\"https://graphql-docs.com/\">GraphQL Docs</a> - Instantly create beautiful GraphQL API docs hosted online.</li>\n<li><a href=\"https://github.com/APIs-guru/graphql-faker\">GraphQL Faker</a> - 🎲 Mock or extend your GraphQL API with faked data. No coding required.</li>\n<li><a href=\"https://github.com/Quramy/ts-graphql-plugin\">ts-graphql-plugin</a> - A language service plugin complete and validate GraphQL query in TypeScript template strings.</li>\n<li><a href=\"https://launchpad.graphql.com/\">Apollo Launchpad</a> - Like JSFiddle for GraphQL server code, write and deploy a GraphQL API directly from your browser.</li>\n<li><a href=\"https://github.com/apollographql/apollo-tracing\">Apollo Tracing</a> - GraphQL extension that enables you to easily get resolver-level performance information as part of a GraphQL response.</li>\n<li><a href=\"https://github.com/imolorhe/altair\">Altair GraphQL Client</a> - A beautiful feature-rich GraphQL Client for all platforms.</li>\n<li><a href=\"https://github.com/abhiaiyer91/apollo-storybook-decorator\">Apollo Storybook Decorator</a> - Wrap your React Storybook stories with Apollo Client, provide mocks for isolated UI testing with GraphQL</li>\n<li><a href=\"https://github.com/Workpop/graphql-metrics\">GraphQL Metrics</a> - instrument GraphQL resolvers, logging response times and statuses (if there was an error or not) to the console as well as to InfluxDB.</li>\n<li><a href=\"https://github.com/Brbb/graphql-rover\">GraphQL Rover</a> - GraphQL schema interactive navigation, rearrange nodes, search and explore types and fields.</li>\n<li><a href=\"https://github.com/marmelab/json-graphql-server\">json-graphql-server</a> - Get a full fake GraphQL API with zero coding in less than 30 seconds, based on a JSON data file.</li>\n<li><a href=\"https://insomnia.rest/\">Insomnia</a> - An full-featured API client with first-party GraphQL query editor</li>\n<li><a href=\"https://github.com/sly777/ran\">RAN Toolkit</a> - Production-ready toolkit/boilerplate with support for GraphQL, SSR, Hot-reload, CSS-in-JS, caching, and more.</li>\n</ul>\n<h2>Databases</h2>\n<ul>\n<li><a href=\"https://www.arangodb.com/\">ArangoDB</a> - Multi-model database that supports GraphQL schemas in JavaScript inside the database.</li>\n<li><a href=\"https://dgraph.io/\">Dgraph</a> - Scalable, distributed, low latency, high throughput Graph database with a GraphQL like language (called <a href=\"https://docs.dgraph.io/query-language/\">GraphQL+</a>) as the query language. Dgrapqh can be queried with graphql by using <a href=\"https://github.com/dpeek/dgraphql\">dgraphql</a></li>\n</ul>\n<h2>Services</h2>\n<ul>\n<li><a href=\"https://graphcms.com/\">GraphCMS</a> - GraphQL based Headless Content Management System.</li>\n<li><a href=\"https://www.graph.cool/\">Graphcool</a> - Your own GraphQL backend in under 5 minutes. Works with every GraphQL client such as Relay and Apollo.</li>\n<li><a href=\"https://hasura.io/\">Hasura</a> - Create tables and get a GraphQL backend in under 60s. Works on top of Postgres that you can directly access. No initial knowledge of graphql required.</li>\n<li><a href=\"https://www.reindex.io/\">Reindex</a> - Instant GraphQL Backend for Your React Apps.</li>\n<li><a href=\"https://scaphold.io/\">Scaphold</a> - GraphQL as a service that includes API integrations such as Stripe and Mailgun.</li>\n<li><a href=\"https://tipe.io/\">Tipe</a> - Next Generation API-first CMS with a GraphQL or REST API. Stop letting your CMS decide how you build your apps.</li>\n<li><a href=\"https://aws.amazon.com/appsync/\">AWS AppSync</a> - Serverless GraphQL</li>\n</ul>\n<h2>Examples</h2>\n<h3>JavaScript Examples</h3>\n<ul>\n<li><a href=\"https://github.com/relayjs/relay-starter-kit\">relay-starter-kit</a> - Barebones starting point for a Relay application.</li>\n<li><a href=\"https://github.com/kriasoft/react-starter-kit\">react-starter-kit</a> - Isomorphic web app boilerplate (Node.js/Express, GraphQL, React)</li>\n<li><a href=\"https://github.com/kriasoft/nodejs-api-starter\">nodejs-api-starter</a> - Boilerplate and tooling for authoring data API backends with Node.js and GraphQL</li>\n<li><a href=\"https://github.com/graphql/swapi-graphql\">swapi-graphql</a> - A GraphQL schema and server wrapping <a href=\"http://swapi.co/\">swapi</a>.</li>\n<li><a href=\"https://github.com/RisingStack/graphql-server\">graphql-server</a> - GraphQL server with Mongoose (MongoDB) and Node.js.</li>\n<li><a href=\"https://github.com/clayallsopp/graphql-intro\">graphql-intro</a> - <a href=\"https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2\">https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2</a></li>\n<li><a href=\"https://github.com/jonsharratt/graphql-aws\">graphql-aws</a> - Amazon AWS GraphQL API Server.</li>\n<li><a href=\"https://github.com/RisingStack/graffiti-todo\">graffiti-todo</a> - Example Relay TodoMVC application using graffiti-mongoose.</li>\n<li><a href=\"https://gist.github.com/devknoll/8b274f1c5d05230bfade\">devknoll/gist:8b274f1c5d05230bfade</a></li>\n<li><a href=\"https://github.com/codefoundries/UniversalRelayBoilerplate\">UniversalRelayBoilerplate</a> Boilerplate + examples for React Native (iOS, Android), React (isomorphic, Material-UI), Relay, GraphQL, JWT, Node.js, Apache Cassandra.</li>\n<li><a href=\"https://github.com/vslinko/ripster/tree/master/src/graphql\">vslinko/ripster</a></li>\n<li><a href=\"https://github.com/fortruce/relay-skeleton\">relay-skeleton</a> - React, Relay, GraphQL project skeleton</li>\n<li><a href=\"https://github.com/mhart/simple-relay-starter\">simple-relay-starter</a> - A very simple starter for React Relay using Browserify.</li>\n<li><a href=\"https://github.com/transedward/relay-chat\">relay-chat</a> - an chat example showing Relay with routing and pagination.</li>\n<li><a href=\"https://github.com/taion/relay-todomvc\">relay-todomvc</a> - Relay TodoMVC with routing.</li>\n<li><a href=\"https://github.com/mrblueblue/graphql-express-sqlite\">graphql-express-sqlite</a> - GraphQL server with Sqlite and Express</li>\n<li><a href=\"https://github.com/chentsulin/koa-graphql-relay-example\">koa-graphql-relay-example</a> - Example of <a href=\"https://github.com/chentsulin/koa-graphql\">koa-graphql</a></li>\n<li><a href=\"https://github.com/lvarayut/relay-fullstack\">relay-fullstack</a> - Relay Starter Kit integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS.</li>\n<li><a href=\"https://github.com/serverless/serverless-graphql-blog\">serverless-graphql-blog</a> - A Serverless Blog leveraging GraphQL to offer a REST API with only 1 endpoint</li>\n<li><a href=\"https://github.com/soonlive/relay-cart\">relay-cart</a> - A simple shopping cart example leveraging relay & GraphQL with routing and pagination.</li>\n<li><a href=\"https://github.com/applification/graphql-loader\">graphql-loader</a> - Example project to illustrate GraphQL, Express and Facebook DataLoader to connect to third party REST API</li>\n<li><a href=\"https://github.com/alvinthen/swapi-graphql-lambda\">swapi-graphql-lambda</a> - A GraphQL schema hosted in AWS Lambda wrapping <a href=\"http://swapi.co/\">http://swapi.co/</a></li>\n<li><a href=\"http://dev.apollodata.com/react/\">Apollo Client documentation</a> - Documentation and example for building GraphQL apps using apollo client</li>\n<li><a href=\"https://www.apollographql.com/docs/\">Apollo Server tools, products, and libraries documentation</a> - Documentation, tutorial and examples for building GraphQL server and connecting to SQL, MongoDB and REST endpoints.</li>\n<li><a href=\"https://www.apollographql.com/docs/link/\">Apollo Link</a> - The official guide for getting started with Apollo Link - a standard interface for modifying control flow of GraphQL requests and fetching GraphQL results.</li>\n<li><a href=\"https://github.com/nnance/f8app-apollo\">f8-apollo</a> - Refactored version of the official F8 app of 2016, powered by React Native and the Apollo Stack.</li>\n<li><a href=\"https://github.com/fbsamples/f8app\">f8app</a> - Source code of the official F8 app of 2016, powered by React Native and other Facebook open source projects. <a href=\"http://makeitopen.com/\">http://makeitopen.com</a></li>\n<li><a href=\"https://github.com/reindexio/reindex-examples\">Reindex Examples</a> - Example projects for Reindex with using React Native and React.js for web.</li>\n<li><a href=\"https://julienvincent.github.io/modelizr/\">Modelizr Documentation</a> - Documentation and Usage Examples for modelizr</li>\n<li><a href=\"https://github.com/Akryum/frontpage-vue-app\">Vue Apollo Example</a> - Apollo example project for Vue 2.0.</li>\n<li><a href=\"https://github.com/kamilkisiela/angular2-graphql-rest\">angular2-graphql-rest</a> - An example app with REST Api working side by side with GraphQL using Apollo Client with angular2-apollo. Includes step-by-step tutorial how to migrate from REST to GraphQL.</li>\n<li><a href=\"https://github.com/entria/graphql-dataloader-boilerplate\">GraphQL-DataLoader-Boilerplate</a> - Boilerplate to start your GraphQL with DataLoader server</li>\n<li><a href=\"https://github.com/sibelius/graphql-cep\">GraphQL-CEP</a> - Query address by CEP</li>\n<li><a href=\"https://github.com/katopz/react-apollo-graphql-github-example\">Apollo React example for Github GraphQL API</a> - Usage Examples Apollo React for Github GraphQL API with create-react-app</li>\n<li><a href=\"https://github.com/xpepermint/graphql-example\">Intuitive GraphQL Resolver Example</a> - GraphQL application example using <a href=\"https://github.com/xpepermint/rawmodeljs\">RawModel.js</a>.</li>\n<li><a href=\"https://reactql.org/\">ReactQL starter kit</a> - Universal React + Apollo + Redux + React Router 4, with SSR-enabled GraphQL, store (de/re)hydration and production code bundling.</li>\n<li><a href=\"https://github.com/stubailo/microhn\">microhn</a> - Simple Hacker News client built on top of GraphQLHub</li>\n<li><a href=\"https://github.com/sysgears/apollo-universal-starter-kit\">Apollo Web&Mobile Universal Starter Kit with Hot Code Reload</a> - Apollo, GraphQL, React, React Native, Expo, Redux, Express, SQL and Twitter Bootstrap. Hot Code Reload of back end & front end using Webpack and Hot Module Replacement.</li>\n<li><a href=\"https://malloc.fi/building-decoupled-sites-and-apps-with-graphql-and-next-js\">Building Decoupled Sites and Apps with GraphQL and Next.js</a></li>\n</ul>\n<h3>TypeScript Examples</h3>\n<ul>\n<li><a href=\"https://github.com/DxCx/webpack-graphql-server\">Basic Apollo Server</a> - Basic Starter for Apollo Server, Using typescript and Webpack.</li>\n<li><a href=\"https://github.com/FinalDes/apollo-express-ts-server-boilerplate\">Apollo Graphql Express Server</a> - Minimal Apollo Graphql Express Server</li>\n<li><a href=\"https://github.com/KATT/shop\">Prisma/Apollo/React Full-stack Example</a> - An e-commerce example project with Prisma, GraphQL API Gateway, React, Apollo, Next.js, SSR, CI, and E2E testing. All TypeScript.</li>\n</ul>\n<h3>Ruby Examples</h3>\n<ul>\n<li><a href=\"https://github.com/rmosolgo/graphql-ruby-demo\">graphql-ruby-demo</a> - Use graphql-ruby to expose a Rails app.</li>\n<li><a href=\"https://github.com/github/github-graphql-rails-example\">github-graphql-rails-example</a> - Example Rails app using GitHub's GraphQL API.</li>\n<li><a href=\"https://github.com/nethsix/relay-on-rails\">relay-on-rails</a> - Barebones starter kit for Relay application with Rails GraphQL server.</li>\n<li><a href=\"https://github.com/gauravtiwari/relay-rails-blog\">relay-rails-blog</a> - A graphql, relay and standard rails application powered demo weblog.</li>\n<li><a href=\"https://github.com/jcdavison/to_eat_app\">to<em>eat</em>app</a> - A sample graphql/rails/relay application with a related 3-part article series.</li>\n</ul>\n<h3>Go Examples</h3>\n<ul>\n<li><a href=\"https://github.com/sogko/golang-relay-starter-kit\">golang-relay-starter-kit</a> - Barebones starting point for a Relay application with Golang GraphQL server.</li>\n<li><a href=\"https://github.com/graphql-go/playground\">golang-graphql-playground</a> - An example Golang GraphQL server written with graphql-go and graphql-relay-go. Try live demo at: <a href=\"http://golanggraphqlplayground-sogko.rhcloud.com/\">http://golanggraphqlplayground-sogko.rhcloud.com</a></li>\n<li><a href=\"https://github.com/sogko/todomvc-relay-go\">todomvc-relay-go</a> - Port of the React/Relay TodoMVC app, driven by a Golang GraphQL backend.</li>\n</ul>\n<h3>Scala Examples</h3>\n<ul>\n<li><a href=\"https://github.com/sangria-graphql/sangria-akka-http-example\">sangria-akka-http-example</a> - An example GraphQL server written with akka-http and <a href=\"http://sangria-graphql.org/\">sangria</a></li>\n<li><a href=\"https://github.com/sangria-graphql/sangria-playground\">sangria-playground</a> - An example of GraphQL server written with Play and sangria.</li>\n</ul>\n<h3>Python Examples</h3>\n<ul>\n<li><a href=\"https://github.com/graphql-python/swapi-graphene\">swapi-graphene</a> - A GraphQL schema and server using <a href=\"http://graphene-python.org/\">Graphene</a> - <a href=\"http://swapi.graphene-python.org/\">View demo online</a>.</li>\n</ul>\n<h3>Elixir Examples</h3>\n<ul>\n<li><a href=\"https://github.com/absinthe-graphql/absinthe_example\">absinthe_example</a> - Example usage of Absinthe GraphQL</li>\n<li><a href=\"https://github.com/graphql-elixir/hello_graphql_phoenix\">hello<em>graphql</em>phoenix</a> - Examples of GraphQL Elixir Plug endpoints mounted in Phoenix - <a href=\"http://playground.graphql-elixir.org/\">View demo online</a>.</li>\n</ul>\n<h3>PHP Examples</h3>\n<ul>\n<li><a href=\"https://siler.leocavalcante.com/graphql/\">Siler's GraphQL guide</a> - A guide on how to build a PHP GraphQL endpoint.</li>\n<li><a href=\"https://github.com/ardani/laravel-graphql\">Laravel GraphQL</a> - A sample integrating GraphQL with Laravel</li>\n<li><a href=\"https://symfony.fi/entry/adding-a-graphql-api-to-your-symfony-flex-app\">Adding a GraphQL API to your Symfony Flex application</a></li>\n</ul>\n<h3>ReasonML Examples</h3>\n<ul>\n<li><a href=\"https://github.com/Gregoirevda/reason-ml-graphql-todo-list\">Todo list example</a> - A todo list integrating GraphQL.</li>\n</ul>\n<h2>Videos</h2>\n<ul>\n<li><a href=\"https://egghead.io/lessons/react-zero-config-apollo-graphql-with-apollo-boost\">Zero-config Apollo + GraphQL with Apollo Boost</a></li>\n<li><a href=\"https://www.youtube.com/embed/UBGzsb2UkeY\">Zero to GraphQL in 30 Minutes</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=9sc8Pyc51uU\">Data fetching for React applications at Facebook</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=X6YbAKiLCLU\">React Native & Relay: Bringing Modern Web Techniques to Mobile</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=WQLzZf34FJ8\">Exploring GraphQL</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=gY48GW87Feo\">Creating a GraphQL Server</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=S0s935RKKB4\">GraphQL at The Financial Times</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=IrgHurBjQbg\">Relay: An Application Framework For React</a></li>\n<li><a href=\"https://www.youtube.com/watch?t=643&v=Pxdgu2XIAAg\">Building and Deploying Relay with Facebook</a></li>\n<li><a href=\"https://vimeo.com/144817545\">Introduction to GraphQL</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=_9RgHXqH8J0\">Exploring GraphQL@Scale</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=IMUpYOc9z3c&feature=youtu.be\">What's Next for Phoenix by Chris McCord</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=Ed6oJXKt3-M\">GraphQL with Nick Schrock</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=DNPVqK_woRQ\">Build a GraphQL server for Node.js using PostgreSQL/MySQL</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=PHabPhgRUuU\">GraphQL server tutorial for Node.js with SQL, MongoDB and REST</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=ENqDNIp1Nd8\">JavaScript Air Episode 023: Transitioning from REST to GraphQL</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=ViXL0YQnioU\">GraphQL Future at react-europe 2016</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=etax3aEe2dA\">GraphQL at Facebook at react-europe 2016</a></li>\n<li><a href=\"https://www.youtube.com/watch?v=z5rz3saDPJ8\">Building native mobile apps with GraphQL at react-europe 2016</a></li>\n</ul>\n<h2>Blogs</h2>\n<ul>\n<li><a href=\"http://graphql.org/blog/\">Official GraphQL blog</a></li>\n<li><a href=\"https://dev-blog.apollodata.com/\">Building Apollo</a></li>\n</ul>\n<h2>Posts</h2>\n<ul>\n<li><a href=\"http://gajus.com/blog/9/using-dataloader-to-batch-requests\">Using DataLoader to batch GraphQL requests</a></li>\n<li><a href=\"https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html\">Introducing Relay and GraphQL</a></li>\n<li><a href=\"https://facebook.github.io/react/blog/2015/05/01/graphql-introduction.html\">GraphQL Introduction</a></li>\n<li><a href=\"https://gist.github.com/wincent/598fa75e22bdfa44cf47\">Unofficial Relay FAQ</a></li>\n<li><a href=\"https://medium.com/@clayallsopp/your-first-graphql-server-3c766ab4f0a2\">Your First GraphQL Server</a></li>\n<li><a href=\"https://blog.risingstack.com/graphql-overview-getting-started-with-graphql-and-nodejs/\">GraphQL Overview - Getting Started with GraphQL and Node.js</a></li>\n<li><a href=\"https://medium.freecodecamp.com/introduction-to-graphql-1d8011b80159\">4 Reasons you should try out GraphQL</a></li>\n<li><a href=\"https://medium.com/@frikille/moving-from-rest-to-graphql-e3650b6f5247\">Moving from REST to GraphQL</a></li>\n<li><a href=\"http://davidandsuzi.com/writing-a-basic-api-with-graphql/\">Writing a Basic API with GraphQL</a></li>\n<li><a href=\"https://blog.risingstack.com/start-using-graphql-with-graffiti/?utm_source=nodeweekly&utm_medium=email\">Start using GraphQL with Graffiti</a></li>\n<li><a href=\"https://www.reindex.io/blog/building-a-graphql-server-with-node-js-and-sql/\">Building a GraphQL Server with Node.js and SQL</a></li>\n<li><a href=\"https://www.slideshare.net/LondonReact/graph-ql\">GraphQL at The Financial Times</a></li>\n<li><a href=\"http://sgwilym.github.io/relay-visual-learners/\">Relay for visual learners</a></li>\n<li><a href=\"https://medium.com/@cpojer/relay-and-routing-36b5439bad9\">Relay and Routing</a></li>\n<li><a href=\"https://wehavefaces.net/learn-golang-graphql-relay-1-e59ea174a902\">Learn Golang + GraphQL + Relay, Part 1: Your first Golang GraphQL server</a></li>\n<li><a href=\"https://wehavefaces.net/learn-golang-graphql-relay-2-a56cbcc3e341\">Learn Golang + GraphQL + Relay, Part 2: Your first Relay application</a></li>\n<li><a href=\"https://0x2a.sh/from-rest-to-graphql-b4e95e94c26b\">From REST to GraphQL</a></li>\n<li><a href=\"http://graphql.org/blog/graphql-a-query-language/\">GraphQL: A data query language</a></li>\n<li><a href=\"http://graphql.org/blog/subscriptions-in-graphql-and-relay/\">Subscriptions in GraphQL and Relay</a></li>\n<li><a href=\"https://medium.com/@clayallsopp/relay-101-building-a-hacker-news-client-bb8b2bdc76e6\">Relay 101: Building A Hacker News Client</a></li>\n<li><a href=\"https://wehavefaces.net/graphql-shorthand-notation-cheatsheet-17cd715861b6\">GraphQL Shorthand Notation Cheatsheet</a></li>\n<li><a href=\"https://githubengineering.com/the-github-graphql-api/\">The GitHub GraphQL API</a></li>\n<li><a href=\"https://medium.com/@katopz/github-graphql-api-react-example-eace824d7b61\">Github GraphQL API React Example</a></li>\n<li><a href=\"https://medium.com/entria/testing-a-graphql-server-using-jest-4e00d0e4980e\">Testing a GraphQL Server using Jest</a></li>\n<li><a href=\"https://medium.com/entria/how-to-implement-viewercansee-in-graphql-78cc48de7464\">How to implement viewerCanSee in GraphQL</a></li>\n<li><a href=\"https://engineeringblog.yelp.com/2017/05/introducing-yelps-local-graph.html\">Introducing Yelp's Local Graph</a></li>\n<li><a href=\"https://labs.getninjas.com.br/sharing-data-in-a-microservices-architecture-using-graphql-97db59357602\">Sharing data in a Microservices Architecture using GraphQL</a></li>\n<li><a href=\"https://blog.codecentric.de/2017/09/graphql-mit-spotify-teil-1-server/\">Let's build a node.js GraphQL server for fetching Spotify REST API, in German</a> | <a href=\"https://blog.codecentric.de/en/2017/01/lets-build-spotify-graphql-server/\">in English</a></li>\n<li><a href=\"https://medium.com/@pierrecriulanscy/client-side-only-realtime-web-applications-with-firebase-graphql-and-apollo-client-2-0-9606160f7cf8\">\"Client-side only\" realtime web applications with Firebase, GraphQL and apollo-client 2.0</a></li>\n</ul>\n<h2>Tutorials</h2>\n<ul>\n<li><a href=\"https://www.howtographql.com/\">How to GraphQL</a> - Fullstack Tutorial Website with Tracks for all Major Frameworks & Languages including React, Apollo, Relay, JavaScript, Ruby, Java, Elixir and many more</li>\n<li><a href=\"https://github.com/mugli/learning-graphql\">learning-graphql</a> - An attempt to learn GraphQL.</li>\n<li><a href=\"https://www.learnrelay.org/\">Learn Relay</a> - A comprehensive introduction to Relay</li>\n<li><a href=\"https://www.learnapollo.com/\">Learn Apollo</a> - A hands-on tutorial for Apollo GraphQL Client</li>\n</ul>" | |
| }, | |
| { | |
| "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": "<h2>Read It</h2>\n<ul>\n<li><a href=\"https://www.pythoncheatsheet.org\">Website</a></li>\n<li><a href=\"https://github.com/wilfredinni/python-cheatsheet\">Github</a></li>\n<li><a href=\"https://github.com/wilfredinni/Python-cheatsheet/raw/master/python_cheat_sheet.pdf\">PDF</a></li>\n<li><a href=\"https://mybinder.org/v2/gh/wilfredinni/python-cheatsheet/master?filepath=jupyter_notebooks\">Jupyter Notebook</a></li>\n</ul>\n<h2>Flow Control</h2>\n<h3>Comparison Operators</h3>\n<table>\n<thead>\n<tr>\n<th>Operator</th>\n<th>Meaning</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>==</code></td>\n<td>Equal to</td>\n</tr>\n<tr>\n<td><code>!=</code></td>\n<td>Not equal to</td>\n</tr>\n<tr>\n<td><code><</code></td>\n<td>Less than</td>\n</tr>\n<tr>\n<td><code>></code></td>\n<td>Greater Than</td>\n</tr>\n<tr>\n<td><code><=</code></td>\n<td>Less than or Equal to</td>\n</tr>\n<tr>\n<td><code>>=</code></td>\n<td>Greater than or Equal to</td>\n</tr>\n</tbody>\n</table>\n<p>These operators evaluate to True or False depending on the values you give them.</p>\n<p>Examples:</p>\n<pre><code class=\"language-python\">42 == 42\n</code></pre>\n<pre><code class=\"language-python\">40 == 42\n</code></pre>\n<pre><code class=\"language-python\">'hello' == 'hello'\n</code></pre>\n<pre><code class=\"language-python\">'hello' == 'Hello'\n</code></pre>\n<pre><code class=\"language-python\">'dog' != 'cat'\n</code></pre>\n<pre><code class=\"language-python\">42 == 42.0\n</code></pre>\n<pre><code class=\"language-python\">42 == '42'\n</code></pre>\n<h3>Boolean evaluation</h3>\n<p>Never use <code>==</code> or <code>!=</code> operator to evaluate boolean operation. Use the <code>is</code> or <code>is not</code> operators,\nor use implicit boolean evaluation.</p>\n<p>NO (even if they are valid Python):</p>\n<pre><code class=\"language-python\">True == True\n</code></pre>\n<pre><code class=\"language-python\">True != False\n</code></pre>\n<p>YES (even if they are valid Python):</p>\n<pre><code class=\"language-python\">True is True\n</code></pre>\n<pre><code class=\"language-python\">True is not False\n</code></pre>\n<p>These statements are equivalent:</p>\n<pre><code class=\"language-Python\">if a is True:\n pass\nif a is not False:\n pass\nif a:\n pass\n</code></pre>\n<p>And these as well:</p>\n<pre><code class=\"language-Python\">if a is False:\n pass\nif a is not True:\n pass\nif not a:\n pass\n</code></pre>\n<h3>Boolean Operators</h3>\n<p>There are three Boolean operators: and, or, and not.</p>\n<p>The <em>and</em> Operator's <em>Truth</em> Table:</p>\n<table>\n<thead>\n<tr>\n<th>Expression</th>\n<th>Evaluates to</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>True and True</td>\n<td>True</td>\n</tr>\n<tr>\n<td>True and False</td>\n<td>False</td>\n</tr>\n<tr>\n<td>False and True</td>\n<td>False</td>\n</tr>\n<tr>\n<td>False and False</td>\n<td>False</td>\n</tr>\n</tbody>\n</table>\n<p>The <em>or</em> Operator's <em>Truth</em> Table:</p>\n<table>\n<thead>\n<tr>\n<th>Expression</th>\n<th>Evaluates to</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>True or True</td>\n<td>True</td>\n</tr>\n<tr>\n<td>True or False</td>\n<td>True</td>\n</tr>\n<tr>\n<td>False or True</td>\n<td>True</td>\n</tr>\n<tr>\n<td>False or False</td>\n<td>False</td>\n</tr>\n</tbody>\n</table>\n<p>The <em>not</em> Operator's <em>Truth</em> Table:</p>\n<table>\n<thead>\n<tr>\n<th>Expression</th>\n<th>Evaluates to</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>not True</td>\n<td>False</td>\n</tr>\n<tr>\n<td>not False</td>\n<td>True</td>\n</tr>\n</tbody>\n</table>\n<h3>Mixing Boolean and Comparison Operators</h3>\n<pre><code class=\"language-python\">(4 < 5) and (5 < 6)\n</code></pre>\n<pre><code class=\"language-python\">(4 < 5) and (9 < 6)\n</code></pre>\n<pre><code class=\"language-python\">(1 == 2) or (2 == 2)\n</code></pre>\n<p>You can also use multiple Boolean operators in an expression, along with the comparison operators:</p>\n<pre><code class=\"language-python\">2 + 2 == 4 and not 2 + 2 == 5 and 2 * 2 == 2 + 2\n</code></pre>\n<h3>if Statements</h3>\n<pre><code class=\"language-python\">if name == 'Alice':\n print('Hi, Alice.')\n</code></pre>\n<h3>else Statements</h3>\n<pre><code class=\"language-python\">name = 'Bob'\n\nif name == 'Alice':\n print('Hi, Alice.')\nelse:\n print('Hello, stranger.')\n</code></pre>\n<h3>elif Statements</h3>\n<pre><code class=\"language-python\">name = 'Bob'\nage = 5\n\nif name == 'Alice':\n print('Hi, Alice.')\nelif age < 12:\n print('You are not Alice, kiddo.')\n</code></pre>\n<pre><code class=\"language-python\">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</code></pre>\n<h3>while Loop Statements</h3>\n<pre><code class=\"language-python\">spam = 0\n\nwhile spam < 5:\n print('Hello, world.')\n spam = spam + 1\n</code></pre>\n<h3>break Statements</h3>\n<p>If the execution reaches a break statement, it immediately exits the while loop's clause:</p>\n<pre><code class=\"language-python\">while True:\n print('Please type your name.')\n name = input()\n if name == 'your name':\n break\n\nprint('Thank you!')\n</code></pre>\n<h3>continue Statements</h3>\n<p>When the program execution reaches a continue statement, the program execution immediately jumps back to the start of the loop.</p>\n<pre><code class=\"language-python\">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</code></pre>\n<h3>for Loops and the range() Function</h3>\n<pre><code class=\"language-python\">print('My name is')\nfor i in range(5):\n print('Jimmy Five Times ({})'.format(str(i)))\n</code></pre>\n<p>The <em>range()</em> 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.</p>\n<pre><code class=\"language-python\">for i in range(0, 10, 2):\n print(i)\n</code></pre>\n<p>You can even use a negative number for the step argument to make the for loop count down instead of up.</p>\n<pre><code class=\"language-python\">for i in range(5, -1, -1):\n print(i)\n</code></pre>\n<h3>For else statement</h3>\n<p>This allows you to specify a statement to execute after the full loop has been executed. Only\nuseful when a <code>break</code> condition can occur in the loop:</p>\n<pre><code class=\"language-python\">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</code></pre>\n<h3>Importing Modules</h3>\n<pre><code class=\"language-python\">import random\n\nfor i in range(5):\n print(random.randint(1, 10))\n</code></pre>\n<pre><code class=\"language-python\">import random, sys, os, math\n</code></pre>\n<pre><code class=\"language-python\">from random import *\n</code></pre>\n<h3>Ending a Program with sys.exit</h3>\n<pre><code class=\"language-python\">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</code></pre>" | |
| }, | |
| { | |
| "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": "<p><a href=\"https://www.w3schools.com/sql/trysql.asp?filename=trysql_select_where\">SQL Tryit Editor v1.6</a></p>\n<h2>A <strong>database is a collection of data organized for easy retrieval and manipulation</strong>.</h2>\n<p>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.</p>\n<h3><strong>Data Persistence</strong></h3>\n<p>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.</p>\n<p>A familiar example of non-persistent data would be JavaScript objects and arrays, which reset each time the code runs.</p>\n<h3><strong>Relational Databases</strong></h3>\n<p>In relational databases, <strong>the data is stored in tabular format grouped into rows and columns</strong> (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.</p>\n<p>These kinds of databases are relational because a <em>relation</em> is a mathematical idea equivalent to a table. So relational databases are databases that store their data in tables.</p>\n<h3><strong>Tables</strong></h3>\n<p><img src=\"https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2e309a41-e107-46f3-81e7-154d732d3dcf/Untitled.png\"></p>\n<p><strong>Below are some basic facts about tables:</strong></p>\n<ul>\n<li>Tables organize data in rows and columns.</li>\n<li>Each row in a table represents one distinct record.</li>\n<li>Each column represents a field or attribute that is common to all the records.</li>\n<li>Fields should have a descriptive name and a data type appropriate for the attribute it represents.</li>\n<li>Tables usually have more rows than columns.</li>\n<li>Tables have primary keys that uniquely identify each row.</li>\n<li>Foreign keys represent the relationships with other tables.</li>\n</ul>\n<h2><strong>Overview</strong></h2>\n<h3>SQL:</h3>\n<p>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.</p>\n<p>The syntax for SQL is English-like and requires fewer symbols than programming languages like C, Java, and JavaScript.</p>\n<p>It is declarative and concise, which means there is a lot less to learn to use it effectively.</p>\n<p>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:</p>\n<ul>\n<li><strong>Data Definition Language (DDL)</strong>: used to modify database objects. Some examples are: CREATE TABLE, ALTER TABLE, and DROP TABLE.</li>\n<li><strong>Data Manipulation Language (DML)</strong>: used to manipulate the data stored in the database. Some examples are: INSERT, UPDATE, and DELETE.</li>\n<li><strong>Data Query Language (DQL)</strong>: 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.</li>\n<li><strong>Data Control Language (DCL)</strong>: 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.</li>\n<li><strong>Transaction Control Commands</strong>: used for managing groups of statements that must execute as a unit or not execute at all. Examples are COMMIT and ROLLBACK.</li>\n</ul>\n<p>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.</p>\n<h2><strong>Overview</strong></h2>\n<p>The four SQL operations covered in this section will allow a user to <strong>query</strong>, <strong>insert</strong>, and <strong>modify</strong> a database table.</p>\n<h3><strong>Query</strong></h3>\n<p>A <strong>query</strong> 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.</p>\n<p>The basic syntax for a SELECT statement is this:</p>\n<p>To see all the fields on a table, we can use a * as the selection.</p>\n<p>The preceding statement would show all the records and all the columns for each record in the employees table.</p>\n<p>To pick the fields we want to see, we use a comma-separated list:</p>\n<p>The return of that statement would hold all records from the listed fields.</p>\n<p>We can extend the SELECT command's capabilities using clauses for things like filtering, sorting, pagination, and more.</p>\n<p>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.</p>\n<h3><strong>Insert</strong></h3>\n<p>To <strong>insert</strong> new data into a table, we'll use the INSERT command. The basic syntax for an INSERT statement is this:</p>\n<p>Using this formula, we can specify which values will be inserted into which fields like so:</p>\n<h3><strong>Modify</strong></h3>\n<p><strong>Modifying</strong> a database consists of updating and removing records. For these operations, we'll use UPDATE and DELETE commands, respectively.</p>\n<p>The basic syntax for an UPDATE statement is:</p>\n<p>The basic syntax for a DELETE statement is:</p>\n<h2><strong>Follow Along</strong></h2>\n<h3><strong>Filtering results using WHERE clause</strong></h3>\n<p>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.</p>\n<p>A WHERE clause can help in both cases.</p>\n<p>Here's an example where we might only want to find customers living in Berlin.</p>\n<p>We can also chain together WHERE clauses using OR and AND to limit our results further.</p>\n<p>The following query includes only records that match both criteria.</p>\n<p>And this query includes records that match either criteria.</p>\n<p>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.</p>\n<p>You can read more about SQLite operators from <a href=\"https://www.w3resource.com/sqlite/operators.php\">w3resource (Links to an external site.)</a>.</p>\n<p>To select a single record, we can use a WHERE statement with a uniquely identifying field, like an id:</p>\n<p>Other comparison operators also work in WHERE conditions, such as >, <, <=, and >=.</p>\n<h3><strong>Ordering results using the ORDER BY clause</strong></h3>\n<p>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.</p>\n<p>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.</p>\n<p>Some SQL engines also support using field abbreviations when sorting.</p>\n<p>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 <em>selection</em> portion of the query, so 1 would be <em>name</em>, 2 would be <em>salary</em>, and so on.</p>\n<p>Note that the WHERE clause should come after the FROM clause. The ORDER BY clause always goes last.</p>\n<h3><strong>Limiting results using the LIMIT clause</strong></h3>\n<p>When we wish to see only a limited number of records, we can use a LIMIT clause.</p>\n<p>The following returns the first ten records in the products table:</p>\n<p>LIMIT clauses are often used in conjunction with ORDER BY. The following shows us the five cheapest products:</p>\n<h3><strong>Inserting data using INSERT</strong></h3>\n<p>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.</p>\n<p>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.</p>\n<h3><strong>Modifying recording using UPDATE</strong></h3>\n<p>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.</p>\n<p>Technically the WHERE clause is not required, but leaving it off would result in every record within the table receiving the update.</p>\n<h3><strong>Removing records using DELETE</strong></h3>\n<p>When removing a record or set of records, we need only identify which record(s) to remove using a WHERE clause:</p>\n<p>Once again, the WHERE clause is not required, but leaving it off would remove every record in the table, so it's essential.</p>\n<h2><strong>Overview</strong></h2>\n<p>Raw SQL is a critical baseline skill. However, Node developers generally use an <strong>Object Relational Mapper (ORM)</strong> or <strong>query builder</strong> to write database commands in a backend codebase. Both <strong>ORMs</strong> and <strong>query builders</strong> are JavaScript libraries that allow us to interface with the database using a JavaScript version of the SQL language.</p>\n<p>For example, instead of a raw SQL SELECT:</p>\n<p>We could use a query builder to write the same logic in JavaScript:</p>\n<p><strong>Query builders</strong> are lightweight and easy to get off the ground, whereas <strong>ORMs</strong> use an object-oriented model and provide more heavy lifting within their rigid structure.</p>\n<p>We will use a <strong>query builder</strong> called <a href=\"https://knexjs.org/\">knex.js (Links to an external site.)</a>.</p>\n<h2><strong>Follow Along</strong></h2>\n<h3><strong>Knex Setup</strong></h3>\n<p>To use Knex in a repository, we'll need to add two libraries:</p>\n<p>knex is our query builder library, and sqlite3 allows us to interface with a sqlite database. We'll learn more about sqlite and other <strong>database management systems</strong> in the following module. For now, know that you need both libraries.</p>\n<p>Next, we use Knex to set up a config file:</p>\n<p>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.</p>\n<p><strong>GOTCHA</strong>: The file path to the database should be with respect to the <strong>root</strong> of the repo, not the configuration file itself.</p>\n<p>Once Knex is configured, we can import the above config file anywhere in our codebase to access the database.</p>\n<p>The db object provides methods that allow us to begin building queries.</p>\n<h3><strong>SELECT using Knex</strong></h3>\n<p>In Knex, the equivalent of SELECT * FROM users is:</p>\n<p>There's a simpler way to write the same command:</p>\n<p>Using this, we could write a GET endpoint.</p>\n<p><strong>NOTE</strong>: All Knex queries return promises.</p>\n<p>Knex also allows for a where clause. In Knex, we could write SELECT * FROM users WHERE id=1 as</p>\n<p>This method will resolve to an array containing a single entry like so: [{ id: 1, name: 'bill' }].</p>\n<p>Using this, we might add a GET endpoint where a specific user:</p>\n<h3><strong>INSERT using Knex</strong></h3>\n<p>In Knex, the equivalent of INSERT INTO users (name, age) VALUES ('Eva', 32) is:</p>\n<p>The insert method in Knex will resolve to an array containing the newly created id for that user like so: [3].</p>\n<h3><strong>UPDATE using Knex</strong></h3>\n<p>In knex, the equivalent of UPDATE users SET name='Ava', age=33 WHERE id=3; is:</p>\n<p>Note that the where method comes before update, unlike in SQL.</p>\n<p>Update will resolve to a count of rows updated.</p>\n<h3><strong>DELETE using Knex</strong></h3>\n<p>In Knex, the equivalent of DELETE FROM users WHERE age=33; is:</p>\n<p>Once again, the where must come before the del. This method will resolve to a count of records removed.</p>\n<h1>Day #2:</h1>\n<h2><strong>Overview</strong></h2>\n<p>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).</p>\n<h2><strong>Follow Along</strong></h2>\n<h3><strong>What is a DBMS?</strong></h3>\n<p>To manage digital databases we use specialized software called <strong>D</strong>ata<strong>B</strong>ase <strong>M</strong>anagement <strong>S</strong>ystems (DBMS). These systems typically run on servers and are managed by <strong>D</strong>ata<strong>B</strong>ase <strong>A</strong>dministrators (DBAs).</p>\n<p>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.</p>\n<p>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.</p>\n<p>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.</p>\n<h3><strong>What is SQLite?</strong></h3>\n<p><strong>SQLite</strong> is the DBMS, as the name suggests, it is a more lightweight system and thus easier to get set up than some others.</p>\n<p>SQLite allows us to store databases as single files. SQLite projects have a .db3 extension. That is the database.</p>\n<p>SQLite is <em>not a database</em> (like relational, graph, or document are databases) but rather <em>a database management system</em>.</p>\n<h3><strong>Opening an existing database in SQLite Studio</strong></h3>\n<p>One useful visual interface we might use with a SQLite database is called <strong>SQLite Studio</strong>. <a href=\"https://sqlitestudio.pl/\">Install SQLITE Studio here. (Links to an external site.)</a></p>\n<p>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.</p>\n<p>For a more detailed look at SQLite Studio, follow along in the video above.</p>\n<h2><strong>Overview</strong></h2>\n<p>A <strong>database schema</strong> 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.</p>\n<p>A well-designed database schema keeps the data well organized and can help ensure high-quality data.</p>\n<p>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.</p>\n<h2><strong>Follow Along</strong></h2>\n<p>For a look at schema design in SQLite Studio, follow along in the video above.</p>\n<p>When designing a single table, we need to ask three things:</p>\n<ul>\n<li>What fields (or columns) are present?</li>\n<li>What type of data do we expect for each field?</li>\n<li>Are there other restrictions needed for each column?</li>\n</ul>\n<p>Looking at the following schema diagram for an accounts table, we can the answer to each other those questions:</p>\n<p><a href=\"https://www.notion.so/9790405dda624818822293a383eec2d2\">Untitled</a></p>\n<h3><strong>Table Fields</strong></h3>\n<p>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.</p>\n<p>However, this is one requirement every table should satisfy: a <strong>primary key</strong>. 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.</p>\n<h3><strong>Datatypes</strong></h3>\n<p>Each field must also have a specified datatype. The datatype available depends on our DBMS. Some supported datatype in SQLite include:</p>\n<ul>\n<li><strong>Null:</strong> Missing or unknown information.</li>\n<li><strong>Integer:</strong> Whole numbers.</li>\n<li><strong>Real:</strong> Any number, including decimals.</li>\n<li><strong>Text:</strong> Character data.</li>\n<li><strong>Blob:</strong> a large binary object that can be used to store miscellaneous data.</li>\n</ul>\n<p>Any data inserted into the table must match the datatypes determined in schema design.</p>\n<h3><strong>Constraints</strong></h3>\n<p>Beyond datatypes, we may add additional <strong>constraints</strong> on each field. Some examples include:</p>\n<ul>\n<li><strong>Not Null:</strong> The field cannot be left empty</li>\n<li><strong>Unique:</strong> No two records can have the same value in this field</li>\n<li><strong>Primary key:</strong> - Indicates this field is the primary key. Both the not null and unique constraints will be enforced.</li>\n<li><strong>Default:</strong> - Sets a default value if none is provided.</li>\n</ul>\n<p>As with data types, any data that does not satisfy the schema constraints will be rejected from the database.</p>\n<h3><strong>Multi-Table Design</strong></h3>\n<p>Another critical component of schema design is to understand how different tables relate to each other. This will be covered in later lesson.</p>\n<h2><strong>Overview</strong></h2>\n<p>Knex provides a <strong>schema builder</strong>, which allows us to write code to design our database schema. However, beyond thinking about columns and constraints, we must also consider updates.</p>\n<p>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 <strong>migrations</strong> come into play.</p>\n<p>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.</p>\n<h2><strong>Follow Along</strong></h2>\n<h3><strong>Knex Cli</strong></h3>\n<p>To use migrations (and to make Knex setup easier), we need to use <strong>knex cli</strong>. Install knex globally with npm install -g knex.</p>\n<p>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.</p>\n<h3><strong>Initializing Knex</strong></h3>\n<p>To start, add the knex and sqlite3 libraries to your repository.</p>\n<p>npm install knex sqlite3</p>\n<p>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:</p>\n<p>Or, if Knex isn't globally installed:</p>\n<p>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.</p>\n<p>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.</p>\n<p>Now, wherever we configure our database, we may use the following syntax instead of hardcoding in a config object.</p>\n<h3><strong>Knex Migrations</strong></h3>\n<p>Once our knexfile is set up, we can begin creating <strong>migrations</strong>. 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.</p>\n<p>We can generate a new migration with the following command:</p>\n<p>knex migrate:make [migration-name]</p>\n<p>If we needed to create an accounts table, we might run:</p>\n<p>knex migrate:make create-accounts</p>\n<p>Note that inside data/migrations/ a new file has appeared. Migrations have a timestamp in their filenames automatically. Wither you like this or not, <strong>do not edit migration names.</strong></p>\n<p>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.</p>\n<p>References for these methods are found in the <strong>schema builder</strong> section of the <a href=\"https://knexjs.org/\">Knex docs (Links to an external site.)</a>.</p>\n<p>At this point, the table is <strong>not</strong> yet created. To run this (and any other) migrations, use the command:</p>\n<p>knex migrate:latest</p>\n<p>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.</p>\n<h3><strong>Changes and Rollbacks</strong></h3>\n<p>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:</p>\n<p>knex migrate:make accounts-schema-update</p>\n<p>Once we've written our updates into this file we save and close with:</p>\n<p>knex migrate:latest</p>\n<p>If we migrate our database and then quickly realize something isn't right, we can edit the migration file. However, first, we need to <strong>rolllback</strong> (or undo) our last migration with:</p>\n<p>knex migrate:rollback</p>\n<p>Finally, we are free to rerun that file with knex migrate latest.</p>\n<p><strong>NOTE</strong>: 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.</p>\n<h2><strong>Overview</strong></h2>\n<p>Knex provides a <strong>schema builder</strong>, which allows us to write code to design our database schema. However, beyond thinking about columns and constraints, we must also consider updates.</p>\n<p>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 <strong>migrations</strong> come into play.</p>\n<p>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.</p>\n<h2><strong>Follow Along</strong></h2>\n<h3><strong>Knex Cli</strong></h3>\n<p>To use migrations (and to make Knex setup easier), we need to use <strong>knex cli</strong>. Install knex globally with npm install -g knex.</p>\n<p>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.</p>\n<h3><strong>Initializing Knex</strong></h3>\n<p>To start, add the knex and sqlite3 libraries to your repository.</p>\n<p>npm install knex sqlite3</p>\n<p>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:</p>\n<p>Or, if Knex isn't globally installed:</p>\n<p>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.</p>\n<p>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.</p>\n<p>Now, wherever we configure our database, we may use the following syntax instead of hardcoding in a config object.</p>\n<h3><strong>Knex Migrations</strong></h3>\n<p>Once our knexfile is set up, we can begin creating <strong>migrations</strong>. 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.</p>\n<p>We can generate a new migration with the following command:</p>\n<p>knex migrate:make [migration-name]</p>\n<p>If we needed to create an accounts table, we might run:</p>\n<p>knex migrate:make create-accounts</p>\n<p>Note that inside data/migrations/ a new file has appeared. Migrations have a timestamp in their filenames automatically. Wither you like this or not, <strong>do not edit migration names.</strong></p>\n<p>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.</p>\n<p>References for these methods are found in the <strong>schema builder</strong> section of the <a href=\"https://knexjs.org/\">Knex docs (Links to an external site.)</a>.</p>\n<p>At this point, the table is <strong>not</strong> yet created. To run this (and any other) migrations, use the command:</p>\n<p>knex migrate:latest</p>\n<p>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.</p>\n<h3><strong>Changes and Rollbacks</strong></h3>\n<p>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:</p>\n<p>knex migrate:make accounts-schema-update</p>\n<p>Once we've written our updates into this file we save and close with:</p>\n<p>knex migrate:latest</p>\n<p>If we migrate our database and then quickly realize something isn't right, we can edit the migration file. However, first, we need to <strong>rolllback</strong> (or undo) our last migration with:</p>\n<p>knex migrate:rollback</p>\n<p>Finally, we are free to rerun that file with knex migrate latest.</p>\n<p><strong>NOTE</strong>: 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.</p>\n<h2><strong>Overview</strong></h2>\n<p>Often we want to pre-populate our database with sample data for testing. <strong>Seeds</strong> allow us to add and reset sample data easily.</p>\n<h2><strong>Follow Along</strong></h2>\n<p>The Knex command-line tool offers a way to <strong>seed</strong> our database; in other words, pre-populate our tables.</p>\n<p>Similarly to migrations, we want to customize where our seed files are generated using our knexfile</p>\n<p>To create a seed run: knex seed:make 001-seedName</p>\n<p>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.</p>\n<p>We want to create seeds for our accounts table:</p>\n<p>knex seed:make 001-accounts</p>\n<p>A file will appear in the designated seed folder.</p>\n<p>Run the seed files by typing:</p>\n<p>knex seed:run</p>\n<p>You can now use SQLite Studio to confirm that the accounts table has two entries.</p>\n<h1>Day #3:</h1>\n<h2><strong>Overview</strong></h2>\n<p><strong>Foreign keys</strong> are a type of table field used for creating links between tables. Like <strong>primary keys</strong>, 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.</p>\n<h2><strong>Follow Along</strong></h2>\n<p>Consider the following farms and ranchers tables.</p>\n<p><a href=\"https://www.notion.so/5b20c5e233dd4a70a33d6ab2c2e1c8bb\">Untitled</a></p>\n<p><a href=\"https://www.notion.so/0b0a909c24a9474fb9df80938546f12a\">Untitled</a></p>\n<p>The farm<em>id in the ranchers table is an example of a foreign key. Each entry in the farm</em>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.</p>\n<p>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.</p>\n<p>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.</p>\n<h2><strong>Overview</strong></h2>\n<p>We can use a JOIN to combine query data from multiple tables using a single SELECT statement.</p>\n<p>There are different types of joins; some are listed below:</p>\n<ul>\n<li>inner joins.</li>\n<li>outer joins.</li>\n<li>left joins.</li>\n<li>right joins.</li>\n<li>cross joins.</li>\n<li>non-equality joins.</li>\n<li>self joins.</li>\n</ul>\n<p>Using joins requires that the two tables of interest contain at least one field with shared information. For example, if a <em>departments</em> table has an <em>id</em> field, and an employee table has a <em>department_id</em> field, and the values that exist in the <em>id</em> column of the <em>departments</em> table live in the <em>department_id</em> field of the employee table, we can use those fields to join both tables like so:</p>\n<p>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 department<em>id or where the value stored in the field does not correspond to an existing id in the</em> departments <em>table, then that record will NOT be returned. In a similar fashion, any records from the</em> departments <em>table that don't have an employee associated with them will also be omitted from the results. Basically, if the</em> id* does not show as the value of department_id for an employee, it won't be able to join.</p>\n<p>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:</p>\n<p>Notice that we can take advantage of white space and indentation to make queries more readable.</p>\n<p>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.</p>\n<p>The syntax for performing a similar join using Knex is as follows:</p>\n<h2><strong>Follow Along</strong></h2>\n<p>A good explanation of how the different types of joins can be seen <a href=\"https://www.w3resource.com/sql/joins/sql-joins.php\">in this article from w3resource.com (Links to an external site.)</a>.</p>\n<h1>What is SQL Joins?</h1>\n<p>An SQL JOIN clause combines rows from two or more tables. It creates a set of rows in a temporary table.</p>\n<h1>How to Join two tables in SQL?</h1>\n<p>A JOIN works on two or more tables if they have at least one common field and have a relationship between them.</p>\n<p>JOIN keeps the base tables (structure and data) unchanged.</p>\n<h1>Join vs. Subquery</h1>\n<ul>\n<li>JOINs are faster than a subquery and it is very rare that the opposite.</li>\n<li>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.</li>\n<li>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.</li>\n<li>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.</li>\n</ul>\n<h1>SQL JOINS: EQUI JOIN and NON EQUI JOIN</h1>\n<p>The are two types of SQL JOINS - EQUI JOIN and NON EQUI JOIN</p>\n<ol>\n<li>SQL EQUI JOIN :</li>\n</ol>\n<p>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.</p>\n<ol>\n<li>SQL NON EQUI JOIN :</li>\n</ol>\n<p>The <strong>SQL NON EQUI JOIN</strong> is a join uses comparison operator other than the equal sign like >, <, >=, <= with the condition.</p>\n<p><strong>SQL EQUI JOIN : INNER JOIN and OUTER JOIN</strong></p>\n<p>The SQL EQUI JOIN can be classified into two types - INNER JOIN and OUTER JOIN</p>\n<ol>\n<li>SQL INNER JOIN</li>\n</ol>\n<p>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.</p>\n<ol>\n<li>SQL OUTER JOIN</li>\n</ol>\n<p>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.</p>\n<p>In order to perform a JOIN query, the required information we need are:</p>\n<p><strong>a)</strong> The name of the tables<strong>b)</strong> Name of the columns of two or more tables, based on which a condition will perform.</p>\n<p><strong>Syntax:</strong></p>\n<p><strong>Parameters:</strong></p>\n<p><a href=\"https://www.notion.so/5522c3e6d5d0443eb870f7a34f60c7ff\">Untitled</a></p>\n<p><strong>Pictorial Presentation of SQL Joins:</strong></p>\n<p><img src=\"https://www.w3resource.com/w3r_images/sql-joins-all.gif\"></p>\n<p><strong>Example:</strong></p>\n<p><strong>Sample table: company</strong></p>\n<p><strong>Sample table: foods</strong></p>\n<p>To join two tables 'company' and 'foods', the following SQL statement can be used :</p>\n<p><strong>SQL Code:</strong></p>\n<p>Copy</p>\n<p>Output:</p>\n<h2><strong>Overview</strong></h2>\n<p>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 <strong>models</strong></p>\n<h2><strong>Follow Along</strong></h2>\n<p>To handle CRUD operations for a single resource, we would want to create a <strong>model</strong> (or database access file) containing the following methods:</p>\n<p>Each of these functions would use Knex logic to perform the necessary database operation.</p>\n<p>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.</p>\n<p>We can also use existing methods like findById() to help add() return the new user (instead of just the id).</p>\n<p>Once all methods are written as desired, we can export them like so:</p>\n<p>…and use the helpers in our endpoints</p>\n<p>There should no be knex code in the endpoints themselves.</p>\n<h1>Day #4:</h1>\n<p><img src=\"https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5ecaf43d-ee27-4da1-aa3c-aa1d9d96cc40/Untitled.png\"></p>\n<h2><strong>Overview</strong></h2>\n<p>Normalization is the process of designing or refactoring database tables for maximum consistency and minimum redundancy.</p>\n<p>With objects, we're used to <em>denormalized</em> data, stored with ease of use and speed in mind. Non-normalized tables are considered ineffective in relational databases.</p>\n<h2><strong>Follow Along</strong></h2>\n<p><strong>Data normalization</strong> 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.</p>\n<h3><strong>Normalization Guidelines</strong></h3>\n<ul>\n<li>Each record has a primary key.</li>\n<li>No fields are repeated.</li>\n<li>All fields relate directly to the key data.</li>\n<li>Each field entry contains a single data point.</li>\n<li>There are no redundant entries.</li>\n</ul>\n<h3><strong>Denormalized Data</strong></h3>\n<p><a href=\"https://www.notion.so/19a01f68a659470fb85bbe6906fb4bad\">Untitled</a></p>\n<p>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.</p>\n<p><a href=\"https://www.notion.so/075ad6dd99ac48698625d7b56ca67bef\">Untitled</a></p>\n<p>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.</p>\n<p><a href=\"https://www.notion.so/375a15b0cb3f444a8698cd6cb3a08fe0\">Untitled</a></p>\n<p>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.</p>\n<p><strong>When these issues begin arising in your schema design, it means that you should separate information into two or more tables.</strong></p>\n<h3><strong>Anomalies</strong></h3>\n<p>Obeying the above guidelines prevent <strong>anomalies</strong> 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:</p>\n<p><a href=\"https://www.notion.so/e05f5b2e8ff141798adc6f188f56f31e\">Untitled</a></p>\n<p>Similarly, if Beech Ranch shut down, there would be three (if not more) records that needed to be deleted to remove a single farm.</p>\n<p>Thus a denormalized table opens the door for contradictory, confusing, and unusable data.</p>\n<h2><strong>Challenge</strong></h2>\n<p>What issues does the following table have?</p>\n<p><a href=\"https://www.notion.so/2793e8f6b70a47f48f9208779366e69e\">Untitled</a></p>\n<h2><strong>Overview</strong></h2>\n<p>There are three types of relationships:</p>\n<ul>\n<li>One to one.</li>\n<li>One to many.</li>\n<li>Many to many.</li>\n</ul>\n<p>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.</p>\n<h2><strong>Follow Along</strong></h2>\n<h3><strong>One to One Relationships</strong></h3>\n<p>Imagine we are storing the financial projections for a series of farms.</p>\n<p>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).</p>\n<p>We would say that farms and projections have a <strong>one-to-one</strong> relationship. This is to say that every farm has exactly one projection, and every project corresponds to exactly one farm.</p>\n<p>This data can be represented in two tables: farms and projections</p>\n<p><a href=\"https://www.notion.so/944e594f3464473ea06383bfdea13265\">Untitled</a></p>\n<p><a href=\"https://www.notion.so/de32fcf6760e45f284707274433fee92\">Untitled</a></p>\n<p>The farm_id is the foreign key that links farms and projections together.</p>\n<p>Notes about one-to-one relationships:</p>\n<ul>\n<li>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.</li>\n<li>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.</li>\n<li>You can represent one-to-one data in a single table <em>without</em> creating anomalies. However, it is sometimes prudent to use two tables as shown above to keep separate concerns in separate tables.</li>\n</ul>\n<h3><strong>One to Many Relationships</strong></h3>\n<p>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.</p>\n<p>This is called a <strong>one-to-many</strong> relationship.</p>\n<p>This is the most common type of relationship between entities. Some other examples:</p>\n<ul>\n<li>One customer can have many orders.</li>\n<li>One user can have many posts.</li>\n<li>One post can have many comments.</li>\n</ul>\n<p>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.</p>\n<p><a href=\"https://www.notion.so/7dfd2e69c9804a01845f2e9b716a5ac2\">Untitled</a></p>\n<p><a href=\"https://www.notion.so/c95f3d418db94ab4b4532eeba0e4f918\">Untitled</a></p>\n<p>In a many-to-many relationship, the foreign key (in this case farm_id) should <em>not</em> be unique.</p>\n<h3><strong>Many to Many Relationships</strong></h3>\n<p>If we want to track animals on a farm as well, we must explore the <strong>many-to-many</strong> relationship. A farm has multiple animals, and multiple of each type of animal is present at multiple different farms.</p>\n<p>Some other examples:</p>\n<ul>\n<li>an order can have many products and the same product will appear in many orders.</li>\n<li>a book can have more than one author, and an author can write more than one book.</li>\n</ul>\n<p>To model this relationship, we need to introduce an <strong>intermediary table</strong> that holds foreign keys that reference the primary key on the related tables. We now have a farms, animals, and farm_animals table.</p>\n<p><a href=\"https://www.notion.so/3269812d7c2a4578b1a9f6bc27e485b1\">Untitled</a></p>\n<p><a href=\"https://www.notion.so/c2642c7f632f489cb1b9639c80b8400d\">Untitled</a></p>\n<p><a href=\"https://www.notion.so/d0b0042c5e104edd9ed55e122af89084\">Untitled</a></p>\n<p>While each foreign key on the intermediary table is not unique, the combinations of keys should be unique.</p>\n<h2><strong>Overview</strong></h2>\n<p>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.</p>\n<p>We have to consider the way that delete and updates through our API will impact related data.</p>\n<h2><strong>Follow Along</strong></h2>\n<h3><strong>Foreign Key Setup</strong></h3>\n<p>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.</p>\n<h3><strong>Migrations</strong></h3>\n<p>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:</p>\n<p>Note that the foreign key can only be created <em>after</em> the reference table.</p>\n<p>In the down function, the opposite is true. We always want to drop a table with a foreign key <em>before</em> dropping the table it references.</p>\n<p>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.</p>\n<h3><strong>Seeds</strong></h3>\n<p>Order is also a concern when seeding. We want to create seeds in the <strong>same</strong> order we created our tables. In other words, don't create a seed with a foreign key, until that reference record exists.</p>\n<p>In our example, make sure to write the 01-farms seed file and then the 02-ranchers seed file.</p>\n<p>However, we run into a problem with truncating our seeds, because we want to truncate 02-ranchers <em>before</em> 01-farms. A library called knex-cleaner provides an easy solution for us.</p>\n<p>Run knex seed:make 00-cleanup and npm install knex-cleaner. Inside the cleanup seed, use the following code.</p>\n<p>This removes all tables (excluding the two tables that track migrations) in the correct order before any seed files run.</p>\n<h3><strong>Cascading</strong></h3>\n<p>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.</p>\n<p>If we want that to override this default, we can delete or update with <strong>cascade</strong>. With cascade, deleting a record also deletes all referencing records, we can set that up in our schema.</p>" | |
| }, | |
| { | |
| "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": "<h1>Leetcode</h1>\n<h2>Data Structures & Algorithms</h2>\n<p><a href=\"https://github.com/bgoonz/Data-Structures-Algos-Codebase\">DS Algo Codebase</a></p>\n<p><a href=\"#115-distinct-subsequenceshttpsleetcodecomproblemsdistinct-subsequencesdescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/distinct-subsequences/description/\">115. Distinct Subsequences</a></h2>\n<h3>Problem:</h3>\n<p>Given a string <strong>S</strong> and a string <strong>T</strong>, count the number of distinct subsequences of <strong>S</strong> which equals <strong>T</strong>.</p>\n<p>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, <code>\"ACE\"</code> is a subsequence of <code>\"ABCDE\"</code> while <code>\"AEC\"</code> is not).</p>\n<p><strong>Example 1:</strong></p>\n<pre><code>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</code></pre>\n<p><strong>Example 2:</strong></p>\n<pre><code>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</code></pre>\n<h3>Solution:</h3>\n<p>Define <code>f(i, j)</code> to be the number of ways that generate <code>T[0...j)</code> from <code>S[0...i)</code>.</p>\n<p>For <code>f(i, j)</code> you can always skip <code>S[i-1]</code>, but can only take it when <code>S[i-1] === T[j-1]</code>.</p>\n<pre><code class=\"language-javascript\">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</code></pre>\n<p>Dynamic array can be used.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Medium\nRelated Topics:\n\"Tree\": <a href=\"https://leetcode.com/tag/tree\">https://leetcode.com/tag/tree</a>\n\"Depth-first Search\": <a href=\"https://leetcode.com/tag/depth-first-search\">https://leetcode.com/tag/depth-first-search</a>\nSimilar Questions:\n\"Populating Next Right Pointers in Each Node II\": <a href=\"https://leetcode.com/problems/populating-next-right-pointers-in-each-node-ii\">https://leetcode.com/problems/populating-next-right-pointers-in-each-node-ii</a>\n\"Binary Tree Right Side View\": <a href=\"https://leetcode.com/problems/binary-tree-right-side-view\">https://leetcode.com/problems/binary-tree-right-side-view</a></p>\n<hr>\n<p><a href=\"#116-populating-next-right-pointers-in-each-nodehttpsleetcodecomproblemspopulating-next-right-pointers-in-each-nodedescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/populating-next-right-pointers-in-each-node/description/\">116. Populating Next Right Pointers in Each Node</a></h2>\n<h3>Problem:</h3>\n<p>Given a binary tree</p>\n<pre><code>struct TreeLinkNode {\n TreeLinkNode *left;\n TreeLinkNode *right;\n TreeLinkNode *next;\n}\n</code></pre>\n<p>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 <code>NULL</code>.</p>\n<p>Initially, all next pointers are set to <code>NULL</code>.</p>\n<p><strong>Note:</strong></p>\n<ul>\n<li>You may only use constant extra space.</li>\n<li>Recursive approach is fine, implicit stack space does not count as extra space for this problem.</li>\n<li>You may assume that it is a perfect binary tree (ie, all leaves are at the same level, and every parent has two children).</li>\n</ul>\n<p><strong>Example:</strong></p>\n<p>Given the following perfect binary tree,</p>\n<pre><code> 1\n / \\\n 2 3\n / \\ / \\\n4 5 6 7\n</code></pre>\n<p>After calling your function, the tree should look like:</p>\n<pre><code> 1 -> NULL\n / \\\n 2 -> 3 -> NULL\n / \\ / \\\n4->5->6->7 -> NULL\n</code></pre>\n<h3>Solution:</h3>\n<h4>ONE</h4>\n<p>Recursive.</p>\n<p>For every <code>node</code>:</p>\n<ul>\n<li>Left child: points to <code>node.right</code>.</li>\n<li>Right child: points to <code>node.next.left</code> if <code>node.next</code> exists.</li>\n</ul>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<h4>TWO</h4>\n<p>Level order traversal.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Medium\nRelated Topics:\n\"Tree\": <a href=\"https://leetcode.com/tag/tree\">https://leetcode.com/tag/tree</a>\n\"Depth-first Search\": <a href=\"https://leetcode.com/tag/depth-first-search\">https://leetcode.com/tag/depth-first-search</a>\nSimilar Questions:\n\"Populating Next Right Pointers in Each Node\": <a href=\"https://leetcode.com/problems/populating-next-right-pointers-in-each-node\">https://leetcode.com/problems/populating-next-right-pointers-in-each-node</a></p>\n<hr>\n<p><a href=\"#117-populating-next-right-pointers-in-each-node-iihttpsleetcodecomproblemspopulating-next-right-pointers-in-each-node-iidescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/populating-next-right-pointers-in-each-node-ii/description/\">117. Populating Next Right Pointers in Each Node II</a></h2>\n<h3>Problem:</h3>\n<p>Given a binary tree</p>\n<pre><code>struct TreeLinkNode {\n TreeLinkNode *left;\n TreeLinkNode *right;\n TreeLinkNode *next;\n}\n</code></pre>\n<p>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 <code>NULL</code>.</p>\n<p>Initially, all next pointers are set to <code>NULL</code>.</p>\n<p><strong>Note:</strong></p>\n<ul>\n<li>You may only use constant extra space.</li>\n<li>Recursive approach is fine, implicit stack space does not count as extra space for this problem.</li>\n</ul>\n<p><strong>Example:</strong></p>\n<p>Given the following binary tree,</p>\n<pre><code> 1\n / \\\n 2 3\n / \\ \\\n4 5 7\n</code></pre>\n<p>After calling your function, the tree should look like:</p>\n<pre><code> 1 -> NULL\n / \\\n 2 -> 3 -> NULL\n / \\ \\\n4-> 5 -> 7 -> NULL\n</code></pre>\n<h3>Solution:</h3>\n<h4>ONE</h4>\n<p>Recursive. See <a href=\"./116.%20Populating%20Next%20Right%20Pointers%20in%20Each%20Node.md\">116. Populating Next Right Pointers in Each Node</a>.</p>\n<p>The tree may not be perfect now. So keep finding <code>next</code> until there is a node with children, or <code>null</code>.</p>\n<p>This also means post-order traversal is required.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<h4>TWO</h4>\n<p>Level order traversal. Exact same as <a href=\"./116.%20Populating%20Next%20Right%20Pointers%20in%20Each%20Node.md\">116. Populating Next Right Pointers in Each Node</a>.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Easy\nRelated Topics:\n\"Array\": <a href=\"https://leetcode.com/tag/array\">https://leetcode.com/tag/array</a>\nSimilar Questions:\n\"Pascal's Triangle II\": <a href=\"https://leetcode.com/problems/pascals-triangle-ii\">https://leetcode.com/problems/pascals-triangle-ii</a></p>\n<hr>\n<p><a href=\"#118-pascals-trianglehttpsleetcodecomproblemspascals-triangledescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/pascals-triangle/description/\">118. Pascal's Triangle</a></h2>\n<h3>Problem:</h3>\n<p>Given a non-negative integer <em>numRows</em>, generate the first <em>numRows</em> of Pascal's triangle.</p>\n<p><img src=\"https://upload.wikimedia.org/wikipedia/commons/0/0d/PascalTriangleAnimated2.gif\" alt=\"PascalTriangleAnimated2.gif\"></p>\n<p>In Pascal's triangle, each number is the sum of the two numbers directly above it.</p>\n<p><strong>Example:</strong></p>\n<pre><code>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</code></pre>\n<h3>Solution:</h3>\n<p>Dynamic Programming 101.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Easy\nRelated Topics:\n\"Array\": <a href=\"https://leetcode.com/tag/array\">https://leetcode.com/tag/array</a>\nSimilar Questions:\n\"Pascal's Triangle\": <a href=\"https://leetcode.com/problems/pascals-triangle\">https://leetcode.com/problems/pascals-triangle</a></p>\n<hr>\n<p><a href=\"#119-pascals-triangle-iihttpsleetcodecomproblemspascals-triangle-iidescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/pascals-triangle-ii/description/\">119. Pascal's Triangle II</a></h2>\n<h3>Problem:</h3>\n<p>Given a non-negative index <em>k</em> where <em>k</em> ≤ 33, return the <em>k</em>th index row of the Pascal's triangle.</p>\n<p>Note that the row index starts from 0.</p>\n<p><img src=\"https://upload.wikimedia.org/wikipedia/commons/0/0d/PascalTriangleAnimated2.gif\" alt=\"PascalTriangleAnimated2.gif\"></p>\n<p>In Pascal's triangle, each number is the sum of the two numbers directly above it.</p>\n<p><strong>Example:</strong></p>\n<pre><code>Input: 3\nOutput: [1,3,3,1]\n</code></pre>\n<p><strong>Follow up:</strong></p>\n<p>Could you optimize your algorithm to use only <em>O</em>(<em>k</em>) extra space?</p>\n<h3>Solution:</h3>\n<p>Dynamic Programming 101 with dynamic array.</p>\n<p>State <code>(i, j)</code> depends on <code>(i-1, j)</code> and <code>(i-1, j-1)</code>. So to access <code>(i-1, j-1)</code> iteration must be from right to left.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Medium\nRelated Topics:\n\"Array\": <a href=\"https://leetcode.com/tag/array\">https://leetcode.com/tag/array</a>\n\"Dynamic Programming\": <a href=\"https://leetcode.com/tag/dynamic-programming\">https://leetcode.com/tag/dynamic-programming</a></p>\n<hr>\n<p><a href=\"#120-trianglehttpsleetcodecomproblemstriangledescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/triangle/description/\">120. Triangle</a></h2>\n<h3>Problem:</h3>\n<p>Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent numbers on the row below.</p>\n<p>For example, given the following triangle</p>\n<pre><code>[\n [2],\n [3,4],\n [6,5,7],\n [4,1,8,3]\n]\n</code></pre>\n<p>The minimum path sum from top to bottom is <code>11</code> (i.e., <strong>2</strong> + <strong>3</strong> + <strong>5</strong> + <strong>1</strong> = 11).</p>\n<p><strong>Note:</strong></p>\n<p>Bonus point if you are able to do this using only <em>O</em>(<em>n</em>) extra space, where <em>n</em> is the total number of rows in the triangle.</p>\n<h3>Solution:</h3>\n<p>Define <code>f(i, j)</code> to be the minimum path sum from <code>triangle[0][0]</code> to <code>triangle[i][j]</code>.</p>\n<pre><code>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</code></pre>\n<p>Dynamic array can be used.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Easy\nRelated Topics:\n\"Array\": <a href=\"https://leetcode.com/tag/array\">https://leetcode.com/tag/array</a>\n\"Dynamic Programming\": <a href=\"https://leetcode.com/tag/dynamic-programming\">https://leetcode.com/tag/dynamic-programming</a>\nSimilar Questions:\n\"Maximum Subarray\": <a href=\"https://leetcode.com/problems/maximum-subarray\">https://leetcode.com/problems/maximum-subarray</a>\n\"Best Time to Buy and Sell Stock II\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii</a>\n\"Best Time to Buy and Sell Stock III\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iii\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iii</a>\n\"Best Time to Buy and Sell Stock IV\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv</a>\n\"Best Time to Buy and Sell Stock with Cooldown\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown</a></p>\n<hr>\n<p><a href=\"#121-best-time-to-buy-and-sell-stockhttpsleetcodecomproblemsbest-time-to-buy-and-sell-stockdescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock/description/\">121. Best Time to Buy and Sell Stock</a></h2>\n<h3>Problem:</h3>\n<p>Say you have an array for which the <em>i</em>th element is the price of a given stock on day <em>i</em>.</p>\n<p>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.</p>\n<p>Note that you cannot sell a stock before you buy one.</p>\n<p><strong>Example 1:</strong></p>\n<pre><code>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</code></pre>\n<p><strong>Example 2:</strong></p>\n<pre><code>Input: [7,6,4,3,1]\nOutput: 0\nExplanation: In this case, no transaction is done, i.e. max profit = 0.\n</code></pre>\n<h3>Solution:</h3>\n<p>Only care about positive profits. Take the frist item as base and scan to the right. If we encounter an item <code>j</code> whose price <code>price[j]</code> is lower than the base (which means if we sell now the profit would be negative), we sell <code>j-1</code> instead and make <code>j</code> the new base.</p>\n<p>Because <code>price[j]</code> is lower that the base, using <code>j</code> as new base is guaranteed to gain more profit comparing to the old one.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Easy\nRelated Topics:\n\"Array\": <a href=\"https://leetcode.com/tag/array\">https://leetcode.com/tag/array</a>\n\"Greedy\": <a href=\"https://leetcode.com/tag/greedy\">https://leetcode.com/tag/greedy</a>\nSimilar Questions:\n\"Best Time to Buy and Sell Stock\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock</a>\n\"Best Time to Buy and Sell Stock III\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iii\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iii</a>\n\"Best Time to Buy and Sell Stock IV\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv</a>\n\"Best Time to Buy and Sell Stock with Cooldown\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown</a>\n\"Best Time to Buy and Sell Stock with Transaction Fee\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-transaction-fee\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-transaction-fee</a></p>\n<hr>\n<p><a href=\"#122-best-time-to-buy-and-sell-stock-iihttpsleetcodecomproblemsbest-time-to-buy-and-sell-stock-iidescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii/description/\">122. Best Time to Buy and Sell Stock II</a></h2>\n<h3>Problem:</h3>\n<p>Say you have an array for which the <em>i</em>th element is the price of a given stock on day <em>i</em>.</p>\n<p>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).</p>\n<p><strong>Note:</strong> You may not engage in multiple transactions at the same time (i.e., you must sell the stock before you buy again).</p>\n<p><strong>Example 1:</strong></p>\n<pre><code>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</code></pre>\n<p><strong>Example 2:</strong></p>\n<pre><code>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</code></pre>\n<p><strong>Example 3:</strong></p>\n<pre><code>Input: [7,6,4,3,1]\nOutput: 0\nExplanation: In this case, no transaction is done, i.e. max profit = 0.\n</code></pre>\n<h3>Solution:</h3>\n<p>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).</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Hard\nRelated Topics:\n\"Array\": <a href=\"https://leetcode.com/tag/array\">https://leetcode.com/tag/array</a>\n\"Dynamic Programming\": <a href=\"https://leetcode.com/tag/dynamic-programming\">https://leetcode.com/tag/dynamic-programming</a>\nSimilar Questions:\n\"Best Time to Buy and Sell Stock\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock</a>\n\"Best Time to Buy and Sell Stock II\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii</a>\n\"Best Time to Buy and Sell Stock IV\": <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv\">https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv</a>\n\"Maximum Sum of 3 Non-Overlapping Subarrays\": <a href=\"https://leetcode.com/problems/maximum-sum-of-3-non-overlapping-subarrays\">https://leetcode.com/problems/maximum-sum-of-3-non-overlapping-subarrays</a></p>\n<hr>\n<p><a href=\"#123-best-time-to-buy-and-sell-stock-iiihttpsleetcodecomproblemsbest-time-to-buy-and-sell-stock-iiidescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iii/description/\">123. Best Time to Buy and Sell Stock III</a></h2>\n<h3>Problem:</h3>\n<p>Say you have an array for which the <em>i</em>th element is the price of a given stock on day <em>i</em>.</p>\n<p>Design an algorithm to find the maximum profit. You may complete at most <em>two</em> transactions.</p>\n<p>**Note:**You may not engage in multiple transactions at the same time (i.e., you must sell the stock before you buy again).</p>\n<p><strong>Example 1:</strong></p>\n<pre><code>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</code></pre>\n<p><strong>Example 2:</strong></p>\n<pre><code>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</code></pre>\n<p><strong>Example 3:</strong></p>\n<pre><code>Input: [7,6,4,3,1]\nOutput: 0\nExplanation: In this case, no transaction is done, i.e. max profit = 0.\n</code></pre>\n<h3>Solution:</h3>\n<p>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 <em>two</em> transactions, so divide the days into two groups, <code>[0...k]</code> and <code>[k...n-1]</code>. Notice <code>k</code> exists in both groups because technically we can sell out then immediately buy in at the same day.</p>\n<p>Define <code>p1(i)</code> to be the max profit of day <code>[0...i]</code>. This is just like the problem of <a href=\"./121.%20Best%20Time%20to%20Buy%20and%20Sell%20Stock.md\">121. Best Time to Buy and Sell Stock</a>.</p>\n<pre><code>p1(0) = 0\np1(i) = max( p1(i-1), prices[i] - min(prices[0], ..., prices[i-1]) ), 0 < i <= n-1\n</code></pre>\n<p>Define <code>p2(i)</code> to be the max profit of day <code>[i...n-1]</code>. This is the mirror of <code>p1</code>.</p>\n<pre><code>p2(n-1) = 0\np2(i) = max( p2(i+1), max(prices[i], ..., prices[n-1]) - prices[i] ), n-1 > i >= 0\n</code></pre>\n<p>Define <code>f(k)</code> to be <code>p1(k) + p2(k)</code>. We need to get <code>max( f(0), ..., f(n-1) )</code>.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Hard\nRelated Topics:\n\"Tree\": <a href=\"https://leetcode.com/tag/tree\">https://leetcode.com/tag/tree</a>\n\"Depth-first Search\": <a href=\"https://leetcode.com/tag/depth-first-search\">https://leetcode.com/tag/depth-first-search</a>\nSimilar Questions:\n\"Path Sum\": <a href=\"https://leetcode.com/problems/path-sum\">https://leetcode.com/problems/path-sum</a>\n\"Sum Root to Leaf Numbers\": <a href=\"https://leetcode.com/problems/sum-root-to-leaf-numbers\">https://leetcode.com/problems/sum-root-to-leaf-numbers</a>\n\"Path Sum IV\": <a href=\"https://leetcode.com/problems/path-sum-iv\">https://leetcode.com/problems/path-sum-iv</a>\n\"Longest Univalue Path\": <a href=\"https://leetcode.com/problems/longest-univalue-path\">https://leetcode.com/problems/longest-univalue-path</a></p>\n<hr>\n<p><a href=\"#124-binary-tree-maximum-path-sumhttpsleetcodecomproblemsbinary-tree-maximum-path-sumdescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/binary-tree-maximum-path-sum/description/\">124. Binary Tree Maximum Path Sum</a></h2>\n<h3>Problem:</h3>\n<p>Given a <strong>non-empty</strong> binary tree, find the maximum path sum.</p>\n<p>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 <strong>at least one node</strong> and does not need to go through the root.</p>\n<p><strong>Example 1:</strong></p>\n<pre><code>Input: [1,2,3]\n\n 1\n / \\\n 2 3\n\nOutput: 6\n</code></pre>\n<p><strong>Example 2:</strong></p>\n<pre><code>Input: [-10,9,20,null,null,15,7]\n\n -10\n / \\\n 9 20\n / \\\n 15 7\n\nOutput: 42\n</code></pre>\n<h3>Solution:</h3>\n<p>For every <code>node</code>, there are six possible ways to get the max path sum:</p>\n<ul>\n<li>\n<p>With <code>node.val</code></p>\n<ol>\n<li><code>node.val</code> plus the max sum of a path that ends with <code>node.left</code>.</li>\n<li><code>node.val</code> plus the max sum of a path that starts with <code>node.right</code>.</li>\n<li><code>node.val</code> plus the max sum of both paths.</li>\n<li>Just <code>node.val</code> (the max sum of both paths are negative).</li>\n</ol>\n</li>\n<li>\n<p>Without<code>node.val</code> (disconnected)</p>\n<ol>\n<li>The max-sum path is somewhere under the <code>node.left</code> subtree.</li>\n<li>The max-sum path is somewhere under the <code>node.right</code> subtree.</li>\n</ol>\n</li>\n</ul>\n<p>There are two ways to implement this.</p>\n<h4>ONE</h4>\n<p>Define a function that returns two values. The max sum of a path that may or may not end with <code>root</code> node, and the max sum of the path that ends with <code>root</code> node.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<h4>TWO</h4>\n<p>Just return the later (max sum of a path that ends with <code>root</code>). Maintain a global variable to store the disconnected max sum.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Easy\nRelated Topics:\n\"Two Pointers\": <a href=\"https://leetcode.com/tag/two-pointers\">https://leetcode.com/tag/two-pointers</a>\n\"String\": <a href=\"https://leetcode.com/tag/string\">https://leetcode.com/tag/string</a>\nSimilar Questions:\n\"Palindrome Linked List\": <a href=\"https://leetcode.com/problems/palindrome-linked-list\">https://leetcode.com/problems/palindrome-linked-list</a>\n\"Valid Palindrome II\": <a href=\"https://leetcode.com/problems/valid-palindrome-ii\">https://leetcode.com/problems/valid-palindrome-ii</a></p>\n<hr>\n<p><a href=\"#125-valid-palindromehttpsleetcodecomproblemsvalid-palindromedescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/valid-palindrome/description/\">125. Valid Palindrome</a></h2>\n<h3>Problem:</h3>\n<p>Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignoring cases.</p>\n<p><strong>Note:</strong> For the purpose of this problem, we define empty string as valid palindrome.</p>\n<p><strong>Example 1:</strong></p>\n<pre><code>Input: \"A man, a plan, a canal: Panama\"\nOutput: true\n</code></pre>\n<p><strong>Example 2:</strong></p>\n<pre><code>Input: \"race a car\"\nOutput: false\n</code></pre>\n<h3>Solution:</h3>\n<h4>ONE</h4>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<h4>TWO</h4>\n<p>Remove non-alphanumeric characters then compare.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<h4>THREE</h4>\n<p>Compare the char codes.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Hard\nRelated Topics:\n\"Array\": <a href=\"https://leetcode.com/tag/array\">https://leetcode.com/tag/array</a>\n\"String\": <a href=\"https://leetcode.com/tag/string\">https://leetcode.com/tag/string</a>\n\"Backtracking\": <a href=\"https://leetcode.com/tag/backtracking\">https://leetcode.com/tag/backtracking</a>\n\"Breadth-first Search\": <a href=\"https://leetcode.com/tag/breadth-first-search\">https://leetcode.com/tag/breadth-first-search</a>\nSimilar Questions:\n\"Word Ladder\": <a href=\"https://leetcode.com/problems/word-ladder\">https://leetcode.com/problems/word-ladder</a></p>\n<hr>\n<p><a href=\"#126-word-ladder-iihttpsleetcodecomproblemsword-ladder-iidescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/word-ladder-ii/description/\">126. Word Ladder II</a></h2>\n<h3>Problem:</h3>\n<p>Given two words (<em>beginWord</em> and <em>endWord</em>), and a dictionary's word list, find all shortest transformation sequence(s) from <em>beginWord</em> to <em>endWord</em>, such that:</p>\n<ol>\n<li>Only one letter can be changed at a time</li>\n<li>Each transformed word must exist in the word list. Note that <em>beginWord</em> is <em>not</em> a transformed word.</li>\n</ol>\n<p><strong>Note:</strong></p>\n<ul>\n<li>Return an empty list if there is no such transformation sequence.</li>\n<li>All words have the same length.</li>\n<li>All words contain only lowercase alphabetic characters.</li>\n<li>You may assume no duplicates in the word list.</li>\n<li>You may assume <em>beginWord</em> and <em>endWord</em> are non-empty and are not the same.</li>\n</ul>\n<p><strong>Example 1:</strong></p>\n<pre><code>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</code></pre>\n<p><strong>Example 2:</strong></p>\n<pre><code>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</code></pre>\n<h3>Solution:</h3>\n<p>This is just like <a href=\"./127.%20Word%20Ladder\">127. Word Ladder</a>.</p>\n<p>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).</p>\n<p>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.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Medium\nRelated Topics:\n\"Breadth-first Search\": <a href=\"https://leetcode.com/tag/breadth-first-search\">https://leetcode.com/tag/breadth-first-search</a>\nSimilar Questions:\n\"Word Ladder II\": <a href=\"https://leetcode.com/problems/word-ladder-ii\">https://leetcode.com/problems/word-ladder-ii</a>\n\"Minimum Genetic Mutation\": <a href=\"https://leetcode.com/problems/minimum-genetic-mutation\">https://leetcode.com/problems/minimum-genetic-mutation</a></p>\n<hr>\n<p><a href=\"#127-word-ladderhttpsleetcodecomproblemsword-ladderdescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/word-ladder/description/\">127. Word Ladder</a></h2>\n<h3>Problem:</h3>\n<p>Given two words (<em>beginWord</em> and <em>endWord</em>), and a dictionary's word list, find the length of shortest transformation sequence from <em>beginWord</em> to <em>endWord</em>, such that:</p>\n<ol>\n<li>Only one letter can be changed at a time.</li>\n<li>Each transformed word must exist in the word list. Note that <em>beginWord</em> is <em>not</em> a transformed word.</li>\n</ol>\n<p><strong>Note:</strong></p>\n<ul>\n<li>Return 0 if there is no such transformation sequence.</li>\n<li>All words have the same length.</li>\n<li>All words contain only lowercase alphabetic characters.</li>\n<li>You may assume no duplicates in the word list.</li>\n<li>You may assume <em>beginWord</em> and <em>endWord</em> are non-empty and are not the same.</li>\n</ul>\n<p><strong>Example 1:</strong></p>\n<pre><code>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</code></pre>\n<p><strong>Example 2:</strong></p>\n<pre><code>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</code></pre>\n<h3>Solution:</h3>\n<p>Think of it as building a tree, with <code>begineWord</code> as root and <code>endWord</code> as leaves.</p>\n<p>The best way control the depth (length of the shortest transformations) while building the tree is level-order traversal (BFS).</p>\n<p>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 <code>i</code>) we encounter a word that turns out to be in a shortest path, then level <code>i</code> is the lowest level this word could ever get. We can safely remove it from the <code>wordList</code>.</p>\n<p>To find all the next words, instead of filtering the <code>wordList</code>, enumerate all 25 possible words and check if in <code>wordList</code>.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Hard\nRelated Topics:\n\"Array\": <a href=\"https://leetcode.com/tag/array\">https://leetcode.com/tag/array</a>\n\"Union Find\": <a href=\"https://leetcode.com/tag/union-find\">https://leetcode.com/tag/union-find</a>\nSimilar Questions:\n\"Binary Tree Longest Consecutive Sequence\": <a href=\"https://leetcode.com/problems/binary-tree-longest-consecutive-sequence\">https://leetcode.com/problems/binary-tree-longest-consecutive-sequence</a></p>\n<hr>\n<p><a href=\"#128-longest-consecutive-sequencehttpsleetcodecomproblemslongest-consecutive-sequencedescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/longest-consecutive-sequence/description/\">128. Longest Consecutive Sequence</a></h2>\n<h3>Problem:</h3>\n<p>Given an unsorted array of integers, find the length of the longest consecutive elements sequence.</p>\n<p>Your algorithm should run in O(<em>n</em>) complexity.</p>\n<p><strong>Example:</strong></p>\n<pre><code>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</code></pre>\n<h3>Solution:</h3>\n<p>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).</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Medium\nRelated Topics:\n\"Tree\": <a href=\"https://leetcode.com/tag/tree\">https://leetcode.com/tag/tree</a>\n\"Depth-first Search\": <a href=\"https://leetcode.com/tag/depth-first-search\">https://leetcode.com/tag/depth-first-search</a>\nSimilar Questions:\n\"Path Sum\": <a href=\"https://leetcode.com/problems/path-sum\">https://leetcode.com/problems/path-sum</a>\n\"Binary Tree Maximum Path Sum\": <a href=\"https://leetcode.com/problems/binary-tree-maximum-path-sum\">https://leetcode.com/problems/binary-tree-maximum-path-sum</a></p>\n<hr>\n<p><a href=\"#129-sum-root-to-leaf-numbershttpsleetcodecomproblemssum-root-to-leaf-numbersdescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/sum-root-to-leaf-numbers/description/\">129. Sum Root to Leaf Numbers</a></h2>\n<h3>Problem:</h3>\n<p>Given a binary tree containing digits from <code>0-9</code> only, each root-to-leaf path could represent a number.</p>\n<p>An example is the root-to-leaf path <code>1->2->3</code> which represents the number <code>123</code>.</p>\n<p>Find the total sum of all root-to-leaf numbers.</p>\n<p><strong>Note:</strong> A leaf is a node with no children.</p>\n<p><strong>Example:</strong></p>\n<pre><code>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</code></pre>\n<p><strong>Example 2:</strong></p>\n<pre><code>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</code></pre>\n<h3>Solution:</h3>\n<p>To write a clean solution for this promblem, use <code>0</code> as indicator of leaf node. If all the children get <code>0</code>, it is a leaf node, return the sum of current level.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Medium\nRelated Topics:\n\"Depth-first Search\": <a href=\"https://leetcode.com/tag/depth-first-search\">https://leetcode.com/tag/depth-first-search</a>\n\"Breadth-first Search\": <a href=\"https://leetcode.com/tag/breadth-first-search\">https://leetcode.com/tag/breadth-first-search</a>\n\"Union Find\": <a href=\"https://leetcode.com/tag/union-find\">https://leetcode.com/tag/union-find</a>\nSimilar Questions:\n\"Number of Islands\": <a href=\"https://leetcode.com/problems/number-of-islands\">https://leetcode.com/problems/number-of-islands</a>\n\"Walls and Gates\": <a href=\"https://leetcode.com/problems/walls-and-gates\">https://leetcode.com/problems/walls-and-gates</a></p>\n<hr>\n<p><a href=\"#130-surrounded-regionshttpsleetcodecomproblemssurrounded-regionsdescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/surrounded-regions/description/\">130. Surrounded Regions</a></h2>\n<h3>Problem:</h3>\n<p>Given a 2D board containing <code>'X'</code> and <code>'O'</code> (<strong>the letter O</strong>), capture all regions surrounded by <code>'X'</code>.</p>\n<p>A region is captured by flipping all <code>'O'</code>s into <code>'X'</code>s in that surrounded region.</p>\n<p><strong>Example:</strong></p>\n<pre><code>X X X X\nX O O X\nX X O X\nX O X X\n</code></pre>\n<p>After running your function, the board should be:</p>\n<pre><code>X X X X\nX X X X\nX X X X\nX O X X\n</code></pre>\n<p><strong>Explanation:</strong></p>\n<p>Surrounded regions shouldn't be on the border, which means that any <code>'O'</code> on the border of the board are not flipped to <code>'X'</code>. Any <code>'O'</code> that is not on the border and it is not connected to an <code>'O'</code> on the border will be flipped to <code>'X'</code>. Two cells are connected if they are adjacent cells connected horizontally or vertically.</p>\n<h3>Solution:</h3>\n<p>Find all the <code>O</code>s that are connected to the <code>O</code>s on the border, change them to <code>#</code>. Then scan the board, change <code>O</code> to <code>X</code> and <code>#</code> back to <code>O</code>.</p>\n<p>The process of finding the connected <code>O</code>s is just like tree traversal. <code>O</code>s on the border are the same level. Their children are the second level. And so on.</p>\n<p>So both BFS and DFS are good. I prefer BFS when pruning is not needed in favor of its readability.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<hr>\n<p>Difficulty: Medium\nRelated Topics:\n\"Depth-first Search\": <a href=\"https://leetcode.com/tag/depth-first-search\">https://leetcode.com/tag/depth-first-search</a>\n\"Breadth-first Search\": <a href=\"https://leetcode.com/tag/breadth-first-search\">https://leetcode.com/tag/breadth-first-search</a>\n\"Graph\": <a href=\"https://leetcode.com/tag/graph\">https://leetcode.com/tag/graph</a>\nSimilar Questions:\n\"Copy List with Random Pointer\": <a href=\"https://leetcode.com/problems/copy-list-with-random-pointer\">https://leetcode.com/problems/copy-list-with-random-pointer</a></p>\n<hr>\n<p><a href=\"#133-clone-graphhttpsleetcodecomproblemsclone-graphdescription\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ <a href=\"https://leetcode.com/problems/clone-graph/description/\">133. Clone Graph</a></h2>\n<h3>Problem:</h3>\n<p>Given the head of a graph, return a deep copy (clone) of the graph. Each node in the graph contains a <code>label</code> (<code>int</code>) and a list (<code>List[UndirectedGraphNode]</code>) of its <code>neighbors</code>. There is an edge between the given node and each of the nodes in its neighbors.</p>\n<p>OJ's undirected graph serialization (so you can understand error output):</p>\n<p>Nodes are labeled uniquely.</p>\n<p>We use <code>#</code> as a separator for each node, and <code>,</code> as a separator for node label and each neighbor of the node.</p>\n<p>As an example, consider the serialized graph <code>{0,1,2#1,2#2,2}</code>.</p>\n<p>The graph has a total of three nodes, and therefore contains three parts as separated by <code>#</code>.</p>\n<ol>\n<li>First node is labeled as <code>0</code>. Connect node <code>0</code> to both nodes <code>1</code> and <code>2</code>.</li>\n<li>Second node is labeled as <code>1</code>. Connect node <code>1</code> to node <code>2</code>.</li>\n<li>Third node is labeled as <code>2</code>. Connect node <code>2</code> to node <code>2</code> (itself), thus forming a self-cycle.</li>\n</ol>\n<p>Visually, the graph looks like the following:</p>\n<pre><code> 1\n / \\\n / \\\n 0 --- 2\n / \\\n \\_/\n</code></pre>\n<p><strong>Note</strong>: 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.</p>\n<h3>Solution:</h3>\n<p>DFS. Cache the visited node before entering the next recursion.</p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<p><img src=\"https://github.com/everthis/leetcode-js/blob/master/images/binary-tree-upside-down.webp\" alt=\"alt text\" title=\"binary-tree-upside-down\"></p>\n<pre><code class=\"language-js\">/**\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</code></pre>\n<p><img src=\"https://github.com/everthis/leetcode-js/blob/master/images/maximum-sum-circular-subarray.png\" alt=\"alt text\" title=\"maximum-sum-circular-subarray\"></p>\n<pre><code class=\"language-js\">/**\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</code></pre>\n<p><a href=\"#balanced-binary-tree---leetcode\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h1>➤ Balanced Binary Tree - LeetCode</h1>\n<blockquote>\n<p>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.</p>\n</blockquote>\n<p>Given a binary tree, determine if it is height-balanced.</p>\n<p>For this problem, a height-balanced binary tree is defined as:</p>\n<blockquote>\n<p>a binary tree in which the left and right subtrees of <em>every</em> node differ in height by no more than 1.</p>\n</blockquote>\n<p><strong>Example 1:</strong></p>\n<p><img src=\"https://assets.leetcode.com/uploads/2020/10/06/balance_1.jpg\"></p>\n<p><strong>Input:</strong> root = [3,9,20,null,null,15,7]\n<strong>Output:</strong> true</p>\n<p><strong>Example 2:</strong></p>\n<p><img src=\"https://assets.leetcode.com/uploads/2020/10/06/balance_2.jpg\"></p>\n<p><strong>Input:</strong> root = [1,2,2,3,3,null,null,4,4]\n<strong>Output:</strong> false</p>\n<p><strong>Example 3:</strong></p>\n<p><strong>Input:</strong> root = []\n<strong>Output:</strong> true</p>\n<p><strong>Constraints:</strong></p>\n<ul>\n<li>The number of nodes in the tree is in the range <code>[0, 5000]</code>.</li>\n<li><code>-104 <= Node.val <= 104</code></li>\n</ul>\n<p><a href=\"https://leetcode.com/problems/balanced-binary-tree/\">Source</a># Convert Sorted Array to Binary Search Tree</p>\n<blockquote>\n<p>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.</p>\n</blockquote>\n<p>Given an array where elements are sorted in ascending order, convert it to a height balanced BST.</p>\n<p>For this problem, a height-balanced binary tree is defined as a binary tree in which the depth of the two subtrees of <em>every</em> node never differ by more than 1.</p>\n<p><strong>Example:</strong></p>\n<p>Given the sorted array: [-10,-3,0,5,9],</p>\n<p>One possible answer is: [0,-3,9,-10,null,5], which represents the following height balanced BST:</p>\n<pre><code> 0\n / \\\\\n</code></pre>\n<p>-3 9\n/ /\n-10 5</p>\n<p><a href=\"https://leetcode.com/problems/convert-sorted-array-to-binary-search-tree/\">Source</a># Delete Node in a BST</p>\n<blockquote>\n<p>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.</p>\n</blockquote>\n<p>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.</p>\n<p>Basically, the deletion can be divided into two stages:</p>\n<ol>\n<li>Search for a node to remove.</li>\n<li>If the node is found, delete the node.</li>\n</ol>\n<p><strong>Follow up:</strong> Can you solve it with time complexity <code>O(height of tree)</code>?</p>\n<p><strong>Example 1:</strong></p>\n<p><img src=\"https://assets.leetcode.com/uploads/2020/09/04/del_node_1.jpg\"></p>\n<p><strong>Input:</strong> root = [5,3,6,2,4,null,7], key = 3\n<strong>Output:</strong> [5,4,6,2,null,null,7]\n<strong>Explanation:</strong> 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<img src=\"https://assets.leetcode.com/uploads/2020/09/04/del_node_supp.jpg\"></p>\n<p><strong>Example 2:</strong></p>\n<p><strong>Input:</strong> root = [5,3,6,2,4,null,7], key = 0\n<strong>Output:</strong> [5,3,6,2,4,null,7]\n<strong>Explanation:</strong> The tree does not contain a node with value = 0.</p>\n<p><strong>Example 3:</strong></p>\n<p><strong>Input:</strong> root = [], key = 0\n<strong>Output:</strong> []</p>\n<p><strong>Constraints:</strong></p>\n<ul>\n<li>The number of nodes in the tree is in the range <code>[0, 104]</code>.</li>\n<li><code>-105 <= Node.val <= 105</code></li>\n<li>Each node has a <strong>unique</strong> value.</li>\n<li><code>root</code> is a valid binary search tree.</li>\n<li><code>-105 <= key <= 105</code></li>\n</ul>\n<p><a href=\"https://leetcode.com/problems/delete-node-in-a-bst/\">Source</a><img src=\"https://github.com/everthis/leetcode-js/blob/master/images/meeting-room-ii-0.jpg\" alt=\"alt text\" title=\"meeting-room-ii\">\n<img src=\"https://github.com/everthis/leetcode-js/blob/master/images/meeting-room-ii-1.jpg\" alt=\"alt text\" title=\"meeting-room-ii\"></p>\n<pre><code class=\"language-javascript\">/**\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</code></pre>\n<p><a href=\"#-\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>" | |
| }, | |
| { | |
| "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": "<h2>Functions</h2>\n<pre><code class=\"language-python\">def hello(name):\n print('Hello {}'.format(name))\n</code></pre>\n<h3>Return Values and return Statements</h3>\n<p>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:</p>\n<ul>\n<li>The return keyword.</li>\n<li>The value or expression that the function should return.</li>\n</ul>\n<pre><code class=\"language-python\">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</code></pre>\n<h3>The None Value</h3>\n<pre><code class=\"language-python\">spam = print('Hello!')\nspam is None\n</code></pre>\n<p>Note: never compare to <code>None</code> with the <code>==</code> operator. Always use <code>is</code>.</p>\n<h3>print Keyword Arguments</h3>\n<pre><code class=\"language-python\">print('Hello', end='')\nprint('World')\n</code></pre>\n<pre><code class=\"language-python\">print('cats', 'dogs', 'mice')\n</code></pre>\n<pre><code class=\"language-python\">print('cats', 'dogs', 'mice', sep=',')\n</code></pre>\n<h3>Local and Global Scope</h3>\n<ul>\n<li>Code in the global scope cannot use any local variables.</li>\n<li>However, a local scope can access global variables.</li>\n<li>Code in a function's local scope cannot use variables in any other local scope.</li>\n<li>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.</li>\n</ul>\n<h3>The global Statement</h3>\n<p>If you need to modify a global variable from within a function, use the global statement:</p>\n<pre><code class=\"language-python\">def spam():\n global eggs\n eggs = 'spam'\n\neggs = 'global'\nspam()\nprint(eggs)\n</code></pre>\n<p>There are four rules to tell whether a variable is in a local scope or global scope:</p>\n<ol>\n<li>If a variable is being used in the global scope (that is, outside of all functions), then it is always a global variable.</li>\n<li>If there is a global statement for that variable in a function, it is a global variable.</li>\n<li>Otherwise, if the variable is used in an assignment statement in the function, it is a local variable.</li>\n<li>But if the variable is not used in an assignment statement, it is a global variable.</li>\n</ol>" | |
| }, | |
| { | |
| "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": "<h1>Understanding Git Bash</h1>\n<h1>Git Bash</h1>\n<p>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.</p>\n<p>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.</p>\n<h2>What is Git Bash?</h2>\n<p>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.</p>\n<h2>How to install Git Bash</h2>\n<p>Git Bash comes included as part of the <a href=\"https://gitforwindows.org/\">Git For Windows</a> package. Download and install Git For Windows like other Windows applications. Once downloaded find the included <code>.exe</code> file and open to execute Git Bash.</p>\n<h2>How to use Git Bash</h2>\n<p>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.</p>\n<h2>How to navigate folders</h2>\n<p>The Bash command <code>pwd</code> is used to print the 'present working directory'. <code>pwd</code> 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.</p>\n<p>The Bash command <code>ls</code> is used to 'list' contents of the current working directory. <code>ls</code> is equivalent to <code>DIR</code> on a Windows console host terminal.</p>\n<p>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.</p>\n<h2>Git Bash Commands</h2>\n<p>Git Bash is packaged with additional commands that can be found in the <code>/usr/bin</code> 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: <code>[Ssh](https://man.openbsd.org/ssh.1)</code>, <code>[scp](https://linux.die.net/man/1/scp)</code>, <code>[cat](http://man7.org/linux/man-pages/man1/cat.1.html)</code>, <code>[find](https://linux.die.net/man/1/find)</code>.</p>\n<p>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</p>" | |
| }, | |
| { | |
| "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": "<p>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.</p>\n<blockquote>\n<p>Vestibulum ullamcorper risus auctor eleifend consequat.</p>\n</blockquote>\n<p><img src=\"https://assets.stackbit.com/components/images/default/post-4.jpeg\" alt=\"Placeholder Image\"></p>\n<p>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.</p>\n<p>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.</p>" | |
| }, | |
| { | |
| "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": "<h1>Overview\n\n</h1>\n<p>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.</p>\n<p>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:</p>\n<ul>\n<li><strong>Fast, web-based UI:</strong> With rich-text editing, real-time preview, and drag-and-drop media uploads.</li>\n<li><strong>Platform agnostic:</strong> Works with most static site generators.</li>\n<li><strong>Easy installation:</strong> Add two files to your site and hook up the backend by including those files in your build process or linking to our Content Delivery Network (CDN).</li>\n<li><strong>Modern authentication:</strong> Using GitHub, GitLab, or Bitbucket and JSON web tokens.</li>\n<li><strong>Flexible content types:</strong> Specify an unlimited number of content types with custom fields.</li>\n<li><strong>Fully extensible:</strong> Create custom-styled previews, UI widgets, and editor plugins.</li>\n</ul>\n<h2>Netlify CMS vs. Netlify</h2>\n<p><a href=\"https://www.netlify.com/\">Netlify.com</a> 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.</p>\n<p>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 <em>made</em> to be community-driven, and has never been locked to the Netlify platform (despite the name).</p>\n<p>With this in mind, you can:</p>\n<ul>\n<li>Use Netlify CMS without Netlify and deploy your site where you always have, hooking up your own CI, site hosting, CDN, etc.</li>\n<li>Use Netlify without Netlify CMS and edit your static site in your code editor.</li>\n<li>Or, use them together and have a fully-working CMS-enabled site with <a href=\"https://www.netlifycms.org/docs/start-with-a-template/\">one click</a>!</li>\n</ul>\n<p>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.</p>\n<ul>\n<li>Add to Your Site<strong>These generatorsstore static files in</strong>Jekyll, GitBook/ (project root)Hugo, Gatsby, Nuxt, Gridsome, Zola, Sapper/staticNext/publicHexo, Middleman, Jigsaw/sourceSpike/viewsWyam/inputPelican/contentVuePress/.vuepress/publicElmstatic/_site11ty/_sitepreact-cli/src/staticnamePost 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:</li>\n</ul>\n<p>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 <a href=\"https://github.com/\">GitHub</a>, <a href=\"https://about.gitlab.com/\">GitLab</a>, or <a href=\"https://bitbucket.org/\">Bitbucket</a>. You can also create your own custom backend.</p>\n<p>This tutorial guides you through the steps for adding Netlify CMS to a site that's built with a common <a href=\"https://www.staticgen.com/\">static site generator</a>, like Jekyll, Hugo, Hexo, or Gatsby. Alternatively, you can <a href=\"https://www.netlifycms.org/docs/start-with-a-template\">start from a template</a> or dive right into <a href=\"https://www.netlifycms.org/docs/configuration-options\">configuration options</a>.</p>\n<h2>App File Structure</h2>\n<p>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:</p>\n<p>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 <a href=\"https://github.com/netlify/netlify-cms/blob/master/CONTRIBUTING.md#pull-requests\">filing a pull request</a>!)</p>\n<p>Inside the admin folder, you'll create two files:</p>\n<p>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 <a href=\"https://www.netlifycms.org/docs/add-to-your-site/#configuration\">Configuration</a> section covers the details.</p>\n<p>In this example, we pull the admin/index.html file from a public CDN.</p>\n<p>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 <a href=\"https://cdn.jsdelivr.net/npm/netlify-cms@%5E2.0.0/dist/netlify-cms.js\">https://cdn.jsdelivr.net/npm/netlify-cms@^2.0.0/dist/netlify-cms.js</a></p>\n<h3>Installing with npm</h3>\n<p>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:</p>\n<p>Then import it (assuming your project has tooling for imports):</p>\n<h2>Configuration</h2>\n<p>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.</p>\n<h3>Backend</h3>\n<p>We're using <a href=\"https://www.netlify.com/\">Netlify</a> for our hosting and authentication in this tutorial, so backend configuration is fairly straightforward.</p>\n<p>For GitHub and GitLab repositories, you can start your Netlify CMS config.yml file with these lines:</p>\n<p><em>(For Bitbucket repositories, use the _[</em>Bitbucket backend<em>](<a href=\"https://www.netlifycms.org/docs/bitbucket-backend\">https://www.netlifycms.org/docs/bitbucket-backend</a>)</em> instructions instead.)_</p>\n<p>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 <a href=\"https://www.netlifycms.org/docs/add-to-your-site/#authentication\">Authentication section</a> below.) If you leave out the branch declaration, it defaults to master.</p>\n<h3>Editorial Workflow</h3>\n<p><strong>Note:</strong> Editorial workflow works with GitHub repositories, and support for GitLab and Bitbucket is <a href=\"https://www.netlifycms.org/docs/beta-features/#gitlab-and-bitbucket-editorial-workflow-support\">in beta</a>.</p>\n<p>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 <a href=\"https://www.netlifycms.org/docs/configuration-options/#publish-mode\">Editorial Workflow</a>, which adds an interface for drafting, reviewing, and approving posts. To do this, add the following line to your Netlify CMS config.yml:</p>\n<h3>Media and Public Folders</h3>\n<p>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:</p>\n<p>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 <a href=\"https://www.netlifycms.org/docs/add-to-your-site/#app-file-structure\">App File Structure</a>, and put your media folder in the same location where you put the admin folder.</p>\n<p>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:</p>\n<p>The configuration above adds a new setting, public<em>folder. While media</em>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 /.</p>\n<p><em>If public</em>folder is not set, Netlify CMS defaults to the same value as media<em>folder, adding an opening / if one is not included.</em></p>\n<h3>Collections</h3>\n<p>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.</p>\n<p>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:</p>\n<p>Given this example, our collections settings would look like this in your NetlifyCMS config.yml file:</p>\n<p>Let's break that down:</p>\n<ul>\n<li>label: Field label in the editor UI.</li>\n<li>name: Field name in the document front matter.</li>\n<li>widget: Determines UI style and value data type (details below).</li>\n<li>default (optional): Sets a default value for the field.</li>\n</ul>\n<p>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 <a href=\"https://www.netlifycms.org/docs/widgets\">Widgets doc</a>.</p>\n<p>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 <a href=\"https://www.netlifycms.org/docs/configuration-options/#collections\">Collections reference doc</a> for more configuration options.</p>\n<h3>Filter</h3>\n<p>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.</p>\n<h2>Authentication</h2>\n<p>Now that you have your Netlify CMS files in place and configured, all that's left is to enable authentication. We're using the <a href=\"https://www.netlify.com/\">Netlify</a> platform here because it's one of the quickest ways to get started, but you can learn about other authentication options in the <a href=\"https://www.netlifycms.org/docs/backends-overview\">Backends</a> doc.</p>\n<h3>Setup on Netlify</h3>\n<p>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 <a href=\"https://www.netlify.com/blog/2016/10/27/a-step-by-step-guide-deploying-a-static-site-or-single-page-app/\">Step-by-Step Guide</a> for this, along with detailed guides for many popular static site generators, including <a href=\"https://www.netlify.com/blog/2015/10/28/a-step-by-step-guide-jekyll-3.0-on-netlify/\">Jekyll</a>, <a href=\"https://www.netlify.com/blog/2016/09/21/a-step-by-step-guide-victor-hugo-on-netlify/\">Hugo</a>, <a href=\"https://www.netlify.com/blog/2015/10/26/a-step-by-step-guide-hexo-on-netlify/\">Hexo</a>, <a href=\"https://www.netlify.com/blog/2015/10/01/a-step-by-step-guide-middleman-on-netlify/\">Middleman</a>, <a href=\"https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify/\">Gatsby</a>, and more.</p>\n<h3>Enable Identity and Git Gateway</h3>\n<p>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:</p>\n<ol>\n<li>Go to <strong>Settings > Identity</strong>, and select <strong>Enable Identity service</strong>.</li>\n<li>Under <strong>Registration preferences</strong>, select <strong>Open</strong> or <strong>Invite only</strong>. 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.</li>\n<li>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 <strong>External providers</strong>.</li>\n<li>Scroll down to <strong>Services > Git Gateway</strong>, and click <strong>Enable Git Gateway</strong>. This authenticates with your Git host and generates an API access token. In this case, we're leaving the <strong>Roles</strong> field blank, which means any logged in user may access the CMS. For information on changing this, check the <a href=\"https://www.netlify.com/docs/identity/\">Netlify Identity documentation</a>.</li>\n</ol>\n<h3>Add the Netlify Identity Widget</h3>\n<p>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:</p>\n<p>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 <a href=\"https://www.netlify.com/docs/inject-analytics-snippets/\">Script Injection</a> feature.</p>\n<p>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:</p>\n<p>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 <a href=\"https://babeljs.io/\">Babel</a>.</p>\n<h2>Accessing the CMS</h2>\n<p>Your site CMS is now fully configured and ready for login!</p>\n<p>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 <strong>Identity</strong> tab from your site dashboard, and then select the <strong>Invite users</strong> button. Invited users receive an email invitation with a confirmation link. Clicking the link will take you to your site with a login prompt.</p>\n<p>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/.</p>\n<p><strong>Note:</strong> 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.</p>\n<p>Examples</p>\n<p>Do\nyou have a great, open source example? Submit a pull request to this page!</p>\n<p>Example\nTools\nType\nSource\nMore info</p>\n<p><a href=\"https://github.com/robertcoopercode/gatsby-netlify-cms\">Gatsby & Netlify\nCMS Meetup Group Template</a>\nGatsby\ndemo\n<a href=\"https://github.com/robertcoopercode/gatsby-netlify-cms\">robertcoopercode/gatsby-netlify-cms</a>\n<a href=\"https://blog.logrocket.com/gatsby-netlify-cms-a-perfect-pairing-d50d59d16f67\">blog\npost</a></p>\n<p><a href=\"https://briandouglas.me/\">This\nDeveloping Journey</a>\nmiddleman\nblog\n<a href=\"https://github.com/bdougie/blog\">bdougie/blog</a>\n<a href=\"https://www.netlify.com/blog/2017/04/20/creating-a-blog-with-middleman-and-netlify-cms/\">blog\npost</a></p>\n<p><a href=\"https://jamstack-cms.netlify.com/\">Jamstack Recipes</a>\nHugo, Azure\ndemo\n<a href=\"https://github.com/hlaueriksson/jamstack-cms\">hlaueriksson/jamstack-cms</a>\n<a href=\"http://conductofcode.io/post/managing-content-for-a-jamstack-site-with-netlify-cms/\">blog\npost</a></p>\n<p><a href=\"https://bael-theme.jake101.com/\">Bael</a>\nVue, Nuxt\nblog\n<a href=\"https://github.com/jake-101/bael-template\">jake-101/bael-template</a>\n<a href=\"https://bael-theme.jake101.com/blog/2018-06-19-top-10-reasons-why\">blog\npost</a></p>\n<p><a href=\"https://www.forestgarden.wales/\">Forest\nGarden Wales</a>\nHugo\nblog\n<a href=\"https://github.com/forestgardenwales/forestgarden.wales\">forestgardenwales/forestgarden.wales</a>\n<a href=\"https://www.forestgarden.wales/blog/now-using-netlify-cms/\">blog\npost</a></p>\n<p><a href=\"https://jekyll-netlifycms.netlify.com/\">Jekyll Demo</a>\nJekyll, Gulp\ndemo\n<a href=\"https://github.com/NickStees/jekyll-cms\">NickStees/jekyll-cms</a>\n<a href=\"https://github.com/NickStees/jekyll-cms\">read me</a></p>\n<p><a href=\"https://alembic-kit-demo.netlify.com/\">Jekyll feat Alembic\nTheme Demo</a>\nJekyll\ndemo\n<a href=\"https://github.com/daviddarnes/alembic-netlifycms-kit\">DavidDarnes/alembic-netlifycms-kit</a>\n<a href=\"https://github.com/daviddarnes/alembic-netlifycms-kit#starter-kit-for-alembic-with-netlify-cms\">read\nme</a></p>\n<p><a href=\"https://eleventy-netlify-boilerplate.netlify.com/\">Eleventy Starter\nProject</a>\nEleventy\ndemo\n<a href=\"https://github.com/danurbanowicz/eleventy-netlify-boilerplate\">danurbanowicz/eleventy-netlify-boilerplate</a>\n<a href=\"https://github.com/danurbanowicz/eleventy-netlify-boilerplate\">read\nme</a></p>\n<p><a href=\"https://yellowcake.netlify.com/\">YellowCake\n- Complete website with blog</a>\nGatsby, Netlify-CMS, Uploadcare\ndemo\n<a href=\"https://github.com/thriveweb/yellowcake/\">thriveweb/yellowcake</a>\n<a href=\"https://thriveweb.com.au/the-lab/yellowcake-gatsby-react-js-starter-project/\">blog\npost</a></p>\n<p><a href=\"https://github.com/renestalder/nuxt-netlify-cms-starter-template\">Vue.js\n- Nuxt.js Starter Project</a>\nVue, Nuxt\ndemo\n<a href=\"https://github.com/renestalder/nuxt-netlify-cms-starter-template\">renestalder/nuxt-netlify-cms-starter-template</a>\n<a href=\"https://github.com/renestalder/nuxt-netlify-cms-starter-template\">read\nme</a></p>\n<p><a href=\"https://hexocms.imst.xyz/\">Hexo\nDemo</a>\nHexo\ndemo\n<a href=\"https://github.com/DemoMacro/Hexo-NetlifyCMS\">DemoMacro/Hexo-NetlifyCMS</a>\n<a href=\"https://github.com/DemoMacro/Hexo-NetlifyCMS\">read me</a></p>\n<p><a href=\"https://gitbook.imst.xyz/\">Gitbook\nDemo</a>\nGitbook\ndemo\n<a href=\"https://github.com/DemoMacro/Gitbook-NetlifyCMS\">DemoMacro/Gitbook-NetlifyCMS</a>\n<a href=\"https://github.com/DemoMacro/Gitbook-NetlifyCMS\">read me</a></p>\n<p><a href=\"https://vuepress.imst.xyz/\">VuePress\nDemo</a>\nVuePress\ndemo\n<a href=\"https://github.com/DemoMacro/VuePress-NetlifyCMS\">DemoMacro/VuePress-NetlifyCMS</a>\n<a href=\"https://github.com/DemoMacro/VuePress-NetlifyCMS\">read\nme</a></p>\n<p><a href=\"https://jigsaw-blog-netlify-netlifycms-template.netlify.com/\">Jigsaw\nBlog Starter Template Demo</a>\nJigsaw\ndemo\n<a href=\"https://github.com/erickpatrick/jigsaw-blog-netlify-netlifycms-template\">erickpatrick/jigsaw-blog-netlify-netlifycms-template</a>\n<a href=\"https://www.erickpatrick.net/blog/augmenting-tightenco-jigsaw-with-netlifycms/\">blog\npost</a></p>\n<p><a href=\"https://nuxt-netlifycms-boilerplate.netlify.com/\">Nuxt &\nNetlifyCMS Boilerplate</a>\nVue, Nuxt\ndemo\n<a href=\"https://github.com/tylermercer/nuxt-netlifycms-boilerplate\">tylermercer/nuxt-netlifycms-boilerplate</a>\n<a href=\"https://github.com/tylermercer/nuxt-netlifycms-boilerplate\">read\nme</a></p>\n<p><a href=\"https://netlifycms-nextjs.netlify.com/\">Next.js demo</a>\nNext.js\nblog\n<a href=\"https://github.com/masives/netlifycms-nextjs\">masives/netlifycms-nextjs</a>\n<a href=\"https://github.com/masives/netlifycms-nextjs\">read me</a></p>\n<p><a href=\"https://delog-w3layouts.netlify.com/\">Delog - Jamstack\nBlog with Netlify CMS</a>\nGatsby, Netlify-CMS\ndemo\n<a href=\"https://github.com/W3Layouts/gatsby-starter-delog\">W3Layouts/gatsby-starter-delog</a>\n<a href=\"https://w3layouts.com/articles/delog-gatsby-starter-netlify-cms/\">blog\npost</a></p>\n<p><a href=\"https://netlifycms-gridsome.suits.at/\">Netlify CMS template\nfor Gridsome</a>\nGridsome, Vue\ndemo\n<a href=\"https://github.com/suits-at/netlifycms-gridsome\">suits-at/netlifycms-gridsome</a>\n<a href=\"https://github.com/suits-at/netlifycms-gridsome\">read me</a></p>\n<p><a href=\"https://nextjs-netlify-blog-template.netlify.app/\">Next.js blogging\ntemplate for Netlify</a>\nNext.js, Netlify\nblog\n<a href=\"https://github.com/wutali/nextjs-netlify-blog-template\">wutali/nextjs-netlify-blog-template</a>\n<a href=\"https://github.com/wutali/nextjs-netlify-blog-template\">read\nme</a></p>\n<p><a href=\"https://github.com/pulumi/examples/tree/master/aws-ts-netlify-cms-and-oauth\">Netlify\nCMS and OAuth server on AWS</a>\nNetlify, Pulumi, AWS\nblog\n<a href=\"https://github.com/pulumi/examples/tree/master/aws-ts-netlify-cms-and-oauth\">pulumi/examples/aws-ts-netlify-cms-and-oauth</a>\n<a href=\"https://www.pulumi.com/blog/deploying-the-infrastructure-of-oauth-server-for-cms-app/\">blog\npost</a></p>\n<p><a href=\"https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/eleventy-starter-boilerplate-presentation/\">Eleventy\nStarter Boilerplate</a>\nEleventy, Netlify\ndemo\n<a href=\"https://github.com/ixartz/Eleventy-Starter-Boilerplate\">ixartz/Eleventy-Starter-Boilerplate</a>\n<a href=\"https://github.com/ixartz/Eleventy-Starter-Boilerplate\">read\nme</a></p>\n<p><a href=\"https://ntn-boilerplate.netlify.app/\">Nuxt, Tailwind &\nNetlifyCMS Boilerplate</a>\nVue, Nuxt\ndemo\n<a href=\"https://github.com/Knogobert/ntn-boilerplate\">Knogobert/ntn-boilerplate</a>\n<a href=\"https://github.com/Knogobert/ntn-boilerplate#readme\">read\nme</a></p>\n<p><a href=\"https://kind-mestorf-5a2bc0.netlify.com/\">Gatsby & Netlify\nCMS Personal Portfolio</a>\nGatsby\nportfolio\n<a href=\"https://github.com/EarlGeorge/React-Gatsby\">EarlGeorge/React-Gatsby</a>\n<a href=\"https://github.com/EarlGeorge/React-Gatsby/blob/master/README.md\">read\nme</a></p>\n<h1>Gatsby\n\n</h1>\n<p>This guide will help you get started using Netlify CMS and Gatsby.</p>\n<p>To get up and running with Gatsby, you'll need to have <a href=\"https://nodejs.org/\">Node.js</a> installed on your computer. <em>Note: Gatsby's minimum supported Node.js version is Node 8.</em></p>\n<h2>Create a new Gatsby site</h2>\n<p>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:</p>\n<h2>Get to know Gatsby</h2>\n<p>In your favorite code editor, open up the code generated for your \"Gatsby Starter Blog\" site, and take a look at the content directory.</p>\n<p>You will see that there are multiple Markdown files that represent blog posts. Open one .md file and you will see something like this:</p>\n<p>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.</p>\n<h2>Add Netlify CMS to your site</h2>\n<p>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:</p>\n<h3>Configuration</h3>\n<p>For the purpose of this guide we will deploy to Netlify from a GitHub repository which requires the minimum configuration.</p>\n<p>Create a config.yml file in the directory structure you see below:</p>\n<p>In your config.yml file paste the following configuration:</p>\n<p><strong>Note:</strong> 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.</p>\n<p>Finally, add the plugin to your gatsby-config.js.</p>\n<h3>Push to GitHub</h3>\n<p>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:</p>\n<h3>Add your repo to Netlify</h3>\n<p>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.</p>\n<h3>Enable Identity and Git Gateway</h3>\n<p>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:</p>\n<ol>\n<li>Go to <strong>Settings > Identity</strong>, and select <strong>Enable Identity service</strong>.</li>\n<li>Under <strong>Registration preferences</strong>, select <strong>Open</strong> or <strong>Invite only</strong>. 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.</li>\n<li>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 <strong>External providers</strong>.</li>\n<li>Scroll down to <strong>Services > Git Gateway</strong>, and click <strong>Enable Git Gateway</strong>. This authenticates with your Git host and generates an API access token. In this case, we're leaving the <strong>Roles</strong> field blank, which means any logged in user may access the CMS. For information on changing this, check the <a href=\"https://www.netlify.com/docs/identity/\">Netlify Identity documentation</a>.</li>\n</ol>\n<h2>Start publishing</h2>\n<p>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\".</p>\n<p>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.</p>\n<h3>Cleanup</h3>\n<p>It is now safe to remove the default Gatsby blog posts.</p>" | |
| }, | |
| { | |
| "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": "<h1>Add to Your Site | Netlify CMS</h1>\n<blockquote>\n<p>Open source content management for your Git workflow</p>\n</blockquote>\n<p>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 <a href=\"https://github.com/\">GitHub</a>, <a href=\"https://about.gitlab.com/\">GitLab</a>, or <a href=\"https://bitbucket.org/\">Bitbucket</a>. You can also create your own custom backend.</p>\n<p>This tutorial guides you through the steps for adding Netlify CMS to a site that's built with a common <a href=\"https://www.staticgen.com/\">static site generator</a>, like Jekyll, Hugo, Hexo, or Gatsby. Alternatively, you can <a href=\"chrome-extension://cjedbglnccaioiolemnfhjncicchinao/start-with-a-template\">start from a template</a> or dive right into <a href=\"chrome-extension://cjedbglnccaioiolemnfhjncicchinao/configuration-options\">configuration options</a>.</p>\n<h2><a href=\"#app-file-structure\"></a>App File Structure</h2>\n<p>A static <code>admin</code> 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:</p>\n<table>\n<thead>\n<tr>\n<th>These generators</th>\n<th>store static files in</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Jekyll, GitBook</td>\n<td><code>/</code> (project root)</td>\n</tr>\n<tr>\n<td>Hugo, Gatsby, Nuxt, Gridsome, Zola, Sapper</td>\n<td><code>/static</code></td>\n</tr>\n<tr>\n<td>Next</td>\n<td><code>/public</code></td>\n</tr>\n<tr>\n<td>Hexo, Middleman, Jigsaw</td>\n<td><code>/source</code></td>\n</tr>\n<tr>\n<td>Spike</td>\n<td><code>/views</code></td>\n</tr>\n<tr>\n<td>Wyam</td>\n<td><code>/input</code></td>\n</tr>\n<tr>\n<td>Pelican</td>\n<td><code>/content</code></td>\n</tr>\n<tr>\n<td>VuePress</td>\n<td><code>/.vuepress/public</code></td>\n</tr>\n<tr>\n<td>Elmstatic</td>\n<td><code>/_site</code></td>\n</tr>\n<tr>\n<td>11ty</td>\n<td><code>/_site</code></td>\n</tr>\n<tr>\n<td>preact-cli</td>\n<td><code>/src/static</code></td>\n</tr>\n</tbody>\n</table>\n<p>If your generator isn't listed here, you can check its documentation, or as a shortcut, look in your project for a <code>css</code> or <code>images</code> folder. The contents of folders like that are usually processed as static files, so it's likely you can store your <code>admin</code> folder next to those. (When you've found the location, feel free to add it to these docs by <a href=\"https://github.com/netlify/netlify-cms/blob/master/CONTRIBUTING.md#pull-requests\">filing a pull request</a>!)</p>\n<p>Inside the <code>admin</code> folder, you'll create two files:</p>\n<pre><code>admin\n ├ index.html\n └ config.yml\n</code></pre>\n<p>The first file, <code>admin/index.html</code>, is the entry point for the Netlify CMS admin interface. This means that users navigate to <code>yoursite.com/admin/</code> 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:</p>\n<pre><code><!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</code></pre>\n<p>In the code above the <code>script</code> is loaded from the <code>unpkg</code> CDN. Should there be any issue, <code>jsDelivr</code> can be used as an alternative source. Simply set the <code>src</code> to <code>https://cdn.jsdelivr.net/npm/netlify-cms@^2.0.0/dist/netlify-cms.js</code></p>\n<p>The second file, <code>admin/config.yml</code>, is the heart of your Netlify CMS installation, and a bit more complex. The <a href=\"#configuration\">Configuration</a> section covers the details.</p>\n<h3><a href=\"#installing-with-npm\"></a>Installing with npm</h3>\n<p>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:</p>\n<pre><code>npm install netlify-cms-app --save\n</code></pre>\n<p>Then import it (assuming your project has tooling for imports):</p>\n<pre><code>import CMS from 'netlify-cms-app'\n\nCMS.init()\n\nCMS.registerPreviewTemplate('my-template', MyTemplate)\n</code></pre>\n<h2><a href=\"#configuration\"></a>Configuration</h2>\n<p>Configuration is different for every site, so we'll break it down into parts. Add all the code snippets in this section to your <code>admin/config.yml</code> file.</p>\n<h3><a href=\"#backend\"></a>Backend</h3>\n<p>We're using <a href=\"https://www.netlify.com/\">Netlify</a> for our hosting and authentication in this tutorial, so backend configuration is fairly straightforward.</p>\n<p>For GitHub and GitLab repositories, you can start your Netlify CMS <code>config.yml</code> file with these lines:</p>\n<pre><code>backend:\n name: git-gateway\n branch: master\n</code></pre>\n<p><em>(For Bitbucket repositories, use the <a href=\"chrome-extension://cjedbglnccaioiolemnfhjncicchinao/docs/bitbucket-backend\">Bitbucket backend</a> instructions instead.)</em></p>\n<p>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 <a href=\"#authentication\">Authentication section</a> below.) If you leave out the <code>branch</code> declaration, it defaults to <code>master</code>.</p>\n<h3><a href=\"#editorial-workflow\"></a>Editorial Workflow</h3>\n<p><strong>Note:</strong> Editorial workflow works with GitHub repositories, and support for GitLab and Bitbucket is <a href=\"chrome-extension://cjedbglnccaioiolemnfhjncicchinao/docs/beta-features/#gitlab-and-bitbucket-editorial-workflow-support\">in beta</a>.</p>\n<p>By default, saving a post in the CMS interface pushes a commit directly to the publication branch specified in <code>backend</code>. However, you also have the option to enable the <a href=\"chrome-extension://cjedbglnccaioiolemnfhjncicchinao/configuration-options/#publish-mode\">Editorial Workflow</a>, which adds an interface for drafting, reviewing, and approving posts. To do this, add the following line to your Netlify CMS <code>config.yml</code>:</p>\n<pre><code>publish_mode: editorial_workflow\n</code></pre>\n<h3><a href=\"#media-and-public-folders\"></a>Media and Public Folders</h3>\n<p>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 <code>images</code> folder in your project, you could use its path, possibly creating an <code>uploads</code> sub-folder, for example:</p>\n<pre><code>media_folder: \"images/uploads\"\n</code></pre>\n<p>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 <a href=\"#app-file-structure\">App File Structure</a>, and put your media folder in the same location where you put the <code>admin</code> folder.</p>\n<p>Note that the<code>media_folder</code> 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:</p>\n<pre><code>media_folder: \"static/images/uploads\"\npublic_folder: \"/images/uploads\"\n</code></pre>\n<p>The configuration above adds a new setting, <code>public_folder</code>. While <code>media_folder</code> specifies where uploaded files are saved in the repo, <code>public_folder</code> indicates where they are found in the published site. Image <code>src</code> 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 <code>/</code>.</p>\n<p><em>If `public</em>folder<code>is not set, Netlify CMS defaults to the same value as</code>media<em>folder<code>, adding an opening</code>/` if one is not included.</em></p>\n<h3><a href=\"#collections\"></a>Collections</h3>\n<p>Collections define the structure for the different content types on your static site. Since every site is different, the <code>collections</code> settings differ greatly from one site to the next.</p>\n<p>Let's say your site has a blog, with the posts stored in <code>_posts/blog</code>, and files saved in a date-title format, like <code>1999-12-31-lets-party.md</code>. Each post begins with settings in yaml-formatted front matter, like so:</p>\n<pre><code>---\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</code></pre>\n<p>Given this example, our <code>collections</code> settings would look like this in your NetlifyCMS <code>config.yml</code> file:</p>\n<pre><code>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</code></pre>\n<p>Let's break that down:</p>\n<table><tbody><tr><td><code>name</code></td><td>Post type identifier, used in routes. Must be unique.</td></tr><tr><td><code>label</code></td><td>What the admin UI calls the post type.</td></tr><tr><td><code>folder</code></td><td>Where files of this type are stored, relative to the repo root.</td></tr><tr><td><code>create</code></td><td>Set to <code>true</code> to allow users to create new files in this collection.</td></tr><tr><td><code>slug</code></td><td>Template for filenames. <code>{{year}}</code>, <code>{{month}}</code>, and <code>{{day}}</code> pulls from the post's <code>date</code> field or save date. <code>{{slug}}</code> is a url-safe version of the post's <code>title</code>. Default is simply <code>{{slug}}</code>.</td></tr><tr><td><code>fields</code></td><td>Fields listed here are shown as fields in the content editor, then saved as front matter at the beginning of the document (except for <code>body</code>, which follows the front matter). Each field contains the following properties:<ul><li><code>label</code>: Field label in the editor UI.</li><li><code>name</code>: Field name in the document front matter.</li><li><code>widget</code>: Determines UI style and value data type (details below).</li><li><code>default</code> (optional): Sets a default value for the field.</li></ul></td></tr></tbody></table>\n<p>As described above, the <code>widget</code> 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 <code>name</code> specified for that field. A full listing of available widgets can be found in the <a href=\"chrome-extension://cjedbglnccaioiolemnfhjncicchinao/widgets\">Widgets doc</a>.</p>\n<p>Based on this example, you can go through the post types in your site and add the appropriate settings to your Netlify CMS <code>config.yml</code> file. Each post type should be listed as a separate node under the <code>collections</code> field. See the <a href=\"chrome-extension://cjedbglnccaioiolemnfhjncicchinao/configuration-options/#collections\">Collections reference doc</a> for more configuration options.</p>\n<h3><a href=\"#filter\"></a>Filter</h3>\n<p>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 <code>en</code> in the <code>language</code> field.</p>\n<pre><code>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</code></pre>\n<h2><a href=\"#authentication\"></a>Authentication</h2>\n<p>Now that you have your Netlify CMS files in place and configured, all that's left is to enable authentication. We're using the <a href=\"https://www.netlify.com/\">Netlify</a> platform here because it's one of the quickest ways to get started, but you can learn about other authentication options in the <a href=\"chrome-extension://cjedbglnccaioiolemnfhjncicchinao/docs/backends-overview\">Backends</a> doc.</p>\n<h3><a href=\"#setup-on-netlify\"></a>Setup on Netlify</h3>\n<p>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 <a href=\"https://www.netlify.com/blog/2016/10/27/a-step-by-step-guide-deploying-a-static-site-or-single-page-app/\">Step-by-Step Guide</a> for this, along with detailed guides for many popular static site generators, including <a href=\"https://www.netlify.com/blog/2015/10/28/a-step-by-step-guide-jekyll-3.0-on-netlify/\">Jekyll</a>, <a href=\"https://www.netlify.com/blog/2016/09/21/a-step-by-step-guide-victor-hugo-on-netlify/\">Hugo</a>, <a href=\"https://www.netlify.com/blog/2015/10/26/a-step-by-step-guide-hexo-on-netlify/\">Hexo</a>, <a href=\"https://www.netlify.com/blog/2015/10/01/a-step-by-step-guide-middleman-on-netlify/\">Middleman</a>, <a href=\"https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify/\">Gatsby</a>, and more.</p>\n<h3><a href=\"#enable-identity-and-git-gateway\"></a>Enable Identity and Git Gateway</h3>\n<p>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:</p>\n<ol>\n<li>Go to <strong>Settings > Identity</strong>, and select <strong>Enable Identity service</strong>.</li>\n<li>Under <strong>Registration preferences</strong>, select <strong>Open</strong> or <strong>Invite only</strong>. 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.</li>\n<li>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 <strong>External providers</strong>.</li>\n<li>Scroll down to <strong>Services > Git Gateway</strong>, and click <strong>Enable Git Gateway</strong>. This authenticates with your Git host and generates an API access token. In this case, we're leaving the <strong>Roles</strong> field blank, which means any logged in user may access the CMS. For information on changing this, check the <a href=\"https://www.netlify.com/docs/identity/\">Netlify Identity documentation</a>.</li>\n</ol>\n<h3><a href=\"#add-the-netlify-identity-widget\"></a>Add the Netlify Identity Widget</h3>\n<p>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:</p>\n<pre><code><script src=\"https://identity.netlify.com/v1/netlify-identity-widget.js\"></script>\n</code></pre>\n<p>Add this to the <code><head></code> of your CMS index page at <code>/admin/index.html</code>, as well as the <code><head></code> 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 <a href=\"https://www.netlify.com/docs/inject-analytics-snippets/\">Script Injection</a> feature.</p>\n<p>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 <code>/admin/</code> path. To do this, add the following script before the closing <code>body</code> tag of your site's main index page:</p>\n<pre><code><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</code></pre>\n<p>Note: This example script requires modern JavaScript and does not work on IE11. For legacy browser support, use function expressions (<code>function () {}</code>) in place of the arrow functions (<code>() => {}</code>), or use a transpiler such as <a href=\"https://babeljs.io/\">Babel</a>.</p>\n<h2><a href=\"#accessing-the-cms\"></a>Accessing the CMS</h2>\n<p>Your site CMS is now fully configured and ready for login!</p>\n<p>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 <strong>Identity</strong> tab from your site dashboard, and then select the <strong>Invite users</strong> button. Invited users receive an email invitation with a confirmation link. Clicking the link will take you to your site with a login prompt.</p>\n<p>If you left your site registration open, or for return visits after confirming an email invitation, access your site's CMS at <code>yoursite.com/admin/</code>.</p>\n<p><strong>Note:</strong> 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.</p>\n<p>Happy posting!</p>\n<p><a href=\"https://www.netlifycms.org/docs/add-to-your-site/\">Source</a></p>" | |
| }, | |
| { | |
| "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": "<h1>Python Study Guide for a JavaScript Programmer\n</h1>\n<p><img src=\"https://miro.medium.com/max/1970/1*3V9VOfPk_hrFdbEAd3j-QQ.png\"><img src=\"https://miro.medium.com/max/52/0*eC4EvZcv6hhH88jX.png?q=20\"><img src=\"https://miro.medium.com/max/647/0*eC4EvZcv6hhH88jX.png\"><img src=\"https://miro.medium.com/max/60/0*Ez_1PZ93N4FfvkRr.png?q=20\"><img src=\"https://miro.medium.com/max/608/0*Ez_1PZ93N4FfvkRr.png\"><img src=\"https://miro.medium.com/max/60/0*eE3E5H0AoqkhqK1z.png?q=20\"><img src=\"https://miro.medium.com/max/1648/0*eE3E5H0AoqkhqK1z.png\"><img src=\"https://miro.medium.com/max/60/0*Q0CMqFd4PozLDFPB.png?q=20\"><img src=\"https://miro.medium.com/max/1638/0*Q0CMqFd4PozLDFPB.png\"><img src=\"https://miro.medium.com/max/3216/0*HQpndNhm1Z_xSoHb.png\"><img src=\"https://miro.medium.com/max/60/0*qHzGRLTOMTf30miT.png?q=20\"><img src=\"https://miro.medium.com/max/1614/0*qHzGRLTOMTf30miT.png\">[</p>\n<p>](<a href=\"https://github.com/bgoonz\">https://github.com/bgoonz</a>)</p>\n<iframe src=\"https://py-prac-42.netlify.app/\" width=\"100%\" height=\"1200px\"><iframe>\n<h1>Applications of Tutorial & Cheat Sheet Respectivley (At Bottom Of Tutorial):</h1>\n<h1>Basics</h1>\n<ul>\n<li><strong>PEP8</strong> : Python Enhancement Proposals, style-guide for Python.</li>\n<li>print is the equivalent of console.log.</li>\n</ul>\n<blockquote>\n<p>'print() == console.log()'</p>\n</blockquote>\n<h1># is used to make comments in your code.</h1>\n<blockquote>\n<p><em>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\"</em></p>\n</blockquote>\n<h1>Numbers</h1>\n<ul>\n<li>Python has three types of numbers:</li>\n<li><strong>Integer</strong></li>\n<li><strong>Positive and Negative Counting Numbers.</strong></li>\n</ul>\n<p>No Decimal Point</p>\n<blockquote>\n<p>Created by a literal non-decimal point number … <strong>or</strong> … with the <em>int()</em> constructor.</p>\n</blockquote>\n<p><strong>3. Complex Numbers</strong></p>\n<blockquote>\n<p>Consist of a real part and imaginary part.</p>\n</blockquote>\n<h2>Boolean is a subtype of integer in Python.🤷♂️</h2>\n<blockquote>\n<p>If you came from a background in JavaScript and learned to accept the premise(s) of the following meme…</p>\n</blockquote>\n<blockquote>\n<p>Than I am sure you will find the means to suspend your disbelief.</p>\n</blockquote>\n<h1>KEEP IN MIND:</h1>\n<blockquote>\n<p><strong>The i is switched to a j in programming.</strong></p>\n</blockquote>\n<p>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 *<em>when there's another 25 letters that don't get used for every loop under the sun. My most medium apologies to Leonhard Euler.</em></p>\n<ul>\n<li><strong>Type Casting</strong> : The process of converting one number to another.</li>\n</ul>\n<p><strong>The arithmetic operators are the same between JS and Python, with two additions:</strong></p>\n<ul>\n<li><em>\"**\" : Double asterisk for exponent.</em></li>\n<li><em>\"//\" : Integer Division.</em></li>\n<li><strong>There are no spaces between math operations in Python.</strong></li>\n<li><strong>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.</strong></li>\n<li><strong>There are no ++ and -- in Python, the only shorthand operators are:</strong></li>\n</ul>\n<h1>Strings</h1>\n<ul>\n<li>Python uses both single and double quotes.</li>\n<li>You can escape strings like so 'Jodi asked, \"What\\'s up, Sam?\"'</li>\n<li>Multiline strings use triple quotes.</li>\n</ul>\n<p><strong>Use the len() function to get the length of a string.</strong></p>\n<h1><strong>Python uses zero-based indexing</strong></h1>\n<h2>Python allows negative indexing (thank god!)</h2>\n<ul>\n<li>Python let's you use ranges</li>\n</ul>\n<p>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 <strong>by textbook definition</strong>, 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.)*</p>\n<ul>\n<li>The end range is exclusive just like slice in JS.</li>\n</ul>\n<!---->\n<ul>\n<li>The index string function is the equiv. of indexOf() in JS</li>\n</ul>\n<!---->\n<ul>\n<li>The count function finds out how many times a substring appears in a string… pretty nifty for a hard coded feature of the language.</li>\n</ul>\n<!---->\n<ul>\n<li><strong>You can use + to concatenate strings, just like in JS.</strong></li>\n<li><strong>You can also use \"*\" to repeat strings or multiply strings.</strong></li>\n<li><strong>Use the format() function to use placeholders in a string to input values later on.</strong></li>\n</ul>\n<!---->\n<ul>\n<li>*Shorthand way to use format function is:\n*print(f'Your name is {first<em>name} {last</em>name}')</li>\n</ul>\n<h2>Some useful string methods.</h2>\n<ul>\n<li><strong>Note that in JS join is used on an Array, in Python it is used on String.</strong></li>\n</ul>\n<!---->\n<ul>\n<li>There are also many handy testing methods.</li>\n</ul>\n<h1>Variables and Expressions</h1>\n<ul>\n<li><strong>Duck-Typing</strong> : Programming Style which avoids checking an object's type to figure out what it can do.</li>\n<li>Duck Typing is the fundamental approach of Python.</li>\n<li>Assignment of a value automatically declares a variable.</li>\n</ul>\n<!---->\n<ul>\n<li><strong><em>You can chain variable assignments to give multiple var names the same value.</em></strong></li>\n</ul>\n<h2>Use with caution as this is highly unreadable</h2>\n<h2>The value and type of a variable can be re-assigned at any time.</h2>\n<ul>\n<li>*NaN does not exist in Python, but you can 'create' it like so:\n<strong>print(float(\"nan\"))*</strong></li>\n<li><em>Python replaces null with none.</em></li>\n<li><strong>*none is an object</strong> and can be directly assigned to a variable.*</li>\n</ul>\n<blockquote>\n<p>Using none is a convenient way to check to see why an action may not be operating correctly in your program.</p>\n</blockquote>\n<h1>Boolean Data Type</h1>\n<ul>\n<li>One of the biggest benefits of Python is that it reads more like English than JS does.</li>\n</ul>\n<!---->\n<ul>\n<li>By default, Python considers an object to be true UNLESS it is one of the following:</li>\n<li>Constant None or False</li>\n<li>Zero of any numeric type.</li>\n<li>Empty Sequence or Collection.</li>\n<li>True and False must be capitalized</li>\n</ul>\n<h1>Comparison Operators</h1>\n<ul>\n<li>Python uses all the same equality operators as JS.</li>\n<li>In Python, equality operators are processed from left to right.</li>\n<li>Logical operators are processed in this order:</li>\n<li><strong>NOT</strong></li>\n<li><strong>AND</strong></li>\n<li><strong>OR</strong></li>\n</ul>\n<blockquote>\n<p>Just like in JS, you can use parentheses to change the inherent order of operations.</p>\n<p><strong>Short Circuit</strong> : Stopping a program when a true or false has been reached.</p>\n</blockquote>\n<h1>Identity vs Equality</h1>\n<ul>\n<li>In the Python community it is better to use is and is not over == or !=</li>\n</ul>\n<h1>If Statements</h1>\n<blockquote>\n<p>Remember the order of elif statements matter.</p>\n</blockquote>\n<h1>While Statements</h1>\n<ul>\n<li>Break statement also exists in Python.</li>\n</ul>\n<!---->\n<ul>\n<li>As are continue statements</li>\n</ul>\n<h1>Try/Except Statements</h1>\n<ul>\n<li>Python equivalent to try/catch</li>\n</ul>\n<!---->\n<ul>\n<li>You can name an error to give the output more specificity.</li>\n</ul>\n<!---->\n<ul>\n<li>You can also use the pass commmand to by pass a certain error.</li>\n</ul>\n<!---->\n<ul>\n<li>The pass method won't allow you to bypass every single error so you can chain an exception series like so:</li>\n</ul>\n<!---->\n<ul>\n<li>You can use an else statement to end a chain of except statements.</li>\n</ul>\n<!---->\n<ul>\n<li>finally is used at the end to clean up all actions under any circumstance.</li>\n</ul>\n<!---->\n<ul>\n<li>Using duck typing to check to see if some value is able to use a certain method.</li>\n</ul>\n<h1>Pass</h1>\n<ul>\n<li>Pass Keyword is required to write the JS equivalent of :</li>\n</ul>\n<h1>Functions</h1>\n<ul>\n<li><strong>Function definition includes:</strong></li>\n<li><strong>The def keyword</strong></li>\n<li><strong>The name of the function</strong></li>\n<li><strong>A list of parameters enclosed in parentheses.</strong></li>\n<li><strong>A colon at the end of the line.</strong></li>\n<li><strong>One tab indentation for the code to run.</strong></li>\n<li><strong>You can use default parameters just like in JS</strong></li>\n</ul>\n<h2><strong>Keep in mind, default parameters must always come after regular parameters.</strong></h2>\n<ul>\n<li><em>You can specify arguments by name without destructuring in Python.</em></li>\n</ul>\n<!---->\n<ul>\n<li>The lambda keyword is used to create anonymous functions and are supposed to be one-liners.</li>\n</ul>\n<p>toUpper = lambda s: s.upper()</p>\n<h1>Notes</h1>\n<h2>Formatted Strings</h2>\n<blockquote>\n<p>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.</p>\n</blockquote>\n<h1>Comma Thousands Separator</h1>\n<h1>Date and Time</h1>\n<h1>Percentage</h1>\n<h1>Data Tables</h1>\n<p><strong>Python can be used to display html, css, and JS.</strong>\n<em>It is common to use Python as an API (Application Programming Interface)</em></p>\n<h2>Structured Data</h2>\n<h2>Sequence : The most basic data structure in Python where the index determines the order.</h2>\n<blockquote>\n<p>List\nTuple\nRange\nCollections : Unordered data structures, hashable values.</p>\n</blockquote>\n<h2>Dictionaries\nSets</h2>\n<h2>Iterable : Generic name for a sequence or collection; any object that can be iterated through.</h2>\n<h2>Can be mutable or immutable.\nBuilt In Data Types</h2>\n<h1>Lists are the python equivalent of arrays.</h1>\n<h1>You can instantiate</h1>\n<h2>Test if a value is in a list.</h2>\n<h2>Instantiated with parentheses</h2>\n<h2>Sometimes instantiated without</h2>\n<h2>Tuple() built in can be used to convert other data into a tuple</h2>\n<h2>Ranges : A list of numbers which can't be changed; often used with for loops.</h2>\n<p><strong>Declared using one to three parameters</strong>.</p>\n<blockquote>\n<p>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.</p>\n</blockquote>\n<h2>Dictionaries : Mappable collection where a hashable value is used as a key to ref. an object stored in the dictionary.</h2>\n<h2>Mutable.</h2>\n<p><strong><em>Declared with curly braces of the built in dict()</em></strong></p>\n<blockquote>\n<p><em>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.</em></p>\n</blockquote>\n<p><strong>Use the in operator to see if a key exists in a dictionary.</strong></p>\n<p>S<strong>ets : Unordered collection of distinct objects; objects that need to be hashable.</strong></p>\n<blockquote>\n<p><em>Always be unique, duplicate items are auto dropped from the set.</em></p>\n</blockquote>\n<h2>Common Uses:</h2>\n<blockquote>\n<p>Removing Duplicates\nMembership Testing\nMathematical Operators: Intersection, Union, Difference, Symmetric Difference.</p>\n</blockquote>\n<p><strong>Standard Set is mutable, Python has a immutable version called frozenset.\nSets created by putting comma seperated values inside braces:</strong></p>\n<h2>Also can use set constructor to automatically put it into a set.</h2>\n<p><strong>filter(function, iterable) : creates new iterable of the same type which includes each item for which the function returns true.</strong></p>\n<p><strong>map(function, iterable) : creates new iterable of the same type which includes the result of calling the function on every item of the iterable.</strong></p>\n<p><strong>sorted(iterable, key=None, reverse=False) : creates a new sorted list from the items in the iterable.</strong></p>\n<p><strong>Output is always a list</strong></p>\n<p><strong>key: opt function which coverts and item to a value to be compared.</strong></p>\n<p><strong>reverse: optional boolean.</strong></p>\n<p><strong>enumerate(iterable, start=0) : starts with a sequence and converts it to a series of tuples</strong></p>\n<h2>(0, 'First'), (1, 'Second'), (2, 'Third'), (3, 'Fourth')</h2>\n<h2>(1, 'First'), (2, 'Second'), (3, 'Third'), (4, 'Fourth')</h2>\n<blockquote>\n<p>zip(*iterables) : creates a zip object filled with tuples that combine 1 to 1 the items in each provided iterable.\nFunctions that analyze iterable</p>\n</blockquote>\n<p><strong>len(iterable) : returns the count of the number of items.</strong></p>\n<p><strong>max(*args, key=None) : returns the largest of two or more arguments.</strong></p>\n<p><strong>max(iterable, key=None) : returns the largest item in the iterable.</strong></p>\n<p><em>key optional function which converts an item to a value to be compared.\nmin works the same way as max</em></p>\n<p><strong>sum(iterable) : used with a list of numbers to generate the total.</strong></p>\n<p><em>There is a faster way to concatenate an array of strings into one string, so do not use sum for that.</em></p>\n<p><strong>any(iterable) : returns True if any items in the iterable are true.</strong></p>\n<p><strong>all(iterable) : returns True is all items in the iterable are true.</strong></p>\n<h1>Working with dictionaries</h1>\n<p><strong>dir(dictionary) : returns the list of keys in the dictionary.\nWorking with sets</strong></p>\n<p><strong>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.</strong></p>\n<h2>Intersection : The & operator ca be used to produce a new set of only the elements that appear in all sets.</h2>\n<p><strong>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.</strong></p>\n<h1><strong>For Statements\nIn python, there is only one for loop.</strong></h1>\n<p>Always Includes:</p>\n<blockquote>\n<p>1. The for keyword\n2. A variable name\n3. The 'in' keyword\n4. An iterable of some kid\n5. A colon\n6. On the next line, an indented block of code called the for clause.</p>\n</blockquote>\n<p><strong>You can use break and continue statements inside for loops as well.</strong></p>\n<p><strong>You can use the range function as the iterable for the for loop.</strong></p>\n<p><strong><em>Common technique is to use the len() on a pre-defined list with a for loop to iterate over the indices of the list.</em></strong></p>\n<p><strong>You can loop and destructure at the same time.</strong></p>\n<blockquote>\n<p>Prints 1, 2</p>\n<p>Prints 3, 4</p>\n<p>Prints 5, 6</p>\n</blockquote>\n<p><strong>You can use values() and keys() to loop over dictionaries.</strong></p>\n<p><em>Prints red</em></p>\n<p><em>Prints 42</em></p>\n<p><em>Prints color</em></p>\n<p><em>Prints age</em></p>\n<p><strong>For loops can also iterate over both keys and values.</strong></p>\n<p><strong>Getting tuples</strong></p>\n<p><em>Prints ('color', 'red')</em></p>\n<p><em>Prints ('age', 42)</em></p>\n<p><em>Destructuring to values</em></p>\n<p><em>Prints Key: age Value: 42</em></p>\n<p><em>Prints Key: color Value: red</em></p>\n<p><strong>Looping over string</strong></p>\n<p><strong>When you order arguments within a function or function call, the args need to occur in a particular order:</strong></p>\n<p><em>formal positional args.</em></p>\n<p>*args</p>\n<p><em>keyword args with default values</em></p>\n<p>**kwargs</p>\n<h1><strong>Importing in Python</strong></h1>\n<p><strong>Modules are similar to packages in Node.js</strong>\nCome in different types:</p>\n<p>Built-In,</p>\n<p>Third-Party,</p>\n<p>Custom.</p>\n<p><strong>All loaded using import statements.</strong></p>\n<h1><strong>Terms</strong></h1>\n<blockquote>\n<p>module : Python code in a separate file.\npackage : Path to a directory that contains modules.\n<a href=\"http://init.py/\"><strong>init.py</strong></a> : Default file for a package.\nsubmodule : Another file in a module's folder.\nfunction : Function in a module.</p>\n</blockquote>\n<p><strong>A module can be any file but it is usually created by placing a special file init.py into a folder. pic</strong></p>\n<p><em>Try to avoid importing with wildcards in Python.</em></p>\n<p><em>Use multiple lines for clarity when importing.</em></p>\n<h1>Watching Out for Python 2</h1>\n<p><strong>Python 3 removed <> and only uses !=</strong></p>\n<p><strong>format() was introduced with P3</strong></p>\n<p><strong>All strings in P3 are unicode and encoded.\nmd5 was removed.</strong></p>\n<p><strong>ConfigParser was renamed to configparser\nsets were killed in favor of set() class.</strong></p>\n<h2><strong>print was a statement in P2, but is a function in P3.</strong></h2>\n<h1>Topics revisited (in python syntax)</h1>\n<h1>Cheat Sheet:</h1>\n<h2>If you found this guide helpful feel free to checkout my github/gists where I host similar content:</h2>\n<p><a href=\"https://gist.github.com/bgoonz\">bgoonz's gists · GitHub</a></p>\n<p>Or Checkout my personal Resource Site:</p>\n<h1>Python Cheat Sheet:</h1>\n<h1>If you found this guide helpful feel free to checkout my GitHub/gists where I host similar content:</h1>" | |
| }, | |
| { | |
| "url": "/blog/python-resources/", | |
| "relativePath": "blog/python-resources.md", | |
| "relativeDir": "blog", | |
| "base": "python-resources.md", | |
| "name": "python-resources", | |
| "frontmatter": { | |
| "title": "Python Resources", | |
| "date": "2021-06-03", | |
| "image": "images/best-zebra.gif", | |
| "seo": { | |
| "title": "Python Practice", | |
| "description": "Commodo ante vis placerat interdum massa massa primis", | |
| "extra": [ | |
| { | |
| "name": "og:type", | |
| "value": "article", | |
| "keyName": "property" | |
| }, | |
| { | |
| "name": "og:title", | |
| "value": "Python Practice", | |
| "keyName": "property" | |
| }, | |
| { | |
| "name": "og:description", | |
| "value": "Commodo ante vis placerat interdum massa massa primis", | |
| "keyName": "property" | |
| }, | |
| { | |
| "name": "og:image", | |
| "value": "images/2.jpg", | |
| "keyName": "property", | |
| "relativeUrl": true | |
| }, | |
| { "name": "twitter:card", "value": "summary_large_image" }, | |
| { "name": "twitter:title", "value": "Python Practice" }, | |
| { | |
| "name": "twitter:description", | |
| "value": "Commodo ante vis placerat interdum massa massa primis" | |
| }, | |
| { | |
| "name": "twitter:image", | |
| "value": "images/2.jpg", | |
| "relativeUrl": true | |
| } | |
| ] | |
| }, | |
| "template": "post", | |
| "thumb_image": "images/superb-amaranth.png", | |
| "thumb_image_alt": "python logo" | |
| }, | |
| "html": "<h1>Beginners Guide To Python<a href=\"https://levelup.gitconnected.com/basic-web-development-environment-setup-9f36c3f15afe\"><strong>Basic Web Development Environment Setup</strong>\n<em>Windows Subsystem for Linux (WSL) and Ubuntu</em>levelup.gitconnected.com</a><img src=\"https://cdn-images-1.medium.com/max/600/1*59V2ZNbyJfsdGR2N20PM7w.png\"><img src=\"https://cdn-images-1.medium.com/max/800/0*oVIDxWdgJXoIt7CI.jpg\"><a href=\"https://trinket.io/python3/2b693977e7\"><strong>Put Python Anywhere on the Web</strong>\n<em>Python in the browser. No installation required.</em>trinket.io</a>\n\n</h1>\n<iframe src=\"https://py-prac-42.netlify.app/\" width=\"100%\" height=\"1200px\"><iframe>\n<p>My favorite language for maintainability is Python. It has simple, clean syntax, object encapsulation, good library support, and optional named parameters.</p>\n<ul>\n<li>Bram Cohen</li>\n</ul>\n<p>Article on basic web development setup… it is geared towards web but VSCode is an incredibly versitile editor and this stack really could suit just about anyone working in the field of computer science.</p>\n<h3>The Repository & Live Site Behind This Article:</h3>\n<h3>About Python(Taken From Tutorial Page Of Docs):</h3>\n<p><a href=\"https://docs.python.org/3/tutorial/appetite.html\">Python enables programs to be written compactly and readably. Programs written in Python are typically much shorter than equivalent C, C++, or Java programs, for several reasons:</a></p>\n<ul>\n<li>the high-level data types allow you to express complex operations in a single statement;</li>\n<li>statement grouping is done by indentation instead of beginning and ending brackets;</li>\n<li>no variable or argument declarations are necessary.</li>\n</ul>\n<h3>Installing Python:</h3>\n<h3>Windows</h3>\n<p>To determine if your Windows computer already has Python 3:</p>\n<ol>\n<li>Open a command prompt by entering command prompt in the Windows 10 search box and selecting the Command Prompt App in the Best match section of the results.</li>\n<li>Enter the following command and then select the Enter key:</li>\n<li>ConsoleCopy</li>\n</ol>\n<p>python --version</p>\n<ol>\n<li>Running python --version may not return a value, or may return an error message stating <em>'python' is not recognized as an internal or external command, operable program or batch file.</em> This indicates Python is not installed on your Windows system.</li>\n<li>If you see the word Python with a set of numbers separated by . characters, some version of Python is installed.</li>\n</ol>\n<h4>i.e.</h4>\n<blockquote>\n<p>Python 3.8.0</p>\n</blockquote>\n<p><strong>As long as the first number is 3</strong>, you have Python 3 installed.</p>\n<blockquote>\n<p>Download Page:</p>\n<p><a href=\"https://www.python.org/downloads/release/python-395/\">https://www.python.org/downloads/release/python-395/</a></p>\n</blockquote>\n<blockquote>\n<p>Download Link:</p>\n<p><a href=\"https://www.python.org/ftp/python/3.9.5/python-3.9.5-amd64.exe\">https://www.python.org/ftp/python/3.9.5/python-3.9.5-amd64.exe</a></p>\n</blockquote>\n<h3>Install Jupyter Notebooks:</h3>\n<h3>pip</h3>\n<p>If you use pip, you can install it with:</p>\n<p>If installing using pip install --user, you must add the user-level bin directory to your PATH environment variable in order to launch jupyter lab. If you are using a Unix derivative (FreeBSD, GNU / Linux, OS X), you can achieve this by using export PATH=\"$HOME/.local/bin:$PATH\" command.</p>\n<h3>pipenv</h3>\n<p>If you use pipenv, you can install it as:</p>\n<p>or from a git checkout:</p>\n<p>When using pipenv, in order to launch jupyter lab, you must activate the project's virtualenv. For example, in the directory where pipenv's Pipfile and Pipfile.lock live (i.e., where you ran the above commands):</p>\n<p>Alternatively, you can run jupyter lab inside the virtualenv with</p>\n<p><a href=\"https://nbviewer.jupyter.org/github/bgoonz/Jupyter-Notebooks/tree/master/\">Jupyter Notebook Viewer</a></p>\n<h3>Python Syntax</h3>\n<p>Python syntax was made for readability, and easy editing. For example, the python language uses a : and indented code, while javascript and others generally use {} and indented code.</p>\n<h3>First Program</h3>\n<p>Lets create a <a href=\"https://repl.it/languages/python3\">python 3</a> repl, and call it <em>Hello World</em>. Now you have a blank file called <em>main.py</em>. Now let us write our first line of code:</p>\n<blockquote>\n<p><em>Brian Kernighan actually wrote the first \"Hello, World!\" program as part of the documentation for the BCPL programming language developed by Martin Richards.</em></p>\n</blockquote>\n<p>Now, press the run button, which obviously runs the code. If you are not using replit, this will not work. You should research how to run a file with your text editor.</p>\n<h3>Command Line</h3>\n<p>If you look to your left at the console where hello world was just printed, you can see a >, >>>, or $ depending on what you are using. After the prompt, try typing a line of code.</p>\n<p>The command line allows you to execute single lines of code at a time. It is often used when trying out a new function or method in the language.</p>\n<h3>New: Comments!</h3>\n<p>Another cool thing that you can generally do with all languages, are comments. In python, a comment starts with a #. The computer ignores all text starting after the #.</p>\n<p># Write some comments!</p>\n<p>If you have a huge comment, do <strong>not</strong> comment all the 350 lines, just put ''' before it, and ''' at the end. Technically, this is not a comment but a string, but the computer still ignores it, so we will use it.</p>\n<h3>New: Variables!</h3>\n<p>Unlike many other languages, there is no var, let, or const to declare a variable in python. You simply go name = 'value'.</p>\n<p>Remember, there is a difference between integers and strings. <em>Remember: String = \"\".</em> To convert between these two, you can put an int in a str() function, and a string in a int() function. There is also a less used one, called a float. Mainly, these are integers with decimals. Change them using the float() command.</p>\n<p><a href=\"https://repl.it/@bgoonz/second-scr?lite=true&referrer=https%3A%2F%2Fbryanguner.medium.com\">https://repl.it/@bgoonz/second-scr?lite=true&referrer=https%3A%2F%2Fbryanguner.medium.com</a></p>\n<p>Instead of using the , in the print function, you can put a + to combine the variables and string.</p>\n<h3>Operators</h3>\n<p>There are many operators in python:</p>\n<ul>\n<li>+</li>\n<li>-</li>\n<li>/</li>\n<li>*\nThese operators are the same in most languages, and allow for addition, subtraction, division, and multiplicaiton.\nNow, we can look at a few more complicated ones:</li>\n</ul>\n<p><em>simpleops.py</em></p>\n<p>You should already know everything shown above, as it is similar to other languages. If you continue down, you will see more complicated ones.</p>\n<p><em>complexop.py</em></p>\n<p>The ones above are to edit the current value of the variable.\nSorry to JS users, as there is no i++; or anything.</p>\n<h3><em>Fun Fact:\nThe python language was named after Monty Python.</em></h3>\n<p>If you really want to know about the others, view <a href=\"https://www.tutorialspoint.com/python/python_basic_operators.htm\">Py Operators</a></p>\n<h3>More Things With Strings</h3>\n<p>Like the title?\nAnyways, a ' and a \" both indicate a string, but <strong>do not combine them!</strong></p>\n<p><em>quotes.py</em></p>\n<p><em>slicing.py</em></p>\n<h3>String Slicing</h3>\n<p>You can look at only certain parts of the string by slicing it, using [num:num].\nThe first number stands for how far in you go from the front, and the second stands for how far in you go from the back.</p>\n<h3>Methods and Functions</h3>\n<p>Here is a list of functions/methods we will go over:</p>\n<ul>\n<li>.strip()</li>\n<li>len()</li>\n<li>.lower()</li>\n<li>.upper()</li>\n<li>.replace()</li>\n<li>.split()</li>\n</ul>\n<h3>New: Input()</h3>\n<p>Input is a function that gathers input entered from the user in the command line. It takes one optional parameter, which is the users prompt.</p>\n<p><em>inp.py</em></p>\n<p>If you wanted to make it smaller, and look neater to the user, you could do…</p>\n<p><em>inp2.py</em></p>\n<p>Running:\n<em>inp.py</em></p>\n<p><em>inp2.py</em></p>\n<h3>New: Importing Modules</h3>\n<p>Python has created a lot of functions that are located in other .py files. You need to import these <strong>modules</strong> to gain access to the,, You may wonder why python did this. The purpose of separate modules is to make python faster. Instead of storing millions and millions of functions, , it only needs a few basic ones. To import a module, you must write input <modulename>. Do not add the .py extension to the file name. In this example , we will be using a python created module named random.</p>\n<p><em>module.py</em></p>\n<p>Now, I have access to all functions in the random.py file. To access a specific function in the module, you would do <module>.<function>. For example:</p>\n<p><em>module2.py</em></p>\n<blockquote>\n<p>*Pro Tip:\nDo from random import randint to not have to do random.randint(), just randint()\nTo import all functions from a module, you could do from random import **</p>\n</blockquote>\n<blockquote>\n</blockquote>\n<h3>New: Loops!</h3>\n<p>Loops allow you to repeat code over and over again. This is useful if you want to print Hi with a delay of one second 100 times.</p>\n<h4>for Loop</h4>\n<p>The for loop goes through a list of variables, making a seperate variable equal one of the list every time.\nLet's say we wanted to create the example above.</p>\n<p><em>loop.py</em></p>\n<p>This will print Hello with a .3 second delay 100 times. This is just one way to use it, but it is usually used like this:</p>\n<p><em>loop2.py</em></p>\n<p><a href=\"https://storage.googleapis.com/replit/images/1539649280875_37d22e6d49e8e8fbc453631def345387.pn\">https://storage.googleapis.com/replit/images/1539649280875_37d22e6d49e8e8fbc453631def345387.pn</a></p>\n<h4>while Loop</h4>\n<p>The while loop runs the code while something stays true. You would put while <expression>. Every time the loop runs, it evaluates if the expression is True. It it is, it runs the code, if not it continues outside of the loop. For example:</p>\n<p><em>while.py</em></p>\n<p>Or you could do:</p>\n<p><em>while2.py</em></p>\n<h3>New: if Statement</h3>\n<p>The if statement allows you to check if something is True. If so, it runs the code, if not, it continues on. It is kind of like a while loop, but it executes <strong>only once</strong>. An if statement is written:</p>\n<p><em>if.py</em></p>\n<p>Now, you may think that it would be better if you could make it print only one message. Not as many that are True. You can do that with an elif statement:</p>\n<p><em>elif.py</em></p>\n<p>Now, you may wonder how to run code if none work. Well, there is a simple statement called else:</p>\n<p><em>else.py</em></p>\n<h3>New: Functions (def)</h3>\n<p>So far, you have only seen how to use functions other people have made. Let use the example that you want to print the a random number between 1 and 9, and print different text every time.\nIt is quite tiring to type:</p>\n<p>Characters: 389</p>\n<p><em>nofunc.py</em></p>\n<p>Now with functions, you can seriously lower the amount of characters:</p>\n<p>Characters: 254</p>\n<p><em>functions.py</em></p>\n<h3>Project Based Learning:</h3>\n<p>The following is a modified version of a tutorial posted By: <a href=\"https://replit.com/@InvisibleOne\">InvisibleOne </a></p>\n<p>I would cite the original tutorial it's self but at the time of this writing I can no longer find it on his repl.it profile and so the only reference I have are my own notes from following the tutorial when I first found it.</p>\n<h3>1. Adventure Story</h3>\n<p>The first thing you need with an adventure story is a great storyline, something that is exciting and fun. The idea is, that at each pivotal point in the story, you give the player the opportunity to make a choice.\nFirst things first, let's import the stuff that we need, like this:</p>\n<p>Now, we need some variables to hold some of the player data.</p>\n<p>Ok, now we have the player's name and nickname, let's welcome them to the game</p>\n<p>Now for the story. The most important part of all stories is the introduction, so let's print our introduction</p>\n<p>Now, we'll give the player their first choice</p>\n<p>There you have it, a pretty simple choose your own ending story. You can make it as complex or uncomplex as you like.</p>\n<h3>2. TEXT ENCODER</h3>\n<p>Ever make secret messages as a kid? I used to. Anyways, here's the way you can make a program to encode messages! It's pretty simple. First things first, let's get the message the user wants to encode, we'll use input() for that:</p>\n<p>Now we need to split that string into a list of characters, this part is a bit more complicated.</p>\n<p>Now we need to convert the characters into code, well do this with a for loop:</p>\n<p>Once we've encoded the text, we'll print it back for the user</p>\n<p>And if you want to decode something, it is this same process but in reverse!</p>\n<h3>3. Guess my Number</h3>\n<p>Number guessing games are fun and pretty simple, all you need are a few loops. To start, we need to import random.</p>\n<p>That is pretty simple. Now we'll make a list with the numbers were want available for the game</p>\n<p>Next, we get a random number from the list</p>\n<p>Now, we need to ask the user for input, we'll to this with a while loop</p>\n<p>Have fun with this!</p>\n<h3>4. Notes</h3>\n<p>Here is a more advanced project, but still pretty easy. This will be using a txt file to save some notes. The first thing we need to do is to create a txt file in your repl, name it 'notes.txt'\nNow, to open a file in python we use open('filename', type) The type can be 'r' for read, or 'w' for write. There is another option, but we won't be using that here. Now, the first thing we are going to do is get what the user would like to save:</p>\n<p>Now we'll open our file and save that text</p>\n<p>There we go, now the information is in the file. Next, we'll retrieve it</p>\n<p>There we go, that's how you can open files and close files with python</p>\n<h3>5. Random Dare Generator</h3>\n<p>Who doesn't love a good dare? Here is a program that can generate random dares. The first thing we'll need to do is as always, import random. Then we'll make some lists of dares</p>" | |
| }, | |
| { | |
| "url": "/blog/web-dev-trends/", | |
| "relativePath": "blog/web-dev-trends.md", | |
| "relativeDir": "blog", | |
| "base": "web-dev-trends.md", | |
| "name": "web-dev-trends", | |
| "frontmatter": { | |
| "title": "Web Development Tools", | |
| "subtitle": "In 2021", | |
| "date": "2021-09-30", | |
| "thumb_image_alt": "lorem-ipsum", | |
| "excerpt": "lorem-ipsum", | |
| "seo": { | |
| "title": "", | |
| "description": "", | |
| "robots": [], | |
| "extra": [] | |
| }, | |
| "template": "post", | |
| "thumb_image": "images/webdev.png" | |
| }, | |
| "html": "<p><strong>1. AI Chatbots</strong><img src=\"https://blog.sagipl.com/wp-content/uploads/2019/05/AI-Chatbots-1-1024x573.png\"></p>\n<p>Artificial Intelligence (AI) refers to the intelligence displayed by machines. It is primarily used to replace human intelligence.</p>\n<p>As the demand for AI-powered automation, communication, and analytics solutions will rise this year, more web developers will be focusing on building AI-based chatbots and virtual assistant apps.</p>\n<p><strong>2. Single Page Application</strong></p>\n<p><a href=\"https://www.sagipl.com/ipad-apps-development/\">Single-page applications</a>, being light in weight, faster, and more efficient, increased both in demand and popularity in recent years.</p>\n<p>Developers will continue to use SPA for building responsive sites and apps in 2021.</p>\n<p><strong>3. JavaScript Frameworks</strong></p>\n<p>JavaScript continues to remain one of the <a href=\"https://blog.sagipl.com/top-programming-languages/\"><strong>most preferred web development languages</strong></a> owing to its flexibility, power and evolving frameworks.</p>\n<p>This year too, we will see many new applications being developed in this developer-friendly language.</p>\n<p><strong>4. Progressive Web Apps (PWAs)</strong></p>\n<p>These are special web applications which are designed to load with progressive enhancement.</p>\n<p>Because of its fast-loading and high functionality features, PWA will continue to remain one of the year's hottest web trends.</p>\n<p><strong>5. Mobile-Friendly Website</strong></p>\n<p>Mobile-responsive sites are the ones that are designed to work smoothly across devices of all sizes.</p>\n<p>Owing to Google's mobile-first index and other search guidelines, developers will keep offering mobile-optimized sites this year and beyond.</p>\n<p><strong>6. Blockchain Technology</strong></p>\n<p>Blockchain, which was founded as a technology for secure digital payments, is now finding its place as a distributed ledger, which is secure, decentralized and public and will dominate the web development industry in the coming years.</p>\n<p><strong>7. Motion UI</strong></p>\n<p>Motion UI (User Interface) is a technology for creating visually appealing apps, especially animations, graphics, and transitions.</p>\n<p>Owing to its great ability for <a href=\"https://www.sagipl.com/website-design/\">creating an interactive web design</a>, Motion UI will be a primary tool for web developers in 2021.</p>\n<p><strong>8. Accelerated Mobile Pages (AMP)</strong></p>\n<p>Accelerated mobile pages are an initiative by Google to ensure that existing desktop websites give an equally amazing user experience across mobile devices.</p>\n<p>Web developers who are familiar with this tech are helping companies to implement the same on their websites.</p>\n<p><strong>9. Cybersecurity</strong></p>\n<p>Cybersecurity, which is another term for IT security, will continue to have its place in the online space as long as the world of internet is threatened by data breaches, hacking and similar cyber attacks.</p>\n<p>Developers with specialization in IT security will be in high demand this year.</p>\n<p><strong>10. VR and AR</strong></p>\n<p>The Augmented Reality and Virtual Reality Technologies, which were introduced only two years back, have now become a core part of the modern web development frameworks.</p>\n<p>From digital reality to visualization to 3D replicas, AR/VR will be used for enhancing user experience in the online space.</p>\n<p><strong>11. Voice Search</strong></p>\n<p>Following Google's increased focus on voice search queries, websites based on voice search optimization are now trending more than ever.</p>\n<p>As the number of people using voice searches will increase this year, so will the demand for websites optimized for the same.</p>\n<p><strong>12.</strong> <strong>Push Notification</strong></p>\n<p>Push Notification is replacing the Newsletter service. It is not very old but maintaining a high conversion rate better than Newsletters.</p>\n<p>Services and platforms like Onesignal, ZoPush, Push Engage are improving day by day, so it will be in trend in upcoming years and web developers also have to take care of it.</p>\n<p>SAG IPL is a leading global <a href=\"https://www.sagipl.com/web-development/\">web development company</a> providing modern web/app development services to clients worldwide.</p>" | |
| }, | |
| { | |
| "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": "<div align=\"center\">\n<h1><a href=\"https://bgoonz-blog.netlify.app/\">⇨WEBSITE🗺️⇦</a></h1>\n<h5><a href=\"https://codepen.io/bgoonz/pen/LYLJZrW\">⇨Privacy policy⇦</a></h5>\n</div>\n<hr>\n<div align=\"center\">\n<h5><a href=\"https://bgoonz-blog-2-0.pages.dev/\">Cloudfare-Backup</a> ⇨ <a href=\"https://www.algolia.com/realtime-search-demo/web-dev-resource-hub-9e6b8aa8-6106-44c5-9f59-ff3f9531abd4\">search</a> ⇨ <a href=\"https://bgoonzblog20-backup.netlify.app/#gsc.tab=0\">Backup Repo Deploy</a> ⇨ <a href=\"https://bgoonz.github.io/BGOONZ_BLOG_2.0/\">Github pages</a> ⇨ <a href=\"https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki\">Go To Site Wiki</a> ⇨ <a href=\"https://bgoonzblog20master.gatsbyjs.io/\">Gatsby Cloud Version</a></h5>\n</div>\n<div align=\"center\">\n<p><a href=\"https://app.netlify.com/sites/bgoonz-blog/deploys\"><img src=\"https://api.netlify.com/api/v1/badges/a1b7ee1a-11a7-4bd2-a341-2260656e216f/deploy-status\" alt=\"Netlify Status\"></a><a href=\"https://www.codefactor.io/repository/github/webdevhub42/bgoonz_blog_2.0\"><img src=\"https://www.codefactor.io/repository/github/webdevhub42/bgoonz_blog_2.0/badge\" alt=\"CodeFactor\"></a><a href=\"https://codescene.io/projects/17026\"><img src=\"https://codescene.io/projects/17026/status-badges/system-mastery\" alt=\"CodeScene System Mastery**\"></a><img src=\"https://views.whatilearened.today/views/github/bgoonz/views.svg\" alt=\"Profile views**\"><a href=\"https://gitter.im/bgoonz/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge\"><img src=\"https://badges.gitter.im/bgoonz/community.svg\" alt=\"Gitter**\"></a><a href=\"https://codescene.io/projects/17026\"><img src=\"https://codescene.io/projects/17026/status-badges/code-health\" alt=\"CodeScene Code Health\"></a><a href=\"https://github.com/bgoonz/BGOONZ_BLOG_2.0/actions/workflows/codeql-analysis.yml\"><img src=\"https://github.com/bgoonz/BGOONZ_BLOG_2.0/actions/workflows/codeql-analysis.yml/badge.svg\" alt=\"CodeQL\"></a></p>\n<p><a href=\"https://app.getpostman.com/run-collection/aac9892cd5e6fe8241ce?action=collection%2Fimport#?env%5Bblog%5D=dW5kZWZpbmVk\"><img src=\"https://run.pstmn.io/button.svg\" alt=\"Run in Postman\"></a><img src=\"https://visitor-badge-reloaded.herokuapp.com/badge?page_id=bgoonz.visitor.badge.reloaded&color=00bbbb&style=for-the-badge&logo=github\" alt=\"GitHub visitors\"></p>\n</div>\n<details>" | |
| }, | |
| { | |
| "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": "<h1>Portfolio</h1>\n<iframe src=\"https://onedrive.live.com/embed?cid=D21009FDD967A241&resid=D21009FDD967A241%21671966&authkey=APaBpP1yOouJY88&em=2&wdAr=1.7777777777777777\" width=\"1186px\" height=\"691px\" frameborder=\"0\">This is an embedded <a target=\"_blank\" href=\"https://office.com\">Microsoft Office</a> presentation, powered by <a target=\"_blank\" href=\"https://office.com/webapps\">Office</a>.</iframe>\n<iframe src=\"https://codesandbox.io/embed/bold-surf-xfsiq?fontsize=14&hidenavigation=1&theme=dark&view=preview\"\nstyle=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\ntitle=\"bold-surf-xfsiq\"\nallow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\nsandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n></iframe>" | |
| }, | |
| { | |
| "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": "<h1>Web Scraping with Node.js</h1>\n<blockquote>\n<p>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</p>\n</blockquote>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*KkVKtysvgh2hIVRI1Irk-Q.jpeg\" alt=\"The Ultimate Guide to Web Scraping with Node.js\"></p>\n<p>So what's web scraping anyway? It involves automating away the laborious task of collecting information from websites.</p>\n<p>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!</p>\n<p>Getting started with web scraping is easy, and the process can be broken down into two main parts:</p>\n<ul>\n<li>acquiring the data using an HTML request library or a headless browser,</li>\n<li>and parsing the data to get the exact information you want.</li>\n</ul>\n<p>This guide will walk you through the process with the popular Node.js <a href=\"https://github.com/request/request-promise\">request-promise</a> module, <a href=\"https://github.com/cheeriojs/cheerio\">CheerioJS</a>, and <a href=\"https://github.com/GoogleChrome/puppeteer\">Puppeteer</a>. 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!</p>\n<p>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.</p>\n<p>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).</p>\n<h3>Making your first request</h3>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-install-libraries-L1\" data-line-number=\"1\"></td><td id=\"file-install-libraries-LC1\">npm install --save request request-promise cheerio puppeteer</td></tr></tbody></table>\n<p>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.</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusscraper-js-v1-L1\" data-line-number=\"1\"></td><td id=\"file-potusscraper-js-v1-LC1\">const rp = require('request-promise');</td></tr><tr><td id=\"file-potusscraper-js-v1-L2\" data-line-number=\"2\"></td><td id=\"file-potusscraper-js-v1-LC2\">const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';</td></tr><tr><td id=\"file-potusscraper-js-v1-L3\" data-line-number=\"3\"></td><td id=\"file-potusscraper-js-v1-LC3\"></td></tr><tr><td id=\"file-potusscraper-js-v1-L4\" data-line-number=\"4\"></td><td id=\"file-potusscraper-js-v1-LC4\">rp(url)</td></tr><tr><td id=\"file-potusscraper-js-v1-L5\" data-line-number=\"5\"></td><td id=\"file-potusscraper-js-v1-LC5\">.then(function(html){</td></tr><tr><td id=\"file-potusscraper-js-v1-L6\" data-line-number=\"6\"></td><td id=\"file-potusscraper-js-v1-LC6\">//success!</td></tr><tr><td id=\"file-potusscraper-js-v1-L7\" data-line-number=\"7\"></td><td id=\"file-potusscraper-js-v1-LC7\">console.log(html);</td></tr><tr><td id=\"file-potusscraper-js-v1-L8\" data-line-number=\"8\"></td><td id=\"file-potusscraper-js-v1-LC8\">})</td></tr><tr><td id=\"file-potusscraper-js-v1-L9\" data-line-number=\"9\"></td><td id=\"file-potusscraper-js-v1-LC9\">.catch(function(err){</td></tr><tr><td id=\"file-potusscraper-js-v1-L10\" data-line-number=\"10\"></td><td id=\"file-potusscraper-js-v1-LC10\">//handle error</td></tr><tr><td id=\"file-potusscraper-js-v1-L11\" data-line-number=\"11\"></td><td id=\"file-potusscraper-js-v1-LC11\">});</td></tr></tbody></table>\n<p>Output:</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusscraper-js-v1-output-L1\" data-line-number=\"1\"></td><td id=\"file-potusscraper-js-v1-output-LC1\"><!DOCTYPE html></td></tr><tr><td id=\"file-potusscraper-js-v1-output-L2\" data-line-number=\"2\"></td><td id=\"file-potusscraper-js-v1-output-LC2\"><html class=\"client-nojs\" lang=\"en\" dir=\"ltr\"></td></tr><tr><td id=\"file-potusscraper-js-v1-output-L3\" data-line-number=\"3\"></td><td id=\"file-potusscraper-js-v1-output-LC3\"><head></td></tr><tr><td id=\"file-potusscraper-js-v1-output-L4\" data-line-number=\"4\"></td><td id=\"file-potusscraper-js-v1-output-LC4\"><meta charset=\"UTF-8\"/></td></tr><tr><td id=\"file-potusscraper-js-v1-output-L5\" data-line-number=\"5\"></td><td id=\"file-potusscraper-js-v1-output-LC5\"><title>List of Presidents of the United States - Wikipedia</title></td></tr><tr><td id=\"file-potusscraper-js-v1-output-L6\" data-line-number=\"6\"></td><td id=\"file-potusscraper-js-v1-output-LC6\">...</td></tr></tbody></table>\n<h3>Using Chrome DevTools</h3>\n<p>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.</p>\n<p>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):</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*gLKhu_EO-cDqYna1P9WL_w.png\"></p>\n<p>Now, simply click inspect, and Chrome will bring up its DevTools pane, allowing you to easily inspect the page's source HTML.</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*HSUjFgji22vjwvGi2uZe1A.png\"></p>\n<h3>Parsing HTML with Cheerio.js</h3>\n<p>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.</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusscraper-js-v2-L1\" data-line-number=\"1\"></td><td id=\"file-potusscraper-js-v2-LC1\">const rp = require('request-promise');</td></tr><tr><td id=\"file-potusscraper-js-v2-L2\" data-line-number=\"2\"></td><td id=\"file-potusscraper-js-v2-LC2\">const $ = require('cheerio');</td></tr><tr><td id=\"file-potusscraper-js-v2-L3\" data-line-number=\"3\"></td><td id=\"file-potusscraper-js-v2-LC3\">const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';</td></tr><tr><td id=\"file-potusscraper-js-v2-L4\" data-line-number=\"4\"></td><td id=\"file-potusscraper-js-v2-LC4\"></td></tr><tr><td id=\"file-potusscraper-js-v2-L5\" data-line-number=\"5\"></td><td id=\"file-potusscraper-js-v2-LC5\">rp(url)</td></tr><tr><td id=\"file-potusscraper-js-v2-L6\" data-line-number=\"6\"></td><td id=\"file-potusscraper-js-v2-LC6\">.then(function(html){</td></tr><tr><td id=\"file-potusscraper-js-v2-L7\" data-line-number=\"7\"></td><td id=\"file-potusscraper-js-v2-LC7\">//success!</td></tr><tr><td id=\"file-potusscraper-js-v2-L8\" data-line-number=\"8\"></td><td id=\"file-potusscraper-js-v2-LC8\">console.log($('big > a', html).length);</td></tr><tr><td id=\"file-potusscraper-js-v2-L9\" data-line-number=\"9\"></td><td id=\"file-potusscraper-js-v2-LC9\">console.log($('big > a', html));</td></tr><tr><td id=\"file-potusscraper-js-v2-L10\" data-line-number=\"10\"></td><td id=\"file-potusscraper-js-v2-LC10\">})</td></tr><tr><td id=\"file-potusscraper-js-v2-L11\" data-line-number=\"11\"></td><td id=\"file-potusscraper-js-v2-LC11\">.catch(function(err){</td></tr><tr><td id=\"file-potusscraper-js-v2-L12\" data-line-number=\"12\"></td><td id=\"file-potusscraper-js-v2-LC12\">//handle error</td></tr><tr><td id=\"file-potusscraper-js-v2-L13\" data-line-number=\"13\"></td><td id=\"file-potusscraper-js-v2-LC13\">});</td></tr></tbody></table>\n<p>Output:</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusscraper-js-v2-output-L1\" data-line-number=\"1\"></td><td id=\"file-potusscraper-js-v2-output-LC1\">45</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L2\" data-line-number=\"2\"></td><td id=\"file-potusscraper-js-v2-output-LC2\">{ '0':</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L3\" data-line-number=\"3\"></td><td id=\"file-potusscraper-js-v2-output-LC3\">{ type: 'tag',</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L4\" data-line-number=\"4\"></td><td id=\"file-potusscraper-js-v2-output-LC4\">name: 'a',</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L5\" data-line-number=\"5\"></td><td id=\"file-potusscraper-js-v2-output-LC5\">attribs: { href: '/wiki/George_Washington', title: 'George Washington' },</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L6\" data-line-number=\"6\"></td><td id=\"file-potusscraper-js-v2-output-LC6\">children: [ [Object] ],</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L7\" data-line-number=\"7\"></td><td id=\"file-potusscraper-js-v2-output-LC7\">next: null,</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L8\" data-line-number=\"8\"></td><td id=\"file-potusscraper-js-v2-output-LC8\">prev: null,</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L9\" data-line-number=\"9\"></td><td id=\"file-potusscraper-js-v2-output-LC9\">parent:</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L10\" data-line-number=\"10\"></td><td id=\"file-potusscraper-js-v2-output-LC10\">{ type: 'tag',</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L11\" data-line-number=\"11\"></td><td id=\"file-potusscraper-js-v2-output-LC11\">name: 'big',</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L12\" data-line-number=\"12\"></td><td id=\"file-potusscraper-js-v2-output-LC12\">attribs: {},</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L13\" data-line-number=\"13\"></td><td id=\"file-potusscraper-js-v2-output-LC13\">children: [Array],</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L14\" data-line-number=\"14\"></td><td id=\"file-potusscraper-js-v2-output-LC14\">next: null,</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L15\" data-line-number=\"15\"></td><td id=\"file-potusscraper-js-v2-output-LC15\">prev: null,</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L16\" data-line-number=\"16\"></td><td id=\"file-potusscraper-js-v2-output-LC16\">parent: [Object] } },</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L17\" data-line-number=\"17\"></td><td id=\"file-potusscraper-js-v2-output-LC17\">'1':</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L18\" data-line-number=\"18\"></td><td id=\"file-potusscraper-js-v2-output-LC18\">{ type: 'tag'</td></tr><tr><td id=\"file-potusscraper-js-v2-output-L19\" data-line-number=\"19\"></td><td id=\"file-potusscraper-js-v2-output-LC19\">...</td></tr></tbody></table>\n<p>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.</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusscraper-js-v3-L1\" data-line-number=\"1\"></td><td id=\"file-potusscraper-js-v3-LC1\">const rp = require('request-promise');</td></tr><tr><td id=\"file-potusscraper-js-v3-L2\" data-line-number=\"2\"></td><td id=\"file-potusscraper-js-v3-LC2\">const $ = require('cheerio');</td></tr><tr><td id=\"file-potusscraper-js-v3-L3\" data-line-number=\"3\"></td><td id=\"file-potusscraper-js-v3-LC3\">const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';</td></tr><tr><td id=\"file-potusscraper-js-v3-L4\" data-line-number=\"4\"></td><td id=\"file-potusscraper-js-v3-LC4\"></td></tr><tr><td id=\"file-potusscraper-js-v3-L5\" data-line-number=\"5\"></td><td id=\"file-potusscraper-js-v3-LC5\">rp(url)</td></tr><tr><td id=\"file-potusscraper-js-v3-L6\" data-line-number=\"6\"></td><td id=\"file-potusscraper-js-v3-LC6\">.then(function(html){</td></tr><tr><td id=\"file-potusscraper-js-v3-L7\" data-line-number=\"7\"></td><td id=\"file-potusscraper-js-v3-LC7\">//success!</td></tr><tr><td id=\"file-potusscraper-js-v3-L8\" data-line-number=\"8\"></td><td id=\"file-potusscraper-js-v3-LC8\">const wikiUrls = [];</td></tr><tr><td id=\"file-potusscraper-js-v3-L9\" data-line-number=\"9\"></td><td id=\"file-potusscraper-js-v3-LC9\">for (let i = 0; i < 45; i++) {</td></tr><tr><td id=\"file-potusscraper-js-v3-L10\" data-line-number=\"10\"></td><td id=\"file-potusscraper-js-v3-LC10\">wikiUrls.push($('big > a', html)[i].attribs.href);</td></tr><tr><td id=\"file-potusscraper-js-v3-L11\" data-line-number=\"11\"></td><td id=\"file-potusscraper-js-v3-LC11\">}</td></tr><tr><td id=\"file-potusscraper-js-v3-L12\" data-line-number=\"12\"></td><td id=\"file-potusscraper-js-v3-LC12\">console.log(wikiUrls);</td></tr><tr><td id=\"file-potusscraper-js-v3-L13\" data-line-number=\"13\"></td><td id=\"file-potusscraper-js-v3-LC13\">})</td></tr><tr><td id=\"file-potusscraper-js-v3-L14\" data-line-number=\"14\"></td><td id=\"file-potusscraper-js-v3-LC14\">.catch(function(err){</td></tr><tr><td id=\"file-potusscraper-js-v3-L15\" data-line-number=\"15\"></td><td id=\"file-potusscraper-js-v3-LC15\">//handle error</td></tr><tr><td id=\"file-potusscraper-js-v3-L16\" data-line-number=\"16\"></td><td id=\"file-potusscraper-js-v3-LC16\">});</td></tr></tbody></table>\n<p>Output:</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusscraper-js-v3-output-L1\" data-line-number=\"1\"></td><td id=\"file-potusscraper-js-v3-output-LC1\"></td></tr><tr><td id=\"file-potusscraper-js-v3-output-L2\" data-line-number=\"2\"></td><td id=\"file-potusscraper-js-v3-output-LC2\">[</td></tr><tr><td id=\"file-potusscraper-js-v3-output-L3\" data-line-number=\"3\"></td><td id=\"file-potusscraper-js-v3-output-LC3\">'/wiki/George_Washington',</td></tr><tr><td id=\"file-potusscraper-js-v3-output-L4\" data-line-number=\"4\"></td><td id=\"file-potusscraper-js-v3-output-LC4\">'/wiki/John_Adams',</td></tr><tr><td id=\"file-potusscraper-js-v3-output-L5\" data-line-number=\"5\"></td><td id=\"file-potusscraper-js-v3-output-LC5\">'/wiki/Thomas_Jefferson',</td></tr><tr><td id=\"file-potusscraper-js-v3-output-L6\" data-line-number=\"6\"></td><td id=\"file-potusscraper-js-v3-output-LC6\">'/wiki/James_Madison',</td></tr><tr><td id=\"file-potusscraper-js-v3-output-L7\" data-line-number=\"7\"></td><td id=\"file-potusscraper-js-v3-output-LC7\">'/wiki/James_Monroe',</td></tr><tr><td id=\"file-potusscraper-js-v3-output-L8\" data-line-number=\"8\"></td><td id=\"file-potusscraper-js-v3-output-LC8\">'/wiki/John_Quincy_Adams',</td></tr><tr><td id=\"file-potusscraper-js-v3-output-L9\" data-line-number=\"9\"></td><td id=\"file-potusscraper-js-v3-output-LC9\">'/wiki/Andrew_Jackson',</td></tr><tr><td id=\"file-potusscraper-js-v3-output-L10\" data-line-number=\"10\"></td><td id=\"file-potusscraper-js-v3-output-LC10\">...</td></tr><tr><td id=\"file-potusscraper-js-v3-output-L11\" data-line-number=\"11\"></td><td id=\"file-potusscraper-js-v3-output-LC11\">]</td></tr></tbody></table>\n<p>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.</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusparse-js-v1-L1\" data-line-number=\"1\"></td><td id=\"file-potusparse-js-v1-LC1\">const rp = require('request-promise');</td></tr><tr><td id=\"file-potusparse-js-v1-L2\" data-line-number=\"2\"></td><td id=\"file-potusparse-js-v1-LC2\">const url = 'https://en.wikipedia.org/wiki/George_Washington';</td></tr><tr><td id=\"file-potusparse-js-v1-L3\" data-line-number=\"3\"></td><td id=\"file-potusparse-js-v1-LC3\"></td></tr><tr><td id=\"file-potusparse-js-v1-L4\" data-line-number=\"4\"></td><td id=\"file-potusparse-js-v1-LC4\">rp(url)</td></tr><tr><td id=\"file-potusparse-js-v1-L5\" data-line-number=\"5\"></td><td id=\"file-potusparse-js-v1-LC5\">.then(function(html) {</td></tr><tr><td id=\"file-potusparse-js-v1-L6\" data-line-number=\"6\"></td><td id=\"file-potusparse-js-v1-LC6\">console.log(html);</td></tr><tr><td id=\"file-potusparse-js-v1-L7\" data-line-number=\"7\"></td><td id=\"file-potusparse-js-v1-LC7\">})</td></tr><tr><td id=\"file-potusparse-js-v1-L8\" data-line-number=\"8\"></td><td id=\"file-potusparse-js-v1-LC8\">.catch(function(err) {</td></tr><tr><td id=\"file-potusparse-js-v1-L9\" data-line-number=\"9\"></td><td id=\"file-potusparse-js-v1-LC9\">//handle error</td></tr><tr><td id=\"file-potusparse-js-v1-L10\" data-line-number=\"10\"></td><td id=\"file-potusparse-js-v1-LC10\">});</td></tr></tbody></table>\n<p>Output:</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusparse-js-v1-output-L1\" data-line-number=\"1\"></td><td id=\"file-potusparse-js-v1-output-LC1\"><html class=\"client-nojs\" lang=\"en\" dir=\"ltr\"></td></tr><tr><td id=\"file-potusparse-js-v1-output-L2\" data-line-number=\"2\"></td><td id=\"file-potusparse-js-v1-output-LC2\"><head></td></tr><tr><td id=\"file-potusparse-js-v1-output-L3\" data-line-number=\"3\"></td><td id=\"file-potusparse-js-v1-output-LC3\"><meta charset=\"UTF-8\"/></td></tr><tr><td id=\"file-potusparse-js-v1-output-L4\" data-line-number=\"4\"></td><td id=\"file-potusparse-js-v1-output-LC4\"><title>George Washington - Wikipedia</title></td></tr><tr><td id=\"file-potusparse-js-v1-output-L5\" data-line-number=\"5\"></td><td id=\"file-potusparse-js-v1-output-LC5\">...</td></tr></tbody></table>\n<p>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.</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*exzZbuIwfrCcbTM2rr9_bw.png\"></p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*yth6AmHpywM77n0wEprpiA.png\"></p>\n<p>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.</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusparse-js-v2-L1\" data-line-number=\"1\"></td><td id=\"file-potusparse-js-v2-LC1\">const rp = require('request-promise');</td></tr><tr><td id=\"file-potusparse-js-v2-L2\" data-line-number=\"2\"></td><td id=\"file-potusparse-js-v2-LC2\">const $ = require('cheerio');</td></tr><tr><td id=\"file-potusparse-js-v2-L3\" data-line-number=\"3\"></td><td id=\"file-potusparse-js-v2-LC3\">const url = 'https://en.wikipedia.org/wiki/George_Washington';</td></tr><tr><td id=\"file-potusparse-js-v2-L4\" data-line-number=\"4\"></td><td id=\"file-potusparse-js-v2-LC4\"></td></tr><tr><td id=\"file-potusparse-js-v2-L5\" data-line-number=\"5\"></td><td id=\"file-potusparse-js-v2-LC5\">rp(url)</td></tr><tr><td id=\"file-potusparse-js-v2-L6\" data-line-number=\"6\"></td><td id=\"file-potusparse-js-v2-LC6\">.then(function(html) {</td></tr><tr><td id=\"file-potusparse-js-v2-L7\" data-line-number=\"7\"></td><td id=\"file-potusparse-js-v2-LC7\">console.log($('.firstHeading', html).text());</td></tr><tr><td id=\"file-potusparse-js-v2-L8\" data-line-number=\"8\"></td><td id=\"file-potusparse-js-v2-LC8\">console.log($('.bday', html).text());</td></tr><tr><td id=\"file-potusparse-js-v2-L9\" data-line-number=\"9\"></td><td id=\"file-potusparse-js-v2-LC9\">})</td></tr><tr><td id=\"file-potusparse-js-v2-L10\" data-line-number=\"10\"></td><td id=\"file-potusparse-js-v2-LC10\">.catch(function(err) {</td></tr><tr><td id=\"file-potusparse-js-v2-L11\" data-line-number=\"11\"></td><td id=\"file-potusparse-js-v2-LC11\">//handle error</td></tr><tr><td id=\"file-potusparse-js-v2-L12\" data-line-number=\"12\"></td><td id=\"file-potusparse-js-v2-LC12\">});</td></tr></tbody></table>\n<p>Output:</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusparse-js-v2-output-L1\" data-line-number=\"1\"></td><td id=\"file-potusparse-js-v2-output-LC1\">George Washington</td></tr><tr><td id=\"file-potusparse-js-v2-output-L2\" data-line-number=\"2\"></td><td id=\"file-potusparse-js-v2-output-LC2\">1732-02-22</td></tr></tbody></table>\n<h3>Putting it all together</h3>\n<p>Perfect! Now let's wrap this up into a function and export it from this module.</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusparse-js-v3-L1\" data-line-number=\"1\"></td><td id=\"file-potusparse-js-v3-LC1\">const rp = require('request-promise');</td></tr><tr><td id=\"file-potusparse-js-v3-L2\" data-line-number=\"2\"></td><td id=\"file-potusparse-js-v3-LC2\">const $ = require('cheerio');</td></tr><tr><td id=\"file-potusparse-js-v3-L3\" data-line-number=\"3\"></td><td id=\"file-potusparse-js-v3-LC3\"></td></tr><tr><td id=\"file-potusparse-js-v3-L4\" data-line-number=\"4\"></td><td id=\"file-potusparse-js-v3-LC4\">const potusParse = function(url) {</td></tr><tr><td id=\"file-potusparse-js-v3-L5\" data-line-number=\"5\"></td><td id=\"file-potusparse-js-v3-LC5\">return rp(url)</td></tr><tr><td id=\"file-potusparse-js-v3-L6\" data-line-number=\"6\"></td><td id=\"file-potusparse-js-v3-LC6\">.then(function(html) {</td></tr><tr><td id=\"file-potusparse-js-v3-L7\" data-line-number=\"7\"></td><td id=\"file-potusparse-js-v3-LC7\">return {</td></tr><tr><td id=\"file-potusparse-js-v3-L8\" data-line-number=\"8\"></td><td id=\"file-potusparse-js-v3-LC8\">name: $('.firstHeading', html).text(),</td></tr><tr><td id=\"file-potusparse-js-v3-L9\" data-line-number=\"9\"></td><td id=\"file-potusparse-js-v3-LC9\">birthday: $('.bday', html).text(),</td></tr><tr><td id=\"file-potusparse-js-v3-L10\" data-line-number=\"10\"></td><td id=\"file-potusparse-js-v3-LC10\">};</td></tr><tr><td id=\"file-potusparse-js-v3-L11\" data-line-number=\"11\"></td><td id=\"file-potusparse-js-v3-LC11\">})</td></tr><tr><td id=\"file-potusparse-js-v3-L12\" data-line-number=\"12\"></td><td id=\"file-potusparse-js-v3-LC12\">.catch(function(err) {</td></tr><tr><td id=\"file-potusparse-js-v3-L13\" data-line-number=\"13\"></td><td id=\"file-potusparse-js-v3-LC13\">//handle error</td></tr><tr><td id=\"file-potusparse-js-v3-L14\" data-line-number=\"14\"></td><td id=\"file-potusparse-js-v3-LC14\">});</td></tr><tr><td id=\"file-potusparse-js-v3-L15\" data-line-number=\"15\"></td><td id=\"file-potusparse-js-v3-LC15\">};</td></tr><tr><td id=\"file-potusparse-js-v3-L16\" data-line-number=\"16\"></td><td id=\"file-potusparse-js-v3-LC16\"></td></tr><tr><td id=\"file-potusparse-js-v3-L17\" data-line-number=\"17\"></td><td id=\"file-potusparse-js-v3-LC17\">module.exports = potusParse;</td></tr></tbody></table>\n<p>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.</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusparse-js-v4-L1\" data-line-number=\"1\"></td><td id=\"file-potusparse-js-v4-LC1\"></td></tr><tr><td id=\"file-potusparse-js-v4-L2\" data-line-number=\"2\"></td><td id=\"file-potusparse-js-v4-LC2\">const rp = require('request-promise');</td></tr><tr><td id=\"file-potusparse-js-v4-L3\" data-line-number=\"3\"></td><td id=\"file-potusparse-js-v4-LC3\">const $ = require('cheerio');</td></tr><tr><td id=\"file-potusparse-js-v4-L4\" data-line-number=\"4\"></td><td id=\"file-potusparse-js-v4-LC4\">const potusParse = require('./potusParse');</td></tr><tr><td id=\"file-potusparse-js-v4-L5\" data-line-number=\"5\"></td><td id=\"file-potusparse-js-v4-LC5\">const url = 'https://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States';</td></tr><tr><td id=\"file-potusparse-js-v4-L6\" data-line-number=\"6\"></td><td id=\"file-potusparse-js-v4-LC6\"></td></tr><tr><td id=\"file-potusparse-js-v4-L7\" data-line-number=\"7\"></td><td id=\"file-potusparse-js-v4-LC7\">rp(url)</td></tr><tr><td id=\"file-potusparse-js-v4-L8\" data-line-number=\"8\"></td><td id=\"file-potusparse-js-v4-LC8\">.then(function(html) {</td></tr><tr><td id=\"file-potusparse-js-v4-L9\" data-line-number=\"9\"></td><td id=\"file-potusparse-js-v4-LC9\">//success!</td></tr><tr><td id=\"file-potusparse-js-v4-L10\" data-line-number=\"10\"></td><td id=\"file-potusparse-js-v4-LC10\">const wikiUrls = [];</td></tr><tr><td id=\"file-potusparse-js-v4-L11\" data-line-number=\"11\"></td><td id=\"file-potusparse-js-v4-LC11\">for (let i = 0; i < 45; i++) {</td></tr><tr><td id=\"file-potusparse-js-v4-L12\" data-line-number=\"12\"></td><td id=\"file-potusparse-js-v4-LC12\">wikiUrls.push($('big > a', html)[i].attribs.href);</td></tr><tr><td id=\"file-potusparse-js-v4-L13\" data-line-number=\"13\"></td><td id=\"file-potusparse-js-v4-LC13\">}</td></tr><tr><td id=\"file-potusparse-js-v4-L14\" data-line-number=\"14\"></td><td id=\"file-potusparse-js-v4-LC14\">return Promise.all(</td></tr><tr><td id=\"file-potusparse-js-v4-L15\" data-line-number=\"15\"></td><td id=\"file-potusparse-js-v4-LC15\">wikiUrls.map(function(url) {</td></tr><tr><td id=\"file-potusparse-js-v4-L16\" data-line-number=\"16\"></td><td id=\"file-potusparse-js-v4-LC16\">return potusParse('https://en.wikipedia.org' + url);</td></tr><tr><td id=\"file-potusparse-js-v4-L17\" data-line-number=\"17\"></td><td id=\"file-potusparse-js-v4-LC17\">})</td></tr><tr><td id=\"file-potusparse-js-v4-L18\" data-line-number=\"18\"></td><td id=\"file-potusparse-js-v4-LC18\">);</td></tr><tr><td id=\"file-potusparse-js-v4-L19\" data-line-number=\"19\"></td><td id=\"file-potusparse-js-v4-LC19\">})</td></tr><tr><td id=\"file-potusparse-js-v4-L20\" data-line-number=\"20\"></td><td id=\"file-potusparse-js-v4-LC20\">.then(function(presidents) {</td></tr><tr><td id=\"file-potusparse-js-v4-L21\" data-line-number=\"21\"></td><td id=\"file-potusparse-js-v4-LC21\">console.log(presidents);</td></tr><tr><td id=\"file-potusparse-js-v4-L22\" data-line-number=\"22\"></td><td id=\"file-potusparse-js-v4-LC22\">})</td></tr><tr><td id=\"file-potusparse-js-v4-L23\" data-line-number=\"23\"></td><td id=\"file-potusparse-js-v4-LC23\">.catch(function(err) {</td></tr><tr><td id=\"file-potusparse-js-v4-L24\" data-line-number=\"24\"></td><td id=\"file-potusparse-js-v4-LC24\">//handle error</td></tr><tr><td id=\"file-potusparse-js-v4-L25\" data-line-number=\"25\"></td><td id=\"file-potusparse-js-v4-LC25\">console.log(err);</td></tr><tr><td id=\"file-potusparse-js-v4-L26\" data-line-number=\"26\"></td><td id=\"file-potusparse-js-v4-LC26\">});</td></tr></tbody></table>\n<p>Output:</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-potusparse-js-v4-output-L1\" data-line-number=\"1\"></td><td id=\"file-potusparse-js-v4-output-LC1\"></td></tr><tr><td id=\"file-potusparse-js-v4-output-L2\" data-line-number=\"2\"></td><td id=\"file-potusparse-js-v4-output-LC2\">[</td></tr><tr><td id=\"file-potusparse-js-v4-output-L3\" data-line-number=\"3\"></td><td id=\"file-potusparse-js-v4-output-LC3\">{ name: 'George Washington', birthday: '1732-02-22' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L4\" data-line-number=\"4\"></td><td id=\"file-potusparse-js-v4-output-LC4\">{ name: 'John Adams', birthday: '1735-10-30' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L5\" data-line-number=\"5\"></td><td id=\"file-potusparse-js-v4-output-LC5\">{ name: 'Thomas Jefferson', birthday: '1743-04-13' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L6\" data-line-number=\"6\"></td><td id=\"file-potusparse-js-v4-output-LC6\">{ name: 'James Madison', birthday: '1751-03-16' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L7\" data-line-number=\"7\"></td><td id=\"file-potusparse-js-v4-output-LC7\">{ name: 'James Monroe', birthday: '1758-04-28' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L8\" data-line-number=\"8\"></td><td id=\"file-potusparse-js-v4-output-LC8\">{ name: 'John Quincy Adams', birthday: '1767-07-11' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L9\" data-line-number=\"9\"></td><td id=\"file-potusparse-js-v4-output-LC9\">{ name: 'Andrew Jackson', birthday: '1767-03-15' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L10\" data-line-number=\"10\"></td><td id=\"file-potusparse-js-v4-output-LC10\">{ name: 'Martin Van Buren', birthday: '1782-12-05' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L11\" data-line-number=\"11\"></td><td id=\"file-potusparse-js-v4-output-LC11\">{ name: 'William Henry Harrison', birthday: '1773-02-09' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L12\" data-line-number=\"12\"></td><td id=\"file-potusparse-js-v4-output-LC12\">{ name: 'John Tyler', birthday: '1790-03-29' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L13\" data-line-number=\"13\"></td><td id=\"file-potusparse-js-v4-output-LC13\">{ name: 'James K. Polk', birthday: '1795-11-02' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L14\" data-line-number=\"14\"></td><td id=\"file-potusparse-js-v4-output-LC14\">{ name: 'Zachary Taylor', birthday: '1784-11-24' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L15\" data-line-number=\"15\"></td><td id=\"file-potusparse-js-v4-output-LC15\">{ name: 'Millard Fillmore', birthday: '1800-01-07' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L16\" data-line-number=\"16\"></td><td id=\"file-potusparse-js-v4-output-LC16\">{ name: 'Franklin Pierce', birthday: '1804-11-23' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L17\" data-line-number=\"17\"></td><td id=\"file-potusparse-js-v4-output-LC17\">{ name: 'James Buchanan', birthday: '1791-04-23' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L18\" data-line-number=\"18\"></td><td id=\"file-potusparse-js-v4-output-LC18\">{ name: 'Abraham Lincoln', birthday: '1809-02-12' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L19\" data-line-number=\"19\"></td><td id=\"file-potusparse-js-v4-output-LC19\">{ name: 'Andrew Johnson', birthday: '1808-12-29' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L20\" data-line-number=\"20\"></td><td id=\"file-potusparse-js-v4-output-LC20\">{ name: 'Ulysses S. Grant', birthday: '1822-04-27' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L21\" data-line-number=\"21\"></td><td id=\"file-potusparse-js-v4-output-LC21\">{ name: 'Rutherford B. Hayes', birthday: '1822-10-04' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L22\" data-line-number=\"22\"></td><td id=\"file-potusparse-js-v4-output-LC22\">{ name: 'James A. Garfield', birthday: '1831-11-19' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L23\" data-line-number=\"23\"></td><td id=\"file-potusparse-js-v4-output-LC23\">{ name: 'Chester A. Arthur', birthday: '1829-10-05' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L24\" data-line-number=\"24\"></td><td id=\"file-potusparse-js-v4-output-LC24\">{ name: 'Grover Cleveland', birthday: '1837-03-18' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L25\" data-line-number=\"25\"></td><td id=\"file-potusparse-js-v4-output-LC25\">{ name: 'Benjamin Harrison', birthday: '1833-08-20' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L26\" data-line-number=\"26\"></td><td id=\"file-potusparse-js-v4-output-LC26\">{ name: 'Grover Cleveland', birthday: '1837-03-18' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L27\" data-line-number=\"27\"></td><td id=\"file-potusparse-js-v4-output-LC27\">{ name: 'William McKinley', birthday: '1843-01-29' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L28\" data-line-number=\"28\"></td><td id=\"file-potusparse-js-v4-output-LC28\">{ name: 'Theodore Roosevelt', birthday: '1858-10-27' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L29\" data-line-number=\"29\"></td><td id=\"file-potusparse-js-v4-output-LC29\">{ name: 'William Howard Taft', birthday: '1857-09-15' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L30\" data-line-number=\"30\"></td><td id=\"file-potusparse-js-v4-output-LC30\">{ name: 'Woodrow Wilson', birthday: '1856-12-28' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L31\" data-line-number=\"31\"></td><td id=\"file-potusparse-js-v4-output-LC31\">{ name: 'Warren G. Harding', birthday: '1865-11-02' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L32\" data-line-number=\"32\"></td><td id=\"file-potusparse-js-v4-output-LC32\">{ name: 'Calvin Coolidge', birthday: '1872-07-04' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L33\" data-line-number=\"33\"></td><td id=\"file-potusparse-js-v4-output-LC33\">{ name: 'Herbert Hoover', birthday: '1874-08-10' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L34\" data-line-number=\"34\"></td><td id=\"file-potusparse-js-v4-output-LC34\">{ name: 'Franklin D. Roosevelt', birthday: '1882-01-30' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L35\" data-line-number=\"35\"></td><td id=\"file-potusparse-js-v4-output-LC35\">{ name: 'Harry S. Truman', birthday: '1884-05-08' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L36\" data-line-number=\"36\"></td><td id=\"file-potusparse-js-v4-output-LC36\">{ name: 'Dwight D. Eisenhower', birthday: '1890-10-14' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L37\" data-line-number=\"37\"></td><td id=\"file-potusparse-js-v4-output-LC37\">{ name: 'John F. Kennedy', birthday: '1917-05-29' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L38\" data-line-number=\"38\"></td><td id=\"file-potusparse-js-v4-output-LC38\">{ name: 'Lyndon B. Johnson', birthday: '1908-08-27' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L39\" data-line-number=\"39\"></td><td id=\"file-potusparse-js-v4-output-LC39\">{ name: 'Richard Nixon', birthday: '1913-01-09' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L40\" data-line-number=\"40\"></td><td id=\"file-potusparse-js-v4-output-LC40\">{ name: 'Gerald Ford', birthday: '1913-07-14' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L41\" data-line-number=\"41\"></td><td id=\"file-potusparse-js-v4-output-LC41\">{ name: 'Jimmy Carter', birthday: '1924-10-01' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L42\" data-line-number=\"42\"></td><td id=\"file-potusparse-js-v4-output-LC42\">{ name: 'Ronald Reagan', birthday: '1911-02-06' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L43\" data-line-number=\"43\"></td><td id=\"file-potusparse-js-v4-output-LC43\">{ name: 'George H. W. Bush', birthday: '1924-06-12' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L44\" data-line-number=\"44\"></td><td id=\"file-potusparse-js-v4-output-LC44\">{ name: 'Bill Clinton', birthday: '1946-08-19' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L45\" data-line-number=\"45\"></td><td id=\"file-potusparse-js-v4-output-LC45\">{ name: 'George W. Bush', birthday: '1946-07-06' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L46\" data-line-number=\"46\"></td><td id=\"file-potusparse-js-v4-output-LC46\">{ name: 'Barack Obama', birthday: '1961-08-04' },</td></tr><tr><td id=\"file-potusparse-js-v4-output-L47\" data-line-number=\"47\"></td><td id=\"file-potusparse-js-v4-output-LC47\">{ name: 'Donald Trump', birthday: '1946-06-14' }</td></tr><tr><td id=\"file-potusparse-js-v4-output-L48\" data-line-number=\"48\"></td><td id=\"file-potusparse-js-v4-output-LC48\">]</td></tr></tbody></table>\n<h3>Rendering JavaScript Pages</h3>\n<p>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.</p>\n<p>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.</p>\n<p>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.</p>\n<p>Output:</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-reddit-js-v1-L1\" data-line-number=\"1\"></td><td id=\"file-reddit-js-v1-LC1\">const rp = require('request-promise');</td></tr><tr><td id=\"file-reddit-js-v1-L2\" data-line-number=\"2\"></td><td id=\"file-reddit-js-v1-LC2\">const url = 'https://www.reddit.com';</td></tr><tr><td id=\"file-reddit-js-v1-L3\" data-line-number=\"3\"></td><td id=\"file-reddit-js-v1-LC3\"></td></tr><tr><td id=\"file-reddit-js-v1-L4\" data-line-number=\"4\"></td><td id=\"file-reddit-js-v1-LC4\">rp(url)</td></tr><tr><td id=\"file-reddit-js-v1-L5\" data-line-number=\"5\"></td><td id=\"file-reddit-js-v1-LC5\">.then(function(html){</td></tr><tr><td id=\"file-reddit-js-v1-L6\" data-line-number=\"6\"></td><td id=\"file-reddit-js-v1-LC6\">//success!</td></tr><tr><td id=\"file-reddit-js-v1-L7\" data-line-number=\"7\"></td><td id=\"file-reddit-js-v1-LC7\">console.log(html);</td></tr><tr><td id=\"file-reddit-js-v1-L8\" data-line-number=\"8\"></td><td id=\"file-reddit-js-v1-LC8\">})</td></tr><tr><td id=\"file-reddit-js-v1-L9\" data-line-number=\"9\"></td><td id=\"file-reddit-js-v1-LC9\">.catch(function(err){</td></tr><tr><td id=\"file-reddit-js-v1-L10\" data-line-number=\"10\"></td><td id=\"file-reddit-js-v1-LC10\">//handle error</td></tr><tr><td id=\"file-reddit-js-v1-L11\" data-line-number=\"11\"></td><td id=\"file-reddit-js-v1-LC11\">});</td></tr><tr><td id=\"file-reddit-js-v1-L12\" data-line-number=\"12\"></td><td id=\"file-reddit-js-v1-LC12\">}</td></tr></tbody></table>\n<p>Here's what the output looks like:</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-reddit-js-v1-output-L1\" data-line-number=\"1\"></td><td id=\"file-reddit-js-v1-output-LC1\"><!DOCTYPE html><html</td></tr><tr><td id=\"file-reddit-js-v1-output-L2\" data-line-number=\"2\"></td><td id=\"file-reddit-js-v1-output-LC2\">lang=\"en\"><head><title>reddit: the front page of the</td></tr><tr><td id=\"file-reddit-js-v1-output-L3\" data-line-number=\"3\"></td><td id=\"file-reddit-js-v1-output-LC3\">internet</title></td></tr><tr><td id=\"file-reddit-js-v1-output-L4\" data-line-number=\"4\"></td><td id=\"file-reddit-js-v1-output-LC4\">...</td></tr></tbody></table>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*mKzPVGRR4CFKMwQw5y_YnQ.png\"></p>\n<p>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.</p>\n<p>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.</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-reddit-js-v2-L1\" data-line-number=\"1\"></td><td id=\"file-reddit-js-v2-LC1\">const puppeteer = require('puppeteer');</td></tr><tr><td id=\"file-reddit-js-v2-L2\" data-line-number=\"2\"></td><td id=\"file-reddit-js-v2-LC2\">const url = 'https://www.reddit.com';</td></tr><tr><td id=\"file-reddit-js-v2-L3\" data-line-number=\"3\"></td><td id=\"file-reddit-js-v2-LC3\"></td></tr><tr><td id=\"file-reddit-js-v2-L4\" data-line-number=\"4\"></td><td id=\"file-reddit-js-v2-LC4\">puppeteer</td></tr><tr><td id=\"file-reddit-js-v2-L5\" data-line-number=\"5\"></td><td id=\"file-reddit-js-v2-LC5\">.launch()</td></tr><tr><td id=\"file-reddit-js-v2-L6\" data-line-number=\"6\"></td><td id=\"file-reddit-js-v2-LC6\">.then(function(browser) {</td></tr><tr><td id=\"file-reddit-js-v2-L7\" data-line-number=\"7\"></td><td id=\"file-reddit-js-v2-LC7\">return browser.newPage();</td></tr><tr><td id=\"file-reddit-js-v2-L8\" data-line-number=\"8\"></td><td id=\"file-reddit-js-v2-LC8\">})</td></tr><tr><td id=\"file-reddit-js-v2-L9\" data-line-number=\"9\"></td><td id=\"file-reddit-js-v2-LC9\">.then(function(page) {</td></tr><tr><td id=\"file-reddit-js-v2-L10\" data-line-number=\"10\"></td><td id=\"file-reddit-js-v2-LC10\">return page.goto(url).then(function() {</td></tr><tr><td id=\"file-reddit-js-v2-L11\" data-line-number=\"11\"></td><td id=\"file-reddit-js-v2-LC11\">return page.content();</td></tr><tr><td id=\"file-reddit-js-v2-L12\" data-line-number=\"12\"></td><td id=\"file-reddit-js-v2-LC12\">});</td></tr><tr><td id=\"file-reddit-js-v2-L13\" data-line-number=\"13\"></td><td id=\"file-reddit-js-v2-LC13\">})</td></tr><tr><td id=\"file-reddit-js-v2-L14\" data-line-number=\"14\"></td><td id=\"file-reddit-js-v2-LC14\">.then(function(html) {</td></tr><tr><td id=\"file-reddit-js-v2-L15\" data-line-number=\"15\"></td><td id=\"file-reddit-js-v2-LC15\">console.log(html);</td></tr><tr><td id=\"file-reddit-js-v2-L16\" data-line-number=\"16\"></td><td id=\"file-reddit-js-v2-LC16\">})</td></tr><tr><td id=\"file-reddit-js-v2-L17\" data-line-number=\"17\"></td><td id=\"file-reddit-js-v2-LC17\">.catch(function(err) {</td></tr><tr><td id=\"file-reddit-js-v2-L18\" data-line-number=\"18\"></td><td id=\"file-reddit-js-v2-LC18\">//handle error</td></tr><tr><td id=\"file-reddit-js-v2-L19\" data-line-number=\"19\"></td><td id=\"file-reddit-js-v2-LC19\">});</td></tr></tbody></table>\n<p>Output:</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-reddit-js-v2-output-L1\" data-line-number=\"1\"></td><td id=\"file-reddit-js-v2-output-LC1\"><!DOCTYPE html><html lang=\"en\"><head><link</td></tr><tr><td id=\"file-reddit-js-v2-output-L2\" data-line-number=\"2\"></td><td id=\"file-reddit-js-v2-output-LC2\">href=\"//c.amazon-adsystem.com/aax2/apstag.js\" rel=\"preload\"</td></tr><tr><td id=\"file-reddit-js-v2-output-L3\" data-line-number=\"3\"></td><td id=\"file-reddit-js-v2-output-LC3\">as=\"script\"></td></tr><tr><td id=\"file-reddit-js-v2-output-L4\" data-line-number=\"4\"></td><td id=\"file-reddit-js-v2-output-LC4\">...</td></tr></tbody></table>\n<p>Nice! The page is filled with the correct content!</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*N5HtAiijcMEB_fBQvPd7Ow.png\"></p>\n<p>Now we can use Chrome DevTools like we did in the previous example.</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*tHSgjPMvn3M26N2f7Q2B1Q.png\"></p>\n<p>It looks like Reddit is putting the titles inside \"h2\" tags. Let's use Cheerio.js to extract the h2 tags from the page.</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-reddit-js-v3-L1\" data-line-number=\"1\"></td><td id=\"file-reddit-js-v3-LC1\">const puppeteer = require('puppeteer');</td></tr><tr><td id=\"file-reddit-js-v3-L2\" data-line-number=\"2\"></td><td id=\"file-reddit-js-v3-LC2\">const $ = require('cheerio');</td></tr><tr><td id=\"file-reddit-js-v3-L3\" data-line-number=\"3\"></td><td id=\"file-reddit-js-v3-LC3\">const url = 'https://www.reddit.com';</td></tr><tr><td id=\"file-reddit-js-v3-L4\" data-line-number=\"4\"></td><td id=\"file-reddit-js-v3-LC4\"></td></tr><tr><td id=\"file-reddit-js-v3-L5\" data-line-number=\"5\"></td><td id=\"file-reddit-js-v3-LC5\">puppeteer</td></tr><tr><td id=\"file-reddit-js-v3-L6\" data-line-number=\"6\"></td><td id=\"file-reddit-js-v3-LC6\">.launch()</td></tr><tr><td id=\"file-reddit-js-v3-L7\" data-line-number=\"7\"></td><td id=\"file-reddit-js-v3-LC7\">.then(function(browser) {</td></tr><tr><td id=\"file-reddit-js-v3-L8\" data-line-number=\"8\"></td><td id=\"file-reddit-js-v3-LC8\">return browser.newPage();</td></tr><tr><td id=\"file-reddit-js-v3-L9\" data-line-number=\"9\"></td><td id=\"file-reddit-js-v3-LC9\">})</td></tr><tr><td id=\"file-reddit-js-v3-L10\" data-line-number=\"10\"></td><td id=\"file-reddit-js-v3-LC10\">.then(function(page) {</td></tr><tr><td id=\"file-reddit-js-v3-L11\" data-line-number=\"11\"></td><td id=\"file-reddit-js-v3-LC11\">return page.goto(url).then(function() {</td></tr><tr><td id=\"file-reddit-js-v3-L12\" data-line-number=\"12\"></td><td id=\"file-reddit-js-v3-LC12\">return page.content();</td></tr><tr><td id=\"file-reddit-js-v3-L13\" data-line-number=\"13\"></td><td id=\"file-reddit-js-v3-LC13\">});</td></tr><tr><td id=\"file-reddit-js-v3-L14\" data-line-number=\"14\"></td><td id=\"file-reddit-js-v3-LC14\">})</td></tr><tr><td id=\"file-reddit-js-v3-L15\" data-line-number=\"15\"></td><td id=\"file-reddit-js-v3-LC15\">.then(function(html) {</td></tr><tr><td id=\"file-reddit-js-v3-L16\" data-line-number=\"16\"></td><td id=\"file-reddit-js-v3-LC16\">$('h2', html).each(function() {</td></tr><tr><td id=\"file-reddit-js-v3-L17\" data-line-number=\"17\"></td><td id=\"file-reddit-js-v3-LC17\">console.log($(this).text());</td></tr><tr><td id=\"file-reddit-js-v3-L18\" data-line-number=\"18\"></td><td id=\"file-reddit-js-v3-LC18\">});</td></tr><tr><td id=\"file-reddit-js-v3-L19\" data-line-number=\"19\"></td><td id=\"file-reddit-js-v3-LC19\">})</td></tr><tr><td id=\"file-reddit-js-v3-L20\" data-line-number=\"20\"></td><td id=\"file-reddit-js-v3-LC20\">.catch(function(err) {</td></tr><tr><td id=\"file-reddit-js-v3-L21\" data-line-number=\"21\"></td><td id=\"file-reddit-js-v3-LC21\">//handle error</td></tr><tr><td id=\"file-reddit-js-v3-L22\" data-line-number=\"22\"></td><td id=\"file-reddit-js-v3-LC22\">});</td></tr></tbody></table>\n<p>Output:</p>\n<table data-tab-size=\"8\" data-paste-markdown-skip=\"\"><tbody><tr><td id=\"file-reddit-js-v3-output-L1\" data-line-number=\"1\"></td><td id=\"file-reddit-js-v3-output-LC1\">Russian Pipeline. Upvote so that this is the first image people see when they Google \"Russian Pipeline\"</td></tr><tr><td id=\"file-reddit-js-v3-output-L2\" data-line-number=\"2\"></td><td id=\"file-reddit-js-v3-output-LC2\">John F. Kennedy Jr. Sitting in the pilot seat of the Marine One circa 1963</td></tr><tr><td id=\"file-reddit-js-v3-output-L3\" data-line-number=\"3\"></td><td id=\"file-reddit-js-v3-output-LC3\">I didn't take it as a compliment.</td></tr><tr><td id=\"file-reddit-js-v3-output-L4\" data-line-number=\"4\"></td><td id=\"file-reddit-js-v3-output-LC4\">How beautiful is this</td></tr><tr><td id=\"file-reddit-js-v3-output-L5\" data-line-number=\"5\"></td><td id=\"file-reddit-js-v3-output-LC5\">Hustle like Faye</td></tr><tr><td id=\"file-reddit-js-v3-output-L6\" data-line-number=\"6\"></td><td id=\"file-reddit-js-v3-output-LC6\">The power of a salt water crocodile's tail.</td></tr><tr><td id=\"file-reddit-js-v3-output-L7\" data-line-number=\"7\"></td><td id=\"file-reddit-js-v3-output-LC7\">I'm 36, and will be dead inside of a year.</td></tr><tr><td id=\"file-reddit-js-v3-output-L8\" data-line-number=\"8\"></td><td id=\"file-reddit-js-v3-output-LC8\">F***ing genius.</td></tr><tr><td id=\"file-reddit-js-v3-output-L9\" data-line-number=\"9\"></td><td id=\"file-reddit-js-v3-output-LC9\">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.</td></tr><tr><td id=\"file-reddit-js-v3-output-L10\" data-line-number=\"10\"></td><td id=\"file-reddit-js-v3-output-LC10\">Reminder about the fact UC Davis paid over $100k to remove this photo from the internet.</td></tr><tr><td id=\"file-reddit-js-v3-output-L11\" data-line-number=\"11\"></td><td id=\"file-reddit-js-v3-output-LC11\">King of the Hill reruns will start airing on Comedy Central July 24th</td></tr><tr><td id=\"file-reddit-js-v3-output-L12\" data-line-number=\"12\"></td><td id=\"file-reddit-js-v3-output-LC12\">[Image] Slow and steady</td></tr><tr><td id=\"file-reddit-js-v3-output-L13\" data-line-number=\"13\"></td><td id=\"file-reddit-js-v3-output-LC13\">White House: Trump open to Russia questioning US citizens</td></tr><tr><td id=\"file-reddit-js-v3-output-L14\" data-line-number=\"14\"></td><td id=\"file-reddit-js-v3-output-LC14\">Godzilla: King of the Monsters Teaser Banner</td></tr><tr><td id=\"file-reddit-js-v3-output-L15\" data-line-number=\"15\"></td><td id=\"file-reddit-js-v3-output-LC15\">He tried</td></tr><tr><td id=\"file-reddit-js-v3-output-L16\" data-line-number=\"16\"></td><td id=\"file-reddit-js-v3-output-LC16\">Soldier reunited with his dog after being away.</td></tr><tr><td id=\"file-reddit-js-v3-output-L17\" data-line-number=\"17\"></td><td id=\"file-reddit-js-v3-output-LC17\">Hiring a hitman on yourself and preparing for battle is the ultimate extreme sport.</td></tr><tr><td id=\"file-reddit-js-v3-output-L18\" data-line-number=\"18\"></td><td id=\"file-reddit-js-v3-output-LC18\">Two paintballs colliding midair</td></tr><tr><td id=\"file-reddit-js-v3-output-L19\" data-line-number=\"19\"></td><td id=\"file-reddit-js-v3-output-LC19\">My thoughts & prayers are with those ears</td></tr><tr><td id=\"file-reddit-js-v3-output-L20\" data-line-number=\"20\"></td><td id=\"file-reddit-js-v3-output-LC20\">When even your fantasy starts dropping hints</td></tr><tr><td id=\"file-reddit-js-v3-output-L21\" data-line-number=\"21\"></td><td id=\"file-reddit-js-v3-output-LC21\">Elon Musk's apology is out</td></tr><tr><td id=\"file-reddit-js-v3-output-L22\" data-line-number=\"22\"></td><td id=\"file-reddit-js-v3-output-LC22\">\"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)</td></tr><tr><td id=\"file-reddit-js-v3-output-L23\" data-line-number=\"23\"></td><td id=\"file-reddit-js-v3-output-LC23\">Some leaders prefer chess, others prefer hungry hippos. Travis Chapman, oil, 2018</td></tr><tr><td id=\"file-reddit-js-v3-output-L24\" data-line-number=\"24\"></td><td id=\"file-reddit-js-v3-output-LC24\">The S.S. Ste. Claire, retired from ferrying amusement park goers, now ferries The Damned across the river Styx.</td></tr><tr><td id=\"file-reddit-js-v3-output-L25\" data-line-number=\"25\"></td><td id=\"file-reddit-js-v3-output-LC25\">A soldier is reunited with his dog</td></tr><tr><td id=\"file-reddit-js-v3-output-L26\" data-line-number=\"26\"></td><td id=\"file-reddit-js-v3-output-LC26\">*hits blunt*</td></tr><tr><td id=\"file-reddit-js-v3-output-L27\" data-line-number=\"27\"></td><td id=\"file-reddit-js-v3-output-LC27\">Today I Learned</td></tr><tr><td id=\"file-reddit-js-v3-output-L28\" data-line-number=\"28\"></td><td id=\"file-reddit-js-v3-output-LC28\">Black Panther Scene Representing the Pan-African Flag</td></tr><tr><td id=\"file-reddit-js-v3-output-L29\" data-line-number=\"29\"></td><td id=\"file-reddit-js-v3-output-LC29\">The precision of this hydraulic press.</td></tr><tr><td id=\"file-reddit-js-v3-output-L30\" data-line-number=\"30\"></td><td id=\"file-reddit-js-v3-output-LC30\">Let bring the game to another level</td></tr><tr><td id=\"file-reddit-js-v3-output-L31\" data-line-number=\"31\"></td><td id=\"file-reddit-js-v3-output-LC31\">When you're fighting a Dark Souls boss and you gamble to get 'just one extra hit' in instead of rolling out of range.</td></tr><tr><td id=\"file-reddit-js-v3-output-L32\" data-line-number=\"32\"></td><td id=\"file-reddit-js-v3-output-LC32\">\"I check for traps\"</td></tr><tr><td id=\"file-reddit-js-v3-output-L33\" data-line-number=\"33\"></td><td id=\"file-reddit-js-v3-output-LC33\">Anon finds his home at last</td></tr><tr><td id=\"file-reddit-js-v3-output-L34\" data-line-number=\"34\"></td><td id=\"file-reddit-js-v3-output-LC34\">He's hungry</td></tr><tr><td id=\"file-reddit-js-v3-output-L35\" data-line-number=\"35\"></td><td id=\"file-reddit-js-v3-output-LC35\">Being a single mother is a thankless job.</td></tr><tr><td id=\"file-reddit-js-v3-output-L36\" data-line-number=\"36\"></td><td id=\"file-reddit-js-v3-output-LC36\">TIL That when you're pulling out Minigun, you're actually pulling out suitcase that then transforms into Minigun.</td></tr><tr><td id=\"file-reddit-js-v3-output-L37\" data-line-number=\"37\"></td><td id=\"file-reddit-js-v3-output-LC37\">OMG guys don't look!!! 🙈🙈🙈</td></tr><tr><td id=\"file-reddit-js-v3-output-L38\" data-line-number=\"38\"></td><td id=\"file-reddit-js-v3-output-LC38\">hyubsama's emote of his own face denied for political reasons because twitch thinks its a picture of Kim Jong Un</td></tr></tbody></table>\n<h3>Additional Resources</h3>\n<p>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:</p>\n<ul>\n<li><a href=\"https://www.scraperapi.com/blog/the-10-best-rotating-proxy-services-for-web-scraping\">List of web scraping proxy services</a></li>\n<li><a href=\"https://www.scraperapi.com/blog/the-10-best-web-scraping-tools\">List of handy web scraping tools</a></li>\n<li><a href=\"https://www.scraperapi.com/blog/5-tips-for-web-scraping\">List of web scraping tips</a></li>\n<li><a href=\"https://www.scraperapi.com/blog/free-shared-dedicated-datacenter-residential-rotating-proxies-for-web-scraping\">Comparison of web scraping proxies</a></li>\n<li><a href=\"https://github.com/cheeriojs/cheerio\">Cheerio Documentation</a></li>\n<li><a href=\"https://github.com/GoogleChrome/puppeteer\">Puppeteer Documentation</a></li>\n</ul>\n<hr>" | |
| }, | |
| { | |
| "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": "<h1><em><strong>Resume</strong></em></h1>\n<div align=\"center\">\n<h1><strong>Bryan</strong> <strong>Guner</strong></h1>\n<h2><em>551-254-5505 | <a href=\"mailto:[email protected]\">[email protected]</a></em></h2>\n</div>\n<h2>➤Skills</h2>\n<table>\n<thead>\n<tr>\n<th>Languages:</th>\n<th>JavaScript ES-6, NodeJS, HTML5, CSS3, SCSS, Bash Shell, SQL, MATLAB, Python, C++, Mathematica, JSON</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Frameworks / Libraries:</td>\n<td>React, Redux, ExpressJS, Gatsby, NextJS, Ant-Design, Loadash, Sequelize, GraphQL, AJAX, Jest, Mocha, jQuery, Electron</td>\n</tr>\n<tr>\n<td>Databases:</td>\n<td>PostgreSQL, MongoDB, SQlite3</td>\n</tr>\n<tr>\n<td>Tools:</td>\n<td>Figma, Adobe XD, GitHub, GitLab, Excel, VSCode, Sublime Text, Atom, Google Analytics, Bootstrap, Tailwind, FontAwesome</td>\n</tr>\n<tr>\n<td>Tools (continued):</td>\n<td>Docker, Firebase, Postman, Wordpress, Chrome Dev Tools, Jira, Trello, Confluence, Firebase, AWS S3, Okta, Algolia, Loadash</td>\n</tr>\n<tr>\n<td>Hosting:</td>\n<td>Heroku, Netlify, Vercel, Wordpress, Cloudfare, AWS, Firebase, Digital Ocean</td>\n</tr>\n<tr>\n<td>Operating Systems:</td>\n<td>Linux, Windows (WSL), IOS</td>\n</tr>\n</tbody>\n</table>\n<h2>➤Projects</h2>\n<p><strong>Gatsby</strong> <strong>GraphQL-Blog</strong> <strong><a href=\"https://bgoonz-blog.netlify.app/\">Live Site |</a><a href=\"https://github.com/bgoonz/BGOONZ_BLOG_2.0\">GitHub</a></strong></p>\n<p><strong>Stack:</strong> <em>JavaScript, React / Gatsby | GraphQL | SCSS | Lodash | Jamstack | Facebook Comments API | jQuery | Firebase</em></p>\n<p><em><strong>A</strong></em><a href=\"https://bgoonz-blog.netlify.app/\"><em><strong>web development blog</strong></em></a><em><strong>featuring convenient web development tools and interactive content</strong></em></p>\n<ul>\n<li>Implemented 4 Gatsby page models and GraphQL schema to fetch markdown content and feed it into react components.</li>\n<li>Designed and integrated a set of convenient web-hosted <a href=\"https://bgoonz-blog.netlify.app/docs/tools/\">developer tools</a> and GUI interfaces.</li>\n<li>Added interactive content including comments, <a href=\"https://bgoonz-blog.netlify.app/docs/interact/video-chat/\">video conferencing</a>, <a href=\"https://bgoonz-blog.netlify.app/docs/interact/other-sites/\">data-structure visualization</a>, <a href=\"https://bgoonz-blog.netlify.app/docs/interact/\">games</a> and full text search.</li>\n</ul>\n<p><strong>Autonomously Triggered Guitar Effects Platform**</strong> <a href=\"https://bgoonz.github.io/Revamped-Automatic-Guitar-Effect-Triggering/\">Live Site</a>| <a href=\"https://github.com/bgoonz/Revamped-Automatic-Guitar-Effect-Triggering/tree/master/Triggered-Guitar-Effects-Platform\">GitHub</a>**</p>\n<p><strong>Stack:</strong> <em>C++ | Python | MATLAB | PureData</em></p>\n<p><a href=\"https://bgoonz.github.io/Revamped-Automatic-Guitar-Effect-Triggering/SR%20Project%20II%20Presentation.pdf\"><em><strong>Platform</strong></em></a><em><strong>designed to analyze a time sequence of notes and autonomously trigger guitar effects at</strong></em><a href=\"https://youtu.be/pRKjaprdWx4\"><em><strong>a predetermined point in the song</strong></em></a></p>\n<ul>\n<li>Used pure data to filter a guitar signal before executing frequency domain analysis and implementing <a href=\"https://youtu.be/krRVGoK9NcA\">custom built guitar effects.</a></li>\n<li>Implemented the Dynamic Time Warping algorithm in C++ and Python to generate a time agnostic measure of similarity between performances.</li>\n<li>Autonomously activated or adjusted guitar effects at multiple pre-designated sections of performance.</li>\n</ul>\n<hr>\n<p><strong>Data Structures</strong> <a href=\"https://ds-algo-official.netlify.app/\"><strong>Interactive Teaching Tool</strong></a><a href=\"https://ds-algo-official.netlify.app/\"><strong>Live Site</strong></a> <strong>|**</strong> <a href=\"https://github.com/bgoonz/DS-ALGO-OFFICIAL\">GitHub</a>**</p>\n<p><strong>Stack:</strong> <em>jQuery | ExpressJS | Google Analytics |Algolia Full Text Search | Amazon S3</em></p>\n<p><em><strong>A</strong></em><a href=\"https://youtu.be/onquAh1Bl0g\"><em><strong>website</strong></em></a><em><strong>for visualizing and practicing data structures and algorithms in JavaScript & Python</strong></em></p>\n<ul>\n<li>Implemented an repl.it backend to enable commenting using express and the fs <strong>module</strong> to write user comments to a storage.json file.</li>\n<li>Developed proprietary npm package to recursively walk the project directory structure and generate a <a href=\"https://ds-algo-official.netlify.app/sitemap.html\">site navigation page</a>.</li>\n<li>Created multiple embedded data structure visualizations that interact with user input.</li>\n<li>Automated the generation and submission of a <a href=\"https://ds-algo-official.netlify.app/sitemap.xml\">sitemap</a>to (Google, Bing, and Yandex) on every build.</li>\n</ul>\n<hr>\n<br>\n<h2>➤ Experience</h2>\n<p><strong>Product Development Engineer |</strong> <a href=\"https://www.cembre.com/\"><em><strong>Cembre</strong></em></a><em><strong>, Edison, NJ</strong>\\</em>_|_<strong>Oct 2019 - Mar 2020</strong></p>\n<ul>\n<li>Converted client's product needs into <a href=\"https://www.cembre.com/family/details/5202\">technical specs</a> to be sent to the development team in Italy.</li>\n<li>Reorganized internal file server structure and conducted system integration and product demonstrations.</li>\n<li>Presided over internal and end user software trainings in addition to producing customer facing documentation.</li>\n<li>Conducted <a href=\"https://drive.google.com/drive/folders/1USAQtiQ3jLm3fiRCxIm4TEkWGlq4fO6j?usp=sharing\">electrical conductivity & tensile testing of electrical components</a> and presided over troubleshooting railroad hardware and software in North America.</li>\n</ul>\n<p><a href=\"https://familypromise.org/\"><strong>Family Promise</strong></a> <strong>Service Tracker</strong></p>\n<p><strong>Full Stack Web Development Intern | Remote | Sept 2021 - Present</strong> <strong><a href=\"https://a.familypromiseservicetracker.dev/\">Live Site |</a><a href=\"https://github.com/Lambda-School-Labs/family-promise-service-tracker-fe-a\">GitHub</a></strong></p>\n<p><strong>Stack:</strong> <em>React | Redux | ExpressJS | Figma | Okta | AWS</em></p>\n<p><em><strong>An</strong></em><a href=\"https://bryan-guner.gitbook.io/lambda-labs/navigation/roadmap\"><em><strong>app</strong></em></a><em><strong>built to helps local communities provide services to address the root causes of family homelessness</strong></em></p>\n<ul>\n<li>Collaborated on state management using Redux to handle application state and middleware using redux-promise & redux-thunk.</li>\n<li>Built two graphic visuals of the user hierarchy and the scope of their permissions as well as maintained the team's <a href=\"https://bryan-guner.gitbook.io/my-docs/v/lambda-labs/\">docs</a>.</li>\n<li>Created Figma UI mockups for possible future developments, such as displaying metrics data and map pinpoint functionality.</li>\n</ul>\n<br>\n<hr>\n<h2>➤ Education</h2>\n<h4><a href=\"https://www.credly.com/badges/bd145ba3-0f09-42fc-8d1f-a3bc4e0a46b4/public_url\"><strong>Lambda School</strong></a> , <em><strong>Full Stack Web Development</strong></em></h4>\n<blockquote>\n<p><em><strong>May 2020 - Nov 2021</strong></em></p>\n</blockquote>\n<p>Six-month immersive software development course with a focus on <a href=\"https://gist.github.com/bgoonz/17494dab0042a6f70eda7929c08c878f\">full stack web development</a>. Over 2000 hours of work invested including class time, homework, and projects.</p>\n<p><strong>B.S.</strong> <a href=\"https://electrical-computerengineering.tcnj.edu/\"><strong>Electrical Engineering</strong></a> <strong>, TCNJ, Ewing NJ</strong> <strong>2014 - 2019</strong></p>\n<p><a href=\"https://github.com/bgoonz/random-static-html-page-deploy/blob/master/ElectricalEngineeringCurriculum.pdf\">2 <strong>Curriculum link</strong></a></p>\n<blockquote>\n<p><a href=\"https://bryan-guner.gitbook.io/my-docs/v/electrical-engineering/\">Knowledge of</a> circuit boards, processors, chips, electronic equipment, and computer hardware and software, including applications and programming.</p>\n</blockquote>\n<div align=\"center\">\n<p><em><strong>References & further work experience available upon request.</strong></em></p>\n</div>" | |
| }, | |
| { | |
| "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": "<div align=\"center\">\n<h1>Hi 👋, I'm Bryan</h1>\n \n<img align=\"center\" src=\"https://github.com/bgoonz/bgoonz/blob/master/circle-small-sharp.png?raw=true?raw=true\" ></img>\n<blockquote>\n<p>Netlify Research Program Participant!</p>\n</blockquote>\n<h4><a href=\"https://master--bgoonz-blog.netlify.app/\">WEBSITE</a> ⇄ <a href=\"https://bg-portfolio.netlify.app/\">Portfolio</a> ⇄ <a href=\"https://webdevhub.jetbrains.space/oauth/auth/invite/419dd305ba717a392a02aa5b4e41e09c\">Collaborate</a> ⇄ <a href=\"https://unruffled-curran-b8a076.netlify.app/my-websites.html\">Other-Websites</a></h4>\n<p><img src=\"https://views.whatilearened.today/views/github/bgoonz/views.svg\" alt=\"Profile views\"><a href=\"https://gitter.im/bgoonz/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge\"><img src=\"https://badges.gitter.im/bgoonz/community.svg\" alt=\"Gitter\"></a><a href=\"https://hackmd.io/5DeYj2oXTvGJ1-Xvp1Jo2Q\"><img src=\"https://hackmd.io/5DeYj2oXTvGJ1-Xvp1Jo2Q/badge\" alt=\"hackmd-github-sync-badge\"></a><a href=\"https://github.com/bgoonz?tab=followers\"><img src=\"https://img.shields.io/github/followers/bgoonz.svg?style=social&label=Follow&maxAge=2592000\" alt=\"GitHub followers\"></a></p>\n<h3>➤ <em>Email</em> <a href=\"#\">[email protected]</a> <em>Phone</em> <a href=\"551-254-5505\">551-254-5505</a></h3>\n<h4 align=\"center\">A passionate Web Developer, Electrical Engineer, Musician & Producer</h4>\n<details>\n<summary> See More </summary> \n<img align=\"center\" src=\"https://readme-jokes.vercel.app/api\" stye=\"width:570; height:420;\">\n<p><a href=\"https://bg-portfolio.netlify.app/\"><img src=\"https://img.shields.io/badge/-%E2%9D%A4_Portfolio-f58?style=flat-square&logo=a&logoColor=white&link=https://bg-portfolio.netlify.app/\" alt=\"Portfolio\"></a>\n<a href=\"https://github.com/bgoonz/resume-cv-portfolio-samples/blob/master/2021-resume/bryan-guner-resume-2021.pdf\" download><img src=\"https://img.shields.io/badge/-Resume-f00?style=flat-square&logo=adobe-acrobat-reader&logoColor=white\" alt=\"Resume PDF\"></a>\n<a href=\"mailto:[email protected]\"><img src=\"https://img.shields.io/badge/[email protected]?style=flat-square&logo=gmail&logoColor=black&link=mailto:[email protected]\" alt=\"Bryan's email\"></a>\n<a href=\"https://web-dev-hub.com/\"><img src=\"https://img.shields.io/badge/-Blog-21759b?style=flat-square&logo=WordPress&logoColor=white&link=https://web-dev-hub.com/\" alt=\"Blog\"></a>\n<a href=\"https://www.linkedin.com/in/bryan-guner-046199128/\"><img src=\"https://img.shields.io/badge/-LinkedIn-0077b5?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/bryan-guner-046199128/\" alt=\"Linkedin\"></a>\n<a href=\"https://angel.co/u/bryan-guner\"><img src=\"https://img.shields.io/badge/-AngelList-black?style=flat-square&logo=AngelList&logoColor=white&link=https://angel.co/u/bryan-guner\" alt=\"AngelList\"></a>\n<a href=\"https://github.com/bgoonz\"><img src=\"https://img.shields.io/github/followers/bgoonz?label=follow&style=social\" alt=\"GitHub bgoonz\"></a></p>\n<p align=\"center\">\n <a href=\"mailto:[email protected]\"><img src=\"https://img.icons8.com/color/96/000000/gmail.png\" alt=\"email\"/></a><a href=\"https://www.facebook.com/bryan.guner/\"><img src=\"https://img.icons8.com/color/96/000000/facebook.png\" alt=\"facebook\"/></a><a href=\"https://twitter.com/bgooonz\"><img src=\"https://img.icons8.com/color/96/000000/twitter-squared.png\" alt=\"twitter\"/></a><a href=\"https://www.youtube.com/channel/UC9-rYyUMsnEBK8G8fCyrXXA/videos\"><img src=\"https://img.icons8.com/color/96/000000/youtube.png\" alt=\"youtube\"/></a><a href=\"https://www.instagram.com/bgoonz/?hl=en\"><img src=\"https://img.icons8.com/color/96/000000/instagram-new.png\" alt=\"instagram\"/></a><a href=\"https://www.linkedin.com/in/bryan-guner-046199128/\"><img src=\"https://img.icons8.com/color/96/000000/linkedin.png\" alt=\"linkedin\"/></a>\n <a href=\"https://bryanguner.medium.com/\"><img src=\"https://img.icons8.com/color/96/000000/medium-logo.png\" alt=\"medium\"/></a><a href=\"https://open.spotify.com/user/bgoonz?si=ShH9wYbIQWab5Jz_30BKFw\"><img src=\"https://img.icons8.com/color/96/000000/spotify--v1.png\" alt=\"spotify\"/></a>\n </p>\n \n \n \n[](https://github.com/bgoonz/github-readme-activity-graph)\n<div align=\"center\">\n<h3 align=\"center\">Languages and Tools:</h3>\n<p align=\"left\"> <a href=\"https://www.arduino.cc/\" target=\"_blank\"> <img src=\"https://cdn.worldvectorlogo.com/logos/arduino-1.svg\" alt=\"arduino\" width=\"40\" height=\"40\"/> </a> <a href=\"https://aws.amazon.com\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/amazonwebservices/amazonwebservices-original-wordmark.svg\" alt=\"aws\" width=\"40\" height=\"40\"/> </a> <a href=\"https://azure.microsoft.com/en-in/\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/microsoft_azure/microsoft_azure-icon.svg\" alt=\"azure\" width=\"40\" height=\"40\"/> </a> <a href=\"https://babeljs.io/\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/babeljs/babeljs-icon.svg\" alt=\"babel\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.gnu.org/software/bash/\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/gnu_bash/gnu_bash-icon.svg\" alt=\"bash\" width=\"40\" height=\"40\"/> </a> <a href=\"https://getbootstrap.com\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/bootstrap/bootstrap-plain-wordmark.svg\" alt=\"bootstrap\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.w3schools.com/cpp/\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/cplusplus/cplusplus-original.svg\" alt=\"cplusplus\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.w3schools.com/css/\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg\" alt=\"css3\" width=\"40\" height=\"40\"/> </a> <a href=\"https://d3js.org/\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/d3js/d3js-original.svg\" alt=\"d3js\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.docker.com/\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg\" alt=\"docker\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.elastic.co\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/elastic/elastic-icon.svg\" alt=\"elasticsearch\" width=\"40\" height=\"40\"/> </a> <a href=\"https://emberjs.com/\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/ember/ember-original-wordmark.svg\" alt=\"ember\" width=\"40\" height=\"40\"/> </a> <a href=\"https://expressjs.com\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/express/express-original-wordmark.svg\" alt=\"express\" width=\"40\" height=\"40\"/> </a> <a href=\"https://firebase.google.com/\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/firebase/firebase-icon.svg\" alt=\"firebase\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.gatsbyjs.com/\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/gatsbyjs/gatsbyjs-icon.svg\" alt=\"gatsby\" width=\"40\" height=\"40\"/> </a> <a href=\"https://cloud.google.com\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/google_cloud/google_cloud-icon.svg\" alt=\"gcp\" width=\"40\" height=\"40\"/> </a> <a href=\"https://git-scm.com/\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg\" alt=\"git\" width=\"40\" height=\"40\"/> </a> <a href=\"https://heroku.com\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/heroku/heroku-icon.svg\" alt=\"heroku\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.w3.org/html/\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg\" alt=\"html5\" width=\"40\" height=\"40\"/> </a> <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg\" alt=\"javascript\" width=\"40\" height=\"40\"/> </a> <a href=\"https://jekyllrb.com/\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/jekyllrb/jekyllrb-icon.svg\" alt=\"jekyll\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.linux.org/\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/linux/linux-original.svg\" alt=\"linux\" width=\"40\" height=\"40\"/> </a> <a href=\"https://mochajs.org\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/mochajs/mochajs-icon.svg\" alt=\"mocha\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.mongodb.com/\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/mongodb/mongodb-original-wordmark.svg\" alt=\"mongodb\" width=\"40\" height=\"40\"/> </a> <a href=\"https://nextjs.org/\" target=\"_blank\"> <img src=\"https://cdn.worldvectorlogo.com/logos/nextjs-3.svg\" alt=\"nextjs\" width=\"40\" height=\"40\"/> </a> <a href=\"https://nodejs.org\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original-wordmark.svg\" alt=\"nodejs\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.photoshop.com/en\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/photoshop/photoshop-line.svg\" alt=\"photoshop\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.postgresql.org\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/postgresql/postgresql-original-wordmark.svg\" alt=\"postgresql\" width=\"40\" height=\"40\"/> </a> <a href=\"https://postman.com\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/getpostman/getpostman-icon.svg\" alt=\"postman\" width=\"40\" height=\"40\"/> </a> <a href=\"https://pugjs.org\" target=\"_blank\"> <img src=\"https://cdn.worldvectorlogo.com/logos/pug.svg\" alt=\"pug\" width=\"40\" height=\"40\"/> </a> <a href=\"https://github.com/puppeteer/puppeteer\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/pptrdev/pptrdev-official.svg\" alt=\"puppeteer\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.python.org\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg\" alt=\"python\" width=\"40\" height=\"40\"/> </a> <a href=\"https://reactjs.org/\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg\" alt=\"react\" width=\"40\" height=\"40\"/> </a> <a href=\"https://reactnative.dev/\" target=\"_blank\"> <img src=\"https://reactnative.dev/img/header_logo.svg\" alt=\"reactnative\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.typescriptlang.org/\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg\" alt=\"typescript\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.vagrantup.com/\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/vagrantup/vagrantup-icon.svg\" alt=\"vagrant\" width=\"40\" height=\"40\"/> </a> <a href=\"https://webpack.js.org\" target=\"_blank\"> <img src=\"https://raw.githubusercontent.com/devicons/devicon/d00d0969292a6569d45b06d3f350f463a0107b0d/icons/webpack/webpack-original-wordmark.svg\" alt=\"webpack\" width=\"40\" height=\"40\"/> </a> <a href=\"https://www.adobe.com/products/xd.html\" target=\"_blank\"> <img src=\"https://cdn.worldvectorlogo.com/logos/adobe-xd.svg\" alt=\"xd\" width=\"40\" height=\"40\"/> </a> <a href=\"https://zapier.com\" target=\"_blank\"> <img src=\"https://www.vectorlogo.zone/logos/zapier/zapier-icon.svg\" alt=\"zapier\" width=\"40\" height=\"40\"/> </a> </p> \n \n </div>\n<div align=\"center\">\n \n<p><img align=\"center\" src=\"https://github-readme-streak-stats.herokuapp.com/?user=bgoonz&\" alt=\"bgoonz\" /><img align=\"center\" src=\"https://github-readme-stats.vercel.app/api?username=bgoonz&show_icons=true&locale=en\" alt=\"bgoonz\" /></p>\n<p><a href=\"https://github.com/bgoonz/Lambda\"><img src=\"https://github-readme-stats.vercel.app/api/pin/?username=bgoonz&repo=Lambda\" alt=\"ReadMe Card\"></a>\n<a href=\"https://github.com/bgoonz/DS-ALGO-OFFICIAL\"><img src=\"https://github-readme-stats.vercel.app/api/pin/?username=bgoonz&repo=DS-ALGO-OFFICIAL\" alt=\"ReadMe Card\"></a></p>\n<p><a href=\"https://github.com/bgoonz/github-profile-trophy\"><img src=\"https://github-profile-trophy.vercel.app/?username=bgoonz&row=1\" alt=\"trophy\"></a></p>\n<p><a href=\"https://github.com/bgoonz/BGOONZ_BLOG_2.0\"><img src=\"https://github-readme-stats.vercel.app/api/pin/?username=bgoonz&repo=BGOONZ_BLOG_2.0\" alt=\"ReadMe Card\"></a></p>\n<p><a href=\"https://github.com/bgoonz/github-readme-stats\"><img src=\"https://github-readme-stats.vercel.app/api/top-langs/?username=bgoonz&layout=compact&hide=html,mathematica&langs_count=16\" alt=\"Top Langs\"></a></p>\n</div>\n</div>\n<center>\n<details>\n<summary>About Me</summary>\n<ul>\n<li>🔭 Contract Web Development <strong>Relational Concepts</strong></li>\n<li>🌱 I'm currently learning <strong>React/Redux, Python, Java, Express, jQuery</strong></li>\n<li>👯 I'm looking to collaborate on <a href=\"https://goofy-euclid-1cd736.netlify.app/core-site/index.html\">Any web audio or open source educational tools.</a></li>\n<li>🤝 I'm looking for help with <a href=\"https://github.com/bgoonz/React-Practice\">Learning React</a></li>\n<li>👨💻 All of my projects are available at <a href=\"https://bgoonz.github.io/\">https://bgoonz.github.io/</a></li>\n<li>📝 I regularly write articles on <a href=\"https://bryanguner.medium.com/\">medium</a> && <a href=\"https://web-dev-resource-hub.netlify.app/\">Web-Dev-Resource-Hub</a></li>\n<li>💬 Ask me about <strong>Anything:</strong></li>\n<li>📫 How to reach me <strong>[email protected]</strong></li>\n<li>⚡ Fun fact <strong>I played Bamboozle Music Festival at the Meadowlands Stadium Complex when I was 14.</strong></li>\n</ul>\n<h3>i really like music :headphones:</h3>\n<h4>What's the most useful business-related book you've ever read?</h4>\n<blockquote>\n<p>A Random Walk Down Wall Street</p>\n</blockquote>\n<h4>What's your favorite non-business book?</h4>\n<blockquote>\n<p>Hitchhiker's Guide To The Galaxy</p>\n</blockquote>\n<h4>If money were not an issue, what would you be doing right now?</h4>\n<blockquote>\n<p>Designing recording software/hardware and using it</p>\n</blockquote>\n<h4>What words of advice would you give your younger self?</h4>\n<blockquote>\n<p>Try harder and listen to your parents more (the latter bit of advice would be almost certain to fall on deaf ears lol)</p>\n</blockquote>\n<h4>What's the most creative thing you've ever done?</h4>\n<blockquote>\n<p>I built a platform that listens to a guitarist's performance and automatically triggers guitar effects at the appropriate time in the song.</p>\n</blockquote>\n<h4>Which founders or startups do you most admire?</h4>\n<blockquote>\n<p>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.</p>\n</blockquote>\n<h4>What's your super power?</h4>\n<blockquote>\n<p>Having really good ideas and forgetting them moments later.</p>\n</blockquote>\n<h4>What's the best way for people to get in touch with you?</h4>\n<blockquote>\n<p>A text</p>\n</blockquote>\n<h4>What aspects of your work are you most passionate about?</h4>\n<p>Creating things that change my every day life.</p>\n<h4>What was the most impactful class you took in school?</h4>\n<blockquote>\n<p>Modern Physics... almost changed my major after that class... but at the end of the day engineering was a much more fiscally secure avenue.</p>\n</blockquote>\n<h4>What's something you wish you had done years earlier?</h4>\n<blockquote>\n<p>Learned to code ... and sing</p>\n</blockquote>\n<h4>What words of wisdom do you live by?</h4>\n<blockquote>\n<p>*Disclaimer: The following wisdom is very cliche ... but... \"Be the change that you wish to see in the world.\"</p>\n</blockquote>\n<blockquote>\n<p>Mahatma Gandhi</p>\n</blockquote>\n<p>| | ## Portfolio:</p>\n<h1><a href=\"https://portfolio42.netlify.app/\">netlify</a> |</h1>\n<p>| :------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| <strong>Languages</strong> | <img src=\"https://img.shields.io/badge/Lang-HTML5-informational?style=flat&logo=HTML5&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Lang-CSS-informational?style=flat&logo=CSS%20Wizardry&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Lang-JavaScript-informational?style=flat&logo=JavaScript&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Lang-SQL-informational?style=flat&logo=SQL&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Lang-Java-informational?style=flat&logo=Java&logoColor=white&color=00FF00\"> <br /><img src=\"https://img.shields.io/badge/Lang-Python-informational?style=flat&logo=Python&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Lang-TypeScript-informational?style=flat&logo=TypeScript&logoColor=white&color=00FF00\"> |\n| <strong>Libraries</strong> | <img src=\"https://img.shields.io/badge/Lib-Bootstrap-informational?style=flat&logo=Bootstrap&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Lib-React-informational?style=flat&logo=React&logoColor=white&color=00FF00\"> |\n| <strong>Frameworks</strong> | <img src=\"https://img.shields.io/badge/FW-Redux-informational?style=flat&logo=Redux&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/FW-Node.js-informational?style=flat&logo=Node.js&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/FW-Express-informational?style=flat&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/FW-PowerShell-informational?style=flat&logo=PowerShell&logoColor=white&color=00FF00\"> |\n| <strong>Databases</strong> | <img src=\"https://img.shields.io/badge/DB-PostgreSQL-informational?style=flat&logo=PostgreSQL&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/DB-MySQL-informational?style=flat&logo=MySQL&logoColor=white&color=00FF00\"> |\n| <strong>Testing</strong> | <img src=\"https://img.shields.io/badge/Test-Jest-informational?style=flat&logo=Jest&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Test-Cypress-informational?style=flat&logo=Cypress&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Test-JUnit-informational?style=flat&logo=JUnit&logoColor=white&color=00FF00\"> |\n| <strong>Other</strong> | <img src=\"https://img.shields.io/badge/Editor-VS%20Code-informational?style=flat&logo=visualstudiocode&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Editor-IntelliJ%20IDEA-informational?style=flat&logo=intellijidea&logoColor=white&color=00FF00\"> <br /><img src=\"https://img.shields.io/badge/Tools-ESLint-informational?style=flat&logo=ESLint&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Tools-Postman-informational?style=flat&logo=Postman&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Tools-Git-informational?style=flat&logo=Git&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Tools-GitHub-informational?style=flat&logo=GitHub&logoColor=white&color=00FF00\"> <br /><img src=\"https://img.shields.io/badge/OS-Windows%2010-informational?style=flat&logo=Windows&logoColor=white&color=00FF00\"> <br /><img src=\"https://img.shields.io/badge/Code-LESS-informational?style=flat&logoColor=white&color=00FF00\"> <img src=\"https://img.shields.io/badge/Code-Emmet-informational?style=flat&logoColor=white&color=00FF00\"> |</p>\n </div>\n</details>\n<!-- start work experience section -->\n<details>\n<summary> Resume </summary>\n<h1>➤ Technical Skills</h1>\n<table>\n<thead>\n<tr>\n<th><strong>Programming**</strong> Languages:**</th>\n<th>JavaScript ES-6, NodeJS, React, HTML5, CSS3, SCSS, Bash Shell, Excel, SQL, NoSQL, MATLAB, Python, C++</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong>Databases:</strong></td>\n<td>PostgreSQL, MongoDB</td>\n</tr>\n<tr>\n<td><strong>Cloud:</strong></td>\n<td>Docker, AWS, Google App Engine, Netlify, Digital Ocean, Heroku, Azure Cloud Services</td>\n</tr>\n<tr>\n<td><strong>OS:</strong></td>\n<td>Linux, Windows (WSL), IOS</td>\n</tr>\n<tr>\n<td><strong>Agile:</strong></td>\n<td>GitHub, BitBucket, Jira, Confluence</td>\n</tr>\n<tr>\n<td><strong>IDEs:</strong></td>\n<td>VSCode, Visual Studio, Atom, Code Blocks, Sublime Text 3, Brackets</td>\n</tr>\n</tbody>\n</table>\n<hr>\n<p><a href=\"#experience\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h1>➤ Experience</h1>\n<table>\n<thead>\n<tr>\n<th><strong>Relational Concepts:</strong> Hallandale Beach, FL</th>\n<th>March 2020 - Present</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong>Front End Web Developer</strong></td>\n<td></td>\n</tr>\n<tr>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<ul>\n<li>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.</li>\n<li>Designed mock-up screens, wireframes, and workflows for intuitive user experience.</li>\n<li>Migrated existing multi-page user experience into singular page interfaces using React components.</li>\n<li>Participated in every stage of the design from conception through development and iterative improvement.</li>\n<li>Produced user stories and internal documentation for future site development and maintenance.</li>\n<li>Implemented modern frameworks including Bootstrap and Font-Awesome to give the site an aesthetic overhaul.</li>\n<li>Managed all test deployments using a combination of Digital Ocean and Netlify.</li>\n<li>Produced unit tests using a combination of Mocha and Chai.</li>\n<li>Injected Google Analytics to capture pertinent usage data to produce an insightful dashboard experience.</li>\n</ul>\n<table>\n<thead>\n<tr>\n<th><strong>Environment:</strong></th>\n<th><strong>JavaScript, JQuery, React, HTML5 & CSS, Bootstrap, DOJO, Google Cloud, Bash Script</strong></th>\n</tr>\n</thead>\n<tbody>\n</tbody>\n</table>\n<table>\n<thead>\n<tr>\n<th><strong>Cembre:</strong> Edison, NJ</th>\n<th>Nov 2019 - Mar 2020</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong>Product Development Engineer</strong></td>\n<td></td>\n</tr>\n<tr>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<ul>\n<li>Converted client's product needs into technical specs to be sent to the development team in Italy.</li>\n<li>Reorganized internal file server structure.</li>\n<li>Conducted remote / in person system integration and product demonstrations.</li>\n<li>Presided over internal and end user software trainings in addition to producing the corresponding documentation.</li>\n<li>Served as the primary point of contact for troubleshooting railroad hardware and software in the North America.</li>\n</ul>\n<table>\n<thead>\n<tr>\n<th><strong>Environment:</strong></th>\n<th><strong>Excel, AutoCAD, PowerPoint, Word</strong></th>\n</tr>\n</thead>\n<tbody>\n</tbody>\n</table>\n<hr>\n<p><a href=\"#education\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h1>➤ Education</h1>\n<table>\n<thead>\n<tr>\n<th>**B.S. Electrical Engineering, TCNJ, ** Ewing NJ</th>\n<th>2014 - 2019</th>\n</tr>\n</thead>\n<tbody>\n</tbody>\n</table>\n<p><strong>Capstone Project - Team Lead</strong></p>\n<ul>\n<li>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.</li>\n<li>Implemented the Dynamic Time Warping algorithm in C++ and Python to autonomously activate or adjust guitar effect at multiple pre-designated section of performance.</li>\n</ul>\n<table>\n<thead>\n<tr>\n<th><strong>Environment:</strong></th>\n<th><strong>C++, Python, MATLAB, PureData</strong></th>\n</tr>\n</thead>\n<tbody>\n</tbody>\n</table>\n</details>\n<details>\n<summary> My Projects</summary>\n<table>\n <thead>\n <tr>\n <th>Project Name</th>\n <th>Skills used</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><a href='https://web-dev-resource-hub.netlify.app/'>Web-Dev-Resource-Hub (blog)</a></td>\n <td>Html, Css, javascript, Python, jQuery, React, FireBase, AWS S3, Netlify, Heroku, NodeJS, PostgreSQL, C++, Web Audio API</td>\n <td>My 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.</td>\n </tr>\n <tr>\n <td><a href='https://project-showcase-bgoonz.netlify.app/'>Dynamic Guitar Effects Triggering Using A Modified Dynamic Time Warping Algorithm</a></td>\n <td>C, C++, Python, Java, Pure Data, Matlab</td>\n <td>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.Implemented the Dynamic Time Warping algorithm in C++ and Python to autonomously activate or adjust guitar effect at multiple pre-designated section of performance.</td>\n </tr>\n <tr>\n <td><a href=\"https://trusting-dijkstra-4d3b17.netlify.app/\">Data Structures & Algorithms Interactive Learning Site</a></td>\n <td>HTML, CSS, Javascript, Python, Java, jQuery, Repl.it-Database API</td>\n <td>A 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</td>\n </tr>\n <tr>\n <td><a href='https://mihirbegmusic.netlify.app/'>MihirBeg.com</a></td>\n <td>Html, Css, Javascript, Bootstrap, FontAwesome, jQuery</td>\n <td>A responsive and mobile friendly content promotion site for an Audio Engineer to engage with fans and potential clients</td>\n </tr>\n <tr>\n <td><a href='https://tetris42.netlify.app/'>Tetris-JS</a></td>\n <td>Html, Css, Javascript</td>\n <td>The classic game of tetris implemented in plain javascipt and styled with a retro-futureistic theme</td>\n </tr>\n <tr>\n <td><a href=\"https://githtmlpreview.netlify.app/\">Git Html Preview Tool</a></td>\n <td>Git, Javascript, CSS3, HTML5, Bootstrap, BitBucket</td>\n <td>Loads 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.</td>\n </tr>\n <tr>\n <td><a href='https://project-showcase-bgoonz.netlify.app/'>Mini Project Showcase</a></td>\n <td>HTML, HTML5, CSS, CSS3, Javascript, jQuery</td>\n <td>add 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.</td>\n </tr>\n \n </tbody>\n<p align=\"center\">\n<hr>\n<hr>\n<hr>\n<hr>\n<div style=\" border: 1px solid black\">\n<img src=\"https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/23b9b236-746e-409c-8e86-30b4385e3b72/hr1-raypham.gif\" alt=\"hr-line\" width=\"100%\" height=\"22\">\n</div>\n<hr>\n<hr>\n<h1><a href=\"https://ecstatic-jang-593fd1.netlify.app/readme\">Learning React Blog</a></h1>\n<h4>React Repo:</h4>\n<p><a href=\"https://github.com/bgoonz/React-Practice\">React Repo</a></p>\n<hr>\n<h2><a href=\"https://codesandbox.io/embed/zealous-microservice-ti7em?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&moduleview=1&theme=dark\" style=\"width:100%; height:20px; border:0; border-radius: 4px; overflow:hidden;\" rel=\"React Todo\"><img src=\"https://codesandbox.io/static/img/play-codesandbox.svg\" alt=\"Foo\"></a></h2>\n<div style=\" border: 1px solid black\">\n<img src=\"https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/23b9b236-746e-409c-8e86-30b4385e3b72/hr1-raypham.gif\" alt=\"hr-line\" width=\"100%\" height=\"22\">\n</div>\n<h1><a href=\"https://documentation-site-react2-peitff669-bgoonz.vercel.app/\">react-documentation-site</a></h1>\n<p><a href=\"https://codesandbox.io/s/magical-stallman-ov0d1?autoresize=1&expanddevtools=1&fontsize=12&hidenavigation=1&moduleview=1&theme=dark\"><img src=\"https://codesandbox.io/static/img/play-codesandbox.svg\" alt=\"Edit magical-stallman-ov0d1\"></a></p>\n<div style=\" border: 1px solid black\">\n<img src=\"https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/23b9b236-746e-409c-8e86-30b4385e3b72/hr1-raypham.gif\" alt=\"hr-line\" width=\"100%\" height=\"22\">\n</div>\n<hr>\n<h2>➤ Codepens (mostly embeded animations)</h2>\n<h1><a href=\"https://embedable-content.netlify.app/\">code-pens-embedded</a></h1>\n<p><a href=\"#weekly-quick-snips\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h2>➤ Weekly-Quick-Snips:</h2>\n<hr>\n<h4>Snippet of the Day:</h4>\n<h3>replaceAll</h3>\n<p>the method string.replaceAll(search, replaceWith) replaces all appearances of search string with replaceWith.</p>\n<pre><code class=\"language-javascript\">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</code></pre>\n<hr>\n<h3>Fibonacci in Python:</h3>\n<pre><code class=\"language-py\">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</code></pre>\n<hr>\n<h4>Yesterday's Snippet of the day:</h4>\n<hr>\n<pre><code class=\"language-py\">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</code></pre>\n<hr>\n<details>\n \n <summary>See Older Snippets!</summary>\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<p>[<img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\">]</p>\n<p>for file in *; do mv \"$file\" <code>echo $file | tr ' ' '_'</code> ; done\nif [[ -d \"${f}\" ]]; then\ncd \"${f}\"\nRecurseDirs $(ls -1 \".\")\ncd ..\nfi\ndone\nIFS=$oldIFS\n}\nRecurseDirs \"./\"</p>\n<pre><code> ---\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</code></pre>\n<hr>\n<h3>Append Files in PWD</h3>\n<pre><code class=\"language-js\">//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</code></pre>\n<hr>\n<h3>doesUserFrequentStarbucks.js</h3>\n<pre><code class=\"language-js\">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</code></pre>\n<hr>\n<h3>arr-intersection.js</h3>\n<pre><code class=\"language-js\">/*\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</code></pre>\n<hr>\n<h3>arr-of-cum-partial-sums.js</h3>\n<pre><code class=\"language-js\">/*\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</code></pre>\n<hr>\n<h3>camel2Kabab.js</h3>\n<pre><code class=\"language-js\">function camelToKebab(value) {\n return value.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n</code></pre>\n<hr>\n<h3>camelCase.js</h3>\n<pre><code class=\"language-js\">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</code></pre>\n<hr>\n<h3>concatLinkedLists.js</h3>\n<pre><code class=\"language-js\">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</code></pre>\n<hr>\n<h3>fast-is-alpha-numeric.js</h3>\n<pre><code class=\"language-js\">//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</code></pre>\n<hr>\n<h3>find-n-replace.js</h3>\n<pre><code class=\"language-js\">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</code></pre>\n<hr>\n<h3>flatten-arr.js</h3>\n<pre><code class=\"language-js\">/*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</code></pre>\n<hr>\n<h3>isWeekDay.js</h3>\n<pre><code class=\"language-js\">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</code></pre>\n<hr>\n<h3>longest-common-prefix.js</h3>\n<pre><code class=\"language-js\">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</code></pre>\n<p><a href=\"https://wakatime.com\"><img src=\"https://wakatime.com/share/@bgoonz42/e088a908-1c73-434f-9eab-b73ea4f17d3c.png\" /></a></p>\n</details>\n<hr>\n<p><a href=\"#github-gists\"><img src=\"https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png\" alt=\"-----------------------------------------------------\"></a></p>\n<h1>➤ Github Gists</h1>\n<h2><a href=\"https://bgoonzgist.netlify.app/\">Github Gists</a></h2>\n<p><a href=\"https://gist.github.com/bgoonz/659a9b81ac45453bedc0a1a36275b580\">list-of-my-websites</a></p>\n<p><a href=\"https://github.com/sindresorhus/awesome\"><img src=\"https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\" alt=\"Awesome\"></a> <a href=\"https://github.com/chetanraj/awesome-github-badges\"><img src=\"https://img.shields.io/badge/Made%20With-Love-orange.svg\" alt=\"Made With Love\"></a></p>\n<p><a href=\"https://forthebadge.com\"><img src=\"https://forthebadge.com/images/badges/certified-snoop-lion.svg\" alt=\"forthebadge\"></a><a href=\"https://forthebadge.com\"><img src=\"https://forthebadge.com/images/badges/60-percent-of-the-time-works-every-time.svg\" alt=\"forthebadge\"></a></p>\n<p><a href=\"https://github.com/bgoonz/blog-w-comments\"><img src=\"https://img.shields.io/website-up-down-green-red/http/shields.io.svg\" alt=\"Website shields.io\"></a><a href=\"https://GitHub.com/bgoonz/ask-me-anything\"><img src=\"https://img.shields.io/badge/Ask%20me-anything-1abc9c.svg\" alt=\"Ask Me Anything !\"></a><a href=\"https://gitter.im/bgoonz/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge\"><img src=\"https://badges.gitter.im/bgoonz/community.svg\" alt=\"Gitter\"></a><a href=\"https://pypi.python.org/pypi/ansicolortags/\"><img src=\"https://img.shields.io/pypi/l/ansicolortags.svg\" alt=\"PyPI license\"></a></p>\n<p><a href=\"https://GitHub.com/bgoonz/bgoonz/graphs/commit-activity\"><img src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\" alt=\"Maintenance\"></a><a href=\"https://github.com/ellerbrock/open-source-badges/\"><img src=\"https://badges.frapsoft.com/os/v1/open-source.png?v=103\" alt=\"Open Source Love\"></a> <a href=\"https://github.com/ellerbrock/open-source-badges/\"><img src=\"https://badges.frapsoft.com/bash/v1/bash.png?v=103\" alt=\"Bash Shell\"></a></p>\n<p><img src=\"https://img.shields.io/badge/-React-black?style=flat&logo=react\" alt=\"React\"> <img src=\"https://img.shields.io/badge/-Redux-lightblue?style=flat&logo=redux\" alt=\"Redux\">\n<img src=\"https://img.shields.io/badge/-HTML5-E34F26?style=flat&logo=html5&logoColor=white\" alt=\"HTML5\"> <img src=\"https://img.shields.io/badge/-CSS3-1572B6?style=flat&logo=css3\" alt=\"CSS3\"> <img src=\"https://img.shields.io/badge/-Sass-black?style=flat&logo=sass\" alt=\"Sass\"><img src=\"https://img.shields.io/badge/-Docker-black?style=flat&logo=docker\" alt=\"Docker\"> <img src=\"https://img.shields.io/badge/-MySQL-black?style=flat&logo=mysql\" alt=\"MySQL\"> <img src=\"https://img.shields.io/badge/-PostgreSQL-blue?style=flat&logo=postgresql\" alt=\"PostgresQL\"> <img src=\"https://img.shields.io/badge/-Git-black?style=flat&logo=git\" alt=\"Git\"> <img src=\"https://img.shields.io/badge/-Ruby-darkred?style=flat&logo=ruby\" alt=\"Ruby\"> <img src=\"https://img.shields.io/badge/-MaterialUI-0081CB?style=flat&logo=Material-UI&logoColor=white\" alt=\"Material-UI\"></p>\n<p><img src=\"https://img.shields.io/badge/-Express-blue?style=flat&logo=express\" alt=\"Express\"> <img src=\"https://img.shields.io/badge/-Nodejs-green?style=flat&logo=Node.js\" alt=\"Nodejs\"><img src=\"https://img.shields.io/badge/-Python-lightyellow?style=flat&logo=python&logoColor=blue\" alt=\"Python\"> <img src=\"https://img.shields.io/badge/-Bootstrap-7952B3?style=flat&logo=bootstrap&logoColor=white\" alt=\"Bootstrap\"> <img src=\"https://img.shields.io/badge/-JavaScript-black?style=flat&logo=javascript\" alt=\"JavaScript\"></p>\n</details>\n</center>\n</details>" | |
| }, | |
| { | |
| "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": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/xGZSWvFess8\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/krRVGoK9NcA\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/QJDBiTxNWO0\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>" | |
| }, | |
| { | |
| "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": "<h1>Job Boards and The Hunt</h1>\n<p>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…</p>\n<hr>\n<h3>Job Boards and The Hunt</h3>\n<h4>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!</h4>\n<p><a href=\"https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b\" class=\"markup--anchor markup--mixtapeEmbed-anchor\" title=\"https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b\"><strong>A list of all of my articles to link to future posts</strong><br />\n<em>You should probably skip this one… seriously it's just for internal use!</em>bryanguner.medium.com</a><a href=\"https://bryanguner.medium.com/a-list-of-all-of-my-articles-to-link-to-future-posts-1f6f88ebdf5b\" class=\"js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock\"></a></p>\n<hr>\n<h3>Update(After The Interview):</h3>\n<p>As a candidate, there are key next steps that you can and should after every interview to help you stand out.</p>\n<p><strong>Send a thank you email within 24 business hours</strong></p>\n<p><strong>Do not miss this step!</strong> 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:</p>\n<p></p>\n<p><em>Hi (name),</em></p>\n<blockquote>\n<p><em>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.</em></p>\n</blockquote>\n<blockquote>\n<p><em>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.</em></p>\n</blockquote>\n<blockquote>\n<p><em>Thank you for your consideration,</em></p>\n</blockquote>\n<blockquote>\n<p><em>(your name)</em></p>\n</blockquote>\n<p><strong>Follow up</strong></p>\n<p>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!</p>\n<p><strong>Check your email and phone regularly<br>\n*</strong><br>\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.</p>\n<p></p>\n<p><strong>Be prepared<br>\n*</strong><br>\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!)</p>\n<figure><img src=\"https://cdn-images-1.medium.com/max/800/0*H4pwwuDEjkYTWKpJ.gif\" class=\"graf-image\" /></figure>\n<hr>\n<blockquote>\n<p>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. !</p>\n</blockquote>\n<h3>Update (remote work edition):</h3>\n<ol>\n<li><span id=\"3063\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#arc\" class=\"markup--anchor markup--li-anchor\">Arc</a></span></li>\n<li><span id=\"7639\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#we-work-remotely\" class=\"markup--anchor markup--li-anchor\">We Work Remotely</a></span></li>\n<li><span id=\"e21f\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#skip-the-drive\" class=\"markup--anchor markup--li-anchor\">Skip The Drive</a></span></li>\n<li><span id=\"e1df\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#power-to-fly\" class=\"markup--anchor markup--li-anchor\">Power to Fly</a></span></li>\n<li><span id=\"ecb8\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#remote-ok\" class=\"markup--anchor markup--li-anchor\">Remote OK</a></span></li>\n<li><span id=\"c08c\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#remotive\" class=\"markup--anchor markup--li-anchor\">Remotive</a></span></li>\n<li><span id=\"b4f2\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#flexjobs\" class=\"markup--anchor markup--li-anchor\">FlexJobs</a></span></li>\n<li><span id=\"e670\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#dribble\" class=\"markup--anchor markup--li-anchor\">Dribble</a></span></li>\n<li><span id=\"3b01\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#angellist\" class=\"markup--anchor markup--li-anchor\">AngelList</a></span></li>\n<li><span id=\"4e54\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#remote-co\" class=\"markup--anchor markup--li-anchor\">Remote.co</a></span></li>\n<li><span id=\"043a\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#justremote\" class=\"markup--anchor markup--li-anchor\">JustRemote</a></span></li>\n<li><span id=\"7190\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#virtual-vocations\" class=\"markup--anchor markup--li-anchor\">Virtual Vocations</a></span></li>\n<li><span id=\"8128\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#pangian\" class=\"markup--anchor markup--li-anchor\">Pangian</a></span></li>\n<li><span id=\"f142\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#working-nomads\" class=\"markup--anchor markup--li-anchor\">Working Nomads</a></span></li>\n<li><span id=\"6d89\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#jobspresso\" class=\"markup--anchor markup--li-anchor\">Jobspresso</a></span></li>\n<li><span id=\"8732\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#outsourcely\" class=\"markup--anchor markup--li-anchor\">Outsourcely</a></span></li>\n<li><span id=\"4f25\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#landing-jobs\" class=\"markup--anchor markup--li-anchor\">Landing.Jobs</a></span></li>\n<li><span id=\"f994\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#authentic-jobs\" class=\"markup--anchor markup--li-anchor\">Authentic Jobs</a></span></li>\n<li><span id=\"4b77\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#stack-overflow\" class=\"markup--anchor markup--li-anchor\">Stack Overflow</a></span></li>\n<li><span id=\"bb76\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#gun-io\" class=\"markup--anchor markup--li-anchor\">Gun.io</a></span></li>\n<li><span id=\"114e\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#idealist\" class=\"markup--anchor markup--li-anchor\">Idealist</a></span></li>\n<li><span id=\"5da2\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#fiverr\" class=\"markup--anchor markup--li-anchor\">Fiverr</a></span></li>\n<li><span id=\"fa5e\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#upwork\" class=\"markup--anchor markup--li-anchor\">Upwork</a></span></li>\n<li><span id=\"f209\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#freelancer\" class=\"markup--anchor markup--li-anchor\">Freelancer</a></span></li>\n<li><span id=\"5ec4\"><a href=\"https://www.freecodecamp.org/news/how-to-find-remote-jobs/#freelancermap\" class=\"markup--anchor markup--li-anchor\">freelancermap</a></span></li>\n</ol>\n<hr>\n<h3>List:</h3>\n<h4>General Boards</h4>\n<ul>\n<li><span id=\"a076\"><a href=\"https://builtin.com/jobs\" class=\"markup--anchor markup--li-anchor\">Built In</a></span></li>\n<li><span id=\"c522\"><a href=\"https://stackoverflow.com/jobs\" class=\"markup--anchor markup--li-anchor\">Stack Overflow</a></span></li>\n<li><span id=\"8235\"><a href=\"http://angel.co/jobs\" class=\"markup--anchor markup--li-anchor\">angel.co</a></span></li>\n<li><span id=\"ae9e\"><a href=\"https://www.theladders.com/jobs/search-jobs\" class=\"markup--anchor markup--li-anchor\">The Ladders</a></span></li>\n<li><span id=\"aceb\"><a href=\"http://www.crunchboard.com/jobs\" class=\"markup--anchor markup--li-anchor\">CrunchBoard</a></span></li>\n<li><span id=\"7e5f\"><a href=\"https://uncubed.com/\" class=\"markup--anchor markup--li-anchor\">Uncubed</a></span></li>\n<li><span id=\"8678\"><a href=\"https://technical.ly/jobs/\" class=\"markup--anchor markup--li-anchor\">Technical.ly</a></span></li>\n<li><span id=\"c7fe\"><a href=\"https://www.dice.com/\" class=\"markup--anchor markup--li-anchor\">Dice</a></span></li>\n<li><span id=\"23f7\"><a href=\"https://www.techcareers.com/\" class=\"markup--anchor markup--li-anchor\">Tech Careers</a></span></li>\n<li><span id=\"20cf\"><a href=\"http://jobs.mashable.com/jobs/search/results\" class=\"markup--anchor markup--li-anchor\">Mashable</a></span></li>\n</ul>\n<h4>Remote or Relocation Boards:</h4>\n<ul>\n<li><span id=\"1e47\"><a href=\"https://weworkremotely.com/\" class=\"markup--anchor markup--li-anchor\">We Work Remotely</a></span></li>\n<li><span id=\"37d2\"><a href=\"https://relocate.me/\" class=\"markup--anchor markup--li-anchor\">Relocate</a><a href=\"https://workfromhomejobs.me/\" class=\"markup--anchor markup--li-anchor\"></a></span></li>\n<li><span id=\"aad7\"><a href=\"https://workfromhomejobs.me/\" class=\"markup--anchor markup--li-anchor\">Work From Home Jobs</a></span></li>\n<li><span id=\"d1fc\"><a href=\"https://docs.google.com/spreadsheets/d/16V7hG7l24hBAnlcmaSG3mrusDx1uj_ZsLwnTu7L_wsQ/edit?usp=sharing\" class=\"markup--anchor markup--li-anchor\">Remote Boards & Companies Spreadsheet</a></span></li>\n<li><span id=\"5267\"><a href=\"https://careervault.io/\" class=\"markup--anchor markup--li-anchor\">Career Vault</a></span></li>\n</ul>\n<h4>DS Boards:</h4>\n<ul>\n<li><span id=\"a50a\"><a href=\"https://www.bigdatajobs.com/\" class=\"markup--anchor markup--li-anchor\">BigDataJobs</a></span></li>\n<li><span id=\"e7ce\"><a href=\"https://icrunchdata.com/data-science-jobs/\" class=\"markup--anchor markup--li-anchor\">Icrunchdata</a></span></li>\n<li><span id=\"d66f\"><a href=\"https://www.analyticsjobs.co.uk/\" class=\"markup--anchor markup--li-anchor\">Analyticsjobs.co.uk</a></span></li>\n</ul>\n<h4>Design Boards</h4>\n<ul>\n<li><span id=\"0a09\"><a href=\"https://www.behance.net/joblist\" class=\"markup--anchor markup--li-anchor\">Behance</a></span></li>\n<li><span id=\"0174\"><a href=\"https://www.uxjobsboard.com/\" class=\"markup--anchor markup--li-anchor\">UX Jobs Board</a></span></li>\n<li><span id=\"ef44\"><a href=\"https://www.krop.com/creative-jobs/ux-ui-designer/\" class=\"markup--anchor markup--li-anchor\">Krop</a></span></li>\n</ul>\n<h4>Software Development</h4>\n<ul>\n<li><span id=\"4702\"><a href=\"https://www.honeypot.io/pages/for_employers\" class=\"markup--anchor markup--li-anchor\">Honeypot.io</a></span></li>\n<li><span id=\"d025\"><a href=\"https://jobs.github.com/\" class=\"markup--anchor markup--li-anchor\">GitHub</a></span></li>\n<li><span id=\"ed46\"><a href=\"https://blabladev.eu/\" class=\"markup--anchor markup--li-anchor\">BlablaDev</a></span></li>\n<li><span id=\"c23f\"><a href=\"http://jobs.smashingmagazine.com/\" class=\"markup--anchor markup--li-anchor\">Smashing <strong>Magazine</strong></a></span></li>\n<li><span id=\"61fd\"><a href=\"http://jobs.arstechnica.com/\" class=\"markup--anchor markup--li-anchor\">arstechnica</a></span></li>\n<li><span id=\"c526\"><a href=\"http://jobs.37signals.com/\" class=\"markup--anchor markup--li-anchor\">obs.37signals</a></span></li>\n<li><span id=\"1ec6\"><a href=\"http://news.ycombinator.com/submitted?id=whoishiring\" class=\"markup--anchor markup--li-anchor\">ycombinator</a></span></li>\n<li><span id=\"fa87\"><a href=\"http://jobs.slashdot.org/jobboard.php\" class=\"markup--anchor markup--li-anchor\">jobs.slashdot.org</a></span></li>\n<li><span id=\"3dfc\"><a href=\"http://angel.co/talent\" class=\"markup--anchor markup--li-anchor\">http://angel.co/talent</a></span></li>\n<li><span id=\"319e\"><a href=\"https://www.whitetruffle.com/\" class=\"markup--anchor markup--li-anchor\">whitetruffle</a></span></li>\n<li><span id=\"428a\"><a href=\"http://www.crunchboard.com/jobs/\" class=\"markup--anchor markup--li-anchor\">crunchboard</a></span></li>\n</ul>\n<p><strong>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.</strong></p>\n<hr>\n<blockquote>\n<p>Also here is a repo of compiled job search and interviewing resources:</p>\n</blockquote>\n<p><a href=\"https://github.com/bgoonz/INTERVIEW-PREP-COMPLETE\" class=\"markup--anchor markup--mixtapeEmbed-anchor\" title=\"https://github.com/bgoonz/INTERVIEW-PREP-COMPLETE\"><strong>bgoonz/INTERVIEW-PREP-COMPLETE</strong><br />\n<em>Your resume is your personal summary sheet. Your resume is the thing that gets your foot in the door. So, there's a few…</em>github.com</a><a href=\"https://github.com/bgoonz/INTERVIEW-PREP-COMPLETE\" class=\"js-mixtapeImage mixtapeImage u-ignoreBlock\"></a></p>\n<figure><img src=\"https://cdn-images-1.medium.com/max/600/1*3_3Cb73SQM_YazWGpZWtIw.png\" class=\"graf-image\" /></figure><figure><img src=\"https://cdn-images-1.medium.com/max/600/1*aI1PfkSpsUks598LAJvKoQ.png\" class=\"graf-image\" /></figure>\n<h4>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.</h4>\n<h3>1. Interpersonal Connections</h3>\n<p>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 <a href=\"https://www.investopedia.com/terms/r/returnoninvestment.asp\" class=\"markup--anchor markup--p-anchor\">RO</a>I efficient way to produce a desirable result. (Sorry introverts… 2020 may have been your year but this is our world. 😘)</p>\n<p><strong>If personal connections don't come through, the next best thing is cold outreach (<em>best in terms of results…. personally I hate cold calling strangers and I am an extrovert</em>.)</strong></p>\n<ol>\n<li><span id=\"2139\">Before or after submitting an application, <strong>identify 1-3 professionals to reach out to</strong> at the company to express interest in opportunities.</span></li>\n<li><span id=\"fb8b\"><strong>Send a message to express interest and request an informational interview</strong> with the individual via LinkedIn, email, Twitter, or other available communication methods.</span></li>\n<li><span id=\"840d\"><strong>If you hear back</strong> and the individual is willing to connect, <strong>confirm a day and time to conduct a preliminary interview.</strong> <em>OR</em> <strong>If you have yet to hear back after 3 business days, follow-up.</strong></span></li>\n</ol>\n<p>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.</p>\n<figure><img src=\"https://cdn-images-1.medium.com/max/600/1*3_3Cb73SQM_YazWGpZWtIw.png\" class=\"graf-image\" /></figure><figure><img src=\"https://cdn-images-1.medium.com/max/600/1*aI1PfkSpsUks598LAJvKoQ.png\" class=\"graf-image\" /></figure>\n<figure><img src=\"https://cdn-images-1.medium.com/max/600/1*5eObFD9fV2fe5DztitZfsA.png\" class=\"graf-image\" /></figure>### ***2. LinkedIn***.\n<p>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.</p>\n<p>LinkedIn now has <a href=\"https://news.linkedin.com/about-us#Statistics\" class=\"markup--anchor markup--p-anchor\">almost 740 million members</a> with over 55 million registered companies. (for comparison 12.3 million people visited Indeed in October, up 19.6 percent. <a href=\"http://www.monster.com/\" class=\"markup--anchor markup--p-anchor\">Monster.com</a> attracted 12.1 million people, and <a href=\"http://www.careerbuilder.com/\" class=\"markup--anchor markup--p-anchor\">CareerBuilder.com</a>attractedd 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.</p>\n<p>If you put your resume and skills on LinkedIn.com as a software Engineer, and state that you are open to new opportunities, you <em>will</em> 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.</p>\n<p>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.</p>\n<p><a href=\"https://www.linkedin.com/in/bryan-guner-046199128/\" class=\"markup--anchor markup--mixtapeEmbed-anchor\" title=\"https://www.linkedin.com/in/bryan-guner-046199128/\"><strong>Bryan Guner - Web Developer - Freelance | LinkedIn</strong><br />\n<em>View Bryan Guner's profile on LinkedIn, the world's largest professional community. Bryan has 5 jobs listed on their…</em>www.linkedin.com</a><a href=\"https://www.linkedin.com/in/bryan-guner-046199128/\" class=\"js-mixtapeImage mixtapeImage u-ignoreBlock\"></a></p>\n<p>Here's A Linkedin Checklist I will be using before I return to the job hunt!</p>\n<p><a href=\"https://www.notion.so/LinkedIn-d8b35e25ff0c451dbb5506ffa1179a8d\" class=\"markup--anchor markup--mixtapeEmbed-anchor\" title=\"https://www.notion.so/LinkedIn-d8b35e25ff0c451dbb5506ffa1179a8d\"><strong>LinkedIn</strong><br />\n<em>Personal and Contact Information:</em>www.notion.so</a><a href=\"https://www.notion.so/LinkedIn-d8b35e25ff0c451dbb5506ffa1179a8d\" class=\"js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock\"></a></p>\n<blockquote>\n<p>excerpt:</p>\n</blockquote>\n<h4>Experience Section</h4>\n<ul>\n<li><span id=\"a517\">[ ] I <strong>have</strong> listed all professional roles included on my resume in this section and any that I had to cut from my resume for space</span></li>\n<li><span id=\"eca7\">[ ] I <strong>have</strong> written 2-4 power statements for each experience listed (okay to copy and paste from resume)</span></li>\n<li><span id=\"d298\">[ ] My power statements for each experience <a href=\"https://www.linkedin.com/pulse/update-how-add-bullet-points-your-linkedin-profile-erin-dore-miller/\" class=\"markup--anchor markup--li-anchor\">are bulleted</a>, not in paragraph form.</span></li>\n<li><span id=\"ec6c\">[ ] I <strong>did</strong> list responsibilities in bullet point format (I <strong>did not</strong> leave in paragraph format)</span></li>\n<li><span id=\"f472\">[ ] I <strong>did</strong> start each bullet point with <a href=\"https://docs.google.com/document/d/1wZkDPBWtQZDGGdvStD61iRx_jOWVlIyyQl9UOYHtZgA/edit?usp=sharing\" class=\"markup--anchor markup--li-anchor\">an action verb</a> and I <strong>did not</strong> use phrases such as: <code>Assisted with...</code> <code>Worked on...</code> <code>Helped with...</code> (<code>Solely responsible for...</code> ok)</span></li>\n<li><span id=\"9a26\">[ ] I <strong>did</strong> describe past projects in past tense and current projects in present tense</span></li>\n<li><span id=\"0f5a\">[ ] I <strong>did not</strong> use pronouns such as: “I,” “we,” “they, “you,” “me,” “us”</span></li>\n<li><span id=\"3616\">[ ] <strong>Optional:</strong> Bootcamp student experience and projects can be listed under your experience section if you have no (or almost no) prior work experience.</span></li>\n<li><span id=\"7fa1\">[ ] If I listed my Bootcamp student experience, my title is [name of program] Student (example: Data Science Student)</span></li>\n<li><span id=\"c928\">[ ] I copied and pasted my Lambda projects in my student description and also included them in the Accomplishments section</span></li>\n</ul>\n<h3>Do's:</h3>\n<p><strong>Spend a good portion of your time learning and reading. Your jobs teach you so much about an organization and the business.</strong></p>\n<p><strong>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.</strong></p>\n<blockquote>\n<p><em>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…</em> <strong>*THERE IS MOST CERTAINLY SUCH A THING AS A STUPID QUESTION**</strong>…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).*</p>\n</blockquote>\n<p><a href=\"https://hbr.org/2018/05/the-surprising-power-of-questions\" class=\"markup--anchor markup--mixtapeEmbed-anchor\" title=\"https://hbr.org/2018/05/the-surprising-power-of-questions\"><strong>How to Ask Great Questions</strong><br />\n<em>In Brief The Problem Some professionals such as litigators, journalists and even doctors, are taught to ask questions…</em>hbr.org</a><a href=\"https://hbr.org/2018/05/the-surprising-power-of-questions\" class=\"js-mixtapeImage mixtapeImage u-ignoreBlock\"></a></p>\n<blockquote>\n<p>Engage in networking. I would recommend <strong>finding and connecting with current attendee of any software development bootcamp</strong>. 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.</p>\n</blockquote>\n<blockquote>\n<p><strong>Note to prospective employers please just skip the next few sentences and don't ask why…😅</strong></p>\n</blockquote>\n<blockquote>\n<p><strong>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.</strong></p>\n</blockquote>\n<figure><img src=\"https://cdn-images-1.medium.com/max/400/1*E519LWHx8W3CXw6c5FXgqg.png\" class=\"graf-image\" /></figure><figure><img src=\"https://cdn-images-1.medium.com/max/1000/1*AUDMmyZrugM3SSy_0axgfQ.jpeg\" class=\"graf-image\" /></figure>\n<blockquote>\n<p>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.</p>\n</blockquote>\n<figure><img src=\"https://cdn-images-1.medium.com/max/800/1*DlqWg94B670bgin5STdJNg.png\" class=\"graf-image\" /></figure>### Don't:\n<h4>Don't Use LinkedIn's Default Headline</h4>\n<p>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.</p>\n<h4>Don't Go Ham On Keyword Placment</h4>\n<p>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.</p>\n<figure><img src=\"https://cdn-images-1.medium.com/max/600/1*3_3Cb73SQM_YazWGpZWtIw.png\" class=\"graf-image\" /></figure><figure><img src=\"https://cdn-images-1.medium.com/max/600/1*aI1PfkSpsUks598LAJvKoQ.png\" class=\"graf-image\" /></figure>\n<hr>\n<h3>Why it matters<em>¿</em></h3>\n<h4>Are We Really All Connected by Just Six Degrees of Separation?</h4>\n<p>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.</p>\n<hr>\n<h3>Back to the other Job Board Niches:</h3>\n<p><strong><em>3. Traditional job boards</em></strong>. 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.</p>\n<p><strong><em>4. Local-focused sites</em></strong>. The biggest is Craigslist, but there are others. Often great for contract work and opportunities you wouldn't have otherwise come across.</p>\n<p><strong><em>5. Freelancer websites</em></strong>. 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.</p>\n<ul>\n<li><span id=\"1350\"><a href=\"https://www.quora.com/What-are-the-best-job-boards-for-software-engineers\" class=\"markup--anchor markup--li-anchor\">Source</a></span></li>\n</ul>\n<figure><img src=\"https://cdn-images-1.medium.com/max/600/1*3_3Cb73SQM_YazWGpZWtIw.png\" class=\"graf-image\" /></figure><figure><img src=\"https://cdn-images-1.medium.com/max/600/1*aI1PfkSpsUks598LAJvKoQ.png\" class=\"graf-image\" /></figure>\n<h3>Lastly Here's A Github Profile Guide:</h3>\n<figure><img src=\"https://cdn-images-1.medium.com/max/800/1*0nYkgla6oc0uImSZJElpdw.jpeg\" class=\"graf-image\" /></figure><figure><img src=\"https://cdn-images-1.medium.com/max/800/1*wIhqnhU5zoyIr1GwZ2UTNA.jpeg\" class=\"graf-image\" /></figure>Medium is causing strange formatting… they normally form a grid!\n<figure><img src=\"https://cdn-images-1.medium.com/max/800/1*-ypWlmloBF6kz9UnVG2kOA.png\" class=\"graf-image\" /></figure><figure><img src=\"https://cdn-images-1.medium.com/max/800/1*Y9SdKz9cS3FtjlKaRge3jg.png\" class=\"graf-image\" /></figure>### Rubric:\n<figure><img src=\"https://cdn-images-1.medium.com/max/1200/1*5-FYxWj0q8sUvpDoAR3ZLA.png\" class=\"graf-image\" /></figure>\n<hr>\n<h3>Discover More:</h3>\n<p><a href=\"https://bgoonz-blog.netlify.app/\" class=\"markup--anchor markup--mixtapeEmbed-anchor\" title=\"https://bgoonz-blog.netlify.app/\"><strong>Web-Dev-Hub</strong><br />\n<em>Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…</em>bgoonz-blog.netlify.app</a><a href=\"https://bgoonz-blog.netlify.app/\" class=\"js-mixtapeImage mixtapeImage u-ignoreBlock\"></a></p>\n<h1><strong>General</strong></h1>\n<ul>\n<li><strong><a href=\"https://haseebq.com/how-to-break-into-tech-job-hunting-and-interviews/\">How To Break Into Tech - Job Hunting and Interviews by Haseeb Qureshi</a></strong></li>\n<li><strong><a href=\"https://mintbean.io/\">Mintbean.io - Hackathons and Workshops</a></strong></li>\n<li><strong><a href=\"https://talent.works/category/science-of-the-job-search/\">Data on the job search and how to do it!</a></strong></li>\n<li><strong><a href=\"https://www.linkedin.com/post-inspector/inspect/\">LinkedIn Post Inspector</a></strong></li>\n<li><strong><a href=\"https://medium.com/@jamesyhiggs/how-to-add-thumbnail-images-to-the-featured-section-of-your-linkedin-profile-for-web-apps-sites-917346235932\">LinkedIn Featured Images</a></strong></li>\n<li><strong><a href=\"https://frontendmasters.com/\">Frontend Masters</a></strong> - Expensive, but worth every penny</li>\n</ul>\n<hr>\n<h1><strong>Resume</strong></h1>\n<ul>\n<li><strong><a href=\"http://blog.alinelerner.com/lessons-from-a-years-worth-of-hiring-data/\">Spelling/Grammar mistakes on Resume costs jobs</a></strong></li>\n</ul>\n<h1><strong>Cover Letter</strong></h1>\n<ul>\n<li><strong><a href=\"http://www.fsb.miamioh.edu/fsb/content/programs/howe-writing-initiative/HWI-handout-CsofBusComm.html\">Six C's of Business Communication</a></strong></li>\n</ul>\n<hr>\n<h1><strong>Heroku</strong> - <em>Use at your own risk</em></h1>\n<ul>\n<li><strong><a href=\"https://medium.com/@pandachain/keep-free-heroku-app-awake-during-a-specific-period-using-google-app-script-in-2017-63fe37ee9e9f\">Keep Heroku App Awake For Free Using Google App Script</a></strong></li>\n<li><strong><a href=\"https://uptimerobot.com/\">UptimeRobot</a></strong></li>\n<li><strong><a href=\"https://kaffeine.herokuapp.com/\">Kaffeine</a></strong></li>\n<li><strong><a href=\"https://docs.google.com/document/d/1_BZswbvmcEtVul9gD59Lk4IUk2mHp1Wbe2ucaHTY7A0/edit\">UptimeRobot and Dyno Lecture</a></strong></li>\n</ul>\n<hr>\n<h1><strong>Trivia</strong></h1>\n<ul>\n<li>\n<h2><strong>JavaScript Trivia</strong></h2>\n<ul>\n<li><strong><a href=\"https://www.fullstack.cafe/\">Fullstack Cafe - EVERYTHING</a></strong></li>\n<li><strong><a href=\"https://www.thatjsdude.com/interview/\">Front-end trivia</a></strong></li>\n</ul>\n</li>\n<li>\n<h2><strong>Python Trivia</strong></h2>\n</li>\n<li>\n<h2><strong>Frontend Trivia</strong></h2>\n<ul>\n<li><a href=\"https://www.toptal.com/designers/web/interview-questions\"><strong>12 Essential Web Design Interview Questions</strong></a></li>\n</ul>\n</li>\n</ul>\n<hr>\n<h1><strong>Language Resources</strong></h1>\n<ul>\n<li>\n<h2><strong>JavaScript Resources</strong></h2>\n<ul>\n<li><strong><a href=\"https://github.com/antonjb/TypeScript-Learning-Plan\">TypeScript Learning Plan</a></strong></li>\n<li>\n<p><strong>React Native</strong></p>\n<ul>\n<li>\n<p><strong><a href=\"https://codewithmosh.com/courses/enrolled\">Code With Mosh Enrolled</a></strong></p>\n<ul>\n<li><em>[email protected] / qqqq1111</em></li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>\n<h2><strong>Python Resources</strong></h2>\n<p>-</p>\n</li>\n<li>\n<h2><strong>HTML5 Resources</strong></h2>\n<ul>\n<li><a href=\"https://digital.com/tools/html-cheatsheet/\"><strong>HTML5 Cheat Sheet</strong></a></li>\n<li><a href=\"https://www.html5rocks.com/en/resources.html\"><strong>HTML5 Rocks</strong></a></li>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML\"><strong>MDN - HTML</strong></a></li>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML\"><strong>MDN - HTML5</strong></a></li>\n<li><a href=\"http://html5doctor.com/\"><strong>HTML5 Doctor</strong></a></li>\n<li>-</li>\n</ul>\n</li>\n<li>\n<h2><strong>CSS3 Resources</strong></h2>\n<ul>\n<li><a href=\"https://www.w3schools.com/css/\"><strong>W3 Schools CSS3 Tutorial</strong></a></li>\n<li><a href=\"https://www.tutorialrepublic.com/css-tutorial/\"><strong>Tutorial Republic - Ultimate Tutorial for Beginners</strong></a></li>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\"><strong>MDN - CSS</strong></a></li>\n<li><a href=\"https://www.css3.info/\"><strong>CSS3.info</strong></a></li>\n<li>\n<p><a href=\"https://css-tricks.com/\"><strong>CSS Tricks</strong></a></p>\n<ul>\n<li><a href=\"https://css-tricks.com/snippets/css/a-guide-to-flexbox/\">Complete Guide to Flexbox</a></li>\n<li><a href=\"https://css-tricks.com/snippets/css/complete-guide-grid/\">Complete Guide to Grid</a></li>\n</ul>\n</li>\n<li><a href=\"https://grid.layoutit.com/\"><strong>Interactive CSS Grid Generator</strong></a></li>\n<li><a href=\"http://csszengarden.com/\"><strong>CSS Zen Garden</strong></a></li>\n<li><a href=\"http://flexboxgrid.com/\"><strong>Flexbox Grid (Package)</strong></a></li>\n<li><a href=\"http://www.specifishity.com/\"><strong>Specifishity</strong></a></li>\n<li><a href=\"https://www.onblastblog.com/css3-cheat-sheet/\"><strong>CSS3 Cheat Sheet</strong></a></li>\n<li><a href=\"https://labs.jensimmons.com/\"><strong>Jen Simmons Labs</strong></a></li>\n</ul>\n</li>\n<li>\n<h2><strong>Miscellaneous Resources</strong></h2>\n<ul>\n<li>\n<p><a href=\"https://codepen.io/\"><strong>CodePen</strong></a></p>\n<ul>\n<li><a href=\"https://codepen.io/202/popular/pens/\">2020 Most Popular Pens (replace year for more)</a></li>\n</ul>\n</li>\n<li><a href=\"https://web-design-weekly.com/\"><strong>Web Design Weekly</strong></a></li>\n<li><a href=\"https://responsivedesign.is/\"><strong>Responsive Design Weekly</strong></a></li>\n</ul>\n</li>\n</ul>\n<hr>\n<h1><strong>DS&A</strong></h1>\n<ul>\n<li><strong><a href=\"https://leetcode.com/explore\">Leetcode</a></strong></li>\n<li><strong><a href=\"https://www.algoexpert.io/\">AlgoExpert</a></strong></li>\n</ul>\n<h2><strong>Hash Tables:</strong></h2>\n<ul>\n<li>\n<p><strong><a href=\"https://www.youtube.com/watch?v=shs0KM3wKv8\">What is a Hash Table</a></strong></p>\n<ul>\n<li>O(1) for a \"good\" table</li>\n<li>O(n) for a terrible table (lots of collisions, etc.)</li>\n</ul>\n</li>\n</ul>\n<hr>\n<h1><strong>System Design</strong></h1>\n<ul>\n<li><strong><a href=\"https://www.educative.io/courses/grokking-the-system-design-interview/m2yDVZnQ8lG\">The Basics</a></strong></li>\n<li><strong><a href=\"https://levelup.gitconnected.com/everything-you-need-to-know-about-caching-system-design-932a6bdf3334\">Caching</a></strong></li>\n<li><strong><a href=\"https://codeburst.io/system-design-basics-load-balancer-101-adc4f602d08f\">Load Balancing</a></strong></li>\n</ul>\n<hr>\n<h1><strong>Interviewing</strong></h1>\n<ul>\n<li>\n<h3><strong>Mock Interviewing</strong></h3>\n<ul>\n<li><strong><a href=\"https://interviewing.io/\">Interviewing.io</a></strong></li>\n</ul>\n</li>\n</ul>\n<hr>\n<h1><strong>Networking</strong></h1>\n<ul>\n<li><strong><a href=\"https://www.meetup.com/\">MeetUp</a></strong></li>\n</ul>\n<hr>\n<h1><strong>Managing and Organizing Job Search</strong></h1>\n<ul>\n<li>\n<p><strong><a href=\"notion.so\">Notion</a></strong></p>\n<ul>\n<li>Trillo clone but with added features that make it really great! Consider creating a template for new job seekers!</li>\n</ul>\n</li>\n</ul>\n<hr>\n<h1><strong>Negotiations</strong></h1>\n<ul>\n<li><strong><a href=\"https://haseebq.com/my-ten-rules-for-negotiating-a-job-offer/\">Haseeb's 10 Rules - Part 1</a></strong></li>\n<li><strong><a href=\"https://haseebq.com/how-not-to-bomb-your-offer-negotiation/\">Haseeb's 10 Rules - Part 2</a></strong></li>\n</ul>\n<hr>\n<h1><strong>Portfolio Sites</strong></h1>\n<p>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:</p>\n<h2><strong>Template Sources</strong></h2>\n<ul>\n<li><a href=\"http://www.free-css.com/template-categories/portfolio\"><strong>Free CSS Templates</strong></a></li>\n<li><a href=\"http://html5up.net/\"><strong>HTML5 UP</strong></a></li>\n<li><a href=\"http://startbootstrap.com/\"><strong>Start Bootstrap</strong></a></li>\n<li><a href=\"https://themewagon.com/top-html-landing-page-templates/\"><strong>Theme Wagon</strong></a></li>\n<li><a href=\"https://templatemo.com/tag/portfolio\"><strong>Templatemo</strong></a></li>\n<li><a href=\"https://onepagelove.com/templates/free-templates\"><strong>One Page Love</strong></a></li>\n<li>Once you've decided on a template, download it to your machine.</li>\n<li>Rename the folder <code>{$yourGitHubUserName}.github.io</code>, (e.g. if my GitHub\nusername were QueenOfTheBeyhive, I would name my repo\n<code>QueenOfTheBeyhive.github.io</code>). This will be important for deployment to GitHub\npages later.</li>\n<li>Make sure to <code>git init</code> and set up your remote repository.</li>\n<li>As always, make sure to read through any provided README for any potentially\nuseful information.</li>\n<li>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 <code>index.html</code> 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.</li>\n</ul>\n<hr>\n<h1><strong>QA Engineering</strong></h1>\n<ul>\n<li><strong><a href=\"https://teamtreehouse.com/library/introduction-to-qa-engineering\">Full course in 7 day trial</a></strong></li>\n<li><strong><a href=\"https://docs.google.com/document/d/1REtlnM0j88iGgIkPmOyeuwf-VdhOSV6U0QkcPEz81Oc/edit\">Prep Notes</a></strong></li>\n</ul>\n<h1><strong>Alternative Roles</strong></h1>\n<pre><code>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</code></pre>\n<hr>\n<h1><strong>Externship</strong></h1>\n<ul>\n<li><strong><a href=\"https://www.insidesherpa.com/\">insidesherpa</a></strong></li>\n</ul>\n<hr>\n<h1><strong>Open Source</strong></h1>\n<ul>\n<li><strong><a href=\"https://opensource.guide/\">GitHub's open source guides</a></strong></li>\n<li><strong><a href=\"https://opensource.com/resources/getting-started-open-source\">Getting started with open source</a></strong></li>\n<li><strong><a href=\"https://www.firsttimersonly.com/\">First timers only</a></strong></li>\n<li><strong><a href=\"https://opensourceunderdogs.com/episodes/\">Open Source Underdogs</a></strong></li>\n<li><strong><a href=\"https://www.codetriage.com/\">Code Triage</a></strong></li>\n</ul>\n<hr>\n<h1><strong>Volunteer</strong></h1>\n<ul>\n<li><strong><a href=\"https://www.codeforamerica.org/\">Code For America</a></strong></li>\n<li><strong><a href=\"https://www.donatecode.com/\">Donate Code</a></strong></li>\n<li><strong><a href=\"https://socialcoder.org/Home/Index\">Social Coder</a></strong></li>\n<li><strong><a href=\"https://www.catchafire.org/\">Catch A Fire</a></strong></li>\n<li><strong><a href=\"https://www.hackersforcharity.org/\">Hackers For Charity</a></strong></li>\n</ul>\n<hr>\n<h1><strong>Imposter Syndrome</strong></h1>\n<ul>\n<li><strong><a href=\"https://www.zainrizvi.io/blog/the-impostors-advantage/\">The Imposter's Advantage - Zain Rizvi</a></strong></li>\n<li><strong><a href=\"https://www.techrepublic.com/article/why-58-of-tech-employees-suffer-from-imposter-syndrome/\">Stats on the tech giants</a></strong></li>\n<li><strong><a href=\"http://blog.alinelerner.com/how-different-is-a-b-s-in-computer-science-from-a-m-s-in-computer-science-when-it-comes-to-recruiting/\">Why MS degrees are shit</a></strong></li>\n</ul>\n<hr>\n<h1><strong>Podcasts</strong></h1>\n<ul>\n<li><strong><a href=\"https://freecodecamp.libsyn.com/\">FreeCodeCamp Podcast</a></strong></li>\n<li><strong><a href=\"https://www.heroku.com/podcasts/codeish/85-the-new-definition-of-frontend-development\">Codish Podcast</a></strong></li>\n</ul>\n<hr>\n<h1><strong>Books</strong></h1>\n<ul>\n<li>\n<p><strong>Grokking the Coding Interview</strong></p>\n<ul>\n<li><a href=\"https://github.com/cl2333/Grokking-the-Coding-Interview-Patterns-for-Coding-Questions\">GitHub Coding Questions</a></li>\n<li><a href=\"https://www.educative.io/courses/grokking-the-coding-interview\">Purchase Course</a></li>\n</ul>\n</li>\n<li>\n<p><strong>Grokking the System Design Interview</strong></p>\n<ul>\n<li><a href=\"https://github.com/ema2159/Grokking-System-Design-Interview-Quizzes\">Quizzes</a></li>\n<li><a href=\"https://www.educative.io/courses/grokking-the-system-design-interview\">Purchase Course</a></li>\n</ul>\n</li>\n<li>\n<p><strong>Elements of Programming Interviews (EPI) in Python</strong></p>\n<ul>\n<li><a href=\"https://www.amazon.com/Elements-Programming-Interviews-Python-Insiders/dp/1537713949\">Amazon</a></li>\n</ul>\n</li>\n<li>\n<p><strong>Skienna Algorithm Design Manual</strong></p>\n<ul>\n<li><a href=\"https://www.amazon.com/Algorithm-Design-Manual-Steven-Skiena-ebook-dp-B00B8139Z8/dp/B00B8139Z8/ref=mt_other?_encoding=UTF8&me=&qid=\">Amazon</a></li>\n</ul>\n</li>\n</ul>\n<hr>\n<h1><strong>QA Questions</strong></h1>\n<p><strong>10:22:12 From Alexis Kozak to Everyone : Scenario 1</strong></p>\n<ul>\n<li>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?</li>\n</ul>\n<p><strong>10:24:40 From Alexis Kozak to Everyone : Scenario 2</strong></p>\n<ul>\n<li>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?</li>\n</ul>\n<p><strong>10:28:11 From Alexis Kozak to Everyone : Scenario 3</strong></p>\n<ul>\n<li>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?</li>\n</ul>" | |
| }, | |
| { | |
| "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": "<h2>What is a buffer?</h2>\n<p>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.</p>\n<p>It represents a fixed-size chunk of memory (can't be resized) allocated outside of the V8 JavaScript engine.</p>\n<p>You can think of a buffer like an array of integers, which each represent a byte of data.</p>\n<p>It is implemented by the Node.js <a href=\"https://nodejs.org/api/buffer.html\">Buffer class</a>.</p>\n<h2>Why do we need a buffer?</h2>\n<p>Buffers were introduced to help developers deal with binary data, in an ecosystem that traditionally only dealt with strings rather than binaries.</p>\n<p>Buffers are deeply linked with streams. When a stream processor receives data faster than it can digest, it puts the data in a buffer.</p>\n<p>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.</p>\n<h2>How to create a buffer</h2>\n<p>A buffer is created using the <a href=\"https://nodejs.org/api/buffer.html#buffer_buffer_from_buffer_alloc_and_buffer_allocunsafe\"><code>Buffer.from()</code></a>, <a href=\"https://nodejs.org/api/buffer.html#buffer_class_method_buffer_alloc_size_fill_encoding\"><code>Buffer.alloc()</code></a>, and <a href=\"https://nodejs.org/api/buffer.html#buffer_class_method_buffer_allocunsafe_size\"><code>Buffer.allocUnsafe()</code></a> methods.</p>\n<pre><code class=\"language-js\">const buf = Buffer.from('Hey!');\n</code></pre>\n<ul>\n<li><a href=\"https://nodejs.org/api/buffer.html#buffer_class_method_buffer_from_array\"><code>Buffer.from(array)</code></a></li>\n<li><a href=\"https://nodejs.org/api/buffer.html#buffer_class_method_buffer_from_arraybuffer_byteoffset_length\"><code>Buffer.from(arrayBuffer[, byteOffset[, length]])</code></a></li>\n<li><a href=\"https://nodejs.org/api/buffer.html#buffer_class_method_buffer_from_buffer\"><code>Buffer.from(buffer)</code></a></li>\n<li><a href=\"https://nodejs.org/api/buffer.html#buffer_class_method_buffer_from_string_encoding\"><code>Buffer.from(string[, encoding])</code></a></li>\n</ul>\n<p>You can also just initialize the buffer passing the size. This creates a 1KB buffer:</p>\n<pre><code class=\"language-js\">const buf = Buffer.alloc(1024);\n//or\nconst buf = Buffer.allocUnsafe(1024);\n</code></pre>\n<p>While both <code>alloc</code> and <code>allocUnsafe</code> allocate a <code>Buffer</code> of the specified size in bytes, the <code>Buffer</code> created by <code>alloc</code> will be <em>initialized</em> with zeroes and the one created by <code>allocUnsafe</code> will be <em>uninitialized</em>. This means that while <code>allocUnsafe</code> would be quite fast in comparison to <code>alloc</code>, the allocated segment of memory may contain old data which could potentially be sensitive.</p>\n<p>Older data, if present in the memory, can be accessed or leaked when the <code>Buffer</code> memory is read. This is what really makes <code>allocUnsafe</code> unsafe and extra care must be taken while using it.</p>\n<h2>Using a buffer</h2>\n<h3>Access the content of a buffer</h3>\n<p>A buffer, being an array of bytes, can be accessed like an array:</p>\n<pre><code class=\"language-js\">const buf = Buffer.from('Hey!');\nconsole.log(buf[0]); //72\nconsole.log(buf[1]); //101\nconsole.log(buf[2]); //121\n</code></pre>\n<p>Those numbers are the Unicode Code that identifies the character in the buffer position (H => 72, e => 101, y => 121)</p>\n<p>You can print the full content of the buffer using the <code>toString()</code> method:</p>\n<pre><code class=\"language-js\">console.log(buf.toString());\n</code></pre>\n<blockquote>\n<p>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!</p>\n</blockquote>\n<h3>Get the length of a buffer</h3>\n<p>Use the <code>length</code> property:</p>\n<pre><code class=\"language-js\">const buf = Buffer.from('Hey!');\nconsole.log(buf.length);\n</code></pre>\n<h3>Iterate over the contents of a buffer</h3>\n<pre><code class=\"language-js\">const buf = Buffer.from('Hey!');\nfor (const item of buf) {\n console.log(item); //72 101 121 33\n}\n</code></pre>\n<h3>Changing the content of a buffer</h3>\n<p>You can write to a buffer a whole string of data by using the <code>write()</code> method:</p>\n<pre><code class=\"language-js\">const buf = Buffer.alloc(4);\nbuf.write('Hey!');\n</code></pre>\n<p>Just like you can access a buffer with an array syntax, you can also set the contents of the buffer in the same way:</p>\n<pre><code class=\"language-js\">const buf = Buffer.from('Hey!');\nbuf[1] = 111; //o\nconsole.log(buf.toString()); //Hoy!\n</code></pre>\n<h3>Copy a buffer</h3>\n<p>Copying a buffer is possible using the <code>copy()</code> method:</p>\n<pre><code class=\"language-js\">const buf = Buffer.from('Hey!');\nlet bufcopy = Buffer.alloc(4); //allocate 4 bytes\nbuf.copy(bufcopy);\n</code></pre>\n<p>By default you copy the whole buffer. 3 more parameters let you define the starting position, the ending position, and the new buffer length:</p>\n<pre><code class=\"language-js\">const buf = Buffer.from('Hey!');\nlet bufcopy = Buffer.alloc(2); //allocate 2 bytes\nbuf.copy(bufcopy, 0, 0, 2);\nbufcopy.toString(); //'He'\n</code></pre>\n<h3>Slice a buffer</h3>\n<p>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.</p>\n<p>Use the <code>slice()</code> method to create it. The first parameter is the starting position, and you can specify an optional second parameter with the end position:</p>\n<pre><code class=\"language-js\">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</code></pre>" | |
| }, | |
| { | |
| "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": "<p>When you install an npm package using <code>npm install <package-name></code>, you are installing it as a <strong>dependency</strong>.</p>\n<p>The package is automatically listed in the package.json file, under the <code>dependencies</code> list (as of npm 5: before you had to manually specify <code>--save</code>).</p>\n<p>When you add the <code>-D</code> flag, or <code>--save-dev</code>, you are installing it as a development dependency, which adds it to the <code>devDependencies</code> list.</p>\n<p>Development dependencies are intended as development-only packages, that are unneeded in production. For example testing packages, webpack or Babel.</p>\n<p>When you go in production, if you type <code>npm install</code> and the folder contains a <code>package.json</code> file, they are installed, as npm assumes this is a development deploy.</p>\n<p>You need to set the <code>--production</code> flag (<code>npm install --production</code>) to avoid installing those development dependencies.</p>" | |
| }, | |
| { | |
| "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": "<h2>Introduction</h2>\n<p>The <strong>Event Loop</strong> is one of the most important aspects to understand about Node.js.</p>\n<p>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.</p>\n<p>The Node.js JavaScript code runs on a single thread. There is just one thing happening at a time.</p>\n<p>This is a limitation that's actually very helpful, as it simplifies a lot how you program without worrying about concurrency issues.</p>\n<p>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.</p>\n<p>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.</p>\n<p>The environment manages multiple concurrent event loops, to handle API calls for example. Web Workers run in their own event loop as well.</p>\n<p>You mainly need to be concerned that <em>your code</em> will run on a single event loop, and write code with this thing in mind to avoid blocking it.</p>\n<h2>Blocking the event loop</h2>\n<p>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.</p>\n<p>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.</p>\n<h2>The call stack</h2>\n<p>The call stack is a LIFO queue (Last In, First Out).</p>\n<p>The event loop continuously checks the <strong>call stack</strong> to see if there's any function that needs to run.</p>\n<p>While doing so, it adds any function call it finds to the call stack and executes each one in order.</p>\n<p>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:</p>\n<p><img src=\"exception-call-stack.png\" alt=\"Exception call stack\"></p>\n<h2>A simple event loop explanation</h2>\n<p>Let's pick an example:</p>\n<iframe\n title=\"A simple event loop explanation\"\n src=\"https://glitch.com/embed/#!/embed/nodejs-dev-0029-01?path=server.js&previewSize=20&attributionHidden=true&sidebarCollapsed=true\"\n alt=\"nodejs-dev-0029-01 on Glitch\"\n style=\"height: 400px; width: 100%; border: 0;\">\n</iframe>\n<!--```js\nconst bar = () => console.log('bar')\n\nconst baz = () => console.log('baz')\n\nconst foo = () => {\n console.log('foo')\n bar()\n baz()\n}\n\nfoo()\n```\n\nThis code prints\n\n```txt\nfoo\nbar\nbaz\n```\n\nas expected.-->\n<p>When this code runs, first <code>foo()</code> is called. Inside <code>foo()</code> we first call <code>bar()</code>, then we call <code>baz()</code>.</p>\n<p>At this point the call stack looks like this:</p>\n<p><img src=\"call-stack-first-example.png\" alt=\"Call stack first example\"></p>\n<p>The event loop on every iteration looks if there's something in the call stack, and executes it:</p>\n<p><img src=\"execution-order-first-example.png\" alt=\"Execution order first example\"></p>\n<p>until the call stack is empty.</p>\n<h2>Queuing function execution</h2>\n<p>The above example looks normal, there's nothing special about it: JavaScript finds things to execute, runs them in order.</p>\n<p>Let's see how to defer a function until the stack is clear.</p>\n<p>The use case of <code>setTimeout(() => {}, 0)</code> is to call a function, but execute it once every other function in the code has executed.</p>\n<p>Take this example:</p>\n<iframe\n title=\"Queuing function execution\"\n src=\"https://glitch.com/embed/#!/embed/nodejs-dev-0029-02?path=server.js&previewSize=20&attributionHidden=true&sidebarCollapsed=true\"\n alt=\"nodejs-dev-0029-02 on Glitch\"\n style=\"height: 400px; width: 100%; border: 0;\">\n</iframe>\n<!--```js\nconst bar = () => console.log('bar')\n\nconst baz = () => console.log('baz')\n\nconst foo = () => {\n console.log('foo')\n setTimeout(bar, 0)\n baz()\n}\n\nfoo()\n```-->\n<p>This code prints, maybe surprisingly:</p>\n<pre><code class=\"language-bash\">foo\nbaz\nbar\n</code></pre>\n<p>When this code runs, first foo() is called. Inside foo() we first call setTimeout, passing <code>bar</code> as an argument, and we instruct it to run immediately as fast as it can, passing 0 as the timer. Then we call baz().</p>\n<p>At this point the call stack looks like this:</p>\n<p><img src=\"call-stack-second-example.png\" alt=\"Call stack second example\"></p>\n<p>Here is the execution order for all the functions in our program:</p>\n<p><img src=\"execution-order-second-example.png\" alt=\"Execution order second example\"></p>\n<p>Why is this happening?</p>\n<h2>The Message Queue</h2>\n<p>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 <strong>Message Queue</strong>.</p>\n<p>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 <code>onLoad</code>.</p>\n<p><strong>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.</strong></p>\n<p>We don't have to wait for functions like <code>setTimeout</code>, 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 <code>setTimeout</code> timeout to 2 seconds, you don't have to wait 2 seconds - the wait happens elsewhere.</p>\n<h2>ES6 Job Queue</h2>\n<p>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.</p>\n<p>Promises that resolve before the current function ends will be executed right after the current function.</p>\n<p>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.</p>\n<p>Example:</p>\n<iframe\n title=\"ECMAScript 2015 Job Queue\"\n src=\"https://glitch.com/embed/#!/embed/nodejs-dev-0029-03?path=server.js&previewSize=35&attributionHidden=true&sidebarCollapsed=true\"\n alt=\"nodejs-dev-0029-03 on Glitch\"\n style=\"height: 400px; width: 100%; border: 0;\">\n</iframe>\n<!--```js\nconst bar = () => console.log('bar')\n\nconst baz = () => console.log('baz')\n\nconst foo = () => {\n console.log('foo')\n setTimeout(bar, 0)\n new Promise((resolve, reject) =>\n resolve('should be right after baz, before bar')\n ).then(resolve => console.log(resolve))\n baz()\n}\n\nfoo()\n```\n\nThis prints\n\n```txt\nfoo\nbaz\nshould be right after baz, before bar\nbar\n```-->\n<p>That's a big difference between Promises (and Async/await, which is built on promises) and plain old asynchronous functions through <code>setTimeout()</code> or other platform APIs.</p>" | |
| }, | |
| { | |
| "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": "<hr>\n<h2>description: Review</h2>\n<h1>Review-Of-Previous-Concepts</h1>\n<h3>Review of Concepts</h3>\n<h3>Running JS Locally Concepts</h3>\n<ul>\n<li>\n<p>Match the commands <code>ls</code>, <code>cd</code>, <code>pwd</code> to their descriptions</p>\n<ul>\n<li><code>ls</code> lists contents of current directory</li>\n<li>\n<p><code>cd</code> changes current directory</p>\n<ul>\n<li><code>cd ..</code> takes you up one level</li>\n<li><code>cd</code> alone takes you back home</li>\n</ul>\n</li>\n<li><code>pwd</code> returns current directory</li>\n</ul>\n</li>\n<li>Given a folder structure diagram, a list of 'cd (path)' commands and target files, match the paths to the target files.</li>\n<li>Use VSCode to create a folder. Within the folder create a .js file containing <code>console.log('hello new world');</code> and save it.</li>\n<li>Use node to execute a JavaScript file in the terminal</li>\n</ul>\n<h3>Plain Old JS Object Lesson Concepts</h3>\n<ul>\n<li>\n<p>Label variables as either Primitive vs. Reference</p>\n<ul>\n<li>\n<p>primitives: strings, booleans, numbers, null and undefined</p>\n<ul>\n<li>primitives are immutable</li>\n</ul>\n</li>\n<li>\n<p>refereces: objects (including arrays)</p>\n<ul>\n<li>references are mutable</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>\n<p>Identify when to use <code>.</code> vs <code>[]</code> when accessing values of an object</p>\n<ul>\n<li>\n<p>dot syntax <code>object.key</code></p>\n<ul>\n<li>easier to read</li>\n<li>easier to write</li>\n<li>cannot use variables as keys</li>\n<li>keys cannot begin with a number</li>\n</ul>\n</li>\n<li>\n<p>bracket notation <code>object[\"key]</code></p>\n<ul>\n<li>allows variables as keys</li>\n<li>strings that start with numbers can be use as keys</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>\n<p>Write an object literal with a variable key using interpolation</p>\n<ul>\n<li>\n<p>put it in brackets to access the value of the variable, rather than just make the value that string</p>\n<pre><code class=\"language-javascript\">let a = 'b';\nlet obj = { a: 'letter_a', [a]: 'letter b' };\n</code></pre>\n</li>\n</ul>\n</li>\n<li>\n<p>Use the <code>obj[key] !== undefined</code> pattern to check if a given variable that contains a key exists in an object</p>\n<ul>\n<li>can also use <code>(key in object)</code> syntax interchangeably (returns a boolean)</li>\n</ul>\n</li>\n<li>\n<p>Utilize Object.keys and Object.values in a function</p>\n<ul>\n<li><code>Object.keys(obj)</code> returns an array of all the keys in <code>obj</code></li>\n<li><code>Object.values(obj)</code> returns an array of the values in <code>obj</code></li>\n</ul>\n</li>\n<li>\n<p>Iterate through an object using a <code>for in</code> loop</p>\n<pre><code class=\"language-javascript\">let printValues = function (obj) {\n for (let key in obj) {\n let value = obj[key];\n console.log(value);\n }\n};\n</code></pre>\n</li>\n<li>\n<p>Define a function that utilizes <code>...rest</code> syntax to accept an arbitrary number of arguments</p>\n<ul>\n<li><code>...rest</code> syntax will store all additional arguments in an array</li>\n<li>\n<p>array will be empty if there are no additional arguments</p>\n<pre><code class=\"language-javascript\">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</code></pre>\n</li>\n</ul>\n</li>\n</ul>\n<h3></h3>\n<ul>\n<li>\n<p>Use <code>...spread</code> syntax for Object literals and Array literals</p>\n<pre><code class=\"language-javascript\">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</code></pre>\n</li>\n<li>\n<p>Destructure an array to reference specific elements</p>\n<p>```javascript</p>\n<p>let array = [35,9];</p>\n<p>let [firstEl, secondEl] = array;</p>\n<p>console.log(firstEl); // => 35</p>\n<p>console.log(secondEl); // => 9</p>\n</li>\n</ul>\n<p>// can also destructure using ... syntax let array = [35,9,14]; let [head, ...tail] = array; console.log(head); // => 35 console.log(tail); // => [9, 14]</p>\n<pre><code class=\"language-javascript\">- 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</code></pre>\n<ul>\n<li>\n<p>Write a function that accepts a array as an argument and returns an object representing the count of each character in the array</p>\n<pre><code class=\"language-javascript\">//\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</code></pre>\n</li>\n</ul>\n<h3>Callbacks Lesson Concepts</h3>\n<ul>\n<li>\n<p>Given multiple plausible reasons, identify why functions are called \"First Class Objects\" in JavaScript.</p>\n<ul>\n<li>they can be stored in variables, passed as arguments to other functions, and serve as return value for a function</li>\n<li>supports same basic operations as other types (strings, bools, numbers)</li>\n<li>higher-order functions take functions as arguments or return functions as values</li>\n</ul>\n</li>\n<li>\n<p>Given a code snippet containing an anonymous callback, a named callback, and multiple <code>console.log</code>s, predict what will be printed</p>\n<ul>\n<li>what is this referring to?</li>\n</ul>\n</li>\n<li>Write a function that takes in a value and two callbacks. The function should return the result of the callback that is greater.</li>\n</ul>\n<pre><code class=\"language-javascript\">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</code></pre>\n<p>// 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));</p>\n<pre><code class=\"language-javascript\">- 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</code></pre>\n<ul>\n<li>\n<p>Write a function, myFilter, that takes in an array and a callback as arguments. The function should mimic the behavior of <code>Array#filter</code>.</p>\n<pre><code class=\"language-javascript\">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</code></pre>\n</li>\n<li>\n<p>Write a function, myEvery, that takes in an array and a callback as arguments. The function should mimic the behavior of <code>Array#every</code>.</p>\n<pre><code class=\"language-javascript\">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</code></pre>\n</li>\n</ul>\n<h3>Scope Lesson Concepts</h3>\n<ul>\n<li>\n<p>Identify the difference between <code>const</code>, <code>let</code>, and <code>var</code> declarations</p>\n<ul>\n<li><code>const</code> - cannot reassign variable, scoped to block</li>\n<li><code>let</code> - can reassign variable, scoped to block</li>\n<li><code>var</code> - outdated, may or may not be reassigned, scoped to function. can be not just reassigned, but also redeclared!</li>\n<li>a variable will always evaluate to the value it contains regardless of how it was declared</li>\n</ul>\n</li>\n<li>\n<p>Explain the difference between <code>const</code>, <code>let</code>, and <code>var</code> declarations</p>\n<ul>\n<li>\n<p><code>var</code> is function scoped—so if you declare it anywhere in a function, the declaration (but not assignment) is \"hoisted\"</p>\n<ul>\n<li>so it will exist in memory as \"undefined\" which is bad and unpredictable</li>\n</ul>\n</li>\n<li><code>var</code> will also allow you to redeclare a variable, while <code>let</code> or <code>const</code> will raise a syntax error. you shouldn't be able to do that!</li>\n<li><code>const</code> 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</li>\n<li>block-scoped variables allow new variables with the same name in new scopes</li>\n<li>block-scoped still performs hoisting of all variables within the block, but it doesn't initialize to the value of <code>undefined</code> like <code>var</code> does, so it throws a specific reference error if you try to access the value before it has been declared</li>\n<li>\n<p>if you do not use <code>var</code> or <code>let</code> or <code>const</code> when initializing, it will be declared as global—THIS IS BAD</p>\n<ul>\n<li>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</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>\n<p>Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining</p>\n<ul>\n<li>scope of a program means the set of variables that are available for use within the program</li>\n<li>\n<p>global scope is represented by the <code>window</code> object in the browser and the <code>global</code> object in Node.js</p>\n<ul>\n<li>global variables are available everywhere, and so increase the risk of name collisions</li>\n</ul>\n</li>\n<li>\n<p>local scope is the set of variables available for use within the function</p>\n<ul>\n<li>when we enter a function, we enter a new scope</li>\n<li>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)</li>\n</ul>\n</li>\n<li>for blocks (denoted by curly braces <code>{}</code>, as in conditionals or <code>for</code> loops), variables can be block scoped</li>\n<li>\n<p>inner scope does not have access to variables in the outer scope</p>\n<ul>\n<li>scope chaining—if a given variable is not found in immediate scope, javascript will search all accessible outer scopes until variable is found</li>\n<li>so an inner scope can access outer scope variables</li>\n<li>but an outer scope can never access inner scope variables</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>\n<p>Define an arrow function</p>\n<p>```javascript</p>\n<p>let arrowFunction = (param1, param2) => {</p>\n<p>let sum = param1 + param2;</p>\n<p>return sum;</p>\n<p>}</p>\n</li>\n</ul>\n<p>// with 1 param you can remove parens around parameters let arrowFunction = param => { param += 1; return param; }</p>\n<p>// if your return statement is one line, you can use implied return let arrowFunction = param => param + 1;</p>\n<p>// you don't have to assign to variable, can be anonymous // if you never need to use it again param => param + 1;</p>\n<p>```</p>\n<ul>\n<li>\n<p>Given an arrow function, deduce the value of <code>this</code> without executing the code</p>\n<ul>\n<li>arrow functions are automatically bound to the context they were declared in</li>\n<li>unlike regular function which use the context they are invoked in (unless they have been bound using <code>Function#bind</code>)</li>\n<li>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</li>\n<li>\n<p>so you can't use an arrow function to define a method directly</p>\n<p>```javascript</p>\n<p>let obj = {</p>\n<p>name: \"my object\",</p>\n<p>unboundFunc: function () {</p>\n<p>return this.name;</p>\n<p>// this function will be able to be called on different objects</p>\n<p>},</p>\n</li>\n</ul>\n</li>\n</ul>\n<h3></h3>\n<p>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 },</p>\n<pre><code class=\"language-javascript\">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</code></pre>\n<p>}</p>\n<pre><code class=\"language-javascript\">- 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</code></pre>\n<ul>\n<li>\n<p>Define a method that references <code>this</code> on an object literal</p>\n<ul>\n<li>\n<p>when we use <code>this</code> in a method it refers to the object that the method is invoked on</p>\n<ul>\n<li>it will let you access other pieces of information from within that object, or even other methods</li>\n<li>method style invocation - <code>object.method(args)</code> (e.g. built in examples like <code>Array#push</code>, or <code>String#toUpperCase</code>)</li>\n</ul>\n</li>\n<li>context is set every time we invoke a function</li>\n<li>function style invocation sets the context to the global object no matter what</li>\n<li>being inside an object does not make the context that object! you still have to use method-style invocation</li>\n</ul>\n</li>\n<li>\n<p>Utilize the built in <code>Function#bind</code> on a callback to maintain the context of this</p>\n<ul>\n<li>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</li>\n</ul>\n<pre><code class=\"language-text\">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</code></pre>\n<p>``</p>\n</li>\n</ul>\n<h3></h3>\n<h3></h3>\n<pre><code class=\"language-javascript\"> - `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</code></pre>\n<ul>\n<li>\n<p>CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP!</p>\n<ul>\n<li>could throw an error if it expects this to have some other method or whatever that doesn't exist</li>\n<li>you could also overwrite values or assign values to exist in a space where they should not exist</li>\n</ul>\n</li>\n<li>\n<p>if you call a function as a callback, it will set <code>this</code> to be the outer function itself, even if the function you were calling is a method that was called on a particular object</p>\n<pre><code class=\"language-text\">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</code></pre>\n</li>\n</ul>\n<p>we can use strict mode with <code>\"use strict\";</code> this will prevent you from accessing the global object with <code>this</code> in functions, so if you try to call <code>this</code> in the global context and change a value, you will get a type error, and the things you try to access will be undefined</p>\n<h3></h3>\n<p>let sayMeow = cat.purrMore; console.log(sayMeow()); // TypeError: this.purr is not a function</p>\n<p>// we can use the built in Function.bind to ensure our context, our <code>this</code>, // is the cat object let boundCat = sayMeow.bind(cat);</p>\n<p>boundCat(); // prints \"meow\"</p>\n<pre><code class=\"language-text\"> - `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</code></pre>\n<ul>\n<li>\n<p>CALLING SOMETHING IN THE WRONG CONTEXT CAN MESS YOU UP!</p>\n<ul>\n<li>could throw an error if it expects this to have some other method or whatever that doesn't exist</li>\n<li>you could also overwrite values or assign values to exist in a space where they should not exist</li>\n</ul>\n</li>\n<li>\n<p>if you call a function as a callback, it will set <code>this</code> to be the outer function itself, even if the function you were calling is a method that was called on a particular object</p>\n<p>```javascript</p>\n<p>let cat = {</p>\n<p>purr: function () {</p>\n<p>console.log(\"meow\");</p>\n<p>},</p>\n<p>purrMore: function () {</p>\n<p>this.purr();</p>\n<p>},</p>\n<p>};</p>\n</li>\n</ul>\n<p>global.setTimeout(cat.purrMore, 5000); // 5 seconds later: TypeError: this.purr is not a function</p>\n<p>```</p>\n<ul>\n<li>we can use strict mode with <code>\"use strict\";</code> this will prevent you from accessing the global object with <code>this</code> in functions, so if you try to call <code>this</code> in the global context and change a value, you will get a type error, and the things you try to access will be undefined</li>\n</ul>\n<h3>POJOs</h3>\n<h4>1. Label variables as either Primitive vs. Reference</h4>\n<p>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.</p>\n<ul>\n<li>Boolean - Primitive</li>\n<li>Null - Primitive</li>\n<li>Undefined - Primitive</li>\n<li>Number - Primitive</li>\n<li>String - Primitive</li>\n<li>Array - Reference</li>\n<li>Object - Reference</li>\n<li>Function - Reference</li>\n</ul>\n<h4>2. Identify when to use . vs [] when accessing values of an object</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h4>3. Write an object literal with a variable key using interpolation</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h4>4. Use the obj[key] !== undefined pattern to check if a given variable that contains a key exists in an object</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h4>5. Utilize Object.keys and Object.values in a function</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h4>6. Iterate through an object using a for in loop</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h4>7. Define a function that utilizes ...rest syntax to accept an arbitrary number of arguments</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h4>8. Use ...spread syntax for Object literals and Array literals</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h4>9. Destructure an array to reference specific elements</h4>\n<pre><code class=\"language-javascript\">let arr = ['one', 'two', 'three'];\n\nlet [first] = arr;\nconsole.log(first);\n</code></pre>\n<h4>10. Destructure an object to reference specific values</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h4>11. Write a function that accepts a string as an argument and returns an object representing the count of each character in the array</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h3></h3>\n<h3>Review of Concepts</h3>\n<h4>1. Identify the difference between const, let, and var declarations</h4>\n<h4>2. Explain the difference between const, let, and var declarations</h4>\n<pre><code class=\"language-javascript\">var a = 'a';\n</code></pre>\n<ul>\n<li><code>var</code> is the historical keyword used for variable declaration.</li>\n<li><code>var</code> declares variables in function scope, or global scope if not inside a function.</li>\n<li>We consider <code>var</code> to be <em>deprecated</em> and it is never used in this course.</li>\n</ul>\n<pre><code class=\"language-javascript\">let b = 'b';\n</code></pre>\n<ul>\n<li><code>let</code> is the keyword we use most often for variable declaration.</li>\n<li><code>let</code> declares variables in block scope.</li>\n<li>variables declared with <code>let</code> are re-assignable.</li>\n</ul>\n<pre><code class=\"language-javascript\">const c = 'c';\n</code></pre>\n<ul>\n<li><code>const</code> is a specialized form of <code>let</code> that can only be used to <strong>initialize</strong> a variable.</li>\n<li>Except when it is declared, you cannot assign to a <code>const</code> variable.</li>\n<li><code>const</code> scopes variables the same way that <code>let</code> does.</li>\n</ul>\n<h4>3. Predict the evaluation of code that utilizes function scope, block scope, lexical scope, and scope chaining</h4>\n<p>Consider this <code>run</code> function, inside which <code>foo</code> and <code>bar</code> have <code>function scope</code>. <code>i</code> and <code>baz</code> are scoped to the block expression.</p>\n<pre><code class=\"language-javascript\">// 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</code></pre>\n<p>Notice that referencing <code>baz</code> from outside it's block results in JavaScript throwing a ReferenceError.</p>\n<p>Consider this <code>run</code> function, inside of which <code>foo</code> has <code>function scope</code>.</p>\n<pre><code class=\"language-javascript\">function run() {\n console.log(foo); // undefined\n var foo = 'Foo';\n console.log(foo); // Foo\n}\n\nrun();\n</code></pre>\n<p>Consider this <code>func1</code> function and it's nested scopes.</p>\n<pre><code class=\"language-javascript\">// 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</code></pre>\n<h4>6. Implement a closure and explain how the closure effects scope</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h4>4. Define an arrow function</h4>\n<pre><code class=\"language-javascript\">const returnValue = (val) => val;\n</code></pre>\n<p>This simple construct will create a function that accepts <code>val</code> as a parameter, and returns <code>val</code> immediately. We do not need to type <code>return val</code>, because this is a single-line function.</p>\n<p>Identically, we could write</p>\n<pre><code class=\"language-javascript\">const returnValue = (val) => {\n return val;\n};\n</code></pre>\n<h4>5. Given an arrow function, deduce the value of <code>this</code> without executing the code</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<p>If we use a <em>function declaration</em> style function, the <code>this</code> variable is set to the <code>global</code> object (i.e. <code>Object [global]</code> in Node.JS and <code>Window</code> in your browser).</p>\n<pre><code class=\"language-javascript\">const adder = (arr) => {\n console.log(this);\n arr.reduce((acc, ele) => (sum += ele));\n};\nadder([1, 2, 4, 6]);\n</code></pre>\n<p>In this example, we use a <em>fat arrow</em> style function. Note that when we declare a funciton like this <code>this</code> becomes</p>\n<h4>7. Define a method that references this on an object literal</h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h4>8. Utilize the built in Function#bind on a callback to maintain the context of <code>this</code></h4>\n<pre><code class=\"language-javascript\">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</code></pre>\n<h4>9. Given a code snippet, identify what <code>this</code> refers to</h4>\n<pre><code class=\"language-javascript\">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</code></pre>" | |
| }, | |
| { | |
| "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": "<p>The <code>fs</code> module provides a lot of very useful functionality to access and interact with the file system.</p>\n<p>There is no need to install it. Being part of the Node.js core, it can be used by simply requiring it:</p>\n<pre><code class=\"language-js\">const fs = require('fs');\n</code></pre>\n<p>Once you do so, you have access to all its methods, which include:</p>\n<ul>\n<li><code>fs.access()</code>: check if the file exists and Node.js can access it with its permissions</li>\n<li><code>fs.appendFile()</code>: append data to a file. If the file does not exist, it's created</li>\n<li><code>fs.chmod()</code>: change the permissions of a file specified by the filename passed. Related: <code>fs.lchmod()</code>, <code>fs.fchmod()</code></li>\n<li><code>fs.chown()</code>: change the owner and group of a file specified by the filename passed. Related: <code>fs.fchown()</code>, <code>fs.lchown()</code></li>\n<li><code>fs.close()</code>: close a file descriptor</li>\n<li><code>fs.copyFile()</code>: copies a file</li>\n<li><code>fs.createReadStream()</code>: create a readable file stream</li>\n<li><code>fs.createWriteStream()</code>: create a writable file stream</li>\n<li><code>fs.link()</code>: create a new hard link to a file</li>\n<li><code>fs.mkdir()</code>: create a new folder</li>\n<li><code>fs.mkdtemp()</code>: create a temporary directory</li>\n<li><code>fs.open()</code>: set the file mode</li>\n<li><code>fs.readdir()</code>: read the contents of a directory</li>\n<li><code>fs.readFile()</code>: read the content of a file. Related: <code>fs.read()</code></li>\n<li><code>fs.readlink()</code>: read the value of a symbolic link</li>\n<li><code>fs.realpath()</code>: resolve relative file path pointers (<code>.</code>, <code>..</code>) to the full path</li>\n<li><code>fs.rename()</code>: rename a file or folder</li>\n<li><code>fs.rmdir()</code>: remove a folder</li>\n<li><code>fs.stat()</code>: returns the status of the file identified by the filename passed. Related: <code>fs.fstat()</code>, <code>fs.lstat()</code></li>\n<li><code>fs.symlink()</code>: create a new symbolic link to a file</li>\n<li><code>fs.truncate()</code>: truncate to the specified length the file identified by the filename passed. Related: <code>fs.ftruncate()</code></li>\n<li><code>fs.unlink()</code>: remove a file or a symbolic link</li>\n<li><code>fs.unwatchFile()</code>: stop watching for changes on a file</li>\n<li><code>fs.utimes()</code>: change the timestamp of the file identified by the filename passed. Related: <code>fs.futimes()</code></li>\n<li><code>fs.watchFile()</code>: start watching for changes on a file. Related: <code>fs.watch()</code></li>\n<li><code>fs.writeFile()</code>: write data to a file. Related: <code>fs.write()</code></li>\n</ul>\n<p>One peculiar thing about the <code>fs</code> module is that all the methods are asynchronous by default, but they can also work synchronously by appending <code>Sync</code>.</p>\n<p>For example:</p>\n<ul>\n<li><code>fs.rename()</code></li>\n<li><code>fs.renameSync()</code></li>\n<li><code>fs.write()</code></li>\n<li><code>fs.writeSync()</code></li>\n</ul>\n<p>This makes a huge difference in your application flow.</p>\n<blockquote>\n<p>Node.js 10 includes <a href=\"https://nodejs.org/api/fs.html#fs_fs_promises_api\">experimental support</a> for a promise based API</p>\n</blockquote>\n<p>For example let's examine the <code>fs.rename()</code> method. The asynchronous API is used with a callback:</p>\n<pre><code class=\"language-js\">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</code></pre>\n<p>A synchronous API can be used like this, with a try/catch block to handle errors:</p>\n<pre><code class=\"language-js\">const fs = require('fs');\n\ntry {\n fs.renameSync('before.json', 'after.json');\n //done\n} catch (err) {\n console.error(err);\n}\n</code></pre>\n<p>The key difference here is that the execution of your script will block in the second example, until the file operation succeeded.</p>" | |
| }, | |
| { | |
| "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": "<h2>What is the World Wide Web?\n\n</h2>\n<p>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.</p>\n<p>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).</p>\n<p>Let's look briefly at the four basic ingredients of the Web:</p>\n<ul>\n<li>TCP/IP - is a low level message protocol that is used to transfer messages between computers on the Internet.</li>\n<li>HTTP - is used by a Web Client to make a request to a Web Server and for the server to return the response.</li>\n<li>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.</li>\n<li>HTML - is a language for writing web pages containing text, images and other content.</li>\n</ul>\n<p>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 <em>Web</em> and the Internet that allows it to be the <em>World Wide Web</em>.</p>\n<p>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.</p>\n<h2>TCP/IP and DNS</h2>\n<p>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.</p>\n<p>A <em>Protocol</em> 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.</p>\n<p>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 <em>inter</em>-connected <em>net</em>works 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 <em>point-to-point</em> connection - like a private channel between the two computers, even though the data is carried by this shared network of networks.</p>\n<p>TCP/IP is a <em>packet oriented</em> 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.</p>\n<p>Each computer on the network is assigned a unique <em>IP address</em> 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 <em>network routing</em> 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.</p>\n<p>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 <em>private network</em> 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.</p>\n<p>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.</p>\n<p>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.</p>\n<p>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.</p>\n<h2>HTTP</h2>\n<p>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.</p>\n<p>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 <a href=\"http://code.google.com/p/bt-http-server/\">bluetooth</a>. Once the connection is established, the conversation can begin.</p>\n<p>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:</p>\n<p>The first word in the request is always one of the defined <em>HTTP verbs</em> (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 <em>headers</em> that qualify the request in some way. The <em>Host</em> 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.</p>\n<p>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:</p>\n<p>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.</p>\n<p>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.</p>\n<p>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.</p>\n<p>We'll look at HTTP in more detail later, for now the take home message is:</p>\n<ul>\n<li>HTTP is a simple text based protocol</li>\n<li>The client (browser) sends a request to the server</li>\n<li>The server receives the request and returns a response</li>\n<li>The server doesn't need to remember the client - every request is independant.</li>\n<li>The simple nature of HTTP makes it easy to understand and makes writing web servers relatively easy.</li>\n</ul>\n<h2>Uniform Resource Locators: URL</h2>\n<p>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.</p>\n<p>See <a href=\"https://pwp.stevecassidy.net/web/urls.html\">the URL chapter</a> for a detaile discussion.</p>\n<h2>Hypertext Markup Language: HTML</h2>\n<p>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. <em>Hypertext</em> describes the idea of linking one document to another via <em>hyperlinks</em> so that when you activate a link, you jump to a new document. There were hypertext systems before the birth of the web (<a href=\"http://www.xanadu.com/\">Project Xanadu</a>, <a href=\"http://en.wikipedia.org/wiki/HyperCard\">Hypercard</a>) but HTML has been much more successful than any other standard in this space.</p>\n<p>HTML is a <em>Markup Language</em> 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>.</p>\n<p>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.</p>\n<p>Another related markup language is <a href=\"http://www.w3.org/XML/\">XML</a>, 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 <a href=\"http://www.w3.org/MarkUp/\">XHTML</a> but this never really took off and the standardisation work around it was stopped in 2010. Instead, XML has become widely used to describe <em>data</em> rather than <em>documents</em> and we'll look at how it is used today on the web later in this book.</p>" | |
| }, | |
| { | |
| "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": "<h2>The HTTP Protocol\n\n</h2>\n<ul>\n<li>Requires: a connection between client and server</li>\n<li>Stateless: no login process, each request is independent</li>\n<li>Simple format: request header, blank line, possible payload</li>\n<li>Symmetrical: allows data to be sent and recieved</li>\n<li>Very easy to implement but scales very well</li>\n</ul>\n<h2>Example HTTP Request</h2>\n<p>Note lines folded for display.</p>\n<p>What do each of these headers mean? Which are required? Many are defined in the <a href=\"ftp://ftp.isi.edu/in-notes/rfc2616.txt\">HTTP standard</a> but others can be defined via the HTTP extension framework.</p>\n<h2>Example HTTP Response</h2>\n<h2>Example HTTP POST Request</h2>\n<p>Note lines folded for display.</p>\n<p>This is a POST request, note how the data is encoded in the request body.</p>\n<h2>Example HTTP GET Request</h2>\n<p>Note lines folded for display.</p>\n<p>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.</p>\n<h2>HTTP Redirect</h2>\n<p>Alternately</p>\n<p>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.</p>\n<h2>HTTP Verbs</h2>\n<ul>\n<li>GET - get a resource, <em>Idempotent</em></li>\n<li>POST - send some data to a resource</li>\n<li>HEAD - get headers for a resource</li>\n<li>PUT - create a new resource</li>\n<li>DELETE - delete a resource</li>\n</ul>\n<h2>Common HTTP Response Status Codes</h2>\n<p>Some notable response codes:</p>\n<ul>\n<li><a href=\"http://en.wikipedia.org/wiki/List_of_HTTP_status_codes#2xx_Success\">200 OK</a> - Request succeeded and everything went well</li>\n<li><a href=\"http://en.wikipedia.org/wiki/List_of_HTTP_status_codes#3xx_Redirection\">301 Moved Permanently</a> - Requested resource has moved and all future requests should be made to new location</li>\n<li><a href=\"http://en.wikipedia.org/wiki/List_of_HTTP_status_codes#4xx_Client_Error\">403 Forbidden</a> - Response refused by server (even if request is valid)</li>\n<li><a href=\"http://en.wikipedia.org/wiki/List_of_HTTP_status_codes#4xx_Client_Error\">404 Not Found</a> - Server could not find requested resource (though it may be available in the future)</li>\n<li><a href=\"http://en.wikipedia.org/wiki/List_of_HTTP_status_codes#5xx_Server_Error\">500 Internal Server Error</a> - Generic error message response when server encountered an error</li>\n</ul>\n<p>See also: <a href=\"http://en.wikipedia.org/wiki/List_of_HTTP_status_codes\">full list of HTTP status codes</a></p>\n<h2>Resources</h2>\n<ul>\n<li>Use <a href=\"https://addons.mozilla.org/en-US/firefox/addon/3829\">Live HTTP Headers</a> in Firefox to view headers of requests that you make. Also available as a <a href=\"https://chrome.google.com/webstore/detail/live-http-headers/iaiioopjkcekapmldfgbebdclcnpgnlo\">Chrome Extension</a>.</li>\n<li>Similarly, in Google Chrome, the <a href=\"http://www.chromium.org/devtools/google-chrome-developer-tools-tutorial#resources\">Resources panel</a> 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.</li>\n<li>Wikipedia's <a href=\"http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol\">entry on HTTP</a> gives a good overview of the protocol.</li>\n</ul>" | |
| }, | |
| { | |
| "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": "<h2>Articles</h2>\n<iframe src=\"https://codesandbox.io/embed/boring-antonelli-vdxzf?fontsize=14&hidenavigation=1&theme=dark&view=preview\"\n style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\"\n title=\"medium-articles\"\n allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n ></iframe>" | |
| }, | |
| { | |
| "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": "<h1>The Anatomy of a Search Engine</h1>\n<blockquote>\n<h2>Excerpt</h2>\n<p>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.</p>\n</blockquote>\n<hr>\n<p><strong>Sergey Brin and Lawrence Page</strong></p>\n<p>{sergey, page}@cs.stanford.edu</p>\n<p>Computer Science Department, Stanford University, Stanford, CA 94305</p>\n<h3>Abstract</h3>\n<blockquote>\n<pre><code> 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</code></pre>\n<p> <strong>Keywords</strong>: World Wide Web, Search Engines, Information Retrieval, PageRank, Google</p>\n</blockquote>\n<h2>1. Introduction</h2>\n<p><em>(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.)</em><br>\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 <a href=\"http://www.yahoo.com/\">Yahoo!</a> 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.</p>\n<h3>1.1 Web Search Engines -- Scaling Up: 1994 - 2000</h3>\n<p>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) <a href=\"http://www.cs.colorado.edu/home/mcbryan/mypapers/www94.ps\">[McBryan 94]</a> 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 <a href=\"http://www.searchenginewatch.com/\">Search Engine Watch)</a>. 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.</p>\n<h3>1.2. Google: Scaling with the Web</h3>\n<p>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.</p>\n<p>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 <a href=\"http://infolab.stanford.edu/~backrub/google.html#data\">4.2</a>). 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 <a href=\"http://infolab.stanford.edu/~backrub/google.html#b\">Appendix B</a>). This will result in favorable scaling properties for centralized systems like Google.</p>\n<h3>1.3 Design Goals</h3>\n<h4>1.3.1 Improved Search Quality</h4>\n<p>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 <a href=\"http://botw.org/1994/awards/navigators.html\">Best of the Web 1994 -- Navigators,</a> \"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 [<a href=\"http://infolab.stanford.edu/~backrub/google.html#ref\">Marchiori 97</a>] [<a href=\"http://infolab.stanford.edu/~backrub/google.html#ref\">Spertus 97</a>] [<a href=\"http://infolab.stanford.edu/~backrub/google.html#ref\">Weiss 96</a>] [<a href=\"http://infolab.stanford.edu/~backrub/google.html#ref\">Kleinberg 98</a>]. In particular, link structure [<a href=\"http://infolab.stanford.edu/~backrub/google.html#ref\">Page 98</a>] 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 <a href=\"http://infolab.stanford.edu/~backrub/google.html#pr\">2.1</a> and <a href=\"http://infolab.stanford.edu/~backrub/google.html#anchor\">2.2</a>).</p>\n<h4>1.3.2 Academic Search Engine Research</h4>\n<p>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 <a href=\"http://infolab.stanford.edu/~backrub/google.html#a\">Appendix A</a>). With Google, we have a strong goal to push more development and understanding into the academic realm.</p>\n<p>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.</p>\n<p>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.</p>\n<h2>2. System Features</h2>\n<p>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.</p>\n<h3>2.1 PageRank: Bringing Order to the Web</h3>\n<p>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 <a href=\"http://google.stanford.edu/\">google.stanford.edu</a>). For the type of full text searches in the main Google system, PageRank also helps a great deal.</p>\n<h4>2.1.1 Description of PageRank Calculation</h4>\n<p>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:</p>\n<blockquote>\n<p><em>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:</em></p>\n<p><em>PR(A) = (1-d) + d (PR(T1)/C(T1) + ... + PR(Tn)/C(Tn))</em></p>\n<p><em>Note that the PageRanks form a probability distribution over web pages, so the sum of all web pages' PageRanks will be one.</em></p>\n</blockquote>\n<p>PageRank or <em>PR(A)</em> 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.</p>\n<h4>2.1.2 Intuitive Justification</h4>\n<p>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 <em>d</em> 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 <em>d</em> 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 [<a href=\"http://infolab.stanford.edu/~backrub/google.html#ref\">Page 98</a>].</p>\n<p>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 <a href=\"http://www.yahoo.com/\">Yahoo!</a> 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.</p>\n<h3>2.2 Anchor Text</h3>\n<p>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.</p>\n<p>This idea of propagating anchor text to the page it refers to was implemented in the World Wide Web Worm [<a href=\"http://infolab.stanford.edu/~backrub/google.html#ref\">McBryan 94</a>] 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.</p>\n<h3>2.3 Other Features</h3>\n<p>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.</p>\n<h2>3 Related Work</h2>\n<p>Search research on the web has a short and concise history. The World Wide Web Worm (WWWW) <a href=\"http://www.cs.colorado.edu/home/mcbryan/mypapers/www94.ps\">[McBryan 94]</a> 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 [<a href=\"http://info.webcrawler.com/bp/WWW94.html\">Pinkerton 94</a>]. According to Michael Mauldin (chief scientist, Lycos Inc) <a href=\"http://www.computer.org/pubs/expert/1997/trends/x1008/mauldin.htm\">[Mauldin]</a>, \"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.</p>\n<h3>3.1 Information Retrieval</h3>\n<p>Work in information retrieval systems goes back many years and is well developed [<a href=\"http://infolab.stanford.edu/~backrub/google.html#ref\">Witten 94</a>]. 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 [<a href=\"http://infolab.stanford.edu/~backrub/google.html#ref\">TREC 96</a>], 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.</p>\n<h3>3.2 Differences Between the Web and Well Controlled Collections</h3>\n<p>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.</p>\n<p>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.</p>\n<h2>4 System Anatomy</h2>\n<p>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.</p>\n<p><img src=\"http://infolab.stanford.edu/~backrub/over.gif\"></p>\n<p>Figure 1. High Level Google Architecture</p>\n<h3>4.1 Google Architecture Overview</h3>\n<p>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.</p>\n<p>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.</p>\n<p>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.</p>\n<p>The sorter takes the barrels, which are sorted by docID (this is a simplification, see <a href=\"http://infolab.stanford.edu/~backrub/google.html#hits\">Section 4.2.5</a>), 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.</p>\n<h3>4.2 Major Data Structures</h3>\n<p>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.</p>\n<h4>4.2.1 BigFiles</h4>\n<p>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.</p>\n<h4>4.2.2 Repository</h4>\n<p><img src=\"http://infolab.stanford.edu/~backrub/repos.gif\"></p>\n<p>Figure 2. Repository Data Structure</p>\n<p>The repository contains the full HTML of every web page. Each page is compressed using zlib (see <a href=\"ftp://ftp.uu.net/graphics/png/documents/zlib/zdoc-index.html\">RFC1950</a>). 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 <a href=\"http://www.muraroa.demon.co.uk/\">bzip</a>. 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.</p>\n<h4>4.2.3 Document Index</h4>\n<p>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</p>\n<p>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.</p>\n<h4>4.2.4 Lexicon</h4>\n<p>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.</p>\n<h4>4.2.5 Hit Lists</h4>\n<p>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.</p>\n<p>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.</p>\n<p><img src=\"http://infolab.stanford.edu/~backrub/barrels.gif\"></p>\n<p>Figure 3. Forward and Reverse Indexes and the Lexicon</p>\n<p>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.</p>\n<h4>4.2.6 Forward Index</h4>\n<p>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.</p>\n<h4>4.2.7 Inverted Index</h4>\n<p>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.</p>\n<p>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.</p>\n<h3>4.3 Crawling the Web</h3>\n<p>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.</p>\n<p>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.</p>\n<p>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 <a href=\"http://info.webcrawler.com/mak/projects/robots/norobots.html\">robots exclusion protocol</a>, 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.</p>\n<h3>4.4 Indexing the Web</h3>\n<ul>\n<li><strong>Parsing --</strong> 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.</li>\n<li><strong>Indexing</strong> <strong>Documents into Barrels --</strong> 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.</li>\n<li><strong>Sorting</strong> -- 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.</li>\n</ul>\n<h3>4.5 Searching</h3>\n<p>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.</p>\n<ol>\n<li>Parse the query.</li>\n<li>Convert words into wordIDs.</li>\n<li>Seek to the start of the doclist in the short barrel for every word.</li>\n<li>Scan through the doclists until there is a document that matches all the search terms.</li>\n<li>Compute the rank of that document for the query.</li>\n<li>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.</li>\n<li>If we are not at the end of any doclist go to step 4.</li>\n</ol>\n<p>Sort the documents that have matched by rank and return the top k.</p>\n<p>Figure 4. Google Query Evaluation</p>\n<p>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.</p>\n<h4>4.5.1 The Ranking System</h4>\n<p>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.</p>\n<p>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.</p>\n<h4>4.5.2 Feedback</h4>\n<p>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.</p>\n<h2>5 Results and Performance</h2>\n<p> 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.</p>\n<p>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 <a href=\"http://google.stanford.edu/\">http://google.stanford.edu</a>.</p>\n<h3>5.1 Storage Requirements</h3>\n<p>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. </p>\n<p>Storage Statistics</p>\n<p>Total Size of Fetched Pages</p>\n<p>147.8 GB</p>\n<p>Compressed Repository</p>\n<p>53.5 GB</p>\n<p>Short Inverted Index</p>\n<p>4.1 GB</p>\n<p>Full Inverted Index</p>\n<p>37.2 GB</p>\n<p>Lexicon</p>\n<p>293 MB</p>\n<p>Temporary Anchor Data<br>\n(not in total)</p>\n<p>6.6 GB</p>\n<p>Document Index Incl.<br>\nVariable Width Data</p>\n<p>9.7 GB</p>\n<p>Links Database</p>\n<p>3.9 GB</p>\n<p>Total Without Repository</p>\n<p>55.2 GB</p>\n<p>Total With Repository</p>\n<p>108.7 GB</p>\n<p>Web Page Statistics</p>\n<p>Number of Web Pages Fetched</p>\n<p>24 million</p>\n<p>Number of Urls Seen</p>\n<p>76.5 million</p>\n<p>Number of Email Addresses</p>\n<p>1.7 million</p>\n<p>Number of 404's</p>\n<p>1.6 million</p>\n<p>Table 1. Statistics</p>\n<h3>5.2 System Performance</h3>\n<p>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.</p>\n<h3>5.3 Search Performance</h3>\n<p>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.</p>\n<p><strong>Initial Query</strong></p>\n<p><strong>Same Query Repeated (IO mostly cached)</strong> </p>\n<p><strong>Query</strong></p>\n<p><strong>CPU Time(s)</strong></p>\n<p><strong>Total Time(s)</strong></p>\n<p><strong>CPU Time(s)</strong></p>\n<p><strong>Total Time(s)</strong></p>\n<p>al gore</p>\n<p>0.09</p>\n<p>2.13</p>\n<p>0.06</p>\n<p>0.06</p>\n<p>vice president</p>\n<p>1.77</p>\n<p>3.84</p>\n<p>1.66</p>\n<p>1.80</p>\n<p>hard disks</p>\n<p>0.25</p>\n<p>4.86</p>\n<p>0.20</p>\n<p>0.24</p>\n<p>search engines</p>\n<p>1.31</p>\n<p>9.63</p>\n<p>1.16</p>\n<p>1.16</p>\n<p>Table 2. Search Times</p>\n<h2>6 Conclusions</h2>\n<p>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.</p>\n<h3>6.1 Future Work</h3>\n<p>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 [<a href=\"http://infolab.stanford.edu/~backrub/google.html#ref\">Cho 98</a>]. 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.</p>\n<h3>6.2 High Quality Search</h3>\n<p>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 <a href=\"http://www.io.com/~cjburke/clinton/970414.html\">Bill Clinton Joke of the Day: April 14, 1997</a>. 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.</p>\n<h3>6.3 Scalable Architecture</h3>\n<p>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.</p>\n<h3>6.4 A Research Tool</h3>\n<p>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 [<a href=\"http://infolab.stanford.edu/~backrub/google.html#ref\">Abiteboul 97</a>] 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.</p>" | |
| }, | |
| { | |
| "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": "<h2># Nextjs for everyone — with some basic knowledge of React</h2>\n<blockquote>\n<h2>Excerpt</h2>\n<p>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,</p>\n</blockquote>\n<hr>\n<h4>With some basic React and JavaScript knowledge, you’ll be on your way</h4>\n<p><strong>Next.js</strong> is a JavaScript framework created by <a href=\"https://zeit.co/\">Zeit</a>. 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.</p>\n<p>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 <code>npm run dev</code> and start building your application ?.</p>\n<p>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.</p>\n<p><strong>This post assumes that you have some basic knowledge of React and JavaScript.</strong></p>\n<p>Here are some great websites built with Next.js:</p>\n<ul>\n<li><a href=\"https://syntax.fm/\">Syntaxt.fm</a></li>\n<li><a href=\"https://www.npmjs.com/\">npmjs</a></li>\n<li><a href=\"https://material-ui.com/\">material-ui.io</a></li>\n<li><a href=\"https://expo.io/\">expo.io</a></li>\n<li><a href=\"https://www.codementor.io/\">codemenitor.io</a></li>\n</ul>\n<p>I even used Nextjs to build my personal website <a href=\"https://www.saidhayani.me/\">saidhayani.me</a> — you can get the source code on GitHub <a href=\"https://github.com/hayanisaid/said-hayani-nextjs\">here</a>.</p>\n<h3>Getting starting with Next.js</h3>\n<p>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.</p>\n<p>Let’s get started and create a Next.js project.</p>\n<p>First, we need to create a folder and give it a name of our choice. I’m gonna name it <code>nextjs-app</code>.</p>\n<p>You can easily do that with this command line:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*k8DzCXqZwRaY64Bhli5-yQ.png\"></p>\n<pre><code>mkdir nextjs-app\n</code></pre>\n<p>After creating the nextjs-app folder, open it on the terminal. Run <code>npm init</code> to create the <code>package.json</code> file.</p>\n<p>Next, we have to install our dependencies.</p>\n<p>Installing Next.js</p>\n<ul>\n<li>using Yarn, type</li>\n</ul>\n<pre><code>yarn add next\n</code></pre>\n<ul>\n<li>using npm, type:</li>\n</ul>\n<pre><code>npm i next --save\n</code></pre>\n<p>Then we have to install React because Next.js uses React. The first line below uses Yarn for the installation.</p>\n<pre><code>yarn add react react-dom\n</code></pre>\n<pre><code>// with npm\n</code></pre>\n<pre><code>npm i react react-dom --save\n</code></pre>\n<p>After that you have to create two necessary folders: <code>pages</code> and <code>static</code> . Next.js won’t work without them!!</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*s3N5eZcSSSgRdBiaMQeCRA.png\"></p>\n<pre><code>mkdir pages static\n</code></pre>\n<p>You <strong>must</strong> have this structure after running these commands :</p>\n<pre><code>nextjs-app -pages -static -package.json\n</code></pre>\n<p>And then simply you can run <code>npm next dev</code> and then open <code>[http://localhost:3000/](http://localhost:3000/)</code> in your browser.</p>\n<p>The <code>NotFound</code> page will show up because we don't have any page yet!</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*Hv_4BaqTnrlriZ8Q3zk5ZQ.png\"></p>\n<p>So let’s create a <code>home</code> page and an entry point <code>index.js</code>.</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*IwZ5Ahr9egJ8KHF5HnLfHQ.png\"></p>\n<pre><code>touch index.js home.js\n</code></pre>\n<p>And then you can write a normal React component. As I said above, Next.js is for building React applications.</p>\n<p>Here is what our <code>home.js</code> looks like:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*He5fQw-VgeY5Gjo2RFGckw.png\"></p>\n<p>And here is our <code>index.js</code> file:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*AgGKp-WdRTwb3bOuqljcug.png\"></p>\n<p>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.</p>\n<p><strong>Note</strong>: Next.js is like any other server-side rendering tool we need to define the default page of our application, in our case is <code>index.js</code>.</p>\n<p>You will see this change in the browser after running <code>npm next dev</code>:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*QuQK1J5P0Rc4S-0BhllNmg.png\"></p>\n<p>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 <a href=\"https://nextjs.org/learn/basics/getting-started/first-page\">official docs of Next.js</a> .</p>\n<h4>My alternative</h4>\n<p>I usually don’t use this way. I use the <a href=\"http://import%20react%20from/\">create-next-app</a> CLI instead that will do all this stuff for me in one single line.</p>\n<pre><code>npx create-next-app my-app\n</code></pre>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*W5KCIFWP7yMHI-zaeVcmPA.png\"></p>\n<p>You can check out the documentation <a href=\"https://github.com/segmentio/create-next-app\">here</a> to explore more features.</p>\n<h3>Create custom configs for Next.js</h3>\n<p>Sometimes you might want to add some additional dependencies or packages to your Next.js app.</p>\n<p>Next.js gives you the option to customize your configuration using a <code>next-config.js</code> file.</p>\n<p>For example, you might want to add sass support to your app. In this case you have to use the <a href=\"https://github.com/zeit/next-plugins/tree/master/packages/next-sass\">next-sass</a> package <strong>and</strong> you have to add it to the <code>next-config.js</code> file as in the example below:</p>\n<p>First, install <code>next-sass</code>:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*5XSEx8DH0851FNzMxDx5LQ.png\"></p>\n<pre><code>yarn add @zeit/next-sass\n</code></pre>\n<p>Then include it inside the <code>next-config.js</code> file:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*YN_aoR5dzlnMyG2xVHJcww.png\"></p>\n<p>And then you can create write your sass code and import it in your component:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*kde4wjR-EpoNHc1c4JTb8g.png\"></p>\n<p>Importing the sass file in our component:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*yv1cTBXPeONqaV-CS1OZ2A.png\"></p>\n<p>And here is the result:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*VYfSkK1fIZKu75-2P8s4Bw.png\"></p>\n<p>Wow, wasn’t that <strong>super easy</strong> to add sass support to out Next.js app?</p>\n<p>At this point, we just covered the installation and configuration part. Now let’s talk about the features of Next.js!</p>\n<h3>The features</h3>\n<p>Next.js comes with a bunch of great features like server-side rendering, routers, and lazy loading.</p>\n<h4>Server-side rendering</h4>\n<p>Next.js performs server-side rendering by default. This makes your application optimized for search engines. Also, you can integrate any middleware such as <a href=\"https://expressjs.com/\">express.js</a> or <a href=\"https://hapijs.com/\">Hapi.js</a>, and you can run any database such as MongoDB or MySQL.</p>\n<p>Speaking of search engine optimization, Next.js comes with a <code>Head</code> 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 <code>Head</code> component :</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*mnIJGBgF59r1YjX5jXu8IA.png\"></p>\n<p>And you can import and use the<code>Head</code> component in any other page:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*liF5bNPAQ_j7gA9funSGTg.png\"></p>\n<p>Awesome!</p>\n<p><strong>Note</strong>: With Next.js you <strong>don’t</strong> need to import React because Next.js does this for you.</p>\n<h4>Generating a static website with Next.js</h4>\n<p>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 <a href=\"https://www.netlify.com/\">netlify</a>. You can learn more how to make a static website with Next.js <a href=\"https://nextjs.org/learn/excel/static-html-export/setup\">here in the official docs</a>.</p>\n<h4>Routers</h4>\n<p>This is another one of the great features of Next.js. When you use the <a href=\"https://github.com/facebook/create-react-app\">create-react-app</a>, you usually need to install <a href=\"https://github.com/ReactTraining/react-router\">react-router</a> and create its custom configuration.</p>\n<p>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 <code>pages</code> folder and Next.js will take care of all routing configuration.</p>\n<p>Let’s go ahead and create a custom navigation to make everything clear!</p>\n<p>To navigate between pages, Next.js has the <code>Link</code> method to manage the navigation.</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*D54h6wnKX9fCS0AU34tVLA.png\"></p>\n<p>Let’s create <code>blog.js</code> and <code>contact.js</code> pages:</p>\n<p><code>blog.js</code></p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*f6_vaaPs1Okfj8vZ9Fhk8g.png\"></p>\n<p>And here is the <code>contact.js</code> page:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*5lWCDzAUWed2NlsGpTC5EQ.png\"></p>\n<p>And now we must be able to navigate between those pages ?</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*7WYZeRb92PAwqthLo0xqHg.gif\"></p>\n<p>Wow that so easy and super awesome.</p>\n<h4>Lazy loading</h4>\n<p>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.</p>\n<p>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.</p>\n<p>Next.js comes with its own code splitting method. It provides us a method, called <code>dynamic</code>, to load our component, as in the example below:</p>\n<p><img src=\"https://cdn-media-1.freecodecamp.org/images/1*Ib835M7Ih-RY1kRBOUnXFA.png\"></p>\n<p>You can find the source code of these examples on <a href=\"https://github.com/hayanisaid/nextjs-intro-example\">GitHub</a></p>" | |
| }, | |
| { | |
| "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": "<p>Node.js can be installed in different ways. This post highlights the most common and convenient ones.</p>\n<p>Official packages for all the major platforms are available at <a href=\"https://nodejs.org/en/download/\">https://nodejs.org/en/download/</a>.</p>\n<p>One very convenient way to install Node.js is through a package manager. In this case, every operating system has its own.</p>\n<p>On macOS, <a href=\"https://brew.sh/\">Homebrew</a> is the de-facto standard, and - once installed - allows you to install Node.js very easily, by running this command in the CLI:</p>\n<pre><code class=\"language-bash\">brew install node\n</code></pre>\n<p>Other package managers for Linux and Windows are listed in <a href=\"https://nodejs.org/en/download/package-manager/\">https://nodejs.org/en/download/package-manager/</a></p>\n<p><code>nvm</code> 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.</p>\n<p>It is also very useful to test your code with old Node.js versions.</p>\n<p>See <a href=\"https://github.com/creationix/nvm\">https://github.com/creationix/nvm</a> for more information about this option.</p>\n<p>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.</p>\n<p>In any case, when Node.js is installed you'll have access to the <code>node</code> executable program in the command line.</p>" | |
| }, | |
| { | |
| "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": "<p>Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project!</p>\n<p>Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser. This allows Node.js to be very performant.</p>\n<p>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.</p>\n<p>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.</p>\n<p>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.</p>\n<p>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.</p>\n<p>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.</p>\n<h2>A Vast Number of Libraries</h2>\n<p>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.</p>\n<h2>An Example Node.js Application</h2>\n<p>The most common example Hello World of Node.js is a web server:</p>\n<iframe\n title=\"Hello world web server\"\n src=\"https://glitch.com/embed/#!/embed/nodejs-dev-0001-01?path=server.js&previewSize=30&attributionHidden=true&sidebarCollapsed=true\"\n alt=\"nodejs-dev-0001-01 on Glitch\"\n style=\"height: 400px; width: 100%; border: 0;\">\n</iframe>\n<!--```js\nconst http = require('http')\n\nconst hostname = '127.0.0.1'\nconst port = 3000\n\nconst server = http.createServer((req, res) => {\n res.statusCode = 200\n res.setHeader('Content-Type', 'text/plain')\n res.end('Hello World\\n')\n})\n\nserver.listen(port, hostname, () => {\n console.log(`Server running at http://${hostname}:${port}/`)\n})\n```\n\nTo run this snippet, save it as a `server.js` file and run `node server.js` in your terminal.-->\n<p>This code first includes the Node.js <a href=\"https://nodejs.org/api/http.html\"><code>http</code> module</a>.</p>\n<p>Node.js has a fantastic <a href=\"https://nodejs.org/api/\">standard library</a>, including first-class support for networking.</p>\n<p>The <code>createServer()</code> method of <code>http</code> creates a new HTTP server and returns it.</p>\n<p>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.</p>\n<p>Whenever a new request is received, the <a href=\"https://nodejs.org/api/http.html#http_event_request\"><code>request</code> event</a> is called, providing two objects: a request (an <a href=\"https://nodejs.org/api/http.html#http_class_http_incomingmessage\"><code>http.IncomingMessage</code></a> object) and a response (an <a href=\"https://nodejs.org/api/http.html#http_class_http_serverresponse\"><code>http.ServerResponse</code></a> object).</p>\n<p>Those 2 objects are essential to handle the HTTP call.</p>\n<p>The first provides the request details. In this simple example, this is not used, but you could access the request headers and request data.</p>\n<p>The second is used to return data to the caller.</p>\n<p>In this case with:</p>\n<pre><code class=\"language-js\">res.statusCode = 200;\n</code></pre>\n<p>we set the statusCode property to 200, to indicate a successful response.</p>\n<p>We set the Content-Type header:</p>\n<pre><code class=\"language-js\">res.setHeader('Content-Type', 'text/plain');\n</code></pre>\n<p>and we close the response, adding the content as an argument to <code>end()</code>:</p>\n<pre><code class=\"language-js\">res.end('Hello World\\n');\n</code></pre>\n<h2>Node.js Frameworks and Tools</h2>\n<p>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.</p>\n<p>Many of those established over time as popular options. Here is a non-comprehensive list of the ones worth learning:</p>\n<ul>\n<li><a href=\"https://adonisjs.com/\"><strong>AdonisJs</strong></a>: A full-stack framework highly focused on developer ergonomics, stability, and confidence. Adonis is one of the fastest Node.js web frameworks.</li>\n<li><a href=\"https://expressjs.com/\"><strong>Express</strong></a>: 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.</li>\n<li><a href=\"https://fastify.io/\"><strong>Fastify</strong></a>: 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.</li>\n<li><a href=\"https://www.gatsbyjs.com/\"><strong>Gatsby</strong></a>: A <a href=\"https://reactjs.org/\">React</a>-based, <a href=\"https://graphql.org/\">GraphQL</a> powered, static site generator with a very rich ecosystem of plugins and starters.</li>\n<li><a href=\"https://hapijs.com\"><strong>hapi</strong></a>: A rich framework for building applications and services that enables developers to focus on writing reusable application logic instead of spending time building infrastructure.</li>\n<li><a href=\"http://koajs.com/\"><strong>koa</strong></a>: 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.</li>\n<li><a href=\"https://loopback.io/\"><strong>Loopback.io</strong></a>: Makes it easy to build modern applications that require complex integrations.</li>\n<li><a href=\"https://meteor.com\"><strong>Meteor</strong></a>: 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 <a href=\"https://reactjs.org/\">React</a>, <a href=\"https://vuejs.org/\">Vue</a>, and <a href=\"https://angular.io\">Angular</a>. Can be used to create mobile apps as well.</li>\n<li><a href=\"https://github.com/zeit/micro\"><strong>Micro</strong></a>: It provides a very lightweight server to create asynchronous HTTP microservices.</li>\n<li><a href=\"https://nestjs.com/\"><strong>NestJS</strong></a>: A TypeScript based progressive Node.js framework for building enterprise-grade efficient, reliable and scalable server-side applications.</li>\n<li><a href=\"https://nextjs.org/\"><strong>Next.js</strong></a>: <a href=\"https://reactjs.org\">React</a> 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.</li>\n<li><a href=\"https://nx.dev/\"><strong>Nx</strong></a>: A toolkit for full-stack monorepo development using NestJS, Express, <a href=\"https://reactjs.org/\">React</a>, <a href=\"https://angular.io\">Angular</a>, and more! Nx helps scale your development from one team building one application to many teams collaborating on multiple applications!</li>\n<li><a href=\"https://sapper.svelte.dev/\"><strong>Sapper</strong></a>: 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!</li>\n<li><a href=\"https://socket.io/\"><strong>Socket.io</strong></a>: A real-time communication engine to build network applications.</li>\n<li><a href=\"https://strapi.io/\"><strong>Strapi</strong></a>: 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.</li>\n</ul>" | |
| }, | |
| { | |
| "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": "<p>When you install a package using npm you can perform 2 types of installation:</p>\n<ul>\n<li>a local install</li>\n<li>a global install</li>\n</ul>\n<p>By default, when you type an npm install command, like:</p>\n<p>the package is installed in the current file tree, under the node_modules subfolder.</p>\n<p>As this happens, npm also adds the lodash entry in the dependencies property of the package.json file present in the current folder.</p>\n<p>A global installation is performed using the -g flag:</p>\n<p>When this happens, npm won't install the package under the local folder, but instead, it will use a global location.</p>\n<p>Where, exactly?</p>\n<p>The npm root -g command will tell you where that exact location is on your machine.</p>\n<p>On macOS or Linux this location could be /usr/local/lib/node<em>modules. On Windows it could be C:\\Users\\YOU\\AppData\\Roaming\\npm\\node</em>modules</p>\n<p>If you use nvm to manage Node.js versions, however, that location would differ.</p>\n<p>I for example use nvm and my packages location was shown as /Users/joe/.nvm/versions/node/v8.9.0/lib/node_modules.</p>" | |
| }, | |
| { | |
| "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": "<p>Node.js has a built-in module system.</p>\n<p>A Node.js file can import functionality exposed by other Node.js files.</p>\n<p>When you want to import something you use</p>\n<p>to import the functionality exposed in the library.js file that resides in the current file folder.</p>\n<p>In this file, functionality must be exposed before it can be imported by other files.</p>\n<p>Any other object or variable defined in the file by default is private and not exposed to the outer world.</p>\n<p>This is what the module.exports API offered by the <a href=\"https://nodejs.org/api/modules.html\">module system</a> allows us to do.</p>\n<p>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.</p>\n<p>You can do so in 2 ways.</p>\n<p>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 <em>just that object</em>:</p>\n<p>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:</p>\n<p>or directly</p>\n<p>And in the other file, you'll use it by referencing a property of your import:</p>\n<p>or</p>\n<p>What's the difference between module.exports and exports?</p>\n<p>The first exposes the object it points to. The latter exposes <em>the properties</em> of the object it points to.</p>" | |
| }, | |
| { | |
| "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": "<p>Node.js has a built-in module system.</p>\n<p>A Node.js file can import functionality exposed by other Node.js files.</p>\n<p>When you want to import something you use</p>\n<p>to import the functionality exposed in the library.js file that resides in the current file folder.</p>\n<p>In this file, functionality must be exposed before it can be imported by other files.</p>\n<p>Any other object or variable defined in the file by default is private and not exposed to the outer world.</p>\n<p>This is what the module.exports API offered by the <a href=\"https://nodejs.org/api/modules.html\">module system</a> allows us to do.</p>\n<p>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.</p>\n<p>You can do so in 2 ways.</p>\n<p>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 <em>just that object</em>:</p>\n<p>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:</p>\n<p>or directly</p>\n<p>And in the other file, you'll use it by referencing a property of your import:</p>\n<p>or</p>\n<p>What's the difference between module.exports and exports?</p>\n<p>The first exposes the object it points to. The latter exposes <em>the properties</em> of the object it points to.</p>\n<h1>Modules in Javascript</h1>\n<p>Differences between Node.js and browsers</p>\n<hr>\n<h3>Modules in Javascript</h3>\n<h4><strong>Differences between Node.js and browsers</strong></h4>\n<p>There are many differences between Node.js and browser environments, but many of them are small and inconsequential in practice. For example, in our <em>Asynchronous</em> lesson, we noted how <a href=\"https://nodejs.org/api/timers.html#timers_settimeout_callback_delay_args\" class=\"markup--anchor markup--p-anchor\">Node’s setTimeout</a> has a slightly different return value from <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout\" class=\"markup--anchor markup--p-anchor\">a browser’s setTimeout</a>. Let’s go over a few notable differences between the two environments.</p>\n<p><strong>Global vs Window</strong></p>\n<p>In the Node.js runtime, the <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Global_object\" class=\"markup--anchor markup--p-anchor\">global object</a> is the object where global variables are stored. In browsers, the <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Window\" class=\"markup--anchor markup--p-anchor\">window object</a> is where global variables are stored. The window also includes properties and methods that deal with drawing things on the screen like images, links, and buttons. Node doesn’t need to draw anything, and so it does not come with such properties. This means that you can’t reference window in Node.</p>\n<p><em>Most browsers allow you to reference global but it is really the same object as window.</em></p>\n<p><strong>Document</strong></p>\n<p>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.</p>\n<p><strong>Location</strong></p>\n<p>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.</p>\n<p><strong>Require and module.exports</strong></p>\n<p>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:</p>\n<p>If we execute animals.js in Node, the program would print ‘Sennacy is a great pet!’.</p>\n<p>Browsers don’t have a notion of a file system so we cannot use require or module.exports in the same way.</p>\n<h3>The fs module</h3>\n<p>Node comes with an <a href=\"https://nodejs.org/api/fs.html\" class=\"markup--anchor markup--p-anchor\">fs module</a> that contains methods that allow us to interact with our computer’s <strong>F</strong>ile <strong>S</strong>ystem through JavaScript. No additional installations are required; to access this module we can simply <code>require</code> it. We recommend that you code along with this reading. Let's begin with a <code>change-some-files.js</code> script that imports the module:</p>\n<pre><code>// change-some-files.js\n\nconst fs = require(\"fs\");\n</code></pre>\n<p>Similar to what we saw in the <code>readline</code> lesson, <code>require</code> will return to us a object with many properties that will enable us to do file I/O.</p>\n<p><strong><em>Did you know?</em></strong> <em>I/O is short for input/output. It’s usage is widespread and all the hip tech companies are using it, like.io.</em></p>\n<p>The <code>fs</code> module contains tons of functionality! Chances are that if there is some operation you need to perform regarding files, the <code>fs</code> 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.</p>\n<h3>Creating a new file</h3>\n<p>To create a file, we can use the <code>writeFile</code> method. According to the documentation, there are a few ways to use it. The most straight forward way is:</p>\n<p>The code a<a href=\"https://gist.github.com/bgoonz/8898ad673bd2ecee9d93f8ec267cf213\" class=\"markup--anchor markup--p-anchor\">create-a-nnew-file.js (github.com)</a>bove will create a new file called <code>foo.txt</code> in the same directory as our <code>change-some-file.js</code> script. It will write the string <code>'Hello world!'</code> into that newly created file. The third argument specifies the encoding of the characters. There are different ways to encode characters; <a href=\"https://en.wikipedia.org/wiki/UTF-8\" class=\"markup--anchor markup--p-anchor\">UTF-8</a> is the most common and you'll use this in most scenarios. The fourth argument to <code>writeFile</code> 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 <code>writeFile</code> is asynchronous, we need to utilize <em>callback chaining</em> if we want to guarantee that commands occur <em>after</em> the write is complete or fails.</p>\n<p><em>Beware! If the file name specified to</em> <code>writeFile</code> <em>already exists, it will completely overwrite the contents of that file.</em></p>\n<p>We won’t be using the <code>foo.txt</code> file in the rest of this reading.</p>\n<h3>Reading existing files</h3>\n<p>To explore how to read a file, we’ll use VSCode to manually create a <code>poetry.txt</code> file within the same directory as our <code>change-some-file.js</code> script. Be sure to create this if you are following along.</p>\n<p>Our <code>poetry.txt</code> file will contain the following lines:</p>\n<pre><code>My code fails\n\nI do not know why\n\nMy code works\n\nI do not know why\n</code></pre>\n<p>We can use the <code>readFile</code> method to read the contents of this file. The method accepts very similar arguments to <code>writeFile</code>, 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 <code>writeFile</code> code with <code>readFile</code>:</p>\n<blockquote>\n<p>Running the code above would print the following in the terminal:</p>\n</blockquote>\n<pre><code>THE CONTENTS ARE:\n\nMy code fails\n\nI do not know why\n\nMy code works\n\nI do not know why\n</code></pre>\n<p>Success! From here, you can do anything you please with the data read from the file. For example, since <code>data</code> is a string, we could split the string on the newline character <code>\\n</code> to obtain an array of the file's lines:</p>\n<pre><code>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</code></pre>\n<h3>File I/O</h3>\n<p><em>Using the same</em> <code>poetry.txt</code> <em>file from before:</em></p>\n<pre><code>My code fails\n\nI do not know why\n\nMy code works\n\nI do not know why\n</code></pre>\n<p>Let’s replace occurrences of the phrase ‘do not’ with the word ‘should’.</p>\n<p>We can read the contents of the file as a string, manipulate this string, then write this new string back into the file.</p>\n<p>We’ll need to utilize callback chaining in order for this to work since our file I/O is asynchronous:</p>\n<p>Executing the script above will edit the <code>poetry.txt</code> file to contain:</p>\n<pre><code>My code fails\n\nI should know why\n\nMy code works\n\nI should know why\n</code></pre>\n<h4>Refactor:</h4>\n<h4>If you found this guide helpful feel free to checkout my github/gists where I host similar content:</h4>\n<p><a href=\"https://gist.github.com/bgoonz\" class=\"markup--anchor markup--p-anchor\">bgoonz’s gists · GitHub</a></p>\n<p><a href=\"https://github.com/bgoonz\" class=\"markup--anchor markup--mixtapeEmbed-anchor\" title=\"https://github.com/bgoonz\"><strong>bgoonz — Overview</strong><br />\n<em>Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a href=\"https://github.com/bgoonz\" class=\"js-mixtapeImage mixtapeImage u-ignoreBlock\"></a></p>" | |
| }, | |
| { | |
| "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": "<h2>Modules: CommonJS modules<a href=\"https://nodejs.org/api/modules.html#modules_modules_commonjs_modules\">#</a></h2>\n<p><a href=\"https://nodejs.org/api/documentation.html#documentation_stability_index\">Stability: 2</a> - Stable</p>\n<p>In the Node.js module system, each file is treated as a separate module. For example, consider a file named <code>foo.js</code>:</p>\n<pre><code>const circle = require('./circle.js');\nconsole.log(`The area of a circle of radius 4 is ${circle.area(4)}`);\n</code></pre>\n<p>On the first line, <code>foo.js</code> loads the module <code>circle.js</code> that is in the same directory as <code>foo.js</code>.</p>\n<p>Here are the contents of <code>circle.js</code>:</p>\n<pre><code>const { PI } = Math;\n\nexports.area = (r) => PI * r ** 2;\n\nexports.circumference = (r) => 2 * PI * r;\n</code></pre>\n<p>The module <code>circle.js</code> has exported the functions <code>area()</code> and <code>circumference()</code>. Functions and objects are added to the root of a module by specifying additional properties on the special <code>exports</code> object.</p>\n<p>Variables local to the module will be private, because the module is wrapped in a function by Node.js (see <a href=\"https://nodejs.org/api/modules.html#modules_the_module_wrapper\">module wrapper</a>). In this example, the variable <code>PI</code> is private to <code>circle.js</code>.</p>\n<p>The <code>module.exports</code> property can be assigned a new value (such as a function or object).</p>\n<p>Below, <code>bar.js</code> makes use of the <code>square</code> module, which exports a Square class:</p>\n<pre><code>const Square = require('./square.js');\nconst mySquare = new Square(2);\nconsole.log(`The area of mySquare is ${mySquare.area()}`);\n</code></pre>\n<p>The <code>square</code> module is defined in <code>square.js</code>:</p>\n<pre><code>// 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</code></pre>\n<p>The module system is implemented in the <code>require('module')</code> module.</p>\n<h3>Accessing the main module<a href=\"https://nodejs.org/api/modules.html#modules_accessing_the_main_module\">#</a></h3>\n<p>When a file is run directly from Node.js, <code>require.main</code> is set to its <code>module</code>. That means that it is possible to determine whether a file has been run directly by testing <code>require.main === module</code>.</p>\n<p>For a file <code>foo.js</code>, this will be <code>true</code> if run via <code>node foo.js</code>, but <code>false</code> if run by <code>require('./foo')</code>.</p>\n<p>Because <code>module</code> provides a <code>filename</code> property (normally equivalent to <code>__filename</code>), the entry point of the current application can be obtained by checking <code>require.main.filename</code>.</p>\n<h3>Package manager tips<a href=\"https://nodejs.org/api/modules.html#modules_package_manager_tips\">#</a></h3>\n<p>The semantics of the Node.js <code>require()</code> function were designed to be general enough to support reasonable directory structures. Package manager programs such as <code>dpkg</code>, <code>rpm</code>, and <code>npm</code> will hopefully find it possible to build native packages from Node.js modules without modification.</p>\n<p>Below we give a suggested directory structure that could work:</p>\n<p>Let's say that we wanted to have the folder at <code>/usr/lib/node/<some-package>/<some-version></code> hold the contents of a specific version of a package.</p>\n<p>Packages can depend on one another. In order to install package <code>foo</code>, it may be necessary to install a specific version of package <code>bar</code>. The <code>bar</code> package may itself have dependencies, and in some cases, these may even collide or form cyclic dependencies.</p>\n<p>Because Node.js looks up the <code>realpath</code> of any modules it loads (that is, it resolves symlinks) and then <a href=\"https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders\">looks for their dependencies in <code>node_modules</code> folders</a>, this situation can be resolved with the following architecture:</p>\n<ul>\n<li><code>/usr/lib/node/foo/1.2.3/</code>: Contents of the <code>foo</code> package, version 1.2.3.</li>\n<li><code>/usr/lib/node/bar/4.3.2/</code>: Contents of the <code>bar</code> package that <code>foo</code> depends on.</li>\n<li><code>/usr/lib/node/foo/1.2.3/node_modules/bar</code>: Symbolic link to <code>/usr/lib/node/bar/4.3.2/</code>.</li>\n<li><code>/usr/lib/node/bar/4.3.2/node_modules/*</code>: Symbolic links to the packages that <code>bar</code> depends on.</li>\n</ul>\n<p>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.</p>\n<p>When the code in the <code>foo</code> package does <code>require('bar')</code>, it will get the version that is symlinked into <code>/usr/lib/node/foo/1.2.3/node_modules/bar</code>. Then, when the code in the <code>bar</code> package calls <code>require('quux')</code>, it'll get the version that is symlinked into <code>/usr/lib/node/bar/4.3.2/node_modules/quux</code>.</p>\n<p>Furthermore, to make the module lookup process even more optimal, rather than putting packages directly in <code>/usr/lib/node</code>, we could put them in <code>/usr/lib/node_modules/<name>/<version></code>. Then Node.js will not bother looking for missing dependencies in <code>/usr/node_modules</code> or <code>/node_modules</code>.</p>\n<p>In order to make modules available to the Node.js REPL, it might be useful to also add the <code>/usr/lib/node_modules</code> folder to the <code>$NODE_PATH</code> environment variable. Since the module lookups using <code>node_modules</code> folders are all relative, and based on the real path of the files making the calls to <code>require()</code>, the packages themselves can be anywhere.</p>\n<h3>The <code>.mjs</code> extension<a href=\"https://nodejs.org/api/modules.html#modules_the_mjs_extension\">#</a></h3>\n<p>It is not possible to <code>require()</code> files that have the <code>.mjs</code> extension. Attempting to do so will throw <a href=\"https://nodejs.org/api/errors.html#errors_err_require_esm\">an error</a>. The <code>.mjs</code> extension is reserved for <a href=\"https://nodejs.org/api/esm.html\">ECMAScript Modules</a> which cannot be loaded via <code>require()</code>. See <a href=\"https://nodejs.org/api/esm.html\">ECMAScript Modules</a> for more details.</p>\n<h3>All together...<a href=\"https://nodejs.org/api/modules.html#modules_all_together\">#</a></h3>\n<p>To get the exact filename that will be loaded when <code>require()</code> is called, use the <code>require.resolve()</code> function.</p>\n<p>Putting together all of the above, here is the high-level algorithm in pseudocode of what <code>require()</code> does:</p>\n<p>require(X) from module at path Y</p>\n<ol>\n<li>If X is a core module,\na. return the core module\nb. STOP</li>\n<li>If X begins with '/'\na. set Y to be the filesystem root</li>\n<li>If X begins with './' or '/' or '../'\na. LOAD<em>AS</em>FILE(Y + X)\nb. LOAD<em>AS</em>DIRECTORY(Y + X)\nc. THROW \"not found\"</li>\n<li>If X begins with '#'\na. LOAD<em>PACKAGE</em>IMPORTS(X, dirname(Y))</li>\n<li>LOAD<em>PACKAGE</em>SELF(X, dirname(Y))</li>\n<li>LOAD<em>NODE</em>MODULES(X, dirname(Y))</li>\n<li>THROW \"not found\"</li>\n</ol>\n<p>LOAD<em>AS</em>FILE(X)</p>\n<ol>\n<li>If X is a file, load X as its file extension format. STOP</li>\n<li>If X.js is a file, load X.js as JavaScript text. STOP</li>\n<li>If X.json is a file, parse X.json to a JavaScript Object. STOP</li>\n<li>If X.node is a file, load X.node as binary addon. STOP</li>\n</ol>\n<p>LOAD_INDEX(X)</p>\n<ol>\n<li>If X/index.js is a file, load X/index.js as JavaScript text. STOP</li>\n<li>If X/index.json is a file, parse X/index.json to a JavaScript object. STOP</li>\n<li>If X/index.node is a file, load X/index.node as binary addon. STOP</li>\n</ol>\n<p>LOAD<em>AS</em>DIRECTORY(X)</p>\n<ol>\n<li>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. LOAD<em>AS</em>FILE(M)\ne. LOAD<em>INDEX(M)\nf. LOAD</em>INDEX(X) DEPRECATED\ng. THROW \"not found\"</li>\n<li>LOAD_INDEX(X)</li>\n</ol>\n<p>LOAD<em>NODE</em>MODULES(X, START)</p>\n<ol>\n<li>let DIRS = NODE<em>MODULES</em>PATHS(START)</li>\n<li>for each DIR in DIRS:\na. LOAD<em>PACKAGE</em>EXPORTS(X, DIR)\nb. LOAD<em>AS</em>FILE(DIR/X)\nc. LOAD<em>AS</em>DIRECTORY(DIR/X)</li>\n</ol>\n<p>NODE<em>MODULES</em>PATHS(START)</p>\n<ol>\n<li>let PARTS = path split(START)</li>\n<li>let I = count of PARTS - 1</li>\n<li>let DIRS = [GLOBAL_FOLDERS]</li>\n<li>while I >= 0,\na. if PARTS[I] = \"node<em>modules\" CONTINUE\nb. DIR = path join(PARTS[0 .. I] + \"node</em>modules\")\nc. DIRS = DIRS + DIR\nd. let I = I - 1</li>\n<li>return DIRS</li>\n</ol>\n<p>LOAD<em>PACKAGE</em>IMPORTS(X, DIR)</p>\n<ol>\n<li>Find the closest package scope SCOPE to DIR.</li>\n<li>If no scope was found, return.</li>\n<li>If the SCOPE/package.json \"imports\" is null or undefined, return.</li>\n<li>let MATCH = PACKAGE<em>IMPORTS</em>RESOLVE(X, pathToFileURL(SCOPE),\n[\"node\", \"require\"]) <a href=\"https://nodejs.org/api/esm.md#resolver-algorithm-specification\">defined in the ESM resolver</a>.</li>\n<li>RESOLVE<em>ESM</em>MATCH(MATCH).</li>\n</ol>\n<p>LOAD<em>PACKAGE</em>EXPORTS(X, DIR)</p>\n<ol>\n<li>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 (<code>/</code>).</li>\n<li>If X does not match this pattern or DIR/NAME/package.json is not a file,\nreturn.</li>\n<li>Parse DIR/NAME/package.json, and look for \"exports\" field.</li>\n<li>If \"exports\" is null or undefined, return.</li>\n<li>let MATCH = PACKAGE<em>EXPORTS</em>RESOLVE(pathToFileURL(DIR/NAME), \".\" + SUBPATH,\n<code>package.json</code> \"exports\", [\"node\", \"require\"]) <a href=\"https://nodejs.org/api/esm.md#resolver-algorithm-specification\">defined in the ESM resolver</a>.</li>\n<li>RESOLVE<em>ESM</em>MATCH(MATCH)</li>\n</ol>\n<p>LOAD<em>PACKAGE</em>SELF(X, DIR)</p>\n<ol>\n<li>Find the closest package scope SCOPE to DIR.</li>\n<li>If no scope was found, return.</li>\n<li>If the SCOPE/package.json \"exports\" is null or undefined, return.</li>\n<li>If the SCOPE/package.json \"name\" is not the first segment of X, return.</li>\n<li>let MATCH = PACKAGE<em>EXPORTS</em>RESOLVE(pathToFileURL(SCOPE),\n\".\" + X.slice(\"name\".length), <code>package.json</code> \"exports\", [\"node\", \"require\"])\n<a href=\"https://nodejs.org/api/esm.md#resolver-algorithm-specification\">defined in the ESM resolver</a>.</li>\n<li>RESOLVE<em>ESM</em>MATCH(MATCH)</li>\n</ol>\n<p>RESOLVE<em>ESM</em>MATCH(MATCH)</p>\n<ol>\n<li>let { RESOLVED, EXACT } = MATCH</li>\n<li>let RESOLVED_PATH = fileURLToPath(RESOLVED)</li>\n<li>If EXACT is true,\na. If the file at RESOLVED<em>PATH exists, load RESOLVED</em>PATH as its extension\nformat. STOP</li>\n<li>Otherwise, if EXACT is false,\na. LOAD<em>AS</em>FILE(RESOLVED<em>PATH)\nb. LOAD</em>AS<em>DIRECTORY(RESOLVED</em>PATH)</li>\n<li>THROW \"not found\"</li>\n</ol>\n<h3>Caching<a href=\"https://nodejs.org/api/modules.html#modules_caching\">#</a></h3>\n<p>Modules are cached after the first time they are loaded. This means (among other things) that every call to <code>require('foo')</code> will get exactly the same object returned, if it would resolve to the same file.</p>\n<p>Provided <code>require.cache</code> is not modified, multiple calls to <code>require('foo')</code> 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.</p>\n<p>To have a module execute code multiple times, export a function, and call that function.</p>\n<h4>Module caching caveats<a href=\"https://nodejs.org/api/modules.html#modules_module_caching_caveats\">#</a></h4>\n<p>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 <code>node_modules</code> folders), it is not a <em>guarantee</em> that <code>require('foo')</code> will always return the exact same object, if it would resolve to different files.</p>\n<p>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, <code>require('./foo')</code> and <code>require('./FOO')</code> return two different objects, irrespective of whether or not <code>./foo</code> and <code>./FOO</code> are the same file.</p>\n<h3>Core modules<a href=\"https://nodejs.org/api/modules.html#modules_core_modules\">#</a></h3>\n<p>History</p>\n<p>Node.js has several modules compiled into the binary. These modules are described in greater detail elsewhere in this documentation.</p>\n<p>The core modules are defined within the Node.js source and are located in the <code>lib/</code> folder.</p>\n<p>Core modules are always preferentially loaded if their identifier is passed to <code>require()</code>. For instance, <code>require('http')</code> will always return the built in HTTP module, even if there is a file by that name.</p>\n<p>Core modules can also be identified using the <code>node:</code> prefix, in which case it bypasses the <code>require</code> cache. For instance, <code>require('node:http')</code> will always return the built in HTTP module, even if there is <code>require.cache</code> entry by that name.</p>\n<h3>Cycles<a href=\"https://nodejs.org/api/modules.html#modules_cycles\">#</a></h3>\n<p>When there are circular <code>require()</code> calls, a module might not have finished executing when it is returned.</p>\n<p>Consider this situation:</p>\n<p><code>a.js</code>:</p>\n<pre><code>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</code></pre>\n<p><code>b.js</code>:</p>\n<pre><code>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</code></pre>\n<p><code>main.js</code>:</p>\n<pre><code>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</code></pre>\n<p>When <code>main.js</code> loads <code>a.js</code>, then <code>a.js</code> in turn loads <code>b.js</code>. At that point, <code>b.js</code> tries to load <code>a.js</code>. In order to prevent an infinite loop, an unfinished copy of the <code>a.js</code> exports object is returned to the <code>b.js</code> module. <code>b.js</code> then finishes loading, and its <code>exports</code> object is provided to the <code>a.js</code> module.</p>\n<p>By the time <code>main.js</code> has loaded both modules, they're both finished. The output of this program would thus be:</p>\n<pre><code>$ 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</code></pre>\n<p>Careful planning is required to allow cyclic module dependencies to work correctly within an application.</p>\n<h3>File modules<a href=\"https://nodejs.org/api/modules.html#modules_file_modules\">#</a></h3>\n<p>If the exact filename is not found, then Node.js will attempt to load the required filename with the added extensions: <code>.js</code>, <code>.json</code>, and finally <code>.node</code>.</p>\n<p><code>.js</code> files are interpreted as JavaScript text files, and <code>.json</code> files are parsed as JSON text files. <code>.node</code> files are interpreted as compiled addon modules loaded with <code>process.dlopen()</code>.</p>\n<p>A required module prefixed with <code>'/'</code> is an absolute path to the file. For example, <code>require('/home/marco/foo.js')</code> will load the file at <code>/home/marco/foo.js</code>.</p>\n<p>A required module prefixed with <code>'./'</code> is relative to the file calling <code>require()</code>. That is, <code>circle.js</code> must be in the same directory as <code>foo.js</code> for <code>require('./circle')</code> to find it.</p>\n<p>Without a leading <code>'/'</code>, <code>'./'</code>, or <code>'../'</code> to indicate a file, the module must either be a core module or is loaded from a <code>node_modules</code> folder.</p>\n<p>If the given path does not exist, <code>require()</code> will throw an <a href=\"https://nodejs.org/api/errors.html#errors_class_error\"><code>Error</code></a> with its <code>code</code> property set to <code>'MODULE_NOT_FOUND'</code>.</p>\n<h3>Folders as modules<a href=\"https://nodejs.org/api/modules.html#modules_folders_as_modules\">#</a></h3>\n<p>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 <code>require()</code> as an argument.</p>\n<p>The first is to create a <a href=\"https://nodejs.org/api/packages.html#packages_node_js_package_json_field_definitions\"><code>package.json</code></a> file in the root of the folder, which specifies a <code>main</code> module. An example <a href=\"https://nodejs.org/api/packages.html#packages_node_js_package_json_field_definitions\"><code>package.json</code></a> file might look like this:</p>\n<pre><code>{ \"name\" : \"some-library\",\n \"main\" : \"./lib/some-library.js\" }\n</code></pre>\n<p>If this was in a folder at <code>./some-library</code>, then <code>require('./some-library')</code> would attempt to load <code>./some-library/lib/some-library.js</code>.</p>\n<p>This is the extent of the awareness of <code>package.json</code> files within Node.js.</p>\n<p>If there is no <a href=\"https://nodejs.org/api/packages.html#packages_node_js_package_json_field_definitions\"><code>package.json</code></a> file present in the directory, or if the <a href=\"https://nodejs.org/api/packages.html#packages_main\"><code>\"main\"</code></a> entry is missing or cannot be resolved, then Node.js will attempt to load an <code>index.js</code> or <code>index.node</code> file out of that directory. For example, if there was no <a href=\"https://nodejs.org/api/packages.html#packages_node_js_package_json_field_definitions\"><code>package.json</code></a> file in the previous example, then <code>require('./some-library')</code> would attempt to load:</p>\n<ul>\n<li><code>./some-library/index.js</code></li>\n<li><code>./some-library/index.node</code></li>\n</ul>\n<p>If these attempts fail, then Node.js will report the entire module as missing with the default error:</p>\n<pre><code>Error: Cannot find module 'some-library'\n</code></pre>\n<h3>Loading from <code>node_modules</code> folders<a href=\"https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders\">#</a></h3>\n<p>If the module identifier passed to <code>require()</code> is not a <a href=\"https://nodejs.org/api/modules.html#modules_core_modules\">core</a> module, and does not begin with <code>'/'</code>, <code>'../'</code>, or <code>'./'</code>, then Node.js starts at the parent directory of the current module, and adds <code>/node_modules</code>, and attempts to load the module from that location. Node.js will not append <code>node_modules</code> to a path already ending in <code>node_modules</code>.</p>\n<p>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.</p>\n<p>For example, if the file at <code>'/home/ry/projects/foo.js'</code> called <code>require('bar.js')</code>, then Node.js would look in the following locations, in this order:</p>\n<ul>\n<li><code>/home/ry/projects/node_modules/bar.js</code></li>\n<li><code>/home/ry/node_modules/bar.js</code></li>\n<li><code>/home/node_modules/bar.js</code></li>\n<li><code>/node_modules/bar.js</code></li>\n</ul>\n<p>This allows programs to localize their dependencies, so that they do not clash.</p>\n<p>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 <code>require('example-module/path/to/file')</code> would resolve <code>path/to/file</code> relative to where <code>example-module</code> is located. The suffixed path follows the same module resolution semantics.</p>\n<h3>Loading from the global folders<a href=\"https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders\">#</a></h3>\n<p>If the <code>NODE_PATH</code> 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.</p>\n<p>On Windows, <code>NODE_PATH</code> is delimited by semicolons (<code>;</code>) instead of colons.</p>\n<p><code>NODE_PATH</code> was originally created to support loading modules from varying paths before the current <a href=\"https://nodejs.org/api/modules.html#modules_all_together\">module resolution</a> algorithm was defined.</p>\n<p><code>NODE_PATH</code> 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 <code>NODE_PATH</code> show surprising behavior when people are unaware that <code>NODE_PATH</code> must be set. Sometimes a module's dependencies change, causing a different version (or even a different module) to be loaded as the <code>NODE_PATH</code> is searched.</p>\n<p>Additionally, Node.js will search in the following list of GLOBAL_FOLDERS:</p>\n<ul>\n<li>1: <code>$HOME/.node_modules</code></li>\n<li>2: <code>$HOME/.node_libraries</code></li>\n<li>3: <code>$PREFIX/lib/node</code></li>\n</ul>\n<p>Where <code>$HOME</code> is the user's home directory, and <code>$PREFIX</code> is the Node.js configured <code>node_prefix</code>.</p>\n<p>These are mostly for historic reasons.</p>\n<p>It is strongly encouraged to place dependencies in the local <code>node_modules</code> folder. These will be loaded faster, and more reliably.</p>\n<h3>The module wrapper<a href=\"https://nodejs.org/api/modules.html#modules_the_module_wrapper\">#</a></h3>\n<p>Before a module's code is executed, Node.js will wrap it with a function wrapper that looks like the following:</p>\n<pre><code>(function(exports, require, module, __filename, __dirname) {\n// Module code actually lives in here\n});\n</code></pre>\n<p>By doing this, Node.js achieves a few things:</p>\n<ul>\n<li>It keeps top-level variables (defined with <code>var</code>, <code>const</code> or <code>let</code>) scoped to the module rather than the global object.</li>\n<li>\n<p>It helps to provide some global-looking variables that are actually specific to the module, such as:</p>\n<ul>\n<li>The <code>module</code> and <code>exports</code> objects that the implementor can use to export values from the module.</li>\n<li>The convenience variables <code>__filename</code> and <code>__dirname</code>, containing the module's absolute filename and directory path.</li>\n</ul>\n</li>\n</ul>\n<h3>The module scope<a href=\"https://nodejs.org/api/modules.html#modules_the_module_scope\">#</a></h3>\n<h4><code>__dirname</code><a href=\"https://nodejs.org/api/modules.html#modules_dirname\">#</a></h4>\n<p>Added in: v0.1.27</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string></a></li>\n</ul>\n<p>The directory name of the current module. This is the same as the <a href=\"https://nodejs.org/api/path.html#path_path_dirname_path\"><code>path.dirname()</code></a> of the <a href=\"https://nodejs.org/api/modules.html#modules_filename\"><code>__filename</code></a>.</p>\n<p>Example: running <code>node example.js</code> from <code>/Users/mjr</code></p>\n<pre><code>console.log(__dirname);\n// Prints: /Users/mjr\nconsole.log(path.dirname(__filename));\n// Prints: /Users/mjr\n</code></pre>\n<h4><code>__filename</code><a href=\"https://nodejs.org/api/modules.html#modules_filename\">#</a></h4>\n<p>Added in: v0.0.1</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string></a></li>\n</ul>\n<p>The file name of the current module. This is the current module file's absolute path with symlinks resolved.</p>\n<p>For a main program this is not necessarily the same as the file name used in the command line.</p>\n<p>See <a href=\"https://nodejs.org/api/modules.html#modules_dirname\"><code>__dirname</code></a> for the directory name of the current module.</p>\n<p>Examples:</p>\n<p>Running <code>node example.js</code> from <code>/Users/mjr</code></p>\n<pre><code>console.log(__filename);\n// Prints: /Users/mjr/example.js\nconsole.log(__dirname);\n// Prints: /Users/mjr\n</code></pre>\n<p>Given two modules: <code>a</code> and <code>b</code>, where <code>b</code> is a dependency of <code>a</code> and there is a directory structure of:</p>\n<ul>\n<li><code>/Users/mjr/app/a.js</code></li>\n<li><code>/Users/mjr/app/node_modules/b/b.js</code></li>\n</ul>\n<p>References to <code>__filename</code> within <code>b.js</code> will return <code>/Users/mjr/app/node_modules/b/b.js</code> while references to <code>__filename</code> within <code>a.js</code> will return <code>/Users/mjr/app/a.js</code>.</p>\n<h4><code>exports</code><a href=\"https://nodejs.org/api/modules.html#modules_exports\">#</a></h4>\n<p>Added in: v0.1.12</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\"><Object></a></li>\n</ul>\n<p>A reference to the <code>module.exports</code> that is shorter to type. See the section about the <a href=\"https://nodejs.org/api/modules.html#modules_exports_shortcut\">exports shortcut</a> for details on when to use <code>exports</code> and when to use <code>module.exports</code>.</p>\n<h4><code>module</code><a href=\"https://nodejs.org/api/modules.html#modules_module\">#</a></h4>\n<p>Added in: v0.1.16</p>\n<ul>\n<li><a href=\"https://nodejs.org/api/modules.html#modules_the_module_object\"><module></a></li>\n</ul>\n<p>A reference to the current module, see the section about the <a href=\"https://nodejs.org/api/modules.html#modules_the_module_object\"><code>module</code> object</a>. In particular, <code>module.exports</code> is used for defining what a module exports and makes available through <code>require()</code>.</p>\n<h4><code>require(id)</code><a href=\"https://nodejs.org/api/modules.html#modules_require_id\">#</a></h4>\n<p>Added in: v0.1.13</p>\n<ul>\n<li><code>id</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string></a> module name or path</li>\n<li>Returns: <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Data_types\"><any></a> exported module content</li>\n</ul>\n<p>Used to import modules, <code>JSON</code>, and local files. Modules can be imported from <code>node_modules</code>. Local modules and JSON files can be imported using a relative path (e.g. <code>./</code>, <code>./foo</code>, <code>./bar/baz</code>, <code>../foo</code>) that will be resolved against the directory named by <a href=\"https://nodejs.org/api/modules.html#modules_dirname\"><code>__dirname</code></a> (if defined) or the current working directory. The relative paths of POSIX style are resolved in an OS independent fashion, meaning that the examples above will work on Windows in the same way they would on Unix systems.</p>\n<pre><code>// Importing a local module with a path relative to the `__dirname` or current\n// working directory. (On Windows, this would resolve to .\\path\\myLocalModule.)\nconst myLocalModule = require('./path/myLocalModule');\n\n// Importing a JSON file:\nconst jsonData = require('./path/filename.json');\n\n// Importing a module from node_modules or Node.js built-in module:\nconst crypto = require('crypto');\n</code></pre>\n<h5><code>require.cache</code><a href=\"https://nodejs.org/api/modules.html#modules_require_cache\">#</a></h5>\n<p>Added in: v0.3.0</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\"><Object></a></li>\n</ul>\n<p>Modules are cached in this object when they are required. By deleting a key value from this object, the next <code>require</code> will reload the module. This does not apply to <a href=\"https://nodejs.org/api/addons.html\">native addons</a>, for which reloading will result in an error.</p>\n<p>Adding or replacing entries is also possible. This cache is checked before native modules and if a name matching a native module is added to the cache, only <code>node:</code>-prefixed require calls are going to receive the native module. Use with care!</p>\n<pre><code>const assert = require('assert');\nconst realFs = require('fs');\n\nconst fakeFs = {};\nrequire.cache.fs = { exports: fakeFs };\n\nassert.strictEqual(require('fs'), fakeFs);\nassert.strictEqual(require('node:fs'), realFs);\n</code></pre>\n<h5><code>require.extensions</code><a href=\"https://nodejs.org/api/modules.html#modules_require_extensions\">#</a></h5>\n<p>Added in: v0.3.0Deprecated since: v0.10.6</p>\n<p><a href=\"https://nodejs.org/api/documentation.html#documentation_stability_index\">Stability: 0</a> - Deprecated</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\"><Object></a></li>\n</ul>\n<p>Instruct <code>require</code> on how to handle certain file extensions.</p>\n<p>Process files with the extension <code>.sjs</code> as <code>.js</code>:</p>\n<pre><code>require.extensions['.sjs'] = require.extensions['.js'];\n</code></pre>\n<p>Deprecated. In the past, this list has been used to load non-JavaScript modules into Node.js by compiling them on-demand. However, in practice, there are much better ways to do this, such as loading modules via some other Node.js program, or compiling them to JavaScript ahead of time.</p>\n<p>Avoid using <code>require.extensions</code>. Use could cause subtle bugs and resolving the extensions gets slower with each registered extension.</p>\n<h5><code>require.main</code><a href=\"https://nodejs.org/api/modules.html#modules_require_main\">#</a></h5>\n<p>Added in: v0.1.17</p>\n<ul>\n<li><a href=\"https://nodejs.org/api/modules.html#modules_the_module_object\"><module></a></li>\n</ul>\n<p>The <code>Module</code> object representing the entry script loaded when the Node.js process launched. See <a href=\"https://nodejs.org/api/modules.html#modules_accessing_the_main_module\">\"Accessing the main module\"</a>.</p>\n<p>In <code>entry.js</code> script:</p>\n<pre><code>console.log(require.main);\n</code></pre>\n<pre><code>node entry.js\n</code></pre>\n<pre><code>Module {\n id: '.',\n path: '/absolute/path/to',\n exports: {},\n filename: '/absolute/path/to/entry.js',\n loaded: false,\n children: [],\n paths:\n [ '/absolute/path/to/node_modules',\n '/absolute/path/node_modules',\n '/absolute/node_modules',\n '/node_modules' ] }\n</code></pre>\n<h5><code>require.resolve(request[, options])</code><a href=\"https://nodejs.org/api/modules.html#modules_require_resolve_request_options\">#</a></h5>\n<p>History</p>\n<ul>\n<li><code>request</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string></a> The module path to resolve.</li>\n<li>\n<p><code>options</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\"><Object></a></p>\n<ul>\n<li><code>paths</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string[]></a> Paths to resolve module location from. If present, these paths are used instead of the default resolution paths, with the exception of <a href=\"https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders\">GLOBAL_FOLDERS</a> like <code>$HOME/.node_modules</code>, which are always included. Each of these paths is used as a starting point for the module resolution algorithm, meaning that the <code>node_modules</code> hierarchy is checked from this location.</li>\n</ul>\n</li>\n<li>Returns: <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string></a></li>\n</ul>\n<p>Use the internal <code>require()</code> machinery to look up the location of a module, but rather than loading the module, just return the resolved filename.</p>\n<p>If the module can not be found, a <code>MODULE_NOT_FOUND</code> error is thrown.</p>\n<h6><code>require.resolve.paths(request)</code><a href=\"https://nodejs.org/api/modules.html#modules_require_resolve_paths_request\">#</a></h6>\n<p>Added in: v8.9.0</p>\n<ul>\n<li><code>request</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string></a> The module path whose lookup paths are being retrieved.</li>\n<li>Returns: <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string[]></a> | <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Null_type\"><null></a></li>\n</ul>\n<p>Returns an array containing the paths searched during resolution of <code>request</code> or <code>null</code> if the <code>request</code> string references a core module, for example <code>http</code> or <code>fs</code>.</p>\n<h3>The <code>module</code> object<a href=\"https://nodejs.org/api/modules.html#modules_the_module_object\">#</a></h3>\n<p>Added in: v0.1.16</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\"><Object></a></li>\n</ul>\n<p>In each module, the <code>module</code> free variable is a reference to the object representing the current module. For convenience, <code>module.exports</code> is also accessible via the <code>exports</code> module-global. <code>module</code> is not actually a global but rather local to each module.</p>\n<h4><code>module.children</code><a href=\"https://nodejs.org/api/modules.html#modules_module_children\">#</a></h4>\n<p>Added in: v0.1.16</p>\n<ul>\n<li><a href=\"https://nodejs.org/api/modules.html#modules_the_module_object\"><module[]></a></li>\n</ul>\n<p>The module objects required for the first time by this one.</p>\n<h4><code>module.exports</code><a href=\"https://nodejs.org/api/modules.html#modules_module_exports\">#</a></h4>\n<p>Added in: v0.1.16</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object\"><Object></a></li>\n</ul>\n<p>The <code>module.exports</code> object is created by the <code>Module</code> system. Sometimes this is not acceptable; many want their module to be an instance of some class. To do this, assign the desired export object to <code>module.exports</code>. Assigning the desired object to <code>exports</code> will simply rebind the local <code>exports</code> variable, which is probably not what is desired.</p>\n<p>For example, suppose we were making a module called <code>a.js</code>:</p>\n<pre><code>const EventEmitter = require('events');\n\nmodule.exports = new EventEmitter();\n\n// Do some work, and after some time emit\n// the 'ready' event from the module itself.\nsetTimeout(() => {\n module.exports.emit('ready');\n}, 1000);\n</code></pre>\n<p>Then in another file we could do:</p>\n<pre><code>const a = require('./a');\na.on('ready', () => {\n console.log('module \"a\" is ready');\n});\n</code></pre>\n<p>Assignment to <code>module.exports</code> must be done immediately. It cannot be done in any callbacks. This does not work:</p>\n<p><code>x.js</code>:</p>\n<pre><code>setTimeout(() => {\n module.exports = { a: 'hello' };\n}, 0);\n</code></pre>\n<p><code>y.js</code>:</p>\n<pre><code>const x = require('./x');\nconsole.log(x.a);\n</code></pre>\n<h5><code>exports</code> shortcut<a href=\"https://nodejs.org/api/modules.html#modules_exports_shortcut\">#</a></h5>\n<p>Added in: v0.1.16</p>\n<p>The <code>exports</code> variable is available within a module's file-level scope, and is assigned the value of <code>module.exports</code> before the module is evaluated.</p>\n<p>It allows a shortcut, so that <code>module.exports.f = ...</code> can be written more succinctly as <code>exports.f = ...</code>. However, be aware that like any variable, if a new value is assigned to <code>exports</code>, it is no longer bound to <code>module.exports</code>:</p>\n<pre><code>module.exports.hello = true; // Exported from require of module\nexports = { hello: false }; // Not exported, only available in the module\n</code></pre>\n<p>When the <code>module.exports</code> property is being completely replaced by a new object, it is common to also reassign <code>exports</code>:</p>\n<pre><code>module.exports = exports = function Constructor() {\n // ... etc.\n};\n</code></pre>\n<p>To illustrate the behavior, imagine this hypothetical implementation of <code>require()</code>, which is quite similar to what is actually done by <code>require()</code>:</p>\n<pre><code>function require(/* ... */) {\n const module = { exports: {} };\n ((module, exports) => {\n // Module code here. In this example, define a function.\n function someFunc() {}\n exports = someFunc;\n // At this point, exports is no longer a shortcut to module.exports, and\n // this module will still export an empty default object.\n module.exports = someFunc;\n // At this point, the module will now export someFunc, instead of the\n // default object.\n })(module, module.exports);\n return module.exports;\n}\n</code></pre>\n<h4><code>module.filename</code><a href=\"https://nodejs.org/api/modules.html#modules_module_filename\">#</a></h4>\n<p>Added in: v0.1.16</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string></a></li>\n</ul>\n<p>The fully resolved filename of the module.</p>\n<h4><code>module.id</code><a href=\"https://nodejs.org/api/modules.html#modules_module_id\">#</a></h4>\n<p>Added in: v0.1.16</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string></a></li>\n</ul>\n<p>The identifier for the module. Typically this is the fully resolved filename.</p>\n<h4><code>module.isPreloading</code><a href=\"https://nodejs.org/api/modules.html#modules_module_ispreloading\">#</a></h4>\n<p>Added in: v15.4.0</p>\n<ul>\n<li>Type: <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type\"><boolean></a> <code>true</code> if the module is running during the Node.js preload phase.</li>\n</ul>\n<h4><code>module.loaded</code><a href=\"https://nodejs.org/api/modules.html#modules_module_loaded\">#</a></h4>\n<p>Added in: v0.1.16</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type\"><boolean></a></li>\n</ul>\n<p>Whether or not the module is done loading, or is in the process of loading.</p>\n<h4><code>module.parent</code><a href=\"https://nodejs.org/api/modules.html#modules_module_parent\">#</a></h4>\n<p>Added in: v0.1.16Deprecated since: v14.6.0, v12.19.0</p>\n<p><a href=\"https://nodejs.org/api/documentation.html#documentation_stability_index\">Stability: 0</a> - Deprecated: Please use <a href=\"https://nodejs.org/api/modules.html#modules_require_main\"><code>require.main</code></a> and <a href=\"https://nodejs.org/api/modules.html#modules_module_children\"><code>module.children</code></a> instead.</p>\n<ul>\n<li><a href=\"https://nodejs.org/api/modules.html#modules_the_module_object\"><module></a> | <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Null_type\"><null></a> | <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Undefined_type\"><undefined></a></li>\n</ul>\n<p>The module that first required this one, or <code>null</code> if the current module is the entry point of the current process, or <code>undefined</code> if the module was loaded by something that is not a CommonJS module (E.G.: REPL or <code>import</code>).</p>\n<h4><code>module.path</code><a href=\"https://nodejs.org/api/modules.html#modules_module_path\">#</a></h4>\n<p>Added in: v11.14.0</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string></a></li>\n</ul>\n<p>The directory name of the module. This is usually the same as the <a href=\"https://nodejs.org/api/path.html#path_path_dirname_path\"><code>path.dirname()</code></a> of the <a href=\"https://nodejs.org/api/modules.html#modules_module_id\"><code>module.id</code></a>.</p>\n<h4><code>module.paths</code><a href=\"https://nodejs.org/api/modules.html#modules_module_paths\">#</a></h4>\n<p>Added in: v0.4.0</p>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string[]></a></li>\n</ul>\n<p>The search paths for the module.</p>\n<h4><code>module.require(id)</code><a href=\"https://nodejs.org/api/modules.html#modules_module_require_id\">#</a></h4>\n<p>Added in: v0.5.1</p>\n<ul>\n<li><code>id</code> <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type\"><string></a></li>\n<li>Returns: <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Data_types\"><any></a> exported module content</li>\n</ul>\n<p>The <code>module.require()</code> method provides a way to load a module as if <code>require()</code> was called from the original module.</p>\n<p>In order to do this, it is necessary to get a reference to the <code>module</code> object. Since <code>require()</code> returns the <code>module.exports</code>, and the <code>module</code> is typically <em>only</em> available within a specific module's code, it must be explicitly exported in order to be used.</p>\n<h3>The <code>Module</code> object<a href=\"https://nodejs.org/api/modules.html#modules_the_module_object_1\">#</a></h3>\n<p>This section was moved to <a href=\"https://nodejs.org/api/module.html#module_the_module_object\">Modules: <code>module</code> core module</a>.</p>\n<ul>\n<li><a href=\"https://nodejs.org/api/module.html#module_module_builtinmodules\"><code>module.builtinModules</code></a></li>\n<li><a href=\"https://nodejs.org/api/module.html#module_module_createrequire_filename\"><code>module.createRequire(filename)</code></a></li>\n<li><a href=\"https://nodejs.org/api/module.html#module_module_syncbuiltinesmexports\"></a></li>\n</ul>" | |
| }, | |
| { | |
| "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": "<p>The <code>node</code> command is the one we use to run our Node.js scripts:</p>\n<pre><code class=\"language-bash\">node script.js\n</code></pre>\n<p>If we omit the filename, we use it in REPL mode:</p>\n<pre><code class=\"language-bash\">node\n</code></pre>\n<blockquote>\n<p>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.</p>\n</blockquote>\n<p>If you try it now in your terminal, this is what happens:</p>\n<pre><code class=\"language-bash\">❯ node\n>\n</code></pre>\n<p>the command stays in idle mode and waits for us to enter something.</p>\n<blockquote>\n<p>Tip: if you are unsure how to open your terminal, google \"How to open terminal on <your-operating-system>\".</p>\n</blockquote>\n<p>The REPL is waiting for us to enter some JavaScript code, to be more precise.</p>\n<p>Start simple and enter</p>\n<pre><code class=\"language-console\">> console.log('test')\ntest\nundefined\n>\n</code></pre>\n<p>The first value, <code>test</code>, is the output we told the console to print, then we get undefined which is the return value of running <code>console.log()</code>.</p>\n<p>We can now enter a new line of JavaScript.</p>\n<h2>Use the tab to autocomplete</h2>\n<p>The cool thing about the REPL is that it's interactive.</p>\n<p>As you write your code, if you press the <code>tab</code> key the REPL will try to autocomplete what you wrote to match a variable you already defined or a predefined one.</p>\n<h2>Exploring JavaScript objects</h2>\n<p>Try entering the name of a JavaScript class, like <code>Number</code>, add a dot and press <code>tab</code>.</p>\n<p>The REPL will print all the properties and methods you can access on that class:</p>\n<p><img src=\"tab.png\" alt=\"Pressing tab reveals object properties\"></p>\n<h2>Explore global objects</h2>\n<p>You can inspect the globals you have access to by typing <code>global.</code> and pressing <code>tab</code>:</p>\n<p><img src=\"globals.png\" alt=\"Globals\"></p>\n<h2>The _ special variable</h2>\n<p>If after some code you type <code>_</code>, that is going to print the result of the last operation.</p>\n<h2>Dot commands</h2>\n<p>The REPL has some special commands, all starting with a dot <code>.</code>. They are</p>\n<ul>\n<li><code>.help</code>: shows the dot commands help</li>\n<li><code>.editor</code>: 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.</li>\n<li><code>.break</code>: when inputting a multi-line expression, entering the .break command will abort further input. Same as pressing ctrl-C.</li>\n<li><code>.clear</code>: resets the REPL context to an empty object and clears any multi-line expression currently being input.</li>\n<li><code>.load</code>: loads a JavaScript file, relative to the current working directory</li>\n<li><code>.save</code>: saves all you entered in the REPL session to a file (specify the filename)</li>\n<li><code>.exit</code>: exits the repl (same as pressing ctrl-C two times)</li>\n</ul>\n<p>The REPL knows when you are typing a multi-line statement without the need to invoke <code>.editor</code>.</p>\n<p>For example if you start typing an iteration like this:</p>\n<pre><code class=\"language-js\">[1, 2, 3].forEach(num => {\n</code></pre>\n<p>and you press <code>enter</code>, the REPL will go to a new line that starts with 3 dots, indicating you can now continue to work on that block.</p>\n<pre><code class=\"language-js\">... console.log(num)\n... })\n</code></pre>\n<p>If you type <code>.break</code> at the end of a line, the multiline mode will stop and the statement will not be executed.</p>" | |
| }, | |
| { | |
| "url": "/docs/articles/node-js-language/", | |
| "relativePath": "docs/articles/node-js-language.md", | |
| "relativeDir": "docs/articles", | |
| "base": "node-js-language.md", | |
| "name": "node-js-language", | |
| "frontmatter": { | |
| "title": "packagejson", | |
| "weight": 0, | |
| "excerpt": "The package.json file is a key element in lots of app codebases based on the Node.js ecosystem.", | |
| "seo": { | |
| "title": "", | |
| "description": "", | |
| "robots": [], | |
| "extra": [], | |
| "type": "stackbit_page_meta" | |
| }, | |
| "template": "docs" | |
| }, | |
| "html": "<p>If you work with JavaScript, or you've ever interacted with a JavaScript project, Node.js or a frontend project, you surely met the package.json file.</p>\n<p>What's that for? What should you know about it, and what are some of the cool things you can do with it?</p>\n<p>The package.json file is kind of a manifest for your project. It can do a lot of things, completely unrelated. It's a central repository of configuration for tools, for example. It's also where npm and yarn store the names and versions for all the installed packages.</p>\n<h2>The file structure</h2>\n<p>Here's an example package.json file:</p>\n<p>It's empty! There are no fixed requirements of what should be in a package.json file, for an application. The only requirement is that it respects the JSON format, otherwise it cannot be read by programs that try to access its properties programmatically.</p>\n<p>If you're building a Node.js package that you want to distribute over npm things change radically, and you must have a set of properties that will help other people use it. We'll see more about this later on.</p>\n<p>This is another package.json:</p>\n<p>It defines a name property, which tells the name of the app, or package, that's contained in the same folder where this file lives.</p>\n<p>Here's a much more complex example, which was extracted from a sample Vue.js application:</p>\n<p>there are <em>lots</em> of things going on here:</p>\n<ul>\n<li>version indicates the current version</li>\n<li>name sets the application/package name</li>\n<li>description is a brief description of the app/package</li>\n<li>main set the entry point for the application</li>\n<li>private if set to true prevents the app/package to be accidentally published on npm</li>\n<li>scripts defines a set of node scripts you can run</li>\n<li>dependencies sets a list of npm packages installed as dependencies</li>\n<li>devDependencies sets a list of npm packages installed as development dependencies</li>\n<li>engines sets which versions of Node.js this package/app works on</li>\n<li>browserslist is used to tell which browsers (and their versions) you want to support</li>\n</ul>\n<p>All those properties are used by either npm or other tools that we can use.</p>\n<h2>Properties breakdown</h2>\n<p>This section describes the properties you can use in detail. We refer to \"package\" but the same thing applies to local applications which you do not use as packages.</p>\n<p>Most of those properties are only used on <a href=\"https://www.npmjs.com/\">https://www.npmjs.com/</a>, others by scripts that interact with your code, like npm or others.</p>\n<h3>name</h3>\n<p>Sets the package name.</p>\n<p>Example:</p>\n<p>The name must be less than 214 characters, must not have spaces, it can only contain lowercase letters, hyphens (-) or underscores (_).</p>\n<p>This is because when a package is published on npm, it gets its own URL based on this property.</p>\n<p>If you published this package publicly on GitHub, a good value for this property is the GitHub repository name.</p>\n<h3>author</h3>\n<p>Lists the package author name</p>\n<p>Example:</p>\n<p>Can also be used with this format:</p>\n<h3>contributors</h3>\n<p>As well as the author, the project can have one or more contributors. This property is an array that lists them.</p>\n<p>Example:</p>\n<p>Can also be used with this format:</p>\n<h3>bugs</h3>\n<p>Links to the package issue tracker, most likely a GitHub issues page</p>\n<p>Example:</p>\n<h3>homepage</h3>\n<p>Sets the package homepage</p>\n<p>Example:</p>\n<h3>version</h3>\n<p>Indicates the current version of the package.</p>\n<p>Example:</p>\n<p>This property follows the semantic versioning (semver) notation for versions, which means the version is always expressed with 3 numbers: x.x.x.</p>\n<p>The first number is the major version, the second the minor version and the third is the patch version.</p>\n<p>There is a meaning in these numbers: a release that only fixes bugs is a patch release, a release that introduces backward-compatible changes is a minor release, a major release can have breaking changes.</p>\n<h3>license</h3>\n<p>Indicates the license of the package.</p>\n<p>Example:</p>\n<h3>keywords</h3>\n<p>This property contains an array of keywords that associate with what your package does.</p>\n<p>Example:</p>\n<p>This helps people find your package when navigating similar packages, or when browsing the <a href=\"https://www.npmjs.com/\">https://www.npmjs.com/</a> website.</p>\n<h3>description</h3>\n<p>This property contains a brief description of the package</p>\n<p>Example:</p>\n<p>This is especially useful if you decide to publish your package to npm so that people can find out what the package is about.</p>\n<h3>repository</h3>\n<p>This property specifies where this package repository is located.</p>\n<p>Example:</p>\n<p>Notice the github prefix. There are other popular services baked in:</p>\n<p>You can explicitly set the version control system:</p>\n<p>You can use different version control systems:</p>\n<h3>main</h3>\n<p>Sets the entry point for the package.</p>\n<p>When you import this package in an application, that's where the application will search for the module exports.</p>\n<p>Example:</p>\n<h3>private</h3>\n<p>if set to true prevents the app/package to be accidentally published on npm</p>\n<p>Example:</p>\n<h3>scripts</h3>\n<p>Defines a set of node scripts you can run</p>\n<p>Example:</p>\n<p>These scripts are command line applications. You can run them by calling npm run XXXX or yarn XXXX, where XXXX is the command name. Example: npm run dev.</p>\n<p>You can use any name you want for a command, and scripts can do literally anything you want.</p>\n<h3>dependencies</h3>\n<p>Sets a list of npm packages installed as dependencies.</p>\n<p>When you install a package using npm or yarn:</p>\n<p>that package is automatically inserted in this list.</p>\n<p>Example:</p>\n<h3>devDependencies</h3>\n<p>Sets a list of npm packages installed as development dependencies.</p>\n<p>They differ from dependencies because they are meant to be installed only on a development machine, not needed to run the code in production.</p>\n<p>When you install a package using npm or yarn:</p>\n<p>that package is automatically inserted in this list.</p>\n<p>Example:</p>\n<h3>engines</h3>\n<p>Sets which versions of Node.js and other commands this package/app work on</p>\n<p>Example:</p>\n<h3>browserslist</h3>\n<p>Is used to tell which browsers (and their versions) you want to support. It's referenced by Babel, Autoprefixer, and other tools, to only add the polyfills and fallbacks needed to the browsers you target.</p>\n<p>Example:</p>\n<p>This configuration means you want to support the last 2 major versions of all browsers with at least 1% of usage (from the <a href=\"https://caniuse.com/\">CanIUse.com</a> stats), except IE8 and lower.</p>\n<p>(<a href=\"https://www.npmjs.com/package/browserslist\">see more</a>)</p>\n<h3>Command-specific properties</h3>\n<p>The package.json file can also host command-specific configuration, for example for Babel, ESLint, and more.</p>\n<p>Each has a specific property, like eslintConfig, babel and others. Those are command-specific, and you can find how to use those in the respective command/project documentation.</p>\n<h2>Package versions</h2>\n<p>You have seen in the description above version numbers like these: ~3.0.0 or ^0.13.0. What do they mean, and which other version specifiers can you use?</p>\n<p>That symbol specifies which updates your package accepts, from that dependency.</p>\n<p>Given that using semver (semantic versioning) all versions have 3 digits, the first being the major release, the second the minor release and the third is the patch release, you have these \"<a href=\"https://nodejs.dev/learn/semantic-versioning-using-npm/\">Rules</a>\".</p>\n<p>You can combine most of the versions in ranges, like this: 1.0.0 || >=1.1.0 <1.2.0, to either use 1.0.0 or one release from 1.1.0 up, but lower than 1.2.0.</p>\n<h1>Cheat Sheet:</h1>\n<pre><code class=\"language-js\">/* *******************************************************************************************\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</code></pre>" | |
| }, | |
| { | |
| "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": "<h2>Sorting Algorithms</h2>\n<h3>Sorting Algorithms</h3>\n<ol>\n<li>Explain the complexity of and write a function that performs bubble sort on an array of numbers.</li>\n<li>\n<p>Time Complexity: O(n^2)</p>\n<ul>\n<li>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.</li>\n</ul>\n</li>\n<li>\n<p>Space Complexity: O(1)</p>\n<ul>\n<li>We are creating the same number of variables with an exact size, independent of our input. No new arrays are created.</li>\n</ul>\n</li>\n<li>Code example for bubbleSort:</li>\n</ol>\n<pre><code class=\"language-javascript\">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</code></pre>\n<ol start=\"2\">\n<li>Explain the complexity of and write a function that performs selection sort on an array of numbers.</li>\n<li>\n<p>Time Complexity: O(n^2)</p>\n<ul>\n<li>Our nested loop structure is dependent on the size of our input.</li>\n<li>The outer loop always occurs n times.</li>\n<li>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).</li>\n<li>Our nested structure is then T(n * n/2) = O(n^2)</li>\n</ul>\n</li>\n<li>\n<p>Space Complexity: O(1)</p>\n<ul>\n<li>We are creating the same number of variables with an exact size, independent of our input. No new arrays are created.</li>\n</ul>\n</li>\n<li>Code example for selectSort:</li>\n</ol>\n<pre><code class=\"language-javascript\">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</code></pre>\n<ol start=\"3\">\n<li>Explain the complexity of and write a function that performs insertion sort on an array of numbers.</li>\n<li>\n<p>Time Complexity: O(n^2)</p>\n<ul>\n<li>Our nested loop structure is dependent on the size of our input.</li>\n<li>The outer loop always occurs n times.</li>\n<li>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).</li>\n<li>Our nested structure is then T(n * n/2) = O(n^2)</li>\n</ul>\n</li>\n<li>\n<p>Space Complexity: O(1)</p>\n<ul>\n<li>We are creating the same number of variables with an exact size, independent of our input. No new arrays are created.</li>\n</ul>\n</li>\n<li>Code example for insertionSort:</li>\n</ol>\n<pre><code class=\"language-javascript\">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</code></pre>\n<ol start=\"4\">\n<li>Explain the complexity of and write a function that performs merge sort on an array of numbers.</li>\n<li>\n<p>Time Complexity: O(n log n)</p>\n<ul>\n<li>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.</li>\n<li>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.</li>\n<li>Since we have log n stack frames and n operations on each frame, we end up with an O(n log n) time complexity</li>\n</ul>\n</li>\n<li>\n<p>Space Complexity: O(n)</p>\n<ul>\n<li>We are ultimately creating n subarrays, making our space complexity linear to our input size.</li>\n</ul>\n</li>\n<li>Code example for mergeSort:</li>\n</ol>\n<pre><code class=\"language-javascript\">// 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</code></pre>\n<ol start=\"5\">\n<li>Explain the complexity of and write a function that performs quick sort on an array of numbers.</li>\n<li>\n<p>Time Complexity: Average O(n log n), Worst O(n^2)</p>\n<ul>\n<li>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.</li>\n<li>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).</li>\n<li>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.</li>\n</ul>\n</li>\n<li>\n<p>Space Complexity: Our implementation O(n), Possible implementation O(log n)</p>\n<ul>\n<li>The partition arrays that we create are directly proportional to the size of the input, resulting in O(n) space complexity.</li>\n<li>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.</li>\n</ul>\n</li>\n<li>Code example for quickSort:</li>\n</ol>\n<pre><code class=\"language-javascript\">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</code></pre>\n<ol start=\"6\">\n<li>Explain the complexity of and write a function that performs a binary search on a sorted array of numbers.</li>\n<li>\n<p>Time Complexity: O(log n)</p>\n<ul>\n<li>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.</li>\n</ul>\n</li>\n<li>\n<p>Space Complexity: Our implementation O(n), Possible implementation O(1)</p>\n<ul>\n<li>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).</li>\n<li>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).</li>\n</ul>\n</li>\n<li>Code example for binarySearch and binarySearchIndex:</li>\n</ol>\n<pre><code class=\"language-javascript\">// 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</code></pre>" | |
| }, | |
| { | |
| "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": "<p>You can pass any number of arguments when invoking a Node.js application using</p>\n<p>Arguments can be standalone or have a key and a value.</p>\n<p>For example:</p>\n<p>or</p>\n<p>This changes how you will retrieve this value in the Node.js code.</p>\n<p>The way you retrieve it is using the process object built into Node.js.</p>\n<p>It exposes an argv property, which is an array that contains all the command line invocation arguments.</p>\n<p>The first element is the full path of the node command.</p>\n<p>The second element is the full path of the file being executed.</p>\n<p>All the additional arguments are present from the third position going forward.</p>\n<p>You can iterate over all the arguments (including the node path and the file path) using a loop:</p>\n<p>You c |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment