diff --git a/docs/README.1.md b/docs/README.1.md deleted file mode 100644 index c5922839ec..0000000000 --- a/docs/README.1.md +++ /dev/null @@ -1,1973 +0,0 @@ -Bgoonzblog - -(0.0.1) - -- [To find files by case-insensitive extension (ex: .jpg, .JPG, .jpG)](#to-find-files-by-case-insensitive-extension-ex-jpg-jpg-jpg) -- [To find directories](#to-find-directories) -- [To find files](#to-find-files) -- [To find files by octal permission](#to-find-files-by-octal-permission) -- [To find files with setuid bit set](#to-find-files-with-setuid-bit-set) -- [To find files with extension '.txt' and remove them](#to-find-files-with-extension-txt-and-remove-them) -- [To find files with extension '.txt' and look for a string into them](#to-find-files-with-extension-txt-and-look-for-a-string-into-them) -- [To find files with size bigger than 5 Mebibyte and sort them by size](#to-find-files-with-size-bigger-than-5-mebibyte-and-sort-them-by-size) -- [To find files bigger than 2 Megabyte and list them](#to-find-files-bigger-than-2-megabyte-and-list-them) -- [To find files modified more than 7 days ago and list file information](#to-find-files-modified-more-than-7-days-ago-and-list-file-information) -- [To find symlinks owned by a user and list file information](#to-find-symlinks-owned-by-a-user-and-list-file-information) -- [To search for and delete empty directories](#to-search-for-and-delete-empty-directories) -- [To search for directories named build at a max depth of 2 directories](#to-search-for-directories-named-build-at-a-max-depth-of-2-directories) -- [To search all files who are not in .git directory](#to-search-all-files-who-are-not-in-git-directory) -- [To find all files that have the same node (hard link) as MY\_FILE\_HERE](#to-find-all-files-that-have-the-same-node-hard-link-as-my_file_here) -- [To find all files in the current directory and modify their permissions](#to-find-all-files-in-the-current-directory-and-modify-their-permissions) - - [Description: need to : `sudo apt install rename`](#description-need-to--sudo-apt-install---------------rename) - - [code](#code) - - [Description](#description) - - [code](#code-1) - - [Description: recursively removes git related folders as well as internal use files / attributions in addition to empty folders](#description-recursively-removes-git-related-folders-as-well-as-internal-use-files--attributions-in-addition-to-empty-folders) - - [code](#code-2) - - [Description: clone all of a user or organization's git repositories](#description-clone-all-of-a-user-or-organizations-git-repositories) - - [code](#code-3) -- [Generalized](#generalized) -- [Clone all Git User](#clone-all-git-user) -- [Clone all Git Organization](#clone-all-git-organization) - - [Description](#description-1) - - [code](#code-4) - - [Description: recursively unzips folders and then deletes the zip file by the same name](#description-recursively-unzips-folders-and-then-deletes-the-zip-file-by-the-same-name) - - [code](#code-5) - - [Description](#description-2) - - [code](#code-6) - - [Description](#description-3) - - [code](#code-7) - - [Description](#description-4) - - [code](#code-8) - - [Description](#description-5) - - [code](#code-9) - - [Description: my standard repo utis package](#description-my-standard-repo-utis-package) - - [code](#code-10) - - [Description](#description-6) - - [code](#code-11) - - [Description](#description-7) - - [code](#code-12) - - [Description](#description-8) - - [code](#code-13) - - [Description](#description-9) - - [code](#code-14) -- [16.Appendir.js](#16appendirjs) - - [Description: combine the contents of every file in the contaning directory](#description-combine-the-contents-of-every-file-in-the-contaning-directory) - - [code](#code-15) - - [Description: followed by replace `'#' with '_'` in directory name](#description-followed-by-replace--with-_-in-directory-name) - - [code](#code-16) - - [Description](#description-10) - - [code](#code-17) - - [Description](#description-11) - - [code](#code-18) - - [Description](#description-12) - - [code](#code-19) - - [Description](#description-13) - - [code](#code-20) - - [Description](#description-14) - - [code](#code-21) - - [Description](#description-15) - - [code](#code-22) -- [24](#24) - - [Description](#description-16) - - [code](#code-23) - - [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](#description-creates-an-indexhtml-file-that-contains-all-the-files-in-the-working-directory-or-any-of-its-sub-folders-as-iframes-instead-of-anchor-tags) - - [code](#code-24) - - [Description](#description-17) - - [code](#code-25) - - [Description](#description-18) - - [code](#code-26) - - [Description: To remove a submodule you need to](#description-to-remove-a-submodule-you-need-to) - - [code](#code-27) - - [Description](#description-19) - - [code](#code-28) - - [Description](#description-20) - - [code](#code-29) - - [Description](#description-21) - - [code](#code-30) - - [Description](#description-22) - - [code](#code-31) - - [Description: ES5 --\> ES6](#description-es5----es6) - - [code](#code-32) - - [Description: Open Powershell as Administrator](#description-open-powershell-as-administrator) - - [code](#code-33) - - [Description](#description-23) - - [code](#code-34) - - [Description](#description-24) - - [code](#code-35) - - [Description](#description-25) - - [code](#code-36) - - [Description](#description-26) - - [code](#code-37) - - [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-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-its-sub-directories) - - [code](#code-38) - - [Description: replaces spaces in file and folder names with an `_` underscore](#description-replaces-spaces-in-file-and-folder-names-with-an-_-underscore) - - [code](#code-39) - - [Description](#description-27) - - [code](#code-40) -- [90](#90) - - [Description](#description-28) - - [code](#code-41) - - [Description](#description-29) - - [code](#code-42) - - [Description: to working directory](#description-to-working-directory) - - [code](#code-43) - - [Description: rename existing readme to blueprint.md](#description-rename-existing-readme-to-blueprintmd) - - [code](#code-44) - - [Description](#description-30) - - [code](#code-45) - - [Technologies Used:](#technologies-used) - - [Description](#description-31) - - [code](#code-46) - - [code](#code-47) -- [98](#98) - - [Description](#description-32) - - [code](#code-48) - - [Wiki Nav](#wiki-nav) - - [Dependencies](#dependencies) - - [Docs Structure](#docs-structure) - - [πŸš€ Quick start](#-quick-start) - - [🧐 What's inside](#-whats-inside) - - [πŸŽ“ Learning Gatsby](#-learning-gatsby) - - [πŸ’« Deploy](#-deploy) -- [Gatsby Project Structure | Gatsby](#gatsby-project-structure--gatsby) - - [\[\](https://www.gatsbyjs.com/docs/reference/gatsby-project-structure/#folders)Folders](#httpswwwgatsbyjscomdocsreferencegatsby-project-structurefoldersfolders) - - [\[\](https://www.gatsbyjs.com/docs/reference/gatsby-project-structure/#files)Files](#httpswwwgatsbyjscomdocsreferencegatsby-project-structurefilesfiles) - - [\[\](https://www.gatsbyjs.com/docs/reference/gatsby-project-structure/#miscellaneous)Miscellaneous](#httpswwwgatsbyjscomdocsreferencegatsby-project-structuremiscellaneousmiscellaneous) -- [Layout Components | Gatsby](#layout-components--gatsby) - - [\[\](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#gatsbys-approach-to-layouts)Gatsby's approach to layouts](#httpswwwgatsbyjscomdocshow-toroutinglayout-componentsgatsbys-approach-to-layoutsgatsbys-approach-to-layouts) - - [\[\](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#what-are-layout-components)What are layout components](#httpswwwgatsbyjscomdocshow-toroutinglayout-componentswhat-are-layout-componentswhat-are-layout-components) - - [\[\](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#how-to-create-layout-components)How to create layout components](#httpswwwgatsbyjscomdocshow-toroutinglayout-componentshow-to-create-layout-componentshow-to-create-layout-components) - - [\[\](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](#httpswwwgatsbyjscomdocshow-toroutinglayout-componentshow-to-import-and-add-layout-components-to-pageshow-to-import-and-add-layout-components-to-pages) - - [\[\](https://www.gatsbyjs.com/docs/how-to/routing/layout-components/#how-to-prevent-layout-components-from-unmounting)How to prevent layout components from unmounting](#httpswwwgatsbyjscomdocshow-toroutinglayout-componentshow-to-prevent-layout-components-from-unmountinghow-to-prevent-layout-components-from-unmounting) -- [Adding Markdown Pages | Gatsby](#adding-markdown-pages--gatsby) - - [\[\](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](#httpswwwgatsbyjscomdocshow-toroutingadding-markdown-pagesread-files-into-gatsby-from-the-filesystemread-files-into-gatsby-from-the-filesystem) - - [Install](#install) - - [Add plugin](#add-plugin) - - [\[\](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](#httpswwwgatsbyjscomdocshow-toroutingadding-markdown-pagestransform-markdown-to-html-and-frontmatter-to-data-using-gatsby-transformer-remarktransform-markdown-to-html-and-frontmatter-to-data-using-gatsby-transformer-remark) - - [Install transformer plugin](#install-transformer-plugin) - - [Configure plugin](#configure-plugin) - - [\[\](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#add-a-markdown-file)Add a Markdown file](#httpswwwgatsbyjscomdocshow-toroutingadding-markdown-pagesadd-a-markdown-fileadd-a-markdown-file) - - [Frontmatter for metadata in Markdown files](#frontmatter-for-metadata-in-markdown-files) - - [\[\](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](#httpswwwgatsbyjscomdocshow-toroutingadding-markdown-pagescreate-a-collection-route-for-the-markdown-filescreate-a-collection-route-for-the-markdown-files) - - [\[\](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#other-tutorials)Other tutorials](#httpswwwgatsbyjscomdocshow-toroutingadding-markdown-pagesother-tutorialsother-tutorials) -- [SOURCECODE](#sourcecode) -- [Source Code](#source-code) - -Generated with [Docky](https://github.com/markmur/docky) - -Introduction ------------- - -\# [⇨WEBSITEπŸ—ΊοΈβ‡¦](https://bgoonz-blog.netlify.app/) \#\#\#\#\# [⇨Privacy policy⇦](https://codepen.io/bgoonz/pen/LYLJZrW) - ------------------------------------------------------------------------- - -\#\#\#\#\# [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.gatsbyjs.io/) - -[![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/webdevhub42/bgoonz_blog_2.0/badge)](https://www.codefactor.io/repository/github/webdevhub42/bgoonz_blog_2.0)[![CodeScene System Mastery\*\*](https://codescene.io/projects/17026/status-badges/system-mastery)](https://codescene.io/projects/17026)![Profile views\*\*](https://views.whatilearened.today/views/github/bgoonz/views.svg)[![Gitter\*\*](https://badges.gitter.im/bgoonz/community.svg)](https://gitter.im/bgoonz/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)[![CodeScene Code Health](https://codescene.io/projects/17026/status-badges/code-health)](https://codescene.io/projects/17026)[![CodeQL](https://github.com/bgoonz/BGOONZ_BLOG_2.0/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/bgoonz/BGOONZ_BLOG_2.0/actions/workflows/codeql-analysis.yml) - -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 - - find . -name "* *" -type d | rename 's/ /_/g' - find . -name "* *" -type f | rename 's/ /_/g' - - ```sh - 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 - - 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 - - - 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 -=========== - - - - 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 -================== - - 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 -========================== - - 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 - - git pull - git init - git add . - git commit -m"update" - git push -u origin master - - git init - git add . - git commit -m"update" - git push -u origin main - - git init - git add . - git commit -m"update" - git push -u origin bryan-guner - - git init - git add . - git commit -m"update" - git push -u origin gh-pages - - 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 - - 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 - - - git stash - git pull - git stash pop - ------------------------------------------------------------------------- - -8. Prettier Code Formatter -========================== - -### Description - -> Notes: - -###### code - - sudo npm i prettier -g - - prettier --write . - - ------------------------------------------------------------------------- - -9. Pandoc -========= - -### Description - -> Notes: - -###### code - - 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 - - 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 - - black . - - prettier --write . - npm-recursive-install - ------------------------------------------------------------------------- - -11. Repo Utils Package -====================== - -### Description: my standard repo utis package - -> Notes: - -###### code - - npm i @bgoonz11/repoutils - ------------------------------------------------------------------------- - -12. Unix Tree Package Usage -=========================== - -### Description - -> Notes: - -###### code - - 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 - - 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 - - #!/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 - - - #!/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 - - 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 - - //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 - - 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 - - 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'` - - sudo sed -i '/\.js/!d' ./*scrap2.md - -###### code - - 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 - - sudo apt install uniq - uniq -u input.txt output.txt - ------------------------------------------------------------------------- - -21. Remove lines containing string -================================== - -### Description - -> Notes: - -###### code - - 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 - - - #!/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 - - 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 - - #!/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: - - - - -###### code - - - #!/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 - - 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 - - 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 - - git submodule deinit - ------------------------------------------------------------------------- - -29. GET GISTS -============= - -### Description - -> Notes: - -###### code - - 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 - - git remote remove origin - ------------------------------------------------------------------------- - -31. just clone .git folder -========================== - -### Description - -> Notes: - -###### code - - - git clone --bare --branch=master --single-branch https://github.com/bgoonz/My-Web-Dev-Archive.git - ------------------------------------------------------------------------- - -32. Undo recent pull request -============================ - -### Description - -> Notes: - -###### code - - git reset --hard master@{"10 minutes ago"} - ------------------------------------------------------------------------- - -33. Lebab -========= - -### Description: ES5 --> ES6 - -> Notes: - -###### code - - # 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 - - 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 - - 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 - - - wget -r -A.pdf https://overapi.com/git - ------------------------------------------------------------------------- - -38. Kill all node processes -=========================== - -### Description - -> Notes: - -###### code - - 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 - - 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) - - 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 - - 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 - - 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 - http://msdn.microsoft.com/en-us/library/bb787866%28VS.85%29.aspx - $progress++ - } - ------------------------------------------------------------------------- - -92. return to bash from zsh -=========================== - -### Description - -> Notes: - -###### code - - sudo apt --purge remove zsh - ------------------------------------------------------------------------- - -93. Symbolic Link -================= - -### Description: to working directory - -> Notes: - -###### code - - ln -s "$(pwd)" ~/NameOfLink - - ln -s "$(pwd)" ~/Downloads - ------------------------------------------------------------------------- - -94. auto generate readme -======================== - -### Description: rename existing readme to blueprint.md - -> Notes: - -###### code - - npx @appnest/readme generate - ------------------------------------------------------------------------- - -95. Log into postgres -===================== - -### Description - -> Notes: - -###### code - - sudo -u postgres psql - ------------------------------------------------------------------------- - -### 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 -======================================= - -### Description - -> Notes: - -###### code - - https://www.youtube.com/channel/UC1HDa0wWnIKUf-b4yY9JecQ?sub_confirmation=1 - ------------------------------------------------------------------------- - -97. Embed Repl.it In Medium Post -================================ - -###### code - - 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 - - - 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/) \#\#\# [**πŸŒβ‡’blogπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog) \#\#\# [**πŸŒβ‡’docsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs) \#\#\# [**πŸŒβ‡’readmeπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/readme) \#\#\# [**πŸŒβ‡’reviewπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/review) \#\#\# [**πŸŒβ‡’showcaseπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/showcase) \#\#\# [**πŸŒβ‡’blog/awesome-graphqlπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/awesome-graphql) \#\#\# [**πŸŒβ‡’blog/big-o-complexityπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/big-o-complexity) \#\#\# [**πŸŒβ‡’blog/blog-archiveπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/blog-archive) \#\#\# [**πŸŒβ‡’blog/blogwcommentsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/blogwcomments) \#\#\# [**πŸŒβ‡’blog/data-structuresπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/data-structures) \#\#\# [**πŸŒβ‡’blog/flow-control-in-pythonπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/flow-control-in-python) \#\#\# [**πŸŒβ‡’blog/functions-in-pythonπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/functions-in-python) \#\#\# [**πŸŒβ‡’blog/git-gatewayπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/git-gateway) \#\#\# [**πŸŒβ‡’blog/interview-questions-jsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/interview-questions-js) \#\#\# [**πŸŒβ‡’blog/media-queries-explainedπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/media-queries-explained) \#\#\# [**πŸŒβ‡’blog/my-mediumπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/my-medium) \#\#\# [**πŸŒβ‡’blog/netlify-cmsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/netlify-cms) \#\#\# [**πŸŒβ‡’blog/platform-docsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/platform-docs) \#\#\# [**πŸŒβ‡’blog/python-for-js-devπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/python-for-js-dev) \#\#\# [**πŸŒβ‡’blog/python-resourcesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/python-resources) \#\#\# [**πŸŒβ‡’blog/web-dev-trendsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/web-dev-trends) \#\#\# [**πŸŒβ‡’blog/web-scrapingπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/blog/web-scraping) \#\#\# [**πŸŒβ‡’docs/aboutπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/about) \#\#\# [**πŸŒβ‡’docs/articlesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles) \#\#\# [**πŸŒβ‡’docs/audioπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/audio) \#\#\# [**πŸŒβ‡’docs/careerπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/career) \#\#\# [**πŸŒβ‡’docs/communityπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/community) \#\#\# [**πŸŒβ‡’docs/contentπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/content) \#\#\# [**πŸŒβ‡’docs/docsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs) \#\#\# [**πŸŒβ‡’docs/faqπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/faq) \#\#\# [**πŸŒβ‡’docs/galleryπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/gallery) \#\#\# [**πŸŒβ‡’docs/interactπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/interact) \#\#\# [**πŸŒβ‡’docs/javascriptπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/javascript) \#\#\# [**πŸŒβ‡’docs/leetcodeπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/leetcode) \#\#\# [**πŸŒβ‡’docs/other-contentπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/other-content) \#\#\# [**πŸŒβ‡’docs/privacy-policyπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/privacy-policy) \#\#\# [**πŸŒβ‡’docs/projectsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/projects) \#\#\# [**πŸŒβ‡’docs/pythonπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python) \#\#\# [**πŸŒβ‡’docs/quick-referenceπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference) \#\#\# [**πŸŒβ‡’docs/reactπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/react) \#\#\# [**πŸŒβ‡’docs/referenceπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference) \#\#\# [**πŸŒβ‡’docs/searchπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/search) \#\#\# [**πŸŒβ‡’docs/sitemapπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/sitemap) \#\#\# [**πŸŒβ‡’docs/toolsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/tools) \#\#\# [**πŸŒβ‡’docs/tutorialsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/tutorials) \#\#\# [**πŸŒβ‡’docs/about/eng-portfolioπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/about/eng-portfolio) \#\#\# [**πŸŒβ‡’docs/about/ideas-for-this-websiteπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/about/ideas-for-this-website) \#\#\# [**πŸŒβ‡’docs/about/intrestsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/about/intrests) \#\#\# [**πŸŒβ‡’docs/about/interviewπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/about/interview) \#\#\# [**πŸŒβ‡’docs/about/resumeπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/about/resume) \#\#\# [**πŸŒβ‡’docs/articles/basic-web-devπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/basic-web-dev) \#\#\# [**πŸŒβ‡’docs/articles/buffersπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/buffers) \#\#\# [**πŸŒβ‡’docs/articles/dev-depπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/dev-dep) \#\#\# [**πŸŒβ‡’docs/articles/event-loopπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/event-loop) \#\#\# [**πŸŒβ‡’docs/articles/fs-moduleπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/fs-module) \#\#\# [**πŸŒβ‡’docs/articles/how-the-web-worksπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/how-the-web-works) \#\#\# [**πŸŒβ‡’docs/articles/httpπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/http) \#\#\# [**πŸŒβ‡’docs/articles/installπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/install) \#\#\# [**πŸŒβ‡’docs/articles/introπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/intro) \#\#\# [**πŸŒβ‡’docs/articles/media-queries-no-moreπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/media-queries-no-more) \#\#\# [**πŸŒβ‡’docs/articles/module-exportsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/module-exports) \#\#\# [**πŸŒβ‡’docs/articles/nextjsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/nextjs) \#\#\# [**πŸŒβ‡’docs/articles/node-api-expressπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/node-api-express) \#\#\# [**πŸŒβ‡’docs/articles/node-cli-argsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/node-cli-args) \#\#\# [**πŸŒβ‡’docs/articles/node-common-modulesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/node-common-modules) \#\#\# [**πŸŒβ‡’docs/articles/node-env-variablesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/node-env-variables) \#\#\# [**πŸŒβ‡’docs/articles/node-js-languageπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/node-js-language) \#\#\# [**πŸŒβ‡’docs/articles/node-package-managerπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/node-package-manager) \#\#\# [**πŸŒβ‡’docs/articles/node-replπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/node-repl) \#\#\# [**πŸŒβ‡’docs/articles/node-run-cliπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/node-run-cli) \#\#\# [**πŸŒβ‡’docs/articles/nodejsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/nodejs) \#\#\# [**πŸŒβ‡’docs/articles/nodevsbrowserπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/nodevsbrowser) \#\#\# [**πŸŒβ‡’docs/articles/npmπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/npm) \#\#\# [**πŸŒβ‡’docs/articles/npxπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/npx) \#\#\# [**πŸŒβ‡’docs/articles/os-moduleπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/os-module) \#\#\# [**πŸŒβ‡’docs/articles/package-lockπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/package-lock) \#\#\# [**πŸŒβ‡’docs/articles/reading-filesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/reading-files) \#\#\# [**πŸŒβ‡’docs/articles/semanticπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/semantic) \#\#\# [**πŸŒβ‡’docs/articles/semantic-htmlπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/semantic-html) \#\#\# [**πŸŒβ‡’docs/articles/the-uniform-resource-locator-(url)πŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/the-uniform-resource-locator-(url)>) \#\#\# [**πŸŒβ‡’docs/articles/understanding-firebaseπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/understanding-firebase) \#\#\# [**πŸŒβ‡’docs/articles/v8πŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/v8) \#\#\# [**πŸŒβ‡’docs/articles/web-standards-checklistπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/web-standards-checklist) \#\#\# [**πŸŒβ‡’docs/articles/webdev-toolsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/webdev-tools) \#\#\# [**πŸŒβ‡’docs/articles/write-2-json-with-pythonπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/write-2-json-with-python) \#\#\# [**πŸŒβ‡’docs/articles/writing-filesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/articles/writing-files) \#\#\# [**πŸŒβ‡’docs/audio/audioπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/audio/audio) \#\#\# [**πŸŒβ‡’docs/audio/audio-feature-extractionπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/audio/audio-feature-extraction) \#\#\# [**πŸŒβ‡’docs/audio/dfftπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/audio/dfft) \#\#\# [**πŸŒβ‡’docs/audio/discrete-fftπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/audio/discrete-fft) \#\#\# [**πŸŒβ‡’docs/audio/dtw-python-explainedπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/audio/dtw-python-explained) \#\#\# [**πŸŒβ‡’docs/audio/dynamic-time-warpingπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/audio/dynamic-time-warping) \#\#\# [**πŸŒβ‡’docs/audio/web-audio-apiπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/audio/web-audio-api) \#\#\# [**πŸŒβ‡’docs/career/confidenceπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/career/confidence) \#\#\# [**πŸŒβ‡’docs/career/dev-interviewπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/career/dev-interview) \#\#\# [**πŸŒβ‡’docs/career/interview-dos-n-dontsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/career/interview-dos-n-donts) \#\#\# [**πŸŒβ‡’docs/career/job-boardsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/career/job-boards) \#\#\# [**πŸŒβ‡’docs/community/an-open-letter-2-future-developersπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/community/an-open-letter-2-future-developers) \#\#\# [**πŸŒβ‡’docs/community/video-chatπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/community/video-chat) \#\#\# [**πŸŒβ‡’docs/content/algoπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/content/algo) \#\#\# [**πŸŒβ‡’docs/content/archiveπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/content/archive) \#\#\# [**πŸŒβ‡’docs/content/data-structures-algoπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/content/data-structures-algo) \#\#\# [**πŸŒβ‡’docs/content/gatsby-Queries-MutationsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/content/gatsby-Queries-Mutations) \#\#\# [**πŸŒβ‡’docs/content/history-apiπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/content/history-api) \#\#\# [**πŸŒβ‡’docs/content/projectsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/content/projects) \#\#\# [**πŸŒβ‡’docs/content/recent-projectsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/content/recent-projects) \#\#\# [**πŸŒβ‡’docs/content/trouble-shootingπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/content/trouble-shooting) \#\#\# [**πŸŒβ‡’docs/docs/appendixπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/appendix) \#\#\# [**πŸŒβ‡’docs/docs/bashπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/bash) \#\#\# [**πŸŒβ‡’docs/docs/contentπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/content) \#\#\# [**πŸŒβ‡’docs/docs/cssπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/css) \#\#\# [**πŸŒβ‡’docs/docs/data-structures-docsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/data-structures-docs) \#\#\# [**πŸŒβ‡’docs/docs/git-referenceπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/git-reference) \#\#\# [**πŸŒβ‡’docs/docs/git-reposπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/git-repos) \#\#\# [**πŸŒβ‡’docs/docs/html-specπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/html-spec) \#\#\# [**πŸŒβ‡’docs/docs/markdownπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/markdown) \#\#\# [**πŸŒβ‡’docs/docs/no-whiteboardingπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/no-whiteboarding) \#\#\# [**πŸŒβ‡’docs/docs/node-docs-completeπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/node-docs-complete) \#\#\# [**πŸŒβ‡’docs/docs/node-docs-fullπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/node-docs-full) \#\#\# [**πŸŒβ‡’docs/docs/regex-in-jsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/regex-in-js) \#\#\# [**πŸŒβ‡’docs/docs/sitemapπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/docs/sitemap) \#\#\# [**πŸŒβ‡’docs/faq/contactπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/faq/contact) \#\#\# [**πŸŒβ‡’docs/faq/plug-insπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/faq/plug-ins) \#\#\# [**πŸŒβ‡’docs/interact/callstack-visualπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/interact/callstack-visual) \#\#\# [**πŸŒβ‡’docs/interact/clockπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/interact/clock) \#\#\# [**πŸŒβ‡’docs/interact/jupyter-notebooksπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/interact/jupyter-notebooks) \#\#\# [**πŸŒβ‡’docs/interact/other-sitesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/interact/other-sites) \#\#\# [**πŸŒβ‡’docs/interact/video-chatπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/interact/video-chat) \#\#\# [**πŸŒβ‡’docs/javascript/arrow-functionsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/javascript/arrow-functions) \#\#\# [**πŸŒβ‡’docs/javascript/await-keywordπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/javascript/await-keyword) \#\#\# [**πŸŒβ‡’docs/javascript/bigoπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/javascript/bigo) \#\#\# [**πŸŒβ‡’docs/javascript/clean-codeπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/javascript/clean-code) \#\#\# [**πŸŒβ‡’docs/javascript/constructor-functionsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/javascript/constructor-functions) \#\#\# [**πŸŒβ‡’docs/javascript/promisesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/javascript/promises) \#\#\# [**πŸŒβ‡’docs/javascript/reviewπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/javascript/review) \#\#\# [**πŸŒβ‡’docs/javascript/this-is-about-thisπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/javascript/this-is-about-this) \#\#\# [**πŸŒβ‡’docs/projects/medium-linksπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/projects/medium-links) \#\#\# [**πŸŒβ‡’docs/projects/my-websitesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/projects/my-websites) \#\#\# [**πŸŒβ‡’docs/python/at-lengthπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python/at-length) \#\#\# [**πŸŒβ‡’docs/python/basicsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python/basics) \#\#\# [**πŸŒβ‡’docs/python/cheat-sheetπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python/cheat-sheet) \#\#\# [**πŸŒβ‡’docs/python/comprehensive-guideπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python/comprehensive-guide) \#\#\# [**πŸŒβ‡’docs/python/examplesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python/examples) \#\#\# [**πŸŒβ‡’docs/python/flow-controlπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python/flow-control) \#\#\# [**πŸŒβ‡’docs/python/functionsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python/functions) \#\#\# [**πŸŒβ‡’docs/python/google-sheets-apiπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python/google-sheets-api) \#\#\# [**πŸŒβ‡’docs/python/intro-for-js-devsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python/intro-for-js-devs) \#\#\# [**πŸŒβ‡’docs/python/python-dsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python/python-ds) \#\#\# [**πŸŒβ‡’docs/python/snippetsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/python/snippets) \#\#\# [**πŸŒβ‡’docs/quick-reference/EmmetπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/Emmet) \#\#\# [**πŸŒβ‡’docs/quick-reference/all-emojisπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/all-emojis) \#\#\# [**πŸŒβ‡’docs/quick-reference/create-react-appπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/create-react-app) \#\#\# [**πŸŒβ‡’docs/quick-reference/git-bashπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/git-bash) \#\#\# [**πŸŒβ‡’docs/quick-reference/git-tricksπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/git-tricks) \#\#\# [**πŸŒβ‡’docs/quick-reference/google-firebaseπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/google-firebase) \#\#\# [**πŸŒβ‡’docs/quick-reference/heroku-error-codesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/heroku-error-codes) \#\#\# [**πŸŒβ‡’docs/quick-reference/installationπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/installation) \#\#\# [**πŸŒβ‡’docs/quick-reference/markdown-dropdownsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/markdown-dropdowns) \#\#\# [**πŸŒβ‡’docs/quick-reference/minifictionπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/minifiction) \#\#\# [**πŸŒβ‡’docs/quick-reference/new-repo-instructionsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/new-repo-instructions) \#\#\# [**πŸŒβ‡’docs/quick-reference/psql-setupπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/psql-setup) \#\#\# [**πŸŒβ‡’docs/quick-reference/pull-request-rubricπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/pull-request-rubric) \#\#\# [**πŸŒβ‡’docs/quick-reference/quick-linksπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/quick-links) \#\#\# [**πŸŒβ‡’docs/quick-reference/topReposπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/topRepos) \#\#\# [**πŸŒβ‡’docs/quick-reference/understanding-pathπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/understanding-path) \#\#\# [**πŸŒβ‡’docs/quick-reference/vscode-themesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/quick-reference/vscode-themes) \#\#\# [**πŸŒβ‡’docs/react/cheatsheetπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/react/cheatsheet) \#\#\# [**πŸŒβ‡’docs/react/createReactAppπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/react/createReactApp) \#\#\# [**πŸŒβ‡’docs/react/demoπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/react/demo) \#\#\# [**πŸŒβ‡’docs/react/jsxπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/react/jsx) \#\#\# [**πŸŒβ‡’docs/react/react-docsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/react/react-docs) \#\#\# [**πŸŒβ‡’docs/react/react-in-depthπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/react/react-in-depth) \#\#\# [**πŸŒβ‡’docs/react/react2πŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/react/react2) \#\#\# [**πŸŒβ‡’docs/react/render-elementsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/react/render-elements) \#\#\# [**πŸŒβ‡’docs/reference/awesome-listsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/awesome-lists) \#\#\# [**πŸŒβ‡’docs/reference/awesome-staticπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/awesome-static) \#\#\# [**πŸŒβ‡’docs/reference/bookmarksπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/bookmarks) \#\#\# [**πŸŒβ‡’docs/reference/embed-the-webπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/embed-the-web) \#\#\# [**πŸŒβ‡’docs/reference/github-searchπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/github-search) \#\#\# [**πŸŒβ‡’docs/reference/how-2-reinstall-npmπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/how-2-reinstall-npm) \#\#\# [**πŸŒβ‡’docs/reference/how-to-kill-a-processπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/how-to-kill-a-process) \#\#\# [**πŸŒβ‡’docs/reference/installing-nodeπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/installing-node) \#\#\# [**πŸŒβ‡’docs/reference/intro-to-nodejsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/intro-to-nodejs) \#\#\# [**πŸŒβ‡’docs/reference/notes-templateπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/notes-template) \#\#\# [**πŸŒβ‡’docs/reference/psqlπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/psql) \#\#\# [**πŸŒβ‡’docs/reference/resourcesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/resources) \#\#\# [**πŸŒβ‡’docs/reference/vscodeπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/vscode) \#\#\# [**πŸŒβ‡’docs/reference/web-api'sπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/reference/web-api's) \#\#\# [**πŸŒβ‡’docs/tools/data-structuresπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/tools/data-structures) \#\#\# [**πŸŒβ‡’docs/tools/dev-utilitiesπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/tools/dev-utilities) \#\#\# [**πŸŒβ‡’docs/tools/google-cloudπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/tools/google-cloud) \#\#\# [**πŸŒβ‡’docs/tools/markdown-htmlπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/tools/markdown-html) \#\#\# [**πŸŒβ‡’docs/tools/more-toolsπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/tools/more-tools) \#\#\# [**πŸŒβ‡’docs/tutorials/google-lighthouse-cliπŸ—ΊοΈ**](https://bgoonz-blog.netlify.app/docs/tutorials/google-lighthouse-cli) - ------------------------------------------------------------------------- - ------------------------------------------------------------------------- - ------------------------------------------------------------------------- - -β†žβ†  Getting Started With GatsbyJS β†žβ†  \# - ------------------------------------------------------------------------- - -πŸš€ Quick start -------------- - -1. **Create a Gatsby site.** - - Use the Gatsby CLI to create a new site, specifying the default starter. - - # create a new Gatsby site using the default starter - gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default - -2. **Start developing.** - - Navigate into your new site's directory and start it up. - - cd my-default-starter/ - gatsby develop - -3. **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/).\\\*\\](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/).\\\*\\](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. - - 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 - - ---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 (

{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 ---------------------------------------------------------------------------------------------------------- - ------------------------------------------------------------------------- - -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 (
    {_.map(child_pages, (child_page, child_page_idx) => (
  • {_.get(child_page, 'frontmatter.title', null)}
    • ))}
); } }` --- `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 (

{_.get(this.props, 'pageContext.site.siteMetadata.footer.content', null) && ( {htmlToReact(_.get(this.props, 'pageContext.site.siteMetadata.footer.content', null))} )} {_.map(_.get(this.props, 'pageContext.site.siteMetadata.footer.links', null), (action, action_idx) => ( ))}{' '}

{_.get(this.props, 'pageContext.site.siteMetadata.footer.has_social', null) && (
{_.map(_.get(this.props, 'pageContext.site.siteMetadata.footer.social_links', null), (action, action_idx) => ( ))}{' '}
)}{' '}
); } }` --- `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' && ( ) )} ); } }` --- `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 ( {_.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)} {_.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 ; })() ) : ( ); })} {_.get(this.props, 'pageContext.site.siteMetadata.favicon', null) && ( )}
{/* INSERT SEARCH BAR HERE */} {/*
*/}
{this.props.children}
); } }` --- `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 (
{_.get(section, 'image', null) && (
{_.get(section,
)}
{_.get(section, 'title', null) && (

{_.get(section, 'title', null)}

)} {_.get(section, 'content', null) &&
{markdownify(_.get(section, 'content', null))}
} {_.get(section, 'actions', null) && (
)}
); } }` --- `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 (
{(_.get(section, 'title', null) || _.get(section, 'subtitle', null)) && (
{_.get(section, 'title', null) &&

{_.get(section, 'title', null)}

} {_.get(section, 'subtitle', null) &&

{htmlToReact(_.get(section, 'subtitle', null))}

}
)} {_.get(section, 'actions', null) && (
)}
); } }` --- `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 (
{(_.get(section, 'title', null) || _.get(section, 'subtitle', null)) && (
{_.get(section, 'title', null) &&

{_.get(section, 'title', null)}

} {_.get(section, 'subtitle', null) &&

{htmlToReact(_.get(section, 'subtitle', null))}

}
)}
{_.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 (

{_.get(doc_section_page, 'frontmatter.title', null)}

{_.get(doc_section_page, 'frontmatter.excerpt', null) && (

{htmlToReact(_.get(doc_section_page, 'frontmatter.excerpt', null))}

)}
Learn More
); })}
); } }` --- `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 (
{(_.get(section, 'title', null) || _.get(section, 'subtitle', null)) && (
{_.get(section, 'title', null) &&

{_.get(section, 'title', null)}

} {_.get(section, 'subtitle', null) &&

{htmlToReact(_.get(section, 'subtitle', null))}

}
)} {_.get(section, 'grid_items', null) && (
{_.map(_.get(section, 'grid_items', null), (item, item_idx) => (
{_.get(item, 'image', null) && (
{_.get(item,
)} {_.get(item, 'title', null) && (

{_.get(item, 'title_url', null) ? ( {_.get(item, 'title', null)} ) : ( _.get(item, 'title', null) )}

)} {_.get(item, 'content', null) && (
{markdownify(_.get(item, 'content', null))}
)} {_.get(item, 'actions', null) && (
)}
))}
)}
); } }` --- `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 (
{_.get(section, 'image', null) && (
)}
{_.get(section, 'title', null) && (

{_.get(section, 'title', null)}

)} {_.get(section, 'content', null) &&
{markdownify(_.get(section, 'content', null))}
} {_.get(section, 'actions', null) && (
)}
); } }` --- `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 (
    {_.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 (
    • ); })}
); } }` `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 ( {_.map(_.get(this.props, 'pageContext.frontmatter.sections', null), (section, section_idx) => { let component = _.upperFirst(_.camelCase(_.get(section, 'type', null))); let Component = components[component]; return ; })} ); } } `` --- `` 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 (
{_.get(this.props, 'pageContext.frontmatter.image', null) && (
)}

{_.get(this.props, 'pageContext.frontmatter.title', null)}

{_.get(this.props, 'pageContext.frontmatter.subtitle', null) && (

{_.get(this.props, 'pageContext.frontmatter.subtitle', null)}

)}
{_.map(display_posts, (post, post_idx) => (
{_.get(post, 'frontmatter.thumb_image', null) && ( {_.get(this.props, )}

{_.get(post, 'frontmatter.title', null)}

{_.get(post, 'frontmatter.excerpt', null) && (

{_.get(post, 'frontmatter.excerpt', null)}

{_.get(this.props, 'pageContext.frontmatter.has_more_link', null) === true && _.get(this.props, 'pageContext.frontmatter.more_link_text', null) && (

{_.get(this.props, 'pageContext.frontmatter.more_link_text', null)}

)} )}
))}
); } } `` --- `` 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 (

{_.get(this.props, 'pageContext.frontmatter.title', null)}

{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 ( {has_children && (
    {_.map(child_pages, (child_page, child_page_idx) => (
  • {_.get(child_page, 'frontmatter.title', null)}
    • ))}
)} ); })()}
); } } `` --- `` 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 (
{_.get(this.props, 'pageContext.frontmatter.image', null) && (
)}

{_.get(this.props, 'pageContext.frontmatter.title', null)}

{_.get(this.props, 'pageContext.frontmatter.subtitle', null) && (
{htmlToReact(_.get(this.props, 'pageContext.frontmatter.subtitle', null))}
)}
{htmlToReact(_.get(this.props, 'pageContext.html', null))}
 ); } } `` --- `` 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 (
{_.get(this.props, 'pageContext.frontmatter.image', null) && (
)}

{_.get(this.props, 'pageContext.frontmatter.title', null)}

{_.get(this.props, 'pageContext.frontmatter.subtitle', null) && (
{htmlToReact(_.get(this.props, 'pageContext.frontmatter.subtitle', null))}
)}
{htmlToReact(_.get(this.props, 'pageContext.html', null))}
 ); } } `` diff --git a/src/sass/imports/_docs.scss b/src/sass/imports/_docs.scss index 955ded7810..083312f3a0 100644 --- a/src/sass/imports/_docs.scss +++ b/src/sass/imports/_docs.scss @@ -250,11 +250,9 @@ } } - .page-nav-inside { - display: none; - - &.has-links { - display: block; + .page-nav-title { + &:only-child { + display: none; } } } diff --git a/src/sass/imports/_general.scss b/src/sass/imports/_general.scss index 848e785864..558cf693ea 100644 --- a/src/sass/imports/_general.scss +++ b/src/sass/imports/_general.scss @@ -178,7 +178,7 @@ embed, iframe, object, video { - max-width: 1400px !important; + max-width: 100%; } img { diff --git a/src/sass/imports/_helpers.scss b/src/sass/imports/_helpers.scss index d3b885c696..aa08b2ee13 100644 --- a/src/sass/imports/_helpers.scss +++ b/src/sass/imports/_helpers.scss @@ -26,11 +26,17 @@ } // Responsive video wrappers -.js-reframe { - margin: 1.875em 0; +.block-content, +.post-content { + iframe[src*='vimeo.com'], + iframe[src*='youtube.com'] { + display: block; + margin-bottom: 1.875em; + margin-top: 1.875em; - &:first-child { - margin-top: 0; + &:first-child { + margin-top: 0; + } } } @@ -45,6 +51,12 @@ &:first-child { margin-top: 0; } + + p { + &:last-child { + margin-bottom: 0; + } + } } .note { @@ -114,7 +126,7 @@ background-size: cover; bottom: 0; left: 0; - opacity: 0.6; + opacity: 0.2; position: absolute; right: 0; top: 0; diff --git a/src/sass/imports/_sections.scss b/src/sass/imports/_sections.scss index a6a0cc1ad0..bf9d393492 100644 --- a/src/sass/imports/_sections.scss +++ b/src/sass/imports/_sections.scss @@ -152,7 +152,7 @@ .has-gradient { border-radius: $border-radius; margin-bottom: 1.875em; - padding: 2.75em 3vw 1.875em; + padding: 3.75em 3vw 1.875em; } .block-header {