teleren/devto huggingface dataset:
API REST
Tags: http, interview, api, rest
Published: 2021-12-02 14:22:36

- 
**¿QUÉ ES UNA API?**

Significa "Application Programming Interface", es un software que hace de intermediario entre dos aplicaciones, teniendo así un conjunto de reglas que nos permite la comunicación. 
En contraste con la interfaz de usuario la cual conecta a una persona con la computadora, las APIs conectan computadoras o piezas de software entre ellas.

Las APIs estan constituidas de diferentes partes que actuan como herramientas o servicios que estan al alcance del programador. Cuando un programador usa estas partes se dice que "llama" (_call_) a esa porción de la API. Estas llamadas son tambien conocidas como subrutinas, requests o endpoints.

Por ejemplo si tenemos una aplicación web con su información almacenada en un servidor, la forma de acceder a los datos es por medio de una API. El servidor realizará la consulta a la base de datos y por medio de la API la información llegara a la aplicación.
La API funciona como una _"fachada"_ para el cliente (software que quiere utilizar nuestras API) ya que solo exponen acciones sensillas, aunque por detras se esten realizando cosas muy complejas.

Entonces, las API's de servicios web nos permiten el intercambio de información entre un servidor y un cliente, la comunicación se hará utizando el protocolo HTTP o HTTPS los datos normalmente son transportandos en formato JSON o XML

**ENDPOINT**

Es un final de un canal de comunicación, es decir que cuando dos APIs interactuan entre si el punto de contacto entre ambas es lo que se denomina endpoint. Son las locaciones donde cada API puede acceder a los recursos que necesita para realizar sus funciones. 

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

El lugar donde las APIs mandan requests y donde estan los recursos de la misma, son los endpoints. Puntos de entrada y salida de activos e informacion.

**HTTP**

_Hypertext Transfer Protocol_

Protocolo (conjunto de reglas) diseñado para la transferencia de información entre dispositivos que trabajan conectados en red. En definitiva, es lo que nos permite navegar en la web por medio de direcciones.

HTTP sigue el clásico "cliente-servidor modelo", en donde un cliente abre una conección haciendo una request, luego espera a recibir la respuesta por parte del servidor.

Métodos básicos de HTTP: POST, GET, PUT, PATCH y DELETE

**REST**

REST es un tipo de API (es un servicio web), nos habla de un conjunto de reglas y estándares sobre como construir una API.
Es decir es decir es una aplicacion del lado del backend que se engarga de la comunicación con la base de datos, lógica, etc. Dicha aplicación puede ser utilizada por medio del protococolo HTTP por cualquier tipo de cliente.

Entonces vamos a tener diferentes métodos en los controladores de nuestra API REST y para cada uno de ellos vamos a tener definida una ruta (url) especifica y cada una de esas rutas tendra un método HTTP diferente


En conclusión:

REST simplemente es un principio sobre como usar las URLs (para la transferencia de datos) y el protocolo HTTP para estructurar una API.
Bulma Responsive Pricing Table
Tags: bulma, css, html, webdev
Published: 2021-12-02 14:18:23

In this Bulma Responsive Pricing Table, we used grid classes of Bulma. Here we made a pricing table in Bulma with helper class and utilities classes.

