teleren/devto huggingface dataset:
Immutable Splice in Javascript
Tags: javascript, webdev, html, css
Published: 2022-03-14 19:06:00

`Splice` by default mutates/changes/updates inputted array in Javascript. For example:

```
const test = ['angel', 'clown', 'mandarin', 'sturgeon'];
test.splice(2, 1, 'first');

console.log(test);
> ['angel', 'clown', 'first', 'sturgeon']
```
If you see in above example `splice` mutates original array.

We can create immutable splice function in Javascript.

Here we go:

```
function splice(arr, start, deleteCount, ...addItem) {
    const result = [];
    if (start > 0) {
        result.push(...arr.slice(0, start));
    }
    result.push(...addItem);
    const len = result.length - addItem.length;
    let count = deleteCount <= 0 ? len : len + deleteCount;
    if (arr[count]) {
        result.push(...arr.slice(count));
    }
    return result;
}

const test = ['angel', 'clown', 'mandarin', 'sturgeon'];

console.log(splice(test, 2, 1, 'drum'));
> ['angel', 'clown', 'drum', 'sturgeon']
console.log(test)
> ['angel', 'clown', 'mandarin', 'sturgeon']
```

`test` array in above example isn't mutated.

Welcoming suggestions/concerns. Always happy to update article for any use case.

Thank you! Happy experimenting. 

<hr style="border-width: 2px;border-color: #87CEEB;">
<h1> 💎 Love to see your response</h1>
<ol>
<li style="padding: 10px;font-size: 30px;"><b>Like</b> - You reached here means. I think, I deserve a like.  </li>
<li style="padding: 10px;font-size: 30px;"><b>Comment</b> - We can learn together. </li>
<li style="padding: 10px;font-size: 30px;"><b>Share</b> - Makes others also find this resource useful.</li>
<li style="padding: 10px;font-size: 30px;"><b>Subscribe / Follow</b> - to stay up to date with my daily articles. </li>
<li style="padding: 10px;font-size: 30px;"><b>Encourage me</b> - <a href="https://www.buymeacoffee.com/urstrulyvishwak" target="_blank">You can buy me a Coffee</a>
</ol>
<hr style="border-width: 2px;border-color: #87CEEB;">

<h2> Let's discuss further. </h2>

<ol style="padding: 20px;">
<li style="padding: 10px;font-size: 30px;">Just DM <br> <a href="https://twitter.com/messages/compose?recipient_id=1388837509824610314&text=Hello world"
class="twitter-dm-button" data-screen-name=“@urstrulyvishwak” data-size="large">@urstrulyvishwak</a>
</li>
<li style="padding: 10px;font-size: 30px;">
<p> Or mention <br> <a href="https://twitter.com/intent/tweet?screen_name=urstrulyvishwak&ref_src=twsrc^tfw" class="twitter-mention-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">@urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p> </li>
</ol>

<h2> For further updates: </h2>
<a href="https://twitter.com/urstrulyvishwak?ref_src=twsrc^tfw" class="twitter-follow-button" data-size="large" data-text="Hi, Vishwak" data-related="@urstrulyvishwak" data-show-count="false">Follow @urstrulyvishwak</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Text Battle Royale
Tags: programming, python, github
Published: 2022-03-14 18:55:56

# Text Battle Royale

---

## Introduction

In this post I'll show you the code for a text Battle Royale game in Python, which is completely based on luck.
You only need 1 file for this to work!

---

