teleren/devto huggingface dataset:
Will Serverless take over control? Should we worry about?
Tags: webdev, serverless, programming, backend
Published: 2021-12-20 11:57:22

Serverless is a concept that providers taking care of servers. Thus clients don't have to worry about what's going on on backend.

**No need to reinvent backend technologies in every project. **

For example, you want to build a social media app. You should use backend technologies and create a server that runs your backend codes. You should create a database to collect datas. You should create an API to communicate with Frontend technologies. You should use analytics tools to analyze your website and so on.

To create a trustworthy websites and apps, you always have to debug your code, pay hackers to find vulnerabilities of your website. This is never gonna end. Because even the biggest companies in the world are hacked so many times. 1 semicolon could crash all of your application and could be hard to find it. If you're not a big company, you can't afford to lose time. 



![Hacking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rl1fc5cszu6kmc5m6u9.jpg)

Serverless is inevitable. Everybody writing databases, everybody using storage, everybody wants to monitor their datas, everbody want to have login, logout functionalities. But do we really have to reinvent every one of them? 

If you heard about Netlify, Vercel, Auth0, Firebase, you already know what serverless is. 

One thing that I scared about serverless is make me nervous about the internet's future. If you're an old internet user, you remember when the personal blogs are still popular. But do you remember "when", personal blogs are not popular anymore?

Creating personal blogs are become easier and easier everyday. When the Wordpress and Blogspot became so popular and conquer internet, popular blogs are started to death. So, If you increase the convenience, it decreases the value.

Even now, there's so many competition out there between developers. If so many people learning a new language, you also have to learn it. Because the market wants it. 


