teleren/devto huggingface dataset:
Authorization in Node.js, all you need to know
Published: 2023-03-21 13:39:08

#What is authentication & authorization

Authentication and authorization are used in security, particularly when it comes to getting access to a system. Yet, there is a significant distinction between gaining entry into a house (authentication) and what you can do while inside (authorization).

In simple words, Authentication is the process of verifying who a user is (who you are), and  Authorization is the process of verifying what they have access to (what you are allowed to do).

Authorization is the process of allowing authenticated users access to resources by determining whether they have system access permissions. By giving or denying specific licenses to an authenticated user, authorization enables you to control access privileges.
So, authorization occurs after the system authenticates your identity, granting you complete access to resources such as information, files, databases, funds, places, and anything else. That said, authorization affects your capacity to access the system and the extent to which you can do so

Authorization is a critical component of any web application, as it controls access to various resources based on user roles and permissions. Node.js is a popular platform for building web applications, and there are various approaches to implement authorization in Node.js applications. Here is all you need to know about authorization in Node.js.

##Types of Authorization

There are generally two types of authorization:

1. Role-based Authorization: In this type of authorization, access is granted or denied based on the user's role or job function.

2. Permission-based Authorization: In this type of authorization, access is granted or denied based on the specific permissions granted to the user.

###Implementing Authorization in Node.js

```
const authorize = (req, res, next) => {
  if (!req.user || !req.user.permissions.includes('view_data')) {
    return res.status(401).json({ error: 'Unauthorized' });
  }
  next();
};

const getData = (req, res) => {
  const data = { /* data */ };
  res.json(data);
};

// /data route that requires authorization
app.get('/data', authorize, getData);

```

This code defines a middleware function called authorize that checks if the user is authenticated and has the required permissions to access the resource. If not, the middleware returns a 401 Unauthorized error. It then defines a route handler function called getData that retrieves data from a data source and returns it to the client.

Finally, it uses the authorize middleware function to restrict access to the getData route handler function. This means that only authenticated users with the required permissions can access the /data route and retrieve data. In conclusion, this example demonstrates how to implement authorization using middleware functions in Node.js to ensure that users have the appropriate access to specific resources or functionalities based on their identity and permissions.
osdc - Lesson #2 follows github organization & yaml files
Tags: git, osdc, beginners
Published: 2023-03-21 13:37:49

****in this lesson I Added projects that interests me.

I Followed our team projects

I have Converted 5 organizations to yaml files.

I found a lot more governments organizations that uses github and added it to yaml files.

**create yaml files of organizations:**

