teleren/devto huggingface dataset:
Enhancing User Experience through Web Accessibility: A Comprehensive Guide
Published: 2023-10-29 13:28:11



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggjtvqfdqso8795hrm88.png)
When it comes to website development, ensuring accessibility is not just a legal requirement but also a fundamental aspect of providing an inclusive and user-friendly digital experience. Over the years, my journey as a web developer has been defined by a strong commitment to creating accessible digital spaces. This commitment stems from my deep understanding of the impact accessible design can have on diverse user groups.

One of my most notable experiences involved working on a local government website where we had to revamp the entire platform to comply with accessibility standards. This required a multifaceted approach, involving both front-end and back-end adjustments. From implementing clear navigation structures to incorporating alternative text for images and ensuring keyboard accessibility, every aspect of the website was meticulously tailored to accommodate users with varying abilities.

Additionally, during a recent project for an e-commerce platform, I focused on optimizing the site for screen readers and ensuring compatibility with assistive technologies. This involved extensive testing with different screen reader software and making adjustments to the codebase to enhance the overall user experience for visually impaired customers.

By prioritizing accessibility in web development, we not only adhere to legal requirements but also open up our digital platforms to a wider audience, including individuals with disabilities. It's imperative to understand that accessibility is not just about compliance; it's about empathy and inclusivity, fostering a digital landscape where everyone can navigate, interact, and engage seamlessly.

In conclusion, my dedication to accessibility goes beyond mere compliance. It is a testament to my belief in creating a digital world that caters to the diverse needs of all users, irrespective of their physical abilities. Moving forward, I remain committed to incorporating accessibility best practices into every aspect of web development, ensuring that technology serves as an enabler for all.
Automating Team Approvals Flow with GitHub Actions
Tags: githubactions
Published: 2023-10-29 13:22:19

GitHub Actions is a potent tool for automating development workflows and enhancing code quality. In this post, I'll introduce an open-source software (OSS) I developed called [Team Approval Checker](https://github.com/hayawata3626/team-approval-checker). This action aims to automate the approval flow of pull requests, fostering smoother collaboration within teams.

## Features and Benefits:

- Blocks merging until a pull request (PR) receives approval from specified team members
- Automates the team's approval flow, reducing manual errors
- Integrates seamlessly with GitHub's native functionalities

## How to Use

`.github/workflows/check-team-approvals.yml`

Please note, to retrieve members within your organization, ensure that the GitHub token is granted the appropriate permissions.

```yml
name: Check Team Approvals

on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  check-team-approvals:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Generate a token
        id: generate_token
        uses: tibdex/github-app-token@v1
        with:
          app_id: ${{ secrets.APP_ID }}
          private_key: ${{ secrets.PRIVATE_KEY }}

      - name: Run approval check
        uses: hayawata3626/team-approval-checker@v1.0.8
        with:
          conditions:
            '[{"team": "team1", "minimumCount": 3}, {"team": "team2",
            "minimumCount": 2}]'
          github-token: ${{ steps.generate_token.outputs.token }}
```

In the above example, the CI/CD pipeline will fail unless it receives a minimum of three approvals from team1 and a minimum of two approvals from team2.


It is necessary to require status checks in GitHub's branch protection settings.(ref: https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/managing-protected-branches/about-protected-branches)
Let's build a Dynamic Calculator! 📟
Tags: rust, tutorial, beginners, programming
Published: 2023-10-29 13:04:25

Add a keyboard mannager for users inputs:

`cargo add k_board`

Add calculator logic inside the program:
```rust
use k_board::{Keyboard, Keys};
use std::io;

fn main() {
    let mut result: f64 = 0.0;
    let first: f64 = get_number("first");
    let second: f64 = get_number("second");
    let operation: i8 = get_operation();
    match operation {
        0 => result = first + second,
        1 => result = first - second,
        2 => result = first * second,
        3 => {
            if second != 0.0 {
                result = first / second
            }
        }
        _ => {}
    }
    println!("The result is: {}", result);
}

fn get_number(position: &str) -> f64 {
    let mut input: String = String::new();
    println!("Enter the {} number: ", position);
    io::stdin().read_line(&mut input).expect("Error");
    let number: f64 = match input.trim().parse() {
        Ok(number) => number,
        Err(_) => get_number(position),
    };
    number
}

fn get_operation() -> i8 {
    let mut operation: i8 = 0;
    menu(&mut operation, 0);
    for key in Keyboard::new() {
        match key {
            Keys::Up => menu(&mut operation, -1),
            Keys::Down => menu(&mut operation, 1),
            Keys::Enter => break,
            _ => {}
        }
    }
    operation
}

fn menu(operation: &mut i8, selection: i8) {
    std::process::Command::new("clear").status().unwrap();
    if *operation > 0 || *operation < 3 {
        *operation += selection;
    }
    let mut op = vec![' ', ' ', ' ', ' '];
    for i in 0..4 {
        if i == *operation {
            op[i as usize] = '*';
        }
    }
    println!(
        "{} Add\n{} Subtract\n{} Multiply\n{} Divide",
        op[0], op[1], op[2], op[3]
    );
}
```
Hacktoberfest 2023 journey !!
Tags: hack23contributor, hacktoberfest, hacktoberfest23
Published: 2023-10-29 12:38:43