Also Read:- [Neumorphic Login Form In Bulma](https://w3hubs.com/neumorphic-login-form-in-bulma/)

To make a responsive table we used a responsive grid class for an only tab view. On the mobile side, it will cover in full width per card. This is a responsive modal for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source code](https://w3hubs.com/bulma-responsive-pricing-table/)
Advent of Code 2021 - Day 2
Published: 2021-12-02 14:17:09

---
title: Advent of Code 2021 - Day 2
published: true
description: In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
tags:
cover_image: https://i.ytimg.com/vi/TZlsklg2oFs/maxresdefault.jpg
---

{% youtube TZlsklg2oFs %}

In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
Help needed: Netlify's Dusty Domains event – Give me your domain ideas
Tags: jamstack, netlify, serverless, discuss
Published: 2021-12-03 18:15:34

---
title: Help needed: Netlify's Dusty Domains event – Give me your domain ideas
published: true
date: 2021-12-02 14:14:00 UTC
tags: [jamstack, netlify, serverless, discuss]
canonical_url: https://bryanlrobinson.com/blog/help-needed-netlify-s-dusty-domains-event/
---

So here’s the deal, y’all: [Netlify](https://netlify.com) has this great event for December: [dusty.domains](https://dusty.domains), but I don’t have any unused domains! I set myself rules for domain purchases: No auto-renewal. Domains don't renew if they don't have a dedicated purpose after that first year. I've let a LOT of domains expire.

I still want to participate, and that's where you come in! I need domain ideas. For every domain idea I get (that's an available domain), I'll donate $1 to one of the four charities on the Dusty Domains site (up to $100).

I'll choose one (or more?) of the domains and build something on it and do it all live streamed to Twitch. I really want to think of this as an opportunity to do something fun and treat it like an "improvisational webdev" activity. So, let's list some fun, interesting, helpful, or wacky domains and make something for this charity event.

To participate, leave a reply to [this Twitter thread](https://twitter.com/brob/status/1466418644804587521) with the domain you think I should build. Depending on the ideas, maybe we'll choose more than one of the domains and build lots of amazing things and do some good in the world.

The paragraph above said suggest on Twitter, but, feel free to comment on this post as well! That can count as well!
Please How  can  I convert  the  following   object  oriented  PDO fetch_assoc to MYsqli Format below. 
Tags: sql, php
Published: 2021-12-02 14:00:46

Hi Great Developers, I am having a difficult time fetching data from my database using object PHP as below. 

**So I have two pages,**

- One for fetching data from my DB and returning it

- And another for displaying the data from my database fetched from the first page. 

**As Below**
The code below is a function written with PDO

**First page.** 

```
function get_messages() 
{
//fetch data from db
 
$sql="SELECT user_name, msg, timestamp FROM message_chat";

//prepare and execute. 
$stmt=$conn->prepare($sql);

$stmt->execute() ;

//Now this is the line thats making things complicated. 

return $stmt->fetchAll(PDO::FETCH_ASSOC) ;
} 
```

Now, the second page is meant to return the generated data's from the above code, but its not happening. 
Please how can I convert the above PDO **fetch_assoc** statement to mysqli so I can use it in my project.
Threely Launch - Private Beta!
Tags: blockchain, testing, startup
Published: 2021-12-02 13:53:46

__Hey Everyone!__

I joined a startup called Threely recently and am excited to bring the startup to everyones attention. 

__So, Let me give you the run-down:__

Threely is a blockchain infrastructure company designed to bridge the gap between layman end-users and the perplexing technology—blockchain.

Threely Identifier can be understood as DNS for blockchain. Threely condenses long addresses & produces short three-word addresses containing memorable words. These Short & meaningful addresses are more convenient to share than long, 25-45 character, complex blockchain addresses. (For example, pay.to.alex or i.love.producthunt)

Threely offers various APIs to organizations & institutions. We’re currently offering the Threely Identifier API, which shortens blockchain addresses, smart contract addresses, and token IDs.

Existing organizations can easily use Threely APIs to run their products fluently, minimize losses, and provide customizability to their customers.

__Threely has many value point, but here are a couple:__
- Easy API Integration on existing platforms
- Short, personalized, and fluent wallet address for In-person and online blockchain transactions
- Ease of transactions between users requesting and multi-sending crypto payments
- Complete risk mitigation for incorrect wallet address-based transaction disputes
- Branded threely addresses for organizations for universal identification (coinbase.john.doe)
- Ease of transactions between users requesting and multi-sending crypto payments

__Our Website is linked here__ - [threely.xyz](https://threely.xyz/)

Please take a look at what we offer and leave some comments about what you think/what could be improved/any questions you might have.

We just started our private beta, so please also leave a comment if you're interested in learning about how you can be apart of that opportunity!

_Thanks!_
The Film Finder
Tags: javascript, html, github, algorithms
Published: 2021-12-02 13:53:23

I love movies. Always have. Always will.

But I do not love the nightly ritual of endless scrolling until I finally find something to watch.

Enter [The Film Finder](https://michaellobman.github.io/film-finder/), my first single-page application.

It asks you to enter five films that you have seen and enjoyed. From those five, it will recommend ten films for you to watch. 

The application utilizes The Movie Database's API, which includes a recommendation method for every film in its wide collection. The Film Finder pulls the top two recommendations for each of the five films entered by the user. 

While building the SPA, I wanted to make the experience of the site more personal than simply seeing titles on the page. For example, reading the title "Star Wars" doesn't evoke the same feeling as seeing the poster for "Star Wars". As an audience, we have a connection to the movies we watch, and The Film Finder taps into that by representing every film on the site by its respective poster.

One anticipated issue was navigating myriad similar titles to efficiently ensure the user's input renders the correct poster. As the user types, results appear in real time beneath the search bar in the form of posters. When the correct poster appears, the user clicks on it to add that film to their list of five. 

Another anticipated issue was duplicate recommendations. If the user enters five films from the same franchise, for instance, they would receive duplicate recommendations, perhaps even be recommended a film they have already entered. To avoid this, every film input by the user is pushed into an array called "arrayAgainst", and each possible recommendation is checked against that array before it is rendered. If that specific film already exists in the array, the algorithm moves to the next result, checking for its individuality. If it is indeed original, then the result will be rendered as a recommendation.

```javascript
function renderUnique (films, container) {
	let i = 0;
	let x = 0;

	while (x < 2) {

		if (arrayAgainst.includes(films[i]["id"])) {
			i++
		} else {
			renderPosters(films[i], container)
			arrayAgainst.push(films[i]["id"])
			x++
			i++
		}
	}
}
```

Now, for the fun.

Enter five films and see which ten await!
Creating graphs in R
Published: 2021-12-02 13:39:39

R is very important to analysts because it has a wide range of techniques for graphically interpreting data. The main styles are: dot plot, density plot (can be classified as histograms and kernel), line graphs, bar graphs (stacked, grouped and simple), pie charts (3D,simple and expounded), line graphs(3D,simple and expounded), box-plots(simple, notched and violin plots), bag-plots and scatter-plots (simple with fit lines, scatter-plot matrices, high-density plots and 3-D plots). The foundational function for creating graphs: plot(). This includes how to build a graph, from adding lines and points to attaching a legend.

## The plot() Function:
The plot () function forms many foundations for R's basic graphics operations and serves as a means for creating many different types of graphics. plot () is  a placeholder for a generic function or function family. The actual function that is  called depends on the class of the object that is called.

The basic syntax for plot() function is
          **plot(v, type, col, xlab, ylab) **

- **v** is a vector containing the numeric values. 

- **type** takes the value "p" to draw only the points, "l" to draw only the lines and "o" to draw both points and lines. 

- **xlab** is the label for x axis. 

- **ylab** is the label for y axis.

- **main** is the Title for the chart.

- **col** is used to give colors to both the points and lines.


**Examples of plot function :** 
 
1.

```
# Define the cars vector with 5 values 
cars <- c(1, 3, 6, 4, 9)
# Graph the cars vector with all defaults 
plot(cars)
The default argument of type is points 
```

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

2.

```
# Define the cars vector with 5 values 
cars <- c(1, 3, 6, 4, 9)
# Graph cars using blue points with lines 
plot(cars, type="o", col="blue")
# Create a title with a red, bold/italic font 
title(main="Autos",col.main="red", font.main=4)
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1bbli57sozds2r96v4c.png)
Slider Animation HTML and CSS only
Tags: css, webdev, html, beginners
Published: 2021-12-02 13:38:00

Hey Guys, Today I'm here with new post in which we are going to learn how we can create a CSS loading animation like this


{%youtube 5Zf3jiTd6Wc %}

As you all know, in Loading Animation type CSS project the HTML part is not so hard to understand and is of couple of lines. So, let's check it out.

##HTML

```html
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="center-div">
      <h1>~LOADING~</h1>
    </div>
  </body>
</html>
```

##CSS

Now check out the CSS part. In this we use `pseudo` selector and `@keyframes` to animate that moving vertical line.

```css
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html{
  font-size:62.5%;
}
.center-div{
  width:100vw;
  height:100vh;
  background-color: #2f3542;
  display:grid;
  place-items:center;
}
h1{
  color:white;
  position:relative;
  font-size:8rem;
  font-family: 'Indie Flower', cursive;
}
h1::before{
  content:"~LOADING~";
  width:100%;
  color:#2ed573;
  position:absolute;
  top:0;
  left:0;
  border-right:0.4rem solid #2ed573;
  animation:slide 2s linear infinite;
  overflow:hidden
}
@keyframes slide{
  0%{
    width:0%;
  }
  50%{
    width:100%;
  }
  100%{
    width:0%
  }
}
```
That's it guys. Our Loading Animation is ready and you are free to modify it as you wish.

If you loved this post then make sure to Like the post.

And also check out my previous posts. They may also be helpful for you.
Selenium 1
Tags: beginners, java, selenium, test
Published: 2021-12-02 13:28:24

Different between 
`.isDisplayed()` and `.isEnabled()`

-----
`.isDisplayed()` is to confirm a WebElement shown or not, That is, for instance, a WebElement is written in a webPage but the visibility is false. Then `.isDisplayed()` will return false.
But if you use `isEnable()` even if the visibility is false, but the webElement is physically exists so the `isEnable()` Will return True.

This part I am not sure, need to be confirmed, 
`isEnable()` is to check the editable status of an element, if it is editable return `true` else return `false`.

Summary:
A WebElement that is 1. exists 2. not visible
`isDisplayed()` return `false`.
`isEnable` return `true`.
Best Data Modelling Tools
Tags: tools, data, modeling
Published: 2021-12-02 12:58:11

Data modeling relates to the application of certain methodologies and techniques on the data for converting it into a form that is not only meaningful but also easier to comprehend. In other words, it is used to convert intricate software design into a more straightforward format.

**Benefits of Data Modeling**

* Integrate data from various sources that may not communicate well with each other.
* Use free data modeling tools for creating big data so that information is easy to access.
* Know your business by trying out graphic descriptions of complex concepts.

List of [Data Modeling Tools](https://www.techgeekbuzz.com/best-data-modeling-tools/):

## _1. RapidMiner_

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

**Pros**
* It has a flow-based programming approach that allows the visualization of pipelines.
* It contains modules for machine learning, statistical analysis, etc.
* No coding is required.
* Easy to set up.

**Cons**

* Costly.
* ‘No coding’ sometimes creates challenges for the users.

## _2. MapBusinessOnline_

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

**Pros**
* It optimizes the information for sales.
* An essential tool for analyzing the real impact.
* Easy to use.

**Cons**

* Navigation around the maps is a bit messy.
* Mapping curves creates issues.
 
## _3. Vertabelo_

![Vertabelo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bqmps199fxyl9vezmky.png)

**Pros**
* Innovative and flexible.
* Amazing UI and easy-to-use features.

**Cons**
* Performance issues sometimes cause glitches.
* Costly. 

## _4. Lucidchart_

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

**Pros**
* It provides convenience in a traditional flowchart system.
* Overall performance is amazing.
* Great visual features.

**Cons**
* Users can face issues while finding the documents into many elements.
* The saving and storing system is a bit messy and, thus, creates challenges for the user.
* A little issue can cause a huge error.
Sharing option should be improved. 

## _5. SQL Database Modeler_

![SQL Database Modeler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u5fgvkn21pkyfv288y2.png)

**Pros**
* Features Many varieties of the database.
* Fast for:
  * Searching and querying of data.
  * Recovering data from multiple tables.
* Can manage large numbers of transactions.

**Cons**
* Can be hard to turn data from objects into database tables.
* Vertically scalable.
* Loss of partition tolerance. 


## Conclusion

Currently, there are various data modeling tools available that can help you to gain meaningful insights from huge proportions of data.

_What is your take on the article? Did it help you or is something wrong mentioned here? Drop your opinions in the comments section below._
Making the most boring website ever with TypeScript, NestJs, React and others. Part 9.
Tags: react, typescript, node, webdev
Published: 2021-12-02 12:47:55

_This series is about making a generic website for a local business with TypeScript, NodeJs, NestJs, Prisma, React and NextJs. I'm trying to make my videos quite short, about 10 minutes each (except for the first one), while putting as much content there as I can. [Here](https://www.youtube.com/playlist?list=PL7b0cPjh8z6K_4qLNu_QdE3RpiU6omViC) is the full playlist._

## In this episode:
### User Roles

So first we will add some roles for the users. We'll only need 3 for now: *ADMIN*, *MANAGER* and *GUEST*.
To do that, we'll update our **Prisma** model and learn how to use guards in **NestJs** to protect different routes based on current user's role.

### Deployment to Dokku

Then, I'll try to explain how to publish a web application for everyone to see. I use Dokku for my personal projects and I'll show you how simple it is to set it up and deploy to it.

Since the project is now officially online (even though very unfinished), here are the links: [Website](https://beardybear.nordicbeaver.io/), [Admin Panel](https://admin.beardybear.nordicbeaver.io/) (you can use *guest/guest* to login)

{% youtube pedR8s98wEU %}
C language
Published: 2021-12-02 12:40:14

C is a general-purpose, procedural computer programming language supporting structured programming, lexical variable scope, and recursion, with a static type system. By design, C provides constructs that map efficiently to typical machine instructions. It has found lasting use in applications previously coded in assembly language. Such applications include operating systems and various application software for computer architectures that range from supercomputers to PLCs and embedded systems.

A successor to the programming language B, C was originally developed at Bell Labs by Dennis Ritchie between 1972 and 1973 to construct utilities running on Unix. It was applied to re-implementing the kernel of the Unix operating system.[6] During the 1980s, C gradually gained popularity. It has become one of the most widely used programming languages,[7][8] with C compilers from various vendors available for the majority of existing computer architectures and operating systems. C has been standardized by ANSI since 1989 (ANSI C) and by the International Organization for Standardization (ISO).
Como usar o Google Static Map no React Native
Tags: javascript, typescript, reactnative
Published: 2021-12-02 12:21:12

E aí, Tudo bem?

Já pensou em usar um mapa estático para mostrar um histórico dos lugares que já visitou? Um exemplo é o Uber, que o usa para mostrar suas corridas mais recentes.

Se eu disser que isso é fácil de fazer, você pode fazer em qualquer aplicativo usando a API do Google. Esta API retorna imagens com base nos parâmetros fornecidos. [Veja mais sobre isso](https://developers.google.com/maps/documentation/maps-static/overview#quick_example)

Desenvolvi uma lib para React Native para facilitar esse processo.

Tudo que você precisa e instalar em seu projeto e começar a usar.

```shell
yarn react-native-google-static-map-next
```


```javascript
import {GoogleStaticMapNext} from 'react-native-google-static-map-next'

function Example() {
  return (
    <GoogleStaticMapNext
      style={styles.staticMap}
      location={{
        latitude: '-33.8688',
        longitude: '151.2195',
      }}
      size={{ width: 400, height: 400 }}
      apiKey="123456789-ABCDFGHIJK
    />
  );
}
```

Por debaixo dos panos está biblioteca é um componente de imagem que usa o url do Google Static Map. [Veja mais](https://github.com/wandersonalwes/react-native-google-static-map-next/blob/bdffe0b3cda4e320b7990f74e6ed46f94111759d/src/index.tsx)