teleren/devto huggingface dataset:
W11HW
Tags: ist256, nice, majorcoder, slay
Published: 2023-03-23 17:06:22

**- How did you start?**
We started by getting the API part and then on Thursday we worked and got the search bar at the top. Then we were trying to get a basic badge at first on Thursday. 
**- What did you decide to attack first?**
We started to do the API first, but first wanted to get the search bar done first based off the codePen and see if it would work in our code. 
**- What issues have you had?**
Getting the image on the right hand side of the badge, left side color bar on badge, and top light color bar on badge. So basically the design of the badges to be correct. 
**- What concepts translated from Project 1's card?**
The badge that we made, but also styles from CSS and other aspects for design.
**- What's your next priority? **
To get the API working and filled. We also want to edit whatever badges we have now to make them look similar to the website. 
**- What problems are you unsure of how to solve?**
We sort of know how to get the API to work. I think we both want to know how to do that more in depth. Also how to get images on the badges, and how to make the color at the top different from the main part of the badge. Getting the aspects of the badge correct, and resizing images. Also getting the search bar picture to show up.
**- screenshot of what our project looks like right now:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m79cmqjaz3gnp1zhvimk.jpeg)
The State of Public APIs 2023
Tags: api, security, performance, designpatterns
Published: 2023-03-23 17:02:16


