teleren/devto huggingface dataset:
Image Accessibility 101: Image Maps
Tags: a11y, webdev, html
Published: 2019-09-20 16:29:23

---
title: Image Accessibility 101: Image Maps
published: true
description: 
tags: a11y, webdev, html
series: Image Accessibility 101
---

An image map is an image that contains clickable regions.  

##Tips for writing the alt text: 
1) This type of image also requires a two part description, one for the entire image and another for each clickable region.

2) Inside the image's alt attribute is where the basic description for the entire image would go.

3) Each clickable region is also given its own alt attribute, which would contain a description of what will happen or where they will be taken when they click on that region of the image.

##Examples:

![Organizational chart that shows relationships amongst employees at a company.](https://thepracticaldev.s3.amazonaws.com/i/ugjjhrqc0b3jfpjmqqp8.png)

```html
<img 
    src="img/orgchart-b583d8ff.png" 
    alt="Board of directors and related staff: " 
    usemap="#Map" 
/>
 
<map name="Map" id="Map">
    <area
        shape="rect"
        coords="176,14,323,58"
        href="chairman.html"
        alt="Davy Jones: Chairman"
    >
    <area 
        shape="rect" 
        coords="81,75,226,114" 
        href="secretary.html"
        alt="Carole Brewster: Company Secretary"
    >
    <area 
        shape="rect" 
        coords="6,138,155,182" 
        href="marketing-director.html"
        alt="Henry H Brown: Marketing Director (reports to chairman)"
    >
    <area 
        shape="rect"
        coords="175,138,323,182"
        href="sales-director.html"
        alt="Paula Holbein: Sales Director (reports to chairman)"
    >
    <area
        shape="rect" 
        coords="345,136,496,186" 
        href="finance-director.html"
        alt="Hugh Howard: Finance Director (reports to chairman)"
    >
</map>
```

The above example is of a company's organizational chart that shows all the people by name, position, and how their roles are related to each other.  In the image, the regions for each person in the chart is a clickable element that would bring the user to that person's biography. 

The image's first alt text explains that the image is an organizational chart for a company's board of directors and related staff, while each clickable region relays to the user that person's name, role, and if they report to anyone.  

##Summary

Image maps are images that contain clickable regions.  These images also need a two part description: one for the entire image as a whole and a second for each clickable area inside the image.  The descriptions given to each clickable region should explain what will occur or where they will go when they click on the link.
Image Accessibility 101: Images of Text
Tags: a11y, webdev
Published: 2019-09-20 16:28:29

---
title: Image Accessibility 101: Images of Text
published: true
description: 
tags: a11y, webdev
series: Image Accessibility 101
---

An image of text is an image that has text as the main content that is meant to be readable by the user.

##Tips for writing the alt text: 
1) The alt text should be an exact match to the text that appears in the image.

##Examples:

![There are no limits to what you can accomplish, except 
the limits you place on your own thinking. - Brian Tracy](https://thepracticaldev.s3.amazonaws.com/i/0j5tlejsyr56pw38sju4.png)

```html
<img src="img/quote1.jpg" alt="There are no limits to what you can accomplish, except 
the limits you place on your own thinking. - Brian Tracy" />
```

Even though this image has a background of a climbing rope and people rock climbing, the main content of the image is the quote.  Therefore, the alt text should be reflective of the quote and its author, rather than the images that appear in the background.

![Surprise! 45 is the new age for regular colon screenings."](https://thepracticaldev.s3.amazonaws.com/i/xhtjkewatsbhtac19kbb.png)

```html
<img src="img/card.png" alt="Surprise! 45 is the new age for regular colon screenings." />
```

This is an image from a client site I worked on at work for the American Cancer Society Birmingham Alabama chapter.  They were wanting to make a site to raise awareness for colon cancer.  The site allows you to send a funny card to a loved one encouraging them to get screened.  The alt text for these cards needed to be the exact wording pictured, so that non-visual users could still pick an appropriate invite to send.

> You can view the full site and entire collection of cards here on the [Cordially Stop Cancer site](https://cordiallystopcancer.com/).

###Important Notes:
1) If the image that you are using is simple text that could be placed in the markup of the page and styled using CSS to match the original image, this is preferred.  Actual text is easier to work with, manipulate, and style than an image.  It also isn't going to become pixelated or distorted when resized.

##Summary

Images that contain text as the main content that are intended for people to read need to have alt text that contains the exact same text.  This way non-visual users will have the text contents of the image read aloud.
Image Accessibility 101: Functional Images
Tags: a11y, webdev
Published: 2019-09-20 16:28:15

---
title: Image Accessibility 101: Functional Images
published: true
description: 
tags: a11y, webdev
series: Image Accessibility 101
---

A functional image is an image that initiates an action rather than shares information.  These images can enhance buttons, links, and other functional elements.

##Tips for writing the alt text: 
1) It should describe the action that will happen when you click the image, rather than what the image is.

2) It is crucial for understanding the functionality of the content being displayed.

