teleren/devto huggingface dataset:
How to create a simple API in Vercel
Published: 2023-03-02 18:32:06

## Introduction

Sometimes creating an API and deploying it to a cloud provider like AWS, GCP, or Azure can be a difficult task. However, Vercel makes it extremely simple to create and deploy your API to the cloud platform. With this tiny tutorial, you can have a simple API in minutes

## Repository
https://github.com/cesmunoz/simple-vercel-api

## Requirements

- Nodejs
- A Vercel account
- Vercel CLI (In this example we are pushing everything directly to vercel)

```bash
npm i -g vercel
```

Do you have everything set up? Awesome! Let’s code

## Creating our API simple project

Let’s create a project, following the next commands:

```bash
mkdir simple-vercel-api
cd simple-vercel-api
npm init -y

```

We need to install the vercel package

```bash
npm install vercel --save-dev
```

In order to tell vercel that this is an api we need to create a folder called ******api,****** that’s it! Really simple, right?

```bash
mkdir api
```

Inside the API lets create a file called hello-world.js

```bash
touch api/hello-world.js
```

Inside the hello-world.js we are going to add a simple code

```js
module.exports = (req, res) => {
  res.send({
    status: 200,
    message: "Hello world!!",
  });
};
```

aaaand we’re done! Pretty simple don’t you think?

## Testing locally

In order to test it locally, we need to do the following.

Go to package.json and add a new item in the scripts:

```json
scripts: {
	start: "vercel dev"
}
```

(Make sure you already configure the vercel cli correctly - `vercel login`)

Now we can do `npm start` and you need to follow the wizard. Similar to this:

```bash
npm start

> simple-vercel-api@1.0.0 start
> vercel dev

Vercel CLI 28.16.12
? Set up and develop “~/repos/simple-vercel-api”? [Y/n] y
? Link to existing project? [y/N] n
? What’s your project’s name? simple-vercel-api
? In which directory is your code located? ./
> Ready! Available at http://localhost:3000
```

Open a browser a put the following url: `http://localhost:3000/api/hello-world.`
The response should be:

```json
{
	"status": 200,
	"message": "Hello world!!"
}
```

## Deploy to vercel

To make the api live in production we need to do some adjustments to the project.

In package.json we will add a new script command:

```json
"scripts": {
    "deploy": "vercel --prod"
},
```

And in the command line type `npm run deploy`. Wait a few minutes and you will have a response similar to this one:

```bash
npm run deploy

> simple-vercel-api@1.0.0 deploy
> vercel --prod

Vercel CLI 28.16.12
🔍  Inspect: https://vercel.com/[your_user]/simple-vercel-api/6PmNoyX4CfhdZhDny8LJmANV7AxB [3s]
✅  Production: https://[your_url].vercel.app [20s]
```

Go again to the browser and put the Production url that mentions above `https://[your_url].vercel.app/api/hello-world` and you should have the same response that you had locally

```json
{
	"status": 200,
	"message": "Hello world!!"
}
```

## Conclusion

Creating a simple API on Vercel is straightforward and super easy. With just a few configurations you can have your own API in the cloud.

Please let me know if you find it super useful
Cheers!
Ces
ZERO TO ONE.
Tags: beginners, business, grow
Published: 2023-03-02 18:26:32

Business Thursday 
 Forget Work, Grab Coffee, Relax and Enjoy Courtesy of 
@MutuaAbel
Your Boss Can Thank Me Later!
Watch these two episodes to learn from @MutuaAbel story.
Links:

1. 
https://www.youtube.com/watch?v=TNOhtEH2vjM&list=TLPQMDIwMzIwMjOxH3paZLudbw&index=6

2. https://www.youtube.com/watch?v=5IdkZK0sRV8&list=TLPQMDIwMzIwMjOxH3paZLudbw&index=11
Linkify — Earnings on link shortening
Tags: tooling, earn
Published: 2023-03-02 17:50:56

