DEV Community: The Nerdy Dev

Let's learn Angular

The Nerdy Dev — Mon, 08 Aug 2022 13:13:02 +0000

In this video, we will be covering Angular, a frontend framework that one can use to develop awesome and sleek looking user interfaces. It is an extremely powerful framework that you can use these days to build the frontends of your application. Angular has always been in high demand in the tech industry. So what are you waiting for, go check out the video and learn Angular.

Reference links :

Property Binding in Angular : https://angular.io/guide/property-binding
Promises in JavaScript : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

⏱ Timestamps ⏱

📌 let's start and setup (0:00)
📌 structure of a typical angular application (9:37)
📌 creating our first angular component (11:12)
📌 using the mustache syntax for string interpolation (16:41)
📌 understanding the property binding syntax (17:40)
📌 understanding the class binding (20:14)
📌 understanding the event binding syntax (23:10)
📌 on our way to learn the TWO WAY data binding (27:30)
📌 let's learn about Directives now (32:42)
📌 passing data from child component to parent component using Input and Output decorators (49:09)
📌 understanding Lifecycles in Angular (57:03)
📌 DEPENDENCY INJECTION (1:10:17)
📌 Observables in Angular (1:17:02)
📌 Important differences between a PROMISE and an OBSERVABLE (1:18:09)
📌 Using the HttpClientModule for making HTTP async requests & using RxJS operators (1:21:46)
📌 Performing Error Handling in Angular (1:30:28)
📌 Transforming Data using Pipes (1:35:00)
📌 Exercise : Creating a Custom Pipe for Filtering a list of items based on some search term. (1:38:39)

🐱‍💻 🐱‍💻 Course Links:
Complete Code - https://github.com/The-Nerdy-Dev
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

Build a Word Guessing Game in Python

The Nerdy Dev — Mon, 08 Aug 2022 13:11:11 +0000

In this video, we will build a Word Guessing Game in Python. The code for the video (if any) can be found on GitHub.

🐱‍💻 🐱‍💻 Course Links:
Complete Code - https://github.com/The-Nerdy-Dev/Word-Guessing-Game
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

Let's build this Big React Project !

The Nerdy Dev — Mon, 08 Aug 2022 12:45:39 +0000

Here is a React Project that you should build in the journey of becoming a PRO. This project is an Exercise Planner Application that is built using React.js, React Router and Hooks.

The features of the application that we will be building in this course are:

Fetching the list of exercises from a local JSON Server
Create a New Exercise
Update an already existing exercise
Delete an existing exercise
Toggling the completion status of an exercise and showing it in visually.
Creating a filter component to filter the exercises based on the completion status - pending, all, completed. and more.

⏱ Timestamps ⏱

