teleren/devto huggingface dataset:
How to add an element before a DOM element in JavaScript?
Tags: javascript
Published: 2020-10-05 00:00:00

---
  title: How to add an element before a DOM element in JavaScript?
  published: true
  tags: JavaScript
  date: Mon Oct 05 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/insert-before-element-dom-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-8571774e977bf38406ff5fdce3a41466.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/insert-before-element-dom-javascript)
  
To insert a text or an element before an element, we can use the `before()` method in the element object in JavaScript.

Let's say we have a HTML structure like this with a `div` tag and 2 `paragraph` tags inside it,

```html
<div>
  <p id="para1">I'm paragraph 1</p>
  <p id="para2">I'm paragraph 2</p>
</div>
```

What if we want to insert a text or another element before the `para1` paragraph tag? Well, Don't worry, we can use the `before()` method of `para1` paragraph tag to insert an element or a text.

So first, let's get the reference to the `para1` paragraph tag like this,

```javascript
// get reference to para1 paragraph tag
const para1 = document.querySelector("#para1");
```

Now let's use the `before()` method in the `para1` element and pass another `span` element as an argument to the `before()` method.

```javascript
// get reference to para1 paragraph tag
const para1 = document.querySelector("#para1");

// create a span element
const span = document.createElement("span");
span.innerHTML = "I'm a span tag";

// use the before() method in the para1 tag
// to add the span tag before the para1 paragraph
// element
para1.before(span);
```

We can also add text content using the `before()` method.

```javascript
// get reference to para1 paragraph tag
const para1 = document.querySelector("#para1");

// create a span element
const span = document.createElement("span");
span.innerHTML = "I'm a span tag";

// use the before() method in the para1 tag
// to add the span tag before the para1 paragraph
// element
para1.before(span);
para1.before("I'm just a text");
```

Now the output looks like this,

```html
<!-- 

    I'm a span tag I'm just a text
    I'm paragraph 1
    I'm paragraph 2
    
-->
```

See this example live in [JSBin](https://jsbin.com/hanacetole/1/edit?html,js,output).

### Feel free to share if you found this useful 😃.

---
LET and CONST, when should I use?
Tags: javascript, react, webdev
Published: 2020-10-04 23:21:40

Hello, DevGuys! 

The CONST and LET variables are introduced in ES6 and nowadays it's very common to use in new codes. But, these days I've been studying React JS and a question came to mind, when should I use them? 

Well, it's simple... they have your duty in code and help us to understand the codification 

`CONST` means the variable can't be reassigned a new value and declarations are block-scoped. So, you can create to define constants values to be as "ready only". Please don't try to change this value :D.

``` 
const UNDERAGE_VALIDATION = 18;
function validateAge(age){
 (age < UNDERAGE_VALIDATION) 
   ? console.log("Underage person")
   : console.log("Older");
}
```

`LET` this variable will be reassigned and is block-scoped, that variable can be updated but not re-declared. :). 
``` 
let counter = 0;
while(counter <= 10){ counter = counter + 1; }
```

That's simple, keep it's simple and do a clean code. 
Bye-bye!
Contribute to An Evolutionary Database System during #Hacktoberfest (technology stack: Java, Kotlin, Vert.x)
Tags: hacktoberfest, contributorswanted, java, kotlin
Published: 2020-10-04 22:55:33

## 👾 An Evolutionary Database System for Modern Hardware

