teleren/devto huggingface dataset:
How to use JWT for Authentication in Node.Js
Published: 2023-01-05 20:05:18

JWT is a method or standard way of securely transferring or transmitting between two parties as a json token.

The compressed size of the tokens easily make it to be transmit and transfer through an URL (POST), or inside an HTTP header. The information is contained in a digitally signed using a Secret_key usually in an environment.

JWTs are using a secret or private key to sign in.

So, JWTs are mainly used for authentication. When a user login in to an application, the application then assigns and apportions JWT token to that user. Subsequent requests by the user will include the assigned JWT. This token tells the server what routes, services, and resources the user is allowed to access.


The JWT token is mainly for these followings:
`It provides simple verification through a JSON Web Token` 
`It is use an authentication service or outsource it`
`It provides more security and trustworthiness than cookies or sessions`

So, let us dive to how to construct it with our application.

first, you need to create a server like this. 
create a directory call jwtauth. you can call yours any name.

in it. when opened in the terminal, I preferred VSCode, initialise it, I'm using Express.js as a framework.
`npm init -y`

and then, you can now install the necessary packages e.g. express, jsonwebtoken, dotenv, etc.

**``npm install express dotenv jsonwebtoken``**

so, after the installation of the above.

let us create a folder that would housing JWT as a middleware.
*``middleware/jwtauth.js``*

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ge9z6d271pmzttsbw6e.JPG)

and then, create a controller and route.
*``controller/user.controller.js``*
this is for the user to login and when successfully login in, it will generate token.

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

after you successfully constructed the login logic as you can see the user has 30mins for the jwt token to be expired.

Now, let us create the route file.
*``routes/user.router.js``*

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

Let us try to login using Postman.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tq9e0tr9f952f92zbx5s.JPG)
PostgreSQL Multi Table Update
Tags: uyumsoft
Published: 2023-01-05 19:55:20

```

CREATE TABLE ZZZB_ASTT_BRANCH_ASSET_GRP AS
SELECT
S.ASSET_GRP_ID,
T.ASSET_CARD_ID,
S.ACC_ASSET_LOSS_ID,
S.ACC_ASSET_AMORT_ID,
S.ACC_SALES_DEBIT_ID,
S.ACC_SALES_CREDIT_ID,
S.ACC_SALES_ID,
S.ACC_VAL_IN_DBT_ID,
S.ACC_VAL_IN_CRD_ID,
S.ACC_VAL_DEC_DBT_ID,
S.ACC_VAL_DEC_CRD_ID 
FROM ASTT_BRANCH_ASSET_GRP S
INNER JOIN ASTD_ASSET_CARD T ON T.ASSET_GRP_ID = S.ASSET_GRP_ID

UPDATE ASTD_ASSET_CARD A
SET
ACC_ASSET_LOSS_ID   =(SELECT ACC_ASSET_LOSS_ID   FROM ZZZB_ASTT_BRANCH_ASSET_GRP B WHERE A.asset_card_id=B.ASSET_CARD_ID),
ACC_ASSET_AMORT_ID	=(SELECT ACC_ASSET_AMORT_ID  FROM ZZZB_ASTT_BRANCH_ASSET_GRP B WHERE A.asset_card_id=B.ASSET_CARD_ID),
ACC_SALES_DEBIT_ID	=(SELECT ACC_SALES_DEBIT_ID  FROM ZZZB_ASTT_BRANCH_ASSET_GRP B WHERE A.asset_card_id=B.ASSET_CARD_ID),
ACC_SALES_CREDIT_ID	=(SELECT ACC_SALES_CREDIT_ID FROM ZZZB_ASTT_BRANCH_ASSET_GRP B WHERE A.asset_card_id=B.ASSET_CARD_ID),
ACC_SALES_ID		=(SELECT ACC_SALES_ID 		 FROM ZZZB_ASTT_BRANCH_ASSET_GRP B WHERE A.asset_card_id=B.ASSET_CARD_ID),
ACC_VAL_IN_DBT_ID	=(SELECT ACC_VAL_IN_DBT_ID   FROM ZZZB_ASTT_BRANCH_ASSET_GRP B WHERE A.asset_card_id=B.ASSET_CARD_ID),
ACC_VAL_IN_CRD_ID	=(SELECT ACC_VAL_IN_CRD_ID   FROM ZZZB_ASTT_BRANCH_ASSET_GRP B WHERE A.asset_card_id=B.ASSET_CARD_ID),
ACC_VAL_DEC_DBT_ID	=(SELECT ACC_VAL_DEC_DBT_ID  FROM ZZZB_ASTT_BRANCH_ASSET_GRP B WHERE A.asset_card_id=B.ASSET_CARD_ID),
ACC_VAL_DEC_CRD_ID	=(SELECT ACC_VAL_DEC_CRD_ID  FROM ZZZB_ASTT_BRANCH_ASSET_GRP B WHERE A.asset_card_id=B.ASSET_CARD_ID)
WHERE A.ASSET_GRP_ID IN (SELECT ASSET_GRP_ID FROM ZZZB_ASTT_BRANCH_ASSET_GRP )
```
50 GENIUS KITCHEN GADGETS YOU NEVER KNEW YOU NEEDED UNTIL RIGHT NOW
Published: 2023-01-05 19:27:32

