teleren/devto huggingface dataset:
Bootstrap - Introduction
Tags: webdev, beginners, tutorial, css
Published: 2022-01-13 15:55:21

This is the first part of the series on Bootstrap for beginners. In this part, we will learn about the bootstrap and its installation.

## What is Bootstrap?
It is the most popular front-end framework, used for building responsive web applications.

## Why use Bootstrap?

- Increase speed
- Assure responsiveness
- Prevent repetition between projects
- Add consistency
- Ensure cross-browser compatibility
- Large community
- Customizable

## Starting with Bootstrap
Using bootstrap in a project is pretty easy, one just has to paste the links of CSS spreadsheet JS plugins like this. 

**Method 1**: By using npm

 Or you can use `npm install bootstrap` and link `node_modules/bootstrap/dist/css/bootstrap.css` inside head tag and `node_module/bootstrap/dist/js/bootstrap.bundle.js` inside script tag in your HTML file.

**Method 2:** By downloading
We have to download the code from the below website and link that CSS spreadsheet and js plugins in our HTML file like we do with our CSS and javascript code file.
[Downloading link](https://getbootstrap.com/docs/5.1/getting-started/download/)

**Method 3:** By using Links
Links are present in the above bootstrap documentation link.

## Example
Below is the code which is the basic example to check if bootstrap is working or not.

```
<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <title>Starting with Bootstrap</title>
</head>
<body>
     <h1>Started with Bootstrap</h1>

     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

</body>
</html>
```
The web page will have a different font style, which is the default font style in bootstrap.

![web page of the above code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mpkd4m7b0yto068uom7a.png)

In the next part, we will go through the grid system, buttons, cards, icons, forms, etc.
How to create ReactApp .
Tags: npm, react, node
Published: 2022-01-13 15:45:56

so first you need to install a node.js to your PC.
second open Command promant and write this commands:
```
$ npm install -g npx
$ npx --v
$ npx create-react-app myreact
$ cd myreact
```
Now you have your own reactapp.

have a good work and good day .
thanks for your support.
simple pendulum  javascript canvas | oop | physics
Tags: javascript, tutorial, beginners, programming
Published: 2022-01-13 15:37:37

simple pendulum  javascript canvas | oop | physics
https://youtu.be/9W1r-chLSRc

if you are a lover of physics or may be if you just studied how a pedulum works  in the pass and wanted to refrech your memory this video is the right place for you ! 🔥🚀
a simple pendulum is a  ponctual body tied on a specific carrier  with a string with an ignored mass 
we will be implementing it using vanilla javascript and html canvas api

links:
github link: https://github.com/shAtud
instagram: https://www.instagram.com/sh_atud/
1 line of code: How to convert \newlines to <breaks />
Tags: javascript, webdev, product, codequality
Published: 2022-01-13 15:36:44

```javascript
const nl2br = (str) => str.replace(/\r?\n/g, "<br />");
```

Returns the string, all newlines (`\r\n`) are replaced with XHTML-breaks `<br />`.

---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---
Revealing Why Flutter App Development is Becoming More Popular
Tags: flutter
Published: 2022-01-13 15:34:52

Over the past three years, Flutter has steadily gone from a new kid on the block to the most popular and versatile toolkit for multi-platform development. Google-backed technology is developing and more young professionals are making their choice in favor of Flutter. In our article, we explain the reasons for this state of affairs and talk about what tasks Flutter is truly indispensable for. [](https://codeit.us/blog/flutter-app-development)
MongoDB Submission Post Trader Chart
Tags: atlashackathon
Published: 2022-01-13 15:33:49


### Overview of My Submission
This is a charting software for doing technical analysis on the Forex, Crypto and Stock market etc. It comes with Trend indicators like the Moving Average, Bollinger Band, Ichimoku Kinkō Hyō. It also comes with oscillators like the Relative strength index, Moving Average Convergence Divergence and Average True Range.

### Submission Category: 

Prime Time: Stock Analysis




{% github https://github.com/Joshuajee/Trader-Chart %}




[Click Here](https://trader-chart.herokuapp.com/) to view the app

### Additional Resources / Info

All data stored in MongoDB Atlas `Timeseries` collection for storing the data for each asset.

#### Built With


* [React.js](https://reactjs.org/)
* [Mongodb](https://www.mongodb.com/)
* [Nodejs](https://nodejs.org/)
* [Express](https://expressjs.com/)
* [Victory Chart](https://formidable.com/open-source/victory/)

#### DEMO

{% youtube w-agp1JobQU %}

[Click Here](https://trader-chart.herokuapp.com/) for Live Demo


![EURUSD CHART](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vepta02a3pc0urd9jckz.png)

![Indicator Modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46t5eac6kjj1yqd9tu7s.png)

![Ichimoku Modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yim6vvlxl2dmj14b9y0s.png)

![Color Picker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0emn3t170jvvocwfxpsv.png)

![IChimoku Cloud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mglknv8z59f28mutt7az.png)

![Oscilators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/158hkpcucrquwf0w07l3.png)

![Bollinger Band and Average True Range](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5bcyv79jgj9tzvq5vjd.png)
HTML5 Semantic Elements.
Published: 2022-01-13 15:15:00

### Introduction

When writing Html, we are most familiar with using tags such as `<div>, <h1>, <p>` to wrap around the contents of a web page. These tags get the job done and are still very much in use. Why then do we use semantic elements?

This article will help you better understand the html5 semantic elements, why it is essential to use them in building modern-day websites, and how to use them. So, ensure to read till the end.

- What are Html5 semantic elements?

- Some of the most used semantic tags.

- Why use html5 semantic elements?.

- Summary.

### What are Html5 semantic elements?

Html5 semantic elements are tags that clearly describe the different parts of a web page. They state the literal meaning of a particular part of the web page to the browser to understand the best way to render them on the pages. To further explain semantic elements, below are two tags:

-  `<div id = footer>This is a non-semantic tag </div>`
-  `<footer> This is a semantic tag </footer>`

Both tags above describe the footer of a web page, but one is more literal than the other. The formal might require some styling for the page to render adequately; the browser already knows how to generate the latter.

### Some of the most used semantic elements.
Here are some commonly used semantic tags 

- `<header></header>` : This defines the header of a webpage.

- `<nav></nav>` : This defines the  navigation and links of a web page.

- `<main></main>` : This defines the main section of a web page, other semantic elements can be contained in the `<main><\main>` element.

- `<section></section>` : This defines a specific section of a webpage. For example, it could describe a person or be used to display a person's work.

- `<aside></aside>`:This defines content aside from the main content of a webpage.

- `<figure></figure>`: This defines contents such as images, illustration, code blocks etc.

- `<figcaption></figcaption>`:This gives a detailed description of a figure.

- `<summary></summary>`:This summarizes a web content.

- `<table></table>`: This defines table content. Table contents are in a tabular form of rows and columns with a table head.

- `<audio></audio>`: This defines audio files such as music.

- `<footer></footer>`: This defines the footer of a web page or the last section of a web page as the name implies. It can also display links to some other website pages or an external file.

Below is a pictorial representation of how the browser renders the tags.

![html5 semantics (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640863014422/FVEa40NqRu.png)

### Why use html5 semantic elements?

- HTML5 semantic elements help structure our code to make them more readable and easy to maintain.
- They help improve the accessibility of our web pages.
- When codes become complex, developers might find it challenging to understand what they have written. The use of html5 semantics makes it relatively easier to fully grasp what each part of the web page stands for.

### Summary

As a newbie, it is best to try as much as possible to use  HTML5 semantics where necessary instead of divs.
Many to Many relationships In SQLAlchemy
Tags: python, programming, sqlalchemy
Published: 2022-01-13 15:14:20

{% youtube 3IDiEC0ZwPg %}


In this video, I talk about many to many relationships in SQLAlchemy. 

When numerous records in one table are linked to several records in another table, this is known as a many-to-many relationship.
Customers and products, for example, have a many-to-many relationship: customers can buy a variety of things, and products can be bought by a large number of customers. 

In this video, I use that example to explain how many to many relationships are created in SQLAlchemy. I also demonstrate how to configure delete behavior with many to many relationships.
What is Temporal Dead Zone in JavaScript?
Tags: javascript, node
Published: 2022-01-13 15:13:09

**Temporal Dead Zone** is a term that describes the position where variables are unreachable;

Here, 
- **Temporal** means, temporary
- **Dead** means, not in a working state
- **Zone** means, the area where data is stored

The variables `let` and `const` exists in **Temporal Dead Zone**

TL;DR **Temporal Dead Zone(TDZ)** ends as soon as the respective variable is called.

```js
/* 
	Temporal Dead Zone for the name variable
*/
const name = "SnowBit" // Haha, TDZ just ended 
console.log(name)
```

### Why was **Temporal Dead Zone(TDZ)** created?
```js
//Temporal Dead Zone for the name variable
//Temporal Dead Zone for the name variable
//Temporal Dead Zone for the name variable
console.log(name) // Huh, I am in Temporal Dead Zone, let's get out of it
//Temporal Dead Zone for the name variable
//Temporal Dead Zone for the name variable
const name = "SnowBit" // Haha, TDZ just ended 
```
As you can see, the `name` variable is declared in **TDZ** and will show `error`
![tdz error.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1642086088968/ZaFj-8LvT.png)


***
Thank you for reading, have a nice day!

![Have a nice day.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1642086620246/trLPKY6le.png)
- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
My web dev journey with Scrimba
Tags: javascript, html, css, webdev
Published: 2022-01-13 08:20:15

I am so glad because I finished "Learn JavaScript for free" course on [scrimba.com](https://scrimba.com) today. I had learned little bit of programming in my college using MATLAB to make graphs and do calculations but I was not intereted in programming back then because it was so diffucult. 

Now almost ten years have past since I graduated college, I am a diffrent person now. I started to get interested in programming languages. First I wanted to make a games instead of playing. I used to play lots of games but now I find no fun in them. It is much more fun making them. I have only followed some tutorials on youtube and I really wanted to get myself on the journy of becoming a web developer or programmer. I tried some tutorials like 'make games using javascript or python and pygame' but it was really difficult so I searched for basic tutorial for javascript but many of them were so boring. I was dozing off watching tutorial videos then I bumped into this amazing video where it let me write the code as I am watching the video. It was Scrimba. The full javascript basic course was free and it was 8 hours long content. It took me 4days to finish them. I would like to do few challenges again because I forget easily. Anyways what I really like about this program is that it let me write a code instead of just laying down the information. 
Also I learned every basic things while I am making cool pratical stuff like people counting program, blackjack games, chrome extension. 

My next step is taking "The Front-End Developer Career Path" on scrimba starting from the very begining go over html and css to fill up the holes in my memory. I am really thankful for scrimba and for Per Harald Borgen who was an amazing instructor.
Mongo employee search application
Tags: atlashackathon
Published: 2022-01-13 14:43:01

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


### Overview of My Submission
[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.)
This is a basic web application used of filter out data of various working professionals in different companies

## one can filter out data
- based on ratings
- based on company
- based on category
- based on at work
- based on left home
- based on salary


### Submission Category: 

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


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


### Additional Resources / Info


##dependencies
- [Express js](https://expressjs.com/)
- [Node js](https://nodejs.dev/)
- [hbs] (https://handlebarsjs.com/)
- [Mongoose] (https://mongoosejs.com/)

## Application demo 
[demo](https://mongodb-hackathon.herokuapp.com/)



![sort by rating](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vpcgaiusejk02ze440f.png
)
Form Builder for TailwindCss available on ActionForms.io for FREE
Tags: tailwindcss, webdev, html, productivity
Published: 2022-01-13 14:34:15

🎊 Introducing 🎊
**Form Builder Tailwindcss**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0yo5s77ixy4l0cas6b2.gif)
­
­
**Yeah. It's FREE** 

It's still in Beta, and you can suggest more inputs and components and we'll add it to the builder.

We'll be updating the builder and adding more inputs, components or other features, so, be patient.

Feel free to share on social networks and write some feedback if you want on our discord server.

­
­

 💬 Join our Discord fam here: https://discord.gg/fqttDDNF3k

Ask any questions, suggestions or what you want!

 

­
[Try it now HERE!](https://www.actionforms.io/form-builder-tailwind-generator)

­
Why You Fail at Debugging
Tags: javascript, react, beginners, productivity
Published: 2022-01-13 14:22:35


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sxzhrdp76j4z2b11li2.jpg)
So you run into a bug that says _“Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit.”_

Yes, this is total gibberish, like many of those messages are (at your experience level).

## So how do you approach it?


### Let’s start with what you DON’T DO!
1. You don’t immediately copy-paste to google and hope to god the first result will solve your problem.
2. You don’t delete the whole chunk of code that causes the error and try an entirely different solution. You will NEVER learn anything by avoiding what you did wrong.
3. You don’t give up in despair thinking you will never get the hang of it (I know it may sound obvious, but it is also not obvious at all).


## So what do you do then?
### 1. You try to read the actual message.
I’m always surprised how many people don’t give a second thought to the actual content of the message. Some won’t make any sense, but some might if you try to figure them out.



### 2. Identify the source of the error, the exact function/expression that failed.
This is easy in many cases as the message points you to the line and character number that generated the error.

2.1. If you can’t find the direct source, try replacing very small chunks of code (function calls, short expressions) until the error goes away. Just to figure out what is the source.



### 3. Now that you have some context, try to think, what is not working in this step.
Take a piece of paper and write down what you expect this line to do, and then compare it to what actually happens.

The less experienced you are, the more granular details you have to now down to, because there can be more options for mistakes. Wrong syntax, variable type confusion, wrong parameters, and many more.



### 4. The previous step will cover 90% of cases, but if you are still at loss, you can use google.
The more detailed your question is the higher the chance you will find the relevant solution. So by fully understanding the context in #3 you can formulate a good question now.

It should look something like “why does doing X in the context if Y doesn’t work and give me the error Z”.



Hope this helps.

The last part about asking questions deserver a post on its own another time.

This is a small part of the approach I teach in my coding mentorship.

You are welcome to have a free consultation with me here [https://calendly.com/ilya-dorman/student-consultation](https://calendly.com/ilya-dorman/student-consultation)
148. Sort List
Tags: 100daysofcode, java, algorithms, programming
Published: 2022-01-13 14:16:13

# [Description](https://leetcode.com/problems/sort-list/)

Given the `head` of a linked list, return *the list after sorting it in **ascending order***.

## Example 1:


```
Input: head = [4,2,1,3]
Output: [1,2,3,4]
```

## Example 2:


```
Input: head = [-1,5,3,4,0]
Output: [-1,0,3,4,5]
```

## Example 3:

```
Input: head = []
Output: []
```

## Constraints:

- The number of nodes in the list is in the range `[0, 5 * 104]`.
- `105 <= Node.val <= 105`

---

# Solutions

## Solution 1

### Intuition

This is a good question
1. you need to find the mid of list, and split it to two lists
2. you need to merge these above lists.

We have a template for merge sort below.

```java
private int[] temp = new int[5_0000];
private void mergeSort(int[] nums, int l, int r) {
    if (l >= r) {
        return;
    }
    int mid = l + r >> 1;
    mergeSort(nums, l, mid);
    mergeSort(nums, mid + 1, r);
    int k = 0, i = l, j = mid + 1;
    while (i <= mid && j <= r) {
        if (nums[i] < nums[j]) {
            temp[k++] = nums[i++];
        } else {
            temp[k++] = nums[j++];
        }
    }
    while (i <= mid) {
        temp[k++] = nums[i++];
    }
    while (j <= r) {
        temp[k++] = nums[j++];
    }
    for (i = l, j = 0; i <= r; i++, j++) {
        nums[i] = temp[j];
    }
}
```

### Code

```java
class Solution {
    public ListNode sortList(ListNode head) {
        if (head == null || head.next == null) {
            return head;
        }
        ListNode[] halfSplits = split(head);
        ListNode l = sortList(halfSplits[0]);
        ListNode r = sortList(halfSplits[1]);
        return merge(l, r);
    }

    private ListNode[] split(ListNode head) {
        ListNode prev = null, slow = head, fast = head;
        while (fast != null && fast.next != null) {
            prev = slow;
            slow = slow.next;
            fast = fast.next.next;
        }
        ListNode mid = slow;
        prev.next = null;
        return new ListNode[] { head, mid };
    }

    private ListNode merge(ListNode l, ListNode r) {
        ListNode dummy = new ListNode();
        ListNode head = dummy;
        while (l != null && r != null) {
            if (l.val < r.val) {
                head.next = l;
                l = l.next;
            } else {
                head.next = r;
                r = r.next;
            }
            head = head.next;
        }
        if (l != null) {
            head.next = l;
        }
        if (r != null) {
            head.next = r;
        }
        return dummy.next;
    }
}
```

### Complexity

- Time: O(nlogn)
- Space: O(1)

---