teleren/devto huggingface dataset:
Remove Null Values From Array in JavaScript
Tags: javascript, webdev, beginners, codenewbie
Published: 2022-09-17 10:22:36

Here’s how you can remove null values from an array in JavaScript. I will show you two methods, the first one with pure JavaScript and the array filter method and the second one with Lodash.

## Remove Null Values from Array With Pure JavaScript

I recommend this method over the one with Lodash because you don’t have to use an external library. All you have to do is use the `Array.prototype.filter()` implemented in JavaScript. This built-in method creates a [shallow copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy) of your array based on the filter condition you provide.

Here’s how it’s working:

```javascript
const whatIsLife = ["Life", "is", null, "beautiful", null, "!"]

const thisIsLife = whatIsLife.filter(element => element !== null)

console.log(thisIsLife)
// Output: ["Life", "is", "beautiful", "!"]
```

As you can see above, our `whatIsLife` array contains `null` values. By using the filter method, we specify that we want to keep only elements that are different than `null` (yes, because life is beautiful!).

If you print the new `thisIsLife` array, you'll have an array with non-null values.

Here’s a shortened version of the above example:

```javascript
const whatIsLife = ["Life", "is", null, "beautiful", null, "!"]

// Returning `element` will only return values if they
// are non-null
const thisIsLife = whatIsLife.filter(element => element)

console.log(thisIsLife)
// Output: ["Life", "is", "beautiful", "!"]
```

## With Lodash

Even if I recommend the first method, it’s always interesting to discover other ways of removing null values from an array. This time, let’s learn how to do it with [Lodash](https://www.npmjs.com/package/lodash), a JavaScript library.

You’ll notice the syntax will differ a little, but the function we’ll use is the same as the one built-in in JavaScript. Indeed, the Lodash function is called `filter`.

It’s time for an example!

```javascript
import _ from "lodash"

const whatIsLife = ["Life", "is", null, "beautiful", null, "!"]

const thisIsLife = _.filter(whatIsLife, (element) => element !== null)

console.log(thisIsLife)
// Output: ["Life", "is", "beautiful", "!"]
```

Now you know how to remove null values in a JavaScript array, you can learn how to [remove an element from an array](https://herewecode.io/blog/remove-element-array-javascript/).

---

**Thanks for reading. Let's connect!**

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. [Join me on Twitter for more.](https://twitter.com/gaelgthomas) 🚀🎒
Most useful Font for JavaScript
Tags: javascript, font, arrow
Published: 2022-09-17 10:12:24

Recently I saw a tutorial and the visualisation of the arrow symbols in the source and ask myself: Where can I get this font?

The solution is quite simple. Visit [FiraCode](https://github.com/tonsky/FiraCode) and you are almost there.

What's the use? Here an excerpt from the README

---

Problem
Programmers use a lot of symbols, often encoded with several characters. For the human brain, sequences like ->, <= or := are single logical tokens, even if they take two or three characters on the screen. Your eye spends a non-zero amount of energy to scan, parse and join multiple characters into a single logical one. Ideally, all programming languages should be designed with full-fledged Unicode symbols for operators, but that’s not the case yet.

Solution
Fira Code is a free monospaced font containing ligatures for common programming multi-character combinations. This is just a font rendering feature: underlying code remains ASCII-compatible. This helps to read and understand code faster. For some frequent sequences like .. or //, ligatures allow us to correct spacing.

[FiraCode](https://github.com/tonsky/FiraCode)

---
How to Install the latest version of Docker Compose on Alpine Linux(in 2022)
Published: 2022-09-17 10:09:06


Docker Compose V2 is the latest Compose version that went GA early this year during April 26, 2022. Compose V2 is the standard across all documentation, and Compose V2 will become the developer default on Docker Desktop. However, you can continue aliasing docker-compose to docker compose and opt-out of V2 via the Docker Desktop UI — or by entering the docker-compose disable-v2 command.

## What if I use Linux?

Docker Desktop for Linux is now in beta and includes Compose V2. Alternatively, you can manually install Docker Compose V2 for Linux. In Moby v20.10.13, we’ve included compose-plugin as an optional Docker CLI plugin for easier installation. Check out our documentation for more information.

Compose V2 offers all of Compose V1’s functionality to help you efficiently run your multi-container applications. The transition to Go was one of our most liked roadmap items and has enabled us to deliver more features at a faster rate. These are now integrated into the Docker CLI, creating a seamless user experience across Docker’s tools. Read more about key features introduced in V2.


## Step 1. Open the APK repository configuration file:

```
vi /etc/apk/repositories
```
## Step 2. Add the following two lines:

```
#/media/cdrom/apks
http://ftp.halifax.rwth-aachen.de/alpine/v3.16/main
http://ftp.halifax.rwth-aachen.de/alpine/v3.16/community
```
## Step 3. Update the Repo

```
apk update
```

## Step 4. Install Docker and Docker Compose

```
apk add docker docker-cli-compose
```

## Step 5. Verify the Docker and Docker Compose version

```
$ docker version
Client:
 Version:           20.10.17
 API version:       1.41
 Go version:        go1.17.11
 Git commit:        100c701
 Built:             Mon Jun  6 22:56:42 2022
 OS/Arch:           linux/amd64
 Context:           default
 Experimental:      true

Server: Docker Engine - Community
 Engine:
  Version:          20.10.17
  API version:      1.41 (minimum version 1.12)
  Go version:       go1.17.11
  Git commit:       a89b842
  Built:            Mon Jun  6 23:01:45 2022
  OS/Arch:          linux/amd64
  Experimental:     true
 containerd:
  Version:          v1.6.6
  GitCommit:        10c12954828e7c7c9b6e0ea9b0c02b01407d3ae1
 runc:
  Version:          1.1.2
  GitCommit:        v1.1.2-0-ga916309f
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0
```

## Step 6: Verify Docker Compose Version

```
$ docker compose version
Docker Compose version v2.6.1
```

## Getting Help

Have a question about Docker Compose? Search the Docker Forum Docker Compose tag for answers, or post a question in our [Docker Community Forum](https://forums.docker.com).
How to delete all keys and everything in Redis
Tags: redis, webdev, tutorial
Published: 2022-09-17 10:06:29

Sometimes we all need a new start - and this goes for Redis too. There are many situations where you will want to entirely wipe all data from Redis. Fortunately, it's easy to wipe your Redis cache. **First**, make sure you have `redis-cli` installed on your computer. [You can do this by installing Redis, which you can learn about here](https://fjolt.com/article/redis-how-to-install).

After that, it's only one command to delete all the data in your Redis cache. **Note**: this will delete **EVERYTHING** - so make sure you know what you're doing before you run this command in terminal:
```
redis-cli flushall
```

This will delete **all** databases and **all** keys. If you only want to delete all keys from the current database, you can run the following command:
```
redis-cli flushdb
```

If you're unsure what database you're in, you probably only have the one database - however, Redis lets us switch between databases using the following command, where `index` is the index of the database you want to select. By default, Redis has 16 databases, with each having a particular index numbered from `0` to `15`.
```
redis-cli
select <index>
```
Information hover button - Tutorial
Tags: css, webdev, tutorial, html
Published: 2022-09-17 09:48:22

![Information button image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s3m4uft5yx1d1aow6v8.png)

## <u>HTML</u>
For HTML we have a button with two spans inside, "i" and "nfo". "Nfo" will be displayed on button hover.

```html
<button>
    <span>i</span>
    <span class="nfo">NFO</span>
</button>
```

## <u>CSS</u>
For CSS, first we'll style the button.

We'll set some colors, remove border, width and height to 30px with border radius to 15px will create a circle.

Using flexbox, we'll position elements in center and add transition so that hover effect, which we'll ad later, is nice and smooth.

```css
button {
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: rgb(255, 128, 0);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
}
```
      
To "nfo" class, we'll set width and opacity to zero and transition to 300 milliseconds.

```css
.nfo {
    width: 0px;
    transition: .3s;
    opacity: 0;
}
```
      
On button hover, we'll select the "nfo" class and set width to 20px, opacity back to 1 and, of course, the transition , so that this width change is smooth.

```css
button:hover .nfo {
    width: 20px;
    transition: .3s;
    opacity: 1;
}
```
      
Lastly, the button element on hover, we'll just increase width and set transition.

```css
button:hover {
    width: 80px;
    transition: .3s;
}
```
      
And that is it.

Thanks for reading. ❤️

You can find full code with video tutorial [here](https://designyff.com/code/info_button).
VFS: Cannot open root device - Dell Workstation bug workaround
Published: 2022-09-17 09:40:29

# Problem
Some Dell Presision workstations like T3600 cannot boot kernel when `initrd` image file is bigger than 123MB (caused by the size of DKMS modules like `nvidia`):
```
VFS: Cannot open root device: "UUID="XXX" or unknown-block(0,0): error -6
```
# Workaround
1. Boot different kernel and check if `initrd` image file is too big: 
`ll /boot/initrd.img-*`
2. Edit `/etc/initramfs-tools/initramfs.conf`.
Set `MODULES=dep` (instead of `most`) and `COMPRESS=xz` (instead of `zstd`).
3. Check new `initrd` image size: 
`ll /boot/initrd.img-*`.
4. Update `initramfs`:
`sudo update-initramfs -u -k X.XX.X-XX-generic` (replace kernel version number)
About Me
Tags: 100daysofcode, javascript, webdev, codenewbie
Published: 2022-09-17 09:37:08

## 👋 Hi, I’m Anthony 
I am a mathematics teacher studying to be a front-end web developer. I'm interested in designing web applications to make the web a fun, safe, and accessible place for everyone. I'm open to mentoring, collaborations, and employment opportunities. I blog about my tech and career transition journey at [Anthony's Techie Thoughts](https://ananfito.hashnode.dev/). Thanks for stopping by. Happy coding!

### 🎯 My Progress: 
- 📖 Currently studying JavaScript, but I have experience with data analytics, Python, R, and HTML/CSS
- 🤝 Looking to connect with others to learn and grow as a developer
- 💻 You can view my projects & certifications on [my portfolio site](https://ananfito.github.io/)

### 🔗 How to connect with me:
 - [GitHub](https://github.com/ananfito)
 - [Twitter](https://twitter.com/wordsbyfifi/)
 - [LinkedIn](http://www.linkedin.com/in/anthonynanfito/)
Open Google Colab Notebook (.ipynb) from GitHub
Tags: tips, tricks, jupyter, python
Published: 2022-09-17 09:30:11

Open a notebook(.ipynb) directly google Colab from Github repo just changing one tiny thing 👌- 

Open any .ipynb file in github 

![fake_news_detection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rv4pdlv3l1wgnexph06r.png)

Current URL

![fake_news_detection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rro025bnjg3ml0zrv57p.png)

change it to

![fake_news_detection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ibcyh04uzk88odoa4rt.png)

`githubtocolab` will redirect to google colab 😱.

![fake_news_detection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wh2pvhjogfftdxhiaaka.png)


Happy coding 💕
How to Get All Links From a Website(With Python)
Tags: webdev, python, tutorial, beginners
Published: 2022-09-17 09:16:26

Let's say that you would like to get all the URLs' from the dev.to homepage, how would you achieve that? Today, we'll be using python to extract every link from dev.to homepage.

## Step 1: Install Pip3
**If you have pip3 already installed, feel free to skip this part.**

To check if you have installed pip3, open up command prompt for windows, unix command shell for linux or terminal for mac. After that, run the following command.

pip3 -v

If it returns with something that looks like this you are good to go:

```
Usage:

C:\Python38\python.exe -m pip <command> [options]

Commands:

  install      Install packages.

  download                    Download packages.

  uninstall                   Uninstall packages.

  freeze                      Output installed packages in requirements format.

  list                        List installed packages.

  show                        Show information about installed packages.

  ...
```
Otherwise, read this guide to install pip3:
[pip3 installation instructions](https://www.activestate.com/resources/quick-reads/how-to-install-and-use-pip3/)


## Step 2: Install Dependencies
**If you already have requests and bs4 installed, feel free to skip this step**, otherwise, open command prompt(Terminal on mac) and run the following commands.

`pip3 install bs4`
`pip3 install requests`

## Step 3: Coding
Open your IDE of choice, I'll be using Visual studio code, which you can download below:
[Visual studio code download](https://code.visualstudio.com/)

Now create a folder anywhere on your laptop, open the folder on your IDE(file>open folder on vscode), then create a file in the folder. Name the file **scrape.py**. 

After that, paste this bunch of code into the python file.

```
import requests
from bs4 import BeautifulSoup
def listToString(s):
 
    # initialize an empty string
    str1 = ""
 
    # traverse in the string
    for ele in s:
        str1 += ele+'\n'
 
    # return string
    return str1
links = []
url = "https://dev.to"
website = requests.get(url)
website_text = website.text
soup = BeautifulSoup(website_text)

for link in soup.find_all('a'):
    links.append(link.get('href'))
number = 0
for link in links:
    print(link)

print(len(links))
```

Basically, you are using requests to get the html document from the url you provided, then you are getting all the anchor tags(links) from the website and printing them out.

Now if you **run the file**(run>start debugging on vs code) you should see quite a few links being printed out, followed by the total number of links included.

![Results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snwzyw93g7zhvqxco11t.png)

## Conclusion
I hope this worked for you, It took me a bit of trial and error to get this working, please comment below if it did not work for you, I'll be in touch ASAP.

Anyway, thanks a lot and have a good day.
Getting Started with React
Tags: react, javascript, node, frontend
Published: 2022-09-17 09:14:55

Hello, getting started with learning ReactJS has helped me to see the power of independent, reusable components in coding. This straightforward yet simple article will definitely excite you in getting started also!

ReactJS is a toolkit for building user interface which was first deployed by Facebook in 2011. It helps developers to build complex user interfaces using components.

Technically, react is **a user interface library**; it  serves the purpose of organizing HTML elements into **components** (It is imperative to add here that you should have a prior knowledge of HTML in order to work well with reactJS), even though it's a lot more like a front-end framework.

What make react unique and powerful are the components. React allows you to build a complex user interface with simple components. 

**Components are the pieces of a user interface.** For example, take a look at this interface:

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


 It can be broken into Navs (search & play) and Album lists. Each of these sections will be placed in different individual component which ultimately makes up a react app.

The search nav reflects:

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

The play nav reflects:

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

And the album lists reflect:

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

For implementation
A react component is implemented as a **JavaScript class** which has **state** and **render.**

For example

```
class song { 
            state = {};
            render() {

            }
}
```
The state will hold the data we want to display when the component is rendered. The render is for describing what the user interface looks like, the output of the render is a react element.

In summary, react is a powerful in making building complex user interfaces a lot easier for you, that's why it has definitely grown popular and that's why you should learn it as well!


See you soon as we further dive into react.
360 Degree View - HTML5 and JS
Published: 2022-09-17 09:06:49


!["360 degree view html"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tu3ipj22ia98vedlgdxc.gif)

I tried to make 360 degree view. Here is the code:

```javascript
<!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">
    <title>360 Degree View</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        img {
            width: 100%;
        }

        .container {
            width: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="carContainer" class="container">
    </div>

    <script>
        const carContainer = document.getElementById('carContainer');
        // Car 360 degree view consists 24 images.
        const IMAGE_COUNT = 24;
        const images = [];
        // Mousedown
        var hold = false;
        // Mouse X position relative to the container div
        var posX = 0;

        createImages();
        fillContainerWithImages();

        // Create 24 images and push to images array
        // All the images except one should be invisible
        function createImages() {
            for (let i=0; i<IMAGE_COUNT; i++) {
                const img = document.createElement('img');
                img.src = `img/${i + 1}.webp`;
                img.alt = '';
                img.draggable = false;

                if (i > 0)
                    img.style.display = 'none';

                images.push(img);
            }
        }        

        function fillContainerWithImages() {
            images.forEach(i => carContainer.appendChild(i));
        }

        carContainer.addEventListener('mousedown', function(event) {
            hold = true;
        });

        carContainer.addEventListener('mouseup', function(event) {
            hold = false;
        });

        carContainer.addEventListener('mousemove', function(event) {
            if (hold) {
                // Mouse x position on container
                posX = Math.abs(
                       (document.body.clientWidth - carContainer.getBoundingClientRect().width)
                       / 2 - event.clientX);
                // Container width / 24
                const piece = carContainer.getBoundingClientRect().width / IMAGE_COUNT;
                // Make invisible all images
                images.forEach(i => i.style.display = 'none');
                // Make visible one image
                images[Math.floor(posX / piece)].style.display = 'block';
            }
        });
    </script>
</body>
</html>
```
Async and Await #JS mordern concept.
Tags: javascript, react, node, beginners
Published: 2022-09-17 08:42:50

**Async** and **Await** enteres in to handle complexity of **Promises**.
Which is a **call back of hell** problem, to make it look like synchronous but it's act asynchronous and non-blocking behind the scenes.

```javascript
const myFunction = () => { return 'Test'; } // Normal function
const myAsyncFunction = async () => {return 'Test'; } //Async function which will return a Promise now.
```

As in above now we can create a Promise like function just by adding **async** in front of **()**.

We now want a function to wait till it's child function to finish it's execution.

Take a look at below example.

```javascript
function FirstFunction(){
   setTimeout(function(){console.log('execution line we want to execute first and want to wait till 5 seconds.');}, 5000);
}

function SecondFunction(){
FirstFunction();
console.log('execution line we want to call last.');
}

function Start() {
      SecondFunction(); // Calling only second one as first called inside of it.
}

Start();// Calling start function

Output: 
"execution line we want to call last."

//Wait for 5 seconds to get below as we applied 5 seconds timeout.
"execution line we want to execute first and want to wait till 5 seconds."
```

As in above example it will not wait till 5 seconds to complete.

Now to make it wait till 5 seconds, below is how we can achive using **await**.

```javascript
const FirstFunction = async () => {
    return new Promise(resolve => {
    setTimeout(function(){return resolve('execution line we want to execute first and want to wait till 5 seconds.'); // Here creating promise is necessary and resolve in setTimeout to return resolve to make it synchronous
}, 5000);
  });
}

const SecondFunction = async () => { //remember we have to make it async so to use await in this function
const x = await FirstFunction(); // First function that is having async so it act like Promise here.
return x + '\nexecution line we want to call last.';
}

SecondFunction().then(res => {
  console.log(res)
});// Calling start function

Output: 
"execution line we want to execute first and want to wait till 5 seconds."
"execution line we want to call last."

```