_tl;dr we ([Escape](https://escape.tech)) scanned 6056+ public APIs on the internet with our in-house [feedback driven exploration](https://escape.tech/blog/feedback-driven-api-exploration/) tech and ranked them using security, performance, reliability, and design criteria. We decided to analyze the resulting data and produce a full featured report: [The State of Public APIs 2023](https://apirank.dev/state-of-public-api-2023)_

## Why build this report? 🤔

Two weeks ago, we released [apirank.dev](apirank.dev), the result of extensive research on public APIs on the internet, conducted at an unprecedented scale using our feedback-driven API exploration technology. You can read more about this in our [original APIRank post](https://escape.tech/blog/apirank-dev-we-scanned-and-ranked-5651-public-apis-on-the-internet/).

But we quickly realized that the data we gathered for **ranking** APIs could also be used to establish a **benchmark** of the current state of Public APIs in the wild. 

Thus, we compiled this dataset into a full-featured report that analyzes the performance, reliability, design, and security of the APIs we scanned.

To our knowledge, this is one of the first of its kind study about the quality of APIs, mostly because of its scale and the depth of the data we gathered.

![](https://i.imgur.com/Yb74Sf9.png)


## What are the properties we analyzed? 🎯

Since the data we used for creating the report comes from APIRank.dev, we used similar properties to those in our original study:

- Security 
- Performance
- Reliability
- Design
- Popularity

## Results 🏅

The full results can be found on [The State of Public APIs 2023](https://apirank.dev/state-of-public-api-2023)

We discovered that while public APIs are getting more and more documented, significant improvement in the industry can still be made regarding documentation quality, response reliability, and especially security.

We hope to see more studies of this kind to be conducted to observe how those tendencies evolve in the future.
From the point of a new developer...
Published: 2023-02-27 00:09:36

## **What is confusing about platforms?**

What exactly they are / what exactly their purposes and differences are. It is kind of expected that you understand exactly what they are and why you should use them without any prior context. It's confusing overall because as someone who only has prior experience coding local applications in Java, I have never thought about these kinds of problems before. I would like to know more about why a dev uses what they do, or why their company uses and how they choose.

## **How could web components and VanillaJS standards be taught in a way that is more approachable?**

It seems like it would be a much better idea to learn the basics and more traditional ways of web development first. I think that getting dropped into the world of HTML CSS and JS right away and then immediately being exposed to Vue React and Svelte just makes things unnecessarily confusing. After being exposed to so much at once, I haven't had time to be able to specialize in any particular one or really pick up some skill. Instead I will immediately default to doing whatever I did last becuase that's most likely what I understand the most at the moment. I think that if the most simple basics of HTML were taught to me first and I grew comfortorable with that, I would be more resistant to overcomplicating things with JS. I also think that I would care more about what platform or components I use because I could envision what my project needs that I cannot complete myself.

## **What did you find easiest to work with on 1st stab?**

I thought web components were easier, I don't have an exact reason as to why, I think I was just exposed to a lot of possibilities in a short amount of time so I just ended up doing more research and dedicated more time to understanding web components over other things.

## **Think back on the tooling. What parts were confusing? What clicked with you immediately?**

I thought that the entire process was confusing. No particular part clicked immediately. (not quite sure if this particularly relates to tooling) I think that using open-wc framework clicked the most. I think that using the terminal always makes things seem more obvoius as you are forced to look at everything in a very plain way. Understanding what exactly npm is was definitely a confusing part.

## **
What additional readings did you have to do in order to make sense of things?**

- looked up what SPA frameworks are
- Detailed explanation of web components
- Detailed explanation of frameworks
- Looked up differences and advantages of using web components
- Looked up what frameworks vs what JS Libraries are
- Looked into more detail about what Vue is
- What is tooling?
Guide to Accessibility Advocacy
Tags: a11y, webdev
Published: 2023-03-23 16:39:25

You work at a company and some pages of the website aren't addressing accessibility concerns. You don't own those pages, but would like to advocate for accessibility at your company. Here's a guide on how to advocate for accessibility at your company.

## Legal exposure
Digital accessibility is a legal requirement as put forth by the Americans with Disabilities Act (ADA).
> In February [2023], 181 lawsuits were filed. 86% were filed in New York; MARS KHAIMOV LAW, PLLC filed 47 lawsuits in New York; 7 Plaintiffs filed 44% of lawsuits; and 17% of the litigated websites used overlay tools.
~ https://www.accessibility.com/digital-lawsuits

It's important that companies take accessibility issues seriously because users do. Accessibility is not a nice to have it is a legal requirement like GDPR and privacy compliance.

## Build reports

Create a metric that teams can use to move a needle and prove progress. You could use [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) to help you accessibility audit single pages. If you need to do something more at scale and can code you could build an [accessibility checker](https://www.npmjs.com/package/accessibility-checker)

## Path to Success

Once an organization is convinced to make the investment here are some resources to help build on that success and scope work.
[IBM Equal Access Toolkit](https://www.ibm.com/able/toolkit) will help you to plan, design, develop, verify, and launch accessible digital products. There is also the [A11y Project](https://www.a11yproject.com/) who also build accessibility tooling and resources.
How we developed Workarise MVP
Published: 2023-03-23 16:37:16

Workarise is a SaaS product, used to manage projects with tasks.

Developing a web app where you can access a custom domain like [workarise.com](https://workarise.com) and authenticate yourself with an email and password is not easy as say it, so here we’re going to share how we choose the tech stack to run Workarise.

## How to choose a tech stack?

A tech stack is a set of technologies or tools used to build things, like a web app.

So, one of the first things to take in consideration is *where* we want to deliver our product, and we decided that is going to be in web.

The web offers a great advantage to iterate and deliver faster new features, so you don’t need approval from a store like the Play Store or App Store. Not only that, but developing software on web is easiest to debug and test, and almost everyone can access it with their browsers like Chrome or Firefox

Now we’ve decided where, we need the *how*, and that’s where JavaScript comes.

Browsers run JavaScript, so we need to choose a technology that helps to build web apps, there are so many like Angular or React, and we decided to use React, because is one of the most used libraries for building web apps, we can iterate fast and there are a lot of devs using it.

Integrating Material UI for build components with functionality to save time, styled-components we need more specific requirements, and other JavaScript libraries like Formik/Yup for manage and creating validations for Forms, date-fns to manage dates, and more.

For the backend at the start, we didn’t have a backend dev to create an API, so we start using Firebase to replace the need for an API and for things like hosting, authentication, real-time database (for notifications and more), analytics, upload files like images, etc.

The cool thing about Firebase provides you a Software Developer Kit that you can use in the front, so you connect your Frontend app to Google Cloud services to store data and host your web app, helping you to develop faster and with fewer people.

However in the long term, we’re going to need an API and a SQL Data Base (Firebase provides you with Firestore, which is NoSQL), and as we integrate a new backend developer, we decided to use Django as a framework for our API.

To host the API we want to use Cloud Run, a serverless Google Cloud service to run containers, so to containerize the API we’re using Docker, this’ll help to scale quickly with Cloud Run.

For the DB we can use Cloud SQL, which provides PostgreSQL, one of the most used SQL DB.

So that’s it, Workarise is built with React, MUI, and Firebase mainly, but in the future we’re going to implement an API with Django and host it with Cloud Run to scale as we growth.
Best practice is to send PII using POST, not GET…so why don’t more developers do it?
Published: 2023-03-23 16:33:02

One of the first principles developers learn when writing REST APIs is to use GET for retrieving data and POST for modifying data.

Except, of course, GET exposes the parameters in the URL directly. And we never want to expose sensitive data like user credentials, PII, or PIFI. So they immediately must un-learn what they have learned, and put sensitive data in the body, using POST, to provide a slightly better default security and privacy posture.

In an attempt to mitigate the risk, some organizations create policies to make using GET requests so cumbersome to deploy - with additional security checks and review queues - that they effectively ban them from use.

Which, in turn, creates downstream problems. When all the requests are POST, then all the requests can modify the data. This gives many API users a lot of discretion and power.

In the end, of course, the right way to solve the problem is to tokenize sensitive data, so it can be transmitted using any API call.

But, as applications improve tokenization and context-awareness, we are left with a patchwork of half-secure, mostly-private applications talking to each other. Older applications may run on SSL or an outdated version of TLS. Rogue application developers may find ways to accidentally push unsecured http requests live. Relay APIs may sit outside of the security perimeter.

In addition, external API consumers may only have GET permissions, they can consume data but they can’t change it. Or, an API call may not have a specific method defined, in which case many services will assume the request should be a GET request.

If only one element is misconfigured, personal data is exposed, which is a security breach and also a privacy breach.

It’s critical to improve the awareness and visibility of these security and privacy gaps, in order to make incremental improvements across the entire system. We need to be able to fixing privacy and security in post…by monitoring how actual calls are made in real, live operational systems.
Revised OWASP Top Ten shows how companies that live by the API also risk dying by the API
Published: 2023-03-23 16:32:41

Recently, the OWASP Foundation updated their list of the top 10 most common web application vulnerabilities, aka the [OWASP Top Ten](https://owasp.org/www-project-top-ten/). The new list is an update from the previous version, published in 2017, and was driven by the dramatic pace of change in web application development and the behaviors of bad actors.

Here’s the full list of changes:

![OWASP Top Ten 2017 compared to OWASP Top Ten 2022](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbp1aasc08vwzmew7n0u.png)
<figcaption>OWASP Top Ten 2017 compared to OWASP Top Ten 2022</figcaption>

There is not much in the way of good news. While several issues have been consolidated, like Cross-Site Scripting and Insecure Deserialization, none have dropped off the top ten list entirely. That means that the risks from 2017 are still risks today.

But, in addition, there are several new risks and several risks that are placed much higher than previously. Broadly speaking, that is because the risks of APIs have never been adequately managed, even while their popularity continues to explode. 

In fact, due to the rise of microservices,  new digital businesses, and cloud deployments, [APIs are now 83% of all internet traffic](https://www.akamai.com/newsroom/press-release/state-of-the-internet-security-retail-attacks-and-api-traffic#:~:text=API%20calls%20represent%2083%20percent,and%20cloud%2Dbased%20application%20deployment).

We have clearly passed the tipping point where APIs are critical operational elements in a technology stack. Which means they are a more attractive target than ever for bad actors.

In short, as more and more companies live by the API, they also run the risk of dying by the API.

To make things even more challenging, legacy security applications do a poor job managing these new vulnerabilities. It’s no longer enough to track the volume of API calls to identify a DDOS attack based on scale alone. Today’s attackers can probe slowly, and under the radar of brute force monitoring.

The best solution would be for development teams who deeply understand their own application logic to instill security best practices consistently and perfectly. The “shift left” movement is improving tooling and education, but the reality is that business results can’t wait for millions of developers to collectively raise the bar for building secure applications.

That’s why it’s necessary to continue to shield applications in the wild with a coherent security monitoring strategy. As attacks get more sophisticated, our responses must also  become more sophisticated. For most security teams, that means getting deeper into the API logic and capabilities, testing and probing to find vulnerabilities before bad actors do.

We will expand on several of the OWASP top ten vulnerabilities over a series of blog posts, identifying both why these issues are more prevalent than ever, and also what to do about them. Stay tuned for more.
"engineering managers have it easy"
Tags: management, programming, leadership
Published: 2023-03-23 16:30:34

Next up on the "engineering managers have it easy" series: long working hours.

At Adadot we analysed data in 38,000 developer datasets from GitLab, GitHub, and Google Calendar.

In our sample, which is comprised of mostly early stage startups, we identified that managers are working an average of 16 hours per month outside of normal working hours.

This is ten times longer 😱 than developers in
their teams.

They are also sending messages and continuing to communicate
for almost ten extra hours per month 🔥 .

This is ten times more than juniors in their teams, again. 😩

Why do they burn the midnight oil? In early stage startups managers are more likely to own a piece of the pie in the form of stock options.

Next time someone says its not worth it giving out equity to employees you can show them this.
Several ways to handle request side effect that you should know
Tags: react, hooks, webdev, javascript
Published: 2023-03-23 16:21:49

In React, useEffect is commonly used to handle side effect, including handle request side effects. 

However, when it comes to handling requests, it's common to use async/await, but passing an async function as the first argument of useEffect will result in an error.


This is because useEffect expects a function that returns void, but async functions return a promise.

Therefore, there are several ways to handle request side effects without errors that you should know.

### 1. use an async function expression
```typescript

const [data, setData] = useState(null);

useEffect(() => {
    const fetchData = async () => {
        const result = await fetch(
            'YOUR_URL_HERE'
        );
        setData(result.data);
    }
    fetchData();
}, []);
```

You can also abstract the function expression into a useCallback hook outside the useEffect so that you can use it in other places:

```typescript
const [data, setData] = useState(null);

// useCallback can accept an async function as its argument
const fetchData = useCallback(async () => {
    const result = await fetch(
        'YOUR_URL_HERE'
    );
    setData(result.data);
}, [])
useEffect(() => {
   fetchData()
}, [fetchData])
```

### 2. use an IIFE
```typescript
const [data, setData] = useState(null);

useEffect(() => {
    (async () => {
        const result = await fetch(
            'YOUR_URL_HERE'
        );
        setData(result.data);
    })()
}, [])
```

### 3. use Promise.then
```typescript
const [data, setData] = useState(null);

useEffect(() => {
    fetch( 'YOUR_URL_HERE')
        .then(result => setData(result.data));
}, [])
```

### 4. use function declaration
```typescript
const [data, setData] = useState(null);
useEffect(() => {
    async function fetchData() {
        const result = await fetch(
            'YOUR_URL_HERE'
        );
        setData(result.data);
    }
    fetchData();
}, [])
```
Also, you can abstract this function declaration into a useCallback hook outside the useEffect so that you can use it in other places.


Hope these ways can work for you. :)
HTML Tags with Example
Tags: webdev, javascript, beginners, programming
Published: 2023-03-23 16:19:54

HTML doctype is a declaration that tells the web browser which version of HTML the web page is written in. The doctype declaration is the first line of an HTML document and begins with <!DOCTYPE> followed by the type of document. Here are some examples of HTML doctype declarations

[https://realmediums.online/web_development/front-end-development/html/html-tags/](https://realmediums.online/web_development/front-end-development/html/html-tags/)
Cómo comparar strings en Solidity.
Tags: solidity, programming, blockchain, spanish
Published: 2023-03-23 16:12:59

Cuando estás iniciando en Solidity en algún momento puede ser que necesites comparar Strings. Tan acostumbrado que estoy a javaScript, quería aplicar una manera similar en Solidity, resultando que la manera difiere bastante.

Los **operadores de comparación (== y !=) no son compatibles con strings.**
La solución es comparar los hashes de keccak256, los strings no pueden ser pasados directamente a keccak256, por lo que nos valdremos de abi.encodePacked() para que tomen el string a comparar.
Aquí tenemos un ejemplo:

```solidity
function comparison(string memory _nombre){
  require(keccak256(abi.encodePacked(_nombre) == keccak256(abi.encodePacked('Carla'), "El nombre debe ser Carla.")
}
```

**PD:** Estoy aprendiendo Solidity y es muy probable que halle mejores maneras de hacer comparaciones luego, especialmente por el costo que puedan tener. Dejo por aquí el enlace original de donde aprendí este método: https://soliditytips.com/articles/compare-strings-solidity/
Animation -14 : CSS Loader Zoom in Zoom Out
Tags: css, webdev, animation, design
Published: 2023-03-23 15:40:33

Are you looking for animations to enhance your website? We've got you covered with our wide selection of creative and engaging #animations. Say goodbye to endless searching and hello to seamless integration on your website!

#### We're excited to introduce our latest YouTube series, which features diverse creative and inspiring website animations.

---

In our short videos, you'll find a variety of #animations that can be easily implemented on your website to enhance user experience.


---

### Simple Content Preload CSS Animation 

---

{% youtube y49yReQ6Ekc %}

 ---
### [Source code](https://democoding.netlify.app/loaders/css-loader-zoom-in-zoom-out)


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Check out my Facebook Page 
[Programming memes by Coder](https://www.facebook.com/programmingmemesbycoders)

5. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

6. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)
- Sudoku Game And API
[https://sudoku-game-and-api.netlify.app/](https://sudoku-game-and-api.netlify.app/)

---
---