Top 10 VS Code Keyboard Shortcuts You Must Learn to Use!
By codeSTACKr
Published: Feb 13, 2023“
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
VS Code Tip of the Day
Here are the top 10 VS Code keyboard shortcuts you must learn to use!- Number 10: Control + P to quickly open files.
- Number 9: Control + K S to save all open files.
- Number 8: Control + / on to quickly comment out code.
- Number 7: Control + B to toggle the sidebar.
- Number 6: Control + D to select the next occurrence of the current selection.
- Number 5: Control + Shift + L to select all occurrences of the current selection.
- Number 4: Alt + Up/Down Arrow to move lines up or down.
- Number 3: Alt + Shift + Up/Down Arrow to duplicate lines up or down.
- Number 2: F2 to rename a symbol and all occurrences.
- Number 1: Control + Shift + P to open the command palette, or did you know you can just press just F1?!?
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Show support!
- PayPal: https://paypal.me/codeSTACKr
Watch Next:
- Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
Tag: scripting
[#Script #Coding] A Visual IDE for React?!? The Future of Web Development
A Visual IDE for React?!? The Future of Web Development
By codeSTACKr
Published: Jan 02, 2023“
Download Codux Free at https://codux.hopp.to/codeSTACKr
Codux is a visual IDE, or graphical editor, that allows you to build and edit React components like you’re drawing on a canvas.
You’ll see and have access to the code right inside Codux, but it shouldn’t replace your existing IDE. In fact, the goal of Codux is not to replace your existing IDE, but to turbo charge your React workflow by giving you the ability to visually edit as well. As you make changes in Codux you’ll see the updates happen in real time in your existing IDE.
Codux supports any React project built using TypeScript with styling in CSS, Sass, or CSS Modules, and has full Git integration.
Another great feature is the ability to develop components in isolation. That’s generally how we build in React. We build components. But we usually can’t see each component rendered in isolation. With Codux, you can work on each component individually, see each component in various states, then bring them all together where needed.
Because this is a graphical user interface, even someone with little to no React experience can easily update and edit components visually and be confident that the updates reflected in the code will be accurate.
Just like in your browser’s dev tools, you’ll see all of the CSS styles for each element and you can edit them. This makes memorizing every CSS property name and value a thing of the past. Every property is visually available to edit. And these changes take place immediately in your code base.
To get started, you can import almost any existing React project or create a new project from scratch.
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Timestamps
00:00 – Intro 02:25 – Building a YouTube Clone from scratch using Codux 02:42 – Create a new project 05:51 – Building the header component 07:23 – Building the side menu bar component 08:19 – Building the filters bar component 09:33 – Building the video card component 10:42 – Defining TypeScript props for your video card component 11:39 – Putting it all together in our App component 13:20 – Run the application locally to test 13:34 – Giving the YouTube clone a new name 13:49 – Commit our changes and publish to GitHub
Show support!
- PayPal: https://paypal.me/codeSTACKr
Watch Next:
- Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
[#Script #Coding] Pimp my Cursor – VS Code Style
Pimp my Cursor – VS Code Style
By codeSTACKr
Published: Feb 03, 2023“
VS Code Tip of the Day
I get tons of questions about my vs code cursor settings. So, let’s take a look..
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Show support!
- PayPal: https://paypal.me/codeSTACKr
Watch Next:
- Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
[#Script #Coding] Best VS Code Extension for Local Development
Best VS Code Extension for Local Development
By codeSTACKr
Published: Jan 02, 2023“
If you use VS Code, you must install the Live Server extension!
It lets you easily launch a local development server for your static or dynamic web pages.
After you install the extension, open any HTML file and click the Go Live button from the bottom to start it up in your default browser.
The best part about it is the live reloading feature.
Every time you make an update and save the file, it will automatically see the changes and reload the page for you.
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZ
Get my FREE VS Code Cheat Sheet: https://courses.codestackr.com/vs-cod…
Tools I use:
- codeSTACKr VS Code Theme: https://marketplace.visualstudio.com/…
- STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
- SuperHero Extension Pack: https://marketplace.visualstudio.com/…
Show support!
- PayPal: https://paypal.me/codeSTACKr
Watch Next:
- Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yH…
Connect With codeSTACKr:
- Website: https://www.codestackr.com
- Twitter: https://twitter.com/codeSTACKr
- Instagram: https://instagram.com/codeSTACKr
- Facebook: https://facebook.com/codeSTACKr
”
[#Script #Coding] Object Oriented Programming (OOP) in C++ Course
Object Oriented Programming (OOP) in C++ Course
By freeCodeCamp.org
Published: Feb 02, 2021“
Object Oriented Programming (OOP) is commonly used when writing code with C++. In this crash course, you will learn what OOP is and how to implement it using C++.
This course was developed by Saldina Nurak (CodeBeauty). Check out her channel: https://www.youtube.com/c/CodeBeauty
Course Contents
- (0:00:00) Introduction
- (0:00:54) Introduction to OOP
- (0:03:17) Classes and objects
- (0:10:40) Access modifiers
- (0:17:26) Constructors
- (0:29:39) Encapsulation
- (0:39:50) Abstraction
- (0:52:23) Inheritance
- (1:15:43) Polymorphism
- (1:28:26) Outro
- (1:29:01) Bloopers
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
[#Script #Coding] Learn Tailwind CSS – Course for Beginners
Learn Tailwind CSS – Course for Beginners
By freeCodeCamp.org
Published: Jan 17, 2023“
This course will give you a full introduction into all of the core concepts of Tailwind CSS — it will also provide details on every feature that provides Tailwindcss.
Course from codewithguillaume.
Contents
- (0:00:00) Introduction
- (0:02:36) Setup
- (0:17:01) Colors
- (0:29:11) Customization
- (0:42:11) Typography
- (1:05:21) Spaces & sizes
- (1:29:36) Flex
- (1:51:46) Grids
- (2:12:48) Layouts
- (2:37:49) Borders
- (2:45:41) Effects & filters
- (2:57:33) Animations
- (3:08:28) Design System
- (3:56:31) Core concepts
- (4:05:26) Dark mode
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
[#Script #Coding] Using map() in Python #shorts
Using map() in Python #shorts
By freeCodeCamp.org
Published: Jan 27, 2023“
Master the HTTP networking protocol by completing over 80 coding exercises and quizzes in JavaScript. Once you’ve learned it all, we’ll build a real web crawler using Node.js to put all the concepts into practice.
HTTP is the backbone of the modern web, and in this course we’ll do a deep dive into all of the fundamentals you’ll need to know to master web networking. We’ll use the Fetch API to interact with a live RESTful server in order to connect the different components of a video game.
Code: https://github.com/bootdotdev/fcc-learn-http-assets
Follow this course interactively on Boot.dev: https://boot.dev/learn/learn-http
Lane Wagner created this course.
Boot.dev: https://boot.dev
Lane on Twitter: https://twitter.com/wagslane
Lane’s YouTube: https://www.youtube.com/@bootdotdev
New to JavaScript? Beginner course: https://boot.dev/learn/learn-javascriptContents
- (0:00:00) Introduction
- (0:03:32) Ch 1 – Why HTTP
- (0:27:31) Ch 2 – DNS
- (0:48:11) Ch 3 – URIs and URLs
- (1:16:21) Ch 4 – Async JavaScript
- (1:49:48) Ch 5 – Errors in JS
- (2:04:54) Ch 6 – HTTP Headers
- (2:21:04) Ch 7 – JSON
- (2:41:09) Ch 8 – HTTP Methods
- (3:17:01) Ch 9 – URL Paths
- (3:36:33) Ch 10 – HTTPS security
- (3:48:24) Proj – Setup Dev Environment
- (3:51:28) Proj – Hello World
- (3:56:29) Proj – Normalize URLs
- (4:11:05) Proj – URLs from HTML
- (4:27:49) Proj – The main.js file
- (4:33:10) Proj – Using Fetch
- (4:45:16) Proj – Recursively crawling the web
- (4:55:33) Proj – Print an SEO report
- (5:06:59) Proj – Conclusion
- (5:08:04) Congratulations
Documentation used:
Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
URL constructor: https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
Fetch Response: https://developer.mozilla.org/en-US/docs/Web/API/Response
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Watch the full Python course: https://www.youtube.com/watch?v=eWRfhZUzrAc”
[#Script #Coding] Angular Course for Beginners
Angular Course for Beginners
By freeCodeCamp.org
Published: Sep 07, 2022“
Learn Angular in this complete course for beginners. First, you will learn the basics of Typescript and then you will learn about important Angular concepts such as binding, dependency injection, forms, routing, and more.
Santosh Yadav created this course.
Check out his channel: https://www.youtube.com/c/TechTalksWi…
https://twitter.com/SantoshYadavDev
https://github.com/sponsors/santoshya…Course Contents
Introduction
- (0:00:00) Introduction to Angular
- (0:09:56) Introduction to Typescript
- (0:28:57) SPA and Local Setup
Typescript
- (0:42:09) Typescript Data Types and Functions
- (1:25:56) Classes and Interface
- (2:11:10) Typescript decorators and tsconfig file
Angular Installation and Basics
- (2:20:24) Angular Installation and Binding Syntax
- (3:25:04) Built-in Directives
- (4:07:36) Built-in Pipes
- (4:30:10) Adding Bootstrap CSS to App
Lifecycle Hook and Component Communication
- (4:44:53) ngOnInt and Component Communication using Input and Output
- (5:09:32) Change Detection and ngOnChanges
- (5:36:51) ngDoCheck
- (5:42:01) ViewChild, ViewChildren and AfterViewInit
- (6:22:41) Content Projection, AfterContentInit and OnDestroy
Dependency Injection
- (6:44:55) Introduction
- (7:09:34) Resolution Modifiers
- (7:24:06) Value Providers
HttpClient and RxJs
- (7:41:04) Setting Up HttpClientModule
- (7:44:07) HttpService , RxJs observables and http get
- (8:01:28) RxJs Observable and Observer
- (8:11:59) Http Put and Delete
- (8:27:10) Http Request
- (8:40:55) ShareReplay RxJs Operators
- (8:47:17) Async Pipe
- (8:57:15) catchError operator
- (9:05:29) map operator
- (9:09:06) Http Interceptor
- (9:29:11) APP_INITIALIZER
Routing Basics
- (9:35:06) Angular Router and default Route
- (9:51:01) Adding Angular material and navigation
- (10:00:35) Wild card, dynamic route and ActivatedRoute service
- (10:23:19) ParamMap and Activate Route Service
Template Driven Forms
- (10:25:45) Introduction
- (10:50:20) Validation
- (11:09:26) Pristine, Dirty State and Reset Form
- (11:19:08) Custom Directives and Custom Validation
Advanced Routing
- (11:49:33) Navigation using Router Service
- (11:52:34) Feature and Routing Module
- (12:10:57) Nested and Child Route
- (12:19:41) Lazy Loading
- (12:35:49) Configure Lazy Loading using CLI
- (12:42:46) Using ProvidedIn Any
- (12:59:15) Router Events
- (13:06:00) Listening to Router Events
Route Guards
- (13:08:49) CanActivate
- (13:21:24) CanActivateChild
- (13:26:53) CanLoad
Reactive Forms
- (13:30:44) Introduction
- (13:41:33) Using Material Controls
- (13:59:54) Nested Form Controls
- (14:17:38) Dynamic Forms
- (14:45:09) Built-in Validators
- (14:51:50) Reset Form
- (14:55:15) Control Level Validation
- (15:05:22) SetValue and PatchValue
- (15:09:23) ValueChanges and UpdateOn
- (15:17:40) map operator with Form
- (15:29:55) Custom Validator
CanDeactivate Guard
- (15:57:10) CanDeactivate Guard and Form
Custom Pipe
- (16:15:04) Custom Pipe
Resolve Guard
- (16:25:39) Resolve Guard
Global Error Handling
- (16:45:46) Error Handling
Testing Basics
- (16:50:08) Introduction
- (16:56:59) First test
- (17:01:43) Testing Component and Service
Deployment and CI/CD
- (17:15:44) Using Netlify for Deployment
- (17:28:06) GitHub Actions to Automate Tasks
”
[#Script #Coding] Build a Chrome Extension – Course for Beginners
Build a Chrome Extension – Course for Beginners
By freeCodeCamp.org
Published: May 27, 2022“
Learn how to create a Chrome browser extension using JavaScript and the new iteration of the web extensions platform, called Manifest V3.
Raman Hundal developed this tutorial.
YouTube Bookmarker Starter Code: https://github.com/raman-at-pieces/you…
YouTube Bookmarker Finished Code: https://github.com/raman-at-pieces/yo…
Pieces Code Snippet Assistant download: https://pieces.app/install
Publishing extension on the chrome store docs: https://developer.chrome.com/docs/web…
Course Contents
- (0:00:00) Intro
- (0:02:15) Demo
- (0:05:18) Understanding manifest.json
- (0:08:46) Coding the extention
- (0:31:37) newVideoLoaded function
- (0:31:37) fetchBookmarks
- (0:37:08) addEventListener
- (0:48:03) addNewBookmark function
- (1:00:33) Testing the extension
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_cent…
”
[#Script #Coding] Best CSS Tool for VS Code!! Mirror Editing
Best CSS Tool for VS Code!! Mirror Editing
By codeSTACKr
Published: Feb 08, 2023“
Become A VS Code SuperHero Today: https://vsCodeHero.com
Join my Discord developer community: https://discord.gg/A9CnsVzzkZVS Code Tip of the Day
Here’s one really cool feature of this extension. The feature is called CSS Mirror Editing.
In the dev tools, make any style changes you want. You’ll see them happen in real-time and the updates will be saved automatically to your stylesheet.
This is one of the coolest things I’ve seen in a while!
The Microsoft Edge Tools for Visual Studio Code extension allows you to use the Developers Tools right inside VS Code.”
