teleren/devto huggingface dataset:
API Tracker | Made with Next JS
Published: 2022-05-26 17:12:43

![API Tracker | Made with Javascript | Next JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1652959619/large_api_tracker_made_with_next_js_00378b6035.png "API Tracker | Made with Javascript | Next JS")


### Discover the best APIs and SaaS products

> Tracking 1200 APIs and SaaS products across different +30 data points like available API specs, developer experiences, API docs, OpenAPI support, SDKs, GraphQL, developer docs, IDE plugins, API pricing, authentication, and API styles.
> 
> ### Discover the best APIs and developer resources
> Track API specs, developer experiences, API docs, SDKs, developer docs, IDE support, platform strength, authentication and API styles.
> 
> 

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [API Tracker on Twitter](https://twitter.com/withjavascript/status/1529871872166400003?s=20&t=ZA-dAekSPhP19UjoPfdtvA)
 |
| Medium | [API Tracker on Medium](https://medium.com/@madewithjavascript/api-tracker-made-with-next-js-e9298e9440f9)
 |
| Facebook | [API Tracker on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02RS4ZBtR12a177k3VQYWnaFUVpBpu3dJjtUceQtgCUjvV54J2udhsUokA7zSbhA9vl)
 |
| Tumblr | [API Tracker on Tumblr](https://madewithjavascript.tumblr.com/post/685333580949372928/api-tracker-made-with-next-js-discover-the)
 |
| LinkedIn | [API Tracker on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6935638041730424832)
 |


Filled Under:

 - [Made with Javascript](https://madewithjavascript.club)    
 - [Made with Next JS](https://madewithjavascript.club/categories/next-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
Today I Learned about the tap method in Ruby
Tags: ruby, rails, todayilearned
Published: 2022-05-26 17:12:38

Tell me if this seems familiar
```
user = User.find(1)
user.age = 11
user.save
```
This is a common pattern that I use often. Turns out the creators of Ruby saw this was a recurring pattern and decided to come up with the tap method. According to the [Docs](https://ruby-doc.org/core-2.6.1/Object.html#method-i-tap): The Tap method yields self to the block, and then returns self. The primary purpose of this method is to “tap into” a method chain, in order to perform operations on intermediate results within the chain.

What this means is that, the code block above can be simplified to 
```
User.find(1).tap do |user|
    user.age = 10
    user.save
end
```
Tap will take the object it is called upon and use it in the block that follows.
Getting started with Power BI
Tags: powerbi, datavisualization, beginners
Published: 2022-05-26 17:10:55

Power BI is a Business Intelligence tool used to analyze and visualize data. It is provided by Microsoft and helps users make data-driven decisions and insights. The good thing with Power BI is that it allows you to get data from different sources eg Excel Workbook, Text/CSV, PDF, XML, JSON files, among others.

There are 3 basic parts of Power BI:
1. Power BI desktop
2. Power BI service.
3. Power BI app (used in smart phones).

Power BI is generally used in businesses and organizations to come up with dashboards and reports. These are then used to study the behavior of different components in the business and to come up with data-driven decisions. Below is an image showing a simple dashboard with two charts: a line chart and a waterfall chart.

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

Some of the benefits of Power BI are:
1. It allows you to build a personalized dashboard and report. You can tailor your dashboard and reports to meet your specific needs and wants.
2. Can update in real-time. Power BI lets you update dashboards and stream datasets in real-time.
3. It is constantly updated and thus new features which make visualization and analysis even simpler, are constantly added. 
4. Easy sharing and distribution of data. One can upload their reports and dashboards to Power BI service and share this with others. The data will reflect on everyone's side in real-time when any changes occur. 

Another powerful feature of Power BI is that it allows you to perform a deep dive of the underlying data and tell us what's causing an increase or decrease as shown in the image below. 

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

If you are searching for a tool that is user-friendly, with a smooth learning curve, but can still do good analyses, visualizations and reports, then Power BI is the best place to look. It is also a very friendly tool for beginners and they will master it in no time. Get started today.
Newbie(ish) question
Tags: webdev, beginners, react, github
Published: 2022-05-26 16:57:39

I have a project that I would like to get hosted on the web asap. I already have a domain hosted on Netlify which I would like to use. 

My question is, the project utilises a Java backend and React front end. How do I get them both onto my host and operating successfully? 

I'm aware that more info may be required so if anyone cares to share their brilliance with me I am happy to provide whatever further information is required.
Javascript map()method
Tags: javascript, webdev, react, node
Published: 2022-05-26 16:49:15

💡 𝟯 𝗺𝗮𝗶𝗻 𝘂𝘀𝗲-𝗰𝗮𝘀𝗲𝘀 𝗼𝗳 𝗺𝗮𝗽( ) 𝗺𝗲𝘁𝗵𝗼𝗱

✔️ 𝘜𝘴𝘦𝘥 𝘧𝘰𝘳 𝘳𝘦𝘯𝘥𝘦𝘳𝘪𝘯𝘨 𝘢 𝘭𝘪𝘴𝘵 𝘰𝘧 𝘥𝘢𝘵𝘢 𝘵𝘰 𝘵𝘩𝘦 𝘋𝘰𝘮 𝘪𝘯 𝘙𝘦𝘢𝘤𝘵

✔️𝘜𝘴𝘦𝘥 𝘵𝘰 𝘮𝘰𝘥𝘪𝘧𝘺 𝘢𝘯 𝘦𝘭𝘦𝘮𝘦𝘯𝘵 𝘪𝘯 𝘢𝘳𝘳𝘢𝘺 𝘥𝘦𝘱𝘦𝘯𝘥𝘪𝘯𝘨 𝘰𝘯 𝘴𝘰𝘮𝘦 𝘳𝘦𝘲𝘶𝘪𝘳𝘦𝘮𝘦𝘯𝘵, 𝘸𝘩𝘪𝘤𝘩 𝘮𝘦𝘢𝘯𝘴 𝘤𝘢𝘭𝘭𝘪𝘯𝘨 𝘢 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘰𝘯 𝘦𝘢𝘤𝘩 𝘪𝘵𝘦𝘮 𝘪𝘯 𝘈𝘳𝘳𝘢𝘺

✔️ 𝘜𝘴𝘦𝘥 𝘵𝘰 𝘤𝘰𝘯𝘷𝘦𝘳𝘵 𝘚𝘵𝘳𝘪𝘯𝘨 𝘵𝘰 𝘈𝘳𝘳𝘢𝘺


𝗟𝗜𝗞𝗘 | 𝗦𝗛𝗔𝗥𝗘 | 𝗖𝗢𝗠𝗠𝗘𝗡𝗧 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oerjqf9embft6kd46gxd.jpeg)
Simple REST API Use Vue Version
Published: 2022-05-26 16:35:42


DEMO: [Simple REST API Use Vue 3 Version](https://codesandbox.io/s/simple-restapi-vue-gcilc6)

This example is mainly to present, use the functions of ES6 Classes to achieve API encapsulation and access of the same type ...

this is use Vue Framework, [JavaScript Version](https://dev.to/mesak/simple-rest-api-448g)

Source & Dependencies
- [REST API](https://reqres.in)
- [vue](https://vuejs.org/)
- [lodash](https://lodash.com)
- [axios](https://axios-http.com/docs/intro)
Day-95 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-05-26 16:22:23

- Date:26/05/2022
- Day:Friday

Today, I started at about at 10:30 am as I was in progress to complete the java script coerce and the bidding project so, today I started with left over task so, Today I started with the cource firstly I started with static methods Static class methods are defined on the class itself.we cannot call a static method on an object, only on an object class.after this I started with object.create The Object.create() method creates a new object, using an existing object as the prototype of the newly created object.In the  object-oriented programming we already know the importance of classes and objects but unlike other programming languages, JavaScript does not have the traditional classes as seen in other languages. But JavaScript has objects and constructors which work mostly in the same way to perform the same kind of operations. so, this way my day ended up and I get to learn many new things.
¿Qué es una API Rest?
Tags: javascript, webdev, beginners, tutorial
Published: 2022-05-26 15:57:06

👋 Hola el día de hoy en este articulo te enseñare que es una **API Rest** ya que este concepto es muy importante dentro del desarrollo web.

## Conceptos básicos de API Rest
Primero veremos algunos de los principales conceptos básicos como:
- **Cliente**: es el que consume la **API Rest**.
- **Servidor**: es el que provee la **API Rest**.
- **Endpoint**: es el punto de entrada de la **API Rest**.
- **URI**: es la dirección de la **API Rest**.
- **Método**: es el tipo de petición que se realiza a la **API Rest**.

La **API Rest** se encuentra dentro de una nube, un servidor que corre la aplicación, la nube que es nuestra API se debe conectar con algo que almacene la información, en este caso es un servidor de base de datos. Como MongoDB, MySQL, etc.

El cliente se conecta a la **API Rest**, la api va a la base de datos y busca la información que necesita, se los devuelve a la **API Rest**, y por ultimo la **API Rest** devuelve la información al cliente.
![Ejemplo de Conexion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwl17naq1mxfs8agcelr.png)
 
El cliente puede ser una aplicación móvil o una aplicación web.

## Formas de conectarse

Para poder conectarnos a nuestra **API Rest** vamos a utilizar una forma estándar que existe en el mercado.

| Endpoint| Descripcion |
|------|------|
| **GET/users - /users:id** | Es un método que nos permite obtener información. Lista un arreglo con los usuarios. Si utilizamos el id nos devuelve un solo usuario y este es un Objeto.|
| **POST/users - /users** | Es un método que nos permite crear un usuario. |
| **PUT/users/:id** | Se utiliza para reemplazar un usuario existente.|
| **PATCH/users/:id** | Se utiliza para actualizar un usuario existente parcialmente. |
| **DELETE/users/:id** | Se utiliza para eliminar un usuario existente.|

Sabiendo esto, ya podemos comenzar a crear nuestra **API Rest**.
Si quieres crear tu primer app de expres puedes revisar mi articulo de [**Tu primer app de Express**](https://dev.to/rogerdimonte/tu-primer-app-de-express-4ecm).

### Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ahí encontraras una gran variedad de tips y tutoriales.👉[**Tips y Tutoriales.**](https://dev.to/rogerdimonte).
The 6 R's: Strategies for Cloud Application Migration
Tags: cloud, cloudskills, migration, devops
Published: 2022-05-26 15:37:32

> “How emigration is actually lived — well, this depends on many factors: education, economic station, language, where one lands, and what support network is in place at the site of arrival.” -Daniel Alarcón



### 1. Re-host

*Lift and shift*

This is moving your application from one host to another **without making any changes**. This migration is usually done by large-scale, business-oriented organizations who want to migrate their application quickly to meet business objectives. These migrations are mostly done by automated migration tools.

Similar to `Ctrl+X` and then `Ctrl+V`



### 2. Re-platform

*Lift, modify and shift*

This is moving your application from one host to another and **making some changes**. Let's say you are moving your large-scale application to another cloud platform and want to change the DB while you are at it. This will be considered re-platforming.



### 3. Refactor/Re-architect

*Change the existing environment*

**Redesign the architecture** of your application driven by a strong business need to add new features or upgrade performance. This is performed when the requirements are difficult to achieve in the current architectural states.

An example can be moving from monolithic architecture to microservices.



### 4. Re-purchase

*Move to a new product*

This migration commonly refers to **moving to the SaaS** (software-as-a-service) model. This is changing perpetual licenses to services that will make the application more robust. 

For example, using *salesforce.com* instead of manual CRM.



### 5. Retire

*Get rid of*

This means **removing or turning off applications** that are no longer functional. These savings can boost your business case, direct your team’s attention to the applications people use.



### 6. Retain/Revisit

*Keep that matters the most*

This means **keeping the applications that are vital** to the system or not migration priority to and migrating the others through re-platforming or refactoring. One should only migrate what makes sense for the business.



------


![The 6 R's](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58kpdhc9i1iooidhgxha.png)

Image taken from [AWS Migration Whitepaper](https://aws.amazon.com/whitepapers/)
AWS Fundamentals Course
Tags: aws, coursera, mooc, course
Published: 2022-05-26 15:35:07

I recently completed the four-course AWS Fundamentals specialization on *Coursera* conducted by the AWS team. Beginners can start this one but some basic backend and system design knowledge are necessary.


Link to the course:
<a href="https://www.coursera.org/specializations/aws-fundamentals" target="_blank">AWS Fundamentals Specialization</a>

---

Brief Introductions to the four courses:

### **Going Cloud Native:** 

This course will introduce you to AWS core services and infrastructure.

Topics: *EC2, S3, VPC, Gateways, ELB, EFS, EBS, Lightsail, RDS, DynamoDB, Cloudwatch.*

### **Addressing Security Risks:** 

This course will give you an overview of security best practices when developing and managing applications on AWS.

Topics: *AWS Shared Responsibility Model, Security Hub GuardDuty, Secrets Manager, IAM.*

   
### **Migrating to the Cloud:** 

This course focuses on analyzing your current environment, planning your migration, AWS services that are commonly used during a migration, and the actual migration steps.
There are optional lab works but access to that is limited to paid enrolled students. Thanks to BUET I got a paid Coursera access.

Topics: *DMS, Migration policies, Direct Connect*, etc.

   

### **Building Serverless Applications:** 

This course will introduce you to the AWS serverless architecture. Through demonstrations and hands-on exercises you'll learn skills by building and deploying a serverless website & a chat bot.

Topics: *Lambda, API Gateway, Cloudfront, DynamoDB, Lex, Poly.*
Web Accessibility With Mirela Prifti (Matechs) & Ruben Nic (Webflow)
Tags: a11y, gaad, webflow, webaccessibility
Published: 2022-05-28 09:19:23

---
title: Web Accessibility With Mirela Prifti (Matechs) & Ruben Nic (Webflow)
published: true
date: 2022-05-26 15:22:18 UTC
tags: accessibility,gaad,webflow,webaccessibility
canonical_url: https://medium.com/matechs/web-accessibility-with-mirela-prifti-matechs-ruben-nic-webflow-d2a87ad7be53
---

_Livestream for the Global Accessibility Awareness Day._

![](https://cdn-images-1.medium.com/max/763/0*m0oGbrg97tr0A850.png)

To celebrate Global Accessibility Awareness Day (GAAD), our co-founder, [Mirela Prifti](https://www.matechs.com/mirelaprifti), joined the official [Webflow community Livestream](https://www.youtube.com/watch?v=HX3mlAl7cYk&t=3349s&ab_channel=Webflow) on May 19th, 2022. [Ruben Nic](https://twitter.com/RubensSandwich), Senior Software Engineer, Frontend & Digital Accessibility Specialist also joined the event, which was hosted by Nelson Abalos Jr., a product evangelist at [Webflow](https://www.webflow.com/).

During the stream, Mirela and Ruben focused on why designing and building with accessibility in mind is important and how to make websites more accessible.

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

Specifically, Ruben showed how to check for accessibility issues as you’re building your site in Webflow. The Audit panel in the Webflow designer flags the main accessibility issues, such as color contrast, skipped heading level, missing alt text, and non-descriptive links.

Mirela went over explaining how to test live websites for accessibility. She focused on two aspects of web accessibility which are content structure and accessible links. Specifically, Mirela explained and showed best practices on how to prepare the website content for accessibility, which also impacts design decisions and SEO.

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

[**Watch the video now!**](https://www.youtube.com/watch?v=HX3mlAl7cYk&t=3349s&ab_channel=Webflow)

* * *
Were you ever fired as a junior developer? What’s your story?
Tags: discuss, career, anonymous
Published: 2022-05-26 15:12:20

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._ 

***


I'm curious to know if anyone on DEV has been fired/has heard of anyone being fired from a junior dev position, and how that affected their career and ability going forward.
This is Exciting: A New Destination for All Things DevOps
Tags: devops, forem, kubernetes, aws
Published: 2022-05-26 15:11:01

I am very excited to highlight a new Forem: **[The Ops Community](https://community.ops.io/)**. It is a new space dedicated to DevOps, SecOps, IT Managers, SREs, and other cloud-native professionals.

If you work in DevOps, you know that it is a fast-moving field where keeping up with the pulse is critical — but that can be difficult and overwhelming. Whether good information gets lost in a sea of JavaScript tutorials or is confined to chat spaces and Twitter threads, **separating signal from noise is critical** for your career and needs to be just a bit easier.

We invited some folks yesterday to join, and the space is already thriving.

{% embed https://community.ops.io %}

If you are a full-on DevOps professional, or simply trend in that direction of the IT spectrum, this is going to be a very useful resource and community for you. Please take a moment to join right now **[and post in the Welcome Thread](https://community.ops.io/ops-community/welcome-to-opsio-2edp)**.

_Thank you to [Blink](https://www.blinkops.com/) for stewarding this community!_

Happy **Ops**ing! 🎉

***

_One last thing. You’ll notice **"Sign up with Forem"** as an option on these Forems. This is a service we now offer to most seamlessly navigate the ecosystem and manage your identity. We want you to be able to **bring your full self without having to bring your full data**, so making this distributed ecosystem as straightforward as possible in the long run is really important. Create a [Forem account](https://account.forem.com/) and connect it with your DEV account [via your settings](https://dev.to/settings)._ 🙂
🎬How to Make a Button With Awesome Hover Effects | HTML & CSS✨
Tags: html, css, beginners, webdev
Published: 2022-05-26 14:55:59

**Learn How To Create An Amazing Animated Text using Html & CSS step-by-step from scratch.**


{% youtube Kk3kc5B5VrU %}

***

**HTML**

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button with Awesome Hover Effects</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <a href="#" class="blue"><span>Button</span><i></i></a>
  <a href="#" class="green"><span>Button</span><i></i></a>
  <a href="#" class="red"><span>Button</span><i></i></a>

</body>

</html>
```

**CSS**
```css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-color: #27282c;
	flex-direction: column;
	gap: 50px;
}

a {
	position: relative;
	background: #fff;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.5em;
	letter-spacing: 0.01em;
	font-weight: 400;
	padding: 10px 30px;
	border-radius: 2px;
	transition: 0.5s;
}

/* Colors */
.blue {
	--clr: #2979ff;
}
.green {
	--clr: #00c853;
}
.red {
	--clr: #f50057;
}

a:hover {
	background: var(--clr);
	color: var(--clr);
	letter-spacing: 0.25em;
	box-shadow: 0 0 30px var(--clr);
}

a::before {
	content: "";
	position: absolute;
	inset: 2px;
	background: #27282c;
}

a span {
	position: relative;
	z-index: 1;
}

a i {
	position: absolute;
	inset: 0;
	display: block;
}

a i::before {
	content: "";
	position: absolute;
	top: 0;
	left: 80%;
	width: 15px;
	height: 5px;
	background-color: #27282c;
	transform: translateX(-50%) skewX(325deg);
	transition: 0.5s;
}

a:hover i::before {
	width: 20px;
	left: 20%;
}

a i::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 20%;
	width: 15px;
	height: 5px;
	background-color: #27282c;
	transform: translateX(-50%) skewX(325deg);
	transition: 0.5s;
}

a:hover i::after {
	width: 20px;
	left: 80%;
}
```
***

**More Tutorials Like This:**
**🎥YouTube =>** https://bit.ly/3oBQbc0
learning mistakes
Tags: beginners, testing, codenewbie
Published: 2022-05-26 14:34:34

Honestly, this is one of my main flaws in the beginning.

I never took time to understand errors, especially since I started out as a Front. Errors are ways the computer talks back to you to inform what is happening. And learning how to read them is a GREAT shortcut to becoming better at your job.

Knowing what the issue is, cuts your "wasted" time down to minimum, where you'd spend that time trying to find out where the mistakes were made.. (and trust me, mistakes are going to be made. learn to deal with them ASAP).
Building A Python Code Completer at PyCon US 2022
Tags: python, programming, ux, showdev
Published: 2022-05-26 14:23:47

Almost all of Anvil went to PyCon US in Salt Lake City this past April, and we had a blast. To round off the trip, we were able to watch Meredydd give his first in-person talk at a US PyCon - and it was awesome. Even better, the recordings are now out, so you can see it for yourselves!

In his talk, Meredydd teaches us how Python parses and compiles code, what an AST is, and how we can use this knowledge to work out what a programmer might type next. And, to prove it’s not that complicated, he builds a little code completer, live on stage, in about five minutes.

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

___

## More about Anvil

If you’re new here, welcome! [Anvil](https://anvil.works) is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.

[Try Anvil - it's free, forever.](https://anvil.works/build)
Paracetamol.js💊| #126: Explica este código JavaScript
Tags: javascript, spanish, webdev, programming
Published: 2022-05-26 14:21:06

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```html
<!--HTML-->
<button type="button" id="vibrar">Vibrar</button>
```

```js
//JS
const v = document.querySelector("#vibrar");
const salida = v.addEventListener("click", () => {
  window.navigator.vibrate([200, 100, 200]);
});
```

A. El dispositivo vibrará por 200ms luego 100ms de pausa y nuevamente 200ms de vibración.
B. `SytaxisError`, la Vibration API no acepta un arreglo como parámetro.
C. `undefined`
D. Ninguna de la anteriores.

Respuesta en el primer comentario.

---