📌 let's start (0:00)
📌 demo of our exercise tracker project (0:20)
📌 a quick glance over the starter files (1:37)
📌 setting up our starter project and installation (2:00)
📌 whiteboard : deciding about the components for our project (2:15)
📌 starting the project (7:20)
📌 installation of json-server package & running it (7:36)
📌 creating our first page component - homepage (9:05)
📌 bringing our first hook into action - useState (9:23)
📌 fetching data from our data source using another hook - useEffect (10:25)
📌 installation and setting up react-router (13:50)
📌 defining our first route : home page route(14:57)
📌 seeing our fetched exercises in react-dev-tools extension (17:16)
📌 starting with exercise list component (18:00)
📌 passing our fetched exercises to the exercises list component as a prop (21:10)
📌 creating an exercise item component (22:16)
📌 using the exercise item in exercises list and passing exercise as a prop (25:15)
📌 starting with delete exercise functionality (28:28)
📌 whiteboard: understanding the process for deletion of item (29:35)
📌 defining our delete exercise handler in home page component (32:16)
📌 passing a pointer to our delete exercise handler as a prop to exercises list component (33:29)
📌 forwarding the pointer to delete exercise handler as a prop further down to exercise item component (33:29)
📌 ensuring the deletion of item gets reflected in our local JSON store (35:20)
📌 starting with toggling the exercise completion status functionality (37:10)
📌 defining our toggle exercise completion handler in home page component (38:29)
📌 forwarding a pointer to our toggle exercise handler as a prop to exercises list component (41:45)
📌 forwarding the pointer to our toggle exercise handler further down to our exercise item component (42:57)
📌 invoking our toggle exercise completion handler via the on toggle exercise prop (43:08)
📌 ensuring the toggling of the completion status gets reflected in our local JSON store (45:34)
📌 laying out our create exercise form (49:44)
📌 handling form submission for creating a new exercise (58:07)
📌 using the useHistory hook to push the user back to home page on exercise creation (1:02:50)
📌 creating the navbar component (1:04:37)
📌 starting with edit exercise component (1:07:50)
📌 creating a route for the edit exercise component using dynamic segment (1:09:20)
📌 adding a router link for editing an exercise for an exercise item (1:09:53)
📌 extracting the id of an exercise from the router params using the useParams hook (1:11:30)
📌 using the id that we get from router params to load the exercise in our edit exercise component (1:13:19)
📌 handling form submission for updating the populated exercise (1:16:41)
📌 filtering the exercises based on their completion status (1:20:57)
📌 creating our base filter component (1:21:40)
📌 setting up a current filter state in our home page component (1:25:20)
📌 creating an update exercise handler in our home page component (1:25:55)
📌 passing a pointer to our update exercise handler down to base filter (1:26:56)
📌 passing the current filter down to base filter (1:27:42)
📌 using the current filter prop in base filter component to give extra styles to our navlinks (1:28:26)
📌 using the filter to show exercises based on their completion status on home page (1:29:32)
📌 end of the project (1:31:20)

📂📂 Starter Files:
https://github.com/The-Nerdy-Dev/Starter-Files-React-Exercise-Tracker-Project

📂📂 Component Styles:
https://github.com/The-Nerdy-Dev/CSS-Files-For-React-Exercise-Tracker-Project

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

2 Hours 10 JavaScript Projects ! Let's build :)

The Nerdy Dev — Tue, 02 Aug 2022 13:24:26 +0000

Hey guys,
In this video we are going to build 10 JavaScript Projects in 2 Hours.
This video will give you a solid foundation of the JavaScript language. So go check that out now !

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

😲10 JavaScript Concepts Every Developer Should Know

The Nerdy Dev — Fri, 29 Jul 2022 17:21:00 +0000

Hey guys,

In this article, let us see the 10 concepts that you as a developer must know.

Now before starting, if you want to learn JavaScript from the absolute scratch, consider going through my 10 JavaScript Projects for learning JavaScript. In this video, we create 10 small and medium but different projects for learning the language. Here is the link of the video just in case if you want to check that out :

1. Immediately Invoked Function Expressions

2. Constructor Functions and Prototypal Concept

3. The Event Loop, Call Stack and Message Queue

4. Event Capturing, Bubbling and Delegation

5. Understanding Promises and Error Handling

6. Promise.all, Promise.race and Promise.allSettled methods

7. Async Await - Deep Dive

8. Iterators in JavaScript

9. Hoisting in JavaScript

10. Understanding Closures

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

⚡Tidbits of Virtual DOM Explained

The Nerdy Dev — Fri, 29 Jul 2022 17:06:20 +0000

Hi,

I recently wrote an article explaining the Virtual DOM in great detail. Go check that out here :

https://the-nerdy-dev.com/demystifying-virtual-dom-in-react-js/

Also I do have a video explaining the same just in case if you prefer visual content instead of an article.

Also check this article :

⚡10 JavaScript Projects Every Beginner Should Build

The Nerdy Dev ・ Jul 27 ・ 1 min read

#100daysofcode #javascript #programming #webdev

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

⚡10 JavaScript Projects Every Beginner Should Build