## Code
```py
import os
from time import sleep
from random import randint, choice
def clear():
    try:
        if os.name == 'posix':
            _ = os.system('clear')
        elif os.name == 'nt':
            _ = os.system('cls')
        return True
    except Exception as e:
        print(e)
        return False
print("WELCOME TO TEXT BATTLE ROYALE!!!")
start = input("Press enter to start.")
while start != "":
  start = input("Press enter to start.")
clear()
for i in range(5):
  print("Scanning island." + "." * i)
  sleep(1)
  clear()
areas_on_map = ["Cool Place", "Great Place", "Scary Place"]
landing_area = choice(areas_on_map)
input("Press enter to exit the battle bus.")
clear()
print("You are skydiving.")
input("Press enter to deploy your parachute.")
for i in range(5, 0, -1):
  clear()
  print(f"You have deployed your parachute. You are going to land in {i} seconds.")
  sleep(1)
clear()
print("You have landed on",landing_area)
sleep(3)
clear()
elimination = 0
players = 100
print("You have 1 sniper rifle with infinity ammo.")
while players>1:
  print("There are",players,"including you in the game.")
  risk = randint(1,50)
  if risk > 0 and risk < 16:
    print(f"Someone has shot you from behind. You were {players}th place.")
    exit()
  elif risk > 15 and risk < 24:
    print(f"Someone has shot you from the side. You were {players}th place.")
    exit()
  elif risk > 23 and risk < 51:
    shot = input("There is someone coming close to you. If you want to kill them, press enter.")
    if shot == "":
      print("You have killed someone.")
      players = players - 1
      elimination = elimination + 1
    else:
       print(f"Someone has shot you from behind. You were {players}th place.")
       exit()
  else:
    players = players - 1
    clear()
clear()
print("You have won!")
```

---

## Conclusion

