├── .github ├── FUNDING.yml ├── VSCodepro.jpg └── ahmadawais.jpg ├── .gitignore ├── .markdownlint.json ├── .vscode ├── settings.json ├── spellright.dict └── tasks.json ├── README.md ├── package-lock.json ├── package.json └── videos ├── Breadcrumbs └── settings.json ├── CSS └── styles.css ├── Code CLI ├── cli.md ├── package.1.json └── package.2.json ├── Extensions ├── Go Setup │ └── go-lang.md ├── Python Setup │ └── python.md ├── Ruby Setup │ └── ruby.md ├── demo.js ├── demo.md └── extensions.md ├── File Association ├── .ahmad └── settings.json ├── Focus └── focus.md ├── Git Integration ├── demo.md ├── gitRange.js └── settings.json ├── HTML Emmet ├── index.html └── settings.json ├── HTML Formatting + Insert New Line └── settings.json ├── HTML Tag Highlight └── settings.json ├── JavaScript-Debug ├── 1-nodejs-nodemon │ ├── .gitignore │ ├── .vscode │ │ ├── launch.json │ │ └── spellright.dict │ ├── LICENSE │ ├── README.MD │ ├── app.js │ ├── bin │ │ └── www │ ├── data │ │ ├── nodejs-cart-1.png │ │ ├── nodejs-cart-2.png │ │ └── products.json │ ├── models │ │ └── cart.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── stylesheets │ │ │ └── style.css │ ├── routes │ │ └── index.js │ └── views │ │ ├── cart.hbs │ │ ├── error.hbs │ │ ├── index.hbs │ │ ├── layout.hbs │ │ └── partials │ │ └── header.hbs ├── 2-es6 │ ├── .babelrc │ ├── .vscode │ │ ├── launch.json │ │ └── spellright.dict │ ├── README.md │ ├── dist │ │ ├── index.html │ │ └── main.min.js │ ├── modules │ │ └── log.js │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── index.js │ ├── webpack.config.js │ └── yarn.lock ├── 3-chrome │ ├── .gitignore │ ├── .vscode │ │ ├── launch.json │ │ └── spellright.dict │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── registerServiceWorker.js │ └── yarn.lock └── index.js ├── JavaScript ├── .eslintrc.js ├── .gitignore ├── README.md ├── dist │ ├── index.html │ └── main.min.js ├── gulpfile.babel.js ├── modules │ ├── headingChanger.js │ ├── log.js │ ├── subtract.js │ └── sum.js ├── package-lock.json ├── package.json ├── settings.json ├── src │ └── index.js └── webpack.config.js ├── Markdown ├── .markdownlint.json ├── Markdown.md └── settings.json ├── PHP+WordPress-Setup ├── WordPress-Debug.md ├── WordPress.md ├── php.md └── settings.json ├── Power User Workflows — File Editing ├── -power-user.md ├── 1-pro-workflow.md ├── 10-pro-workflow.md ├── 11-pro-workflow.md ├── 12-pro-workflow.md ├── 13-pro-workflow.md ├── 2-pro-workflow.md ├── 3-pro-workflow.md ├── 4-pro-workflow.md ├── 5-pro-workflow.md ├── 6-pro-workflow.md ├── 7-pro-workflow.md ├── 8-pro-workflow.md └── 9-pro-workflow.md ├── Pug ├── pug.pug └── settings.json ├── Random Files └── stack.js ├── Search & Replace └── searchReplace.md ├── Snippets Workflow └── demo.js ├── Spelling Check └── settings.json └── UI Part 2 └── settings.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | # github: [ahmadawais] 4 | custom: ['https://VSCode.pro'] 5 | -------------------------------------------------------------------------------- /.github/VSCodepro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmadawais/VSCode-Tips-Tricks/26c186d70a62a1f7dd8a3d081bb3df5ef575103b/.github/VSCodepro.jpg -------------------------------------------------------------------------------- /.github/ahmadawais.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmadawais/VSCode-Tips-Tricks/26c186d70a62a1f7dd8a3d081bb3df5ef575103b/.github/ahmadawais.jpg -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Packages # 2 | ############ 3 | *.7z 4 | *.dmg 5 | *.gz 6 | *.bz2 7 | *.iso 8 | *.jar 9 | *.rar 10 | *.tar 11 | *.zip 12 | *.tgz 13 | *.map 14 | 15 | # Logs and databases # 16 | ###################### 17 | *.log 18 | *.sql 19 | 20 | # OS generated files # 21 | ###################### 22 | **.DS_Store* 23 | ehthumbs.db 24 | Icon? 25 | Thumbs.db 26 | ._* 27 | 28 | # Vim generated files # 29 | ###################### 30 | *.un~ 31 | 32 | # SASS # 33 | ########## 34 | **/.sass-cache 35 | **/.sass-cache/* 36 | **/.map 37 | 38 | # Composer # 39 | ########## 40 | vendors/composer/ 41 | !assets/js/vendor/ 42 | wpcs/ 43 | composer.lock 44 | 45 | # Bower # 46 | ########## 47 | assets/bower_components/* 48 | 49 | # Codekit # 50 | ########## 51 | /codekit-config.json 52 | *.codekit 53 | **.codekit-cache/* 54 | 55 | # NPM # 56 | ########## 57 | node_modules 58 | 59 | # Compiled Files and Build Dirs # 60 | ########## 61 | /README.html 62 | /build/ 63 | 64 | # PhpStrom Project Files # 65 | .idea/ 66 | library/vendors/composer 67 | assets/img/.DS_Store 68 | assets/sass/HTML 69 | assets/sass/Rails 70 | HTML 71 | Rails 72 | -------------------------------------------------------------------------------- /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "default": true, 3 | "MD007": false, 4 | "MD041": false, 5 | "MD002": false, 6 | "MD012": false, 7 | "MD033": false, 8 | "MD010": false, 9 | "MD013": false, 10 | "MD026": false 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // ——— Not in the Course yet ————— 3 | "telemetry.enableCrashReporter": false, 4 | "telemetry.enableTelemetry": false, 5 | "spellright.language": ["en"], 6 | "spellright.documentTypes": ["latex", "plaintext", "html", "jade", "pug", "css", "php", "javascript"] 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/spellright.dict: -------------------------------------------------------------------------------- 1 | Worwox 2 | Nodemon 3 | js 4 | commonjs 5 | eslint 6 | ecma 7 | jsx 8 | linebreak 9 | uglifycss 10 | Autoprefixing 11 | globbing 12 | scss 13 | gutil 14 | beepbeep 15 | Keymap 16 | Intelephense 17 | phpcbf 18 | phpcs 19 | Intelli 20 | vscode 21 | phpdoc 22 | leizongmin 23 | wix 24 | drKnoxy 25 | xabikos 26 | mikestead 27 | msjsdiag 28 | letrieu 29 | dotenv 30 | intellisense 31 | json 32 | Xdebug 33 | VSCODEPRO 34 | Linting 35 | conda 36 | rubocop 37 | Haml 38 | Solargraph 39 | Snippets 40 | awais 41 | Gutkowski 42 | Bartholomeborough 43 | 44 | img 45 | adrs 46 | spellright 47 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the tasks.json format 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "type": "npm", 8 | "script": "dev", 9 | "path": "videos/JavaScript/", 10 | "problemMatcher": [] 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | 4 | 5 | 6 |

7 | 8 |

VSCode Tips Tricks

9 | 10 |

VSCode Tips Tricks is the Examples and Workflows repository of Visual Studio Code Power User Course
→ https://VSCode.pro 11 | 12 |
13 |
14 |
15 |
16 | 17 | 18 | 19 | 20 | 21 |

22 | 23 |

Ahmad Awais

24 | 25 |

🎩 VP of DevRel, RapidAPI — Google Developers Expert & Full-time #OpenSourcerer 🥑 JavaScript Dev Advocate 🌳 Node.js Community Committee Member ✌️ Builds professional Open Source Software used by over 902,556 Developers (inc. engineers at Google, Microsoft, Intel, HP…) 🔥 Ridiculously hard-working Full Stack Web Dev ⓦ Regular WordPress Core Developer 📣 TEDx Speaker 🙌 Cloud/DevOps Community Evangelist ✍️ Member of SmashingMagazine Experts Panel, Featured/published author at CSS-Tricks, Tuts+, Scotch.io, TorqueMag, SitePoint…😂 Funnier than your mom. Seriously funny! You should follow him on twitter @MrAhmadAwais → 26 | 27 | 28 | 29 | It's a known fact that Ahmad loves purple. Purple can be genius. So, he built a VSCode theme which 30 | quickly became the third most downloaded VSCode theme i.e. 1,287,439+ times. Currently used by 595,255+ 31 | developers. Over 82 developers swear by its awesomeness with five-star ratings. Install it here 32 | 33 | > Install this theme called 🦄 Shades of Purple →

34 | 35 | ## Get Started Now! 36 | 37 |

As developers, we spend over 200 Hrs/month with our code editors — it's only fair to learn your next editor deeply. This course will save you 15-20 hours every month. I've poured my dev-heart out in this course. Spent 1,000+ hours so that you don't have to. From building a custom course platform to audio/video setup. I assure you this ridiculous hard work is worth its weight in gold. By buying this course, you're enabling me; a full-time open source dev to build more free/premium courses.
Got questions? I got answers or just tweet at @MrAhmadAwais →

38 | 39 | ## More Details 40 | 41 | - **COURSE**: [VSCode.pro](https://VSCode.pro?utm_source=VSCode-Tips-Tricks) → 42 | - **SIGNUP**: [Starter & Master Packages](https://VSCode.pro/?utm_source=VSCode-Tips-Tricks#signup) → 43 | - **FAQ**: [Frequently Asked Questions?!](https://VSCode.pro/?utm_source=VSCode-Tips-Tricks#FAQ) → 44 | 45 | ### Modules 46 | 47 | - **MODULE** #1: [Basics Yoga](https://vscode.pro/?utm_source=VSCode-Tips-Tricks#module1) 48 | - **MODULE** #2: [Settings Ninja](https://vscode.pro/?utm_source=VSCode-Tips-Tricks#module2) 49 | - **MODULE** #3: [Power User Workflows](https://vscode.pro/?utm_source=VSCode-Tips-Tricks#module3) 50 | - **MODULE** #4: [HTML/CSS The Web Dev](https://vscode.pro/?utm_source=VSCode-Tips-Tricks#module4) 51 | - **MODULE** #5: [Git/GitHub & OSS Tips](https://vscode.pro/?utm_source=VSCode-Tips-Tricks#module5) 52 | - **MODULE** #6: [Pro Markdown Workflow](https://vscode.pro/?utm_source=VSCode-Tips-Tricks#module6) 53 | - **MODULE** #7: [Everything About Javascript](https://vscode.pro/?utm_source=VSCode-Tips-Tricks#module7) 54 | - **MODULE** #8: [PHP/WordPress Workflows](https://vscode.pro/?utm_source=VSCode-Tips-Tricks#module8) 55 | - **MODULE** #9: [50+ Pro Extensions Setup](https://vscode.pro/?utm_source=VSCode-Tips-Tricks#module9) 56 | 57 |
58 |
59 | 60 | >#### ⚠️ Changes 61 | > 62 | >With time there are updates and things change. I keep a label called [`CHANGES`](https://github.com/ahmadawais/VSCode-Tips-Tricks/issues?utf8=%E2%9C%93&q=is%3Aissue+sort%3Aupdated-desc+label%3ACHANGES+) where you can track all the changeset. You can help as well. 63 | 64 |
65 |
66 |
67 |
68 |

69 | For anything else, tweet at @MrAhmadAwais → 70 |

