teleren/devto huggingface dataset:
DOM guide for beginners #3
Tags: html, javascript
Published: 2022-01-14 07:33:06


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1c5eacxuzebedtbi99zm.png)
## Things you must know
`Parent ->` Parent is the head of family. It simple words its the root of html. Html tag is the parent of html document.

> Although html tag is parent of the html document but body tag is consider to be the parent. Because all the structural information of the website is in the body tag

`Children ->` All the tag and text in the body tags are children.

## Topic to Cover

1. How to select list of children in body tag
2. Create element in html via js and append data into it.
3. How to select child and element child
4. How to select siblings

## How to select list of children in body tag
As I told earlier everything in body tag is children. So first thing we want to know the list of all the children in the DOM.

```
HTML

<body>
    <p id="firstId">firstpera</p>
    <p class="peraclass1">pera 1</p>
    <p class="peraclass2">Pera2</p>
    <p class="peraclass3">Pera 3</p>

    <ul>
        <li class="listclass1">list1</li>
        <li class="listclass2">list2</li>
        <li class="listclass3">list3</li>
    </ul>
</body>

<!------       Script ------------->

<script>
        let child = document.body.children;
        console.log(child);
</script>
```
The above code will give the list of all children in the body.

## Create element in html via js and append data into it

Here we'll see how to create element in html via js and append data into it.

```
 //adding new child using in html from jsg
        let para = document.createElement('p');
        let textNode = document.createTextNode("This is new pera 
        from js --->pera");
        para.appendChild(textNode);
        console.log(para); //can't see the pera in body of html

//to see the eleemnt in body of html we need to append it to  body of document
        document.body.appendChild(para);

```

## How to select child and element child

```
//access first and last child of document
        let getlist = document.querySelector('ul');

        console.log(getlist.firstChild);//this will return #text
        console.log(getlist.lastChild);// this also will  return #text

        console.log(getlist.firstElementChild);//this will return first class child of ul list
        console.log(getlist.lastElementChild);//this will return last class child of ul list

```

## How to select siblings

```
let firstsibling = firstId.nextElementSibling;
        console.log(firstsibling);

```
Simple Authenticator - The Simplest TOTP Application
Tags: atlashackathon, mongodb, flutter, dart
Published: 2022-01-14 07:30:51

---
title: Simple Authenticator - The Simplest TOTP Application
published: true
description: My submission to the MongoDB Atlas Hackathon on DEV!
tags: atlashackathon, mongodb, flutter, dart
---

### Overview of My Submission
Simple Authenticator is an application that generates TOTP codes for two-factor authentication - like Google Authenticator. It can optionally store your configured applications **encrypted** in the cloud with MongoDB Atlas.

Github Repository: https://github.com/arnu515/simple-authenticator

Link to download (Android only): https://github.com/arnu515/simpleauthenticator/releases

### Submission Category: 

[Note]: Choose your own Adventure


### Link to Code