After running the code, you will be able to play a text version of a Battle Royale game, fully based on luck!
Thanks to @dillonb07 for the clear function!
Thanks for reading! If you liked this, make sure you follow me on dev.to and [GitHub](https://github.com/VulcanWM)
Jenis dan Fungsi Aspal Hotmix
Published: 2022-03-14 18:55:16

Aspal merupakan material yang biasanya digunakan untuk pembuatan jalan raya, baik jalan di perkampungan, jalan umum maupun jalan tol atau area parkir serta pergudangan. 
Dalam dunia konstruksi jalan dikenal ada beberapa **[jenis aspal hotmix](https://urchinbistrot.com/jenis-aspal-hotmix/)** yang umumnya digunakan dalam proses pembuatan jalan aspal.
Masing-masing jenis aspal memiliki fungsi yang dibedakan berdasarkan jenis jalan yang akan dibangun.
Misalnya setiap **[kontraktor jasa pengaspalan jalan aspal hotmix terbaik](https://profil.web.id/kontraktor-jasa-pengaspalan-jalan-aspal-hotmix-terbaik/)** dalam proses untuk pembuatan jalan area perumahan tentunya akan menggunakan jenis aspal berbeda jika dibandingkan dengan pembuatan jalan raya atau jalan tol yang digunakan untuk lalu lintas yang padat dengan beban kendaraan yang berat.
Jenis aspal Hotmix dan fungsinya
Berikut ini akan dibahas tentang **`jenis dan fungsi aspal hotmix`**
1. Asphalt Treated Base atau ATB, yaitu jenis aspal yang paling umum digunakan untuk pembuatan jalan dengan ketebalan minimal 5 centi meter.
2. Asphalt Shand Sheet, yaitu jenis aspal yang biasa digelar dengan ketebalan minimal 2 centi meter dan umumnya digunakan untuk jalan dengan tingkat beban kendaraan yang ringan.
3. Asphalt Fine Grade, yakni jenis aspal yang hampir mirip dengan aspal shand sheet tetapi tingkat kekuakatannya lebih rendah dan cocok untuk jalan perkampungan/perumahan.
Asphalt Concrete Wearing Course atau ACWC, yaitu jenis aspal yang umumnya digunakan untuk jenis jalan dengan kendaraan beban berat.
4. Asphalt Concrete Binder Course atau ACBC, yaitu jenis aspal yang fungsinya hampir sama dengan ACWC.
5. Aspal Laston 3, yaitu jenis aspal yang biasa digunakan untuk jalan dengan lalu kintas sedang.
Demikian ulasan tentang jenis dan fungsi aspal hotmix, semoga bermanfaat.
Sumber: **[Jenis Aspal Hotmix](https://urchinbistrot.com/jenis-aspal-hotmix/)**
Resumo da Segunda semana da Jornada DEV
Tags: webdev, beginners, html, css
Published: 2022-03-14 18:43:16

###Primeiro os cursos:
- Modulo 2 de HTML e CSS do **curso em vídeo** - 75% 
- Introdução ao JavaScript também do **curso em vídeo** - 35% 

***

###Projetos:
- Desafio do modulo 2 - [Minha versão](https://github.com/bysunshinearts/html-css/tree/main/desafios/d010)
- Como tinha dito [aqui](https://dev.to/graciellesampaiobysunshinearts/segundo-projeto-252-hef), já tinha uma ideia do que criar, passei mais tempo do que precisava planejando, e mesmo assim estou tendo dificuldades! Com 
tudo, não desisti, nesse momento estou desenvolvendo a parte em CSS.

***

Quem quiser dá dicas ou sugestões, (estou aceitando😅).Clique [aqui](https://github.com/bysunshinearts/comfort-food), para ajudar, ou visitar o repositório!
7 Tools for MAC that can be helpful for DEVs
Tags: productivity, tooling, devjournal
Published: 2022-03-14 18:40:48

I love to search for apps that can increase my productivity, and I will show some of them here. I hope that this helps you.

> Hey, i updated this article o [my own blog, check it here](https://www.tuliocalil.com.br/post/7-tools-for-mac-that-can-be-helpful-for-de-vs)!

## [Alfred](https://www.alfredapp.com)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6ud5mhfohp8jpf3xx9b.png)

Alfred is an award-winning app for macOS which boosts your efficiency with hotkeys, keywords, text expansion and more. Search your Mac and the web, and be more productive with custom actions to control your Mac.

## [Bartender 4](https://www.macbartender.com)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrv2uk110e36y1guke5r.png)
 
Bartender is an award-winning app for macOS that superpowers your menu bar, giving you total control over your menu bar items, what's displayed, and when, with menu bar items only showing when you need them. 
Bartender improves your workflow with quick reveal, search, custom hotkeys and triggers, and lots more.

## [HyperDock](https://bahoom.com/hyperdock)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/af5d5mzipmpymkbph8xs.png)
HyperDock adds long awaited features to your Dock: Select individual application windows just by moving the mouse on a dock item, use mouse clicks to quickly open new windows and many more.

## [Proxyman](https://proxyman.io)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pklo5um27mcxtxp4lif.png)

Proxyman is a native, high-performance macOS app, which enables developers to capture, inspect, and manipulate HTTP(s) requests/responses with ease.

## [StarUML](https://staruml.io)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ayvo5toxioc3h2f6art.png)

A sophisticated software modeler for agile and concise modeling  
 
## [Hazel](https://www.noodlesoft.com)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ul4osdtobur4p3z89pxa.png)

Hazel watches whatever folders you tell it to, automatically organizing your files according to the rules you create. Have Hazel move files around based on name, date, type, what site it came from and much more. Automatically sort your movies or file your bills. Keep your files off the desktop and put them where they belong. 

## [ColorSlurp](https://colorslurp.com)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0p3qlt75qskpjsqoc7v.png)
 
ColorSlurp is the ultimate color tool for developers and designers. Pick any color on your screen using the high-precision magnifier. Create and organize palettes with advanced color editing tools. Check color contrast for perfect accessibility. Pick colors with your camera on iOS. Export, sync with iCloud, and much more!
Passwordless authentication with magic link sign in for express and react
Tags: magiclink, passwordless, authentication, react
Published: 2022-03-14 18:38:35

---
title: Passwordless authentication with magic link sign in for express and react
published: true
description: An example of authentication with a magic link sign in for the password less implementation of the user authentication with express, react, MongoDB, JWT
tags: magiclink, passwordless, authentication, react
---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7msafbssefep417gew0z.jpg)

Hi everyone. 

This is a simple example of password less authentication aka magic link sign in with express, react and JWT. 

Here is the repo for the video: https://github.com/gk3000/passwordless-magic-link-sign-in-express-react.

Enjoy, hope you will find it useful. 

Cheers!
CSS functions - Learn about CSS function 2022
Tags: html, css, javascript, webdev
Published: 2022-03-14 18:09:08

Hey, I hope you are doing great. In this article, we'll talk about CSS functions. So without wasting time let's see what are these.

#CSS Functions

CSS functions are used as a value for various CSS properties. So basically we use it to evaluate some of the CSS values. Let's see some of the functions.

**1. attr()**

This function is used to access value of the element's attributes. Let's understand it with the example.
```html
<div data-bg="black"></div>
```
```CSS
div{
    width: 100px;
    height: 100px;
    background: attr(data-bg);
}
```

You can see we have a "div" with "data-bg" a custom attribute and now I can access its value inside CSS using attr(). So, that's how you can do a lot of fun stuffs. 

So the output will be something like this.

![output](https://cdn-images-1.medium.com/max/1600/1*_5q7ePPSBjHzWFSCJAw2Yg.png)

**2. calc()**

After attr() we have calc(). As the name suggests, it helps in performing calculations for CSS values. This can be useful when we want to do precise calculation.

```HTML
<div class="box"></div>
```
```CSS
.box{
    width: calc(100px * 5 - 50px);
    height: calc(100px - 30px);
}
```

In the above code I used calc() to set div's width and height.

![output](https://cdn-images-1.medium.com/max/1600/1*Ak_RgEilNBdq8JK8lc-emg.png)

**3. max()**

Then we have max(), It takes two value and use the largest value for that CSS property. This can be useful in making responsive width and heights.

```HTML
<div class="box"></div>
```
```CSS
.box{
    width: max(50%, 500px);
    height: max(60%, 300px);
}
```

The div will have the maximum possible width and height in this case, if 50% is greater than 500px than its width will be 50% otherwise it will be 500px, same for height also.

**4. min()**

And the last but not least, we have min(), It takes two value and use the smallest value for that CSS property. This is opposite of max().

```HTML
<div class="box"></div>
```
```CSS
.box{
    width: min(50%, 500px);
    height: min(60%, 300px);
}
```

So the output of this will be exact opposite to our max(). It will set the smallest value as its width and height.

That's it. We do have some more functions but they are specific for properties. If you do have any doubt feel free to ask me in comments or you can join my [discord](https://discord.gg/HC6qKCpG2N) server. We'll talk there.
Also, if you want to master web development, make sure to follow me on my [Instagram](https://www.instagram.com/modern_web_channel/) and [YouTube](https://www.youtube.com/c/modernweb?sub_confirmation=1).

With that all. Thanks for reading 😎
Navigating faster in browser with vimium extention
Tags: vimium, browser, productivity
Published: 2022-03-14 17:54:44


![vimium extention](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tl523jvf4ppqfxbp5jy.jpg)

## Installing the extension 
You can install the extension from [here](https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb/related?hl=en) .
**Note**: Make sure that the extension is installed , also check whether extensions are blocked by site .

## Navigating the page

- use `j` to navigate downwards
- use `k` to navigate upwards
- use `gg` to navigate to top of page
- use `Shift + g` to navigate to bottom of page

## Working with tabs 

- use `Shift + k` to move to right tab.
- use `Shift + j` to move to left tab.
- use `x` to close a tab .
- use `Shift + x` to close a tab .
- use `t` to open a new tab .

## Moving in history

- use `Shift + l` to move forward in history .
- use `Shift + h` to move backward in history .

## Entering different modes 
- use `/` to enter find mode .
- use `i` to enter insert mode .

## Additional 
- use `o` to open explorer .
- use `f` to reveal all links on page .
- use `yy` to copy URL of current webpage to clipboard .
- use `r` to reload the webpage .

## Bonus 
- link to [github page](https://vimium.github.io/) for vimium extension .
- link to vimium github repository[ readme ](https://github.com/philc/vimium/blob/master/README.md) .
Need to understand the flow of the react project
Tags: react, beginners, programming, javascript
Published: 2022-03-14 17:49:12

I am new to react.js and I am struggling with how should I go about understating the flow of the react project. What will be the next step the compiler will run? If someone can help me out with brief or detailed explanation on this, that would be very helpful for me.

For example, below is the App component of one react project. 

1. So I am not understanding which line will be the first to run? 
2. What will be the flow after that? 
3. What line of code calls the below code:
`let content = (
    <p style={{ textAlign: 'center' }}>No goals found. Maybe add one?</p>
  );`
4. What line of code calls the if statement.

```
import React, { useState } from 'react';

import CourseGoalList from './components/CourseGoals/CourseGoalList/CourseGoalList';
import CourseInput from './components/CourseGoals/CourseInput/CourseInput';
import './App.css';

const App = () => {
  const [courseGoals, setCourseGoals] = useState([
    { text: 'Grocery Shopping', id: 'g1' },
    { text: 'Finish Learning React!', id: 'g2' }
  ]);

  const addGoalHandler = enteredText => {
    setCourseGoals(prevGoals => {
      const updatedGoals = [...prevGoals];
      updatedGoals.unshift({ text: enteredText, id: Math.random().toString() });
      return updatedGoals;
    });
  };

  const deleteItemHandler = goalId => {
    setCourseGoals(prevGoals => {
      const updatedGoals = prevGoals.filter(goal => goal.id !== goalId);
      return updatedGoals;
    });
  };

  let content = (
    <p style={{ textAlign: 'center' }}>No goals found. Maybe add one?</p>
  );

  if (courseGoals.length > 0) {
    content = (
      <CourseGoalList items={courseGoals} onDeleteItem={deleteItemHandler} />
    );
  }

  return (
    <div>
      <section id="goal-form">
        <CourseInput onAddGoal={addGoalHandler} />
      </section>
      <section id="goals">
        {content}
      </section>
    </div>
  );
};

export default App;
```
TERMINAL komandalari | Part 4
Tags: terminal, uzbek, beginners, programming
Published: 2022-03-14 17:42:19



1. 
-
` alias `
- Bu komanda takroriy ishlatiladigan komandalar uchun #nickname# (taxallus) beradi
- ` alias datedir='mkdir $(date "+%d-%m-%Y")' ` - ushbu komanda bugungi san bilan papka yaratadigan uzuun komandaga qisqa nom beradi
- Endi ` datedir `deyish orqali bugungi sana nomi bilan papka yaratsa bo'ladi. 
- ` alias ` komandasi bitta terminal session uchun ishlaydi holos  

2. 
-
` date `
- Bu komanda hozirgi vaqtni chop etish uchun ishlaydi
- ` date ` deb yozsa, Mon Mar 14 22:36:59 2022 formatda sanani chop etadi 
- ` date '+%d-%m-%Y' `komandasi sanani chop etishda #dd-mm-yyyy formatda chop etadi. 14-03-2022
- ` date '+%d-%m-%Y' ` komandasi 14/03/2022 ni chop etadi
| Quiz Game 💻 | TERMINAL KOMMANDALARI
Tags: terminal, beginners, uzbek, cpp
Published: 2022-03-14 16:49:10

## Qiziqarli Quiz !
Boshladik **Qiziqarli Quiz** savollari bilan tanishing!

***1.*** Terminalda bugungi sana nomi bilan *(dd-mm-yyyy)* formatida papka ochish komandasini kiriting! 

***2.*** `C++` dasturlash tilida quyidagi `using namespace std;` buyrug'ining vazifasi nima?

```cpp
using namespace std;
```

***3.*** Joriy papkadagi **main.cpp** nomli kodni kompilyatsiya qilish komandasini kiriting!

***4.*** Joriy papkadagi main.cpp nomli code ni kompilyatsiya qilgach `a.out` nomli *by default* faylni ishga tushirish kommandasini kiriting!

***5.*** Hozirgi papkadan **bitta oldingi papka**ga qaytish kommandasini kiriting!

***6.*** `$HOME` papkasiga qanday qaytiladi ?!

***7.*** Siz `$HOME` papkasida turipsiz. shu papkadan chiqmagan holda qanday qilib `Downloads` papkasi ichidagi *keraksiz.txt* faylni **o'chiradi** ?!

***8.*** Siz turgan papka ichidagi *keraksiz.txt* nomli faylning ichidagi kontentni **terminalga chop etadigan** komandani kiriting !

***9.*** Siz turgan papka **manzilini** chop etadigan kommandani kiriting !  

***10.*** Siz turgan papka ichidagi **barcha papka, fayllarni chop etadigan** kommandani kiritng!

***11.*** Siz hozir `~/Documetns` papkasi ichidasiz.Shu papka ichidagi **barcha fayl va papkalarni (yashirinlarini ham) chop etadigan** kommandani kiriting !

***12.*** Siz hozir `~/Documents` papkasidasiz.Shu papkadan chiqmasdan `~/Downloads` ichidagi barcha narsalarni **ro'yxatini chop etadigan** kommandani kiriting !

***13.***  Joriy papkadagi main.cpp faylni kompilyatsiya qilib uni **tayyor** nomli faylga **dastur sifatida saqlaydigan** kommandani kiriting !

***14.*** Terminalda bugungi sana nomi bilan *(dd-mm-yyyy)* **formatida chop etuvchi** komandani kiriting! 

***15.*** Joriy papkani **VsCode** dasturida **workspace *(ishchi maydon)* sifatida** ochadigan kommandani kiriting !

### Qiziqarli Quiz ! sizga foydali va manfaatli bo'ldi deb o'ylayman.
Disable inspect element - DevTools in your Website
Tags: devtools, javascript, html, chrome
Published: 2022-03-14 16:44:44

A Website can build with simple HTML / CSS / Javascript. When you published, all source code can see with DevTools of Browser. 

## What is DevTools?
DevTools is a great tool in the hands of developers and designers for the need to making the development process more productive and debugging easy.

With the Inspect Element on Chrome, you have more power than the traditional web users:

1. View and change the DOM
2. View and style CSS
3. Debug Javascript
4. Watch network activity
5. Show Local Storage, Session Storage,...
6. Optimize website performance
7. etc...

You can discover that the DevTools can be a serious boost to your productivity. But...


> 
With great power comes great responsibility
— Tom Precious


## Why need disable Devtools?
DevTools is powerful for Development, but is dangerous on production environment.
Anyone can see your source code, which means it's not secure. With DevTools, hacker easily inspect, edit, modify your code.


> 
I was access to admin of website by change `is_admin` variable to true

Besides, he can see when your website get API (Application Programming Interface) and steal API_KEY or exploit information.

## Solution
DevTools can't closed completely. But you can make it inaccessible. Launching DevTools in the following ways:

1. **Right-click** -> **Inspect**
2. **Ctrl + Shift + I** (DevTools shortcut)
3. **F12** (DevTools shortcut)
4. **Ctrl + Shift + J** (Open the Console panel)
5. **Ctrl + Shift + C** (Open the Elements panel)
6. **Ctrl + U** (View Source-code)

```js
// Disable right-click
document.addEventListener('contextmenu', (e) => e.preventDefault());

function ctrlShiftKey(e, keyCode) {
  return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
}

document.onkeydown = (e) => {
  // Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
  if (
    event.keyCode === 123 ||
    ctrlShiftKey(e, 'I') ||
    ctrlShiftKey(e, 'J') ||
    ctrlShiftKey(e, 'C') ||
    (e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
  )
    return false;
};
```
Check out from this [Github](https://github.com/DungGramer/disable-devtool) code.