teleren/devto huggingface dataset:
My Journey To Becoming An A11y Expert: Current Status
Tags: a11y, career
Published: 2022-12-18 14:59:51

More than half a year ago, I announced that I wanted to go from being A11y-minded to being an A11y expert.

{% embed https://dev.to/yuridevat/how-i-want-to-get-from-a11y-minded-to-a11y-expert-edc %}

I think it's time for an update.

From my listed points in the above article, 

- I have successfully passed the [UX design certification](https://www.credly.com/badges/290ad2c6-c5a1-4ba2-bdde-32a971685e4c/public_url)
- I have successfully passed the [IAAP Certified Professionals in Accessibility Core Competencies (CPACC)](https://www.credly.com/badges/ee2fc53c-0c7a-4e20-abc3-91281b3ab199/public_url)
- I have published [many articles about accessibility](https://dev.to/yuridevat/series)
- I created a learning website called [YurisCodingClub](https://www.yuriscodingclub.com/) to help developers get into accessibility 
- I created my own organization [YurisCodingClub](https://github.com/YurisCodingClub) on GitHub to encourage contributors to get more involved with accessibility
- I created my own organization called **[Accessibility First](https://www.accessibilityfirst.xyz/)** to spread the word about accessibility on various platforms (found on [LinkedIn](https://www.linkedin.com/company/accessibilityfirst/) and [Instagram](https://www.instagram.com/accessibilityfirst/))

Although I am still far from being an expert, I think I have managed to become known for my accessibility skills ☺️.

My next steps (or first steps for 2023) are to prepare for the [ADS (Accessibile Document Specialist)](https://www.accessibilityassociation.org/s/accessible-document-specialist) exam and learn [sign language](https://sprachenzentrum.univie.ac.at/en/courses/kurs/Austrian-Sign-Language-A1-Phase-1-for-beginners/23F4PGS011) in an intensive three-week weekday course in February.


---
![Thank you](https://docs.google.com/uc?export=download&id=166Ecq6uBl61U14OUlkHOHIBv2ArKoumJ)

_Thanks for your reading and time. I really appreciate it!_
Using dotnet tool
Tags: dotnet, csharp
Published: 2022-12-18 14:50:49

Dotnet tools - is a great technology to distribute command line tools.
For example, the following command installs EF Core CLI.

```sh
dotnet tool install --global dotnet-ef
```

Listing installed dotnet tools:
```sh
dotnet tool list --global
```

Uninstalling dotnet tool:
```
dotnet tool uninstall --global dotnet-ef
```

You can pack your own command line application as dotnet tool:
```pws
dotnet pack MyCli.csproj --configuration Release --output ./publish`
    -p:PackAsTool=true `
    -p:ToolCommandName=mytool `
    -p:Version=1.0.0
```
It generates `MyCli.1.0.0.nupkg` nuget package. 
Built tool with be placed into `tools\net7.0\any` folder of the archive.
You can push the package into nuget repository as normal nuget package and install the tool from it.
But you can also install the tool from a local folder where nupkg file placed:

```
dotnet tool install MyCli --global --add-source ./publish
```

The `dotnet tool` is a part of .Net Core SDK, so you can't install your tool the environment where no dotnet SDK installed. But you can install dotnet tool to environment with SDK installed and copy it from there. Check the Andey Lock example for [copying dotnet tool binaries to non-sdk docker image](https://andrewlock.net/running-net-core-global-tools-in-non-sdk-docker-images/).
How to use count in Terraform
Tags: terraform, cloud, cloudnative, cloudskills
Published: 2022-12-18 14:44:30

The count meta argument is an alternative to `for_each` and applies a resource multiple times.

```jsx
resource "aws_route" "private_subnet" {
  count = local.subnet_count
  route_table_id = aws_route_table.private_subnet.id
  destination_cidr_block = "0.0.0.0/0"
  nat_gateway_id = aws_nat_gateway.natgw[count.index].id
}
```

The snippet above uses the `count` meta arg to create multiple private subnets. You need to provide an integer value to the `count` argument and the resource will be applied according to the value that you choose.

You can combine the ``count`` with the `length(..)` function to get the amount of elements from a list and apply the same amount of resources.

```jsx
resource "aws_route" "private_subnet" {
  count = length(var.availability_zones)
  route_table_id = aws_route_table.private_subnet.id
  destination_cidr_block = "0.0.0.0/0"
  nat_gateway_id = aws_nat_gateway.natgw[count.index].id
}
```

This also works with maps when you use the `length(..)` function on `keys` or `values`.

you can access the index value (1,2,…) through `count.index` which is useful for enumerating resource names or accessing elements with the `element(...)` function from an array (i.e. array ob CIDR ranges).

Use the `count` meta argument over `for_each` if you have a simple resource use case that does no rely on multiple values but only operates with an index value.
What is Spring Security? pt.2
Tags: springboot, springsecurity, security, java
Published: 2022-12-18 14:10:38


![action process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzryrlwva3pv5nesnxs1.png)

Here is the action process divided into small parts. 

## HTTP Request

![HTTP Request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nntkbinpluakl18m2ebj.png)

Security has a chain of filters.
So, when a request comes in from a client, it goes through a series of filters for authentication and authorization purposes.

Among those filters, it reaches the filter called Authentication Filter. 
There, the UsernamePasswordAuthentication filter performs form-based authentication using the username and password.

In general, if you use form-based authentication, it will move on to the Application Filter.

_** But if you use other authentication methods like OAuth2.0 or JWT, it will move on to another filter that I will explain about later._


![HTTP Request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5mzv6bcwy6c4vx54b84.png)

When a request arrives at UsernamePasswordAuthenticationFilter, the AttempAuthentication(request, response) method operates.

This method creates a UsernamePasswordAuthenticationToken (Authentication) based on the user cridentials.

The token is then given to the AuthenticationManager that proceeds with the authentication.

_** All access subjects create Authentication. This is finally stored and used in the SecurityContext._

_** UsernamePasswordAuthenticationToken is an implementation of the Authentication interface. 
UsernamePasswordAuthenticationToken extends AbstractAuthenticationToken, and AbstractAuthenticationToken implements Authentication._
Eslint rule to restrict imports
Tags: eslint, linting, javascript, lodash
Published: 2022-12-18 14:25:02

---
title: Eslint rule to restrict imports
published: true
date: 2022-12-18 14:03:52 UTC
tags: eslint, linting, javascript, lodash
canonical_url: https://krzysztofzuraw.com/2022/eslint-rule-to-restrict-imports/
---

I recently learned that there is a way to restrict imports of certain libraries in [Eslint](https://eslint.org/). This is useful for example when you want to restrict the use of a certain library. For example, you might want to restrict the use of [lodash.js](https://lodash.com/) in your codebase. You can do this by adding the following rule to your Eslint config:

```js
rules: {
  'no-restricted-imports': [
    'error',
    {
      paths: [
        {
          name: 'lodash',
          message: 'Please use the native implementation instead.',
        },
      ],
    },
  ],
},
```
what does disk iops mean and how to check it?
Tags: linux, beginners, tutorial, cloud
Published: 2022-12-18 13:57:10

## what does IOPS mean?

IOPS stands for "Input/Output Operations Per Second," and it is a measure of the performance of a storage device, such as a hard disk or a solid-state drive (SSD). It refers to the number of read and write operations that a storage device can perform in a given second.

The workload that a flash disk can support depends on the specific device and its capabilities. In general, SSDs tend to have higher IOPS than traditional hard disks, and they are able to handle more workload. However, there is a wide range of performance among different SSDs, and the specific workload that a particular SSD can support will depend on its design and specifications.

For example, a high-end SSD designed for use in a server environment may be able to handle hundreds of thousands of IOPS, while a consumer-grade SSD may be limited to a few tens of thousands of IOPS. In general, it is important to consider the IOPS requirements of your workload when selecting a storage device, in order to ensure that it can perform at the necessary level.

## How to check disk IOPS in Linux

1.  Use the `iostat` command: The `iostat` command can be used to monitor the I/O performance of a system, including the IOPS of individual disks. To see the IOPS of a specific disk, use the `-x` flag and specify the disk name, like this:

`iostat -xk /dev/sda` 

2.  Use the `hdparm` command: The `hdparm` command can be used to retrieve various information about a disk, including its IOPS. To get the IOPS of a disk, use the `-t` flag and specify the disk name, like this:

`hdparm -t /dev/sda` 

3.  Use the `fio` tool: The `fio` tool is a flexible I/O testing tool that can be used to measure the IOPS of a disk. To use it, create a configuration file with the desired test parameters, and then run the `fio` command with the configuration file. For example:

`fio iops-test.conf` 

4.  Use a benchmarking tool: There are several benchmarking tools available that can be used to measure the IOPS of a disk. One popular option is `Bonnie++`, which is a suite of utilities for testing the performance of a filesystem. To use it, install the `bonnie++` package and then run the `bonnie++` command with the desired options. For example:

`bonnie++ -d /mnt -n 0:1:0 -r 2048 -s 8G -x 1` 

These are just a few examples of the ways that you can check the IOPS of a disk in Linux. There are many other tools and techniques that can be used for this purpose.

[Follow us on howtouselinux website to get the latest Linux updates, expert insights, and practical guides.](https://www.howtouselinux.com/subscribe)


Reference:  

 - [4 ways to check disk iops in Linux](https://www.howtouselinux.com/post/check-disk-iops-in-linux)
 - [storage monitoring guide from redhat](https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/7/html/performance_tuning_guide/sect-red_hat_enterprise_linux-performance_tuning_guide-storage_and_file_systems-monitoring_and_diagnosing_performance_problems)
What is CSS box model
Tags: css, beginners, webdev, programming
Published: 2022-12-18 13:38:21

As you might be aware of the fact that CSS is used to style the structure which is provided by HTMl. But how does it actually styles. We don't style entire HTML at once. We take piece of elements and design them separately. Every HTML element like heading,image,butons etc is surrounded by a box and this box is also divided into four parts, Let's talk about them now :

**_(1)Content:_**
Content area is the actual area occupied the content such as image,text,links. You can think it as the area your body is occupying in the room. You can make changes in the content area by "width", "min-width", "max-width", "height", "min-height", and "max-height" properties.

**_(2) Padding:_**
Next to the content area comes Padding area which acts as blanket to the content. Padding area can be increased and decreased accordingly by the help of "padding-top", "padding-bottom", "padding-right", "padding-left" and simply by "padding" properties

**_(3) Border:_**
In real life border is just a line defining the territory or you can notice the border around your images. The CSS border is similar to that. You can define border area properties like "border-radius", "border" properties.

**(4) Margin:**
"the empty space at the side of a page in a book, etc". This is the meaning I found on google and yes Margin Area is like this only, being the outermost area this empty space is used to separate two different elements. You can define marigin area by "margin-top", "margin-bottom", "margin-right", "margin-left", and simply by "margin" properties

NOTE: This is on the basis of my current understandings
How to use for each in Terraform
Tags: terraform, iac, cloud, cloudskills
Published: 2022-12-18 13:36:31

The `for_each` meta argument can be used to remove redundancies from code blocks.

You can apply `for_each` on a data structure such as a 

- set
- list
- map

It is an alternative for the `count` meta argument and is mutually exclusive with `count`.

## `for_each` on Sets

You can iterate over a set of values with the `for_each` meta argument as shown below.

```jsx
resource "aws_subnet" "subnet_data2" {

  for_each = toset(local.cidrs)

  vpc_id                  = aws_vpc.main.id
  map_public_ip_on_launch = false

  cidr_block = each.key 
  availability_zone = "eu-central-1b"
}
```

## `for_each` on Lists

A more sophisticated way of using `for_each` is by defining a block with additional values.

This is especially useful since `resource` blocks do not allow you to define locals are some other kind of re-usable variables.

You can do that in the `for_each` block instead like shown with the `idx` value.

```jsx
locals {
  cidrs = ["10.0.0.0/24", "10.0.1.0/24", "10.0.2.0/24"]
}

resource "aws_subnet" "subnet_data" {

  for_each = {
    for c in local.cidrs : c => {
      idx = index(local.cidrs, c)
    }
  }

  vpc_id                  = aws_vpc.main.id
  map_public_ip_on_launch = false

  cidr_block = each.key 
  availability_zone = element(var.availability_zones, each.value.idx)

  tags = {
    Name        = "${var.vpc_name}-subnet-data-${each.value.idx}"
    Environment = var.environment
  }
}
```

## `for_each` on Maps

You can use the `keys` or `values` function for a `for_each` block.

```jsx
resource "aws_subnet" "subnet_data" {

  for_each = toset(local.cidrs.keys)

  vpc_id                  = aws_vpc.main.id
  map_public_ip_on_launch = false

}
```
What is Spring Security? pt.1
Tags: springboot, java, security, spring
Published: 2022-12-18 13:06:52

## What is Spring Security?

> A framework responsible for the security of spring-based applications.

### Spring Security Terms

- `Authorization`: The process of giving someone permission to perform the operation of the application.
- `Authentication`: The process of verifying a user or device before allowing access to a system or resources.
- `Password` (Credential): The password of the target accessing the resource
- `Principal`: Subject accessing the protected resource

## How does Spring Security work?

Basically, the action process of Spring Security order is:
Authentication → Verification → Authorization

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8kd1jjjda3rv7hlpowj.png)
Simple Github Workflow for Lint - Prettier & Jest (yarn)
Tags: webdev, beginners, workflows, github
Published: 2022-12-18 13:05:23


For this workflow make sure you add your own version of node that you have installed on your machine

```js

name: Master Preview

on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
jobs:
  run-linters:
    name: Lint & Jest
    runs-on: ubuntu-latest
    steps:
      - name: Check out Git repository
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: v16.6.1
      - name: Install dependencies
        run: yarn --prefer-offline
      - name: Run linters
        run: yarn lint
      - name: Test
        run: yarn test
  prettier:
    name: Prettier
    runs-on: ubuntu-latest
    steps:
      - name: Check out Git repository
        uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: v16.6.1
      - name: Install dependencies
        run: yarn --prefer-offline
      - name: Run Prettier
        run: yarn run format
  build:
    runs-on: ubuntu-latest
    name: Build and Test
    steps:
      - uses: actions/checkout@v2
        name: Check out repository
      - uses: actions/setup-node@v1
        name: Set up Node.js
        with:
          node-version: 16.10.0
```
DayNews24
Published: 2022-12-18 12:38:05

DayNews24  a fost creat pentru a veni în ajutorul dumnevoastră pentru promovarea produselor sau serviciilor oferite.

 

Publicarea de articole online este o metodă eficientă de promovare, pentru ca necesita un volum de muncă mai mare iar creativitatea dumnevoastră este rasplatită de Google.

 

Prin postarea de articole online puteți crește notorietatea afacerii dumneavoastră, spori încrederea potențialilor clienți ce vor cauta informații despre firma dumneavostră, astfel încât, vânzarea produselor sau serviciilor oferite va decurge mai ușor.

 

DayNews24 este un director de [articole online](https://www.daynews24.ro) și [comunicate de presă](https://www.daynews24.ro) ce oferă utilizatorilor posibilitatea de a publica articole online pentru a crea trafic pentru propriile site-uri web.
4 ways to troubleshooting Linux server reboot issue
Tags: beginners, linux, cloud, productivity
Published: 2022-12-18 12:30:20

{% embed https://www.howtouselinux.com/post/check-last-reboot-time-in-linux %}
Last week, I received a report that one server had unexpectedly rebooted. This is a serious issue, as the server needs to be up and running at all times to support the business.

Upon investigation, I found that the server rebooted at around 9:10 AM, which was our business time.  This means that the server was pretty busy at that time. But there were no error messages displayed before or after the reboot. I checked the system logs and find no indication of problems or issues that may have caused the reboot. I also checked the hardware and found no signs of failure or damage.

At this point, I was unsure of the cause of the reboot. I considered the possibility that it may have been caused by a software issue, such as a bug or an update that caused problems because we just released a new version of our app recently.

I decided to run a diagnostic tool to check for any software issues and also consider seeking help from our engineering team.

In the end, it turns out that the reboot was caused by a software issue, specifically a bug in the new release. we are able to apply a patch to fix the bug and prevent future reboots. 

The server is now running smoothly and the business is able to continue operations without interruption.


1. First, gather as much information as possible about the unexpected reboot. This may include [the time when the server reboot](https://www.howtouselinux.com/post/check-last-reboot-time-in-linux), any error messages that were displayed before or after the reboot, and any other relevant details.
    
2.  Check the system logs for clues about the cause of the reboot. The kernel logs, system logs, and application logs may all contain useful information. Look for error messages or other indications of problems that may have led to the reboot.
    
3.  Check the hardware for any signs of failure. This may include checking the system's temperature, examining the system's power supply, and looking for any loose or damaged components.
    
4.  Check for any software issues that may have caused the reboot. This may include checking for updates or patches that may have been installed around the time of the reboot, or looking for any known bugs that may have caused the problem.


[Follow us on howtouselinux to get the latest Linux skills.](https://www.howtouselinux.com/subscribe)
      


It's important to approach troubleshooting in a systematic way and to gather as much information as possible before attempting to fix the problem. This will help ensure that the root cause of the problem is identified and properly addressed.
Hydration in React
Published: 2022-12-18 12:27:18


Introduction :

With the increased in popularity, React is the most used UI library in Web Application. React can only flex its muscles in the client-side.
React can do great job in CSR. However, in case of Server Rendering,it does not come with smooth DX. It carries the burden of server side configuration stuff.
So comes the “The React’s Meta Framework”. There are few popular meta framework in the react’s ecosystem like, Nextjs, Remix, Fresh,etc.
All these framework have the common agenda i.e SSR. There are different components for SSR lile routing, bundling,transpiling,etc but the common thing is react’s hydration process.

What is hydration?
Hydration is the process of using client-side JavaScript to add application state and interactivity to server-rendered HTML.
but instead of having an empty DOM to render all of our react components into (CSR), we have a DOM that has already been built, with all our components rendered as HTML.

A typical React application relies on client-side rendering. Instead of parsing HTML to create the DOM, client-side rendering uses JavaScript to create it. A minimal HTML document serves as the application container, and only contains links to the JavaScript and CSS necessary to render the application.

hydrate lets you display React components inside a browser DOM node whose HTML content was previously generated by react-dom/server
hydrate expects the rendered content to be identical with the server-rendered content.

Server-Side:
ReactDOMServer — to render components to static markup.
renderToString() :Render a React element to its initial HTML. React will return an HTML string

renderToStaticMarkup() : Similar to renderToString() , except this doesn’t create extra DOM attributes that React uses internally, such as data-reactroot. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.

Client-side:
ReactDOM - ReactDOM is a package that presents DOM-specific methods
render()- It returns a reference to the component after rendering a React element into the DOM in the provided container
hydrate()-to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup.

Benefits of using Hydration
Improves SEO
Decreases the initial load times

References:
[https://beta.reactjs.org/apis/react-dom/hydrate]
[https://blog.saeloun.com/2021/12/16/hydration.html](
)
How to Make Responsive eSports Website Using HTML CSS JavaScript
Tags: css, javascript, tutorial, beginners
Published: 2022-12-18 12:20:08

{% youtube FAo8xeq4NKw %}

In this video, we'll show you how to make a basic gaming website using HTML, CSS, and JavaScript. We'll use a responsive design to make sure the website looks good on all devices, no matter how big or small.

This is a great tutorial if you're gamer or new to web development, or if you just want to learn how to make a simple website. We'll walk you through each step of the process, and by the end of the video you'll have a gaming website of your own!

[Source code](https://www.patreon.com/posts/unigine-gaming-76066088?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link)


⏱️ Timestamps
-----------------------------
0:00 - Demo
4:48 - File structure
5:45 - Project initial
17:37 - Header
35:42 - Hero section
48:28 - Upcoming section
1:07:26 - News section
1:22:42 - Footer section
1:45:54 - Media queries