{% github https://github.com/arnu515/simpleauthenticator %}
CHANGE TERMUX WELCOME THEME TO ANONYMOUS.
Published: 2022-01-14 07:21:38

$pkg update && pkg upgrade(enter) n/y=y

$pkg install python2(enter)
n/y=y

$pkg install ruby(enter)
n/y=y

$pkg install git(enter)

$git clone https://github.con/Zidan-ID17/Theme-Me

$Ls

$cd Theme-Me

$Ls

$python2 umbrella.py
 
Wait 10second,out from "Termux"and back!
enter the script key as follows👇
https://www.youtube.com/c/MrZ17 (and enter)!


Done, you just choose a theme from numbers 1 to 8! (And Enter)
New Years Resolution - Dev Log 7
Tags: webdev, beginners, programming, computerscience
Published: 2022-01-14 07:19:49

`const setMood = (moodToBeApplied, me) => {
    me.mood = moodToBeApplied;
}
setMood('excited', me);`
As the Google level code snippet above says, I am excited. The reason I have hyped up is that today not only did I catch up this blog to my current dev log posts on Reddit, but in this blog, I get to show yall the job board I have been working on. Understand that I am not a designer by any means. The simple nature of the web application will demonstrate that itself. That being said, I am proud of the work I have gotten done. I still have to finish up the post a job screen by adding a post preview section. I also have to build out the application form. All in due time. For now, here is what I got!

[Link to Short Vimeo video demoing the job board](https://vimeo.com/665901676)

Hopefully, you like the UI. Personally, I think it is very minimal and suits the web application, which I intend to be minimalistic. I do not want to complicate things too much seeing as I am the only one working on the project. Just recording my screen to make this small video got me pumped to make my first YouTube video demonstrating and talking about the UI. Can't wait to get going on that.

Here is the typical log portion of the dev log:

Idea 1 - Job Board: Yesterday went to add the user application form, and was met with some pretty serious bugs in my rendering logic. The project thus far is a single-page application. I use conditional rendering to render all the dynamic content in the same spot, under the hero. While this is simple to do, it takes managing a lot of state. Passing props between children and parents to the extreme. I regret not implementing a state management system from the beginning, such as redux or context API. I feel that this project walks the line between needing a global state management solution and not needing one. For now, to keep things less boilerplate intensive, I intend to keep working with state using only built in React features.

Idea 2 - Paid Plugins: Scratched

Idea 3 - SaaS: I have a solid idea for a SaaS company I believe, but will not start on this till my job board is out and functional, even though I'm really excited about it.

Idea 4 - Paid API: Just learned about how you can build an API and market it easily through rapid API. I am thinking that this might be something I want to try.
Binary search tree and it types
Published: 2022-01-14 07:14:54

A binary search tree, also called a sorted binary tree or ordered binary tree. In the binary search tree there is a root whose internal nodes have a key greater than all the keys in the node’s left subtree and less than those in its right subtree. To learn about binary search tree and types of binary search tree in detail, visit Help me study bro. 

Visit@ [https://www.helpmestudybro.com/binary-tree/](https://www.helpmestudybro.com/binary-tree/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlxpmyyuilzezeo44vog.jpg)
Introduce Apk.guru - Free Android APK web
Tags: apkguru, apk, gameapk, android
Published: 2022-01-14 06:56:02

[APK.Guru](https://apk.guru/) is one of the reputable websites that provides 10M+ APK files that you can download and install directly to your phone without accessing the Google Play store. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rtxvmeunv305vx38g1v.PNG)

We will help you to easily download region-restricted apps or apps that do not even exist on Google Play store. With apk.guru, you can freely choose any older version you want to install on your Android devices in the form of ZIP files. 

You can go straight to our website and search for the app name, or use Google to search for "your app name + apk.guru". Contact us if you need more support! 
Website: [https://apk.guru/](https://apk.guru/)
Address: 21602 NE Sumner St STE Portland, Oregon, 97229, United State of America 
Email: apkdotguru@gmail.com 
Phone number: +1 818-877-2539 

Social media: 
Twitter: [https://twitter.com/apkdotguru](https://twitter.com/apkdotguru)
Pinterest: [https://www.pinterest.com/apkdotguru](https://www.pinterest.com/apkdotguru) 
Flickr: [https://www.flickr.com/people/190887957@N03/](https://www.flickr.com/people/190887957@N03/) 
Behance: [https://www.behance.net/apkguru2](https://www.behance.net/apkguru2) 
Dribbble: [https://dribbble.com/dotguru/about](https://dribbble.com/dotguru/about) 
Flipboard: [https://flipboard.com/@apkguru](https://flipboard.com/@apkguru) 
Gab: [https://gab.com/apkguru](https://gab.com/apkguru) 
Ello: [https://ello.co/apkdotguru](https://ello.co/apkdotguru) 
Mastodon: [https://mastodon.social/@apkguru](https://mastodon.social/@apkguru) 
Plurk: [https://www.plurk.com/apkdotguru](https://www.plurk.com/apkdotguru)
Curated collection of best tools for Software Testing
Tags: testdev, testing, sideprojects, automation
Published: 2022-01-14 06:53:19

---
title: Curated collection of best tools for Software Testing
published: true
description: Discover best tools and resources for software testing in this carefully curated collection.
tags: testdev, testing, sideprojects, automation
cover_image: https://testdev.tools/images/resources/siteimages/testdevtools.png
---
Soon it will be a year since I started the [Software Testing Notes Newsletter](https://softwaretestingnotes.substack.com) and a supporting [website](https://softwaretestingnotes.com). It started as a way for me to bookmark the important links which I enjoy and share it online hoping someone might also find it useful as well.

Which brings me to the this website [TestDevTools](https://testdev.tools). A place where you will be able to find a variety of tools and resources that I have gathered so far and will continue to do so in the future for the software testing.

## 🛠 collection includes tools for :
* Learning Software Testing
* Exploratory Testing
* API Testing
* Accessibility Testing
* Automated Checking
* Memory
* Performance Testing
* Security Testing
* DevTools
* Email Testing
* Test Case Management
* Audit
* DevOps
* Dummy Data
* Design
* Dummy Emails
* IDE
* Screen Recording
* Task Management
* Traffic Listener
* Visual Modeling
* VPN
* Desktop Automation

And much more.

## Technology used on this site
This site is built with help of [excellent static site generator Gridsome](https://gridsome.org), [Buefy](https://buefy.org) and [Bulma CSS](https://bulma.io) and JSON file as a data source.

I also use the continuous deployment provided by Platform as a Service project [Netlify](https://www.netlify.com).

I hope this project can help other fellow testers and developers who are looking for some resources / tools for testing.

please share this list of resources with anyone that would find it useful ❤️
How to add default active property in the menu.
Tags: typescript, angular
Published: 2022-01-14 06:44:39

```
<ul class="links">
                <li routerLinkActive="active"><i class='bx bx-news'></i><a routerLink="/Dashboard" >Dashboard</a></li>
                <li routerLinkActive="active">
                    <i class='bx bxl-slack'></i>
                    <a routerLink="/dwr">Build</a>                    
                </li>
                <li routerLinkActive="active">
                    <i class='bx bxs-chess'></i>
                    <a href="#">Master</a>
                    <i class='bx bxs-chevron-down js-arrow arrow '></i>
                    <ul class="js-sub-menu sub-menu">
                        <li><a href="#">Create Template Name</a></li>
                        <li><a href="#">Create Template schema</a></li>                        
                    </ul>
                </li>
            </ul>
```
I want to keep dashboard menu item as a default active.
active property is adding up once I click on the menu link, how to set the default active property when user launch the site.
Task Manager
Tags: atlashackathon
Published: 2022-01-14 06:36:25

###Task Manager


### Overview of My Submission
Task manager, is a web app where users can have a list of tasks they need to complete or things that they want to do. 

### Submission Category: 

Productivity


### Link to Code
{% github julekgwa/task-manager %}


### Additional Resources / Info

#### Technologies used

- ReactJS
- MongoDB
- Nodejs
- Restify
- Redux


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



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjqx38qw0lxnhl44w4ta.png)
New Year's Resolution - Dev Log 6
Tags: webdev, beginners, programming, computerscience
Published: 2022-01-14 06:33:55

Of all my quick blog posts that are based on my Reddit dev logs, this log was my favorite. If I could share the whole comment section easily I would. This Reddit post has been my most interacted with so far and was the inspiration behind starting the blog on both HashNode and DevTo. Here is a link to the [post](https://www.reddit.com/r/webdev/comments/s2knle/new_years_resolution_dev_log_6/) if you are interested. Here is the last time I am going to be posting a picture from Reddit in order to catch up, because, after this post both HashNode, DevTo, and Reddit will all be caught up.

![Reddit post this blog post is based on](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyxa2meptusi83jfe1mx.PNG)
As per the norm, for the screen readers:

> Idea 1 - Job Board: Yesterday I added in a filter which I was really surprised I missed, the salary filter. After updating the UI with that I got to work on creating a rich text editor for the project. Shortly after beginning, I found one last pre-made solution (CKEditor 5) which I thought would not hurt to try before spending potentially multiple days building my own. Fortunately, it worked out great and I have exactly what I wanted in terms of a rich text editor. I feel like yesterday was a pretty big win. Today I am working on creating the application form that appears for users when they hit apply. I am thinking of using a modal for the form. If I finish that and still have steam I will move onto what I believe is the final component of the UI, a section where you can see your job post before you actually hit the post.

> Idea 2 - Paid Plugins: Scratched

> Idea 3 - SaaS: I have a solid idea for a SaaS company I believe, but will not start on this till my job board is out and functional, even though I'm really excited about it.

> Idea 4 - Paid API: Just learned about how you can build an API and market it easily through rapid API. I am thinking that this might be something I want to try.

> Personal notes: Made a lot of progress yesterday and really like keeping a log on Reddit. I know that these posts do not garnish that much attention but the main point is to keep me accountable. Still excited about the project in general and happy to add another idea to the list. Making and selling an API seems like something I can do, but I need to research and think on the topic more.

If you have been following along with the dev log so far then you know that I was having a hard time finding a good rich text editor. Luckily I found CKEditor at the last minute. That editor turned out to be perfect for my use case and easy to implement. The next dev log is the big one, you will finally get to see what I have been working on. Get excited!
Jaeger Tracing
Tags: tracing, jaeger, distributedsystems
Published: 2022-01-14 06:25:41

This is my self documentation from original docs [here](https://www.jaegertracing.io/).

What is Jaeger?

`Jaeger, inspired by Dapper and OpenZipkin, is a distributed tracing system released as open source by Uber Technologies.`

State themselves as:
```
Monitor and troubleshoot transactions in complex distributed systems
```
The things that they address for the usages:
- distributed transaction monitoring
- performance and latency optimization
- root cause analysis
- service dependency analysis
- distributed context propagation

And also here is the features:
- OpenTracing with compatibility to Go, Java, Node, Python, C++ and C#.
- Uses data with individual per service/endpoint probabilities
- Multiple storage backends: Cassandra, Elasticsearch, memory.
- System topology graphs

Jaeger helps me with performance monitoring like:
- Response time for each endpoint

![Response Time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzj5sche76lnn8kqz6kh.png)
- Tracing error to which code break

![Tracing Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os2m7eu1yc8wzm54jf0c.png)
- Find specific tag on each operation

![Tag Finder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfwigk8f37b145xr4vy7.png)

Jaeger helps me to monitoring error, tracing error and monitoring performance.
ToDo List Using MongoDB Atlas
Tags: atlashackathon
Published: 2022-01-14 06:25:13

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
https://github.com/prajalsharma/todolist-mongodb


### Submission Category: 

Choose Your Own Adventure


### Link to Code

https://github.com/prajalsharma/todolist-mongodb


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

### Output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxbkqaq36hjuoghor9rw.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzgwmvawf52vudk28x3o.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewqpa0ngiif4ogayqyo7.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/595muvixflefxxaukm1c.png)
New Year's Resolution - Dev Log 5
Tags: webdev, beginners, programming, computerscience
Published: 2022-01-14 06:05:13

`const disclaimer = () => {
console.log("This is a quick dev log to get this blog caught up to my Reddit Posts")
}`

We know the drill by this point, here is the Reddit post:

![Reddit post this blog post is based on](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l55lziyxmigtpyy8rna1.PNG)
For screen readers:

> Idea 1 - Job Board: Yesterday was my first good coding session since Thursday. My parents visited Friday through Sunday, which killed my productivity but I did not mind since I do not get to see them often. I completely changed the additional filters section. The old UI was basically radio buttons. Not only was the code written poorly, but the responsiveness was meh at best and the design looked prehistoric. I switched them over to dropdowns because I did that on the post a job screen, which looked a lot better. I can not believe how much code I was able to get rid of when I went with a better design. I had a CSS file that was over 200 lines of code, now less than 130 if you add the CSS from a section that I refactored into its own component. Besides that, I refactored basically the entire search section. The next thing I have to do is create my own rich text editor since I did not like the open-source solutions in that space. Then my UI should basically be done.

> Idea 2 - Paid Plugins: Scratched

> Idea 3 - SaaS: I have a solid idea for a SaaS company I believe, but will not start on this till my job board is out and functional, even though I'm really excited about it.

> Personal notes: It was really nice to get coding again. I am super siked about making a YouTube video to show off the UI when I complete it. I really want to get that done before Friday, but I am making a hard deadline for myself today, I will have the YouTube video up by the end of next Tuesday. I also think that if my rich editor comes out the way I want it, I can make it an NPM package to save some other people the same trouble I had. I have to do to a dentist appointment right now, afterwards, I am gonna grab some food than straight back to the code!
TwitBlog: Twitter Thread Aggregator and Discovery Engine
Tags: atlashackathon
Published: 2022-01-14 05:42:01

### Overview of My Submission

Twitter has so much information hidden in it's threads, but navigating them by topic is somewhat hard.

To solve this disconnect between value and accessibility, I created TwitBlog, an easily naviagable UI to explore the informative content generated by users.

As a brief overview of the tech, Twitblog uses the Twitter API and Python to collect and process tweet data, the MERN stack to store, query, and display the data, and Docker to rapidly deploy the program

This project uses the MERN stack (MongoDB, Express, React, Node) with Python data processing to make finding and consuming Twitter threads easier. Specifically, the frontend is built with React and styled with Tailwind, with inspiration from the Twitter UI for each view (displaying all of an author's threads, reading threads, etc.). The frontend is compiled and served during production, with Nginx acting as a reverse proxy and eventually a load balancer. The frontend communicates with a node backend running Express, which requests MongoDB for data. The app is fully Dockerized, with a container for the Nginx frontend and the Express backend. The project is rapidly iterated with an entire CI/CD pipeline to manage the images (on Github Images) and launch containers on the server (hosted by DigitalOcean). 

Finally, the data consists of a user's tweet history—collected through Twitter's API—and is cleaned/processed with Python. I built an algorithm to construct "trees" of tweets where a user replies to themselves, and the most extended branch of this would be a thread. These threads are treated as a complete document and fed into a Spacy Pipeline to pick out essential keywords like nouns and phrases (and other meaningful information) and create summaries. This data is finally cleaned (to get rid of URLs and thread markers) and uploaded to MongoDB. Mongodb was the the best and easiest choice for a DB, since it is very easy to modify and upload the json data from the TwitterAPI, and has easy/fast text search capabilities.


### Submission Category: 

Choose your own Adventure

### Link to Code

{% github https://github.com/harshasomisetty/TwitBlog %}

### Additional Resources / Info

[Demo Video](https://youtu.be/jrBStgziAyA)
[Website](http://twitblog.xyz)
Quotes Adding App
Tags: atlashackathon
Published: 2022-01-14 05:36:46

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
Here is a simple app to add quotes. You can add your names and your quotes. For this simple application MERN stack has been used.

[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)


### Submission Category: 
Choose Your Own Adventure
[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)


### Link to Code


[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info
https://github.com/oshadiranathunge/add_quotes.git

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03kohmqu7hcgffrx3egd.png)
 
[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly.)
I published My new Chapter
Tags: beginners, html, css, javascript
Published: 2022-01-14 05:33:20

I created a new chapter.
Here is the link...

[Subhransu Patra](https://inform-our-world.github.io/Saqha/CH%202.6)

Previous Chapter [Chapter 2.5](https://inform-our-world.github.io/Saqha/CH%202.5)