71 | 72 |
73 | 74 |
VSCode 75 | 76 | _VSCode Power User Course →_ 77 |
78 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vscodeexample", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "stack.js", 6 | "scripts": { 7 | "test": "ava stack.js --verbose --watch" 8 | }, 9 | "keywords": [], 10 | "author": "AhmadAwais", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "ava": "^1.0.0-beta.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /videos/Breadcrumbs/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // BREADCRUMBS ————————————————————————————————— 3 | "breadcrumbs.enabled": true 4 | } 5 | -------------------------------------------------------------------------------- /videos/CSS/styles.css: -------------------------------------------------------------------------------- 1 | /* Styles */ 2 | div { 3 | display: block; 4 | width: 100%; 5 | text-decoration: none; 6 | text-align: center; 7 | margin: 0; 8 | padding: 5rem !important; 9 | color: #dedede; 10 | color: #000; 11 | color: #BADA55; 12 | color: #FAC000; 13 | color: #5628E2; 14 | color:gold; 15 | color:green; 16 | } 17 | -------------------------------------------------------------------------------- /videos/Code CLI/cli.md: -------------------------------------------------------------------------------- 1 | # VSCode CLI 2 | 3 | ![Install Code CLI](https://ahmda.ws/2LVbpgl) 4 | 5 | 1. Download, install and open Visual Studio Code for Mac. 6 | 2. Open the Command Palette (⌘ + ⇧ + P on Mac) OR View ❯ Command Palette 7 | 3. Type shell command to find and install `Shell Command: Install 'code' command in PATH command` 8 | 9 | ## Behind The Scene 10 | 11 | This is what it installs behind the scene on MacOS. But prefer the above method. 12 | 13 | ```sh 14 | cat << EOF >> ~/.bash_profile 15 | # Add Visual Studio Code (code) 16 | export PATH="\$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin" 17 | EOF 18 | ``` 19 | 20 | Peace! ✌️ 21 | -------------------------------------------------------------------------------- /videos/Code CLI/package.1.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vscodeexample", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "stack.js", 6 | "scripts": { 7 | "test": "ava stack.js --verbose --watch" 8 | }, 9 | "keywords": [], 10 | "author": "AhmadAwais", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "ava": "^1.0.0-beta.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /videos/Code CLI/package.2.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "change", 3 | "version": "1.0.0", 4 | "main": "stack.js", 5 | "scripts": { 6 | "test": "ava stack.js --verbose --watch" 7 | }, 8 | "keywords": [], 9 | "author": "AhmadAwais", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "ava": "^1.0.0-beta.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /videos/Extensions/Go Setup/go-lang.md: -------------------------------------------------------------------------------- 1 | # VSCode: Go Lang Setup 2 | 3 | - [Go Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.Go) 4 | - [Go Extension Wiki](https://github.com/Microsoft/vscode-go/wiki) 5 | - [Debug Go with VSCode](https://github.com/Microsoft/vscode-go/wiki/Debugging-Go-code-using-VS-Code) 6 | - [Go programming in VS Code](https://code.visualstudio.com/docs/languages/go) 7 | - [MOAAAR Extensions](https://marketplace.visualstudio.com/search?term=go&target=VSCode&category=All%20categories&sortBy=Relevance) 8 | 9 | ## Customize 10 | 11 | > Customize the Go lang settings with `COMMAND (⌘) + COMMA (,)` and then search for `go.` 12 | -------------------------------------------------------------------------------- /videos/Extensions/Python Setup/python.md: -------------------------------------------------------------------------------- 1 | # VSCode Python Setup 2 | 3 | - Install the [Python extension for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-python.python). 4 | - [Getting Started](https://code.visualstudio.com/docs/python/python-tutorial) 5 | - [Python Debugging](https://code.visualstudio.com/docs/python/python-tutorial#_configure-and-run-the-debugger) 6 | - [Configuring Python environments](https://code.visualstudio.com/docs/python/environments) 7 | 8 | ## Next steps 9 | 10 | > A lot more you can do with Python in Visual Studio Code: 11 | 12 | - [Python environments](https://code.visualstudio.com/docs/python/environments) - Control which Python interpreter is used for editing and debugging. 13 | - [Editing code](https://code.visualstudio.com/docs/python/editing) - Learn about autocomplete, IntelliSense, formatting, and refactoring for Python. 14 | - [Linting](https://code.visualstudio.com/docs/python/linting) - Enable, configure, and apply a variety of Python linters. 15 | - [Debugging](https://code.visualstudio.com/docs/python/debugging) - Learn to debug Python both locally and remotely. 16 | - [Unit testing](https://code.visualstudio.com/docs/python/unit-testing) - Configure unit test environments and discover, run, and debug tests. 17 | - [Settings reference](https://code.visualstudio.com/docs/python/settings-reference) - Explore the full range of Python-related settings in VS Code. 18 | 19 | ## Moar Extensions 20 | 21 | - [Python for VSCode](https://marketplace.visualstudio.com/items?itemName=tht13.python) 22 | - [MagicPython](https://marketplace.visualstudio.com/items?itemName=magicstack.MagicPython) 23 | - [Python Extended](https://marketplace.visualstudio.com/items?itemName=tushortz.python-extended-snippets) 24 | - [Python Docs](https://marketplace.visualstudio.com/items?itemName=Mukundan.python-docs) 25 | - [Python Coding Conventions](https://marketplace.visualstudio.com/items?itemName=igress.python-coding-conventions) 26 | - [Python Extension Pack](https://marketplace.visualstudio.com/items?itemName=donjayamanne.python-extension-pack) 27 | - [python-snippets](https://marketplace.visualstudio.com/items?itemName=cstrap.python-snippets) 28 | - [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) 29 | - [MOAAAR Extensions](https://marketplace.visualstudio.com/search?term=python&target=VSCode&category=All%20categories&sortBy=Relevance) 30 | 31 | ## Customize 32 | 33 | > Customize the python lang settings with `COMMAND (⌘) + COMMA (,)` and then search for `python.` 34 | -------------------------------------------------------------------------------- /videos/Extensions/Ruby Setup/ruby.md: -------------------------------------------------------------------------------- 1 | # VSCode Ruby Lang Setup 2 | 3 | Extensions to install. 4 | 5 | - [Ruby](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby) 6 | - [ruby-on-rails-snippets](https://marketplace.visualstudio.com/items?itemName=atefth.ruby-on-rails-snippets) 7 | - [Rails Nav](https://marketplace.visualstudio.com/items?itemName=hjleochen.rails-nav) 8 | - [ruby-rubocop](https://marketplace.visualstudio.com/items?itemName=misogi.ruby-rubocop) 9 | - [Ruby Language Colorization](https://marketplace.visualstudio.com/items?itemName=groksrc.ruby) 10 | - [Better Haml](https://marketplace.visualstudio.com/items?itemName=karunamurti.haml) 11 | - [Simple Ruby ERB](https://marketplace.visualstudio.com/items?itemName=vortizhe.simple-ruby-erb) 12 | - [Ruby Solargraph](https://marketplace.visualstudio.com/items?itemName=castwide.solargraph) 13 | - [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) 14 | - [MOAAAR Extensions](https://marketplace.visualstudio.com/search?term=ruby&target=VSCode&category=All%20categories&sortBy=Relevance) 15 | -------------------------------------------------------------------------------- /videos/Extensions/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The Object. 3 | * 4 | * * GREEN: Important info. 5 | * ! RED: Danger highlight. 6 | * ? BLUE: Plain info of sorts. 7 | * TODO: ORANGE: TODO's are orange. 8 | * FIXME: Fix the weird fake address. 9 | */ 10 | const theObj = { 11 | name: 'Immanuel Gutmann', 12 | adrs: 'Gutkowski Plains, 44453 Shane Plains, Bartholomeborough, 67389, Timor-Leste', 13 | img: 'https://s3.amazonaws.com/uifaces/faces/twitter/to_soham/128.jpg' 14 | }; 15 | -------------------------------------------------------------------------------- /videos/Extensions/demo.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ```js 4 | const theObj = { 5 | name: 'Immanuel Gutmann', 6 | adrs: 'Gutkowski Plains, 44453 Shane Plains, Bartholomeborough, 67389, Timor-Leste', 7 | img: 'https://s3.amazonaws.com/uifaces/faces/twitter/to_soham/128.jpg' 8 | } 9 | ``` 10 | -------------------------------------------------------------------------------- /videos/Extensions/extensions.md: -------------------------------------------------------------------------------- 1 | # List of Extensions 2 | 3 | ## 💻 Syntax 4 | 5 | - [x] [All Programming Language Syntax](https://marketplace.visualstudio.com/search?target=VSCode&category=Programming%20Languages&sortBy=Downloads) 6 | - [x] [dawhite.mustache](https://marketplace.visualstudio.com/items?itemName=dawhite.mustache) 7 | - [x] [EditorConfig.EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) 8 | - [x] [silvenon.mdx](https://marketplace.visualstudio.com/items?itemName=silvenon.mdx) 9 | - [x] [sysoev.language-stylus](https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus) 10 | - [x] [andrejunges.Handlebars](https://marketplace.visualstudio.com/items?itemName=andrejunges.Handlebars) 11 | - [x] [DotJoshJohnson.xml](https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml) 12 | - [x] [robinbentley.sass-indented](https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented) 13 | - [x] [mrmlnc.vscode-apache](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-apache) 14 | - [x] [eg2.vscode-npm-script](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) 15 | - [x] [bungcip.better-toml](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml) 16 | - [x] [mikeburgh.xml-format](https://marketplace.visualstudio.com/items?itemName=mikeburgh.xml-format) 17 | - [x] [PeterJausovec.vscode-docker](https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker) 18 | - [x] [chicoff.mapfile](https://marketplace.visualstudio.com/items?itemName=chicoff.mapfile) 19 | - [x] [cssho.vscode-svgviewer](https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer) 20 | - [x] [jock.svg](https://marketplace.visualstudio.com/items?itemName=jock.svg) 21 | - [x] [mrmlnc.vscode-scss](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss) 22 | - [x] [mrmlnc.vscode-pugbeautify](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-pugbeautify) 23 | - [x] [mohsen1.prettify-json](https://marketplace.visualstudio.com/items?itemName=mohsen1.prettify-json) 24 | - [x] [ecmel.vscode-html-css](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) 25 | - [x] [bierner.comment-tagged-templates](https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates) 26 | - [x] [christian-kohler.npm-intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) 27 | - [x] [christian-kohler.path-intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) 28 | - [x] [Zignd.html-css-class-completion](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion) 29 | - [x] [formulahendry.auto-close-tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) 30 | - [x] [octref.vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) 31 | 32 | ## 🚀 Snippets 33 | 34 | - [x] [donjayamanne.jquerysnippets](https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets) 35 | - [x] [tunnckocore.modern-javascript-snippets](https://marketplace.visualstudio.com/items?itemName=tunnckocore.modern-javascript-snippets) 36 | - [x] [hhawkins.AzureFunctionsSnippets](https://marketplace.visualstudio.com/items?itemName=hhawkins.AzureFunctionsSnippets) 37 | - [x] [EQuimper.react-native-react-redux](https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux) 38 | 39 | ## 🌋 Microsoft 40 | 41 | - [x] [ms-vsliveshare.vsliveshare-pack](https://marketplace.visualstudio.com/items?itemName=ms-vsliveshare.vsliveshare-pack) 42 | - [x] [ms-vsliveshare.vsliveshare](https://marketplace.visualstudio.com/items?itemName=ms-vsliveshare.vsliveshare) 43 | - [x] [ms-vsliveshare.vsliveshare-audio](https://marketplace.visualstudio.com/items?itemName=ms-vsliveshare.vsliveshare-audio) 44 | - [x] [Slack Chat](https://marketplace.visualstudio.com/items?itemName=karigari.chat) 45 | - [x] [Azure Extensions](https://marketplace.visualstudio.com/search?target=VSCode&category=Azure&sortBy=Downloads) 46 | - [x] [ms-azuretools.vscode-azureappservice](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice) 47 | - [x] [ms-azuretools.vscode-azurefunctions](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) 48 | - [x] [ms-azuretools.vscode-azurestorage](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestorage) 49 | - [x] [ms-azuretools.vscode-cosmosdb](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-cosmosdb) 50 | - [x] [ms-vscode.azure-account](https://marketplace.visualstudio.com/items?itemName=ms-vscode.azure-account) 51 | - [x] [ms-vscode.azurecli](https://marketplace.visualstudio.com/items?itemName=ms-vscode.azurecli) 52 | - [x] [ms-vscode.vscode-node-azure-pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack) 53 | - [x] [msazurermtools.azurerm-vscode-tools](https://marketplace.visualstudio.com/items?itemName=msazurermtools.azurerm-vscode-tools) 54 | 55 | 56 | ## 🚦 Order/Case/Manipulate 57 | 58 | - [x] [Asuka.insertnumbers](https://marketplace.visualstudio.com/items?itemName=Asuka.insertnumbers) 59 | - [x] [Tyriar.sort-lines](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines) 60 | - [x] [wmaurer.change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case) 61 | - [x] [nmsmith89.incrementor](https://marketplace.visualstudio.com/items?itemName=nmsmith89.incrementor) 62 | - [x] [wwm.better-align](https://marketplace.visualstudio.com/items?itemName=wwm.better-align) 63 | - [x] [silesky.toggle-boolean](https://marketplace.visualstudio.com/items?itemName=silesky.toggle-boolean) 64 | - [x] [plibither8.remove-comments](https://marketplace.visualstudio.com/items?itemName=plibither8.remove-comments) 65 | - [x] [deerawan.vscode-faker](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker) 66 | 67 | ## 🙌 Special Mentions 68 | 69 | - [x] [better-comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) 70 | - [x] [wayou.vscode-todo-highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) 71 | - [x] [formulahendry.code-runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) 72 | - [x] [project-manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) 73 | - [x] [Shan.code-settings-sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) 74 | 75 | 76 | ## 🤔 MOAAAAAAAARRRR Extensions (For future course updates) 77 | 78 | - [x] [fabiospampinato.vscode-terminals](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-terminals) 79 | -------------------------------------------------------------------------------- /videos/File Association/.ahmad: -------------------------------------------------------------------------------- 1 | alias ahmad="awais" 2 | -------------------------------------------------------------------------------- /videos/File Association/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.associations": { 3 | ".php_cs": "php", 4 | ".php_cs.dist": "php", 5 | // Super important, otherwise intelephense will not auto-index your project. 6 | "*.php": "php", 7 | ".exports": "shellscript", 8 | ".paths": "shellscript", 9 | ".ahmad": "shellscript" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /videos/Focus/focus.md: -------------------------------------------------------------------------------- 1 | # Focus 2 | 3 | - Focus on sidebar: `COMMAND (⌘) + 0` 4 | - Focus on the editor: `COMMAND (⌘) + 1` 5 | -------------------------------------------------------------------------------- /videos/Git Integration/demo.md: -------------------------------------------------------------------------------- 1 | # Git Integration for VSCode 2 | 3 | Changes moar changes. 4 | -------------------------------------------------------------------------------- /videos/Git Integration/gitRange.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Git Stage/Commit Selected Ranges 3 | * 4 | * @package VSCode.pro 5 | */ 6 | 7 | /** 8 | * Summation. 9 | * 10 | * @param {Number} a 11 | * @param {Number} b 12 | */ 13 | const sum = (a, b) => a + b; 14 | 15 | /** 16 | * Subtraction. 17 | * 18 | * @param {Number} a 19 | * @param {Number} b 20 | */ 21 | const sub = (a, b) => a - b; 22 | 23 | /** 24 | * Multiplication. 25 | * 26 | * @param {Number} a 27 | * @param {Number} b 28 | */ 29 | const sum = (a, b) => a * b; 30 | -------------------------------------------------------------------------------- /videos/Git Integration/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // GIT —————————————————— 3 | "git.autofetch": true, 4 | "git.enableSmartCommit": true, 5 | // GitLens. 6 | "gitlens.views.repositories.files.layout": "auto", // Updated since 9.0.0 - 2018-12-02. 7 | "gitlens.currentLine.enabled": false, 8 | "gitlens.hovers.enabled": false, 9 | "gitlens.keymap": "alternate", 10 | "gitlens.advanced.messages": { 11 | "suppressShowKeyBindingsNotice": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /videos/HTML Emmet/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 18 | 19 | 20 | 21 |
22 | 30 | 31 | 32 | 33 |
34 |
35 |
36 |
37 | My name is Ahmad Awais. 38 |
39 |
40 |
41 |
42 |

