teleren/devto huggingface dataset:
DOM Explained
Tags: beginners, javascript
Published: 2021-08-27 17:44:34

###What is DOM?
DOM stands for Document Object Model. It is an programming interface for web documents. It shows how document content is accessed and modified. It defines the logical structure of documents. It represents the document as nodes and objects, such that any programming language can interact with the page.

#####DOM Structure
It can be depicted as a tree-like structure. The objects are organized in a hierarchical manner. It follows as :
* Window object 
* Document object 
* Form object 
* Form control elements
![DOM structure](https://th.bing.com/th/id/R.e5ec90a049ac4d89cfe6f473f5e90a62?rik=2vAe4wP0zSwDrw&riu=http%3a%2f%2fwww.tutorialspoint.com%2fimages%2fhtml-dom.jpg&ehk=ro8ZmiKVyvunucBegQ%2fCWt%2bbTEBzRMdYdCz28fipr5s%3d&risl=&pid=ImgRaw&r=0)

***
###HTML DOM
Whenever a web document is loaded, the browser creates **D**ocument **O**bject **M**odel of the page. It can be modified with a scripting language such as javascript.
HTML DOM is standard object model and programming interface for HTML. It helps to define:
* HTML elements as **objects** 
* **Properties** of those elements 
* **Methods** to access html elements 
* **Events** for those elements



####How HTML DOM is constructed?

It is characterized as a hierarchical tree, where each element in the document tree is called Node.

![HTML DOM](https://visionofgeek.com/wp-content/uploads/HTML-DOMDocument-Object-Model-1080x805.png)

DOM nodes represents all the elements of the document. The document node is called the root node and it contains other nodes. The head and body elements are called parent nodes. The parent nodes also contain other elements inside them , which are considered child nodes.
The elements having same hierarchical level are considered to be sibling nodes, here the head and body can be said to be sibling nodes.
Some nodes are self closing like img tag. These are called void nodes and they cannot be a parent node.

***
####DOM Methods
The document object represents our web page and to access any element of our HTML page, we need to access the document object.
DOM Methods are used to access and manipulate HTML elements.

Few of them are :

#####Finding HTML Elements 
| METHOD | Description |
| -------|-------------|
| document.getElementById(id) | Find elements by id |
| document.getElementByTagName(name) |  Find elements by tag name |
| document.getElementByClassName(name) |  Find elements by class name |
| document.querySelector() |  Find elements by css selector and returns first element that matches the selector |
| document.querySelectorAll() | Find elements by css selector and returns a node list collection of all matching elements. |

![method example](https://i.postimg.cc/VvYp5XsB/image5.png)
***
####DOM Properties

#####Changing HTML Elements
| PROPERTY | Description |
|--------|-------------|
| element.innerText = new text | Change inner text of an HTML element |
| element.innerHTML = new HTML content | Change inner HTML of an element |
| element.style.property = new style | Change style of an HTML element |

![property example](https://i.postimg.cc/sXYqYnbF/image6.png)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-08-27 17:41:08

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hi everyone! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Staying hydrated... or whatever else might spark joy ❤️ 

---

Happy Friday! Take a victory lap — you deserve it! 🏃‍♀️ 

![Cool GIF](https://media.giphy.com/media/QMozgDyV3CutNj2cVs/giphy.gif?cid=ecf05e47qtcrrh35204aut154y2ju478zogg8ziovpfer81a&rid=giphy.gif&ct=g)
Day 185
Tags: 100daysofcode, programming
Published: 2021-08-27 17:32:58

Day 185/200 of  #100DaysOfCode 

- Solved one problem on HakaerRank.  &&
-  Started learning "React" from the beginning at @FrontendMasters
.  @holtbt
  is one of my favorite instructors.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38fig7mbhuoyfofvfyn0.png)
How i start selling templates in envato market  ?
Tags: webdev, beginners, help
Published: 2021-08-27 17:27:48

##Hey guys, I need help

I know programming a websit in {Html-csss-js} and I know programming the template, but I do not know where to start selling templates or what templates I should program
- Do I program the templates inspired by the imagination and then sell them?

- Do I sell the project in the form of .html .css .js ...  documents or what 

and Thank you
Bank Account | #9 | Exercism.io | Learn JavaScript Through Test Driven Programming Challenges
Published: 2021-08-27 17:19:20

{% youtube TMHnoBasfac %}


Get started with the Exercism.io programming challenge site https://exercism.io. Learn about Test Driven Development, JavaScript, Node/NPM, classes, getters, setters, this, and object-oriented programming.

Checkout this video on our player: https://play.codecast.io/e7BpPe8DQdnY...

Watch more of Brooklin Myers videos here :https://www.codecast.io/users/brooklin
Space Age | #7 | Exercism.io | Learn JavaScript Through Test Driven Programming Challenges
Published: 2021-08-27 17:18:59

{% youtube G3_QvoP098g %}


Get started with the Exercism.io programming challenge site https://exercism.io. Learn about Test Driven Development, JavaScript, Node/NPM, Floats, and objects.

Checkout this video on our player: https://play.codecast.io/gx3LjdvbpNDz...

Watch more of Brooklin Myers videos here :https://www.codecast.io/users/brooklin
RNA Transcription | #6 | Exercism.io | Learn JavaScript Through Test Driven Programming Challenges
Published: 2021-08-27 17:18:12

{% youtube _uemEJ4Gmw4 %}


Get started with the Exercism.io Programming challenge site https://exercism.io/my/tracks. Learn about Test Driven Development, JavaScript, Node/NPM, iterating through strings with for loops, objects, refactoring, and pulling out single behaviors into individual functions.

Checkout this video on our player: https://play.codecast.io/rGRpEx1x5xy4...

Watch more of Brooklin Myers videos here :https://www.codecast.io/users/brooklin
Remove Space/Empty New Line on VSCode with Regex
Tags: vscode, regex
Published: 2021-08-27 17:12:02


Photo by Joan Gamell on Unsplash

{% youtube AdAEZ2KeEhU %}


### Remove space
1. Cmd+F / Ctrl + F
2. type \n in Find input
3. leave Replace blank
4. click replace one by one / replace all

### Remove empty new line
1. Cmd+F / Ctrl + F
2. type ^\n in Find input
3. leave Replace blank
4. click replace one by one / replace all
Codeforces 4A: Watermelon
Tags: python, cpp, algorithms, codeforces
Published: 2021-08-27 17:09:14

- It's easy to see that odd number cannot be sum of two even numbers because sum of two even numbers is even.
- On the other hand, even number can always be split into two positive even numbers except **2** because zero is not positive.

Problem statement:
https://codeforces.com/contest/4/problem/A

Python
```python
def solve(weight):
    if weight > 2 and weight % 2 == 0:
        print("YES")
    else:
        print("NO")

w = int(input())
solve(w)
```

C++
```cpp
#include <iostream>
using namespace std;
 
int main() {
    int w;
    cin >> w;
    if (w > 2 && w % 2 == 0) {
        cout << "YES" << endl;
    } else {
        cout << "NO" << endl;
    }
    return 0;
}
```

Let me know your thoughts in the comments section below. Thanks!
Bisect: A severely underrated git command
Tags: git, vcs, bisect
Published: 2021-08-27 16:58:32

# `git bisect`

Ever faced a situation where you made multiple commits to your project only to break a feature which you are sure it worked properly before you went on the commit spree?

How on earth do you even plan to begin debugging the code in such a scenario? 

One could go on a brute force approach but wouldn't it be much easier(to debug) if git just tells you which commit messed up your feature?

`git bisect` does exactly that.

Suppose I have a commit history as shown below:

![Git Log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejmscs6jcw0b1a6pb25t.png)

Lets say my feature worked properly in `29aa243`. I want to find which commit between  `29aa243` and `d3bf6d2` broke my feature.

Before beginning to bisect the commits, lets get a basic understanding of the involved commands

#### To start bisecting, we run the command :

```bash
git bisect start
```

This would start a bisecting session where you have to test your feature and tell git if it works fine or is still broken. 

```bash
git bisect good [optional commit] # If the feature works fine
git bisect bad  [optional commit] # If the feature is still broken

```

This is a simple logic graph of the process:

![Logic Graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7v9hq3y1dpi7z8zo4fa.png)

Now, We have to first initialize which commit is `good` and which is `bad` . In this scenario, my `d3bf6d2` (current HEAD) is bad and `29aa243` is good. Do this with the help of commands given above 

![Git bisect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8kiuj92l0urjirgf96n.png)

Now test your feature and subsequently go through the logic graph given above(**Note: It is very important that you donot begin to commit on the codebase in a Bisecting Session. Since the HEAD remains in a detached state in such session, it would give you a hard time fixing everything later. See the last part of this article on how to exit Bisecting Session**). 

In the end of all revisions, git will tell which  commit broke your feature :]

![Git Bisect 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0hl4icxrlrbc8mbd9vr.png)

Now that you have found your guilty commit, its time to reattach your `Detached HEAD` back to `master`. Do this to reattach your detached HEAD

```bash
git bisect reset
```

Good luck with debugging that commit 👍. Here are some more sources to learn about `git bisect` :

[https://git-scm.com/docs/git-bisect](https://git-scm.com/docs/git-bisect)

[https://stackoverflow.com/questions/4713088/how-to-use-git-bisect](https://stackoverflow.com/questions/4713088/how-to-use-git-bisect)
37 Software Engineering Mistakes You Should Avoid As A Beginner (Not A Long, Boring Article)
Published: 2021-08-27 16:52:16

Hey, guys! Most engineers have done the following mistakes, but if you avoid them, you'll be very surprised how well your software engineering journey will turn out. Unlike some of my other articles, I will not be elaborating each point as the following points are self-explanatory and I don't want to waste your time. If you find this article useful or if you're guilty of these mistakes, you owe me a like. 

* Thinking you're on the "right track" just because you've enrolled in an online coding course.
* Trying to be a perfectionist.
* Not sleeping well.
* Forcing yourself to stay late till night when it makes you unhappy.
* Learning too much programming languages.
* Thinking you're an amazing software engineer because you know a lot of programming language (but you don't know how to load balance).
* Thinking you're the only one who is learning or hustling.
* Underestimating others.
* Underestimating yourself.
* Worshipping a particular tech by only using it for almost all use cases when other more suitable tech can be used.
* Not helping others.
* Not asking for help.
* Underestimating programming QNA groups on Facebook (cause you think Facebook is for old people).
* Writing Java code in any IDE other than IntelliJ IDEA.
* Underestimating PHP and Laravel because of the memes.
* Hating Java.
* Not taking care of your back.
* Looking down on non-programmers or thinking that programming is the only high-paying job.
* Not learning React Native when you know React well
* Not using Git
* Spending too much time learning CSS
* Learning different tech/tools which solve the same problem rather than learning tech/tools which solve different problems (for example, learning React, and then Angular followed by Vue).
* Bragging.
* Comparing yourself with people who started off way earlier than you or who clearly have more advantages over you (for example, comparing you, who might be born poor and had the chance to own a computer when you're 17 to a kid your age who was born in New York and started coding when he was 12).
* Thinking that coding is the real deal when the real deal is the outcome of writing codes.
* Not taking a mental health day.
* Going for cheap entertainment rather than high quality ones (for example, mindlessly scrolling social media which wastes your time VS. watching a super entertaining movie which makes you happy)
* Not using an external monitor when you have money to buy one.
* Learning frontend or backend tech only because some guy said you should only specialize in one area.
* Underestimating data structures and algorithms.
* Spending time on learning data structures and algorithms only.
* Writing code without thinking about scalability.
* Learning Firebase only to build backend because you're scared of building your API manually.
* Thinking you should only stick to the tech you know.
* Watching too much tech videos.
* Watching too little tech videos.
* Not learning keyboard shortcuts.
Express your intentions in your coding - short lived variables
Tags: architecture, python, codequality, codereview
Published: 2021-08-27 16:51:20

Short Friday post. Let's talk a bit about **implementation intentions** and how you reflect those in your code.

The more I code, and the more I review others code, some little things start to "stress" me out a bit :smile: but it's positive stress, I've to say.

**Have you considered how others read and understand the scope of your variables?** More and more, I try to express my intentions when naming variables. And no, I am not talking about *long names* or *short cryptic names*. Here, I am talking about the **time** and the **length** (scope) a variable will have in the execution/implementation. Let's see. Imagine the following block of code:

```python
var1 = # some logic

# some logic defined in 2 or 3 lines 
# using var1

# the code continues on and var1 is never used again.
```

Another more rigorous example could be:

```python
var1 = # some long-line logic about 80 chars
# one shorter line using var1

# the code continues on and var1 is never used again.
```

How do you know that `var1` is not used anywhere else in the implementation when you read these lines? You don't (until you search for it and find it's not present anywhere else). So here comes the question: How can we inform the reader that `var1` is used only in the immediate scope of the following lines?

Here's what I do: prefix the variable name with `_`. Like this, when reading `_var1`, we know its scope will end in the subsequent short implementation. Of course, you can argue we could use `_` only instead of `_var1`. That is true, and you are right. But sometimes, it is nice to name variables to give them a purpose. Also because the pure underscore `_` is most often used for *not used variables*.

You can also use `_var1` to temporarily store the result of some logic to facilitate the reading in the following lines. Here's the example I used in my [previous post](https://dev.to/joaomcteixeira/don-t-make-cryptic-strings-for-formatting-fh2), where I use `_tmp` to simplify the next logic step.

```python
# reduce the long call to a short temporary variable
_tmp = someobj.somemethod(run["run_dir"])
somejob = Path(
    rundir,
    f'{fileroot}_{_tmp}_{somevar}w',
    )
```

That's all for this Friday short post. Let me know your comments,
Cheers,
Inter framework
Tags: inter, simplejavascriptframework, javascript, interframework
Published: 2021-08-27 16:43:12

Do you want just to skip every setup that we face nowadays to run a modern front-end app? Inter is here for that.

It gives us the power to build even the most complex web apps importing the framework just in a script tag. It is really very simple framework if you are confident with Javascript you can learn it in a fews minutes.

Inter framework is **simple**, **powerful**, **robust**, **modern**, **reactive**, **enjoyable** and it does not require you to do any setup.

Take a look in Github : [Inter repository](https://github.com/DenisPower1/inter)
Take a look in it's website: [Inter website](http://interjs.epizy.com)
How to use Environment Variables in Vite(React Template Example)
Tags: react, vite, javascript
Published: 2021-08-27 16:33:12

*tl:dr — Use `import.meta.env` instead of `process.env`*
 
[Vite](https://vitejs.dev/)  is a handy build tool when you want to spin up a quick react application. In this guide, I will walk you through how to use environment variables inside a react application template created though vite.

#### Prerequisites:
This guide assumes that you know some basics of  [scaffolding a vite application template](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)  and also the workings of  [environment variables](https://robertcooper.me/post/front-end-javascript-environment-variables) . A brief disclaimer, environment variables only store secrets during the development phase of your project. Secret or sensitive keys will be visible after a production build so be careful not to expose sensitive keys at build time.

#### The Problem:
Sometime back when doing a live code presentation, I wanted to use some keys from a database that was to initialize a connection to the database. The best approach would be to write all the keys inside a `.env` file and create a connection that makes a reference to the values inside this file. Normally when creating and using environment variables, you write the JavaScript statement `process.env.SOME_VALUE` or `process.env.REACT_APP_SOME_VALUE` but in this instance, the react application stopped rendering information on the screen. The console error read "process is not defined". Even after installing the npm package dotenv, the error still persisted.

![process_not_defined.jpg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpzcn8nuua6ql98lb2qa.jpg)

#### The Solution:
The solution is actually inside the  [official vite documentation.](https://vitejs.dev/guide/env-and-mode.html)  Instead of using `process.env.SOME_VALUE` or `process.env.REACT_APP_SOME_VALUE` which is common with other projects, inside vite we use `import.meta.env.SOME_VALUE`. When you want to expose some info inside the frontend you will have to append the statement with VITE i.e. `import.meta.env.VITE_SOME_VALUE`.

With the `import.meta.env.VITE_SOME_VALUE` statement, we can now use environment variables inside a react application initialized inside of vite. Thank you for reading this brief writeup and hope this comes in handy when working with react inside vite.

Happy Coding!
Pak: Add Stripe/PayPal payment method in foreign client's website while working as a freelancer from Pakistan.
Tags: programming, webdev, beginners
Published: 2021-08-27 16:26:21

Hi, my name is Saifullah Usmani. I am a Full Stack Python Web Developer. I have been programming for almost 5 years now.

Well I don't want to waste your time.
You can get free sandbox account with API key of **PayPal** or **Stripe** in **Pakistan** by **setting** the **location** to **supported country** such as **UK**.

Done you got the account to mess around with the payment gateway and do the work for your clients.

**After work done ask client for their real API key and put then instead of sandbox API key.**

**If it added value or you learned something new.** Make sure to **follow** my blog and YouTube channel. Links are at the bottom.




[![DigitalOcean Referral Badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00rcc3tqicv68383vo0r.png)](https://www.digitalocean.com/?refcode=9d6f3f71c1b4&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
Affiliate Link☝



##Follow me:
Hire me: https://www.fiverr.com/saifullah02 (For web development Purposes)  
My New Blog: [saifullahusmani.com](https://saifullahusmani.blogspot.com/)
*Follow me here:* https://dev.to/saifullahusmani
*YouTube:* http://bit.ly/saifullahusmani (Programming Tutorials Coming Soon).
*Discord:* https://discord.gg/AKyvy8Y
*Facebook*: https://www.facebook.com/SaifullahUsmani693
Using Nom - a parser combinator library
Tags: nom, rust, parser
Published: 2021-08-27 16:10:09

---
title: Using Nom - a parser combinator library
published: true
description: 
tags: nom,rust,parser
//cover_image: https://direct_url_to_image.jpg
---

I wanted to create a parser for [Apertium Stream](Using Nom - a parser combinator library
).  In 2014, I used Whittle in Ruby. If this year were 2001, I would use Lex/Yacc. Anyway, this year is 2021. I wanted to create this parser in Rust. I tried to find what is similar to Lex/Yacc. I found Rust-Peg. I found a link to [Nom](https://github.com/Geal/nom) from [Rust-Peg](https://github.com/kevinmehall/rust-peg)'s document. My first impression was Nom example is easy to read. At least, its document claimed Nom is fast.

Apertium Stream format is quite complex, and I didn't know exactly how to use Nom. So I started from an easy case. My simplified Apertium stream is a list of lexical units. A lexical unit looks like this:

```
^surface_form$
```

Btw, I didn't test my source code on this post. If you want a runnable example, please check https://github.com/veer66/reinars.

I created a function to match a lexical unit first. It looks like this:

```Rust
fn parse_lexical_unit(input: &str) -> IResult<&str, &str> {
    let mut parse = delimited(tag("^"), is_not("^$"), tag("$"));
    parse(input)
}
```

By running parse_lexical_unit("^cat$"), it returns Ok(("", "cat")).

I hopefully improve by returning a Lexical Unit struct instead of &str.

```Rust
#[derive(Debug)]
struct LexicalUnit {
    surface_form: String
}

fn parse_lexical_unit(input: &str) -> IResult<&str, LexicalUnit> {
    let mut parse = delimited(tag("^"), is_not("^$"), tag("$"));
    parse(input).map(|(i,o)| (i, LexicalUnit { surface_form: String::from(o) }))
}
``` 
"delimited" helps me to match ^ at the beginning and $ at the end. I wanted to capture whatever, which is not ^ or $. So I use is_not("^$"). Can it be more straightforward?

When I ran parse_lexical_unit("^cat$"), I get Ok(("", LexicalUnit { surface_form: "cat" })) instead. 😃

Then I created a function for parsing the simplified stream.

```Rust
fn parse_stream(input: &str) -> IResult<&str, Vec<LexicalUnit>> {
    let mut parse = separated_list0(space1, parse_lexical_unit);
    parse(input)
}
```

In the parse_stream function, I use parse_lexical_unit, which I created before, in separated_list0. separated_list0 is for capturing the list, which in this case, the list is the list of lexical units parsed by parse_lexical_unit; and space1, which is one or more spaces, separate the list.

By running parse_stream("^I$ ^eat$ ^rice$"), I get:

```Rust
Ok(("", [LexicalUnit { surface_form: "I" }, 
             LexicalUnit { surface_form: "eat" }, 
             LexicalUnit { surface_form: "rice" }]))
```

I think this is enough for showing examples. The rest of the parser is the combination of alt, escaped_transform tuple, etc. By doing all these, I feel that this is easier than using Lex/Yacc or even Whittle at least for this task.