https://github.com/OSDC-Code-Maven/open-source-by-organizations/pull/48
1. 
[Create ditkrg.yaml](https://github.com/OSDC-Code-Maven/open-source-by-organizations/pull/49
)
2. 
[Create govph.yaml](https://github.com/OSDC-Code-Maven/open-source-by-organizations/pull/56)

**updating governmend.md**
[Update government.md #48](https://github.com/OSDC-Code-Maven/open-source-by-organizations/pull/48)

**Patch Links:**
https://github.com/OSDC-Code-Maven/osdc-2023-03-azrieli/pull/28.patch
https://github.com/OSDC-Code-Maven/osdc-2023-03-azrieli/pull/28.diff
—
Chizzy: Your Virtual Friend for Navigating Remote Work Chaos
Tags: uiweekly, productivity, nocode, opensource
Published: 2023-03-21 13:36:10

[Chizzy](https://chizzy.singula.team/) is a design project that promotes well-being and productivity. The project was created by a small design team who work remotely and understand the challenges of self-organization. 

Chizzy was created without using any code. The team used online design tools, many of which offer free versions, allowing even beginner designers to create something cool without spending money on licenses. 

The project features a cheerful character named Chizzy, who shares his personal experience with remote work problems like procrastination, social media distraction, and a lack of work-life balance. Through playful language, Chizzy helps remote workers achieve maximum productivity with minimal resources.


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2u9kfvehbp544e39x8b.jpg)
Blog Website
Tags: webdev, typescript, react, javascript
Published: 2023-03-21 13:33:35

##### Day 6
### Home Page

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnv9sqk9xvlcuw7q9zos.png)
For now, I have decided to showcase just the basic user information on the sidebar, later on I might add some more. The home page will showcase the latest 5 blogs in the form of cards and when you click on any of those cards it will animate into new layout, some sort of grid representing each block you have ever posted on the site.

Below the cards there are three buttons:-
- Create : To create new blogs.
- Update : To update a blog.
- Delete : To delete a blog.

[GitHub](https://github.com/parthK57/blogit)
WebSool software developmet agency
Published: 2023-03-21 13:10:31

WebSool is a dynamic and innovative software company that provides cutting-edge web solutions to businesses of all sizes. At WebSool, we are committed to delivering high-quality software development services that help our clients achieve their digital goals. Our team of talented developers, designers, and project managers work collaboratively to deliver custom software solutions tailored to meet the unique needs of each client. We pride ourselves on staying up-to-date with the latest technology trends and using the most advanced tools and methodologies to deliver efficient and effective solutions. WebSool, a software company that specialized in a variety of services including software consulting, web development, app development, digital marketing, SEO services, eCommerce development, CRM / ERP development, DevOps, data science, and branding.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nl9k6nj6aarwu3q2b4x.png)
Animated Spinner - React Native
Tags: mobile, reactnative, javascript, typescript
Published: 2023-03-21 12:36:26

Most of the times in Mobile Development, you might want to have an interactive spinner/activity indicator. In this short article we are going to demonstrate how we can achieve that to an Expo generated React Native app.

We demonstrate this using **Lottie React Native**, therefore, you need to install the librabry _**lottie-react-native**_ by running the command _**yarn add lottie-react-native**_. 

Now, go to _**https://lottiefiles.com/**_, you need to create a free account before you can be able to download animations, here you can search and download the animated activity indicator that you want to use, select to download the Lottie JSON file. Take the JSON file and put it inside your react native project (e.g assets/animation.json).

Now, you can create a shared component that you will use throughout your project, or wherever you want to use it. Let's have a look at the example of such component below: 

```
import React from 'react';
import Lottie from 'lottie-react-native';

const LoadingComponent = () => {
   return(
       <Lottie source={require('../src/assets/animation.json')} autoPlay loop />
    );
};
export default LoadingComponent;
```

Here, we are importing Lottie from 'lottie-react-native', a library that we installed, the component returns and animation which is created from the JSON file we downloaded from _**https://lottiefiles.com/**_. Notice, what we return on the component has _**autoPlay**_ and _**loop**_, **_autoPlay_** is for making the animation play automatically, and _**loop**_ is for the animation to continue playing, while rendered. 

You can always modify or play around these on the React useEffect, give the animation the behavior you want based on some conditions.

You now have an animated activity indicator on your app.

Thank you very much for reading.🤓😎
Difference between a virtual DOM and a real DOM
Tags: webdev, dom, react, frontend
Published: 2023-03-21 12:29:39



DOM stands for Document Object Model. It is a programming interface for web documents that represents the page so that programs can change the document structure, style, and content. Essentially, it provides a structured representation of the HTML (or XML) document as a tree-like structure, with each node in the tree representing an element, attribute, or piece of text in the document.

Through the DOM, web developers can manipulate the HTML document using JavaScript, allowing for dynamic changes to a webpage's content, layout, and behavior. For example, the DOM can be used to add, remove, or modify elements on the page, change the styles and attributes of elements, or handle user interactions like clicks and keystrokes.

Modern web browsers support the DOM, a fundamental technology used in web development.

## Virtual DOM vs Real DOM

**Virtual DOM**

1. Can't directly update HTML.
2. Acts as a copy of the real DOM, which can be frequently manipulated and updated without a page refresh.
3. More of a pattern than a specific technology
4. Synced with the real DOM with "react-dom"
 

**Real DOM**

1. Directly updates and manipulates HTML.
2. Creates a new DOM/full repaint if it is updated
3. An object-based representation of an HTML document + an interface for manipulating that object 

## Conclusion
Understanding the differences between the Virtual DOM and the Real DOM is important, as it allows for the optimization of applications and leverages the benefits of the Virtual DOM to build fast, efficient, and scalable user interfaces.
Learn CSS intuitively - Box Model
Tags: css, frontend, eli5, webdev
Published: 2023-03-21 12:19:25

Hey there! Welcome to our new series of posts where we try to decipher CSS concepts in an intuitive manner - by relating those concepts to something you already know in the real world so that we can learn CSS like never before! Are you ready for the first concept?? Let's go! 🚀

First up is - The "CSS Box Model". Everything on a webpage is a box for CSS and every box is like a sandwich 🥪! Just like a sandwich has several layers, each with its own purpose, a box in CSS has several layers that make up its overall appearance and behavior.

Let's break down the CSS box model into its layers, starting from the inside out:

1. Content: The content layer is like the yummy *filling in a sandwich*. It's the actual content that goes inside the box, such as text, images, or other HTML elements (boxes).
2. Padding: The padding layer is like the *crust of a sandwich*. It surrounds the filling and separates it  from the wrapping paper of the sandwich. Similarly, padding provides a buffer between the content and the edges of the box. You can add padding to create some breathing space around the content.
3. Border: The border layer is like the *wrapping paper around a sandwich*. It adds a visible border around the content and padding layers. You can customize the border's thickness, color, and style.
4. Margin: Lastly, the margin layer is like the *empty space around a sandwich on a plate*. It's the space between the box and any surrounding elements. You can add margin to create some distance between the box and other elements on the page...so that your sandwiches don't just touch each other. 😁

![A sandwich on plate labelled with different parts of the CSS box model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s7tnned30j0bolwfwso.jpg)

So, you can see that just like how a sandwich has multiple layers that make up its structure and appearance, the CSS box model has multiple layers that does the same for the box. Understanding the box model is very important in controlling the layout of your web pages, so make sure you practice it well enough. You can hop over to [CSSBattle](https://cssbattle.dev/play/3) and solve some targets to practice your box model learnings.

How did you like this post? Do you have questions about the CSS box model? What next concept would you want us to give a shot at?

[Let us know on our forum](https://community.cssbattle.dev) or on the [Twitter](https://twitter.com/css_battle/status/1638149293344272384?s=20) post.
Top 4 apps that boost online store conversions
Published: 2023-03-21 12:14:41

The Amazon tax on retail is crippling the growth for brands. Couple this with the increasing tax every year now with Amazon advertising, and growing Ad-costs - brands are now operating on razor thin margins. There’s little left to do product innovation. Simply put, they need apps that can help them  make their stores as efficient in sales as Amazon.

An amazing theme and webhost is a great place to launch your store. But the real sales is all about how you run it everyday - which is all about the three pillars of

- Data driven merchandising
- Exciting sales & promotions
- Made for you experiences

There are a bunch of fragmented apps in the Shopify ecosystem that solve for only one or two of these use-cases, but not all. With 7,000+ integrations in the Shopify App Store, it can be overwhelming trying to figure which apps are right for your store.

Below are some of the top apps which I absolutely love using-

1. [ModeMagic by Mason](https://getmason.io/?utm_source=dev+to&utm_medium=search-organic&utm_campaign=mason-website)
2. [Justuno](https://www.justuno.com/)
3. [Rebuy](https://www.rebuyengine.com/)
4. [Privy](https://www.privy.com/) 

You should definitely try these out if you want to boost conversions in your online store. Start some free trials to see if it's a right fit for your store. If not, there's tons of other apps in the App Store that you can check out too.
Paracetamol.ts💊| #32: Explica este código TypeScript
Tags: typescript, javascript, spanish, webdev
Published: 2023-03-21 12:00:00

## **<center>Explica este código TypeScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark> </center>
¿Cómo se accede a una propiedad estática?

```ts
class Computer {
  static ram: number = 8;
}
```

- A. `Computer.ram`
- B. 
```ts
let com = new Computer()
com.ram
```
- C. `Las propiedades estáticas no existen en TypeScript`
- D. `Ninguna de las anteriores` 

{% spoiler **Respuesta** %} 

✅ A. `Computer.ram`

Para acceder a una propiedad estática en TypeScript debemos llamarla directamente desde la clase, es incorrecto crear una instancia de clase. 

{% endspoiler %}

---
The Ultimate Face-Off: Building Your Own Backend vs. Using Firebase & Supabase - Which Path Leads to Full Stack Success?
Tags: webdev, discuss, cloud, productivity
Published: 2023-03-21 11:55:44

🚀💻 Hey, there fellow code warriors! Ever found yourself in a sticky situation, trying to decide whether to build your backend from scratch or use services like Firebase and Supabase? Well, fear not, because I've got your back (pun intended)! Today, we're diving headfirst into the epic battle of the backends and uncovering the path that leads to full stack success!

## Round 1: Flexibility & Customization 🧱🔧

Building Your Own Backend: When it comes to flexibility and customization, creating your own backend is the heavyweight champion! You call the shots, build the infrastructure, and mold it into your perfect vision.

Firebase & Supabase: On the flip side, Firebase and Supabase provide a ready-to-use framework, making customization a tad more limited. But hey, sometimes constraints spark creativity, right?

## Round 2: Time & Effort ⏰🏋️‍♂️

Building Your Own Backend: Be prepared to flex those coding muscles and invest some serious time into building, testing, and maintaining your backend.

Firebase & Supabase: Need a quick solution with minimal effort? Services like Firebase and Supabase are your best friends. They handle the heavy lifting, so you can focus on making your app shine.

## Round 3: Scalability & Maintenance 📈🔧

Building Your Own Backend: With great power comes great responsibility. Scaling and maintaining your backend can be a challenge but also a fantastic learning experience.

Firebase & Supabase: These services are designed for scalability, taking the stress of maintenance off your shoulders. They grow with your app, so you can code with confidence.

## Round 4: Cost 💸💸

Building Your Own Backend: Building your backend can be cost-effective, depending on your infrastructure choices. But remember, time is money, and maintenance costs can add up!

Firebase & Supabase: While they offer free plans, costs can rise as your app grows. But hey, that's the price of convenience, right?

🏆 And the winner is... 🏆

Well, the truth is, there's no one-size-fits-all answer. The best choice depends on your project's needs, your skillset, and your goals. Are you a customization-loving, hands-on dev? Building your own backend might be the way to go. Or, if you value quick development and a managed solution, Firebase and Supabase could be your ticket to full stack success!
Conclusion 🌟

Alright, code warriors, that wraps up our ultimate backend face-off! Now, I want to hear from YOU! Which path do you prefer: building your own backend or using services like Firebase and Supabase? Share your experiences, insights, and war stories in the comments below. Let's keep the conversation going and help each other navigate the exciting world of full stack development!
Resolvendo problemas no HackerRank: Pulando as nuvens(revisado)
Tags: javascript, programming, beginners
Published: 2023-03-21 11:55:22

Olá, seja bem vindo a mais um Resolvendo problemas no HackerRank: No caso de hoje, ajudar uma criança que está jogando um jogo onde o personagem pula sobre nuvens,mas ele gasta energia e existem algumas condições. Vejamos agora.

**Jumping on the Clouds: Revisited -**

Uma criança está jogando um jogo de salto nas nuvens. Neste jogo, existem nuvens numeradas sequencialmente que podem ser nuvens de trovoada ou cúmulos. O personagem deve pular de nuvem em nuvem até chegar ao início novamente.

Há uma série de nuvens e um nível de energia. O personagem parte e usa unidade de energia para dar um salto de tamanho para a nuvem. Se cair em uma nuvem de tempestade, , sua energia () diminui em unidades adicionais. O jogo termina quando o personagem pousa de volta na nuvem.

Dados os valores de , e a configuração das nuvens como uma matriz , determine o valor final de após o término do jogo.

Como você pode ver na descrição, a entrada do método esperado será um array de 1,0 e também um inteiro que é o tamanho do salto. Usando um exemplo pode tornar muito mais fácil de entender. vamos considerar que temos a seguinte entrada e encontrar o resultado esperado de acordo.

- int c[n]: O tipo de nuvem no caminho
- int k: O comprimento de cada pulo

Queremos retornar:

- int: A quantidade de energia restante.

Um pouco confuso? Vejamos um exemplo:


```
Function
--------
n = 8, k = 2
c = [0, 0, 1, 0, 0, 1, 1, 0]

O resultado desse input será: 92
```

Pode estar se perguntando: Por quê esse valor? Devemos lembrar que o valor de energia que começamos é 100, e `k`representa o comprimento de pulos, além de `n`ser o "número de casas" a se pular. Sendo assim, 100 -> 97 -> 96 -> 93 -> 92

Vejamos a criação do código:

```
function jumpingOnClouds(c, k) {

  let e = 100;
  let i = 0;
    do {
        if(c[i] == 1) e -= 2;
        e--;
        i = (i + k) % c.length;
    } while(i !== 0)
    
    return e;
}
```

A função tem como objetivo simular o jogo "Jumping on Clouds", onde o jogador salta em nuvens numeradas de 0 a n-1 e deve evitar as nuvens com valor 1. 


A variável "e" é inicializada com 100, que representa a energia do jogador. A variável "i" é inicializada com 0, que representa a nuvem em que o jogador começa. 


Em seguida, a função utiliza um "do-while" para simular o movimento do jogador. Dentro do loop, é verificado se o jogador está em uma nuvem com valor 1, se estiver, sua energia é reduzida em 2. Em seguida, a energia é reduzida em 1 para cada salto. A variável "i" é atualizada para a próxima nuvem que o jogador deve saltar, utilizando o operador módulo para garantir que o jogador não ultrapasse a última nuvem. 


O loop continua até que o jogador retorne à nuvem inicial (i != 0). Por fim, a função retorna a energia restante do jogador após todos os saltos.

Assim, concluímos mais um _Resolvendo problemas no HackerRank:_ até a próxima.
TECH Job's VS AI - The Future.
Tags: ai, chatgpt, microservices, beginners
Published: 2023-03-21 11:54:44

Microservices are bits of code written and deployed independently to run in connection with other bits of code and exchange data through an API.

This is a serious problem. Joe just completed a work that two developers in an organisation would have done for three days. He did in 3 hours.

As a programmer, this isn't a time for mediocrity. You either go hard and become the top 1% or go home.

AI won't replace developers anytime soon. But it will make the existing ones so efficient and powerful there will be no need to hire more than one dev.

In the last major staff meeting, Mark Zuckerberg kept repeating one word - "Efficiency" and deploying every method to improve efficiency.

In the same meeting, he said fewer than 10,000 would lose their Facebook jobs. Why? Efficiency.

As for the people coming into programming. I welcome you but be warned - the streets are about to become more slippery.

You must clench the belt with your teeth and grit to make any headway.

The world has moved past what we know and understand. Ai has come to sit, and many more will realise that tech jobs are no longer as wide west as we know.

Companies won't look for junior Devs any longer.

They will pay for premium AI tools and give senior devs more access to tools to make them beasts.

More will be delivered for less.

[Read More here](https://blog.learnhub.africa/category/blockchain/) 

Is the future of tech Over?

No.

Currently, from what I have seen this past few days with GPT-4, I can write my Blockchain, create tokens, and build a DEX in a few days.

With GPT-3, I could copy code in a language I don't know, and as it explains it using terms from another language, I know better.

GPT-4 takes it a step further; you can supply it with a GitHub link that will tell you what the repo does, scan each of the freaking files and explain the code to you like you're a child!!!

Getting a Tech Job just got harder.

Spend more time on tools rather than on skills.

Ai is taking us all to where we don't know, but make sure you are at the front of the wave.

Research new tools and how they can aid in writing your regular codes, the era of Youtube videos won't matter in the coming years.

Be first in any new technology.

AI takes no prisoner, and they won't be a second wave of slackers.

Wake up.

Written by @Ebube Maduike