diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000000..3d5f140f4e --- /dev/null +++ b/.editorconfig @@ -0,0 +1,28 @@ +root = true + +[*] +tab_width = 4 +indent_size = 4 +charset = utf-8 +end_of_line = lf +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +[*.txt] +indent_size = false + +[test/fast/Listing versions/Running 'nvm ls' calls into nvm_alias] +indent_size = false + +[test/fast/Listing versions/Running 'nvm ls --no-alias' does not call into nvm_alias] +indent_size = false + +[test/fast/Unit tests/mocks/**] +insert_final_newline = off + +[test/**/.urchin*] +insert_final_newline = off + +[Makefile] +indent_style = tab diff --git a/.env b/.env new file mode 100644 index 0000000000..49ddd9f732 --- /dev/null +++ b/.env @@ -0,0 +1,5 @@ +ALGOLIA_ADMIN_KEY='a618cbd2bff788d0f9d73b48867b99eb' +ALGOLIA_API_KEY='56747001d363aa353aea93c8a205f40ddae5455e65f8577e3761754016d0ee21' +ALGOLIA_BASE_URL='https://crawler.algolia.com' +ONEGRAPH_AUTHLIFY_TOKEN='i1-IEDTFTYEYPJbb_TNymTGLvPCdjsGRP1PwtxZg14Q' +stackbitapikey='d65cdb563ef2906544c747c36adc22d28dea087a86d8200b7784258ad9c5b0b5' diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000000..2e1e43c5aa --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,17 @@ +{ + "env": { + "node": true, + "es6": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": 2018 + }, + "rules": { + "indent": ["error", 4], + "linebreak-style": ["error", "unix"], + "quotes": ["error", "single"], + "semi": ["error", "always"], + "no-unused-vars": 0 + } +} diff --git a/.gitignore b/.gitignore index 9661cac814..9ab47a5427 100644 --- a/.gitignore +++ b/.gitignore @@ -1,54 +1,97 @@ -*.vscide/ + + + + + + + + + + + + + + + + + + + + + + # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* + # Runtime data pids *.pid *.seed *.pid.lock + # Directory for instrumented libs generated by jscoverage/JSCover lib-cov + # Coverage directory used by tools like istanbul coverage + # nyc test coverage .nyc_output + # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt + # Bower dependency directory (https://bower.io/) bower_components + # node-waf configuration .lock-wscript + # Compiled binary addons (http://nodejs.org/api/addons.html) build/Release + # Dependency directories # node_modules/ jspm_packages/ + # Typescript v1 declaration files typings/ + # Optional npm cache directory .npm + # Optional eslint cache .eslintcache + # Optional REPL history .node_repl_history + # Output of 'npm pack' *.tgz + # dotenv environment variables file + + # gatsby files # .cache/ # public + # Mac files .DS_Store + # Yarn yarn-error.log .pnp/ .pnp.js # Yarn Integrity file .yarn-integrity + node_modules/ + + *.cache *public diff --git a/.graphqlrc.json b/.graphqlrc.json new file mode 100644 index 0000000000..d3a3f58e6a --- /dev/null +++ b/.graphqlrc.json @@ -0,0 +1,8 @@ +{ + "schema": [ + "./functions/netlifyGraph/netlifyGraphSchema.graphql" + ], + "schemaPath": [ + "./functions/netlifyGraph/netlifyGraphSchema.graphql" + ] +} \ No newline at end of file diff --git a/.netlify/edge-functions-import-map.json b/.netlify/edge-functions-import-map.json new file mode 100644 index 0000000000..aee80cf31b --- /dev/null +++ b/.netlify/edge-functions-import-map.json @@ -0,0 +1 @@ +{"imports":{"netlify:edge":"https://edge-bootstrap.netlify.app/v1/index.ts"}} \ No newline at end of file diff --git a/.netlify/state.json b/.netlify/state.json new file mode 100644 index 0000000000..d8e4f0f076 --- /dev/null +++ b/.netlify/state.json @@ -0,0 +1,11 @@ +{ + "siteId": "a1b7ee1a-11a7-4bd2-a341-2260656e216f", + "oneGraphSessionId": "937b1344-1df2-48d0-8935-3e68ba16a9b2", + "oneGraphEnabledServices": [ + "GITHUB", + "NPM", + "SALESFORCE", + "SPOTIFY", + "STRIPE" + ] +} \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000000..e69de29bb2 diff --git a/README.md b/README.md index 27f9c7ddc1..b12f3e33e7 100644 --- a/README.md +++ b/README.md @@ -1,4486 +1,13 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). ## Getting Started -# [**⇨WEBSITE🗺️⇦**](https://bgoonz-blog.netlify.app/) First, run the development server: -#### [Repo-Wiki](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki) - -#### [Latest Workin:](https://github.com/bgoonz/BGOONZ_BLOG_2.0/tree/0fc1923e5fe4c8f8ea1a9bca69e12b63f093898d) - - - ---- - -#### [CHANGELOG](./CHANGELOG.md) - -
- -##### [**⇨Cloudfare-Backup⇦**](https://bgoonz-blog-2-0.pages.dev/) 🌎 [**⇨ search⇦**](https://www.algolia.com/realtime-search-demo/web-dev-resource-hub-9e6b8aa8-6106-44c5-9f59-ff3f9531abd4) 🌎 [**⇨ Backup Repo Deploy⇦**](https://bgoonzblog20-backup.netlify.app/#gsc.tab=0) 🌎 [**⇨ Github pages⇦**](https://bgoonz.github.io/BGOONZ_BLOG_2.0/) 🌎 [**⇨ Go To Site Wiki⇦**](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki) 🌎 [**⇨ Gatsby Cloud Version⇦**](https://bgoonzblog20master.gtsb.io/) 🌎 [**⇨ Vercel Version⇦**](https://bgoonz-blog-2-0.vercel.app/) 🌎 [**⇨ Cloudfare-Domain⇦**](www.webdevhub.us) 🌎 [**⇨ gh-pages⇦**](https://bgoonz.github.io/BGOONZ_BLOG_2.0/) - - [stackbitv2-notworkinginstackbit](https://stackbit-clone.netlify.app/) - [backup-20-blog](https://bgoonzblog20-backup.netlify.app/) - -### Repos - - [Alt Backup](https://github.com/BGOOONZ-BLOG/bgoonz-blog2.0-v-5) - [Blog Content](https://github.com/bgoonz/MainBlogContent) - -###### [**⇨Privacy policy⇦**](https://codepen.io/bgoonz/pen/LYLJZrW) - -[![Netlify Status](https://api.netlify.com/api/v1/badges/a1b7ee1a-11a7-4bd2-a341-2260656e216f/deploy-status)](https://app.netlify.com/sites/bgoonz-blog/deploys)[![CodeFactor](https://www.codefactor.io/repository/github/bgoonz/bgoonz_blog_2.0/badge)](https://www.codefactor.io/repository/github/bgoonz/bgoonz_blog_2.0) - -![GitHub visitors](https://visitor-badge-reloaded.herokuapp.com/badge?page_id=bgoonz.visitor.badge.reloaded&color=00bbbb&style=for-the-badge&logo=github) - ---- - -![preview](https://github.com/bgoonz/BGOONZ_BLOG_2.0/blob/master/static/images/blog-may-2022.png?raw=true) - -```console - -npm i @stackbit/gatsby-plugin-menus babel-runtime chokidar classnames fs-extra gatsby gatsby-image gatsby-plugin-netlify gatsby-plugin-netlify-cms gatsby-plugin-sass gatsby-plugin-react-helmet gatsby-plugin-typescript --legacy-peer-deps - -``` - ---- - -## [Post processing](https://app.netlify.com/sites/bgoonz-blog/settings/deploys#post-processing) - -Control the post processing and optimizations Netlify can do for you - -### [Snippet injection](https://app.netlify.com/sites/bgoonz-blog/settings/deploys#snippet-injection) - -Inject analytics or other scripts into the HTML of your site. - -- **before** `` - - goback - -```html - - - -``` - ---- - -- **before** `` - - addthis - -```html - - - -``` - ---- - -- **before** `` - - mobil-qr - -```html - - -``` - ---- - -- **before** `` - - ukraine - -```html - - -``` - ---- - -- **before** `` - - google analytics tag - -```html - - - - -``` - ---- - -- **before** `` - - algolia - -``` -html - - - - -``` - ---- - -- **before** `` - - pdf2 - -```html - - Save to PDF - - -``` - ---- - -- **before** `` - - algolia - -```html - - -``` - ---- - -- **before** `` - - fb-sdk - -```html -
- - -``` - ---- - -[Learn more about snippet injection in the docs](https://www.netlify.com/docs/inject-analytics-snippets) - -Add snippet - ---- - -![Foo](https://github.com/bgoonz/BGOONZ_BLOG_2.0/blob/master/static/images/Screenshot%202022-03-30%20at%2012-37-24%20Website%20Speed%20Test%20Tool%20-%20Testmysite.io%20by%20Netlify.png?raw=true) - -
- ---- - -[![webdevhub logo](https://bgoonz-blog.netlify.app/images/home-button.png)]('https://bgoonz-blog.netlify.app/') - -Open Menu - -- [Navigation](/docs/sitemap) Sub-menu - - [Docs](/docs) - - [Showcase](/showcase) - - [Contact!](/docs/faq/contact) - - [Python](/docs/python/python-ds) - - [JavaScript](/javascript) -- [Blog](/blog/) Sub-menu - - [Blog-Post-Archive](https://bgoonz.blogspot.com/) - - [Top Blog Posts](https://blog-w-comments.vercel.app/) - - [Blog w Comments](/blogWcomments/) -- [Job Search](/docs/career/) Sub-menu - - [Job Boards](/docs/career/job-boards) - - [Do's and Don'ts of interviews](/interview/dos-and-donts) - - [Career-Tips](https://bgoonz-blog.netlify.app/docs/career/) - - [Interview Questions](/docs/interview/interview-questions) -- [Archive](/docs/archive) Sub-menu - - [Resource-Archive-Server](https://github.com/bgoonz/Learning-Assets) - - [Bootcamp Resources](https://lambda-resources.netlify.app/) - - [Web Dev Setup](https://bgoonz-blog.netlify.app/blog/webdev-setup/) - - [OG-Blog](https://web-dev-resource-hub.netlify.app/) - - [Top Repos](/docs) - - [MY_DOCS](https://bryan-guner.gitbook.io/my-docs/) -- [Projects](/docs/projects) Sub-menu - - [Potluck Planner](https://potluck-landing.netlify.app/) - - [Meditation App](https://meditate42app.netlify.app/) - - [WebAudioLab](https://bgoonz.github.io/WebAudioDaw/) - - [SearchAwesome](https://search-awesome.vercel.app/) - - [Condensed -Portfolio](https://bg-portfolio.netlify.app/) - - [Family Promise Tracker](https://a.familypromiseservicetracker.dev/) - - [DTW-Guitar-FX-Automation](https://github.com/bgoonz/Revamped-Automatic-Guitar-Effect-Triggering) - - [Embeds Blog](https://bgoonz-blog-v3-0.netlify.app/embeds/) - - [alt-blogs](https://bgoonz-blog-v3-0.netlify.app/) - - [Games](https://bgoonz-games.netlify.app/) - - [Blog Backup](https://bgoonz-blog-v3-0.netlify.app/) - - [Cover Letter](https://bgoonz-cv.netlify.app/) - - [Project Centric](https://project-portfolio42.netlify.app/) - - [Wordpress Blog](https://bgoonz-blog.netlify.app/) - - [Project Portfolio Gallery](https://project-portfolio42.netlify.app/) - - [github-stats-website](https://bgoonz.github.io/github-stats-website/) -- [Admin](https://bgoonz-blog.netlify.app/admin/) Sub-menu - - [Write Docs](https://bgoonz-blog.netlify.app/admin/#/collections/docs) - - [Write Blog](https://bgoonz-blog.netlify.app/admin/#/collections/blog/new) - - [Webmaster](https://bgoonz-blog.netlify.app/admin/#/collections/blog/new) -- [Tools](/docs/tools) Sub-menu - - [Github HTML Previewer](https://githtmlpreview.netlify.app/) - - [Text Tools](https://devtools42.netlify.app/) - - [Ternary 2 If Else](https://ternary42.netlify.app/) - - [Web Dev Utility Tools](/hps://web-dev-utility-tools-bgoonz.netlify.app/) - - [Setup Checker](https://github.com/bgoonz/web-dev-setup-checker) - - [PotluckPlanner](https://potluck-landing.netlify.app/) - - [WebDev Quizzes](https://web-dev-interview-prep-quiz-website.netlify.app/) - - [Github-Advanced-Search](https://github.com/search/advanced) - -Close Menu - -_🔎_ - -Search - -# I am a musician, electrical engineer & web developer - -**Please note that this website is in development and is often broken!** - -[](https://www.vagrantup.com/) [![gmail](https://img.icons8.com/color/96/000000/gmail.png)](mailto:bryan.guner@gmail.com)[![linkedin](https://img.icons8.com/color/96/000000/linkedin.png) ](https://www.linkedin.com/in/bryan-guner-046199128/)[![](https://img.icons8.com/color/96/000000/instagram-new.png) ](https://www.instagram.com/bgoonz/?hl=en)[![](https://img.icons8.com/color/96/000000/pinterest--v1.png)](https://www.pinterest.com/bryanguner/_saved/) - -[](https://webpack.js.org/)[](https://www.adobe.com/products/xd.html) - -[![NetlifyStatus](https://api.netlify.com/api/v1/badges/a1b7ee1a-11a7-4bd2-a341-2260656e216f/deploy-status)](https://app.netlify.com/sites/bgoonz-blog/deploys) - -[![Bryansgithubactivitygraph](https://activity-graph.herokuapp.com/graph?username=bgoonz&custom_title=This%20is%20Bryans%20Activity&hide_border=true&theme=chartreuse-dark)](https://github.com/bgoonz/github-readme-activity-graph) - -![Jokes](https://readme-jokes.vercel.app/api) - -![Python](https://img.shields.io/badge/-Python-05122A?style=flat&logo=python) ![HTML](https://img.shields.io/badge/-HTML-05122A?style=flat&logo=HTML5) ![CSS](https://img.shields.io/badge/-CSS-05122A?style=flat&logo=CSS3&logoColor=1572B6) ![JavaScript](https://img.shields.io/badge/-JavaScript-05122A?style=flat&logo=javascript) ![React](https://img.shields.io/badge/-React-05122A?style=flat&logo=react) ![Node.js](https://img.shields.io/badge/-Node.js-05122A?style=flat&logo=node.js) - -![VisualStudioCode](https://img.shields.io/badge/-Visual%20Studio%20Code-05122A?style=flat&logo=visual-studio-code&logoColor=007ACC) ![Docker](https://img.shields.io/badge/-Docker-05122A?style=flat&logo=Docker) ![MongoDB](https://img.shields.io/badge/-MongoDB-05122A?style=flat&logo=mongodb) ![PostgreSQL](https://img.shields.io/badge/-PostgreSQL-05122A?style=flat&logo=postgresql) - -![Git](https://img.shields.io/badge/-Git-05122A?style=flat&logo=git) ![GitHub](https://img.shields.io/badge/-GitHub-05122A?style=flat&logo=github) ![GitLab](https://img.shields.io/badge/-GitLab-05122A?style=flat&logo=gitlab) - -![Markdown](https://img.shields.io/badge/-Markdown-05122A?style=flat&logo=markdown) - -[Contact](https://sidebar-blog.netlify.app/contact/) - -![](https://d33wubrfki0l68.cloudfront.net/47651cb6f5e64bf9eee581581215e5c456e3968d/83ee4/images/bigo.jpg) - -### [A Quick Guide To Big O](https://bgoonz-blog.netlify.app/docs/ds-algo/big-o/) - -Memoization, Tabulation, and Sorting Algorithms by Example↩ Why is looking at runtime not a reliable method of calculating time↩ complexity? - -[View Post](/docs/ds-algo/big-o/) - -![python](https://d33wubrfki0l68.cloudfront.net/4337f190bb60dcd6f83fd5e2ac21502e1cf93f45/16558/images/python-language.jpg) - -### [Python Guide](https://bgoonz-blog.netlify.app/docs/python/python-ds) - -_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" ._ - -[View Posts](https://bgoonz-blog.netlify.app/docs/python/python-ds) - -![](https://d33wubrfki0l68.cloudfront.net/1111140b3425c2a3e653688cedc52c43af701d30/54d59/images/dtw-algo.jpg) - -### [Guitar Effects Triggering w DTW](https://github.com/bgoonz/Revamped-Automatic-Guitar-Effect-Triggering) - -[Learn More](/docs/tools) - -![img of dtw](https://d33wubrfki0l68.cloudfront.net/a37b8bc089cdd775711785baf935f9b1c4e732b0/c2294/images/react.gif) - -### [Beginner Guide React](https://bgoonz-blog.netlify.app/docs/react/react2/) - -As I learn to build web applications in React I will blog about it in↩ this series in an attempt to capture the questions that a complete↩ beginner might encounter that a more seasoned developer would take for↩ granted! - -![img of react](https://d33wubrfki0l68.cloudfront.net/f318a0bdc5403fb9b59683b46e3c9ec2d75d2ed2/7de75/images/pleasant-birch.png) - -### [Scope & Closure](https://dev.to/bgoonz/scope-and-context-in-javascript-5cma) - -Scope & Context in JS - -The **scope** of a program in JavaScript is the set of variables that are available for use within the program. - -![scope and closure](https://d33wubrfki0l68.cloudfront.net/bc959e2c76edd99401fa7bc07665db54863f5fd2/97e29/images/dtw-slideshow.gif) - -### Web Audio Daw - -PostgreSQL Cheat Sheet, Everything You Need to View Post With VSCode - -- Extensions & Resources, Super Simple Intro To HTML, Understanding↩ Git... etc.... - -## Current Interests - -From github repositories to existential questions. - -![angolia](https://d33wubrfki0l68.cloudfront.net/589475503098710e5f2f3c1a381015f69e6b4760/0be4d/images/neural.png) - -### [Angolia](/angolia) - -## Full Text Search - -[Full Text Search](https://www.algolia.com/) - -![neural networks](https://d33wubrfki0l68.cloudfront.net/589475503098710e5f2f3c1a381015f69e6b4760/0be4d/images/neural.png) - -### [Convolutional Neural Networks](/neural networks) - -Artificial neural networks, usually simply called neural networks, are computing systems vaguely inspired by the biological [neural networks](https://github.com/tensorflow/tensorflow) ![](/_static/app-assets/neural.PNG) - -![jamstack](https://d33wubrfki0l68.cloudfront.net/f776b2f35588e0ab71789925ce9564924154c4cf/df9d3/images/jamstack.png) - -### [Jamstack](/jamstack) - -##### Why Jamstack Jamstack is the new standard architecture for the - -web. Using Git workflows and modern build tools, pre-rendered content↩ is served to a CDN and made dynamic through APIs and serverless↩ functions. Technologies in the stack include JavaScript frameworks,↩ Static Site Generators, Headless CMSs, and CDNs. - -![event loop](https://d33wubrfki0l68.cloudfront.net/fb22b10eaa16e4ac0690115bf6c6987350d38d4b/13c10/images/eventloop.gif) - -### [Asynchronous JavaScript](/docs/) - -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. - -[NJDEVILS](https://www.allaboutthejersey.com/) - -![nj-devils](/images/njdev-219301cd.jpg) - -### [NJ Devils](https://www.allaboutthejersey.com/) - -# New Jersey Devils Hockey Team - -### (Hockey in general) - -## Team identity - -[![](https://upload.wikimedia.org/wikipedia/en/thumb/d/da/OldDevils.png/300px-OldDevils.png)](https://en.wikipedia.org/wiki/File:OldDevils.png) - -The 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). - -[Learn More](https://www.iter.org/) - -![ITER Reactor](https://d33wubrfki0l68.cloudfront.net/c2ae8fae397ffc059312cb9e84ae23dd4bf774bd/fd765/images/iter.jpg) - -### [ITER Fusion Reactor Experiment (Southern France)](https://www.iter.org/) - -# Break Even Nuclear Fusion Candidate - -In December, researchers at the Joint European Torus (JET) started↩ conducting fusion experiments with tritium — a rare and radioactive↩ isotope of hydrogen. The facility is a one-tenth-volume mock-up of the↩ US\$22-billion ITER project and has the same doughnut-shaped 'tokamak'↩ design — the world's most developed approach to fusion energy. It is↩ the first time since 1997 that researchers have done experiments in a↩ tokamak with any significant amount of tritium. - -## Resume & Portfolio - -![](https://d33wubrfki0l68.cloudfront.net/b6e6b09f4479310dff86d8dd7af1b73762484f6a/fea3e/images/image-of-resume.png) - -### [Resume](https://github.com/bgoonz/resume-cv-portfolio-samples/raw/master/2021-resume/bryan-guner-resume-2021.pdf) - -[View In One Drive](https://1drv.ms/b/s!AkGiZ9n9CRDSpLsZsnPtiN7p77vq6A) [Web Version](#) [Download PDF](https://github.com/bgoonz/bgoonz/raw/master/bryan_guner_resume_2021_V9.pdf) - -![portfolio of websites](https://d33wubrfki0l68.cloudfront.net/4e66fa2888421bd225aa811c156362cc0b7d4ebc/ca806/images/portfolio.jpg) - -### Showcase - -![My Projects](/_static/app-assets/lambda-demo1.gif)My Projects! - -[Learn More](/showcase) - -## Blog-Archive-And-Mini-Projects - -![animated gif](/images/cool annimation.gif) - -## Latest & Greatest - -## Web Dev Utilitiy Tools - -## Tools Showcase - -![medium](https://d33wubrfki0l68.cloudfront.net/e5828552ff6b5743ed241d9c926e60eb925dde97/8dbbf/images/goals.jpg) - -## Web Audio DA - -[Go To Web Audio Daw](https://mihirbegmusiclab.netlify.app/) - -## Quick Links - -quick links home - -### [About](/docs/about/) - -Web-Dev-Hub is my personal blogand documentation site - -[Learn More](/docs/about/) - -### [Articles](/docs/articles/) - -my web development articles - -[Learn More](/docs/articles/) - -### [Audio](/docs/audio/) - -Audio Projects and tools / web audio daw - -[Learn More](/docs/audio/) - -### [Archive](/docs/archive/) - -more tools that I have created or collaborated on. - -[Learn More](/docs/archive/) - -### [Career](/docs/career/) - -Reference materials and descriptions of fundamental concepts as well as visua - -[Career](/docs/career/) - -### [Community](/docs/community/) - -We'd love it if you participate in the Libris community. Find out how to get connected. - -[Learn More](/docs/community/) - -### [Content](/docs/content/) - -In this section you'll learn how to add syntax highlighting, examples, callouts and much more. - -[Learn More](/docs/content/) - -### [CSS](/docs/css/) - -[Learn More](/docs/css/) - -### [Docs](/docs/docs/) - -Documentation - -[Learn More](/docs/docs/) - -### [Data Structures](/docs/ds-algo/) - -In this section you'll learn how to add syntax highlighting, examples, callouts and much more. - -[Learn More](/docs/ds-algo/) - -### [FAQ](/docs/faq/) - -In this section you'll find commonly asked questions regarding the Libris theme. If you have questions, don't hesitate to ask us directly. - -[Learn More](/docs/faq/) - -### - -Learn More - -### - -Learn More - -### - -Learn More - -### [Interact](/docs/interact/) - -Interactive examples and projects - -[Learn More](/docs/interact/) - -### [Javascript](/docs/javascript/) - -Javascript articles and docs - -[Learn More](/docs/javascript/) - -### [JS-Quick-Tips](/docs/js-tips/) - -Javascript articles and docs - -[Learn More](/docs/js-tips/) - -### [Leetcode](/docs/leetcode/) - -feel free to try the examples - -[Learn More](/docs/leetcode/) - -### [Netlify CMS](/docs/netlify-cms-jamstack/) - -etlify 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. - -[Learn More](/docs/netlify-cms-jamstack/) - -### [Overflow](/docs/overflow/) - -feel free to try the examples - -[Learn More](/docs/overflow/) - -### [Projects](/docs/projects/) - -We'd love it if you participate in the Web-Dev-Hubcommunity. Find out how to get connected. - -[Learn More](/docs/projects/) - -### [Python](/docs/python/) - -Python - -[Learn More](/docs/python/) - -### [QuickRef](/docs/quick-ref/) - -In this section you'll find basic information about Web-Dev-Hub and how to use it. - -[Learn More](/docs/quick-ref/) - -### [React](/docs/react/) - -To make it easy to write documentation in plain Markdown, most React are styled using Markdown elements with few additional CSS classes. - -[Learn More](/docs/react/) - -### [Reference](/docs/reference/) - -helpful reference guides - -[Learn More](/docs/reference/) - -### [Tips](/docs/tips/) - -[Learn More](/docs/tips/) - -### [Tools](/docs/tools/) - -See some interesting tools developed by the Web-Dev-Hubcommunity to help automate parts of your workflow. - -[Learn More](/docs/tools/) - -### [Tutorials](/docs/tutorials/) - -Walkthroughs of various development activities and skills - -[Learn More](/docs/tutorials/) - -## Contact - -get in touch! +1 (551) - 254 - 5505 - -[Contact](/docs/faq/contact) - -[index](https://search.freefind.com/siteindex.html?si=14588965) - -[sitemap](https://search.freefind.com/find.html?si=14588965&m=0&p=0) - -[advanced](https://search.freefind.com/find.html?si=14588965&pid=a) - -[search engine](https://www.freefind.com) [byfreefind](https://www.freefind.com) - -[Save to PDF](//pdfcrowd.com/url_to_pdf/?) - -[![webdevhub logo](https://d33wubrfki0l68.cloudfront.net/e5662f0d4f3e7730aea1a0faf7ff09ea20184700/6ca0b/images/dgqlkqjtmk.png)](/) - -@bgoonz on almost every platform [BLM](https://random-static-html-deploys.netlify.app/blm.html) - -[Twitter](https://twitter.com/bgooonz) [LinkedIn](https://www.linkedin.com/in/bryan-guner-046199128/) [GitHub](https://github.com/bgoonz) [Youtube](https://www.youtube.com/channel/UC9-rYyUMsnEBK8G8fCyrXXA) [Instagram](https://www.instagram.com/bgoonz/?hl=en) [dev.to](https://dev.to/bgoonz) - -[![webdevhub logo](https://d33wubrfki0l68.cloudfront.net/e5662f0d4f3e7730aea1a0faf7ff09ea20184700/83eb0/images/home-button.png)](/) - -Open Menu - -- [Navigation](/docs/sitemap) Sub-menu - - [Docs](/docs) - - [Showcase](/showcase) - - [Contact!](/docs/faq/contact) - - [Python](/docs/python/python-ds) - - [JavaScript](/javascript) -- [Blog](/blog/) Sub-menu - - [Blog-Post-Archive](https://bgoonz.blogspot.com/) - - [Top Blog Posts](https://blog-w-comments.vercel.app/) - - [Blog w Comments](/blogWcomments/) -- [Job Search](/docs/career/) Sub-menu - - [Job Boards](/docs/career/job-boards) - - [Do's and Don'ts of interviews](/interview/dos-and-donts) - - [Career-Tips](https://bgoonz-blog.netlify.app/docs/career/) - - [Interview Questions](/docs/interview/interview-questions) -- [Archive](/docs/archive) Sub-menu - - [Resource-Archive-Server](https://github.com/bgoonz/Learning-Assets) - - [Bootcamp Resources](https://lambda-resources.netlify.app/) - - [Web Dev Setup](https://bgoonz-blog.netlify.app/blog/webdev-setup/) - - [OG-Blog](https://web-dev-resource-hub.netlify.app/) - - [Top Repos](/docs) - - [MY_DOCS](https://bryan-guner.gitbook.io/my-docs/) -- [Projects](/docs/projects) Sub-menu - - [Potluck Planner](https://potluck-landing.netlify.app/) - - [Meditation App](https://meditate42app.netlify.app/) - - [WebAudioLab](https://bgoonz.github.io/WebAudioDaw/) - - [SearchAwesome](https://search-awesome.vercel.app/) - - [Condensed -Portfolio](https://bg-portfolio.netlify.app/) - - [Family Promise Tracker](https://a.familypromiseservicetracker.dev/) - - [DTW-Guitar-FX-Automation](https://github.com/bgoonz/Revamped-Automatic-Guitar-Effect-Triggering) - - [Embeds Blog](https://bgoonz-blog-v3-0.netlify.app/embeds/) - - [alt-blogs](https://bgoonz-blog-v3-0.netlify.app/) - - [Games](https://bgoonz-games.netlify.app/) - - [Blog Backup](https://bgoonz-blog-v3-0.netlify.app/) - - [Cover Letter](https://bgoonz-cv.netlify.app/) - - [Project Centric](https://project-portfolio42.netlify.app/) - - [Wordpress Blog](https://bgoonz-blog.netlify.app/) - - [Project Portfolio Gallery](https://project-portfolio42.netlify.app/) - - [github-stats-website](https://bgoonz.github.io/github-stats-website/) -- [Admin](https://bgoonz-blog.netlify.app/admin/) Sub-menu - - [Write Docs](https://bgoonz-blog.netlify.app/admin/#/collections/docs) - - [Write Blog](https://bgoonz-blog.netlify.app/admin/#/collections/blog/new) - - [Webmaster](https://bgoonz-blog.netlify.app/admin/#/collections/blog/new) -- [Tools](/docs/tools) Sub-menu - - [Github HTML Previewer](https://githtmlpreview.netlify.app/) - - [Text Tools](https://devtools42.netlify.app/) - - [Ternary 2 If Else](https://ternary42.netlify.app/) - - [Web Dev Utility Tools](/hps://web-dev-utility-tools-bgoonz.netlify.app/) - - [Setup Checker](https://github.com/bgoonz/web-dev-setup-checker) - - [PotluckPlanner](https://potluck-landing.netlify.app/) - - [WebDev Quizzes](https://web-dev-interview-prep-quiz-website.netlify.app/) - - [Github-Advanced-Search](https://github.com/search/advanced) - -Close Menu - -_🔎_ - -Search - -# I am a musician, electrical engineer & web developer - -**Please note that this website is in development and is often broken!** - -[](https://www.vagrantup.com/) [![gmail](https://img.icons8.com/color/96/000000/gmail.png)](mailto:bryan.guner@gmail.com)[![linkedin](https://img.icons8.com/color/96/000000/linkedin.png) ](https://www.linkedin.com/in/bryan-guner-046199128/)[![](https://img.icons8.com/color/96/000000/instagram-new.png) ](https://www.instagram.com/bgoonz/?hl=en)[![](https://img.icons8.com/color/96/000000/pinterest--v1.png)](https://www.pinterest.com/bryanguner/_saved/) - -[](https://webpack.js.org/)[](https://www.adobe.com/products/xd.html) - -[![NetlifyStatus](https://api.netlify.com/api/v1/badges/a1b7ee1a-11a7-4bd2-a341-2260656e216f/deploy-status)](https://app.netlify.com/sites/bgoonz-blog/deploys) - -[![Bryansgithubactivitygraph](https://activity-graph.herokuapp.com/graph?username=bgoonz&custom_title=This%20is%20Bryans%20Activity&hide_border=true&theme=chartreuse-dark)](https://github.com/bgoonz/github-readme-activity-graph) - -![Jokes](https://readme-jokes.vercel.app/api) - -![Python](https://img.shields.io/badge/-Python-05122A?style=flat&logo=python) ![HTML](https://img.shields.io/badge/-HTML-05122A?style=flat&logo=HTML5) ![CSS](https://img.shields.io/badge/-CSS-05122A?style=flat&logo=CSS3&logoColor=1572B6) ![JavaScript](https://img.shields.io/badge/-JavaScript-05122A?style=flat&logo=javascript) ![React](https://img.shields.io/badge/-React-05122A?style=flat&logo=react) ![Node.js](https://img.shields.io/badge/-Node.js-05122A?style=flat&logo=node.js) - -![VisualStudioCode](https://img.shields.io/badge/-Visual%20Studio%20Code-05122A?style=flat&logo=visual-studio-code&logoColor=007ACC) ![Docker](https://img.shields.io/badge/-Docker-05122A?style=flat&logo=Docker) ![MongoDB](https://img.shields.io/badge/-MongoDB-05122A?style=flat&logo=mongodb) ![PostgreSQL](https://img.shields.io/badge/-PostgreSQL-05122A?style=flat&logo=postgresql) - -![Git](https://img.shields.io/badge/-Git-05122A?style=flat&logo=git) ![GitHub](https://img.shields.io/badge/-GitHub-05122A?style=flat&logo=github) ![GitLab](https://img.shields.io/badge/-GitLab-05122A?style=flat&logo=gitlab) - -![Markdown](https://img.shields.io/badge/-Markdown-05122A?style=flat&logo=markdown) - -[Contact](https://sidebar-blog.netlify.app/contact/) - -![](https://d33wubrfki0l68.cloudfront.net/47651cb6f5e64bf9eee581581215e5c456e3968d/83ee4/images/bigo.jpg) - -### [A Quick Guide To Big O](https://bgoonz-blog.netlify.app/docs/ds-algo/big-o/) - -Memoization, Tabulation, and Sorting Algorithms by Example↩ Why is looking at runtime not a reliable method of calculating time↩ complexity? - -[View Post](/docs/ds-algo/big-o/) - -![python](https://d33wubrfki0l68.cloudfront.net/4337f190bb60dcd6f83fd5e2ac21502e1cf93f45/16558/images/python-language.jpg) - -### [Python Guide](https://bgoonz-blog.netlify.app/docs/python/python-ds) - -_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" ._ - -[View Posts](https://bgoonz-blog.netlify.app/docs/python/python-ds) - -![](https://d33wubrfki0l68.cloudfront.net/1111140b3425c2a3e653688cedc52c43af701d30/54d59/images/dtw-algo.jpg) - -### [Guitar Effects Triggering w DTW](https://github.com/bgoonz/Revamped-Automatic-Guitar-Effect-Triggering) - -[Learn More](/docs/tools) - -![img of dtw](https://d33wubrfki0l68.cloudfront.net/a37b8bc089cdd775711785baf935f9b1c4e732b0/c2294/images/react.gif) - -### [Beginner Guide React](https://bgoonz-blog.netlify.app/docs/react/react2/) - -As I learn to build web applications in React I will blog about it in↩ this series in an attempt to capture the questions that a complete↩ beginner might encounter that a more seasoned developer would take for↩ granted! - -![img of react](https://d33wubrfki0l68.cloudfront.net/f318a0bdc5403fb9b59683b46e3c9ec2d75d2ed2/7de75/images/pleasant-birch.png) - -### [Scope & Closure](https://dev.to/bgoonz/scope-and-context-in-javascript-5cma) - -Scope & Context in JS - -The **scope** of a program in JavaScript is the set of variables that are available for use within the program. - -![scope and closure](https://d33wubrfki0l68.cloudfront.net/bc959e2c76edd99401fa7bc07665db54863f5fd2/97e29/images/dtw-slideshow.gif) - -### Web Audio Daw - -PostgreSQL Cheat Sheet, Everything You Need to View Post With VSCode - -- Extensions & Resources, Super Simple Intro To HTML, Understanding↩ Git... etc.... - -## Current Interests - -From github repositories to existential questions. - -![angolia](https://d33wubrfki0l68.cloudfront.net/589475503098710e5f2f3c1a381015f69e6b4760/0be4d/images/neural.png) - -### [Angolia](/angolia) - -## Full Text Search - -[Full Text Search](https://www.algolia.com/) - -![neural networks](https://d33wubrfki0l68.cloudfront.net/589475503098710e5f2f3c1a381015f69e6b4760/0be4d/images/neural.png) - -### [Convolutional Neural Networks](/neural networks) - -Artificial neural networks, usually simply called neural networks, are computing systems vaguely inspired by the biological [neural networks](https://github.com/tensorflow/tensorflow) ![](/_static/app-assets/neural.PNG) - -![jamstack](https://d33wubrfki0l68.cloudfront.net/f776b2f35588e0ab71789925ce9564924154c4cf/df9d3/images/jamstack.png) - -### [Jamstack](/jamstack) - -##### Why Jamstack Jamstack is the new standard architecture for the - -web. Using Git workflows and modern build tools, pre-rendered content↩ is served to a CDN and made dynamic through APIs and serverless↩ functions. Technologies in the stack include JavaScript frameworks,↩ Static Site Generators, Headless CMSs, and CDNs. - -![event loop](https://d33wubrfki0l68.cloudfront.net/fb22b10eaa16e4ac0690115bf6c6987350d38d4b/13c10/images/eventloop.gif) - -### [Asynchronous JavaScript](/docs/) - -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. - -[Learn More](https://www.allaboutthejersey.com/) - -![nj-devils](/images/njdev-219301cd.jpg) - -### [NJ Devils](https://www.allaboutthejersey.com/) - -# New Jersey Devils Hockey Team - -### (Hockey in general) - -## Team identity - -[![](https://upload.wikimedia.org/wikipedia/en/thumb/d/da/OldDevils.png/300px-OldDevils.png)](https://en.wikipedia.org/wiki/File:OldDevils.png) - -The 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). - -[Learn More](https://www.iter.org/) - -![ITER Reactor](https://d33wubrfki0l68.cloudfront.net/c2ae8fae397ffc059312cb9e84ae23dd4bf774bd/fd765/images/iter.jpg) - -### [ITER Fusion Reactor Experiment (Southern France)](https://www.iter.org/) - -# Break Even Nuclear Fusion Candidate - -In December, researchers at the Joint European Torus (JET) started↩ conducting fusion experiments with tritium — a rare and radioactive↩ isotope of hydrogen. The facility is a one-tenth-volume mock-up of the↩ US\$22-billion ITER project and has the same doughnut-shaped 'tokamak'↩ design — the world's most developed approach to fusion energy. It is↩ the first time since 1997 that researchers have done experiments in a↩ tokamak with any significant amount of tritium. - -## Resume & Portfolio - -![](https://d33wubrfki0l68.cloudfront.net/b6e6b09f4479310dff86d8dd7af1b73762484f6a/fea3e/images/image-of-resume.png) - -### [Resume](https://github.com/bgoonz/resume-cv-portfolio-samples/raw/master/2021-resume/bryan-guner-resume-2021.pdf) - -[View In One Drive](https://1drv.ms/b/s!AkGiZ9n9CRDSpLsZsnPtiN7p77vq6A) [Web Version](#) [Download PDF](https://github.com/bgoonz/bgoonz/raw/master/bryan_guner_resume_2021_V9.pdf) - -![portfolio of websites](https://d33wubrfki0l68.cloudfront.net/4e66fa2888421bd225aa811c156362cc0b7d4ebc/ca806/images/portfolio.jpg) - -### Showcase - -![My Projects](/_static/app-assets/lambda-demo1.gif)My Projects! - -[Learn More](/showcase) - -## Blog-Archive-And-Mini-Projects - -![animated gif](/images/cool annimation.gif) - -## Latest & Greatest - -## Web Dev Utilitiy Tools - -## Tools Showcase - -![medium](https://d33wubrfki0l68.cloudfront.net/e5828552ff6b5743ed241d9c926e60eb925dde97/8dbbf/images/goals.jpg) - -## Web Audio DA - -[Go To Web Audio Daw](https://mihirbegmusiclab.netlify.app/) - -## Quick Links - -quick links home - -### [About](/docs/about/) - -Web-Dev-Hub is my personal blogand documentation site - -[Learn More](/docs/about/) - -### [Articles](/docs/articles/) - -my web development articles - -[Learn More](/docs/articles/) - -### [Audio](/docs/audio/) - -Audio Projects and tools / web audio daw - -[Learn More](/docs/audio/) - -### [Archive](/docs/archive/) - -more tools that I have created or collaborated on. - -[Learn More](/docs/archive/) - -### [Career](/docs/career/) - -Reference materials and descriptions of fundamental concepts as well as visua - -[Learn More](/docs/career/) - -### [Community](/docs/community/) - -We'd love it if you participate in the Libris community. Find out how to get connected. - -[Learn More](/docs/community/) - -### [Content](/docs/content/) - -In this section you'll learn how to add syntax highlighting, examples, callouts and much more. - -[Learn More](/docs/content/) - -### [CSS](/docs/css/) - -[Learn More](/docs/css/) - -### [Docs](/docs/docs/) - -Documentation - -[Learn More](/docs/docs/) - -### [Data Structures](/docs/ds-algo/) - -In this section you'll learn how to add syntax highlighting, examples, callouts and much more. - -[Learn More](/docs/ds-algo/) - -### [FAQ](/docs/faq/) - -In this section you'll find commonly asked questions regarding the Libris theme. If you have questions, don't hesitate to ask us directly. - -[Learn More](/docs/faq/) - -### - -Learn More - -### - -Learn More - -### - -Learn More - -### [Interact](/docs/interact/) - -Interactive examples and projects - -[Learn More](/docs/interact/) - -### [Javascript](/docs/javascript/) - -Javascript articles and docs - -[Learn More](/docs/javascript/) - -### [JS-Quick-Tips](/docs/js-tips/) - -Javascript articles and docs - -[Learn More](/docs/js-tips/) - -### [Leetcode](/docs/leetcode/) - -feel free to try the examples - -[Learn More](/docs/leetcode/) - -### [Netlify CMS](/docs/netlify-cms-jamstack/) - -etlify 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. - -[Learn More](/docs/netlify-cms-jamstack/) - -### [Overflow](/docs/overflow/) - -feel free to try the examples - -[Learn More](/docs/overflow/) - -### [Projects](/docs/projects/) - -We'd love it if you participate in the Web-Dev-Hubcommunity. Find out how to get connected. - -[Learn More](/docs/projects/) - -### [Python](/docs/python/) - -Python - -[Learn More](/docs/python/) - -### [QuickRef](/docs/quick-ref/) - -In this section you'll find basic information about Web-Dev-Hub and how to use it. - -[Learn More](/docs/quick-ref/) - -### [React](/docs/react/) - -To make it easy to write documentation in plain Markdown, most React are styled using Markdown elements with few additional CSS classes. - -[Learn More](/docs/react/) - -### [Reference](/docs/reference/) - -helpful reference guides - -[Learn More](/docs/reference/) - -### [Tips](/docs/tips/) - -[Learn More](/docs/tips/) - -### [Tools](/docs/tools/) - -See some interesting tools developed by the Web-Dev-Hubcommunity to help automate parts of your workflow. - -[Learn More](/docs/tools/) - -### [Tutorials](/docs/tutorials/) - -Walkthroughs of various development activities and skills - -[Learn More](/docs/tutorials/) - -## Contact - -get in touch! +1 (551) - 254 - 5505 - -[Contact](/docs/faq/contact) - -[index](https://search.freefind.com/siteindex.html?si=14588965) - -[sitemap](https://search.freefind.com/find.html?si=14588965&m=0&p=0) - -[advanced](https://search.freefind.com/find.html?si=14588965&pid=a) - -[search engine](https://www.freefind.com) [byfreefind](https://www.freefind.com) - -[Save to PDF](//pdfcrowd.com/url_to_pdf/?) - -[![webdevhub logo](https://d33wubrfki0l68.cloudfront.net/e5662f0d4f3e7730aea1a0faf7ff09ea20184700/6ca0b/images/dgqlkqjtmk.png)](/) - -@bgoonz on almost every platform [BLM](https://random-static-html-deploys.netlify.app/blm.html) - -[Twitter](https://twitter.com/bgooonz) [LinkedIn](https://www.linkedin.com/in/bryan-guner-046199128/) [GitHub](https://github.com/bgoonz) [Youtube](https://www.youtube.com/channel/UC9-rYyUMsnEBK8G8fCyrXXA) [Instagram](https://www.instagram.com/bgoonz/?hl=en) [dev.to](https://dev.to/bgoonz) - ---- - -
- - Bash Commands - -## My Commands - -## # Find - -# To find files by case-insensitive extension (ex: .jpg, .jpg, .jpG) - -find . -iname "\*.jpg" - -# To find directories - -find . -type d - -# To find files - -find . -type f - -# To find files by octal permission - -find . -type f -perm 777 - -# To find files with setuid bit set - -find . -xdev \( -perm -4000 \) -type f -print0 | xargs -0 ls -l - -# To find files with extension '.txt' and remove them - -find ./path/ -name '\*.txt' -exec rm '{}' \; - -# To find files with extension '.txt' and look for a string into them - -find ./path/ -name '\*.txt' | xargs grep 'string' - -# To find files with size bigger than 5 Mebibyte and sort them by size - -find . -size +5M -type f -print0 | xargs -0 ls -Ssh | sort -z - -# To find files bigger than 2 Megabyte and list them - -find . -type f -size +200000000c -exec ls -lh {} \; | awk '{ print $9 ": " $5 }' - -# To find files modified more than 7 days ago and list file information - -find . -type f -mtime +7d -ls - -# To find symlinks owned by a user and list file information - -find . -type l -user -ls - -# To search for and delete empty directories - -find . -type d -empty -exec rmdir {} \; - -# To search for directories named build at a max depth of 2 directories - -find . -maxdepth 2 -name build -type d - -# To search all files who are not in .git directory - -find . ! -iwholename '_.git_' -type f - -# To find all files that have the same node (hard link) as MY_FILE_HERE - -find . -type f -samefile MY_FILE_HERE 2> /dev/null - -# To find all files in the current directory and modify their permissions - -find . -type f -exec chmod 644 {} \; - -# 1. Remove spaces from file and folder names and then remove numbers from files and folder names - -## Description: need to : `sudo apt install rename` - -> Notes: Issue when renaming file without numbers collides with existing file name... - -## # code - -```console -find . -name "* *" -type d | rename 's/ /_/g' -find . -name "* *" -type f | rename 's/ /_/g' -``` - -```console - -```console -find $dir -type f | sed 's|\(.*/\)[^A-Z]*\([A-Z].*\)|mv \"&\" \"\1\2\"|' | sh - -find $dir -type d | sed 's|\(.*/\)[^A-Z]*\([A-Z].*\)|mv \"&\" \"\1\2\"|' | sh - -for i in *.html; do mv "$i" "${i%-*}.html"; done - -for i in *.*; do mv "$i" "${i%-*}.${i##*.}"; done - ---- -## Description: combine the contents of every file in the contaning directory. - -> Notes: this includes the contents of the file it's self... - -## # code: - -```js -// -//APPEND-DIR.js -const fs = require('fs'); -let cat = require('child_process') - .execSync('cat *') - .toString('UTF-8'); -fs.writeFile('output.md', cat, err => { - if (err) throw err; -}); - -``` - ---- - -# 2. Download Website Using Wget - -## Description - -> Notes: ==> sudo apt install wget - -## ## code - -```console - -wget --limit-rate=200k --no-clobber --convert-links --random-wait -r -p -E -e robots=off -U mozilla https://bootcamp42.gitbook.io/python/ - -``` - ---- - -# 3. Clean Out Messy Git Repo - -## Description: recursively removes git related folders as well as internal use files / attributions in addition to empty folders - -> Notes: To clear up clutter in repositories that only get used on your local machine. - -## ## code - -```console - -find . -empty -type d -print -delete - -find . \( -name ".git" -o -name ".gitignore" -o -name ".gitmodules" -o -name ".gitattributes" \) -exec rm -rf -- {} + - -find . \( -name "*SECURITY.txt" -o -name "*RELEASE.txt" -o -name "*CHANGELOG.txt" -o -name "*LICENSE.txt" -o -name "*CONTRIBUTING.txt" -name "*HISTORY.md" -o -name "*LICENSE" -o -name "*SECURITY.md" -o -name "*RELEASE.md" -o -name "*CHANGELOG.md" -o -name "*LICENSE.md" -o -name "*CODE_OF_CONDUCT.md" -o -name "*CONTRIBUTING.md" \) -exec rm -rf -- {} + - -``` - ---- - -# 4. clone all of a user's git repositories - -## Description: clone all of a user or organization's git repositories - -> Notes: - -## ## code - -# Generalized - -```console - -CNTX={users|orgs}; NAME={username|orgname}; PAGE=1 -curl "https://api.github.com/$CNTX/$NAME/repos?page=$PAGE&per_page=100" | - grep -e 'git_url*' | - cut -d \" -f 4 | - xargs -L1 git clone -``` - -# Clone all Git User - -```console -CNTX={users}; NAME={bgoonz}; PAGE=1 -curl "https://api.github.com/$CNTX/$NAME/repos?page=$PAGE&per_page=200"?branch=master | - grep -e 'git_url*' | - cut -d \" -f 4 | - xargs -L1 git clone - -``` - -# Clone all Git Organization - -```console - -CNTX={organizations}; NAME={TheAlgorithms}; PAGE=1 -curl "https://api.github.com/$CNTX/$NAME/repos?page=$PAGE&per_page=200"?branch=master | - grep -e 'git_url*' | - cut -d \" -f 4 | - xargs -L1 git clone - -``` - ---- - -# 5. Git Workflow - -## Description - -## ## code - -```console -git pull -git init -git add . -git commit -m"update" -git push -u origin master -``` - -```console -git init -git add . -git commit -m"update" -git push -u origin main -``` - -```console - -git init -git add . -git commit -m"update" -git push -u origin bryan-guner -``` - -```console -git init -git add . -git commit -m"update" -git push -u origin gh-pages -``` - -```console -git init -git add . -git commit -m"update" -git push -u origin preview -``` - ---- - -# 6. Recursive Unzip In Place - -## Description: recursively unzips folders and then deletes the zip file by the same name - -> Notes: - -## ## code - -```console - -find . -name "*.zip" | while read filename; do unzip -o -d "`dirname "$filename"`" "$filename"; done; - -find . -name "*.zip" -type f -print -delete - -``` - ---- - -# 7. git pull keeping local changes - -## Description - -> Notes: - -## ## code - -```console - -git stash -git pull -git stash pop - -``` - ---- - -# 8. Prettier Code Formatter - -## Description - -> Notes: - -## ## code - -```console - -sudo npm i prettier -g - -prettier --write . - -``` - ---- - -# 9. Pandoc - -## Description - -> Notes: - -## ## code - -```console - -find ./ -iname "*.md" -type f -exec sh -c 'pandoc --standalone "${0}" -o "${0%.md}.html"' {} \; - -find ./ -iname "*.html" -type f -exec sh -c 'pandoc --wrap=none --from html --to markdown_strict "${0}" -o "${0%.html}.md"' {} \; - -find ./ -iname "*.docx" -type f -exec sh -c 'pandoc "${0}" -o "${0%.docx}.md"' {} \; - -``` - ---- - -# 10. Gitpod Installs - -## Description - -> Notes: - -## ## code - -```console -sudo apt install tree -sudo apt install pandoc -y -sudo apt install rename -y -sudo apt install black -y -sudo apt install wget -y -npm i lebab -g -npm i prettier -g -npm i npm-recursive-install -g - -``` - -```console -black . - -prettier --write . -npm-recursive-install -``` - ---- - -# 11. Repo Utils Package - -## Description: my standard repo utis package - -> Notes: - -## ## code - -```console -npm i @bgoonz11/repoutils - -``` - ---- - -# 12. Unix Tree Package Usage - -## Description - -> Notes: - -## ## code - -```console -tree -d -I 'node_modules' - -tree -I 'node_modules' - -tree -f -I 'node_modules' > TREE.md - -tree -f -L 2 > README.md - -tree -f -I 'node_modules' > listing-path.md - -tree -f -I 'node_modules' -d > TREE.md - -tree -f > README.md - -``` - ---- - -# 13. Find & Replace string in file & folder names recursively - -## Description - -> Notes: - -## ## code - -```console - -find . -type f -exec rename 's/string1/string2/g' {} + - -find . -type d -exec rename 's/-master//g' {} + - -find . -type f -exec rename 's/\.download//g' {} + - -find . -type d -exec rename 's/-main//g' {} + - -rename 's/\.js\.download$/.js/' *.js\.download - -rename 's/\.html\.markdown$/.md/' *.html\.markdown - -find . -type d -exec rename 's/es6//g' {} + - -``` - ---- - -# 14. Remove double extensions - -## Description - -> Notes: - -## ## code - -```console -#!/bin/bash - -for file in *.md.md -do - mv "${file}" "${file%.md}" -done - -#!/bin/bash - -for file in *.html.html -do - mv "${file}" "${file%.html}" -done -``` - -```console - -#!/bin/bash - -for file in *.html.png -do - mv "${file}" "${file%.png}" -done - -for file in *.jpg.jpg -do - mv "${file}" "${file%.png}" -done - -``` - ---- - -# 15. Truncate folder names down to 12 characters - -## Description - -> Notes: - -## ## code - -```console - -for d in ./*; do mv $d ${d:0:12}; done - -``` - ---- - -# 16.Appendir.js - -## Description: combine the contents of every file in the contaning directory - -> Notes: this includes the contents of the file it's self... - -## ## code - -```js -// -//APPEND-DIR.js -const fs = require('fs'); -let cat = require('child_process').execSync('cat *').toString('UTF-8'); -fs.writeFile('output.md', cat, (err) => { - if (err) throw err; -}); -``` - ---- - -# 17. Replace space in filename with underscore - -## Description: followed by replace `'#' with '_'` in directory name - -> Notes: Can be re-purposed to find and replace any set of strings in file or folder names. - -## ## code - -```console -find . -name "* *" -type f | rename 's/_//g' - -find . -name "* *" -type d | rename 's/#/_/g' - -``` - ---- - -# 18. Filter & delete files by name and extension - -## Description - -> Notes: - -## ## code - -```console -find . -name '.bin' -type d -prune -exec rm -rf '{}' + - -find . -name '*.html' -type d -prune -exec rm -rf '{}' + - -find . -name 'nav-index' -type d -prune -exec rm -rf '{}' + - -find . -name 'node-gyp' -type d -prune -exec rm -rf '{}' + - -find . -name 'deleteme.txt' -type f -prune -exec rm -rf '{}' + - -find . -name 'right.html' -type f -prune -exec rm -rf '{}' + - -find . -name 'left.html' -type f -prune -exec rm -rf '{}' + - -``` - ---- - -# 19. Remove lines containing string - -## Description - -> Notes: Remove lines not containing `'.js'` - -```console - -sudo sed -i '/\.js/!d' ./*scrap2.md - -``` - -## ## code - -```console -sudo sed -i '/githubusercontent/d' ./*sandbox.md - -sudo sed -i '/githubusercontent/d' ./*scrap2.md - -sudo sed -i '/github\.com/d' ./*out.md - -sudo sed -i '/author/d' ./* - -``` - ---- - -# 20. Remove duplicate lines from a text file - -## Description - -> Notes: -> //...syntax of uniq...// -> $uniq [OPTION] [INPUT[OUTPUT]] -> The syntax of this is quite easy to understand. Here, INPUT refers to the input file in which repeated lines need to be filtered out and if INPUT isn't specified then uniq reads from the standard input. OUTPUT refers to the output file in which you can store the filtered output generated by uniq command and as in case of INPUT if OUTPUT isn't specified then uniq writes to the standard output. - -Now, let's understand the use of this with the help of an example. Suppose you have a text file named kt.txt which contains repeated lines that needs to be omitted. This can simply be done with uniq. - -## ## code - -```console -sudo apt install uniq -uniq -u input.txt output.txt - -``` - ---- - -# 21. Remove lines containing string - -## Description - -> Notes: - -## ## code - -```console -sudo sed -i '/githubusercontent/d' ./*sandbox.md - -sudo sed -i '/githubusercontent/d' ./*scrap2.md - -sudo sed -i '/github\.com/d' ./*out.md - ---- -title: add_days -tags: date,intermediate -firstSeen: 2020-10-28T16:19:04+02:00 -lastUpdated: 2020-10-28T16:19:04+02:00 ---- - -sudo sed -i '/title:/d' ./*output.md -sudo sed -i '/firstSeen/d' ./*output.md -sudo sed -i '/lastUpdated/d' ./*output.md -sudo sed -i '/tags:/d' ./*output.md - -sudo sed -i '/badstring/d' ./* - -sudo sed -i '/stargazers/d' ./repo.txt -sudo sed -i '/node_modules/d' ./index.html -sudo sed -i '/right\.html/d' ./index.html -sudo sed -i '/right\.html/d' ./right.html - -``` - ---- - -# 22. Zip directory excluding .git and node_modules all the way down (Linux) - -## Description - -> Notes: - -## ## code - -```console - -#!/bin/bash -TSTAMP=`date '+%Y%m%d-%H%M%S'` -zip -r $1.$TSTAMP.zip $1 -x "**.git/*" -x "**node_modules/*" `shift; echo $@;` - -printf "\nCreated: $1.$TSTAMP.zip\n" - -# usage: -# - zipdir thedir -# - zip thedir -x "**anotherexcludedsubdir/*" (important the double quotes to prevent glob expansion) - -# if in windows/git-bash, add 'zip' command this way: -# https://stackoverflow.com/a/55749636/1482990 - -``` - ---- - -# 23. Delete files containing a certain string - -## Description - -> Notes: - -## ## code - -```console -find . | xargs grep -l www.redhat.com | awk '{print "rm "$1}' > doit.sh -vi doit.sh // check for murphy and his law -source doit.sh - -``` - ---- - -# 24 - -## Description - -> Notes: - -## ## code - -```console - -#!/bin/sh - -# find ./ | grep -i "\.*$" > files -find ./ | sed -E -e 's/([^ ]+[ ]+){8}//' | grep -i "\.*$"> files -listing="files" - -out="" - -html="sitemap.html" -out="basename $out.html" -html="sitemap.html" -cmd() { - - echo ' ' - echo ' ' - echo ' ' - - echo ' ' - - echo ' ' - echo ' ' - echo ' ' - echo ' ' - - echo " directory " - echo ' ' - echo ' ' - echo "" - echo ' ' - echo ' ' - - echo ' ' - - echo "" - - # continue with the HTML stuff - - echo "" - - echo "" - - echo " " - - echo " " - - echo " " - -} - -cmd $listing --sort=extension > > $html - -``` - ---- - -# 25. Index of Iframes - -## Description: Creates an index.html file that contains all the files in the working directory or any of it's sub folders as iframes instead of anchor tags - -> Notes: Useful Follow up Code: - -```console - -``` - -## ## code - -```console - -#!/bin/sh - -# find ./ | grep -i "\.*$" > files -find ./ | sed -E -e 's/([^ ]+[ ]+){8}//' | grep -i "\.*$"> files -listing="files" - -out="" - -html="index.html" -out="basename $out.html" -html="index.html" -cmd() { - - echo ' ' - echo ' ' - echo ' ' - - echo ' ' - - echo ' ' - echo ' ' - echo ' ' - echo ' ' - - echo " directory " - - echo "" - echo ' ' - echo ' ' - - echo ' ' - - echo "" - - # continue with the HTML stuff - - echo "" - - echo "" - - echo " " - - echo " " - - echo " " - -} - -cmd $listing --sort=extension > > $html - -``` - ---- - -# 26. Filter Corrupted Git Repo For Troublesome File - -## Description - -> Notes: - -## ## code - -```console - -git filter-branch --index-filter 'git rm -r --cached --ignore-unmatch assets/_index.html' HEAD - -``` - ---- - -# 27. OVERWRITE LOCAL CHANGES - -## Description - -Important: If you have any local changes, they will be lost. With or without --hard option, any local commits that haven't been pushed will be lost.[*] -If you have any files that are not tracked by Git (e.g. uploaded user content), these files will not be affected. - -> Notes: -> First, run a fetch to update all origin/ refs to latest: - -## ## code - -```console - -git fetch --all -# Backup your current branch: - -git branch backup-master -# Then, you have two options: - -git reset --hard origin/master -# OR If you are on some other branch: - -git reset --hard origin/ -# Explanation: -# git fetch downloads the latest from remote without trying to merge or rebase anything. - -# Then the git reset resets the master branch to what you just fetched. The --hard option changes all the files in your working tree to match the files in origin/master -git fetch --all -git reset --hard origin/master - -``` - ---- - -# 28. Remove Submodules - -## Description: To remove a submodule you need to - -> Notes: - -> Delete the relevant section from the .gitmodules file. -> Stage the .gitmodules changes git add .gitmodules -> Delete the relevant section from .git/config. -> Run git rm --cached path_to_submodule (no trailing slash). -> Run rm -rf .git/modules/path_to_submodule (no trailing slash). -> Commit git commit -m "Removed submodule " -> Delete the now untracked submodule files rm -rf path_to_submodule - -## ## code - -```console -git submodule deinit -``` - ---- - -# 29. GET GISTS - -## Description - -> Notes: - -## ## code - -```console -sudo apt install wget - -wget -q -O - https://api.github.com/users/bgoonz/gists | grep raw_url | awk -F\" '{print $4}' | xargs -n3 wget - -wget -q -O - https://api.github.com/users/amitness/gists | grep raw_url | awk -F\" '{print $4}' | xargs -n3 wget - -wget -q -O - https://api.github.com/users/drodsou/gists | grep raw_url | awk -F\" '{print $4}' | xargs -n1 wget - -wget -q -O - https://api.github.com/users/thomasmb/gists | grep raw_url | awk -F\" '{print $4}' | xargs -n1 wget - -``` - ---- - -# 30. Remove Remote OriginL - -## Description - -> Notes: - -## ## code - -```console - -git remote remove origin - -``` - ---- - -# 31. just clone .git folder - -## Description - -> Notes: - -## ## code - -```console - -git clone --bare --branch=master --single-branch https://github.com/bgoonz/My-Web-Dev-Archive.git - -``` - ---- - -# 32. Undo recent pull request - -## Description - -> Notes: - -## ## code - -```console - -git reset --hard master@{"10 minutes ago"} - -``` - ---- - -# 33. Lebab - -## Description: ES5 --> ES6 - -> Notes: - -## ## code - -```console -# Safe: - - lebab --replace ./ --transform arrow - lebab --replace ./ --transform arrow-return - lebab --replace ./ --transform for-of - lebab --replace ./ --transform for-each - lebab --replace ./ --transform arg-rest - lebab --replace ./ --transform arg-spread - lebab --replace ./ --transform obj-method - lebab --replace ./ --transform obj-shorthand - lebab --replace ./ --transform multi-var - -# ALL: - -lebab --replace ./ --transform obj-method -lebab --replace ./ --transform class -lebab --replace ./ --transform arrow -lebab --replace ./ --transform let -lebab --replace ./ --transform arg-spread -lebab --replace ./ --transform arg-rest -lebab --replace ./ --transform for-each -lebab --replace ./ --transform for-of -lebab --replace ./ --transform commonjs -lebab --replace ./ --transform exponent -lebab --replace ./ --transform multi-var -lebab --replace ./ --transform template -lebab --replace ./ --transform default-param -lebab --replace ./ --transform destruct-param -lebab --replace ./ --transform includes -lebab --replace ./ --transform obj-method -lebab --replace ./ --transform class -lebab --replace ./ --transform arrow -lebab --replace ./ --transform arg-spread -lebab --replace ./ --transform arg-rest -lebab --replace ./ --transform for-each -lebab --replace ./ --transform for-of -lebab --replace ./ --transform commonjs -lebab --replace ./ --transform exponent -lebab --replace ./ --transform multi-var -lebab --replace ./ --transform template -lebab --replace ./ --transform default-param -lebab --replace ./ --transform destruct-param -lebab --replace ./ --transform includes - -``` - ---- - -# 34. Troubleshoot Ubuntu Input/Output Error - -## Description: Open Powershell as Administrator - -> Notes: - -## ## code - -``` - - wsl.exe --shutdown - - Get-Service LxssManager | Restart-Service - -``` - ---- - -# 35. Export Medium as Markdown - -## Description - -> Notes: - -## ## code - -```console -npm i mediumexporter -g - -mediumexporter https://medium.com/codex/fundamental-data-structures-in-javascript-8f9f709c15b4 > ds.md - -``` - ---- - -# 36. Delete files in violation of a given size range (100MB for git) - -## Description - -> Notes: - -## ## code - -```console - -find . -size +75M -a -print -a -exec rm -f {} \; - -find . -size +98M -a -print -a -exec rm -f {} \; - -``` - ---- - -# 37. download all links of given file type - -## Description - -> Notes: - -## ## code - -```console - -wget -r -A.pdf https://overapi.com/git - -``` - ---- - -# 38. Kill all node processes - -## Description - -> Notes: - -## ## code - -```console -killall -s KILL node - -``` - ---- - -# 39. Remove string from file names recursively - -## Description: In the example below I am using this command to remove the string "-master" from all file names in the working directory and all of it's sub directories - -## ## code - -```console -find -type f -exec sed -i 's/ / /g' {} + - -find . -type f -exec rename 's/-master//g' {} + - -``` - -> Notes: The same could be done for folder names by changing the _-type f_ flag (for file) to a _-type d_ flag (for directory) - -```console -find -type d -exec sed -i 's/ / /g' {} + - -find . -type d -exec rename 's/-master//g' {} + - -``` - ---- - -# 40. Remove spaces from file and folder names recursively - -## Description: replaces spaces in file and folder names with an `_` underscore - -> Notes: need to run `sudo apt install rename` to use this command - -## ## code - -```console - -find . -name "* *" -type d | rename 's/ /_/g' -find . -name "* *" -type f | rename 's/ /_/g' -``` - ---- - -# 41. Zip Each subdirectories in a given directory into their own zip file - -## Description - -> Notes: - -## ## code - -```console -for i in */; do zip -r "${i%/}.zip" "$i"; done - -``` - ---- - -# 90 - -# 91. Unzip PowerShell - -## Description - -> Notes: - -## ## code - -``` - -PARAM ( - [string] $ZipFilesPath = "./", - [string] $UnzipPath = "./RESULT" -) - -$Shell = New-Object -com Shell.Application -$Location = $Shell.NameSpace($UnzipPath) - -$ZipFiles = Get-Childitem $ZipFilesPath -Recurse -Include *.ZIP - -$progress = 1 -foreach ($ZipFile in $ZipFiles) { - Write-Progress -Activity "Unzipping to $($UnzipPath)" -PercentComplete (($progress / ($ZipFiles.Count + 1)) * 100) -CurrentOperation $ZipFile.FullName -Status "File $($Progress) of $($ZipFiles.Count)" - $ZipFolder = $Shell.NameSpace($ZipFile.fullname) - - $Location.Copyhere($ZipFolder.items(), 1040) # 1040 - No msgboxes to the user - https://msdn.microsoft.com/library/bb787866%28VS.85%29.aspx - $progress++ -} - -``` - ---- - -# 92. return to bash from zsh - -## Description - -> Notes: - -## ## code - -```console - sudo apt --purge remove zsh - -``` - ---- - -# 93. Symbolic Link - -## Description: to working directory - -> Notes: - -## ## code - -```console - -ln -s "$(pwd)" ~/NameOfLink - -ln -s "$(pwd)" ~/Downloads - -``` - ---- - -# 94. auto generate readme - -## Description: rename existing readme to blueprint.md - -> Notes: - -## ## code - -```console - -npx @appnest/readme generate - -``` - ---- - -# 95. Log into postgres - -## Description - -> Notes: - -## ## code - -```console -sudo -u postgres psql -``` - ---- - -## Technologies Used - -| URL | | -| -------------------- | -------------------------------------------------------- | -| Miscellaneous | webpack ; Prism | -| Widgets | Facebook ; AddThis | -| Analytics | Moat ; Google Analytics ; Google Ads Conversion Tracking | -| Comment systems | Facebook API & REPL.it Database | -| Security | Netlify Access | -| Font scripts | Google Font API | -| CDN | Unpkg ; jsDelivr ; jQuery CDN ; Netlify | -| Marketing automation | MailChimp | -| Advertising | Google AdSense | -| Tag managers | Google Tag Manager | -| Live chat | Smartsupp ; LiveChat : Mesibo API | -| JavaScript libraries | Lodash ; Dojo ; core-js ; jQuery | - - - ---- - -# 96. URL To Subscribe To YouTube Channel - -## Description - -> Notes: - -## ## code - -```txt - -https://www.youtube.com/channel/UC1HDa0wWnIKUf-b4yY9JecQ?sub_confirmation=1 - -``` - ---- - -# 97. Embed Repl.it In Medium Post - -## ## code - -```txt - -https://repl.it/@bgoonz/Data-Structures-Algos-Codebase?lite=true&referrer=https%3A%2F%2Fbryanguner.medium.com - -https://repl.it/@bgoonz/node-db1-project?lite=true&referrer=https%3A%2F%2Fbryanguner.medium.com - -https://repl.it/@bgoonz/interview-prac?lite=true&referrer=https%3A%2F%2Fbryanguner.medium.com - -https://repl.it/@bgoonz/Database-Prac?lite=true&referrer=https%3A%2F%2Fbryanguner.medium.com - -``` - ---- - -# 98 - -## Description - -> Notes: - -## ## code - -```console - -find . -name *right.html -type f -exec sed -i 's/target="_parent"//g' {} + - -find . -name *right.html -type f -exec sed -i 's/target="_parent"//g' {} + - -``` - -
- ---- - -![Preview](https://i.imgur.com/nieW1vp.png) - -## Wiki Nav - -- [Home](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki) -- [add copy to code blocks.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/add-copy-to-code-blocks.md) -- [Add site search w algolia.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/Add-site-search-w-algolia.md) -- [adding mailing list.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/adding-mailing-list.md) -- [Adding search 2 gatsby site.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/Adding-search-2-gatsby-site.md) -- [awesome.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/awesome.md) -- [broken links.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/broken-links.md) -- [configure custom domain.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/configure-custom-domain.md) -- [contentauthoring.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/contentauthoring.md) -- [full text search w lunar.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/full-text-search-w-lunar.md) -- [inject 4.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/inject-4.md) -- [inject3.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/inject3.md) -- [inject4.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/inject4.md) -- [injected content part2.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/injected-content-part2.md) -- [injected js part4.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/injected-js-part4.md) -- [injected part3.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/injected-part3.md) -- [links 2 embed.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/links-2-embed.md) -- [links to remember](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/links-to-remember) -- [Netlify Injected Content](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/Netlify-Injected-Content) -- [old version of index.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/old-version-of-index.md) -- [optimize vscode.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/optimize-vscode.md) -- [possibly useful snippets.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/possibly-useful-snippets.md) -- [privacy policy.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/privacy-policy.md) -- [random stuff.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/random-stuff.md) -- [random.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/random.md) -- [ref type](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/ref-type) -- [SEO.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/SEO.md) -- [stable points.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/stable-points.md) -- [tech used.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/tech-used.md) -- [Technologies Used.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/Technologies-Used.md) -- [THINGS TO EMBED.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/THINGS-TO-EMBED.md) -- [validation report.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/validation-report.md) -- [web archive.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/web-archive.md) -- [wordpress vs headless cms.md](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki/wordpress-vs-headless-cms.md) - ---- - -## Dependencies - -
- Click to expand! - -[![@algolia**](https://avatars.githubusercontent.com/u/2034458?s=40&v=4)](https://github.com/algolia)[algolia / algoliasearch-client-javascript](https://github.com/algolia/algoliasearch-client-javascript)@algolia/client-search -`^ 4.10.3` - -[![@algolia**](https://avatars.githubusercontent.com/u/2034458?s=40&v=4)](https://github.com/algolia)[algolia / algoliasearch-client-javascript](https://github.com/algolia/algoliasearch-client-javascript)@algolia/client-common -`4.10.5` - -![@ghost**](https://avatars.githubusercontent.com/u/10137?s=40&v=4)@algolia/requester-common -`4.10.5` - -[![@algolia**](https://avatars.githubusercontent.com/u/2034458?s=40&v=4)](https://github.com/algolia)[algolia / algoliasearch-client-javascript](https://github.com/algolia/algoliasearch-client-javascript)@algolia/transporter -`4.10.5` - -[![@stackbit**](https://avatars.githubusercontent.com/u/38996451?s=40&v=4)](https://github.com/stackbit)[stackbit / gatsby-plugin-menus](https://github.com/stackbit/gatsby-plugin-menus)@stackbit/gatsby-plugin-menus -`0.0.4` - -[![@facebook**](https://avatars.githubusercontent.com/u/69631?s=40&v=4)](https://github.com/facebook)[facebook / jest](https://github.com/facebook/jest)babel-jest -`^ 24.7.1` - -[![@gatsbyjs**](https://avatars.githubusercontent.com/u/12551863?s=40&v=4)](https://github.com/gatsbyjs)[gatsbyjs / gatsby](https://github.com/gatsbyjs/gatsby)babel-preset-gatsby -`^ 0.1.11` - -[![@gatsbyjs**](https://avatars.githubusercontent.com/u/12551863?s=40&v=4)](https://github.com/gatsbyjs)[gatsbyjs / gatsby](https://github.com/gatsbyjs/gatsby) `^ 2.5.0` - -[![@keyz**](https://avatars.githubusercontent.com/u/2268452?s=40&u=c3f56fe1d943474ffe4577a82ad79c1a79d7eb6e&v=4)](https://github.com/keyz)[keyz / identity-obj-proxy](https://github.com/keyz/identity-obj-proxy) `^ 3.0.0` - -[![@facebook**](https://avatars.githubusercontent.com/u/69631?s=40&v=4)](https://github.com/facebook)[facebook / jest](https://github.com/facebook/jest) `^ 24.7.1` - -[![@lodash**](https://avatars.githubusercontent.com/u/2565403?s=40&v=4)](https://github.com/lodash)[lodash / lodash](https://github.com/lodash/lodash) `^ 4.17.11` - -[![@facebook**](https://avatars.githubusercontent.com/u/69631?s=40&v=4)](https://github.com/facebook)[facebook / react](https://github.com/facebook/react)react-test-renderer -`^ 16.8.6` - -[![@getkirby-v2**](https://avatars.githubusercontent.com/u/6985611?s=40&v=4)](https://github.com/getkirby-v2)[getkirby-v2 / algolia-plugin](https://github.com/getkirby-v2/algolia-plugin)algolia -`0.0.0` - -[![@ecomfe**](https://avatars.githubusercontent.com/u/2268460?s=40&v=4)](https://github.com/ecomfe)[ecomfe / babel-runtime](https://github.com/ecomfe/babel-runtime) `6.26.0` - -[![@paulmillr**](https://avatars.githubusercontent.com/u/574696?s=40&u=7f4396380d73af134b898c8eaf7bb171f448f40f&v=4)](https://github.com/paulmillr)[paulmillr / chokidar](https://github.com/paulmillr/chokidar) `3.4.0` - -[![@DefinitelyTyped**](https://avatars.githubusercontent.com/u/3637556?s=40&v=4)](https://github.com/DefinitelyTyped)[DefinitelyTyped / DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)@types/node -`^ 13` - -[![@micromatch**](https://avatars.githubusercontent.com/u/26890389?s=40&v=4)](https://github.com/micromatch)[micromatch / anymatch](https://github.com/micromatch/anymatch) `~ 3.1.1` - -[![@micromatch**](https://avatars.githubusercontent.com/u/26890389?s=40&v=4)](https://github.com/micromatch)[micromatch / braces](https://github.com/micromatch/braces) `~ 3.0.2` - -[![@chaijs**](https://avatars.githubusercontent.com/u/1515293?s=40&v=4)](https://github.com/chaijs)[chaijs / chai](https://github.com/chaijs/chai) `^ 4.2` - -[![@microsoft**](https://avatars.githubusercontent.com/u/6154722?s=40&v=4)](https://github.com/microsoft)[microsoft / dtslint](https://github.com/microsoft/dtslint) `^ 3.3.0` - -[![@eslint**](https://avatars.githubusercontent.com/u/6019716?s=40&v=4)](https://github.com/eslint)[eslint / eslint](https://github.com/eslint/eslint) `^ 6.6.0` - -[![@fsevents**](https://avatars.githubusercontent.com/u/48760001?s=40&v=4)](https://github.com/fsevents)[fsevents / fsevents](https://github.com/fsevents/fsevents) `~ 2.1.2` - -[![@gulpjs**](https://avatars.githubusercontent.com/u/6200624?s=40&v=4)](https://github.com/gulpjs)[gulpjs / glob-parent](https://github.com/gulpjs/glob-parent) `~ 5.1.0` - -[![@sindresorhus**](https://avatars.githubusercontent.com/u/170270?s=40&u=34acd557a042ac478d273a4621570cadb6b0bd89&v=4)](https://github.com/sindresorhus)[sindresorhus / is-binary-path](https://github.com/sindresorhus/is-binary-path) `~ 2.1.0` - -[![@micromatch**](https://avatars.githubusercontent.com/u/26890389?s=40&v=4)](https://github.com/micromatch)[micromatch / is-glob](https://github.com/micromatch/is-glob) `~ 4.0.1` - -[![@mochajs**](https://avatars.githubusercontent.com/u/8770005?s=40&v=4)](https://github.com/mochajs)[mochajs / mocha](https://github.com/mochajs/mocha) `^ 7.0.0` - -[![@jonschlinkert**](https://avatars.githubusercontent.com/u/383994?s=40&u=335f06277f72722162e89bd5516849f2e82f37cf&v=4)](https://github.com/jonschlinkert)[jonschlinkert / normalize-path](https://github.com/jonschlinkert/normalize-path) `~ 3.0.0` - -[![@istanbuljs**](https://avatars.githubusercontent.com/u/13523395?s=40&v=4)](https://github.com/istanbuljs)[istanbuljs / nyc](https://github.com/istanbuljs/nyc) `^ 15.0.0` - -[![@paulmillr**](https://avatars.githubusercontent.com/u/574696?s=40&u=7f4396380d73af134b898c8eaf7bb171f448f40f&v=4)](https://github.com/paulmillr)[paulmillr / readdirp](https://github.com/paulmillr/readdirp) `~ 3.4.0` - -[![@isaacs**](https://avatars.githubusercontent.com/u/9287?s=40&u=60a280618307ae965cadbe52da4baa7e351c848c&v=4)](https://github.com/isaacs)[isaacs / rimraf](https://github.com/isaacs/rimraf) `^ 3.0.0` - -[![@sinonjs**](https://avatars.githubusercontent.com/u/6570253?s=40&v=4)](https://github.com/sinonjs)[sinonjs / sinon](https://github.com/sinonjs/sinon) `^ 9.0.1` - -[![@domenic**](https://avatars.githubusercontent.com/u/617481?s=40&v=4)](https://github.com/domenic)[domenic / sinon-chai](https://github.com/domenic/sinon-chai) `^ 3.3.0` - -[![@anodynos**](https://avatars.githubusercontent.com/u/856453?s=40&v=4)](https://github.com/anodynos)[anodynos / upath](https://github.com/anodynos/upath) `^ 1.2.0` - -[![@JedWatson**](https://avatars.githubusercontent.com/u/872310?s=40&u=9548676d01f104232ee42e5ac0d985db77e6a5a4&v=4)](https://github.com/JedWatson)[JedWatson / classnames](https://github.com/JedWatson/classnames) `2.2.6` - -[![@bestiejs**](https://avatars.githubusercontent.com/u/802850?s=40&v=4)](https://github.com/bestiejs)[bestiejs / benchmark.js](https://github.com/bestiejs/benchmark.js)benchmark -`^ 1.0.0` - -[![@browserify**](https://avatars.githubusercontent.com/u/6320506?s=40&v=4)](https://github.com/browserify)[browserify / browserify](https://github.com/browserify/browserify) `^ 14.1.0` - -[![@mochajs**](https://avatars.githubusercontent.com/u/8770005?s=40&v=4)](https://github.com/mochajs)[mochajs / mocha](https://github.com/mochajs/mocha) `^ 2.1.0` - -[![@jeromedecoster**](https://avatars.githubusercontent.com/u/158071?s=40&u=470a733fdc34a9fedab18ae4cf5109d2ea357425&v=4)](https://github.com/jeromedecoster)[jeromedecoster / opn-cli](https://github.com/jeromedecoster/opn-cli) `^ 3.1.0` - -[![@documentationjs**](https://avatars.githubusercontent.com/u/11415556?s=40&v=4)](https://github.com/documentationjs)[documentationjs / documentation](https://github.com/documentationjs/documentation) `^ 13.2.5` - -[![@babel**](https://avatars.githubusercontent.com/u/9637642?s=40&v=4)](https://github.com/babel)[babel / babel](https://github.com/babel/babel)@babel/core -`7.12.3` - -[Cloudfare-Backup](https://bgoonz-blog-2-0.pages.dev/) ↞↠ Search Website: [search](https://www.algolia.com/realtime-search-demo/web-dev-resource-hub-9e6b8aa8-6106-44c5-9f59-ff3f9531abd4) ↞↠ [Backup Repo Deploy](https://bgoonzblog20-backup.netlify.app/#gsc.tab=0) ↞↠ [Github pages](https://bgoonz.github.io/BGOONZ_BLOG_2.0/) ↞↠ [Go To Site Wiki](https://github.com/bgoonz/BGOONZ_BLOG_2.0/wiki) - -
- ---- - -## Docs Structure - -
- Docs Structure - -``` -├── blog -│ ├── 300-react-questions.md -│ ├── awesome-graphql.md -│ ├── big-o-complexity.md -│ ├── blog-archive.md -│ ├── blogwcomments.md -│ ├── data-structures.md -│ ├── flow-control-in-python.md -│ ├── functions-in-python.md -│ ├── git-gateway.md -│ ├── index.md -│ ├── interview-questions-js.md -│ ├── netlify-cms.md -│ ├── platform-docs.md -│ ├── python-for-js-dev.md -│ ├── python-resources.md -│ ├── web-dev-trends.md -│ └── web-scraping.md -├── docs -│ ├── about -│ │ ├── eng-portfolio.md -│ │ ├── ideas-for-this-website.md -│ │ ├── index.md -│ │ ├── intrests.md -│ │ ├── job-search.md -│ │ └── resume.md -│ ├── articles -│ │ ├── basic-web-dev.md -│ │ ├── buffers.md -│ │ ├── dev-dep.md -│ │ ├── event-loop.md -│ │ ├── fs-module.md -│ │ ├── how-the-web-works.md -│ │ ├── http.md -│ │ ├── index.md -│ │ ├── install.md -│ │ ├── intro.md -│ │ ├── modules.md -│ │ ├── nextjs.md -│ │ ├── node-api-express.md -│ │ ├── node-cli-args.md -│ │ ├── node-common-modules.md -│ │ ├── node-env-variables.md -│ │ ├── node-js-language.md -│ │ ├── node-package-manager.md -│ │ ├── node-repl.md -│ │ ├── node-run-cli.md -│ │ ├── nodejs.md -│ │ ├── nodevsbrowser.md -│ │ ├── npm.md -│ │ ├── npx.md -│ │ ├── os-module.md -│ │ ├── reading-files.md -│ │ ├── semantic-html.md -│ │ ├── semantic.md -│ │ ├── the-uniform-resource-locator-(url).md -│ │ ├── understanding-firebase.md -│ │ ├── v8.md -│ │ ├── web-standards-checklist.md -│ │ ├── webdev-tools.md -│ │ └── writing-files.md -│ ├── audio -│ │ ├── audio-feature-extraction.md -│ │ ├── audio.md -│ │ ├── dfft.md -│ │ ├── discrete-fft.md -│ │ ├── dtw-python-explained.md -│ │ ├── dynamic-time-warping.md -│ │ ├── index.md -│ │ └── web-audio-api.md -│ ├── career -│ │ ├── dev-interview.md -│ │ ├── index.md -│ │ ├── interview-dos-n-donts.md -│ │ └── job-boards.md -│ ├── community -│ │ ├── an-open-letter-2-future-developers.md -│ │ ├── index.md -│ │ └── video-chat.md -│ ├── content -│ │ ├── algo.md -│ │ ├── archive.md -│ │ ├── gatsby-Queries-Mutations.md -│ │ ├── history-api.md -│ │ ├── index.md -│ │ ├── main-projects.md -│ │ └── trouble-shooting.md -│ ├── data-structures -│ │ └── index.md -│ ├── docs -│ │ ├── appendix.md -│ │ ├── art-of-command-line.md -│ │ ├── bash.md -│ │ ├── content.md -│ │ ├── css.md -│ │ ├── data-structures-docs.md -│ │ ├── es-6-features.md -│ │ ├── git-reference.md -│ │ ├── git-repos.md -│ │ ├── html-spec.md -│ │ ├── index.md -│ │ ├── markdown.md -│ │ ├── no-whiteboarding.md -│ │ ├── node-docs-complete.md -│ │ ├── node-docs-full.md -│ │ ├── regex-in-js.md -│ │ └── sitemap.md -│ ├── faq -│ │ ├── contact.md -│ │ ├── index.md -│ │ └── plug-ins.md -│ ├── gists.md -│ ├── index.md -│ ├── interact -│ │ ├── callstack-visual.md -│ │ ├── clock.md -│ │ ├── index.md -│ │ ├── jupyter-notebooks.md -│ │ ├── other-sites.md -│ │ └── video-chat.md -│ ├── interview -│ │ ├── index.md -│ │ ├── job-search-nav.md -│ │ └── review-concepts.md -│ ├── javascript -│ │ ├── arrow-functions.md -│ │ ├── asyncjs.md -│ │ ├── await-keyword.md -│ │ ├── bigo.md -│ │ ├── clean-code.md -│ │ ├── constructor-functions.md -│ │ ├── index.md -│ │ ├── promises.md -│ │ ├── review.md -│ │ └── this-is-about-this.md -│ ├── leetcode -│ │ └── index.md -│ ├── privacy-policy.md -│ ├── projects -│ │ ├── embeded-websites.md -│ │ ├── index.md -│ │ ├── list-of-projects.md -│ │ ├── mini-projects.md -│ │ └── my-websites.md -│ ├── python -│ │ ├── at-length.md -│ │ ├── cheat-sheet.md -│ │ ├── comprehensive-guide.md -│ │ ├── examples.md -│ │ ├── flow-control.md -│ │ ├── functions.md -│ │ ├── google-sheets-api.md -│ │ ├── index.md -│ │ ├── intro-for-js-devs.md -│ │ ├── python-ds.md -│ │ └── snippets.md -│ ├── quick-reference -│ │ ├── Emmet.md -│ │ ├── all-emojis.md -│ │ ├── create-react-app.md -│ │ ├── git-bash.md -│ │ ├── git-tricks.md -│ │ ├── google-firebase.md -│ │ ├── heroku-error-codes.md -│ │ ├── index.md -│ │ ├── installation.md -│ │ ├── markdown-dropdowns.md -│ │ ├── minifiction.md -│ │ ├── new-repo-instructions.md -│ │ ├── psql-setup.md -│ │ ├── pull-request-rubric.md -│ │ ├── quick-links.md -│ │ ├── topRepos.md -│ │ ├── understanding-path.md -│ │ └── vscode-themes.md -│ ├── react -│ │ ├── ajax-n-apis.md -│ │ ├── cheatsheet.md -│ │ ├── createReactApp.md -│ │ ├── demo.md -│ │ ├── dont-use-index-as-keys.md -│ │ ├── index.md -│ │ ├── jsx.md -│ │ ├── react-docs.md -│ │ ├── react-in-depth.md -│ │ ├── react2.md -│ │ └── render-elements.md -│ ├── reference -│ │ ├── awesome-lists.md -│ │ ├── awesome-static.md -│ │ ├── bash-commands.md -│ │ ├── bookmarks.md -│ │ ├── embed-the-web.md -│ │ ├── github-search.md -│ │ ├── google-cloud.md -│ │ ├── how-2-reinstall-npm.md -│ │ ├── how-to-kill-a-process.md -│ │ ├── index.md -│ │ ├── installing-node.md -│ │ ├── intro-to-nodejs.md -│ │ ├── notes-template.md -│ │ ├── psql.md -│ │ ├── resources.md -│ │ ├── vscode.md -│ │ └── web-api's.md -│ ├── search.md -│ ├── sitemap.md -│ ├── tips -│ │ ├── array-methods.md -│ │ ├── index.md -│ │ └── insert-into-array.md -│ ├── tools -│ │ ├── Archive.md -│ │ ├── data-structures.md -│ │ ├── dev-utilities.md -│ │ ├── index.md -│ │ └── markdown-html.md -│ └── tutorials -│ ├── enviorment-setup.md -│ └── index.md -├── index.md -├── privacy-policy.md -├── readme.md -├── showcase.md -└── tree.md - -23 directories, 202 files - -``` - -# SITEMAP - -- [https://bgoonz-blog.netlify.app/](https://bgoonz-blog.netlify.app/) -- [https://bgoonz-blog.netlify.app/admin](https://bgoonz-blog.netlify.app/admin) -- [https://bgoonz-blog.netlify.app/blog](https://bgoonz-blog.netlify.app/blog) -- [https://bgoonz-blog.netlify.app/blog/10-essential-react-interview-questions](https://bgoonz-blog.netlify.app/blog/10-essential-react-interview-questions) -- [https://bgoonz-blog.netlify.app/blog/300-react-questions](https://bgoonz-blog.netlify.app/blog/300-react-questions) -- [https://bgoonz-blog.netlify.app/blog/adding-css-to-your-html](https://bgoonz-blog.netlify.app/blog/adding-css-to-your-html) -- [https://bgoonz-blog.netlify.app/blog/awesome-graphql](https://bgoonz-blog.netlify.app/blog/awesome-graphql) -- [https://bgoonz-blog.netlify.app/blog/beginners-guide-to-python](https://bgoonz-blog.netlify.app/blog/beginners-guide-to-python) -- [https://bgoonz-blog.netlify.app/blog/big-o-complexity](https://bgoonz-blog.netlify.app/blog/big-o-complexity) -- [https://bgoonz-blog.netlify.app/blog/blog-archive](https://bgoonz-blog.netlify.app/blog/blog-archive) -- [https://bgoonz-blog.netlify.app/blog/code-playgrounds-of-2021](https://bgoonz-blog.netlify.app/blog/code-playgrounds-of-2021) -- [https://bgoonz-blog.netlify.app/blog/data-structures](https://bgoonz-blog.netlify.app/blog/data-structures) -- [https://bgoonz-blog.netlify.app/blog/data-structures-algorithms-resources](https://bgoonz-blog.netlify.app/blog/data-structures-algorithms-resources) -- [https://bgoonz-blog.netlify.app/blog/deploy-react-app-to-heroku](https://bgoonz-blog.netlify.app/blog/deploy-react-app-to-heroku) -- [https://bgoonz-blog.netlify.app/blog/embedding-media-in-html](https://bgoonz-blog.netlify.app/blog/embedding-media-in-html) -- [https://bgoonz-blog.netlify.app/blog/eslint-rules](https://bgoonz-blog.netlify.app/blog/eslint-rules) -- [https://bgoonz-blog.netlify.app/blog/event-handeling](https://bgoonz-blog.netlify.app/blog/event-handeling) -- [https://bgoonz-blog.netlify.app/blog/expressjs-apis](https://bgoonz-blog.netlify.app/blog/expressjs-apis) -- [https://bgoonz-blog.netlify.app/blog/file-system-route-api](https://bgoonz-blog.netlify.app/blog/file-system-route-api) -- [https://bgoonz-blog.netlify.app/blog/flow-control-in-python](https://bgoonz-blog.netlify.app/blog/flow-control-in-python) -- [https://bgoonz-blog.netlify.app/blog/front-end-interview-questions-part-2](https://bgoonz-blog.netlify.app/blog/front-end-interview-questions-part-2) -- [https://bgoonz-blog.netlify.app/blog/functions-in-python](https://bgoonz-blog.netlify.app/blog/functions-in-python) -- [https://bgoonz-blog.netlify.app/blog/gatsby-cli](https://bgoonz-blog.netlify.app/blog/gatsby-cli) -- [https://bgoonz-blog.netlify.app/blog/git-gateway](https://bgoonz-blog.netlify.app/blog/git-gateway) -- [https://bgoonz-blog.netlify.app/blog/google-analytics](https://bgoonz-blog.netlify.app/blog/google-analytics) -- [https://bgoonz-blog.netlify.app/blog/grep-in-linuz](https://bgoonz-blog.netlify.app/blog/grep-in-linuz) -- [https://bgoonz-blog.netlify.app/blog/hoisting](https://bgoonz-blog.netlify.app/blog/hoisting) -- [https://bgoonz-blog.netlify.app/blog/htt-requests](https://bgoonz-blog.netlify.app/blog/htt-requests) -- [https://bgoonz-blog.netlify.app/blog/interview-questions-js](https://bgoonz-blog.netlify.app/blog/interview-questions-js) -- [https://bgoonz-blog.netlify.app/blog/interview-questions-js-p2](https://bgoonz-blog.netlify.app/blog/interview-questions-js-p2) -- [https://bgoonz-blog.netlify.app/blog/interview-questions-js-p3](https://bgoonz-blog.netlify.app/blog/interview-questions-js-p3) -- [https://bgoonz-blog.netlify.app/blog/intro-01-data-structures](https://bgoonz-blog.netlify.app/blog/intro-01-data-structures) -- [https://bgoonz-blog.netlify.app/blog/intro-to-markdown](https://bgoonz-blog.netlify.app/blog/intro-to-markdown) -- [https://bgoonz-blog.netlify.app/blog/jsx-in-depth](https://bgoonz-blog.netlify.app/blog/jsx-in-depth) -- [https://bgoonz-blog.netlify.app/blog/netlify-cms](https://bgoonz-blog.netlify.app/blog/netlify-cms) -- [https://bgoonz-blog.netlify.app/blog/passing-arguments-to-a-callback-in-js](https://bgoonz-blog.netlify.app/blog/passing-arguments-to-a-callback-in-js) -- [https://bgoonz-blog.netlify.app/blog/platform-docs](https://bgoonz-blog.netlify.app/blog/platform-docs) -- [https://bgoonz-blog.netlify.app/blog/psql-cheat-sheet](https://bgoonz-blog.netlify.app/blog/psql-cheat-sheet) -- [https://bgoonz-blog.netlify.app/blog/python-for-js-dev](https://bgoonz-blog.netlify.app/blog/python-for-js-dev) -- [https://bgoonz-blog.netlify.app/blog/python-quiz](https://bgoonz-blog.netlify.app/blog/python-quiz) -- [https://bgoonz-blog.netlify.app/blog/python-resources](https://bgoonz-blog.netlify.app/blog/python-resources) -- [https://bgoonz-blog.netlify.app/blog/react-fragments](https://bgoonz-blog.netlify.app/blog/react-fragments) -- [https://bgoonz-blog.netlify.app/blog/react-semantics](https://bgoonz-blog.netlify.app/blog/react-semantics) -- [https://bgoonz-blog.netlify.app/blog/react-state](https://bgoonz-blog.netlify.app/blog/react-state) -- [https://bgoonz-blog.netlify.app/blog/useful-stock-images](https://bgoonz-blog.netlify.app/blog/useful-stock-images) -- [https://bgoonz-blog.netlify.app/blog/using-the-dom](https://bgoonz-blog.netlify.app/blog/using-the-dom) -- [https://bgoonz-blog.netlify.app/blog/vs-code-extensions](https://bgoonz-blog.netlify.app/blog/vs-code-extensions) -- [https://bgoonz-blog.netlify.app/blog/vscode-extensions](https://bgoonz-blog.netlify.app/blog/vscode-extensions) -- [https://bgoonz-blog.netlify.app/blog/web-dev-trends](https://bgoonz-blog.netlify.app/blog/web-dev-trends) -- [https://bgoonz-blog.netlify.app/blog/web-scraping](https://bgoonz-blog.netlify.app/blog/web-scraping) -- [https://bgoonz-blog.netlify.app/blog/webdev-setup](https://bgoonz-blog.netlify.app/blog/webdev-setup) -- [https://bgoonz-blog.netlify.app/blog/what-is-a-redux-reducer](https://bgoonz-blog.netlify.app/blog/what-is-a-redux-reducer) -- [https://bgoonz-blog.netlify.app/blog/wordpress-vs-headless-cms](https://bgoonz-blog.netlify.app/blog/wordpress-vs-headless-cms) -- [https://bgoonz-blog.netlify.app/docs](https://bgoonz-blog.netlify.app/docs) -- [https://bgoonz-blog.netlify.app/docs/about](https://bgoonz-blog.netlify.app/docs/about) -- [https://bgoonz-blog.netlify.app/docs/about/eng-portfolio](https://bgoonz-blog.netlify.app/docs/about/eng-portfolio) -- [https://bgoonz-blog.netlify.app/docs/about/internal-use](https://bgoonz-blog.netlify.app/docs/about/internal-use) -- [https://bgoonz-blog.netlify.app/docs/about/intrests](https://bgoonz-blog.netlify.app/docs/about/intrests) -- [https://bgoonz-blog.netlify.app/docs/about/job-search](https://bgoonz-blog.netlify.app/docs/about/job-search) -- [https://bgoonz-blog.netlify.app/docs/about/readme](https://bgoonz-blog.netlify.app/docs/about/readme) -- [https://bgoonz-blog.netlify.app/docs/about/resume](https://bgoonz-blog.netlify.app/docs/about/resume) -- [https://bgoonz-blog.netlify.app/docs/archive](https://bgoonz-blog.netlify.app/docs/archive) -- [https://bgoonz-blog.netlify.app/docs/archive/embeded-websites](https://bgoonz-blog.netlify.app/docs/archive/embeded-websites) -- [https://bgoonz-blog.netlify.app/docs/articles](https://bgoonz-blog.netlify.app/docs/articles) -- [https://bgoonz-blog.netlify.app/docs/articles/buffers](https://bgoonz-blog.netlify.app/docs/articles/buffers) -- [https://bgoonz-blog.netlify.app/docs/articles/common-modules](https://bgoonz-blog.netlify.app/docs/articles/common-modules) -- [https://bgoonz-blog.netlify.app/docs/articles/dev-dep](https://bgoonz-blog.netlify.app/docs/articles/dev-dep) -- [https://bgoonz-blog.netlify.app/docs/articles/fs-module](https://bgoonz-blog.netlify.app/docs/articles/fs-module) -- [https://bgoonz-blog.netlify.app/docs/articles/how-search-engines-work](https://bgoonz-blog.netlify.app/docs/articles/how-search-engines-work) -- [https://bgoonz-blog.netlify.app/docs/articles/how-the-web-works](https://bgoonz-blog.netlify.app/docs/articles/how-the-web-works) -- [https://bgoonz-blog.netlify.app/docs/articles/intro](https://bgoonz-blog.netlify.app/docs/articles/intro) -- [https://bgoonz-blog.netlify.app/docs/articles/jamstack](https://bgoonz-blog.netlify.app/docs/articles/jamstack) -- [https://bgoonz-blog.netlify.app/docs/articles/nextjs](https://bgoonz-blog.netlify.app/docs/articles/nextjs) -- [https://bgoonz-blog.netlify.app/docs/articles/node-api-express](https://bgoonz-blog.netlify.app/docs/articles/node-api-express) -- [https://bgoonz-blog.netlify.app/docs/articles/npm](https://bgoonz-blog.netlify.app/docs/articles/npm) -- [https://bgoonz-blog.netlify.app/docs/articles/os-module](https://bgoonz-blog.netlify.app/docs/articles/os-module) -- [https://bgoonz-blog.netlify.app/docs/articles/reading-files](https://bgoonz-blog.netlify.app/docs/articles/reading-files) -- [https://bgoonz-blog.netlify.app/docs/articles/semantic](https://bgoonz-blog.netlify.app/docs/articles/semantic) -- [https://bgoonz-blog.netlify.app/docs/articles/semantic-html](https://bgoonz-blog.netlify.app/docs/articles/semantic-html) -- [https://bgoonz-blog.netlify.app/docs/articles/url](https://bgoonz-blog.netlify.app/docs/articles/url) -- [https://bgoonz-blog.netlify.app/docs/articles/web-standards-checklist](https://bgoonz-blog.netlify.app/docs/articles/web-standards-checklist) -- [https://bgoonz-blog.netlify.app/docs/articles/webdev-tools](https://bgoonz-blog.netlify.app/docs/articles/webdev-tools) -- [https://bgoonz-blog.netlify.app/docs/articles/writing-files](https://bgoonz-blog.netlify.app/docs/articles/writing-files) -- [https://bgoonz-blog.netlify.app/docs/audio](https://bgoonz-blog.netlify.app/docs/audio) -- [https://bgoonz-blog.netlify.app/docs/audio/dfft](https://bgoonz-blog.netlify.app/docs/audio/dfft) -- [https://bgoonz-blog.netlify.app/docs/audio/discrete-fft](https://bgoonz-blog.netlify.app/docs/audio/discrete-fft) -- [https://bgoonz-blog.netlify.app/docs/audio/dtw-python-explained](https://bgoonz-blog.netlify.app/docs/audio/dtw-python-explained) -- [https://bgoonz-blog.netlify.app/docs/audio/dynamic-time-warping](https://bgoonz-blog.netlify.app/docs/audio/dynamic-time-warping) -- [https://bgoonz-blog.netlify.app/docs/audio/web-audio-api](https://bgoonz-blog.netlify.app/docs/audio/web-audio-api) -- [https://bgoonz-blog.netlify.app/docs/career](https://bgoonz-blog.netlify.app/docs/career) -- [https://bgoonz-blog.netlify.app/docs/career/job-boards](https://bgoonz-blog.netlify.app/docs/career/job-boards) -- [https://bgoonz-blog.netlify.app/docs/career/my-websites](https://bgoonz-blog.netlify.app/docs/career/my-websites) -- [https://bgoonz-blog.netlify.app/docs/career/projects](https://bgoonz-blog.netlify.app/docs/career/projects) -- [https://bgoonz-blog.netlify.app/docs/community](https://bgoonz-blog.netlify.app/docs/community) -- [https://bgoonz-blog.netlify.app/docs/community/an-open-letter-2-future-developers](https://bgoonz-blog.netlify.app/docs/community/an-open-letter-2-future-developers) -- [https://bgoonz-blog.netlify.app/docs/community/bookmarks](https://bgoonz-blog.netlify.app/docs/community/bookmarks) -- [https://bgoonz-blog.netlify.app/docs/community/video-chat](https://bgoonz-blog.netlify.app/docs/community/video-chat) -- [https://bgoonz-blog.netlify.app/docs/content](https://bgoonz-blog.netlify.app/docs/content) -- [https://bgoonz-blog.netlify.app/docs/content/algo](https://bgoonz-blog.netlify.app/docs/content/algo) -- [https://bgoonz-blog.netlify.app/docs/content/archive](https://bgoonz-blog.netlify.app/docs/content/archive) -- [https://bgoonz-blog.netlify.app/docs/content/data-structures-in-python](https://bgoonz-blog.netlify.app/docs/content/data-structures-in-python) -- [https://bgoonz-blog.netlify.app/docs/content/gatsby-Queries-Mutations](https://bgoonz-blog.netlify.app/docs/content/gatsby-Queries-Mutations) -- [https://bgoonz-blog.netlify.app/docs/content/gists](https://bgoonz-blog.netlify.app/docs/content/gists) -- [https://bgoonz-blog.netlify.app/docs/content/history-api](https://bgoonz-blog.netlify.app/docs/content/history-api) -- [https://bgoonz-blog.netlify.app/docs/content/javascript-examples](https://bgoonz-blog.netlify.app/docs/content/javascript-examples) -- [https://bgoonz-blog.netlify.app/docs/content/main-projects](https://bgoonz-blog.netlify.app/docs/content/main-projects) -- [https://bgoonz-blog.netlify.app/docs/content/native-data-structures-in-js](https://bgoonz-blog.netlify.app/docs/content/native-data-structures-in-js) -- [https://bgoonz-blog.netlify.app/docs/content/trouble-shooting](https://bgoonz-blog.netlify.app/docs/content/trouble-shooting) -- [https://bgoonz-blog.netlify.app/docs/css](https://bgoonz-blog.netlify.app/docs/css) -- [https://bgoonz-blog.netlify.app/docs/css/css-selector-specificity](https://bgoonz-blog.netlify.app/docs/css/css-selector-specificity) -- [https://bgoonz-blog.netlify.app/docs/css/media-querries](https://bgoonz-blog.netlify.app/docs/css/media-querries) -- [https://bgoonz-blog.netlify.app/docs/css/the-box-model](https://bgoonz-blog.netlify.app/docs/css/the-box-model) -- [https://bgoonz-blog.netlify.app/docs/docs](https://bgoonz-blog.netlify.app/docs/docs) -- [https://bgoonz-blog.netlify.app/docs/docs/appendix](https://bgoonz-blog.netlify.app/docs/docs/appendix) -- [https://bgoonz-blog.netlify.app/docs/docs/archive](https://bgoonz-blog.netlify.app/docs/docs/archive) -- [https://bgoonz-blog.netlify.app/docs/docs/bash](https://bgoonz-blog.netlify.app/docs/docs/bash) -- [https://bgoonz-blog.netlify.app/docs/docs/css](https://bgoonz-blog.netlify.app/docs/docs/css) -- [https://bgoonz-blog.netlify.app/docs/docs/git-reference](https://bgoonz-blog.netlify.app/docs/docs/git-reference) -- [https://bgoonz-blog.netlify.app/docs/docs/git-repos](https://bgoonz-blog.netlify.app/docs/docs/git-repos) -- [https://bgoonz-blog.netlify.app/docs/docs/glossary](https://bgoonz-blog.netlify.app/docs/docs/glossary) -- [https://bgoonz-blog.netlify.app/docs/docs/html-tags](https://bgoonz-blog.netlify.app/docs/docs/html-tags) -- [https://bgoonz-blog.netlify.app/docs/docs/markdown](https://bgoonz-blog.netlify.app/docs/docs/markdown) -- [https://bgoonz-blog.netlify.app/docs/docs/no-whiteboarding](https://bgoonz-blog.netlify.app/docs/docs/no-whiteboarding) -- [https://bgoonz-blog.netlify.app/docs/docs/node-docs-complete](https://bgoonz-blog.netlify.app/docs/docs/node-docs-complete) -- [https://bgoonz-blog.netlify.app/docs/docs/privacy-policy](https://bgoonz-blog.netlify.app/docs/docs/privacy-policy) -- [https://bgoonz-blog.netlify.app/docs/docs/regex-in-js](https://bgoonz-blog.netlify.app/docs/docs/regex-in-js) -- [https://bgoonz-blog.netlify.app/docs/docs/sitemap](https://bgoonz-blog.netlify.app/docs/docs/sitemap) -- [https://bgoonz-blog.netlify.app/docs/ds-algo](https://bgoonz-blog.netlify.app/docs/ds-algo) -- [https://bgoonz-blog.netlify.app/docs/ds-algo/big-o](https://bgoonz-blog.netlify.app/docs/ds-algo/big-o) -- [https://bgoonz-blog.netlify.app/docs/ds-algo/data-structures-docs](https://bgoonz-blog.netlify.app/docs/ds-algo/data-structures-docs) -- [https://bgoonz-blog.netlify.app/docs/ds-algo/ds-algo-interview](https://bgoonz-blog.netlify.app/docs/ds-algo/ds-algo-interview) -- [https://bgoonz-blog.netlify.app/docs/ds-algo/ds-by-example](https://bgoonz-blog.netlify.app/docs/ds-algo/ds-by-example) -- [https://bgoonz-blog.netlify.app/docs/ds-algo/ds-overview](https://bgoonz-blog.netlify.app/docs/ds-algo/ds-overview) -- [https://bgoonz-blog.netlify.app/docs/ds-algo/free-code-camp](https://bgoonz-blog.netlify.app/docs/ds-algo/free-code-camp) -- [https://bgoonz-blog.netlify.app/docs/ds-algo/graph](https://bgoonz-blog.netlify.app/docs/ds-algo/graph) -- [https://bgoonz-blog.netlify.app/docs/ds-algo/heaps](https://bgoonz-blog.netlify.app/docs/ds-algo/heaps) -- [https://bgoonz-blog.netlify.app/docs/ds-algo/tree](https://bgoonz-blog.netlify.app/docs/ds-algo/tree) -- [https://bgoonz-blog.netlify.app/docs/faq](https://bgoonz-blog.netlify.app/docs/faq) -- [https://bgoonz-blog.netlify.app/docs/faq/contact](https://bgoonz-blog.netlify.app/docs/faq/contact) -- [https://bgoonz-blog.netlify.app/docs/faq/plug-ins](https://bgoonz-blog.netlify.app/docs/faq/plug-ins) -- [https://bgoonz-blog.netlify.app/docs/fetch-api](https://bgoonz-blog.netlify.app/docs/fetch-api) -- [https://bgoonz-blog.netlify.app/docs/git/git](https://bgoonz-blog.netlify.app/docs/git/git) -- [https://bgoonz-blog.netlify.app/docs/git/git/github-tutorial](https://bgoonz-blog.netlify.app/docs/git/git/github-tutorial) -- [https://bgoonz-blog.netlify.app/docs/interact](https://bgoonz-blog.netlify.app/docs/interact) -- [https://bgoonz-blog.netlify.app/docs/interact/callstack-visual](https://bgoonz-blog.netlify.app/docs/interact/callstack-visual) -- [https://bgoonz-blog.netlify.app/docs/interact/clock](https://bgoonz-blog.netlify.app/docs/interact/clock) -- [https://bgoonz-blog.netlify.app/docs/interact/jupyter-notebooks](https://bgoonz-blog.netlify.app/docs/interact/jupyter-notebooks) -- [https://bgoonz-blog.netlify.app/docs/interact/other-sites](https://bgoonz-blog.netlify.app/docs/interact/other-sites) -- [https://bgoonz-blog.netlify.app/docs/interact/react-testing-library](https://bgoonz-blog.netlify.app/docs/interact/react-testing-library) -- [https://bgoonz-blog.netlify.app/docs/interact/video-chat](https://bgoonz-blog.netlify.app/docs/interact/video-chat) -- [https://bgoonz-blog.netlify.app/docs/javascript](https://bgoonz-blog.netlify.app/docs/javascript) -- [https://bgoonz-blog.netlify.app/docs/javascript/arrow-functions](https://bgoonz-blog.netlify.app/docs/javascript/arrow-functions) -- [https://bgoonz-blog.netlify.app/docs/javascript/asynchronous-javascript-and-xml](https://bgoonz-blog.netlify.app/docs/javascript/asynchronous-javascript-and-xml) -- [https://bgoonz-blog.netlify.app/docs/javascript/asyncjs](https://bgoonz-blog.netlify.app/docs/javascript/asyncjs) -- [https://bgoonz-blog.netlify.app/docs/javascript/await-keyword](https://bgoonz-blog.netlify.app/docs/javascript/await-keyword) -- [https://bgoonz-blog.netlify.app/docs/javascript/bigo](https://bgoonz-blog.netlify.app/docs/javascript/bigo) -- [https://bgoonz-blog.netlify.app/docs/javascript/clean-code](https://bgoonz-blog.netlify.app/docs/javascript/clean-code) -- [https://bgoonz-blog.netlify.app/docs/javascript/constructor-functions](https://bgoonz-blog.netlify.app/docs/javascript/constructor-functions) -- [https://bgoonz-blog.netlify.app/docs/javascript/cs-basics-in-js](https://bgoonz-blog.netlify.app/docs/javascript/cs-basics-in-js) -- [https://bgoonz-blog.netlify.app/docs/javascript/for-loops](https://bgoonz-blog.netlify.app/docs/javascript/for-loops) -- [https://bgoonz-blog.netlify.app/docs/javascript/javascript-resource-table](https://bgoonz-blog.netlify.app/docs/javascript/javascript-resource-table) -- [https://bgoonz-blog.netlify.app/docs/javascript/js-expressions](https://bgoonz-blog.netlify.app/docs/javascript/js-expressions) -- [https://bgoonz-blog.netlify.app/docs/javascript/js-objects](https://bgoonz-blog.netlify.app/docs/javascript/js-objects) -- [https://bgoonz-blog.netlify.app/docs/javascript/part2-pojo](https://bgoonz-blog.netlify.app/docs/javascript/part2-pojo) -- [https://bgoonz-blog.netlify.app/docs/javascript/promises](https://bgoonz-blog.netlify.app/docs/javascript/promises) -- [https://bgoonz-blog.netlify.app/docs/javascript/review](https://bgoonz-blog.netlify.app/docs/javascript/review) -- [https://bgoonz-blog.netlify.app/docs/javascript/snippets](https://bgoonz-blog.netlify.app/docs/javascript/snippets) -- [https://bgoonz-blog.netlify.app/docs/javascript/this-is-about-this](https://bgoonz-blog.netlify.app/docs/javascript/this-is-about-this) -- [https://bgoonz-blog.netlify.app/docs/javascript/variables](https://bgoonz-blog.netlify.app/docs/javascript/variables) -- [https://bgoonz-blog.netlify.app/docs/js-tips](https://bgoonz-blog.netlify.app/docs/js-tips) -- [https://bgoonz-blog.netlify.app/docs/js-tips/abs](https://bgoonz-blog.netlify.app/docs/js-tips/abs) -- [https://bgoonz-blog.netlify.app/docs/js-tips/acos](https://bgoonz-blog.netlify.app/docs/js-tips/acos) -- [https://bgoonz-blog.netlify.app/docs/js-tips/acosh](https://bgoonz-blog.netlify.app/docs/js-tips/acosh) -- [https://bgoonz-blog.netlify.app/docs/js-tips/addition](https://bgoonz-blog.netlify.app/docs/js-tips/addition) -- [https://bgoonz-blog.netlify.app/docs/js-tips/all](https://bgoonz-blog.netlify.app/docs/js-tips/all) -- [https://bgoonz-blog.netlify.app/docs/js-tips/allsettled](https://bgoonz-blog.netlify.app/docs/js-tips/allsettled) -- [https://bgoonz-blog.netlify.app/docs/js-tips/any](https://bgoonz-blog.netlify.app/docs/js-tips/any) -- [https://bgoonz-blog.netlify.app/docs/js-tips/array](https://bgoonz-blog.netlify.app/docs/js-tips/array) -- [https://bgoonz-blog.netlify.app/docs/js-tips/array-methods](https://bgoonz-blog.netlify.app/docs/js-tips/array-methods) -- [https://bgoonz-blog.netlify.app/docs/js-tips/arrow_functions](https://bgoonz-blog.netlify.app/docs/js-tips/arrow_functions) -- [https://bgoonz-blog.netlify.app/docs/js-tips/async_function](https://bgoonz-blog.netlify.app/docs/js-tips/async_function) -- [https://bgoonz-blog.netlify.app/docs/js-tips/bad_radix](https://bgoonz-blog.netlify.app/docs/js-tips/bad_radix) -- [https://bgoonz-blog.netlify.app/docs/js-tips/bind](https://bgoonz-blog.netlify.app/docs/js-tips/bind) -- [https://bgoonz-blog.netlify.app/docs/js-tips/classes](https://bgoonz-blog.netlify.app/docs/js-tips/classes) -- [https://bgoonz-blog.netlify.app/docs/js-tips/concat](https://bgoonz-blog.netlify.app/docs/js-tips/concat) -- [https://bgoonz-blog.netlify.app/docs/js-tips/conditional_operator](https://bgoonz-blog.netlify.app/docs/js-tips/conditional_operator) -- [https://bgoonz-blog.netlify.app/docs/js-tips/const](https://bgoonz-blog.netlify.app/docs/js-tips/const) -- [https://bgoonz-blog.netlify.app/docs/js-tips/create](https://bgoonz-blog.netlify.app/docs/js-tips/create) -- [https://bgoonz-blog.netlify.app/docs/js-tips/date](https://bgoonz-blog.netlify.app/docs/js-tips/date) -- [https://bgoonz-blog.netlify.app/docs/js-tips/eval](https://bgoonz-blog.netlify.app/docs/js-tips/eval) -- [https://bgoonz-blog.netlify.app/docs/js-tips/every](https://bgoonz-blog.netlify.app/docs/js-tips/every) -- [https://bgoonz-blog.netlify.app/docs/js-tips/filter](https://bgoonz-blog.netlify.app/docs/js-tips/filter) -- [https://bgoonz-blog.netlify.app/docs/js-tips/for...of](https://bgoonz-blog.netlify.app/docs/js-tips/for...of) -- [https://bgoonz-blog.netlify.app/docs/js-tips/foreach](https://bgoonz-blog.netlify.app/docs/js-tips/foreach) -- [https://bgoonz-blog.netlify.app/docs/js-tips/functions](https://bgoonz-blog.netlify.app/docs/js-tips/functions) -- [https://bgoonz-blog.netlify.app/docs/js-tips/import](https://bgoonz-blog.netlify.app/docs/js-tips/import) -- [https://bgoonz-blog.netlify.app/docs/js-tips/insert-into-array](https://bgoonz-blog.netlify.app/docs/js-tips/insert-into-array) -- [https://bgoonz-blog.netlify.app/docs/js-tips/map](https://bgoonz-blog.netlify.app/docs/js-tips/map) -- [https://bgoonz-blog.netlify.app/docs/js-tips/object](https://bgoonz-blog.netlify.app/docs/js-tips/object) -- [https://bgoonz-blog.netlify.app/docs/js-tips/reduce](https://bgoonz-blog.netlify.app/docs/js-tips/reduce) -- [https://bgoonz-blog.netlify.app/docs/js-tips/regexp](https://bgoonz-blog.netlify.app/docs/js-tips/regexp) -- [https://bgoonz-blog.netlify.app/docs/js-tips/sort](https://bgoonz-blog.netlify.app/docs/js-tips/sort) -- [https://bgoonz-blog.netlify.app/docs/js-tips/sorting-strings](https://bgoonz-blog.netlify.app/docs/js-tips/sorting-strings) -- [https://bgoonz-blog.netlify.app/docs/js-tips/string](https://bgoonz-blog.netlify.app/docs/js-tips/string) -- [https://bgoonz-blog.netlify.app/docs/js-tips/this](https://bgoonz-blog.netlify.app/docs/js-tips/this) -- [https://bgoonz-blog.netlify.app/docs/js-tips/var](https://bgoonz-blog.netlify.app/docs/js-tips/var) -- [https://bgoonz-blog.netlify.app/docs/leetcode](https://bgoonz-blog.netlify.app/docs/leetcode) -- [https://bgoonz-blog.netlify.app/docs/leetcode/ContaineWitMosWater](https://bgoonz-blog.netlify.app/docs/leetcode/ContaineWitMosWater) -- [https://bgoonz-blog.netlify.app/docs/leetcode/DividTwIntegers](https://bgoonz-blog.netlify.app/docs/leetcode/DividTwIntegers) -- [https://bgoonz-blog.netlify.app/docs/leetcode/GeneratParentheses](https://bgoonz-blog.netlify.app/docs/leetcode/GeneratParentheses) -- [https://bgoonz-blog.netlify.app/docs/leetcode/LetteCombinationoPhonNumber](https://bgoonz-blog.netlify.app/docs/leetcode/LetteCombinationoPhonNumber) -- [https://bgoonz-blog.netlify.app/docs/leetcode/LongesCommoPrefix](https://bgoonz-blog.netlify.app/docs/leetcode/LongesCommoPrefix) -- [https://bgoonz-blog.netlify.app/docs/leetcode/MediaoTwSorteArrays](https://bgoonz-blog.netlify.app/docs/leetcode/MediaoTwSorteArrays) -- [https://bgoonz-blog.netlify.app/docs/leetcode/NexPermutation](https://bgoonz-blog.netlify.app/docs/leetcode/NexPermutation) -- [https://bgoonz-blog.netlify.app/docs/leetcode/PalindromNumber](https://bgoonz-blog.netlify.app/docs/leetcode/PalindromNumber) -- [https://bgoonz-blog.netlify.app/docs/leetcode/RegulaExpressioMatching](https://bgoonz-blog.netlify.app/docs/leetcode/RegulaExpressioMatching) -- [https://bgoonz-blog.netlify.app/docs/leetcode/RemovDuplicatefroSorteArray](https://bgoonz-blog.netlify.app/docs/leetcode/RemovDuplicatefroSorteArray) -- [https://bgoonz-blog.netlify.app/docs/leetcode/RemovNtNodFroEnoList](https://bgoonz-blog.netlify.app/docs/leetcode/RemovNtNodFroEnoList) -- [https://bgoonz-blog.netlify.app/docs/leetcode/RomatInteger](https://bgoonz-blog.netlify.app/docs/leetcode/RomatInteger) -- [https://bgoonz-blog.netlify.app/docs/leetcode/SearciRotateSorteArray](https://bgoonz-blog.netlify.app/docs/leetcode/SearciRotateSorteArray) -- [https://bgoonz-blog.netlify.app/docs/leetcode/StrintIntege(atoi)]() -- [https://bgoonz-blog.netlify.app/docs/leetcode/ValiParentheses](https://bgoonz-blog.netlify.app/docs/leetcode/ValiParentheses) -- [https://bgoonz-blog.netlify.app/docs/leetcode/ZigZaConversion](https://bgoonz-blog.netlify.app/docs/leetcode/ZigZaConversion) -- [https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack](https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack) -- [https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack/get-started-with-gatsby](https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack/get-started-with-gatsby) -- [https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack/jamstack-templates](https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack/jamstack-templates) -- [https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack/serverlessjs](https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack/serverlessjs) -- [https://bgoonz-blog.netlify.app/docs/overflow](https://bgoonz-blog.netlify.app/docs/overflow) -- [https://bgoonz-blog.netlify.app/docs/overflow/emmet-cheat-sheet](https://bgoonz-blog.netlify.app/docs/overflow/emmet-cheat-sheet) -- [https://bgoonz-blog.netlify.app/docs/overflow/html-spec](https://bgoonz-blog.netlify.app/docs/overflow/html-spec) -- [https://bgoonz-blog.netlify.app/docs/overflow/http](https://bgoonz-blog.netlify.app/docs/overflow/http) -- [https://bgoonz-blog.netlify.app/docs/overflow/install](https://bgoonz-blog.netlify.app/docs/overflow/install) -- [https://bgoonz-blog.netlify.app/docs/overflow/modules](https://bgoonz-blog.netlify.app/docs/overflow/modules) -- [https://bgoonz-blog.netlify.app/docs/overflow/node-cli-args](https://bgoonz-blog.netlify.app/docs/overflow/node-cli-args) -- [https://bgoonz-blog.netlify.app/docs/overflow/node-js-language](https://bgoonz-blog.netlify.app/docs/overflow/node-js-language) -- [https://bgoonz-blog.netlify.app/docs/overflow/node-package-manager](https://bgoonz-blog.netlify.app/docs/overflow/node-package-manager) -- [https://bgoonz-blog.netlify.app/docs/overflow/node-repl](https://bgoonz-blog.netlify.app/docs/overflow/node-repl) -- [https://bgoonz-blog.netlify.app/docs/overflow/node-run-cli](https://bgoonz-blog.netlify.app/docs/overflow/node-run-cli) -- [https://bgoonz-blog.netlify.app/docs/overflow/nodejs](https://bgoonz-blog.netlify.app/docs/overflow/nodejs) -- [https://bgoonz-blog.netlify.app/docs/overflow/nodevsbrowser](https://bgoonz-blog.netlify.app/docs/overflow/nodevsbrowser) -- [https://bgoonz-blog.netlify.app/docs/overflow/understanding-firebase](https://bgoonz-blog.netlify.app/docs/overflow/understanding-firebase) -- [https://bgoonz-blog.netlify.app/docs/overflow/v8](https://bgoonz-blog.netlify.app/docs/overflow/v8) -- [https://bgoonz-blog.netlify.app/docs/privacy-policy](https://bgoonz-blog.netlify.app/docs/privacy-policy) -- [https://bgoonz-blog.netlify.app/docs/projects](https://bgoonz-blog.netlify.app/docs/projects) -- [https://bgoonz-blog.netlify.app/docs/projects/archive](https://bgoonz-blog.netlify.app/docs/projects/archive) -- [https://bgoonz-blog.netlify.app/docs/projects/archive/embeded-websites](https://bgoonz-blog.netlify.app/docs/projects/archive/embeded-websites) -- [https://bgoonz-blog.netlify.app/docs/projects/links](https://bgoonz-blog.netlify.app/docs/projects/links) -- [https://bgoonz-blog.netlify.app/docs/projects/mini-projects](https://bgoonz-blog.netlify.app/docs/projects/mini-projects) -- [https://bgoonz-blog.netlify.app/docs/projects/mini-projects2](https://bgoonz-blog.netlify.app/docs/projects/mini-projects2) -- [https://bgoonz-blog.netlify.app/docs/projects/recent](https://bgoonz-blog.netlify.app/docs/projects/recent) -- [https://bgoonz-blog.netlify.app/docs/python](https://bgoonz-blog.netlify.app/docs/python) -- [https://bgoonz-blog.netlify.app/docs/python/at-length](https://bgoonz-blog.netlify.app/docs/python/at-length) -- [https://bgoonz-blog.netlify.app/docs/python/cheat-sheet](https://bgoonz-blog.netlify.app/docs/python/cheat-sheet) -- [https://bgoonz-blog.netlify.app/docs/python/comprehensive-guide](https://bgoonz-blog.netlify.app/docs/python/comprehensive-guide) -- [https://bgoonz-blog.netlify.app/docs/python/data-structures-in-python](https://bgoonz-blog.netlify.app/docs/python/data-structures-in-python) -- [https://bgoonz-blog.netlify.app/docs/python/examples](https://bgoonz-blog.netlify.app/docs/python/examples) -- [https://bgoonz-blog.netlify.app/docs/python/flow-control](https://bgoonz-blog.netlify.app/docs/python/flow-control) -- [https://bgoonz-blog.netlify.app/docs/python/functions](https://bgoonz-blog.netlify.app/docs/python/functions) -- [https://bgoonz-blog.netlify.app/docs/python/google-sheets-api](https://bgoonz-blog.netlify.app/docs/python/google-sheets-api) -- [https://bgoonz-blog.netlify.app/docs/python/intro-for-js-devs](https://bgoonz-blog.netlify.app/docs/python/intro-for-js-devs) -- [https://bgoonz-blog.netlify.app/docs/python/python-ds](https://bgoonz-blog.netlify.app/docs/python/python-ds) -- [https://bgoonz-blog.netlify.app/docs/python/python-quiz](https://bgoonz-blog.netlify.app/docs/python/python-quiz) -- [https://bgoonz-blog.netlify.app/docs/python/snippets](https://bgoonz-blog.netlify.app/docs/python/snippets) -- [https://bgoonz-blog.netlify.app/docs/quick-ref](https://bgoonz-blog.netlify.app/docs/quick-ref) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/all-emojis](https://bgoonz-blog.netlify.app/docs/quick-ref/all-emojis) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/create-react-app](https://bgoonz-blog.netlify.app/docs/quick-ref/create-react-app) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/Emmet](https://bgoonz-blog.netlify.app/docs/quick-ref/Emmet) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/fetch](https://bgoonz-blog.netlify.app/docs/quick-ref/fetch) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/general-structured-data-guidelines](https://bgoonz-blog.netlify.app/docs/quick-ref/general-structured-data-guidelines) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/git-bash](https://bgoonz-blog.netlify.app/docs/quick-ref/git-bash) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/git-tricks](https://bgoonz-blog.netlify.app/docs/quick-ref/git-tricks) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/google-firebase](https://bgoonz-blog.netlify.app/docs/quick-ref/google-firebase) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/heroku-error-codes](https://bgoonz-blog.netlify.app/docs/quick-ref/heroku-error-codes) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/installation](https://bgoonz-blog.netlify.app/docs/quick-ref/installation) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/markdown-dropdowns](https://bgoonz-blog.netlify.app/docs/quick-ref/markdown-dropdowns) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/minifiction](https://bgoonz-blog.netlify.app/docs/quick-ref/minifiction) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/new-repo-instructions](https://bgoonz-blog.netlify.app/docs/quick-ref/new-repo-instructions) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/pull-request-rubric](https://bgoonz-blog.netlify.app/docs/quick-ref/pull-request-rubric) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/python-builtin-functions](https://bgoonz-blog.netlify.app/docs/quick-ref/python-builtin-functions) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/quick-links](https://bgoonz-blog.netlify.app/docs/quick-ref/quick-links) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/topRepos](https://bgoonz-blog.netlify.app/docs/quick-ref/topRepos) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/understanding-path](https://bgoonz-blog.netlify.app/docs/quick-ref/understanding-path) -- [https://bgoonz-blog.netlify.app/docs/quick-ref/vscode-themes](https://bgoonz-blog.netlify.app/docs/quick-ref/vscode-themes) -- [https://bgoonz-blog.netlify.app/docs/react](https://bgoonz-blog.netlify.app/docs/react) -- [https://bgoonz-blog.netlify.app/docs/react/accessibility](https://bgoonz-blog.netlify.app/docs/react/accessibility) -- [https://bgoonz-blog.netlify.app/docs/react/ajax-n-apis](https://bgoonz-blog.netlify.app/docs/react/ajax-n-apis) -- [https://bgoonz-blog.netlify.app/docs/react/cheatsheet](https://bgoonz-blog.netlify.app/docs/react/cheatsheet) -- [https://bgoonz-blog.netlify.app/docs/react/complete-react](https://bgoonz-blog.netlify.app/docs/react/complete-react) -- [https://bgoonz-blog.netlify.app/docs/react/createReactApp](https://bgoonz-blog.netlify.app/docs/react/createReactApp) -- [https://bgoonz-blog.netlify.app/docs/react/demo](https://bgoonz-blog.netlify.app/docs/react/demo) -- [https://bgoonz-blog.netlify.app/docs/react/dont-use-index-as-keys](https://bgoonz-blog.netlify.app/docs/react/dont-use-index-as-keys) -- [https://bgoonz-blog.netlify.app/docs/react/higher-order-components](https://bgoonz-blog.netlify.app/docs/react/higher-order-components) -- [https://bgoonz-blog.netlify.app/docs/react/jsx](https://bgoonz-blog.netlify.app/docs/react/jsx) -- [https://bgoonz-blog.netlify.app/docs/react/quiz](https://bgoonz-blog.netlify.app/docs/react/quiz) -- [https://bgoonz-blog.netlify.app/docs/react/react-docs](https://bgoonz-blog.netlify.app/docs/react/react-docs) -- [https://bgoonz-blog.netlify.app/docs/react/react-in-depth](https://bgoonz-blog.netlify.app/docs/react/react-in-depth) -- [https://bgoonz-blog.netlify.app/docs/react/react-patterns-by-usecase](https://bgoonz-blog.netlify.app/docs/react/react-patterns-by-usecase) -- [https://bgoonz-blog.netlify.app/docs/react/react-router](https://bgoonz-blog.netlify.app/docs/react/react-router) -- [https://bgoonz-blog.netlify.app/docs/react/react-study-guide](https://bgoonz-blog.netlify.app/docs/react/react-study-guide) -- [https://bgoonz-blog.netlify.app/docs/react/react2](https://bgoonz-blog.netlify.app/docs/react/react2) -- [https://bgoonz-blog.netlify.app/docs/react/render-elements](https://bgoonz-blog.netlify.app/docs/react/render-elements) -- [https://bgoonz-blog.netlify.app/docs/readme](https://bgoonz-blog.netlify.app/docs/readme) -- [https://bgoonz-blog.netlify.app/docs/reference](https://bgoonz-blog.netlify.app/docs/reference) -- [https://bgoonz-blog.netlify.app/docs/reference/art-of-command-line](https://bgoonz-blog.netlify.app/docs/reference/art-of-command-line) -- [https://bgoonz-blog.netlify.app/docs/reference/awesome-lists](https://bgoonz-blog.netlify.app/docs/reference/awesome-lists) -- [https://bgoonz-blog.netlify.app/docs/reference/awesome-nodejs](https://bgoonz-blog.netlify.app/docs/reference/awesome-nodejs) -- [https://bgoonz-blog.netlify.app/docs/reference/awesome-static](https://bgoonz-blog.netlify.app/docs/reference/awesome-static) -- [https://bgoonz-blog.netlify.app/docs/reference/bash-commands](https://bgoonz-blog.netlify.app/docs/reference/bash-commands) -- [https://bgoonz-blog.netlify.app/docs/reference/bookmarks](https://bgoonz-blog.netlify.app/docs/reference/bookmarks) -- [https://bgoonz-blog.netlify.app/docs/reference/embed-the-web](https://bgoonz-blog.netlify.app/docs/reference/embed-the-web) -- [https://bgoonz-blog.netlify.app/docs/reference/github-resources](https://bgoonz-blog.netlify.app/docs/reference/github-resources) -- [https://bgoonz-blog.netlify.app/docs/reference/github-search](https://bgoonz-blog.netlify.app/docs/reference/github-search) -- [https://bgoonz-blog.netlify.app/docs/reference/google-cloud](https://bgoonz-blog.netlify.app/docs/reference/google-cloud) -- [https://bgoonz-blog.netlify.app/docs/reference/how-2-reinstall-npm](https://bgoonz-blog.netlify.app/docs/reference/how-2-reinstall-npm) -- [https://bgoonz-blog.netlify.app/docs/reference/how-to-kill-a-process](https://bgoonz-blog.netlify.app/docs/reference/how-to-kill-a-process) -- [https://bgoonz-blog.netlify.app/docs/reference/installing-node](https://bgoonz-blog.netlify.app/docs/reference/installing-node) -- [https://bgoonz-blog.netlify.app/docs/reference/intro-to-nodejs](https://bgoonz-blog.netlify.app/docs/reference/intro-to-nodejs) -- [https://bgoonz-blog.netlify.app/docs/reference/markdown-styleguide](https://bgoonz-blog.netlify.app/docs/reference/markdown-styleguide) -- [https://bgoonz-blog.netlify.app/docs/reference/notes-template](https://bgoonz-blog.netlify.app/docs/reference/notes-template) -- [https://bgoonz-blog.netlify.app/docs/reference/psql](https://bgoonz-blog.netlify.app/docs/reference/psql) -- [https://bgoonz-blog.netlify.app/docs/reference/resources](https://bgoonz-blog.netlify.app/docs/reference/resources) -- [https://bgoonz-blog.netlify.app/docs/reference/vscode](https://bgoonz-blog.netlify.app/docs/reference/vscode) -- [https://bgoonz-blog.netlify.app/docs/reference/web-api's](https://bgoonz-blog.netlify.app/docs/reference/web-api's) -- [https://bgoonz-blog.netlify.app/docs/showcase](https://bgoonz-blog.netlify.app/docs/showcase) -- [https://bgoonz-blog.netlify.app/docs/sitemap](https://bgoonz-blog.netlify.app/docs/sitemap) -- [https://bgoonz-blog.netlify.app/docs/tips](https://bgoonz-blog.netlify.app/docs/tips) -- [https://bgoonz-blog.netlify.app/docs/tips/7-tips-to-become-a-better-web-developer](https://bgoonz-blog.netlify.app/docs/tips/7-tips-to-become-a-better-web-developer) -- [https://bgoonz-blog.netlify.app/docs/tips/decrement](https://bgoonz-blog.netlify.app/docs/tips/decrement) -- [https://bgoonz-blog.netlify.app/docs/tips/firebase-hosting](https://bgoonz-blog.netlify.app/docs/tips/firebase-hosting) -- [https://bgoonz-blog.netlify.app/docs/tips/httrack](https://bgoonz-blog.netlify.app/docs/tips/httrack) -- [https://bgoonz-blog.netlify.app/docs/tips/regex-tips](https://bgoonz-blog.netlify.app/docs/tips/regex-tips) -- [https://bgoonz-blog.netlify.app/docs/tips/storybook](https://bgoonz-blog.netlify.app/docs/tips/storybook) -- [https://bgoonz-blog.netlify.app/docs/tips/top-10-money-tips](https://bgoonz-blog.netlify.app/docs/tips/top-10-money-tips) -- [https://bgoonz-blog.netlify.app/docs/tips/ubuntu-setup](https://bgoonz-blog.netlify.app/docs/tips/ubuntu-setup) -- [https://bgoonz-blog.netlify.app/docs/tips/web-accessibility](https://bgoonz-blog.netlify.app/docs/tips/web-accessibility) -- [https://bgoonz-blog.netlify.app/docs/tools](https://bgoonz-blog.netlify.app/docs/tools) -- [https://bgoonz-blog.netlify.app/docs/tools/dev-utilities](https://bgoonz-blog.netlify.app/docs/tools/dev-utilities) -- [https://bgoonz-blog.netlify.app/docs/tools/markdown-html](https://bgoonz-blog.netlify.app/docs/tools/markdown-html) -- [https://bgoonz-blog.netlify.app/docs/tutorials](https://bgoonz-blog.netlify.app/docs/tutorials) -- [https://bgoonz-blog.netlify.app/docs/tutorials/bash](https://bgoonz-blog.netlify.app/docs/tutorials/bash) -- [https://bgoonz-blog.netlify.app/docs/tutorials/bash-commands-my](https://bgoonz-blog.netlify.app/docs/tutorials/bash-commands-my) -- [https://bgoonz-blog.netlify.app/docs/tutorials/get-file-extension](https://bgoonz-blog.netlify.app/docs/tutorials/get-file-extension) -- [https://bgoonz-blog.netlify.app/docs/tutorials/how-2-ubuntu](https://bgoonz-blog.netlify.app/docs/tutorials/how-2-ubuntu) -- [https://bgoonz-blog.netlify.app/docs/tutorials/psql-setup](https://bgoonz-blog.netlify.app/docs/tutorials/psql-setup) -- [https://bgoonz-blog.netlify.app/docs/tutorials/webdev-review](https://bgoonz-blog.netlify.app/docs/tutorials/webdev-review) -- [https://bgoonz-blog.netlify.app/docs/typescript](https://bgoonz-blog.netlify.app/docs/typescript) -- [https://bgoonz-blog.netlify.app/interview-questions-js](https://bgoonz-blog.netlify.app/interview-questions-js) -- [https://bgoonz-blog.netlify.app/readme](https://bgoonz-blog.netlify.app/readme) -- [https://bgoonz-blog.netlify.app/showcase](https://bgoonz-blog.netlify.app/showcase) - -
- ---- - ---- - ---- - -
- ↞↠ Getting Started With GatsbyJS ↞↠ -# - ---- - -## 🚀 Quick start - -1. **Create a Gatsby site.** - - Use the Gatsby CLI to create a new site, specifying the default starter. - -``` -console - # create a new Gatsby site using the default starter - gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default - -``` - -1. **Start developing.** - - Navigate into your new site's directory and start it up. - -``` -console - cd my-default-starter/ - gatsby develop - -``` - -1. **Open the source code and start editing!** - - Your site is now running at `http://localhost:8000`! - - _Note: You'll also see a second link:_`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.com/tutorial/part-five/#introducing-graphiql)._ - - Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! - -## 🧐 What's inside? - -A quick look at the top-level files and directories you'll see in a Gatsby project. - - . - ├── node_modules - ├── src - ├── .gitignore - ├── .prettierrc - ├── gatsby-browser.js - ├── gatsby-config.js - ├── gatsby-node.js - ├── gatsby-ssr.js - ├── LICENSE - ├── package-lock.json - ├── package.json - └── README.md - -1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. - -2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for "source code". - -3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. - -4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. - -5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. - -6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you'd like to include, etc. (Check out the [config docs](https://www.gatsbyjs.com/docs/gatsby-config/) for more detail). - -7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. - -8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. - -9. **`LICENSE`**: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license. - -10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won't change this file directly).** - -11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project's name, author, etc). This manifest is how npm knows which packages to install for your project. - -12. **`README.md`**: A text file containing useful reference information about your project. - -## 🎓 Learning Gatsby - -Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: - -- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby**](https://www.gatsbyjs.com/tutorial/).\*\* It starts with zero assumptions about your level of ability and walks through every step of the process. -- -- **To dive straight into code samples, head [to our documentation**](https://www.gatsbyjs.com/docs/).\*\* In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. - -## 💫 Deploy - -[![Deploy to Netlify**](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/BGOONZ_BLOG_2.0.git) - -[![Deploy with Vercel**](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/BGOONZ_BLOG_2.0.git) - - - ---- - -# Gatsby Project Structure | Gatsby - -> ## Excerpt -> -> Inside a Gatsby project, you may see some or all of the following folders and files: Folders /.cache Automatically generated. This folder… - ---- - -Inside a Gatsby project, you may see some or all of the following folders and files: - -``` -/|-- /.cache|-- /plugins|-- /public|-- /src |-- /api |-- /pages |-- /templates |-- html.js|-- /static|-- gatsby-config.js|-- gatsby-node.js|-- gatsby-ssr.js|-- gatsby-browser.js -``` - -## [](https://www.gatsbyjs.com/docs/reference/gatsby-project-structure/#folders)Folders - -- **`/.cache`** _Automatically generated._ This folder is an internal cache created automatically by Gatsby. The files inside this folder are not meant for modification. Should be added to the `.gitignore` file if not added already. -- **`/plugins`** This folder hosts any project-specific ("local") plugins that aren't published as an `npm` package. Check out the [plugin docs](https://www.gatsbyjs.com/docs/plugins/) for more detail. -- **`/public`** _Automatically generated._ The output of the build process will be exposed inside this folder. Should be added to the `.gitignore` file if not added already. -- **`/src`** This directory will contain all of the code related to what you will see on the frontend of your site (what you see in the browser), like your site header, or a page template. "src" is a convention for "source code". - - - **`/api`** JavaScript and TypeScript files under `src/api` become functions automatically with paths based on their file name. Check out the [functions guide](https://www.gatsbyjs.com/docs/reference/functions/) for more detail. - - **`/pages`** Components under `src/pages` become pages automatically with paths based on their file name. Check out the [pages recipes](https://www.gatsbyjs.com/docs/recipes/pages-layouts) for more detail. - - **`/templates`** Contains templates for programmatically creating pages. Check out the [templates docs](https://www.gatsbyjs.com/docs/conceptual/building-with-components/#page-template-components) for more detail. - - **`html.js`** For custom configuration of default `.cache/default_html.js`. Check out the [custom HTML docs](https://www.gatsbyjs.com/docs/custom-html/) for more detail. - -- **`/static`** If you put a file into the static folder, it will not be processed by webpack. Instead it will be copied into the public folder untouched. Check out the [assets docs](https://www.gatsbyjs.com/docs/how-to/images-and-media/static-folder/#adding-assets-outside-of-the-module-system) for more detail. - -## [](https://www.gatsbyjs.com/docs/reference/gatsby-project-structure/#files)Files - -- **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. -- **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you'd like to include, etc. Check out the [config docs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/) for more detail. -- **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby node APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. -- **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. - -## [](https://www.gatsbyjs.com/docs/reference/gatsby-project-structure/#miscellaneous)Miscellaneous - -The file/folder structure described above reflects Gatsby-specific files and folders. Since Gatsby sites are also React apps, it's common to use standard React code organization patterns such as folders like `/components` and `/utils` inside `/src`. The [React docs](https://reactjs.org/docs/faq-structure.html) have more information on a typical React app folder structure. - ---- - -# Layout Components | Gatsby - -> ## Excerpt -> -> In this guide, you'll learn Gatsby's approach to layouts, how to create and use layout components, and how to prevent layout components from… - ---- - -In this guide, you'll learn Gatsby's approach to layouts, how to create and use layout components, and how to prevent layout components from unmounting. - -## [](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#gatsbys-approach-to-layouts)Gatsby's approach to layouts - -Gatsby does not, by default, automatically apply layouts to pages (there are, however, ways to do so which will be covered in a later section). Instead, Gatsby follows React's compositional model of importing and using components. This makes it possible to create multiple levels of layouts, e.g. a global header and footer, and then on some pages, a sidebar menu. It also makes it possible to pass data between layout and page components. - -## [](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#what-are-layout-components)What are layout components? - -Layout components are for sections of your site that you want to share across multiple pages. For example, Gatsby sites will commonly have a layout component with a shared header and footer. Other common things to add to layouts are a sidebar and/or navigation menu. On this page for example, the header at the top is part of gatsbyjs.com's layout component. - -## [](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#how-to-create-layout-components)How to create layout components - -It is recommended to create your layout components alongside the rest of your components (e.g. into `src/components/`). - -Here is an example of a very basic layout component at `src/components/layout.js`: - -``` -import React from "react"export default function Layout({ children }) { return (
{children}
)} -``` - -## [](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#how-to-import-and-add-layout-components-to-pages)How to import and add layout components to pages - -If you want to apply a layout to a page, you will need to include the `Layout` component and wrap your page in it. For example, here is how you would apply your layout to the front page: - -``` -import React from "react"import Layout from "../components/layout"export default function Home() { return (

I'm in a layout!

 );} -``` - -Repeat for every page and template that needs this layout. - -## [](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#how-to-prevent-layout-components-from-unmounting)How to prevent layout components from unmounting - -As mentioned earlier, Gatsby does not, by default, automatically wrap pages in a layout component. The "top level" component is the page itself. As a result, when the "top level" component changes between pages, React will re-render all children. This means that shared components like navigations will unmount and remount. This will break CSS transitions or React state within those shared components. - -If you need to set a wrapper component around page components that won't get unmounted on page changes, use the **`wrapPageElement`** [browser API](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapPageElement) and the [SSR equivalent](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/#wrapPageElement). - -Alternatively, you can prevent your layout component from unmounting by using [gatsby-plugin-layout](https://www.gatsbyjs.com/plugins/gatsby-plugin-layout/), which implements the `wrapPageElement` APIs for you. - -# Adding Markdown Pages | Gatsby - -> ## Excerpt -> -> Gatsby can use Markdown files to create pages in your site. -> You add plugins to read and understand folders with Markdown files and from them… - ---- - -Gatsby can use Markdown files to create pages in your site. You add plugins to read and understand folders with Markdown files and from them create pages automatically. - -Here are the steps Gatsby follows for making this happen. - -1. Read files into Gatsby from the filesystem -2. Transform Markdown to HTML and [frontmatter](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#frontmatter-for-metadata-in-markdown-files) to data -3. Add a Markdown file -4. Create a Collection Route component for the Markdown files - -## [](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#read-files-into-gatsby-from-the-filesystem)Read files into Gatsby from the filesystem - -Use the plugin [`gatsby-source-filesystem`](https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/#gatsby-source-filesystem) to read files. - -## [](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#install)Install - -`npm install gatsby-source-filesystem` - -## [](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#add-plugin)Add plugin - -Open `gatsby-config.js` to add the `gatsby-source-filesystem` plugin. The `path` option is how you set the directory to search for files. - -```js -module.exports = { siteMetadata: { title: "My Gatsby Site", }, plugins: [ { resolve: `gatsby-source-filesystem`, options: { name: `markdown-pages`, path: `${__dirname}/src/markdown-pages`, }, }, ],} -``` - -Completing the above step means that you've "sourced" the Markdown files from the filesystem. You can now "transform" the Markdown to HTML and the YAML frontmatter to JSON. - -## [](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#transform-markdown-to-html-and-frontmatter-to-data-using-gatsby-transformer-remark)Transform Markdown to HTML and frontmatter to data using `gatsby-transformer-remark` - -You'll use the plugin [`gatsby-transformer-remark`](https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/) to recognize files which are Markdown and read their content. The plugin will convert the frontmatter metadata part of your Markdown files as `frontmatter` and the content part as HTML. - -## [](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#install-transformer-plugin)Install transformer plugin - -`npm install gatsby-transformer-remark` - -## [](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#configure-plugin)Configure plugin - -Add this to `gatsby-config.js` after the previously added `gatsby-source-filesystem`. - -``` -module.exports = { siteMetadata: { title: "My Gatsby Site", }, plugins: [ { resolve: `gatsby-source-filesystem`, options: { name: `markdown-pages`, path: `${__dirname}/src/markdown-pages`, }, }, `gatsby-transformer-remark`, ],} -``` - -## [](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#add-a-markdown-file)Add a Markdown file - -Create a folder in the `/src` directory of your Gatsby application called `markdown-pages`. Now create a Markdown file inside it with the name `post-1.md`. - -## [](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#frontmatter-for-metadata-in-markdown-files)Frontmatter for metadata in Markdown files - -When you create a Markdown file, you can include a set of key/value pairs that can be used to provide additional data relevant to specific pages in the GraphQL data layer. This data is called "frontmatter" and is denoted by the triple dashes at the start and end of the block. This block will be parsed by `gatsby-transformer-remark` as YAML. You can then query the data through the GraphQL API from your React components. - -src/markdown-pages/post-1.md - -```console - ----slug: "/blog/my-first-post"date: "2019-05-04"title: "My first blog post"--- -``` - -What is important in this step is the key pair `slug`. The value that is assigned to the key `slug` is used in order to navigate to your post. - -## [](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#create-a-collection-route-for-the-markdown-files)Create a Collection Route for the Markdown files - -Create `src/pages/{MarkdownRemark.frontmatter__slug}.js` and add the following code: - -src/pages/{MarkdownRemark.frontmatter\_\_slug}.js - -```js -import React from "react"import { graphql } from "gatsby"export default function Template({ data, }) { const { markdownRemark } = data const { frontmatter, html } = markdownRemark return (

{frontmatter.title}

{frontmatter.date}

)}export const pageQuery = graphql` query($id: String!) { markdownRemark(id: { eq: $id }) { html frontmatter { date(formatString: "MMMM DD, YYYY") slug title } } }` -``` - -Two things are important in the file above: - -1. A GraphQL query is made in the second half of the file to get the Markdown data. Gatsby has automagically given you all the Markdown metadata and HTML in this query's result. - - **Note: To learn more about GraphQL, consider this [excellent resource](https://www.howtographql.com/)** - -2. The result of the query is injected by Gatsby into the component as the `data` prop. `props.data.markdownRemark` is the property that has all the details of the Markdown file. - -Next you could create a page component at `src/pages/blog/index.js` to serve as a listing page for all your blog posts. - -This should get you started on some basic Markdown functionality in your Gatsby site. You can further customize the frontmatter and the component file to get desired effects! - -For more information, have a look in the working example `using-markdown-pages`. You can find it in the [Gatsby examples section](https://github.com/gatsbyjs/gatsby/tree/master/examples). - -## [](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#other-tutorials)Other tutorials - -
- ---- - -# Technoloy - -![tech-stack](https://github.com/bgoonz/BGOONZ_BLOG_2.0/blob/master/static/images/madewith.png?raw=true) - ---- - -# SOURCECODE - -``` - -bryan@LAPTOP-9LGJ3JGS:/c/MY-WEB-DEV/BLOG____2.0/BLOG_2.0/src$ tree -f -. -├── ./components -│ ├── ./components/ActionLink.js -│ ├── ./components/CtaButtons.js -│ ├── ./components/DocsMenu.js -│ ├── ./components/DocsSubmenu.js -│ ├── ./components/Footer.js -│ ├── ./components/Header.js -│ ├── ./components/Icon.js -│ ├── ./components/Layout.js -│ ├── ./components/SectionContent.js -│ ├── ./components/SectionCta.js -│ ├── ./components/SectionDocs.js -│ ├── ./components/SectionGrid.js -│ ├── ./components/SectionHero.js -│ ├── ./components/Submenu.js -│ ├── ./components/global.css -│ └── ./components/index.js -├── ./data -│ └── ./data/doc_sections.yml -├── ./hooks -│ └── ./hooks/useScript.js -├── ./html.js -├── ./pages -│ ├── ./pages/blog -│ │ ├── ./pages/blog/blog-archive.md -│ │ ├── ./pages/blog/blogwcomments.md -│ │ ├── ./pages/blog/data-structures.md -│ │ ├── ./pages/blog/index.md -│ │ ├── ./pages/blog/my-medium.md -│ │ ├── ./pages/blog/platform-docs.md -│ │ ├── ./pages/blog/python-for-js-dev.md -│ │ ├── ./pages/blog/python-resources.md -│ │ └── ./pages/blog/web-scraping.md -│ ├── ./pages/docs -│ │ ├── ./pages/docs/about -│ │ │ ├── ./pages/docs/about/index.md -│ │ │ ├── ./pages/docs/about/me.md -│ │ │ ├── ./pages/docs/about/node -│ │ │ │ ├── ./pages/docs/about/node/install.md -│ │ │ │ ├── ./pages/docs/about/node/intro.md -│ │ │ │ ├── ./pages/docs/about/node/nodejs.md -│ │ │ │ ├── ./pages/docs/about/node/nodevsbrowser.md -│ │ │ │ ├── ./pages/docs/about/node/reading-files.md -│ │ │ │ └── ./pages/docs/about/node/writing-files.md -│ │ │ ├── ./pages/docs/about/npm.md -│ │ │ └── ./pages/docs/about/resume.md -│ │ ├── ./pages/docs/articles -│ │ │ ├── ./pages/docs/articles/algo.md -│ │ │ ├── ./pages/docs/articles/article-compilation.md -│ │ │ ├── ./pages/docs/articles/basic-web-dev.md -│ │ │ ├── ./pages/docs/articles/gists.md -│ │ │ ├── ./pages/docs/articles/index.md -│ │ │ ├── ./pages/docs/articles/install.md -│ │ │ ├── ./pages/docs/articles/intro.md -│ │ │ ├── ./pages/docs/articles/python.md -│ │ │ ├── ./pages/docs/articles/reading-files.md -│ │ │ ├── ./pages/docs/articles/resources.md -│ │ │ ├── ./pages/docs/articles/ten-jamstack-apis-to-checkout.md -│ │ │ └── ./pages/docs/articles/writing-files.md -│ │ ├── ./pages/docs/docs -│ │ │ └── ./pages/docs/docs/tools -│ │ │ └── ./pages/docs/docs/tools/file-types.md -│ │ ├── ./pages/docs/faq -│ │ │ ├── ./pages/docs/faq/contact.md -│ │ │ └── ./pages/docs/faq/index.md -│ │ ├── ./pages/docs/gists.md -│ │ ├── ./pages/docs/index.md -│ │ ├── ./pages/docs/interact -│ │ │ ├── ./pages/docs/interact/clock.md -│ │ │ ├── ./pages/docs/interact/index.md -│ │ │ └── ./pages/docs/interact/jupyter-notebooks.md -│ │ ├── ./pages/docs/links -│ │ │ ├── ./pages/docs/links/index.md -│ │ │ ├── ./pages/docs/links/medium-links.md -│ │ │ ├── ./pages/docs/links/my-websites.md -│ │ │ └── ./pages/docs/links/social.md -│ │ ├── ./pages/docs/quick-reference -│ │ │ ├── ./pages/docs/quick-reference/Emmet.md -│ │ │ ├── ./pages/docs/quick-reference/docs.md -│ │ │ ├── ./pages/docs/quick-reference/index.md -│ │ │ ├── ./pages/docs/quick-reference/installation.md -│ │ │ └── ./pages/docs/quick-reference/new-repo-instructions.md -│ │ ├── ./pages/docs/react -│ │ │ ├── ./pages/docs/react/createReactApp.md -│ │ │ ├── ./pages/docs/react/index.md -│ │ │ └── ./pages/docs/react/react2.md -│ │ ├── ./pages/docs/react-in-depth.md -│ │ ├── ./pages/docs/sitemap.md -│ │ └── ./pages/docs/tools -│ │ ├── ./pages/docs/tools/index.md -│ │ ├── ./pages/docs/tools/notes-template.md -│ │ ├── ./pages/docs/tools/plug-ins.md -│ │ └── ./pages/docs/tools/vscode.md -│ ├── ./pages/index.md -│ ├── ./pages/notes-template.md -│ ├── ./pages/review.md -│ └── ./pages/showcase.md -├── ./sass -│ ├── ./sass/imports -│ │ ├── ./sass/imports/_animations.scss -│ │ ├── ./sass/imports/_buttons.scss -│ │ ├── ./sass/imports/_docs.scss -│ │ ├── ./sass/imports/_footer.scss -│ │ ├── ./sass/imports/_forms.scss -│ │ ├── ./sass/imports/_functions.scss -│ │ ├── ./sass/imports/_general.scss -│ │ ├── ./sass/imports/_header.scss -│ │ ├── ./sass/imports/_helpers.scss -│ │ ├── ./sass/imports/_icons.scss -│ │ ├── ./sass/imports/_palettes.scss -│ │ ├── ./sass/imports/_posts.scss -│ │ ├── ./sass/imports/_prism.scss -│ │ ├── ./sass/imports/_reset.scss -│ │ ├── ./sass/imports/_sections.scss -│ │ ├── ./sass/imports/_structure.scss -│ │ ├── ./sass/imports/_tables.scss -│ │ └── ./sass/imports/_variables.scss -│ └── ./sass/main.scss -├── ./templates -│ ├── ./templates/advanced.js -│ ├── ./templates/blog.js -│ ├── ./templates/docs.js -│ ├── ./templates/page.js -│ └── ./templates/post.js -└── ./utils - ├── ./utils/attribute.js - ├── ./utils/classNames.js - ├── ./utils/cycler.js - ├── ./utils/getData.js - ├── ./utils/getPage.js - ├── ./utils/getPageByFilePath.js - ├── ./utils/getPages.js - ├── ./utils/htmlToReact.js - ├── ./utils/index.js - ├── ./utils/link.js - ├── ./utils/markdownify.js - ├── ./utils/pathJoin.js - ├── ./utils/toStyleObj.js - ├── ./utils/toUrl.js - └── ./utils/withPrefix.js - -21 directories, 119 files -bryan@LAPTOP-9LGJ3JGS:/c/MY-WEB-DEV/BLOG____2.0/BLOG_2.0/src$ -``` - ---- - -# Source Code - -
- Folder Structure (src) - -``` -. -├── Combined_____-_____Doc.md -├── components -│ ├── ActionLink.js -│ ├── CtaButtons.js -│ ├── DarkToggle -│ │ ├── index.js -│ │ └── styles.js -│ ├── DocsMenu.js -│ ├── DocsSubmenu.js -│ ├── Footer.js -│ ├── Header.js -│ ├── Icon.js -│ ├── Layout.js -│ ├── SectionContent.js -│ ├── SectionCta.js -│ ├── SectionDocs.js -│ ├── SectionGrid.js -│ ├── SectionHero.js -│ ├── Submenu.js -│ ├── global.css -│ └── index.js -├── data -│ └── doc_sections.yml -├── hooks -│ ├── addScript.js -│ ├── index.js -│ ├── useDarkMode.js -│ ├── useEventListener.js -│ ├── useMediaQuery.js -│ ├── useOnClickOutside.js -│ ├── useQueryParam.js -│ ├── useSize.js -│ └── useStorage.js -├── html.js -├── pages -│ ├── blog -│ │ ├── 300-react-questions.md -│ │ ├── awesome-graphql.md -│ │ ├── big-o-complexity.md -│ │ ├── blog-archive.md -│ │ ├── blogwcomments.md -│ │ ├── data-structures.md -│ │ ├── flow-control-in-python.md -│ │ ├── functions-in-python.md -│ │ ├── git-gateway.md -│ │ ├── index.md -│ │ ├── interview-questions-js.md -│ │ ├── netlify-cms.md -│ │ ├── platform-docs.md -│ │ ├── python-for-js-dev.md -│ │ ├── python-resources.md -│ │ ├── web-dev-trends.md -│ │ └── web-scraping.md -│ ├── docs -│ │ ├── about -│ │ │ ├── eng-portfolio.md -│ │ │ ├── ideas-for-this-website.md -│ │ │ ├── index.md -│ │ │ ├── intrests.md -│ │ │ ├── job-search.md -│ │ │ └── resume.md -│ │ ├── articles -│ │ │ ├── basic-web-dev.md -│ │ │ ├── buffers.md -│ │ │ ├── dev-dep.md -│ │ │ ├── event-loop.md -│ │ │ ├── fs-module.md -│ │ │ ├── how-the-web-works.md -│ │ │ ├── http.md -│ │ │ ├── index.md -│ │ │ ├── install.md -│ │ │ ├── intro.md -│ │ │ ├── modules.md -│ │ │ ├── nextjs.md -│ │ │ ├── node-api-express.md -│ │ │ ├── node-cli-args.md -│ │ │ ├── node-common-modules.md -│ │ │ ├── node-env-variables.md -│ │ │ ├── node-js-language.md -│ │ │ ├── node-package-manager.md -│ │ │ ├── node-repl.md -│ │ │ ├── node-run-cli.md -│ │ │ ├── nodejs.md -│ │ │ ├── nodevsbrowser.md -│ │ │ ├── npm.md -│ │ │ ├── npx.md -│ │ │ ├── os-module.md -│ │ │ ├── reading-files.md -│ │ │ ├── semantic-html.md -│ │ │ ├── semantic.md -│ │ │ ├── the-uniform-resource-locator-(url).md -│ │ │ ├── understanding-firebase.md -│ │ │ ├── v8.md -│ │ │ ├── web-standards-checklist.md -│ │ │ ├── webdev-tools.md -│ │ │ └── writing-files.md -│ │ ├── audio -│ │ │ ├── audio-feature-extraction.md -│ │ │ ├── audio.md -│ │ │ ├── dfft.md -│ │ │ ├── discrete-fft.md -│ │ │ ├── dtw-python-explained.md -│ │ │ ├── dynamic-time-warping.md -│ │ │ ├── index.md -│ │ │ └── web-audio-api.md -│ │ ├── career -│ │ │ ├── dev-interview.md -│ │ │ ├── index.md -│ │ │ ├── interview-dos-n-donts.md -│ │ │ └── job-boards.md -│ │ ├── community -│ │ │ ├── an-open-letter-2-future-developers.md -│ │ │ ├── index.md -│ │ │ └── video-chat.md -│ │ ├── content -│ │ │ ├── algo.md -│ │ │ ├── archive.md -│ │ │ ├── gatsby-Queries-Mutations.md -│ │ │ ├── history-api.md -│ │ │ ├── index.md -│ │ │ ├── main-projects.md -│ │ │ └── trouble-shooting.md -│ │ ├── data-structures -│ │ │ └── index.md -│ │ ├── docs -│ │ │ ├── appendix.md -│ │ │ ├── art-of-command-line.md -│ │ │ ├── bash.md -│ │ │ ├── content.md -│ │ │ ├── css.md -│ │ │ ├── data-structures-docs.md -│ │ │ ├── es-6-features.md -│ │ │ ├── git-reference.md -│ │ │ ├── git-repos.md -│ │ │ ├── html-spec.md -│ │ │ ├── index.md -│ │ │ ├── markdown.md -│ │ │ ├── no-whiteboarding.md -│ │ │ ├── node-docs-complete.md -│ │ │ ├── node-docs-full.md -│ │ │ ├── regex-in-js.md -│ │ │ └── sitemap.md -│ │ ├── faq -│ │ │ ├── contact.md -│ │ │ ├── index.md -│ │ │ └── plug-ins.md -│ │ ├── gists.md -│ │ ├── index.md -│ │ ├── interact -│ │ │ ├── callstack-visual.md -│ │ │ ├── clock.md -│ │ │ ├── index.md -│ │ │ ├── jupyter-notebooks.md -│ │ │ ├── other-sites.md -│ │ │ └── video-chat.md -│ │ ├── interview -│ │ │ ├── index.md -│ │ │ ├── job-search-nav.md -│ │ │ └── review-concepts.md -│ │ ├── javascript -│ │ │ ├── arrow-functions.md -│ │ │ ├── asyncjs.md -│ │ │ ├── await-keyword.md -│ │ │ ├── bigo.md -│ │ │ ├── clean-code.md -│ │ │ ├── constructor-functions.md -│ │ │ ├── index.md -│ │ │ ├── promises.md -│ │ │ ├── review.md -│ │ │ └── this-is-about-this.md -│ │ ├── leetcode -│ │ │ └── index.md -│ │ ├── privacy-policy.md -│ │ ├── projects -│ │ │ ├── embeded-websites.md -│ │ │ ├── index.md -│ │ │ ├── list-of-projects.md -│ │ │ ├── mini-projects.md -│ │ │ └── my-websites.md -│ │ ├── python -│ │ │ ├── at-length.md -│ │ │ ├── cheat-sheet.md -│ │ │ ├── comprehensive-guide.md -│ │ │ ├── examples.md -│ │ │ ├── flow-control.md -│ │ │ ├── functions.md -│ │ │ ├── google-sheets-api.md -│ │ │ ├── index.md -│ │ │ ├── intro-for-js-devs.md -│ │ │ ├── python-ds.md -│ │ │ └── snippets.md -│ │ ├── quick-reference -│ │ │ ├── Emmet.md -│ │ │ ├── all-emojis.md -│ │ │ ├── create-react-app.md -│ │ │ ├── git-bash.md -│ │ │ ├── git-tricks.md -│ │ │ ├── google-firebase.md -│ │ │ ├── heroku-error-codes.md -│ │ │ ├── index.md -│ │ │ ├── installation.md -│ │ │ ├── markdown-dropdowns.md -│ │ │ ├── minifiction.md -│ │ │ ├── new-repo-instructions.md -│ │ │ ├── psql-setup.md -│ │ │ ├── pull-request-rubric.md -│ │ │ ├── quick-links.md -│ │ │ ├── topRepos.md -│ │ │ ├── understanding-path.md -│ │ │ └── vscode-themes.md -│ │ ├── react -│ │ │ ├── ajax-n-apis.md -│ │ │ ├── cheatsheet.md -│ │ │ ├── createReactApp.md -│ │ │ ├── demo.md -│ │ │ ├── dont-use-index-as-keys.md -│ │ │ ├── index.md -│ │ │ ├── jsx.md -│ │ │ ├── react-docs.md -│ │ │ ├── react-in-depth.md -│ │ │ ├── react2.md -│ │ │ └── render-elements.md -│ │ ├── reference -│ │ │ ├── awesome-lists.md -│ │ │ ├── awesome-static.md -│ │ │ ├── bash-commands.md -│ │ │ ├── bookmarks.md -│ │ │ ├── embed-the-web.md -│ │ │ ├── github-search.md -│ │ │ ├── google-cloud.md -│ │ │ ├── how-2-reinstall-npm.md -│ │ │ ├── how-to-kill-a-process.md -│ │ │ ├── index.md -│ │ │ ├── installing-node.md -│ │ │ ├── intro-to-nodejs.md -│ │ │ ├── notes-template.md -│ │ │ ├── psql.md -│ │ │ ├── resources.md -│ │ │ ├── vscode.md -│ │ │ └── web-api's.md -│ │ ├── search.md -│ │ ├── sitemap.md -│ │ ├── tips -│ │ │ ├── array-methods.md -│ │ │ ├── index.md -│ │ │ └── insert-into-array.md -│ │ ├── tools -│ │ │ ├── Archive.md -│ │ │ ├── data-structures.md -│ │ │ ├── dev-utilities.md -│ │ │ ├── index.md -│ │ │ └── markdown-html.md -│ │ └── tutorials -│ │ ├── enviorment-setup.md -│ │ └── index.md -│ ├── index.md -│ ├── privacy-policy.md -│ ├── readme.md -│ └── showcase.md -├── sass -│ ├── imports -│ │ ├── _animations.scss -│ │ ├── _buttons.scss -│ │ ├── _docs.scss -│ │ ├── _footer.scss -│ │ ├── _forms.scss -│ │ ├── _functions.scss -│ │ ├── _general.scss -│ │ ├── _header.scss -│ │ ├── _helpers.scss -│ │ ├── _icons.scss -│ │ ├── _palettes.scss -│ │ ├── _posts.scss -│ │ ├── _prism.scss -│ │ ├── _reset.scss -│ │ ├── _sections.scss -│ │ ├── _structure.scss -│ │ ├── _tables.scss -│ │ └── _variables.scss -│ └── main.scss -├── templates -│ ├── advanced.js -│ ├── blog.js -│ ├── docs.js -│ ├── page.js -│ ├── post.js -│ └── templates.md -└── utils - ├── attribute.js - ├── blm-badge.js - ├── classNames.js - ├── cycler.js - ├── getData.js - ├── getPage.js - ├── getPageByFilePath.js - ├── getPages.js - ├── htmlToReact.js - ├── index.js - ├── link.js - ├── markdownify.js - ├── pathJoin.js - ├── toStyleObj.js - ├── toUrl.js - └── withPrefix.js - -32 directories, 272 files -``` - -
- -
- Click To See Component Sourcecode - -# Component Structure - -``` -. -├── ActionLink.js -├── CtaButtons.js -├── DarkToggle -│ ├── index.js -│ └── styles.js -├── DocsMenu.js -├── DocsSubmenu.js -├── Footer.js -├── Header.js -├── Icon.js -├── Layout.js -├── SectionContent.js -├── SectionCta.js -├── SectionDocs.js -├── SectionGrid.js -├── SectionHero.js -├── Submenu.js -├── global.css -└── index.js - -``` - ---- - -```js -// -import React from 'react'; -import _ from 'lodash'; - -import { Link, withPrefix, classNames } from '../utils'; -import Icon from './Icon'; - -export default class ActionLink extends React.Component { - render() { - let action = _.get(this.props, 'action', null); - return ( - - {_.get(action, 'style', null) === 'icon' && _.get(action, 'icon_class', null) ? ( - - - {_.get(action, 'label', null)} - - ) : ( - _.get(action, 'label', null) - )} - - ); - } -} -``` - ---- - -```js -// -import React from 'react'; -import _ from 'lodash'; - -import { Link, withPrefix, classNames } from '../utils'; - -export default class CtaButtons extends React.Component { - render() { - let actions = _.get(this.props, 'actions', null); - return _.map(actions, (action, action_idx) => ( - - {_.get(action, 'label', null)} - - )); - } -} -``` - ---- - -```js -// -import React from 'react'; -import _ from 'lodash'; - -import { getPage, classNames, Link, withPrefix, pathJoin, getPages } from '../utils'; -import DocsSubmenu from './DocsSubmenu'; - -export default class DocsMenu extends React.Component { - render() { - let site = _.get(this.props, 'site', null); - let page = _.get(this.props, 'page', null); - let root_docs_path = _.get(site, 'data.doc_sections.root_docs_path', null); - let root_page = getPage(this.props.pageContext.pages, root_docs_path); - return ( - - ); - } -} -``` - ---- - -```js -// -import React from 'react'; -import _ from 'lodash'; - -import { classNames, Link, withPrefix } from '../utils'; - -export default class DocsSubmenu extends React.Component { - render() { - let child_pages = _.get(this.props, 'child_pages', null); - let page = _.get(this.props, 'page', null); - return ( - - ); - } -} -``` - ---- - -```js -// -import _ from 'lodash'; -import React from 'react'; -import { htmlToReact } from '../utils'; -import ActionLink from './ActionLink'; -import addScript from './../hooks/addScript'; -const Script = (props) => { - importScript('./../hooks/addScript.js'); -}; -export default class Footer extends React.Component { - render() { - return ( - - ); - } -} -``` - ---- - -```js -// -import React from 'react'; -import _ from 'lodash'; - -import { Link, withPrefix, classNames } from '../utils'; -import ActionLink from './ActionLink'; -import Submenu from './Submenu'; - -export default class Header extends React.Component { - render() { - return ( -
- {/* */} - -
- -
-
-
- {_.get(this.props, 'pageContext.site.siteMetadata.header.logo_img', null) ? ( -

- - {_.get(this.props, - -

- ) : ( -

- {' '} - WebDevHub - - {_.get(this.props, 'pageContext.site.siteMetadata.header.title', null)} - -

- )} -
- - {_.get(this.props, 'pageContext.site.siteMetadata.header.has_nav', null) && ( - - - - - )} -
-
- -
- - - -
-
- ); - } -} -``` - ---- - -```js -// -import React from 'react'; -import _ from 'lodash'; - -export default class Icon extends React.Component { - render() { - let icon = _.get(this.props, 'icon', null); - return ( - - {icon === 'dev' ? ( - - ) : icon === 'facebook' ? ( - - ) : icon === 'github' ? ( - - ) : icon === 'instagram' ? ( - - ) : icon === 'linkedin' ? ( - - ) : icon === 'pinterest' ? ( - - ) : icon === 'reddit' ? ( - - ) : icon === 'twitter' ? ( - - ) : icon === 'youtube' ? ( - - ) : ( - icon === 'vimeo' && ( - - ) - )} - - ); - } -} +```bash +npm run dev +# or +yarn dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. diff --git a/docs/images/github.svg b/docs/images/github.svg old mode 100755 new mode 100644 diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index f14b258902..0000000000 --- a/docs/index.html +++ /dev/null @@ -1,3575 +0,0 @@ - - - - - - - Bgoonzblog2 - - - - - - - - - - - -
- -
-
-

Introduction

-
-
- - # ⇨WEBSITE🗺️⇦ - - ### Github Org Link - - #### Repo-Wiki - -
- -
-

CHANGELOG

-
- -
⇨Cloudfare-Backup⇦ 🌎 ⇨ search⇦ 🌎 ⇨ Backup Repo Deploy⇦ 🌎 ⇨ Github pages⇦ 🌎 ⇨ Go To Site Wiki⇦ 🌎 ⇨ Gatsby Cloud Version⇦ 🌎 ⇨ Vercel Version⇦ 🌎 ⇨ Cloudfare-Domain⇦ 🌎 ⇨ gh-pages⇦
- -

Repos

- -
⇨Privacy policy⇦
-

Netlify StatusCodeFactor

-

GitHub visitors

-
-

preview

- 

-npm i @stackbit/gatsby-plugin-menus babel-runtime chokidar classnames fs-extra gatsby gatsby-image gatsby-plugin-netlify gatsby-plugin-netlify-cms gatsby-plugin-sass gatsby-plugin-react-helmet gatsby-plugin-typescript  --legacy-peer-deps
-
-
-
-
-

[Post processing](https://app.netlify.com/sites/bgoonz-blog/settings/deploys#post-processing

-
-

)

-

Control the post processing and optimizations Netlify can do for you

-

Snippet injection

-

Inject analytics or other scripts into the HTML of your site.

-
    -
  • -

    before </body>

    -

    goback

    -
    • -
- 
    <input type="button" style="position: fixed;top: 10px;right: 10px;width:80px;color:white;font-weight:bold;background-color:rgba(0, 0, 0, 0.856); border-radius:15px;" value="Go Back" onclick="history.back(-1)" />
-          <?php
-            $url = htmlspecialchars($_SERVER['HTTP_REFERER']);
-            echo "<a href='$url'></a>
-
-
-
-
    -
  • -

    before </body>

    -

    addthis

    -
    • -
- 
    <!-- Go to www.addthis.com/dashboard to customize your tools -->
-    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-60dcec1ece575946"></script>
-
-
-
-
    -
  • -

    before </body>

    -

    mobil-qr

    -
    • -
- 
    <a  href="https://bgoonzblog20master.gatsbyjs.io/"><img src="https://qrickit.com/api/qr.php?d=https%3A%2F%2Fbgoonzblog20master.gatsbyjs.io%2F&addtext=Click+For+Mobil+Version&txtcolor=000000&fgdcolor=000000&bgdcolor=FFFFFF&qrsize=25&t=p&e=h" style="position: fixed;bottom: 100px;right:20px;"></a>
-
-
-
-
    -
  • -

    before </head>

    -

    ukraine

    -
    • -
- 
    <script id="help-ukraine-win" async="true" src="https://helpukrainewinwidget.org/cdn/widget.js?type=four&position=middle-right&layout=main"></script>
-
-
-
-
    -
  • -

    before </head>

    -

    google analytics tag

    -
    • -
- 
    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-90VG64DEP3"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'G-90VG64DEP3');
-    </script>
-
-
-
-
    -
  • -

    before </head>

    -

    algolia

    -
    • -
- 
html
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
-    <script type="text/javascript">
-      algoliasearchNetlify({
-        appId: 'N6ETRP7SGS',
-        apiKey: '4481f47882b21c3b05de5780fe166222',
-        siteId: 'a1b7ee1a-11a7-4bd2-a341-2260656e216f',
-        branch: 'master',
-        selector: 'div#search',
-      });
-    </script>
-
-
-
-
    -
  • -

    before </body>

    -

    pdf2

    -
    • -
- 
    <a href="//pdfcrowd.com/url_to_pdf/?"
-       onclick="if(!this.p)href+='&url='+encodeURIComponent(location.href);this.p=1">
-       Save to PDF
-    </a>
-
-
-
-
    -
  • -

    before </head>

    -

    algolia

    -
    • -
- 
    <script type="text/javascript">
-      algoliasearchNetlify({
-        appId: '949NYEDSIQ',
-        apiKey: '4481f47882b21c3b05de5780fe166222',
-        siteId: '865c330e-e1e9-40b8-8420-bf603640b0fe',
-        branch: 'master',
-        selector: 'div#search',
-      });
-    </script>
-
-
-
-
    -
  • -

    before </body>

    -

    fb-sdk

    -
    • -
- 
    <div id="fb-root"></div>
-    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v14.0&appId=951130702132399&autoLogAppEvents=1" nonce="C29xl8PQ"></script>
-
-
-
-

Learn more about snippet injection in the docs

-

Add snippet

-
-

Foo

-

-

-

-
-

webdevhub logo

-

Open Menu

- -

Close Menu

-

_🔎_

-

Search

-

I am a musician, electrical engineer & web developer

-

Please note that this website is in development and is often broken!

-

gmaillinkedin

-

-

NetlifyStatus

-

Bryansgithubactivitygraph

-

Jokes

-

Python HTML CSS JavaScript React Node.js

-

VisualStudioCode Docker MongoDB PostgreSQL

-

Git GitHub GitLab

-

Markdown

-

Contact

-

-

A Quick Guide To Big O

-

Memoization, Tabulation, and Sorting Algorithms by Example↩ Why is looking at runtime not a reliable method of calculating time↩ complexity?

-

View Post

-

python

-

Python Guide

-

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" .

-

View Posts

-

-

Guitar Effects Triggering w DTW

-

Learn More

-

img of dtw

-

Beginner Guide React

-

As I learn to build web applications in React I will blog about it in↩ this series in an attempt to capture the questions that a complete↩ beginner might encounter that a more seasoned developer would take for↩ granted!

-

img of react

-

Scope & Closure

-

Scope & Context in JS

-

The scope of a program in JavaScript is the set of variables that are available for use within the program.

-

scope and closure

-

Web Audio Daw

-

PostgreSQL Cheat Sheet, Everything You Need to View Post With VSCode

-
    -
  • Extensions & Resources, Super Simple Intro To HTML, Understanding↩ Git... etc....
    • -
-
-

Current Interests

-
-

From github repositories to existential questions.

-

angolia

-

Angolia

-
-

Full Text Search

-
-

Full Text Search

-

neural networks

-

Convolutional Neural Networks

-

Artificial neural networks, usually simply called neural networks, are computing systems vaguely inspired by the biological neural networks

-

jamstack

-

Jamstack

-
Why Jamstack Jamstack is the new standard architecture for the
-

web. Using Git workflows and modern build tools, pre-rendered content↩ is served to a CDN and made dynamic through APIs and serverless↩ functions. Technologies in the stack include JavaScript frameworks,↩ Static Site Generators, Headless CMSs, and CDNs.

-

event loop

-

Asynchronous JavaScript

-

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.

-

Learn More

-

nj-devils

-

NJ Devils

-

New Jersey Devils Hockey Team

-

(Hockey in general)

-
-

Team identity

-
-

-

The old green style jerseys used from 1982 to 1992The jerseys used from 1992 to 2017Sean Avery of the New York Rangers attempts to distract Brodeur during the 2008 Stanley Cup playoffs. The playoff series was the fifth to feature the Devils-Rangers rivalry.

-

Learn More

-

ITER Reactor

-

ITER Fusion Reactor Experiment (Southern France)

-

Break Even Nuclear Fusion Candidate

-

In December, researchers at the Joint European Torus (JET) started↩ conducting fusion experiments with tritium — a rare and radioactive↩ isotope of hydrogen. The facility is a one-tenth-volume mock-up of the↩ US\$22-billion ITER project and has the same doughnut-shaped 'tokamak'↩ design — the world's most developed approach to fusion energy. It is↩ the first time since 1997 that researchers have done experiments in a↩ tokamak with any significant amount of tritium.

-
-

Resume & Portfolio

-
-

-

Resume

-

View In One Drive Web Version Download PDF

-

portfolio of websites

-

Showcase

-

My ProjectsMy Projects!

-

Learn More

-
-

Blog-Archive-And-Mini-Projects

-
-

animated gif

-
-

Latest & Greatest

-
-

Web Dev Utilitiy Tools

-
-

Tools Showcase

-
-

medium

-
-

Web Audio DA

-
-

Go To Web Audio Daw

-
- -
-

quick links home

-

About

-

Web-Dev-Hub is my personal blogand documentation site

-

Learn More

-

Articles

-

my web development articles

-

Learn More

-

Audio

-

Audio Projects and tools / web audio daw

-

Learn More

-

Archive

-

more tools that I have created or collaborated on.

-

Learn More

-

Career

-

Reference materials and descriptions of fundamental concepts as well as visua

-

Learn More

-

Community

-

We'd love it if you participate in the Libris community. Find out how to get connected.

-

Learn More

-

Content

-

In this section you'll learn how to add syntax highlighting, examples, callouts and much more.

-

Learn More

-

CSS

-

Learn More

-

Docs

-

Documentation

-

Learn More

-

Data Structures

-

In this section you'll learn how to add syntax highlighting, examples, callouts and much more.

-

Learn More

-

FAQ

-

In this section you'll find commonly asked questions regarding the Libris theme. If you have questions, don't hesitate to ask us directly.

-

Learn More

-

###

-

Learn More

-

###

-

Learn More

-

###

-

Learn More

-

Interact

-

Interactive examples and projects

-

Learn More

-

Javascript

-

Javascript articles and docs

-

Learn More

-

JS-Quick-Tips

-

Javascript articles and docs

-

Learn More

-

Leetcode

-

feel free to try the examples

-

Learn More

-

Netlify CMS

-

etlify 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.

-

Learn More

-

Overflow

-

feel free to try the examples

-

Learn More

-

Projects

-

We'd love it if you participate in the Web-Dev-Hubcommunity. Find out how to get connected.

-

Learn More

-

Python

-

Python

-

Learn More

-

QuickRef

-

In this section you'll find basic information about Web-Dev-Hub and how to use it.

-

Learn More

-

React

-

To make it easy to write documentation in plain Markdown, most React are styled using Markdown elements with few additional CSS classes.

-

Learn More

-

Reference

-

helpful reference guides

-

Learn More

-

Tips

-

Learn More

-

Tools

-

See some interesting tools developed by the Web-Dev-Hubcommunity to help automate parts of your workflow.

-

Learn More

-

Tutorials

-

Walkthroughs of various development activities and skills

-

Learn More

-
-

Contact

-
-

get in touch! +1 (551) - 254 - 5505

-

Contact

-

index

-

sitemap

-

advanced

-

search engine byfreefind

-

Save to PDF

-

webdevhub logo

-

@bgoonz on almost every platform BLM

-

Twitter LinkedIn GitHub Youtube Instagram dev.to

-
-
- - Bash Commands -
-

My Commands

-
-

# Find

-
-

To find files by case-insensitive extension (ex: .jpg, .jpg, .jpG)

-

find . -iname "*.jpg"

-

To find directories

-

find . -type d

-

To find files

-

find . -type f

-

To find files by octal permission

-

find . -type f -perm 777

-

To find files with setuid bit set

-

find . -xdev ( -perm -4000 ) -type f -print0 | xargs -0 ls -l

-

To find files with extension '.txt' and remove them

-

find ./path/ -name '*.txt' -exec rm '{}' \;

-

To find files with extension '.txt' and look for a string into them

-

find ./path/ -name '*.txt' | xargs grep 'string'

-

To find files with size bigger than 5 Mebibyte and sort them by size

-

find . -size +5M -type f -print0 | xargs -0 ls -Ssh | sort -z

-

To find files bigger than 2 Megabyte and list them

-

find . -type f -size +200000000c -exec ls -lh {} \; | awk '{ print $9 ": " $5 }'

-

To find files modified more than 7 days ago and list file information

-

find . -type f -mtime +7d -ls

-

To find symlinks owned by a user and list file information

-

find . -type l -user -ls

-

To search for and delete empty directories

-

find . -type d -empty -exec rmdir {} \;

-

To search for directories named build at a max depth of 2 directories

-

find . -maxdepth 2 -name build -type d

-

To search all files who are not in .git directory

-

find . ! -iwholename '.git' -type f

-

To find all files that have the same node (hard link) as MY_FILE_HERE

-

find . -type f -samefile MY_FILE_HERE 2> /dev/null

-

To find all files in the current directory and modify their permissions

-

find . -type f -exec chmod 644 {} \;

-

1. Remove spaces from file and folder names and then remove numbers from files and folder names

-
-

Description: need to : `sudo apt install rename

-
-

`

-
-

Notes: Issue when renaming file without numbers collides with existing file name...

-
-
-

# code

-
-

:

- 
//
-//APPEND-DIR.js
-const fs = require('fs');
-let cat = require('child_process')
-  .execSync('cat *')
-  .toString('UTF-8');
-fs.writeFile('output.md', cat, err =>  {
-  if (err) throw err;
-});
-
-
-
-

2. Download Website Using Wget

-
-

Description: combine the contents of every file in the contaning directory

-
-
-

Notes: this includes the contents of the file it's self...

-
-
-

Description

-
-
-

Notes:

-
-
-

## code

-
- 

-find . -name *right.html  -type f -exec sed -i 's/target="_parent"//g' {} +
-
-find . -name *right.html  -type f -exec sed -i 's/target="_parent"//g' {} +
-
-
-

-

-

-
-

Preview

- - -
-
-

Notes: To clear up clutter in repositories that only get used on your local machine.

-
-
-

Description: clone all of a user or organization's git repositories

-
-
-

Notes:

-
-
-

Description: recursively unzips folders and then deletes the zip file by the same name

-
-
-

Notes:

-
-
-

Description: my standard repo utis package

-
-
-

Notes:

-
-
-

Description: followed by replace `'#' with '_'` in directory name

-
-
-

Notes: Can be re-purposed to find and replace any set of strings in file or folder names.

-
-
-

Description: Creates an index.html file that contains all the files in the working directory or any of it's sub folders as iframes instead of anchor tags

-
-
-

Notes: Useful Follow up Code:

-
- 

-
-
-

Description: To remove a submodule you need to

-
-
-

Notes:

-
-
-

Delete the relevant section from the .gitmodules file. - Stage the .gitmodules changes git add .gitmodules - Delete the relevant section from .git/config. - Run git rm --cached path_to_submodule (no trailing slash). - Run rm -rf .git/modules/path_to_submodule (no trailing slash). - Commit git commit -m "Removed submodule " - Delete the now untracked submodule files rm -rf path_to_submodule

-
-
-

Description: ES5 --> ES6

-
-
-

Notes:

-
-
-

Description: Open Powershell as Administrator

-
-
-

Notes:

-
-
-

Description: In the example below I am using this command to remove the string "-master" from all file names in the working directory and all of it's sub directories

-
-

Description: replaces spaces in file and folder names with an `_` underscore

-
-
-

Notes: need to run sudo apt install rename to use this command

-
-
-

Description: to working directory

-
-
-

Notes:

-
-
-

Description: rename existing readme to blueprint.md

-
-
-

Notes:

-
-
-

Technologies Used

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
URLhttps://bgoonz-blog.netlify.app
Miscellaneouswebpack ; Prism
WidgetsFacebook ; AddThis
AnalyticsMoat ; Google Analytics ; Google Ads Conversion Tracking
Comment systemsFacebook API & REPL.it Database
SecurityNetlify Access
Font scriptsGoogle Font API
CDNUnpkg ; jsDelivr ; jQuery CDN ; Netlify
Marketing automationMailChimp
AdvertisingGoogle AdSense
Tag managersGoogle Tag Manager
Live chatSmartsupp ; LiveChat : Mesibo API
JavaScript librariesLodash ; Dojo ; core-js ; jQuery
-

-

-

-
-

96. URL To Subscribe To YouTube Channel

- -

Wiki Nav

-
- -
-
-

Dependencies

-
-
- Click to expand! - - @algolia**algolia / algoliasearch-client-javascript@algolia/client-search - ^ 4.10.3 - - @algolia**algolia / algoliasearch-client-javascript@algolia/client-common - 4.10.5 - - @ghost**@algolia/requester-common - 4.10.5 - - @algolia**algolia / algoliasearch-client-javascript@algolia/transporter - 4.10.5 - - @stackbit**stackbit / gatsby-plugin-menus@stackbit/gatsby-plugin-menus - 0.0.4 - - @facebook**facebook / jestbabel-jest - ^ 24.7.1 - - @gatsbyjs**gatsbyjs / gatsbybabel-preset-gatsby - ^ 0.1.11 - - @gatsbyjs**gatsbyjs / gatsby ^ 2.5.0 - - @keyz**keyz / identity-obj-proxy ^ 3.0.0 - - @facebook**facebook / jest ^ 24.7.1 - - @lodash**lodash / lodash ^ 4.17.11 - - @facebook**facebook / reactreact-test-renderer - ^ 16.8.6 - - @getkirby-v2**getkirby-v2 / algolia-pluginalgolia - 0.0.0 - - @ecomfe**ecomfe / babel-runtime 6.26.0 - - @paulmillr**paulmillr / chokidar 3.4.0 - - @DefinitelyTyped**DefinitelyTyped / DefinitelyTyped@types/node - ^ 13 - - @micromatch**micromatch / anymatch ~ 3.1.1 - - @micromatch**micromatch / braces ~ 3.0.2 - - @chaijs**chaijs / chai ^ 4.2 - - @microsoft**microsoft / dtslint ^ 3.3.0 - - @eslint**eslint / eslint ^ 6.6.0 - - @fsevents**fsevents / fsevents ~ 2.1.2 - - @gulpjs**gulpjs / glob-parent ~ 5.1.0 - - @sindresorhus**sindresorhus / is-binary-path ~ 2.1.0 - - @micromatch**micromatch / is-glob ~ 4.0.1 - - @mochajs**mochajs / mocha ^ 7.0.0 - - @jonschlinkert**jonschlinkert / normalize-path ~ 3.0.0 - - @istanbuljs**istanbuljs / nyc ^ 15.0.0 - - @paulmillr**paulmillr / readdirp ~ 3.4.0 - - @isaacs**isaacs / rimraf ^ 3.0.0 - - @sinonjs**sinonjs / sinon ^ 9.0.1 - - @domenic**domenic / sinon-chai ^ 3.3.0 - - @anodynos**anodynos / upath ^ 1.2.0 - - @JedWatson**JedWatson / classnames 2.2.6 - - @bestiejs**bestiejs / benchmark.jsbenchmark - ^ 1.0.0 - - @browserify**browserify / browserify ^ 14.1.0 - - @mochajs**mochajs / mocha ^ 2.1.0 - - @jeromedecoster**jeromedecoster / opn-cli ^ 3.1.0 - - @documentationjs**documentationjs / documentation ^ 13.2.5 - - @babel**babel / babel@babel/core - 7.12.3 - - Cloudfare-Backup ↞↠ Search Website: search ↞↠ Backup Repo Deploy ↞↠ Github pages ↞↠ Go To Site Wiki - -
- -
-
-

Docs Structure

-
-
- Docs Structure - - ├── blog - │ ├── 300-react-questions.md - │ ├── awesome-graphql.md - │ ├── big-o-complexity.md - │ ├── blog-archive.md - │ ├── blogwcomments.md - │ ├── data-structures.md - │ ├── flow-control-in-python.md - │ ├── functions-in-python.md - │ ├── git-gateway.md - │ ├── index.md - │ ├── interview-questions-js.md - │ ├── netlify-cms.md - │ ├── platform-docs.md - │ ├── python-for-js-dev.md - │ ├── python-resources.md - │ ├── web-dev-trends.md - │ └── web-scraping.md - ├── docs - │ ├── about - │ │ ├── eng-portfolio.md - │ │ ├── ideas-for-this-website.md - │ │ ├── index.md - │ │ ├── intrests.md - │ │ ├── job-search.md - │ │ └── resume.md - │ ├── articles - │ │ ├── basic-web-dev.md - │ │ ├── buffers.md - │ │ ├── dev-dep.md - │ │ ├── event-loop.md - │ │ ├── fs-module.md - │ │ ├── how-the-web-works.md - │ │ ├── http.md - │ │ ├── index.md - │ │ ├── install.md - │ │ ├── intro.md - │ │ ├── modules.md - │ │ ├── nextjs.md - │ │ ├── node-api-express.md - │ │ ├── node-cli-args.md - │ │ ├── node-common-modules.md - │ │ ├── node-env-variables.md - │ │ ├── node-js-language.md - │ │ ├── node-package-manager.md - │ │ ├── node-repl.md - │ │ ├── node-run-cli.md - │ │ ├── nodejs.md - │ │ ├── nodevsbrowser.md - │ │ ├── npm.md - │ │ ├── npx.md - │ │ ├── os-module.md - │ │ ├── reading-files.md - │ │ ├── semantic-html.md - │ │ ├── semantic.md - │ │ ├── the-uniform-resource-locator-(url).md - │ │ ├── understanding-firebase.md - │ │ ├── v8.md - │ │ ├── web-standards-checklist.md - │ │ ├── webdev-tools.md - │ │ └── writing-files.md - │ ├── audio - │ │ ├── audio-feature-extraction.md - │ │ ├── audio.md - │ │ ├── dfft.md - │ │ ├── discrete-fft.md - │ │ ├── dtw-python-explained.md - │ │ ├── dynamic-time-warping.md - │ │ ├── index.md - │ │ └── web-audio-api.md - │ ├── career - │ │ ├── dev-interview.md - │ │ ├── index.md - │ │ ├── interview-dos-n-donts.md - │ │ └── job-boards.md - │ ├── community - │ │ ├── an-open-letter-2-future-developers.md - │ │ ├── index.md - │ │ └── video-chat.md - │ ├── content - │ │ ├── algo.md - │ │ ├── archive.md - │ │ ├── gatsby-Queries-Mutations.md - │ │ ├── history-api.md - │ │ ├── index.md - │ │ ├── main-projects.md - │ │ └── trouble-shooting.md - │ ├── data-structures - │ │ └── index.md - │ ├── docs - │ │ ├── appendix.md - │ │ ├── art-of-command-line.md - │ │ ├── bash.md - │ │ ├── content.md - │ │ ├── css.md - │ │ ├── data-structures-docs.md - │ │ ├── es-6-features.md - │ │ ├── git-reference.md - │ │ ├── git-repos.md - │ │ ├── html-spec.md - │ │ ├── index.md - │ │ ├── markdown.md - │ │ ├── no-whiteboarding.md - │ │ ├── node-docs-complete.md - │ │ ├── node-docs-full.md - │ │ ├── regex-in-js.md - │ │ └── sitemap.md - │ ├── faq - │ │ ├── contact.md - │ │ ├── index.md - │ │ └── plug-ins.md - │ ├── gists.md - │ ├── index.md - │ ├── interact - │ │ ├── callstack-visual.md - │ │ ├── clock.md - │ │ ├── index.md - │ │ ├── jupyter-notebooks.md - │ │ ├── other-sites.md - │ │ └── video-chat.md - │ ├── interview - │ │ ├── index.md - │ │ ├── job-search-nav.md - │ │ └── review-concepts.md - │ ├── javascript - │ │ ├── arrow-functions.md - │ │ ├── asyncjs.md - │ │ ├── await-keyword.md - │ │ ├── bigo.md - │ │ ├── clean-code.md - │ │ ├── constructor-functions.md - │ │ ├── index.md - │ │ ├── promises.md - │ │ ├── review.md - │ │ └── this-is-about-this.md - │ ├── leetcode - │ │ └── index.md - │ ├── privacy-policy.md - │ ├── projects - │ │ ├── embeded-websites.md - │ │ ├── index.md - │ │ ├── list-of-projects.md - │ │ ├── mini-projects.md - │ │ └── my-websites.md - │ ├── python - │ │ ├── at-length.md - │ │ ├── cheat-sheet.md - │ │ ├── comprehensive-guide.md - │ │ ├── examples.md - │ │ ├── flow-control.md - │ │ ├── functions.md - │ │ ├── google-sheets-api.md - │ │ ├── index.md - │ │ ├── intro-for-js-devs.md - │ │ ├── python-ds.md - │ │ └── snippets.md - │ ├── quick-reference - │ │ ├── Emmet.md - │ │ ├── all-emojis.md - │ │ ├── create-react-app.md - │ │ ├── git-bash.md - │ │ ├── git-tricks.md - │ │ ├── google-firebase.md - │ │ ├── heroku-error-codes.md - │ │ ├── index.md - │ │ ├── installation.md - │ │ ├── markdown-dropdowns.md - │ │ ├── minifiction.md - │ │ ├── new-repo-instructions.md - │ │ ├── psql-setup.md - │ │ ├── pull-request-rubric.md - │ │ ├── quick-links.md - │ │ ├── topRepos.md - │ │ ├── understanding-path.md - │ │ └── vscode-themes.md - │ ├── react - │ │ ├── ajax-n-apis.md - │ │ ├── cheatsheet.md - │ │ ├── createReactApp.md - │ │ ├── demo.md - │ │ ├── dont-use-index-as-keys.md - │ │ ├── index.md - │ │ ├── jsx.md - │ │ ├── react-docs.md - │ │ ├── react-in-depth.md - │ │ ├── react2.md - │ │ └── render-elements.md - │ ├── reference - │ │ ├── awesome-lists.md - │ │ ├── awesome-static.md - │ │ ├── bash-commands.md - │ │ ├── bookmarks.md - │ │ ├── embed-the-web.md - │ │ ├── github-search.md - │ │ ├── google-cloud.md - │ │ ├── how-2-reinstall-npm.md - │ │ ├── how-to-kill-a-process.md - │ │ ├── index.md - │ │ ├── installing-node.md - │ │ ├── intro-to-nodejs.md - │ │ ├── notes-template.md - │ │ ├── psql.md - │ │ ├── resources.md - │ │ ├── vscode.md - │ │ └── web-api's.md - │ ├── search.md - │ ├── sitemap.md - │ ├── tips - │ │ ├── array-methods.md - │ │ ├── index.md - │ │ └── insert-into-array.md - │ ├── tools - │ │ ├── Archive.md - │ │ ├── data-structures.md - │ │ ├── dev-utilities.md - │ │ ├── index.md - │ │ └── markdown-html.md - │ └── tutorials - │ ├── enviorment-setup.md - │ └── index.md - ├── index.md - ├── privacy-policy.md - ├── readme.md - ├── showcase.md - └── tree.md - - 23 directories, 202 files - - # SITEMAP - - - https://bgoonz-blog.netlify.app/ - - https://bgoonz-blog.netlify.app/admin - - https://bgoonz-blog.netlify.app/blog - - https://bgoonz-blog.netlify.app/blog/10-essential-react-interview-questions - - https://bgoonz-blog.netlify.app/blog/300-react-questions - - https://bgoonz-blog.netlify.app/blog/adding-css-to-your-html - - https://bgoonz-blog.netlify.app/blog/awesome-graphql - - https://bgoonz-blog.netlify.app/blog/beginners-guide-to-python - - https://bgoonz-blog.netlify.app/blog/big-o-complexity - - https://bgoonz-blog.netlify.app/blog/blog-archive - - https://bgoonz-blog.netlify.app/blog/code-playgrounds-of-2021 - - https://bgoonz-blog.netlify.app/blog/data-structures - - https://bgoonz-blog.netlify.app/blog/data-structures-algorithms-resources - - https://bgoonz-blog.netlify.app/blog/deploy-react-app-to-heroku - - https://bgoonz-blog.netlify.app/blog/embedding-media-in-html - - https://bgoonz-blog.netlify.app/blog/eslint-rules - - https://bgoonz-blog.netlify.app/blog/event-handeling - - https://bgoonz-blog.netlify.app/blog/expressjs-apis - - https://bgoonz-blog.netlify.app/blog/file-system-route-api - - https://bgoonz-blog.netlify.app/blog/flow-control-in-python - - https://bgoonz-blog.netlify.app/blog/front-end-interview-questions-part-2 - - https://bgoonz-blog.netlify.app/blog/functions-in-python - - https://bgoonz-blog.netlify.app/blog/gatsby-cli - - https://bgoonz-blog.netlify.app/blog/git-gateway - - https://bgoonz-blog.netlify.app/blog/google-analytics - - https://bgoonz-blog.netlify.app/blog/grep-in-linuz - - https://bgoonz-blog.netlify.app/blog/hoisting - - https://bgoonz-blog.netlify.app/blog/htt-requests - - https://bgoonz-blog.netlify.app/blog/interview-questions-js - - https://bgoonz-blog.netlify.app/blog/interview-questions-js-p2 - - https://bgoonz-blog.netlify.app/blog/interview-questions-js-p3 - - https://bgoonz-blog.netlify.app/blog/intro-01-data-structures - - https://bgoonz-blog.netlify.app/blog/intro-to-markdown - - https://bgoonz-blog.netlify.app/blog/jsx-in-depth - - https://bgoonz-blog.netlify.app/blog/netlify-cms - - https://bgoonz-blog.netlify.app/blog/passing-arguments-to-a-callback-in-js - - https://bgoonz-blog.netlify.app/blog/platform-docs - - https://bgoonz-blog.netlify.app/blog/psql-cheat-sheet - - https://bgoonz-blog.netlify.app/blog/python-for-js-dev - - https://bgoonz-blog.netlify.app/blog/python-quiz - - https://bgoonz-blog.netlify.app/blog/python-resources - - https://bgoonz-blog.netlify.app/blog/react-fragments - - https://bgoonz-blog.netlify.app/blog/react-semantics - - https://bgoonz-blog.netlify.app/blog/react-state - - https://bgoonz-blog.netlify.app/blog/useful-stock-images - - https://bgoonz-blog.netlify.app/blog/using-the-dom - - https://bgoonz-blog.netlify.app/blog/vs-code-extensions - - https://bgoonz-blog.netlify.app/blog/vscode-extensions - - https://bgoonz-blog.netlify.app/blog/web-dev-trends - - https://bgoonz-blog.netlify.app/blog/web-scraping - - https://bgoonz-blog.netlify.app/blog/webdev-setup - - https://bgoonz-blog.netlify.app/blog/what-is-a-redux-reducer - - https://bgoonz-blog.netlify.app/blog/wordpress-vs-headless-cms - - https://bgoonz-blog.netlify.app/docs - - https://bgoonz-blog.netlify.app/docs/about - - https://bgoonz-blog.netlify.app/docs/about/eng-portfolio - - https://bgoonz-blog.netlify.app/docs/about/internal-use - - https://bgoonz-blog.netlify.app/docs/about/intrests - - https://bgoonz-blog.netlify.app/docs/about/job-search - - https://bgoonz-blog.netlify.app/docs/about/readme - - https://bgoonz-blog.netlify.app/docs/about/resume - - https://bgoonz-blog.netlify.app/docs/archive - - https://bgoonz-blog.netlify.app/docs/archive/embeded-websites - - https://bgoonz-blog.netlify.app/docs/articles - - https://bgoonz-blog.netlify.app/docs/articles/buffers - - https://bgoonz-blog.netlify.app/docs/articles/common-modules - - https://bgoonz-blog.netlify.app/docs/articles/dev-dep - - https://bgoonz-blog.netlify.app/docs/articles/fs-module - - https://bgoonz-blog.netlify.app/docs/articles/how-search-engines-work - - https://bgoonz-blog.netlify.app/docs/articles/how-the-web-works - - https://bgoonz-blog.netlify.app/docs/articles/intro - - https://bgoonz-blog.netlify.app/docs/articles/jamstack - - https://bgoonz-blog.netlify.app/docs/articles/nextjs - - https://bgoonz-blog.netlify.app/docs/articles/node-api-express - - https://bgoonz-blog.netlify.app/docs/articles/npm - - https://bgoonz-blog.netlify.app/docs/articles/os-module - - https://bgoonz-blog.netlify.app/docs/articles/reading-files - - https://bgoonz-blog.netlify.app/docs/articles/semantic - - https://bgoonz-blog.netlify.app/docs/articles/semantic-html - - https://bgoonz-blog.netlify.app/docs/articles/url - - https://bgoonz-blog.netlify.app/docs/articles/web-standards-checklist - - https://bgoonz-blog.netlify.app/docs/articles/webdev-tools - - https://bgoonz-blog.netlify.app/docs/articles/writing-files - - https://bgoonz-blog.netlify.app/docs/audio - - https://bgoonz-blog.netlify.app/docs/audio/dfft - - https://bgoonz-blog.netlify.app/docs/audio/discrete-fft - - https://bgoonz-blog.netlify.app/docs/audio/dtw-python-explained - - https://bgoonz-blog.netlify.app/docs/audio/dynamic-time-warping - - https://bgoonz-blog.netlify.app/docs/audio/web-audio-api - - https://bgoonz-blog.netlify.app/docs/career - - https://bgoonz-blog.netlify.app/docs/career/job-boards - - https://bgoonz-blog.netlify.app/docs/career/my-websites - - https://bgoonz-blog.netlify.app/docs/career/projects - - https://bgoonz-blog.netlify.app/docs/community - - https://bgoonz-blog.netlify.app/docs/community/an-open-letter-2-future-developers - - https://bgoonz-blog.netlify.app/docs/community/bookmarks - - https://bgoonz-blog.netlify.app/docs/community/video-chat - - https://bgoonz-blog.netlify.app/docs/content - - https://bgoonz-blog.netlify.app/docs/content/algo - - https://bgoonz-blog.netlify.app/docs/content/archive - - https://bgoonz-blog.netlify.app/docs/content/data-structures-in-python - - https://bgoonz-blog.netlify.app/docs/content/gatsby-Queries-Mutations - - https://bgoonz-blog.netlify.app/docs/content/gists - - https://bgoonz-blog.netlify.app/docs/content/history-api - - https://bgoonz-blog.netlify.app/docs/content/javascript-examples - - https://bgoonz-blog.netlify.app/docs/content/main-projects - - https://bgoonz-blog.netlify.app/docs/content/native-data-structures-in-js - - https://bgoonz-blog.netlify.app/docs/content/trouble-shooting - - https://bgoonz-blog.netlify.app/docs/css - - https://bgoonz-blog.netlify.app/docs/css/css-selector-specificity - - https://bgoonz-blog.netlify.app/docs/css/media-querries - - https://bgoonz-blog.netlify.app/docs/css/the-box-model - - https://bgoonz-blog.netlify.app/docs/docs - - https://bgoonz-blog.netlify.app/docs/docs/appendix - - https://bgoonz-blog.netlify.app/docs/docs/archive - - https://bgoonz-blog.netlify.app/docs/docs/bash - - https://bgoonz-blog.netlify.app/docs/docs/css - - https://bgoonz-blog.netlify.app/docs/docs/git-reference - - https://bgoonz-blog.netlify.app/docs/docs/git-repos - - https://bgoonz-blog.netlify.app/docs/docs/glossary - - https://bgoonz-blog.netlify.app/docs/docs/html-tags - - https://bgoonz-blog.netlify.app/docs/docs/markdown - - https://bgoonz-blog.netlify.app/docs/docs/no-whiteboarding - - https://bgoonz-blog.netlify.app/docs/docs/node-docs-complete - - https://bgoonz-blog.netlify.app/docs/docs/privacy-policy - - https://bgoonz-blog.netlify.app/docs/docs/regex-in-js - - https://bgoonz-blog.netlify.app/docs/docs/sitemap - - https://bgoonz-blog.netlify.app/docs/ds-algo - - https://bgoonz-blog.netlify.app/docs/ds-algo/big-o - - https://bgoonz-blog.netlify.app/docs/ds-algo/data-structures-docs - - https://bgoonz-blog.netlify.app/docs/ds-algo/ds-algo-interview - - https://bgoonz-blog.netlify.app/docs/ds-algo/ds-by-example - - https://bgoonz-blog.netlify.app/docs/ds-algo/ds-overview - - https://bgoonz-blog.netlify.app/docs/ds-algo/free-code-camp - - https://bgoonz-blog.netlify.app/docs/ds-algo/graph - - https://bgoonz-blog.netlify.app/docs/ds-algo/heaps - - https://bgoonz-blog.netlify.app/docs/ds-algo/tree - - https://bgoonz-blog.netlify.app/docs/faq - - https://bgoonz-blog.netlify.app/docs/faq/contact - - https://bgoonz-blog.netlify.app/docs/faq/plug-ins - - https://bgoonz-blog.netlify.app/docs/fetch-api - - https://bgoonz-blog.netlify.app/docs/git/git - - https://bgoonz-blog.netlify.app/docs/git/git/github-tutorial - - https://bgoonz-blog.netlify.app/docs/interact - - https://bgoonz-blog.netlify.app/docs/interact/callstack-visual - - https://bgoonz-blog.netlify.app/docs/interact/clock - - https://bgoonz-blog.netlify.app/docs/interact/jupyter-notebooks - - https://bgoonz-blog.netlify.app/docs/interact/other-sites - - https://bgoonz-blog.netlify.app/docs/interact/react-testing-library - - https://bgoonz-blog.netlify.app/docs/interact/video-chat - - https://bgoonz-blog.netlify.app/docs/javascript - - https://bgoonz-blog.netlify.app/docs/javascript/arrow-functions - - https://bgoonz-blog.netlify.app/docs/javascript/asynchronous-javascript-and-xml - - https://bgoonz-blog.netlify.app/docs/javascript/asyncjs - - https://bgoonz-blog.netlify.app/docs/javascript/await-keyword - - https://bgoonz-blog.netlify.app/docs/javascript/bigo - - https://bgoonz-blog.netlify.app/docs/javascript/clean-code - - https://bgoonz-blog.netlify.app/docs/javascript/constructor-functions - - https://bgoonz-blog.netlify.app/docs/javascript/cs-basics-in-js - - https://bgoonz-blog.netlify.app/docs/javascript/for-loops - - https://bgoonz-blog.netlify.app/docs/javascript/javascript-resource-table - - https://bgoonz-blog.netlify.app/docs/javascript/js-expressions - - https://bgoonz-blog.netlify.app/docs/javascript/js-objects - - https://bgoonz-blog.netlify.app/docs/javascript/part2-pojo - - https://bgoonz-blog.netlify.app/docs/javascript/promises - - https://bgoonz-blog.netlify.app/docs/javascript/review - - https://bgoonz-blog.netlify.app/docs/javascript/snippets - - https://bgoonz-blog.netlify.app/docs/javascript/this-is-about-this - - https://bgoonz-blog.netlify.app/docs/javascript/variables - - https://bgoonz-blog.netlify.app/docs/js-tips - - https://bgoonz-blog.netlify.app/docs/js-tips/abs - - https://bgoonz-blog.netlify.app/docs/js-tips/acos - - https://bgoonz-blog.netlify.app/docs/js-tips/acosh - - https://bgoonz-blog.netlify.app/docs/js-tips/addition - - https://bgoonz-blog.netlify.app/docs/js-tips/all - - https://bgoonz-blog.netlify.app/docs/js-tips/allsettled - - https://bgoonz-blog.netlify.app/docs/js-tips/any - - https://bgoonz-blog.netlify.app/docs/js-tips/array - - https://bgoonz-blog.netlify.app/docs/js-tips/array-methods - - https://bgoonz-blog.netlify.app/docs/js-tips/arrow_functions - - https://bgoonz-blog.netlify.app/docs/js-tips/async_function - - https://bgoonz-blog.netlify.app/docs/js-tips/bad_radix - - https://bgoonz-blog.netlify.app/docs/js-tips/bind - - https://bgoonz-blog.netlify.app/docs/js-tips/classes - - https://bgoonz-blog.netlify.app/docs/js-tips/concat - - https://bgoonz-blog.netlify.app/docs/js-tips/conditional_operator - - https://bgoonz-blog.netlify.app/docs/js-tips/const - - https://bgoonz-blog.netlify.app/docs/js-tips/create - - https://bgoonz-blog.netlify.app/docs/js-tips/date - - https://bgoonz-blog.netlify.app/docs/js-tips/eval - - https://bgoonz-blog.netlify.app/docs/js-tips/every - - https://bgoonz-blog.netlify.app/docs/js-tips/filter - - https://bgoonz-blog.netlify.app/docs/js-tips/for...of - - https://bgoonz-blog.netlify.app/docs/js-tips/foreach - - https://bgoonz-blog.netlify.app/docs/js-tips/functions - - https://bgoonz-blog.netlify.app/docs/js-tips/import - - https://bgoonz-blog.netlify.app/docs/js-tips/insert-into-array - - https://bgoonz-blog.netlify.app/docs/js-tips/map - - https://bgoonz-blog.netlify.app/docs/js-tips/object - - https://bgoonz-blog.netlify.app/docs/js-tips/reduce - - https://bgoonz-blog.netlify.app/docs/js-tips/regexp - - https://bgoonz-blog.netlify.app/docs/js-tips/sort - - https://bgoonz-blog.netlify.app/docs/js-tips/sorting-strings - - https://bgoonz-blog.netlify.app/docs/js-tips/string - - https://bgoonz-blog.netlify.app/docs/js-tips/this - - https://bgoonz-blog.netlify.app/docs/js-tips/var - - https://bgoonz-blog.netlify.app/docs/leetcode - - https://bgoonz-blog.netlify.app/docs/leetcode/ContaineWitMosWater - - https://bgoonz-blog.netlify.app/docs/leetcode/DividTwIntegers - - https://bgoonz-blog.netlify.app/docs/leetcode/GeneratParentheses - - https://bgoonz-blog.netlify.app/docs/leetcode/LetteCombinationoPhonNumber - - https://bgoonz-blog.netlify.app/docs/leetcode/LongesCommoPrefix - - https://bgoonz-blog.netlify.app/docs/leetcode/MediaoTwSorteArrays - - https://bgoonz-blog.netlify.app/docs/leetcode/NexPermutation - - https://bgoonz-blog.netlify.app/docs/leetcode/PalindromNumber - - https://bgoonz-blog.netlify.app/docs/leetcode/RegulaExpressioMatching - - https://bgoonz-blog.netlify.app/docs/leetcode/RemovDuplicatefroSorteArray - - https://bgoonz-blog.netlify.app/docs/leetcode/RemovNtNodFroEnoList - - https://bgoonz-blog.netlify.app/docs/leetcode/RomatInteger - - https://bgoonz-blog.netlify.app/docs/leetcode/SearciRotateSorteArray - - https://bgoonz-blog.netlify.app/docs/leetcode/StrintIntege(atoi)>) - - https://bgoonz-blog.netlify.app/docs/leetcode/ValiParentheses - - https://bgoonz-blog.netlify.app/docs/leetcode/ZigZaConversion - - https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack - - https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack/get-started-with-gatsby - - https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack/jamstack-templates - - https://bgoonz-blog.netlify.app/docs/netlify-cms-jamstack/serverlessjs - - https://bgoonz-blog.netlify.app/docs/overflow - - https://bgoonz-blog.netlify.app/docs/overflow/emmet-cheat-sheet - - https://bgoonz-blog.netlify.app/docs/overflow/html-spec - - https://bgoonz-blog.netlify.app/docs/overflow/http - - https://bgoonz-blog.netlify.app/docs/overflow/install - - https://bgoonz-blog.netlify.app/docs/overflow/modules - - https://bgoonz-blog.netlify.app/docs/overflow/node-cli-args - - https://bgoonz-blog.netlify.app/docs/overflow/node-js-language - - https://bgoonz-blog.netlify.app/docs/overflow/node-package-manager - - https://bgoonz-blog.netlify.app/docs/overflow/node-repl - - https://bgoonz-blog.netlify.app/docs/overflow/node-run-cli - - https://bgoonz-blog.netlify.app/docs/overflow/nodejs - - https://bgoonz-blog.netlify.app/docs/overflow/nodevsbrowser - - https://bgoonz-blog.netlify.app/docs/overflow/understanding-firebase - - https://bgoonz-blog.netlify.app/docs/overflow/v8 - - https://bgoonz-blog.netlify.app/docs/privacy-policy - - https://bgoonz-blog.netlify.app/docs/projects - - https://bgoonz-blog.netlify.app/docs/projects/archive - - https://bgoonz-blog.netlify.app/docs/projects/archive/embeded-websites - - https://bgoonz-blog.netlify.app/docs/projects/links - - https://bgoonz-blog.netlify.app/docs/projects/mini-projects - - https://bgoonz-blog.netlify.app/docs/projects/mini-projects2 - - https://bgoonz-blog.netlify.app/docs/projects/recent - - https://bgoonz-blog.netlify.app/docs/python - - https://bgoonz-blog.netlify.app/docs/python/at-length - - https://bgoonz-blog.netlify.app/docs/python/cheat-sheet - - https://bgoonz-blog.netlify.app/docs/python/comprehensive-guide - - https://bgoonz-blog.netlify.app/docs/python/data-structures-in-python - - https://bgoonz-blog.netlify.app/docs/python/examples - - https://bgoonz-blog.netlify.app/docs/python/flow-control - - https://bgoonz-blog.netlify.app/docs/python/functions - - https://bgoonz-blog.netlify.app/docs/python/google-sheets-api - - https://bgoonz-blog.netlify.app/docs/python/intro-for-js-devs - - https://bgoonz-blog.netlify.app/docs/python/python-ds - - https://bgoonz-blog.netlify.app/docs/python/python-quiz - - https://bgoonz-blog.netlify.app/docs/python/snippets - - https://bgoonz-blog.netlify.app/docs/quick-ref - - https://bgoonz-blog.netlify.app/docs/quick-ref/all-emojis - - https://bgoonz-blog.netlify.app/docs/quick-ref/create-react-app - - https://bgoonz-blog.netlify.app/docs/quick-ref/Emmet - - https://bgoonz-blog.netlify.app/docs/quick-ref/fetch - - https://bgoonz-blog.netlify.app/docs/quick-ref/general-structured-data-guidelines - - https://bgoonz-blog.netlify.app/docs/quick-ref/git-bash - - https://bgoonz-blog.netlify.app/docs/quick-ref/git-tricks - - https://bgoonz-blog.netlify.app/docs/quick-ref/google-firebase - - https://bgoonz-blog.netlify.app/docs/quick-ref/heroku-error-codes - - https://bgoonz-blog.netlify.app/docs/quick-ref/installation - - https://bgoonz-blog.netlify.app/docs/quick-ref/markdown-dropdowns - - https://bgoonz-blog.netlify.app/docs/quick-ref/minifiction - - https://bgoonz-blog.netlify.app/docs/quick-ref/new-repo-instructions - - https://bgoonz-blog.netlify.app/docs/quick-ref/pull-request-rubric - - https://bgoonz-blog.netlify.app/docs/quick-ref/python-builtin-functions - - https://bgoonz-blog.netlify.app/docs/quick-ref/quick-links - - https://bgoonz-blog.netlify.app/docs/quick-ref/topRepos - - https://bgoonz-blog.netlify.app/docs/quick-ref/understanding-path - - https://bgoonz-blog.netlify.app/docs/quick-ref/vscode-themes - - https://bgoonz-blog.netlify.app/docs/react - - https://bgoonz-blog.netlify.app/docs/react/accessibility - - https://bgoonz-blog.netlify.app/docs/react/ajax-n-apis - - https://bgoonz-blog.netlify.app/docs/react/cheatsheet - - https://bgoonz-blog.netlify.app/docs/react/complete-react - - https://bgoonz-blog.netlify.app/docs/react/createReactApp - - https://bgoonz-blog.netlify.app/docs/react/demo - - https://bgoonz-blog.netlify.app/docs/react/dont-use-index-as-keys - - https://bgoonz-blog.netlify.app/docs/react/higher-order-components - - https://bgoonz-blog.netlify.app/docs/react/jsx - - https://bgoonz-blog.netlify.app/docs/react/quiz - - https://bgoonz-blog.netlify.app/docs/react/react-docs - - https://bgoonz-blog.netlify.app/docs/react/react-in-depth - - https://bgoonz-blog.netlify.app/docs/react/react-patterns-by-usecase - - https://bgoonz-blog.netlify.app/docs/react/react-router - - https://bgoonz-blog.netlify.app/docs/react/react-study-guide - - https://bgoonz-blog.netlify.app/docs/react/react2 - - https://bgoonz-blog.netlify.app/docs/react/render-elements - - https://bgoonz-blog.netlify.app/docs/readme - - https://bgoonz-blog.netlify.app/docs/reference - - https://bgoonz-blog.netlify.app/docs/reference/art-of-command-line - - https://bgoonz-blog.netlify.app/docs/reference/awesome-lists - - https://bgoonz-blog.netlify.app/docs/reference/awesome-nodejs - - https://bgoonz-blog.netlify.app/docs/reference/awesome-static - - https://bgoonz-blog.netlify.app/docs/reference/bash-commands - - https://bgoonz-blog.netlify.app/docs/reference/bookmarks - - https://bgoonz-blog.netlify.app/docs/reference/embed-the-web - - https://bgoonz-blog.netlify.app/docs/reference/github-resources - - https://bgoonz-blog.netlify.app/docs/reference/github-search - - https://bgoonz-blog.netlify.app/docs/reference/google-cloud - - https://bgoonz-blog.netlify.app/docs/reference/how-2-reinstall-npm - - https://bgoonz-blog.netlify.app/docs/reference/how-to-kill-a-process - - https://bgoonz-blog.netlify.app/docs/reference/installing-node - - https://bgoonz-blog.netlify.app/docs/reference/intro-to-nodejs - - https://bgoonz-blog.netlify.app/docs/reference/markdown-styleguide - - https://bgoonz-blog.netlify.app/docs/reference/notes-template - - https://bgoonz-blog.netlify.app/docs/reference/psql - - https://bgoonz-blog.netlify.app/docs/reference/resources - - https://bgoonz-blog.netlify.app/docs/reference/vscode - - https://bgoonz-blog.netlify.app/docs/reference/web-api's - - https://bgoonz-blog.netlify.app/docs/showcase - - https://bgoonz-blog.netlify.app/docs/sitemap - - https://bgoonz-blog.netlify.app/docs/tips - - https://bgoonz-blog.netlify.app/docs/tips/7-tips-to-become-a-better-web-developer - - https://bgoonz-blog.netlify.app/docs/tips/decrement - - https://bgoonz-blog.netlify.app/docs/tips/firebase-hosting - - https://bgoonz-blog.netlify.app/docs/tips/httrack - - https://bgoonz-blog.netlify.app/docs/tips/regex-tips - - https://bgoonz-blog.netlify.app/docs/tips/storybook - - https://bgoonz-blog.netlify.app/docs/tips/top-10-money-tips - - https://bgoonz-blog.netlify.app/docs/tips/ubuntu-setup - - https://bgoonz-blog.netlify.app/docs/tips/web-accessibility - - https://bgoonz-blog.netlify.app/docs/tools - - https://bgoonz-blog.netlify.app/docs/tools/dev-utilities - - https://bgoonz-blog.netlify.app/docs/tools/markdown-html - - https://bgoonz-blog.netlify.app/docs/tutorials - - https://bgoonz-blog.netlify.app/docs/tutorials/bash - - https://bgoonz-blog.netlify.app/docs/tutorials/bash-commands-my - - https://bgoonz-blog.netlify.app/docs/tutorials/get-file-extension - - https://bgoonz-blog.netlify.app/docs/tutorials/how-2-ubuntu - - https://bgoonz-blog.netlify.app/docs/tutorials/psql-setup - - https://bgoonz-blog.netlify.app/docs/tutorials/webdev-review - - https://bgoonz-blog.netlify.app/docs/typescript - - https://bgoonz-blog.netlify.app/interview-questions-js - - https://bgoonz-blog.netlify.app/readme - - https://bgoonz-blog.netlify.app/showcase - -
- -
-
-
-

-

-

-

-

↞↠ Getting Started With GatsbyJS ↞↠ - # -

-
-
-

🚀 Quick start

-
-
    -
  1. -

    Create a Gatsby site.

    -

    Use the Gatsby CLI to create a new site, specifying the default starter.

    -
    2. -
- 
console
-    # create a new Gatsby site using the default starter
-    gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
-
-
-
    -
  1. -

    Start developing.

    -

    Navigate into your new site's directory and start it up.

    -
    2. -
- 
console
-    cd my-default-starter/
-    gatsby develop
-
-
-
    -
  1. -

    Open the source code and start editing!

    -

    Your site is now running at http://localhost:8000!

    -

    Note: You'll also see a second link:http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

    -

    Open the my-default-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

    -
    2. -
-
-

🧐 What's inside

-
-

?

-

A quick look at the top-level files and directories you'll see in a Gatsby project.

- 
.
-├── node_modules
-├── src
-├── .gitignore
-├── .prettierrc
-├── gatsby-browser.js
-├── gatsby-config.js
-├── gatsby-node.js
-├── gatsby-ssr.js
-├── LICENSE
-├── package-lock.json
-├── package.json
-└── README.md
-
-
    -
  1. -

    /node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

    -
    2. -
  2. -

    /src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for "source code".

    -
    3. -
  3. -

    .gitignore: This file tells git which files it should not track / not maintain a version history for.

    -
    4. -
  4. -

    .prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

    -
    5. -
  5. -

    gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.

    -
    6. -
  6. -

    gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you'd like to include, etc. (Check out the config docs for more detail).

    -
    7. -
  7. -

    gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.

    -
    8. -
  8. -

    gatsby-ssr.js: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering.

    -
    9. -
  9. -

    LICENSE: This Gatsby starter is licensed under the 0BSD license. This means that you can see this file as a placeholder and replace it with your own license.

    -
    10. -
  10. -

    package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won't change this file directly).

    -
    11. -
  11. -

    package.json: A manifest file for Node.js projects, which includes things like metadata (the project's name, author, etc). This manifest is how npm knows which packages to install for your project.

    -
    12. -
  12. -

    README.md: A text file containing useful reference information about your project.

    -
    13. -
-
-

🎓 Learning Gatsby

-
-

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

- -
-

💫 Deploy

-
-

Deploy to Netlify**

-

Deploy with Vercel**

- -
-

Gatsby Project Structure | Gatsby

-
-

Excerpt

-

Inside a Gatsby project, you may see some or all of the following folders and files: Folders /.cache Automatically generated. This folder…

-
-
-

Inside a Gatsby project, you may see some or all of the following folders and files:

- 
/|-- /.cache|-- /plugins|-- /public|-- /src    |-- /api    |-- /pages    |-- /templates    |-- html.js|-- /static|-- gatsby-config.js|-- gatsby-node.js|-- gatsby-ssr.js|-- gatsby-browser.js
-
-
-

[](https://www.gatsbyjs.com/docs/reference/gatsby-project-structure/#folders)Folders

-
- -
-

[](https://www.gatsbyjs.com/docs/reference/gatsby-project-structure/#files)Files

-
- -
-

[](https://www.gatsbyjs.com/docs/reference/gatsby-project-structure/#miscellaneous)Miscellaneous

-
-

The file/folder structure described above reflects Gatsby-specific files and folders. Since Gatsby sites are also React apps, it's common to use standard React code organization patterns such as folders like /components and /utils inside /src. The React docs have more information on a typical React app folder structure.

-
-

Layout Components | Gatsby

-
-

Excerpt

-

In this guide, you'll learn Gatsby's approach to layouts, how to create and use layout components, and how to prevent layout components from…

-
-
-

In this guide, you'll learn Gatsby's approach to layouts, how to create and use layout components, and how to prevent layout components from unmounting.

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#gatsbys-approach-to-layouts)Gatsby's approach to layouts

-
-

Gatsby does not, by default, automatically apply layouts to pages (there are, however, ways to do so which will be covered in a later section). Instead, Gatsby follows React's compositional model of importing and using components. This makes it possible to create multiple levels of layouts, e.g. a global header and footer, and then on some pages, a sidebar menu. It also makes it possible to pass data between layout and page components.

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#what-are-layout-components)What are layout components

-
-

?

-

Layout components are for sections of your site that you want to share across multiple pages. For example, Gatsby sites will commonly have a layout component with a shared header and footer. Other common things to add to layouts are a sidebar and/or navigation menu. On this page for example, the header at the top is part of gatsbyjs.com's layout component.

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#how-to-create-layout-components)How to create layout components

-
-

It is recommended to create your layout components alongside the rest of your components (e.g. into src/components/).

-

Here is an example of a very basic layout component at src/components/layout.js:

- 
import React from "react"export default function Layout({ children }) {  return (    <div style={{ margin: `0 auto`, maxWidth: 650, padding: `0 1rem` }}>       {children}    </div>   )}
-
-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#how-to-import-and-add-layout-components-to-pages)How to import and add layout components to pages

-
-

If you want to apply a layout to a page, you will need to include the Layout component and wrap your page in it. For example, here is how you would apply your layout to the front page:

- 
import React from "react"import Layout from "../components/layout"export default function Home() {  return (    <Layout>       <h1> I'm in a layout!</h1>     </Layout>   );}
-
-

Repeat for every page and template that needs this layout.

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#how-to-prevent-layout-components-from-unmounting)How to prevent layout components from unmounting

-
-

As mentioned earlier, Gatsby does not, by default, automatically wrap pages in a layout component. The "top level" component is the page itself. As a result, when the "top level" component changes between pages, React will re-render all children. This means that shared components like navigations will unmount and remount. This will break CSS transitions or React state within those shared components.

-

If you need to set a wrapper component around page components that won't get unmounted on page changes, use the wrapPageElement browser API and the SSR equivalent.

-

Alternatively, you can prevent your layout component from unmounting by using gatsby-plugin-layout, which implements the wrapPageElement APIs for you.

-

Adding Markdown Pages | Gatsby

-
-

Excerpt

-

Gatsby can use Markdown files to create pages in your site. - You add plugins to read and understand folders with Markdown files and from them…

-
-
-

Gatsby can use Markdown files to create pages in your site. You add plugins to read and understand folders with Markdown files and from them create pages automatically.

-

Here are the steps Gatsby follows for making this happen.

-
    -
  1. Read files into Gatsby from the filesystem
    2. -
  2. Transform Markdown to HTML and frontmatter to data
    3. -
  3. Add a Markdown file
    4. -
  4. Create a Collection Route component for the Markdown files
    5. -
-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#read-files-into-gatsby-from-the-filesystem)Read files into Gatsby from the filesystem

-
-

Use the plugin gatsby-source-filesystem to read files.

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#install)Install

-
-

npm install gatsby-source-filesystem

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#add-plugin)Add plugin

-
-

Open gatsby-config.js to add the gatsby-source-filesystem plugin. The path option is how you set the directory to search for files.

- 
module.exports = {  siteMetadata: {    title: "My Gatsby Site",  },  plugins: [    {      resolve: `gatsby-source-filesystem`,      options: {        name: `markdown-pages`,        path: `${__dirname}/src/markdown-pages`,      },    },  ],}
-
-

Completing the above step means that you've "sourced" the Markdown files from the filesystem. You can now "transform" the Markdown to HTML and the YAML frontmatter to JSON.

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#transform-markdown-to-html-and-frontmatter-to-data-using-gatsby-transformer-remark)Transform Markdown to HTML and frontmatter to data using `gatsby-transformer-remark

-
-

`

-

You'll use the plugin gatsby-transformer-remark to recognize files which are Markdown and read their content. The plugin will convert the frontmatter metadata part of your Markdown files as frontmatter and the content part as HTML.

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#install-transformer-plugin)Install transformer plugin

-
-

npm install gatsby-transformer-remark

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#configure-plugin)Configure plugin

-
-

Add this to gatsby-config.js after the previously added gatsby-source-filesystem.

- 
module.exports = {  siteMetadata: {    title: "My Gatsby Site",  },  plugins: [    {      resolve: `gatsby-source-filesystem`,      options: {        name: `markdown-pages`,        path: `${__dirname}/src/markdown-pages`,      },    },    `gatsby-transformer-remark`,  ],}
-
-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#add-a-markdown-file)Add a Markdown file

-
-

Create a folder in the /src directory of your Gatsby application called markdown-pages. Now create a Markdown file inside it with the name post-1.md.

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#frontmatter-for-metadata-in-markdown-files)Frontmatter for metadata in Markdown files

-
-

When you create a Markdown file, you can include a set of key/value pairs that can be used to provide additional data relevant to specific pages in the GraphQL data layer. This data is called "frontmatter" and is denoted by the triple dashes at the start and end of the block. This block will be parsed by gatsby-transformer-remark as YAML. You can then query the data through the GraphQL API from your React components.

-

src/markdown-pages/post-1.md

- 

----slug: "/blog/my-first-post"date: "2019-05-04"title: "My first blog post"---
-
-

What is important in this step is the key pair slug. The value that is assigned to the key slug is used in order to navigate to your post.

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#create-a-collection-route-for-the-markdown-files)Create a Collection Route for the Markdown files

-
-

Create src/pages/{MarkdownRemark.frontmatter__slug}.js and add the following code:

-

src/pages/{MarkdownRemark.frontmatter__slug}.js

- 
import React from "react"import { graphql } from "gatsby"export default function Template({  data, }) {  const { markdownRemark } = data   const { frontmatter, html } = markdownRemark  return (    <div className="blog-post-container">       <div className="blog-post">         <h1> {frontmatter.title}</h1>         <h2> {frontmatter.date}</h2>         <div          className="blog-post-content"          dangerouslySetInnerHTML={{ __html: html }}        />       </div>     </div>   )}export const pageQuery = graphql`  query($id: String!) {    markdownRemark(id: { eq: $id }) {      html      frontmatter {        date(formatString: "MMMM DD, YYYY")        slug        title      }    }  }`
-
-

Two things are important in the file above:

-
    -
  1. -

    A GraphQL query is made in the second half of the file to get the Markdown data. Gatsby has automagically given you all the Markdown metadata and HTML in this query's result.

    -

    Note: To learn more about GraphQL, consider this excellent resource

    -
    2. -
  2. -

    The result of the query is injected by Gatsby into the component as the data prop. props.data.markdownRemark is the property that has all the details of the Markdown file.

    -
    3. -
-

Next you could create a page component at src/pages/blog/index.js to serve as a listing page for all your blog posts.

-

This should get you started on some basic Markdown functionality in your Gatsby site. You can further customize the frontmatter and the component file to get desired effects!

-

For more information, have a look in the working example using-markdown-pages. You can find it in the Gatsby examples section.

-
-

[](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#other-tutorials)Other tutorials

-
-

- -

-
-

Technoloy

-

tech-stack

-
-

SOURCECODE

- 

-bryan@LAPTOP-9LGJ3JGS:/c/MY-WEB-DEV/BLOG____2.0/BLOG_2.0/src$ tree -f
-.
-├── ./components
-│   ├── ./components/ActionLink.js
-│   ├── ./components/CtaButtons.js
-│   ├── ./components/DocsMenu.js
-│   ├── ./components/DocsSubmenu.js
-│   ├── ./components/Footer.js
-│   ├── ./components/Header.js
-│   ├── ./components/Icon.js
-│   ├── ./components/Layout.js
-│   ├── ./components/SectionContent.js
-│   ├── ./components/SectionCta.js
-│   ├── ./components/SectionDocs.js
-│   ├── ./components/SectionGrid.js
-│   ├── ./components/SectionHero.js
-│   ├── ./components/Submenu.js
-│   ├── ./components/global.css
-│   └── ./components/index.js
-├── ./data
-│   └── ./data/doc_sections.yml
-├── ./hooks
-│   └── ./hooks/useScript.js
-├── ./html.js
-├── ./pages
-│   ├── ./pages/blog
-│   │   ├── ./pages/blog/blog-archive.md
-│   │   ├── ./pages/blog/blogwcomments.md
-│   │   ├── ./pages/blog/data-structures.md
-│   │   ├── ./pages/blog/index.md
-│   │   ├── ./pages/blog/my-medium.md
-│   │   ├── ./pages/blog/platform-docs.md
-│   │   ├── ./pages/blog/python-for-js-dev.md
-│   │   ├── ./pages/blog/python-resources.md
-│   │   └── ./pages/blog/web-scraping.md
-│   ├── ./pages/docs
-│   │   ├── ./pages/docs/about
-│   │   │   ├── ./pages/docs/about/index.md
-│   │   │   ├── ./pages/docs/about/me.md
-│   │   │   ├── ./pages/docs/about/node
-│   │   │   │   ├── ./pages/docs/about/node/install.md
-│   │   │   │   ├── ./pages/docs/about/node/intro.md
-│   │   │   │   ├── ./pages/docs/about/node/nodejs.md
-│   │   │   │   ├── ./pages/docs/about/node/nodevsbrowser.md
-│   │   │   │   ├── ./pages/docs/about/node/reading-files.md
-│   │   │   │   └── ./pages/docs/about/node/writing-files.md
-│   │   │   ├── ./pages/docs/about/npm.md
-│   │   │   └── ./pages/docs/about/resume.md
-│   │   ├── ./pages/docs/articles
-│   │   │   ├── ./pages/docs/articles/algo.md
-│   │   │   ├── ./pages/docs/articles/article-compilation.md
-│   │   │   ├── ./pages/docs/articles/basic-web-dev.md
-│   │   │   ├── ./pages/docs/articles/gists.md
-│   │   │   ├── ./pages/docs/articles/index.md
-│   │   │   ├── ./pages/docs/articles/install.md
-│   │   │   ├── ./pages/docs/articles/intro.md
-│   │   │   ├── ./pages/docs/articles/python.md
-│   │   │   ├── ./pages/docs/articles/reading-files.md
-│   │   │   ├── ./pages/docs/articles/resources.md
-│   │   │   ├── ./pages/docs/articles/ten-jamstack-apis-to-checkout.md
-│   │   │   └── ./pages/docs/articles/writing-files.md
-│   │   ├── ./pages/docs/docs
-│   │   │   └── ./pages/docs/docs/tools
-│   │   │       └── ./pages/docs/docs/tools/file-types.md
-│   │   ├── ./pages/docs/faq
-│   │   │   ├── ./pages/docs/faq/contact.md
-│   │   │   └── ./pages/docs/faq/index.md
-│   │   ├── ./pages/docs/gists.md
-│   │   ├── ./pages/docs/index.md
-│   │   ├── ./pages/docs/interact
-│   │   │   ├── ./pages/docs/interact/clock.md
-│   │   │   ├── ./pages/docs/interact/index.md
-│   │   │   └── ./pages/docs/interact/jupyter-notebooks.md
-│   │   ├── ./pages/docs/links
-│   │   │   ├── ./pages/docs/links/index.md
-│   │   │   ├── ./pages/docs/links/medium-links.md
-│   │   │   ├── ./pages/docs/links/my-websites.md
-│   │   │   └── ./pages/docs/links/social.md
-│   │   ├── ./pages/docs/quick-reference
-│   │   │   ├── ./pages/docs/quick-reference/Emmet.md
-│   │   │   ├── ./pages/docs/quick-reference/docs.md
-│   │   │   ├── ./pages/docs/quick-reference/index.md
-│   │   │   ├── ./pages/docs/quick-reference/installation.md
-│   │   │   └── ./pages/docs/quick-reference/new-repo-instructions.md
-│   │   ├── ./pages/docs/react
-│   │   │   ├── ./pages/docs/react/createReactApp.md
-│   │   │   ├── ./pages/docs/react/index.md
-│   │   │   └── ./pages/docs/react/react2.md
-│   │   ├── ./pages/docs/react-in-depth.md
-│   │   ├── ./pages/docs/sitemap.md
-│   │   └── ./pages/docs/tools
-│   │       ├── ./pages/docs/tools/index.md
-│   │       ├── ./pages/docs/tools/notes-template.md
-│   │       ├── ./pages/docs/tools/plug-ins.md
-│   │       └── ./pages/docs/tools/vscode.md
-│   ├── ./pages/index.md
-│   ├── ./pages/notes-template.md
-│   ├── ./pages/review.md
-│   └── ./pages/showcase.md
-├── ./sass
-│   ├── ./sass/imports
-│   │   ├── ./sass/imports/_animations.scss
-│   │   ├── ./sass/imports/_buttons.scss
-│   │   ├── ./sass/imports/_docs.scss
-│   │   ├── ./sass/imports/_footer.scss
-│   │   ├── ./sass/imports/_forms.scss
-│   │   ├── ./sass/imports/_functions.scss
-│   │   ├── ./sass/imports/_general.scss
-│   │   ├── ./sass/imports/_header.scss
-│   │   ├── ./sass/imports/_helpers.scss
-│   │   ├── ./sass/imports/_icons.scss
-│   │   ├── ./sass/imports/_palettes.scss
-│   │   ├── ./sass/imports/_posts.scss
-│   │   ├── ./sass/imports/_prism.scss
-│   │   ├── ./sass/imports/_reset.scss
-│   │   ├── ./sass/imports/_sections.scss
-│   │   ├── ./sass/imports/_structure.scss
-│   │   ├── ./sass/imports/_tables.scss
-│   │   └── ./sass/imports/_variables.scss
-│   └── ./sass/main.scss
-├── ./templates
-│   ├── ./templates/advanced.js
-│   ├── ./templates/blog.js
-│   ├── ./templates/docs.js
-│   ├── ./templates/page.js
-│   └── ./templates/post.js
-└── ./utils
-    ├── ./utils/attribute.js
-    ├── ./utils/classNames.js
-    ├── ./utils/cycler.js
-    ├── ./utils/getData.js
-    ├── ./utils/getPage.js
-    ├── ./utils/getPageByFilePath.js
-    ├── ./utils/getPages.js
-    ├── ./utils/htmlToReact.js
-    ├── ./utils/index.js
-    ├── ./utils/link.js
-    ├── ./utils/markdownify.js
-    ├── ./utils/pathJoin.js
-    ├── ./utils/toStyleObj.js
-    ├── ./utils/toUrl.js
-    └── ./utils/withPrefix.js
-
-21 directories, 119 files
-bryan@LAPTOP-9LGJ3JGS:/c/MY-WEB-DEV/BLOG____2.0/BLOG_2.0/src$
-
-
-

Source Code

-
- Folder Structure (src) - - . - ├── Combined_____-_____Doc.md - ├── components - │ ├── ActionLink.js - │ ├── CtaButtons.js - │ ├── DarkToggle - │ │ ├── index.js - │ │ └── styles.js - │ ├── DocsMenu.js - │ ├── DocsSubmenu.js - │ ├── Footer.js - │ ├── Header.js - │ ├── Icon.js - │ ├── Layout.js - │ ├── SectionContent.js - │ ├── SectionCta.js - │ ├── SectionDocs.js - │ ├── SectionGrid.js - │ ├── SectionHero.js - │ ├── Submenu.js - │ ├── global.css - │ └── index.js - ├── data - │ └── doc_sections.yml - ├── hooks - │ ├── addScript.js - │ ├── index.js - │ ├── useDarkMode.js - │ ├── useEventListener.js - │ ├── useMediaQuery.js - │ ├── useOnClickOutside.js - │ ├── useQueryParam.js - │ ├── useSize.js - │ └── useStorage.js - ├── html.js - ├── pages - │ ├── blog - │ │ ├── 300-react-questions.md - │ │ ├── awesome-graphql.md - │ │ ├── big-o-complexity.md - │ │ ├── blog-archive.md - │ │ ├── blogwcomments.md - │ │ ├── data-structures.md - │ │ ├── flow-control-in-python.md - │ │ ├── functions-in-python.md - │ │ ├── git-gateway.md - │ │ ├── index.md - │ │ ├── interview-questions-js.md - │ │ ├── netlify-cms.md - │ │ ├── platform-docs.md - │ │ ├── python-for-js-dev.md - │ │ ├── python-resources.md - │ │ ├── web-dev-trends.md - │ │ └── web-scraping.md - │ ├── docs - │ │ ├── about - │ │ │ ├── eng-portfolio.md - │ │ │ ├── ideas-for-this-website.md - │ │ │ ├── index.md - │ │ │ ├── intrests.md - │ │ │ ├── job-search.md - │ │ │ └── resume.md - │ │ ├── articles - │ │ │ ├── basic-web-dev.md - │ │ │ ├── buffers.md - │ │ │ ├── dev-dep.md - │ │ │ ├── event-loop.md - │ │ │ ├── fs-module.md - │ │ │ ├── how-the-web-works.md - │ │ │ ├── http.md - │ │ │ ├── index.md - │ │ │ ├── install.md - │ │ │ ├── intro.md - │ │ │ ├── modules.md - │ │ │ ├── nextjs.md - │ │ │ ├── node-api-express.md - │ │ │ ├── node-cli-args.md - │ │ │ ├── node-common-modules.md - │ │ │ ├── node-env-variables.md - │ │ │ ├── node-js-language.md - │ │ │ ├── node-package-manager.md - │ │ │ ├── node-repl.md - │ │ │ ├── node-run-cli.md - │ │ │ ├── nodejs.md - │ │ │ ├── nodevsbrowser.md - │ │ │ ├── npm.md - │ │ │ ├── npx.md - │ │ │ ├── os-module.md - │ │ │ ├── reading-files.md - │ │ │ ├── semantic-html.md - │ │ │ ├── semantic.md - │ │ │ ├── the-uniform-resource-locator-(url).md - │ │ │ ├── understanding-firebase.md - │ │ │ ├── v8.md - │ │ │ ├── web-standards-checklist.md - │ │ │ ├── webdev-tools.md - │ │ │ └── writing-files.md - │ │ ├── audio - │ │ │ ├── audio-feature-extraction.md - │ │ │ ├── audio.md - │ │ │ ├── dfft.md - │ │ │ ├── discrete-fft.md - │ │ │ ├── dtw-python-explained.md - │ │ │ ├── dynamic-time-warping.md - │ │ │ ├── index.md - │ │ │ └── web-audio-api.md - │ │ ├── career - │ │ │ ├── dev-interview.md - │ │ │ ├── index.md - │ │ │ ├── interview-dos-n-donts.md - │ │ │ └── job-boards.md - │ │ ├── community - │ │ │ ├── an-open-letter-2-future-developers.md - │ │ │ ├── index.md - │ │ │ └── video-chat.md - │ │ ├── content - │ │ │ ├── algo.md - │ │ │ ├── archive.md - │ │ │ ├── gatsby-Queries-Mutations.md - │ │ │ ├── history-api.md - │ │ │ ├── index.md - │ │ │ ├── main-projects.md - │ │ │ └── trouble-shooting.md - │ │ ├── data-structures - │ │ │ └── index.md - │ │ ├── docs - │ │ │ ├── appendix.md - │ │ │ ├── art-of-command-line.md - │ │ │ ├── bash.md - │ │ │ ├── content.md - │ │ │ ├── css.md - │ │ │ ├── data-structures-docs.md - │ │ │ ├── es-6-features.md - │ │ │ ├── git-reference.md - │ │ │ ├── git-repos.md - │ │ │ ├── html-spec.md - │ │ │ ├── index.md - │ │ │ ├── markdown.md - │ │ │ ├── no-whiteboarding.md - │ │ │ ├── node-docs-complete.md - │ │ │ ├── node-docs-full.md - │ │ │ ├── regex-in-js.md - │ │ │ └── sitemap.md - │ │ ├── faq - │ │ │ ├── contact.md - │ │ │ ├── index.md - │ │ │ └── plug-ins.md - │ │ ├── gists.md - │ │ ├── index.md - │ │ ├── interact - │ │ │ ├── callstack-visual.md - │ │ │ ├── clock.md - │ │ │ ├── index.md - │ │ │ ├── jupyter-notebooks.md - │ │ │ ├── other-sites.md - │ │ │ └── video-chat.md - │ │ ├── interview - │ │ │ ├── index.md - │ │ │ ├── job-search-nav.md - │ │ │ └── review-concepts.md - │ │ ├── javascript - │ │ │ ├── arrow-functions.md - │ │ │ ├── asyncjs.md - │ │ │ ├── await-keyword.md - │ │ │ ├── bigo.md - │ │ │ ├── clean-code.md - │ │ │ ├── constructor-functions.md - │ │ │ ├── index.md - │ │ │ ├── promises.md - │ │ │ ├── review.md - │ │ │ └── this-is-about-this.md - │ │ ├── leetcode - │ │ │ └── index.md - │ │ ├── privacy-policy.md - │ │ ├── projects - │ │ │ ├── embeded-websites.md - │ │ │ ├── index.md - │ │ │ ├── list-of-projects.md - │ │ │ ├── mini-projects.md - │ │ │ └── my-websites.md - │ │ ├── python - │ │ │ ├── at-length.md - │ │ │ ├── cheat-sheet.md - │ │ │ ├── comprehensive-guide.md - │ │ │ ├── examples.md - │ │ │ ├── flow-control.md - │ │ │ ├── functions.md - │ │ │ ├── google-sheets-api.md - │ │ │ ├── index.md - │ │ │ ├── intro-for-js-devs.md - │ │ │ ├── python-ds.md - │ │ │ └── snippets.md - │ │ ├── quick-reference - │ │ │ ├── Emmet.md - │ │ │ ├── all-emojis.md - │ │ │ ├── create-react-app.md - │ │ │ ├── git-bash.md - │ │ │ ├── git-tricks.md - │ │ │ ├── google-firebase.md - │ │ │ ├── heroku-error-codes.md - │ │ │ ├── index.md - │ │ │ ├── installation.md - │ │ │ ├── markdown-dropdowns.md - │ │ │ ├── minifiction.md - │ │ │ ├── new-repo-instructions.md - │ │ │ ├── psql-setup.md - │ │ │ ├── pull-request-rubric.md - │ │ │ ├── quick-links.md - │ │ │ ├── topRepos.md - │ │ │ ├── understanding-path.md - │ │ │ └── vscode-themes.md - │ │ ├── react - │ │ │ ├── ajax-n-apis.md - │ │ │ ├── cheatsheet.md - │ │ │ ├── createReactApp.md - │ │ │ ├── demo.md - │ │ │ ├── dont-use-index-as-keys.md - │ │ │ ├── index.md - │ │ │ ├── jsx.md - │ │ │ ├── react-docs.md - │ │ │ ├── react-in-depth.md - │ │ │ ├── react2.md - │ │ │ └── render-elements.md - │ │ ├── reference - │ │ │ ├── awesome-lists.md - │ │ │ ├── awesome-static.md - │ │ │ ├── bash-commands.md - │ │ │ ├── bookmarks.md - │ │ │ ├── embed-the-web.md - │ │ │ ├── github-search.md - │ │ │ ├── google-cloud.md - │ │ │ ├── how-2-reinstall-npm.md - │ │ │ ├── how-to-kill-a-process.md - │ │ │ ├── index.md - │ │ │ ├── installing-node.md - │ │ │ ├── intro-to-nodejs.md - │ │ │ ├── notes-template.md - │ │ │ ├── psql.md - │ │ │ ├── resources.md - │ │ │ ├── vscode.md - │ │ │ └── web-api's.md - │ │ ├── search.md - │ │ ├── sitemap.md - │ │ ├── tips - │ │ │ ├── array-methods.md - │ │ │ ├── index.md - │ │ │ └── insert-into-array.md - │ │ ├── tools - │ │ │ ├── Archive.md - │ │ │ ├── data-structures.md - │ │ │ ├── dev-utilities.md - │ │ │ ├── index.md - │ │ │ └── markdown-html.md - │ │ └── tutorials - │ │ ├── enviorment-setup.md - │ │ └── index.md - │ ├── index.md - │ ├── privacy-policy.md - │ ├── readme.md - │ └── showcase.md - ├── sass - │ ├── imports - │ │ ├── _animations.scss - │ │ ├── _buttons.scss - │ │ ├── _docs.scss - │ │ ├── _footer.scss - │ │ ├── _forms.scss - │ │ ├── _functions.scss - │ │ ├── _general.scss - │ │ ├── _header.scss - │ │ ├── _helpers.scss - │ │ ├── _icons.scss - │ │ ├── _palettes.scss - │ │ ├── _posts.scss - │ │ ├── _prism.scss - │ │ ├── _reset.scss - │ │ ├── _sections.scss - │ │ ├── _structure.scss - │ │ ├── _tables.scss - │ │ └── _variables.scss - │ └── main.scss - ├── templates - │ ├── advanced.js - │ ├── blog.js - │ ├── docs.js - │ ├── page.js - │ ├── post.js - │ └── templates.md - └── utils - ├── attribute.js - ├── blm-badge.js - ├── classNames.js - ├── cycler.js - ├── getData.js - ├── getPage.js - ├── getPageByFilePath.js - ├── getPages.js - ├── htmlToReact.js - ├── index.js - ├── link.js - ├── markdownify.js - ├── pathJoin.js - ├── toStyleObj.js - ├── toUrl.js - └── withPrefix.js - - 32 directories, 272 files - -
- -
- Click To See Component Sourcecode - - # Component Structure - - . - ├── ActionLink.js - ├── CtaButtons.js - ├── DarkToggle - │ ├── index.js - │ └── styles.js - ├── DocsMenu.js - ├── DocsSubmenu.js - ├── Footer.js - ├── Header.js - ├── Icon.js - ├── Layout.js - ├── SectionContent.js - ├── SectionCta.js - ├── SectionDocs.js - ├── SectionGrid.js - ├── SectionHero.js - ├── Submenu.js - ├── global.css - └── index.js - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - import { Link, withPrefix, classNames } from '../utils'; - import Icon from './Icon'; - - export default class ActionLink extends React.Component { - render() { - let action = _.get(this.props, 'action', null); - return ( - <Link - to={withPrefix(_.get(action, 'url', null))} - {...(_.get(action, 'new_window', null) ? { target: '_blank' } : null)} - {...(_.get(action, 'new_window', null) || _.get(action, 'no_follow', null) - ? { - rel: (_.get(action, 'new_window', null) ? 'noopener ' : '') + (_.get(action, 'no_follow', null) ? 'nofollow' : '') - } - : null)} - className={classNames({ - button: _.get(action, 'style', null) !== 'link', - 'button-secondary': _.get(action, 'style', null) === 'secondary', - 'button-icon': _.get(action, 'style', null) === 'icon' - })} - > - {_.get(action, 'style', null) === 'icon' && _.get(action, 'icon_class', null) ? ( - <React.Fragment> - <Icon {...this.props} icon={_.get(action, 'icon_class', null)} /> - <span className="screen-reader-text"> {_.get(action, 'label', null)}</span> - </React.Fragment> - ) : ( - _.get(action, 'label', null) - )} - </Link> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - import { Link, withPrefix, classNames } from '../utils'; - - export default class CtaButtons extends React.Component { - render() { - let actions = _.get(this.props, 'actions', null); - return _.map(actions, (action, action_idx) => ( - <Link - key={action_idx} - to={withPrefix(_.get(action, 'url', null))} - {...(_.get(action, 'new_window', null) ? { target: '_blank' } : null)} - {...(_.get(action, 'new_window', null) || _.get(action, 'no_follow', null) - ? { - rel: (_.get(action, 'new_window', null) ? 'noopener ' : '') + (_.get(action, 'no_follow', null) ? 'nofollow' : '') - } - : null)} - className={classNames({ - button: _.get(action, 'style', null) === 'primary' || _.get(action, 'style', null) === 'secondary', - 'button-secondary': _.get(action, 'style', null) === 'secondary' - })} - > - {_.get(action, 'label', null)} - </Link> - )); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - import { getPage, classNames, Link, withPrefix, pathJoin, getPages } from '../utils'; - import DocsSubmenu from './DocsSubmenu'; - - export default class DocsMenu extends React.Component { - render() { - let site = _.get(this.props, 'site', null); - let page = _.get(this.props, 'page', null); - let root_docs_path = _.get(site, 'data.doc_sections.root_docs_path', null); - let root_page = getPage(this.props.pageContext.pages, root_docs_path); - return ( - <nav id="docs-nav" className="docs-nav"> - <div id="docs-nav-inside" className="docs-nav-inside sticky"> - <button id="docs-nav-toggle" className="docs-nav-toggle"> - Navigate Docs - <span className="icon-angle-right" aria-hidden="true" /> - </button> - <div className="docs-nav-menu"> - <ul id="docs-menu" className="docs-menu"> - <li - className={classNames('docs-menu-item', { - current: _.get(page, 'url', null) === _.get(root_page, 'url', null) - })} - > - <Link to={withPrefix(_.get(root_page, 'url', null))}> {_.get(root_page, 'frontmatter.title', null)}</Link> - </li> - {_.map(_.get(site, 'data.doc_sections.sections', null), (section, section_idx) => { - let section_path = pathJoin(root_docs_path, section); - let section_page = getPage(this.props.pageContext.pages, section_path); - let child_pages = _.orderBy(getPages(this.props.pageContext.pages, section_path), 'frontmatter.weight'); - let child_count = _.size(child_pages); - let has_children = child_count > 0 ? true : false; - let is_current_page = _.get(page, 'url', null) === _.get(section_page, 'url', null) ? true : false; - let is_active = _.get(page, 'url', null).startsWith(_.get(section_page, 'url', null)); - return ( - <React.Fragment key={section_idx + '.1'}> - <li - key={section_idx} - className={classNames('docs-menu-item', { - 'has-children': has_children, - current: is_current_page, - active: is_active - })} - > - <Link to={withPrefix(_.get(section_page, 'url', null))}> {_.get(section_page, 'frontmatter.title', null)}</Link> - {has_children && ( - <React.Fragment> - <button className="docs-submenu-toggle"> - <span className="screen-reader-text"> Submenu</span> - <span className="icon-angle-right" aria-hidden="true" /> - </button> - <DocsSubmenu {...this.props} child_pages={child_pages} page={page} site={site} /> - </React.Fragment> - )} - </li> - </React.Fragment> - ); - })} - </ul> - </div> - </div> - </nav> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - import { classNames, Link, withPrefix } from '../utils'; - - export default class DocsSubmenu extends React.Component { - render() { - let child_pages = _.get(this.props, 'child_pages', null); - let page = _.get(this.props, 'page', null); - return ( - <ul className="docs-submenu"> - {_.map(child_pages, (child_page, child_page_idx) => ( - <li - key={child_page_idx} - className={classNames('docs-menu-item', { - current: _.get(page, 'url', null) === _.get(child_page, 'url', null) - })} - > - <Link to={withPrefix(_.get(child_page, 'url', null))}> {_.get(child_page, 'frontmatter.title', null)}</Link> - </li> - ))} - </ul> - ); - } - } - - --- - - js - // - import _ from 'lodash'; - import React from 'react'; - import { htmlToReact } from '../utils'; - import ActionLink from './ActionLink'; - import addScript from './../hooks/addScript'; - const Script = (props) => { - importScript('./../hooks/addScript.js'); - }; - export default class Footer extends React.Component { - render() { - return ( - <footer id="colophon" className="site-footer outer"> - <div> - <center> - <br /> - - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" /> - - <br /> - - <table cellPadding={0} cellSpacing={0} border={0}> - <tbody> - <tr> - <td - style={{ - fontFamily: 'Arial, Helvetica, sans-serif', - fontSize: '7.5pt' - }} - > - <center> - <table - width="95%" - cellPadding={0} - cellSpacing={0} - border={0} - style={{ - fontFamily: 'Arial, Helvetica, sans-serif', - fontSize: '7.5pt' - }} - > - <tbody> - <tr> - <td - style={{ - fontFamily: 'Arial, Helvetica, sans-serif', - fontSize: '7.5pt' - }} - align="left" - > - <a target="_blank" href="https://search.freefind.com/siteindex.html?si=14588965"> - index - </a> - </td> - <td - style={{ - fontFamily: 'Arial, Helvetica, sans-serif', - fontSize: '7.5pt' - }} - align="center" - > - <a target="_blank" href="https://search.freefind.com/find.html?si=14588965&m=0&p=0"> - sitemap - </a> - </td> - <td - style={{ - fontFamily: 'Arial, Helvetica, sans-serif', - fontSize: '7.5pt' - }} - align="right" - > - <a target="_blank" href="https://search.freefind.com/find.html?si=14588965&pid=a"> - advanced - </a> - </td> - </tr> - </tbody> - </table> - </center> - - <form - style={{ - margin: '0px', - marginTop: '2px' - }} - action="https://search.freefind.com/find.html" - method="get" - acceptCharset="utf-8" - target="_self" - > - <input type="hidden" name="si" defaultValue={14588965} /> - <input type="hidden" name="pid" defaultValue="r" /> - <input type="hidden" name="n" defaultValue={0} /> - <input type="hidden" name="_charset_" defaultValue /> - <input type="hidden" name="bcd" defaultValue="÷" /> - <input type="text" name="query" size={15} /> - <input type="submit" defaultValue="search" /> - </form> - </td> - </tr> - <tr> - <td - style={{ - textAlign: 'center', - fontFamily: 'Arial, Helvetica, sans-serif', - fontSize: '7.5pt', - paddingTop: '4px' - }} - > - <a - style={{ - textDecoration: 'none', - color: 'transparent' - }} - href="https://www.freefind.com" - rel="nofollow" - > - search engine - </a> - <a - style={{ - textDecoration: 'none', - color: 'transparent' - }} - href="https://www.freefind.com" - rel="nofollow" - > - by - <span style={{ color: 'transparent' }}> freefind</span> - </a> - { - <iframe - src="https://bgoonz.github.io/fb-and-twitter-api-embeds/" - frameborder="0" - id="social-embed" - width="100%!important" - > - {' '} - </iframe> - } - </td> - </tr> - </tbody> - </table> - <a href="//pdfcrowd.com/url_to_pdf/?" onclick="if(!this.p)href+='&url='+encodeURIComponent(location.href);this.p=1"> - Save to PDF - </a> - </center> - </div> - - <div className="inner"> - <div id="search" className="inner"> - {' '} - </div> - <div className="site-footer-inside"> - <p className="site-info"> - {_.get(this.props, 'pageContext.site.siteMetadata.footer.content', null) && ( - <span className="copyright"> {htmlToReact(_.get(this.props, 'pageContext.site.siteMetadata.footer.content', null))}</span> - )} - {_.map(_.get(this.props, 'pageContext.site.siteMetadata.footer.links', null), (action, action_idx) => ( - <ActionLink key={action_idx} {...this.props} action={action} /> - ))}{' '} - </p> - {_.get(this.props, 'pageContext.site.siteMetadata.footer.has_social', null) && ( - <div className="social-links"> - {_.map(_.get(this.props, 'pageContext.site.siteMetadata.footer.social_links', null), (action, action_idx) => ( - <ActionLink key={action_idx} {...this.props} action={action} /> - ))}{' '} - </div> - )}{' '} - </div> - </div> - </footer> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - import { Link, withPrefix, classNames } from '../utils'; - import ActionLink from './ActionLink'; - import Submenu from './Submenu'; - - export default class Header extends React.Component { - render() { - return ( - <header id="masthead" className="site-header outer"> - {/* <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" /> */} - - <br /> - - <div className="inner"> - <div className="site-header-inside"> - <div className="site-branding"> - {_.get(this.props, 'pageContext.site.siteMetadata.header.logo_img', null) ? ( - <p className="site-logo"> - <Link to={withPrefix(_.get(this.props, 'pageContext.site.siteMetadata.header.url', null) || '/')}> - <img - src={withPrefix(_.get(this.props, 'pageContext.site.siteMetadata.header.logo_img', null))} - alt={_.get(this.props, 'pageContext.site.siteMetadata.header.logo_img_alt', null)} - /> - </Link> - </p> - ) : ( - <p className="site-title"> - {' '} - WebDevHub - <Link to={withPrefix(_.get(this.props, 'pageContext.site.siteMetadata.header.url', null) || '/')}> - {_.get(this.props, 'pageContext.site.siteMetadata.header.title', null)} - </Link> - </p> - )} - </div> - <div id="search" className="inner"> - {' '} - </div> - {_.get(this.props, 'pageContext.site.siteMetadata.header.has_nav', null) && ( - <React.Fragment> - <nav id="main-navigation" className="site-navigation" aria-label="Main Navigation"> - <div className="site-nav-inside"> - <button id="menu-close" className="menu-toggle"> - <span className="screen-reader-text"> Open Menu</span> - <span className="icon-close" aria-hidden="true" /> - </button> - <ul className="menu"> - {_.map(_.get(this.props, 'pageContext.site.siteMetadata.header.nav_links', null), (action, action_idx) => { - let page_url = _.trim(_.get(this.props, 'pageContext.url', null), '/'); - let action_url = _.trim(_.get(action, 'url', null), '/'); - return ( - <li - key={action_idx} - className={classNames('menu-item', { - 'has-children': _.get(action, 'has_subnav', null) && _.get(action, 'subnav_links', null), - current: page_url === action_url, - 'menu-button': _.get(action, 'style', null) !== 'link' - })} - > - <ActionLink {...this.props} action={action} /> - {_.get(action, 'has_subnav', null) && _.get(action, 'subnav_links', null) && ( - <React.Fragment> - <button className="submenu-toggle"> - <span className="icon-angle-right" aria-hidden="true" /> - <span className="screen-reader-text"> Sub-menu</span> - </button> - <Submenu - {...this.props} - submenu={_.get(action, 'subnav_links', null)} - menu_class={'submenu'} - page={this.props.pageContext} - /> - </React.Fragment> - )} - </li> - ); - })} - </ul> - </div> - </nav> - <button id="menu-open" className="menu-toggle"> - <span className="screen-reader-text"> Close Menu</span> - <span className="icon-menu" aria-hidden="true" /> - </button> - </React.Fragment> - )} - </div> - </div> - - <div> - <a className="github-corner" href="https://github.com/bgoonz/BGOONZ_BLOG_2.0" aria-label="View source on Github"> - <svg - aria-hidden="true" - width={40} - height={40} - viewBox="0 0 250 250" - style={{ - zIndex: 100000, - fill: 'black', - color: '#fff', - position: 'fixed', - top: '0px', - border: 0, - left: '0px', - transform: 'scale(-1.5, 1.5)' - }} - > - <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"> </path> - <path - className="octo-arm" - d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" - fill="currentColor" - style={{ transformOrigin: '130px 106px' }} - > - {' '} - </path> - <path - className="octo-body" - d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" - fill="currentColor" - > - {' '} - </path> - </svg> - </a> - </div> - </header> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - export default class Icon extends React.Component { - render() { - let icon = _.get(this.props, 'icon', null); - return ( - <svg className="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> - {icon === 'dev' ? ( - <path d="M7.42 10.05c-.18-.16-.46-.23-.84-.23H6l.02 2.44.04 2.45.56-.02c.41 0 .63-.07.83-.26.24-.24.26-.36.26-2.2 0-1.91-.02-1.96-.29-2.18zM0 4.94v14.12h24V4.94H0zM8.56 15.3c-.44.58-1.06.77-2.53.77H4.71V8.53h1.4c1.67 0 2.16.18 2.6.9.27.43.29.6.32 2.57.05 2.23-.02 2.73-.47 3.3zm5.09-5.47h-2.47v1.77h1.52v1.28l-.72.04-.75.03v1.77l1.22.03 1.2.04v1.28h-1.6c-1.53 0-1.6-.01-1.87-.3l-.3-.28v-3.16c0-3.02.01-3.18.25-3.48.23-.31.25-.31 1.88-.31h1.64v1.3zm4.68 5.45c-.17.43-.64.79-1 .79-.18 0-.45-.15-.67-.39-.32-.32-.45-.63-.82-2.08l-.9-3.39-.45-1.67h.76c.4 0 .75.02.75.05 0 .06 1.16 4.54 1.26 4.83.04.15.32-.7.73-2.3l.66-2.52.74-.04c.4-.02.73 0 .73.04 0 .14-1.67 6.38-1.8 6.68z" /> - ) : icon === 'facebook' ? ( - <path d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" /> - ) : icon === 'github' ? ( - <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /> - ) : icon === 'instagram' ? ( - <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913a5.885 5.885 0 001.384 2.126A5.868 5.868 0 004.14 23.37c.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558a5.898 5.898 0 002.126-1.384 5.86 5.86 0 001.384-2.126c.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913a5.89 5.89 0 00-1.384-2.126A5.847 5.847 0 0019.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 01-.899 1.382 3.744 3.744 0 01-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 01-1.379-.899 3.644 3.644 0 01-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 100 12.324 6.162 6.162 0 100-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 01-2.88 0 1.44 1.44 0 012.88 0z" /> - ) : icon === 'linkedin' ? ( - <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /> - ) : icon === 'pinterest' ? ( - <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" /> - ) : icon === 'reddit' ? ( - <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z" /> - ) : icon === 'twitter' ? ( - <path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" /> - ) : icon === 'youtube' ? ( - <path d="M23.495 6.205a3.007 3.007 0 00-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 00.527 6.205a31.247 31.247 0 00-.522 5.805 31.247 31.247 0 00.522 5.783 3.007 3.007 0 002.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 002.088-2.088 31.247 31.247 0 00.5-5.783 31.247 31.247 0 00-.5-5.805zM9.609 15.601V8.408l6.264 3.602z" /> - ) : ( - icon === 'vimeo' && ( - <path d="M23.977 6.416c-.105 2.338-1.739 5.543-4.894 9.609-3.268 4.247-6.026 6.37-8.29 6.37-1.409 0-2.578-1.294-3.553-3.881L5.322 11.4C4.603 8.816 3.834 7.522 3.01 7.522c-.179 0-.806.378-1.881 1.132L0 7.197a315.065 315.065 0 003.501-3.128C5.08 2.701 6.266 1.984 7.055 1.91c1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.507.539 2.45 1.131 3.674 1.776 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.868 3.434-5.757 6.762-5.637 2.473.06 3.628 1.664 3.493 4.797l-.013.01z" /> - ) - )} - </svg> - ); - } - } - - --- - - js - // - import React from 'react'; - - import { Helmet } from 'react-helmet'; - import _ from 'lodash'; - - import { withPrefix, attribute } from '../utils'; - import '../sass/main.scss'; - import Header from './Header'; - import Footer from './Footer'; - import addScript from './../hooks/addScript'; - const Script = (props) => { - importScript('./../hooks/addScript.js'); - }; - export default class Body extends React.Component { - render() { - return ( - <React.Fragment> - <Helmet> - <title> - {_.get(this.props, 'pageContext.frontmatter.seo.title', null) - ? _.get(this.props, 'pageContext.frontmatter.seo.title', null) - : _.get(this.props, 'pageContext.frontmatter.title', null) + ' | ' + _.get(this.props, 'pageContext.site.siteMetadata.title', null)} - </title> - <meta charSet="utf-8" /> - <meta name="viewport" content="width=device-width, initialScale=1.0" /> - <meta name="description" content={_.get(this.props, 'pageContext.frontmatter.seo.description', null) || ''} /> - {_.get(this.props, 'pageContext.frontmatter.seo.robots', null) && ( - <meta name="robots" content={_.join(_.get(this.props, 'pageContext.frontmatter.seo.robots', null), ',')} /> - )} - {_.map(_.get(this.props, 'pageContext.frontmatter.seo.extra', null), (meta, meta_idx) => { - let key_name = _.get(meta, 'keyName', null) || 'name'; - return _.get(meta, 'relativeUrl', null) ? ( - _.get(this.props, 'pageContext.site.siteMetadata.domain', null) && - (() => { - let domain = _.trim(_.get(this.props, 'pageContext.site.siteMetadata.domain', null), '/'); - let rel_url = withPrefix(_.get(meta, 'value', null)); - let full_url = domain + rel_url; - return <meta key={meta_idx} {...attribute(key_name, _.get(meta, 'name', null))} content={full_url} />; - })() - ) : ( - <meta key={meta_idx + '.1'} {...attribute(key_name, _.get(meta, 'name', null))} content={_.get(meta, 'value', null)} /> - ); - })} - <link rel="preconnect" href="https://fonts.gstatic.com" /> - <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" /> - {_.get(this.props, 'pageContext.site.siteMetadata.favicon', null) && ( - <link rel="icon" href={withPrefix(_.get(this.props, 'pageContext.site.siteMetadata.favicon', null))} /> - )} - <body className={'palette-' + _.get(this.props, 'pageContext.site.siteMetadata.palette', null)} /> - </Helmet> - <div id="page" className="site"> - <Header {...this.props} /> - {/* INSERT SEARCH BAR HERE */} - {/* <div className="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width={100} data-layout="standard" data-action="like" data-size="small" data-share="true" /> */} - <main id="content" className="site-content"> - {this.props.children} - </main> - <Footer {...this.props} /> - </div> - </React.Fragment> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - import { classNames, withPrefix, markdownify } from '../utils'; - import CtaButtons from './CtaButtons'; - - export default class SectionContent extends React.Component { - render() { - let section = _.get(this.props, 'section', null); - return ( - <section id={_.get(section, 'section_id', null)} className="block block-text outer"> - <div className="outter"> - <div - className={classNames('inner', { - 'grid-swap': _.get(section, 'image', null) && _.get(section, 'image_position', null) === 'right' - })} - > - {_.get(section, 'image', null) && ( - <div className="grid-item block-image"> - <img src={withPrefix(_.get(section, 'image', null))} alt={_.get(section, 'image_alt', null)} /> - </div> - )} - <div> - {_.get(section, 'title', null) && ( - <div className="block-header"> - <h2 className="block-title"> {_.get(section, 'title', null)}</h2> - </div> - )} - {_.get(section, 'content', null) && <div className="outer"> {markdownify(_.get(section, 'content', null))}</div>} - {_.get(section, 'actions', null) && ( - <div className="block-buttons"> - <CtaButtons {...this.props} actions={_.get(section, 'actions', null)} /> - </div> - )} - </div> - </div> - </div> - </section> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - import { htmlToReact } from '../utils'; - import CtaButtons from './CtaButtons'; - - export default class SectionCta extends React.Component { - render() { - let section = _.get(this.props, 'section', null); - return ( - <section id={_.get(section, 'section_id', null)} className="block block-cta outer"> - <div className="inner"> - <div className="has-gradient"> - <div className="grid grid-middle grid-center"> - {(_.get(section, 'title', null) || _.get(section, 'subtitle', null)) && ( - <div className="grid-item block-header"> - {_.get(section, 'title', null) && <h2 className="block-title"> {_.get(section, 'title', null)}</h2>} - {_.get(section, 'subtitle', null) && <p className="block-subtitle"> {htmlToReact(_.get(section, 'subtitle', null))}</p>} - </div> - )} - {_.get(section, 'actions', null) && ( - <div className="grid-item block-buttons"> - <CtaButtons {...this.props} actions={_.get(section, 'actions', null)} /> - </div> - )} - </div> - </div> - </div> - </section> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - import { classNames, htmlToReact, pathJoin, getPage, Link, withPrefix } from '../utils'; - - export default class SectionDocs extends React.Component { - render() { - let section = _.get(this.props, 'section', null); - return ( - <section - id={_.get(section, 'section_id', null)} - className={classNames('block', 'block-grid', 'outer', { - 'has-header': _.get(section, 'title', null) || _.get(section, 'subtitle', null) - })} - > - <div className="inner"> - {(_.get(section, 'title', null) || _.get(section, 'subtitle', null)) && ( - <div className="block-header inner-sm"> - {_.get(section, 'title', null) && <h2 className="block-title"> {_.get(section, 'title', null)}</h2>} - {_.get(section, 'subtitle', null) && <p className="block-subtitle"> {htmlToReact(_.get(section, 'subtitle', null))}</p>} - </div> - )} - <div className="<iframe "> - <div - className={classNames('grid', { - 'grid-col-2': _.get(section, 'col_number', null) === 'two', - 'grid-col-3': _.get(section, 'col_number', null) === 'three' - })} - > - {_.map(_.get(this.props, 'pageContext.site.data.doc_sections.sections', null), (doc_section, doc_section_idx) => { - let doc_section_path = pathJoin(_.get(this.props, 'pageContext.site.data.doc_sections.root_docs_path', null), doc_section); - let doc_section_page = getPage(this.props.pageContext.pages, doc_section_path); - return ( - <div key={doc_section_idx} className="grid-item"> - <div className="grid-item-inside"> - <h3 className="grid-item-title line-left"> - <Link to={withPrefix(_.get(doc_section_page, 'url', null))}> - {_.get(doc_section_page, 'frontmatter.title', null)} - </Link> - </h3> - {_.get(doc_section_page, 'frontmatter.excerpt', null) && ( - <div className="grid-item-content"> - <p> {htmlToReact(_.get(doc_section_page, 'frontmatter.excerpt', null))}</p> - </div> - )} - <div className="grid-item-buttons"> - <Link to={withPrefix(_.get(doc_section_page, 'url', null))}> Learn More</Link> - </div> - </div> - </div> - ); - })} - </div> - </div> - </div> - </section> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - import { classNames, htmlToReact, withPrefix, Link, markdownify } from '../utils'; - import CtaButtons from './CtaButtons'; - - export default class SectionGrid extends React.Component { - render() { - let section = _.get(this.props, 'section', null); - return ( - <section - id={_.get(section, 'section_id', null)} - className={classNames('block', 'block-grid', 'outer', { - 'has-header': _.get(section, 'title', null) || _.get(section, 'subtitle', null) - })} - > - <div className="inner"> - {(_.get(section, 'title', null) || _.get(section, 'subtitle', null)) && ( - <div className="block-header inner-sm"> - {_.get(section, 'title', null) && <h2 className="block-title"> {_.get(section, 'title', null)}</h2>} - {_.get(section, 'subtitle', null) && <p className="block-subtitle"> {htmlToReact(_.get(section, 'subtitle', null))}</p>} - </div> - )} - {_.get(section, 'grid_items', null) && ( - <div className="<iframe "> - <div - className={classNames('grid', { - 'grid-col-2': _.get(section, 'col_number', null) === 'two', - 'grid-col-3': _.get(section, 'col_number', null) === 'three' - })} - > - {_.map(_.get(section, 'grid_items', null), (item, item_idx) => ( - <div key={item_idx} className="grid-item"> - <div className="grid-item-inside"> - {_.get(item, 'image', null) && ( - <div className="grid-item-image"> - <img src={withPrefix(_.get(item, 'image', null))} alt={_.get(item, 'image_alt', null)} /> - </div> - )} - {_.get(item, 'title', null) && ( - <h3 className="grid-item-title line-left"> - {_.get(item, 'title_url', null) ? ( - <Link to={withPrefix(_.get(item, 'title_url', null))}> {_.get(item, 'title', null)}</Link> - ) : ( - _.get(item, 'title', null) - )} - </h3> - )} - {_.get(item, 'content', null) && ( - <div className="grid-item-content"> {markdownify(_.get(item, 'content', null))}</div> - )} - {_.get(item, 'actions', null) && ( - <div className="grid-item-buttons"> - <CtaButtons {...this.props} actions={_.get(item, 'actions', null)} /> - </div> - )} - </div> - </div> - ))} - </div> - </div> - )} - </div> - </section> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - import { toStyleObj, withPrefix, markdownify } from '../utils'; - import CtaButtons from './CtaButtons'; - - export default class SectionHero extends React.Component { - render() { - let section = _.get(this.props, 'section', null); - return ( - <section id={_.get(section, 'section_id', null)} className="block block-hero has-gradient outer"> - {_.get(section, 'image', null) && ( - <div className="bg-img" style={toStyleObj("background-image: url('" + withPrefix(_.get(section, 'image', null)) + "')")} /> - )} - <div className="inner-sm"> - {_.get(section, 'title', null) && ( - <div className="block-header"> - <h1 className="block-title"> {_.get(section, 'title', null)}</h1> - </div> - )} - {_.get(section, 'content', null) && <div className="<iframe "> {markdownify(_.get(section, 'content', null))}</div>} - {_.get(section, 'actions', null) && ( - <div className="block-buttons"> - <CtaButtons {...this.props} actions={_.get(section, 'actions', null)} /> - </div> - )} - </div> - </section> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - - import { classNames } from '../utils'; - import ActionLink from './ActionLink'; - - export default class Submenu extends React.Component { - render() { - let page = _.get(this.props, 'page', null); - return ( - <ul className={_.get(this.props, 'menu_class', null)}> - {_.map(_.get(this.props, 'submenu', null), (action, action_idx) => { - let page_url = _.trim(_.get(page, 'url', null), '/'); - let action_url = _.trim(_.get(action, 'url', null), '/'); - return ( - <li - key={action_idx} - className={classNames('menu-item', { - current: page_url === action_url, - 'menu-button': _.get(action, 'style', null) !== 'link' - })} - > - <ActionLink {...this.props} action={action} /> - </li> - ); - })} - </ul> - ); - } - } - - js - // - import ActionLink from './ActionLink'; - import CtaButtons from './CtaButtons'; - import DocsMenu from './DocsMenu'; - import DocsSubmenu from './DocsSubmenu'; - import Footer from './Footer'; - import Header from './Header'; - import Icon from './Icon'; - import SectionContent from './SectionContent'; - import SectionCta from './SectionCta'; - import SectionDocs from './SectionDocs'; - import SectionGrid from './SectionGrid'; - import SectionHero from './SectionHero'; - import Submenu from './Submenu'; - import Layout from './Layout'; - import addScript from './../hooks/addScript'; - export { - ActionLink, - CtaButtons, - DocsMenu, - DocsSubmenu, - Footer, - Header, - Icon, - SectionContent, - SectionCta, - SectionDocs, - SectionGrid, - SectionHero, - Submenu, - addScript, - Layout - }; - - export default { - ActionLink, - CtaButtons, - DocsMenu, - DocsSubmenu, - Footer, - Header, - Icon, - SectionContent, - SectionCta, - SectionDocs, - SectionGrid, - SectionHero, - Submenu, - Layout, - addScript - }; - -
- -
- Click To See Template Sourcecode - - # Templates - - ├── advanced.js - ├── blog.js - ├── docs.js - ├── page.js - └── post.js - - js - // - import React from 'react'; - import _ from 'lodash'; - import { graphql } from 'gatsby'; - - import components, { Layout } from '../components/index'; - - // this minimal GraphQL query ensures that when 'gatsby develop' is running, - // any changes to content files are reflected in browser - export const query = graphql` - query ($url: String) { - sitePage(path: { eq: $url }) { - id - } - } - `; - - export default class Advanced extends React.Component { - render() { - return ( - <Layout {...this.props}> - {_.map(_.get(this.props, 'pageContext.frontmatter.sections', null), (section, section_idx) => { - let component = _.upperFirst(_.camelCase(_.get(section, 'type', null))); - let Component = components[component]; - return <Component key={section_idx} {...this.props} section={section} site={this.props.pageContext.site} />; - })} - </Layout> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - import moment from 'moment-strftime'; - import { graphql } from 'gatsby'; - - import { Layout } from '../components/index'; - import { toStyleObj, withPrefix, getPages, Link } from '../utils'; - - // this minimal GraphQL query ensures that when 'gatsby develop' is running, - // any changes to content files are reflected in browser - export const query = graphql` - query ($url: String) { - sitePage(path: { eq: $url }) { - id - } - } - `; - - export default class Blog extends React.Component { - render() { - let display_posts = _.orderBy(getPages(this.props.pageContext.pages, '/blog'), 'frontmatter.date', 'desc'); - return ( - <Layout {...this.props}> - <header className="page-header has-gradient outer"> - {_.get(this.props, 'pageContext.frontmatter.image', null) && ( - <div - className="bg-img" - style={toStyleObj("background-image: url('" + withPrefix(_.get(this.props, 'pageContext.frontmatter.image', null)) + "')")} - /> - )} - <div className="inner-sm"> - <h1 className="page-title"> {_.get(this.props, 'pageContext.frontmatter.title', null)}</h1> - {_.get(this.props, 'pageContext.frontmatter.subtitle', null) && ( - <p className="page-subtitle"> {_.get(this.props, 'pageContext.frontmatter.subtitle', null)}</p> - )} - </div> - </header> - <div className="inner-md outer"> - <div className="post-feed"> - {_.map(display_posts, (post, post_idx) => ( - <article key={post_idx} className="post"> - {_.get(post, 'frontmatter.thumb_image', null) && ( - <Link className="post-thumbnail" to={withPrefix(_.get(post, 'url', null))}> - <img - src={withPrefix(_.get(post, 'frontmatter.thumb_image', null))} - alt={_.get(this.props, 'pageContext.frontmatter.thumb_image_alt', null)} - /> - </Link> - )} - <header className="post-header"> - <div className="post-meta"> - <time className="published" dateTime={moment(_.get(post, 'frontmatter.date', null)).strftime('%Y-%m-%d %H:%M')}> - {moment(_.get(post, 'frontmatter.date', null)).strftime('%B %d, %Y')} - </time> - </div> - <h2 className="post-title line-left"> - <Link to={withPrefix(_.get(post, 'url', null))} rel="bookmark"> - {_.get(post, 'frontmatter.title', null)} - </Link> - </h2> - </header> - {_.get(post, 'frontmatter.excerpt', null) && ( - <React.Fragment> - <p className="post-excerpt"> {_.get(post, 'frontmatter.excerpt', null)}</p> - {_.get(this.props, 'pageContext.frontmatter.has_more_link', null) === true && - _.get(this.props, 'pageContext.frontmatter.more_link_text', null) && ( - <p className="read-more"> - <Link className="read-more-link" to={withPrefix(_.get(post, 'url', null))}> - {_.get(this.props, 'pageContext.frontmatter.more_link_text', null)} - </Link> - </p> - )} - </React.Fragment> - )} - </article> - ))} - </div> - </div> - </Layout> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - import { graphql } from 'gatsby'; - - import { Layout } from '../components/index'; - import DocsMenu from '../components/DocsMenu'; - import { htmlToReact, getPages, Link, withPrefix } from '../utils'; - - // this minimal GraphQL query ensures that when 'gatsby develop' is running, - // any changes to content files are reflected in browser - export const query = graphql` - query ($url: String) { - sitePage(path: { eq: $url }) { - id - } - } - `; - - export default class Docs extends React.Component { - render() { - let root_docs_path = _.trim(_.get(this.props, 'pageContext.site.data.doc_sections.root_docs_path', null), '/'); - let current_page_url = _.trim(_.get(this.props, 'pageContext.url', null), '/'); - return ( - <Layout {...this.props}> - <div className="inner outer"> - <div className="docs-content"> - <DocsMenu {...this.props} page={this.props.pageContext} site={this.props.pageContext.site} /> - <article className="post type-docs"> - <div className="post-inside"> - <header className="post-header"> - <h1 className="post-title line-left"> {_.get(this.props, 'pageContext.frontmatter.title', null)}</h1> - </header> - <div className="post-content"> - {htmlToReact(_.get(this.props, 'pageContext.html', null))} - {root_docs_path !== current_page_url && - (() => { - let child_pages = _.orderBy(getPages(this.props.pageContext.pages, current_page_url), 'frontmatter.weight'); - let child_count = _.size(child_pages); - let has_children = child_count > 0 ? true : false; - return ( - <React.Fragment> - {has_children && ( - <ul id="docs-section-items" className="docs-section-items"> - {_.map(child_pages, (child_page, child_page_idx) => ( - <li key={child_page_idx} className="docs-section-item"> - <Link to={withPrefix(_.get(child_page, 'url', null))} className="docs-item-link"> - {_.get(child_page, 'frontmatter.title', null)} - <span className="icon-angle-right" aria-hidden="true" /> - </Link> - </li> - ))} - </ul> - )} - </React.Fragment> - ); - })()} - </div> - </div> - </article> - <nav id="page-nav" className="page-nav"> - <div id="page-nav-inside" className="page-nav-inside sticky"> - <h2 className="page-nav-title"> Jump to Section</h2> - <div id="page-nav-link-container" /> - </div> - </nav> - </div> - </div> - </Layout> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - import { graphql } from 'gatsby'; - - import { Layout } from '../components/index'; - import { toStyleObj, withPrefix, htmlToReact } from '../utils'; - - // this minimal GraphQL query ensures that when 'gatsby develop' is running, - // any changes to content files are reflected in browser - export const query = graphql` - query ($url: String) { - sitePage(path: { eq: $url }) { - id - } - } - `; - - export default class Page extends React.Component { - render() { - return ( - <Layout {...this.props}> - <article className="post post-full"> - <header className="post-header has-gradient outer"> - {_.get(this.props, 'pageContext.frontmatter.image', null) && ( - <div - className="bg-img" - style={toStyleObj("background-image: url('" + withPrefix(_.get(this.props, 'pageContext.frontmatter.image', null)) + "')")} - /> - )} - <div className="inner-sm"> - <h1 className="post-title"> {_.get(this.props, 'pageContext.frontmatter.title', null)}</h1> - {_.get(this.props, 'pageContext.frontmatter.subtitle', null) && ( - <div className="post-subtitle"> {htmlToReact(_.get(this.props, 'pageContext.frontmatter.subtitle', null))}</div> - )} - </div> - </header> - <div className="inner-md outer"> - <div className="post-content"> {htmlToReact(_.get(this.props, 'pageContext.html', null))}</div> - </div> - </article> - </Layout> - ); - } - } - - --- - - js - // - import React from 'react'; - import _ from 'lodash'; - import moment from 'moment-strftime'; - import { graphql } from 'gatsby'; - - import { Layout } from '../components/index'; - import { toStyleObj, withPrefix, htmlToReact } from '../utils'; - - // this minimal GraphQL query ensures that when 'gatsby develop' is running, - // any changes to content files are reflected in browser - export const query = graphql` - query ($url: String) { - sitePage(path: { eq: $url }) { - id - } - } - `; - - export default class Post extends React.Component { - render() { - return ( - <Layout {...this.props}> - <article className="post post-full"> - <header className="post-header has-gradient outer"> - {_.get(this.props, 'pageContext.frontmatter.image', null) && ( - <div - className="bg-img" - style={toStyleObj("background-image: url('" + withPrefix(_.get(this.props, 'pageContext.frontmatter.image', null)) + "')")} - /> - )} - <div className="inner-sm"> - <div className="post-meta"> - <time - className="published" - dateTime={moment(_.get(this.props, 'pageContext.frontmatter.date', null)).strftime('%Y-%m-%d %H:%M')} - > - {moment(_.get(this.props, 'pageContext.frontmatter.date', null)).strftime('%B %d, %Y')} - </time> - </div> - <h1 className="post-title"> {_.get(this.props, 'pageContext.frontmatter.title', null)}</h1> - {_.get(this.props, 'pageContext.frontmatter.subtitle', null) && ( - <div className="post-subtitle"> {htmlToReact(_.get(this.props, 'pageContext.frontmatter.subtitle', null))}</div> - )} - </div> - </header> - <div className="inner-md outer"> - <div className="post-content"> {htmlToReact(_.get(this.props, 'pageContext.html', null))}</div> - </div> - </article> - </Layout> - ); - } - } - -
-
- -
-
- - - - - - - - - - - \ No newline at end of file diff --git a/eslintrc.json b/eslintrc.json new file mode 100644 index 0000000000..2e1e43c5aa --- /dev/null +++ b/eslintrc.json @@ -0,0 +1,17 @@ +{ + "env": { + "node": true, + "es6": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": 2018 + }, + "rules": { + "indent": ["error", 4], + "linebreak-style": ["error", "unix"], + "quotes": ["error", "single"], + "semi": ["error", "always"], + "no-unused-vars": 0 + } +} diff --git a/gatsby-config.js b/gatsby-config.js index 6e67e0b788..f3cb50d25b 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,43 +1,54 @@ -const siteMetadata = require('./site-metadata.json') +const siteMetadata = require('./site-metadata.json'); module.exports = { pathPrefix: '/', siteMetadata: siteMetadata, plugins: [ - `gatsby-plugin-react-helmet`, - `gatsby-source-data`, - + 'gatsby-plugin-react-helmet', + 'gatsby-source-data', + 'gatsby-transformer-remark', { - resolve: `gatsby-source-filesystem`, + resolve: 'gatsby-source-filesystem', options: { - name: `pages`, + name: 'pages', path: `${__dirname}/src/pages` } }, { - resolve: `gatsby-plugin-disqus`, + resolve: 'gatsby-transformer-remark', + options: { + plugins: ['gatsby-remark-prismjs-copy-button', 'gatsby-remark-prismjs'], + }, + }, + { + resolve: 'gatsby-remark-code-buttons', + + + }, + { + resolve: 'gatsby-plugin-disqus', options: { - shortname: `webdevhub-1`, + shortname: 'webdevhub-1', } }, { - resolve: `gatsby-plugin-sass`, + resolve: 'gatsby-plugin-sass', options: {} }, { - resolve: `gatsby-remark-page-creator`, + resolve: 'gatsby-remark-page-creator', options: {} }, { - resolve: `@stackbit/gatsby-plugin-menus`, + resolve: '@stackbit/gatsby-plugin-menus', options: { - sourceUrlPath: `fields.url`, - pageContextProperty: `menus`, + sourceUrlPath: 'fields.url', + pageContextProperty: 'menus', }, }, { - resolve: `gatsby-plugin-disqus`, + resolve: 'gatsby-plugin-disqus', options: { - shortname: `webdevhub-1` + shortname: 'webdevhub-1' } }, ] diff --git a/gatsby-node.js b/gatsby-node.js index e69de29bb2..a02d0bd177 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -0,0 +1,9 @@ +const path = require('path'); + +exports.onCreateWebpackConfig = ({ actions }) => { + actions.setWebpackConfig({ + resolve: { + modules: [path.resolve(__dirname, 'src'), 'node_modules'] + } + }); +}; diff --git a/gatsby-ssr.js b/gatsby-ssr.js index af328e77b5..4ba674f545 100644 --- a/gatsby-ssr.js +++ b/gatsby-ssr.js @@ -2,44 +2,44 @@ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. * * {/* // search-create.js -//"},{"url":"/blog/expressjs-apis/","relativePath":"blog/expressjs-apis.md","relativeDir":"blog","base":"expressjs-apis.md","name":"expressjs-apis","frontmatter":{"title":"ExpressJS Apis","subtitle":"node & expressjs Overview","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 well 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":"ExpressJS Apis","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"post","thumb_image":"images/express.png"},"html":"

Part

\n

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

\n

SQL Tryit Editor v1.6

\n
\n

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

\n
\n

Data Persistence

\n

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

\n

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

\n

Relational Databases

\n

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

\n

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

\n

Tables

\n

\"tables\"

\n

Below are some basic facts about tables:

\n\n

Overview

\n

SQL

\n

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

\n

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

\n

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

\n

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

\n\n

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

\n

Overview

\n

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

\n

Query

\n

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

\n

The basic syntax for a SELECT statement is this:

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

Insert

\n

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

\n

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

\n

Modify

\n

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

\n

The basic syntax for an UPDATE statement is:

\n

The basic syntax for a DELETE statement is:

\n

Follow Along

\n

Filtering results using WHERE clause

\n

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

\n

A WHERE clause can help in both cases.

\n

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

\n

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

\n

The following query includes only records that match both criteria.

\n

And this query includes records that match either criteria.

\n

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

\n

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

\n

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

\n

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

\n

Ordering results using the ORDER BY clause

\n

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

\n

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

\n

Some SQL engines also support using field abbreviations when sorting.

\n

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

\n

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

\n

Limiting results using the LIMIT clause

\n

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

\n

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

\n

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

\n

Inserting data using INSERT

\n

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

\n

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

\n

Modifying recording using UPDATE

\n

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

\n

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

\n

Removing records using DELETE

\n

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

\n

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

\n

Overview

\n

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

\n

For example, instead of a raw SQL SELECT:

\n

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

\n

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

\n

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

\n

Follow Along

\n

Knex Setup

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

SELECT using Knex

\n

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

\n

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

\n

Using this, we could write a GET endpoint.

\n

NOTE: All Knex queries return promises.

\n

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

\n

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

\n

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

\n

INSERT using Knex

\n

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

\n

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

\n

UPDATE using Knex

\n

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

\n

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

\n

Update will resolve to a count of rows updated.

\n

DELETE using Knex

\n

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

\n

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

\n
\n

Part 2

\n

Overview

\n

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

\n

Follow Along

\n

What is a DBMS?

\n

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

\n

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

\n

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

\n

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

\n

What is SQLite?

\n

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

\n

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

\n

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

\n

Opening an existing database in SQLite Studio

\n

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

\n

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

\n

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

\n

Overview

\n

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

\n

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

\n

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

\n

Follow Along

\n

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

\n

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

\n\n

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

\n

Untitled

\n

Table Fields

\n

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

\n

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

\n

Datatypes

\n

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

\n\n

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

\n

Constraints

\n

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

\n\n

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

\n

Multi-Table Design

\n

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

\n

Overview

\n

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

\n

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

\n

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

\n

Follow Along

\n

Knex Cli

\n

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

\n

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

\n

Initializing Knex

\n

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

\n

npm install knex sqlite3

\n

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

\n

Or, if Knex isn't globally installed:

\n

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

\n

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

\n

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

\n

Knex Migrations

\n

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

\n

We can generate a new migration with the following command:

\n

knex migrate:make [migration-name]

\n

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

\n

knex migrate:make create-accounts

\n

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

\n

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

\n

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

\n

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

\n

knex migrate:latest

\n

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

\n

Changes and Rollbacks

\n

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

\n

knex migrate:make accounts-schema-update

\n

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

\n

knex migrate:latest

\n

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

\n

knex migrate:rollback

\n

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

\n

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

\n

Overview

\n

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

\n

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

\n

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

\n

Follow Along

\n

Knex Cli

\n

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

\n

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

\n

Initializing Knex

\n

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

\n

npm install knex sqlite3

\n

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

\n

Or, if Knex isn't globally installed:

\n

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

\n

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

\n

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

\n

Knex Migrations

\n

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

\n

We can generate a new migration with the following command:

\n

knex migrate:make [migration-name]

\n

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

\n

knex migrate:make create-accounts

\n

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

\n

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

\n

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

\n

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

\n

knex migrate:latest

\n

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

\n

Changes and Rollbacks

\n

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

\n

knex migrate:make accounts-schema-update

\n

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

\n

knex migrate:latest

\n

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

\n

knex migrate:rollback

\n

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

\n

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

\n

Overview

\n

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

\n

Follow Along

\n

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

\n

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

\n

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

\n

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

\n

We want to create seeds for our accounts table:

\n

knex seed:make 001-accounts

\n

A file will appear in the designated seed folder.

\n

Run the seed files by typing:

\n

knex seed:run

\n

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

\n
\n

Part 3

\n

Overview

\n

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

\n

Follow Along

\n

Consider the following farms and ranchers tables.

\n

Untitled

\n

Untitled

\n

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

\n

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

\n

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

\n

Overview

\n

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

\n

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

\n\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

Follow Along

\n

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

\n

What is SQL Joins?

\n

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

\n

How to Join two tables in SQL?

\n

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

\n

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

\n

Join vs. Subquery

\n\n

SQL JOINS: EQUI JOIN and NON EQUI JOIN

\n

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

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

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

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

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

\n

SQL EQUI JOIN : INNER JOIN and OUTER JOIN

\n

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

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

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

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

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

\n

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

\n

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

\n

Syntax:

\n

Parameters:

\n

Untitled

\n

Pictorial Presentation of SQL Joins:

\n

\n

Example:

\n

Sample table: company

\n

Sample table: foods

\n

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

\n

SQL Code:

\n

Copy

\n

Output:

\n

Overview

\n

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

\n

Follow Along

\n

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

\n

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

\n

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

\n

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

\n

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

\n

…and use the helpers in our endpoints

\n

There should no be knex code in the endpoints themselves.

\n
\n

Part 4

\n

\n

Overview

\n

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

\n

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

\n

Follow Along

\n

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

\n

Normalization Guidelines

\n\n

Denormalized Data

\n

Untitled

\n

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

\n

Untitled

\n

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

\n

Untitled

\n

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

\n

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

\n

Anomalies

\n

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

\n

Untitled

\n

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

\n

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

\n

Challenge

\n

What issues does the following table have?

\n

Untitled

\n

Overview

\n

There are three types of relationships:

\n\n

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

\n

Follow Along

\n

One to One Relationships

\n

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

\n

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

\n

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

\n

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

\n

Untitled

\n

Untitled

\n

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

\n

Notes about one-to-one relationships:

\n\n

One to Many Relationships

\n

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

\n

This is called a one-to-many relationship.

\n

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

\n\n

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

\n

Untitled

\n

Untitled

\n

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

\n

Many to Many Relationships

\n

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

\n

Some other examples:

\n\n

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

\n

Untitled

\n

Untitled

\n

Untitled

\n

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

\n

Overview

\n

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

\n

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

\n

Follow Along

\n

Foreign Key Setup

\n

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

\n

Migrations

\n

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

\n

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

\n

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

\n

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

\n

Seeds

\n

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

\n

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

\n

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

\n

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

\n

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

\n

Cascading

\n

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

\n

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

"},{"url":"/blog/everything-you-need-to-get-started-with-vscode/","relativePath":"blog/everything-you-need-to-get-started-with-vscode.md","relativeDir":"blog","base":"everything-you-need-to-get-started-with-vscode.md","name":"everything-you-need-to-get-started-with-vscode","frontmatter":{"title":"Everything You Need to Get Started With VSCode","template":"post","subtitle":"Every extension or tool you could possibly need","excerpt":"Every extension or tool you could possibly need","date":"2022-06-07T01:21:42.750Z","image":"https://cdn-images-1.medium.com/max/1200/1*gcp0kkiWQY6qd1Y4qEcqxw.png","thumb_image":"https://cdn-images-1.medium.com/max/1200/1*gcp0kkiWQY6qd1Y4qEcqxw.png","image_position":"right","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/awesome-lists.yaml","src/data/categories/google.yaml","src/data/categories/git.yaml"],"tags":["src/data/tags/psql.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/awesome-resources.md"],"cmseditable":true},"html":"\n

Everything You Need to Get Started With VSCode + Extensions & Resources

\n

Commands:

\n
\n

Everything You Need to Get Started With VSCode + Extensions & Resources

\n

Every extension or tool you could possibly need

\n

\n

Here’s a rudimentary static site I made that goes into more detail on the extensions I use…

\n

VSCodeExtensions
\n5fff5b9a2430bb564bfd451d–stoic-mccarthy-2c335f.netlify.app

\n

Here’s the repo it was deployed from:

\n

https://github.com/bgoonz/vscode-Extension-readmes

\n
\n

Commands:

\n
\n

Command Palette

\n

Access all available commands based on your current context.

\n

Keyboard Shortcut: Ctrl+Shift+P

\n
\n

\n

Command palette

\n

⇧⌘P Show all commands ⌘P Show files

\n

Sidebars

\n

⌘B Toggle sidebar ⇧⌘E Explorer ⇧⌘F Search ⇧⌘D Debug ⇧⌘X Extensions ⇧^G Git (SCM)

\n

Search

\n

⌘F Find ⌥⌘F Replace ⇧⌘F Find in files ⇧⌘H Replace in files

\n

Panel

\n

⌘J Toggle panel ⇧⌘M Problems ⇧⌘U Output ⇧⌘Y Debug console ^` ``Terminal

\n

View

\n

⌘k z Zen mode ⌘k u Close unmodified ⌘k w Close all

\n

Debug

\n

F5 Start ⇧F5 Stop ⇧⌘F5 Restart ^F5 Start without debugging F9 Toggle breakpoint F10 Step over F11 Step into ⇧F11 Step out ⇧⌘D Debug sidebar ⇧⌘Y Debug panel

\n

\n
\n

Tips-N-Tricks:

\n

Here is a selection of common features for editing code. If the keyboard shortcuts aren’t comfortable for you, consider installing a keymap extension for your old editor.

\n

Tip: You can see recommended keymap extensions in the Extensions view with Ctrl+K Ctrl+M which filters the search to @recommended:keymaps .

\n

Multi cursor selection

\n

To add cursors at arbitrary positions, select a position with your mouse and use Alt+Click (Option+click on macOS).

\n

To set cursors above or below the current position use:

\n

Keyboard Shortcut: Ctrl+Alt+Up or Ctrl+Alt+Down

\n

\n

You can add additional cursors to all occurrences of the current selection with Ctrl+Shift+L.

\n

\n

Note: You can also change the modifier to Ctrl/Cmd for applying multiple cursors with the editor.multiCursorModifier setting . See Multi-cursor Modifier for details.

\n

If you do not want to add all occurrences of the current selection, you can use Ctrl+D instead. This only selects the next occurrence after the one you selected so you can add selections one by one.

\n

\n

Column (box) selection

\n

You can select blocks of text by holding Shift+Alt (Shift+Option on macOS) while you drag your mouse. A separate cursor will be added to the end of each selected line.

\n

\n

You can also use keyboard shortcuts to trigger column selection.

\n
\n

Extensions:

\n

AutoHotkey Plus

\n
\n

Syntax Highlighting, Snippets, Go to Definition, Signature helper and Code formatter

\n
\n

Bash Debug

\n
\n

A debugger extension for Bash scripts based on bashdb

\n
\n

\n

Shellman

\n
\n

Bash script snippets extension

\n
\n

\n

C++

\n
\n

C/C++ — Preview C/C++ extension by Microsoft, read official blog post for the details

\n

Clangd — Provides C/C++ language IDE features for VS Code using clangd: code completion, compile errors and warnings, go-to-definition and cross references, include management, code formatting, simple refactorings.

\n

gnu-global-tags — Provide Intellisense for C/C++ with the help of the GNU Global tool.

\n

YouCompleteMe — Provides semantic completions for C/C++ (and TypeScript, JavaScript, Objective-C, Golang, Rust) using YouCompleteMe.

\n

C/C++ Clang Command Adapter — Completion and Diagnostic for C/C++/Objective-C using Clang command.

\n

CQuery — C/C++ language server supporting multi-million line code base, powered by libclang. Cross references, completion, diagnostics, semantic highlighting and more.

\n
\n

More

\n\n

C#, ASP . NET and . NET Core

\n
\n

C# — C# extension by Microsoft, read official documentation for the details

\n

C# FixFormat — Fix format of usings / indents / braces / empty lines

\n

C# Extensions — Provides extensions to the IDE that will speed up your development workflow.

\n

MSBuild Project Tools

\n

VSCode Solution Explorer

\n

. NET Core Test Explorer

\n
\n

\n
\n

CSS

\n

CSS Peek

\n
\n

Peek or Jump to a CSS definition directly from HTML, just like in Brackets!

\n
\n

\n\n

\n\n

\n

Groovy

\n\n

\n

Haskell

\n\n
\n

Java

\n\n
\n

JavaScript

\n\n

\n

See the difference between these two here

\n
\n

tslint — TSLint for Visual Studio Code (with \"tslint.jsEnable\": true ).

\n

eslint — Linter for eslint.

\n

XO — Linter for XO.

\n

AVA — Snippets for AVA.

\n

Prettier — Linter, Formatter and Pretty printer for Prettier.

\n

Schema.org Snippets — Snippets for Schema.org.

\n

Code Spell Checker — Spelling Checker for Visual Studio Code.

\n
\n

Framework-specific:

\n

Vetur — Toolkit for Vue.js

\n

\n
\n

Debugger for Chrome

\n
\n

A VS Code extension to debug your JavaScript code in the Chrome browser, or other targets that support the Chrome Debugging Protocol.

\n
\n

Facebook Flow

\n\n

TypeScript

\n\n
\n

Markdown

\n

markdownlint

\n
\n

Linter for markdownlint.

\n
\n

Markdown All in One

\n
\n

All-in-one markdown plugin (keyboard shortcuts, table of contents, auto preview, list editing and more)

\n
\n

\n

Markdown Emoji

\n
\n

Adds emoji syntax support to VS Code’s built-in Markdown preview

\n
\n

\n
\n

PHP

\n

IntelliSense

\n

These extensions provide slightly different sets of features. While the first one offers better autocompletion support, the second one seems to have more features overall.

\n\n

Laravel

\n\n

\n\n

\n\n

\n\n

\n
\n

Other extensions

\n\n

\n\n
\n

Python

\n\n

TensorFlow

\n\n

\n
\n

Rust

\n\n
\n

Productivity

\n

ARM Template Viewer

\n
\n

Displays a graphical preview of Azure Resource Manager (ARM) templates. The view will show all resources with the official Azure icons and also linkage between the resources.

\n
\n

\n

Azure Cosmos DB

\n
\n

Browse your database inside the vs code editor

\n
\n

\n

Azure IoT Toolkit

\n
\n

Everything you need for the Azure IoT development: Interact with Azure IoT Hub, manage devices connected to Azure IoT Hub, and develop with code snippets for Azure IoT Hub

\n
\n

\n

Bookmarks

\n
\n

Mark lines and jump to them

\n
\n

Color Tabs

\n
\n

An extension for big projects or monorepos that colors your tab/titlebar based on the current package

\n
\n

\n

Create tests

\n
\n

An extension to quickly generate test files.

\n
\n

\n

Deploy

\n
\n

Commands for upload or copy files of a workspace to a destination.

\n
\n

\n

Duplicate Action

\n
\n

Ability to duplicate files and directories.

\n
\n

Error Lens

\n
\n

Show language diagnostics inline (errors/warnings/…).

\n
\n

\n

ES7 React/Redux/GraphQL/React-Native snippets

\n
\n

Provides Javascript and React/Redux snippets in ES7

\n
\n

\n

Gi

\n
\n

Generating .gitignore files made easy

\n
\n

\n

GistPad

\n
\n

Allows you to manage GitHub Gists entirely within the editor. You can open, create, delete, fork, star and clone gists, and then seamlessly begin editing files as if they were local. It’s like your very own developer library for building and referencing code snippets, commonly used config/scripts, programming-related notes/documentation, and interactive samples.

\n
\n

\n

Git History

\n
\n

View git log, file or line History

\n
\n

Git Project Manager

\n
\n

Automatically indexes your git projects and lets you easily toggle between them

\n
\n

GitLink

\n
\n

GoTo current file’s online link in browser and Copy the link in clipboard.

\n
\n

\n

GitLens

\n
\n

Provides Git CodeLens information (most recent commit, # of authors), on-demand inline blame annotations, status bar blame information, file and blame history explorers, and commands to compare changes with the working tree or previous versions.

\n
\n

\n

Git Indicators

\n
\n

Atom-like git indicators on active panel

\n
\n

\n

\n

\n

GitHub

\n
\n

Provides GitHub workflow support. For example browse project, issues, file (the current line), create and manage pull request. Support for other providers (e.g. gitlab or bitbucket) is planned. Have a look at the README.md on how to get started with the setup for this extension.

\n
\n

GitHub Pull Request Monitor

\n
\n

This extension uses the GitHub api to monitor the state of your pull requests and let you know when it’s time to merge or if someone requested changes.

\n
\n

\n

GitLab Workflow

\n
\n

Adds a GitLab sidebar icon to view issues, merge requests and other GitLab resources. You can also view the results of your GitLab CI/CD pipeline and check the syntax of your .gitlab-ci.yml.

\n
\n

Gradle Tasks

\n
\n

Run gradle tasks in VS Code.

\n
\n

\n

Icon Fonts

\n
\n

Snippets for popular icon fonts such as Font Awesome, Ionicons, Glyphicons, Octicons, Material Design Icons and many more!

\n
\n

Import Cost

\n
\n

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

\n
\n

Jira and Bitbucket

\n
\n

Bringing the power of Jira and Bitbucket to VS Code — With Atlassian for VS Code you can create and view issues, start work on issues, create pull requests, do code reviews, start builds, get build statuses and more!

\n
\n

\n

JS Parameter Annotations

\n
\n

Provides annotations on function calls in JS/TS files to provide parameter names to arguments.

\n
\n

\n

Jumpy

\n
\n

Provides fast cursor movement, inspired by Atom’s package of the same name.

\n
\n

\n

Kanban

\n

\n

Simple Kanban board for use in Visual Studio Code, with time tracking and Markdown support.

\n

Live Server

\n
\n

Launch a development local Server with live reload feature for static & dynamic pages.

\n
\n

\n

Multiple clipboards

\n
\n

Override the regular Copy and Cut commands to keep selections in a clipboard ring

\n
\n

ngrok for VSCode

\n
\n

ngrok allows you to expose a web server running on your local machine to the internet. Just tell ngrok what port your web server is listening on. This extension allows you to control ngrok from the VSCode command palette

\n
\n

\n

Instant Markdown

\n
\n

Simply, edit markdown documents in vscode and instantly preview it in your browser as you type.

\n
\n

\n

npm Intellisense

\n
\n

Visual Studio Code plugin that autocompletes npm modules in import statements.

\n
\n

\n

Parameter Hints

\n
\n

Provides parameter hints on function calls in JS/TS/PHP files.

\n
\n

\n

Partial Diff

\n
\n

Compare (diff) text selections within a file, across different files, or to the clipboard

\n
\n

\n

Paste JSON as Code

\n
\n

Infer the structure of JSON and paste is as types in many programming languages

\n
\n

\n

Path IntelliSense

\n
\n

Visual Studio Code plugin that autocompletes filenames

\n
\n

\n

Power Tools

\n
\n

Extends Visual Studio Code via things like Node.js based scripts or shell commands, without writing separate extensions

\n
\n

\n

PrintCode

\n
\n

PrintCode converts the code being edited into an HTML file, displays it by browser and prints it.

\n
\n

\n

Project Manager

\n
\n

Easily switch between projects.

\n
\n

Project Dashboard

\n
\n

VSCode Project Dashboard is a Visual Studio Code extension that lets you organize your projects in a speed-dial like manner. Pin your frequently visited folders, files, and SSH remotes onto a dashboard to access them quickly.

\n
\n

\n

Rainbow CSV

\n
\n

Highlight columns in comma, tab, semicolon and pipe separated files, consistency check and linting with CSVLint, multi-cursor column editing, column trimming and realignment, and SQL-style querying with RBQL.

\n
\n

\n

Remote Development

\n
\n

Allows users to open any folder in a container, on a remote machine, container or in Windows Subsystem for Linux(WSL) and take advantage of VS Code’s full feature set.

\n
\n

\n

Remote VSCode

\n
\n

Allow user to edit files from Remote server in Visual Studio Code directly.

\n
\n

REST Client

\n
\n

Allows you to send HTTP request and view the response in Visual Studio Code directly.

\n
\n

\n

Settings Sync

\n
\n

Synchronize settings, snippets, themes, file icons, launch, key bindings, workspaces and extensions across multiple machines using GitHub Gist

\n
\n

\n

Text Power Tools

\n
\n

All-in-one extension for text manipulation: filtering (grep), remove lines, insert number sequences and GUIDs, format content as table, change case, converting numbers and more. Great for finding information in logs and manipulating text.

\n
\n

\n

Todo Tree

\n
\n

Custom keywords, highlighting, and colors for TODO comments. As well as a sidebar to view all your current tags.

\n
\n

\n

Toggle Quotes

\n
\n

Cycle between single, double and backtick quotes

\n
\n

\n

Typescript Destructure

\n
\n

TypeScript Language Service Plugin providing a set of source actions for easy objects destructuring

\n
\n

\n

WakaTime

\n
\n

Automatic time tracker and productivity dashboard showing how long you coded in each project, file, branch, and language.

\n
\n
\n

Formatting & Beautification

\n

Better Align

\n
\n

Align your code by colon(:), assignment(=, +=, -=, *=, /=) and arrow(=> ). It has additional support for comma-first coding style and trailing comment.

\n

And it doesn’t require you to select what to be aligned, the extension will figure it out by itself.

\n
\n

\n

Auto Close Tag

\n
\n

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text

\n
\n

\n

Auto Rename Tag

\n
\n

Auto rename paired HTML/XML tags

\n
\n

\n

beautify

\n
\n

Beautify code in place for VS Code

\n
\n

html2pug

\n
\n

Transform html to pug inside your Visual Studio Code, forget about using an external page anymore.

\n
\n

ECMAScript Quotes Transformer

\n
\n

Transform quotes of ECMAScript string literals

\n
\n

\n

Paste and Indent

\n
\n

Paste code with “correct” indentation

\n
\n

Sort Lines

\n
\n

Sorts lines of text in specific order

\n
\n

\n

Surround

\n
\n

A simple yet powerful extension to add wrapper templates around your code blocks.

\n
\n

\n

Wrap Selection

\n
\n

Wraps selection or multiple selections with symbol or multiple symbols

\n
\n

Formatting Toggle

\n
\n

Allows you to toggle your formatter on and off with a simple click

\n
\n

Bracket Pair Colorizer

\n
\n

This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.

\n
\n

\n

Auto Import

\n
\n

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

\n
\n

shell-format

\n
\n

shell script & Dockerfile & dotenv format

\n
\n

\n

Vscode Google Translate

\n
\n

Quickly translate selected text right in your code

\n
\n

\n

Explorer Icons

\n

Material Icon Theme

\n

\n

Uncategorized

\n

Browser Preview

\n
\n

Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug. Browser Preview is powered by Chrome Headless, and works by starting a headless Chrome instance in a new process. This enables a secure way to render web content inside VS Code, and enables interesting features such as in-editor debugging and more!

\n

FYI:… I HAVE TRIED ENDLESSLEY TO GET THE DEBUGGER TO WORK IN VSCODE BUT IT DOES NOT… I SUSPECT THAT’S WHY IT HAS A 3 STAR RATING FOR AN OTHERWISE PHENOMINAL EXTENSION.

\n
\n

\n

CodeRoad

\n
\n

Play interactive tutorials in your favorite editor.

\n
\n

\n

Code Runner

\n
\n

Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, C# Script, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script

\n
\n

\n

Code Time

\n
\n

Automatic time reports by project and other programming metrics right in VS Code.

\n
\n

\n

Color Highlight

\n
\n

Highlight web colors in your editor

\n
\n

\n

Output Colorizer

\n
\n

Syntax highlighting for the VS Code Output Panel and log files

\n
\n

\n

Dash

\n
\n

Dash integration in Visual Studio Code

\n
\n

\n

Edit with Shell Command

\n
\n

Leverage your favourite shell commands to edit text

\n
\n

\n

Editor Config for VS Code

\n
\n

Editor Config for VS Code

\n
\n

ftp-sync

\n
\n

Auto-sync your work to remote FTP server

\n
\n

\n

Highlight JSX/HTML tags

\n
\n

Highlights matching tags in the file.

\n
\n

Indent Rainbow

\n
\n

A simple extension to make indentation more readable.

\n
\n

\n

Password Generator

\n
\n

Create a secure password using our generator tool. Help prevent a security threat by getting a strong password today.

\n
\n

\n

PlatformIO

\n
\n

An open source ecosystem for IoT development: supports 350+ embedded boards, 20+ development platforms, 10+ frameworks. Arduino and ARM mbed compatible.

\n
\n

\n

Polacode

\n
\n

Polaroid for your code 📸.

\n

Note: Polacode no longer works as of the most recent update… go for Polacode2020 or CodeSnap…

\n
\n

\n

Quokka

\n

This one is super cool!

\n
\n

Rapid prototyping playground for JavaScript and TypeScript in VS Code, with access to your project’s files, inline reporting, code coverage and rich output formatting.

\n
\n

\n

Slack

\n
\n

Send messages and code snippets, upload files to Slack

\n
\n

Personally I found this extension to slow down my editor in addition to confliction with other extensions: (I have over 200 as of this writing)….. yes I have been made fully aware that I have a problem and need to get help

\n

\n

Spotify

\n

No real advantage over just using Spotify normally… it’s problematic enough in implementation that you won’t save any time using it. Further, it’s a bit tricky to configure … or at least it was the last time I tried syncing it with my spotify account.

\n
\n

Provides integration with Spotify Desktop client. Shows the currently playing song in status bar, search lyrics and provides commands for controlling Spotify with buttons and hotkeys.

\n
\n

\n

SVG

\n
\n

A Powerful SVG Language Support Extension(beta). Almost all the features you need to handle SVG.

\n
\n

\n

SVG Viewer

\n
\n

View an SVG in the editor and export it as data URI scheme or PNG.

\n
\n

Text Marker (Highlighter)

\n
\n

Highlight multiple text patterns with different colors at the same time. Highlighting a single text pattern can be done with the editor’s search functionality, but it cannot highlight multiple patterns at the same time, and this is where this extension comes handy.

\n
\n

\n

ESDOC MDN

\n

THIS IS A MUST HAVE

\n
\n

Quickly bring up helpful MDN documentation in the editor

\n
\n

\n

\n

Themes:

\n

In the interest of not making the reader scroll endlessly as I often do… I’ve made a separate post for that here. If you’ve made it this far, I thank you!

\n"},{"url":"/blog/fast-refresh/","relativePath":"blog/fast-refresh.md","relativeDir":"blog","base":"fast-refresh.md","name":"fast-refresh","frontmatter":{"title":"Fast Refresh","template":"post","subtitle":"Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components.","excerpt":"Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components.","date":"2022-06-06T17:42:17.258Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/react%20(1).png?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/react%20(1).png?raw=true","image_position":"right","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/react.yaml"],"tags":["src/data/tags/react.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/10-essential-react-interview-questions.md"],"cmseditable":true},"html":"\n

Fast Refresh

\n

Fast Refresh is a React Native feature that allows you to get near-instant feedback for changes in your React components. Fast Refresh is enabled by default, and you can toggle “Enable Fast Refresh” in the React Native developer menu. With Fast Refresh enabled, most edits should be visible within a second or two.

\n

How It Works

\n\n

Error Resilience

\n

If you make a syntax error during a Fast Refresh session, you can fix it and save the file again. The redbox will disappear. Modules with syntax errors are prevented from running, so you won’t need to reload the app.

\n

If you make a runtime error during the module initialization (for example, typing Style.create instead of StyleSheet.create), the Fast Refresh session will continue once you fix the error. The redbox will disappear, and the module will be updated.

\n

If you make a mistake that leads to a runtime error inside your component, the Fast Refresh session will also continue after you fix the error. In that case, React will remount your application using the updated code.

\n

If you have error boundaries in your app (which is a good idea for graceful failures in production), they will retry rendering on the next edit after a redbox. In that sense, having an error boundary can prevent you from always getting kicked out to the root app screen. However, keep in mind that error boundaries shouldn’t be too granular. They are used by React in production, and should always be designed intentionally.

\n

Limitations

\n

Fast Refresh tries to preserve local React state in the component you’re editing, but only if it’s safe to do so. Here’s a few reasons why you might see local state being reset on every edit to a file:

\n\n

In the longer term, as more of your codebase moves to function components and Hooks, you can expect state to be preserved in more cases.

\n

Tips

\n\n

Fast Refresh and Hooks

\n

When possible, Fast Refresh attempts to preserve the state of your component between edits. In particular, useState and useRef preserve their previous values as long as you don’t change their arguments or the order of the Hook calls.

\n

Hooks with dependencies—such as useEffect, useMemo, and useCallback—will always update during Fast Refresh. Their list of dependencies will be ignored while Fast Refresh is happening.

\n

For example, when you edit useMemo(() => x * 2, [x]) to useMemo(() => x * 10, [x]), it will re-run even though x (the dependency) has not changed. If React didn’t do that, your edit wouldn’t reflect on the screen!

\n

Sometimes, this can lead to unexpected results. For example, even a useEffect with an empty array of dependencies would still re-run once during Fast Refresh. However, writing code resilient to an occasional re-running of useEffect is a good practice even without Fast Refresh. This makes it easier for you to later introduce new dependencies to it.

\n"},{"url":"/blog/embedding-media-in-html/","relativePath":"blog/embedding-media-in-html.md","relativeDir":"blog","base":"embedding-media-in-html.md","name":"embedding-media-in-html","frontmatter":{"title":"Embedding Media In Html","template":"post","subtitle":"From object to iframe ","excerpt":"getting the hang of embedding things into your web pages","date":"2022-04-19T20:11:27.517Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/embedded-media.png?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/embedded-media.png?raw=true","image_position":"right","show_author_bio":false,"cmseditable":true},"html":"\n

From object to iframe

\n

By now you should really be getting the hang of embedding things into your web pages, including images, video and audio. At this point we'd like to take somewhat of a sideways step, looking at some elements that allow you to embed a wide variety of content types into your webpages: the <iframe>, <embed> and <object> elements. <iframe>s are for embedding other web pages, and the other two allow you to embed PDFs, SVG, and even Flash — a technology that is on the way out, but which you'll still see semi-regularly.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with HTML fundamentals (as covered in Getting started with HTML) and the previous articles in this module.
Objective:To learn how to embed items into web pages using <object>, <embed>, and <iframe>, like PDF documents and other webpages.
\n

A short history of embedding

\n

A long time ago on the Web, it was popular to use frames to create websites — small parts of a website stored in individual HTML pages. These were embedded in a master document called a frameset, which allowed you to specify the area on the screen that each frame filled, rather like sizing the columns and rows of a table. These were considered the height of coolness in the mid to late 90s, and there was evidence that having a webpage split up into smaller chunks like this was better for download speeds — especially noticeable with network connections being so slow back then. They did however have many problems, which far outweighed any positives as network speeds got faster, so you don't see them being used anymore.

\n

A little while later (late 90s, early 2000s), plugin technologies became very popular, such as Java Applets and Flash — these allowed web developers to embed rich content into webpages such as videos and animations, which just weren't available through HTML alone. Embedding these technologies was achieved through elements like <object>, and the lesser-used <embed>, and they were very useful at the time. They have since fallen out of fashion due to many problems, including accessibility, security, file size, and more. These days major browsers have stopped supporting plugins such as Flash.

\n

Finally, the <iframe> element appeared (along with other ways of embedding content, such as <canvas>, <video>, etc.) This provides a way to embed an entire web document inside another one, as if it were an <img> or other such element, and is used regularly today.

\n

With the history lesson out of the way, let's move on and see how to use some of these.

\n

Active learning: classic embedding uses

\n

In this article we are going to jump straight into an active learning section, to immediately give you a real idea of just what embedding technologies are useful for. The online world is very familiar with YouTube, but many people don't know about some of the sharing facilities it has available. Let's look at how YouTube allows us to embed a video in any page we like using an <iframe>.

\n
    \n
  1. First, go to YouTube and find a video you like.
    2. \n
  2. Below the video, you'll find a Share button — select this to display the sharing options.
    3. \n
  3. Select the Embed button and you'll be given some <iframe> code — copy this.
    4. \n
  4. Insert it into the Input box below, and see what the result is in the Output.
    5. \n
\n

For bonus points, you could also try embedding a Google Map in the example:

\n
    \n
  1. Go to Google Maps and find a map you like.
    2. \n
  2. Click on the \"Hamburger Menu\" (three horizontal lines) in the top left of the UI.
    3. \n
  3. Select the Share or embed map option.
    4. \n
  4. Select the Embed map option, which will give you some <iframe> code — copy this.
    5. \n
  5. Insert it into the Input box below, and see what the result is in the Output.
    6. \n
\n

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer.

\n

Active learning classic embedding uses sample

\n

iframes in detail

\n

So, that was easy and fun, right? <iframe> elements are designed to allow you to embed other web documents into the current document. This is great for incorporating third-party content into your website that you might not have direct control over and don't want to have to implement your own version of — such as video from online video providers, commenting systems like Disqus, maps from online map providers, advertising banners, etc. The live editable examples you've been using through this course are implemented using <iframe>s.

\n

There are some serious Security concerns to consider with <iframe>s, as we'll discuss below, but this doesn't mean that you shouldn't use them in your websites — it just requires some knowledge and careful thinking. Let's explore the code in a bit more detail. Say you wanted to include the MDN glossary on one of your web pages — you could try something like this:

\n
\n

Copy to Clipboard

\n

This example includes the basic essentials needed to use an <iframe>:

\n\n
   In the same way as other similar elements like [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video), you can include fallback content between the opening and closing `<iframe>
\n\n

Note: In order to improve speed, it's a good idea to set the iframe's src attribute with JavaScript after the main content is done with loading. This makes your page usable sooner and decreases your official page load time (an important SEO metric.)

\n

Security concerns

\n

Above we mentioned security concerns — let's go into this in a bit more detail now. We are not expecting you to understand all of this content perfectly the first time; we just want to make you aware of this concern, and provide a reference to come back to as you get more experienced and start considering using <iframe>s in your experiments and work. Also, there is no need to be scared and not use <iframe>s — you just need to be careful. Read on...

\n

Browser makers and Web developers have learned the hard way that iframes are a common target (official term: attack vector) for bad people on the Web (often termed hackers, or more accurately, crackers) to attack if they are trying to maliciously modify your webpage, or trick people into doing something they don't want to do, such as reveal sensitive information like usernames and passwords. Because of this, spec engineers and browser developers have developed various security mechanisms for making <iframe>s more secure, and there are also best practices to consider — we'll cover some of these below.

\n

Note: Clickjacking is one kind of common iframe attack where hackers embed an invisible iframe into your document (or embed your document into their own malicious website) and use it to capture users' interactions. This is a common way to mislead users or steal sensitive data.

\n

A quick example first though — try loading the previous example we showed above into your browser — you can find it live on GitHub (see the source code too.) Instead of the page you expected, you'll probably see some kind of message to the effect of \"I can't open this page\", and if you look at the Console in the browser developer tools, you'll see a message telling you why. In Firefox, you'll get told something like The loading of \"https://developer.mozilla.org/en-US/docs/Glossary\" in a frame is denied by \"X-Frame-Options\" directive set to \"DENY\".. This is because the developers that built MDN have included a setting on the server that serves the website pages to disallow them from being embedded inside <iframe>s (see Configure CSP directives, below.) This makes sense — an entire MDN page doesn't really make sense to be embedded in other pages unless you want to do something like embed them on your site and claim them as your own — or attempt to steal data via clickjacking, which are both really bad things to do. Plus if everybody started to do this, all the additional bandwidth would start to cost Mozilla a lot of money.

\n

Only embed when necessary

\n

Sometimes it makes sense to embed third-party content — like youtube videos and maps — but you can save yourself a lot of headaches if you only embed third-party content when completely necessary. A good rule of thumb for web security is \"You can never be too cautious. If you made it, double-check it anyway. If someone else made it, assume it's dangerous until proven otherwise.\"

\n

Besides security, you should also be aware of intellectual property issues. Most content is copyrighted, offline and online, even content you might not expect (for example, most images on Wikimedia Commons). Never display content on your webpage unless you own it or the owners have given you written, unequivocal permission. Penalties for copyright infringement are severe. Again, you can never be too cautious.

\n

If the content is licensed, you must obey the license terms. For example, the content on MDN is licensed under CC-BY-SA. That means, you must credit us properly when you quote our content, even if you make substantial changes.

\n

Use HTTPS

\n

HTTPS is the encrypted version of HTTP. You should serve your websites using HTTPS whenever possible:

\n
    \n
  1. HTTPS reduces the chance that remote content has been tampered with in transit,
    2. \n
  2. HTTPS prevents embedded content from accessing content in your parent document, and vice versa.
    3. \n
\n

HTTPS-enabling your site requires a special security certificate to be installed. Many hosting providers offer HTTPS-enabled hosting without you needing to do any setup on your own to put a certificate in place. But if you do need to set up HTTPS support for your site on your own, Let's Encrypt provides tools and instructions you can use for automatically creating and installing the necessary certificate — with built-in support for the most widely-used web servers, including the Apache web server, Nginx, and others. The Let's Encrypt tooling is designed to make the process as easy as possible, so there's really no good reason to avoid using it or other available means to HTTPS-enable your site.

\n

Note: GitHub pages allow content to be served via HTTPS by default, so it is useful for hosting content. If you are using a different hosting provider and are not sure, ask them about it.

\n

Always use the sandbox attribute

\n

You want to give attackers as little power as you can to do bad things on your website, therefore you should give embedded content only the permissions needed for doing its job. Of course, this applies to your own content, too. A container for code where it can be used appropriately — or for testing — but can't cause any harm to the rest of the codebase (either accidental or malicious) is called a sandbox.

\n

Unsandboxed content can do way too much (executing JavaScript, submitting forms, popup windows, etc.) By default, you should impose all available restrictions by using the sandbox attribute with no parameters, as shown in our previous example.

\n

If absolutely required, you can add permissions back one by one (inside the sandbox=\"\" attribute value) — see the sandbox reference entry for all the available options. One important note is that you should never add both allow-scripts and allow-same-origin to your sandbox attribute — in that case, the embedded content could bypass the Same-origin policy that stops sites from executing scripts, and use JavaScript to turn off sandboxing altogether.

\n

Note: Sandboxing provides no protection if attackers can fool people into visiting malicious content directly (outside an iframe). If there's any chance that certain content may be malicious (e.g., user-generated content), please serve it from a different domain to your main site.

\n

Configure CSP directives

\n

CSP stands for content security policy and provides a set of HTTP Headers (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing <iframe>s, you can configure your server to send an appropriate X-Frame-Options header. This can prevent other websites from embedding your content in their web pages (which would enable clickjacking and a host of other attacks), which is exactly what the MDN developers have done, as we saw earlier on.

\n

Note: You can read Frederik Braun's post On the X-Frame-Options Security Header for more background information on this topic. Obviously, it's rather out of scope for a full explanation in this article.

\n

and elements\">The and elements\n

The <embed> and <object> elements serve a different function to <iframe> — these elements are general purpose embedding tools for embedding external content, such as PDFs.

\n

However, you are unlikely to use these elements very much. If you need to display PDFs, it's usually better to link to them, rather than embedding them in the page.

\n

Historically these elements have also been used for embedding content handled by browser plugins such as Adobe Flash, but this technology is now obsolete and is not supported by modern browsers.

\n

If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
<embed><object>
URL of the embedded contentsrcdata
accurate media type of the embedded contenttypetype
height and width (in CSS pixels) of the box controlled by the pluginheight widthheight width
names and values, to feed the plugin as parametersad hoc attributes with those names and valuessingle-tag <param> elements, contained within <object>
independent HTML content as fallback for an unavailable resourcenot supported (<noembed> is obsolete)contained within <object>, after <param> elements
\n

Let's look at an <object> example that embeds a PDF into a page (see the live example and the source code):

\n
\n

Copy to Clipboard

\n

PDFs were a necessary stepping stone between paper and digital, but they pose many accessibility challenges and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.

\n"},{"url":"/blog/file-system-route-api/","relativePath":"blog/file-system-route-api.md","relativeDir":"blog","base":"file-system-route-api.md","name":"file-system-route-api","frontmatter":{"title":"File System Route API","template":"post","subtitle":"GatsbyJS File System Route API","excerpt":"Use the File System Route API when you want to create dynamic pages","date":"2022-05-16T00:22:26.250Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/file-system.jpg?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/file-system.jpg?raw=true","image_position":"right","author":"src/data/authors/backup.yaml","categories":["src/data/categories/gatsbyjs.yaml"],"tags":["src/data/tags/javascript.yaml","src/data/tags/react.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/gatsby-cli.md"],"cmseditable":true},"html":"

Use the File System Route API when you want to create dynamic pages e.g. to create individual blog post pages for your blog.

\n

You should be able to accomplish most common tasks with this file-based API. If you want more control over the page creation you should use the createPages API.

\n

Dynamic pages can be created from collections in Gatsby's GraphQL data layer and to create client-only routes.

\n

A complete example showcasing all options can be found in Gatsby's examples folder.

\n

Collection routes

\n

Imagine a Gatsby project that sources a product.yaml file and multiple Markdown blog posts. At build time, Gatsby will automatically infer the fields and create multiple nodes for both types (Product and MarkdownRemark).

\n

To create collection routes, use curly braces ({ }) in your filenames to signify dynamic URL segments that relate to a field within the node. Here are a few examples:

\n
    \n
  • src/pages/products/{Product.name}.js will generate a route like /products/burger
    • \n
  • src/pages/products/{Product.fields__sku}.js will generate a route like /products/001923
    • \n
  • src/pages/blog/{MarkdownRemark.parent__(File)__name}.js will generate a route like /blog/learning-gatsby
    • \n
\n

Gatsby creates a page for each node in a collection route. So if you have three markdown files that are blog posts, Gatsby will create the three pages from a collection route. As you add and remove markdown files, Gatsby will add and remove pages.

\n

Collection routes can be created for any GraphQL data type. Creating new collection routes in Gatsby is a process\nof adding a source plugin, use GraphiQL to identify the type and field to construct the route file name, and then code the route component.

\n

Syntax (collection routes)

\n

There are some general syntax requirements when using collection routes:

\n
    \n
  • Dynamic segments of file paths must start and end with curly braces ({ }).
    • \n
  • Types are case-sensitive (e.g. MarkdownRemark or contentfulMyContentType). Check GraphiQL for the correct names.
    • \n
  • Dynamic segments must include both a type and a field e.g. {Type.field} or {BlogPost.slug}.
    • \n
\n

Nested routes

\n

You can use dynamic segments multiple times in a path. For example, you might want to nest product names within its product category. For example:

\n
    \n
  • src/pages/products/{Product.category}/{Product.name}.js will generate a route like /products/toys/fidget-spinner
    • \n
  • src/pages/products/{Product.category}/{Product.name}/{Product.color}.js will generate a route like /products/toys/fidget-spinner/red
    • \n
\n

Field syntax

\n

Dot notation

\n

Using . you signify that you want to access a field on a node of a type.

\n

src/pages/products/{Product.name}.js generates the following query:

\n
allProduct {\n  nodes {\n    id # Gatsby always queries for id\n    name\n  }\n}
\n

Underscore notation

\n

Using __ (double underscore) you signify that you want to access a nested field on a node.

\n

src/pages/products/{Product.fields__sku}.js generates the following query:

\n
allProduct {\n  nodes {\n    id # Gatsby always queries for id\n    fields {\n      sku\n    }\n  }\n}
\n

You can nest as deep as necessary, e.g. src/pages/products/{Product.fields__date__createdAt}.js generates the following query:

\n
allProduct {\n  nodes {\n    id # Gatsby always queries for id\n    fields {\n      date {\n        createdAt\n      }\n    }\n  }\n}
\n

Parentheses notation

\n

Using ( ) you signify that you want to access a GraphQL union type. This is often possible with types that Gatsby creates for you. For example, MarkdownRemark always has File as a parent type, and thus you can also access fields from the File node. You can use this multiple levels deep, too, e.g. src/pages/blog/{Post.parent__(MarkdownRemark)__parent__(File)__name}.js.

\n

src/pages/blog/{MarkdownRemark.parent__(File)__name}.js generates the following query:

\n
allMarkdownRemark {\n  nodes {\n    id # Gatsby always queries for id\n    parent {\n      … on File {\n        name\n      }\n    }\n  }\n}
\n

Collection Route Components

\n

Collection route components are passed two dynamic variables. The id of each page's node and the\nURL path as params. The params is passed to the component as props.params and the id as props.pageContext.id.

\n

Both are also passed as variables to the component's GraphQL query so you can query fields from the node. Page querying, including the use of variables, is explained in more depth in querying data in pages with GraphQL.

\n

For example:

\n
import React from 'react';\nimport { graphql } from 'gatsby';\n\nexport default function Component(props) {\n    return props.data.fields.sku + props.params.name;}\n\n// This is the page query that connects the data to the actual component. Here you can query for any and all fields\n// you need access to within your code. Again, since Gatsby always queries for `id` in the collection, you can use that\n// to connect to this GraphQL query.\n\nexport const query = graphql`\n    query ($id: String) {\n        product(id: { eq: $id }) {\n            fields {\n                sku\n            }\n        }\n    }\n`;
\n

For the page src/pages/{Product.name}/{Product.coupon}.js you'd have props.params.name and props.params.coupon available inside {Product.coupon}.js.

\n

If you need to want to create pages for only some nodes in a collection (e.g. filtering out any product of type \"Food\") or customize the variables passed to the query, you should use the createPages API instead as File System Route API doesn't support this at the moment.

\n

Routing and linking

\n

Gatsby \"slugifies\" every route that gets created from collection pages (by using sindresorhus/slugify). Or in other words: If you have a route called src/pages/wholesome/{Animal.slogan}.js where slogan is I ♥ Dogs the final URL will be /wholesome/i-love-dogs. Gatsby will convert the field into a human-readable URL format while stripping it of invalid characters.

\n

When you want to link to a collection route page, it may not always be clear how to construct the URL from scratch.

\n

To address this issue, Gatsby automatically includes a gatsbyPath field on every type used by collection pages. The gatsbyPath field must take an argument of the filePath it is trying to resolve. This is necessary because it’s possible that one type is used in multiple collection pages.

\n

There are some general syntax requirements when using the filePath argument:

\n
    \n
  • The path must be an absolute path (starting with a /).
    • \n
  • You must omit the file extension.
    • \n
  • You must omit the src/pages prefix.
    • \n
  • Your path must not include index.
    • \n
\n

gatsbyPath example

\n

Assume that a Product type is used in two pages:

\n
    \n
  • src/pages/products/{Product.name}.js
    • \n
  • src/pages/discounts/{Product.name}.js
    • \n
\n

If you wanted to link to the products/{Product.name} and discounts/{Product.name} routes from your home page, you would have a component like this:

\n
import React from 'react';\nimport { Link, graphql } from 'gatsby';\n\nexport default function HomePage(props) {\n    return (\n        <ul>\n            {props.data.allProduct.map((product) => (\n                <li key={product.name}>\n                    <Link to={product.productPath}>{product.name}</Link> (<Link to={product.discountPath}>Discount</Link>)                </li>\n            ))}\n        </ul>\n    );\n}\n\nexport const query = graphql`\n  query {\n    allProduct {\n      name\n      productPath: gatsbyPath(filePath: \"/products/{Product.name}\")      discountPath: gatsbyPath(filePath: \"/discounts/{Product.name}\")    }\n  }\n`;
\n

By using aliasing you can use gatsbyPath multiple times.

\n

Creating client-only routes

\n

Use client-only routes if you have dynamic data that does not live in Gatsby. This might be something like a user settings page, or some other dynamic content that isn't known to Gatsby at build time. In these situations, you will usually create a route with one or more dynamic segments to query data from a server in order to render your page.

\n

Syntax (client-only routes)

\n

You can use square brackets ([ ]) in the file path to mark any dynamic segments of the URL. For example, in order to edit a user, you might want a route like /user/:id to fetch the data for whatever id is passed into the URL.

\n
    \n
  • src/pages/users/[id].js will generate a route like /users/:id
    • \n
  • src/pages/users/[id]/group/[groupId].js will generate a route like /users/:id/group/:groupId
    • \n
\n

Splat routes

\n

Gatsby also supports splat (or wildcard) routes, which are routes that will match anything after the splat. These are less common, but still have use cases. Use three periods in square brackets ([...]) in a file path to mark a page as a splat route. You can also name the parameter your page receives by adding a name after the three periods ([...myNameKey]).

\n

As an example, suppose that you are rendering images from S3 and the URL is actually the key to the asset in AWS. Here is how you might create your file:

\n
    \n
  • src/pages/image/[...].js will generate a route like /image/*. * is accessible in your page's received properties with the key name *.
    • \n
  • src/pages/image/[...awsKey].js will generate a route like /image/*awsKey. *awsKey is accessible in your page's received properties with the key name awsKey.
    • \n
\n
export default function ImagePage({ params }) {\n    const param = params[`*`];\n\n    // When visiting a route like `image/hello/world`,\n    // the value of `param` is `hello/world`.\n}
\n
export default function ImagePage({ params }) {\n    const param = params[`awsKey`];\n\n    // When visiting a route like `image/hello/world`,\n    // the value of `param` is `hello/world`.\n}
\n

Splat routes may not live in the same directory as regular client only routes.

\n

Examples

\n

The dynamic segment of the file name (the part between the square brackets) will be filled in and provided to your components on a props.params object. For example:

\n
//\n//title=src/pages/users/[name].js\nfunction UserPage(props) {\n  const name = props.params.name\n}
\n
function ProductsPage(props) {\n    const splat = props.params.awsKey;\n}
\n
function AppPage(props) {\n  const splat = props.params[‘*’]\n}
\n

config function

\n

Inside a File System Route template you can export an async function called config. You can use this function to:

\n\n

Inside your template:

\n
import { graphql } from 'gatsby';\n\n// The rest of your page, including imports, page component & page query etc.\n\nexport async function config() {\n    const { data } = graphql`\n    {\n      # Your GraphQL query\n    }\n  `;\n\n    return ({ params }) => {\n        return {\n            defer: params.name === data.someValue.name\n        };\n    };\n}
\n

When you export an async config function Gatsby will evaluate the returned object and optionally run any GraphQL queries defined inside the outer function. You can't run GraphQL queries inside the inner function.

\n

The params parameter is an object that contains the URL path, see explanation above.

\n

The inner function of config can return an object with one key:

\n
    \n
  • defer: Boolean of whether the page should be marked as deferred or not
    • \n
\n

Read the Deferred Static Generation guide to see a real-world example.

\n

Example use cases

\n

Have a look at the route-api example for more detail.

\n

Collection route + fallback

\n

By using a combination of a collection route with a client-only route, you can create a seamless experience when a user tries to visit a URL from the collection route that doesn’t exist (yet) for the collection item. Consider these two file paths:

\n
    \n
  • src/pages/products/{Product.name}.js (collection route)
    • \n
  • src/pages/products/[name].js (client-only route, fallback)
    • \n
\n

The collection route will create all available product pages at the time of the build. If you're adding a new product you want to link to but only periodically building your site, you'll need a fallback. By using a client-only route as a fallback you then can load the necessary information for the product on the client until you re-built your site.

\n

Similarly, the fallback page could also be used for when a product doesn't exist and you want to show some helpful information (like a 404 page).

\n

Using one template for multiple routes

\n

By placing the template/view for your routes into a reusable component you can display the same information under different routes. Take this example:

\n

You want to display product information which is both accessible by name and SKU but has the same design. Create two file paths first:

\n
    \n
  • src/pages/products/{Product.name}.js
    • \n
  • src/pages/products/{Product.meta__sku}.js
    • \n
\n

Create a view component at src/view/product-view.js that takes in a product prop. Use that component in both collection routes, e.g.:

\n
import React from 'react';\nimport { graphql } from 'gatsby';\nimport ProductView from '../../views/product-view';\n\nfunction Product(props) {\n    const { product } = props.data;\n    return <ProductView product={product} />;\n}\n\nexport default Product;\n\nexport const query = graphql`\n    query ($id: String!) {\n        product(id: { eq: $id }) {\n            name\n            description\n            appearance\n            meta {\n                createdAt\n                id\n                sku\n            }\n        }\n    }\n`;
\n

You can copy the same code to the src/pages/products/{Product.meta__sku}.js file.

\n

Purely client-only app

\n

If you want your Gatsby app to be 100% client-only, you can create a file at src/pages/[...].js to catch all requests. See the client-only-paths example for more detail.

"},{"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":"python logo","excerpt":"These operators evaluate to True or False depending on the values you give them","seo":{"title":"flow-control-in-python'","description":"These operators evaluate to True or False depending on the values you give them","robots":[],"extra":[]},"template":"post","thumb_image":"images/python.jpg","image":"images/python2-15e88a3a.jpg"},"html":"

Read It

\n\n

Flow Control

\n

Comparison Operators

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

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

\n

Examples:

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

Boolean evaluation

\n

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

\n

NO (even if they are valid Python):

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

YES (even if they are valid Python):

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

These statements are equivalent:

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

And these as well:

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

Boolean Operators

\n

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

\n

The and Operator's Truth Table:

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

The or Operator's Truth Table:

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

The not Operator's Truth Table:

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

Mixing Boolean and Comparison Operators

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

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

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

if Statements

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

else Statements

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

elif Statements

\n
name = 'Bob'\nage = 5\n\nif name == 'Alice':\n    print('Hi, Alice.')\nelif age < 12:\n    print('You are not Alice, kiddo.')
\n
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

while Loop Statements

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

break Statements

\n

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

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

continue Statements

\n

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

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

for Loops and the range() Function

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

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

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

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

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

For else statement

\n

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

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

Importing Modules

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

Ending a Program with sys.exit

\n
import sys\n\nwhile True:\n    print('Type exit to exit.')\n    response = input()\n    if response == 'exit':\n        sys.exit()\n    print('You typed {}.'.format(response))
"},{"url":"/blog/front-end-interview-questions-part-2/","relativePath":"blog/front-end-interview-questions-part-2.md","relativeDir":"blog","base":"front-end-interview-questions-part-2.md","name":"front-end-interview-questions-part-2","frontmatter":{"title":"Front End Interview Questions Part 2","template":"post","subtitle":"These will focus more on vocabulary and concepts than the application driven approach in my last post!","excerpt":"­­­­If you were to describe semantic HTML to the next cohort of students, what would you say","date":"2022-05-23T08:41:53.757Z","image":"https://camo.githubusercontent.com/22121fcc4ed529e7fdaea851db57c0e7dbee2ceeffe6f62b536039b71c7362c0/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f302a4433795149343267426b59706e4c58592e6a7067","thumb_image":"https://camo.githubusercontent.com/22121fcc4ed529e7fdaea851db57c0e7dbee2ceeffe6f62b536039b71c7362c0/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313230302f302a4433795149343267426b59706e4c58592e6a7067","image_position":"right","author":"src/data/authors/bgoonz.yaml","tags":["src/data/tags/career-1.yaml","src/data/tags/javascript.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/python-quiz.md"],"cmseditable":true},"html":"\n

Front End Interview Questions Part 2

\n

These will focus more on vocabulary and concepts than the application driven approach in my last post!

\n
\n

CODEX

\n

Front End Interview Questions Part 2

\n

These will focus more on vocabulary and concepts than the application-driven approach in my last post!

\n

\n

Here’s part one for reference:

\n

The Web Developer’s Technical Interview
\nQuestions….Answers… and links to the missing pieces.bryanguner.medium.com

\n
    \n
  • ­­­­If you were to describe semantic HTML to the next cohort of students, what would you say?
    • \n
\n

Semantic HTML is markup that conveys meaning, not appearance, to search engines to make everything easier to identify.

\n
    \n
  • Name two big differences between display: block; and display: inline;.
    • \n
\n

block starts on a new line and takes up the full width of the content.
\ninline starts on the same line as previous content, in line with other content, and takes up only the space needed for the content.

\n

· What are the 4 areas of the box model?

\n

content, padding, border, margin

\n

· While using flexbox, what axis does the following property work on: align-items: center?

\n

cross-axis

\n

· Explain why git is valuable to a team of developers.

\n

Allows you to dole out tiny pieces of a large project to many developers who can all work towards the same goal on their own chunks, allows roll back if you make a mistake; version control.

\n

· What is the difference between an adaptive website and a fully responsive website?

\n

An adaptive website “adapts” to fit a pre-determined set of screen sizes/devices, and a responsive one changes to fit all devices.

\n

· Describe what it means to be mobile first vs desktop first.

\n

It means you develop/code the site with mobile in mind first and work your way outward in screen size.

\n

· What does font-size: 62.5% in the html tag do for us when using rem units?

\n

This setting makes it so that 1 rem = 10 px for font size, easier to calculate.

\n

· How would you describe preprocessing to someone new to CSS?

\n

Preprocessing is basically a bunch of functions and variables you can use to store CSS settings in different ways that make it easier to code CSS.

\n

· What is your favorite concept in preprocessing? What is the concept that gives you the most trouble?

\n

Favorite is (parametric) mixins; but I don’t have a lot of trouble with preprocessing. What gives me the most trouble is knowing ahead of time what would be good to go in a mixin for a given site.

\n

· Describe the biggest difference between .forEach & .map.

\n

forEach iterates over an array item by item, and map calls a function on each array item, but returns another/additional array, unlike forEach.

\n

· What is the difference between a function and a method?

\n

Every function is an object. If a value is a function, it is a method. Methods have to be ‘received’ by something; functions do not.

\n

· What is closure?

\n

It is code identified elsewhere that we can use later; gives the ability to put functions together. If a variable isn’t defined, a function looks outward for context.

\n

· Describe the four rules of the ‘this’ keyword.

\n
    \n
  1. Window/global binding — this is the window/console object. ‘use strict’; to prevent window binding.
    2. \n
  2. Implicit binding — when a function is called by a dot, the object preceding the dot is the ‘this’. 80 percent of ‘this’ is from this type of binding.
    3. \n
  3. New binding — points to new object created & returned by constructor function
    4. \n
  4. Explicit binding — whenever call, bind, or apply are used.
    5. \n
\n

· Why do we need super() in an extended class?

\n

Super ties the parent to the child.

\n
    \n
  • What is the DOM?
    • \n
\n

Document object model, the ‘window’ or container that holds all the page’s elements

\n
    \n
  • What is an event?
    • \n
\n

An event is something happening on or to the page, like a mouse click, doubleclick, key up/down, pointer out of element/over element, things like this. There are tons of “events” that javascript can detect.

\n
    \n
  • What is an event listener?
    • \n
\n

Javascript command that ‘listens’ for an event to happen on the page to a given element and then runs a function when that event happens

\n
    \n
  • Why would we convert a NodeList into an Array?
    • \n
\n

A NodeList isn’t a real array, so it won’t have access to array methods such as slice or map.

\n
    \n
  • What is a component?
    • \n
\n

Reusable pieces of code to display info in a consistent repeatable way

\n

· What is React JS and what problems does it try and solve? Support your answer with concepts introduced in class and from your personal research on the web.

\n

ReactJS is a library used to build large applications. It’s very good at assisting developers in manipulating the DOM element to create rich user experiences. We need a way to off-load the state/data that our apps use, and React helps us do that.

\n

· What does it mean to think in react?

\n

It makes you think about how to organize/build apps a little differently because it’s very scalable and allows you to build huge apps. React’s one-way data flow makes everything modular and fast. You can build apps top-down or bottom-up.

\n

· Describe state.

\n

Some data we want to display.

\n

· Describe props.

\n

Props are like function arguments in JS and attributes in HTML.

\n

· What are side effects, and how do you sync effects in a React component to state or prop changes?

\n

Side effects are anything that affects something outside the executed function’s scope like fetching data from an API, a timer, or logging.

\n

· Explain benefit(s) using client-side routing?

\n

Answer: It’s much more efficient than the traditional way, because a lot of data isn’t being transmitted unnecessarily.

\n

· Why would you use class component over function components (removing hooks from the question)?

\n

Because some companies still use class components and don’t want to switch their millions of dollars’ worth of code over to all functional hooks, and also there’s currently a lot more troubleshooting content out there for classes that isn’t out there for hooks. Also, functional components are better when you don’t need state, presentational components.

\n

· Name three lifecycle methods and their purposes.

\n

componentDidMount = do the stuff inside this ‘function’ after the component mounted

\n

componentDidUpdate = do the stuff inside this function after the component updated

\n

componentWillUnmount = clean-up in death/unmounting phase

\n

· What is the purpose of a custom hook?

\n

allow you to apply non-visual behavior and stateful logic throughout your components by reusing the same hook over and over again

\n

· Why is it important to test our apps?

\n

Gets bugs fixed faster, reduces regression risk, makes you consider/work out the edge cases, acts as documentation, acts as safety net when refactoring, makes code more trustworthy

\n

· What problem does the context API help solve?

\n

You can store data in a context object instead of prop drilling.

\n

· In your own words, describe actions, reducers and the store and their role in Redux. What does each piece do? Why is the store known as a ‘single source of truth’ in a redux application?

\n

Everything that changes within your app is represented by a single JS object called the store. The store contains state for our application. When changes are made to our application state, we never write to our store object but rather clone the state object, modify the clone, and replace the original state with the new copy, never mutating the original object. Reducers are the only place we can update our state. Actions tell our reducers “how” to update the state, and perhaps with what data it should be updated, but only a reducer can actually update the state.

\n

· What is the difference between Application state and Component state? When would be a good time to use one over the other?

\n

App state is global, component state is local. Use component state when you have component-specific variables.

\n

· Describe redux-thunk, what does it allow us to do? How does it change our action-creators?

\n

Redux Thunk is middleware that provides the ability to handle asynchronous operations inside our Action Creators, because reducers are normally synchronous.

\n

· What is your favorite state management system you’ve learned and this sprint? Please explain why!

\n

Redux, because I felt it was easier to understand than the context API.

\n

· Explain what a token is used for.

\n

Many services out in the wild require the client (our React app, for example) to provide proof that it’s authenticated with them. The server running these services can issue a JWT (JSON Web Token) as the authentication token, in exchange for correct login credentials.

\n

· What steps can you take in your web apps to keep your data secure?

\n

As we build our web apps, we will most likely have some “protected” routes — routes that we only want to render if the user has logged in and been authenticated by our server. The way this normally works is we make a login request, sending the server the user’s username and password. The server will check those credentials against what is in the database, and if it can authenticate the user, it will return a token. Once we have this token, we can add two layers of protection to our app. One with protected routes, the other by sending an authentication header with our API calls (as we learned in the above objective).

\n

· Describe how web servers work.

\n

The “world wide web” (which we’ll refer to as “the web”) is just a part of the internet — which is itself a network of interconnected computers. The web is just one way to share data over the internet. It consists of a body of information stored on web servers, ready to be shared across the world. The term “web server” can mean two things:

\n

· a computer that stores the code for a website

\n

· a program that runs on such a computer

\n

The physical computer device that we call a web server is connected to the internet, and stores the code for different websites to be shared across the world at all times. When we load the code for our websites, or web apps, on a server like this, we would say that the server is “hosting” our website/app.

\n

· Which HTTP methods can be mapped to the CRUD acronym that we use when interfacing with APIs/Servers.

\n

Create, Read, Update, Delete

\n

· Mention two parts of Express that you learned about this week.

\n

Routing/router, Middleware, convenience helpers

\n

· Describe Middleware?

\n

array of functions that get executed in the order they are introduced into the server code

\n

· Describe a Resource?

\n

o everything is a resource.

\n

o each resource is accessible via a unique URI.

\n

o resources can have multiple representations.

\n

o communication is done over a stateless protocol (HTTP).

\n

o management of resources is done via HTTP methods.

\n

· What can the API return to help clients know if a request was successful?

\n

200 status code/201 status code

\n

· How can we partition our application into sub-applications?

\n

By dividing the code up into multiple files and ‘requiring’ them in the main server file.

\n

· Explain the difference between Relational Databases and SQL.

\n

SQL is the language used to access a relational database.

\n

· Why do tables need a primary key?

\n

To uniquely identify each record/row.

\n

· What is the name given to a table column that references the primary key on another table.

\n

Foreign key

\n

· What do we need in order to have a many to many relationship between two tables.

\n

An intermediary table that holds foreign keys that reference the primary key on the related tables.

\n

· What is the purpose of using sessions?

\n

The purpose is to persist data across requests.

\n

· What does bcrypt do to help us store passwords in a secure manner?

\n

o password hashing function.

\n

o implements salting both manual and automatically.

\n

o accumulative hashing rounds.

\n

· What does bcrypt do to slow down attackers?

\n

Having an algorithm that hashes the information multiple times (rounds) means an attacker needs to have the hash, know the algorithm used, and how many rounds were used to generate the hash in the first place. So it basically makes it a lot more difficult to get somebody’s password.

\n

· What are the three parts of the JSON Web Token?

\n

Header, payload, signature

\n"},{"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 bash","date":"2021-09-02","thumb_image_alt":"image of","excerpt":"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.","seo":{"title":"Git Bash","description":"understanding git bash","robots":[],"extra":[]},"template":"post","thumb_image":"images/git-banner.png"},"html":"

Understanding Git Bash

\n

Git Bash

\n

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

\n

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

\n

What is Git Bash?

\n

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

\n

How to install Git Bash

\n

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

\n

How to use Git Bash

\n

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

\n

How to navigate folders

\n

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

\n

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

\n

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

\n

Git Bash Commands

\n

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

\n

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

"},{"url":"/blog/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":"image of pyhton","excerpt":"wubalubadubdub","seo":{"title":"Functions in Python","description":"Functions in Python","robots":[],"extra":[]},"template":"post","thumb_image":"images/python.jpg"},"html":"

Functions

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

Return Values and return Statements

\n

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

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

The None Value

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

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

\n

print Keyword Arguments

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

Local and Global Scope

\n
    \n
  • Code in the global scope cannot use any local variables.
    • \n
  • However, a local scope can access global variables.
    • \n
  • Code in a function's local scope cannot use variables in any other local scope.
    • \n
  • You can use the same name for different variables if they are in different scopes. That is, there can be a local variable named spam and a global variable also named spam.
    • \n
\n

The global Statement

\n

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

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

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

\n
    \n
  1. If a variable is being used in the global scope (that is, outside of all functions), then it is always a global variable.
    2. \n
  2. If there is a global statement for that variable in a function, it is a global variable.
    3. \n
  3. Otherwise, if the variable is used in an assignment statement in the function, it is a local variable.
    4. \n
  4. But if the variable is not used in an assignment statement, it is a global variable.
    5. \n
"},{"url":"/blog/google-custom-search/","relativePath":"blog/google-custom-search.md","relativeDir":"blog","base":"google-custom-search.md","name":"google-custom-search","frontmatter":{"title":"Google Custom Search","template":"post","subtitle":"Google search","excerpt":"Google","date":"2022-06-06T20:55:39.767Z","image":"/blog/wartime-blog-cover-art-modified.png","thumb_image":"/blog/wartime-blog-cover-art-modified.png","image_position":"right","author":"src/data/authors/backup.yaml","show_author_bio":true,"cmseditable":true},"html":"

Adding Google Custom Search to your Website | Solodev

\n
\n

If you're Looking to Add Search Functionality to your Website, Learn How to Harness the Power of Google to Create Custom Searches

\n
\n

Implementing Google Custom Search is as easy as registering your website with Google and letting our code do the rest. This article provides the code and styles you need to implement custom search on your website. Enjoy!

\n

It's imperative your users have a reliable and easy method for finding your content. What better way to achieve this than including search powered by Google? But simply adding the default code provided by Google leaves your site's search lacking. While the functionality is there, the professional styling expected on websites today is notably absent. The tutorial below solves this dilemma, merging the powerful functionality of Google Custom Search with a sleekdesign.

\n

In Solodev, implementing Google Custom Search is as easy as registering your website with Google and adding a shortcode. For other websites, we've included a pure HTML tutorial which is CMS neutral and will work on websites of all varieties.

\n

Below is all the code you need to implement custom search on your website.

\n

Step 1

\n

Copy and paste the HTML or Solodev Shortcode where you would like your search form to populate and register your website with Google.

\n\n
\n

Step 2

\n

Download the JavaScript below and include it in your web page.

\n

google-custom-search.js

\n
\n

Step 3 - Includes

\n

Include the following JavaScript in your HTML document.

\n
\n

Step 4 - Google Custom Search

\n

Download the CSS below and include it in your web page

\n

google-custom-search.css

\n
\n

Step 5 - Includes

\n

Add the following includes to the header of your HTML file (or Solodev Shortcode Repeater file).

\n

An example of a search results page, which will appear via AJAX, is shown below.

\n

\"Search

\n

With just a few lines of code you have provided site visitors the ability to search your entire site using the power of Google (and the help of Solodev) - Enjoy!

"},{"url":"/blog/grep-in-linuz/","relativePath":"blog/grep-in-linuz.md","relativeDir":"blog","base":"grep-in-linuz.md","name":"grep-in-linuz","frontmatter":{"title":"Grep In Linuz","template":"post","subtitle":"command line utility for printing lines that match a pattern","excerpt":"command line utility for printing lines that match a pattern","date":"2022-04-19T06:21:57.572Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/linux.png?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/linux.png?raw=true","image_position":"left","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/tools.yaml"],"tags":["src/data/tags/linux.yaml"],"show_author_bio":true,"cmseditable":true},"html":"

What is the grep command in UNIX?

\n

The grep command in UNIX is a command line utility for printing lines that match a pattern. It can be used to find text in a file and search a directory structure of files recursively. It also supports showing the context of a match by showing lines before and after the result and has support for regular expressions in pattern matching.

\n

How to find text in a file

\n

To find text in a file pass the string you are looking for to grep followed by the name of the file or files.

\n
grep 'computer' /usr/share/dict/words\ncomputer
\n

The grep tool will print occurrences that it finds to standard output.

\n

How to list line numbers for matches

\n

To list line numbers and file names pass the -n option to grep. This prints matches to standard output along with the line number it was found on.

\n
grep 'computer' -n /usr/share/dict/words\n40565
\n

This can be useful if you are looking to edit a file and want to launch vim and go straight to the line.

\n
vim +40565 /usr/share/dict/words
\n

How to print lines before and after a match

\n

To print lines before and after a match the -A and -B options can be used. Both expect a number and will print this number of lines.

\n
grep -B 2 -A 2 'computer' /usr/share/dict/words\ncomputativeness\ncompute\ncomputer\ncomputist\ncomputus
\n

Using the -A and -B options can be very useful for grepping through log files to see what occurred before and after the item of interest.

\n

A further option is available in -C that will print the context of the match. This is equivalent to using both -A and -B.

\n
grep -C 2 'computer' /usr/share/dict/words\ncomputativeness\ncompute\ncomputer\ncomputist\ncomputus
\n

The --context option may also be used and defaults to two lines before and after if no number is given.

\n

How to count the number of matches

\n

To count the number of matches use the -c option. This outputs a number count to standard output.

\n
grep -c 'comput*' /usr/share/dict/words\n50
\n

How to print the filename for a match

\n

To print the filename for a match use the -H option. This is automatically invoked when grep is given more than one file to search.

\n
grep -H 'computer' /usr/share/dict/words\n/usr/share/dict/words:computer
\n

How to search recursively

\n

To search for a pattern recursively use the -R option. This will search through all files in the directory tree that you have permission to read.

\n
grep -R 'passwd' /etc\n/etc/pam.d/su:# NIS (man nsswitch) as well as normal /etc/passwd and\n/etc/pam.d/chpasswd:# The PAM configuration file for the Shadow 'chpasswd' service
\n

How to search for the inverse of a pattern

\n

To search for the inverse of a pattern use the -v option. This will print inverse matches to standard output.

\n
grep -v 'computer' /usr/share/dict/words\nA\na\naa\naal\n....
\n

How to ignore case when searching

\n

To ignore case when searching use the -i option. By default grep will respect case.

\n
grep 'COMPUTER' /usr/share/dict/words\n# no match\ngrep -i 'COMPUTER' /usr/share/dict/words\ncomputer
\n

How to use basic regular expressions when searching

\n

To use basic regular expressions all versions of grep support basic character matches. In the following example the pattern matches ‘ia’ characters at the end of the line.

\n
grep 'ia$' /usr/share/dict/words\nabasia\nAbelia\nabepithymia\n....
\n

A great book for understanding the power of regular expressions is Mastering Regular Expressions.

\n

How to use extended regular expressions when searching

\n

To use extended regular expressions use the -e option. The following line matches lines that do not contain the words ‘foo’ or ‘bar’.

\n
grep -v -e 'foo' -e 'bar'
\n

Note that in the GNU version of grep there is no difference in available functionality between basic and extended syntaxes.

"},{"url":"/blog/hoisting/","relativePath":"blog/hoisting.md","relativeDir":"blog","base":"hoisting.md","name":"hoisting","frontmatter":{"title":"Git Bash","subtitle":"understanding git bash","date":"2021-09-02","thumb_image_alt":"image of","excerpt":null,"seo":{"title":"Git Bash","description":"understanding git bash","robots":[],"extra":[]},"template":"post","thumb_image":"images/https://www.tutorialsteacher.com/Content/images/js/hoisting.png"},"html":"

Understanding hoisting will help you organize your function scope. Just remember, variable declarations and function definitions are hoisted to the top. Variable definitions are not, even if you declare and define a variable on the same line. Also, a variable declaration lets the system know that the variable exists while definition assigns it a value.

\n
\n
//\n\n\nfunction doTheThing() {\n    // ReferenceError: notDeclared is not defined\n    console.log(notDeclared);\n\n    // Outputs: undefined\n    console.log(definedLater);\n    var definedLater;\n\n    definedLater = 'I am defined!';\n    // Outputs: 'I am defined!'\n    console.log(definedLater);\n\n    // Outputs: undefined\n    console.log(definedSimulateneously);\n    var definedSimulateneously = 'I am defined!';\n    // Outputs: 'I am defined!'\n    console.log(definedSimulateneously);\n\n    // Outputs: 'I did it!'\n    doSomethingElse();\n\n    function doSomethingElse() {\n        console.log('I did it!');\n    }\n\n    // TypeError: undefined is not a function\n    functionVar();\n\n    var functionVar = function () {\n        console.log('I did it!');\n    };\n}
\n

To make things easier to read, declare all of your variables at the top of your function scope so it is clear which scope the variables are coming from. Define your variables before you need to use them. Define your functions at the bottom of your scope to keep them out of your way.

"},{"url":"/blog/gatsby-cli/","relativePath":"blog/gatsby-cli.md","relativeDir":"blog","base":"gatsby-cli.md","name":"gatsby-cli","frontmatter":{"title":"Gatsby CLI","template":"post","subtitle":"The Gatsby CLI is available via npm ","excerpt":"The Gatsby command line tool CLI is the main entry point for getting up and running with a Gatsby application ","date":"2022-05-15T23:44:13.229Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/gatsby-cli.png?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/gatsby-cli.png?raw=true","image_position":"right","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/js.yaml","src/data/categories/search.yaml","src/data/categories/react.yaml","src/data/categories/git.yaml","src/data/categories/html.yaml"],"tags":["src/data/tags/cms.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/using-the-dom.md"],"cmseditable":true},"html":"\n

Commands (Gatsby CLI)

\n

TABLE OF CONTENTS

\n\n

The Gatsby command line tool (CLI) is the main entry point for getting up and running with a Gatsby application and for using functionality including running a development server and building out your Gatsby application for deployment.

\n

This page provides similar documentation as the gatsby-cli README. The Gatsby cheat sheet has docs for top CLI commands & APIs all ready to print out.

\n

How to use gatsby-cli

\n

The Gatsby CLI is available via npm and is installed globally by running npm install -g gatsby-cli.

\n

You can also use the package.json script variant of these commands, typically exposed for you with most starters. For example, if you want to make the gatsby develop command available in your application, open up package.json and add a script like so:

\n

package.json

\n
//on\n//package.json\n\n{\n    \"scripts\": {\n        \"develop\": \"gatsby develop\"\n    }\n}
\n

API commands

\n

All the following documentation is available in the tool by running gatsby --help.

\n

new

\n

Usage

\n
gatsby new
\n

The CLI will run an interactive shell asking for these options before creating a Gatsby site for you:

\n
gatsby new\nWhat would you like to name the folder where your site will be created?\nmy-gatsby-site\nWill you be using a CMS? (single choice)\n  No (or I'll add it later)\n  –\n  WordPress\n  Contentful\n  Sanity\n  DatoCMS\n  Shopify\nWould you like to install a styling system? (single choice)\n  No (or I'll add it later)\n  –\n  CSS Modules/PostCSS\n  styled-components\n  Emotion\n  Sass\n  Theme UI\nWould you like to install additional features with other plugins? (multiple choice)\n  ◯ Add the Google Analytics tracking script\n  ◯ Add responsive images\n  ◯ Add page meta tags with React Helmet\n  ◯ Add an automatic sitemap\n  ◯ Enable offline functionality\n  ◯ Generate a manifest file\n  ◯ Add Markdown support (without MDX)\n  ◯ Add Markdown and MDX support
\n

Creating a site from a starter

\n

To create a site from a starter instead, run the command with your site name and starter URL:

\n
gatsby new [<site-name> [<starter-url>]]
\n

Note that this will not prompt you to create a custom setup, but only clone the starter from the URL you specified.

\n
Arguments
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ArgumentDescription
site-nameYour Gatsby site name, which is also used to create a project directory.
starter-urlA Gatsby starter URL or local file path. Defaults to gatsby-starter-default; see the Gatsby starters docs for more information.
\n
\n

Note: The site-name should only consist of letters and numbers. If you specify a ., ./ or a <space> in the name, gatsby new will throw an error.

\n
\n
Examples
\n
    \n
  • Create a Gatsby site named my-awesome-site using the default starter:
    • \n
\n
gatsby new my-awesome-site
\n\n
gatsby new my-awesome-blog-site https://github.com/gatsbyjs/gatsby-starter-blog
\n

See the Gatsby starters docs for more details.

\n

develop

\n

Once you’ve installed a Gatsby site, go to the root directory of your project and start the development server:

\n

gatsby develop

\n

Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionDescription
-H, --hostSet host. Defaults to localhost
-p, --portSet port. Defaults to env.PORT or 8000
-o, --openOpen the site in your (default) browser for you
-S, --httpsUse HTTPS
--inspectOpens a port for debugging
\n

Follow the Local HTTPS guide to find out how you can set up an HTTPS development server using Gatsby.

\n

Preview changes on other devices

\n

You can use the Gatsby develop command with the host option to access your dev environment on other devices on the same network, run:

\n
gatsby develop -H 0.0.0.0
\n

Then the terminal will log information as usual, but will additionally include a URL that you can navigate to from a client on the same network to see how the site renders.

\n
You can now view gatsbyjs.com in the browser.\n⠀\n  Local:            http://0.0.0.0:8000/\n  On Your Network:  http://192.168.0.212:8000/
\n

Note: To access Gatsby on your local machine, use either http://localhost:8000 or the “On Your Network” URL.

\n

build

\n

At the root of a Gatsby site, compile your application and make it ready for deployment:

\n

gatsby build

\n

Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionDescription
--prefix-pathsBuild site with link paths prefixed (set pathPrefix in your config)
--no-uglifyBuild site without uglifying JS bundles (for debugging)
--profileBuild site with react profiling. See Profiling Site Performance with React Profiler
--open-tracing-config-fileTracer configuration file (OpenTracing compatible). See Performance Tracing
--graphql-tracingTrace (see above) every graphql resolver, may have performance implications.
--no-color, --no-colorsDisables colored terminal output
\n

In addition to these build options, there are some optional build environment variables for more advanced configurations that can adjust how a build runs. For example, setting CI=true as an environment variable will tailor output for dumb terminals.

\n

serve

\n

At the root of a Gatsby site, serve the production build of your site for testing:

\n

gatsby serve

\n

Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionDescription
-H, --hostSet host. Defaults to localhost
-p, --portSet port. Defaults to 9000
-o, --openOpen the site in your (default) browser for you
--prefix-pathsServe site with link paths prefixed (if built with pathPrefix in your gatsby-config.js).
\n

info

\n

At the root of a Gatsby site, get helpful environment information which will be required when reporting a bug:

\n

gatsby info

\n

Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OptionDescription
-C, --clipboardAutomagically copy environment information to clipboard
\n

clean

\n

At the root of a Gatsby site, wipe out the cache (.cache folder) and public directories:

\n

gatsby clean

\n

This is useful as a last resort when your local project seems to have issues or content does not seem to be refreshing. Issues this may fix commonly include:

\n
    \n
  • Stale data, e.g. this file/resource/etc. isn’t appearing
    • \n
  • GraphQL error, e.g. this GraphQL resource should be present but is not
    • \n
  • Dependency issues, e.g. invalid version, cryptic errors in console, etc.
    • \n
  • Plugin issues, e.g. developing a local plugin and changes don’t seem to be taking effect
    • \n
\n

plugin

\n

Run commands pertaining to gatsby plugins.

\n

docs

\n

gatsby plugin docs

\n

Directs you to documentation about using and creating plugins.

\n

Repl

\n

Get a Node.js REPL (interactive shell) with context of your Gatsby environment:

\n

gatsby repl

\n

Gatsby will prompt you to type in commands and explore. When it shows this: gatsby >

\n

You can type in a command, such as one of these:

\n

babelrc

\n

components

\n

dataPaths

\n

getNodes()

\n

nodes

\n

pages

\n

schema

\n

siteConfig

\n

staticQueries

\n

When combined with the GraphQL explorer, these REPL commands could be very helpful for understanding your Gatsby site’s data.

\n

For more information, check out the Gatsby REPL documentation.

\n

Disabling colored output

\n

In addition to the explicit --no-color option, the CLI respects the presence of the NO_COLOR environment variable (see no-color.org).

\n

How to change your default package manager for your next project?

\n

When you use gatsby new for the first time to create a new project, you are asked to choose your default package manager between yarn and npm.

\n
Which package manager would you like to use ? › - Use arrow-keys. Return to submit.\n❯  yarn\n   npm
\n

Once you’ve made your choice, the CLI won’t ask for your preference again for any subsequent project.

\n

If you want to change this for your next project you have to edit the config file created automatically by the CLI. This file is available on your system at: ~/.config/gatsby/config.json

\n

In it you’re going to see something like this.

\n

config.json

\n
//on\n{\n    \"cli\": {\n        \"packageManager\": \"yarn\"\n    }\n}
\n

Edit your packageManager value, save and you’re good to go for your next project using gatsby new.

\n"},{"url":"/blog/google-analytics/","relativePath":"blog/google-analytics.md","relativeDir":"blog","base":"google-analytics.md","name":"google-analytics","frontmatter":{"title":"google-analytics","template":"post","subtitle":"Page title and screen class","excerpt":"7 tips to become a better web developer","date":"2022-05-16T09:54:51.999Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/google-analytics.jpg?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/google-analytics.jpg?raw=true","image_position":"right","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/google.yaml"],"tags":["src/data/tags/cms.yaml","src/data/tags/resources.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/event-handeling.md","src/pages/blog/google-analytics.md"],"cmseditable":true},"html":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Page title and screen classViews
7 tips to become a better web developerwebdevhub1
Awesome NodeJSwebdevhub1
Callstack Visualizerwebdevhub1
Cheat Sheets1
Clockwebdevhub1
Data Structures By Example1
ExpressJS Apiswebdevhub1
FAQ1
Gatsby Plugins For This Sites Content Model1
Git Cheatsheet1
HTT{ Requestswebdevhub1
Jamstackwebdevhub1
JavaScript Programming Language1
List Of Projects1
Map and Set1
Node APIs With Express1
Palindrome Number1
PostgreSQL Setupwebdevhub1
READMEwebdevhub1
RECENT PROJECTSwebdevhub1
React1
React Interview Questions & Answers1
Sitemap-Aprilwebdevhub1
Ubuntu1
Web Designwebdevhub1
npm1
Archive2
Developer Resourceswebdevhub2
Heroku Error Codeswebdevhub2
Javascript Interview2
Leetcode Practice2
NextJS2
Python Functions2
Queries and Mutations (Gatsby)webdevhub2
React Intro2
Regex Tricks2
Tipswebdevhub2
Data Structures Interview3
Developer Community3
Git and Github3
Netlify CMSwebdevhub3
Overflow3
React Statewebdevhub3
readmewebdevhub3
using the DOMwebdevhub3
Archivewebdevhub4
Audio Projects4
Awesome Static Site Resourceswebdevhub4
Bookmarks4
General structured data guidelineswebdevhub4
Learn Csswebdevhub4
PSQl Cheat Sheetwebdevhub4
Platform Docs4
Python General Noteswebdevhub4
Python Practice4
npx-create-react-app4
python4
Blog Archive5
Contact!webdevhub5
Interactive Examples5
Netlify CMS Reference Sheetwebdevhub5
Big-O Notation6
Job Hunt6
Projects6
Referencewebdevhub6
Manage Content7
Passing Arguments To A Callback In JSwebdevhub7
CSSwebdevhub8
Documentation8
Node vs Browser8
Sitemap8
Articleswebdevhub9
Showcase9
Tutorials11
lorem-ipsumwebdevhub14
How To Reinstall NPM and Node.js On Your Systemwebdevhub15
Dynamic Time Warping Algorithm Explained (Python)webdevhub16
Job Boardwebdevhub16
Data Structures17
About18
Tools41
Web Dev Hub42
Blog43
Content Manager99
Web-Dev-Hub553
"},{"url":"/blog/interview-questions-js-p3/","relativePath":"blog/interview-questions-js-p3.md","relativeDir":"blog","base":"interview-questions-js-p3.md","name":"interview-questions-js-p3","frontmatter":{"title":"JS-Questions P3","subtitle":"Javascript Interview Questions P3","date":"2021-09-11","thumb_image_alt":"big o","excerpt":"What are the possible ways to create objects in JavaScript","seo":{"title":"Javascript Interview","description":"What are the possible ways to create objects in JavaScript","robots":[],"extra":[{"name":"og:image","value":"images/js-code-spiral-num.png","keyName":"property","relativeUrl":true},{"name":"twitter:title","value":"JS-Interview","keyName":"name","relativeUrl":false},{"name":"twitter:description","value":"What are the possible ways to create objects in JavaScript","keyName":"name","relativeUrl":false}]},"template":"post","thumb_image":"images/bigo.jpg","image":"images/js-questions-n-answers.png"},"html":"

45. What is the output of below code

\n
\n
\n
//\n\n\n\nfunction* myGenFunc() {\n    yield 1;\n    yield 2;\n    yield 3;\n}\nvar myGenObj = new myGenFunc();\nc ole.log(myGenObj.next().value);
\n
    \n
  • 1
    • \n
  • 2: undefined
    • \n
  • 3: SyntaxError
    • \n
  • 4: TypeError
    • \n
\n
\nAnswer\n

\n

Answer: 4
\n

Generators are not constructible type. But if you still proceed to do, there will be an error saying \"TypeError: myGenFunc is not a constructor\"

\n

\n
\n
\n

46. What is the output of below code

\n
\n
\n
//\n\n\n\nfunction* yieldAndReturn() {\n    yield 1;\n    return 2;\n    yield 3;\n}\nvar myGenObj = yieldAndReturn();\nconsole.log(myGenObj.next());\nconsole.log(myGenObj.next());\nc ole.log(myGenObj.next());
\n
    \n
  • { value: 1, done: false }, { value: 2, done: true }, { value: undefined, done: true }
    • \n
  • 2: { value: 1, done: false }, { value: 2, done: false }, { value: undefined, done: true }
    • \n
  • 3: { value: 1, done: false }, { value: 2, done: true }, { value: 3, done: true }
    • \n
  • 4: { value: 1, done: false }, { value: 2, done: false }, { value: 3, done: true }
    • \n
\n
\nAnswer\n

\n

Answer: 1
\n

A return statement in a generator function will make the generator finish. If a value is returned, it will be set as the value property of the object and done property to true. When a generator is finished, subsequent next() calls return an object of this form: {value: undefined, done: true}.

\n

\n
\n
\n

47. What is the output of below code

\n
\n
//\n\nconst myGenerator = (function* () {\n    yield 1;\n    yield 2;\n    yield 3;\n})();\nfor (const value of myGenerator) {\n    console.log(value);\n    break;\n}\nfor (const value of myGenerator) {\n    console.log(value);\n}
\n
    \n
  • 1,2,3 and 1,2,3
    • \n
  • 2: 1,2,3 and 4,5,6
    • \n
  • 3: 1 and 1
    • \n
  • 4: 1
    • \n
\n
\nAnswer\n

\n

Answer: 4
\n

The generator should not be re-used once the iterator is closed. i.e, Upon exiting a loop(on completion or using break & return), the generator is closed and trying to iterate over it again does not yield any more results. Hence, the second loop doesn't print any value.

\n

\n
\n
\n

48. What is the output of below code

\n
\n
//\n\nconst num = 0o38;\nc ole.log(num);
\n
    \n
  • 1: SyntaxError
    • \n
  • 2: 38
    • \n
\n
\nAnswer\n

\n

Answer: 1
\n

If you use an invalid number(outside of 0-7 range) in the octal literal, JavaScript will throw a SyntaxError. In ES5, it treats the octal literal as a decimal number.

\n

\n
\n
\n

49. What is the output of below code

\n
\n
//\n\nconst squareObj = new Square(10);\nconsole.log(squareObj.area);\nclass Square {\n    constructor(length) {\n        this.length = length;\n    }\n    get area() {\n        return this.length * this.length;\n    }\n    set area(value) {\n        this.area = value;\n    }\n}
\n
    \n
  • 1: 100
    • \n
  • 2: ReferenceError
    • \n
\n
\nAnswer\n

\n

Answer: 2
\n

Unlike function declarations, class declarations are not hoisted. i.e, First You need to declare your class and then access it, otherwise it will throw a ReferenceError \"Uncaught ReferenceError: Square is not defined\".\nNote: Class expressions also applies to the same hoisting restrictions of class declarations.

\n

\n
\n
\n

50. What is the output of below code

\n
\n
\n
//\n\n\n\nfunction Person() {}\nPerson.prototype.walk = function () {\n    return this;\n};\nPerson.run = function () {\n    return this;\n};\nlet user = new Person();\nlet walk = user.walk;\nconsole.log(walk());\nlet run = Person.run;\nc ole.log(run());
\n
    \n
  • undefined, undefined
    • \n
  • 2: Person, Person
    • \n
  • 3: SyntaxError
    • \n
  • 4: Window, Window
    • \n
\n
\nAnswer\n

\n

Answer: 4
\n

When a regular or prototype method is called without a value for this, the methods return an initial this value if the value is not undefined. Otherwise global window object will be returned. In our case, the initial this value is undefined so both methods return window objects.

\n

\n
\n
\n

51. What is the output of below code

\n
\n
//\n\nclass Vehicle {\n    constructor(name) {\n        this.name = name;\n    }\n    start() {\n        console.log(`${this.name} vehicle started`);\n    }\n}\nclass Car extends Vehicle {\n    start() {\n        console.log(`${this.name} car started`);\n        super.start();\n    }\n}\nconst car = new Car('BMW');\nc ole.log(car.start());
\n
    \n
  • SyntaxError
    • \n
  • 2: BMW vehicle started, BMW car started
    • \n
  • 3: BMW car started, BMW vehicle started
    • \n
  • 4: BMW car started, BMW car started
    • \n
\n
\nAnswer\n

\n

Answer: 3
\n

The super keyword is used to call methods of a superclass. Unlike other languages the super invocation doesn't need to be a first statement. i.e, The statements will be executed in the same order of code.

\n

\n
\n
\n

52. What is the output of below code

\n
\n
//\n\nconst USER = { age: 30 };\nUSER.age = 25;\nc ole.log(USER.age);
\n
    \n
  • 30
    • \n
  • 2: 25
    • \n
  • 3: Uncaught TypeError
    • \n
  • 4: SyntaxError
    • \n
\n
\nAnswer\n

\n

Answer: 2
\n

Even though we used constant variables, the content of it is an object and the object's contents (e.g properties) can be altered. Hence, the change is going to be valid in this case.

\n

\n
\n
\n

53. What is the output of below code

\n
\n
//\n\nc ole.log('🙂' === '🙂');
\n
    \n
  • 1: false
    • \n
  • 2: true
    • \n
\n
\nAnswer\n

\n

Answer: 2
\n

Emojis are unicodes and the unicode for smile symbol is \"U+1F642\". The unicode comparision of same emojies is equivalent to string comparison. Hence, the output is always true.

\n

\n
\n
\n

54. What is the output of below code?

\n
\n
//\n\nc ole.log(typeof typeof typeof true);
\n
    \n
  • string
    • \n
  • 2: boolean
    • \n
  • 3: NaN
    • \n
  • 4: number
    • \n
\n
\nAnswer\n

\n

Answer: 1
\n

The typeof operator on any primitive returns a string value. So even if you apply the chain of typeof operators on the return value, it is always string.

\n

\n
\n
\n

55. What is the output of below code?

\n
\n
//\n\nlet zero = new Number(0);\nif (zero) {\n    console.log('If');\n} else {\n    console.log('Else');\n}
\n
    \n
  • If
    • \n
  • 2: Else
    • \n
  • 3: NaN
    • \n
  • 4: SyntaxError
    • \n
\n
\nAnswer\n

\n

Answer: 1
\n
    \n
  1. The type of operator on new Number always returns object. i.e, typeof new Number(0) --> object.
    2. \n
  2. \n

    Objects are always truthy in if block\nHence the above code block always goes to if section.

    \n

    \n
\n\n\n
\n

55. What is the output of below code in non strict mode?

\n
\n
//\n\nlet msg = 'Good morning!!';\nmsg.name = 'John';\nc ole.log(msg.name);
\n
    \n
  • \"\"
    • \n
  • 2: Error
    • \n
  • 3: John
    • \n
  • 4: Undefined
    • \n
\n
\nAnswer\n

\n

Answer: 4
\n

It returns undefined for non-strict mode and returns Error for strict mode. In non-strict mode, the wrapper object is going to be created and get the mentioned property. But the object get disappeared after accessing the property in next line.

\n

\n
\n
\n

56. What is the output of below code?

\n
\n
//\n\nlet count = 10;\n(function innerFunc() {\n    if (count === 10) {\n        let count = 11;\n        console.log(count);\n    }\n    console.log(count);\n} ;
\n
    \n
  • 11, 10
    • \n
  • 2: 11, 11
    • \n
  • 3: 10, 11
    • \n
  • 4: 10, 10
    • \n
\n
\nAnswer\n

\n

Answer: 1
\n

11 and 10 is logged to the console.\nThe innerFunc is a closure which captures the count variable from the outerscope. i.e, 10. But the conditional has another local variable count which overwrites the ourter count variable. So the first console.log displays value 11.\nWhereas the second console.log logs 10 by capturing the count variable from outerscope.

\n

\n
\n
\n
\n
"},{"url":"/blog/htt-requests/","relativePath":"blog/htt-requests.md","relativeDir":"blog","base":"htt-requests.md","name":"htt-requests","frontmatter":{"title":"HTTP Requests","template":"post","subtitle":"What is HTTP","excerpt":"HTTP is a protocol, or a definite set of rules, for accessing resources on the web.","date":"2022-04-20T06:40:21.724Z","image":"https://imgs.search.brave.com/kExsXbNFftb4VTNT_HgQPhZoB3XYYEedZSJTB-Sqhk4/rs:fit:1200:622:1/g:ce/aHR0cDovL2J5dGVz/b2ZnaWdhYnl0ZXMu/Y29tL0lNQUdFUy9O/ZXR3b3JraW5nL0hU/VFBjb21tdW5jYXRp/b24vaHR0cCUyMGNv/bW11bmljYXRpb24u/cG5n","thumb_image":"https://imgs.search.brave.com/kExsXbNFftb4VTNT_HgQPhZoB3XYYEedZSJTB-Sqhk4/rs:fit:1200:622:1/g:ce/aHR0cDovL2J5dGVz/b2ZnaWdhYnl0ZXMu/Y29tL0lNQUdFUy9O/ZXR3b3JraW5nL0hU/VFBjb21tdW5jYXRp/b24vaHR0cCUyMGNv/bW11bmljYXRpb24u/cG5n","image_position":"right","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/html.yaml","src/data/categories/google.yaml","src/data/categories/git.yaml"],"tags":["src/data/tags/links.yaml","src/data/tags/resources.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/using-the-dom.md"],"cmseditable":true},"html":"\n

What is HTTP?

\n

HTTP is a protocol, or a definite set of rules, for accessing resources on the web. Resources could mean anything from HTML files to data from a database, photos, text, and so on.

\n

These resources are made available to us via an API and we make requests to these APIs via the HTTP protocol. API stands for application programming interface. It is the mechanism that allows developers to request resources.

\n

Client-Server Architecture

\n

In order to understand the HTTP methods, it’s important to cover the concept of client/server architecture. This architecture describes how all web applications work and defines the rules for how they communicate.

\n

A client application is the one that a user is actually interacting with, that's displaying the content. A server application is the one that sends the content, or resource, to your client application. A server application is a program that is running somewhere, listening, and waiting for a request.

\n

The main reason for this separation is to secure sensitive information. Your entire client application gets downloaded into the browser, and all of the data can be accessed by anyone accessing your web page.

\n

This architecture helps protect things like your API keys, personal data, and more. Now modern tools like Next.js and Netlify allow developers to run server code in the same app as their client app, without needing a dedicated server application.

\n

Client-Server Communication

\n

Client and server applications communicate by sending individual messages on an as-needed basis, rather than an ongoing stream of communication.

\n

These communications are almost always initiated by clients in the form of requests. These requests are fulfilled by the server application which sends back a response containing the resource you requested, among other things.

\n

Why We Need A Server-Client Architecture

\n

Let’s say you were building a weather web app, for example. The weather app that your user is going to interact with is the client application – it has buttons, a search bar, and displays data like city name, current temperature, AQI, and so on.

\n

This weather app wouldn’t have every city and its weather information coded directly into it. This would make the app bloated and slow, would take forever to research and manually add to a database, and would be a headache to update every single day.

\n

Instead, the app can access weather data by city using the Weather web API. Your app would gather your user’s location and then make a request to the server saying, “Hey, send me the weather information for this specific city.”

\n

Depending on what you are trying to achieve, you would use the various request methods that are available. The server sends back a response containing the weather information and a few other things, depending on how the API is written. It may also send back things like a timestamp, the region this city is located in, and more.

\n

Your client application communicated with a server application running somewhere, whose only job is to listen continuously for a request to that address. When it receives a request, it works to fulfill that request either by reading from a database, another API, local file, or a programmatic calculation based on data you pass in.

\n

The Anatomy of an HTTP Request

\n

An HTTP request must have the following:

\n
    \n
  • An HTTP method (like GET)
    • \n
  • A host URL (like https://api.spotify.com/)
    • \n
  • An endpoint path(like v1/artists/{id}/related-artists)
    • \n
\n

A request can also optionally have:

\n
    \n
  • Body
    • \n
  • Headers
    • \n
  • Query strings
    • \n
  • HTTP version
    • \n
\n

The Anatomy of an HTTP Response

\n

A response must have the following:

\n
    \n
  • Protocol version (like HTTP/1.1)
    • \n
  • Status code (like 200)
    • \n
  • Status text (OK)
    • \n
  • Headers
    • \n
\n

A response may also optionally have:

\n
    \n
  • Body
    • \n
\n

HTTP Methods Explained

\n

Twitter Tweet

\n

Now that we know what HTTP is and why it’s used, let’s talk about the different methods we have available to us.

\n

In the weather app example above, we wanted to retrieve weather information about a city. But what if we wanted to submit weather information for a city?

\n

In real life, you probably wouldn’t have permissions to alter someone else’s data, but let’s imagine that we are contributors to a community-run weather app. And in addition to getting the weather information from an API, members in that city could update this information to display more accurate data.

\n

Or what if we wanted to add a new city altogether that, for some reason, doesn’t already exist in our database of cities? These are all different functions – retrieve data, update data, create new data – and there are HTTP methods for all of these.

\n

HTTP POST request

\n

We use POST to create a new resource. A POST request requires a body in which you define the data of the entity to be created.

\n

A successful POST request would be a 200 response code. In our weather app, we could use a POST method to add weather data about a new city.

\n

HTTP GET request

\n

We use GET to read or retrieve a resource. A successful GET returns a response containing the information you requested.

\n

In our weather app, we could use a GET to retrieve the current weather for a specific city.

\n

HTTP PUT request

\n

We use PUT to modify a resource. PUT updates the entire resource with data that is passed in the body payload. If there is no resource that matches the request, it will create a new resource.

\n

In our weather app, we could use PUT to update all weather data about a specific city.

\n

HTTP PATCH request

\n

We use PATCH to modify a part of a resource. With PATCH, you only need to pass in the data that you want to update.

\n

In our weather app, we could use PATCH to update the rainfall for a specified day in a specified city.

\n

HTTP DELETE request

\n

We use DELETE to delete a resource. In our weather app, we could use DELETE to delete a city we no longer wanted to track for some reason.

\n

HTTP Method FAQs

\n

What’s the difference between PUT and POST?

\n

PUT requests are idempotent, meaning that executing the same PUT request will always produce the same result.

\n

On the other hand, a POST will produce different outcomes. If you execute a POST request multiple times, you'll create a new resource multiple times despite them having the same data being passed in.

\n

Using a restaurant analogy, POSTing multiple times would create multiple separate orders, whereas multiple PUT requests will update the same existing order.

\n

What’s the difference between PUT and PATCH?

\n

The key differences are that PUT will create a new resource if it cannot find the specified resource. And with PUT you need to pass in data to update the entire resource, even if you only want to modify one field.

\n

With PATCH, you can update part of a resource by simply passing in the data of the field to be updated.

\n

What if I just want to update part of my resource? Can I still use PUT?

\n

If you just want to update part of your resource, you still need to send in data for the entire resource when you make a PUT request. The better-suited option here would be PATCH.

\n

Why is a body optional for a request and response?

\n

A body is optional because for some requests, like resource retrievals using the GET method, there is nothing to specify in the body of your request. You are requesting all data from the specified endpoint.

\n

Similarly, a body is optional for some responses when a status code is sufficient or there is nothing to specify in the body, for example with a DELETE operation.

\n

HTTP Request Examples

\n

Now that we’ve covered what an HTTP request is, and why we use them, let’s make some requests! We’re going to be playing with the GitHub Gist API.

\n
\n

\"Gist is a simple way to share snippets and pastes with others. All Gists are Git repositories, so they are automatically versioned, forkable and usable from Git.\" (Source: Github)

\n
\n

You will need a GitHub account for this. If you don’t already have one, this is a great opportunity to start one to save your code in the future.

\n

Every user on GitHub can create gists, retrieve their gists, retrieve all public gists, delete a gist, and update a gist, amongst other things. To keep things simple we will use Hoppscotch, a platform with a nice interface used to quickly and easily make HTTP requests.

\n

A quick Hoppscotch walkthrough:

\n
    \n
  • There is a drop down menu where you can select the method you want to create a request with.
    • \n
  • There is a text box where you should paste the URL of of the API endpoint you want to access.
    • \n
\n

\"Screen-Shot-2022-01-24-at-12.35.33-PM\"

\n
    \n
  • There is a Headers section where we will be passing in headers as instructed by the GitHub docs.
    • \n
\n

\"Screen-Shot-2022-01-24-at-12.39.38-PM-1\"

\n
    \n
  • There is a body area where we will pass in content to our body as instructed by the GitHub docs.
    • \n
\n

\"Screen-Shot-2022-01-24-at-12.41.14-PM\"

\n
    \n
  • The right column will quickly let you know if your request was successful. If it is green, you successfully made your request, and if it's red there was an error.
    • \n
\n

\"Screen-Shot-2022-01-24-at-3.44.56-PM\"

\n

How to Make a GET Request

\n

To make a GET request to retrieve all of a specific users’ gists, we can use the following method and endpoint: GET /users/{username}/gists. The documentation tells us the parameters that we can pass in to make this request.

\n

We see that in the path we have to pass in a string with the target user’s username. We also see that we have to pass in a header called accept and set it to application/vnd.github.v3+json.

\n

\"Screen-Shot-2022-01-20-at-2.01.35-PM\"

\n

We're given the URL for this API:

\n
\n

We're given the endpoint path for this specific operation:

\n
\n

To make this request:

\n
    \n
  1. Paste in the full URL + path in the input field of Hoppscotch. Be sure to replace username with an actual username. If you don't have a GitHub with existing Gists, you can use mine: camiinthisthang.
    2. \n
  2. Select the GET request method
    3. \n
  3. In the Headers tab, set accept as a header and set the value to application/vnd.github.v3+json
    4. \n
\n

\"Screen-Shot-2022-01-24-at-12.39.38-PM-2\"

\n
    \n
  1. Hit send!
    2. \n
\n

At the bottom, you'll see your response formatted as JSON. In order to read this more clearly, copy the response and paste it into an online JSON formatter.

\n

In the formatter, you're able to tell that the response is an array of objects. Each object represents one gist, showing us information like the URL, the ID, etc.

\n

How to Make a POST Request

\n

Now let's create a resource using the POST method. In this context, the new resource would be a new gist.

\n

First we’ll have to create a personal access token. To do that, go to your settings page and hit Generate token.

\n

Name your token and select the scope “Create Gists”:

\n

\"Screen-Shot-2022-01-20-at-2.59.11-PM\"

\n

Then click the green Generate token button at the bottom of the page.

\n

\"Screen-Shot-2022-01-20-at-3.28.01-PM\"

\n

Copy your access code and paste it somewhere you can easily retrieve it.

\n

Now we're ready to make our request! The documentation tells us we should pass in a header, and a files object in the body. We can optionally pass in a few other things, including a boolean that dictates if this gist is public or private.

\n

\"Screen-Shot-2022-01-20-at-2.07.23-PM\"

\n

We're given the URL for this API:

\n
\n

We're given the endpoint path for this specific operation:

\n
\n

To make this request:

\n
    \n
  1. Paste the full URL + path into the input field of Hoppscotch.
    2. \n
  2. Select the POST request method
    3. \n
  3. In the Headers tab, set accept as a header and set the value to application/vnd.github.v3+json
    4. \n
  4. In the Body tab, set the content type to application/json. Then start off with an object {}.
    \n
    \nInside of this object, we'll set the public boolean to true. Then we'll define the property files, and the value is another object with a key of the name of your new gist. The value for this should be another object whose key is content. The value here should be whatever you want to actually add to the gist.
    \n
    \nHere is the code for you to copy/paste:
    5. \n
\n
\n

\"Screen-Shot-2022-01-24-at-2.35.57-PM\"

\n
    \n
  1. In the Authorization tab, set the authorization type to Basic Auth. Type in your Github username and pass your personal access token we created in the password field.
    2. \n
\n

After we run this, we get a long response. An easy way to check that your gist was created is to go to your Gists in GitHub.

\n

\"Screen-Shot-2022-01-24-at-2.39.27-PM\"

\n

We see that we successfully added a Gist!

\n

\"Screen-Shot-2022-01-24-at-2.39.58-PM\"

\n

How to Make a PATCH Request

\n

Let's update the title and description of the Gist we just created. Remember: PATCH allows you to update a part of a resource, not the entire resource. Anything that we don’t pass in will remain unchanged.

\n

We didn’t actually pass a description to our Gist when we created it, so we can patch this and create one.

\n

\"Screen-Shot-2022-01-20-at-3.35.56-PM\"

\n

We're given the URL for this API:

\n
\n

We're given the endpoint path for this specific operation:

\n
\n

To make this request:

\n
    \n
  1. Paste in the full URL + path in the input field of Hoppscotch. Get the Gist ID of the gist you want to update. You can find the ID by going to the Gist in GitHub and copying the alphanumeric string at the end of the URL.
    2. \n
\n

\"Screen-Shot-2022-01-20-at-3.50.13-PM\"

\n
    \n
  1. Select the PATCH request method.
    2. \n
  2. In the Headers tab, set accept as a header and set the value to application/vnd.github.v3+json.
    3. \n
  3. In the Authorization tab, set the authorization type to Basic Auth. Type in your GitHub username and pass your personal access token we created in the password field.
    4. \n
  4. In the Body tab, we'll pass in the updated description and title. Here is the code:
    5. \n
\n
\n

If we refresh our Gist, we see that we have an updated title and description!

\n

\"Screen-Shot-2022-01-24-at-3.38.35-PM\"

\n

How to Make a DELTE Request

\n

Let's delete the Gist we created. We should pass in the header and the Gist ID.

\n

\"Screen-Shot-2022-01-24-at-3.42.30-PM\"

\n

We're given the URL for this API:

\n
\n

We're given the endpoint path for this specific operation:

\n
\n

To make this request:

\n
    \n
  1. Paste in the full URL + path in the input field of Hoppscotch. Get the Gist ID of the gist you want to update. You can find the ID by going to the Gist in GitHub and copying the alphanumeric string at the end of the URL.
    2. \n
\n

\"Screen-Shot-2022-01-20-at-3.50.13-PM\"

\n
    \n
  1. Select the DELETE request method
    2. \n
  2. In the Headers tab, set accept as a header and set the value to application/vnd.github.v3+json.
    3. \n
\n

If we navigate to our Gists, we see that this one doesn't exist and we successfully deleted the resource.

\n"},{"url":"/blog/intro-to-markdown/","relativePath":"blog/intro-to-markdown.md","relativeDir":"blog","base":"intro-to-markdown.md","name":"intro-to-markdown","frontmatter":{"title":"Intro To Markdown","template":"post","subtitle":"An Introduction to Markdown (Bonus Markdown Templates Included)","excerpt":"This topic is meant to give you a very basic overview of how Markdown works,","date":"2022-05-16T04:10:35.613Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/markdown.png?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/markdown.png?raw=true","image_position":"right","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/git.yaml"],"tags":["src/data/tags/cms.yaml"],"show_author_bio":true,"cmseditable":true},"html":"

An Introduction to Markdown (Bonus Markdown Templates Included)

\n

Basic Syntax Guide

\n
\n

An Introduction to Markdown (Bonus Markdown Templates Included)

\n
\n\n
\n\nbgoonz/Markdown-Templates\n
\nOne Paragraph of project description goes here These instructions will get you a copy of the project up and running on…github.com\n\n\n

Basic Syntax Guide

\n

This topic is meant to give you a very basic overview of how Markdown works, showing only some of the most common operations you use most frequently. Keep in mind that you can also use the Edit menus to inject markdown using the toolbar, which serves as a great way to see how Markdown works. However, Markdown's greatest strength lies in its simplicity and keyboard friendly approach that lets you focus on writing your text and staying on the keyboard.

\n

What is Markdown

\n

Markdown is very easy to learn and get comfortable with due it's relatively small set of markup ‘commands'. It uses already familiar syntax to represent common formatting operations. Markdown understands basic line breaks so you can generally just type text.

\n

Markdown also allows for raw HTML inside of a markdown document, so if you want to embed something more fancy than what Markdowns syntax can do you can always fall back to HTML. However to keep documents readable that's generally not recommended.

\n

Basic Markdown Syntax

\n

The following are a few examples of the most common things you are likely to do with Markdown while building typical documentation.

\n

Bold and Italic

\n
markdown\n\nThis text **is bold**.\nThis text *is italic*.
\n

This text is bold.\nThis text is italic.

\n

Header Text

\n
markdown\n\n# Header 1\n## Header 2\n### Header 3\n#### Header 4\n##### Header 5\n###### Header 6
\n

Header 1

\n

Header 2

\n

Header 3

\n

Header 4

\n

Header 5Header 6

\n

Line Continuation

\n

By default Markdown adds paragraphs at double line breaks. Single line breaks by themselves are simply wrapped together into a single line. If you want to have soft returns that break a single line, add two spaces at the end of the line.

\n
markdown\n\nThis line has a paragraph break at the end (empty line after).\n\nTheses two lines should display as a single\nline because there's no double space at the end.\n\nThe following line has a soft break at the end (two spaces at end)\nThis line should be following on the very next line.
\n

This line has a paragraph break at the end (empty line after).

\n

Theses two lines should display as a single line because there's no double space at the end.

\n

The following line has a soft break at the end (two spaces at end)\nThis line should be following on the very next line.

\n

Links

\n
markdown\n\n[Help Builder Web Site](http://helpbuilder.west-wind.com/)
\n

Help Builder Web Site

\n

If you need additional image tags like targets or title attributes you can also embed HTML directly:

\n
markdown\n\nGo the Help Builder sitest Wind site: <a href=\"http://west-wind.com/\" target=\"_blank\">Help Builder Site</a>.
\n

Images

\n
markdown\n\n![Help Builder Web Site](https://helpbuilder.west-wind.com/images/HelpBuilder_600.png)
\n
\n\n
### Block Quotes\n

Block quotes are callouts that are great for adding notes or warnings into documentation.

\n
markdown\n\n> ###  Headers break on their own\n> Note that headers don't need line continuation characters\nas they are block elements and automatically break. Only text\nlines require the double spaces for single line breaks.
\n
\n

Headers break on their own

\n
\n
\n

Note that headers don't need line continuation characters as they are block elements and automatically break. Only text lines require the double spaces for single line breaks.

\n
\n

Fontawesome Icons

\n

Help Builder includes a custom syntax for FontAwesome icons in its templates. You can embed a @ icon- followed by a font-awesome icon name to automatically embed that icon without full HTML syntax.

\n
markdown\n\nGear:  Configuration
\n

Configuration

\n

HTML Markup

\n

You can also embed plain HTML markup into the page if you like. For example, if you want full control over fontawesome icons you can use this:

\n
markdown\n\nThis text can be **embedded** into Markdown:\n<i class=\"fa fa-refresh fa-spin fa-lg\">
\n

Refresh Page

\n

This text can be embedded into Markdown:\nRefresh Page

\n

Unordered Lists

\n
markdown\n\n* Item 1\n* Item 2\n* Item 3\nThis text is part of the third item. Use two spaces at end of the the list item to break the line.\n\nA double line break, breaks out of the list.
\n
    \n
  • Item 1
    • \n
  • Item 2
    • \n
  • Item 3\nThis text is part of the third item. Use two spaces at end of the the list item to break the line.
    • \n
\n

A double line break, breaks out of the list.

\n

Ordered Lists

\n
markdown\n\n1. **Item 1**\nItem 1 is really something\n2. **Item 2**\nItem two is really something else\n\nIf you want lines to break using soft returns use two spaces at the end of a line.
\n
    \n
  1. Item 1 Item 1 is really something
    2. \n
  2. Item 2\nItem two is really something else
    3. \n
\n

If you want to lines to break using soft returns use to spaces at the end of a line.

\n

Inline Code

\n

If you want to embed code in the middle of a paragraph of text to highlight a coding syntax or class/member name you can use inline code syntax:

\n
markdown\n\nStructured statements like `for x =1 to 10` loop structures\ncan be codified using single back ticks.
\n

Structured statements like for x =1 to 10 loop structures can be codified using single back ticks.

\n

Code Blocks with Syntax Highlighting

\n

Markdown supports code blocks syntax in a variety of ways:

\n
markdown\n\nThe following code demonstrates:\n\n    // This is code by way of four leading spaces\n    // or a leading tab\n\nMore text here
\n

The following code demonstrates:

\n
pgsql\n\n// This is code by way of four leading spaces\n// or a leading tab
\n

More text here

\n

Code Blocks

\n

You can also use triple back ticks plus an optional coding language to support for syntax highlighting (space injected before last ` to avoid markdown parsing):

\n
markdown\n\n`` `csharp\n// this code will be syntax highlighted\nfor(var i=0; i++; i < 10)\n{\n    Console.WriteLine(i);\n}\n`` `\n\ncsharp\n\n// this code will be syntax highlighted\nfor(var i=0; i++; i < 10)\n{\n    Console.WriteLine(i);\n}
\n

Many languages are supported: html, xml, javascript, css, csharp, foxpro, vbnet, sql, python, ruby, php and many more. Use the Code drop down list to get a list of available languages.

\n

You can also leave out the language to get no syntax coloring but the code box:

\n
markdown\n\n`` `dos\nrobocopy c:\\temp\\test d:\\temp\\test\n`` `\n\ndos\n\nrobocopy c:\\temp\\test d:\\temp\\test
\n

To create a formatted block but without formatting use the txt format:

\n
markdown\n\n`` `txt\nThis is some text that will not be syntax highlighted\nbut shows up in a code box.\n`` `
\n

which gives you:

\n
text\n\nThis is some text that will not be syntax highlighted\nbut shows up in a code box.
\n

bgoonz's gists · GitHub

\n\nbgoonz — Overview\n
\nWeb Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com\n\n\n

By Bryan Guner on March 8, 2021.

\n

Canonical link

\n

on September 23, 2021.

"},{"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/5.jpg","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/linux-commands/","relativePath":"blog/linux-commands.md","relativeDir":"blog","base":"linux-commands.md","name":"linux-commands","frontmatter":{"title":"Linux Commands","template":"post","subtitle":"\tLists all files and directories in the present working directory","excerpt":"\tLists all files and directories in the present working directory","date":"2022-06-08T11:41:30.047Z","image":"https://www.howtogeek.com/wp-content/uploads/2021/09/linux_tux_hero_2.jpg?height=200p&trim=2,2,2,2&crop=16:9","thumb_image":"https://www.howtogeek.com/wp-content/uploads/2021/09/linux_tux_hero_2.jpg?height=200p&trim=2,2,2,2&crop=16:9","image_position":"right","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/awesome-lists.yaml"],"tags":["src/data/tags/links.yaml"],"show_author_bio":true,"related_posts":[],"cmseditable":true},"html":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
CommandDescription
lsLists all files and directories in the present working directory
ls-RLists files in sub-directories as well
ls-aLists hidden files as well
ls-alLists files and directories with detailed information like permissions,size, owner, etc.
cd or cd ~Navigate to HOME directory
cd ..Move one level up
cdTo change to a particular directory
cd /Move to the root directory
cat > filenameCreates a new file
cat filenameDisplays the file content
cat file1 file2 > file3Joins two files (file1, file2) and stores the output in a new file (file3)
mv file \"new file path\"Moves the files to the new location
mv filename newfilenameRenames the file to a new filename
sudoAllows regular users to run programs with the security privileges of the superuser or root
rm filenameDeletes a file
manGives help information on a command
historyGives a list of all past commands typed in the current terminal session
clearClears the terminal
mkdir directorynameCreates a new directory in the present working directory or a at the specified path
rmdirDeletes a directory
mvRenames a directory
pr -xDivides the file into x columns
pr -hAssigns a header to the file
pr -nDenotes the file with Line Numbers
lp -nc , lpr cPrints “c” copies of the File
 lp-d lp-PSpecifies name of the printer
apt-getCommand used to install and update packages
mail -s 'subject'Command to send email
-c 'cc-address'
-b 'bcc-address'
'to-address'
mail -s \"Subject\"Command to send email with attachment
to-address < Filename
Linux File Permissions
File Permission commands
CommandDescription
ls-lto show file type and access permission
rread permission
wwrite permission
xexecute permission
-=no permission
Chown userFor changing the ownership of a file/directory
Chown user:group filenamechange the user as well as group for a file or directory
Environment Variables command
CommandDescription
echo $VARIABLETo display value of a variable
envDisplays all environment variables
VARIABLENAME= variablevalueCreate a new variable
UnsetRemove a variable
export Variable=valueTo set value of an environment variable
User management commands of linux
CommandDescription
sudo adduser usernameTo add a new user
sudo passwd -l 'username'To change the password of a user
sudo userdel -r 'username'To remove a newly created user
sudo usermod -a -G GROUPNAME USERNAMETo add a user to a group
sudo deluser USER GROUPNAMETo remove a user from a group
fingerShows information of all the users logged in
finger usernameGives information of a particular user
Networking command
CommandDescription
SSH username@ip-address or hostnamelogin into a remote Linux machine using SSH
Ping hostname=\"\" or =\"\"To ping and Analyzing network and host connections
dirDisplay files in the current directory of a remote computer
cd \"dirname\"change directory to “dirname” on a remote computer
put fileupload ‘file’ from local to remote computer
get fileDownload ‘file’ from remote to local computer
quitLogout
Process command
CommandDescription
bgTo send a process to the background
fgTo run a stopped process in the foreground
topDetails on all Active Processes
psGive the status of processes running for a user
ps PIDGives the status of a particular process
pidofGives the Process ID (PID) of a process
kill PIDKills a process
niceStarts a process with a given priority
reniceChanges priority of an already running process
dfGives free hard disk space on your system
freeGives free RAM on your system
VI Editing Commands
CommandDescription
iInsert at cursor (goes into insert mode)
aWrite after cursor (goes into insert mode)
AWrite at the end of line (goes into insert mode)
ESCTerminate insert mode
uUndo last change
UUndo all changes to the entire line
oOpen a new line (goes into insert mode)
ddDelete line
3ddDelete 3 lines
DDelete contents of line after the cursor
CDelete contents of a line after the cursor and insert new text. Press ESC key to end insertion.
dwDelete word
4dwDelete 4 words
cwChange word
xDelete character at the cursor
rReplace character
ROverwrite characters from cursor onward
sSubstitute one character under cursor continue to insert
SSubstitute entire line and begin to insert at the beginning of the line
~Change case of individual character
"},{"url":"/blog/jsx-in-depth/","relativePath":"blog/jsx-in-depth.md","relativeDir":"blog","base":"jsx-in-depth.md","name":"jsx-in-depth","frontmatter":{"title":"JSX In Depth","template":"post","subtitle":"Fundamentally, JSX just provides syntactic sugar for the React.createElement","excerpt":"Fundamentally, JSX just provides syntactic sugar for the React.createElement","date":"2022-05-29T00:03:22.427Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/react.gif?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/react.gif?raw=true","image_position":"top","author":"src/data/authors/im.yaml","categories":["src/data/categories/react.yaml"],"tags":["src/data/tags/react.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/10-essential-react-interview-questions.md","src/pages/blog/deploy-react-app-to-heroku.md","src/pages/blog/adding-css-to-your-html.md","src/pages/blog/react-fragments.md","src/pages/blog/react-semantics.md","src/pages/blog/react-state.md","src/pages/blog/passing-arguments-to-a-callback-in-js.md"],"cmseditable":true},"html":"

JSX In Depth

\n

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. The JSX code:

\n
<MyButton color=\"blue\" shadowSize={2}>\n  Click Me\n</MyButton>
\n

compiles into:

\n
React.createElement(\n  MyButton,\n  {color: 'blue', shadowSize: 2},\n  'Click Me'\n)
\n

You can also use the self-closing form of the tag if there are no children. So:

\n
<div className=\"sidebar\" />
\n

compiles into:

\n
React.createElement(\n  'div',\n  {className: 'sidebar'}\n)
\n

If you want to test out how some specific JSX is converted into JavaScript, you can try out the online Babel compiler.

\n

Specifying The React Element Type

\n

The first part of a JSX tag determines the type of the React element.

\n

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX <Foo /> expression, Foo must be in scope.

\n

React Must Be in Scope

\n

Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code.

\n

For example, both of the imports are necessary in this code, even though React and CustomButton are not directly referenced from JavaScript:

\n
import React from 'react';import CustomButton from './CustomButton';\nfunction WarningButton() {\n  // return React.createElement(CustomButton, {color: 'red'}, null);  return <CustomButton color=\"red\" />;\n}
\n

If you don’t use a JavaScript bundler and loaded React from a <script> tag, it is already in scope as the React global.

\n

Using Dot Notation for JSX Type

\n

You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if MyComponents.DatePicker is a component, you can use it directly from JSX with:

\n
import React from 'react';\n\nconst MyComponents = {\n  DatePicker: function DatePicker(props) {\n    return <div>Imagine a {props.color} datepicker here.</div>;\n  }\n}\n\nfunction BlueDatePicker() {\n  return <MyComponents.DatePicker color=\"blue\" />;}
\n

User-Defined Components Must Be Capitalized

\n

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

\n

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

\n

For example, this code will not run as expected:

\n
import React from 'react';\n\n// Wrong! This is a component and should have been capitalized:function hello(props) {  // Correct! This use of <div> is legitimate because div is a valid HTML tag:\n  return <div>Hello {props.toWhat}</div>;\n}\n\nfunction HelloWorld() {\n  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:  return <hello toWhat=\"World\" />;}
\n

To fix this, we will rename hello to Hello and use <Hello /> when referring to it:

\n
import React from 'react';\n\n// Correct! This is a component and should be capitalized:function Hello(props) {  // Correct! This use of <div> is legitimate because div is a valid HTML tag:\n  return <div>Hello {props.toWhat}</div>;\n}\n\nfunction HelloWorld() {\n  // Correct! React knows <Hello /> is a component because it's capitalized.  return <Hello toWhat=\"World\" />;}
\n

Choosing the Type at Runtime

\n

You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:

\n
import React from 'react';\nimport { PhotoStory, VideoStory } from './stories';\n\nconst components = {\n  photo: PhotoStory,\n  video: VideoStory\n};\n\nfunction Story(props) {\n  // Wrong! JSX type can't be an expression.  return <components[props.storyType] story={props.story} />;}
\n

To fix this, we will assign the type to a capitalized variable first:

\n
import React from 'react';\nimport { PhotoStory, VideoStory } from './stories';\n\nconst components = {\n  photo: PhotoStory,\n  video: VideoStory\n};\n\nfunction Story(props) {\n  // Correct! JSX type can be a capitalized variable.  const SpecificStory = components[props.storyType];  return <SpecificStory story={props.story} />;}
\n

Props in JSX

\n

There are several different ways to specify props in JSX.

\n

JavaScript Expressions as Props

\n

You can pass any JavaScript expression as a prop, by surrounding it with {}. For example, in this JSX:

\n
<MyComponent foo={1 + 2 + 3 + 4} />
\n

For MyComponent, the value of props.foo will be 10 because the expression 1 + 2 + 3 + 4 gets evaluated.

\n

if statements and for loops are not expressions in JavaScript, so they can’t be used in JSX directly. Instead, you can put these in the surrounding code. For example:

\n
function NumberDescriber(props) {\n  let description;\n  if (props.number % 2 == 0) {    description = <strong>even</strong>;  } else {    description = <i>odd</i>;  }  return <div>{props.number} is an {description} number</div>;\n}
\n

You can learn more about conditional rendering and loops in the corresponding sections.

\n

String Literals

\n

You can pass a string literal as a prop. These two JSX expressions are equivalent:

\n
<MyComponent message=\"hello world\" />\n\n<MyComponent message={'hello world'} />
\n

When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:

\n
<MyComponent message=\"&lt;3\" />\n\n<MyComponent message={'<3'} />
\n

This behavior is usually not relevant. It’s only mentioned here for completeness.

\n

Props Default to “True”

\n

If you pass no value for a prop, it defaults to true. These two JSX expressions are equivalent:

\n
<MyTextBox autocomplete />\n\n<MyTextBox autocomplete={true} />
\n

In general, we don’t recommend not passing a value for a prop, because it can be confused with the ES6 object shorthand {foo} which is short for {foo: foo} rather than {foo: true}. This behavior is just there so that it matches the behavior of HTML.

\n

Spread Attributes

\n

If you already have props as an object, and you want to pass it in JSX, you can use ... as a “spread” syntax to pass the whole props object. These two components are equivalent:

\n
function App1() {\n  return <Greeting firstName=\"Ben\" lastName=\"Hector\" />;\n}\n\nfunction App2() {\n  const props = {firstName: 'Ben', lastName: 'Hector'};\n  return <Greeting {...props} />;}
\n

You can also pick specific props that your component will consume while passing all other props using the spread syntax.

\n
const Button = props => {\n  const { kind, ...other } = props;  const className = kind === \"primary\" ? \"PrimaryButton\" : \"SecondaryButton\";\n  return <button className={className} {...other} />;\n};\n\nconst App = () => {\n  return (\n    <div>\n      <Button kind=\"primary\" onClick={() => console.log(\"clicked!\")}>\n        Hello World!\n      </Button>\n    </div>\n  );\n};
\n

In the example above, the kind prop is safely consumed and is not passed on to the <button> element in the DOM. All other props are passed via the ...other object making this component really flexible. You can see that it passes an onClick and children props.

\n

Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don’t care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.

\n

Children in JSX

\n

In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: props.children. There are several different ways to pass children:

\n

String Literals

\n

You can put a string between the opening and closing tags and props.children will just be that string. This is useful for many of the built-in HTML elements. For example:

\n
<MyComponent>Hello world!</MyComponent>
\n

This is valid JSX, and props.children in MyComponent will simply be the string \"Hello world!\". HTML is unescaped, so you can generally write JSX just like you would write HTML in this way:

\n
<div>This is valid HTML &amp; JSX at the same time.</div>
\n

JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space. So these all render to the same thing:

\n
<div>Hello World</div>\n\n<div>\n  Hello World\n</div>\n\n<div>\n  Hello\n  World\n</div>\n\n<div>\n\n  Hello World\n</div>
\n

JSX Children

\n

You can provide more JSX elements as the children. This is useful for displaying nested components:

\n
<MyContainer>\n  <MyFirstComponent />\n  <MySecondComponent />\n</MyContainer>
\n

You can mix together different types of children, so you can use string literals together with JSX children. This is another way in which JSX is like HTML, so that this is both valid JSX and valid HTML:

\n
<div>\n  Here is a list:\n  <ul>\n    <li>Item 1</li>\n    <li>Item 2</li>\n  </ul>\n</div>
\n

A React component can also return an array of elements:

\n
render() {\n  // No need to wrap list items in an extra element!\n  return [\n    // Don't forget the keys :)\n    <li key=\"A\">First item</li>,\n    <li key=\"B\">Second item</li>,\n    <li key=\"C\">Third item</li>,\n  ];\n}
\n

JavaScript Expressions as Children

\n

You can pass any JavaScript expression as children, by enclosing it within {}. For example, these expressions are equivalent:

\n
<MyComponent>foo</MyComponent>\n\n<MyComponent>{'foo'}</MyComponent>
\n

This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:

\n
function Item(props) {\n  return <li>{props.message}</li>;}\n\nfunction TodoList() {\n  const todos = ['finish doc', 'submit pr', 'nag dan to review'];\n  return (\n    <ul>\n      {todos.map((message) => <Item key={message} message={message} />)}    </ul>\n  );\n}
\n

JavaScript expressions can be mixed with other types of children. This is often useful in lieu of string templates:

\n
function Hello(props) {\n  return <div>Hello {props.addressee}!</div>;}
\n

Functions as Children

\n

Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, props.children works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as props.children:

\n
// Calls the children callback numTimes to produce a repeated component\nfunction Repeat(props) {\n  let items = [];\n  for (let i = 0; i < props.numTimes; i++) {    items.push(props.children(i));\n  }\n  return <div>{items}</div>;\n}\n\nfunction ListOfTenThings() {\n  return (\n    <Repeat numTimes={10}>\n      {(index) => <div key={index}>This is item {index} in the list</div>}    </Repeat>\n  );\n}
\n

Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.

\n

Booleans, Null, and Undefined Are Ignored

\n

false, null, undefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

\n
<div />\n\n<div></div>\n\n<div>{false}</div>\n\n<div>{null}</div>\n\n<div>{undefined}</div>\n\n<div>{true}</div>
\n

This can be useful to conditionally render React elements. This JSX renders the <Header /> component only if showHeader is true:

\n
<div>\n  {showHeader && <Header />}  <Content />\n</div>
\n

One caveat is that some “falsy” values, such as the 0 number, are still rendered by React. For example, this code will not behave as you might expect because 0 will be printed when props.messages is an empty array:

\n
<div>\n  {props.messages.length &&    <MessageList messages={props.messages} />\n  }\n</div>
\n

To fix this, make sure that the expression before && is always boolean:

\n
<div>\n  {props.messages.length > 0 &&    <MessageList messages={props.messages} />\n  }\n</div>
\n

Conversely, if you want a value like false, true, null, or undefined to appear in the output, you have to convert it to a string first:

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

Overview\n\n

\n

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

\n

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

\n
    \n
  • Fast, web-based UI: With rich-text editing, real-time preview, and drag-and-drop media uploads.
    • \n
  • -
    • \n
  • Platform agnostic: Works with most static site generators.
    • \n
  • -
    • \n
  • Easy installation: Add two files to your site and hook up the backend by including those f
    • \n
  • -
    • \n
  • Modern authentication: Using GitHub, GitLab, or Bitbucket and JSON web tokens.
    • \n
  • Flexible content types: Specify an unlimited number of content types with custom fields.
    • \n
  • Fully extensible: Create custom-styled previews, UI widgets, and editor plugins.
    • \n
\n

Netlify CMS vs. Netlify

\n

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

\n

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

\n

With this in mind, you can:

\n
    \n
  • Use Netlify CMS without Netlify and deploy your site where you always have, hooking up your own CI, site hosting, CDN, etc.
    • \n
  • -
    • \n
  • Use Netlify without Netlify CMS and edit your static site in your code editor.
    • \n
  • Or, use them together and have a fully-working CMS-enabled site with one click!
    • \n
\n

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

\n
    \n
  • Add to Your SiteThese generatorsstore static files inJekyll, 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:
    • \n
\n

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

\n

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

\n

App File Structure

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

Installing with npm

\n

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

\n

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

\n

Configuration

\n

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

\n

Backend

\n

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

\n

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

\n

(For Bitbucket repositories, use theBitbucket backendinstructions instead.)

\n

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

\n

Editorial Workflow

\n

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

\n

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

\n

Media and Public Folders

\n

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

\n

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

\n

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

\n

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

\n

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

\n

Collections

\n

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

\n

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

\n

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

\n

Let's break that down:

\n
    \n
  • label: Field label in the editor UI.
    • \n
  • -
    • \n
  • name: Field name in the document front matter.
    • \n
  • -
    • \n
  • widget: Determines UI style and value data type (details below).
    • \n
  • default (optional): Sets a default value for the field.
    • \n
\n

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

\n

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

\n

Filter

\n

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

\n

Authentication

\n

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

\n

Setup on Netlify

\n

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

\n

Enable Identity and Git Gateway

\n

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

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

Add the Netlify Identity Widget

\n

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

\n

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

\n

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

\n

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

\n

Accessing the CMS

\n

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

\n

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

\n

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

\n

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

\n

Examples

\n

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

\n

Example\nTools\nType\nSource\nMore info

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

Gatsby\n\n

\n

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

\n

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

\n

Create a new Gatsby site

\n

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

\n

Get to know Gatsby

\n

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

\n

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

\n

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

\n

Add Netlify CMS to your site

\n

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

\n

Configuration

\n

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

\n

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

\n

In your config.yml file paste the following configuration:

\n

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

\n

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

\n

Push to GitHub

\n

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

\n

Add your repo to Netlify

\n

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

\n

Enable Identity and Git Gateway

\n

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

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

Start publishing

\n

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

\n

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

\n

Cleanup

\n

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

"},{"url":"/blog/psql-cheat-sheet/","relativePath":"blog/psql-cheat-sheet.md","relativeDir":"blog","base":"psql-cheat-sheet.md","name":"psql-cheat-sheet","frontmatter":{"title":"PSQl Cheat Sheet","template":"post","subtitle":"Basic Commands","excerpt":"Login to postgresql","date":"2022-04-04T17:27:00.746Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/psql-diagram.jpg?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/psql-diagram.jpg?raw=true","image_position":"right","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/db.yaml"],"tags":["src/data/tags/psql.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/psql-cheat-sheet.md"],"cmseditable":true},"html":"

💻 PSQL💻

\n
\n

source

\n
\n

Basic Commands

\n

Login to postgresql

\n
psql -U postgres\npsql -d mydb -U myuser -W\npsql -h myhost -d mydb -U myuser -W\npsql -U myuser -h myhost \"dbname=mydb sslmode=require\" # ssl connection
\n

Default Admin Login

\n
sudo -u postgres psql -U postgres\nsudo -u postgres psql
\n

List databases on postgresql server

\n

Determine system tables

\n
select * from pg_tables where tableowner = 'postgres';
\n

List databases from within a pg shell

\n

List databases from UNIX command prompt

\n

Describe a table

\n

Quit psql

\n

Switch postgres database within admin login shell

\n

Reset a user password as admin

\n
alter user usertochange with password 'new_passwd';
\n

Show all tables

\n

List all Schemas

\n

List all users

\n

Load data into postgresql

\n
psql -W -U username -H hostname < file.sql
\n

Dump (Backup) Data into file

\n
pg_dump -W -U username -h hostname database_name > file.sql
\n

Increment a sequence

\n
SELECT nextval('my_id_seq');
\n

Create new user

\n
CREATE USER lemmy WITH PASSWORD 'myPassword';\n# or\n\nsudo -u postgres createuser lemmy -W
\n

Change user password

\n
ALTER USER Postgres WITH PASSWORD 'mypass';
\n

Grant user createdb privilege

\n
ALTER USER myuser WITH createdb;
\n

Create a superuser user

\n
create user mysuper with password '1234' SUPERUSER\n# or even better\ncreate user mysuper with password '1234' SUPERUSER CREATEDB CREATEROLE INHERIT LOGIN REPLICATION;\n# or\nsudo -u postgres createuser lemmy -W -s
\n

Upgrade an existing user to superuser

\n
alter user mysuper with superuser;\n# or even better\nalter user mysuper with SUPERUSER CREATEDB CREATEROLE INHERIT LOGIN REPLICATION
\n

Show Database Version

\n

Change Database Owner

\n
alter database database_name owner to new_owner;
\n

Copy a database

\n
CREATE DATABASE newdb WITH TEMPLATE originaldb;
\n

View Database Connections

\n
SELECT * FROM pg_stat_activity;
\n

View show data directory (works on 9.1+)

\n

Show run-time parameters

\n
show all;\nselect * from pg_settings;
\n

Show the block size setting

\n
# show block_size;\n block_size\n------------\n 8192\n(1 row)
\n

Show stored procedure source

\n
SELECT prosrc FROM pg_proc WHERE proname = 'procname'
\n

Grant examples

\n
# readonly to all tables for myuser\ngrant select on all tables in schema public to myuser;\n# all privileges on table1 and table2 to myuser\ngrant all privileges on table1, table2, table3 to myuser;
\n

Restore Postgres .dump file

\n
pg_restore --verbose --clean --no-acl --no-owner -h localhost -U myuser -d mydb latest.dump
\n

source

\n

Find all active sessions and kill them (i.e. for when needing to drop or rename db)

\n

Source: http://stackoverflow.com/questions/5408156/how-to-drop-a-postgresql-database-if-there-are-active-connections-to-it

\n
# Postgres 9.6 and above\nSELECT pg_terminate_backend(pg_stat_activity.pid)\nFROM pg_stat_activity\nWHERE pg_stat_activity.datname = 'TARGET_DB'\n AND pid <> pg_backend_pid();\n\n# Postgres 9.6 and below\nSELECT pg_terminate_backend(pg_stat_activity.procpid)\nFROM pg_stat_activity\nWHERE pg_stat_activity.datname = 'TARGET_DB'\nAND procpid <> pg_backend_pid();
\n

Handy Queries

\n
-- List procedure/function\nSELECT * FROM pg_proc WHERE proname='__procedurename__';\n\n-- List view (including the definition)\nSELECT * FROM pg_views WHERE viewname='__viewname__';\n\n-- Show DB table space in use\nSELECT pg_size_pretty(pg_total_relation_size('__table_name__'));:\n\n-- Show DB space in use\nSELECT pg_size_pretty(pg_database_size('__database_name__'));\n\n-- Show current user's statement timeout\nshow statement_timeout;\n\n-- Show table indexes\nSELECT * FROM pg_indexes WHERE tablename='__table_name__' AND schemaname='__schema_name__';\n\n-- Get all indexes from all tables of a schema:\nSELECT\n   t.relname AS table_name,\n   i.relname AS index_name,\n   a.attname AS column_name\nFROM\n   pg_class t,\n   pg_class i,\n   pg_index ix,\n   pg_attribute a,\n   pg_namespace n\nWHERE\n   t.oid = ix.indrelid\n   AND i.oid = ix.indexrelid\n   AND a.attrelid = t.oid\n   AND a.attnum = ANY(ix.indkey)\n   AND t.relnamespace = n.oid\n   AND n.nspname = 'kartones'\nORDER BY\n   t.relname,\n   i.relname\n\n-- Queries being executed at a certain DB\nSELECT datname, application_name, pid, backend_start, query_start, state_change, state, query\n  FROM pg_stat_activity\n  WHERE datname='__database_name__';\n\n-- Get all queries from all dbs waiting for data (might be hung)\nSELECT * FROM pg_stat_activity WHERE waiting='t';
\n

Query analysis

\n
-- See the query plan for the given query\nEXPLAIN __query__\n\n-- See and execute the query plan for the given query\nEXPLAIN ANALYZE __query__\n\n-- Collect statistics\nANALYZE [__table__]
\n

Querying Data

\n

From a Single Table

\n
-- Query data in columns c1, c2 from a table\nSELECT c1, c2 FROM t;\n\n-- Query distinct rows from a table\nSELECT DISTINCT c1\nFROM t\nWHERE condition;\n\n-- Sort the result set in ascending or descending order\nSELECT c1, c2\nFROM t\nORDER BY c1 ASC [DESC];\n\n-- Skip offset of rows and return the next n rows\nSELECT c1, c2\nFROM t\nORDER BY c1\nLIMIT n\nOFFSET offset;\n\n-- Group rows using an aggregate function\nSELECT c1, aggregate(c2)\nFROM t\nGROUP BY c1;\n\n-- Filter groups using HAVING clause\nSELECT c1, aggregate(c2) FROM t\nGROUP BY c1\nHAVING condition;
\n

From Multiple Tables

\n
-- Inner join t1 and t2\nSELECT c1, c2\nFROM t1\nINNER JOIN t2\nON condition;\n\n-- Left join t1 and t1\nSELECT c1, c2\nFROM t1\nLEFT JOIN t2\nON condition;\n\n-- Right join t1 and t2\nSELECT c1, c2\nFROM t1\nRIGHT JOIN t2\nON condition;\n\n-- Perform full outer join\nSELECT c1, c2\nFROM t1\nFULL OUTER JOIN t2\nON condition;\n\n-- Produce a Cartesian product of rows in tables\nSELECT c1, c2\nFROM t1\nCROSS JOIN t2;\n\n-- Another way to perform cross join\nSELECT c1, c2\nFROM t1, t2;\n\n-- Join t1 to itself using INNER JOIN clause\nSELECT c1, c2\nFROM t1 A\nINNER JOIN t2 B ON condition
\n

Using SQL Operators

\n
-- Combine rows from two queries\nSELECT c1, c2 FROM t1\nUNION [ALL]\nSELECT c1, c2 FROM t2;\n\n-- Return the intersection of two queries\nSELECT c1, c2 FROM t1\nINTERSECT\nSELECT c1, c2 FROM t2;\n\n-- Subtract a result set from another result set\nSELECT c1, c2 FROM t1\nEXCEPT\nSELECT c1, c2 FROM t2;\n\n-- Query rows using pattern matching %, _\nSELECT c1, c2 FROM t1\nWHERE c1 [NOT] LIKE pattern;\n\n-- Query rows in a list\nSELECT c1, c2\nFROM t\nWHERE c1\n[NOT] IN value_list;\n\n-- Query rows between two values\nSELECT c1, c2\nFROM t\nWHERE c1\nBETWEEN low AND high;\n\n-- Check if values in a table is NULL or not\nSELECT c1, c2 FROM t\nWHERE c1 IS [NOT] NULL;
\n

Source

\n"},{"url":"/blog/intro-01-data-structures/","relativePath":"blog/intro-01-data-structures.md","relativeDir":"blog","base":"intro-01-data-structures.md","name":"intro-01-data-structures","frontmatter":{"title":"Intro-01-Data Structures","template":"post","subtitle":"a visual guide","excerpt":"The most basic of all data structures, an array s","date":"2022-04-19T05:30:39.001Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/data-struc2.gif?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/data-struc2.gif?raw=true","image_position":"top","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/ds.yaml"],"tags":["src/data/tags/ds-algo.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/data-structures-algorithms-resources.md"],"cmseditable":true},"html":"\n

1. Array

\n

The most basic of all data structures, an array stores data in memory for later use. Each array has a fixed number of cells decided on its creation, and each cell has a corresponding numeric index used to select its data. Whenever you’d like to use the array, all you need are the desired indices, and you can access any of the data within.

\n

\n

Advantages

\n
    \n
  • Simple to create and use.
    • \n
  • Foundational building block for complex data structures
    • \n
\n

Disadvantages

\n
    \n
  • Fixed size
    • \n
  • Expensive to insert/delete or resequence values
    • \n
  • Inefficient to sort
    • \n
\n

Applications

\n
    \n
  • Basic spreadsheets
    • \n
  • Within complex structures such as hash tables
    • \n
\n


\n\\

\n

2. Queues

\n

Queues are conceptually similar to stacks; both are sequential structures, but queues process elements in the order they were entered rather than the most recent element.

\n

As a result, queues can be thought of as a FIFO (First In, First Out) version of stacks. These are helpful as a buffer for requests, storing each request in the order it was received until it can be processed.

\n

\n

For a visual, consider a single-lane tunnel: the first car to enter is the first car to exit. If other cars should wish to exit, but the first stops, all cars will have to wait for the first to exit before they can proceed.

\n

Advantages

\n
    \n
  • Dynamic size
    • \n
  • Orders data in the order it was received
    • \n
  • Low runtime
    • \n
\n

Disadvantages

\n
    \n
  • Can only retrieve the oldest element
    • \n
\n

Applications

\n
    \n
  • Effective as a buffer when receiving frequent data
    • \n
  • Convenient way to store order-sensitive data such as stored voicemails
    • \n
  • Ensures the oldest data is processed first
    • \n
\n


\n\\

\n

3. Linked List

\n

Linked lists are a data structure which, unlike the previous three, does not use physical placement of data in memory. This means that, rather than indexes or positions, linked lists use a referencing system: elements are stored in nodes that contain a pointer to the next node, repeating until all nodes are linked.

\n

This system allows efficient insertion and removal of items without the need for reorganization.

\n

\n

Advantages

\n
    \n
  • Efficient insertion and removal of new elements
    • \n
  • Less complex than restructuring an array
    • \n
\n

Disadvantages

\n
    \n
  • Uses more memory than arrays
    • \n
  • Inefficient to retrieve a specific element
    • \n
  • Inefficient to traverse the list backward
    • \n
\n

Applications

\n
    \n
  • Best used when data must be added and removed in quick succession from unknown locations
    • \n
\n


\n\\

\n

4. Trees

\n

Trees are another relation-based data structure, which specialize in representing hierarchical structures. Like a linked list, nodes contain both elements of data and pointers marking its relation to immediate nodes.

\n

Each tree has a “root” node, off of which all other nodes branch. The root contains references to all elements directly below it, which are known as its “child nodes”. This continues, with each child node, branching off into more child nodes.

\n

Nodes with linked child nodes are called internal nodes while those without child nodes are external nodes. A common type of tree is the “binary search tree” which is used to easily search stored data.

\n

These search operations are highly efficient, as its search duration is dependent not on the number of nodes but on the number of levels down the tree.

\n

\n

This type of tree is defined by four strict rules:

\n
    \n
  1. The left subtree contains only nodes with elements lesser than the root.
    2. \n
  2. The right subtree contains only nodes with elements greater than the root.
    3. \n
  3. Left and right subtrees must also be a binary search tree. They must follow the above rules with the “root” of their tree.
    4. \n
  4. There can be no duplicate nodes, i.e. no two nodes can have the same value.
    5. \n
\n

Advantages

\n
    \n
  • Ideal for storing hierarchical relationships
    • \n
  • Dynamic size
    • \n
  • Quick at insert and delete operations
    • \n
  • In a binary search tree, inserted nodes are sequenced immediately.
    • \n
  • Binary search trees are efficient at searches; length is only O(height)O(height).
    • \n
\n

Disadvantages

\n
    \n
  • Slow to rearrange nodes
    • \n
  • Child nodes hold no information about their parent node
    • \n
  • Binary search trees are not as fast as the more complicated hash table
    • \n
  • Binary search trees can degenerate into linear search (scanning all elements) if not implemented with balanced subtrees.
    • \n
\n

Applications

\n
    \n
  • Storing hierarchical data such as a file location.
    • \n
  • Binary search trees are excellent for tasks needing searching or ordering of data.
    • \n
\n
\n

*Enjoying the article? Scroll down to* sign up for our free, bi-monthly newsletter.

\n
\n

\\

\n

5. Graphs

\n

Graphs are a relation-based data structure helpful for storing web-like relationships. Each node, or vertex, as they’re called in graphs, has a title (A, B, C, etc.), a value contained within, and a list of links (called edges) it has with other vertices.

\n

\n

In the above example, each circle is a vertex, and each line is an edge. If produced in writing, this structure would look like:

\n

V = {a, b, c, d}

\n

E = {ab, ac, bc, cd}

\n

While hard to visualize at first, this structure is invaluable in conveying relationship charts in textual form, anything from circuitry to train networks.

\n

Advantages

\n
    \n
  • Can quickly convey visuals over text
    • \n
  • Usable to model a diverse number of subjects so long as they contain a relational structure
    • \n
\n

Disadvantages

\n
    \n
  • At a higher level, text can be time-consuming to convert to an image.
    • \n
  • It can be difficult to see the existing edges or how many edges a given vertex has connected to it
    • \n
\n

Applications

\n
    \n
  • Network representations
    • \n
  • Modeling social networks, such as Facebook.
    • \n
\n

\\

\n

6. Hash Tables (Map)

\n

Hash tables are a complex data structure capable of storing large amounts of information and retrieving specific elements efficiently. This data structure relies on the concept of key/value pairs, where the “key” is a searched string and the “value” is the data paired with that key.

\n

Each searched key is converted from its string form into a numerical value, called a hash, using a predefined hash function. This hash then points to a storage bucket – a smaller subgroup within the table. It then searches the bucket for the originally entered key and returns the value associated with that key.

\n

Advantages

\n
    \n
  • Key can be in any form, while array’s indices must be integers
    • \n
  • Highly efficient search function
    • \n
  • Constant number of operations for each search
    • \n
  • Constant cost for insertion or deletion operations
    • \n
\n

Disadvantages

\n
    \n
  • Collisions: an error caused when two keys convert to the same hash code or two hash codes point to the same value.
    • \n
  • These errors can be common and often require an overhaul of the hash function.
    • \n
\n

Applications

\n
    \n
  • Database storage
    • \n
  • Address lookups by name
    • \n
\n

Each hash table can be very different, from the types of the keys and values, to the way their hash functions work. Due to these differences and the multi-layered aspects of a hash table, it is nearly impossible to encapsulate so generally.

\n


\n\\

\n

Data structure interview questions

\n

For many developers and programmers, data structures are most important for cracking Javascript coding interviews. Questions and problems on data structures are fundamental to modern-day coding interviews. In fact, they have a lot to say over your hireability and entry-level rate as a candidate.

\n

Today, we will be going over seven common coding interview questions for JavaScript data structures, one for each of the data structures we discussed above. Each will also discuss its time complexity based on the BigO notation theory.

\n

\\

\n

Array: Remove all even integers from an array

\n

Problem statement: Implement a function removeEven(arr), which takes an array arr in its input and removes all the even elements from a given array.

\n

Input: An array of random integers

\n
\n

Output: an array containing only odd integers

\n
\n

There are two ways you could solve this coding problem in an interview. Let’s discuss each.

\n

\\

\n

Solution #1: Doing it “by hand”

\n

123456789function removeEven(arr) { var odds = [] for (let number of arr) { if (number % 2 != 0) // Check if the item in the list is NOT even ('%' is the modulus symbol!) odds.push(number) //If it isn't even append it to the empty list } return odds // Return the new list}console.log(removeEven([3, 2, 41, 3, 34]))Run

\n

This approach starts with the first element of the array. If that current element is not even, it pushes this element into a new array. If it is even, it will move to the next element, repeating until it reaches the end of the array. In regards to time complexity, since the entire array has to be iterated over, this solution is in O(n)O(n).

\n

\\

\n

Solution #2: Using filter() and lambda function

\n

1234function removeEven(arr) { return arr.filter((v => (v % 2) != 0))}console.log(removeEven([3,2,41,3,34]))

\n

This solution also begins with the first element and checks if it is even. If it is even, it filters out this element. If not, skips to the next element, repeating this process until it reaches the end of the array.

\n

The filter function uses lambda or arrow functions, which use shorter, simpler syntax. The filter filters out the element for which the lambda function returns false. The time complexity of this is the same as the time complexity of the previous solution.

\n

\\

\n

Stack: Check for balanced parentheses using a stack

\n

Problem statement: Implement the isBalanced() function to take a string containing only curly {}, square [], and round () parentheses. The function should tell us if all the parentheses in the string are balanced. This means that every opening parenthesis will have a closing one. For example, {[]} is balanced, but {[}] is not.

\n

Input: A string consisting solely of (, ), {, }, [ and ]

\n
\n

Output: Returns False if the expression doesn’t have balanced parentheses. If it does, the function returns True.

\n
\n

To solve this problem, we can simply use a stack of characters. Look below at the code to see how it works.

\n

index.jsStack.js12345678910111213141516171819202122232425262728293031\"use strict\";module.exports = class Stack { constructor() { this.items = []; this.top = null; } getTop() { if (this.items.length == 0) return null; return this.top; } isEmpty() { return this.items.length == 0; } size() { return this.items.length; } push(element) { this.items.push(element); this.top = element; } pop() { if (this.items.length != 0) { if (this.items.length == 1) { this.top = null; return this.items.pop();Run

\n

This process will iterate over the string one character at a time. We can determine that the string is unbalanced based on two factors:

\n
    \n
  1. The stack is empty.
    2. \n
  2. The top element in the stack is not the right type.
    3. \n
\n

If either of these conditions is true, we return False. If the parenthesis is an opening parenthesis, it is pushed into the stack. If by the end all are balanced, the stack will be empty. If it is not empty, we return False. Since we traverse the string exp only once, the time complexity is O(n).

\n

\\

\n

Queue: Generate Binary Numbers from 1 to n

\n

Problem statement: Implement a function findBin(n), which will generate binary numbers from 1 to n in the form of a string using a queue.

\n

Input: A positive integer n

\n
\n

Output: Returns binary numbers in the form of strings from 1 up to n

\n
\n

The easiest way to solve this problem is using a queue to generate new numbers from previous numbers. Let’s break that down.

\n

index.jsQueue.js12345678910111213141516171819202122232425262728293031\"use strict\";module.exports = class Queue { constructor() { this.items = []; this.front = null; this.back = null; } isEmpty() { return this.items.length == 0; } getFront() { if (this.items.length != 0) { return this.items[0]; } else return null; } size() { return this.items.length; } enqueue(element) { this.items.push(element); }Run

\n

The key is to generate consecutive binary numbers by appending 0 and 1 to previous binary numbers. To clarify,

\n
    \n
  • 10 and 11 can be generated if 0 and 1 are appended to 1.
    • \n
  • 100 and 101 are generated if 0 and 1 are appended to 10.
    • \n
\n

Once we generate a binary number, it is then enqueued to a queue so that new binary numbers can be generated if we append 0 and 1 when that number will be enqueued.

\n

Since a queue follows the First-In First-Out property, the enqueued binary numbers are dequeued so that the resulting array is mathematically correct.

\n

Look at the code above. On line 7, 1 is enqueued. To generate the sequence of binary numbers, a number is dequeued and stored in the array result. On lines 11-12, we append 0 and 1 to produce the next numbers.

\n

Those new numbers are also enqueued at lines 14-15. The queue will take integer values, so it converts the string to an integer as it is enqueued.

\n

The time complexity of this solution is in O(n)O(n) since constant-time operations are executed for n times.

\n

\\

\n

Linked List: Reverse a linked list

\n

Problem statement: Write the reverse function to take a singly linked list and reverse it in place.

\n

Input: a singly linked list

\n
\n

Output: a reverse linked list

\n
\n

The easiest way to solve this problem is by using iterative pointer manipulation. Let’s take a look.

\n

index.jsLinkedList.jsNode.js12345678910111213141516171819202122232425262728293031\"use strict\";const Node = require('./Node.js');module.exports = class LinkedList { constructor() { this.head = null; } //Insertion At Head insertAtHead(newData) { let tempNode = new Node(newData); tempNode.nextElement = this.head; this.head = tempNode; return this; //returning the updated list } isEmpty() { return (this.head == null); } //function to print the linked list printList() { if (this.isEmpty()) { console.log(\"Empty List\"); return false; } else { let temp = this.head; while (temp != null) { process.stdout.write(String(temp.data)); process.stdout.write(\" -> \"); temp = temp.nextElement;Run

\n

We use a loop to iterate through the input list. For a current node, its link with the previous node is reversed. then, next stores the next node in the list. Let’s break that down by line.

\n
    \n
  • Line 22- Store the current node’s nextElement in next
    • \n
  • Line 23 - Set current node’s nextElement to previous
    • \n
  • Line 24 - Make the current node the new previous for the next iteration
    • \n
  • Line 25 - Use next to go to the next node
    • \n
  • Line 29 - We reset the head pointer to point at the last node
    • \n
\n

Since the list is traversed only once, the algorithm runs in O(n).

\n

\\

\n

Tree: Find the Minimum Value in a Binary Search Tree

\n

Problem statement: Use the findMin(root) function to find the minimum value in a Binary Search Tree.

\n

Input: a root node for a binary search tree

\n
\n

Output: the smallest integer value from that binary search tree

\n
\n

Let’s look at an easy solution for this problem.

\n

\\

\n

Solution: Iterative findMin( )

\n

This solution begins by checking if the root is null. It returns null if so. It then moves to the left subtree and continues with each node’s left child until the left-most child is reached.

\n

index.jsBinarySearchTree.jsNode.js12345678910111213141516171819202122232425262728293031\"use strict\";const Node = require('./Node.js');module.exports = class BinarySearchTree { constructor(rootValue) { this.root = new Node(rootValue); } insert(currentNode, newValue) { if (currentNode === null) { currentNode = new Node(newValue); } else if (newValue < currentNode.val) { currentNode.leftChild = this.insert(currentNode.leftChild, newValue); } else { currentNode.rightChild = this.insert(currentNode.rightChild, newValue); } return currentNode; } insertBST(newValue) { if(this.root==null){ this.root=new Node(newValue); return; } this.insert(this.root, newValue); } preOrderPrint(currentNode) { if (currentNode !== null) { console.log(currentNode.val); this.preOrderPrint(currentNode.leftChild);Run\\

\n

Graph: Remove Edge

\n

Problem statement: Implement the removeEdge function to take a source and a destination as arguments. It should detect if an edge exists between them.

\n

Input: A graph, a source, and a destination

\n

\"widget\"\"widget\"

\n

Output: A graph with the edge between the source and the destination removed.

\n
\n

\"widget\"\"widget\"

\n

The solution to this problem is fairly simple: we use Indexing and deletion. Take a look

\n

index.jsGraph.jsLinkedList.jsNode.js12345678910111213141516171819202122232425262728293031\"use strict\";const LinkedList = require('./LinkedList.js');const Node = require('./Node.js');module.exports = class Graph { constructor(vertices) { this.vertices = vertices; this.list = []; var it; for (it = 0; it < vertices; it++) { let temp = new LinkedList(); this.list.push(temp); } } addEdge(source, destination) { if (source < this.vertices && destination < this.vertices) this.list[source].insertAtHead(destination); return this; } printGraph() { console.log(\">>Adjacency List of Directed Graph<<\"); var i; for (i = 0; i < this.list.length; i++) { process.stdout.write(\"|\" + String(i) + \"| => \");Run

\n

Since our vertices are stored in an array, we can access the source linked list. We then call the delete function for linked lists. The time complexity for this solution is O(E) since we may have to traverse E edges.

\n

\\

\n

Hash Table: Convert Max-Heap to Min-Heap

\n

Problem statement: Implement the function convertMax(maxHeap) to convert a binary max-heap into a binary min-heap. maxHeap should be an array in the maxHeap format, i.e the parent is greater than its children.

\n

Input: a Max-Heap

\n
\n

Output: returns the converted array

\n
\n

To solve this problem, we must min heapify all parent nodes. Take a look.

\n

123456789101112131415161718192021222324252627function minHeapify(heap, index) { var left = index * 2; var right = (index * 2) + 1; var smallest = index; if ((heap.length > left) && (heap[smallest] > heap[left])) { smallest = left } if ((heap.length > right) && (heap[smallest] > heap[right])) smallest = right if (smallest != index) { var tmp = heap[smallest] heap[smallest] = heap[index] heap[index] = tmp minHeapify(heap, smallest) } return heap;}function convertMax(maxHeap) { for (var i = Math.floor((maxHeap.length) / 2); i > -1; i--) maxHeap = minHeapify(maxHeap, i) return maxHeap}var maxHeap = [9,4,7,1,-2,6,5]console.log(convertMax(maxHeap))Run

\n

We consider maxHeap to be a regular array and reorder it to accurately represent a min-heap. You can see this done in the code above. The convertMax() function then restores the heap property on all nodes from the lowest parent node by calling the minHeapify() function. In regards to time complexity, this solution takes O(nlog(n))O(nlog(n)) time.

\n"},{"url":"/blog/passing-arguments-to-a-callback-in-js/","relativePath":"blog/passing-arguments-to-a-callback-in-js.md","relativeDir":"blog","base":"passing-arguments-to-a-callback-in-js.md","name":"passing-arguments-to-a-callback-in-js","frontmatter":{"title":"Passing Arguments To A Callback In JS","template":"post","subtitle":"By default you cannot pass arguments to a callback function","excerpt":"By default you cannot pass arguments to a callback function","date":"2022-04-17T08:07:40.104Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/call-stack-first-example.png?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/call-stack-first-example.png?raw=true","image_position":"left","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/js.yaml"],"tags":["src/data/tags/javascript.yaml","src/data/tags/links.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/data-structures-algorithms-resources.md"],"cmseditable":true},"html":"

By default you cannot pass arguments to a callback function. For example:

\n
//\nfunction callback() {\n    console.log('Hi human');\n}\n\ndocument.getElementById('someelem').addEventListener('click', callback);
\n

You can take advantage of the closure scope in Javascript to pass arguments to callback functions. Check this example:

\n
//\nfunction callback(a, b) {\n    return function () {\n        console.log('sum = ', a + b);\n    };\n}\n\nvar x = 1,\n    y = 2;\ndocument.getElementById('someelem').addEventListener('click', callback(x, y));
\n

What are closures?

\n

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created. Check MDN Documentation to learn more.

\n

So this way the arguments x and y are in scope of the callback function when it is called.

\n

Another method to do this is using the bind method. For example:

\n
//\nvar alertText = function (text) {\n    alert(text);\n};\n\ndocument.getElementById('someelem').addEventListener('click', alertText.bind(this, 'hello'));
"},{"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/dtw-slideshow.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/dtw-slideshow.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/dtw-slideshow.gif","relativeUrl":true}]},"template":"post","thumb_image":"images/netlifycms.png"},"html":"

Add to Your Site | Netlify CMS

\n
\n

Open source content management for your Git workflow

\n
\n

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

\n

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

\n

App File Structure

\n

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

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

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

\n

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

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

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

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

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

\n

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

\n

Installing with npm

\n

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

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

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

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

Configuration

\n

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

\n

Backend

\n

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

\n

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

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

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

\n

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

\n

Editorial Workflow

\n

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

\n

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

\n
publish_mode: editorial_workflow
\n

Media and Public Folders

\n

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

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

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

\n

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

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

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

\n

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

\n

Collections

\n

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

\n

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

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

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

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

Let's break that down:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\nname\nPost type identifier, used in routes. Must be unique.
\nlabel\nWhat the admin UI calls the post type.
\nfolder\nWhere files of this type are stored, relative to the repo root.
\ncreate\nSet to true to allow users to create new files in this collection.
\nslug\nTemplate 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}}.
\nfields\nFields 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:
    \n
  • \nlabel: Field label in the editor UI.
    • \n
  • \nname: Field name in the document front matter.
    • \n
  • \nwidget: Determines UI style and value data type (details below).
    • \n
  • \ndefault (optional): Sets a default value for the field.
    • \n
\n
\n

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

\n

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

\n

Filter

\n

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

\n
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

Authentication

\n

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

\n

Setup on Netlify

\n

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

\n

Enable Identity and Git Gateway

\n

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

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

Add the Netlify Identity Widget

\n

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

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

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

\n

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

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

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

\n

Accessing the CMS

\n

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

\n

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

\n

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

\n

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

\n

Happy posting!

\n

Source

"},{"url":"/blog/python-setup-guide/","relativePath":"blog/python-setup-guide.md","relativeDir":"blog","base":"python-setup-guide.md","name":"python-setup-guide","frontmatter":{"title":"Python Setup Guide","template":"post","subtitle":"After installation check whether binary folder was added to environment PATH","excerpt":"After installation check whether binary folder was added to environment PATH","date":"2022-06-14T13:57:31.678Z","image":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWmxaBtO4d1a-OrkqfGVKFoAOVWDKwvb4IQA&usqp=CAU","thumb_image":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWmxaBtO4d1a-OrkqfGVKFoAOVWDKwvb4IQA&usqp=CAU","image_position":"top","author":"src/data/authors/webdevhub.yaml","categories":["src/data/categories/py.yaml"],"tags":["src/data/tags/python.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/data-types.md","src/pages/blog/beginners-guide-to-python.md"],"cmseditable":true},"html":"

Python setup guide

\n
    \n
  1. Download latest python from https://www.python.org/downloads\nAfter installation check whether binary folder was added to environment PATH variable (user's or system)
    2. \n
  2. \n

    To ensure installation went sucessfully run following commands:

    \n

    python --version\npip --version\npython -m ensurepip --default-pip

    \n

    More info is here.

    \n
    3. \n
  3. \n

    Setup Wheel tool:

    \n

    python -m pip install --upgrade pip setuptools wheel

    \n
    4. \n
  4. \n

    Building and deploying packages guide

    \n

    4.1. Clear dist folder content.

    \n

    4.2. Build package. Run\npython setup.py sdist bdist_wheel\ncommand in folder with setup.py file

    \n
    5. \n
  5. \n

    Setup Twin tool for uploading packages to test.pypi

    \n

    python -m pip install --user --upgrade twine

    \n

    NOTE: Twine won't be added automatically to PATH environment variable. You should add it manually\nC:\\Users\\UserName\\AppData\\Roaming\\Python\\Python37\\Scripts

    \n
    6. \n
  6. \n

    Install KeyRing tool

    \n

    pip install --user keyring

    \n
    7. \n
  7. \n

    Create keyring. This command will ask for credentials for the first time.

    \n

    keyring set https://test.pypi.org/legacy/pypi_username

    \n

    or

    \n

    python -m keyring set https://test.pypi.org/legacy/pypi_username

    \n
    8. \n
  8. Create environment variables
    9. \n
\n

Goto System Properties -> Environment variables -> User variables and add

\n
| Variable name  | Value |\n| ------------- | ------------- |\n| TWINE_USERNAME  | *pypi_username*  |\n| TWINE_PASSWORD  | *pypi_password*  |
\n
    \n
  1. Upload package to test\ntwine upload --repository-url https://test.pypi.org/legacy/ -u pypi_username dist/*\nProbably you will need restart PowerShell or run command one more time before it will not ask for password next time
    2. \n
\n

Additional information

\n

There're more options for packages upload:

\n
    \n
  1. twine upload --repository-url https://test.pypi.org/ -u pypi_username -p pypi_password dist/*
    2. \n
  2. twine upload --repository-url https://test.pypi.org/legacy/ dist/*
    3. \n
  3. twine upload --repository-url https://test.pypi.org/legacy/ --username pypi_username --password pypi_password dist/*
    4. \n
  4. twine upload --repository-url https://test.pypi.org/legacy/ --config-file config.pypirc dist/*
    5. \n
\n

Running Unit Tests from separate folder will require to import package or extend system pathes to folder with package sources.\nYou will need to deploy package to repository and install it locally. Alternative solution is to insert absolute path to folder with package

\n

import sys\nsys.path.insert(0, \"/path/to/your/package_or_module\")

\n
    \n
  1. Install package from test repository
    2. \n
\n

pip install --index-url https://test.pypi.org/simple PACKAGE-NAME

\n

Alternative way to force install\npip install --upgrade --force-reinstall PACKAGE-NAME

\n
    \n
  1. Run all unit tests in folder\ncall python -m unittest discover PATH-TO-UNIT-TESTS
    2. \n
"},{"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":"

Beginners Guide To Python

\n

Basic Web Development Environment Setup\nWindows Subsystem for Linux (WSL) and Ubuntulevelup.gitconnected.comPut Python Anywhere on the Web\nPython in the browser. No installation required.trinket.io\n\n

\n

My favorite language for maintainability is Python. It has simple, clean syntax, object encapsulation, good library support, and optional named parameters.

\n
    \n
  • Bram Cohen
    • \n
\n

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.

\n

The Repository & Live Site Behind This Article:

\n

About Python(Taken From Tutorial Page Of Docs):

\n

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:

\n
    \n
  • the high-level data types allow you to express complex operations in a single statement;
    • \n
  • -
    • \n
  • statement grouping is done by indentation instead of beginning and ending brackets;
    • \n
  • no variable or argument declarations are necessary.
    • \n
\n

Installing Python:

\n

Windows

\n

To determine if your Windows computer already has Python 3:

\n
    \n
  1. 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.
    2. \n
  2. Enter the following command and then select the Enter key:
    3. \n
  3. ConsoleCopy
    4. \n
\n

python --version

\n
    \n
  1. Running python --version may not return a value, or may return an error message stating 'python' is not recognized as an internal or external command, operable program or batch file. This indicates Python is not installed on your Windows system.
    2. \n
  2. If you see the word Python with a set of numbers separated by . characters, some version of Python is installed.
    3. \n
\n

i.e.

\n
\n

Python 3.8.0

\n
\n

As long as the first number is 3, you have Python 3 installed.

\n
\n

Download Page:

\n

https://www.python.org/downloads/release/python-395/

\n
\n
\n

Download Link:

\n

https://www.python.org/ftp/python/3.9.5/python-3.9.5-amd64.exe

\n
\n

Install Jupyter Notebooks:

\n

pip

\n

If you use pip, you can install it with:

\n

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.

\n

pipenv

\n

If you use pipenv, you can install it as:

\n

or from a git checkout:

\n

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):

\n

Alternatively, you can run jupyter lab inside the virtualenv with

\n

Jupyter Notebook Viewer

\n

Python Syntax

\n

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.

\n

First Program

\n

Lets create a python 3 repl, and call it Hello World. Now you have a blank file called main.py. Now let us write our first line of code:

\n
\n

Brian Kernighan actually wrote the first \"Hello, World!\" program as part of the documentation for the BCPL programming language developed by Martin Richards.

\n
\n

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.

\n

Command Line

\n

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.

\n

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.

\n

New: Comments!

\n

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 #.

\n

# Write some comments!

\n

If you have a huge comment, do not 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.

\n

New: Variables!

\n

Unlike many other languages, there is no var, let, or const to declare a variable in python. You simply go name = 'value'.

\n

Remember, there is a difference between integers and strings. Remember: String = \"\". 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.

\n

https://repl.it/@bgoonz/second-scr?lite=true&referrer=https%3A%2F%2Fbryanguner.medium.com

\n

Instead of using the , in the print function, you can put a + to combine the variables and string.

\n

Operators

\n

There are many operators in python:

\n
    \n
  • +
    • \n
  • -
    • \n
  • -
    • \n
  • -
    • \n
  • /
    • \n
  • *\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:
    • \n
\n

simpleops.py

\n

You should already know everything shown above, as it is similar to other languages. If you continue down, you will see more complicated ones.

\n

complexop.py

\n

The ones above are to edit the current value of the variable.\nSorry to JS users, as there is no i++; or anything.

\n

Fun Fact:\nThe python language was named after Monty Python.

\n

If you really want to know about the others, view Py Operators

\n

More Things With Strings

\n

Like the title?\nAnyways, a ' and a \" both indicate a string, but do not combine them!

\n

quotes.py

\n

slicing.py

\n

String Slicing

\n

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.

\n

Methods and Functions

\n

Here is a list of functions/methods we will go over:

\n
    \n
  • .strip()
    • \n
  • -
    • \n
  • len()
    • \n
  • -
    • \n
  • .lower()
    • \n
  • -
    • \n
  • .upper()
    • \n
  • .replace()
    • \n
  • .split()
    • \n
\n

New: Input()

\n

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.

\n

inp.py

\n

If you wanted to make it smaller, and look neater to the user, you could do…

\n

inp2.py

\n

Running:\ninp.py

\n

inp2.py

\n

New: Importing Modules

\n

Python has created a lot of functions that are located in other .py files. You need to import these modules 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.

\n

module.py

\n

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:

\n

module2.py

\n
\n

*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 **

\n
\n
\n
\n

New: Loops!

\n

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.

\n

for Loop

\n

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.

\n

loop.py

\n

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:

\n

loop2.py

\n

https://storage.googleapis.com/replit/images/1539649280875_37d22e6d49e8e8fbc453631def345387.pn

\n

while Loop

\n

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:

\n

while.py

\n

Or you could do:

\n

while2.py

\n

New: if Statement

\n

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 only once. An if statement is written:

\n

if.py

\n

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:

\n

elif.py

\n

Now, you may wonder how to run code if none work. Well, there is a simple statement called else:

\n

else.py

\n

New: Functions (def)

\n

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:

\n

Characters: 389

\n

nofunc.py

\n

Now with functions, you can seriously lower the amount of characters:

\n

Characters: 254

\n

functions.py

\n

Project Based Learning:

\n

The following is a modified version of a tutorial posted By: InvisibleOne

\n

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.

\n

1. Adventure Story

\n

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:

\n

Now, we need some variables to hold some of the player data.

\n

Ok, now we have the player's name and nickname, let's welcome them to the game

\n

Now for the story. The most important part of all stories is the introduction, so let's print our introduction

\n

Now, we'll give the player their first choice

\n

There you have it, a pretty simple choose your own ending story. You can make it as complex or uncomplex as you like.

\n

2. TEXT ENCODER

\n

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:

\n

Now we need to split that string into a list of characters, this part is a bit more complicated.

\n

Now we need to convert the characters into code, well do this with a for loop:

\n

Once we've encoded the text, we'll print it back for the user

\n

And if you want to decode something, it is this same process but in reverse!

\n

3. Guess my Number

\n

Number guessing games are fun and pretty simple, all you need are a few loops. To start, we need to import random.

\n

That is pretty simple. Now we'll make a list with the numbers were want available for the game

\n

Next, we get a random number from the list

\n

Now, we need to ask the user for input, we'll to this with a while loop

\n

Have fun with this!

\n

4. Notes

\n

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:

\n

Now we'll open our file and save that text

\n

There we go, now the information is in the file. Next, we'll retrieve it

\n

There we go, that's how you can open files and close files with python

\n

5. Random Dare Generator

\n

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

"},{"url":"/blog/react-fragments/","relativePath":"blog/react-fragments.md","relativeDir":"blog","base":"react-fragments.md","name":"react-fragments","frontmatter":{"title":"React Fragments","template":"post","subtitle":"A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.","excerpt":"A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.","date":"2022-05-28T23:53:29.467Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/react.jpg?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/react.jpg?raw=true","image_position":"right","author":"src/data/authors/bgoonz.yaml","tags":["src/data/tags/react.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/10-essential-react-interview-questions.md","src/pages/blog/deploy-react-app-to-heroku.md","src/pages/blog/react-state.md","src/pages/blog/react-semantics.md","src/pages/blog/passing-arguments-to-a-callback-in-js.md"],"cmseditable":true},"html":"

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

\n
render() {\n  return (\n    <React.Fragment>\n      <ChildA />\n      <ChildB />\n      <ChildC />\n    </React.Fragment>\n  );\n}
\n

There is also a new short syntax for declaring them.

\n

Motivation

\n

A common pattern is for a component to return a list of children. Take this example React snippet:

\n
class Table extends React.Component {\n  render() {\n    return (\n      <table>\n        <tr>\n          <Columns />\n        </tr>\n      </table>\n    );\n  }\n}
\n

<Columns /> would need to return multiple <td> elements in order for the rendered HTML to be valid. If a parent div was used inside the render() of <Columns />, then the resulting HTML will be invalid.

\n
class Columns extends React.Component {\n  render() {\n    return (\n      <div>\n        <td>Hello</td>\n        <td>World</td>\n      </div>\n    );\n  }\n}
\n

results in a <Table /> output of:

\n
<table>\n  <tr>\n    <div>\n      <td>Hello</td>\n      <td>World</td>\n    </div>\n  </tr>\n</table>
\n

Fragments solve this problem.

\n

Usage

\n
class Columns extends React.Component {\n  render() {\n    return (\n      <React.Fragment>        <td>Hello</td>\n        <td>World</td>\n      </React.Fragment>    );\n  }\n}
\n

which results in a correct <Table /> output of:

\n
<table>\n  <tr>\n    <td>Hello</td>\n    <td>World</td>\n  </tr>\n</table>
\n

Short Syntax

\n

There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:

\n
class Columns extends React.Component {\n  render() {\n    return (\n      <>        <td>Hello</td>\n        <td>World</td>\n      </>    );\n  }\n}
\n

You can use <></> the same way you’d use any other element except that it doesn’t support keys or attributes.

\n

Keyed Fragments

\n

Fragments declared with the explicit <React.Fragment> syntax may have keys. A use case for this is mapping a collection to an array of fragments — for example, to create a description list:

\n
function Glossary(props) {\n  return (\n    <dl>\n      {props.items.map(item => (\n        // Without the `key`, React will fire a key warning\n        <React.Fragment key={item.id}>\n          <dt>{item.term}</dt>\n          <dd>{item.description}</dd>\n        </React.Fragment>\n      ))}\n    </dl>\n  );\n}
\n

key is the only attribute that can be passed to Fragment. In the future, we may add support for additional attributes, such as event handlers.

\n"},{"url":"/blog/react-semantics/","relativePath":"blog/react-semantics.md","relativeDir":"blog","base":"react-semantics.md","name":"react-semantics","frontmatter":{"title":"React Semantics","template":"post","subtitle":"Learn React","excerpt":"Below I list the most common terms, and their definitions, used when talking about React.","date":"2022-04-18T20:21:35.309Z","image":"https://deploy-preview-2286--bgoonz-blog.netlify.app/images/react.gif","thumb_image":"https://deploy-preview-2286--bgoonz-blog.netlify.app/images/react.gif","image_position":"top","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/react.yaml","src/data/categories/js.yaml"],"tags":["src/data/tags/react.yaml","src/data/tags/javascript.yaml","src/data/tags/links.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/using-the-dom.md","src/pages/blog/react-semantics.md"],"cmseditable":true},"html":"

2. React Semantics/Terminology

\n
\n

React Semantics

\n

Babel

\n

Babel transforms JavaScript ES* (i.e., JS 2016, 2016, 2017) to ES5. Babel is the tool of choice from the React team for writing future ES* code and transforming JSX to ES5 code.

\n
\n

Babel CLI

\n

Babel comes with a CLI tool, called Babel CLI, that can be used to compile files from the command line.

\n
\n

Component Configuration Options (a.k.a, \"Component Specifications\")

\n

The configuration arguments passed (as an object) to the React.createClass() function resulting in an instance of a React component.

\n
\n

Component Life Cycle Methods

\n

A sub group of component events, semantically separated from the other component configuration options (i.e., componentWillUnmount, componentDidUpdate, componentWillUpdate, shouldComponentUpdate, componentWillReceiveProps, componentDidMount, componentWillMount). These methods are executed at specific points in a component's existence.

\n
\n

Document Object Model (a.k.a., DOM)

\n

\"The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document as a tree. The DOM defines methods that allow access to the tree, so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects, possessing various properties and methods. Nodes can also have event handlers attached to them, and once an event is triggered, the event handlers get executed. Essentially, it connects web pages to scripts or programming languages.\" - MSD

\n
\n

ES5

\n

The 5th edition of the ECMAScript standard. The ECMAScript 5.1 edition was finalized in June 2011.

\n
\n

ES6/ES 2015

\n

The 6th edition of the ECMAScript standard. A.k.a, JavaScript 2015 or ECMAScript 2015. The ECMAScript 6th edition was finalized in June 2015.

\n
\n

ECMAScript 2016 (a.k.a, ES7)

\n

The 7th edition of the ECMAScript standard. The ECMAScript 7th edition was finalized in June 2016.

\n
\n

ES*

\n

Used to represent the current version of JavaScript as well as potential future versions that can written today using tools like Babel. When you see \"ES*\" it more than likely means you'll find uses of ES5, ES6, and ES7 together.

\n
\n

JSX

\n

JSX is an optional XML-like syntax extension to ECMAScript that can be used to define an HTML-like tree structure in a JavaScript file. The JSX expressions in a JavaScript file must be transformed to JavaScript syntax before a JavaScript engine can parse the file. Babel is typically used and recommended for transforming JSX expressions.

\n
\n

Node.js

\n

Node.js is an open-source, cross-platform runtime environment for writing JavaScript. The runtime environment interprets JavaScript using Google's V8 JavaScript engine.

\n
\n

npm

\n

npm is the package manager for JavaScript born from the Node.js community.

\n
\n

React Attributes/Props

\n

In one sense you can think of props as the configuration options for React nodes and in another sense you can think of them as HTML attributes.

\n

Props take on several roles:

\n
    \n
  1. Props can become HTML attributes. If a prop matches a known HTML attribute then it will be added to the final HTML element in the DOM.
    2. \n
  2. Props passed to createElement() become values stored in a prop object as an instance property of React.createElement() instances (i.e., [INSTANCE].props.[NAME OF PROP]). Props by and large are used to input values into components.
    3. \n
  3. A few special props have side effects (e.g., key, ref, and dangerouslySetInnerHTML)
    4. \n
\n
\n

React

\n

React is an open source JavaScript library for writing declarative, efficient, and flexible user interfaces.

\n
\n

React Component

\n

A React component is created by calling React.createClass() (or, React.Component if using ES6 classes). This function takes an object of options that is used to configure and create a React component. The most common configuration option is the render function which returns React nodes. Thus, you can think of a React component as an abstraction containing one or more React nodes/components.

\n
\n

React Element Nodes (a.k.a., ReactElement)

\n

An HTML or custom HTML element node representation in the Virtual DOM created using React.createElement();.

\n
\n

React Nodes

\n

React nodes (i.e., element and text nodes) are the primary object type in React and can be created using React.createElement('div');. In other words React nodes are objects that represent DOM nodes and children DOM nodes. They are a light, stateless, immutable, virtual representation of a DOM node.

\n
\n

React Node Factories

\n

A function that generates a React element node with a particular type property.

\n
\n

React Stateless Function Component

\n

When a component is purely a result of props alone, no state, the component can be written as a pure function avoiding the need to create a React component instance.

\n
var MyComponent = function(props){\n    return <div>Hello {props.name}</div>;\n};\n\nReactDOM.render(<MyComponent name=\"doug\" />, app);
\n
\n

React Text Nodes (a.k.a., ReactText)

\n

A text node representation in the Virtual DOM created using React.createElement('div',null,'a text node');.

\n
\n

Virtual DOM

\n

An in-memory JavaScript tree of React elements/components that is used for efficient re-rendering (i.e., diffing via JavaScript) of the browser DOM.

\n
\n

Webpack

\n

Webpack is a module loader and bundler that takes modules (.js, .css, .txt, etc.) with dependencies and generates static assets representing these modules.

\n

Need to take a few steps back and figure out what is react javascript and how you can use it?

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

Python Study Guide for a JavaScript Programmer\n

\n

\"medium\"medium\"medium\"medium\"medium\"medium\"medium\"medium\"medium\"medium\"medium\"medium[

\n

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

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

Google Drive

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

Internet Archive

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

Lambda Student Site

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

Bass Station CSS Showcase

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

Interview

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

Speach Recognition api

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

The Algos Bgoonz Branch

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

Markdown Templates

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

CURL

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

Text Tools

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

Ternary Converter

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

Github HTML Render from link

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

Form Builder GUI

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

Border Builder

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

Archives

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

Original Blog Site

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
"},{"url":"/docs/","relativePath":"docs/index.md","relativeDir":"docs","base":"index.md","name":"index","frontmatter":{"title":"Docs","seo":{"title":"Web Dev Hub","description":"Application, Back-end, Bootstrap, Browser, Caching, Code, CSS, Content Management System (CMS) , Cookies, Domain Name ,Frameworks, Front-end, JavaScript, Python","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Web Dev Hub","keyName":"property"},{"name":"og:description","value":"Docs Home","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Web Dev Hub"},{"name":"twitter:description","value":"Docs Home"}]},"template":"docs","weight":900,"excerpt":"docs quick reference"},"html":"

Go To SITEMAP -->

\n
\n

Docs

\n

Search Blog

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

Gitpod Docs

\n\n
\n
\n

Doc Websites & Repos

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

Introduction:

\n
    \n
  • What is a Content Management System (CMS)?
    • \n
\n

A content management system, or CMS, is a software program that allows users to create and maintain websites without having to write them from the ground up or even knowing how to code.

\n

A content management system (CMS) allows you to generate, manage, change, and publish material using a user-friendly interface. Rather than coding, you may change the look and functionality of your site by downloading or purchasing templates and plugins. You can have several users collaborating in the same tool's backend, among other things.

\n
    \n
  • Evolution of CMS: The new scaffolding
    • \n
\n

Like all good things, CMS's emerged in their final form after a lot of evolution throughout the years.

\n

In the early 90s, flat HTML files were popular, but around 1993, we got our first visual support. This paved the way for the launch of Internet Explorer browser, which supported CSS. After this, the next step was working towards dynamic content. DOM came about in 1997 and allowed us to identify and manage elements of a document programmatically.

\n

Now fast forward to 2010s, the DXP platform emerged, where we could create and deliver integrated and optimized customer experiences across all digital media, all audiences (while keeping the focus on the customer), and all phases of the user/customer journey.

\n

We have come along with CMSs indeed.

\n

WordPress CMS: The choice of an all-inclusive frontend and backend

\n

WordPress is an open-source platform for building websites. WordPress is a content management system (CMS) developed in PHP that uses a MySQL database.

\n

Any website that uses WordPress as its content management system is referred to as a WordPress website (CMS). Both the backend (the interface where a user signs in to make changes or add new material) and the frontend (the visible part of the website that your visitors see on the web) are powered by WordPress in most cases.

\n

Bear in mind that some WP REST API and AngularJS expertise will be required to build a WordPress-powered frontend application. On the other hand, with WordPress as the backend, you will be able to create any application. With a combination of either of these, you can deviate from the common WordPress theme and admin model. (Keep in mind you will need the help of wireframes forbuilding a WordPress-powered frontend application)

\n

There are a few things you should know if you're just getting started with WordPress. To begin, you must first understand the distinction between WordPress.com and WordPress.org.

\n

If you're unfamiliar with WordPress, the distinction between WordPress.com and WordPress.org might be perplexing.

\n

WordPress.com

\n

i.) WordPress.com is a hosted version of WordPress where you may establish a blog or website by signing up for a WordPress.com account.

\n

ii.) A custom domain, additional storage space, Google Analytics connection, the option to install your plugins and themes, and other features are all available as paid upgrades.

\n

iii.) The word \"WordPress\" will be included in your website's URL or domain by default, such as mysite.wordpress.com.

\n

WordPress.org

\n

i.) The WordPress software may be downloaded from WordPress.org and installed on your server or web hosting account.

\n

ii.) The WordPress software is open-source, which means you may download and use it for free.

\n

iii.) You'll need a domain name and web hosting from another trustworthy business to utilize the WordPress.org version of WordPress.

\n

iv.) If you don't want to install WordPress manually, most web providers offer a WordPress \"fast install\" or \"done-for-you\" installation to assist you in getting started.

\n

Headless CMS: The alternative

\n

Content, images, HTML, and CSS were all thrown into one massive bucket in the conventional CMS style to manage content. Because the material was intertwined with code, it was hard to reuse.

\n

As digital platforms have grown, more adaptable solutions have been necessary. Desktop websites, mobile sites, applications, digital displays, conversational interfaces, and more are now being developed by businesses.

\n

Meanwhile, traditional content management systems (CMS) have fallen behind. Why? Because a CMS organizes material into webpage-oriented frameworks, the same content cannot be adapted to other digital platforms.

\n

Any back-end content management system in which the content repository \"body\" is isolated or disconnected from the presentation layer \"head\" is known as a headless CMS. Content stored in a headless CMS is provided via APIs to ensure that it is shown consistently across devices.

\n

Some conventional CMS solutions have a \"headless API\" that lets you deliver content to a different display layer. Because the presentation layer is isolated from the body, this is referred to as \"headless.\"

\n

Headless CMS: Benefits & Drawbacks

\n

The Advantage of the Headless CMS Architecture

\n
    \n
  • Multi Channel Content Delivery
    • \n
\n

A single content source, such as a product description for an online product, can automatically adapt to its publishing environment and present itself optimally for its destination.

\n
    \n
  • More Secure
    • \n
\n

Because it is distinct from the frontend, headless content provides a far less exposed region of a possible assault.

\n
    \n
  • Faster Editing Experiences
    • \n
\n

In a headless CMS, the separation of code and content makes life easier for content writers and editors, who can ignore the code and focus solely on the material they are responsible for.

\n
    \n
  • Compatibility
    • \n
\n

API-delivered content is easier to integrate, edit, and disseminate, cutting down on time to develop content-driven experiences like websites and applications.

\n
    \n
  • Rapid Content Deployment (via API)
    • \n
\n

Most headless CMS-s use an API-first approach that allows developers to stream in content quickly. You may easily scale or deploy additional channels within a couple of hours.

\n

Find out how to create GraphQL APIs here​.

\n

\"Create[

\n

](https://www.solutelabs.com/blog/hasura-api-development)

\n
    \n
  • Scalability
    • \n
\n

Instead of implementing multiple, parallel content management system instances, e.g., to support web and mobile channels, a single headless CMS instance can serve unlimited digital channels.

\n
    \n
  • Flexibility
    • \n
\n

Developers, meanwhile, can use all the latest tools and frameworks to bring content experiences to life on any modern platform without being locked into a proprietary language or other limitations of a particular content management system.

\n
    \n
  • Modular Content
    • \n
\n

Since the content in your headless CMS isn't tied to any particular front-end display, it becomes modular, allowing it to be handled and delivered across any applicable touchpoint without having to be duplicated or restructured.

\n
    \n
  • Choice of media (Video, Audio)
    • \n
\n

Headless CMS isn't just about textual content anymore. It now integrates other forms of media like audio and video.

\n

The Challenges of Using a Headless CMS

\n
    \n
  • Rigid presentation
    • \n
\n

Your medium is fixed with a second-screen experience; unlike websites, which allow you to customize zones and resize and rearrange dynamic information, a fixed medium (such as a mobile app container or kiosk) is limited to presenting dynamic content in a defined zone. This means you can add and remove information, but you won't be able to change the positioning or presentation much beyond that.

\n
    \n
  • Expensive development
    • \n
\n

Because a headless CMS lacks a frontend, a development team would require hours to create one, which may be costly and time-consuming.

\n
    \n
  • Formatting challenges
    • \n
\n

To adapt to managing various systems, a headless CMS team would need to extend its knowledge substantially.

\n
    \n
  • Content Reorganization
    • \n
\n

Because this architecture does not include notions such as sitemaps and pages, content editors may need to adapt to the unique content structure on the website or other channels.

\n

Use Cases for A Headless CMS

\n

Headless CMS can be ideal for the following use cases:

\n

1. Content-friendly

\n

It makes content generation, administration, and editing easier for big content teams with daily deadlines.

\n

Because headless CMS is essentially an API, the content saved in it is easier to handle and integrate with other systems than information kept in a traditional CMS.

\n

Connecting a headless CMS to any frontend platform is simple, and content teams have more choices with this approach than with traditional CMS's built-in extensions.

\n

2. Serving the same content on different channels

\n

Content providers can distribute their work across any channel. They can also repurpose material across several platforms. It will be simple for developers to add a few lines of code to the API whenever a new channel is introduced to the marketing strategy. For both marketers and engineers, this is a typical win-win situation.

\n

3. Capable of using Javascript frameworks

\n

Frameworks like VueJs, React, and Angular may be used to create SPAs. This will combine a headless CMS on the backend with Single Page Applications on the frontend to provide enhanced capabilities for content creators.

\n

Applications include:

\n

1. Websites & Web Apps

\n

2. Products & Services

\n

3. Ecommerce Sites

\n

WordPress: Benefits & Drawbacks

\n

Advantages of WordPress

\n
    \n
  • Ease of Installation
    • \n
\n

The installation procedure for WordPress is straightforward and quick, making it a pleasure to get started. All you have to do now is create your web pages and upload your database. If you're using FTP, just create a database, upload WordPress, and install it to get going.

\n
    \n
  • Easy Media Management
    • \n
\n

To enrich the content on your WordPress website, you may quickly add images, videos, and other media components. It has a drag-and-drop mechanism that lets you quickly drag and drop media content into the uploader to have it posted. You can also use image editing features if necessary.

\n
    \n
  • Responsive Design
    • \n
\n

Because mobile has become the most effective method of getting traffic for company websites, they must be responsive to attract potential customers via the mobile channel. WordPress has a responsive design that assures that your website is optimized well on various devices without requiring you to put in extra effort to create separate web pages for each one.

\n
    \n
  • Ease of Use
    • \n
\n

The most appealing characteristic of WordPress is its simplicity. Because the program has an intuitive interface, anyone can become a professional while playing around with it. It has an integrated dashboard that allows users to create new pages, articles, or categories, modify themes and settings, and much more. Because the open-source platform is free, it is a cost-effective alternative.

\n
    \n
  • Lots of Theme Options
    • \n
\n

Themes determine a site's appearance and navigation. WordPress offers a variety of theme choices that may be modified to meet specific company needs. Users may download themes based on their needs and experiment to create attractive websites that reflect their company's brand with a similar online presence.

\n
    \n
  • Availability of Plugins
    • \n
\n

This platform's bedrock is made up of plugins. Users may modify the site and add the required features and functions by using plugins. Installing a plugin is all that is needed to add a new feature to the site. Surprisingly, there are many of them, and most of them are either free or reasonably priced.

\n
    \n
  • E-commerce-friendly
    • \n
\n

WooCommerce, a free WordPress eCommerce plugin, allows you to create visually beautiful and feature-rich e-commerce stores. WooCommerce is a sophisticated e-commerce system that integrates easily with WordPress and provides shop owners and developers total flexibility over how to sell their products online.

\n
    \n
  • Minimum Coding Required
    • \n
\n

The necessity for coding is reduced to a minimum with WordPress since the CMS comes with various user-friendly features that allow you to do a lot without putting in a lot of effort. Content management, draft creation, post revision, media insertion, and publication planning may all be done with little to no code.

\n

Challenges of WordPress

\n
    \n
  • Additional Features Require Lots of Plugins
    • \n
\n

When you buy a design template, you usually get entirely created website pages that need to be customized with your branded content.

\n

If your agency wants to add some more features to your website, it will have to look for plugins on WordPress. Some plugins are free, while others cost money. Often the plugins discovered are obsolete and no longer in use.

\n

If you want to embed your Instagram feed on your website, for instance, you'll need to download a plugin called InstaWidget.

\n

The plugins would have to be installed, managed, and updated by your agency. This is tough to handle and seldom happens with agencies.

\n
    \n
  • The Updates Keep Pouring In
    • \n
\n

Remember that things are continuously evolving in the digital era to enrich and enhance the user experience.

\n

Your firm would have to keep checking your website's dashboard to determine whether your theme or plugins needed to be updated regularly. This is something your team may overlook due to other initiatives that need to be examined and updated frequently.

\n

Remember that with all technological improvements, there will be bugs and mistakes. Your site may encounter faulty links or even crash.

\n
    \n
  • Slow-Loading Pages
    • \n
\n

WordPress is still a sluggish platform due to all of the additional plugins, oversaturated databases, and codebases.

\n

However, those aren't the only factors that might cause your website to load slowly. Your website's performance might be affected by large pictures, a lot of text on a page, and unstable hosting.

\n

Your website's page speed is critical. You want a quick-loading website so that your visitors don't get frustrated and leave, which might cost you sales because they won't see what you have to offer.

\n
    \n
  • Poor SEO Ranking
    • \n
\n

WordPress only includes a few SEO tools in its packages, which are insufficient to help you rank in Google.

\n

If you want to get the most out of your SEO efforts, you'll need more powerful tools and technology to compete with other businesses in a crowded market.

\n

Furthermore, you will want a third-party targeting thousands of relevant keywords rather than just a few, which can be a hassle.

\n
    \n
  • Your Website Might Go Down Without Notice
    • \n
\n

Websites might go down for a variety of reasons and without warning.

\n

You might not know your site is unavailable if you aren't paying closely. It might be down for a few hours or perhaps days, causing significant disruption to your company operation.

\n

Then you'll have to pay a company to assist you in getting it back up, which is another expenditure you don't want to incur.

\n
    \n
  • Flimsy Security
    • \n
\n

Your website, like anything else on the internet, is vulnerable to being hacked and spammed.

\n

WordPress is a frequent target for hackers because of its popularity. Even if your firm installs all of WordPress' security plugins, it won't be enough to keep your site safe.

\n

If you have a blog area that enables comments or a contact us form, your website will likely get spammed. And going through the comments and emails might take a long time.

\n

Any website flaw might harm your reputation and even distribute malware to your users.

\n

Use Cases for WordPress

\n

A WP framework is best used for:

\n

1. Blogs

\n

WordPress began as a blogging platform and grew into a comprehensive content management system. Tens of millions of blogs now use WordPress to post and curate content. Large online magazines like TechCrunch and Time use WordPress to power their sites; in some ways, they're classic blogs with many front-end and back-end customization.

\n

2. Entertainment

\n

Many comic-book websites and tv-channel websites like WGN TV are built on WordPress.

\n

3. Educational Institutions

\n

WordPress is a content management system; however, because of the system's flexibility and control, we can construct almost any type of website with it. Take Georgia State University's website, for instance.

\n

4. Communities

\n

WordPress has been used to create several community websites that may be seen online. Fresh Apps is a good example; while it appears to be a standard website, it has about 40,000 registered individuals who contribute to the published apps by making them \"fresh.\" This is only possible if the user is logged in, demonstrating the community component that WordPress can offer to your website.

\n

5. Business

\n

Do you create software, tools, or apps? To build a company website, you'll need a website foundation. You may easily configure your WordPress installation to seem like a professional company website if you have an adequate understanding of how front-end technology works, as seen in the Raven Tools site!

\n

WordPress as a Headless CMS: Decoupled or client-side development

\n

Headless WordPress is a type of web app development that is sometimes referred to as decoupled or client-side development. It uses WordPress for content management and a custom frontend stack to show that content to site visitors. While there are numerous advantages to a site created using headless WordPress, one of the most important is decoupling content editing teams and programmers.

\n

With Headless WordPress, the branding or content team may continue to use their familiar WordPress interface. In contrast, the development team can utilize their favorite tools, such as React and GraphQL, in a familiar Git workflow.

\n

In other words, the app's interface is built & controlled by the client --- usually on a browser --- rather than on the server. The interface is created using material received from WordPress by a JavaScript application running in the browser.

\n

WordPress's head, its PHP-based front-end interface, is circumvented in a somewhat macabre metaphor, leaving the body (the CMS itself) on the server, managed remotely by an external program.

\n

How does it work?

\n

A client-side web app and a server-side CMS need to communicate with each other. That is where APIs come in. When an application asks for information or tells other software what to do, it communicates via an API.

\n

WordPress features a REST API, a web-based API that allows the program to communicate with it using HTTP web addresses called endpoints via the internet. Endpoints resemble the web addresses we use to access websites every day. They allow a variety of requests, including GET requests for retrieving information, POST requests for submitting information, and so on.

\n

WordPress, for instance, offers a \"posts\" endpoint that looks something like this:

\n

https://example.com/wp-json/wp/v2/posts​

\n

When software makes a GET call to a WordPress site's \"posts\" endpoint, it gets a list of posts and related information back.

\n

Possible drawbacks of a Headless WordPress:

\n

1.) There isn't a WYSIWYG editor

\n

You will forfeit your live preview option if you use an utterly headless approach. You won't be able to quickly test what the user would see on the front end.

\n

2.) Programming skills are required

\n

You'd need a front-end coder now if you didn't have one before. To get the most out of a headless system, you'll need some more sophisticated libraries too.

\n

3.) More upkeep is required

\n

This is especially true in a disconnected setup. You may wind up with two systems to manage, especially in terms of security and upgrades.

\n

4.) Credentialing will be more stringent

\n

Users must be credentialed differently in a headless CMS than in a linked CMS. This might be a time-consuming process, but it does result in a more secure workplace.

\n

Use Cases for a WordPress Headless CMS

\n

A WP Headless CMS is best used for

\n

1.) Cross-Platform Publishers

\n

Websites are no longer considered independent platforms. Between social media, applications, and even other websites, there is a network of links, and automation keeps everything operating smoothly. You may now publish anything and have it distributed instantaneously across countless different platforms.

\n

Multi-channel publishing is a time-saving strategy used by large internet enterprises. Here are a few instances of what you might be able to do:

\n
    \n
  • Add items to your website as well as online merchants such as Amazon and eBay.
    • \n
  • Provide material to your partners' websites.
    • \n
  • Send a message to your email subscribers informing them of a new post.
    • \n
  • When you publish recent blog articles or pages, you may immediately share them on social networking.
    • \n
  • Save and organize material in preparation for actual printing.
    • \n
  • Use the Internet of Things to your advantage (smart devices).
    • \n
\n

The REST API, which links your WordPress back end to other apps, allows you to do all of this. An API is just an interface, similar to a controller that you can configure to govern how your server handles data. Now that WordPress is decoupled from its front end, you may use this controller to govern what platforms your site links to and what it does with your data.

\n

For example, if you write a blog post on WordPress, you may set up REST to take that article and publish it on a separate site. It requires some setup, but once it's up and running, everything happens on its own.

\n

2.) App Building

\n

One of the most well-known applications of headless WordPress's cross-platform features is the ability to operate a complete app using simply a website and the REST API. This is an excellent method to feed an application with content, whether a web app or a mobile app.

\n

This is nearly difficult with conventional WordPress. A frontend website is inextricably tied to your back end. This also implies you'll have to use PHP (no mobile apps and no cross-platform frameworks like React).

\n

When you detach it, you may move the content in your back end wherever you want, and it will update immediately on your applications. You are free to use whatever coding language you choose. You're no longer confined to PHP and Javascript. You're ready to go right after you've connected your headless WordPress instance to a mobile app.

\n

Aside from developing an app, there is a slew of other inventive uses for this functionality. You aren't restricted to smartphone apps, for example. There are also web applications. There are different online apps to consider. You could even connect WordPress to your in-store kiosk application to automatically keep its product lists up to date!

\n

Please remember that because Gutenberg is developed using React, you can integrate that into your project.

\n

3.) e-Commerce

\n

Let's take a look at one specific headless option: You may leverage an existing eCommerce platform, such as Shopify, to create a complete flow that handles the whole checkout process, or you can use Shopify's headless option.

\n
    \n
  • Because your design will rely mainly on Shopify's templates and out-of-the-box capabilities in the first scenario, modifying the checkout procedure will be doable but restricted.
    • \n
  • In the latter instance, you may design your checkout flow as you want, and Shopify will only handle the money transaction.
    • \n
\n

The main difference is that with the headless option, you'll have to create every view your user sees. If it seems like a pain with no benefit, a headless solution is probably not for you.

\n

A team that requires the headless version will appreciate the flexibility this gives. Your design will be unrestricted, and you'll have complete control over every pixel of every viewpoint. You'll have full control over all the code running on your users' devices, allowing you to track, optimize, and accelerate almost every interaction.

\n

At the same time, you're still entrusting transaction processing to your headless eCommerce solution, allowing you to make use of their backend system.

\n

You can find some examples of headless e-commerce websites here​

\n

Popular Headless CMS's:

\n

There are many popular headless CMS's in the market right now, like Magnolia, Agility, or even Contentful. But Sanity takes the cake in terms of fame. It is arguably one of the most popular Headless CMS's. Hence, it only fits that we talk about it.

\n

Sanity: A Headless CMS

\n

Sanity Studio is a headless real-time CMS built with JavaScript and React that you may modify.

\n
    \n
  • It has efficient editing and a quick UI for complex fields.
    • \n
  • It works on tiny screens and is responsive.
    • \n
  • Customizable input components and plug-in architecture
    • \n
  • Personalize your look with your images.
    • \n
  • JavaScript could be used to provide field validations, arrange documents, and establish starting values in an advanced block editor for structured content.
    • \n
\n

Reasons to opt for Sanity.

\n
    \n
  • Easy to get started with
    • \n
\n

Sanity.io is easy to get started by simply installing the CLI from npm and creating a new project. Sanity's starter projects, on the other hand, will help you get started in seconds with a pre-configured Sanity Studio and a functioning front-end with a variety of frameworks to pick from, all deployed to Netlify and with source code on GitHub.

\n
    \n
  • Better APIs
    • \n
\n

The main advantage of a headless CMS is its API-first design, which allows you to access content via APIs.

\n

For reading, writing, querying, and patching documents, Sanity provides two robust APIs:

\n
    \n
  • The live, uncached API in api.sanity.io.
    • \n
  • The CDN-distributed, cached API in apicdn.sanity.io.
    • \n
\n

To query your material, Sanity now supports the use of GROQ and GraphQL APIs. The platform's Data Store is hosted in the cloud and may be reached through the Sanity API, either through Sanity's client libraries or directly over the HTTP API.

\n
    \n
  • Better editing tools
    • \n
\n

Sanity's editor, often known as the Sanity Studio, is an open-source program that lets you build content models using basic JavaScript. Sanity Studio is a single-page React.js app that you may edit or expand with your React.js components. Its sophisticated capabilities allow you to change your editors' processes.

\n

Sanity Studio includes fundamental features such as Block Content, Structure Builder, and a Dashboard plugin in addition to customization.

\n
    \n
  • Headless content models that are easy to use
    • \n
\n

Although fundamental JavaScript expertise is required to get started with Sanity, it is not difficult to locate someone knowledgeable with the popular online programming language. Content writers, graphic and interaction designers, and technology specialists may cooperate on the information architecture using Sanity. Front-end developers can save time by using APIs to access content fields immediately.

\n
    \n
  • Mature Tech Stack
    • \n
\n

Because Sanity is a cloud-hosted CMS with a real-time content studio, all data is instantaneously synchronized. PostgreSQL, ElasticSearch, and JavaScript, and lightning-fast React form the foundation of the system. It saves logical object structures rather than HTML, XML, or rich text in the database. For example, you don't have to read HTML if you want Alexa to read from your text fields. Sanity comes with well-maintained JavaScript, HTML, and PHP clients, allowing you to get up and running quickly with your preferred front-end architecture.

\n

Some Cool Projects Powered by Sanity

\n
    \n
  • Agnes
    • \n
\n

A sophisticated rental real estate site developed with Gatsby, Sanity, and Shopify features a headless Shopify shop that gets listing data through API.

\n

Gatsby was an excellent choice for this site, including content from Sanity, Shopify, and their client's real estate rental platform called Entrata.

\n

The Sanity Studio is designed to handle many building and development sites while simultaneously serving as the content management system for the developer's corporate website. Editors can evaluate their modifications in real-time before they are published, thanks to a feature called real-time draft previewing.

\n

Homepage editing environment

\n
    \n
  • Jamstack Explorers
    • \n
\n

Jamstack Explorers is a free learning tool built by the Netlify team to help you navigate the incredible Jamstack ecosystem.

\n

Jamstack Explorers is a platform to learn more about the modern web's evolving benchmarks. Popular frameworks, new tools, APIs, and Netlify's capabilities and workflows are all covered. Phil Hawksworth, Cassidy Williams, Debbie O'Brien, Ekene Eze, and others provide thorough courses on these topics.

\n

The project features a user login feature that allows users to keep track of their progress (and earn certificates!) as they go. It also features a custom dashboard for all Jamstack Explorer users.

\n

\"Youtube\"video\"

\n
    \n
  • Figma
    • \n
\n

Figma is a web-based graphics editing and UI design application. It may be used for various graphic design tasks, including wireframing websites, building mobile app interfaces, prototyping designs, and creating social media posts.

\n

Figma is not like other graphics editing software. It works primarily because it is browser-based. This means you can access your projects and begin designing from any computer or platform without purchasing additional licenses or software. One of the biggest pluses is that it allows designers to collaborate online on the same project in real-time.

\n

Sanity UI was designed to allow users to design directly in the browser using code.

\n

Arcade, an online sandbox where you can mix and match all of the library's elements and see the results in real-time, is the simplest method to play with it.

\n

Sanity also offers a fully-featured Figma library comprising all of the components, icons, font styles, and effects included in the project if you want to prototype your Sanity UI experiences with design tools.

\n
    \n
  • Middlesbrough Town Centre App
    • \n
\n

The app was built using Flutter, Sanity, and Figma to help a small town in the UK called Middlesbrough.

\n

To encourage business, the Visit Middlesbrough app contains information about the town center's stores, restaurants, and cafés. To promote a regulated return to the town center, the app includes crucial travel and safety information.

\n

By showing the quietest periods for footfall, live data can assist vulnerable persons in planning their visits.

\n

The app's shopping area is linked to Google Maps for door-to-door navigation, and users will have the latest updates from the Council at their disposal, receiving up-to-date information directly to their screens.

"},{"url":"/docs/about/eng-portfolio/","relativePath":"docs/about/eng-portfolio.md","relativeDir":"docs/about","base":"eng-portfolio.md","name":"eng-portfolio","frontmatter":{"title":"Engineering Portfolio","weight":0,"seo":{"title":"Engineering Portfolio","description":"This is an Engineering Portfolio page that contains a powerpoint portfolio of my work as an electrical engineer!","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Engineering Portfolio","keyName":"property"},{"name":"og:description","value":"This is the Engineering Portfolio page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Engineering Portfolio"},{"name":"twitter:description","value":"This is the Engineering Portfolio page"}]},"template":"docs"},"html":"

Portfolio

\n\n
\n\n
"},{"url":"/docs/about/","relativePath":"docs/about/index.md","relativeDir":"docs/about","base":"index.md","name":"index","frontmatter":{"title":"About","excerpt":"Web-Dev-Hub is my personal blogand documentation site","seo":{"title":"About","description":"Bryan Guner personal blog about page","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"About","keyName":"property"},{"name":"og:description","value":"This is the About page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"About"},{"name":"twitter:description","value":"This is the About page"}]},"template":"docs"},"html":"
\n

Hi 👋, I'm Bryan

\n \n\n\n

➤ 📧 bryan.guner@gmail.com ☎️ 551-254-5505

\n

\"Profile

\n

\"Gitter\"

\n

\"hackmd-github-sync-badge\"

\n

\"GitHub

\n

💻WEBSITE💻 ⇄ Portfolio ⇄ Recent Work ⇄ MY DOCS📚

\n

📁DOWNLOAD RESUME📁

\n

\"Portfolio\"\"Resume\"Bryan's\"Blog\"\"Linkedin\"\"AngelList\"\"GitHub

\n

A passionate Web Developer, Electrical Engineer, Musician & Producer

\n\n

\n\"bgoonz\"\n\"bgoonz\"\n

\n
\n
\n
\n

\"ReadMe\"ReadMe\"trophy\"\"ReadMe\"Top

\n
\n
\n
\n
\n

\n \n\"email\"/\n\n\n\"facebook\"/\n\n\n\"twitter\"/\n\n\n\"youtube\"/\n\n\n\"instagram\"/\n\n\n\"linkedin\"/\n \n\"medium\"/\n\n\n\"spotify\"/\n\n

\n\n
\n

About Me

\n
    \n
  • 🔭 Contract Web Development Duke Energy
    • \n
  • 🌱 I'm currently learning React/Redux, Python, Java, Express, jQuery
    • \n
  • 👯 I'm looking to collaborate on [Any web audio or open source educational tools.](https://goofy-e
    • \n
  • 🤝 I'm looking for help with [L
    • \n
  • 👨‍💻 All of my projects are available at https://bgoonz.github.io/
    • \n
  • 📝 I regularly write articles on medium && Web-Dev-Resource-Hub
    • \n
  • 💬 Ask me about Anything:
    • \n
  • 📫 How to reach me bryan.guner@gmail.com
    • \n
  • ⚡ Fun fact I played Bamboozle Music Festival at the Meadowlands Stadium Complex when I was 14.
    • \n
\n

i really like music :headphones

\n

What's the most useful business-related book you've ever read?

\n
\n

A Random Walk Down Wall Street

\n
\n

What's your favorite non-business book?

\n
\n

Hitchhiker's Guide To The Galaxy

\n
\n

If money were not an issue, what would you be doing right now?

\n
\n

Designing recording software/hardware and using it

\n
\n

What words of advice would you give your younger self?

\n
\n

Try harder and listen to your parents more (the latter bit of advice would be almost certain to fall on deaf ears lol)

\n
\n

What's the most creative thing you've ever done?

\n
\n

I built a platform that listens to a guitarist's performance and automatically triggers guitar effects at the appropriate time in the song.

\n
\n

Which founders or startups do you most admire?

\n
\n

Is it to basic to say Tesla... I know they're prevalent now but I've been an avid fan since as early as 2012.

\n
\n

What's your super power?

\n
\n

Having really good ideas and forgetting them moments later.

\n
\n

What's the best way for people to get in touch with you?

\n
\n

A text

\n
\n

What aspects of your work are you most passionate about?

\n

Creating things that change my every day life.

\n

What was the most impactful class you took in school?

\n
\n

Modern Physics... almost changed my major after that class... but at the end of the day engineering was a much more fiscally secure avenue.

\n
\n

What's something you wish you had done years earlier?

\n
\n

Learned to code ... and sing

\n
\n

What words of wisdom do you live by?

\n
\n

*Disclaimer: The following wisdom is very cliche ... but... \"Be the change that you wish to see in the world.\"

\n

Mahatma Gandhi

\n
\n
\n

Resume (Old):

\n

➤ Technical Skills

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Programming** Languages:**JavaScript ES-6, NodeJS, React, HTML5, CSS3, SCSS, Bash Shell, Excel, SQL, NoSQL, MATLAB, Python, C++
Databases:PostgreSQL, MongoDB
Cloud:Docker, AWS, Google App Engine, Netlify, Digital Ocean, Heroku, Azure Cloud Services
OS:Linux, Windows (WSL), IOS
Agile:GitHub, BitBucket, Jira, Confluence
IDEs:VSCode, Visual Studio, Atom, Code Blocks, Sublime Text 3, Brackets
\n
\n

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

\n

➤ Experience

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Duke Energy: Hallandale Beach, FLMarch 2020 - Present
Front End Web Developer
\n
    \n
  • Responsible for front-end development for a custom real estate application which provides sophisticated and fully customizable filtering to allow investors and real estate professionals to narrow in on exact search targets.
    • \n
  • Designed mock-up screens, wireframes, and workflows for intuitive user experience.
    • \n
  • Migrated existing multi-page user experience into singular page interfaces using React components.
    • \n
  • Participated in every stage of the design from conception through development and iterative improvement.
    • \n
  • Produced user stories and internal documentation for future site development and maintenance.
    • \n
  • Implemented modern frameworks including Bootstrap and Font-Awesome to give the site an aesthetic overhaul.
    • \n
  • Managed all test deployments using a combination of Digital Ocean and Netlify.
    • \n
  • Produced unit tests using a combination of Mocha and Chai.
    • \n
  • Injected Google Analytics to capture pertinent usage data to produce an insightful dashboard experience.
    • \n
\n\n\n\n\n\n\n\n\n\n
Environment:JavaScript, JQuery, React, HTML5 & CSS, Bootstrap, DOJO, Google Cloud, Bash Script
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Cembre: Edison, NJNov 2019 - Mar 2020
Product Development Engineer
\n
    \n
  • Converted client's product needs into technical specs to be sent to the development team in Italy.
    • \n
  • Reorganized internal file server structure.
    • \n
  • Conducted remote / in person system integration and product demonstrations.
    • \n
  • Presided over internal and end user software trainings in addition to producing the corresponding documentation.
    • \n
  • Served as the primary point of contact for troubleshooting railroad hardware and software in the North America.
    • \n
\n\n\n\n\n\n\n\n\n\n
Environment:Excel, AutoCAD, PowerPoint, Word
\n
\n

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

\n

➤ Education

\n\n\n\n\n\n\n\n\n\n
B.S. Electrical Engineering, TCNJ, Ewing NJ2014 - 2019
\n

Capstone Project - Team Lead

\n
    \n
  • Successfully completed and delivered a platform to digitize a guitar signal and perform filtering before executing frequency & time domain analysis to track a current performance against prerecorded performance.
    • \n
  • Implemented the Dynamic Time Warping algorithm in C++ and Python to autonomously activate or adjust guitar effect at multiple pre-designated section of performance.
    • \n
\n\n\n\n\n\n\n\n\n\n
Environment:C++, Python, MATLAB, PureData
\n\n
\n
\n
\n
\n
\n
\n My Projects\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n

list-of-my-websites

\n

[\"Awesome\"

\n

\"forthebadge\"\"forthebadge\"

\n

\"Website\"Ask\"Gitter\"\"PyPI

\n

\"Maintenance\"\"Open \"Bash

\n

\"React\" \"Redux\"\n\"HTML5\" \"CSS3\" \"Sass\"\"Docker\" \"MySQL\" \"PostgresQL\" \"Git\" \"Ruby\" \"Material-UI\"

"},{"url":"/docs/about/intrests/","relativePath":"docs/about/intrests.md","relativeDir":"docs/about","base":"intrests.md","name":"intrests","frontmatter":{"title":"Youtube","weight":0,"excerpt":"youtube","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"\n
\n\n
\n\n
\n\n
\n\n
\n\n
\n\n
"},{"url":"/docs/showcase/","relativePath":"docs/showcase.md","relativeDir":"docs","base":"showcase.md","name":"showcase","frontmatter":{"title":"Showcase","sections":[{"section_id":"hero","type":"section_hero","title":"Showcase","image":"images/spin-cube.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":"image of","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/mihir.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/-form.png"},{"title":"Potluck Planner","title_url":"https://potluck-landing.netlify.app/","image_alt":"image of","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":"web audio workstation","image_alt":"image of web audio workstation","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/mihir.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":"/blog/what-is-a-redux-reducer/","relativePath":"blog/what-is-a-redux-reducer.md","relativeDir":"blog","base":"what-is-a-redux-reducer.md","name":"what-is-a-redux-reducer","frontmatter":{"title":"What is a Redux Reducer?","template":"post","subtitle":"A reducer is a function that determines changes to an applications state","excerpt":"A reducer is a function that determines changes to an applications state","date":"2022-05-16T06:08:24.979Z","image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/redux.gif?raw=true","thumb_image":"https://raw.githubusercontent.com/bgoonz/BGOONZ_BLOG_2.0/master/static/images/redux.gif?raw=true","image_position":"right","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/react.yaml"],"tags":["src/data/tags/links.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/10-essential-react-interview-questions.md","src/pages/blog/react-semantics.md","src/pages/blog/react-state.md","src/pages/blog/using-the-dom.md"],"cmseditable":true},"html":"

What is a Redux Reducer?

\n

This tutorial will teach you \"how Redux works\", as well as why these patterns exist. Fair warning though - learning the concepts is different from putting them into practice in actual apps.

\n

The initial code will be less concise than the way we suggest writing real app code, but writing it out long-hand is the best way to learn. Once you understand how everything fits together, we'll look at using Redux Toolkit to simplify things. Redux Toolkit is the recommended way to build production apps with Redux, and is built on all of the concepts that we will look at throughout this tutorial. Once you understand the core concepts covered here, you'll understand how to use Redux Toolkit more efficiently.

\n

:::info

\n

If you're looking to learn more about how Redux is used to write real-world applications, please see:

\n\n

:::

\n

We've tried to keep these explanations beginner-friendly, but we do need to make some assumptions about what you know already so that we can focus on explaining Redux itself. This tutorial assumes that you know:

\n

:::important Prerequisites

\n\n

:::

\n

If you're not already comfortable with those topics, we encourage you to take some time to become comfortable with them first, and then come back to learn about Redux. We'll be here when you're ready!

\n

Finally, you should make sure that you have the React and Redux DevTools extensions installed in your browser:

\n\n

What is Redux?

\n

It helps to understand what this \"Redux\" thing is in the first place. What does it do? What problems does it help me solve? Why would I want to use it?

\n

Redux is a pattern and library for managing and updating application state, using events called \"actions\". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

\n

Why Should I Use Redux?

\n

Redux helps you manage \"global\" state - state that is needed across many parts of your application.

\n

The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur. Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected.

\n

When Should I Use Redux?

\n

Redux helps you deal with shared state management, but like any tool, it has tradeoffs. There are more concepts to learn, and more code to write. It also adds some indirection to your code, and asks you to follow certain restrictions. It's a trade-off between short term and long term productivity.

\n

Redux is more useful when:

\n
    \n
  • You have large amounts of application state that are needed in many places in the app
    • \n
  • The app state is updated frequently over time
    • \n
  • The logic to update that state may be complex
    • \n
  • The app has a medium or large-sized codebase, and might be worked on by many people
    • \n
\n

Not all apps need Redux. Take some time to think about the kind of app you're building, and decide what tools would be best to help solve the problems you're working on.

\n

:::info Want to Know More?

\n

If you're not sure whether Redux is a good choice for your app, these resources give some more guidance:

\n\n

:::

\n

Redux Libraries and Tools

\n

Redux is a small standalone JS library. However, it is commonly used with several other packages:

\n

React-Redux

\n

Redux can integrate with any UI framework, and is most frequently used with React. React-Redux is our official package that lets your React components interact with a Redux store by reading pieces of state and dispatching actions to update the store.

\n

Redux Toolkit

\n

Redux Toolkit is our recommended approach for writing Redux logic. It contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

\n

Redux DevTools Extension

\n

The Redux DevTools Extension shows a history of the changes to the state in your Redux store over time. This allows you to debug your applications effectively, including using powerful techniques like \"time-travel debugging\".

\n

Redux Basics

\n

Now that you know what Redux is, let's briefly look at the pieces that make up a Redux app and how it works.

\n

:::info

\n

The rest of the description on this page focuses solely on the Redux core library (the redux package). We'll talk about the other Redux-related packages as we go through the rest of the tutorial.

\n

:::

\n

The Redux Store

\n

The center of every Redux application is the store. A \"store\" is a container that holds your application's global state.

\n

A store is a JavaScript object with a few special functions and abilities that make it different than a plain global object:

\n
    \n
  • You must never directly modify or change the state that is kept inside the Redux store
    • \n
  • Instead, the only way to cause an update to the state is to create a plain action object that describes \"something that happened in the application\", and then dispatch the action to the store to tell it what happened.
    • \n
  • When an action is dispatched, the store runs the root reducer function, and lets it calculate the new state based on the old state and the action
    • \n
  • Finally, the store notifies subscribers that the state has been updated so the UI can be updated with the new data.
    • \n
\n

Redux Core Example App

\n

Let's look at a minimal working example of a Redux app - a small counter application:

\n\n\n
\n

Because Redux is a standalone JS library with no dependencies, this example is written by only loading a single script tag for the Redux library, and uses basic JS and HTML for the UI. In practice, Redux is normally used by installing the Redux packages from NPM, and the UI is created using a library like React.

\n

:::info

\n

Part 5: UI and React shows how to use Redux and React together.

\n

:::

\n

Let's break this example down into its separate parts to see what's happening.

\n

State, Actions, and Reducers

\n

We start by defining an initial state value to describe the application:

\n
//\n// Define an initial state value for the app\nconst initialState = {\n    value: 0\n};
\n

For this app, we're going to track a single number with the current value of our counter.

\n

Redux apps normally have a JS object as the root piece of the state, with other values inside that object.

\n

Then, we define a reducer function. The reducer receives two arguments, the current state and an\naction object describing what happened. When the Redux app starts up, we don't have any state yet,\nso we provide the initialState as the default value for this reducer:

\n
//\n// Create a \"reducer\" function that determines what the new state\n// should be when something happens in the app\nfunction counterReducer(state = initialState, action) {\n    // Reducers usually look at the type of action that happened\n    // to decide how to update the state\n    switch (action.type) {\n        case 'counter/incremented':\n            return { ...state, value: state.value + 1 };\n        case 'counter/decremented':\n            return { ...state, value: state.value - 1 };\n        default:\n            // If the reducer doesn't care about this action type,\n            // return the existing state unchanged\n            return state;\n    }\n}
\n

Action objects always have a type field, which is a string you provide that\nacts as a unique name for the action. The type should be a readable name so that\nanyone who looks at this code understands what it means. In this case, we use the\nword 'counter' as the first half of our action type, and the second half is a\ndescription of \"what happened\". In this case, our 'counter' was 'incremented', so\nwe write the action type as 'counter/incremented'.

\n

Based on the type of the action, we either need to return a brand-new object to\nbe the new state result, or return the existing state object if nothing should change.\nNote that we update the state immutably by copying the existing state and updating the\ncopy, instead of modifying the original object directly.

\n

Store

\n

Now that we have a reducer function, we can create a store instance by\ncalling the Redux library createStore API.

\n
//\n// Create a new Redux store with the `createStore` function,\n// and use the `counterReducer` for the update logic\nconst store = Redux.createStore(counterReducer);
\n

We pass the reducer function to createStore, which uses the reducer function\nto generate the initial state, and to calculate any future updates.

\n

UI

\n

In any application, the user interface will show existing state on screen. When a user\ndoes something, the app will update its data and then redraw the UI with those values.

\n
//\n// Our \"user interface\" is some text in a single HTML element\nconst valueEl = document.getElementById('value');\n\n// Whenever the store state changes, update the UI by\n// reading the latest store state and showing new data\nfunction render() {\n    const state = store.getState();\n    valueEl.innerHTML = state.value.toString();\n}\n\n// Update the UI with the initial data\nrender();\n// And subscribe to redraw whenever the data changes in the future\nstore.subscribe(render);
\n

In this small example, we're only using some basic HTML elements as our UI,\nwith a single <div> showing the current value.

\n

So, we write a function that knows how to get the latest state from the Redux\nstore using the store.getState() method, then takes that value and updates the UI to show it.

\n

The Redux store lets us call store.subscribe() and pass a subscriber callback function that will be called\nevery time the store is updated. So, we can pass our render function as the subscriber, and know that\neach time the store updates, we can update the UI with the latest value.

\n

Redux itself is a standalone library that can be used anywhere. This also means that it can be used with any UI layer.

\n

Dispatching Actions

\n

Finally, we need to respond to user input by creating action objects that\ndescribe what happened, and dispatching them to the store. When we call store.dispatch(action),\nthe store runs the reducer, calculates the updated state, and runs the subscribers\nto update the UI.

\n
//\n// Handle user inputs by \"dispatching\" action objects,\n// which should describe \"what happened\" in the app\ndocument.getElementById('increment').addEventListener('click', function () {\n    store.dispatch({ type: 'counter/incremented' });\n});\n\ndocument.getElementById('decrement').addEventListener('click', function () {\n    store.dispatch({ type: 'counter/decremented' });\n});\n\ndocument.getElementById('incrementIfOdd').addEventListener('click', function () {\n    // We can write logic to decide what to do based on the state\n    if (store.getState().value % 2 !== 0) {\n        store.dispatch({ type: 'counter/incremented' });\n    }\n});\n\ndocument.getElementById('incrementAsync').addEventListener('click', function () {\n    // We can also write async logic that interacts with the store\n    setTimeout(function () {\n        store.dispatch({ type: 'counter/incremented' });\n    }, 1000);\n});
\n

Here, we'll dispatch the actions that will make the reducer add 1 or\nsubtract 1 from the current counter value.

\n

We can also write code that only dispatches an action if a certain\ncondition is true, or write some async code that dispatches an action\nafter a delay.

\n

Data Flow

\n

We can summarize the flow of data through a Redux app with this diagram. It represents how:

\n
    \n
  • actions are dispatched in response to a user interaction like a click
    • \n
  • the store runs the reducer function to calculate a new state
    • \n
  • the UI reads the new state to display the new values
    • \n
\n

(Don't worry if these pieces aren't quite clear yet! Keep this picture in your mind as you go through the rest of this tutorial, and you'll see how the pieces fit together.)

\n

\"Redux

\n

What You've Learned

\n

That counter example was small, but it does show all the working pieces of a real Redux app.\nEverything we'll talk about in the following sections expands on those basic pieces.

\n

With that in mind, let's review what we've learned so far:

\n

:::tip Summary

\n
    \n
  • \n

    Redux is a library for managing global application state

    \n
      \n
    • Redux is typically used with the React-Redux library for integrating Redux and React together
      • \n
    • Redux Toolkit is the recommended way to write Redux logic
      • \n
    \n
    • \n
  • \n

    Redux uses several types of code

    \n
      \n
    • Actions are plain objects with a type field, and describe \"what happened\" in the app
      • \n
    • Reducers are functions that calculate a new state value based on previous state + an action
      • \n
    • A Redux store runs the root reducer whenever an action is dispatched
      • \n
    \n
    • \n
\n

State Management

\n

Let's start by looking at a small React counter component. It tracks a number in component state, and increments the number when a button is clicked:

\n
//x\nfunction Counter() {\n    // State: a counter value\n    const [counter, setCounter] = useState(0);\n\n    // Action: code that causes an update to the state when something happens\n    const increment = () => {\n        setCounter((prevCounter) => prevCounter + 1);\n    };\n\n    // View: the UI definition\n    return (\n        <div>\n            Value: {counter} <button onClick={increment}>Increment</button>\n        </div>\n    );\n}
\n

It is a self-contained app with the following parts:

\n
    \n
  • The state, the source of truth that drives our app;
    • \n
  • The view, a declarative description of the UI based on the current state
    • \n
  • The actions, the events that occur in the app based on user input, and trigger updates in the state
    • \n
\n

This is a small example of \"one-way data flow\":

\n
    \n
  • State describes the condition of the app at a specific point in time
    • \n
  • The UI is rendered based on that state
    • \n
  • When something happens (such as a user clicking a button), the state is updated based on what occurred
    • \n
  • The UI re-renders based on the new state
    • \n
\n

\"One-way

\n

However, the simplicity can break down when we have multiple components that need to share and use the same state, especially if those components are located in different parts of the application. Sometimes this can be solved by \"lifting state up\" to parent components, but that doesn't always help.

\n

One way to solve this is to extract the shared state from the components, and put it into a centralized location outside the component tree. With this, our component tree becomes a big \"view\", and any component can access the state or trigger actions, no matter where they are in the tree!

\n

By defining and separating the concepts involved in state management and enforcing rules that maintain independence between views and states, we give our code more structure and maintainability.

\n

This is the basic idea behind Redux: a single centralized place to contain the global state in your application, and specific patterns to follow when updating that state to make the code predictable.

\n

Immutability

\n

\"Mutable\" means \"changeable\". If something is \"immutable\", it can never be changed.

\n

JavaScript objects and arrays are all mutable by default. If I create an object, I can change the contents of its fields. If I create an array, I can change the contents as well:

\n
//\nconst obj = { a: 1, b: 2 };\n// still the same object outside, but the contents have changed\nobj.b = 3;\n\nconst arr = ['a', 'b'];\n// In the same way, we can change the contents of this array\narr.push('c');\narr[1] = 'd';
\n

This is called mutating the object or array. It's the same object or array reference in memory, but now the contents inside the object have changed.

\n

In order to update values immutably, your code must make copies of existing objects/arrays, and then modify the copies.

\n

We can do this by hand using JavaScript's array / object spread operators, as well as array methods that return new copies of the array instead of mutating the original array:

\n
//\nconst obj = {\n    a: {\n        // To safely update obj.a.c, we have to copy each piece\n        c: 3\n    },\n    b: 2\n};\n\nconst obj2 = {\n    // copy obj\n    ...obj,\n    // overwrite a\n    a: {\n        // copy obj.a\n        ...obj.a,\n        // overwrite c\n        c: 42\n    }\n};\n\nconst arr = ['a', 'b'];\n// Create a new copy of arr, with \"c\" appended to the end\nconst arr2 = arr.concat('c');\n\n// or, we can make a copy of the original array:\nconst arr3 = arr.slice();\n// and mutate the copy:\narr3.push('c');
\n

Redux expects that all state updates are done immutably. We'll look at where and how this is important a bit later, as well as some easier ways to write immutable update logic.

\n

:::info Want to Know More?

\n

For more info on how immutability works in JavaScript, see:

\n\n

:::

\n

Redux Terminology

\n

There's some important Redux terms that you'll need to be familiar with before we continue:

\n

Actions

\n

An action is a plain JavaScript object that has a type field. You can think of an action as an event that describes something that happened in the application.

\n

The type field should be a string that gives this action a descriptive name, like \"todos/todoAdded\". We usually write that type string like \"domain/eventName\", where the first part is the feature or category that this action belongs to, and the second part is the specific thing that happened.

\n

An action object can have other fields with additional information about what happened. By convention, we put that information in a field called payload.

\n

A typical action object might look like this:

\n
//\nconst addTodoAction = {\n    type: 'todos/todoAdded',\n    payload: 'Buy milk'\n};
\n

Reducers

\n

A reducer is a function that receives the current state and an action object, decides how to update the state if necessary, and returns the new state: (state, action) => newState. You can think of a reducer as an event listener which handles events based on the received action (event) type.

\n

:::info

\n

\"Reducer\" functions get their name because they're similar to the kind of callback function you pass to the Array.reduce() method.

\n

:::

\n

Reducers must always follow some specific rules:

\n
    \n
  • They should only calculate the new state value based on the state and action arguments
    • \n
  • They are not allowed to modify the existing state. Instead, they must make immutable updates, by copying the existing state and making changes to the copied values.
    • \n
  • They must not do any asynchronous logic, calculate random values, or cause other \"side effects\"
    • \n
\n

We'll talk more about the rules of reducers later, including why they're important and how to follow them correctly.

\n

The logic inside reducer functions typically follows the same series of steps:

\n
    \n
  • \n

    Check to see if the reducer cares about this action

    \n
      \n
    • If so, make a copy of the state, update the copy with new values, and return it
      • \n
    \n
    • \n
  • Otherwise, return the existing state unchanged
    • \n
\n

Here's a small example of a reducer, showing the steps that each reducer should follow:

\n
//\nconst initialState = { value: 0 };\n\nfunction counterReducer(state = initialState, action) {\n    // Check to see if the reducer cares about this action\n    if (action.type === 'counter/incremented') {\n        // If so, make a copy of `state`\n        return {\n            ...state,\n            // and update the copy with the new value\n            value: state.value + 1\n        };\n    }\n    // otherwise return the existing state unchanged\n    return state;\n}
\n

Reducers can use any kind of logic inside to decide what the new state should be: if/else, switch, loops, and so on.

\n\n

The Array.reduce() method lets you take an array of values, process each item in the array one at a time, and return a single final result. You can think of it as \"reducing the array down to one value\".

\n

Array.reduce() takes a callback function as an argument, which will be called one time for each item in the array. It takes two arguments:

\n
    \n
  • previousResult, the value that your callback returned last time
    • \n
  • currentItem, the current item in the array
    • \n
\n

The first time that the callback runs, there isn't a previousResult available, so we need to also pass in an initial value that will be used as the first previousResult.

\n

If we wanted to add together an array of numbers to find out what the total is, we could write a reduce callback that looks like this:

\n
//\nconst numbers = [2, 5, 8];\n\nconst addNumbers = (previousResult, currentItem) => {\n    console.log({ previousResult, currentItem });\n    return previousResult + currentItem;\n};\n\nconst initialValue = 0;\n\nconst total = numbers.reduce(addNumbers, initialValue);\n// {previousResult: 0, currentItem: 2}\n// {previousResult: 2, currentItem: 5}\n// {previousResult: 7, currentItem: 8}\n\nconsole.log(total);\n// 15
\n

Notice that this addNumbers \"reduce callback\" function doesn't need to keep track of anything itself. It takes the previousResult and currentItem arguments, does something with them, and returns a new result value.

\n

A Redux reducer function is exactly the same idea as this \"reduce callback\" function! It takes a \"previous result\" (the state), and the \"current item\" (the action object), decides a new state value based on those arguments, and returns that new state.

\n

If we were to create an array of Redux actions, call reduce(), and pass in a reducer function, we'd get a final result the same way:

\n
//\nconst actions = [{ type: 'counter/incremented' }, { type: 'counter/incremented' }, { type: 'counter/incremented' }];\n\nconst initialState = { value: 0 };\n\nconst finalResult = actions.reduce(counterReducer, initialState);\nconsole.log(finalResult);\n// {value: 3}
\n

We can say that Redux reducers reduce a set of actions (over time) into a single state. The difference is that with Array.reduce() it happens all at once, and with Redux, it happens over the lifetime of your running app.

\n\n

Store

\n

The current Redux application state lives in an object called the store .

\n

The store is created by passing in a reducer, and has a method called getState that returns the current state value:

\n
//\nimport { configureStore } from '@reduxjs/toolkit';\n\nconst store = configureStore({ reducer: counterReducer });\n\nconsole.log(store.getState());\n// {value: 0}
\n

Dispatch

\n

The Redux store has a method called dispatch. The only way to update the state is to call store.dispatch() and pass in an action object. The store will run its reducer function and save the new state value inside, and we can call getState() to retrieve the updated value:

\n
//\nstore.dispatch({ type: 'counter/incremented' });\n\nconsole.log(store.getState());\n// {value: 1}
\n

You can think of dispatching actions as \"triggering an event\" in the application. Something happened, and we want the store to know about it. Reducers act like event listeners, and when they hear an action they are interested in, they update the state in response.

\n

Selectors

\n

Selectors are functions that know how to extract specific pieces of information from a store state value. As an application grows bigger, this can help avoid repeating logic as different parts of the app need to read the same data:

\n
//\nconst selectCounterValue = (state) => state.value;\n\nconst currentValue = selectCounterValue(store.getState());\nconsole.log(currentValue);\n// 2
\n

Core Concepts and Principles

\n

Overall, we can summarize the intent behind Redux's design in three core concepts:

\n

Single Source of Truth

\n

The global state of your application is stored as an object inside a single store. Any given piece of data should only exist in one location, rather than being duplicated in many places.

\n

This makes it easier to debug and inspect your app's state as things change, as well as centralizing logic that needs to interact with the entire application.

\n

:::tip

\n

This does not mean that every piece of state in your app must go into the Redux store! You should decide whether a piece of state belongs in Redux or your UI components, based on where it's needed.

\n

:::

\n

State is Read-Only

\n

The only way to change the state is to dispatch an action, an object that describes what happened.

\n

This way, the UI won't accidentally overwrite data, and it's easier to trace why a state update happened. Since actions are plain JS objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.

\n

Changes are Made with Pure Reducer Functions

\n

To specify how the state tree is updated based on actions, you write reducer functions. Reducers are pure functions that take the previous state and an action, and return the next state. Like any other functions, you can split reducers into smaller functions to help do the work, or write reusable reducers for common tasks.

\n

Redux Application Data Flow

\n

Earlier, we talked about \"one-way data flow\", which describes this sequence of steps to update the app:

\n
    \n
  • State describes the condition of the app at a specific point in time
    • \n
  • The UI is rendered based on that state
    • \n
  • When something happens (such as a user clicking a button), the state is updated based on what occurred
    • \n
  • The UI re-renders based on the new state
    • \n
\n

For Redux specifically, we can break these steps into more detail:

\n
    \n
  • \n

    Initial setup:

    \n
      \n
    • A Redux store is created using a root reducer function
      • \n
    • The store calls the root reducer once, and saves the return value as its initial state
      • \n
    • When the UI is first rendered, UI components access the current state of the Redux store, and use that data to decide what to render. They also subscribe to any future store updates so they can know if the state has changed.
      • \n
    \n
    • \n
  • \n

    Updates:

    \n
      \n
    • Something happens in the app, such as a user clicking a button
      • \n
    • The app code dispatches an action to the Redux store, like dispatch({type: 'counter/incremented'})
      • \n
    • The store runs the reducer function again with the previous state and the current action, and saves the return value as the new state
      • \n
    • The store notifies all parts of the UI that are subscribed that the store has been updated
      • \n
    • Each UI component that needs data from the store checks to see if the parts of the state they need have changed.
      • \n
    • Each component that sees its data has changed forces a re-render with the new data, so it can update what's shown on the screen
      • \n
    \n
    • \n
\n

Here's what that data flow looks like visually:

\n

\"Redux

\n

What You've Learned

\n

:::tip Summary

\n
    \n
  • \n

    Redux's intent can be summarized in three principles

    \n
      \n
    • Global app state is kept in a single store
      • \n
    • The store state is read-only to the rest of the app
      • \n
    • Reducer functions are used to update the state in response to actions
      • \n
    \n
    • \n
  • \n

    Redux uses a \"one-way data flow\" app structure

    \n
      \n
    • State describes the condition of the app at a point in time, and UI renders based on that state
      • \n
    • \n

      When something happens in the app:

      \n
        \n
      • The UI dispatches an action
        • \n
      • The store runs the reducers, and the state is updated based on what occurred
        • \n
      • The store notifies the UI that the state has changed
        • \n
      \n
      • \n
    • The UI re-renders based on the new state
      • \n
    \n
    • \n
\n

Project Setup

\n

For this tutorial, we've created a pre-configured starter project that already has React set up, includes some default styling, and has a fake REST API that will allow us to write actual API requests in our app. You'll use this as the basis for writing the actual application code.

\n

To get started, you can open and fork this CodeSandbox:

\n\n\n
\n

You can also clone the same project from this Github repo. After cloning the repo, you can install the tools for the project with npm install, and start it with npm start.

\n

If you'd like to see the final version of what we're going to build, you can check out the tutorial-steps branch, or look at the final version in this CodeSandbox.

\n

Creating a New Redux + React Project

\n

Once you've finished this tutorial, you'll probably want to try working on your own projects. We recommend using the Redux templates for Create-React-App as the fastest way to create a new Redux + React project. It comes with Redux Toolkit and React-Redux already configured, using a modernized version of the \"counter\" app example you saw in Part 1. This lets you jump right into writing your actual application code without having to add the Redux packages and set up the store.

\n

If you want to know specific details on how to add Redux to a project, see this explanation:

\n\n

The Redux template for CRA comes with Redux Toolkit and React-Redux already configured. If you're setting up a new project from scratch without that template, follow these steps:

\n
    \n
  • Add the @reduxjs/toolkit and react-redux packages
    • \n
  • Create a Redux store using RTK's configureStore API, and pass in at least one reducer function
    • \n
  • Import the Redux store into your application's entry point file (such as src/index.js)
    • \n
  • Wrap your root React component with the <Provider> component from React-Redux, like:
    • \n
\n
//x\nReactDOM.render(\n    <Provider store={store}>\n        <App />\n    </Provider>,\n    document.getElementById('root')\n);
\n\n

Exploring the Initial Project

\n

This initial project is based on the standard Create-React-App project template, with some modifications.

\n

Let's take a quick look at what the initial project contains:

\n
    \n
  • \n

    /src

    \n
      \n
    • index.js: the entry point file for the application. It renders the main <App> component.
      • \n
    • App.js: the main application component.
      • \n
    • index.css: styles for the complete application
      • \n
    • \n

      /api

      \n
        \n
      • client.js: a small AJAX request client that allows us to make GET and POST requests
        • \n
      • server.js: provides a fake REST API for our data. Our app will fetch data from these fake endpoints later.
        • \n
      \n
      • \n
    • /exampleAddons: contains some additional Redux addons that we'll use later in the tutorial to show how things work
      • \n
    \n
    • \n
\n

If you load the app now, you should see a welcome message, but the rest of the app is otherwise empty.

\n

With that, let's get started!

\n

Starting the Todo Example App

\n

Our example application will be a small \"todo\" application. You've probably seen todo app examples before - they make\ngood examples because they let us show how to do things like tracking a list of items, handling user input, and updating\nthe UI when that data changes, which are all things that happen in a normal application.

\n

Defining Requirements

\n

Let's start by figuring out the initial business requirements for this application:

\n
    \n
  • \n

    The UI should consist of three main sections:

    \n
      \n
    • An input box to let the user type in the text of a new todo item
      • \n
    • A list of all the existing todo items
      • \n
    • A footer section that shows the number of non-completed todos, and shows filtering options
      • \n
    \n
    • \n
  • Todo list items should have a checkbox that toggles their \"completed\" status. We should also be able to add a color-coded\ncategory tag for a predefined list of colors, and delete todo items.
    • \n
  • The counter should pluralize the number of active todos: \"0 items\", \"1 item\", \"3 items\", etc
    • \n
  • There should be buttons to mark all todos as completed, and to clear all completed todos by removing them
    • \n
  • \n

    There should be two ways to filter the displayed todos in the list:

    \n
      \n
    • Filtering based on showing \"All\", \"Active\", and \"Completed\" todos
      • \n
    • Filtering based on selecting one or more colors, and showing any todos whose tag that match those colors
      • \n
    \n
    • \n
\n

We'll add some more requirements later on, but this is enough to get us started.

\n

The end goal is an app that should look like this:

\n

\"Example

\n

Designing the State Values

\n

One of the core principles of React and Redux is that your UI should be based on your state. So, one approach to designing an application is to first think of all the state needed to describe how the application works. It's also a good idea\nto try to describe your UI with as few values in the state as possible, so there's less data you need to keep track of\nand update.

\n

Conceptually, there are two main aspects of this application:

\n
    \n
  • The actual list of current todo items
    • \n
  • The current filtering options
    • \n
\n

We'll also need to keep track of the data the user is typing into the \"Add Todo\" input box, but that's less important\nand we'll handle that later.

\n

For each todo item, we need to store a few pieces of information:

\n
    \n
  • The text the user entered
    • \n
  • The boolean flag saying if it's completed or not
    • \n
  • A unique ID value
    • \n
  • A color category, if selected
    • \n
\n

Our filtering behavior can probably be described with some enumerated values:

\n
    \n
  • Completed status: \"All\", \"Active\", and \"Completed\"
    • \n
  • Colors: \"Red\", \"Yellow\", \"Green\", \"Blue\", \"Orange\", \"Purple\"
    • \n
\n

Looking at these values, we can also say that the todos are \"app state\" (the core data that the application works with),\nwhile the filtering values are \"UI state\" (state that describes what the app is doing right now). It can be helpful to\nthink about these different kinds of categories to help understand how the different pieces of state are being used.

\n

Designing the State Structure

\n

With Redux, our application state is always kept in plain JavaScript objects and arrays. That means you may not put\nother things into the Redux state - no class instances, built-in JS types like Map / Set Promise / Date, functions, or anything else that is not plain JS data.

\n

The root Redux state value is almost always a plain JS object, with other data nested inside of it.

\n

Based on this information, we should now be able to describe the kinds of values we need to have inside our Redux state:

\n
    \n
  • \n

    First, we need an array of todo item objects. Each item should have these fields:

    \n
      \n
    • id: a unique number
      • \n
    • text: the text the user typed in
      • \n
    • completed: a boolean flag
      • \n
    • color: An optional color category
      • \n
    \n
    • \n
  • \n

    Then, we need to describe our filtering options. We need to have:

    \n
      \n
    • The current \"completed\" filter value
      • \n
    • An array of the currently selected color categories
      • \n
    \n
    • \n
\n

So, here's what an example of our app's state might look like:

\n
//\nconst todoAppState = {\n    todos: [\n        { id: 0, text: 'Learn React', completed: true },\n        { id: 1, text: 'Learn Redux', completed: false, color: 'purple' },\n        { id: 2, text: 'Build something fun!', completed: false, color: 'blue' }\n    ],\n    filters: {\n        status: 'Active',\n        colors: ['red', 'blue']\n    }\n};
\n

It's important to note that it's okay to have other state values outside of Redux!. This example is small enough so far that we actually do have all our state in the Redux store, but as we'll see later, some data really doesn't need to be kept in Redux (like \"is this dropdown open?\" or \"current value of a form input\").

\n

Designing Actions

\n

Actions are plain JavaScript objects that have a type field. As mentioned earlier, you can think of an action as an event that describes something that happened in the application.

\n

In the same way that we designed the state structure based on the app's requirements, we should also be able to\ncome up with a list of some of the actions that describe what's happening:

\n
    \n
  • Add a new todo entry based on the text the user entered
    • \n
  • Toggle the completed status of a todo
    • \n
  • Select a color category for a todo
    • \n
  • Delete a todo
    • \n
  • Mark all todos as completed
    • \n
  • Clear all completed todos
    • \n
  • Choose a different \"completed\" filter value
    • \n
  • Add a new color filter
    • \n
  • Remove a color filter
    • \n
\n

We normally put any extra data needed to describe what's happening into the action.payload field. This could be a\nnumber, a string, or an object with multiple fields inside.

\n

The Redux store doesn't care what the actual text of the action.type field is. However, your own code will look\nat action.type to see if an update is needed. Also, you will frequently look at action type strings in the Redux\nDevTools Extension while debugging to see what's going on in your app. So, try to choose action types that are\nreadable and clearly describe what's happening - it'll be much easier to understand things when you look at them later!

\n

Based on that list of things that can happen, we can create a list of actions that our application will use:

\n
    \n
  • {type: 'todos/todoAdded', payload: todoText}
    • \n
  • {type: 'todos/todoToggled', payload: todoId}
    • \n
  • {type: 'todos/colorSelected, payload: {todoId, color}}
    • \n
  • {type: 'todos/todoDeleted', payload: todoId}
    • \n
  • {type: 'todos/allCompleted'}
    • \n
  • {type: 'todos/completedCleared'}
    • \n
  • {type: 'filters/statusFilterChanged', payload: filterValue}
    • \n
  • {type: 'filters/colorFilterChanged', payload: {color, changeType}}
    • \n
\n

In this case, the actions primarily have a single extra piece of data, so we can put that directly in the action.payload field. We could have split the color filter behavior into two actions, one for \"added\" and one for \"removed\", but in this case\nwe'll do it as one action with an extra field inside specifically to show that we can have objects as an action payload.

\n

Like the state data, actions should contain the smallest amount of information needed to describe what happened.

\n

Writing Reducers

\n

Now that we know what our state structure and our actions look like, it's time to write our first reducer.

\n

Reducers are functions that take the current state and an action as arguments, and return a new state result. In other words, (state, action) => newState.

\n

Creating the Root Reducer

\n

A Redux app really only has one reducer function: the \"root reducer\" function that you will pass to createStore later on. That one root reducer function is responsible for handling all of the actions that are dispatched, and calculating what the entire new state result should be every time.

\n

Let's start by creating a reducer.js file in the src folder, alongside index.js and App.js.

\n

Every reducer needs some initial state, so we'll add some fake todo entries to get us started. Then, we can write an outline for the logic inside the reducer function:

\n
// title=\"src/reducer.js\"\nconst initialState = {\n    todos: [\n        { id: 0, text: 'Learn React', completed: true },\n        { id: 1, text: 'Learn Redux', completed: false, color: 'purple' },\n        { id: 2, text: 'Build something fun!', completed: false, color: 'blue' }\n    ],\n    filters: {\n        status: 'All',\n        colors: []\n    }\n};\n\n// Use the initialState as a default value\nexport default function appReducer(state = initialState, action) {\n    // The reducer normally looks at the action type field to decide what happens\n    switch (action.type) {\n        // Do something here based on the different types of actions\n        default:\n            // If this reducer doesn't recognize the action type, or doesn't\n            // care about this specific action, return the existing state unchanged\n            return state;\n    }\n}
\n

A reducer may be called with undefined as the state value when the application is being initialized. If that happens, we need to provide an initial state value so the rest of the reducer code has something to work with. Reducers normally use ES6 default argument syntax to provide initial state: (state = initialState, action).

\n

Next, let's add the logic to handle the 'todos/todoAdded' action.

\n

We first need to check if the current action's type matches that specific string.\nThen, we need to return a new object containing all of the state, even for the fields\nthat didn't change.

\n
// title=\"src/reducer.js\"\nfunction nextTodoId(todos) {\n    const maxId = todos.reduce((maxId, todo) => Math.max(todo.id, maxId), -1);\n    return maxId + 1;\n}\n\n// Use the initialState as a default value\nexport default function appReducer(state = initialState, action) {\n    // The reducer normally looks at the action type field to decide what happens\n    switch (action.type) {\n        // Do something here based on the different types of actions\n        case 'todos/todoAdded': {            // We need to return a new state object            return {                // that has all the existing state data                ...state,                // but has a new array for the `todos` field                todos: [                    // with all of the old todos                    ...state.todos,                    // and the new todo object                    {                        // Use an auto-incrementing numeric ID for this example                        id: nextTodoId(state.todos),                        text: action.payload,                        completed: false                    }                ]            };        }        default:\n            // If this reducer doesn't recognize the action type, or doesn't\n            // care about this specific action, return the existing state unchanged\n            return state;\n    }\n}
\n

That's... an awful lot of work to add one todo item to the state. Why is all this extra work necessary?

\n

Rules of Reducers

\n

We said earlier that reducers must always follow some special rules:

\n
    \n
  • They should only calculate the new state value based on the state and action arguments
    • \n
  • They are not allowed to modify the existing state. Instead, they must make immutable updates, by copying the existing state and making changes to the copied values.
    • \n
  • They must not do any asynchronous logic or other \"side effects\"
    • \n
\n

:::tip

\n

A \"side effect\" is any change to state or behavior that can be seen outside of returning a value from a function. Some common kinds of side effects are things like:

\n
    \n
  • Logging a value to the console
    • \n
  • Saving a file
    • \n
  • Setting an async timer
    • \n
  • Making an AJAX HTTP request
    • \n
  • Modifying some state that exists outside of a function, or mutating arguments to a function
    • \n
  • Generating random numbers or unique random IDs (such as Math.random() or Date.now())
    • \n
\n

:::

\n

Any function that follows these rules is also known as a \"pure\" function, even if it's not specifically written as a reducer function.

\n

But why are these rules important? There's a few different reasons:

\n
    \n
  • One of the goals of Redux is to make your code predictable. When a function's output is only calculated from the input arguments, it's easier to understand how that code works, and to test it.
    • \n
  • On the other hand, if a function depends on variables outside itself, or behaves randomly, you never know what will happen when you run it.
    • \n
  • If a function modifies other values, including its arguments, that can change the way the application works unexpectedly. This can be a common source of bugs, such as \"I updated my state, but now my UI isn't updating when it should!\"
    • \n
  • Some of the Redux DevTools capabilities depend on having your reducers follow these rules correctly
    • \n
\n

The rule about \"immutable updates\" is particularly important, and worth talking about further.

\n

Reducers and Immutable Updates

\n

Earlier, we talked about \"mutation\" (modifying existing object/array values) and \"immutability\" (treating values as something that cannot be changed).

\n

:::warning

\n

In Redux, our reducers are never allowed to mutate the original / current state values!

\n
//\n// ❌ Illegal - by default, this will mutate the state!\nstate.value = 123;
\n

:::

\n

There are several reasons why you must not mutate state in Redux:

\n
    \n
  • It causes bugs, such as the UI not updating properly to show the latest values
    • \n
  • It makes it harder to understand why and how the state has been updated
    • \n
  • It makes it harder to write tests
    • \n
  • It breaks the ability to use \"time-travel debugging\" correctly
    • \n
  • It goes against the intended spirit and usage patterns for Redux
    • \n
\n

So if we can't change the originals, how do we return an updated state?

\n

:::tip

\n

Reducers can only make copies of the original values, and then they can mutate the copies.

\n
//\n// ✅ This is safe, because we made a copy\nreturn {\n    ...state,\n    value: 123\n};
\n

:::

\n

We already saw that we can write immutable updates by hand, by using JavaScript's array / object spread operators and other functions that return copies of the original values.

\n

This becomes harder when the data is nested. A critical rule of immutable updates is that you must make a copy of every level of nesting that needs to be updated.

\n

However, if you're thinking that \"writing immutable updates by hand this way looks hard to remember and do correctly\"... yeah, you're right! :)

\n

Writing immutable update logic by hand is hard, and accidentally mutating state in reducers is the single most common mistake Redux users make.

\n

:::tip

\n

In real-world applications, you won't have to write these complex nested immutable updates by hand. In Part 8: Modern Redux with Redux Toolkit, you'll\nlearn how to use Redux Toolkit to simplify writing immutable update logic in reducers.

\n

:::

\n

Handling Additional Actions

\n

With that in mind, let's add the reducer logic for a couple more cases. First, toggling a todo's completed field based on its ID:

\n
// title=\"src/reducer.js\"\nexport default function appReducer(state = initialState, action) {\n    switch (action.type) {\n        case 'todos/todoAdded': {\n            return {\n                ...state,\n                todos: [\n                    ...state.todos,\n                    {\n                        id: nextTodoId(state.todos),\n                        text: action.payload,\n                        completed: false\n                    }\n                ]\n            };\n        }\n        case 'todos/todoToggled': {            return {                // Again copy the entire state object                ...state,                // This time, we need to make a copy of the old todos array                todos: state.todos.map((todo) => {                    // If this isn't the todo item we're looking for, leave it alone                    if (todo.id !== action.payload) {                        return todo;                    }                    // We've found the todo that has to change. Return a copy:                    return {                        ...todo,                        // Flip the completed flag                        completed: !todo.completed                    };                })            };        }        default:\n            return state;\n    }\n}
\n

And since we've been focusing on the todos state, let's add a case to handle the \"visibility selection changed\" action as well:

\n
// title=\"src/reducer.js\"\nexport default function appReducer(state = initialState, action) {\n    switch (action.type) {\n        case 'todos/todoAdded': {\n            return {\n                ...state,\n                todos: [\n                    ...state.todos,\n                    {\n                        id: nextTodoId(state.todos),\n                        text: action.payload,\n                        completed: false\n                    }\n                ]\n            };\n        }\n        case 'todos/todoToggled': {\n            return {\n                ...state,\n                todos: state.todos.map((todo) => {\n                    if (todo.id !== action.payload) {\n                        return todo;\n                    }\n\n                    return {\n                        ...todo,\n                        completed: !todo.completed\n                    };\n                })\n            };\n        }\n        case 'filters/statusFilterChanged': {            return {                // Copy the whole state                ...state,                // Overwrite the filters value                filters: {                    // copy the other filter fields                    ...state.filters,                    // And replace the status field with the new value                    status: action.payload                }            };        }        default:\n            return state;\n    }\n}
\n

We've only handled 3 actions, but this is already getting a bit long. If we try to handle every action in this one reducer\nfunction, it's going to be hard to read it all.

\n

That's why reducers are typically split into multiple smaller reducer functions - to make it easier to understand and\nmaintain the reducer logic.

\n

Splitting Reducers

\n

As part of this, Redux reducers are typically split apart based on the section of the Redux state that they update. Our todo app state currently has two top-level sections: state.todos and state.filters. So, we can split the large root reducer function into two smaller reducers - a todosReducer and a filtersReducer.

\n

So, where should these split-up reducer functions live?

\n

We recommend organizing your Redux app folders and files based on \"features\" - code that relates to a specific concept\nor area of your application. The Redux code for a particular feature is usually written as a single file, known as a\n\"slice\" file, which contains all the reducer logic and all of the action-related code for that part of your app state.

\n

Because of that, the reducer for a specific section of the Redux app state is called a \"slice reducer\". Typically, some of the action objects will be closely related to a specific slice reducer, and so the action type strings should start with the name of that feature (like 'todos') and describe the event that happened (like 'todoAdded'), joined together into one string ('todos/todoAdded').

\n

In our project, create a new features folder, and then a todos folder inside that. Create a new file named todosSlice.js, and let's cut and paste the todo-related initial state over into this file:

\n
// title=\"src/features/todos/todosSlice.js\"\nconst initialState = [\n    { id: 0, text: 'Learn React', completed: true },\n    { id: 1, text: 'Learn Redux', completed: false, color: 'purple' },\n    { id: 2, text: 'Build something fun!', completed: false, color: 'blue' }\n];\n\nfunction nextTodoId(todos) {\n    const maxId = todos.reduce((maxId, todo) => Math.max(todo.id, maxId), -1);\n    return maxId + 1;\n}\n\nexport default function todosReducer(state = initialState, action) {\n    switch (action.type) {\n        default:\n            return state;\n    }\n}
\n

Now we can copy over the logic for updating the todos. However, there's an important difference here. This file only has to update the todos-related state - it's not nested any more! This is another reason why we split up reducers. Since the todos state is an array by itself, we don't have to copy the outer root state object in here. That makes this reducer easier to read.

\n

This is called reducer composition, and it's the fundamental pattern of building Redux apps.

\n

Here's what the updated reducer looks like after we handle those actions:

\n
// title=\"src/features/todos/todosSlice.js\"\nexport default function todosReducer(state = initialState, action) {\n    switch (action.type) {\n        case 'todos/todoAdded': {            // Can return just the new todos array - no extra object around it            return [                ...state,                {                    id: nextTodoId(state),                    text: action.payload,                    completed: false                }            ];        }        case 'todos/todoToggled': {            return state.map((todo) => {                if (todo.id !== action.payload) {                    return todo;                }                return {                    ...todo,                    completed: !todo.completed                };            });        }        default:\n            return state;\n    }\n}
\n

That's a bit shorter and easier to read.

\n

Now we can do the same thing for the visibility logic. Create src/features/filters/filtersSlice.js, and let's move all the filter-related code over there:

\n
// title=\"src/features/filters/filtersSlice.js\"\nconst initialState = {\n    status: 'All',\n    colors: []\n};\n\nexport default function filtersReducer(state = initialState, action) {\n    switch (action.type) {\n        case 'filters/statusFilterChanged': {            return {                // Again, one less level of nesting to copy                ...state,                status: action.payload            };        }        default:\n            return state;\n    }\n}
\n

We still have to copy the object containing the filters state, but since there's less nesting, it's easier to read what's happening.

\n

:::info

\n

To keep this page shorter, we'll skip showing how to write the reducer update logic for the other actions.

\n

Try writing the updates for those yourself, based on the requirements described above.

\n

If you get stuck, see the CodeSandbox at the end of this page for the complete implementation of these reducers.

\n

:::

\n

Combining Reducers

\n

We now have two separate slice files, each with its own slice reducer function. But, we said earlier that the Redux store needs one root reducer function when we create it. So, how can we go back to having a root reducer without putting all the code in one big function?

\n

Since reducers are normal JS functions, we can import the slice reducers back into reducer.js, and write a new root reducer whose only job is to call the other two functions.

\n
// title=\"src/reducer.js\"\nimport todosReducer from './features/todos/todosSlice';\nimport filtersReducer from './features/filters/filtersSlice';\n\nexport default function rootReducer(state = {}, action) {\n    // always return a new object for the root state\n    return {\n        // the value of `state.todos` is whatever the todos reducer returns\n        todos: todosReducer(state.todos, action),\n        // For both reducers, we only pass in their slice of the state\n        filters: filtersReducer(state.filters, action)\n    };\n}
\n

Note that each of these reducers is managing its own part of the global state. The state parameter is different for every reducer, and corresponds to the part of the state it manages.

\n

This allows us to split up our logic based on features and slices of state, to keep things maintainable.

\n

combineReducers

\n

We can see that the new root reducer is doing the same thing for each slice: calling the slice reducer, passing in the slice of the state owned by that reducer, and assigning the result back to the root state object. If we were to add more slices, the pattern\nwould repeat.

\n

The Redux core library includes a utility called combineReducers, which does this same boilerplate step for us. We can replace our hand-written rootReducer with a shorter one generated by combineReducers.

\n

Now that we need combineReducers, it's time to actually install the Redux core library:

\n
//\nnpm install redux
\n

Once that's done, we can import combineReducers and use it:

\n
// title=\"src/reducer.js\"\nimport { combineReducers } from 'redux';\nimport todosReducer from './features/todos/todosSlice';\nimport filtersReducer from './features/filters/filtersSlice';\n\nconst rootReducer = combineReducers({\n    // Define a top-level state field named `todos`, handled by `todosReducer`\n    todos: todosReducer,\n    filters: filtersReducer\n});\n\nexport default rootReducer;
\n

combineReducers accepts an object where the key names will become the keys in your root state object, and the\nvalues are the slice reducer functions that know how to update those slices of the Redux state.

\n

Remember, the key names you give to combineReducers decides what the key names of your state object will be!

\n

What You've Learned

\n

State, Actions, and Reducers are the building blocks of Redux. Every Redux app has state values, creates actions to describe what happened, and uses reducer functions to calculate new state values based on the previous state and an action.

\n

Here's the contents of our app so far:

\n\n\n
\n

:::tip Summary

\n
    \n
  • \n

    Redux apps use plain JS objects, arrays, and primitives as the state values

    \n
      \n
    • The root state value should be a plain JS object
      • \n
    • The state should contain the smallest amount of data needed to make the app work
      • \n
    • Classes, Promises, functions, and other non-plain values should not go in the Redux state
      • \n
    • Reducers must not create random values like Math.random() or Date.now()
      • \n
    • It's okay to have other state values that are not in the Redux store (like local component state) side-by side with Redux
      • \n
    \n
    • \n
  • \n

    Actions are plain objects with a type field that describe what happened

    \n
      \n
    • The type field should be a readable string, and is usually written as 'feature/eventName'
      • \n
    • Actions may contain other values, which are typically stored in the action.payload field
      • \n
    • Actions should have the smallest amount of data needed to describe what happened
      • \n
    \n
    • \n
  • \n

    Reducers are functions that look like (state, action) => newState

    \n
      \n
    • \n

      Reducers must always follow special rules:

      \n
        \n
      • Only calculate the new state based on the state and action arguments
        • \n
      • Never mutate the existing state - always return a copy
        • \n
      • No \"side effects\" like AJAX calls or async logic
        • \n
      \n
      • \n
    \n
    • \n
  • \n

    Reducers should be split up to make them easier to read

    \n
      \n
    • Reducers are usually split based on top-level state keys or \"slices\" of state
      • \n
    • Reducers are usually written in \"slice\" files, organized into \"feature\" folders
      • \n
    • Reducers can be combined together with the Redux combineReducers function
      • \n
    • The key names given to combineReducers define the top-level state object keys
      • \n
    \n
    • \n
"},{"url":"/docs/sitemap/","relativePath":"docs/sitemap.md","relativeDir":"docs","base":"sitemap.md","name":"sitemap","frontmatter":{"title":"Navigation","weight":900,"excerpt":"Navigation quick reference","seo":{"title":"Web Dev Hub","description":"This website contains docs, blogs, a personal portfolio spread out across multiple pages as well as interactive animations and tools.","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Web Dev Hub","keyName":"property"},{"name":"og:description","value":"Navigation Home","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Web Dev Hub"},{"name":"twitter:description","value":"Navigation Home"},{"name":"og:image","value":"images/background.gif","keyName":"property","relativeUrl":true}]},"template":"docs"},"html":"

➡️🏠🏠HOME🏠🏠⬅️

\n
\n

➡️📚🏠docs🏠📚⬅️

\n

readme

\n

showcase

\n
🔏admin
\n
🔏privacy-policy
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n 📰📰 BLOG 📰📰 \n\n
Blog Article List
\n\n
\n
\n
\n
\n
\n📚Docs📚 - About\n\n
\n
\n
\n
\n
\n📚Docs📚 - 🗞️Artices🗞️\n\n
\n
\n
\n
\n
\n📚Docs📚 - 🔊 Audio\n\n
\n
\n
\n
\n
\n📚Docs📚 - Career \n\n
\n
\n
\n
\n
\n📚Docs📚 - 👫👫Community👫👫 \n\n
\n
\n
\n
\n
\n📚Docs📚 - 💼Content💼\n\n
\n
\n
\n
\n
\n📚Docs📚 - 📓Documentation📓\n\n
\n
\n
\n
\n
\n\n 📚Docs📚 - 🕸Data Structures & Algorithms🕸\n\n
\n
\n
\n
\n
\n📚Docs📚 - ❓FAQ❓\n\n
\n
\n
\n
\n
\n📚Docs📚 - 🧑‍🔬Interactive🧑‍🔬 \n\n
\n
\n
\n
\n
\n📚Docs📚 - 💻Javascript💻\n\n
\n
\n
\n
\n
\n📚Docs📚 - 💸JS-Tips💸\n\n
\n
\n
\n
\n
\n📚Docs📚 - 🏆Leetcode🏆 \n\n
\n
\n
\n
\n
\n📚Docs📚 - 🌊 Overflow🌊 \n\n
\n
\n
\n
\n
\n📚Docs📚 - Projects \n\n
\n
\n
\n
\n
\n📚Docs📚 - 🐍Python🐍 \n\n
\n
\n
\n
\n
\n📚Docs📚 - 📚🏃‍♂️Quick Reference📚🏃‍♂️ \n\n
\n
\n
\n
\n
\n📚Docs📚 - ⚛️React⚛️ \n\n
\n
\n
\n
\n
\n📚Docs📚 - ※🕮Reference Materials🕮※\n\n
\n\n
\n
\n
\n
\n📚Docs📚 - 🔊 Mini Web Dev Tips \n\n
\n
\n
\n
\n
\n📚Docs📚 - ⚒Tools⚒ \n\n
\n
\n
\n
\n
\n📚Docs📚 - 📑Tutorials📑\n"},{"url":"/docs/about/readme/","relativePath":"docs/about/readme.md","relativeDir":"docs/about","base":"readme.md","name":"readme","frontmatter":{"title":"readme","weight":0,"excerpt":"readme","seo":{"title":"Readme For This Website","description":"website documentation","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

⇨WEBSITE🗺️⇦

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

Notion

\n\n
\n

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

\n

\"Run\"GitHub

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

Resume

\n
\n

Bryan Guner

\n

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

\n
\n

➤Skills

\n
Project NameSkills usedDescription
\nWeb-Dev-Resource-Hub (blog)\nHtml, Css, javascript, Python, jQuery, React, FireBase, AWS S3, Netlify, Heroku, NodeJS, PostgreSQL, C++, Web Audio APIMy blog site contains my resource sharing and blog site ... centered mostly on web development and just a bit of audio production / generally nerdy things I find interesting.
\nDynamic Guitar Effects Triggering Using A Modified Dynamic Time Warping Algorithm\nC, C++, Python, Java, Pure Data, MatlabSuccessfully completed and delivered a platform to digitize a guitar signal and perform filtering before executing frequency & time domain analysis to track a current performance against prerecorded performance.Implemented the Dynamic Time Warping algorithm in C++ and Python to autonomously activate or adjust guitar effect at multiple pre-designated section of performance.
\nData Structures & Algorithms Interactive Learning Site\nHTML, CSS, Javascript, Python, Java, jQuery, Repl.it-Database APIA interactive and comprehensive guide and learning tool for DataStructures and Algorithms ... concentrated on JS but with some examples in Python, C++ and Java as well
\nMihirBeg.com\nHtml, Css, Javascript, Bootstrap, FontAwesome, jQueryA responsive and mobile friendly content promotion site for an Audio Engineer to engage with fans and potential clients
\nTetris-JS\nHtml, Css, JavascriptThe classic game of tetris implemented in plain javascipt and styled with a retro-futureistic theme
\nGit Html Preview Tool\nGit, Javascript, CSS3, HTML5, Bootstrap, BitBucketLoads HTML using CORS proxy, then process all links, frames, scripts and styles, and load each of them using CORS proxy, so they can be evaluated by the browser.
\nMini Project Showcase\nHTML, HTML5, CSS, CSS3, Javascript, jQueryadd songs and play music, it also uses to store data in INDEXEDB Database by which we can play songs, if we not clear the catch then song will remain stored in database.
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Languages:JavaScript ES-6, NodeJS, HTML5, CSS3, SCSS, Bash Shell, SQL, MATLAB, Python, C++, Mathematica, JSON
Frameworks / Libraries:React, Redux, ExpressJS, Gatsby, NextJS, Ant-Design, Loadash, Sequelize, GraphQL, AJAX, Jest, Mocha, jQuery, Electron
Databases:PostgreSQL, MongoDB, SQlite3
Tools:Figma, Adobe XD, GitHub, GitLab, Excel, VSCode, Sublime Text, Atom, Google Analytics, Bootstrap, Tailwind, FontAwesome
Tools (continued):Docker, Firebase, Postman, Wordpress, Chrome Dev Tools, Jira, Trello, Confluence, Firebase, AWS S3, Okta, Algolia, Loadash
Hosting:Heroku, Netlify, Vercel, Wordpress, Cloudfare, AWS, Firebase, Digital Ocean
Operating Systems:Linux, Windows (WSL), IOS
\n

➤Projects

\n

Gatsby GraphQL-Blog Live Site |GitHub

\n

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

\n

Aweb development blogfeaturing convenient web development tools and interactive content

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

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

\n

Stack: C++ | Python | MATLAB | PureData

\n

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

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

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

\n

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

\n

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

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

➤ Experience

\n

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

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

Family Promise Service Tracker

\n

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

\n

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

\n

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

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

➤ Education

\n

Lambda School , Full Stack Web Development

\n
\n

May 2020 - Nov 2021

\n
\n

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

\n

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

\n

2 Curriculum link

\n
\n

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

\n
\n
\n

References & further work experience available upon request.

\n
\n\n
"},{"url":"/docs/archive/embeded-websites/","relativePath":"docs/archive/embeded-websites.md","relativeDir":"docs/archive","base":"embeded-websites.md","name":"embeded-websites","frontmatter":{"title":"Embeded Websites & Projects","weight":0,"seo":{"title":"Gatsby Plugins For This Sites Content Model","description":"This is my markdown notes tempate","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Gatsby Plugins For This Sites Content Model","keyName":"property"},{"name":"og:description","value":"This is the Gatsby Plugins For This Sites Content Model page","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Gatsby Plugins For This Sites Content Model"},{"name":"twitter:description","value":"This is the Gatsby Plugins For This Sites Content Model page"}]},"template":"docs"},"html":"
\n
\n
\n

Family Promise Project:

\n

Table of contents

\n\n

navigation

\n\n

UX

\n\n

CANVAS

\n\n

Front End

\n\n

Back End

\n\n

Research

\n\n

DS_API

\n\n

ROLES

\n\n

Action Items

\n\n

ARCHITECTURE

\n\n

Questions

\n\n

Standup Notes

\n\n

GitHub & Project Practice

\n\n

MISC

\n\n

Background Information

\n\n

DOCS

\n\n

Workflow

\n\n

AWS

\n\n

Career & Job Hunt

\n\n

Group 1

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

Family-Promise Application

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

What is a buffer?

\n

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

\n

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

\n

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

\n

It is implemented by the Node.js Buffer class.

\n

Why do we need a buffer?

\n

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

\n

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

\n

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

\n

How to create a buffer

\n

A buffer is created using the Buffer.from(), Buffer.alloc(), and Buffer.allocUnsafe() methods.

\n
//\nconst buf = Buffer.from('Hey!');
\n\n

You can also just initialize the buffer passing the size. This creates a 1KB buffer:

\n
//\nconst buf = Buffer.alloc(1024);\n//or\nconst buf = Buffer.allocUnsafe(1024);
\n

While both alloc and allocUnsafe allocate a Buffer of the specified size in bytes, the Buffer created by alloc will be initialized with zeroes and the one created by allocUnsafe will be uninitialized. This means that while allocUnsafe would be quite fast in comparison to alloc, the allocated segment of memory may contain old data which could potentially be sensitive.

\n

Older data, if present in the memory, can be accessed or leaked when the Buffer memory is read. This is what really makes allocUnsafe unsafe and extra care must be taken while using it.

\n

Using a buffer

\n

Access the content of a buffer

\n

A buffer, being an array of bytes, can be accessed like an array:

\n
//\nconst buf = Buffer.from('Hey!');\nconsole.log(buf[0]); //72\nconsole.log(buf[1]); //101\nconsole.log(buf[2]); //121
\n

Those numbers are the Unicode Code that identifies the character in the buffer position (H => 72, e => 101, y => 121)

\n

You can print the full content of the buffer using the toString() method:

\n
//\nconsole.log(buf.toString());
\n
\n

Notice that if you initialize a buffer with a number that sets its size, you'll get access to pre-initialized memory that will contain random data, not an empty buffer!

\n
\n

Get the length of a buffer

\n

Use the length property:

\n
//\nconst buf = Buffer.from('Hey!');\nconsole.log(buf.length);
\n

Iterate over the contents of a buffer

\n
//\nconst buf = Buffer.from('Hey!');\nfor (const item of buf) {\n    console.log(item); //72 101 121 33\n}
\n

Changing the content of a buffer

\n

You can write to a buffer a whole string of data by using the write() method:

\n
//\nconst buf = Buffer.alloc(4);\nbuf.write('Hey!');
\n

Just like you can access a buffer with an array syntax, you can also set the contents of the buffer in the same way:

\n
//\nconst buf = Buffer.from('Hey!');\nbuf[1] = 111; //o\nconsole.log(buf.toString()); //Hoy!
\n

Copy a buffer

\n

Copying a buffer is possible using the copy() method:

\n
//\nconst buf = Buffer.from('Hey!');\nlet bufcopy = Buffer.alloc(4); //allocate 4 bytes\nbuf.copy(bufcopy);
\n

By default you copy the whole buffer. 3 more parameters let you define the starting position, the ending position, and the new buffer length:

\n
//\nconst buf = Buffer.from('Hey!');\nlet bufcopy = Buffer.alloc(2); //allocate 2 bytes\nbuf.copy(bufcopy, 0, 0, 2);\nbufcopy.toString(); //'He'
\n

Slice a buffer

\n

If you want to create a partial visualization of a buffer, you can create a slice. A slice is not a copy: the original buffer is still the source of truth. If that changes, your slice changes.

\n

Use the slice() method to create it. The first parameter is the starting position, and you can specify an optional second parameter with the end position:

\n
//\nconst 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
"},{"url":"/docs/about/job-search/","relativePath":"docs/about/job-search.md","relativeDir":"docs/about","base":"job-search.md","name":"job-search","frontmatter":{"title":"Job Search","weight":0,"excerpt":"the hunt for a webdev position","seo":{"title":"","description":"","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Job Boards and The Hunt

\n

I can't imagine the kind of masochism it would take to enjoy the act of posting and daily maintenance on a job board…It's part of the…

\n
\n

Job Boards and The Hunt

\n

I can't imagine the kind of masochism it would take to enjoy the act of posting and daily maintenance on a job board…It's part of the process that you've already invested so much of yourself in, so you should take pride in it; do a good job the first time around and you'll get where your going in the blink of an eye!

\n\nA list of all of my articles to link to future posts\n
\nYou should probably skip this one… seriously it's just for internal use!bryanguner.medium.com\n\n\n
\n

Update(After The Interview):

\n

As a candidate, there are key next steps that you can and should after every interview to help you stand out.

\n

Send a thank you email within 24 business hours

\n

Do not miss this step! It takes less than five minutes and can make the difference between you and another candidate. It also keeps you fresh in your interviewers' memories. For example:

\n

‍

\n

Hi (name),

\n
\n

Thank you so much for taking the time to meet with me yesterday to discuss my candidacy for (role title). After learning more about (share one or two takeaways from the interview about the company/team's priorities), I'm even more excited to bring my skills in (1-3 relevant skills) to the team.

\n
\n
\n

I look forward to hearing from you about next steps, and if there is anything that I can clarify about my experience or qualifications for the (role title) position, please don't hesitate to reach out.

\n
\n
\n

Thank you for your consideration,

\n
\n
\n

(your name)

\n
\n

Follow up

\n

Don't wait for the company to reach out to you! Be proactive in showing your interest by checking in to see where you stand in the process. If a company indicates a deadline by which you will hear back, and the deadline has passed, follow-up!

\n

Check your email and phone regularly
\n‍*
\n*Don't ghost on a company at any stage in the process; make sure you add their domain to your safe senders list and respond to any messages within 24 hours.

\n

‍

\n

Be prepared
\n‍*
\n*You might be invited for another interview on short notice; review the description regularly so it doesn't slip from your memory, and keep brushing up on skills you may need for an interview (chances are, this won't be the only job you'll need them for anyway!)

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

Here I will maintain a running list of applicable job boards and below I will go into detail about the niches they occupy and whatever I resource I have found to use them to your maximum advantage. !

\n
\n

Update (remote work edition):

\n
    \n
  1. \n\nArc\n\n
    2. \n
  2. \n\nWe Work Remotely\n\n
    3. \n
  3. \n\nSkip The Drive\n\n
    4. \n
  4. \n\nPower to Fly\n\n
    5. \n
  5. \n\nRemote OK\n\n
    6. \n
  6. \n\nRemotive\n\n
    7. \n
  7. \n\nFlexJobs\n\n
    8. \n
  8. \n\nDribble\n\n
    9. \n
  9. \n\nAngelList\n\n
    10. \n
  10. \n\nRemote.co\n\n
    11. \n
  11. \n\nJustRemote\n\n
    12. \n
  12. \n\nVirtual Vocations\n\n
    13. \n
  13. \n\nPangian\n\n
    14. \n
  14. \n\nWorking Nomads\n\n
    15. \n
  15. \n\nJobspresso\n\n
    16. \n
  16. \n\nOutsourcely\n\n
    17. \n
  17. \n\nLanding.Jobs\n\n
    18. \n
  18. \n\nAuthentic Jobs\n\n
    19. \n
  19. \n\nStack Overflow\n\n
    20. \n
  20. \n\nGun.io\n\n
    21. \n
  21. \n\nIdealist\n\n
    22. \n
  22. \n\nFiverr\n\n
    23. \n
  23. \n\nUpwork\n\n
    24. \n
  24. \n\nFreelancer\n\n
    25. \n
  25. \n\nfreelancermap\n\n
    26. \n
\n
\n

List:

\n

General Boards

\n\n

Remote or Relocation Boards:

\n\n

DS Boards:

\n\n

Design Boards

\n\n

Software Development

\n\n

I am intentionally not linking glassdoor because they have irritated me for the last time by insisting I provide a job review every time I want to access their content… (To the makers of glassdoor… HOW MANY TIMES A MONTH DO YOU THINK I CHANGE JOBS!!!!) I don't have 15 minutes to make up a job experience every time I want to read a review.

\n
\n
\n

Also here is a repo of compiled job search and interviewing resources:

\n
\n\nbgoonz/INTERVIEW-PREP-COMPLETE\n
\nYour resume is your personal summary sheet. Your resume is the thing that gets your foot in the door. So, there's a few…github.com\n\n\n
\n\n
\n
\n\n
\n

First off I am going to introduce a few different categories for those of you who are completely overwhelmed by the prospect of even selecting a job board let alone establishing a competitive presence on one. Here's a few catorizations I think are worth distinguishing for one and other.

\n

1. Interpersonal Connections

\n

Seek to leverage the connections you have with people you know and companies you want to work with. I know that that's a violation of the premise of this article but without even feeling the need to provide quantitative proof; I can confidently assume that this is the most ROI efficient way to produce a desirable result. (Sorry introverts… 2020 may have been your year but this is our world. 😘)

\n

If personal connections don't come through, the next best thing is cold outreach (best in terms of results…. personally I hate cold calling strangers and I am an extrovert.)

\n
    \n
  1. Before or after submitting an application, identify 1-3 professionals to reach out to at the company to express interest in opportunities.
    2. \n
  2. Send a message to express interest and request an informational interview with the individual via LinkedIn, email, Twitter, or other available communication methods.
    3. \n
  3. If you hear back and the individual is willing to connect, confirm a day and time to conduct a preliminary interview. OR If you have yet to hear back after 3 business days, follow-up.
    4. \n
\n

Once you send off a message in step two, there are a variety of responses you may receive. Sometimes an individual will forward you along to someone who may be of better assistance, other times your message may be overlooked with no reply, and its possible (best case scenario) your request for a chat becomes an invitation to interview.

\n
\n\n
\n
\n\n
\n
\n\n
### ***2. LinkedIn***.\n

I am going to devote a lot of time to this one because it is the largest and most active of all the job board ecosystems… period… full stop regardless of your industry.

\n

LinkedIn now has almost 740 million members with over 55 million registered companies. (for comparison 12.3 million people visited Indeed in October, up 19.6 percent. Monster.com attracted 12.1 million people, and CareerBuilder.comattractedd 11.3 million in that same time) and LinkedIn is the most-used social media platform amongst Fortune 500 companies as it provides far more networking capabilities than pure recruitment.

\n

If you put your resume and skills on LinkedIn.com as a software Engineer, and state that you are open to new opportunities, you will be contacted by multiple recruiters, and if your skills are desirable possibly also directly by companies seeking to hire you. It's a developer's market; there's not enough people out there, especially in America.

\n

Here's my profile… feel free to connect… the larger your network the greater your exposure is to someone who works at your potential dream job.

\n\nBryan Guner - Web Developer - Freelance | LinkedIn\n
\nView Bryan Guner's profile on LinkedIn, the world's largest professional community. Bryan has 5 jobs listed on their…www.linkedin.com\n\n\n

Here's A Linkedin Checklist I will be using before I return to the job hunt!

\n\nLinkedIn\n
\nPersonal and Contact Information:www.notion.so\n\n\n
\n

excerpt:

\n
\n

Experience Section

\n
    \n
  • [ ] I have listed all professional roles included on my resume in this section and any that I had to cut from my resume for space
    • \n
  • [ ] I have written 2-4 power statements for each experience listed (okay to copy and paste from resume)
    • \n
  • [ ] My power statements for each experience are bulleted, not in paragraph form.
    • \n
  • [ ] I did list responsibilities in bullet point format (I did not leave in paragraph format)
    • \n
  • [ ] I did start each bullet point with an action verb and I did not use phrases such as: Assisted with... Worked on... Helped with... (Solely responsible for... ok)
    • \n
  • [ ] I did describe past projects in past tense and current projects in present tense
    • \n
  • [ ] I did not use pronouns such as: \"I,\" \"we,\" \"they, \"you,\" \"me,\" \"us\"
    • \n
  • [ ] Optional: Bootcamp student experience and projects can be listed under your experience section if you have no (or almost no) prior work experience.
    • \n
  • [ ] If I listed my Bootcamp student experience, my title is [name of program] Student (example: Data Science Student)
    • \n
  • [ ] I copied and pasted my Lambda projects in my student description and also included them in the Accomplishments section
    • \n
\n

Do's:

\n

Spend a good portion of your time learning and reading. Your jobs teach you so much about an organization and the business.

\n

Follow business owners and senior managers, successful team leaders in large organizations, startup owners. You would be surprised how willing some otherwise busy executives are to rub elbows with veritable newcomers. They're not just doing this out of the kindness of their hearts, just like you… they have an ulterior motive. They are hoping to build goodwill with the incoming workforce in a bid to make their company more attractive to high quality candidates. If they give you any of their time…treat it like an interview.

\n
\n

To leverage this information, (the trick is to constantly remind yourself to be on your game with speaking with them.) I do not care what your teacher's past have said… mark my words… *THERE IS MOST CERTAINLY SUCH A THING AS A STUPID QUESTION**…Anyone who tells you otherwise is either stupid themselves or just overcome with their own compassion (an admirable trait but ultimately a disservice to you the competitive job seeker).*

\n
\n\nHow to Ask Great Questions\n
\nIn Brief The Problem Some professionals such as litigators, journalists and even doctors, are taught to ask questions…hbr.org\n\n\n
\n

Engage in networking. I would recommend finding and connecting with current attendee of any software development bootcamp. They're all (for the most part) programatically encouraged to connect network and engage in peer skill promotion (even if they have no idea of you skill level). If that weren't enough reason, all of them come from a cohort of other individuals being instructed to do the same. Once you have a few in your network other's will seek you out through Linkedin recommendations algorithm.

\n
\n
\n

Note to prospective employers please just skip the next few sentences and don't ask why…😅

\n
\n
\n

Of the 214 people that vouched for me… I guestimate about only 80 actually know me in any respectable capacity, and of those, only probably 30 or so are familiar with my competency in the skills they endorsed. It all boils down to the strategies that bootcamps instill in their students. It's the polar opposite of a zero sum game and they're more than happy to exchange personal recommendations with you. They're also far more driven to consistently engage with other members of the linkedin ecosystem because they need to a network to help compensate for their lack of a four year degree and the connections you make in that time.

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

Build your personal brand. Developing your brand will not only help you attract clients or recruits if you decide to start a business, but will also help you find great job opportunities. You can post anything you take pride in so long as it's fairly professional. Definitely make use of the featured section to showcase your work.

\n
\n
\n\n
### Don't:\n

Don't Use LinkedIn's Default Headline

\n

LinkedIn automatically populates your headline with your current job title and company name. I hope it goes without saying… but as a rule avoid signaling to prospective employers the depths of your laziness by using any stock responses LinkedIn provides you.

\n

Don't Go Ham On Keyword Placment

\n

Placing keywords strategically into your LinkedIn profile is virtually the only way to ensure being flagged by search algorithms as a potential candidate.You could be forgiven for being tempted to heed the advice of your inner lizard brain, and just stuffing your profile with buzzwords but this will likely trigger a spam account checker and result in worse outcomes than the absence of said keywords.

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

Why it matters¿

\n

Are We Really All Connected by Just Six Degrees of Separation?

\n

Most of us are familiar with the concept of six degrees of separation — the idea is that anyone in the planet can be connected to anyone else in just six steps. So through just five other people, you're effectively connected to the Queen of England, Jim Belushi or even yo mamma.

\n
\n

Back to the other Job Board Niches:

\n

3. Traditional job boards. Dice.com, Monster.com, etc. They will not find you great jobs at technology companies; they may find you openings as a software engineer at other types of more traditional companies (for example, banks, retail chains, etc though.

\n

4. Local-focused sites. The biggest is Craigslist, but there are others. Often great for contract work and opportunities you wouldn't have otherwise come across.

\n

5. Freelancer websites. oDesk.com, Elance.com, etc. Lower pay, but 100% contract work, and has a lot of flexible opportunities if you're not looking for traditional full-time employment or remote work.

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

Lastly Here's A Github Profile Guide:

\n
\n\n
\n
\n\n
Medium is causing strange formatting… they normally form a grid!\n
\n\n
\n
\n\n
### Rubric:\n
\n\n
\n
\n

Discover More:

\n\nWeb-Dev-Hub\n
\nMemoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…bgoonz-blog.netlify.app\n\n\n

General

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

Resume

\n\n

Cover Letter

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

Heroku - Use at your own risk

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

Trivia

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

Language Resources

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

DS&A

\n\n

Hash Tables:

\n
    \n
  • \n

    What is a Hash Table

    \n
      \n
    • O(1) for a \"good\" table
      • \n
    • O(n) for a terrible table (lots of collisions, etc.)
      • \n
    \n
    • \n
\n
\n
\n
\n
\n

System Design

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

Interviewing

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

Networking

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

Managing and Organizing Job Search

\n
    \n
  • \n

    Notion

    \n
      \n
    • Trillo clone but with added features that make it really great! Consider creating a template for new job seekers!
      • \n
    \n
    • \n
\n
\n
\n
\n
\n

Negotiations

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

Portfolio Sites

\n

Take 25 minutes to choose a template, download it, rename it githubusername.github.io , git init, and push it to a github repo of the same name:

\n

Template Sources

\n
    \n
  • Free CSS Templates
    • \n
  • HTML5 UP
    • \n
  • Start Bootstrap
    • \n
  • Theme Wagon
    • \n
  • Templatemo
    • \n
  • One Page Love
    • \n
  • Once you've decided on a template, download it to your machine.
    • \n
  • Rename the folder {$yourGitHubUserName}.github.io, (e.g. if my GitHub\nusername were QueenOfTheBeyhive, I would name my repo\nQueenOfTheBeyhive.github.io). This will be important for deployment to GitHub\npages later.
    • \n
  • Make sure to git init and set up your remote repository.
    • \n
  • As always, make sure to read through any provided README for any potentially\nuseful information.
    • \n
  • Take some time to explore the structure, included elements, and default assets\nincluded in the template. Take special note of style sheets and the main HTML\nfile. The main HTML must be called index.html and it must be located in the root\nof the directory. If the file is located elsewhere, relocate it to the root and adjust\nany relative paths for any imported scripts or style sheets.
    • \n
\n
\n
\n
\n
\n

QA Engineering

\n\n

Alternative Roles

\n
Data Analyst\nSales Engineer\nTechnical Support Engineer\nCustomer Success Engineer\nData Engineer\nDev Ops Engineer\nQA Engineer\nSolutions Engineer\nSupport Engineer\nTechnical Product Manager\nScrum Master\nImplementation Specialist\nTechnical Account Manager
\n
\n
\n
\n
\n

Externship

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

Open Source

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

Volunteer

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

Imposter Syndrome

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

Podcasts

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

Books

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

QA Questions

\n

10:22:12 From Alexis Kozak to Everyone : Scenario 1

\n
    \n
  • It's 7:00 pm on a Friday, and you receive a message from Dev Ops that they haven't been able to upgrade a live Production environment as planned. There were feature updates in this release that customers have planned marketing campaigns around. It also included a bug fix for one customer that's currently having to maintain a very manual workaround. What do you do?
    • \n
\n

10:24:40 From Alexis Kozak to Everyone : Scenario 2

\n
    \n
  • An application has been configured to send an email every time a patient requests a changed email. The automated email sends something to the old email, acknowledging that they changed their email, and if that isn't right, to please contact Secular Health Network. When you come into the office one morning, you see that thousands of emails have been generated in the space of two hours. What do you do? How do you find the number of emails sent?
    • \n
\n

10:28:11 From Alexis Kozak to Everyone : Scenario 3

\n
    \n
  • A customer has requested a change to SSO logic such that only users from a certain region can access SmartExam. You've implemented the rule on their demo environments and given them a testing plan that is simple and straightforward. During testing, you're included in multiple email chains with different parties, as well as some one-off calls and texts messages. Resources seem scattered, but the testing happens. After receiving confirmation from the customer that testing was successful, you're told the code is good to go into production. However, upon doing some quick checks, you discover that the rule you wrote doesn't work and would actually prevent any user from logging into SmartExam. The fix is quite simple. What do you do?
    • \n
"},{"url":"/docs/archive/","relativePath":"docs/archive/index.md","relativeDir":"docs/archive","base":"index.md","name":"index","frontmatter":{"title":"Docs Archive","excerpt":"See some interesting Archive developed by the Web-Dev-Hubcommunity to help automate parts of your workflow.","seo":{"title":"Docs Archive","description":"paste to markdown, excel table to markdown, excel to html, cloud storage, text manipulation, ternary converter, github html preview, form builder, border","extra":[{"name":"og:type","value":"website","keyName":"property"},{"name":"og:title","value":"Archive","keyName":"property"},{"name":"og:description","value":"paste to markdown, excel table to markdown, excel to html, cloud storage, text manipulation, ternary converter, github html preview, form builder, border","keyName":"property"},{"name":"twitter:card","value":"summary"},{"name":"twitter:title","value":"Archive"},{"name":"twitter:description","value":"This is the Archive page"},{"name":"og:image","value":"images/tex.png","keyName":"property","relativeUrl":true}]},"template":"docs"},"html":"

Speach Recognition api

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

Sidebar Blog

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

Paste To Markdown

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

Paste Excel Tabel To Markdown

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

Paste excel to HTML

\n
\n\n
\n
\n

Cloud Storage

\n
\n

Up to 1TB of cloud Storage for file sharing!

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

Resource Archive

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

Lambda Student Site

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

Text Tools

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

Ternary Converter

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

Github HTML Render from link

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

Data Structures

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

Interview

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

Form Builder GUI

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

Border Builder

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

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

\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n\\\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n src=\"//jsfiddle.net/bgoonz/1dye9uws/2/embedded/js,html,css,result/dark/\" allowfullscreen=\"allowfullscreen\"\n frameborder=\"0\">\n\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
\n \n
\n
\n
\n
\n
\n \n

\n
\n \n
\n
\n \n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
    <br>
\n\n
\n
\n
\n \n \n
\n
\n
\n
\n \n
\n \n
\n \n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n
\n \n
\n
\n
\n
\n
\n \n \n
\n
\n
\n
"},{"url":"/docs/articles/fs-module/","relativePath":"docs/articles/fs-module.md","relativeDir":"docs/articles","base":"fs-module.md","name":"fs-module","frontmatter":{"title":"Fs-Module","sections":[],"seo":{"title":"","description":"Fs-Module","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

The fs module provides a lot of very useful functionality to access and interact with the file system.

\n

There is no need to install it. Being part of the Node.js core, it can be used by simply requiring it:

\n
//\nconst fs = require('fs');
\n

Once you do so, you have access to all its methods, which include:

\n
    \n
  • fs.access(): check if the file exists and Node.js can access it with its permissions
    • \n
  • fs.appendFile(): append data to a file. If the file does not exist, it's created
    • \n
  • fs.chmod(): change the permissions of a file specified by the filename passed. Related: fs.lchmod(), fs.fchmod()
    • \n
  • fs.chown(): change the owner and group of a file specified by the filename passed. Related: fs.fchown(), fs.lchown()
    • \n
  • fs.close(): close a file descriptor
    • \n
  • fs.copyFile(): copies a file
    • \n
  • fs.createReadStream(): create a readable file stream
    • \n
  • fs.createWriteStream(): create a writable file stream
    • \n
  • fs.link(): create a new hard link to a file
    • \n
  • fs.mkdir(): create a new folder
    • \n
  • fs.mkdtemp(): create a temporary directory
    • \n
  • fs.open(): set the file mode
    • \n
  • fs.readdir(): read the contents of a directory
    • \n
  • fs.readFile(): read the content of a file. Related: fs.read()
    • \n
  • fs.readlink(): read the value of a symbolic link
    • \n
  • fs.realpath(): resolve relative file path pointers (., ..) to the full path
    • \n
  • fs.rename(): rename a file or folder
    • \n
  • fs.rmdir(): remove a folder
    • \n
  • fs.stat(): returns the status of the file identified by the filename passed. Related: fs.fstat(), fs.lstat()
    • \n
  • fs.symlink(): create a new symbolic link to a file
    • \n
  • fs.truncate(): truncate to the specified length the file identified by the filename passed. Related: fs.ftruncate()
    • \n
  • fs.unlink(): remove a file or a symbolic link
    • \n
  • fs.unwatchFile(): stop watching for changes on a file
    • \n
  • fs.utimes(): change the timestamp of the file identified by the filename passed. Related: fs.futimes()
    • \n
  • fs.watchFile(): start watching for changes on a file. Related: fs.watch()
    • \n
  • fs.writeFile(): write data to a file. Related: fs.write()
    • \n
\n

One peculiar thing about the fs module is that all the methods are asynchronous by default, but they can also work synchronously by appending Sync.

\n

For example:

\n
    \n
  • fs.rename()
    • \n
  • fs.renameSync()
    • \n
  • fs.write()
    • \n
  • fs.writeSync()
    • \n
\n

This makes a huge difference in your application flow.

\n
\n

Node.js 10 includes experimental support for a promise based API

\n
\n

For example let's examine the fs.rename() method. The asynchronous API is used with a callback:

\n
//\nconst 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

A synchronous API can be used like this, with a try/catch block to handle errors:

\n
//\nconst fs = require('fs');\n\ntry {\n    fs.renameSync('before.json', 'after.json');\n    //done\n} catch (err) {\n    console.error(err);\n}
\n

The key difference here is that the execution of your script will block in the second example, until the file operation succeeded.

"},{"url":"/docs/articles/","relativePath":"docs/articles/index.md","relativeDir":"docs/articles","base":"index.md","name":"index","frontmatter":{"title":"Articles","weight":0,"excerpt":"my web development articles","seo":{"title":"","description":"This section is similar to a blog but is more technical in nature and time invariant with regard to content.","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Articles

\n\n
"},{"url":"/docs/articles/common-modules/","relativePath":"docs/articles/common-modules.md","relativeDir":"docs/articles","base":"common-modules.md","name":"common-modules","frontmatter":{"title":"Common Modules","weight":0,"excerpt":"resources","seo":{"title":"NodeJS Module System","description":"This section is similar to a blog but is more technical in nature and time invariant with regard to content.","robots":[],"extra":[],"type":"stackbit_page_meta"},"template":"docs"},"html":"

Modules: CommonJS modules#

\n

Stability: 2 - Stable

\n

In the Node.js module system, each file is treated as a separate module. For example, consider a file named foo.js:

\n
const circle = require('./circle.js');\nconsole.log(`The area of a circle of radius 4 is ${circle.area(4)}`);
\n

On the first line, foo.js loads the module circle.js that is in the same directory as foo.js.

\n

Here are the contents of circle.js:

\n
const { PI } = Math;\n\nexports.area = (r) => PI * r ** 2;\n\nexports.circumference = (r) => 2 * PI * r;
\n

The module circle.js has exported the functions area() and circumference(). Functions and objects are added to the root of a module by specifying additional properties on the special exports object.

\n

Variables local to the module will be private, because the module is wrapped in a function by Node.js (see module wrapper). In this example, the variable PI is private to circle.js.

\n

The module.exports property can be assigned a new value (such as a function or object).

\n

Below, bar.js makes use of the square module, which exports a Square class:

\n
const Square = require('./square.js');\nconst mySquare = new Square(2);\nconsole.log(`The area of mySquare is ${mySquare.area()}`);
\n

The square module is defined in square.js:

\n
// Assigning to exports will not modify module, must use module.exports\nmodule.exports = class Square {\n  constructor(width) {\n    this.width = width;\n  }\n\n  area() {\n    return this.width ** 2;\n  }\n};
\n

The module system is implemented in the require('module') module.

\n

Accessing the main module#

\n

When a file is run directly from Node.js, require.main is set to its module. That means that it is possible to determine whether a file has been run directly by testing require.main === module.

\n

For a file foo.js, this will be true if run via node foo.js, but false if run by require('./foo').

\n

Because module provides a filename property (normally equivalent to __filename), the entry point of the current application can be obtained by checking require.main.filename.

\n

Package manager tips#

\n

The semantics of the Node.js require() function were designed to be general enough to support reasonable directory structures. Package manager programs such as dpkg, rpm, and npm will hopefully find it possible to build native packages from Node.js modules without modification.

\n

Below we give a suggested directory structure that could work:

\n

Let's say that we wanted to have the folder at /usr/lib/node/<some-package>/<some-version> hold the contents of a specific version of a package.

\n

Packages can depend on one another. In order to install package foo, it may be necessary to install a specific version of package bar. The bar package may itself have dependencies, and in some cases, these may even collide or form cyclic dependencies.

\n

Because Node.js looks up the realpath of any modules it loads (that is, it resolves symlinks) and then looks for their dependencies in node_modules folders, this situation can be resolved with the following architecture:

\n
    \n
  • /usr/lib/node/foo/1.2.3/: Contents of the foo package, version 1.2.3.
    • \n
  • /usr/lib/node/bar/4.3.2/: Contents of the bar package that foo depends on.
    • \n
  • /usr/lib/node/foo/1.2.3/node_modules/bar: Symbolic link to /usr/lib/node/bar/4.3.2/.
    • \n
  • /usr/lib/node/bar/4.3.2/node_modules/*: Symbolic links to the packages that bar depends on.
    • \n
\n

Thus, even if a cycle is encountered, or if there are dependency conflicts, every module will be able to get a version of its dependency that it can use.

\n

When the code in the foo package does require('bar'), it will get the version that is symlinked into /usr/lib/node/foo/1.2.3/node_modules/bar. Then, when the code in the bar package calls require('quux'), it'll get the version that is symlinked into /usr/lib/node/bar/4.3.2/node_modules/quux.

\n

Furthermore, to make the module lookup process even more optimal, rather than putting packages directly in /usr/lib/node, we could put them in /usr/lib/node_modules/<name>/<version>. Then Node.js will not bother looking for missing dependencies in /usr/node_modules or /node_modules.

\n

In order to make modules available to the Node.js REPL, it might be useful to also add the /usr/lib/node_modules folder to the $NODE_PATH environment variable. Since the module lookups using node_modules folders are all relative, and based on the real path of the files making the calls to require(), the packages themselves can be anywhere.

\n

The .mjs extension#

\n

It is not possible to require() files that have the .mjs extension. Attempting to do so will throw an error. The .mjs extension is reserved for ECMAScript Modules which cannot be loaded via require(). See ECMAScript Modules for more details.

\n

All together...#

\n

To get the exact filename that will be loaded when require() is called, use the require.resolve() function.

\n

Putting together all of the above, here is the high-level algorithm in pseudocode of what require() does:

\n

require(X) from module at path Y

\n
    \n
  1. If X is a core module,\na. return the core module\nb. STOP
    2. \n
  2. If X begins with '/'\na. set Y to be the filesystem root
    3. \n
  3. If X begins with './' or '/' or '../'\na. LOADASFILE(Y + X)\nb. LOADASDIRECTORY(Y + X)\nc. THROW \"not found\"
    4. \n
  4. If X begins with '#'\na. LOADPACKAGEIMPORTS(X, dirname(Y))
    5. \n
  5. LOADPACKAGESELF(X, dirname(Y))
    6. \n
  6. LOADNODEMODULES(X, dirname(Y))
    7. \n
  7. THROW \"not found\"
    8. \n
\n

LOADASFILE(X)

\n
    \n
  1. If X is a file, load X as its file extension format. STOP
    2. \n
  2. If X.js is a file, load X.js as JavaScript text. STOP
    3. \n
  3. If X.json is a file, parse X.json to a JavaScript Object. STOP
    4. \n
  4. If X.node is a file, load X.node as binary addon. STOP
    5. \n
\n

LOAD_INDEX(X)

\n
    \n
  1. If X/index.js is a file, load X/index.js as JavaScript text. STOP
    2. \n
  2. If X/index.json is a file, parse X/index.json to a JavaScript object. STOP
    3. \n
  3. If X/index.node is a file, load X/index.node as binary addon. STOP
    4. \n
\n

LOADASDIRECTORY(X)

\n
    \n
  1. If X/package.json is a file,\na. Parse X/package.json, and look for \"main\" field.\nb. If \"main\" is a falsy value, GOTO 2.\nc. let M = X + (json main field)\nd. LOADASFILE(M)\ne. LOADINDEX(M)\nf. LOADINDEX(X) DEPRECATED\ng. THROW \"not found\"
    2. \n
  2. LOAD_INDEX(X)
    3. \n
\n

LOADNODEMODULES(X, START)

\n
    \n
  1. let DIRS = NODEMODULESPATHS(START)
    2. \n
  2. for each DIR in DIRS:\na. LOADPACKAGEEXPORTS(X, DIR)\nb. LOADASFILE(DIR/X)\nc. LOADASDIRECTORY(DIR/X)
    3. \n
\n

NODEMODULESPATHS(START)

\n
    \n
  1. let PARTS = path split(START)
    2. \n
  2. let I = count of PARTS - 1
    3. \n
  3. let DIRS = [GLOBAL_FOLDERS]
    4. \n
  4. while I >= 0,\na. if PARTS[I] = \"nodemodules\" CONTINUE\nb. DIR = path join(PARTS[0 .. I] + \"nodemodules\")\nc. DIRS = DIRS + DIR\nd. let I = I - 1
    5. \n
  5. return DIRS
    6. \n
\n

LOADPACKAGEIMPORTS(X, DIR)

\n
    \n
  1. Find the closest package scope SCOPE to DIR.
    2. \n
  2. If no scope was found, return.
    3. \n
  3. If the SCOPE/package.json \"imports\" is null or undefined, return.
    4. \n
  4. let MATCH = PACKAGEIMPORTSRESOLVE(X, pathToFileURL(SCOPE),\n[\"node\", \"require\"]) defined in the ESM resolver.
    5. \n
  5. RESOLVEESMMATCH(MATCH).
    6. \n
\n

LOADPACKAGEEXPORTS(X, DIR)

\n
    \n
  1. Try to interpret X as a combination of NAME and SUBPATH where the name\nmay have a @scope/ prefix and the subpath begins with a slash (/).
    2. \n
  2. If X does not match this pattern or DIR/NAME/package.json is not a file,\nreturn.
    3. \n
  3. Parse DIR/NAME/package.json, and look for \"exports\" field.
    4. \n
  4. If \"exports\" is null or undefined, return.
    5. \n
  5. let MATCH = PACKAGEEXPORTSRESOLVE(pathToFileURL(DIR/NAME), \".\" + SUBPATH,\npackage.json \"exports\", [\"node\", \"require\"]) defined in the ESM resolver.
    6. \n
  6. RESOLVEESMMATCH(MATCH)
    7. \n
\n

LOADPACKAGESELF(X, DIR)

\n
    \n
  1. Find the closest package scope SCOPE to DIR.
    2. \n
  2. If no scope was found, return.
    3. \n
  3. If the SCOPE/package.json \"exports\" is null or undefined, return.
    4. \n
  4. If the SCOPE/package.json \"name\" is not the first segment of X, return.
    5. \n
  5. let MATCH = PACKAGEEXPORTSRESOLVE(pathToFileURL(SCOPE),\n\".\" + X.slice(\"name\".length), package.json \"exports\", [\"node\", \"require\"])\ndefined in the ESM resolver.
    6. \n
  6. RESOLVEESMMATCH(MATCH)
    7. \n
\n

RESOLVEESMMATCH(MATCH)

\n
    \n
  1. let { RESOLVED, EXACT } = MATCH
    2. \n
  2. let RESOLVED_PATH = fileURLToPath(RESOLVED)
    3. \n
  3. If EXACT is true,\na. If the file at RESOLVEDPATH exists, load RESOLVEDPATH as its extension\nformat. STOP
    4. \n
  4. Otherwise, if EXACT is false,\na. LOADASFILE(RESOLVEDPATH)\nb. LOADASDIRECTORY(RESOLVEDPATH)
    5. \n
  5. THROW \"not found\"
    6. \n
\n

Caching#

\n

Modules are cached after the first time they are loaded. This means (among other things) that every call to require('foo') will get exactly the same object returned, if it would resolve to the same file.

\n

Provided require.cache is not modified, multiple calls to require('foo') will not cause the module code to be executed multiple times. This is an important feature. With it, \"partially done\" objects can be returned, thus allowing transitive dependencies to be loaded even when they would cause cycles.

\n

To have a module execute code multiple times, export a function, and call that function.

\n

Module caching caveats#

\n

Modules are cached based on their resolved filename. Since modules may resolve to a different filename based on the location of the calling module (loading from node_modules folders), it is not a guarantee that require('foo') will always return the exact same object, if it would resolve to different files.

\n

Additionally, on case-insensitive file systems or operating systems, different resolved filenames can point to the same file, but the cache will still treat them as different modules and will reload the file multiple times. For example, require('./foo') and require('./FOO') return two different objects, irrespective of whether or not ./foo and ./FOO are the same file.

\n

Core modules#

\n

History

\n

Node.js has several modules compiled into the binary. These modules are described in greater detail elsewhere in this documentation.

\n

The core modules are defined within the Node.js source and are located in the lib/ folder.

\n

Core modules are always preferentially loaded if their identifier is passed to require(). For instance, require('http') will always return the built in HTTP module, even if there is a file by that name.

\n

Core modules can also be identified using the node: prefix, in which case it bypasses the require cache. For instance, require('node:http') will always return the built in HTTP module, even if there is require.cache entry by that name.

\n

Cycles#

\n

When there are circular require() calls, a module might not have finished executing when it is returned.

\n

Consider this situation:

\n

a.js:

\n
console.log('a starting');\nexports.done = false;\nconst b = require('./b.js');\nconsole.log('in a, b.done = %j', b.done);\nexports.done = true;\nconsole.log('a done');
\n

b.js:

\n
console.log('b starting');\nexports.done = false;\nconst a = require('./a.js');\nconsole.log('in b, a.done = %j', a.done);\nexports.done = true;\nconsole.log('b done');
\n

main.js:

\n
console.log('main starting');\nconst a = require('./a.js');\nconst b = require('./b.js');\nconsole.log('in main, a.done = %j, b.done = %j', a.done, b.done);
\n

When main.js loads a.js, then a.js in turn loads b.js. At that point, b.js tries to load a.js. In order to prevent an infinite loop, an unfinished copy of the a.js exports object is returned to the b.js module. b.js then finishes loading, and its exports object is provided to the a.js module.

\n

By the time main.js has loaded both modules, they're both finished. The output of this program would thus be:

\n
$ node main.js\nmain starting\na starting\nb starting\nin b, a.done = false\nb done\nin a, b.done = true\na done\nin main, a.done = true, b.done = true
\n

Careful planning is required to allow cyclic module dependencies to work correctly within an application.

\n

File modules#

\n

If the exact filename is not found, then Node.js will attempt to load the required filename with the added extensions: .js, .json, and finally .node.

\n

.js files are interpreted as JavaScript text files, and .json files are parsed as JSON text files. .node files are interpreted as compiled addon modules loaded with process.dlopen().

\n

A required module prefixed with '/' is an absolute path to the file. For example, require('/home/marco/foo.js') will load the file at /home/marco/foo.js.

\n

A required module prefixed with './' is relative to the file calling require(). That is, circle.js must be in the same directory as foo.js for require('./circle') to find it.

\n

Without a leading '/', './', or '../' to indicate a file, the module must either be a core module or is loaded from a node_modules folder.

\n

If the given path does not exist, require() will throw an Error with its code property set to 'MODULE_NOT_FOUND'.

\n

Folders as modules#

\n

It is convenient to organize programs and libraries into self-contained directories, and then provide a single entry point to those directories. There are three ways in which a folder may be passed to require() as an argument.

\n

The first is to create a package.json file in the root of the folder, which specifies a main module. An example package.json file might look like this:

\n
{ \"name\" : \"some-library\",\n  \"main\" : \"./lib/some-library.js\" }
\n

If this was in a folder at ./some-library, then require('./some-library') would attempt to load ./some-library/lib/some-library.js.

\n

This is the extent of the awareness of package.json files within Node.js.

\n

If there is no package.json file present in the directory, or if the \"main\" entry is missing or cannot be resolved, then Node.js will attempt to load an index.js or index.node file out of that directory. For example, if there was no package.json file in the previous example, then require('./some-library') would attempt to load:

\n
    \n
  • ./some-library/index.js
    • \n
  • ./some-library/index.node
    • \n
\n

If these attempts fail, then Node.js will report the entire module as missing with the default error:

\n
Error: Cannot find module 'some-library'
\n

Loading from node_modules folders#

\n

If the module identifier passed to require() is not a core module, and does not begin with '/', '../', or './', then Node.js starts at the parent directory of the current module, and adds /node_modules, and attempts to load the module from that location. Node.js will not append node_modules to a path already ending in node_modules.

\n

If it is not found there, then it moves to the parent directory, and so on, until the root of the file system is reached.

\n

For example, if the file at '/home/ry/projects/foo.js' called require('bar.js'), then Node.js would look in the following locations, in this order:

\n
    \n
  • /home/ry/projects/node_modules/bar.js
    • \n
  • /home/ry/node_modules/bar.js
    • \n
  • /home/node_modules/bar.js
    • \n
  • /node_modules/bar.js
    • \n
\n

This allows programs to localize their dependencies, so that they do not clash.

\n

It is possible to require specific files or sub modules distributed with a module by including a path suffix after the module name. For instance require('example-module/path/to/file') would resolve path/to/file relative to where example-module is located. The suffixed path follows the same module resolution semantics.

\n

Loading from the global folders#

\n

If the NODE_PATH environment variable is set to a colon-delimited list of absolute paths, then Node.js will search those paths for modules if they are not found elsewhere.

\n

On Windows, NODE_PATH is delimited by semicolons (;) instead of colons.

\n

NODE_PATH was originally created to support loading modules from varying paths before the current module resolution algorithm was defined.

\n

NODE_PATH is still supported, but is less necessary now that the Node.js ecosystem has settled on a convention for locating dependent modules. Sometimes deployments that rely on NODE_PATH show surprising behavior when people are unaware that NODE_PATH must be set. Sometimes a module's dependencies change, causing a different version (or even a different module) to be loaded as the NODE_PATH is searched.

\n

Additionally, Node.js will search in the following list of GLOBAL_FOLDERS:

\n
    \n
  • 1: $HOME/.node_modules
    • \n
  • 2: $HOME/.node_libraries
    • \n
  • 3: $PREFIX/lib/node
    • \n
\n

Where $HOME is the user's home directory, and $PREFIX is the Node.js configured node_prefix.

\n

These are mostly for historic reasons.

\n

It is strongly encouraged to place dependencies in the local node_modules folder. These will be loaded faster, and more reliably.

\n

The module wrapper#

\n

Before a module's code is executed, Node.js will wrap it with a function wrapper that looks like the following:

\n
(function(exports, require, module, __filename, __dirname) {\n// Module code actually lives in here\n});
\n

By doing this, Node.js achieves a few things:

\n
    \n
  • It keeps top-level variables (defined with var, const or let) scoped to the module rather than the global object.
    • \n
  • \n

    It helps to provide some global-looking variables that are actually specific to the module, such as:

    \n
      \n
    • The module and exports objects that the implementor can use to export values from the module.
      • \n
    • The convenience variables __filename and __dirname, containing the module's absolute filename and directory path.
      • \n
    \n
    • \n
\n

The module scope#

\n

__dirname#

\n

Added in: v0.1.27

\n
    \n
    • \n
\n

The directory name of the current module. This is the same as the path.dirname() of the __filename.

\n

Example: running node example.js from /Users/mjr

\n
console.log(__dirname);\n// Prints: /Users/mjr\nconsole.log(path.dirname(__filename));\n// Prints: /Users/mjr
\n

__filename#

\n

Added in: v0.0.1

\n
    \n
    • \n
\n

The file name of the current module. This is the current module file's absolute path with symlinks resolved.

\n

For a main program this is not necessarily the same as the file name used in the command line.

\n

See __dirname for the directory name of the current module.

\n

Examples:

\n

Running node example.js from /Users/mjr

\n
console.log(__filename);\n// Prints: /Users/mjr/example.js\nconsole.log(__dirname);\n// Prints: /Users/mjr
\n

Given two modules: a and b, where b is a dependency of a and there is a directory structure of:

\n
    \n
  • /Users/mjr/app/a.js
    • \n
  • /Users/mjr/app/node_modules/b/b.js
    • \n
\n

References to __filename within b.js will return /Users/mjr/app/node_modules/b/b.js while references to __filename within a.js will return /Users/mjr/app/a.js.

\n

exports#

\n

Added in: v0.1.12

\n