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
”
Category: Scripting and Coding
Various coding languages are the building blocks of apps, The Internet, and the Metaverse. We explore tutorials of scripting and coding.
[#Script #Coding] Code a Minecraft Clone with JavaScript, React, Three.js – Tutorial
Code a Minecraft Clone with JavaScript, React, Three.js – Tutorial
By freeCodeCamp.org
Published: Sep 20, 2022“
Learn how to code a playable Minecraft clone using React, JavaScript, and Three.js. You will learn about many React concepts such as useState, useEffect, useRef, custom Hooks for State management, and more. And you will be able to apply the principles to create other 3d games in JavaScirpt.
Course created by Daniel Bark. Check out his channel: https://www.youtube.com/c/barelycoding
Finished Code: https://github.com/danba340/minecraft…
Starting Code: https://github.com/danba340/minecraft…
Demo: https://minecraft-freecodecamp.vercel…Contents
- (0:00:00) Boilerplate
- (0:03:56) Sky
- (0:05:46) Textures
- (0:07:48) Ground
- (0:15:11) Player
- (0:25:43) Keyboard input
- (0:32:03) Movement
- (0:41:26) First person camera
- (0:46:25) State management
- (0:49:55) Cube component
- (0:58:02) Add/Remove Cubes
- (1:09:34) Texture Selector
- (1:21:34) Save world
- (1:27:31) Hover cubes
- (1:30:28) Outro
”
[#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] ChatGPT Clone – OpenAI API and React Tutorial
ChatGPT Clone – OpenAI API and React Tutorial
By freeCodeCamp.org
Published: Jan 18, 2023“
Learn how to use React and the OpenAI API to create an application like ChatGPT. The application can answer our questions, convert the text into different languages, or even convert JavaScript code to Python.
OpenAI API: https://beta.openai.com/
Course developed by @CybernaticoByNishant
ChatGPT with React: https://github.com/nishant-666/ChatGPT-React
OpenAI with React: https://github.com/nishant-666/Dall-E-API-with-ReactContents
- (0:00) Introduction
- (4:01) Importing configuration and api keys
- (11:27) Creating the input and button
- (16:09) How to create an image
- (23:32) Getting the api key from the console
- (28:48) Setting up the menu items
- (36:14) Hovering options in the options
- (41:03) Importing the translated component
- (48:47) Setting options in a file
- (53:30) Finishing main function
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
”
[#Script #Coding] Docker Containers and Kubernetes Fundamentals – Full Hands-On Course
Docker Containers and Kubernetes Fundamentals – Full Hands-On Course
By freeCodeCamp.org
Published: Oct 12, 2022“
Learn how to use Docker and Kubernetes in this complete hand-on course for beginners.
Learn how to containerize applications with the Docker CLI and Visual Studio Code. Push and pull container images on Docker Hub, a container registry, and create multi-container applications using Docker Compose.
Learn about the Kubernetes architecture and how it works. Run it locally and use the Kubernetes CLI and Visual Studio Code to run, debug and troubleshoot applications and services. Learn about pods and the different workloads available.
Install Docker Desktop and enable Kubernetes. Download the lab files here: https://github.com/K8sAcademy/Fundamentals-HandsOn
Course from Guy Barrette, from Kubernetes Academy Online
Certified on Kubernetes, Terraform, Azure, AWS, and GCP. Proud to be an Azure MVP and a DigitalOcean Navigator.
Consult his bio: https://guybarrette.comThe course is also available here (with a French version): https://kubernetesacademy.online
If you like the course, You can make a small donation to the creator: https://www.buymeacoffee.com/guybarrette
View other courses from Guy here: https://kubernetesacademy.online
Guy on Twitter: @GuyBarrette and @K8s_OnlineCourse Contents
0:00:00 Introduction
- Course Introduction
- Course Setup
0:05:02 Introduction to MicroServices
- Microservices Concepts
- Microservices Anti Patterns
- Microservices Advantages and Drawbacks
0:13:56 Welcome to Cloud Native!
- What are Cloud Native and the Cloud Native Foundation
- Cloud Native Concepts
- Cloud Native Hands-On
0:23:01 Introduction to Containers
- Container Concepts
- What is Docker?
- Docker Hands-On
- Basic Commands
- Basic Commands Hands-On
- Running Containers
- Running Containers Hands-On
- Building Containers
- Building Containers Hands-On
0:54:41 Visual Studio Code
- The Docker Extension
- The Docker Extension Hands-On
1:07:03 Persisting Data
- Containers are Ephemerous and Stateless
- Docker Volumes Concepts
- Using Docker Volumes Hands-On
1:17:03 Docker Compose
- Understanding the YAML File Structure
- Docker Compose Concepts
- Using Docker Compose
- Using Docker Compose Hands-On
- Docker Compose Sample App Hands-on
- Docker Compose Features
- 1:47:18 Container Registries
- Container Registries Concepts
- Push/Pull Images from Docker Hub
- Push/Pull Images from Docker Hub Hands-On
1:56:58 Kubernetes Concepts
- Kubernetes Concepts
- How to Run Kubernetes Locally
- How to Run Kubernetes Locally Hands-On
- Kubernetes API
- Using Kubectl Hands-On
- The Declarative Way vs the Imperative Way
- The Declarative Way vs the Imperative Way Hands-On
2:20:38 Namespaces
- Namespaces Concepts
- Namespaces Hands-On
2:28:47 Nodes
- Master Node Concepts
- Worker Nodes Concepts
- Nodes Hands-On
2:38:36 Pods
- Pod Concepts
- The Pod Lifecycle
- Defining and Running Pods
- Pod Hands-On
- Init Containers
- Init Containers Hands-On
3:01:00 Selectors
- Selector Concepts
- Selector Hands-On
3:07:51 Multi Container Pods
- Common Patterns for Running More then One Container in a Pod
- Multi Container Pods Networking Concepts
- Multi Containers Pods Hands-On
3:19:45 Workloads
- Introduction to Workloads
- ReplicaSet Concepts
- ReplicaSet Hands-On
- Deployment Concepts
- Deployment Hands-On
- DaemonSet Concepts
- DaemonSet Hands-On
- StatefulSet Concepts
- StatefulSet Hands-On
- Job Concepts
- Job Hands-On
- CronJob Concepts
- CronJob Hands-On
4:05:15 Updates
- Rolling Updates Concepts
- Rolling Updates Hands-On
- Blue-Green Deployments
- Blue-Green Deployments Hands-On
4:21:13 Services
- What are services?
- ClusterIP Concepts
- ClusterIP Hands-On
- NodePort Concepts
- NodePort Hands-On
- Load Balancer Concepts
- Load Balancer on Docker Desktop Hands-On
4:44:03 Storage & Persistence
- Storage & Persistence Concepts
- The Static Way
- The Static Way Hands-On
- The Dynamic Way
5:03:48 Application Settings
- ConfigMaps Concepts
- ConfigMaps Hands-On
- Secrets Concepts
- Secrets Hands-On
5:22:24 Observalibilty
- Startup, Readiness and Liveness Probes Concepts
- Probes Hands-On
5:30:46 Dashboards
- Dashboards Options
- Lens Hands-On
- K9s Hands-On
5:47:36 Scaling
- Auto Scaling Pods using the Horizontal Pod Autoscaler
- Auto Scaling Pods Hands-On
5:55:22 Conclusion
- Course Conclusion
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] 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.”