We're total suckers for cool [**kitchen gadgets**]

## 
(https://www.kalamanik.com) and gizmos. However, fun does not always have to mean frivolous. From a mess-free pancake batter dispenser to a singing pasta timer for perfectly al dente noodles every time to a measuring cup that also weighs your ingredients, the kitchen gadgets we found below are quite literally game changers for home cooks. Plus, it's hard not to smile when you look at them — there's just something about a colorful kitchen gadget that makes you happy.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6okvieu7fhsuaqb6ve2c.jpg)
Whether you're looking for a funny conversation starter or a time-saving tool that'll make cooking at home way more enjoyable, these [kitchen gadgets](https://www.kalamanik.com) are actually useful, in addition to being delightfully quirky. I mean, how could you not giggle a little bit when your pasta timer sings to you? Scroll through our picks, and remember that cooking should be fun — and delicious.
Send and Receive SMS Messages With Node.js and Express
Tags: webdev, javascript, tutorial, node
Published: 2023-01-05 19:26:36

## Introduction

The [Vonage Messages API](https://developer.vonage.com/messages/overview) allows you to send and receive messages over SMS, MMS, Facebook Messenger, Viber, and WhatsApp. So you can communicate with your customers on whichever channel they love most. In this article, we'll focus on how to send and receive SMS messages with [Node.js](https://nodejs.org/) and [Express](https://expressjs.com/).

To begin, we'll perform the most straightforward implementation of the API and send an SMS message with Node.js and the [Vonage Messages API](https://developer.vonage.com/messages/overview). Next, we'll build a Webhook that can receive SMS messages (sent from your phone) using Express and perform an action once the message has been received. Finally, we'll wrap up a couple of steps that you can take to extend the application.
Prerequisites

> To continue reading the full article, please [click here](https://mcrump.me/node)

Conclusion

If you have questions or feedback, join us on the [Vonage Developer Slack](https://developer.vonage.com/community/slack) or send me a Tweet on [Twitter](https://twitter.com/mbcrump), and I will get back to you. Thanks again for reading, and I will catch you on the next one!
My (frontend) dev learning journey, part 2: the break and the continuation
Tags: webdev, javascript, beginners, programming
Published: 2023-01-05 19:26:13

It has been almost a year since I had first started learning programming. My first (and last) post was in May. So this is an update for me and anyone who stumbles upon this blog and is curious how my dev learning journey went.

During the months of May and June, I did some simple projects (most of them I left either unfinished or unpolished to perfection). Sharpened my HTML and CSS skills a bit, started grasping JavaScript a bit more. Then, over the months of July and August, I took a small break from programming, because I had to switch focus to my Master's (in a totally unrelated field) work. I had to prepare (and pass) some exams, collect and analyze all the lab work results, and start communicating with my mentor about all the stuff that needed to be done (my grand plan was to defend my thesis before the end of 2022 - and I (spoiler alert) did it successfully, on Dec 21st).

Then, in the middle of September, I enrolled into a local coding bootcamp, while still battling with my Master's work. In the bootcamp, we went over a lot of JavaScript, and at the end we also learned some basic uses of Node and React. The bootcamp lasted 3 months, and I learned A LOT. The stuff I knew, I perfected; the stuff I had a hard time with (like DOM manipulation), I learned really well, just simply by basically doing it a lot in various problems and tasks we encountered during the bootcamp. I met some awesome people there and really further sharpened my JS skills. The bootcamp also gave me a sense of confidence, and for the first time, I started believing that I could maybe find a job with the skills I acquired. I really liked the backend tutorial that our tutor gave us - it was really short and basic (we went over the basics of setting up an API, a database and a schema, and connecting all that to our frontend), but the methods I saw there really opened my eyes into some stuff I wondered about for a long time, and inspired me to learn more about it all!

In the meantime, I successfully wrote, submitted and defended my Master's thesis, titled: "Production of bioethanol from photocatalytically processed starch material". So now I have a Master's degree. Yay!

The bootcamp ended in mid-December, and we have until mid-January to finish a final project, and showcase it to our tutor and the other candidates. 

As of this writing, I am still in the process of creating my final project - a fullstack web app which will be a simpler, humorous version of twitter, called Kriker (roughly translated to Shrieker in English), where you send kriks (shrieks) instead of tweets. I finished probably 95% of the frontend part, and started working on the backend part today. I'll make another post when I'm finished with it all.

Till next time!
What I Googled Today (WIGT) #1
Tags: javascript, react
Published: 2023-01-05 18:59:21

I need to get back to writing regularly. Ages ago I wiped all my blog posts so I could start fresh and then…didn’t. I figure the easiest way to get started is just start sharing what I have to google every day. It’ll help me build a habit, create a reference for Future Me, and serve as further evidence that being a software engineer is in part being a Professional Google Searcher.  Here we go.

## How to make comments in JSX?
<u>Answer</u>: When you’re inside a JSX block — so, for example, below a `<div>` and above a `<button>` — you use: `{/* comments here/*}`

<u>Reference</u>: [Babel, JSX, and Build Steps – React (reactjs.org)](https://reactjs.org/docs/faq-build.html#how-can-i-write-comments-in-jsx)

<u>How I got here</u>: I’m working through [Epic React](https://epicreact.dev/) by Kent C. Dodds (which is great, by the way) and I needed to leave myself some notes. There are a lot of different opinions about how to comment your code and when, but when I’m learning something new on my own I’m very pro “comment directly in your file”. It helps me make sure I can explain what’s happening and gives me a reference when I come back and don’t remember what I was doing. 

## Why event prevent default?
<u>Answer</u>: Using `event.preventDefault()` keeps the browser from executing the default behavior of the event being triggered by a user’s actions (e.g. clicking on the submit button in a form). We commonly use it in forms so we can validate input in some way before submitting. 

<u>Reference</u>:

- [Handling Events – React (reactjs.org)](https://reactjs.org/docs/handling-events.html#gatsby-focus-wrapper)

- [Event.preventDefault() - Web APIs | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)

- [javascript - What does event.preventDefault() do exactly inside a submit button function? - Stack Overflow](https://stackoverflow.com/questions/43488861/what-does-event-preventdefault-do-exactly-inside-a-submit-button-function)

<u>How I got here</u>: Working on an exercise about forms in React, we needed to make an event handler. Using .preventDefault is something I’ve done plenty of times but had never bothered to look up to learn about how it works or why. 

## Use State Hook
<u>Answer</u>: Per the React docs: “Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class,” and “useState is a Hook that lets you add React state to function components.”

<u>Reference</u>: [Using the State Hook – React (reactjs.org)](https://reactjs.org/docs/hooks-state.html)

<u>How I got here</u>: That’s it, that’s all I googled: “use state hook”. Hooks were mentioned in the exercise I was working on and I wanted to read more about the one we were using.
On-Page SEO & Accessibility | Website Project Management
Tags: projectmanagementtoo, onpageseochecklist, a11y, webaccessibility
Published: 2023-01-06 11:36:54

---
title: On-Page SEO & Accessibility | Website Project Management
published: true
date: 2023-01-05 18:55:51 UTC
tags: projectmanagementtoo,onpageseochecklist,accessibility,webaccessibility
canonical_url: https://mirelaprifti.medium.com/on-page-seo-accessibility-website-project-management-d2b29ed46f47
---

Are you looking to improve your website’s project management, on-page SEO, and accessibility tasks? Look no further!

![](https://cdn-images-1.medium.com/max/1024/1*KVMbimKTRD3S2lz_7qVOtQ.png)

I’m excited to provide these [**two Airtable bases**](https://mirelaprifti.gumroad.com/l/website-seo-accessibility) to help you stay organised and optimise your website management.

The package includes:

1. Website project management template that will help you keep track of tasks and deadlines.
2. On-page SEO & accessibility to-do list with a comprehensive list of SEO and accessibility tasks.

👉 [**Click here to get your copy!**](https://mirelaprifti.gumroad.com/l/website-seo-accessibility)

![](https://cdn-images-1.medium.com/max/1024/1*AyXuOC_gvqaS6hcnYICSmg.png)

#### Check out my other product on Gumroad:

[**UX Heuristics (Usability) Evaluation Report Template**](https://mirelaprifti.gumroad.com/l/ux-heuristics-report)
O que é, e como funciona a sintaxe JSX?
Tags: javascript, programming, beginners
Published: 2023-01-05 18:54:27

Ao estudar React Native,nós usamos um tipo de sintaxe chamada JSX e com ela, podemos progamar de maneira muito mais agradável,semelhante ao Html, mesmo assim, as diferenças param por aí pois a extensão do JavaScript é muito diferente. Meditando sobre isso, pode se perguntar: O que é, e como funciona a sintaxe JSX?



O JSX, com seu nome original(JavaScript XML) resumidamente é uma sintaxe feita para indicar como uma UI deve se parecer.

Devemos saber que essa sintaxe não é obrigatória, e que é normalmente usada no Javascript e frameworks(React,ReactJs e React Native) para facilitar o processo de desenvolvimento. O bom de usar o JSX é que no React, não se utiliza Html, ou seja, qualquer projeto ali não poderá usar linguagem de estilização. Felizmente, a extensão além de ser facilmente escrita pelo desenvolvedor,aproveita da praticidade da marcação de hipertexto ,trazendo consigo os recursos do JavaScript.


```
<MyButton color="blue" shadowSize={2}>
Clique aqui
</MyButton>
```

No exemplo acima, vemos o código SEM uso JSX. Vejamos abaixo com o uso do JSX.


```
React.createElement(
MyButton, 
{color: 'blue', shadowSize: 2}, 
'Clique aqui'
)
```

Percebeu a diferença? O JSX é muito prático e por isso é escolhido pelos desenvolvedores,e ele até facilita na mensagem de erros de algum código. Como dito anteriormente, o JSX não é apenas uma sintaxe visual mas tem consigo outros atributos do JavaScript, vejamos:


- **Uso de expressões com JSX:**

Utilizando o JSX, o  desenvolvedor pode continuar seu código fazendo uma variável, e utilizando o JSX para envolvê-la em chaves.


```
function App() {
const text = 'Hello World';
return (
<div className="App">
<p> [text] </p>
</div>
);
}
```

Qualquer outra expressão do JS é compatível ao uso do JSX.
Ele funciona muito como Syntatc Sugar, uma forma de deixar o código agradável.


- **Uso de Props no JSX:**


```
<MyComponent foo={1 + 2 + 3 + 4} />
```

Nessa expressão acima o valor será 10, pois o resultado da soma do MyComponent é 10.


- **Elementos filhos no JSX:**

Já fizemos a comparação do JSX com o Html e de fato os dois são bem parecidos, e isso inclui no caso dos elementos filhos que são muito utilizados no Html e podem ser utilizados por aqui também, veja abaixo:


```
<MyContainer>
<MyFirstComponent />
<MySecondComponent />
</MyContainer>
```


Também é possível fazer uso de Elementos filhos e Arrays intergrados:


```
render() {
return [
// Não esqueça das keys :)
<li key="A">First item</li>,
<li key="B">Second item</li>,
<li key="C">Third item</li>,
];
}
```

As possibilidades com o JSX vão muito além. Com isso, tente fazer uso do JSX em seu próximo projeto React, sua simplicidade será de grande valor.





**Obrigado pela leitura!!!
Espero que este artigo tenha o ajudado a entender o que realmente é o JSX e seu funcionamento.**
Doubt with UseRef
Tags: react
Published: 2023-01-05 18:43:49

I have one doubt regarding the useRef functionality. We know useEffect will update the value after render and useRef does not cause re-renders. So, value is updated one cycle late and so when we try to display any value in DOM useRef variable, it shows previous value and this becomes a major use case for useRef but then how does update count works fine and shows current value and not one cycle late?

````
import React from "react";
import "./App.css";
import { useEffect, useState, useRef } from "react";

function App(){

const count = useRef(0);
const text = useRef("");
const [inputValue, setInputValue] = useState("");

useEffect(() => {
    text.current = inputValue;
    count.current = count.current + 1;
});

return (
    <div>
      <input type="text" value={inputValue} onChange={(e)=>setInputValue(e.target.value)} />
      <p>Render Count: {count.current}</p> //displays 1 after re-rende
      <p>{text.current}</p> //displays "" after re-render
    <div/>
  );
}
````

The count variable runs with current value and not one cycle late. Which means after I type a letter "A" in textbox, count.current becomes 1 from 0 and displays 1 but text.current displays previous value i.e "" and not "A. Why?
UraniumJS ☢️ - LZ4-compress & BASE92-encode ✔️
Tags: javascript, opensource, node, algorithms
Published: 2023-01-05 18:42:14

Enrich a text into a simple and compressed BASE92 readable string &amp; deplete it back!

 > Only 53.5 KB, and save up to 45% on any source text... 

DEMO : https://codepen.io/vipertechofficial/pen/JjBXJPR

### 1) E-A-S-Y!
LZ4 is a very fast (Truly, trust me.) compression algorithm but when it comes to the idea of compressing a very complex string you probably don't want to get a strange and unreadable text which you may even not be able to save it inside a bracket in JavaScript because it could be using insane characters!

### 2) N-E-A-T!
But look, why would someone with the proper tools beside of him just throw -25% of size inside getting to use an encoding in Base64 if it is to embded it inside JSON or a STRING which can truly handle more likely 92 characters without hurting itself into parsing or readability issues!

### 3) F-A-S-T!
So, while you might get up to 45% lighter source file for web worker function, you might also be able to embded them directly inside your JS text file and load them quite fast! Or one may be using it to save translation file more kindly inside a .js ...

#### It doesn't use the following characters excepting space / \ " ' ` 

## How to use it?

![How to use UraniumJS demo code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dhl7w3pid5sousziyyq.png)

### And to compress a function...

![how to compress a function with UraniumJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n997dh7soy1w3nycc9v.png)

---

Check it out on NPM --> https://www.npmjs.com/package/uraniumjs

---
How a simple Hang-up borked my lab environment.
Tags: devops, linux, homelab
Published: 2023-01-05 18:41:15

Happy New Year! Well my new year hasn't been that happy, from falling sick on the first day of the year to my homelab giving up, life has just been going on...

Upgrading never seemed risky until one day my Arch homelab(Yes I run Arch :o) hung up and caused all the kernels to get deleted. started getting funky GPG and corrupted package errors.

It all began here...

![Linux failing to find the kernel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pa2egbk03mw7rd33t6c1.png)

So I popped in a usb and started a live environment, mounted my folders and did `arch-chroot`, then tried to do a `pacman -Syu` only to get hit with a bunch of:

```
error: GPGME error: No data
```
So I thought let me just simply fix it by following the Arch guide, however, nothing worked, what did was

```bash
sudo rm -fr /etc/pacman.d/gnupg
sudo pacman-key --init
sudo pacman-key --populate archlinux manjaro
sudo pacman-key --refresh-keys
```
I also got few errors of files being already owned, since I was sleepy I did some bash-fu and ended up with no `/usr` :D, fret not I copied it from my live system(Spoiler Alert: It borked up systemD). It worked until it didn't.

![Anna Kendrick doing Boom sign](https://media.giphy.com/media/laUY2MuoktHPy/giphy.gif)

So then I figured out somehow that SystemD and QEMU was failing in some ways with Permission Denied errors and Qemu monitor getting a similar error, a quick reinstall fixed it...

Weirdly this was a chain reaction... I booted up my PC and I kept getting an error that said I've overclocked it... but I never did that, this caused the bios to eventually wipe everything on every boot. Which means I couldn't run VMs because the Virtualization option never persisted.

So I did the most sensible thing I replaced the CMOS battery, cause this is a really old system. Even then it still didn't work. Then I noticed that the Ram was showing up as 8GB, this system had 16GB ram and so it turned out that a faulty Memory stick brought my system down for 2 good days...

Surprisingly, DDR3 is quite cheap so I'll be replacing that Ram Stick. 

That's it folks, I also got a new box to play around these days and I'm wondering what OS should I put on it any suggestions!?
The Great GraphQL Compass
Tags: graphql, learning, guides, articles
Published: 2023-01-05 18:38:46

TLDR; Here's an organized collection of articles, guides and resources that you should be aware of when building GraphQL servers. Maybe hand the link to your team just in case.

[Here's the link (it's free)](https://ayrtonvwf.gumroad.com/l/GraphQL-Apollo-Server-Must-Read)

## Why does this exist?

Have you ever shipped something and months later discovered some good piece of information that you wish you had early on, that would have saved you time, energy, money, that would make this thing you shipped more secure, reliable, pleasant to use?

As I was navigating my way through GraphQL development over the past years I've been collecting and organizing the resources that explained important concepts that shaped the way I design and implement GraphQL.

That's been a fundamental resource that I use when introducing GraphQL to individuals and teams and now I decided to share it here. Hope it helps you :)