teleren/devto huggingface dataset:
NuxtJS - Authentication made easy with Magic
Tags: nuxt, javascript, magic, auth
Published: 2021-05-17 19:40:04

These days adding authentication to an application is very challenging, and you shouldn’t build it from scratch. As the centralized companies on the internet have already failed us in protecting user's privacy and data.

The user trust model of the internet is broken. Let's fix it one step at a time.

# Introduction
Hi 👋, in this guide you'll be learning how to add passwordless login to a Nuxt.js application using Magic Link.

Nuxt.js is a higher-level framework based on Vue.js to create production-ready modern web applications. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.

# Create a secured Nuxt.js application with Magic

Let’s start by creating our application using `npx make-magic`

```shell
npx make-magic --template nuxt
```

After a few seconds, you will be prompted for a project name, this will also be the name of the folder that will be created for this project.

![Enter your project name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97oxlem2mhfen8mf3baa.png)

After putting in a project name, you will be prompted for your Magic Publishable API Key, which enables user authentication with [Magic](https://magic.link).

![Enter Magic Publishable Key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqf4i18yhocywognpmoh.png)

To get your **publishable API key**, you'll need to sign up to [Magic Dashboard](https://dashboard.magic.link/signup?ref=nuxt-dev-to-post). Once you've signed up, an app will be created upon your first login (you'll be able to create new apps later).

![Magic Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpp4w4g0ebm9jq2c84u8.png)

You'll now be able to see your **Test Publishable API Key** - copy and paste the key into your CLI prompt.

![Entered Magic Test Publishable API key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl5im0fsjtpntdxsdpf1.png)

After hitting Enter, you'll be asked to select whether you’d like to use npm / yarn as the NPM client for your project.

![Select NPM Client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i367jel60qjbgtwr2t6o.png)

After selecting your NPM client, the nuxt server will automatically start, and your application will be running on http://localhost:3000.

In this example app, you'll be prompted to sign up for a new account using an email address or login into an existing one. The authentication process is secured by [Magic](https://magic.link).

![Login page of the Nuxt.js application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uli3plstf1ayp987affb.png)

After clicking on your magic link email, you'll be successfully logged in, and redirected to the profile page that displays your email, issuer, and public address.

![Profile page of the Nuxt.js application displaying user's info](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gdc446vq5pepzjbuho8.png)

Read the full guide on https://magic.link/posts/magic-nuxt 

Live Demo: https://magic-nuxtjs.vercel.app/
Gitkraken, VsCodd, Ubuntu
Published: 2021-05-17 19:21:48

Hello, with a friend we are working on a project in reactjs and we want to use Gitkraken to make our job easier. However we encountered a lot of difficulties during the installation of visual studio, my course teacher switched to ubuntu and I did not understand what he did. Do you think there is a link with ubuntu (knowing that my friend did not use ubuntu when installing Vscode)
How to code on your own..
Tags: codenewbie, motivation, 100daysofcode
Published: 2021-05-17 19:20:22

Let's explore how tutorials can hold you back.
you might have been through all the tutorials under the sun, But still feel lost when coding on your own??

Why does this happen?

This is called being stuck in "tutorial hell"
This is when you never build your projects and rely on tutorials.
break away from tutorials to see what you actually know.
You'll learn considerably faster when you start applying what you've learnt.

Are you stuck in tutorial hell?
Let me know in the comments.
Peak 🏞️
Tags: career, watercooler, discuss
Published: 2021-05-17 18:56:17

Is this a peak? Have I peaked? I'm not writing code at night much anymore, I'm not even thinking about open source projects I want to work on. I had 3 at one time all with great momentum and actually good ideas.

But I moved house and I have this garden, oh boy what a garden, what a house, so much to do, and then there's the little one he's a lot to handle and... Is my career over?

This is very odd, I'm not an engineer at the moment either, I'm a consultant. So it's not working out as I had planned 😸

What do you do when you feel like this, do you ever get over it?
Formatting dates in javascript without a library
Tags: javascript, functional
Published: 2021-05-17 18:45:00

Gone are the days where we needed libraries to simply format a date (yes I'm looking at you Moment.js).
After ditching Moment.js about a year ago, because it's not good with tree-shaking and immutability, I landed on Day.js.

This was definitely an upgrade compared to Moment.js purely looking at the size of the library you're importing, but it still felt strange to use a library to format a date.

For a new project I'm working on, I did some research, and found out that Javascript has some solid date functions built in.

Say I want to convert a UTC date to a human readable, localized string. 
```javascript
const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0))
// Thu Dec 20 2012 04:00:00 GMT+0100 (Central European Standard Time)
```

The default already looks kind of ok, but my client wants it to be in Dutch, and wants the weekday to be written out fully (e.g. Wednesday). 
For this case, we can use the `toLocaleDateString()` function on the Javascript Date object.

```javascript
const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0))
console.log(date.toLocaleDateString('nl-BE', {
  weekday: 'long', // possible values: 'long', 'short', 'narrow'
  year: 'numeric', // possible values: 'numeric', '2-digit'
  month: 'short', // possible values: 'numeric', '2-digit', 'long', 'short', 'narrow'
  day: 'numeric' // possible values: 'numeric', '2-digit'
}));
// donderdag 20 dec. 2012
```

Super easy! And easy to customise too, you don't have to remember to use capitals, different digits (like dd-MM-yyyy etc.).
Formatting without options (just a locale) will format the date the default way:

```javascript
console.log(date.toLocaleDateString('nl-BE'));
// 20/12/2012
```

If you want to see more options, have a look at the MDN page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.

So for simple conversions/formatting this can definitely do the trick, for more complex stuff (working with different timezones, adding/subtracting days...) I'd recommend using date-fns (https://github.com/date-fns/date-fns)!
Connect to SMB share on Mac with specific username (with or without password)
Published: 2021-05-17 18:28:09

Specify username and password

```
smb://user:password@server_host
```

Specify username and be prompted for password
```
smb://user:*@server_host
```


Further Reading
* [Resource identifiers for SMB scheme] (https://www.iana.org/assignments/uri-schemes/prov/smb)

```
(last updated 2012-09-23)

Resource Identifier (RI) Scheme name: smb 
Status: provisional

Scheme syntax:
   smb://[<user>@]<host>[:<port>][/[<path>]][?<param1>=<value1>[;<param2>=<value2>]] or 
   smb://[<user>@]<workgroup>[:<port>][/] or s
   mb://[[<domain>;]<username>[:<password>]@]<server>[:<port>][/[<share>[/[<path>]]][?[<param>=<value>[<param2>=<value2>[...]]]]]     
   example: smb://workgroup;user:password@server/share/folder/file.txt

Scheme semantics:
   Accessing SMB/CIFS shares

Encoding considerations:
   Unknown, use with care.

Applications/protocols that use this scheme name:

Interoperability considerations:
   Unknown, use with care.
   May be unsuitable for open use on the public internet.
Security considerations:
   Unknown, use with care.
Contact:
   Registering party: Dave Thaler <dthaler&microsoft.com>
   Scheme creator: IETF Draft
Author/Change controller:
   Either the registering party or someone who is verified to represent
   the scheme creator.  See previous answer.
References:
   http://en.wikipedia.org/wiki/Server_Message_Block, http://www.jarvana.com/jarvana/view/org/samba/jcifs/jcifs/1.2.19/jcifs-1.2.19-javadoc.jar!/jcifs/smb/SmbFile.html, http://tools.ietf.org/html/draft-crhertel-smb-url  


(file created 2012-09-23)
```
Angular : Show Alert Message on a condition
Tags: angular, webdev, javascript, programming
Published: 2021-05-17 18:25:21

# How to create Alert?
You can use your custom CSS to customize your alert message or you can use [Bootstrap Alert](https://getbootstrap.com/docs/5.0/components/alerts/) as below -

```html
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yiwiqk5qkfdwbht7i0ij.PNG)

Now you know how to create Alert, now let's talk about how you can include bootstrap in your angular project so that bootstrap classes will work, there are two many ways to do this but I will simply use CDN style path in `index.html`

```html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
```
Above code you need to paste in your index.html file inside `<head>` tag.

# How to convert alert to conditional alert?
Now let's talk about how this alert will be conditional -

app.component.html 
```html
<p class="alert alert-success" *ngIf="names.length > 2">Currently there are more than 2 names!</p>
```
Now you might get below error-
> Error in `src/app/app.component.html` (5:39)
Property 'names' does not exist on type 'AppComponent'.

This is because you are using `names` in html which is not available in ts file, so you need to add this as -

app.component.ts
```javascript
  names = ['Rajesh', 'John', 'Smith'];
```
Now you will see -
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbhllua06qch6py7x8pd.PNG)

Full Code and Demo -
{% stackblitz angular-ivy-nxyyvy %}

<a href="https://www.buymeacoffee.com/rkycom" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>


With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/www-rajeshkumaryadav-com/) and [Twitter](https://twitter.com/rky_com).
EuroPython 2021: Talk Voting is Open
Tags: europython, conference
Published: 2021-05-17 18:18:27

###### (Original post https://blog.europython.eu/europython-2021-talk-voting-is-open/)

🗳 Talk voting is your chance to tell us what you’d like to see at EuroPython 2021. We will leave talk voting open until:

##### 🗓 Sunday, May 23, 23:59:59 CEST

In order to vote, please log in to the website and navigate to [the talk voting page](https://ep2021.europython.eu/events/talk-voting/):

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

# 🙋‍♀️🙋🙋‍♂️ Who can participate?
Any registered attendee of EuroPython 2021 with a paid ticket, as well as attendees of one of the past EuroPython conferences (going back to 2015) can vote. If you have submitted a proposal this year, you are also eligible to vote.

If you have not attended EuroPython before, but want to participate in talk voting, [you have to buy a ticket](https://ep2021.europython.eu/registration/buy-tickets/) before you can vote.

# 🤔 How talk voting works
The talk voting interface lists all submitted proposals, including talks, helpdesks and posters. You can then vote on the proposal you'd like to see at the event.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vl0oi36j99ucnngmgiam.png)
 
Details on the voting process are described on [our talk voting page](https://ep2021.europython.eu/events/talk-voting/).

# ✅ Talk Selection
After the talk voting phase, the EuroPython Program Workgroup (WG) will use the votes to select the talks and build a schedule.

The talk voting is a good and strong indicator of what attendees are interested to see. Submissions are also selected based on editorial criteria, for example, to increase diversity, give a chance to less mainstream topics and make sure that topics don't overlap too much.

In general, the Program WG will try to give as many speakers a chance to talk as possible. If speakers have submitted multiple talks, the one with the highest rating will most likely get selected.

Enjoy,
[EuroPython 2021 Team](https://ep2021.europython.eu/europython/team/)
[EuroPython Society](https://www.europython-society.org/)
[EuroPython 2021 Website](https://ep2021.europython.eu/)
How to create a React app
Tags: reactnative, npm, javascript, babel
Published: 2021-05-17 18:10:38

Creating apps in React are my favorite!!!  React is a really fun and simplistic JavaScript library. I used to always have to look up how to set up a new React single page app, so I thought this post could be helpful to someone new to React.

First check to see if you need to install npm.  npm is the world's largest Software Registry. Its what developers use to share software. You can check to see if you have it and what version it is by typing this into the command line: npm -v . If you need to install it, then do so.  

The easiest way, in my opinion, to start building a React app is by installing create-react-app. It comes with the newest JavaScript features, Babel and Webpack. 

* In the command line type: npm install -g create-react-app 
* After that installs: cd into the folder you want your app to 
  reside.

Now to create a new app:

* create-react-app PROJECT_NAME
* cd into PROJECT_NAME 
* In the terminal type: npm start
* In the browser go to: http://localhost:3000/

In my next post I will share my next steps to take to create an awesome React App!
Testing sessionStorage and localStorage with Selenium (Node)
Tags: node, storage, testing
Published: 2021-05-17 18:05:56

I recently added [a feature to the Grouparoo site that is using `sessionStorage`](/blog/getting-previous-path-nextjs) to send analytics data. Being that it's an important feature, we _should_ write test(s) to cover the use case(s), right?

Okay, fine. Let's do it!

This website is a [Next.js](https://nextjs.org/) application that uses [Jest](https://jestjs.io/) as the test runner and [Selenium WebDriver](https://www.selenium.dev/) for integration test help.

What I wanted to do with Jest and Selenium was to read from `sessionStorage` after visiting a series of pages. After a bit of perusing, I finally uncovered a (goofy) way to achieve what I wanted.

We can use the `executeScript` method to run a JavaScript expression and capture the result. [Our test looks like this](https://github.com/grouparoo/www.grouparoo.com/blob/main/__tests__/integration/sessionStorage.ts):

```ts
declare var browser: any;

async function getSessionItem(key) {
  return await browser.executeScript(
    `return window.sessionStorage.getItem("${key}");`
  );
}

test("stores page history in the session data", async () => {
  await browser.get(url + `/docs/config`);
  expect(await getSessionItem("prevPath")).toBe("null");
  expect(await getSessionItem("currentPath")).toBe("/docs/config");
  await browser.get(url + `/meet`);
  expect(await getSessionItem("prevPath")).toBe("/docs/config");
  expect(await getSessionItem("currentPath")).toBe("/meet");
});
```

Here are a few of the key items to note:

- You must `return` the JavaScript expression or you'll end up with `undefined`.
- It's a much cleaner approach to run tests as `async` functions so you can use `await` to retrieve the result of the script, rather than ending up in a nightmarish Promise chain.
- `browser` is often referred to as `driver` in other documentation and implementations. This comes from [the library we're using to connect Jest and Selenium](https://github.com/alexeyraspopov/jest-webdriver/tree/master/packages/jest-environment-webdriver).

This now works like a charm! You could take a similar approach if you wanted to read from any other JavaScript object, including `localStorage`.
Day 85
Tags: 100daysofcode, programming
Published: 2021-05-17 17:58:51

Day 85 of #100DaysOfCode 
 
- Solved three problems on Codewars.

1 -> [Arabian String](https://www.codewars.com/kata/525821ce8e7b0d240b002615) (6kyu)  ||  [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/6%20kyu/ArabianString.js)
2 -> [Two Joggers](https://www.codewars.com/kata/5274d9d3ebc3030802000165) (6kyu)         || [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/6%20kyu/TwoJoggers.js)
3 -> [Word to initial number](https://www.codewars.com/kata/5bb148b840196d1be50000b1) (6kyu)      ||    [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/6%20kyu/WordToInitialNumber.js)

[Become Code Warriors](www.codewars.com/r/YECsUA)
Patch Note Survivia 17/05
Published: 2021-05-17 17:49:52

🏅 Zone des clasemment du serveur :
Nous devions fair la zone de Guild en thémes japonais mais nous avons eux une meillieur idées :) C'est faire une zone avec tout les clasemment ( Vote , Guild , Money ) qui seront mits à jours tout les 10 du mois une fois leur sortie ! Pour les Guild vous possederais des Ticket de Guild pour ouvrir une box et sa seras au petit bonheur :o
Variables in JavaScript
Tags: javascript, beginners, webdev, discuss
Published: 2021-05-17 17:46:24

JS variables are used to store data values. But unlike any other language, the datatypes of that variable are not declared first like in C++. JavaScript has dynamic types. This means that the same variable can be used to hold different data types,

1.  var, let, and const: 

To declare variables we use var, let, and const.
var and let are very similar except in block scope which is discussed in the difference between var and let. 
cont is the same as let but used only for constants.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m73qk61gcc1agvthtgb.png)

2.  Difference Between var and let:
The main difference between var and let is that scope of var is global while that of let is limited to block. This means if I declare a variable using var, it can be excessed anywhere except in the case of a function, where you can't excess a variable outside the function. This can be a problem if we use it in loops for example.

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

3.  Properties of const :
People usually misunderstood the cont. It does not define a constant value. It defines a constant reference to a value, which means we can actually change the properties of a constant object or the element of a constant array. It is just you can reassign a value.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32o0r99xenloshae74oy.png)
HappyStack: coming soon to a developer near you
Tags: productivity, scrum, projectmanagement, agile
Published: 2021-05-17 17:38:33

Hey everyone, 

I am building a new scrum project management tool called HappyStack. It's about a third way done. The concept is based on the simplest form of Scrum, as taught by the Scrum creator Jeff Sutherland.  

Check it out, sign up to be notified of beta if you are interested. 

[Get HappyStack](https://gethappystack.com)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9gn6kd8zj3fe87axc75.png)
🚀 I Built a React Landing Page Template using TypeScript and Tailwind CSS. Here is the result in video 🎥.
Tags: showdev, react, webdev, nextjs
Published: 2021-05-17 17:31:15

---
title: 🚀 I Built a React Landing Page Template using TypeScript and Tailwind CSS. Here is the result in video 🎥.
published: true
description: A React Landing Page Template live demo in video built with React TypeScript, Next JS and Tailwind CSS. A perfect template to promote your SaaS, digital products or service.
tags: showdev, react, webdev, nextjs
cover_image: https://raw.githubusercontent.com/ixartz/Next-JS-Landing-Page-Starter-Template/master/public/assets/images/nextjs-landing-page-banner.png
---

Recently, I've built several Landing Page in React with modern and trendy technologies like Next JS, TypeScript and Tailwind. By building this template, I've learned so much about frontend development and user interface. Now, I am not ashamed anymore to show the result even if it isn't perfect. For your information, I have more a backend experience and building ugly interfaces was my standard.

Here is the result in the video:

{% youtube azzey4RQ0xE %}

Open to feedback and suggestion.

## Next JS Landing Page Template Free

If you want to learn more, I've open sourced a light version on GitHub at : [Next JS Landing Page Template GitHub](https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template)

And you can find a [Next JS Landing Page Template Free Live Demo](https://creativedesignsguru.com/demo/nextjs-landing-page/)

Built with developer experience in mind:

- Next JS with TypeScript
- Styling with Tailwind CSS
- ESLint, Prettier and Husky included out-of-the-box
- SEO friendly
- Production-ready

It includes several React components:

- Navigation
- Hero
- Features
- Call to action banner
- Footer

More than 100+ ⭐ stars on GitHub.
React hooks - working with useEffect (lifecycle)
Tags: react, javascript, beginners
Published: 2021-05-17 17:23:11

# Side Effects 

Sometimes your component may have a side effect. Some examples of side effects are: 
* Getting data from an API 
* Changing the DOM manually 
* Using a DOM plugin outside of React (like a map) 

There are two kinds of side effects, those that require cleanup and those that don't. 

## Effects without cleanup 

You will not need to cleanup if you want an effect to run after every page render. This is the default behavior of useEffect (to run after the first render and every updated). 

```js 
    import React, {useEffect} from "react";

    useEffect(() => {
        document.title = 'New Document Title';
    });
```

## Effects with cleanup 

Sometimes you will need to cleanup an effect to avoid a memory leak. React performs the cleanup after the component unmounts.

# Component Lifecycle

## 1. Once, after component is added to the DOM (mounted)
To run an effect after a component has mounted, add a dependency array. 

```js 
    import React, {useEffect} from "react";

    useEffect(() => {
        console.log("Run on component mount")
        // notice the `,` and `[]` 
    }, []);
```

## 2. Once, after component mounted and once before unmount 
To run an effect after a component was unmounted, return a function inside the useEffect. 

 ```js 
    import React, {useEffect} from "react";

    useEffect(() => {
        console.log("Run on component mount")
        // similar to the previous example, but with cleanup 
        return () => {
          console.log("Run after component unmounts")
        }
    }, []);
```

## 3. Run on every render 
To run on every render, simply omit the comma and square brackets. 

```js 
    import React, {useEffect} from "react";

    useEffect(() => {
        console.log("Run on component mount")
        // notice the `,` `[]` are no longer there  
    });
```

## 4. Conditional render (state change)
To re-render based on a specific state change, add the state to the dependency array.   

```js
    import React, {useEffect} from "react";
    const [stateChange, setStateChange] = useState(0)

    useEffect(() => {
        console.log("Run on component mount")
        // notice the `,` and `[]` are back and has the piece of state as a dependency  
    }, [stateChange]);
```

This quick tutorial shows you how to start using the useEffect hook and how you can change when the useEffect runs. 

Thanks for reading!