43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /videos/HTML Emmet/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // Emmet —————————————————— 3 | "emmet.triggerExpansionOnTab": true, 4 | "emmet.includeLanguages": { 5 | "javascript": "javascriptreact" 6 | }, 7 | } -------------------------------------------------------------------------------- /videos/HTML Formatting + Insert New Line/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // FORMATTING —————————————————— 3 | "editor.formatOnSave": true, 4 | "editor.formatOnPaste": true, 5 | "files.insertFinalNewline": true, 6 | } -------------------------------------------------------------------------------- /videos/HTML Tag Highlight/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // EXT: Highlight Matching Tag (UPDATED for v0.9.1) —————————————————— 3 | "highlight-matching-tag.styles": { 4 | "opening": { 5 | "full": { 6 | "highlight": "rgba(165, 153, 233, 0.3)" 7 | } 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/.gitignore: -------------------------------------------------------------------------------- 1 | # NPM # 2 | ########## 3 | # Ignore all directories called node_modules in current folder and any subfolders. 4 | node_modules/ 5 | /node_modules/ 6 | 7 | # Packages # 8 | ############ 9 | *.7z 10 | *.dmg 11 | *.gz 12 | *.bz2 13 | *.iso 14 | *.jar 15 | *.rar 16 | *.tar 17 | *.zip 18 | *.tgz 19 | *.map 20 | 21 | # Logs and databases # 22 | ###################### 23 | *.log 24 | *.sql 25 | *.env 26 | 27 | # OS generated files # 28 | ###################### 29 | **.DS_Store* 30 | ehthumbs.db 31 | Icon? 32 | Thumbs.db 33 | ._* 34 | 35 | # Vim generated files # 36 | ###################### 37 | *.un~ 38 | 39 | # SASS # 40 | ########## 41 | **/.sass-cache 42 | **/.sass-cache/* 43 | **/.map 44 | 45 | # Composer # 46 | ########## 47 | !assets/js/vendor/ 48 | wpcs/ 49 | /vendor/ 50 | 51 | # Bower # 52 | ########## 53 | assets/bower_components/* 54 | 55 | # Codekit # 56 | ########## 57 | /codekit-config.json 58 | *.codekit 59 | **.codekit-cache/* 60 | 61 | # Compiled Files and Build Dirs # 62 | ########## 63 | /README.html 64 | 65 | # PhpStrom Project Files # 66 | .idea/ 67 | library/vendors/composer 68 | assets/img/.DS_Store 69 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "type": "node", 6 | "request": "attach", 7 | "name": "Node: Nodemon", 8 | "port": 9229, 9 | "restart": true 10 | } 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/.vscode/spellright.dict: -------------------------------------------------------------------------------- 1 | fs 2 | json 3 | utf 4 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 George I. Tsopouridis 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/README.MD: -------------------------------------------------------------------------------- 1 | # NodeJS Shopping Cart - NodeJS, Express, Express-Session, Express handlebars (hbs) 2 | 3 | ### Run locally on your machine 4 | You need to have installed Node and NPM. 5 | 6 | ![NodeJS Shopping Cart](/data/nodejs-cart-1.png?raw=true "NodeJS Shopping Cart") 7 | 8 | Clone this repository 9 | ``` shell 10 | git clone https://github.com/gtsopour/nodejs-shopping-cart.git 11 | ``` 12 | 13 | Install dependencies 14 | ``` shell 15 | npm install 16 | ``` 17 | 18 | Start NodeJS server at http://localhost:3000 19 | ``` shell 20 | npm start 21 | ``` 22 | 23 | For Nodemon usage 24 | ``` shell 25 | nodemon ./bin/www 26 | ``` 27 | 28 | ### Technologies 29 | NodeJS, Express, Express-Session, Nodemon, hbs - Express.js view engine for handlebars.js 30 | 31 | For any extra questions, please contact me at gtsopour@gmail.com. -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/app.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var path = require('path'); 3 | var favicon = require('serve-favicon'); 4 | var logger = require('morgan'); 5 | var cookieParser = require('cookie-parser'); 6 | var bodyParser = require('body-parser'); 7 | 8 | var hbs = require('hbs'); 9 | var session = require('express-session'); 10 | 11 | var index = require('./routes/index'); 12 | 13 | var app = express(); 14 | 15 | // view engine setup 16 | app.set('views', path.join(__dirname, 'views')); 17 | hbs.registerPartials(__dirname + '/views/partials'); 18 | app.set('view engine', 'hbs'); 19 | 20 | // uncomment after placing your favicon in /public 21 | //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 22 | app.use(logger('dev')); 23 | app.use(bodyParser.json()); 24 | app.use(bodyParser.urlencoded({ extended: false })); 25 | app.use(cookieParser()); 26 | app.use(session({ 27 | secret: 'secret', 28 | resave: false, 29 | saveUninitialized: true 30 | })) 31 | app.use(express.static(path.join(__dirname, 'public'))); 32 | 33 | // res.locals is an object passed to hbs engine 34 | app.use(function(req, res, next) { 35 | res.locals.session = req.session; 36 | next(); 37 | }); 38 | 39 | app.use('/', index); 40 | 41 | // catch 404 and forward to error handler 42 | app.use(function(req, res, next) { 43 | var err = new Error('Not Found'); 44 | err.status = 404; 45 | next(err); 46 | }); 47 | 48 | // error handler 49 | app.use(function(err, req, res, next) { 50 | // set locals, only providing error in development 51 | res.locals.message = err.message; 52 | res.locals.error = req.app.get('env') === 'development' ? err : {}; 53 | // render the error page 54 | res.status(err.status || 500); 55 | res.render('error'); 56 | }); 57 | 58 | module.exports = app; 59 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/bin/www: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | /** 4 | * Module dependencies. 5 | */ 6 | 7 | var app = require('../app'); 8 | var debug = require('debug')('r3pi-shopping-cart:server'); 9 | var http = require('http'); 10 | 11 | /** 12 | * Get port from environment and store in Express. 13 | */ 14 | 15 | var port = normalizePort(process.env.PORT || '3000'); 16 | app.set('port', port); 17 | 18 | /** 19 | * Create HTTP server. 20 | */ 21 | 22 | var server = http.createServer(app); 23 | 24 | /** 25 | * Listen on provided port, on all network interfaces. 26 | */ 27 | 28 | server.listen(port); 29 | server.on('error', onError); 30 | server.on('listening', onListening); 31 | 32 | /** 33 | * Normalize a port into a number, string, or false. 34 | */ 35 | 36 | function normalizePort(val) { 37 | var port = parseInt(val, 10); 38 | 39 | if (isNaN(port)) { 40 | // named pipe 41 | return val; 42 | } 43 | 44 | if (port >= 0) { 45 | // port number 46 | return port; 47 | } 48 | 49 | return false; 50 | } 51 | 52 | /** 53 | * Event listener for HTTP server "error" event. 54 | */ 55 | 56 | function onError(error) { 57 | if (error.syscall !== 'listen') { 58 | throw error; 59 | } 60 | 61 | var bind = typeof port === 'string' 62 | ? 'Pipe ' + port 63 | : 'Port ' + port; 64 | 65 | // handle specific listen errors with friendly messages 66 | switch (error.code) { 67 | case 'EACCES': 68 | console.error(bind + ' requires elevated privileges'); 69 | process.exit(1); 70 | break; 71 | case 'EADDRINUSE': 72 | console.error(bind + ' is already in use'); 73 | process.exit(1); 74 | break; 75 | default: 76 | throw error; 77 | } 78 | } 79 | 80 | /** 81 | * Event listener for HTTP server "listening" event. 82 | */ 83 | 84 | function onListening() { 85 | var addr = server.address(); 86 | var bind = typeof addr === 'string' 87 | ? 'pipe ' + addr 88 | : 'port ' + addr.port; 89 | debug('Listening on ' + bind); 90 | } 91 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/data/nodejs-cart-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmadawais/VSCode-Tips-Tricks/26c186d70a62a1f7dd8a3d081bb3df5ef575103b/videos/JavaScript-Debug/1-nodejs-nodemon/data/nodejs-cart-1.png -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/data/nodejs-cart-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmadawais/VSCode-Tips-Tricks/26c186d70a62a1f7dd8a3d081bb3df5ef575103b/videos/JavaScript-Debug/1-nodejs-nodemon/data/nodejs-cart-2.png -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/data/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "title": "Apples", 5 | "description": "Apples are 25 CHF each", 6 | "price": 25 7 | }, 8 | { 9 | "id": 2, 10 | "title": "Oranges", 11 | "description": "Oranges are 30 CHF each", 12 | "price": 30 13 | }, 14 | { 15 | "id": 3, 16 | "title": "Garlic", 17 | "description": "Garlic are 15 CHF each", 18 | "price": 15 19 | }, 20 | { 21 | "id": 4, 22 | "title": "Papayas", 23 | "description": "Papayas are 50 CHF each, but are available as 3 for the price of 2", 24 | "price": 100 25 | } 26 | ] 27 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/models/cart.js: -------------------------------------------------------------------------------- 1 | module.exports = function Cart(cart) { 2 | this.items = cart.items || {}; 3 | this.totalItems = cart.totalItems || 0; 4 | this.totalPrice = cart.totalPrice || 0; 5 | 6 | this.add = function(item, id) { 7 | var cartItem = this.items[id]; 8 | if (!cartItem) { 9 | cartItem = this.items[id] = {item: item, quantity: 0, price: 0}; 10 | } 11 | cartItem.quantity++; 12 | cartItem.price = cartItem.item.price * cartItem.quantity; 13 | this.totalItems++; 14 | this.totalPrice += cartItem.item.price; 15 | }; 16 | 17 | this.remove = function(id) { 18 | this.totalItems -= this.items[id].quantity; 19 | this.totalPrice -= this.items[id].price; 20 | delete this.items[id]; 21 | }; 22 | 23 | this.getItems = function() { 24 | var arr = []; 25 | for (var id in this.items) { 26 | arr.push(this.items[id]); 27 | } 28 | return arr; 29 | }; 30 | }; -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nodejs-shopping-cart", 3 | "version": "1.0.0", 4 | "author": "George Tsopouridis", 5 | "email": "gtsopour@gmail.com", 6 | "private": false, 7 | "scripts": { 8 | "start": "node ./bin/www", 9 | "debug": "nodemon --inspect ./bin/www" 10 | }, 11 | "dependencies": { 12 | "body-parser": "~1.17.1", 13 | "cookie-parser": "~1.4.3", 14 | "debug": "~2.6.3", 15 | "express": "~4.15.2", 16 | "express-session": "^1.15.3", 17 | "hbs": "~4.0.1", 18 | "morgan": "~1.8.1", 19 | "serve-favicon": "~2.4.2" 20 | }, 21 | "devDependencies": { 22 | "nodemon": "^1.11.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/public/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 50px; 3 | font: 16px 'Lato', sans-serif; 4 | } 5 | 6 | a { 7 | color: #00B7FF; 8 | } 9 | 10 | * { 11 | -webkit-border-radius: 0 !important; 12 | -moz-border-radius: 0 !important; 13 | border-radius: 0 !important; 14 | } 15 | 16 | .dropdown-menu .cart { 17 | min-width: 250px; 18 | padding: 15px 25px 0; 19 | } 20 | 21 | .dropdown-menu .cart .row > div { 22 | padding: 0 0 10px 0; 23 | } 24 | 25 | .dropdown-menu .cart .totalPrice{ 26 | font-size: 120%; 27 | font-weight: bold; 28 | padding: 15px 0; 29 | } 30 | 31 | .cart.page { 32 | padding: 25px 0; 33 | } -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/routes/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | var fs = require('fs'); 5 | 6 | var Cart = require('../models/cart'); 7 | var products = JSON.parse(fs.readFileSync('./data/products.json', 'utf8')); 8 | 9 | router.get('/', function (req, res, next) { 10 | res.render('index', 11 | { 12 | title: 'NodeJS Shopping Cart', 13 | products: products 14 | } 15 | ); 16 | }); 17 | 18 | router.get('/add/:id', function(req, res, next) { 19 | var productId = req.params.id; 20 | var cart = new Cart(req.session.cart ? req.session.cart : {}); 21 | var product = products.filter(function(item) { 22 | return item.id == productId; 23 | }); 24 | cart.add(product[0], productId); 25 | req.session.cart = cart; 26 | res.redirect('/'); 27 | }); 28 | 29 | router.get('/cart', function(req, res, next) { 30 | if (!req.session.cart) { 31 | return res.render('cart', { 32 | products: null 33 | }); 34 | } 35 | var cart = new Cart(req.session.cart); 36 | res.render('cart', { 37 | title: 'NodeJS Shopping Cart', 38 | products: cart.getItems(), 39 | totalPrice: cart.totalPrice 40 | }); 41 | }); 42 | 43 | router.get('/remove/:id', function(req, res, next) { 44 | var productId = req.params.id; 45 | var cart = new Cart(req.session.cart ? req.session.cart : {}); 46 | 47 | cart.remove(productId); 48 | req.session.cart = cart; 49 | res.redirect('/cart'); 50 | }); 51 | 52 | module.exports = router; 53 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/views/cart.hbs: -------------------------------------------------------------------------------- 1 |

