teleren/devto huggingface dataset:
49: The Consistency is everything 
Tags: javascript
Published: 2020-05-17 12:45:37


###The New Karma For Learning JavaScript 🖥

*Setting the limitation to finish projects are important to maintain the self-directing studying* 

I have a full-time job, it was necessary to have a new routine. I set how many hours I can focus on and what to do, then the coding is the process of specifying, and the conclusion is publishing then record what I learned today. 



---

###From Photographer to Maker 🎥
*The act of Photograph is capturing one moment* 

what I like to do with JavaScript is operating the pictures(codes) and visualize my identity, for example, by building the interactive website!


---

###Visual Thinker can also code 💭
*I think in pictures, not words* 

I know one way to understand and layout the structure, the new mission is organizing the solution by encoding. Let me figure out every mystery with mathematics, externally, and internally.
Bios Üzerinden Boot'a İşletim Sistemi Ekleme
Tags: boot, bios, operatingsystem, pardus
Published: 2020-05-17 12:27:25

Bilgisayarınızda çift işletim sistemi yüklü olduğunda bilgisayarı istediğiniz işletim sisteminden açmak için daha önce bir [yazı](https://dev.to/aciklab/dual-boot-pardus-kurulumu-nasil-yapilir-4378) paylaşmıştım. Paylaştığım yazıda Pardus ile birlikte gelen GRUB üzerinden değişiklik yaparak Windows'u eklemiştik. Aşağıda yapacağınız yöntem ile Grub'a girmeden seçim yapabiliriz.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gutlg2zkb2m3bwrd97s4.png)

Yukarıdaki resimde bilgisayarın açılış sistemi gösterilmiştir. Bilgisayarın düğmesine bastıktan sonra donanımlar POST ekranında kontrol edilir başarı ile geçtikten sonra BIOS yüklenir. Buradaki önemli nokta BIOS ile birlikte BIOS'un bir parçası olan BOOT'ta yüklenir. Biz bu BOOT üzerinden seçim yaparak işletim sisteminin önyükleyicisini çağıracağız. **Aşağıda anlatacağım yöntem her bilgisayarda değişiklik gösterecek olup genel mantığı aşağıdaki gibidir.** 
##Pardus'u eklemek için
BIOS ayarlarına girilir ve oradan BOOT önceliğine tıklanır.
Ardından aşağıdaki adımlar yapılır.
![](https://i.ibb.co/cX0677P/IMG-20200428-010218-1.jpg)
![](https://i.ibb.co/zJkZ6MQ/IMG-20200428-010341.jpg)
![](https://i.ibb.co/Sx7NFyX/IMG-20200428-010352.jpg)
![](https://i.ibb.co/wgkSHf6/IMG-20200428-010359.jpg)
![](https://i.ibb.co/ssXDpfg/IMG-20200428-010423.jpg)
İkisinden birini seçebilirsiniz bir farkı olmayacaktır.
![](https://i.ibb.co/C77fk9H/IMG-20200428-010431.jpg)
Ve yukarıdaki gibi olduktan sonra OK diyerek kaydedebilirsiniz.
##Windows'u eklemek için
Yukarıdaki gibi Pardus'u seçtiğimiz yere kadar gelip Windows'u seçiniz ve ardından;
![](https://i.ibb.co/J5qN4GY/IMG-20200428-010642.jpg)
![](https://i.ibb.co/qDYQ3DW/IMG-20200428-010655.jpg)
![](https://i.ibb.co/HxD2V2B/IMG-20200428-010704.jpg)
Yukarıdaki gibi olduktan sonra OK diyerek kaydedebilirsiniz.
##Öncelik Verme
![](https://i.ibb.co/MDtsMbN/IMG-20200428-010716.jpg)
Yukarıdaki gibi oklar ile öncelik verebilirsiniz.
Import Javascript subfolder modules like a boss.
Tags: javascript, react, import
Published: 2020-05-17 12:03:06

---
title: Import Javascript subfolder modules like a boss.
published: true
description: Drop the import from '../../../.../../file', you can do better.
tags: javascript, react, import, js
cover_image: https://i.imgur.com/PSqt2h3.jpg
---

Have you worked on a project and find yourself writing code like this?

`import { AddBank } from '../../../../pages/add-bank-account'`

As projects get bigger, more folders get created, the deeper files are nested. Finding files can be a nightmare, and so does importing files. Having to import files like this might lead to some problems.

### 1. Inflexible code

At a glance from the example above, it might not seem like a pain to do this, but let's assume our folder structure changes, and we move `add-bank-account.js` to `pages/bank/add-bank-account`. We would have to update the import statement in every file it was imported, which can lead to problems, depending on how many people work on the project and how large it is.

### 2. Hard to build mental models.

While coding, we build mental models, that help us remember things faster. With this import structure, it's hard to figure out where this file is located at a glance, especially if we have multiple files with the same name `add-bank-account.js` in different parts of our project.  

This problem becomes apparent when onboarding a new developer to the codebase. It would be a pain for the newbie to figure out the folder structure of the app and where things are located.

### A better way.

What if we could import that function like this instead?

`import { AddBank } from '@project/pages/add-bank-account'`

If we change our file structure, all we have to do is change this to

`import { AddBank } from '@project/pages/bank/add-bank-account'`  

you would agree with me that this is much cleaner and we wouldn't have the problems associated with the initial approach.

### Ready to boss up?

Thanks to the beautiful brains behind Node and npm, we can install folders as node modules. This allow for interesting use cases, including solving our ... problem.

Boss up in 3, 2, 1:

1. Create a `package.json` in the folder you want to access, in our case `/pages`

```jsx
{
"name" : "@project/pages",
"version" : "0.0.1",
"main": "index.js"
}
```

2. Install the folder as a dependency, by running `npm install -S ./pages`

3. The folder should be added to your dependencies in the root `package.json`

```jsx
{
  "name": "boss-subfolder-import",
  "version": "1.0.0",
  "description": "Boss subfolder import",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "ayotomiiide@gmail.com",
  "license": "ISC",
  "dependencies": {
    "@project/pages": "file:pages",
    "express": "^4.17.1"
  }
}
```


![Welcome to the boss life!](https://media.giphy.com/media/YwpylUojkfOZa/giphy.gif)

Like and share this post if it was useful to you.

Let me know what you think about this approach in the comments below, whether you agree with it or not.
Daily Developer Jokes - Sunday, May 17, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-05-17 12:00:29

---
title: "Daily Developer Jokes - Sunday, May 17, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20May%2017%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258a197fb7.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Whats the object-oriented way to become wealthy?

___A:___ Inheritance
 -->
Brief intro on Celery
Tags: celery, python, django, tasks
Published: 2020-05-17 11:43:41

### What is celery?
> Celery is an asynchronous task queue/job queue based on distributed message passing. It is focused on real-time operation but supports scheduling as well.

If we want to execute some piece of code in python asynchronously or If we want to schedule code to execute in the future. We can use celery.

Consider below scenario:
Suppose, User uploads an excel of 1000 rows to create a database record for each row. It is a time-consuming task. The user needs to wait until the task gets completed. It is not ideal to make the user wait and the browser will send timeout error if the response is taking too long. In this case, we should execute the time-consuming task asynchronously.

### How it works?
In this post, I am focusing on the internal structure of celery. Refer to [tutorial](https://docs.celeryproject.org/en/latest/getting-started/first-steps-with-celery.html) on how to implement the celery task.

![Celery Flow](https://dev-to-uploads.s3.amazonaws.com/i/6pp99jwouivhymdxldxe.png)

**Celery client - Publisher**
- When we execute the Task.apply_async()/task.delay() celery internally uses [**kombu**](https://docs.celeryproject.org/projects/kombu/en/stable/introduction.html) which will serialize the task to JSON like message and send it to the Broker.
```json
{
	"task": "myapp.tasks.Task",
	"id": "54086c5e-6193-4575-8308-dbab76798756",
	"args": [4, 4],
	"kwargs": {}
}
```

**RabbitMQ - Broker**
- Celery needs the broker which follows the AMQP(Advanced Message Queuing Protocol) like RabbitMQ, Redis, etc., 
- This broker will take the message and place it in the Queue. Whenever a worker is free (consumer) it gives the task to it.

**Celery worker - Consumer**
- Celery worker takes the message and extracts the required information like task name, args, kwargs, etc., and executes it.
- If the result backend is present then the task result will store in it.
balalaika IT newsletter #1
Tags: react, node, java, webdev
Published: 2020-05-17 10:34:42

---
title: balalaika IT newsletter #1
published: true
description: Curated IT newsletter. From Russia with love. Issue #2.
tags: #react #node #java #webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7dwkz927sf2ausnqygq3.jpg
canonical_url: https://blog.balalaikait.com/balalaika-it-newsletter-1
---

# Frontend

* Have you ever doubted CSS-in-JS? I was a huge antagonist myself until I heard [this Max Stoiber's talk](https://www.youtube.com/watch?v=W-zVPl7CGrY).

* Deep dive into React concurrent mode. [Get ready for the future!](https://blog.logrocket.com/react-concurrent-mode/)

* "Using React ref and really understanding it are two different pair of shoes" - do you agree? [Robin Wieruch explains it in detail](https://www.robinwieruch.de/react-ref).

# Node.js

* Node.js v13.10.0 introduced a built-in CLS API, namely, new class AsyncLocalStorage located in the well-known experimental async_hooks module. In [this short post](https://itnext.io/one-node-js-cls-api-to-rule-them-all-1670ac66a9e8) you will get familiar with AsyncLocalStorage and its capabilities.

* Worker Threads are gaining a lot of interest from Node.js community nowadays. If you want to learn more low-level details of their  implementation, [you should read this post](https://blog.insiderattack.net/deep-dive-into-worker-threads-in-node-js-e75e10546b11).

* Ryan Dahl thinks Deno is mature enough to release 1.0. [Check it out yourself](https://deno.land/v1).

# Java

* [This article](https://shipilev.net/jvm/objects-inside-out/) will help you to gain a deep knowledge of how much memory does a Java object take.

* If you rely on `ScheduledThreadPoolExecutor` class to execute periodical tasks in a precise time fashion, [you might want to read this blog post](https://medium.com/@leventov/cronscheduler-a-reliable-java-scheduler-for-external-interactions-cb7ce4a4f2cd).

# General

* Andy Pavlo gives us a mind-blowing overview of database internals in his series of lectures "Advanced Database Systems". Ever wondered how your favorite tweets are stored? How challenging is it to implement a database at scale? [Here is your answer](https://www.youtube.com/playlist?list=PLSE8ODhjZXjasmrEd2_Yi1deeE360zv5O).

* Delta-delta encoding, Simple-8b, XOR-based compression, and more - These algorithms aren't magic, but combined they can save over 90% of storage costs and speed up queries. [Here’s how they work](https://blog.timescale.com/blog/time-series-compression-algorithms-explained/).
Deno ฉบับรวบรัด
Tags: deno, javascript
Published: 2020-05-17 10:10:05

ตอนนี้ Deno เวอร์ชัน 1.0 ก็ออกมาเรียบร้อยแล้ว จึงทำให้ได้รับความสนใจจากโปรแกรมเมอร์ในฐานะตัวรัน JavaScript ตัวอื่นนอกจาก NodeJS 

# **Deno คืออะไร**

Deno คือตัวรัน JavaScript อีกตัวนอกจาก NodeJs ใช้เอนจินต์ V8 เหมือนกัน Deno เขียนโดยใช้ภาษา Rust มีโครงสร้างไลบรารี่คล้าย ๆ กับภาษา Go นอกจากนี้ยังสามารถรัน TypeScript ในตัวได้ด้วย

# **จุดเด่นของ Deno**

Deno เป็นตัวรัน JavaScript ที่ตั้งค่าความปลอดภัยสูงสุดตั้งแต่ต้นเลย สคริปต์ต่าง ๆ จะใช้ระบบไฟล์ ต่อเน็ต อะไรก็ไม่ได้จนกว่าเราจะอนุญาต นอกจากนี้จะไม่มี node_module หรือ package.json แต่จะ import จาก url และไฟล์ภายในเครื่อง

นอกจากนี้ Deno ก็มีตัว Debugger รวมถึง Formatter ในตัวอีกด้วย เรียกได้ว่าเครื่องมือครบครันกันทีเดียว

# **ตัวอย่าง**

```jsx
// ดัดแปลงมาจาก https://deno.land/std/datetime
import { parseDate } from 'https://deno.land/std/datetime/mod.ts'
console.log(parseDate("20-01-2020", "dd-mm-yyyy"));
```

จะเห็นได้ว่าเราใช้ Url ในการ import ไลบรารี่ ไฟล์ใน Url จะสามารถ cache ได้ครับ

# **ที่มาและแหล่งศึกษาเพิ่มเติม**

ทาง Deno มีเว็บไซต์อย่างเป็นทางการที่ [deno.land](https://deno.land) ครับ จะรวมคู่มือและเอกสารของตัว Deno เอง ส่วน standard library จะอยู่ในเว็บไซต์ [deno.land/std](https://deno.land/std/) ครับ
Gate Full form
Published: 2020-05-17 10:06:40

What is GATE?
Graduate Aptitude Test (GATE) is an international level engineering entrance examination entrance examination that primarily tests the comprehensive understandings of various undergraduate subjects in engineering and science which are conducted jointly by the Indian Institute of Science and seven Indian Institutes of Technologies on behalf of the National Coordination Board- GATE.


ATE full form is Graduate Aptitude Test. Graduate Aptitude Test  is an international level engineering entrance examination entrance examination that primarily tests the comprehensive understandings of various undergraduate subjects in engineering and science which are conducted jointly by the Indian Institute of Science and seven
https://www.emotepp.com/gate-full-form
Logic to extend allowed IP or remove expired one
Published: 2020-05-17 09:57:07

<sub>Photo by Alvaro Reyes on Unsplash</sub>

In order to keep the process of extending IP minimal, it's crucial to extend the lifespan of allowed IP if it's hasn't changed.

##Information

To do that we rely on the following information in the log:
- the IP
- a unique IP mapped from user's identity
- an expiration date

##Update Flow

Those simple information let us perform the following [link](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcblx0QVtVc2VyIFJlcXVlc3QgQWNjZXNzXSAtLT58R2V0IENsYWltcywgSVAsIHVzZXIgaWRlbnRpdHkgZnJvbSBBRHwgQihDaGVjayBQcmV2aW91cyBBY2Nlc3MpXG5cdEIgLS0-IEN7UHJldmlvdXMgYWNjZXNzIDxicj4gd2l0aCB0aGUgc2FtZSBJUD99XG5cdEMgLS0-fFllc3wgRFtFeHRlbmQgbGlmZXNwYW4gPGJyPiBvZiBwcmV2aW91cyBhY2Nlc3NdXG5cdEMgLS0-fE5vfCBFW0NyZWF0ZSBhIDxicj4gbmV3IElQIGFjY2Vzc11cbiAgRCAtLT4gRltTdG9yZSByZWNvcmQgaW4gbG9nXVxuICBFIC0tPiBHW0RlbGV0ZSBwcmV2aW91cyA8YnI-IGFjY2Vzc11cbiAgRyAtLT4gRltTdG9yZSByZWNvcmQgaW4gbG9nXSIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y1romvwrg3qkbqjjkcbp.png)

Durable Framework allow us to fire and forget instance. We just need to check if an IP is still valid in the record before delete it.
The logic to do it will be the [following](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG4gIFVzZXItPj4rQXp1cmVGdW5jdGlvbjE6IEFkZCBteSBJUF9BXG4gIEF6dXJlRnVuY3Rpb24xLT4-TG9nOiBTdG9yZSBJUF9BXG5cdEF6dXJlRnVuY3Rpb24xLT4-QXp1cmVGdW5jdGlvbjE6IEFkZCBJUF9BXG4gIFVzZXItPj4rQXp1cmVGdW5jdGlvbjI6IFVwZGF0ZSBteSBJUF9CXG4gIEF6dXJlRnVuY3Rpb24yLT4-QXp1cmVGdW5jdGlvbjI6IERlbGV0ZSBJUF9BXG4gIEF6dXJlRnVuY3Rpb24yLT4-QXp1cmVGdW5jdGlvbjI6IEFkZCBJUF9CXG4gIEF6dXJlRnVuY3Rpb24yLT4-TG9nOiBVcGRhdGUgSVBfQSB0byBJUF9CXG5cdEF6dXJlRnVuY3Rpb24xLT4-TG9nOiBDaGVjayBJUF9BICBcblx0QXp1cmVGdW5jdGlvbjEtPj4tQXp1cmVGdW5jdGlvbjE6IE5vIElQX0EgdG8gcmVtb3ZlXG4gIEF6dXJlRnVuY3Rpb24yLT4-TG9nOiBDaGVjayBJUF9CICBcblx0QXp1cmVGdW5jdGlvbjItPj4tQXp1cmVGdW5jdGlvbjI6IFJlbW92ZSBJUF9CIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ph1el50whnl8c0h1urr8.png)

##Log

As a log, we use Azure Storage Table with:
- the unique ID as a PartitionKey
- IP as a RowKey
Mobile application development Review(android/ios), Native React js Or flutter Dot
Tags: help, discuss, javascript
Published: 2020-05-17 09:55:28

We would be taking your review on which you think is better to use React Native or Flutter but first let me sumarise what mobile mobile application development is and the types.
Application Development is the process of developing a mobile application for mobile device like ios/andriod. There are 3 type of mobile development which are Native, web and hybrid applications.
<h3>Native applications</h3> are built to target a specific Iperating system, we all know iOS application won't work on Android and vice verse.
<h5>what developers use</h5>
IOS -> swift or objective C
Android -> java
Windows phone ->Net
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oi5jlm1jn08q0eilqeio.png)

<h4>Mobile Web applications</h4> they make your website downloadable to your device like converting your website to application making it a mobile website.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w06xyk41vcx8x7x92kty.png)
<h4>Hybrid application</h4> has cross platform compatibility it's the mixture of both native and web applications.
<h5>what developers use</h5>
Xamarin
Ionic
React native 
Flutter 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uuj3nfwqptzuejajgfjb.png)
We want to talk on which is better for developers React or Flutter 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/05w92ilopq25lr2x9306.png)


1. React by Facebook is a js framework in which javascript is a very popular language among developers and it is really easy to install but they assume developers know how to set it up with no setup guide for Android projects, react native has more developer support since it started 2015 but with no great support for UI testing.
2. Flutter by Google uses dart which is not really popular among developers and most developers see it has stress learning it but it is very easy to use and understand , it takes longer time installing but offers more documentation and support for configuration and set up , flutter doesn't have much developer support since it started 2017 but with time it would, they have great support for UI testing.



<center>My Review</center>
According to what I think I believe using react is better because all developers uses javascript for development it easier to learn and use react Native cause it's not really different from React.






 <center>Your Review</center>
 Tell us what you feel, which is better to use React or Flutter???



Review image by samaj
Natural cure game with Javascript and HTML5
Tags: javascript, html, game, naturalcure
Published: 2020-05-17 09:33:00

I've recently published a game called [Natural cure](http://natural-cure-game.web.app/). It's a game about viruses, vaccination and shootings. It should be played on a big screen (not on mobile phones), in order to be able to move around. You also need to do a lot of right-cliking. It seems to be working the best in Chrome. It's hosted with Firebase. I made it from scratch, meaning I didn't use any library for building games, just Javascript, HTML and CSS. I did, however, use the crizmas-mvc framework (based on React) for the menus, popups etc. The most challenging part was getting the path finding algorithms right, including the optimizations. I started it a few years ago, took big breaks and it was never clear that I was going to finish it because I've never had an idea of a game story. Given the current COVID-19 situation, I thought of killing my time more efficiently updating the game. The result is quite interesting. Another thing I focused on was code obfuscation. In particular, I focused on mangling the property names of objects so that the code is even more difficult to read than only with minifying the code. Therefore, the intention is not to share the code with you, but, if you'd like a challenge, try to see if you can get an idea of how the code works and what its structure is.
Golang tutorial - 2 Constant
Tags: go, beginners, tutorial
Published: 2020-05-17 09:19:28

#Constant in Golang
In many programming languages, there is a special variable called a constant. A constant is a variable that the value cannot be changed. To declare a constant variable in Go, use the `const` keyword.
The declaration of a constant can be seen in this code below.
```go
const pi = 3.14               //1. using const keyword followed by constant name
const myConst string = "test" //2. using const keyword with specified type
const (
	a = 12
	b = 23
	c = 34
) //3. declare multiple constants easily with const(..) just like declaring variables
```

Here is the complete code example using const.
```go
package main

import "fmt"

const pi = 3.14               
const myConst string = "test" 
const (
	a = 12
	b = 23
	c = 34
) 
func main() {
	area := pi * 7 * 7
	fmt.Println("Area of circle : ", area)
	fmt.Println("Other const", myConst, a, b, c)
}
```

The output from that code is :
```bash
Area of circle :  153.86
Other const test 12 23 34
```

If we try to change a value from a const, this code throws an error
```go
package main

import "fmt"

func main() {
	const a = 12
	a = 45 //change a value from const
	fmt.Println("value of a", a)
}
```

The error message from that code :
```bash
.\main.go:7:4: cannot assign to a
```

##iota
There is a special const in Go called `iota`. `iota` is a const that has a default value equal to 0 and will increase automatically by 1 if assigned to another constant.

Here is the code example using iota.
```go
package main

import "fmt"

const (
	a = iota // iota = 0
	b = iota // iota = 1
	c = iota // iota = 2
)

const d = iota // iota value reset to 0 because assign into another variable with const keyword

func main() {
	fmt.Println(a)
	fmt.Println(b)
	fmt.Println(c)
	fmt.Println(d)
}
```
The output from that code :
```bash
0
1
2
0
```

Another example of using iota can be seen in this code. 
```go
package main

import (
	"fmt"
)

const (
	_      = iota      //ignore the default value with _ notation
	bronze = 10 * iota //iota = 1
	silver = 10 * iota // iota = 2
	gold   = 10 * iota // iota = 3

)

func main() {
	score1 := 200 * bronze
	score2 := 200 * silver
	score3 := 200 * gold
	fmt.Println("The scores : ", score1, score2, score3)
}
```

The output from that code :
```bash
The scores :  2000 4000 6000
```
##Sources
Read more about constants in Go [here](https://go.dev/ref/spec#Constants)

I hope this article helps to learn the Go programming language. If you have any thoughts or feedback, you can write it in the discussion section below.
48: Document Object Model  
Tags: javascript
Published: 2020-05-17 09:12:45



##DOM and JavaScript
The short example above, like nearly all of the examples in this reference, is JavaScript. That is to say, it's written in JavaScript, but it uses the DOM to access the document and its elements. 

The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, XML documents, and their component parts (e.g. elements). 

Every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.

--- 

In the beginning, JavaScript and the DOM were tightly intertwined, but eventually, they evolved into separate entities. The page content is stored in the DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:

####API = DOM + JavaScript

*API: a set of functions and procedures allowing the creation of applications that access the features or data of an operating system, application, or another service.*

--- 

[DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)