teleren/devto huggingface dataset:
Return On Investment (ROI) Of Accessibility
Tags: a11y, webaccessibility, webdesign
Published: 2022-10-10 16:15:58

---
title: Return On Investment (ROI) Of Accessibility
published: true
date: 2022-09-26 12:24:13 UTC
tags: accessibility,webaccessibility,webdesign,a11y
canonical_url: https://www.matechs.com/blog/return-on-investment-roi-of-accessibility
---

_There is no one-size-fits-all answer to this question, as the ROI of accessibility will vary depending on the specific organisation and its goals. However, there are a few general ways in which accessibility can be part of an organisation’s strategy._

![Return On Investment (ROI) Of Accessibility](https://cdn-images-1.medium.com/max/1024/0*-BlWtsWMqzi14Cwx.png)

First, by making products and services accessible to everyone, your organisation can help to break down barriers and **promote inclusion**. This can have a positive impact on the lives of individuals with disabilities, as well as on the overall community.

Additionally, accessible products and services are beneficial not just to those with disabilities. Accessible websites can be easier to use for everyone, just like accessible buildings can be more user-friendly for everyone, regardless of ability.

Second, by investing in accessibility, as an organisation, you can show that you are committed to meeting the needs of all members of your community. This can help to **build trust and goodwill** among customers, employees, and other stakeholders.

Third, by making products and services accessible, your organisations can tap into a **larger market of potential customers**. People with disabilities have a combined spending power of [trillions of dollars](https://www.rod-group.com/insights). People are often loyal to businesses that make an effort to meet their needs.

Ultimately, by making products and services accessible, organizations can:

- help to break down barriers;
- promote inclusion;
- build trust and goodwill; and
- tap into a larger market of potential customers.
How to host React application on Netlify ☁ for free!
Tags: react, netlify, beginners, tutorial
Published: 2022-09-26 12:15:49

Hey there👋,

If you have portfolio that you use to showcase your different projects then it is better to host all of your projects and share that link in the portfolio for each projects. This is really good approach then using only images of your work. By using this approach the client can easily check your projects from your portfolio and this will also help you to land more clients. 
 

In this tutorial you will learn,
▶️ How to deploy React application on Netlify
▶️ How to use env variables on Netlify
▶️ How to configure Netlify when you are using react-router

I have choose netlify to host a React application, because netlify has this starter plan which is enough to host your different projects without paying anything. Also, netlify provides many cool features as well. 

Here is the tutorial on how How to host React application on Netlify ☁ for free!

{% youtube OG71ARNRPT4 %} 

In this video you will learn to implement env variables safely and also solution for react-router as well.


### Thanks For Reading😄

Checkout my other article: 

[How to render 3D model in a React JS application]
(https://dev.to/codebucks/how-to-render-3d-model-in-a-react-js-application-2bi)

Feel free to visit my youtube channel: 
[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)

Follow me on Twitter where I share lots of useful resources!
[@code_bucks](https://twitter.com/code_bucks) 😉
What Does Google Web Scraping API Means?
Tags: api
Published: 2022-09-26 12:14:37

You can create a data collecting funnel using a [google web scraping API](https://zenscrape.com/) that scrapes the data you require and then merges it immediately into your databases or analytics program. This is where a web scraper API's true value lies. APIs enable you to acquire data on the fly. There are many platforms available online that provide web scraping API services. Web scraping and APIs both aim to give you accessibility to content on the web. By the use of web scraping tools, you may harvest information from any website. You can also go online and search for “web scraping and API” to get in contact with the best platforms providing API Services.
What Are The Benefits Of Google Trends API?
Tags: api
Published: 2022-09-26 12:04:01

[**Google Trends API**](https://zenserp.com/) has a lot of benefits to offer to your business. Through it, you can choose the best keywords, know about the latest trends, for backlinking you can find the sites and the articles, etc. The best thing is you can also check your competitors and identify highly interested regions for your keywords. These google trends APIs also allow you to monitor your brand well. There are also many online websites that are providing the services of google trends API. You can also get in touch with them by searching for the "API for google search”.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5f65u15xzg7jd3evesff.png)
List Numbers Files by Dir in Select Path - Powershell
Tags: script, shell, powershell, folder
Published: 2022-09-26 11:52:40

This script list numbers files by dir in select path


```
$folders = get-ChildItem -Directory -Path "C:\YOUR_PATH"
$folders |
ForEach-Object { 
        $path = $_.FullName
    [pscustomobject]@{
        Path = $path
        FileCount = (Get-ChildItem -Path $path -Recurse -File).Count 
    }
}
```

Thanks for read!
- [redhcp page](https://redhcp.me/)
- [redhcp github](https://github.com/redhcp)
Return Early To Reduce Deeply Nested If-Statements
Tags: beginners, csharp, programming
Published: 2022-09-26 11:47:39


## Introduction
It is easy to introduce deep nesting in the code. There are several techniques to reduce the deep nesting. One of these techniques is called "Return Early". By reducing the deep nesting, it allows us to follow the logic easily. We can also spot potential bugs without spending too much time. I revisited Return Early technique recently and it will be the main content of this post.


## Deep nested validation
Let's consider a method that returns a particular string depending on the input. The ideal input string would be "cat", and there are five things we need to check.

1. null or empty
2. shorter than 7 letters
3. contains "bad words"
4. contains any digits
5. is "cat"

We can implement the validation above one by one. 


## nested if statements
```csharp
public string CheckInputString(string inputString)
{

    string[] badWords = { "dog", "dogs" };
    if (!String.IsNullOrEmpty(inputString))
    {
        if (inputString.Length < 7)
        {
            if (!badWords.Contains(inputString))
            {
                if (!inputString.Any(char.IsDigit))
                {
                    if (inputString == "cat")
                    {
                        return "Meow";
                    }

                    return inputString;
                }

                return "the string contains numbers";
            }

            return "please dont use the bad words";
        }

        return "too long";
    }

    return "null or empty";
}
```



## not nested if statements

We can remove all the nested if statements above by focusing on the best case senario. In this case, having the input string being "cat" would be the best case. The rest of the cases are considered "wrong". As soon as we encounter the "wrong" result, we return a value and exit the method.
As you see below, we can resolve the deep nesting by utilizing the return early technique.

```csharp
public string CheckInputStringFixed(string inputString)
{

    string[] badWords = { "dog", "dogs" };

    if (String.IsNullOrEmpty(inputString))
    {
        return "null or empty";
    }

    if (inputString.Length >= 7)
    {
        return "too long";
    }

    if (badWords.Contains(inputString))
    {
        return "please dont use the bad words";
    }

    if (inputString.Any(char.IsDigit))
    {
        return "the string contains numbers";
    }

    if (inputString != "cat")
    {
        return inputString; 
    }

    return "Meow";
}
```

This should look a lot clearer than the previous example.

## Conclusion
I revisited return early technique where we get out of the method as soon as we encounter unwanted situation by returning a value right away. This technique can be applied in many situations and it greatly increased the visibility of the code.
Do you need to know/learn data structures and algorithms to become software engineer?
Tags: beginners, programming, discuss, algorithms
Published: 2022-09-26 11:45:00

Do you think self-taught developer should prioritize learning data structures or algorithms?

I think the answer would depend on what goals and aspirations you have.

Please have a look at this short video covering the topic. I wonder if you would agree?

{% embed https://youtu.be/xN_CMlR8aPU %}
Implementing Variable in CSS using Sass in React JS
Tags: css, react, beginners, javascript
Published: 2022-09-26 11:32:50

## Introduction

React is the most popular JavaScript framework at present. According to [Wappalyzer](https://www.wappalyzer.com/technologies/javascript-frameworks), React has a 34.1% market share among JavaScript frameworks technologies. It has an easy learning path and you can learn it after JavaScript.

[Sass](https://sass-lang.com/) in the extension of CSS with more powerful. Using Sass, you can implement variables, functions, nesting, and other awesome features. 

This is the first part in the series "Awesome stylesheet with Sass". We have many other posts in the pipeline such as dark/light themes, loading skeleton, and other using Sass. You can follow me on Twitter([@surajondev](https://twitter.com/surajondev)) to get notified of future posts earlier.

We are going to merge these two technologies by installing and using the Sass variable in ReactJS. 

So let's get started.

## Environment Setup

### Prerequisite

We need to pre-installed the NodeJS. NodeJS is a runtime JavaScript. These will be beneficial for running the command to install React and Sass.

Download NodeJS from here: https://nodejs.org/en/download/

### Installing React

After installing Nodejs on your machine, now you can install React. Run the below command to install React.

Command:
```bash
npm create-react-app react-sass
```
`react-sass` will be the name of your project. After downloading, delete all the unnecessary files and code. 

### Installing Sass

Now, it's time to install the superhero of our project i.e, Sass. Make sure you are in the `react-sass` directory and run the below command. 

Command:
```
npm install sass
```

After successful installation, you will be able to see the `sass` under dependencies properties in `package.json`.

## Using Sass variable

Create a stylesheet file with the name `style.scss`. SCSS stands for Syntactically Awesome Style Sheet and is the superset of CSS. Sass uses this file extension for its implementation.

For variable declaration, you just need to prefix the name of the variable with `$` and then the name of the variable.

```css
$primary-color: #2C372A
```

Use this variable anywhere in the file with the name `$primary-color`

Together it will look like this:
```css
$primary-color:#33D199;

.App {
  font-family: sans-serif;
  text-align: center;
  background-color: $primary-color;
}
```
Use this stylesheet by importing the file in the component. You can do this by the import command.

```jsx
import "./style.scss";
```

## Demo

You can see the live working of the project in the codesandbox here:

{% codesandbox react-sass-variable-r6e8jo %}

## Connect with Me

- [Twitter](https://twitter.com/surajondev)
- [LinkedIn](https://www.linkedin.com/in/surajondev/)

## Conclusion

I hope, this article has helped you understand Sass and its feature along with the installation guide for your React Application. Follow me on Twitter([@surajondev](https://twitter.com/surajondev)) for future updates earlier.

Thanks for reading the blog post.
I used useLayoutEffect
Tags: react, hooks, webdev, javascript
Published: 2022-09-26 11:18:20

Yes yes…I used this misunderstood hook.
Let’s simplify.
#### The difference between `useLayoutEffect` and `useEffect` is <u>when</u> each hook is executed.

### React’s lifecycle:
1. State changes in reaction to the user interacting with the UI.
1. `useLayoutEffect` is executed.
1. The browser paints the change, meaning, the user sees the changed UI.
1. `useEffect` is executed.

As we can see the `useLayoutEffect` happens before the `useEffect`, and more importantly, happens before the browser represents that change in the UI. 
This is why the solution to my **flickering** UI problem was switching from `useEffect` to `useLayoutEffect`.

### When should you prefer useLayoutEffect?
If you need to **update the DOM** and make visual changes to the UI on the initial mount, you should use `useLayoutEffect`.

----

Here is a close approximation of a real-life example where I used `useLayoutEffect` to solve the flickering problem I had.

{% embed https://codesandbox.io/embed/uselayouteffect-example-x7he1u?fontsize=14&hidenavigation=1&theme=dark %}


### Breakdown:
- Pressing the on the `click` button will reset the state to its initial state.

> In the real example I didn't press a button to initialize the state, the component **unmounted** and then mounted again which caused the state to **re-intialize** and the UI to flicker.


- If the <u>state</u> equals the <u>initial state</u>, then we don't show the text: `The number is: [number]`.
```react
{displayedNumber && <div> The number is: {displayedNumber}</div>}
```
This is the line that causes the flicker. because at the same time we're updating the `displayedNumber` state to be equal to the number (in the `useEffect`).
Therefore, we have a quick removal of the text and its return, which causes the UI to flicker.
 

When using `useEffect` <u>we have a UI flicker</u> because it happens **after** the browser paints.
![useEffect GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhf555e0ac4sdc0mc88s.gif)

---

When using `useLayoutEffect` <u>we **don't** have a UI flicker</u> because it happens **before** the browser paints.
![useLayoutEffect GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0g3zwxm48oyydtoqa1cr.gif)
Generator Random Numbers
Tags: generator, random, numbers, python
Published: 2022-09-26 11:12:20

Generator Random Numbers is a tool that generates Random numbers given maximum and minimum. For example, if we want to generate a number between 0 to 10, The Random Generator Will Give a random number between 0 to 10. Today we will write code in Python and C++ to develop the Random Numbers Generator.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kndbh3o82yjx07hdiqju.png)
To read more and write Random Generator follow
https://hecodesit.com/generator-random-numbers/
The Sports Channel website template
Tags: webdev, programming, node, express
Published: 2022-09-26 11:09:21

<p>“The Sports Channel” is another website template that could be used to continuously broadcast all  kinds of video 24 hours per day and seven days per week with no cost. Thanks to YouTube Player API (Application Programming Interface) that allow us to do such live broadcast.</p>

 

<p>Besides live broadcast, YouTube also allows us to write code to change video streaming. This fact make us to write code to switch between different videos sources at will in order to watch video streaming we like. By default, “The Sports Channel” template comes with five different videos streaming classified in five categories - Football, Volleyball, Basketball, Boxing, and Table Tennis. We could add more video sources if we like. And to switch between video sources, we just do “one click” without refreshing the web page.</p>

 

<p>“The Sports Channel” as well as all templates designed by Apsara Templates could be also used to run video and movies series website due to its ability to create unlimited playlist with videos from different platforms. For example, with “The Sports Channel” template we can create a playlist with videos from YouTube, Facebook, Vimeo… And those videos could be played smoothly without any problem.</p>

 

<p>If you want to use “The Sports Channel” template to create a sport website or to run a video and movie series website, you can call us at 096 388 9323, we will install this template for you to run on the European free web hosting service at <a href="https://www.deta.sh/">https://www.deta.sh/</a> . You could pay us only for our time to create a website for you. In addition, as this template is written in Node.js, it could be installed on any web hosting service that includes Node.js as one of its programming language. To see more templates, go to our website at <a href="https://khmerweb.deta.dev/">https://khmerweb.deta.dev/</a> .</p>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tm35cc7to3e13w4lvq9p.jpeg)
What is Machine Learning?
Tags: programming, beginners, tutorial, machinelearning
Published: 2022-09-26 11:09:16

**1.Introduction to AI**
AI stands for Artificial Intelligence. It enhances the human efficiency and capabilities. It tells us how to manage a huge amount of data in an easier and efficient way. It is used in various fields like:
1.Enterprise.
2.chatbots.
3.Health Care.
4.Banking, etc.
 **Definition**
When human intelligence is put into a machine and the machine is able to perform various tasks on the basis upon the given data. To do this a person should have a good knowledge of Algorithm and basics  of mathematics.
**2.Domains of AI**
There are three domains or sub parts of AI. These are as follows:

1.Machine Learning or Data Science.
2.Computer Vision.
3.Natural language processing(NLP).
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc5dixw0genzq27lzfc7.jpeg)
In this article we are going to understand the first domain of AI i.e. Machine Learning.

**3.Machine Learning or Data Science**
This domain of AI deals with teaching and adapting capabilities of machine. We are training the machine to respond to an situation where it can work more efficiently than humans. This capability of responding is done in three steps. These are :
1.The data is given to a machine .
2.The machine analyze the data .
3.The machine gives us the prediction.
100 000 Views reached! 🎉
Tags: discuss, watercooler
Published: 2022-09-26 11:00:04

Today, I passed the 100K views milestone and I want to do two things 

## 1 - Thank you! 
First, I want to thank you! Because without your involvement by reading, sharing, liking and/or commenting my posts, I won't be here ^^

I started to post here in january 2021 and I didn't thought at that time that I will be able to post so much, and that you will be interested by all those posts!

During the last months I wasn't really active here, but I've a few new posts which will come soon and hope you like it!

## 2 - What can be better?
Then, I want to take advantage of this post to ask you some advices. Is there things which can be better?
More illustrations?
More code gists?
...

So if you have any idea about what can be improved, I'll be glad to know it!

---

So let's keep in touch and see you soon! And let's go to the 200K milestone! 🚀🚀
How to Hire Shopify Expert Developers
Tags: webdev, beginners, programming, productivity
Published: 2022-09-26 10:32:23

The e-commerce business is booming right now. It’s a great time to hire Shopify Expert Developers and build an online store and sell products directly to your customers. The Shopify platform is one of the best tools you can use to do just that. If you want to create a Shopify store and sell goods from your website, the first step is to find Shopify developers who are experienced with the platform and can help you build your site from scratch.


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

These days, it isn’t always easy to find Shopify consultant who specializes in a certain technology or programming language. However, if you know where to look, it shouldn’t be too hard. There are plenty of developers out there who specialize in different coding languages and software platforms like Shopify. Here is how you can find a consultant and hire them for your project:

How to Hire Shopify Expert Developers
To hire a Shopify expert developer, you must have a solid understanding of Shopify’s basic functionality and what you need your application to do. When considering hiring a Shopify expert developer, make sure you know exactly what your needs are before going through the process of interviewing the developer. You can follow these steps to hire Shopify expert developers for your project. Read Full Article >> [Click Here](https://www.ebiztrait.com/blog/how-to-hire-shopify-expert-developers/)
How to save upto 50% of your AWS costs
Tags: aws, cloud
Published: 2022-09-26 08:32:24

Let’s discuss some tips and tricks to reduce the cost of the most used AWS services - RDS, EC2, S3, DynamoDB, CloudFront.

## RDS

- Migrate to latest graviton based instances. According to AWS, Graviton2 instances provide up to 35% performance improvement and up to 52% price/performance improvement.
- Opt for reserved instance, if you know your load. Can save upto 60% when compared to normal On-Demand database.
- Upgrade to latest SQL version, for higher performance, speed and also security.
- Don’t use multi A-Z, if you don’t need it.
- Downgrade or auto shutdown staging, testing instances, when not in-use.
- Disable performance insights for non-prod database.
- Auto delete snapshots that are too old.

## EC2

- Migrate to latest graviton based instances.
- Opt for reserved instance, if you know your load. Upto 72% savings compared to normal On-Demand EC2 instances.
- Move to lambda for infrequent batch jobs, instead of running EC2 all day long. 1 million executions FREE per month.
- You can also pick spot instances for testing, staging environments. Upto 90% discount when compared to normal On-Demand EC2 instances.
- Upgrade to latest EC2 versions.
- Downgrade or auto shutdown staging, testing instances, when not in-use.
- Use smaller instance, instead of 1 large instance, so that you can scale up and down when necessary.
- Choose EC2 in same region as other service like S3, DynamoDB to avoid unnecessary data transfers.

## S3

- Enable S3 Intelligent-Tiering to automatically move infrequently accessed files to lower priced S3. Can save up to 95% on storage costs for data that is not accessed for months, or even years, at a time.
- Store compressed formats, if possible.
- Enable CloudFront and serve through it, to reduce requests and data transfer cost.

## DynamoDB

- Check your minimum load and use provisioned capacity. 25 Write Capacity Units and 25 Write Capacity Units are FREE every month.
- Use on demand for lesser used tables.
- Prefer queries over scans.
- Use shorter attribute names.
- Avoid strongly consistent reads and transactions, wherever possible.


## CloudFront

- Auto Compress via CloudFront to reduce data transfer.
- Go for savings plan, if you know your load. Can save upto 30% when compared to on-demand.


---


## In Conclusion…

I haven’t covered many AWS services and tips to reduce cloud costs. But these are some ways by which you can reduce your AWS cloud bill upto 50%.


---


That’s it! Please let me know about your views and comment below for any clarifications.


If you found value in reading this, please consider sharing it with your friends and also on social media 🙏


Also, to be notified about my upcoming articles, subscribe to my newsletter below (I’ll not spam you 😂)


{% embed https://blogofcodes.substack.com %}


You can find me on [Twitter](https://twitter.com/sairahul1) and [LinkedIn](https://www.linkedin.com/in/sairahul1/) ✌️