teleren/devto huggingface dataset:
Introducing the Journal Prompt Randomizer
Tags: blazor, csharp, writing, showdev
Published: 2022-03-24 14:03:21

I like journaling.

Journaling helps me process my thoughts and feelings by getting them out of my head and onto a page. Getting them out of my head means that I am less likely to obsess about them and spiral down a rabbit hole. It’s easy to journal when I have lots of thoughts and feelings, on the busy days where big things are happening. But on the quiet days, when I don’t have any big thoughts, I stare at the blank page. A blank page that contains infinite options. And I have to pick one.

Ah, the paradox of choice: Having options is good, but having too many options can be paralyzing. 

I look up writing prompts in an attempt to kickstart my brain out of paralysis, but I encounter more choices! Lists and lists of prompts for memories, business planning, self-reflection, or empowerment. I just have to pick one.

You see the issue?

I found plenty of physical notebooks that had prompts pre-printed on the pages, but only a few digital generators, most of which had very cluttered UIs that made them confusing to use. So I gathered prompts from a number of journal prompt lists and built this minimalist site:

[![Image linked to Journal Prompt Randomizer site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghuoaf6cl79amn7oyfqz.png)](https://journalpromptrandomizer.com/)

It just gives you a prompt. Only one. However, it also has a button that will give you a different one if you want. But that's it. One prompt and one button. No more paradox of choice.

I’ve been using a hacked together version of this idea for a while now. It has really helped me stay consistent in my journaling. If I can stay consistent during the quiet times, then I am more likely to remember to be consistent during the busy times when I need to journal the most. I’ve been going through some rough things these past few months and now I’m coming out the other side. I decided to make a proper site for this in the hopes that it can help others get though those busy times as well, the good ones and the bad ones.

If you like it, please consider donating towards the cost of the domain & hosting.

[![Link to Buy Me A Coffee profile for Cailin Technologies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2ureqhekoa8x99nhiyg.png)](https://www.buymeacoffee.com/cailintech)

### Tech Specs

This site is a Blazor WebAssembly PWA written in C# for .NET Core 6. It is hosted in a Azure Static Web App instance. This setup has served me well for the small sites I specialize in and is very reasonably priced. Highly recommend 👍
CONCAT_WS in SQL
Published: 2022-03-24 13:58:23

Today I learn a new function in SQL. CONCAT_WS and CONCAT function returns a string resulting from the concatenation or joining, of two or more string values in an end-to-end manner. But CONCAT_WS separates those concatenated string values with the delimiter **specified in the first** function argument. CONCAT_WS requires a separator argument and a minimum of two other string value arguments; otherwise, CONCAT_WS will raise an error.
If CONCAT_WS receives arguments with all NULL values, it will return an empty string of type varchar(1).

### Syntax
`CONCAT_WS(separator, string1, string2, ...., string_n)`

### Example.
`SELECT CONCAT_WS('+', 'It', 'add', 'with','plus sign.');`
Result:
`It+add+with+plus sign.`
For
`SELECT CONCAT('It',' only', ' concat',' string.');`
Result:
`It only concat string.`

You can get more details about it by following the link.

[CONCAT_WS](https://docs.microsoft.com/en-us/sql/t-sql/functions/concat-ws-transact-sql?view=sql-server-ver15#:~:text=CONCAT_WS%20takes%20a%20variable%20number,in%20the%20first%20function%20argument.)
[SQL Server CONCAT_WS() Function](https://www.w3schools.com/sql/func_sqlserver_concat_ws.asp)
Custom 404 page on Next.js under a 1 minute
Tags: nextjs, javascript, errors, react
Published: 2022-03-24 13:55:07

404 page is very crucial in production,

A 404 page may be accessed very often. Server-rendering an error page for every visit increases the load of the Next.js server. This can result in increased costs and slow experiences.

### Creating custom 404 page.
simply move to pages components and make a new file 
```bash
touch 404.js
```

and make a react component,

```java
// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}
```

after making file and adding react component to it, add you details/ styling / even you can use
> You can use [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) inside this page if you need to fetch data at build time.

![404 page](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkhWHFkG0wkmBAv5PsAanMWf7MPUFaWAZe6g&usqp=CAU)


now your 404 page is live 🔴
Code Smell 124 - Divergent Change
Published: 2022-03-24 13:50:06

*You change something in a class. You change something unrelated in the same class*

> TL:DR; Classes should have just one responsibility and one reason to change.

# Problems

- [Coupling](https://dev.to/mcsee/coupling-the-one-and-only-software-design-problem-2pd7)

- Code Duplication

- Low Cohesion

- Single Responsibility Principle violation

# Solutions

1. Extract class

# Context

We create classes to fulfill responsibilities.

If an object does too much, it might change in different directions.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/398ed708b96ddabe79971b98edefce4a)
```javascript
class Webpage {
  
  renderHTML(): {
    renderDocType();
    renderTitle();
    renderRssHeader();
    renderRssTitle();
    renderRssDescription();
   // ...
  }
  //HTML render can change

  renderRssDescription() {
   // ...
  }

  renderRssTitle() {
   // ...
  }

  renderRssPubDate() {
   // ...
  }
  //RSS Format might change

}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/cb5736ef2d43863b8cae0ff060c1317a)
```javascript
class Webpage {
  
  renderHTML() {
    this.renderDocType();
    this.renderTitle();
    (new RSSFeed()).render();
    this.renderRssTitle();
    this.renderRssDescription();
   // ...
  }
  //HTML render can change
}

class RSSFeed {
  render() {
    this.renderDescription();
    this.renderTitle();
    this.renderPubDate();
    //...
  }  
  //RSS Format might change
  //Might have unitary tests 
  //etc
}
```

# Detection

[X] Semi Automatic

We can automatically detect large classes or track changes.

# Tags

- Coupling

# Conclusion

Classes must follow the Single Responsibility Principle and have just one reason to change.

If they evolve in different ways, they are doing too much.

# Relations

{% post https://dev.to/mcsee/code-smell-34-too-many-attributes-584p %}

{% post https://dev.to/mcsee/code-smell-90-implementative-callback-events-13l %}

{% post https://dev.to/mcsee/code-smell-14-god-objects-5185 %}

# More Info

- [Refactoring.guru](https://refactoring.guru/es/smells/divergent-change)

* * *

> A design that doesn’t take change into account risks major redesign in the future.

_Erich Gamma_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
Open Source Apple Store API
Tags: api, rest, react, nextjs
Published: 2022-03-24 13:30:50

Working with API's are the basis of Frontend 💻Engineering/Developement which can be Web🌐 or Mobile📱, API's are base.

![Apple Store Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mtqma1pxirntsms1i7n.jpg)
But getting really good api that suits your requirement is difficult, and if you have always thought of building an 🍎 Apple Store Clone and stops just because you didn't have any proper 🗄️backend data support, here is an better way.

Homepage 🏠: [`Open Apple Store`](https://oas.vercel.app/)

### [`Open Apple Store`](https://oas.vercel.app/) 
## it is an Open source Api which deals in data if apple API,
the product categories includes

- [`iPhone 📱`](https://oas.vercel.app/api/category/iphone)
- [`Mac💻`](https://oas.vercel.app/api/category/mac)
- [`iPad`](https://oas.vercel.app/api/category/ipad)
- Apple Watch⌚

you can also find specific product by proving it's Id 

[`iPhone 13 Pro Max📱`](https://oas.vercel.app/api/622b760cf9321c43d4902949)


start integrating with this in your project👍. 

Connect with me on. 
Twitter🐦: [`@Abhayprajapati_`](https://twitter.com/abhayprajapati_)

 
GitHub🐧: [`@theabhayprajapati`]
(GitHub.com/theabhayprajapati)




Share your feedback 😁
Reset Drupal Admin Password using Drush
Tags: drupal, drush, password
Published: 2022-03-24 13:22:52

This article describes how to reset the Drupal administrator password using Drush. We can use the Drush command line tool to reset the administrator password (or the password of any other user).

To do this, we have to first log in with our account using SSH & enter the following commands:


```
C:\Users\user_name>ssh site_name.dev@site_name.ssh.dev.acquia-sites.com
site_name@dev-1234:~$ cd ..
site_name@dev-1234:/home$ cd ..
site_name@dev-1234:/$ cd var/www/html/site_name/docroot
site_name@dev-1234:/var/www/html/site_name/docroot$ drush --uri=site_name.com upwd admin --password=Password123
Changes password for admin
site_name@dev-1234:/var/www/html/site_name/docroot$ exit
logout
Connection to site_name.ssh.dev.acquia-sites.com closed.
```

I did this for my project in DEV environment. I hope this is helpful & I would appreciate if any better solution is available.
Material UI - Grid layout
Tags: webdev
Published: 2022-03-24 13:13:07

```js
import {Grid} from '@mui/material'

// codes..

return (
  <Grid container>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>1</Card>
    </Grid>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>2</Card>
    </Grid>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>3</Card>
    </Grid>
    <Grid item xs={12} sm={6} lg={3}>
      <Card>4</Card>
    </Grid>
  </Grid>
)
```

`xs` means 
```css
@media query(min-length: 0px) {
  // codes..
}
```
and This means apply CSS properties when `width` is up and 0px.
So, `xs={12}` means If width is `>=0px` then take `12 columns`.

Grid layout basically 12 columns in MUI.
So, If each Grid item takes 12 columns then they will take all the columns one by one so they will be stacked.

You can see total 4 Grid items in the code.
If responsive breakpoint is up and `lg` then takes 3 columns.
So, each Grid item will take 3 columns.
It means all Grid items will be at a row.


MUI default breakpoints
```
xs, extra-small: 0px
sm, small: 600px
md, medium: 900px
lg, large: 1200px
xl, extra-large: 1536px
```
Experiencias aprendiendo #JavaScript y #TypeScript con #GitHubCoPilot 🤖 (Updated!)
Tags: englishpost, githubcopilot, microsoftreactor, spanishpost
Published: 2022-03-24 22:09:56

---
title: Experiencias aprendiendo #JavaScript y #TypeScript con #GitHubCoPilot 🤖 (Updated!)
published: true
date: 2022-04-04 13:00:00 UTC
tags: EnglishPost,GitHubCopilot,MicrosoftReactor,SpanishPost
canonical_url: 
---

![](https://brunocapuano.files.wordpress.com/2022/02/2022-02-01-copilot-session-series-header-1.gif?w=650)

Buenas !

Durante el mes de Marzo he sido parte de una serie de eventos sobre Visual Studio Code y GitHub CoPilot. En Abril agregamos nuevas sesiones con nuevos lenguajes y experiencias: JavaScript y TypeScript !

- Python ([grabación](https://aka.ms/GitHubCoPilotSP1/5))
- C++ ([grabación)](https://aka.ms/GitHubCoPilotSP2/5)
- C# ([grabación](https://aka.ms/GitHubCoPilotSP3/5))
- Markdown ([grabación](https://aka.ms/GitHubCoPilotSP4/5))
- Programando con CoPilot para controlar una aspiradora Roomba 🤖 y un Drone 🚁! ([grabación](https://aka.ms/GitHubCoPilotSP5/5))
- TypeScript ([grabación](https://www.youtube.com/watch?v=IP9LKBaGlzw&ab_channel=MicrosoftReactor))
- [Nuevo] JavaScript

## Session Registration

- [Marzo 1st : Episodio 1 | 🐍 Python](https://aka.ms/GitHubCoPilotSP1/5)
- [Marzo 8th : Episodio 2 | C#](https://aka.ms/GitHubCoPilotSP2/5)
- [Marzo 15th : Episodio 3 | C++](https://aka.ms/GitHubCoPilotSP3/5)
- [Marzo 22nd : Episodio 4 | MarkDown](https://aka.ms/GitHubCoPilotSP4/5)
- [Marzo 29th : Episodio 5 | Controlando una aspiradora Roomba](https://aka.ms/GitHubCoPilotSP5/5)
- Abril 5: [Cómo GitHub CoPilot 🤖 me está ayudando a aprender TypeScript](https://www.youtube.com/watch?v=IP9LKBaGlzw&ab_channel=MicrosoftReactor)
- Abril 19: [Cómo GitHub CoPilot 🤖 me está ayudando a aprender Javascript](https://www.meetup.com/Microsoft-Reactor-Toronto/events/284609723/)

## Recursos Adicionales

- [GitHub Copilot](https://copilot.github.com/)
- [Visual Studo Code](https://code.visualstudio.com/)
- [Microsoft Learn - Scale AI in your organization](https://aka.ms/Mar1ScaleAI)
- [Microsoft Docs - An introduction to the Azure OpenAI Service](https://aka.ms/Mar1IntrotoOpenAI)
- [Microsoft Azure - OpenAI Service (PREVIEW)](https://aka.ms/Mar1OpenAIService1)

## Speaker and Co-Host

👤 **[Bruno Capuano](http://aka.ms/elbruno)**

* Blog: https://elbruno.com
* Twitter: [@elbruno](https://twitter.com/elbruno)
* Github: [@elbruno](https://github.com/elbruno)
* LinkedIn: [@elbruno](https://linkedin.com/in/elbruno)

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
Curso gratuito de AWS
Tags: aws, cloud, webdev, tutorial
Published: 2022-03-24 13:10:47

Aprenda desde conceitos básico até conceitos avançados sobre AWS.

## 01 - Como criar conta na amazon
{% embed https://www.youtube.com/embed/-vsBkITZnOo %}

## 02 - Configurando o AWS CLI no Linux
{% embed https://www.youtube.com/embed/0x1sDeGPTwI %}

## 03 - Configurando o AWS CLI no Windows 10
{% embed https://www.youtube.com/embed/LJBvf1WYTWI %}

## 04 - COMO INSTALAR SUA APLICAÇÃO NA AMAZON USANDO EC2
{% embed https://www.youtube.com/embed/uG_cOXCjJnY %}

## 05 - COMO CRIAR BANCO DE DADOS MySQL NA AMAZON
{% embed https://www.youtube.com/embed/sBmONQSMI0c %}

## 06 - Como salvar dados S3 | AWS
{% embed https://www.youtube.com/embed/3e1hGPVWl8c %}

## 07 - COMO INSTALAR SUA APLICAÇÃO NA NUVEM EM POUCOS CLIQUES
{% embed https://www.youtube.com/embed/Y8Y6xakM-28 %}

## 08 - Como publicar API com docker mysql AWS
{% embed https://www.youtube.com/embed/9VLmE2dIA7k %}

## 09 - Utilizando o amazon S3 com Java
{% embed https://www.youtube.com/embed/1vkh-fRZJl8 %}

## 10 - Como usar o amazon Elastic Beanstalk Via o browser
{% embed https://www.youtube.com/embed/-8_dCdNquM8 %}

## 11 - Como criar um banco PostgreSQL na amazon
{% embed https://www.youtube.com/embed/Zw_yv8Jp3AY %}

## 12 - Usando Docker na amazon publicando imagens
{% embed https://www.youtube.com/embed/G0lr1E7U7M8 %}

## 13 - Como usar o amazon Elastic Beanstalk | Usando command line CLI
{% embed https://www.youtube.com/embed/b53nGfp3cyM %}
React - How to redirect
Tags: webdev
Published: 2022-03-24 12:51:40

```js
import {useHistory} from 'react-router-dom'
```
useHistory was the thing to redirect in React.
But in react-router-dom v6, it changed.

```js
import {useNavigate} from 'react-router-dom'
const navigate = useNavigate();

const handleSubmit = (e) => {
  e.preventDefault()
  // some codes..
  fetch('http://localhost:8000/notes', {
    method: 'POST',
    header: {'Content-Type': 'application/json'},
    body: JSON.stringify({title, details, category}),
  }).then(() => navigate('/')) // navigate() here! redirect to '/'
}
```
How To Fix The XAMPP ERROR on MySQL Shutdown Unexpectedly?
Tags: mysql, how, errors, xampp
Published: 2022-03-24 12:38:57

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/how-to/how-to-fix-the-xampp-error-on-mysql-shutdown-unexpectedly

[![Advanced Laravel SAAS Starter Kit with CRUD Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyjyev8tz3r8vi2w3on1.png)](https://1.envato.market/5g5QAn)

[Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!](https://1.envato.market/5g5QAn)


In this post, if your XAMPP has an error on MySQL shutdown unexpectedly then this is for you. I also experience this issue so I want to share the solution with you in case you experience it.


**Sample errors:**

Error: MySQL shutdown unexpectedly.
Due to a blocked port
Missing dependencies
Improper privileges
Shutdown by another method


![how-to-fix-the-xampp-error-on-mysql-shutdown-unexpectedly](https://ecn-storage.s3.us-west-2.amazonaws.com/articles/how-to-fix-the-xampp-error-on-mysql-shutdown-unexpectedly-0oRLTs6Rywx980.webp?ctm=1630193503)

Before doing this we recommend not to **delete your files** instead do a backup for it in case of unusual results.

 

Here are the steps below:

1. Rename the folder **mysql/data** to **mysql/data_old** (you can use any name)
2. Create a new folder **mysql/data**
3. Copy the content inside **mysql/backup** to the new **mysql/data** folder
4. Copy all your database folders that are in **mysql/data_old** to **mysql/data** (skipping the mysql, performance_schema, and phpmyadmin folders from data_old)
5. Finally copy the **ibdata1** file from **mysql/data_old** and replace it inside mysql/data folder
6. Start **MySQL** from **XAMPP** control panel

 
BOOM. It works!

![how-to-fix-the-xampp-error-on-mysql-shutdown](https://ecn-storage.s3.us-west-2.amazonaws.com/articles/how-to-fix-the-xampp-error-on-mysql-shutdown-unexpectedly-mBBY9o59Oyx980.webp?ctm=1630194324)

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/how-to/how-to-fix-the-xampp-error-on-mysql-shutdown-unexpectedly if you want to download this code.

[![Advanced Laravel SAAS Starter Kit with CRUD Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyjyev8tz3r8vi2w3on1.png)](https://1.envato.market/5g5QAn)

[Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!](https://1.envato.market/5g5QAn)


Happy coding :)
SYNTAX VS SEMANTICS; NAMING CSS CLASSES
Tags: webdev, css
Published: 2022-03-24 12:37:22

Let's briefly look into the concept of Structure and Semantics in Programming languages, with major references to CSS class names.

The Syntax of a programming language is a collection of rules to specify the structure or form of code, whereas, semantics refers to the interpretation of the code or the associated meaning of the symbols, characters or any part of a program. (source: techdifferences.com)

In this context, I can simply say,

Syntax relates to the rules guiding how class names can be written.
while,
Semantics refers to what class names can be interpreted to mean.

For the remaining part of today's nudget, we'll be using our understanding of Syntax and Semantics (S&S) to answer the questions;

> Q1. How do you properly name CSS class properties?

Ans
A proper or conventional CSS class name must obey both concepts of S&S.
i.e the class name must be inline with the rules guiding naming of CSS classes, and as well, it's meaning must be easily interpreted.

Consider a div containing a user's personal details.

A proper CSS class naming could be

```
<div class="user-details">...</div>

.user-details { color: #042; }

An improper class naming could be

<div class="p2">...</div>

.p2 { color: #042; }
```

> Q2. If a class name works, does it make it conventional?

Ans
There are conventional ways of naming classes, mainly to enhance development speed and debugging, one of which is the BEM (which stands for Block Element Modifier ...see my previous article for in-depth analysis).

Even though most css codes developed without any Structure or naming conventions still works, the knowledge of S&S proves that not every code that works is conventional.
Consider example 2 above, although the code works, it's is not conventional.

The concept of Semantics calls for the use of class names that are easily interpreted. I like to imagine that another developer would continue on every code I write, to help me define 'easy-to-interpret' class names.

Therefore, take out time for in-depth study of conventional class naming. 

I hope you found this insightful, do drop a comment if you did, and if you would like to read more of my articles as well.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pqa1d2mp7lzg147d93v.jpg)
Bug Bounty: Not always an ideal
Tags: bugbounty, guzzi, security, blst
Published: 2022-03-24 12:25:13

I want to share with you my bug bounty experience this week and the points to remember.
(Hahaha I Know that ... my picure has nothing to do here 😂)
So what's happen to me this week?
I joined a public bug bounty program on Intigriti, read the rules of engagement quickly, and start hacking.
Did the recon then try to find some interesting vulnerabilities. 
In the target website I remarked a chat between the freelancers and the client.

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

I tried to submit some payload but the client side URL encode my payload, so I intercept my request with Burp and insert my payload.
Finally at the first time I trigger a XSS with this payload:`<script>onerror=alert;throw 1</script>`
(with no bracket).

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


The POC of XSS:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24ypjsttjj0qcayr5uzk.png)


 




Before I submited my xss, I read again the rules of engagement and guess WHAT??


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

I can not imagine that XSS can be out of scope, even an stored XSS. So I texted intgriti team to discuss about the **Stored** XSS and told them to take into consideration that the severity of the XSS is HIGH, after few days a member of Intigriti team respond that: "All forms of XSS are considered as OOS for this program".


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


In conclusion few things that I need to learn from the next time:

1. Take time and read **carefully** the program's rules.

2. Chose a Bug bounty adapted to my skills.


Hope you will not fall into this trap.
How to use Chrome DevTools to find a color fixing insufficient color contrast ratio on your HTML element
Tags: a11y, tooling, webdev, programming
Published: 2022-03-24 12:21:44

Insufficient color contrast ratio is one of the most popular problems connected with accessibility. Fortunately, it is quite well find by automated tools like Lighthouse or Accessibility Insights for Web. But did you know that Chrome DevTools can help you not only detect that issue but also fix it? How to do so?

![Screenshot from Chrome Dev Tools with hover with element properties on it. Big red arrow is pointing at ! icon next to "Contrast" label](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsvaq7spm996wodbam8f.png)

When you open Chrome DevTools and inspect the given element toolbar with details of it will be presented. And as it’s visible on the picture it may show us an orange warning icon close to the Contrast category. It means the contrast color ratio between text on that element and its background is not sufficient.

![Screenshot of Styles tab of Chrome DevTools with open color picker. Contrast ratio section is expanded and there are 2 buttons with reload icons below. First of them has label AA, the second one AAA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21lc6rqxr1zsi92hhyq9.png)
 
When you take a look at the Styles tab of that element you can do even more. Click on the square color preview on the left side of the color property value to open the color picker. Below the color value input, you may see an expendable section with contrast ratio information. The red icon close to the ratio informs us that we should take a look at that values. And reload button allows Chrome to automatically propose the new color — which will have a correct contrast ratio and as close to ours as possible. Nice way to fix that issue, don’t you think?

Hope, it will help you keep you webpages accessible for everyone!