🔥 Best VS Code Extension for Writers & Speakers

By codeSTACKr
Published: Apr 03, 2023

“
🦸 Become A VS Code SuperHero Today: https://vsCodeHero.com
🧑🏾‍🤝‍🧑🏽 Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

If you do a lot of writing like me in markdown files, you often need to count how many words you’ve written and estimate how long it will take to read or speak the words written.
This extension takes care of all of that.
WordCounter
It counts word, characters, lines, paragraphs, and estimates the reading or speaking time. You can customize this in the settings and set the average words per minute calculation.
It’s a must have for writers, speakers, and general content creators.
_____________________________________

🛠️ Tools I use:
🟠 codeSTACKr Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

👀 Watch Next:
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

🌐 Connect With Me:
Website: https://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #vscode #learntocode

[READ MORE]

”

10 EASY Music Video Effects in Premiere Pro | Flicker Transitions

By Olufemii
Published: Sep 29, 2022

“
Josh is going to teach you Music Video Effects in the form of flicker transitions in premiere pro! Consider this a masterclass on how to create premiere pro transitions that you will love to use in your music videos. This tutorial is part of our transitions series which is full of practical music video tips you can use today.

This is is the second of 3 tutorials we have coming your way.

Timestamps
• 00:00:00 Intro
• 00:01:10 What is a flicker transition?
• 00:02:09 Flickering On Speed ramps
• 00:02:27 Basic Speed Ramp Flicker
• 00:02:41 Overexposed Speed Ramp Flicker
• 00:04:30 Inverted Speed Ramp Chroma Flicker
• 00:04:46 Blurred Speed Ramp Flicker
• 00:05:13 Flickering On Camera Movements
• 00:05:37 Flickering On Secondary Footage
• 00:05:45 Flickering On A Offset Overlay
• 00:06:22 Holeless Flickering
• 00:06:37 Flip Flicker
• 00:06:55 Changing Your Field Of View

Reach out to Josh Olufemii on Instagram: https://www.instagram.com/madebyolufemii
Subscribe Here: https://www.youtube.com/c/OlufemiiTut…

”

Clean Up File Tree in VS Code

By codeSTACKr
Published: Mar 31, 2023

“
🦸 Become A VS Code SuperHero Today: https://vsCodeHero.com
🧑🏾‍🤝‍🧑🏽 Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

Clean up your VS Code file explorer by nesting files that aren’t used or edited frequently. You can nest test files, config files, compiled files, and any other things you don’t want to always see in the file tree. Go to settings and enable File Nesting. Now my test files are nested under the main file. This declutters the file tree and groups dependent files. You can customize what gets nested right here in the settings too. I have it nesting the project-lock.json file and even the _app and _document files in this next.js app.
_____________________________________

🛠️ Tools I use:
🟠 codeSTACKr Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

👀 Watch Next:
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

🌐 Connect With Me:
Website: https://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #vscode #learntocode

[READ MORE]

”

Frontend Web Development: In-Depth Project Tutorial (HTML, CSS, JavaScript, TypeScript, React)

By freeCodeCamp.org
Published: Apr 04, 2023

“
In this frontend web development project tutorial, you will improve your skills with HTML, CSS, JavaScript, TypeScript, & React. This video is a “sequel” to the Frontend Developer Bootcamp video we posted by the same creator. However, as long as you have a basic understanding of HTML, CSS, and JavaScript, you can start with this tutorial.

🎥 Web Development Bootcamp: https://www.youtube.com/watch?v=zJSY8tbf_ys

✏️ Created by @zachgoll

Section 1: Build a Tic Tac Toe game with Vanilla HTML/CSS/JS
Section 2: Refactor that game to use an MVC pattern and explore why this pattern is helpful
Section 3: Refactor the game to TypeScript, learning how to setup TypeScript from scratch and why it is useful
Section 4: Refactor the game to React + TypeScript, explaining how to setup React from scratch and exploring why React is useful and what problems it solves over a Vanilla approach

💻 Code: https://github.com/zachgoll/tic-tac-toe-subscriber-refactor