[SirixDB](https://sirix.io) is an evolutionary, accumulate-only database system. Each new commit stores more data in a new snapshot, which shares common data with the previous revisions. The system never overwrites data. It supports a single read-write transaction per resource concurrently to N read-only transactions. Furthermore, in stark contrast to other database systems, the persistent, durable tree consists of variable-sized database pages. Versioning takes place at a sub-page level according to a novel sliding snapshot algorithm.

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

We have a lot of issues to work on. I'll list some of them for which you don't have to have a database background:

{% github https://github.com/sirixdb/sirix/issues/85 %}

{% github https://github.com/sirixdb/sirix/issues/251 %}

{% github https://github.com/sirixdb/sirix/issues/60 %}

{% github https://github.com/sirixdb/sirix/issues/282 %}

{% github https://github.com/sirixdb/sirix/issues/297 %}

{% github https://github.com/sirixdb/sirix/issues/343 %}

{% github https://github.com/sirixdb/sirix/issues/63 %}

{% github https://github.com/sirixdb/sirix/issues/286 %}

{% github https://github.com/sirixdb/sirix/issues/269 %}

{% github https://github.com/sirixdb/sirix/issues/254 %}

{% github https://github.com/sirixdb/sirix/issues/109 %}

{% github https://github.com/sirixdb/sirix/issues/92 %}

{% github https://github.com/sirixdb/sirix/issues/114 %}
#ChadWritesCode End of Week Log Oct 4, 2020
Tags: webdev, learning, react
Published: 2020-10-04 22:53:38

So this is my first official blog post just describing what I've been doing for the past week. I usually make a goals tweet and before I'd make an end of week assessment tweet but I've decided just to write blog posts cause tweets can be kinda restrictive. Here's the tweet for this week:

{% twitter 1310578740678856705 %}

So did this week go?

The course in question is [this course from Scrimba](https://scrimba.com/learn/learnreact). I first took this course last year in January and really loved it and so I decided to use it as a refresher (since I hadn't written React code in a bit) and a way of learning hooks ... and got bored quickly. Then I remembered [this course](https://scrimba.com/learn/react) from the same author and decided to take this one instead.

So far it's going great, going over React.fragment, Default Props and Prop types. They're even giving me ideas on how to structure my portfolio site I want to work on. I also spent the week doing the Reusability section but I plan to do that over again this week. I'm really enjoying it though so I'm really looking forward to continuing it. Reminds me why I really like working in React.

Anyhow, that's really the update this week. Until next time!
Find an item in an array with the new 'findIndex' method 🔎
Tags: showdev, webdev, javascript, findindex
Published: 2020-10-04 22:24:21

Searching for items in an array has been the point of discussion for many years and debate on what is the best and optimum way for searching for objects has had many solutions, some effective and some not.

However, with the all new `findIndex` method on `Array.prototype` you have the flexibility to search for objects using your own comparison callback method.

## The what

The `findIndex` method returns the index of the first element in an array if the callback method passed to it returns `true`, otherwise it returns `-1`.

```js
const isPerfectSquare = (num) => {
  return num > 0 && Math.sqrt(num) % 1 === 0;
}

console.log([1, 3, 8, 9, 12].findIndex(isPerfectSquare)); // 1
console.log([1, 6, 7, 10, 14].findIndex(isPerfectSquare)); // -1
```

There are two facts you should know:

* This method does not run once it found the first matching element.
* It does not change the original array.

## Syntax

```js
array.findIndex(function(currentValue, index, arr), thisValue);
```

### Parameters

* **function:** This is your callback function which checks for a condition to match the element you're after.
* **currentValue:** This holds the current element's value.
* **index:** This is an optional parameter which holds the current index.
* **arr:** This is also an optional parameter which holds the array that the current element belongs to.
* **thisValue:** Yet another optional parameter, if a value is passed, it will be used as `this` value inside the function, otherwise `undefined` will be passed.

### Return value

It will return the index of the found item or `-1` if the callback function is not satisfied.

## How it works under the hood?

When the `findIndex` is called with one or two arguments, the following steps are executed:

1. Let `O` be ? `ToObject(this value)`
2. Let `len` be ? `LengthOfArrayLike(O)`
3. If `IsCallback(predicate)` is `false`, throw a **TypeError** exception
4. Let `k` be 0
5. Repeat, while `k < len`
  - Let `Pk` be ! `ToString(k)`
  - Let `kValue` be ? `Get(O, Pk)`
  - Let `testResult` be ! `ToBoolean(? Call(predicate, thisArg, « kValue, k, O »))`
  - If `testResult` is `true`, return `k`
  - Set `k` to `k + 1`
6. Return `-1`
How do you fight joint pain in your hands and wrists?
Tags: discuss, watercooler, beginners
Published: 2020-10-04 22:21:38

I've been a developer for all of 12 months and already suffering from some joint pain in my hands. It tends to flare when typing, as well as when cupping my hand to use the mouse. 

Before programming, I did have an office job that required me to do some typing, but the issue seems to have exacerbated in the past year.

Experienced developers, what steps have you taken to either reduce joint current pain or mitigate future joint issues?
We look into code abstractions and perfomance
Tags: linux, java, kotlin
Published: 2020-10-04 22:12:55

---
title: We look into code abstractions and perfomance
published: true
description: In this video we will look at abstractions of code and the performance of different programming languages and what different code can impact the performance. But the specific abstractions may give you improvements in readability and structure.
tags: linux, java, kotlin
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/mc6x0s7kl30ybvkpwvvv.jpg
---

{% youtube l5SEfFrrQJM %}

In this video we will look at abstractions of code and the performance of different programming languages and what different code can impact the performance. But the specific abstractions may give you improvements in readability and structure.
KVS implementation in C++ : A series - 2012's State of the art in KVS (2)

Tags: cpp, keyvaluestore
Published: 2020-10-04 21:36:36

This  [article](http://codecapsule.com/2012/12/30/implementing-a-key-value-store-part-3-comparative-analysis-of-the-architectures-of-kyoto-cabinet-and-leveldb/) is Emmanuel’s somewhat exhaustive comparison of LevelDB and Kyoto Cabinet. I guess he didn’t compare the others because he was only looking at cpp code. Anyways i’ll try to sum up the main points which really caught my eye in this article.

**Parametrization**: LevelDB takes the lead here, because it decoupled its implementation for the database from the parameters, and implemented instead a totally separate component for parameters (general, for read, for write), unlike Kyoto.



**String**: The main goal here is to get rid of O(n) when checking the size of a string, since at a huge scale, it becomes a real pain. So, the idea LevelDB had was to make a class which stores both the byte array and its size, so the size() method is O(1) in time. Redis does the same thing. Kyoto Cabinet uses std::string.



**Error management** : It will be inspired by LevelDB’s status object. We avoid unnecessary space if we just have a variable we need to set, in our case, it’s null unless something is wrong. And the error is treated by the Status class.



**Memory management** : Kyoto Cabinet uses a memory mapped file (meaning the OS handles virtual memory by itself- working set fits in RAM , otherwise the OS will have to access part of it it on disk)



**Data storage** : file system vs memcached (memcached stores everything in RAM)
The Difference Between a Library and a Framework
Published: 2020-10-04 21:33:48

# Introduction
You’ve probably heard of the terms “library” and “framework” being often used interchangeably. This may be because they both have a similar purpose; both libraries and frameworks provide reusable code written by someone else that solves a common problem. However, there is a distinct difference between the two.

# Main Difference Between a Library and a Framework
The main difference between a library and a framework is determined by who controls the development process, which is known as *inversion of control*. In other words, *inversion of control* defines the relationship between the code and a library and framework, respectively.

The diagram below summarizes the difference between a library and framework using the *inversion of control* property:

 ![library-v-framework(1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601780423833/NNIRnOe2d.png)

### Your Code Calls a Library
You, the developer, control a library by calling specific functions from a library to insert into your code depending on your app’s needs.

Let’s use the analogy of baking a cake. You, the baker, have control over the baking process. You have a recipe and some of the ingredients, which represent your program. However, you need to go to the grocery store to buy the rest of the ingredients, which represents a library.

### A Framework Calls Your Code
On the other hand, the control is inverted; the framework is in control of your code by having defined an architectural structure that you must follow when developing your app and the framework will call your code when needed.

Let’s continue using the baking analogy used in the previous section. Rather than baking the cake yourself, you go to a bakery to buy a cake. You get to choose the size, flavor, shape, and decorations, and the bakery will bake the cake for you according to your specifications. The bakery represents a framework, and your customization represents your code.

# Summary
There are other subtle differences between a library and framework, but the main difference between the two is defined by the *inversion of control* property, which defines who controls the development process. In summary:
- Your code controls the library.
- The framework controls your code.

Feel free to comment below with any thoughts or questions!
Using Redaxios, an 800-byte Axios alternative (Fetch wrapper)
Tags: webdev, javascript, node, npm
Published: 2020-10-04 21:30:51

Hi there, Its Naman. This blog is for devs like me who use [Axios](https://github.com/axios/axios) frequently. I love Axios as it provides a clean API and advanced way to play around REST calls. Not only this, I even use Axios for simple GraphQL requests but sometimes I find myself just doing simple CRUD operations (GET, POST etc) using Axios which is overhead in my opinion. So, a couple of months back I found [Redaxios](https://github.com/developit/redaxios). Its a nice little alternative and has been built by [Jason Miller](https://github.com/developit) (creator of [Preact](https://github.com/preactjs/preact)).

### Why would you use [Redaxios](https://github.com/developit/redaxios) instead of [Axios](https://github.com/axios/axios)

👉 Just one reason - Import Cost
I try my best to decrease the build size wherever I can. So, if you are someone like me and you are just doing basic RESTful calls then Redaxios is a great choice.

### 📦 Import cost according to [Bundlephobia](https://bundlephobia.com/)

1- Axios ([Link](https://bundlephobia.com/result?p=axios))
![Axios Import Cost](https://dev-to-uploads.s3.amazonaws.com/i/5qxiteai12rgknopm9jw.png)

2- Redaxios ([Link](https://bundlephobia.com/result?p=redaxios))
![Redaxios Import Cost](https://dev-to-uploads.s3.amazonaws.com/i/iyhu654t4g9e4lblnt1j.png)

### 🤔 How to use it?
The best thing about Redaxios is that it doesn't provide its custom API. Just use it like you use Axios.

#### 🛠  Installation 
`npm i redaxios --save`

#### 🛠  Usage
`import axios from 'redaxios';` 

(use as you would normally)   
   
> Tip: Start with Redaxios (if you are not sure) and down the line if you find that you need advanced features and Redaxios is not your cup of tea then just change the imports. That easy 😉

That's it for today. Feel free to provide any type of feedback. I do appreciate that. Meanwhile, you can find me on Twitter [@InsaneNaman](https://twitter.com/InsaneNaman).

Signing off. See you soon.
Do you create video content? 
Tags: discuss, watercooler
Published: 2020-10-04 21:06:33

Do you create video content to supplement your blog, or as another hobby? What software do you use for it?

It's something I am wanting to try, but the combination of Google Slides, OBS Studio, and OpenShot is actually driving me mad.

I can just about cope with the time consuming nature of creating video content - I just want better tools (or a better laptop to work on, but one thing at a time!)
KVS implementation in C++ : A series - Finding inspo (1)
Tags: cpp, keyvaluestore
Published: 2020-10-04 20:08:06


Since a lot of KVS (key-value stores, settling on this acronym) already exist, It’d be interesting to look at previously developed models, to get some inspiration.



## Examples of KVS :

DBM
Berkeley DB
Kyoto Cabinet
Memcached and MemcacheDB
LevelDB
MongoDB
Redis
OpenLDAP
SQLite

## Requirements for our KVS :

- KVS designed for OOP
- everything will be on-disk
- network access to data store
- no ACID properties necessarily
- no need for a query engine 


## Small intros to available KVS :
**Berkeley DB** : implemented in C, is an open source embedded (runs in the same address as the app, no inter-process comm for database operations) database library for scalable, high-performance, transaction-protected data management services to apps.



**Kyoto Cabinet** : implemented in C++, implements a hash table a B+ tree and other DS,but performance changes if the database’s size goes above a limit (ooooof course).



**LevelDB**: implemented in C++, implements a LSM (log-structured merge tree, which are optimized for SSD drives). For more than one million entries, performance drops. Clear source code though, and for a personal project, we don’t require a heavy load so that’s fine.



Redis : implemented in C, it supports different types of values, not just string values. It’s implemented using hash tables for big sets, for smaller ones however, arrays are used. Its code is very clear and it’s well documented (see github [repo](https://github.com/redis/redis))
Day 36 of 100DaysOfCode
Tags: 100daysofcode, javascript, freecodecamp, codenewbie
Published: 2020-10-04 19:48:16

Hi! 

Today I worked on two FCC algorithm projects. Got them ready and I'm happy about the progress. I'll probably be coding a little less this next week as I have to prepare for my exams. 

### What I did today:

#### 1. JS algorithms and data structures projects
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/

#### What I learned from it:
* What is ROT13 and how to use it
* Using regular expressions to solve a problem

#### Time spent learning:
Task 'FCC'. Elapsed time: 1 h 16 min 52 s

#### Total time: 1 h 16 min 52 s
Time spent is tracked by my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about).

**Outro**
See you all tomorrow!
Django Clone From Scratch With Flask by Abdur-Rahmaan Janhangeer (EuroPython 2020)
Tags: europython, videos, python, flask
Published: 2020-10-04 19:37:38

Hi All! We've added another 10 edited videos for EuroPython 2020, we now have 130 videos online! One additional video will follow next week! 👉 Check out [our Youtube Playlist](https://www.youtube.com/playlist?list=PL8uoeex94UhHgMD9GOCbEHWku7pEPx9fW)

Our next DEV community EuroPython speaker we are highlighting in this post is Abdur-Rahmaan Janhangeer on their talk about "[Django Clone From Scratch With Flask](https://ep2020.europython.eu/talks/9go44rC-django-clone-from-scratch-with-flask/)".

{% user abdurrahmaanj %}

{% youtube rkzXQOC1T0Q %}

## Talk Description

With Python, when thinking of web frameworks, two that come into mind are Django and Flask. Instead of having to choose one of the two, this session shows how you can engineer Flask to achieve a simili-Django app. It's a dive into the internal components of Django and the idea behind. The session covers different Flask development patterns to finally finish with an app that's functionally similar to Django with some extra features in for free. It also lists some caveats identified with such a pattern. This session requires attendees to know Flask and having used Django for building at least one project. At the very least it assumes the knowledge of models, views, controller, templates and migrations. It discusses along the way the educational and pedagogical aspect of learning web frameworks and proposes a syllabus. It discusses the benefits of learning Flask and the necessity of learning the two as a Pythonista. Django is the go-to framework for web development and it's no surprise that most freelancing jobs require Django. Flask is appreciated for the flexibility it gives. The session also touches about how we can better promote Flask through education. The session finishes with the hurdles identified when getting started with web development in Python, pulled from personal teaching experience.

##### Note
License: This video is licensed under the CC BY-NC-SA 3.0 license: https://creativecommons.org/licenses/by-nc-sa/3.0/
Install MySQL database on Laravel Frameworks
Tags: laravel, database, mysql, php
Published: 2020-10-04 19:30:30

##Supported database for Laravel Frameworks 
- MySQL 5.6+ (Version Policy)
- PostgreSQL 9.4+ (Version Policy)
- SQLite 3.8.8+
- SQL Server 2017+ (Version Policy)
<hr/>

## Let's Get It Started
![Eat-Sleep-Code-Repeat](https://images.unsplash.com/photo-1564865878688-9a244444042a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)_Photo by [Roman Synkevych](https://unsplash.com/@synkevych?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)_
<hr />

### How to install MySQL in Windows
- Download the [MySQL Installer](https://dev.mysql.com/downloads/installer/)
- Execute the MySQL Installer on your computer.
- Choosing a Setup Type:
![Choosing a Setup Type](https://dev-to-uploads.s3.amazonaws.com/i/nl63ilisvh6zto1be41y.png)
- Next, you must `Select Products & Features` for your computer.
- Then click `Execute` after finalizing it. All the products and features will be download and install on your computer.`
- After completing the installation, all MySQL products must be a configuration on the next screen.
- Installation Complete
![Complete](https://dev-to-uploads.s3.amazonaws.com/i/ab28sac7jnc4udzt27pn.png)
<hr/>

# Complete & Congrat: 
[Install MySQL database on Laravel Frameworks](https://dev.to/sheikhazrin/getting-started-laravel-jetstream-1k4e)
![Complete-and-Congrat](https://images.unsplash.com/photo-1594066521341-330a79387ec3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80)_Photo by [Eilis Garvey](https://unsplash.com/@eilisgarvey?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)_
<hr/>

## Next: 
[Getting Started With Laravel Jetstream(Laravel Installer)](https://dev.to/sheikhazrin/getting-started-laravel-jetstream-1k4e)
[Getting Started With Laravel Jetstream(Composer)] - _COMING SOON_