### ✨Intro
Hey folks !! this was my first hacktoberfest participation and another step towards opensource community. You can checkout my [Github profile](https://github.com/Shivraj-Nakum) here.

### ⚡Experience
It was a fun experience contributig to opensource communities and learning in public

### 📈Growth
My Skillset Before Hacktoberfest 2023
Before Hacktoberfest 2023, I considered myself a proficient developer with experience in various languages and tools. However, I had limited experience with open source contributions.

How I Improved
This Hacktoberfest, I honed several skills:

**Git Proficiency**: I now confidently navigate Git and version control, a crucial skill for open source collaboration.

**Code Quality**: Working with experienced developers improved the quality of my code. I now adhere to best practices and maintain clean, well-documented code.

**Problem-Solving**: Tackling complex issues in open source projects sharpened my problem-solving skills and taught me the value of seeking help when needed.

**Community Engagement**: I became an active member of open source communities, refining my communication and teamwork skills.
Experience as a Core Team Member at Google Developer Student Clubs — Virtual University ✨
Tags: experience, webdev, google, student
Published: 2023-10-29 12:34:45

In September 2022, I joined the **Google Developer Student Club — VU** as a Core Team Member, the community led by **Elishah Yousaf** and **Zainab Sehar**. It was an amazing year and I learned a lot, explored, and expanded my knowledge by connecting with my leaders, seniors, and core teammates as part of this awesome student community.


![Abdul Rehman badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azfji2gg6fr1tka9j15l.jpg)

I got experience with different **Google products, tools, and Google platforms,** I took part in many challenges and events throughout the year like **Hacktoberfest 2022, Google Cloud Study Jam, Google AndroidSeekho, Google Cloud Platform (GCP) program, Google Arcade Challenge,** and many others with my other fellows.

I learned so many valuable skills like:
**Team Management, Problem-Solving, Event Management, Public Speaking, Communication Skills, and Soft Skills**.


![Google Cloud image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptih637lob95zijokpeb.jpg)

I received my **GDSC Core Team Member Certificate.** ✨


![GDSC VU Core Team Certificate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79a6uki6baos08anicak.jpg)

Also for this year 2023–24, I have been selected as a **Team Manager** at **Google Developer Student Club — the Virtual University of Pakistan Attock**.

In the last, I would like to thank _Google, Google Developers, Google Developer Student Club — VU, Rachel Francois, and Huzaifa Habib_ for this program. 😍

I hope you enjoyed reading this, if you have any queries, suggestions or feedback feel free to connect with me and ask, I will be happy to help you. Thank you so much.

**Connect with me:**
[LinkedIn](https://www.linkedin.com/in/abdulrehman0/)
[LinkTree](https://linktr.ee/devabdulrehman)
[GitHub](https://github.com/abdulrehmanghub)
[Twitter](https://twitter.com/devabdulrehman)
[Medium](https://medium.com/@abdulrehman0)
[YouTube](https://www.youtube.com/channel/uc0u-cjmrinc6i3gb1dok0wa?sub_confirmation=1)


![Abdul Rehman LinkedIn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oepp56vo1k2l85f61ec3.jpg)

Tags:
#GDSC #gdscvu #gdsccoreteam #coreteam #badge #certificate #google #huzaifahabib #googledevelopers #googledeveloperstudentclubs #gdglivepakistan #abdulrehman #androidseekho #gcp #googlecloudstudyjam #cloudstudyjam #googlecloud #students
If movies were all about software development.
Tags: watercooler, jokes, memes
Published: 2023-10-29 12:22:14

It's Sunday, so I thought I would share some silly movie posters I have created (edited). 

This is what movie posters would look like if software development was the only job in the world!

If you [follow me on Twitter](https://twitter.com/GrahamTheDev) then you have probably seen these already, but if not, enjoy! 💗

## Divception
🔊 BRWAAAAAHM!
![The Inception movie cover, main title changed to "Divception".  With <div>s added over all the buildings, and other alterations like "Divcaprio", IMACS (instead of IMAX) and the cast have semantic HTML tags over them such as <main> for Dicaprio.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mye10ogvur3ow5ndjpuk.png)

## The Devternals
I have to say, this will probably be better than the original.

!["Eternals" movie poster, modified to say "Devternals" and with various programming language logos placed over each of the characters in the poster](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qe8zppz0w6yb5m1cs6x.png)

## Oppensourcer
This is what happens when you use "git push --force" 😱

![Oppenheimer movie poster. Title changed to "OppenSourcer" and behind Oppenheimer are 3 GitHub contribution graphs coloured orange instead of green.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs8kmrkmo11okhcpgzlg.png)


## J<del>aw</del>S

We're gunna need a bigger <del>boat</del> Float()...

![JAWS movie poster editor to say "JS" (a and w removed). The shark has been painted in yellow and the text "DEV" has been placed over the girl swimming above. The tagline reads "JavaScript doesn't look so bad they said...
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cns3ku0i5dwbncmqn6n5.png)



## gIT
Hey Georgie...want a green square?

![Stephen King's "It" poster, the text has been changed to read "Git", lots of transparent green squares (like a contribution graph) have been added to the background. The balloon that has Pennywise's face on it normally now has Octo Cat (GitHub's mascot) face on it instead. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbbvg9ge2cfys20mgovq.png)

## The GoFather
I'm **Golang** to make him an offer he can't refuse...

![The Godfather movie poster, but Vito Corleone has been photoshopped to look like Golang's mascot the Gopher by adding the Gopher eyes, nose and mouth on top of his face and by turning his whole head light blue. The movie title now says "The Gofather" with the "Go" part in light blue.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uc79jod4bimlodus9uw.png)

## That's it
Not much else to say, it is a Sunday, I wanted to share something silly.

Let me know your favourite (and if you come up with a better caption!)

Oh and if you have any ideas for more movie posters for the series then let me know in the comments. 

Have a wonderful week everyone! 💗
NodeJS + Typescript : Getting Started
Tags: node, typescript, beginners, webdev
Published: 2023-10-29 12:21:30

Node.js is a popular JavaScript runtime environment that is used to build scalable and performant server-side applications. TypeScript is a superset of JavaScript that adds type safety and other features to the language.

In this article, we will show you how to get started with Node.js and TypeScript in just two minutes.

**Prerequisites**
You must have [Node.js](https://nodejs.org/) and [VS Code](https://code.visualstudio.com) installed.

Open terminal and start executing the below commands:

```
mkdir my-app && cd my-app
npm init -y
npm install -D typescript
npx tsc --init
mkdir src && cd src
echo "console.log('Hello World!');" >> index.ts
cd ..
code .
```
Note: Last command will open the project folder in vscode editor 😉

Inside VSCode, open tsconfig.json and replace the content with below:

```
{
  "compilerOptions": {
    "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs", /* Specify what module code is generated. */
    "rootDir": "src", /* Specify the root folder within your source files. */
    "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    "declarationMap": true, /* Create sourcemaps for d.ts files. */
    "sourceMap": true, /* Create source map files for emitted JavaScript files. */
    "outDir": "./dist", /* Specify an output folder for all emitted files. */
    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
    "strict": true, /* Enable all strict type-checking options. */
    "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "include": [
    "src/**/*"
  ]
}
```
Next, open package.json and add below two script commands to scripts tag:

```
"build": "npx tsc",
"start": "npm run build && node dist/index.js",
```

Your package.json should look something like:

```
{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx tsc",
    "start": "npm run build && node dist/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.2.2"
  },
}
```

That's it! Now open terminal using shortcut key:
```
ctrl + shift + ` (backtick key)
```

Run the below command:
```
> npm run start
```

TADA, you should see the output in the console as:
```
Hello World!
```
TLA+ is easy if you know how to abstract
Tags: tlaplus, formalmethods, abstraction
Published: 2023-10-29 11:19:21

I've been wanting to learn TLA+ for a while now, and I finally had a chance to do it thanks to a seminar series held by Professor Murat Demirbas. In this article, I will talk about my experience with formal methods and TLA+, and I will also share some of the things I've learnt that I think will be very useful when writing your specifications.

By the end of this article, I hope that you will:

    Have a basic understanding of formal methods and model checking
    Understand how TLA+ can improve algorithm and system design
    Have some intuition on what it takes to write a spec in TLA+
    Want to learn some TLA+.

As always, let's start with the problem we're trying to solve.
What problem do formal methods help solve?

English is considered a very ambiguous language. When we build a complex system, we need an unambiguous specification (also known as "spec"). Formal methods use math to define a rigorous system model. After we have written the code for the model, we can then also use it to verify some properties. 

The benefits of formal methods are twofold:

    Unambiguous specification of our systems and algorithms
    Verification of properties for these models

An example of a property that can be verified is that no execution can result in a deadlock. This would be very difficult to prove in a test, especially if it spans multiple systems.

We can also verify that an algorithm is correct by writing some properties as invariants. An invariant is simply a predicate that should always hold true. Invariants are sometimes used in asserts.

We can define correctness and liveness properties. For example, we could verify that eventually some property will hold, such as that our new sorting algorithm eventually sorts its input.

Formal methods allow you to explore different designs and optimize performance while maintaining confidence that the system is doing the right thing. 

[Continue reading...](https://blog.fponzi.me/2023-10-26-tla-plus-is-easy-if-you-know-how-to-abstract.html)
Resolving Dependency Installation Error with npm install
Tags: npm
Published: 2023-10-29 11:14:48

## Background
Executing `npm install` results in the following error:
```bash:bash
failed to solve: error from sender: open \develop\project\webtech-bookstore\frontend\node_modules\.pnpm\@babel+core@7.23.2\node_modules\debug: The file cannot be accessed by the system.
```
## Cause
The node_modules directory installed by different versions of Node.js or on different operating systems may cause compatibility issues

Sharing the `node_modules` directory installed by different versions of Node.js or on different operating systems may cause compatibility issues. To avoid such problems, it's common to delete the `node_modules` directory and then run `npm install` to reinstall the dependencies.
cool things to do on wine (mac & linux)
Tags: wine, vbs, batch, programming
Published: 2023-10-29 11:12:42

One thing about wine is how easy it is to use and how compatible it is.
So here is a small list of cool things you can do on wine :)

**windows command prompt (cmd)**
windows command prompt is the peak of development on windows however if you have a different operating system it may be frustrating to see youtube tutorials that don’t work because it uses windows cmd and not the standard bash terminal.
Well now you can do those tutorial by running:
`wine64 cmd` (please note if you use a 32-bit OS do not include the 64 just use the wine command).
this command emulates the windows command prompt for all OS’s to use

**batch files**
batch files can be used for everything from TAS bots to apps to automated tasks or just a computer prank. If you want to run a batch file for macOS or linux just run:
`wine64 yourFile.bat`
and thats it!

**vbs script**
I didn’t think vbs was possible on mac or linux but it turns out it is. Vbs isn’t as popular as it used to be but it is still a good programming language. So lets get straight to the point. run:
`wine64 start yourFile.vbs`

and there you go! those are my top three favourite things to do on wine!

Enjoy coding :)
15. Learning typography and animations (Day 13)
Published: 2023-10-29 10:35:05

Today was practice, practice, practice!

- SCSS
- Typography
- Effects and Animations
- Flexbox

But I confess - it was almost a weekend to forget in terms of studying. Although I was at my study desk the whole time, I felt I didn't make proper use of it - my mind was SO distracted. It must have something to do with the 28 October partial lunar eclipse!

**Typography**

I have only played around with fonts on my documents, WordPress websites, and Canva. It was good to study in detail how they are used in web development also.

Here is an example of a code to work on font styles:

`p { font-size:2em; font-weight:900; font-family:'Noto Sans', sans-serif; }`

`h1 { font-size:3em; font-weight:100; font-family:'Courier New', sans-serif;`

"**em**" helps you increase the font size in multiples of the default size of 16px.

For the font-family, I used Google Fonts for the first time!

- Go to Google Fonts and choose a font you want
- In the list of font sizes for that specific font chosen, click on + to open the menu that displays the embed info.


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

- Copy the "link rel" and paste it into the <head></head> area.
- Then, come back to Google Fonts, copy the 2nd one above (CSS rules), and paste it into the Class element you are styling.

That should get you the font style you want.

**Effects and Animations**

This was fun but I don't remember any of the syntaxes I learned as I write this!

Anyway, one of my activities was to get these 5 boxes to change color and pop out the text in it when you hover over it.

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

So, I wrote this code to do the job:

``.box:hover { font-size: 25px; color: blue; background: white; animation-name:colorful-box; animation-duration:2s; }
``
``@keyframes colorful-box { from { background:white; } to { background:pink; } }
``

And it did the job:

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

As I worked on this animation, I wondered if I ever will use such animations in real life. Most of the websites today are simple and minimalist. Anyway, it's good to know.

From tomorrow, WEEK 3 commences!