🔗 Post referenced in the course: https://www.zachgollwitzer.com/posts/scripts-commonjs-umd-amd-es6-modules
🔗 Another post referenced: https://www.zachgollwitzer.com/posts/imperative-programming

⭐️ Chapters⭐️
⌨️ (0:00:00) Introduction, resources, and prerequisites
⌨️ (0:07:50) Project setup and VSCode extensions
⌨️ (0:19:29) Build the UI with HTML and CSS
⌨️ (1:14:20) Add JavaScript interactivity to the project
⌨️ (3:01:19) Introduction to the MVC pattern
⌨️ (5:51:56) Refactoring app with TypeScript
⌨️ (5:54:46) Setting up TypeScript from scratch, what are benefits?
⌨️ (6:35:56) Start of refactor from Vanilla JavaScript to TypeScript
⌨️ (7:52:25) Why should you refactor your app to React?
⌨️ (8:01:37) The many ways to set up a React app
⌨️ (8:06:52) Setting up React from scratch
⌨️ (8:51:45) Initializing TypeScript in a React app from scratch
⌨️ (9:00:56) Refactoring vanilla app to React app

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

—

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

[READ MORE]

”

Code a Reddit Clone with React, Next.js, Firebase v9, Chakra UI – Full Course

By freeCodeCamp.org
Published: Jan 25, 2023

“
Learn to build a Reddit clone from scratch using React, Firebase, Next.js, Chakra UI, and TypeScript. The application features authentication, Firestore database, cloud functions, security rules, Transactions, deployment, and more.

This course was created by @shadmerhi.

Code: https://github.com/shadeemerhi/reddit-clone-yt