The Nerdy Dev — Wed, 27 Jul 2022 12:32:00 +0000

Hi everyone,

Let us check the 10 JavaScript Projects that Every Beginner should build in order to learn the language in a constructive manner.

Introduction

JavaScript is the most popular language that you can learn these days for building a website. It is a dynamic and powerful programming language that powers the web.

Let's have a look at the projects that you can build for learning the language :

Build a Modal using JavaScript

Creating a Tabs System using JavaScript

Changing Background using Range Sliders

Creating a Salary Calculator in JavaScript

Creating a Scroll Indicator using JavaScript

Creating an Infinite Scroll App using Intersection Observer API

Creating a Custom Search Filter

Playing with Text

Creating Sticky Navbar

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

Mempool and its role in Bitcoin Transaction Lifecycle

The Nerdy Dev — Mon, 25 Jul 2022 11:58:39 +0000

In this video, we will learn about the mempool which is a holding area for the unconfirmed transactions and we will also see how transactions are picked up from mempool and the entire process that it goes through before getting an entry in a block of the blockchain.

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

The 10 JS Projects You Need to Build in order to become a PRO !

The Nerdy Dev — Fri, 22 Jul 2022 18:34:14 +0000

In this video, we will be coding 10 JavaScript Projects in 2 Hours.
The code for the video can be found on GitHub along with the link to course files.

⏱ Timestamps ⏱

📌 Let's start (0:00)
📌 Creating a Full Featured Modal using Classes (0:35)
📌 Creating a Tabs System using Classes (10:42)
📌 Changing Background using Range Sliders (24:07)
📌 Creating a Full Featured Slideshow using Classes (30:27)
📌 Creating a Salary Calculator (MVC) (49:44)
📌 Creating a Scroll Indicator using JavaScript (1:06:56)
📌 Creating an Infinite Scroll App using Intersection Observer API(1:12:13)
📌 Playing with Text (1:19:13)
📌 Creating a Custom Search Filter using JavaScript (1:31:32)
📌 Creating a Sticky Navigation Bar(1:44:20)

🐱‍💻 🐱‍💻 Course Links:

Starter Files - https://github.com/The-Nerdy-Dev/Starter-Files-10-Projects-In-2-Hours
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 My Blog: https://www.the-nerdy-dev.com
👉 Twitter: https://twitter.com/thenerdydev
👉 Instagram: https://instagram.com/thenerdydev

Ruby Programming Full Course

The Nerdy Dev — Fri, 22 Jul 2022 18:28:00 +0000

In this video, let us learn about Ruby Programming. This is a 3 hour long video that covers most of the important topics that you need in order to learn Ruby language.

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

Build this React Project to become a PRO

The Nerdy Dev — Fri, 22 Jul 2022 14:07:00 +0000

Here is a React Project that you should build in the journey of becoming a PRO. This project is an Exercise Planner Application that is built using React.js, React Router and Hooks.

The features of the application that we will be building in this course are:

Fetching the list of exercises from a local JSON Server
Create a New Exercise
Update an already existing exercise
Delete an existing exercise
Toggling the completion status of an exercise and showing it in visually.
Creating a filter component to filter the exercises based on the completion status - pending, all, completed. and more.

⏱ Timestamps ⏱

📂📂 Starter Files:
https://github.com/The-Nerdy-Dev/Starter-Files-React-Exercise-Tracker-Project

📂📂 Component Styles:
https://github.com/The-Nerdy-Dev/CSS-Files-For-React-Exercise-Tracker-Project

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev

Web Developer Full Course - Headings, Paragraphs and Other Text Related Tags - #4

The Nerdy Dev — Fri, 22 Jul 2022 13:41:00 +0000

In this video, we will learn about the headings and paragraphs in HTML. We will also learn about the emphasis (em) and the strong elements.

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a
💜 One time donations via PayPal
Thank you! 🙏

Follow me on:
👉 My Blog: https://the-nerdy-dev.com
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev