teleren/devto huggingface dataset:
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-01-19 18:27:37

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round-up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Tuesday, we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

### Let’s make autocomplete more a11y-friendly

Autocomplete is awesome, but it comes with a small but important issue. @savvasstephnds walks us through how to fix it. 


{% link https://dev.to/savvasstephnds/the-problem-with-autocomplete-and-how-to-fix-it-2ill %} 


### A transparent look at coding bootcamp, DevRel, & more!

@lauracharvey’s reflection on how they landed a DevRel (developer relations) job, nitty-gritty and all, is _so_ informative.

{% link https://dev.to/lauracharvey/how-i-went-from-newbie-to-dream-role-in-225-days-2lal %} 

### Avoid an identity crisis by understanding authentication and authorization

@charlottebrf_99 gave a talk at a Node Girls and Women of Security
meetup to share a few things they have learned about authentication and authorization. This post sums it up!

{% link https://dev.to/charlottebrf_99/authentication-and-authorisation-101-143e %}

### The importance of webpack cannot be understated

@kalashin1 explains how to use webpack to bundle your code, manage your assets, automate easy processes and optimize your code. Let’s do it!

{% link https://dev.to/kalashin1/mastering-webpack-12fk %}

### "Books are life's cheat codes"

“Books that examine ways of living, how we go about our daily lives, approach productivity, and interact with others have been overall much more impactful for me both in my working life as well as my personal life” says @jameesy. Books are magic ✨

{% link https://dev.to/jameesy/the-five-books-that-changed-my-life-2ghe %}

### REST assured

_Note: We accidentally included a plagiarized version of the post below, originally. As such, we have replaced it with the true author's post, published in August 2018._

@florimondmanca provides some community recommended best practices to follow while designing and developing RESTful APIs for consistent, error-free, and easy to use APIs.

{% link https://dev.to/florimondmanca/restful-api-design-13-best-practices-to-make-your-users-happy-ag6 %}

### Under the Linux hood

From flags to file permissions with @rudrakshi99.

{% link https://dev.to/rudrakshi99/linux-basics-2onj %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
What are you interested in knowing about code-splitting and the long list of things you need to know about writing JavaScript?
Tags: discuss, podcast
Published: 2021-01-19 18:19:43

---
title: What are you interested in knowing about code-splitting and the long list of things you need to know about writing JavaScript?
published: true
tags: discuss, podcast
---

The [DevDiscuss Podcast](https://dev.to/devdiscuss) begins with an interview and ends with commentary from listeners — and we like to feature the actual _voices_ from our community!

With DevDiscuss coming back for a new season in a matter of days, we'd like to know your thoughts on the following...

> ### “What are you interested in knowing about code-splitting and the long list of things you need to know about writing JavaScript?”** 
  
For your chance to appear on an upcoming episode, answer the question above by:

- Calling our Google Voice at +1 (929)500-1513 and leave a message 📞

- Sending a voice memo to pod@dev.to 🎙

- OR, leaving a comment here (we'll read your response aloud for you) 🗣

_Please send in your recordings by TOMORROW Wednesday, January 20th at Midnight, ET (9 PM PT, 5 AM UTC)_

_**Voice recordings will be given priority placement**_ 😉 

---

Don't forget to check out the last season of DevDiscuss [here](https://dev.to/devdiscuss)
Day17:100DaysOfCode

Tags: 100daysofcode, java, productivity
Published: 2021-01-19 18:02:05

studied about constraints nd keys in db.

then few leetcode ques on string..
studied about http method rqst(get,post,put,delete)..

made some basic rest api using spring boot.
completed daily scrum at intern.

Tried with cf-div2 but couldnt did a single question today.
later got the approach :(-
..
continuing with some more leetcode ques(greedy problems).

You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Managing React Dependencies
Tags: react, webdev, javascript
Published: 2021-01-19 17:51:21

Do you struggle to manage the millions of dependencies for your React applications? I wrote [a blog](https://www.dolthub.com/blog/2021-01-18-dolthub-dependencies/) about my experience managing dependencies for our Next.js React application, [DoltHub](https://www.dolthub.com), as well as my step-by-step process for updating our dependencies monthly.

If you have any tips or advice on the topic, I'd love to hear from you!
Deep link to a Chrome extension's review page
Tags: tutorial, dev
Published: 2021-01-19 17:40:51

I recently found this trick and thought I'd share with the community. It's common practice for Chrome extension devs to prompt users to write a review in the product. However, there is no obvious way to take them directly to the reviews page... until now. 

Via trial and error, I found that by adding `/reviews`, you can deep link to the reviews page. Eg.

https://chrome.google.com/webstore/detail/time-travel/okaonjclghcehlghnbmjmbndjlninpip/reviews
Nuxt.js seo ready
Tags: nuxt, vue, seo
Published: 2021-01-19 17:34:45

---
title: Nuxt.js seo ready
published: true
description: 
tags: #nuxt #vue #seo
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ixd9987ekf182oltq8ny.png
---

Seo is a major pillar in web development and every production project have to be optimized for seo.

We'll need to install 1 package that will assist us on seo, Will make our site stand out while sharing the link on social networks, Her's a preview.

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

You can add: image, title, descreption and theme color.

Let's start with installing nuxt-social-meta

```
npm i nuxt-social-meta
or
yarn add nuxt-social-meta
``` 

Let's add meta tags on nuxt-config.js

```
head: {
    htmlAttrs: {
      // Add the default language of the website
      lang: 'en',
    },
    title: 'My website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      // Add a descreption for the website
      {
        hid: 'description',
        name: 'description',
        content: 'Descreption...',
      },
    ],
    link: [
      // Add the author
      {
        name: 'author',
        content: 'John Doe',
      },
      // Keywords related to the website
      {
        name: 'keywords',
        content: 'the best website ever',
      },
      // Favicon
      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
    ],
  },
``` 

Now let's add the module responsible for social networks url sharing.

```
modules: [
    [
      'nuxt-social-meta',
      {
        title: 'website-title',
        description: 'website-descreption',
        url: 'https://website.com',
        img: '/bg.png',
        locale: 'en',
        themeColor: '#000',
      },
    ],
],
``` 

If you want to add custom meta tags for a page then do the following

```
<script>
export default {
  head() {
    return {
      title: 'my website',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'a website descreption',
        },
      ],
    }
  },
}
</script>
``` 
You're nuxt app is seo ready !
usage of useImperativeHandle hook
Tags: react
Published: 2021-01-19 17:34:41

Before we move into the usage of `useImperativeHandle`, let’s discuss the problem this hook is trying to fix.

Here we have defined the App component and Input component, The goal of the application is to focus the input when the button element is clicked.

with a `forwardRef` this is pretty simple right?

```
const App = () => {
      const inputRef = useRef(null);
    
      const handleClick = () => {
        inputRef.current.focus();
      };
    
      return (
        <>
          <Input ref={inputRef} />
          <button onClick={handleClick}>click to focus child input</button>
        </>
      );
    }

    const Input = forwardRef((props, ref) => {
      return <input ref={ref} {...props} />;
    });
```
    
However, in this solution, the parent component App has full access to the input element in Input component, the `inputRef` declared in App holds the full DOM node for the child input element.

but if you don't want to give full DOM node access to the parent, you can achieve it using `useImperativeHandle` hook. you can just expose only the focus function for the parent

Updated Input Component

    const Input = forwardRef((props, ref) => {
      // create internal ref object to hold actual input DOM node 
      const inputRef = useRef();
    	
      // pass ref from parent to useImperativeHandle and replace its value with the createHandle function
      useImperativeHandle(ref, () => ({
        focus: () => {
          inputRef.current.focus();
        }
      }));
    
      // pass internal ref to input to hold DOM node
      return <input ref={inputRef} {...props} />;
    });

`useImperativeHandle` accepts the parent ref and a callback function as arguments, the function should return an object to replace the `current` property in parent ref, so `focus` is the only function which App can access now.

In this way, we can limit/expose functions/properties to parent components using ref
"Hello World!" My first post!
Tags: beginners, welcome
Published: 2021-01-19 17:32:34

Hello World!
I’m Jovan, I’ve recently started my journey in learning coding and thought I’d introduce myself and say what I am doing and what I want to do in the future.

My conundrum:
I am a first year in a Software and Data Engineering course and even before that I've been intrigued with what code and programmers can accomplish. This is why I decided enrolling in this course after playing arround with HTML, CSS and JavaScript for 2 months and making little homemade project web-sites. Since then I have not been able to stop reading about coding and learning something new everyday.

Hopefully my journey will be useful to someone out there and I hope to teach what I learn to other people . I'd be happy to help out if I can, I am open to all and any project ideas or just queastions in my Dm's.

Thank you so much, Stay safe,
~ Jovan
Using raspberry pi as a ☁️ VM?
Tags: cloud, ubuntu, raspberrypi
Published: 2021-01-19 17:25:36

Hi there👋👋, Community. I am thinking to buy a raspberry pi sooner or later, cuz I am thinking to use it as a cloud storage option and for using it as a cloud VM, just like we do in aws, azure or digital ocean or even linode(i think you all got my point😁😁.)But the problem here is I know how to use it as a ☁️ storage, but don’t know how do I do the same with ☁️ VM, I know that I just need 3 things for that-network,battery and ssh, but the problem here is that what if I want to distribute the 8gb RAM of raspberry pi into two 4gb RAM VM’s, like running two instances of ubuntu on 8gb raspberry pi, with first using 4gigs and the second is also using 4gb, how can I do that? Any help would appreciated!
await is only valid in async functions and the top level bodies of modules
Published: 2021-01-19 17:24:17

hi there. im new to coding and using Javascript. I am currently using discord.js and node.js to build a bot for my server. in my music module, i have noded it and it comes up with the error message: await is only valid in async functions and the top level bodies of modules. i have no idea how to fix this as i am new to this coding stuff. any help greatly appreciated (although you may have to go into quite a lot of detail for me to understand). the line of code that i am using that gives me this message is:     
```
try {
      
const playlist = await youtube.getPlaylist(query);

      const videosObj = await playlist.getVideos(); 

      //const videos = Object.entries(videosObj);

      for (let i = 0; i < videosObj.length; i++) { 

        const video = await videosObj[i].fetch();
```
i do not know how to put it into an async function.
How to insertAt, removeAt and remove an element in array JavaScript
Tags: javascript, typescript, node
Published: 2021-01-19 17:16:27

Suppose `[0, 1, 2, 3, 4, 5, 6]` is your array and you want to insert another value at a centain index (replace) in it or you want to remove a value at a certain index from it or you just want to remove a certain value lets say `5` out of it, here is what you can do in JavaScript.

## insertAt

```
let numbers = [0, 1, 2, 3, 4, 5, 6];

const insertAt = (element, index) => {
    numbers.splice(index, 1, element)
}

insertAt(7, 1);
console.log(numbers);
```
When you run the script the out put will be `[ 0, 7, 2, 3, 4, 5, 6 ]`
Element `1` is replaced with `7`

## removeAt

```
let numbers = [0, 1, 2, 3, 4, 5, 6];

const removeAt = (index) => {
    numbers.splice(index, 1);
};

removeAt(1);
console.log(numbers);
```
When you run the script the out put will be `[ 0, 2, 3, 4, 5, 6 ]`
Element at index `1` is removed from `numbers`.

## removeElement

```
let numbers = [0, 1, 2, 3, 4, 5, 6];

const removeElement = (element) => {
    const index = numbers.indexOf(element);
    if (index > -1) {
        numbers.splice(index, 1);
    } else {
        throw new Error('Element not found in array');
    }
}

removeElement(5);
console.log(numbers);
```
When you run the script the out put will be `[ 0, 1, 2, 3, 4, 6 ]`
Element `5` is removed from `numbers`.
If you run `removeElement(9)` it will throw an error - `Element not found in array` because `9` is not in the numbers array.

Happy hacking!
To `git` or Not To `git` a Vim Session ?
Tags: vim, cli, shell, git
Published: 2021-01-19 17:15:15

---
title: To `git` or Not To `git` a Vim Session ?
published: true
description: (Excerpt from "Vim Sessions" from vim drops)
tags: vim, cli, shell, git
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/cwj9skk6uupizujk2m0v.png
---

(This is an excerpt taken from the post: [Vim Sessions - Plus: A custom command to save the session, the files, and then exit.](https://medium.com/vim-drops/vim-sessions-50756b2c603a))

Should you commit the session files created, to your project’s repository? If the project will be touched by more than one person, that’s something to be discussed with the other part(s).

My suggestion on that, based on the 2 workflows presented before ([here](https://medium.com/vim-drops/vim-sessions-50756b2c603a)), is:

- **Add `Sessions.vim` to your project's `.gitignore` file.** - Since this auto-created file is now more related to your personal  workflow on the project, it could bring more pain than help if committed  to the project's repo. 
- **Commit `PriceUpdate.vim` (example) to the project's repository.**- If you create a custom session file to help quick maintenance on a  stable project, it may be worth sharing with others since it could help  anyone to dive in and make specific work without searching for files and  content inside the project.

[Check the full post about Vim Sessions](https://medium.com/vim-drops/vim-sessions-50756b2c603a) to know more.

Do you have any other tip or strategy about Vim Sessions? Please leave a comment!

Thanks for reading 🙌 !
Create Better Notifications For Your Web
Tags: javascript, tutorial, beginners
Published: 2021-01-19 17:13:58

If you have ever done web development, I'm quite sure that you have encountered a situation where you need to alert the user or ask for a response to a certain event, and in that case, you have probably used ***alert()*** to do that. But let's be real, it just looks unprofessional and it's style probably won't fit with the rest of your web. 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611075096791/CT_N-nizY.png)

There are some tricks to add some style to the 'alert' (like creating an HTML element and mimicking the alert() functionality), but there are is a way to make it so simple yet so good and pretty, that you will use it for every project from now on.

![Sweet Alert Logo](https://sweetalert2.github.io/images/SweetAlert2.png)

[SweetAlert2](https://sweetalert2.github.io) is a fantastic library that gives us a nice and clean alternative when it comes to displaying messages to our users.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611073653058/FM6Q9xC1l.png)

Both installing and using it is really easy, you can use npm or jsdelivr CDN, just follow the [steps](https://sweetalert2.github.io/#download)

And the best part is that we can use it on React, Vue, Angular, and plain HTML and JS. 

This is an example, using only HTML and Javascript.

{% codepen https://codepen.io/daviddiaz/pen/ZEpPpaN %}

Easy right? Well with React is not harder, this is a code example:

![carbon (4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611074910224/1gkmZ7BUlF.png)

And here it is with Vue:

![carbon (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611074992923/8iyEaLPdF.png)

As you can see, the library is really versatile, as there are a lot of customizable alerts to choose from, and we can even rely on it when it comes to certain logic like removing a file or not.

Also, you can install [themes](https://sweetalert2.github.io/#themes) in case you don't like the preinstalled one.

And that's it! Hope this library can help you with your future projects!
Setting Variables Using Switch Statements In JavaScript
Tags: javascript, tricks
Published: 2021-01-19 17:01:32

Here is a snippet showing an example of how this would be done. Each animal has a favorite color which we will determine using a switch statement.

```js
const animal = "dog";

const color = (()=>{
    switch (animal) {
        case "cat":
            return "yellow"
        case "dog":
            return "blue"
        case "fish":
            return "green";
    }
})();

console.log(color); // "blue"
``` 

And a similar example with parameter passing:

```js
const color = (animal) => (()=>{
    switch (animal) {
        case "cat":
            return "yellow"
        case "dog":
            return "blue"
        case "fish":
            return "green";
    }
})();

console.log(color("fish")); // "green"
```

And just to show how much cleaner the above version is, here is an example using an if/else statement:

```js
const color = (animal) => {
  if (animal === "cat")
      return "yellow";
  else if (animal === "dog")
      return  "blue";
  else if (animal === "fish")
      return "green";
};

console.log(color("fish")); // "green"
```

While, yes, the if/else version is technically shorter, you repeat yourself, it is less readable (subjectively), and it is inherently slower (at scale). With switch statements, the expression is only evaluated once, but with our if/else it is evaluated 3 times. Although, this example is short, so it may not affect performance. GeeksforGeeks has a great article comparing the two: https://www.geeksforgeeks.org/switch-vs-else/

Happy coding!
World of WoqlCraft - Ep.26 Documentation Graph
Tags: python, database, demo, graph
Published: 2021-01-19 16:52:35

---
title: World of WoqlCraft - Ep.26 Documentation Graph
published: true
description: Have you ever try extracting all the Docstrings from a Python package and build a graph database for it? Today, we are going to try doing that.
tags: python, database, demo, graph
---
Have you ever try extracting all the Docstrings from a Python package and build a graph database for it? Today, we are going to try doing that.

Find the source code from our [tutorial repo](https://github.com/terminusdb/terminus-tutorials).

Join the TerminusDB community at [Discord](https://discord.gg/Gvdqw97)
Splitting Text Animation
Tags: html, css, javascript, beginners
Published: 2021-01-19 16:50:34

Hello guys In this tutorial we will create splitting text animation using <a href="https://splitting.js.org/">splitting.js</a> within few minutes 😉

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w2h4d8lo58h766gi41ki.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cj0bkffic443e0lkr9py.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e3uc3znrp6ztdifx7zxs.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/udkdmzulzkfk3xack3dq.jpg)

Download Code from <a href="https://blog.stackfindover.com/splitting-text-animation-within-few-minutes/">Stackfindover</a>
Open sourcing my automated job board (ReactJs + Django)
Tags: react, django, javascript, python
Published: 2021-01-19 16:44:37

Recently I had been building a job board using ReactJs and Django. I aimed to keep it as a closed source project. But then I thought there is too much for me to share about in this project. Thus I decided to open-source this project.

So what's automated about this project? Well, I aim to automate numerous aspects of this project.

## **Scrapes jobs from other sites**
It scrapes jobs from StackOverflow for now. I aim to add more data sources in the future. The web scraper runs in the background celery worker.

## **Dynamically creates job filter tags**
The job board creates filter tags in parallel as it fetches jobs. Thus allowing to filter job as per the technology.

## **Future Roadmap**
- Integrate Stripe payment for posting sponsored jobs
- Let candidates post their CV (without revealing contact information to all)

## **Link**
[Back-End](https://github.com/TrakBit/fullstackbot-backend)
[Front-End](https://github.com/TrakBit/FullStackBot)

Read a follow up blog on the job board [here](https://dev.to/harsh_vardhhan/adding-new-features-to-my-open-source-react-django-job-board-746)
Javascript not defined vs undefined
Tags: javascript
Published: 2021-01-19 16:41:05

undefined example:

```
console.log(a) 
// memory reserved for a
var a = 5;
console.log(a)
```

Output:
undefined
5


Not defined example:
```
console.log(b)
// No memory is reserved
```
Output:

Uncaught reference error: b is not defined