![It's not serverless, it's someone else's computer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7k19sdtkhotpkymrc3p.jpg)

As i said before, providers taking care of server jobs and frontend developers can just focus on their designing. They just have to communicate with backend and everything will be okay. Communicating with providers is not that much hard anyway. 

I don't know if we worry about right now. Let me know in the comments section if you have any thoughts about this.

I'm going to share the best services that i found in the internet next time. It'll be about cloud providing, functions, authentications, forms, e-commerce and so on.
qdc price list
Published: 2021-12-20 11:54:53

Qatar Distribution Company (QDC) is a major distributor of products and services to retail and commercial businesses in Qatar. [qdc price list](url=https://www.qatarloving.com/qatar-distribution-company) Founded in 2004, QDC is a subsidiary of Qatar Distribution Company (QDC) and operates through a network of branches and offices in Qatar.
Howto setup qemu-risv64-static magic for binfmt_misc on Ubuntu 20.04 Focal
Tags: howto, binfmt, riscv, ubuntu
Published: 2021-12-20 11:38:16

Today, I tried to chroot into my beagle-v chroot experiment and realized that Ubuntu has not setup the needed binfmt_misc magic to run my RISC-V 64-bit Binaries without troubles... did some googling and digging in scripts and succeeded with this:

```
echo ':qemu-riscv64:M::\x7f\x45\x4c\x46\x02\x01\x01\x00\x00\x00\x00\x00\x00\x00\x00\x00\x02\x00\xf3\x00:\xff\xff\xff\xff\xff\xff\xff\x00\xff\xff\xff\xff\xff\xff\xff\xff\xfe\xff\xff\xff:/usr/bin/qemu-riscv64-static:CF
```

Now that it works so nice, I also added it to my /etc/binfmt.d directory so that it would automatically work after next reboot too. Haven't tested yet, will do so on next reboot (which might be many weeks away, so feel free to let me know if this does not work or what ...

```
echo ':qemu-riscv64:M::\x7f\x45\x4c\x46\x02\x01\x01\x00\x00\x00\x00\x00\x00\x00\x00\x00\x02\x00\xf3\x00:\xff\xff\xff\xff\xff\xff\xff\x00\xff\xff\xff\xff\xff\xff\xff\xff\xfe\xff\xff\xff:/usr/bin/qemu-riscv64-static:CF > /etc/binfmt.d/qemu-riscv64-static.conf
```

Have fun!
Some things you should be known as a JavaScript developer
Published: 2021-12-20 11:35:42

**What to look for in a JavaScript developer**
JavaScript is the single most important programming language used in the development of contemporary software. Approximately 95% of websites use JavaScript to introduce dynamic content to their visitors. Despite the importance of JavaScript for web and mobile development, many hiring managers do not know what to look for in a JavaScript developer.

 **If-else**
If a certain condition is true then the if / else statement executes a block of code. If the condition is false, another block of code can be executed. The if / else statement is a part of JavaScript's "conditional" statement, which is used to perform different actions based on different conditions.
Example:
var number = 21;
if (number > 17) {
console.log(“condition is true”);
}else{
console.log(“condition is a false”);
}
 **null VS undefined**
Null is a blank or non-existent value in JavaScript and must be assigned. But undefined means a variable has been declared, but a value has not been defined.
Example:
let number = null;
console.log(number);
 // null
let sraboni;
console.log(sraboni);
 // undefined

**What is === in JavaScript?**
=== A strict parity is called an operator, which shows the truth if two operands have the same value without conversion. If you compare "21" with 21 using ===, it will give you a false value.

** What is == in JavaScript?**
The parity compares two objects based on the operator or "==" memory reference. So the "==" operator will return true only if it compares the references of two objects and presents the exact same object otherwise "==" will return false.

**double equal(==) VS triple equal(===)**
“==” only tests for quality parity, where “===” is a strict parity test and returns false if the values ​​or types of the two variables are different. The difference between == and === is that: == converts the variable values to the same type before performing comparison. This is called type coercion. === does not do any type conversion (coercion) and returns true only if both values and types are identical for the two variables being compared.
Autos para alquilar por internet
Tags: rentacar, tourism
Published: 2021-12-20 11:32:22

¿Estás buscando una buena web donde alquilar un coche a un buen precio? En la web de Autos para Alquilar puedo garantizarte que encontrarás todo lo que necesitas.

El alquiler de coches es un mercado sumamente competitivo, donde todos dicen ser los más baratos. Pero, ¿quién lo es realmente? No todos, ya te lo puedo decir. Son muchos los comparadores de precios que existen, sí, pero no todos cuentan con grandes acuerdos ni la gran trayectoria profesional con la que sí cuenta **Autos para Alquilar**. 

En [http://www.autosparalquilar.com](http://www.autosparalquilar.com), encontrarás los mejores precios y acuerdos para reservar un coche allá donde vayas. Y es que sí, ofrecen sus servicios a nivel mundial, por más que el foco de reservas residea en España.

Autos para Alquilar cuenta con más de 20 años de experiencia en el sector de alquiler de coches del mercado y, desde sus inicios, ha trabajado codo con codo con los mejores proveedores del sector. 

Seguro que te suenan compañías como Europcar, Goldcar, Firefly y demás, ¿no? Pues bien, estas son solo unas cuantas de las muchas empresas con las que trabajan.

En Autos para Alquilar encontrarás todo lo que necesitas.
Highlight text with HTML
Tags: webdev, beginners, html, tutorial
Published: 2021-12-18 16:51:35

**<mark>Hello Everyone</mark>** 
Today, we'll be discussing about how we can _highlight text using `html` only_. You can check it out this video for reference.

{%youtube iicwdJBO0nQ %}

The `<mark>` HTML element represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.

Let's consider a example
```html
<body>
  <p><mark>Important</mark> things to notice</p>
</body>
```

The default highlight `color` is Yellow but we can change it by using CSS.

```css
mark{
  background-color:magenta;
}
```
<mark> Note:</mark>
The `<mark>` tags can be useful but only for content that you control. If you want to let users make their own highlights, using `<mark>` can potentially break the markup.


Do you know about these html tags `<sub>` and `<sup>`. For this check the following video.

{%youtube 0s5Fre7Pj1Q%} 

[You can support my work
](https://buymeacoffee.com/devrohit)
Hacked The Hacktoberfest
Tags: hacktoberfest, beginners, opensource
Published: 2021-12-20 10:54:01

It's October, so as an Open Source Enthusiast I started contributing to Hacktoberfest. It was my first time contributing to Open source and the I was scared of doing something wrong. Eventually, I started making the process, I discovered new repositories based on my tech stack and started fixing beginner-friendly or good-first-issues. So finally I am done with my Hacktoberfest target but I did not stop contributing and that pushed me to a total of 8 total contributions. Before starting I had so many doubts like Open Source is only for Pro Developers and you have to know how to code to contribute but after this I know some things that might help you in your first open-source contributions.
1. Use Filters in GitHub to find the repository you want to contribute to and what matches your tech stack and preferences.
2. Search using labels like good-first-issue or easy if it’s your first time
3. Comment on the issue you want to work on and ask the maintainer to explain it to you, don’t be afraid to ask questions because most of the maintainers are super helpful and they will help you throughout the process of your contribution. 
4. Remember the maintainer knows you are a beginner, they don’t expect you to know everything so ask for help if you don’t what to do next
5. Learn Git properly and learn how to read large codebases. 
6. Finally, enjoy the process and don’t stop after an event, do it throughout the year. All the best and enjoy!!

P.S: Here is my Hacktoberfest DEV Community BADGE:

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rl7ryoxi8o5x9cfyw6b.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roozpxzlz6soykwb2ic1.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tln0h1cxted50ds2asny.png)
Older versions of Docker over Docker Machine
Published: 2021-12-20 10:46:58


![Docker logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2sbmxersezqhrap75y6.png)

Sometimes we may need use different versions of Docker on our machine. We may interest this functionality in order to support older versions of Docker on our developments. In my case, I needed an older version of Docker because new versions of Docker require ‘Content-Length’ header to download images from a repository(The rest is another history).

We may deploy any versions of Docker using Docker Machine just adding the '--virtualbox-boot2docker-url' parameter:

`docker-machine create -d virtualbox --virtualbox-boot2docker-url https://github.com/boot2docker/boot2docker/releases/download/v18.09.8/boot2docker.iso ics2`

I hope help anyone with this tip.
Making Games in Rust - Part 5 - Movement
Tags: rust, tutorial, programming, bevy
Published: 2021-12-20 10:40:54

The [previous part](https://dev.to/sbelzile/making-games-in-rust-part-4-jumps-2jne) was about jumps. In there, we learned how to get player inputs and convert it to a vertical movement. This time, let's leverage what we learned to move our player from left to right.

## Movement System

Let's start by adding a new system responsible for moving our player.

```rs
fn player_movement(
    keyboard_input: Res<Input<KeyCode>>,
    mut players: Query<(&Player, &mut RigidBodyVelocity)>
) {
    for (player, mut velocity) in players.iter_mut() {
        if keyboard_input.pressed(KeyCode::Left) {
            velocity.linvel = Vec2::new(-player.speed, velocity.linvel.y).into();
        }
        if keyboard_input.pressed(KeyCode::Right) {
            velocity.linvel = Vec2::new(player.speed, velocity.linvel.y).into();
        }
    }
}
```

This system listens to the left and right keys on our keyboard. When one of these keys is pressed, our system will set our player's linear velocity to + or - the player speed property in the x-axis, and set the y component of the player's velocity to, well, its current y velocity. This ensures that pressing left or right will not have the effect of stopping an ongoing jump.

For our system to work, we still need:

1. To register it:

```rs
.add_system(player_movement.system())
```

2. To add a `speed` property to our player's component:

```rs
struct Player {
    speed: f32
}
```

3. To set the speed of our player:

```rs
.insert(Player { speed: 3.5 })
```

Meanwhile, I lowered our player's `jump_impulse` to 7.

If you rung the game, you should be able to make our player move from left or right by pressing the left or right key on your keyboard.

## Going Further

Bevy supports multiple types of user input methods. We learned one way of dealing with keyboard events, but the same thing may be done with the mouse, with touchscreens and/or with gamepads.

We also learned to deal with user inputs by looking at the current state of our keyboard. There is another way of doing this: via events. It is important to know that some types of inputs are only provided as events.

You can read [Bevy's unofficial cheat book](https://bevy-cheatbook.github.io/features/input-handling.html) to learn more about the supported input methods and the ways of dealing with them.

## Following the Player with the Camera

The player can now move, but the camera will lose sight if the player goes off screen. It would be nice if the camera would follow our player as it moves. One way to do this is to declare the camera as a child of our player:

```rs
.with_children(|parent| {
    parent.spawn_bundle(new_camera_2d());
})
```

We must also remove the old camera from the `setup` system, and remove the `setup` system, now that it's empty.

This approach works, but has some caveats. We will learn about a better alternative in part 10 of this tutorial.

The final code is available [here](https://github.com/belzile/platformer/tree/part-5).
Highlights logo and Highlights cover - Cover Highlights
Tags: design, writing, android, news
Published: 2021-12-20 10:39:39

Highlight covers that are visually attractive can convince users to click through to your posts. If you are looking for a platform or app to create beautiful **[highlights logo](https://coverhighlights.com/)**, then you are at the right place. The Cover maker app contains a variety of free templates that you can use to design your custom designs quickly.
About Javascript  try-catch, spread operators, arrow function & this.
Published: 2021-12-20 10:07:15

JavaScript try and catch,

The try statement allows you to define a block of code to be tested for errors while it is being executed.
The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.
The JavaScript statements try and catch come in pairs:
try {
  Block of code to try
}
catch(err) {
  Block of code to handle errors
}



Spread Operators,

The spread operator is commonly used to make shallow copies of JS objects.
var variablename = [...value]; 
In the above syntax, … is a spread operator which will target all values in a particular variable. When … occurs in a function call or alike,it's called a spread operator. 

Arrow Function
An arrow function is a brief syntax option for writing functions in ES6. An arrow function is also known as ‘fat arrow function’ for, it uses => fat arrow indicator.

About “this”
The handling of this is also different in arrow functions compared to regular functions.
In short, with arrow functions there is no binding of this.
In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.
With arrow functions, the this keyword always represents the object that defined the arrow function.
Next Greater Element of a Linked List
Tags: java, algorithms, 100daysofcode, programming
Published: 2021-12-20 10:07:04

# [Description](https://binarysearch.com/problems/Next-Greater-Element-of-a-Linked-List/solutions/7080845)

Given a singly linked list `node`, replace every node's value with the first greater node's value to its right. If a node doesn't have a next greater node, set its value to `0`.

**Constraints:** 

- `n ≤ 100,000` where `n` is the number of nodes in `node`

## Example 1

### Input

```
node = [3, 2, 4, 5]
```

### Output

```
[4, 4, 5, 0]
```

---

## Example 2

### Input

```
node = [1, 1, 1, 1]
```

### Output

```
[0, 0, 0, 0]
```

---

# Intuition

1. reverse this linked list
2. store the number into a stack
3. compare peek with current node value
    - if smaller or equal, throw it
    - if bigger or empty, reset node's value

# Implementation

```java
import java.util.*;

/**
 * class LLNode {
 *   int val;
 *   LLNode next;
 * }
 */
class Solution {
    public LLNode solve(LLNode node) {
        Stack<Integer> maxStack = new Stack<>();
        LLNode reverse = reverse(node);
        LLNode curr = reverse;
        while (curr != null) {
            if (maxStack.isEmpty()) {
                maxStack.push(curr.val);
                curr.val = 0;

            } else {
                while (!maxStack.isEmpty() && curr.val >= maxStack.peek()) {
                    maxStack.pop();
                }
                if (maxStack.isEmpty()) {
                    maxStack.push(curr.val);
                    curr.val = 0;
                } else {
                    int firstMax = maxStack.peek();
                    maxStack.push(curr.val);
                    curr.val = firstMax;
                }
            }
            curr = curr.next;
        }
        return reverse(reverse);
    }

    private LLNode reverse(LLNode node) {
        LLNode prev = null;
        LLNode curr = node;
        LLNode next;
        while (curr != null) {
            next = curr.next;
            curr.next = prev;
            prev = curr;
            curr = next;
        }
        return prev;
    }
}
```

## Time Complexity

- Time: O(n)
- Space: O(n)
JavaScript try - catch - finally Statement
Tags: javascript, es6, asynchronus, webdev
Published: 2021-12-20 09:45:44

The try, catch and finally blocks are used to handle exceptions (a type of an error). Before you learn about them, you need to know about the types of errors in programming.

**JavaScript try...catch Statement:**
The try...catch statement is used to handle the exceptions. Its syntax is:

```
try {
    // body of try
} 
catch(error) {
    // body of catch  
}
```
The main code is inside the try block. While executing the try block, if any error occurs, it goes to the catch block. The catch block handles the errors as per the catch statements.

If no error occurs, the code inside the try block is executed and the catch block is skipped.

**JavaScript try...catch...finally Statement:**
You can also use the try...catch...finally statement to handle exceptions. The finally block executes both when the code runs successfully or if an error occurs.

The syntax of try...catch...finally block is:

```
try {
    // try_statements
} 
catch(error) {
    // catch_statements  
}
finally() {
    // codes that gets executed anyway
}
```
**Note:** You need to use catch or finally statement after try statement. Otherwise, the program will throw an error.

**JavaScript try...catch in setTimeout:**
The try...catch won't catch the exception if it happened in "timed" code, like in setTimeout(). For example:

```
try {
    setTimeout(function() {
        // error in the code
    }, 3000);
} catch (e) {
  console.log( "won't work" );
}
```
The above try...catch won't work because the engine has already left the try..catch construct and the function is executed later.

The try..catch block must be inside that function to catch an exception inside a timed function. For example,

```
setTimeout(function() {
    try {
        // error in the code
    } catch {
        console.log( "error is caught" );
    }
}, 3000);
```
You can also use the throw statement with the try...catch statement to use user-defined exceptions. For example, a certain number is divided by 0. If you want to consider Infinity as an error in the program, then you can throw a user-defined exception using the throw statement to handle that condition.
Cool Fancy Fonts - Font Changer & Font Generator
Tags: beginners, writing, android, design
Published: 2021-12-20 09:36:19

Use our Font Generator tool to generate **[cool fancy fonts](https://coolsymbolfonts.com/)** and symbols with minimum effort. Easily copy and paste 500+ font styles to make your text look attractive. Use these fonts to your Instagram captions, Facebook comments, or Twitter bios to engage more users. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb8yox4z58gzxs9pskw1.png)
Learn how to use the forEach method in JS!
Tags: javascript, tutorial, html
Published: 2021-12-20 09:23:06

Hey **fellow creators**,

The *forEach* method is really handy when you’re working with arrays or nodelists. 
It allows you to run a callback function for each element in those containers. 
Let’s learn how to use it in less than a minute!
 
If you prefer to watch the video **version**, it's right here :

{%youtube RovdEv8NHPg%}

##1. How to use it.

To use it, you need to feed it with a callback function, which can take up to three parameters. 
Those parameters are:
- The current value
- The index
- And the array/nodelist that you’re working with.

```js
const array = [1, 2, 3];

array.forEach((current, index, arr) => {
	console.log(current, index, arr);
});
```

Take a look in your console/terminal and you’ll see:
![image of console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdig7ut95o1hqyvmn4tv.png)

##2. Let’s create three buttons to have a real example.

In an HTML file, create three buttons:

```html
<button data-action="modify">Modify</button>
<button data-action="delete">Delete</button>
<button data-action="update">Update</button>
```

In your JS file, select the buttons:

```js
const buttons = document.querySelectorAll('button'); 
```
The .queryAll method returns a nodelist, and the nodelists also have access to the forEach method in their prototype.

Thus, we can use it to attach an event listener to each button :

```js
buttons.forEach(btn => {
	btn.addEventListener('click', (e) => {
		alert(e.target.getAttribute
		('data-action'))
	})
});
```

This is a basic example but you now know how useful this method is!
You can easily avoid code repetition.

Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool

*See you soon!*

Enzo.