teleren/devto huggingface dataset:
Demystifying JavaScript - Exercise: DOM Traversal along Levels
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:54:42

In this video, we will learn how we can perform DOM Traversal along levels to access the parent of the current element, siblings and children of the current element using the properties that we had learned in the previous video. As a pre-requisite to this video, definitely check out the Video 21 for understanding how we are using these methods. We will see multiple ways of doing the same thing. 


{% youtube lUbd57_zSwQ %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Purity UI Dashboard - Free React Dashboard
Tags: react, opensource, webdev
Published: 2022-07-12 12:54:00

Hello! This article presents [Purity UI Dashboard](https://www.creative-tim.com/product/purity-ui-dashboard?AFFILIATE=128200), an open-source **React Dashboard** template crafted and released for free by [Creative-Tim](https://www.creative-tim.com/?AFFILIATE=128200). The product comes with an elegant UI, 6 sample pages, 50+ UI components, and a permissive license that allows usage in commercial projects. For newcomers, React is a leading JS library used to code interactive User Interfaces quickly. `Thanks for reading!`

- 👉 [Purity UI Dashboard](https://www.creative-tim.com/product/purity-ui-dashboard?AFFILIATE=128200) - product page
- 👉 [Purity UI Dashboard](https://demos.creative-tim.com/purity-ui-dashboard/#/admin/dashboard?AFFILIATE=128200) - LIVE demo
- 🚀 [Purity Dashboard PRO](https://www.creative-tim.com/product/purity-ui-dashboard-pro?AFFILIATE=128200) - premium version

> `Disclosure` - This post contains affiliate links.

![Purity UI Dashboard - Dark Mode (open-source React Template)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yv1vdhqex8n5rzjqzaf.png)

---

## ✨ Product Highlights

Designed for those who like modern UI elements and beautiful websites. Made of hundred of elements, designed blocks, and fully coded pages, Purity UI Dashboard is ready to help you create stunning websites and web apps.

- ✅ Modern stack: React and Chakra UI
- ✅ 6 Sample Pages, 50+ UI Components
- ✅ Dark-Mode, RTL Support
- ✅ Active versioning and Support
- ✅ Permissive License

This Free Chakra UI Dashboard is coming with prebuilt design blocks, so the development process is seamless, and switching from our pages to the real website is very easy to be done.

All components can take variations in color, that you can easily modify using Chakra's style props.

**Example Pages** - If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages.

![Purity UI Dashboard - Profile Page (open-source React Template)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy0la8wd6ppyxzcuyqsc.png)

---

![Purity UI Dashboard - Billing Page (open-source React Template)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5x95ae2o8ylh0rf9znj.png)

---

> **Thanks for reading!** For more resources and support, please access:

- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and [React](https://appseed.us/apps/react)
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products
The Future of UI Testing? - AI automated testing with AskUI
Tags: tutorial, testing, automation, webdev
Published: 2022-07-12 12:53:18

UI testing can be an incredibly difficult task. Your tests need to be able to adapt to slight changes in sizes and devices in a way that usually requires an incredibly in depth integration with your web app.

Ideally, you could have the cognitive flexibility of a human to test your interfaces, but that kind of manual solution is simply not feasible at scale.

So how can you conduct UI testing with the intelligence of a human but without the massive investment of automated testing? That’s where AskUI comes in

---

###What is Ask UI

[AskUI](https://www.askui.com/) is an automated UI testing tool that doesn’t go under the hood of your web app. Instead it sits in the same position as a user and uses artificial intelligence to identify and test out different UI elements.

Tests for AskUI can be written with an incredibly readable, but also highly-customizable, API.

AskUI is currently in early access, but you can get setup with their demo in just a couple minutes.

---

###Setting up the Demo

If you want to get a sense of how AskUI works, we can set up an empty project with:

`npm init -y`

Install AskUI:

`npm i -D askui`

While AskUI provides the API for controlling your operating system to interact and scan the UI, it doesn’t provide a way to organize, write, and execute tests. However, it integrates well with libraries like Jest:

`npm i -D jest`

And then let’s use Typescript in this example:

`npm i -D @types/jest ts-jest ts-node typescript`

We can then setup the demo AskUI test suite with:

`npx askui init`

The default test in this demo will find some text and move the cursor to the text to click on it:

{% gist https://gist.github.com/LiorB-D/d56ba600a399298ea278ce1c95267e52 %}

Of course, you can customize this to target specific text, buttons, forms, as well as interact with the page in all kinds of ways.

Before we can run this, make sure you give your IDE permission to control your cursor and record your screen.

To run this test:

`npx jest test/my-first-askui-test-suite.test.ts --config ./test/jest.config.ts`

If everything is setup correctly, you should see your mouse move over to a piece of text and click on it:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwc51mtz9311l2fu10pk.gif)

---

###Stay Tuned

Again, AskUI is in early access so this is only the start of what AI powered front-end testing is capable of.

Nevertheless, the ease at which you can set up UI tests with AskUI is incredibly exciting! Tools like this allow robust testing to be a feasible process for startups who don’t have the resources for full on QA teams.

If you are looking to further streamline your startup’s development, check out [Codesphere](https://link.codesphere.com/OZ). We’re building an all-in-one Web IDE, DevOps tool, and Cloud platform that removes all the bottlenecks from software development.

Happy Coding!
Demystifying JavaScript - DOM Traversal
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:53:16

In this video, we will cover a [T] Theory video where you will completely understand the DOM Traversal methods like parentElement, parentNode, children, childNodes, nextSibling, nextElementSibling, previousSibling, previousElementSibling to understand the terms - children, parent, ancestor, and descendants. We will see how using these terms and methods we can traverse up the DOM tree, traverse along within the same level, dig deeper to explore nodes. There is no code for this video. 

{% youtube DHA-3By98CA %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript -Accessing and Manipulating DOM Elements
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:51:26

In this video, we will learn how we can access and manipulate the DOM elements on the fly using the certain properties that JavaScript exposes on the DOM objects that we get when we select the elements from the DOM. 

{% youtube kDj8XMpnmnE %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript Exercise: DOM Query Methods Cardio 🚴🏻‍♀️
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:50:20

In this video,  let us play with the query methods to understand how they work in JavaScript, this will be an exercise where we will work only with query methods and see how they work. 

{% youtube e4oUmDMgLTE %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript -Querying Elements in DOM
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:48:34

In this video, we will learn about the methods using which we can query elements in the DOM like querySelector, querySelectorAll, getElementById, getElementsByTagName and what they actually return us. For single elements, we get the direct references to the elements in the DOM. For multiple elements, we get something called as HTMLCollections and NodeLists. 


{% youtube FgX3ASnRHFQ %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript -Understanding The DOM
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:46:14

In this video, we will learn what the document object looks like in the console and we will go over the properties in the structure of the document object, then we will understand DOM relative to a basic HTML that we will write.

{% youtube 5gMa5vDg-6s %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript -Introduction to Document Object Model
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:45:09

In this video, we will start with the MAGICAL document object model Web API of JavaScript and understand what it is, how it is created, then we will understand about two objects in the browser, which is the window object and the document object for DOM to end the video. 

{% youtube F5dKqWyoitc %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Top 5 JavaScript Console Methods Every Developer Should Know
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:43:00

In this video, we will discuss about the console methods that every JS developer should know and how the developer can debug their code using these console methods, represent the data that you get back from the server using elegant tables, create groups using console, mock requests and measure the time that a request takes to get resolved. See you in the video. 

{% youtube RgOK-6CbQkg %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript -Different Ways Of Declaring Functions
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:40:56

In this video, we will learn about different ways of declaring functions in JavaScript such as function declarations, function expressions using anonymous functions, arrow functions. We will also discuss hoisting and what it does to function declarations and how the function declarations are always hoisted at the top and not the function expressions and how this impacts our code. 


{% youtube DrBLsMdf8q4 %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript -Functions
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:39:41

In this video, we will start learning about Functions in JavaScript and then we will move forward with different ways of declaring Functions in JavaScript. The code for the video can be found in the description below.  

{% youtube Cl4xC8iAep0 %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript -booleans
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:38:10

In this video, we will learn about the last data types that I wanted to cover and that is the Booleans in JavaScript and we will also discuss about =,==, === operators and how they are used to check for truthy and falsy things, and what are the differences between them, and what should be preferred.

{% youtube -w0hZG_CBJw %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript - null & undefined
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:37:12

In this video, we will learn about null and undefined in JavaScript.  

{% youtube vocPu-8kz_A %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript - Objects
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:35:31

In this video, let us understand about Objects in JavaScript. 

{% youtube 3Ocyyv6uzF8 %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript - Numbers
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:34:05

In this video, let me introduce we will cover about the data type used for numbers it is known as the number data type and it is used to handle non-decimal numbers (integers, whole numbers) and also floats. We will cover the mathematical operators as well on numbers like addition, subtraction, division, multiplication and exponentiation. 

{% youtube qjF00d2i9t0 %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
I’m speaking at That Conference Wisconsin, the week after next.
Published: 2022-07-12 12:33:36

**Update:** **_Well, heck.  I just heard this morning that they are moving my talk to September 15's [THAT Online - September](https://that.us/events/thatus/2022-9/).  The problem is that I land in Delhi, India at 1pm (local time) on Sept 15th._**

So, I am speaking at [That Conference](https://that.us/events/wi/2022/), later this month.  I will be giving the talk “[Locating your user in meatspace](https://that.us/activities/4CYljqsNWFJrs70dvEp6)” on Tuesday, July 26, 2022 at 1:00 PM CDT.  Swing by and I’ll show you what I have learned about geolocation and how to add it to your web application. You can pick up a $99 “ON THAT Camper” ticket at:  [https://that.us/events/wi/2022/tickets/](https://that.us/events/wi/2022/tickets/).

What am I going to cover?

- How to [find your user’s location](https://jws.news/tag/geolocation/) using [what their device returns](https://jws.news/2020/how-to-get-the-users-street-address-using-navigator-geolocation-and-mapquest/) and using [their IP Address](https://codepen.io/steinbring/pen/MWvwMgb) (and [how to make IP-based geolocation suck less](https://jws.news/2021/state-parks-app-i-made-some-new-apis-for-the-app/))
- How to use the [United States census bureau](https://www.census.gov/)‘s [U.S. Gazetteer Files](https://www.census.gov/geographies/reference-files/time-series/geo/gazetteer-files.html) to build a web service to convert from a zip code to latitude/longitude coordinates and from a city and state to latitude/longitude coordinates.
- Finally, I intend to show how to [use the haversine formula to determine the distance between where the user is and possible points of interest](https://jws.news/2021/how-to-sort-a-list-of-locations-by-how-close-they-are-to-you/).

In the process, I am also going to show how to [use Cloudflare workers to minimize the amount of this logic that you have on the client side](https://dev.to/steinbring/i-built-my-first-cloudflare-worker-1aa4).  Hopefully you find this mildly interesting.

I’ll see you there!
Demystifying JavaScript - Strings
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:33:12

In this video, let us learn about the Strings in JavaScript.   

{% youtube tpWejTUdlpA %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript -Introduction To Data Types
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:31:56

In this video, let me introduce you to data types in JavaScript and we will have individual videos on each data type in the coming videos. So do check them out as well.

{% youtube _Ael665JwD4 %}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com
Demystifying JavaScript - JavaScript Language and How Web Works
Tags: javascript, webdev, programming, 100daysofcode
Published: 2022-07-12 12:02:05

In this video, we will start with a new complete JavaScript Series For Beginners 2022 and we will cover everything pertaining to JavaScript in this power packed tutorial series. In this video, we will introduce you to the programming language JavaScript and How the Web Works.

{% youtube qubTwfgGUzU%}

🐱‍💻 🐱‍💻 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
👉 My Blog: https://the-nerdy-dev.com