##Examples:

![The Netflix logo](https://thepracticaldev.s3.amazonaws.com/i/xa6ubp3mkvlqmo1cpckd.png)

```html
<a href="https://www.netflix.com">
    <img src="img/Netflix-Logo.png" alt="Netflix Home" />
</a>
```

The above image is considered a functional image because the logo is being used as a link to redirect the user back to the site's homepage.  Therefore, you want to include the word `Home` in the alt text to indicate to the users that this link brings you back to the home page when clicked.

> If the logo was just being used as a stand alone image without also being a link, then the alt text would just read `alt="Netflix"`.

![A printer icon](https://thepracticaldev.s3.amazonaws.com/i/s9ts58aa0hgprna6nk7o.jpg)

```html
<button onclick="window.print();">
    <img src="img/printer-icon-in-flat-style-vector-19244045.jpg" alt="Print this page." />
</button>
```

This image would also be considered functional because it is an image inside a button that prints the current page's content when clicked.  The image of the printer indicates to sighted users that the button is for printing.  However, for those who can't visually see the printer, the alt text needs to convey this action to them. 

##Summary

An image that is being used to initiate an action or enhance a functional element on the page is a functional image.  It is so important that the alt text reflect the action that will occur, rather than describe what the image is.
Image Accessibility 101: What is it and why is it important?
Tags: a11y, webdev, html
Published: 2019-09-20 16:25:01

---
title: Image Accessibility 101: What is it and why is it important?
published: true
description: 
tags: a11y, webdev, html
series: Image Accessibility 101
---

Web accessibility is a very important, but often times over looked topic in the world of web development.  When done properly, it allows as many people as possible to use the web and it makes the user experience more efficient and pleasant for everyone, not just those with a disability. 

Image accessibility is a small piece of this, but it can contribute greatly to the overall accessibility of your site and how users understand and interact with the content.  Making your site's images as accessible as possible goes way beyond just making sure that the image has alt text.  The text that gets put, or not put, inside of the alt attribute varies greatly based on the purpose of the image and the content that surrounds it.

The following series is a look into the seven purposes an image can serve on a site and how to approach writing the most effective alt texts in each case in order to help make your site as accessible as possible.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-09-20 16:19:32

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![happy-friday](https://media.giphy.com/media/3oxHQp7uBnjhUZ4vp6/giphy.gif)
How to move a commit to another branch in git
Tags: git, tutorial
Published: 2019-09-20 16:07:47

Here's a little git problem that happened to me today, which used to be quite scary when I was first learning git but is actually easy to remedy as long as you are working locally. 

We've all done it - sometimes you forget you haven't created a branch yet, or worse yet you're on the wrong feature branch, and you start adding some code and make a commit. Then you realise you've committed code to the wrong feature branch or straight to master, and now it's in the wrong place. 

As long as you haven't pushed your changes up to origin, this is very easy to undo. Let's say we have made a commit a1b2c3d on the branch feature-a, and we haven't yet made a feature-b branch. 

So first of all we want to get our commit onto the right branch, so let's take a note of the hash want to move, and start at master:

```console
git checkout master
```

Optionally (if we don't have the branch yet) we make a new branch feature-b to put it on and check it out:

```console
git checkout -b feature-b
```

Then make sure you are on the right branch feature-b (may not be necessary if you just created it), and cherry pick this commit into that branch to add just that commit to feature-b: 

```console
git checkout feature-b
git cherry-pick a1b2c3d
```

And finally let's reset feature-a branch back to the previous commit hash (say z1b2c3d). Using git reset --hard will remove all the commit referencing the changes, and all the changes themselves, from feature-a branch, while leaving that commit on feature-b:

```console
git checkout feature-a
git reset --hard z1b2c3d
```

You can do this with multiple commits too, just cherry pick several, then reset back to the last commit you want to keep. The process is the same if you have committed to local master by mistake - just cherry-pick to a branch, then reset master. 

Only ever do this if you haven't pushed the commits to origin.
Computer Science for all
Tags: selftaught, cs, computerscience
Published: 2019-09-20 15:56:52

---
title: Computer Science for all
published: true
cover_image: https://i.ytimg.com/vi/SzJ46YA_RaA/maxresdefault.jpg
description: simplified computer science courses for everyone
tags: selftaught, cs, computerscience
series: Computer Science for all
---

Hi, I’m Han. 

I’m a computer science student and I will like to share what I learn at school in brief writings so that non-computer science developers or self-taught developers can also have a brief knowledge of some of the things we learn. 

I believe strongly that in order for one to understand something very well, he/she has to share the knowledge and also learn from others. Because of this, I joined a STEM education organization ([EliTe education](https://elite-education.org)) way back in 2017 while I wasn’t yet in the University and it has helped me a lot.

If you are interested in this journey, then tighten your seatbelts and let’s get going.
Diversity and the tech meritocracy
Tags: diversity, discuss, community, inclusion
Published: 2019-09-20 15:43:46

---
title: Diversity and the tech meritocracy
published: true
description: Discussion about how diversity plays a role in technology hiring and culture
tags: diversity,discuss,community,inclusion
cover_image: https://i.imgur.com/ep6yzBg.jpg
---

Yesterday here on dev.to [Sarthak Sharma(sarthology)](https://dev.to/sarthology) posted an article about Hong Kong needing our help. In the post he described also how the use of ISO 3166 can be used to push a political agenda. He also explains that he was made aware of this issue from his Taiwanese developer friend who is also a dev.to user.

{% link https://dev.to/teamxenox/taiwan-hong-kong-need-our-help-3le4 %}

This got me thinking about a thing I read when I was doing research into hiring developers, and how the interview process and hiring decisions are made in a meritocratic way most places. Meritocracy being the idea of hiring based on one's achievements, knowledge, and demonstrated skills rather than based on who they know, bribery, or some other metric. 

I can't find the thing I read at that time but it was about hiring for diversity and how it relates to meritocratic metrics. The article explained something along the lines of:
> "If your organization only has one main demographic such as young white males, then your organization's view of what is a 'merit' will be skewed. Therefore hiring purely for diversity can realign the criteria for what is a merit into something more representative of reality."  

That always stuck with me as something that really seemed true. However as a member of the main demographic here(young white male) I was unable to really imagine what some of those other merits could be. The post yesterday showed me a little insight though. Simply being from a foreign country or someone who exist between two cultures such as a Korean-American could provide similar insights as above. 

I have a small list that I've thought of but would love to see more, or be told ideas on my list are wrong or discriminatory, or offensive! 

* Political things such as above that could make a bad or incorrect address form or push a possibly harmful agenda
* LGBT issues that could push alienating gender selects or use non-inclusive language or the like
* Various disabilities that could cause a UX that is unusable for a part of the population due to motor, visual, hearing or other impairments
* Different cultural experiences that if known, would prevent offending a subset of customers, or maybe could tell you that some business initiative would not work because of the mindset of the people its targeting. 

So I'm wanting to get feedback from the lovely community here, what are some diversity based merits that people don't think about? What are some examples you have from your own workplace where a person from a different background brought up a good point? Do you have examples where someone with a different background could have brought up a point if they were there? 

Thanks for reading and I want to hear from you!
Tailwind Dynamic Themes...Help!
Tags: tailwindcss, help, ionic
Published: 2019-09-20 15:23:54

---
title: Tailwind Dynamic Themes...Help!
published: true
description: Is anyone using dynamic themes and tailwind?
tags: tailwindcss, help, ionic
cover_image: https://thepracticaldev.s3.amazonaws.com/i/8emhdyo8qox0oqjhbtdy.png
---

# Loving Tailwind! Need Dynamic Themes... Help!

Tailwind has made writing HTML fun for me again! I am really enjoying porting my site over into Gatsby, not using web components and really just getting back to html! A missing part of this however are dynamic themes. As you can see in the video I really like offering this simply capability for my users.

{% youtube SR6Ty-5Cy3M %}

## Why doesn't this work?

After including tailwind in my Gatsby project I just use it for things like setting the background:

```html
<div class="bg-ajonp-primary-500"></div>
```

When you look in the debug tools it is represented with straight css for that class that includes the hex color. 

```css
.bg-ajonp-primary-500 {
    background-color: #7b1fa2;
}
```

What I would like this to say is 

```css
.bg-ajonp-primary-500 {
    background-color: var(--ajonp-primary-500);
}
```

## Research so far

I did some research surrounding this plugin.

https://www.npmjs.com/package/tailwind-css-variables

I am not fully sure that any of the classes for colors will actually be referenced using the default tailwind classes. So this is the part I need help understanding.

## How do I accomplish this in Ionic?

I have been using Ionic v4 (aka core) all components utilize root level css variables for referencing. This allows us to easily switch those themes by changing those variables. The pull request below shows a great example of how to use this in any Ionic project.

I have put in a request for adding this to be part of the Ionic docs.

https://github.com/ionic-team/ionic-docs/pull/929

## Have you done this or know of anyone who might know?

Would really appreciate it if anyone has insights! You can reach me on all the things below if a comment hear doesn't feel good (although this is a safe place in my opinion).

🌎 Site: https://ajonp.com
🎥 YouTube: https://bit.ly/ajonp-youtube-sub
📦 GitHub: https://github.com/ajonpllc
💬 Slack: https://bit.ly/ajonp-slack-invite
🐦 Twitter: https://bit.ly/ajonp-twitter
COST SAVINGS THROUGH UNIT TESTING (Article for Beginners)
Tags: unittesting
Published: 2019-09-20 14:58:55

Recently we worked with a client that was interested in creating an [instant messaging app](https://theappsolutions.com/blog/development/cost-to-develop-messaging-app-like-whatsapp/). They wanted this application to be usable across the major mobile platforms (Android, Apple, and Microsoft). Using unit testing we created this application quickly and cost effectively. Implementing unit testing on projects is an excellent way to help a project budget.

**What is unit testing?**

Unit testing is the programming process to validate the correctness of the individual modules of the program source code. The idea is to write tests for each non-trivial function or method. This allows you to quickly check to see whether the resulting change in the next code to the regression – that is to errors in the field – is of tested programs. This facilitates the detection and elimination of such errors.

In practical experience, when applied to a variety of projects, it is safe to say that for every 1 hour spent creating a unit test, 100 hours of manual testing time are saved. This process helps to keep software working during the agile development process and for every milestone thereafter. There is no new technology being built; it is simply optimizing the methods that already exist.

Many developers do not like to use unit tests because they feel that they have coded perfectly – however the fact is, humans do make errors. By using unit testing, errors are easily caught. Human interaction is still necessary to make sure things are running smoothly and for a second look – in other words, for oversight. But unit testing saves a very large chunk of time.

**What happens when there is a bug in a released application?**

Every kind of methodology will produce some kind of mistake in the software, but when a unit test has been created we can detect this mistake by simply clicking the unit. In five minutes the results of the testing will be available. The developer almost immediately knows what function doesn’t work, how to fix it, and how to save time in an update. This is very important when working with mobile applications. The longer it takes to fix and respond to a bug in an application, the fewer people will be purchasing and using the application.

Unit testing can take more time on the front end – however the time and cost savings over time make this methodology very desirable.
A million thanks to all of you!
Tags: help, discuss, community
Published: 2019-09-20 15:03:22

---
title: A million thanks to all of you! 
published: true
description: My family and I own you all a million thank yous.
tags: help, discuss, community
---

My family and I are in tears with the overwhelming kindness of you all.

From day one on this site, it was about bringing each other up. Never about fighting or trying to prove each others egos. 

Then when I really needed help, my family needed help, you all were there for me.

Your kind words, support and donations have helped us and more importantly a 4 year old child fighting for his life. 

All of you are amazing and I just can't get over it. My wife thanks you, my family thank you, I thank you and my kids thank you! 

[We ARE! close enough as a community](https://dev.to/dechamp/are-we-close-enough-as-a-community-to-help-each-other-out-in-hard-times-50gl)

![The Richardsons](https://res.cloudinary.com/practicaldev/image/fetch/s--YvN3ONI_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/5by534vhyg40thc9xlbr.jpg)
Awesome VSCode Extension - Peacock(Color yourself)
Tags: javascript, vscode, react
Published: 2019-09-20 14:50:23

Mostly I have multiple Projects open on multiple VSCode Editors.

I found a way where I can give different colors to different instances.

I use [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) to change the color of the  Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

I wanted to share this with the Dev community .

It's created by JohnPapa. There is also [one article here on Dev](https://dev.to/john_papa/peacock---choose-what-to-color-33mg)

I am sure, you will like it.

Enjoy!
:wave:

As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸
<a href="https://www.buymeacoffee.com/destromas" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

My Blog : https://shahjada.me