{{title}}

2 | {{# if products }} 3 |
4 | 23 |
24 |
25 | Total: {{ totalPrice }} CHF 26 |
27 |
28 |
29 | Checkout 30 |
31 | {{ else }} 32 | Your shopping cart is empty. 33 | {{/if}} 34 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/views/error.hbs: -------------------------------------------------------------------------------- 1 |

{{message}}

2 |

{{error.status}}

3 | 
{{error.stack}}
4 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/views/index.hbs: -------------------------------------------------------------------------------- 1 |

{{title}}

2 |

Welcome to the {{title}}

3 | 4 | {{# each products }} 5 |
6 |
7 |
8 |
9 |

{{ this.title }}

10 |

{{{this.description}}}

11 |
12 |
{{ this.price }} CHF
13 | Add to cart 14 |
15 |
16 |
17 |
18 |
19 | {{/each}} -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/views/layout.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{title}} 5 | 6 | 7 | 8 | 9 | 10 | 11 | {{> header }} 12 | {{{body}}} 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/1-nodejs-nodemon/views/partials/header.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Home 5 |
6 |
7 |
8 |
9 | 15 | {{# if session.cart.totalItems }} 16 |
17 |
18 | {{# each session.cart.items }} 19 |
20 |
21 | {{ this.item.title }} 22 |
23 |
24 | {{ this.quantity }} 25 |
26 |
27 | {{ this.price }} CHF 28 |
29 |
30 | {{/each}} 31 |
32 |
33 |
Total: {{ session.cart.totalPrice }} CHF
34 | Procceed 35 |
36 |
37 |
38 |
39 | {{/if}} 40 |
41 |
42 |
-------------------------------------------------------------------------------- /videos/JavaScript-Debug/2-es6/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/2-es6/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "type": "node", 6 | "request": "attach", 7 | "name": "Attach", 8 | "restart": true, 9 | "port": 9229 10 | }, 11 | { 12 | "type": "node", 13 | "request": "launch", 14 | "name": "ES6 Debugger", 15 | "program": "${workspaceFolder}/src/index.js", 16 | "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node", 17 | "runtimeArgs": ["--presets", "env"] 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/2-es6/.vscode/spellright.dict: -------------------------------------------------------------------------------- 1 | json 2 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/2-es6/README.md: -------------------------------------------------------------------------------- 1 | # VSCode Node + Babel Recipe 2 | 3 | Debug Modern JavaScript with VSCode. Part of [VSCode Course](https://VSCode.pro/). 4 | 5 | ## 1. init a module: 6 | 7 | ```sh 8 | npm init -y 9 | ``` 10 | 11 | ## 2. Babel setup 12 | 13 | ```sh 14 | npm i -D babel-cli babel-core babel-preset-env 15 | ``` 16 | 17 | ## 3. Add `.babelrc` 18 | 19 | ```sh 20 | touch .babelrc 21 | ``` 22 | 23 | ## 4. Edit `.babelrc` 24 | 25 | ```json 26 | { 27 | "presets": ["env"] 28 | } 29 | ``` 30 | 31 | ## 5. The package.json file looks like 32 | 33 | ```json 34 | { 35 | "name": "vscodepro", 36 | "description": "VSCode.pro for Power Users", 37 | "version": "1.0.0", 38 | "author": "AhmadAwais", 39 | "license": "MIT", 40 | "main": "index.js", 41 | "scripts": { 42 | "start": "babel-node index.js", 43 | "debug": "babel-node debug index.js" 44 | }, 45 | "devDependencies": { 46 | "babel-cli": "^6.26.0", 47 | "babel-core": "^6.26.3", 48 | "babel-preset-env": "^1.7.0", 49 | } 50 | } 51 | ``` 52 | 53 | ## 6. My `.vscode/launch.json` file 54 | 55 | ```json 56 | { 57 | "version": "0.2.0", 58 | "configurations": [ 59 | { 60 | "type": "node", 61 | "request": "attach", 62 | "name": "Attach", 63 | "restart": true, 64 | "port": 9229 65 | }, 66 | { 67 | "type": "node", 68 | "request": "launch", 69 | "protocol": "inspector", 70 | "name": "ES6 Debugger", 71 | "program": "${workspaceFolder}/index.js", 72 | "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node", 73 | "runtimeArgs": ["--presets", "env"] 74 | } 75 | ] 76 | } 77 | ``` 78 | 79 | ## 7. My node version `v9.7.1` 80 | 81 | Peace! ✌️ 82 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/2-es6/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | VSCode JavaScript! 6 | 7 | 8 | 9 |

VSCode.pro!

10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/2-es6/dist/main.min.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([ 2 | /*!**********************************!*\ 3 | !*** ./src/index.js + 2 modules ***! 4 | \**********************************/ 5 | /*! no exports provided */ 6 | /*! all exports used */function(e,t,n){"use strict";n.r(t);!function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"LOG:";console.log("%c"+t,"background: #bada55; color: #222222; padding: 10px;"),console.log(e),console.log("\n")}("Ahmad","NAME"),function(e){document.querySelector("h1").textContent=e}("New VSCode.pro!")}]); 7 | //# sourceMappingURL=main.min.js.map -------------------------------------------------------------------------------- /videos/JavaScript-Debug/2-es6/modules/log.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Custom log function. 3 | * 4 | * @param {any} data Data to log. 5 | * @param {String} context Message. 6 | */ 7 | export const log = (data, context = 'LOG:') => { 8 | console.log(`%c${context}`, 'background: #bada55; color: #222222; padding: 10px;'); 9 | console.log(data); 10 | console.log('\n'); 11 | }; 12 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/2-es6/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vscodepro", 3 | "description": "VSCode.pro for Power Users", 4 | "version": "1.0.0", 5 | "author": "AhmadAwais", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "scripts": { 9 | "start": "babel-node index.js", 10 | "debug": "babel-node debug index.js" 11 | }, 12 | "devDependencies": { 13 | "babel-cli": "^6.26.0", 14 | "babel-core": "^6.26.3", 15 | "babel-preset-cgb": "^1.5.0", 16 | "babel-preset-env": "^1.7.0", 17 | "webpack": "^4.16.5", 18 | "webpack-cli": "^3.1.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/2-es6/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main JavaScript App. 3 | * 4 | * VSCode.pro course. 5 | * 6 | * @since 1.0.0 7 | */ 8 | 9 | import { log } from '../modules/log'; 10 | 11 | const name = 'AhmadAwais'; 12 | log(name, 'NAME'); 13 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/2-es6/webpack.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * webpack Configuration 3 | * 4 | * Working of a webpack can be very simple or complex. This is an internally simple 5 | * build configuration. 6 | * 7 | * webpack basics — If you are new the webpack here's all you need to know: 8 | * 1. webpack is a module bundler. It bundles different JS modules together. 9 | * 2. It needs and entry point and an output to process file(s) and bundle them. 10 | * 3. By default it only understands common JavaScript but you can make it 11 | * understand other formats by way of adding a webpack loader. 12 | * 4. In the file below you will find an entry point, an output, and a babel-loader 13 | * that tests all .js files excluding the ones in node_modules to process the 14 | * ESNext and make it compatible with older browsers i.e. it converts the 15 | * ESNext (new standards of JavaScript) into old JavaScript through a loader 16 | * by Babel. 17 | * 18 | * @since 1.0.0 19 | */ 20 | 21 | const fs = require('fs'); 22 | const path = require('path'); 23 | 24 | // Make sure any symlinks in the project folder are resolved: 25 | const pluginDir = fs.realpathSync(process.cwd()); 26 | const resolvePath = relativePath => path.resolve(pluginDir, relativePath); 27 | 28 | // Export configuration. 29 | module.exports = { 30 | mode: 'production', 31 | devtool: 'source-map', 32 | entry: { 33 | 'main.min': './src/index.js' // 'name' : 'path/file.ext'. 34 | }, 35 | output: { 36 | pathinfo: true, 37 | path: resolvePath('./dist/'), // The dist folder. 38 | filename: '[name].js' 39 | }, 40 | 41 | module: { 42 | rules: [ 43 | { 44 | test: /\.(js|jsx|mjs)$/, 45 | exclude: /(node_modules|bower_components)/, 46 | use: { 47 | loader: 'babel-loader', 48 | options: { 49 | babelrc: false, 50 | presets: [require.resolve('babel-preset-cgb')], 51 | 52 | // This is a feature of `babel-loader` for webpack (not Babel itself). 53 | // It enables caching results in ./node_modules/.cache/babel-loader/ 54 | // directory for faster rebuilds. 55 | cacheDirectory: true 56 | } 57 | } 58 | } 59 | ] 60 | }, 61 | 62 | // Add externals. 63 | externals: { 64 | wpObj: 'wpObj', 65 | gtag: 'gtag', 66 | Intercom: 'Intercom', 67 | jquery: 'jQuery', // import $ from 'jquery'; 68 | Paddle: 'Paddle' 69 | } 70 | }; 71 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "type": "chrome", 6 | "request": "launch", 7 | "name": "Chrome + React", 8 | "url": "http://localhost:3000", 9 | "webRoot": "${workspaceFolder}/src" 10 | } 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/.vscode/spellright.dict: -------------------------------------------------------------------------------- 1 | svg 2 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.4.2", 7 | "react-dom": "^16.4.2", 8 | "react-scripts": "1.1.4" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmadawais/VSCode-Tips-Tricks/26c186d70a62a1f7dd8a3d081bb3df5ef575103b/videos/JavaScript-Debug/3-chrome/public/favicon.ico -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background: linear-gradient(270deg, #373277, #4e44d6); 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | 34 | button { 35 | display: table; 36 | width: 50%; 37 | padding: 3rem; 38 | font-size: 3rem; 39 | border: none; 40 | margin: 3rem auto; 41 | cursor: pointer; 42 | outline: 0; 43 | color: #ffffff; 44 | background: linear-gradient(270deg, #373277, #4e44d6); 45 | box-shadow: 0 0 5rem #242526; 46 | transition: all 0.6s ease-in; 47 | } 48 | 49 | button:hover { 50 | transition: all 0.6s ease-in; 51 | background: linear-gradient(270deg, #4e44d6, #373277); 52 | } 53 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import logo from './logo.svg'; 4 | 5 | class App extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { isToggleOn: true }; 9 | 10 | // This binding is necessary to make `this` work in the callback 11 | this.handleClick = this.handleClick.bind(this); 12 | } 13 | 14 | handleClick() { 15 | const name = 'Ahmad'; 16 | this.setState(prevState => ({ 17 | isToggleOn: !prevState.isToggleOn 18 | })); 19 | } 20 | 21 | render() { 22 | return ( 23 |
24 |
25 | logo 26 |

VSCode.pro: Chrome + React App Frontend Debugging! FTW!

27 |
28 | 29 |
30 | ); 31 | } 32 | } 33 | 34 | export default App; 35 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/3-chrome/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /videos/JavaScript-Debug/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Just a random Node.js debugging. 3 | */ 4 | const name = 'Ahmad Awais'; 5 | const course = 'VSCode.pro'; 6 | -------------------------------------------------------------------------------- /videos/JavaScript/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | commonjs: true, 5 | es6: true, 6 | node: true 7 | }, 8 | extends: 'eslint:recommended', 9 | parserOptions: { 10 | ecmaFeatures: { 11 | jsx: true 12 | }, 13 | ecmaVersion: 2015, 14 | sourceType: 'module' 15 | }, 16 | rules: { 17 | indent: ['error', 'tab'], 18 | 'linebreak-style': ['error', 'unix'], 19 | quotes: ['error', 'single'], 20 | semi: ['error', 'always'] 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /videos/JavaScript/.gitignore: -------------------------------------------------------------------------------- 1 | # NPM # 2 | ########## 3 | # Ignore all directories called node_modules in current folder and any subfolders. 4 | node_modules/ 5 | /node_modules/ 6 | 7 | # Packages # 8 | ############ 9 | *.7z 10 | *.dmg 11 | *.gz 12 | *.bz2 13 | *.iso 14 | *.jar 15 | *.rar 16 | *.tar 17 | *.zip 18 | *.tgz 19 | *.map 20 | 21 | # Logs and databases # 22 | ###################### 23 | *.log 24 | *.sql 25 | *.env 26 | 27 | # OS generated files # 28 | ###################### 29 | **.DS_Store* 30 | ehthumbs.db 31 | Icon? 32 | Thumbs.db 33 | ._* 34 | 35 | # Vim generated files # 36 | ###################### 37 | *.un~ 38 | 39 | # SASS # 40 | ########## 41 | **/.sass-cache 42 | **/.sass-cache/* 43 | **/.map 44 | 45 | # Composer # 46 | ########## 47 | !assets/js/vendor/ 48 | wpcs/ 49 | /vendor/ 50 | 51 | # Bower # 52 | ########## 53 | assets/bower_components/* 54 | 55 | # Codekit # 56 | ########## 57 | /codekit-config.json 58 | *.codekit 59 | **.codekit-cache/* 60 | 61 | # Compiled Files and Build Dirs # 62 | ########## 63 | /README.html 64 | 65 | # PhpStrom Project Files # 66 | .idea/ 67 | library/vendors/composer 68 | assets/img/.DS_Store 69 | -------------------------------------------------------------------------------- /videos/JavaScript/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript in VSCode 2 | 3 | VSCode has the best coding experience for JavaScript. Period. 4 | 5 | - [x] 1. ✅ Basic JavaScript settings 6 | - [x] 2. 😮 `npm` Scripts Explorer 7 | - [x] 3. 🏗️ Installation & Configure `ESLint` 8 | - [x] 4. 🎭 Installation & Configure `Prettier` 9 | - [x] 5. 🤔 Refactoring/Peeking/Definition 10 | - [ ] 6. 🌟 Debugging 11 | - [x] 1. Debugging without VSCode 12 | - [x] 2. VSCode Debugging Recipes 13 | - [x] 3. Node.js Debugging with Nodemon 14 | - [x] 4. Modern JavaScript ES6+ Debugging 15 | - [x] 5. Debug JavaScript Frontend with Chrome 16 | - [ ] 7. 🤖 Node related extensions 17 | - [ ] 8. 🔥 Tips and tricks. 18 | 19 | 20 | ## Extensions 21 | 22 | - [x] [msjsdiag.debugger-for-chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) 23 | - [x] [letrieu.expand-region](https://marketplace.visualstudio.com/items?itemName=letrieu.expand-region) 24 | - [x] [mikestead.dotenv](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) 25 | - [x] [drKnoxy.eslint-disable-snippets](https://marketplace.visualstudio.com/items?itemName=drKnoxy.eslint-disable-snippets) 26 | - [x] [wix.vscode-import-cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) 27 | - [x] [xabikos.JavaScriptSnippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) 28 | - [x] [leizongmin.node-module-intellisense](https://marketplace.visualstudio.com/items?itemName=leizongmin.node-module-intellisense) 29 | - [x] [WallabyJs.quokka-vscode](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) 30 | -------------------------------------------------------------------------------- /videos/JavaScript/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | VSCode JavaScript! 6 | 7 | 8 | 9 |

VSCode.pro!

10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /videos/JavaScript/dist/main.min.js: -------------------------------------------------------------------------------- 1 | !function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([ 2 | /*!**********************************!*\ 3 | !*** ./src/index.js + 4 modules ***! 4 | \**********************************/ 5 | /*! no exports provided */ 6 | /*! all exports used */function(e,n,t){"use strict";t.r(n);var r=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"LOG:";console.log("%c"+n,"background: #bada55; color: #222222; padding: 10px;"),console.log(e),console.log("\n")};r("Ahmad","NAME"),r(function(e,n){return e+n}(50,50),"SUM"),r(function(e,n){return e-n}(50,40),"SUBTRACT"),function(e){document.querySelector("h1").textContent=e}("VSCode.pro! — Heading has changed")}]); 7 | //# sourceMappingURL=main.min.js.map -------------------------------------------------------------------------------- /videos/JavaScript/gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Gulp file. 3 | * 4 | * @version 1.0.0 5 | */ 6 | 7 | const config = require('./config.js'); 8 | const gulp = require('gulp'); // Gulp of-course 9 | 10 | // CSS related plugins. 11 | const sass = require('gulp-sass'); // Gulp plugin for Sass compilation. 12 | const minifycss = require('gulp-uglifycss'); // Minifies CSS files. 13 | const autoprefixer = require('gulp-autoprefixer'); // Autoprefixing magic. 14 | const mmq = require('gulp-merge-media-queries'); // Combine matching media queries into one media query definition. 15 | 16 | // Image related plugins. 17 | const imagemin = require('gulp-imagemin'); // Minify PNG, JPEG, GIF and SVG images with imagemin. 18 | 19 | // Utility related plugins. 20 | const rename = require('gulp-rename'); // Renames files E.g. style.css -> style.min.css 21 | const lineec = require('gulp-line-ending-corrector'); // Consistent Line Endings for non UNIX systems. Gulp Plugin for Line Ending Corrector (A utility that makes sure your files have consistent line endings) 22 | const filter = require('gulp-filter'); // Enables you to work on a subset of the original files by filtering them using globbing. 23 | const sourcemaps = require('gulp-sourcemaps'); // Maps code in a compressed file (E.g. style.css) back to it’s original position in a source file (E.g. structure.scss, which was later combined with other css files to generate style.css) 24 | const notify = require('gulp-notify'); // Sends message notification to you 25 | const browserSync = require('browser-sync').create(); // Reloads browser and injects CSS. Time-saving synchronized browser testing. 26 | const cache = require('gulp-cache'); // Cache files in stream for later use 27 | const plumber = require('gulp-plumber'); // Prevent pipe breaking caused by errors from gulp plugins 28 | const pug = require('gulp-pug'); 29 | const extReplace = require('gulp-ext-replace'); 30 | const webpack = require('webpack'); 31 | const webpackConfig = require('./webpack.config'); 32 | const inlineCss = require('gulp-inline-css'); 33 | const beep = require('beepbeep'); 34 | const pluginError = require('plugin-error'); 35 | const log = require('fancy-log'); 36 | 37 | /** 38 | * Custom Error Handler. 39 | * 40 | * @param Mixed err 41 | */ 42 | const errorHandler = r => { 43 | notify.onError('\n\n❌ ===> ERROR: <%= error.message %>\n')(r); 44 | beep(); 45 | 46 | // this.emit('end'); 47 | }; 48 | 49 | /** 50 | * Task: `browser-sync`. 51 | * 52 | * @param Mixed done Done. 53 | * @link http://www.browsersync.io/docs/options/ 54 | */ 55 | const browsersync = done => { 56 | browserSync.init({ 57 | proxy: config.projectURL, 58 | open: config.browserAutoOpen, 59 | injectChanges: config.injectChanges, 60 | watchEvents: ['change', 'add', 'unlink', 'addDir', 'unlinkDir'] 61 | }); 62 | done(); 63 | }; 64 | 65 | // Helper function to allow browser reload with Gulp 4 66 | const reload = done => { 67 | browserSync.reload(); 68 | done(); 69 | }; 70 | 71 | /** 72 | * Task: `styles`. 73 | */ 74 | gulp.task('styles', () => { 75 | return gulp 76 | .src(config.styleSRC) 77 | .pipe(plumber(errorHandler)) 78 | .pipe(sourcemaps.init()) 79 | .pipe( 80 | sass({ 81 | errLogToConsole: config.errLogToConsole, 82 | outputStyle: config.outputStyle, 83 | precision: config.precision 84 | }) 85 | ) // .on( 'error', sass.logError ) 86 | .pipe(sourcemaps.write({ includeContent: !1 })) 87 | .pipe(sourcemaps.init({ loadMaps: !0 })) 88 | .pipe(autoprefixer(config.BROWSERS_LIST)) 89 | .pipe(sourcemaps.write('./')) 90 | .pipe(lineec()) 91 | .pipe(gulp.dest(config.styleDestination)) 92 | .pipe(filter('**/*.css')) 93 | .pipe(mmq({ log: !0 })) 94 | .pipe(browserSync.stream()) 95 | .pipe(rename({ suffix: '.min' })) 96 | .pipe(minifycss({ maxLineLen: 10 })) 97 | .pipe(lineec()) 98 | .pipe(gulp.dest(config.styleDestination)) 99 | .pipe(filter('**/*.css')) 100 | .pipe(browserSync.stream()) 101 | .pipe(notify({ message: '\n\n✅ ===> STYLES — completed!\n', onLast: true })); 102 | }); 103 | 104 | /** 105 | * JavaScript via webpack. 106 | */ 107 | gulp.task('webpackJS', callback => { 108 | plumber(errorHandler); 109 | webpack(webpackConfig, (err, stats) => { 110 | // Show error. 111 | if (err) { 112 | throw new pluginError('webpack', err); 113 | } 114 | 115 | // Log stuff. 116 | log( 117 | '[webpack]', 118 | stats.toString({ 119 | colors: true, 120 | progress: true 121 | }) 122 | ); 123 | 124 | // browserSync.reload(); 125 | callback(); 126 | }); 127 | notify({ message: '\n\n✅ ===> webpackJS — completed!\n', onLast: true }); 128 | }); 129 | 130 | /** 131 | * Task: `images`. 132 | * 133 | * @link https://github.com/sindresorhus/gulp-imagemin 134 | */ 135 | gulp.task('images', () => { 136 | return gulp 137 | .src(config.imgSRC) 138 | .pipe(plumber(errorHandler)) 139 | .pipe( 140 | cache( 141 | imagemin([ 142 | imagemin.gifsicle({ interlaced: !0 }), 143 | imagemin.jpegtran({ progressive: !0 }), 144 | imagemin.optipng({ optimizationLevel: 3 }), 145 | imagemin.svgo({ plugins: [{ removeViewBox: !0 }, { cleanupIDs: !1 }] }) 146 | ]) 147 | ) 148 | ) 149 | .pipe(gulp.dest(config.imgDST)) 150 | .pipe(notify({ message: '\n\n✅ ===> IMAGES — completed!\n', onLast: true })); 151 | }); 152 | 153 | /** 154 | * Task: `clear-images-cache`. 155 | * 156 | * Deletes the images cache. By running the next "images" task, 157 | * each image will be regenerated. 158 | */ 159 | gulp.task('clearCache', c => { 160 | return cache.clearAll(c); 161 | }); 162 | 163 | /** 164 | * Pug Views. 165 | */ 166 | gulp.task('views', () => { 167 | return gulp 168 | .src(config.pugSRC) 169 | .pipe(plumber(errorHandler)) 170 | .pipe( 171 | pug({ 172 | pretty: true, 173 | locals: { 174 | // Data. 175 | data: { 176 | baseURL: '/wp-content/themes/cptheme' 177 | }, 178 | 179 | // TODO: Course Data. 180 | vscodeproData: require(config.vscodeproDataFile) 181 | } 182 | }) 183 | ) 184 | .pipe(browserSync.stream()) 185 | .pipe(extReplace('.php')) 186 | .pipe(gulp.dest(config.pugDST)) 187 | .pipe(browserSync.stream()) 188 | .pipe(notify({ message: '\n\n✅ ===> VIEWS — completed!\n', onLast: true })); 189 | }); 190 | 191 | /** 192 | * Emails Handler. 193 | * 194 | * Handle all the emails workflow. 195 | */ 196 | gulp.task('emails', () => { 197 | return gulp 198 | .src(config.emailSRC) 199 | .pipe(plumber(errorHandler)) 200 | .pipe( 201 | pug({ 202 | pretty: true, 203 | locals: { 204 | // Data that will be available throughout pug. 205 | data: { 206 | baseURL: '/wp-content/themes/cptheme' 207 | } 208 | } 209 | }) 210 | ) 211 | .pipe(browserSync.stream()) 212 | .pipe( 213 | inlineCss({ 214 | extraCss: '', 215 | applyLinkTags: true, 216 | removeStyleTags: true, 217 | removeLinkTags: true, 218 | preserveMediaQueries: true 219 | }) 220 | ) 221 | .pipe(extReplace('.php')) 222 | .pipe(gulp.dest(config.emailDST)) 223 | .pipe(browserSync.stream()) 224 | .pipe(notify({ message: '\n\n✅ ===> EMAILS — completed!\n', onLast: true })); 225 | }); 226 | 227 | /** 228 | * Important! Separate task for the reaction to `.pug` files. 229 | */ 230 | gulp.task('pug-watch', gulp.series('views')); 231 | gulp.task('email-watch', gulp.series('emails')); 232 | 233 | /** 234 | * Watch Tasks. 235 | * 236 | * Watches for file changes and runs specific tasks. 237 | */ 238 | gulp.task( 239 | 'default', 240 | gulp.parallel('styles', 'views', 'emails', 'webpackJS', 'images', browsersync, () => { 241 | gulp.watch(config.watchPug, gulp.parallel('pug-watch')), 242 | gulp.watch(config.watchEmails, gulp.parallel('email-watch')), 243 | gulp.watch(config.watchPhp, reload), 244 | gulp.watch(config.watchSvg, reload), 245 | gulp.watch(config.watchStyles, gulp.parallel('styles')), 246 | gulp.watch(config.watchJs, gulp.series('webpackJS', reload)), 247 | gulp.watch(config.imgSRC, gulp.series('images', reload)); 248 | }) 249 | ); 250 | -------------------------------------------------------------------------------- /videos/JavaScript/modules/headingChanger.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Change the HTML Heading. 3 | * 4 | * @param String newHeading Heading content. 5 | */ 6 | 7 | export const headingChanger = newHeading => { 8 | document.querySelector('h1').textContent = newHeading; 9 | }; 10 | -------------------------------------------------------------------------------- /videos/JavaScript/modules/log.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Custom log function. 3 | * 4 | * @param Mixed data Data to log. 5 | * @param String context Message. 6 | */ 7 | export const log = (data, context = 'LOG:') => { 8 | /* eslint-disable no-console */ 9 | console.log(`%c${context}`, 'background: #bada55; color: #222222; padding: 10px;'); 10 | console.log(data); 11 | console.log('\n'); 12 | /* eslint-enable no-console */ 13 | }; 14 | -------------------------------------------------------------------------------- /videos/JavaScript/modules/subtract.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Subtract. 3 | * 4 | * @param {Number} x Number 5 | * @param {Number} y Number 6 | */ 7 | export const subtract = (x, y) => x - y; 8 | -------------------------------------------------------------------------------- /videos/JavaScript/modules/sum.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Summation. 3 | * 4 | * @param {Number} x Number 5 | * @param {Number} y Number 6 | */ 7 | export const sum = (x, y) => x + y; 8 | -------------------------------------------------------------------------------- /videos/JavaScript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vscodepro", 3 | "description": "VSCode.pro for Power Users", 4 | "version": "1.0.0", 5 | "author": "AhmadAwais", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "scripts": { 9 | "start": "webpack", 10 | "dev": "webpack --watch" 11 | }, 12 | "devDependencies": { 13 | "babel-cli": "^6.26.0", 14 | "babel-core": "^6.26.3", 15 | "babel-preset-cgb": "^1.5.0", 16 | "eslint": "^5.3.0", 17 | "webpack": "^4.16.5", 18 | "webpack-cli": "^3.1.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /videos/JavaScript/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // JAVASCRIPT —————————————————————————————————————————— 3 | "[javascript]": { 4 | "editor.formatOnSave": true // True for prettier. 5 | }, 6 | "npm.enableScriptExplorer": true, 7 | // ESLint. 8 | "eslint.autoFixOnSave": true, 9 | "eslint.alwaysShowStatus": true, 10 | // Prettier. 11 | "prettier.eslintIntegration": true, 12 | "prettier.printWidth": 120, 13 | "prettier.singleQuote": true, 14 | "prettier.useTabs": true, 15 | "prettier.tabWidth": 4 16 | } 17 | -------------------------------------------------------------------------------- /videos/JavaScript/src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main JavaScript App. 3 | * 4 | * VSCode.pro course. 5 | * 6 | * @since 1.0.0 7 | */ 8 | 9 | import { headingChanger } from '../modules/headingChanger'; 10 | import { log } from '../modules/log'; 11 | import { subtract } from '../modules/subtract'; 12 | import { sum } from '../modules/sum'; 13 | 14 | // Fancy log. 15 | const name = 'Ahmad'; 16 | log(name, 'NAME'); 17 | 18 | // Sum. 19 | log(sum(50, 50), 'SUM'); 20 | log(subtract(50, 40), 'SUBTRACT'); 21 | 22 | // Change the heading. 23 | headingChanger('VSCode.pro! — Heading has changed'); 24 | -------------------------------------------------------------------------------- /videos/JavaScript/webpack.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * webpack Configuration 3 | * 4 | * Working of a webpack can be very simple or complex. This is an internally simple 5 | * build configuration. 6 | * 7 | * webpack basics — If you are new the webpack here's all you need to know: 8 | * 1. webpack is a module bundler. It bundles different JS modules together. 9 | * 2. It needs and entry point and an output to process file(s) and bundle them. 10 | * 3. By default it only understands common JavaScript but you can make it 11 | * understand other formats by way of adding a webpack loader. 12 | * 4. In the file below you will find an entry point, an output, and a babel-loader 13 | * that tests all .js files excluding the ones in node_modules to process the 14 | * ESNext and make it compatible with older browsers i.e. it converts the 15 | * ESNext (new standards of JavaScript) into old JavaScript through a loader 16 | * by Babel. 17 | * 18 | * @since 1.0.0 19 | */ 20 | 21 | const fs = require('fs'); 22 | const path = require('path'); 23 | 24 | // Make sure any symlinks in the project folder are resolved: 25 | const pluginDir = fs.realpathSync(process.cwd()); 26 | const resolvePath = relativePath => path.resolve(pluginDir, relativePath); 27 | 28 | // Export configuration. 29 | module.exports = { 30 | mode: 'production', 31 | devtool: 'source-map', 32 | entry: { 33 | 'main.min': './src/index.js' // 'name' : 'path/file.ext'. 34 | }, 35 | output: { 36 | pathinfo: true, 37 | path: resolvePath('./dist/'), // The dist folder. 38 | filename: '[name].js' 39 | }, 40 | 41 | module: { 42 | rules: [ 43 | { 44 | test: /\.(js|jsx|mjs)$/, 45 | exclude: /(node_modules|bower_components)/, 46 | use: { 47 | loader: 'babel-loader', 48 | options: { 49 | babelrc: false, 50 | presets: [require.resolve('babel-preset-cgb')], 51 | 52 | // This is a feature of `babel-loader` for webpack (not Babel itself). 53 | // It enables caching results in ./node_modules/.cache/babel-loader/ 54 | // directory for faster rebuilds. 55 | cacheDirectory: true 56 | } 57 | } 58 | } 59 | ] 60 | }, 61 | 62 | // Add externals. 63 | externals: { 64 | wpObj: 'wpObj', 65 | gtag: 'gtag', 66 | Intercom: 'Intercom', 67 | jquery: 'jQuery', // import $ from 'jquery'; 68 | Paddle: 'Paddle' 69 | } 70 | }; 71 | -------------------------------------------------------------------------------- /videos/Markdown/.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "default": true, 3 | "MD007": false, 4 | "MD041": false, 5 | "MD013": false, 6 | "MD026": false 7 | } 8 | -------------------------------------------------------------------------------- /videos/Markdown/Markdown.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Heading 1 4 | 5 | ## Heading 2 6 | 7 | ### Heading 3: 8 | 9 | Start writing some text and include a `code`. 10 | Ahmad is founder of Worwox. Receive here. Silly thing. 11 | 12 | ```js 13 | const name = 'Ahmad'; 14 | 15 | if (name) { 16 | console.log(name); 17 | } 18 | ``` 19 | 20 | | Heading | Heading | 21 | |---------|---------------------------------| 22 | | What? | Is going on? Manual formatting. | 23 | 24 | ### Todo 25 | 26 | - [x] Do this 27 | - [x] Do that 28 | - [ ] Do that 29 | 30 | ### Math 31 | 32 | $x + y = z$ 33 | 34 | ### TOC 35 | 36 | - [Heading 1](#heading-1) 37 | - [Heading 2](#heading-2) 38 | - [Heading 3:](#heading-3) 39 | - [Todo](#todo) 40 | - [Math](#math) 41 | - [TOC](#toc) 42 | -------------------------------------------------------------------------------- /videos/Markdown/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // MARKDOWN ————————————————————————————————————— 3 | "[markdown]": { 4 | "editor.formatOnSave": false, 5 | "editor.quickSuggestions": true 6 | }, 7 | "files.defaultLanguage": "markdown", 8 | } 9 | -------------------------------------------------------------------------------- /videos/PHP+WordPress-Setup/WordPress-Debug.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | VSCode WordPress Debugging Setup: WordPress Xdebug Setup for Local by FlyWheel with VSCode 5 |


6 | 7 | ## 🚅 TL;DR 8 | 9 | - Make sure your `Local by FlyWheel` WordPress install is a custom install 10 | - Configure `xdebug.remote_autostart = 1` in the `php.ini` file 11 | - Restart your site container in `Local by FlyWheel` to apply new settings 12 | - Install VSCode PHP Debugger extension 13 | - Add PHP Debugger Configuration with an extra property for the `Listen for Xdebug` section i.e. `"pathMappings": {"/app/public": "${workspaceRoot}"}` 14 | 15 | ## 🚥 Detailed Tutorial 16 | 17 | Here're are some easy steps to follow to make sure you can debug WordPress in Local by FlyWheel with VSCode: 18 | 19 | - [🚅 TL;DR](#%F0%9F%9A%85-tldr) 20 | - [🚥 Detailed Tutorial](#%F0%9F%9A%A5-detailed-tutorial) 21 | - [1️⃣ Custom WordPress Install](#1%EF%B8%8F%E2%83%A3-custom-wordpress-install) 22 | - [2️⃣ Configure Xdebug](#2%EF%B8%8F%E2%83%A3-configure-xdebug) 23 | - [3️⃣ Restart The Site](#3%EF%B8%8F%E2%83%A3-restart-the-site) 24 | - [4️⃣ Visual Studio Code Configuration](#4%EF%B8%8F%E2%83%A3-visual-studio-code-configuration) 25 | - [5️⃣ Debug Your WordPress](#5%EF%B8%8F%E2%83%A3-debug-your-wordpress) 26 | - [🔥 Extra Plugin (optional)](#%F0%9F%94%A5-extra-plugin-optional) 27 | 28 | ### 1️⃣ Custom WordPress Install 29 | 30 | > Make sure your `Local by FlyWheel` WordPress install is a custom install. 31 | 32 | - ✅ Flywheel Local has Xdebug installed by default if you choose “Custom” instead of “Preferred” when setting up a new local environment. 33 | - ⚠️ You can check your already installed WP with the ”Site Setup” tab. If you can change the PHP version there, you have the “Custom” environment running and you have Xdebug installed. 34 | - ⚠️ If not, just export your site, import it back while creating a new site and this time choose “Custom”. 35 | 36 | 37 | ### 2️⃣ Configure Xdebug 38 | 39 | > Configure `xdebug.remote_autostart = 1` in the `php.ini` file. 40 | 41 | Now in the right environment we need to configure Xdebug for that: 42 | 43 | - Go to your local WordPress install path E.g. `/PATH_WHERE_YOU_INSTALLED_WORDPRESS/conf/php/7.x.x/php.ini` 44 | - Search for the `[Xdebug]` section 45 | - Add the following line in this section 46 | 47 | ```ini 48 | xdebug.remote_autostart = 1 49 | ``` 50 | 51 | > While only the above option is required but some 3rd party extension/plugin for local can sometimes change things so make sure in the `[Xdebug]` section all the following settings are set to `1` (only if your debugger is not working). 52 | 53 | ```ini 54 | xdebug.scream = 1 55 | xdebug.remote_enable = 1 56 | xdebug.show_local_vars = 1 57 | xdebug.remote_autostart = 1 58 | xdebug.remote_connect_back = 1 59 | ``` 60 | 61 | Save the `php.ini` file. 62 | 63 | ### 3️⃣ Restart The Site 64 | 65 | > Restart your site container in `Local by FlyWheel` to apply new settings. 66 | 67 | - On the left side menu, right click on your site 68 | - Select `Restart` option to restart the site. 69 | 70 | ![Restart GIF](https://on.ahmda.ws/2d212283e762/c) 71 | 72 | ### 4️⃣ Visual Studio Code Configuration 73 | 74 | Let's start configuration of VSCode: 75 | 76 | - First of all, install [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) extension 77 | - Open your Local WordPress site project folder in VSCode. You should open the entire WordPress site folder i.e. `/PATH_WHERE_YOU_INSTALLED_WORDPRESS/app/public` 78 | - Go to the Debug view in VSCode `COMMAND (⌘) + SHIFT (⇧) + D` 79 | - Click “Add configuration” from the top toolbar 80 | - Select `PHP` and add the configuration 81 | - In the `.vscode/launch.json` file that was created inside the `Listen for Xdebug` section add `"pathMappings": {"/app/public": "${workspaceRoot}"}` 82 | 83 | In short, your debug `launch.json` file will look like this: 84 | 85 | ``` json 86 | { 87 | // Use IntelliSense to learn about possible attributes. 88 | // Hover to view descriptions of existing attributes. 89 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 90 | "version": "0.2.0", 91 | "configurations": [ 92 | { 93 | "name": "Listen for Xdebug", 94 | "type": "php", 95 | "request": "launch", 96 | "port": 9000, 97 | "pathMappings": { 98 | "/app/public": "${workspaceRoot}" 99 | } 100 | }, 101 | { 102 | "name": "Launch currently open script", 103 | "type": "php", 104 | "request": "launch", 105 | "program": "${file}", 106 | "cwd": "${fileDirname}", 107 | "port": 9000 108 | } 109 | ] 110 | } 111 | ``` 112 | 113 | ### 5️⃣ Debug Your WordPress 114 | 115 | > Now go ahead and debug your WordPress app/plugin/theme and what not. 116 | 117 | ![WP VSCode Debug GIF](https://on.ahmda.ws/43bea345c293/c) 118 | 119 | - After all this, click the play button next to “Listen for Xdebug” in the top debug bar 120 | - Create a breakpoint in your PHP code e.g. add this line and a breakpoint`` to `header.php` of your theme 121 | - Browse your site and VSCode should pop up showing all your debug info 122 | 123 | >Remember to stop debugging process when you stop working. A good theme helps with that, install [🦄 Shades of Purple →](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) 124 | 125 | 126 | ## 🔥 Extra Plugin (optional) 127 | 128 | You can also install a local plugin called [`local-addon-xdebug-control`](https://github.com/lucatume/local-addon-xdebug-control) for UI based control of Xdebug settings in your `Local by FlyWheel` software. 129 | 130 | > Make sure everything is set to yes for a sane debugging experience. 131 | 132 | ![Add-on](https://on.ahmda.ws/9155be150de8/c) 133 | 134 | 135 | > For more follow [@MrAhmadAwais](https://twitter.com/MrAhmadAwais/) → 136 | 137 | Peace! ✌️ 138 | 139 | --- 140 | 141 | #### ⚡︎ Setup Xdebug in Plain Docker for WordPress 142 | 143 | Chris Bibby one of the VSCode.pro customers wrote a guide on [Setting up Xdebug with VSCode for WordPress in Docker](https://medium.com/@cmbibby/how-to-setup-xdebug-in-vscode-for-wordpress-in-docker-5d5276421afc?sk=b100e535d2e06ef001e6d885d1ab4d43) for folks who don't use FlyWheel's Local. 144 | -------------------------------------------------------------------------------- /videos/PHP+WordPress-Setup/WordPress.md: -------------------------------------------------------------------------------- 1 | # VSCode WordPress Setup, Formatting, Extensions 2 | 3 | ## Install WordPress Coding Standards 4 | 5 | For having these standards you need to install a couple of things like Composer, PHPCS, WordPress Coding Standards. Run the following commands. 6 | 7 | ```sh 8 | # Make ~/bin dir. 9 | cd ~ && mkdir -p bin && cd bin 10 | 11 | # Download install Composer. 12 | curl -s http://getcomposer.org/installer | php 13 | 14 | # Clone PHPCS and WPCS repo. 15 | git clone https://github.com/squizlabs/PHP_CodeSniffer.git phpcs 16 | git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs 17 | 18 | # Install composer, phpcs, and phpcbf. 19 | sudo ln -s ~/bin/composer.phar /usr/local/bin/composer 20 | sudo ln -s ~/bin/phpcs/bin/phpcs /usr/local/bin/phpcs 21 | sudo ln -s ~/bin/phpcs/bin/phpcbf /usr/local/bin/phpcbf 22 | 23 | # Set phpcs configuration for wpcs. 24 | phpcs --config-set installed_paths /Users/$USER/bin/wpcs 25 | ``` 26 | 27 | And then go to VSCode, install [phpcs](https://ahmda.ws/2CeELXC) extension and then go to settings ⌘ + , and add the following settings. Finally reload. 28 | 29 | ```json 30 | // Setting for phpcs. 31 | "phpcs.executablePath": "/usr/local/bin/phpcs", 32 | "phpcs.standard": "WordPress", 33 | ``` 34 | 35 | Check the available standards `phpcs -i` 36 | -------------------------------------------------------------------------------- /videos/PHP+WordPress-Setup/php.md: -------------------------------------------------------------------------------- 1 | # PHP Extensions 2 | 3 | - [x] [PHP Intelephense](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client) 4 | - [x] [PHP IntelliSense](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense) 5 | - [x] [PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug) 6 | - [x] [PHP Namespace Resolver](https://marketplace.visualstudio.com/items?itemName=MehediDracula.php-namespace-resolver) 7 | - [x] [PHP Symbols](https://marketplace.visualstudio.com/items?itemName=linyang95.php-symbols) 8 | - [x] [phpcs](https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs) 9 | - [x] [phpcbf](https://marketplace.visualstudio.com/items?itemName=persoderlind.vscode-phpcbf) 10 | - [x] [Php DocBlock Generator](https://marketplace.visualstudio.com/items?itemName=vincentkos.php-docblock-generator) 11 | - [x] [PHP DocBlocker](https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker) 12 | - [x] [phpdoc-comment-vscode-plugin](https://marketplace.visualstudio.com/items?itemName=rexshi.phpdoc-comment-vscode-plugin) 13 | - [x] [Composer](https://marketplace.visualstudio.com/items?itemName=ikappas.composer) 14 | - [x] [Save and Run](https://marketplace.visualstudio.com/items?itemName=wk-j.save-and-run) 15 | - [x] [WordPress Toolbox](https://marketplace.visualstudio.com/items?itemName=wordpresstoolbox.wordpress-toolbox) 16 | - [x] [Search WordPress Docs](https://marketplace.visualstudio.com/items?itemName=yogensia.searchwpdocs) 17 | -------------------------------------------------------------------------------- /videos/PHP+WordPress-Setup/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // PHP/WORDPRESS ————————————————————————————— 3 | "php.suggest.basic": false, 4 | "intelephense.formatProvider.enable": false, 5 | "[php]": { 6 | "editor.formatOnSave": false, 7 | "editor.formatOnPaste": false 8 | }, 9 | // PHPCS. 10 | "phpcs.executablePath": "/usr/local/bin/phpcs", 11 | "phpcs.standard": "WordPress", 12 | // PHPCBF. 13 | "phpcbf.onsave": true, 14 | "phpcbf.standard": "WordPress", 15 | "phpcbf.executablePath": "/usr/local/bin/phpcbf", 16 | // PHP Files. 17 | "files.associations": { 18 | ".php_cs": "php", 19 | ".php_cs.dist": "php", 20 | // Super important, otherwise intelephense will not auto-index your project. 21 | "*.php": "php" 22 | }, 23 | "phpcs.ignorePatterns": ["*/vendor/*", "*/vendors/*"], 24 | // Save and Run. 25 | "saveAndRun": { 26 | "commands": [ 27 | { 28 | "match": "\\.php$", 29 | "cmd": "phpcbf -q --standard='WordPress' ${file}", 30 | "silent": true 31 | } 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/-power-user.md: -------------------------------------------------------------------------------- 1 | # VSCode.pro 2 | 3 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 4 | > MacOS → Windows/Linux. 5 | > Command === Control 6 | > Option/Alt === Alt 7 | 8 | ## Power User Workflows 9 | 10 | 👉 `LINES` 11 | 1. Line iterations → `Command (⌘) | Alt (⌥) | Shift (⇧) | Left/Right (←/→)` 12 | 2. Delete a line → `Command (⌘)/Ctrl (⌃) + Shift (⇧) + K` 13 | 3. Duplicate a line → `Alt (⌥) + Shift (⇧) + Up/Down (↑/↓)` 14 | 4. Cut/Copy/Paste a line → `Command (⌘) + X/C/V` 15 | 5. Move line up and down → `Command (⌘) + Ctrl (⌃) + Up/Down (↑/↓)` 16 | 17 | 👉 `WORDS` 18 | 19 | 6. Next occurrence → `Command (⌘) + D` 20 | 7. All occurrences → `Command (⌘) + Ctrl (⌃) + G` 21 | 8. Move Selection to Next → `Command (⌘) + K + Command (⌘) + D` 22 | 23 | 👉 `CURSORS` 24 | 25 | 9. Multi-Cursor (Mouse/Keypad) → `Command (⌘) + Click` 26 | 10. Multi-Cursor Drag (Mouse/Keypad) → `Command (⌘) + Shift (⇧) + Drag` 27 | 11. Multi-Cursor (Keyboard) → `Command (⌘) + Alt (⌥) + Up/Down (↑/↓)` 28 | 12. Multi-Cursor Selection (Keyboard) → `Command (⌘) + Shift (⇧) + L` 29 | 13. Undo the last cursor → `Command (⌘) + U` 30 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/1-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | 8 | 9 | 10 | ## ⚡ Current Workflow: 11 | 12 | Line iterations → `Command (⌘) | Alt (⌥) | Shift (⇧) | Left/Right (←/→)` 13 | 14 | 15 | ## 🗑 Sandbox: 16 | 17 | Ahmad Awais is teaching power user workflows for VSCode. 18 | Maedah Batool is learning power user workflows for VSCode. 19 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/10-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | ## ⚡ Current Workflow: 8 | 9 | Multi-Cursor Drag (Mouse/Keypad) → `Command (⌘) + Shift (⇧) + Drag` 10 | 11 | 12 | 13 | ## 🗑 Sandbox: 14 | 15 | ```css 16 | .btn1 { background: #FAD000 } 17 | .btn2 { background: #1E1E3F } 18 | .btn3 { background: #3E1f3E } 19 | ``` 20 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/11-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | 8 | 9 | ## ⚡ Current Workflow: 10 | 11 | Multi-Cursor (Keyboard) → `Command (⌘) + Alt (⌥) + Up/Down (↑/↓)` 12 | 13 | 14 | ## 🗑 Sandbox: 15 | 16 | ```css 17 | .btn1 { background: #FAD000 } 18 | .btn2 { background: #1E1E3F } 19 | .btn3 { background: #3E1f3E } 20 | ``` 21 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/12-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | 8 | 9 | 10 | ## ⚡ Current Workflow: 11 | 12 | Multi-Cursor Selection (Keyboard) → `Command (⌘) + Shift (⇧) + L` 13 | 14 | 15 | ## 🗑 Sandbox: 16 | 17 | ```css 18 | .btn1 { background: #FAD000 } 19 | .btn2 { background: #1E1E3F } 20 | .btn3 { background: #3E1f3E } 21 | ``` 22 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/13-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | 8 | 9 | ## ⚡ Current Workflow: 10 | 11 | Undo the last cursor → `Command (⌘) + U` 12 | 13 | 14 | ## 🗑 Sandbox: 15 | 16 | ```css 17 | .btn1 { background: #FAD000 } 18 | .btn2 { background: #1E1E3F } 19 | .btn3 { background: #3E1f3E } 20 | ``` 21 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/2-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | 8 | 9 | ## ⚡ Current Workflow: 10 | 11 | Delete a line → `Command (⌘) + Shift (⇧) + K` 12 | 13 | 14 | 15 | ## 🗑 Sandbox: 16 | 17 | Maedah Batool is learning power user workflows for VSCode. 18 | Ahmad Awais is teaching power user workflows for VSCode. 19 | Maedah Batool is learning power user workflows for VSCode. 20 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/3-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | 8 | 9 | 10 | ## ⚡ Current Workflow: 11 | 12 | Duplicate a line → `Alt (⌥) + Shift (⇧) + Up/Down (↑/↓)` 13 | 14 | 15 | ## 🗑 Sandbox: 16 | 17 | Ahmad Awais is teaching power user workflows for VSCode. 18 | Maedah Batool is learning power user workflows for VSCode. 19 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/4-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | 8 | 9 | 10 | ## ⚡ Current Workflow: 11 | 12 | Cut/Copy/Paste a line → `Command (⌘) + X/C/V` 13 | 14 | 15 | ## 🗑 Sandbox: 16 | 17 | 1️⃣ FIRST — Maedah Batool is learning power user workflows for VSCode. 18 | 2️⃣ SECOND — Ahmad Awais is teaching power user workflows for VSCode. 19 | 3️⃣ THIRD — Ahmad Awais and Maedah Batool are the WordPress Couple. 20 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/5-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | 8 | 9 | ## ⚡ Current Workflow: 10 | 11 | Move line up and down → `Command (⌘) + Ctrl (⌃) + Up/Down (↑/↓)` 12 | 13 | 14 | 15 | ## 🗑 Sandbox: 16 | 17 | 1️⃣ FIRST — Maedah Batool is learning power user workflows for VSCode. 🔰 18 | 2️⃣ SECOND — Ahmad Awais is teaching power user workflows for VSCode. 🔥 19 | 3️⃣ THIRD — Ahmad Awais and Maedah Batool are the WordPress Couple. 👫 20 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/6-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | ## ⚡ Current Workflow: 8 | 9 | Next occurrence → `Command (⌘) + D` 10 | 11 | 12 | ## 🗑 Sandbox: 13 | 14 | ```js 15 | const users = new Stack(); 16 | 17 | users.isEmpty(); 18 | users.push('Ahmad Awais'); 19 | users.push('Maedah Batool'); 20 | users.size(); 21 | users.isEmpty(); 22 | ``` 23 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/7-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | ## ⚡ Current Workflow: 8 | 9 | All occurrences → `Command (⌘) + Ctrl (⌃) + G` 10 | 11 | 12 | ## 🗑 Sandbox: 13 | 14 | ```js 15 | const users = new Stack(); 16 | 17 | users.isEmpty(); 18 | users.push('Ahmad Awais'); 19 | users.push('Maedah Batool'); 20 | users.size(); 21 | users.isEmpty(); 22 | ``` 23 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/8-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | ## ⚡ Current Workflow: 8 | 9 | Move Selection to Next → `Command (⌘) + K + Command (⌘) + D` 10 | 11 | 12 | ## 🗑 Sandbox: 13 | 14 | ```js 15 | const students = new Stack(); 16 | const teachers = new Stack(); 17 | 18 | students.push('Maedah Batool'); 19 | students.push('John Doe'); 20 | students.push('Jane Doe'); 21 | students.push('WPCouple'); 22 | students.push('Ahmad Awais'); 23 | ``` 24 | -------------------------------------------------------------------------------- /videos/Power User Workflows — File Editing/9-pro-workflow.md: -------------------------------------------------------------------------------- 1 | > I'm using Mac + SublimeText Keymap so feel free to convert the following: 2 | > MacOS → Windows/Linux. 3 | > Command === Control 4 | > Option/Alt === Alt 5 | 6 | 7 | ## ⚡ Current Workflow: 8 | 9 | Multi-Cursor (Mouse/Keypad) → `Command (⌘) + Click` 10 | 11 | 12 | 13 | ## 🗑 Sandbox: 14 | 15 | ```css 16 | .btn1 { background: #FAD000 } 17 | .btn2 { background: #1E1E3F } 18 | .btn3 { background: #3E1f3E } 19 | ``` 20 | -------------------------------------------------------------------------------- /videos/Pug/pug.pug: -------------------------------------------------------------------------------- 1 | html(lang="en") 2 | head 3 | meta(charset="UTF-8") 4 | meta(name="viewport", content="width=device-width, initial-scale=1.0") 5 | meta(http-equiv="X-UA-Compatible", content="ie=edge") 6 | title VSCode.pro 7 | body 8 | .main(data-pug="true") This is pug. 9 | -------------------------------------------------------------------------------- /videos/Pug/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "puglint.enable": true, 3 | "puglint.run": "onSave", 4 | } 5 | -------------------------------------------------------------------------------- /videos/Random Files/stack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Stack 3 | * 4 | * Last In First Out — Collection of data. 5 | */ 6 | 7 | class Stack { 8 | /** 9 | * Constructor need I say more?! 10 | */ 11 | constructor() { 12 | // Data inside the stack in form of an array. 13 | this.data = []; 14 | } 15 | 16 | /** 17 | * Adds item to Stack. 18 | * 19 | * @param String item Item to push. 20 | */ 21 | push(item) { 22 | this.data[this.data.length] = item; // Trick: this.data.length is always +1 of the index. 23 | } 24 | 25 | /** 26 | * Removes item from Stack. 27 | */ 28 | pop() { 29 | return this.data.pop(); 30 | } 31 | 32 | /** 33 | * Gets the top most item of a Stack. 34 | */ 35 | peek() { 36 | return this.data[this.data.length - 1]; 37 | } 38 | 39 | /** 40 | * Checks if the Stack is empty and returns TRUE/FALSE. 41 | */ 42 | isEmpty() { 43 | return this.data.length === 0; // Equivalent to `!!this.data.length`. 44 | } 45 | 46 | /** 47 | * Gets the size of Stack. 48 | */ 49 | size() { 50 | return this.data.length; 51 | } 52 | } 53 | 54 | // Init. 55 | const theStack = new Stack(); 56 | 57 | theStack.isEmpty(); // STATE: true. 58 | theStack.push('1'); // [1]. 59 | theStack.push('2'); // [1, 2]. 60 | theStack.push('3'); // [1, 2, 3]. 61 | theStack.pop(); // [1, 2]. 62 | theStack.peek(); // 2. 63 | theStack.size(); // 2. 64 | theStack.isEmpty(); // STATE: false. 65 | let stackSize = theStack.size(); 66 | -------------------------------------------------------------------------------- /videos/Search & Replace/searchReplace.md: -------------------------------------------------------------------------------- 1 | # VSCode: Search & Replace 2 | 3 | Let's talk about Search and Replace features of VSCode. 4 | 5 | ## Search 6 | 7 | 1. `COMMAND (⌘) + SHIFT (⇧) + F` to open the search view 8 | 2. Supports regular expression searching in the search box 9 | 3. Toggle Search Details `COMMAND (⌘) + SHIFT (⇧) + J` 10 | 11 | In the input box below the search box, you can enter patterns to include or exclude from the search. If you enter example, that will match every folder and file named example in the workspace. If you enter ./example, that will match the folder example/ at the top level of your workspace. Use ! to exclude those patterns from the search. !example will skip searching any folder or file named example. You can also use glob syntax: 12 | 13 | - `*` to match one or more characters in a path segment 14 | - `?` to match on one character in a path segment 15 | - `**` to match any number of path segments, including none 16 | - `{}` to group conditions (e.g. {**/*.html,**/*.txt} matches all HTML and text files) 17 | - `[]` to declare a range of characters to match (e.g., example.[0-9] to match on example.0, example.1, …) 18 | 19 | ## Search and Replace 20 | 21 | You can also Search and Replace across files. Expand the Search widget to display the Replace text box. 22 | 23 | 1. Change the key shortcut to `COMMAND (⌘) + SHIFT (⇧) + R` 24 | 2. Replace All || Replace in single file || Dismiss instance/files 25 | 26 | > Tip: You can quickly reuse a previous search term by using `↓` and `↑` to navigate through your search term history. 27 | -------------------------------------------------------------------------------- /videos/Snippets Workflow/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Demo JavaScript File for Snippets. 3 | * 4 | * @package VSCode.pro 5 | */ 6 | 7 | const name = 'Ahmad'; 8 | 9 | console.log('name', name); 10 | 11 | console.log('Works'); // Works 12 | 13 | /** 14 | * Function Explanation. 15 | */ 16 | const fn = () => { } 17 | 18 | 19 | /** 20 | * Sum the input. 21 | */ 22 | const sum = (a, b) => a + b; 23 | -------------------------------------------------------------------------------- /videos/Spelling Check/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // SPELLINGS ————————————————————————————————— 3 | "spellright.documentTypes": [ 4 | "plaintext", 5 | "markdown", 6 | "latex", 7 | "html", 8 | "jade", 9 | "pug", 10 | "css", 11 | "php", 12 | "javascript" 13 | ], 14 | } 15 | -------------------------------------------------------------------------------- /videos/UI Part 2/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // UI IMPROVEMENTS —————————————————— 3 | // Part 1. 4 | "editor.minimap.enabled": false, 5 | "workbench.editor.enablePreview": false, 6 | "explorer.openEditors.visible": 1, 7 | "workbench.startupEditor": "newUntitledFile", 8 | "editor.codeLens": false, 9 | "explorer.confirmDragAndDrop": false, 10 | "editor.snippetSuggestions": "top", 11 | "editor.tabCompletion": true, 12 | "editor.quickSuggestionsDelay": 0, 13 | "editor.multiCursorModifier": "ctrlCmd", 14 | "terminal.integrated.macOptionIsMeta": true, 15 | "workbench.statusBar.feedback.visible": false, 16 | // Part 2. 17 | "editor.wordWrap": "on", 18 | "debug.toolBarLocation": "docked", 19 | "window.restoreFullscreen": true, 20 | "workbench.editor.tabCloseButton": "off", 21 | "workbench.panel.defaultLocation": "right", 22 | "terminal.integrated.drawBoldTextInBrightColors": false, 23 | "gulp.autoDetect": "off", 24 | "grunt.autoDetect": "off", 25 | "editor.rulers": [ 26 | 80, 27 | 100, 28 | 120 29 | ], 30 | } 31 | --------------------------------------------------------------------------------