Contents
• (0:00:00) Intro & Project Demo
• (0:08:25) Begin Project (Preface, Create Next App, Next.js fundamental concepts: pages and client-side routing)
• (0:11:26) Core package installations (Chakra-React, Firebase, Recoil) and & ChakraProvider setup & Quick Note on React 18 (w/ Chakra)
• (0:14:12) Create Chakra Theme (theme setup & explanation and global styling)
• (0:19:28) React TypeScript Intro & Next.js Layout Component
• (0:22:40) Begin Navbar (Navbar in Layout Component, component folder structure debrief)
• (0:24:30) Navbar Logos & Chakra UI Styling Fundamentals (flexbox, component styling, responsive design w/ media queries)
• (0:29:56) SearchInput Component
• (0:36:37) Authentication buttons & Chakra UI global component styling explanation
• (0:44:59) Authentication Modal Intro (Chakra UI modal skeleton)
• (0:47:23) Recoil Setup & Intro, Recoil Atoms with TypeScript, Auth Modal w/ global Recoil State
• (0:57:44) Authentication Modal Content (Login & Sign Up forms, React form state, React events w/ TypeScript)
• (1:18:57) OAuth Buttons (Sign In w/ Google, Facebook, Github, etc.)
• (1:23:49) Firebase Setup (Create new Firebase Project, Client SDK’s)
• (1:30:31) User Creation (react-firebase-hooks, useCreateUser firebase hook)
• (1:40:22) Firebase Error Handling (TypeScript indexing, custom error messages)
• (1:46:13) Google Authentication (useSignInWithGoogle hook)
• (1:51:28) Sign in Existing users (useSignInWithEmailAnPassword firebase hook)
• (1:56:45) useAuthState firebase hook (currently signed-in user, modify navbar UI for authenticated user)
• (2:03:54) Reset Passwords (useSendPasswordResetEmail firebase hook)
• (2:09:04) Navbar Icons (react-icons)
• (2:16:47) User Dropdown Menu (Chakra Menu component)
• (2:26:54) User Karma (custom user properties)
• (2:28:55) Community Directory in Navbar (create community intro)
• (2:38:09) Create Community Modal 1: Skeleton
• (2:44:34) Create Community Modal 2: Body (input, character count, community type list)
• (3:01:20) Create Communities & Cloud Firestore Database
• (3:17:37) Joining Communities 1 (User communities, SQL vs. NoSQL Data Modelling)
• (3:27:31) Cloud Functions (firebase-admin, Authentication, Adding Custom User Properties)
• (3:38:43) Cloud Functions Alternative for Custom User Properties, optional
• (3:43:46) Joining Communities 2 (Firestore Transactions and Sub-Collections)
• (3:50:12) Community Page (Server-side Rendering w/ NextJS, data fetching w/ getServerSideProps)
• (4:01:44) Community Not Found component
• (4:04:36) Community Page Header component
• (4:14:30) Custom PageContent Layout component (React children)
• (4:25:20) Community Data Recoil Atom (global communities state)
• (4:30:29) useCommunityData Custom Hook (Creating Custom Hooks in React)
• (4:39:35) Fetch User Community Snippets (getMyCommunities function)
• (4:50:59) Join & Leave Communities (Firestore Database Batched Writes)
• (5:04:26) Create Post Page & CreatePostLink Component
• (5:08:17) NewPostForm 1: FormTabsComponent (Multi-step React forms)
• (5:20:36) NewPostForm 2: PostTextInputs (Post Title & Body)
• (5:31:50) NewPostForm 3: ImageUpload Component
• (5:49:13) handleCreatePost Function (Save Posts to Firestore, Upload Image to Firebase Storage)
• (6:07:45) Fetch All Posts in Community (usePosts custom hook, Firestore queries)
• (6:17:56) PostItem Component
• (6:38:07) PostLoader Component (Chakra UI Skeletons)
• (6:43:17) Deleting Posts (handleDelete function, TypeScript promises)
• (6:54:23) About Community Component (currentCommunity recoil state)
• (7:10:19) Customize Community Image (useSelectFile custom react hook, Admin/Moderator permissions)
• (7:30:24) Voting on Posts (user postVotes collection batched writes)
• (8:11:30) Single Post Page (Next.js Dynamic [pid] route, event propagation)
• (8:29:25) Single Post Link Sharing (refresh dilemma, fetchPost fallback function)
• (8:35:09) Community Data Refresh Dilemma (getCommunityData fallback function)
• (8:43:49) Commenting on Posts (comment collection data modelling)
• (9:08:46) CommentItem Component
• (9:29:41) Deleting Comments
• (9:37:25) Community Navigation Dropdown (communityDirectory recoil atom)
• (9:55:31) useDirectory custom react hook
• (10:14:15) Home Page (Governing logic)
• (10:21:48) Home Feed for Logged-Out Users
• (10:38:11) Home Feed for Logged-In Users
• (10:54:20) Post Votes for Feed Posts
• (11:00:01) Top Communities Component (and supporting components)
• (11:20:34) Deployment with Vercel
• (11:32:06) Firebase Security Rules
• (11:41:48) Project Completion & Outro

[READ MORE]

”

Python Platformer Game Tutorial for Beginners

By freeCodeCamp.org
Published: Mar 20, 2023

“
Learn how to build a platformer game in Python. This game will have pixel-perfect collision, animated characters, and much much more!

✏️ Course created by @TechWithTim

💻 Assets and Completed Code: https://github.com/techwithtim/Python-Platformer/tree/main/assets

⭐️ Timestamps ⭐️
⌨️ (0:00:00) Project Demo
⌨️ (0:01:32) Project Brief/Getting Started
⌨️ (0:03:07) Project Setup
⌨️ (0:04:18) Asset Walkthrough
⌨️ (0:05:38) Game Setup
⌨️ (0:10:57) Generating The Background
⌨️ (0:18:15) Creating The Player
⌨️ (0:27:39) Moving The Player
⌨️ (0:31:20) Adding Gravity
⌨️ (0:35:19) Loading/Splitting Sprite Sheets
⌨️ (0:48:50) Animating The Player
⌨️ (0:56:14) Adding Terrain/Blocks
⌨️ (1:08:51) Pixel Perfect Collision (Vertical)
⌨️ (1:14:48) Jumping & Double Jumping
⌨️ (1:22:28) Scrolling Background
⌨️ (1:27:53) Pixel Perfect Collision (Horizontal)
⌨️ (1:36:16) Adding Traps (Fire)
⌨️ (1:45:09) Player Collision With Traps
⌨️ (1:50:51) Conclusion

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

—

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

[READ MORE]

”