**[Linkify](https://linkify.ru/r/MissFy)** is a link reduction service that pays for clicks on the links you share. It’s an easy way to **make money** by simply sharing your links with others. The more traffic your link receives, the more money you can earn. To get started, all you need to do is create an account and add your website or blog URL so **[Linkify](https://linkify.ru/r/MissFy)** can track clicks on it and pay out accordingly. Once set up, start promoting the shortened URLs generated by **[Linkify](https://linkify.ru/r/MissFy)** across social media platforms like Twitter, Facebook or LinkedIn and watch as those clicks turn **into cash**!

## Home

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

To start earning money, you need to log in to Linkify

## Personal Cabinet

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



After authorization we have access to a personal account with all the functions

Note: the site interface is not always displayed in English, enable auto-translate the page in your browser

## Links

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



In this section we can shorten links, customize them, as well as see detailed statistics on clicks

## Rates

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



In the next section we can find out the current information about the tariffs. We can earn the most from conversions from Australia. If desired, we can download this table by clicking on the “Export” button

## Account

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



This section is no less important because here we can set up your account. You can add an avatar, enable a dark theme to protect your eyes, enable High Performance Mode and much more!

## Billing

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



Here we can link your account or electoral wallet for payments. The minimum withdrawal is only $1. Twelve payment systems are available for residents of different countries. List of all payment systems below:
WebMoney, Capitalist, Bank Card (Bank Transfer), Qiwi, YooMoney, Bank Card of Kazahstan, Bank Card of Ukraine, Russian Mobile Operators, Ukraine Mobile Operators

In addition, you can connect multiple accounts to the same payout method at once.

**[Start — linkify.ru](https://linkify.ru/r/MissFy)**
JavaScript Variables
Tags: javascript, beginners, programming, codenewbie
Published: 2023-03-02 17:41:39

They allow you to store data values in them for future use. Think about it this way, the variable is like a container where you can put a fruit. In the blue container, you can place an apple; in the yellow container, you can place an orange. When you need to find your orange, you refer to the yellow container.

Variables in JavaScript are declared using `var`, `let` or `const`.

```
var num;
let num1;
const num2; //Error. It must be initialized
```
The assignment operator `=` is used to give the variable a value. Note = does not mean equal to as in arithmetic.

The semicolon (;) is used in JavaScript like a sentence’s full stop (.). Did you see what I did there? 🙂

It indicates the end of that line of code. The code will run without the semicolon, but it is standard practice to include it.

The keyword `var` was used before 2015, and coding for older browsers

```
var x;
x = 1;
var y = 3;
var num = 100;
```
Variables can also be declared using a newer convention introduced in 2015, `let` and `const`

The keyword `let` is used if the value is likely to change.

```
let x;
x = 2;
let y = 24;
let num1 = 120;
```
The advisable method to declare a variable is using the keyword `const`. In this case, the value does not change.

```
const a = 3;
const b = 5;
const num2 = 150;
```
If you try to change the value of num2, it would result in an error.
```
num2 = 200 // Error
```
More than one variable can be declared on the same line of code.

```
let x = 1; y = 2; z = 3;
```
Alternatively, it can be written as such

```
let x, y, z;
x = 1;
y = 2;
z = 3;
```
Variable names can be simple or more elaborate. Ideally, they should be descriptive. It should describe the value stored in it. For example, if you want to store the price of an apple in a variable. Instead of declaring it as x, which is ambiguous.

```
const x = 1;
```
Use

```
const price = 1;
```
Even better
```
const priceOfApple = 1; // The variable is written in camelCase
```
Variables can store numbers, characters, strings or Boolean values. We will talk about these in the future. Let’s take a look at some more examples.

```
const firstName = 'John'; // String
let age = 24; // Integer
const loggedIn = true; // Boolean
```

**Rules for naming variables:**

1. They must start with a letter, an underscore (_) or the dollar sign ($)
2. They cannot begin with a number.
3. They are case-sensitive; A is not the same variable as a.
4. JavaScript uses camelCase.
How to clone a database from Heroku to your development environment
Tags: heroku, tutorial, docker, webdev
Published: 2023-03-02 17:40:29

As a software engineer, you may need to work with a database in your local development environment that is a replica of the production database. While this can be extremely useful for testing and debugging, it's important to remember that production databases contain sensitive information that should be handled with care. As a best practice, it's always recommended to have a redacted version of the production database that doesn't include any sensitive information such as user data or passwords.

Manipulating data directly from the production database can be risky and should be avoided whenever possible. Instead, creating a clone of the database from Heroku to your local environment can provide you with a safe and isolated environment to work in. In this article, we'll go over the steps to clone a database from Heroku to your local development environment, using Docker:

- Install Docker on your local machine if you haven't already done so. You can download Docker from the official website.
- Log in to the Heroku CLI by running heroku login on your terminal.
- Retrieve the name of the Heroku app by running heroku apps.
- Use the following command to export the Heroku database to a file in your local machine:
```
heroku pg:backups:capture --app [APP_NAME]
heroku pg:backups:download --app [APP_NAME]
```
The first command captures the current database and the second command downloads it to your local machine.

- Create a new Docker container by running docker-compose up -d on your terminal.
- Run the following command to import the Heroku database into your Docker container:

```
docker exec -i [DOCKER_CONTAINER_NAME] psql -U [DATABASE_USER] -d [DATABASE_NAME] < [LOCAL_FILE_PATH]
```

`[DOCKER_CONTAINER_NAME]` is the name of the Docker container you just created, `[DATABASE_USER]` is the username for the database you want to import the Heroku database to, `[DATABASE_NAME]` is the name of the database you want to import the Heroku database to, and `[LOCAL_FILE_PATH]` is the path to the file you downloaded from Heroku.

- Verify that the import was successful by running the following command in your Docker container:
```
psql -U [DATABASE_USER] -d [DATABASE_NAME]
```
You should now be able to see the tables and data from the Heroku database in your Docker container.

That's it! You have successfully cloned a database from Heroku to your development environment in Docker. Remember to take caution when manipulating data from the production database and always make sure to keep a redacted version of it.
Hoisting
Tags: javascript, webdev, tutorial, programming
Published: 2023-03-02 17:37:38


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

In JavaScript, a variable can be declared after it has been used.

In other words; a variable can be used before it has been declared.

`var x = 7;

function m1(){
    console.log("hello World");
}

m1();
console.log(x);

//output 

hello World
7`

and IF we declare before assign than

`m1();
console.log(x);

var x = 7;

function m1(){
    console.log("hello World");
}

// output 

hello World
undefined`

`m1();
m2();

function m1(){
    console.log("hello data");
}

const m2 = ()=>{
    console.log("h2");
}

// output 

hello data

m2();
^

ReferenceError: Cannot access 'm2' before initialization`
Why React Components Re-Render Every Time When State Changes: Explained
Tags: react, nextjs, webdev, gatsby
Published: 2023-03-02 17:26:35

One of the core concepts of React is the use of components to represent different parts of a user interface. Components are reusable pieces of code that can be combined to create complex user interfaces.

When a component is rendered, React creates a virtual representation of the component's UI called the Virtual DOM. The Virtual DOM is a lightweight copy of the actual DOM, and it allows React to efficiently update the user interface without having to re-render the entire page.

In React, components have state, which is an object that contains data that can be used to render the component. When the state of a component changes, React will automatically re-render the component to reflect the new state.

The reason why a component re-renders every time when state changes is because React does not track individual elements within a component. Instead, React re-renders the entire component and updates the Virtual DOM with the new UI. This means that even if only a small part of the component's state has changed, the entire component will be re-rendered.

However, React is designed to optimize the rendering process, so it will only update the actual DOM if there are changes to the Virtual DOM. This helps to minimize the number of updates to the actual DOM, which can be a costly operation.

In summary, the reason why a React component re-renders every time when state changes is because React updates the Virtual DOM with the new UI, and it does not track individual elements within a component. Although this may seem inefficient, React is designed to optimize the rendering process to minimize the number of updates to the actual DOM.
A short explanation of compilers and interpreters in Python code
Tags: python, beginners, programming
Published: 2023-03-02 17:12:54

# Introduction

Compilers and interpreters are part of the implementation of a programming language, and compilation and interpretation are two stages that make up the **code execution process**. This article is about compilers and interpreters in Python context.

# What is a compiler?

It's a program that takes your code (the code you, human, wrote it), a high level language, and turns it into another language, in Python's case, into bytecode (or a lower level language). Compilers are going to make sure the syntax of your code is correct, that it's formatted properly, that Python's indentation is perfect. Once all checks are done, that means the code is translated and compilers are making sure the code is ready to be run and executed by the interpreter.

# And what is an interpreter?

It's a program that will read the compiled code and execute it line by line. In summary, the interpreter is also converting the compiled code into a language that CPUs can understand so that your code can be executed and run by the machine. It translates code into target machine code during execution. Or in simple words, the interpreter is enabling your code to be run.

## Compilation errors x runtime errors

Compilation errors are errors that happen during the compilation stage, the first stage I described above. That means while the compiler was trying to "translate" your code to bytecode it found an error, e.g. syntax errors, formatting errors or indentation errors, so it crashes.

The runtime errors happen during the interpretation stage, the second stage I described above. They are errors that happen during the execution process of the code, e.g. errors in the logic of a function, or logic errors in an if statement, or zero division errors, or type errors (trying to divide an integer by a string), etc.

# Conclusion

The process described above is usually what happens for most modern languages, including Python. You can find some differences like in _Java_ ou _C++_, where the compilation stages are much more complex and advanced than in Python. That's why you hear people saying that Java and C++ are _compiled languages_ and Python is an _interpreted language_. That doesn't mean Python doesn't have a compilation step, but in Python most of the effort is being done during the interpretation stage.
Entendendo o que é Styled-Component no React!
Tags: react, beginners, programming
Published: 2023-03-02 17:08:13

No decorrer do desenvolvimento de seu aplicativo, será necessário inserir estilos e cores, o deixar mais agradável para seu uso e do público. Com base nisso, podemos usar meios de estilização como StyleSheet, ou baixar e inserir o Styled-Component em seu projeto. Vejamos qual a vantagem do Style-Component e porquê ele é tão utilizado na criação de projetos profissionais.

O styled-components é uma biblioteca para estilização de componentes em React que permite escrever CSS de uma forma mais legível e com menos complexidade. Em vez de escrever estilos separados em um arquivo CSS externo e importá-los para o componente React, o styled-components permite escrever estilos diretamente no arquivo do componente, criando uma experiência de desenvolvimento mais fluída.

Mas para utilizar essa poderosa ferramenta, precisamos instalá-la via pacote NPM:

```
npm install styled-components
```

Uma de suas vantagens é utilizar a estrutura conhecida da web, assim os desenvolvedores que utilizarem essa biblioteca terão muito mais facilidade em estilizar seu sistema.

Vejamos um exemplo dessa biblioteca em açã na criação de um Botão:

```
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: #fff;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
`;

function MyButton() {
  return (
    <Button>
      Clique Aqui
    </Button>
  );
}

export default MyButton;
```

No exemplo acima, nós conseguimos ver a sintaxe do Styled-Component. Primeior é feito um import do React e styled da biblioteca instalada anteriormente. 

Logo após criamos uma `Const` que damos o nome de Button que recebe styled.button que é um tipo de estilização para botões. Feito issso nós comoeçamos a passar os parâmetros dentro de crases, como se fosse uma estilização de CSS. Logo após criamos uma função que retorna um simples botão.

Uma das diferenças existentes do StyleSheet e Styled-Component é que no StyleSheet sua forma de escrita é feita em CamelCase(primeiras palavras maiúsculas, exemplo: let androidAndIos).


Concluímos assim que o Styled-Component é uma grandiosa ferramenta de estilização, principalmente pela sua capacidade de exportar essas configuações para outros arquivos e também puxar configuações feitas por exemplo dentro de um tema específico, podendo padronizar cores para seu aplicativo.
Build your own Tana clone with this new frontend
Tags: showdev, opensource, frontend, javascript
Published: 2023-03-02 16:53:59

---
title: Build your own Tana clone with this new frontend
published: true
description: Early demo of the Treehouse note-taking frontend
tags: showdev, opensource, frontend, javascript
---

{% embed https://www.youtube.com/watch?v=wtJCYlR2_ys %}

* [Treehouse GitHub project](https://github.com/treehousedev/treehouse) (pls star!)
* [Announcement blog post](https://progrium.xyz/blog/2023/welcome-to-treehouse/)
* [Mailing list](http://eepurl.com/iluc5v) if you're into that
BonBone - Đai Xương Khớp Số 1 Nhật Bản
Published: 2023-03-02 16:44:16

https://bonbone.com.vn/ Bonbone là thương hiệu chuyên cung cấp đai hỗ trợ điều trị chấn thương và vận động thể thao hàng đầu Nhật Bản✔️✔️✔️
bonbonevnb@gmail.com
(028) 22 600 006
89 Trần Văn Dư, Phường 13, Quận Tân Bình, Tp.HCM
https://wakelet.com/@bonbonevietnam
https://heylink.me/bonbone/
https://www.bloggang.com/mainblog.php?id=bonbone
https://boosty.to/bonbone
https://velog.io/@bonbone
https://pbase.com/bonbone/bonbone
Estrutura de diretórios.
Tags: php, programming, lamiansframework
Published: 2023-03-02 16:36:20

A estrutura de pasta no ``laminas`` é organizada de maneira
recomendada. Claro, que podemos alterar as configurações, mas com isso podemos gerar algumas dificuldades para dar suporte ao sistema. Então tente sempre manter.

### Estrutura de pastas padrão


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

### Pastas:

-  ``config`` encontra-se a configuração do projeto.

- ``data`` contém os dados que seu projeto pode criar; também contem o cache do Laminas Framework geralmente
  utilizado para aumentar a velocidade do Laminas.

- ``module`` contém todos os módulos da sua aplicação. Nesse primeiro momento existe um único módulo chamado
  Application. O Application é o principal módulo do seu projeto. Você pode adicionar outros módulos se quiser.

- ``public`` contém dados publicamente acessíveis pelo usuário da web.Como você pode ver, os usuários irá se
  comunicar com o index.php, que também é chamado de ponto de entrada do seu projeto.

    - ``.htaccess oculto`` Seu principal objetivo é definir Regras de acesso
      a URL do seu projeto.

- ``vendor`` contém blibiotecas que foram adquiridas através da internet, incluindo os arquivos das blibiotecas do
  Laminas. Esta pasta geralmente é somente preenchida pelo o Composer.


#### Arquivos

- ``composer.json`` é um arquivo JSON com as configurações do Composer.

- ``composer.lock`` este arquivo contém informações sobre os pacotes instalados com o Composer.

- ``composer.phar`` é um arquivo PHP executável contendo o código do Composer.

- ``docker-compose.yml e Dockerfile`` arquivos auxiliares somente se você utilizar do Docker uma ferramenta que gerencia
containers.

- ``LICENSE.md`` é um arquivo de texto que contem os dados da licença do Laminas (Também disponível em Introdução ao Zend
Laminas). Não remova ou modifique esse arquivo, pois a licença do Laminas, não permite esse tipo de alteração.

- ``phpunit.xml.dist`` é um arquivo com a configuração do PHPUnit). 

- ``README.md`` é um arquivo de texto que contem uma breve descrição do skeleton application. Você pode substituir por um
arquivo que contenha informações sobre seu projeto.

- ``TODO.md`` é um arquivo que pode ser removido sem problemas.

- ``Vagrantfile`` um arquivo que contém a configuração do Vagrant. Você pode ignorar esse arquivo se não souber o que é o
Vagrant.

<h6>Author</h6>


[Github](https://github.com/allanrodriguesmachado)
[Linkedin](https://www.linkedin.com/in/allanrodriguesmachado/)