teleren/devto huggingface dataset:
Deploy a Serverless Node.js application to Vercel in 5 minutes
Tags: node, devops
Published: 2022-03-05 17:13:44

## Table of Contents
* [Introduction](#introduction)
* [Add vercel.json file](#add-verceljson-file)
* [Create a Vercel project](#create-a-vercel-project)
* [Conclusion](#conclusion)
* [References](#references)

## Introduction

Deploying a Serverless Node.js application to Vercel can be easily done by just adding a vercel.json configuration file to your project root directory.

Here I will show you how it can be achieved.

> Please note that Vercel platform is serverless and designed for static frontends and Serverless Functions. There is no running server.

## Add vercel.json file

First of all, add a vercel.json file in the root directory of your existing Node.js project.  Add and commit the file to the Git repository.

```json
{
   "version": 2,
   "name": "music-album",
   "builds": [
      { "src": "app.js", "use": "@vercel/node" }
   ],
   "routes": [
      { "src": "/(.*)", "dest": "/app.js" }
   ]
}
```

## Create a Vercel project

1. Login [Vercel](https://vercel.com/).

    If you don't have an account yet, you can [sign up](https://vercel.com/signup) for a free account.

2. Click the "+ New Project" button on the Overview tab.

    ![New Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtvk8x13pk8sj9pmnvmb.png)

3. Import Git Repository by selecting the Git provider. GitHub, GitLab and Bitbucket are available.

    ![Import GIt Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oydsyk3tmfsgby8fp12.png)

4. Import Git Repository.

    ![Import GIt Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vi4jxp91v29piko2jly.png)

5. Configure the project.
    1. Give a Project Name.
    2. Click the "Deploy" button.
    The deployment should be triggered.

    ![Configure Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce8vop4ujj6lr723kzxh.png)

6. Check the deployment status.

    ![Check deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbzne0rv3v4prmst95av.png)

7. Click the link under DOMAINS to view the application in browser.

    ![View deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yf6gq0xovm6uwfk3qtpm.png)

## Conclusion

Congratulations!  Your Node.js application is now configured to be deployed to Vercel easily by adding a configuration file to the project.

## References
1. [Source code in GitHub](https://github.com/adafycheng/music-album)
2. [Live demo at Vercel](https://music-album-liart.vercel.app)
3. [Project config with vercel.json](https://vercel.com/docs/project-configuration)
How to use wildcard domains with Next.js Image component
Tags: javascript, nextjs
Published: 2022-03-05 20:17:26

Some time ago, I was integrating an app with a medium RSS feed, and I ran into a lot of obstacles. Most of them being to the fact that Medium does not want you to use their data. As a consequence, all APIs were deprecated, the API key creation capability was removed, and RSS feeds were proxied by Cloudflare. But, the issue we’re going to cover in this article doesn’t fit in the category.
I wanted to get four things from the Medium, the title, description, date, and image of the three last articles. After resolving all the unrelated issues, I created a component that uses next/image to render the image, added the image's domain to the config, and discovered a problem. A problem was that each image had a different subdomain.
For example, The first image could be https://cdn-images-1.medium.com/imagePath...., and the second one https://cdn-images-4.medium.com/imagePath..... At first, it seemed like the solution is quite simple, just add both subdomains to the next.config.js


```tsx
// next.config.js  
  
module.exports = {  
  images: {  
    domains: ['cdn-images-1.medium.com', 'cdn-images-4.medium.com'],  
  },  
})
```

It would work, but it is not reliable since the subdomain is dynamic, it can change anytime when fetching new content. So rather than adding all the domains to the config, we could resolve this issue with a simple regex. So I tried it and quickly found out that it is not supported in next.js. At first, I did not understand why, but then it became clear - it could create a security loophole if the regex was not strict enough.
So, since both solutions were not enough, I decided to build a custom one, an image proxy that downloads an image and pipes it back to the browser. Of course, with all the validation stuff to make it more secure.

It ended up being big enough to make a library out of it, and here is how you would use it:

```tsx
// pages/api/imageProxy.ts  
  
import { withImageProxy } from '@blazity/next-image-proxy'  
  
export default withImageProxy({ whitelistedPatterns: [/^https?:\\/\\/(.*).medium.com/] })
```

```tsx
import NextImage from 'next/image'  
  
export function SomeComponent() {  
  const actualImageUrl = '<https://cdn-images-1.medium.com/max/1024/1*xYoAR2XRmoCmC9SONuTb-Q.png>'  
  
  return <NextImage src={\`/api/imageProxy?imageUrl=\${actualImageUrl}\`} width={700} height={300} />  
}
```

It is written with TypeScript, so you do not have to worry about types, and you can download it through npm:
```tsx
$ npm i --save @blazity/next-image-proxy  
  
# or  
  
$ yarn add @blazity/next-image-proxy
```

Github: [https://github.com/Blazity/next-image-proxy](https://github.com/Blazity/next-image-proxy)
Example: [https://next-image-proxy.vercel.app/](https://next-image-proxy.vercel.app/)
Major differences between Web2  and Web3
Tags: web3, web2, solidity
Published: 2022-03-05 19:56:26

IN this post, I will explain the major differences between the generation of the web we are used to which is <b>Web2.0</b> and <b>Web3.0</b> which is the future we are looking forward to.

To get started I will show us a list of differences that I have highlighted:

- Personalization:with Web3.0, we will experience better and more customized user experiences, relevant search results that does not include ads and more...,basically you control what you see, but with Web2.0 using search engines like Google,Bing and more, you are shown what they want you to see, you are controlled. 

- Permissionless:In Web3.0 there is no governing body we are the ones governing ourself, there are no restrictions to who can be part of the network. Services are available to everyone using Wb3.0, it guarantees freedom of individuals.
Web 2.0 on the other hand is a permission filled network, the network most times subconciously/conciously programmes our mind to perform actions, sign up for newsletters, watch ads and more.

- Centralized servers:Web2.0 are powered by servers that can be accessed, altered or removed by any party that gains controls of the server, including big Tech corporation, governments and hackers.Web3.0 comes with technologies like Interplanatery File System(IPFS), it is a peer-to-peer (p2p) file sharing system. Peers from all around the world can access content, relaying it, storing it, or doing both. IPFS can find what you're looking for by using its content address rather than its physical location.

- Decisions will be made by the users not by big Tech companies in Web3.0, your actions are limited.

- Secure Peer to Peer network: 
Web3 gives users the ability to share their data privately, connect,transact without relying on third parties. But in Web2.0 there are corporations that scrutinize your data and information sent to give you a personalized that benefits them. Peer to Peer can be explained as a group of computers that are linked together with equal permissions and responsibilty for processing data - there is no decentralized centralized server.
https://blockgames.gg/
https://nestcoin.com/
https://zuri.team/
React Native - Adicionando ícones em projeto CLI
Tags: beginners, programming, reactnative, javascript
Published: 2022-03-05 19:46:38

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

O ícone do aplicativo é algo que reconhece exclusivamente seu aplicativo de milhares de outros por aí. Na maioria dos casos, o ícone do aplicativo pode ser o logotipo da empresa/produto ou então alguns símbolos especiais ou qualquer parte específica do nome/logo.

### No android

A partir do Android 8.0, introduziu o conceito de ícones do iniciador adaptável este ícone pode se auto-alinhar dependendo do dispositivo ou aplicativo inicializador. O conceito de ícone de lançador adaptável é uma das muitas padronizações que o Android apresenta. Para alterar o ícone, você só precisa substituir os ícones atuais na pasta `mipmap` chamada `ic_launcher` e `ic_launcher_round`. Você pode encontrar o mesmo em `AndroidManifest.xml` dentro da tag do aplicativo. 'ic' em `ic_launcher` significa 'ícone' precisamos adicionar ícones em diferentes pastas 'mipmap' o diretório de acesso é o `src/main/res/mipmap`. De acordo com a resolução do telefone, o dispositivo escolherá o ícone a ser exibido.

![Diretório Android](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cdjkadfpoepjc1xyfqn.png)
 
Medidas do ícone do Android
Tamanho: 512px x 512px
Formato: PNG de 32 bits Espaço de
cor: sRGB
Tamanho máximo do arquivo: 1024KB
Forma: Quadrado completo

### No IOS

Também é um procedimento tranquilo de realizar, abra `projectname.xcodeproj/projectname.xcworkspace` no diretório raiz, clique na pasta chamada `Images.xcassets`.

![IOS Diretório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/re0izvodj4hyb5kesa4b.png)

Arraste e solte o ícone com a dimensão desejada e pronto!.
Medidas do ícone IOS
Formato: PNG
Espaço de cores: sRGB/P3
Camadas: achatadas sem transparência
Forma: Quadrada sem cantos arredondados.

Tem uma ferramenta incrível que pode ajudar a gerar as imagens dos logos no tamanho correto para ajudar nossa vida, para acessar basta [clicar aqui](https://appicon.co/)

Fontes onde pesquisei esse conteúdo:

- https://reactnative.dev/docs/getting-started
Web2 vs Web3...Two major differences between them.
Tags: web3, web2, blockchain
Published: 2022-03-05 19:35:34

1. Web2 is dynamic content that allows users to interact with content published on the web which is possible with technologies like JavaScript, HTML and CSS, which allows developers to build apps where users can interact with content in real-time _**while**_ Web3 is a semantic web, that is, rather than a user searching for content based on keywords or numbers, AI could be used to understand and interpret the semantics of the content on the web like humans. And this will help users to find, share and combine information more easily.


2. Web2 is centralized i.e it has a central authority. Central authority can censor data, potentially cutting off parts of the network from interacting with the rest of the network **_while_** Web3 is decentralized i.e there's no permission needed from a central authority to post anything on the web, no central controlling node and no single point of failure.

#[_Blockgames_](https://blockgames.gg/)
#[_Nestcoin_](https://nestcoin.com/) 
#[Zuri](https://zuri.team/)
How to create breadcrumb in wordpress without plugin?
Tags: wordpress, webdev, beginners, wp
Published: 2022-03-05 19:29:33

In this article we will teach you how to create breadcrumb in wordpress without plugin.

Breadcrumb is important module of your website or blog. It allows your website visitors navigate through your website pages, posts or categories and increases your website’s page views.

First of all paste the code given below in your functions.php file located at root_directory_path/wp-content/themes/your_theme/functions.php

```php
function get_breadcrumb() {

	echo '&#127962; <a href="'.home_url().'" rel="nofollow">Home</a>';
	
	if (is_category() || is_single()) {
		echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
		the_category(' &#187; ');
		if (is_single()) {
			echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
			the_title();
		}
	} elseif (is_page()) {
		echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
		echo the_title();
	} elseif (is_search()) {
		echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
		echo '"<em>';
		echo the_search_query();
		echo '</em>"';
	}
}
```
Now we have a function get_breadcrumb() and we can create breadcrumb at any place of our website or blog. Let’s say we are creating a breadcrumb in header of our website or blog. Then we will call function get_breadcrumb() at our header file located at root_directory_path/wp-content/themes/your_theme/header.php

```php
<?php if (!is_home()): ?>
      <div class="breadcrumb">
        <?php get_breadcrumb(); ?>
      </div>
<?php endif; ?>
```

And here we have added a if condition !is_home() because we don’t want to show breadcrumb on home page of our website or blog.

And here below is a css of our breadcrumb. So, paste this css in your style.css file located at root_directory_path/wp-content/themes/your_theme/style.css

```css
.breadcrumb{
	background: #FFF;
	margin-top: 2%;
	padding: 10px 20px;
}
```
That’s it Now you have learned how to create breadcrumb in wordpress without plugin and try, test and create your breadcrumb in your website or blog without plugin.

And if you want more tutorials and tricks about wordpress then visit our WordPress Page and follow us on facebook, twitter, tumblr, linkdedin and if you like this article then share this.

Please like share and give positive feedback to motivate me to write more.

For more tutorials [visit my website](https://www.w3courses.org/) 

Thanks:)
Happy Coding :)
How to check (without installing any tools) how your webpage looks like for people with vision deficiencies
Tags: webdev, a11y, javascript, tooling
Published: 2022-03-05 19:15:31

Accessibility is one of the most popular topics in the frontend world recently. And I’m really glad about that. Making webpages easier to navigate, understand, and generally more useful for people with different diseases and problems make the Internet a better place. But sometimes it may be difficult to really understand needs of our users. For example, have you ever wondered how your webpage looks like for people with color blindness? Or other vision deficiencies? 

Now you don't have to use your imagination - you can just use your browser and check it. You don't have to install any special tools - just open Chrome DevTools already built-in your browser. How to do so?

1. Open the Chrome browser
2. Go to the page you want to test
3. Open the Chrome DevTools Panel (ctrl + shift + I on Linux/Windows or cmd + shift + I on Mac)
4. Click 3 dots on the right side
5. Choose Rendering
6. Find dropdown titled “Emulate vision deficiencies”
7. Choose one of the options from the menu

{% embed https://youtu.be/tE6C4Vc7U9c %}

It’s really eye-opening, isn’t it? Test that option on many different webpages. The world looks completely different! There are many other options and tools to check accessibility on your page (e.g. automatic audits which I'll describe in the next article). But nothing will change until you start thinking about it during development or testing. I hope, that exercise will help you remember how important accessibility is and from today you'll help making the Internet a place accessible for everyone.
Simple vim / terminal color changing
Tags: vim, terminal, neovim, alacritty
Published: 2022-03-05 19:14:41

# Why?
So I have been looking for solutions that sync my vim colors with my terminal colors.  And there are many awesome solutions out there.  But none of them gave me the flexibility /freedom I wanted that was simple.  So I decided to try to build my own system.

# Terminal setup
So there are two options here:
- [alacritty-shell](https://github.com/casonadams/alacritty-shell)
- [wahl-shell](https://github.com/casonadams/walh-shell)

I prefer `alacritty-shell` because it is the simplest, fastest, and most flexible. However, it requires the use of the [alacritty](https://alacritty.org/) terminal.

# Vim setup
Install [walh](https://github.com/casonadams/walh) a clean vim colorscheme.

`walh` will use the first 16 colors from the terminal, and `orange`(color208) and `grey`(color247).

# Result
Vim colorscheme that matches the terminal colors.  Now one can open vim and decided to change the terminal colors from a light theme to a dark theme all from running `alacritty_{theme}` or `walh_{theme}`.  This gets better if one lives in a multiplex terminal like tmux.  This opens doors for setting up scheduled tasks to switch themes based on the time of day.

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1indk00pt1col9c3syt2.png)
How to Use Session in Node.js
Tags: javascript, node, webdev, sessionmanagement
Published: 2022-03-05 19:01:32

Websites runs on HTTP Protocol. HTTP Protocol is a stateless protocol. It means when a HTTP Request completes the browser and server communication stops. So, We use the session to maintain and remember the user’s state at server. We can store the user’s session in database, files or server memory. In this tutorial we will learn how to use session in Node.js.

## How sessions works
When the client makes a login request to the server, the server will create a session and store it on the server-side. When the server responds to the client, it sends a cookie. This cookie will contain the session’s unique id stored on the server, which will now be stores on the client. This cookie will be sent on every request to the server. A cookie is a key-value pair that is stored in the browser. The browser attaches cookies to every HTTP request that is sent to the server.

## Create a Node Project and Initialize
```ssh
npm init –y
```

## Now Install Express
```ssh
npm install express express-session cookie-parser
```

## Set the Express Session Options
About [express session options you can read in detail here.](https://www.npmjs.com/package/express-session#sessionoptions)

```javascript
const oneDay = 1000 * 60 * 60 * 24;
app.use(sessions({
    secret: "thisismysecrctekey",
    saveUninitialized:true,
    cookie: { maxAge: oneDay },
    resave: false 
}));
```

## Create and Use Session in Node.js
```javascript
const express = require('express');
const cookieParser = require("cookie-parser");
const sessions = require('express-session');
const http = require('http');

const app = express();
const PORT = 4000;

// creating 24 hours from milliseconds
const oneDay = 1000 * 60 * 60 * 24;

//session middleware
app.use(sessions({
    secret: "thisismysecrctekey",
    saveUninitialized:true,
    cookie: { maxAge: oneDay },
    resave: false
}));

app.use(cookieParser());

app.get('/set',function(req, res){
    req.session.user = { name:'Chetan' };
    res.send('Session set');
});

app.get('/get',function(req, res){
    res.send(req.session.user);
});

http.createServer(app).listen(3000, function(){
    console.log('Express server listening on port 3000');
});
```
That’s it like this way you can create and understood how to use session in Node.js.
Please like share and give positive feedback to motivate me to write more.

For more tutorials [visit my website.](https://www.w3courses.org/)
Thanks:)
Happy Coding:)
Web 2.0 Vs. Web 3.0 
Tags: beginners, web3, webdev, blockchain
Published: 2022-03-05 19:00:08

Web 2.0 is the current version of the internet. It offers services for free in exchange for your personal data. They are centralized applications. The programmers has central authority over their program and your data giving them the chance to edit or alter data at their own wish or when a need arises. Internet access and social media networks are driven by the Web 2.

Web 3.0 has more improvement than the Web 2. Web 3.0 is a decentralized network that runs on the blockchain.

**The blockchain is basically data stored in consecutive groups. You can think of it as a distributed and decentralized ledger. **

Web 3 allows everyone to participate on the network without monetizing their personal data. While Web 2 is dominated by components, Web 3 is dominated by everybody. Everyone on the blockchain network has permission to use the network without restrictions or getting blocked. Also, unlike the Web 2, it does not require a middle man service to carry out transactions (communications).

The whole idea of the Web 3 is built on transparency, security and immutability.

Thanks to:
(https://blockgames.gg/
(https://nestcoin.com)/
(https://zuri.team/
Display information about HTTP status codes
Tags: http, httpstatuscode, shell
Published: 2022-03-05 18:33:30

---
title: Display information about HTTP status codes
published: true
description: Shell script for displaying information about HTTP status codes.
tags: http, httpstatuscode, shell
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz08raxzmcrue2kiy4ui.png
---

In this GitHub repository, you can find my small Shell script for displaying information about HTTP status codes.

https://github.com/ABGEO/httpinfo
Project Skill Tree: Tech Stack
Tags: react, nextjs, webdev
Published: 2022-03-05 18:32:56

It's the honeymoon period of the project where I go _shopping_ for technologies and frameworks. I have an idea of _what_ I would like to do. I'm currently trying to solve the _how_.

## Graphic Design

### [Figma](https://www.figma.com/)

It's the web dev design standard nowadays.

## Version Control

### [Git](https://github.com/)

Can't live without it. Subversion is a viable alternative that my old workplace used.

## Frontend

### JavaScript

#### [ReactJS](https://reactjs.org/)

It's a versatile library that is worth learning for today's web dev jobs.

#### [TypeScript](https://www.typescriptlang.org/)

I always end up learning a lot when I write with typed languages.

#### [D3 (for JavaScript visual features)](https://d3js.org/)

I tried looking into other alternatives, but they tend to be gigantic frameworks costing thousands of dollars per developer. They looked cool though. Browsing for D3 tutorials yields very few useful results. I'll be relying a lot on [Free Code Camp's D3 tutorial](https://www.freecodecamp.org/learn/data-visualization/)

#### [NextJS](https://nextjs.org/)

I will be using NextJS for this project because server-side rendering will be a faster method of presenting skill trees than client-side rendering done with vanilla React. I was a bit weary of not being able to control my backend due to my last project, which was [my portfolio site built in Gatsby](https://thomasjameslibianofrancis.gatsbyjs.io/). Gatsby came with one-too many shortcomings since it was only a static site generator. Re-rendering components was not possible on Gatsby, but I'm hosting a website for free from their cloud so who am I to complain? The alternative would be using create-react-app to start my project, and I would have used the Django backend framework for APIs and GraphQL

### CSS, Animations and Transitions

#### [Tailwind CSS](https://tailwindcss.com/)

Tailwind CSS was fun to work with on my portfolio project. Bootstrap is a viable alternative, but I felt like Tailwind was easier to customize without a `.css` file.

#### [Animxyz for Animations and Transitions](https://animxyz.com/)

I finally get to break out Animxyz. I've been drooling over this composable animation framework for a while now. I hope it won't interfere with Tailwind CSS.

### Testing

#### [Cypress](https://www.cypress.io/)

I feel like I'm going to need to learn Cypress at some point anyways. I really want to focus on Test-Driven Development this time so development becomes easy.

## Backend

### [NextJS](https://nextjs.org/)

I'll check out the limits of NextJS.

## Deployment

### [Vercel](https://vercel.com/)

It is supposedly free and easy to deploy a NextJS app on the Vercel platform so I'll need to try that out.

## Database

### [FaunaDB](https://fauna.com/features)

I'm going to break out FaunaDB for this project. Fauna handles how data is stored and modeled: it's another thing I won't need to do myself.