teleren/devto huggingface dataset:
WCAG Accessibility Guidelines and Tools
Tags: a11y, wcag, frontenddev
Published: 2020-03-02 18:45:24

---
title: WCAG Accessibility Guidelines and Tools
published: true
date: 2020-03-02 18:16:50 UTC
tags: accessibility,wcag,a11y,front-end-developmen
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/739/1*XF4L8Lqb17jnbUfktqixWQ.png)<figcaption>WCAG guidelines for web accessibility from the W3C</figcaption>

I’ve been working on compiling some information for my company about accessibility, testing, compliance, etc. In the process I was looking for a cross reference of which automated tools checked which specific guidelines. Being as at most automated tools can only cover about 25% of accessibility issues on a website I wanted to know which guidelines might need manual attention.

Seems like a pretty obvious request? At least I thought so. But even with my mostly “OK” google-fu I did not find what I was looking for. So I ended up creating my own.

Of course this isn’t a definitive guide. I only have a handful of tools listed. Basically I found the listing for each of the tools and slapped it on a spreadsheet. So this should be fairly accurate at least according to what each automation tool says they check. Your mileage may vary of course. You should be able to do some filtering by various columns to make this data useful to whatever project you’re working on.

[Google spreadsheet](https://docs.google.com/spreadsheets/d/1ZEdiRbPSYBnV7JM_GINgloyWxFzfiauVpW-bbrx-DVA/edit?usp=sharing)

So give it a try and let me know if this was at all helpful in your accessibility adventures!

* * *
Nevertheless, Claire Collins Coded
Tags: wecoded
Published: 2020-03-02 18:00:53

"""Coded she did. So much self doubt. So much information to overwhelm even the most educated of person. All you have to do is start.... and oh my did she start. 

She started, 
she read, 
she practiced till her eyes bled, 
she cried, 
she laughed at herself(often) 
and then she conquered!!!"""

Most advice I can say is never give up. Being confused means you are just about to learn something wonderful. To all the women in code who have embarked on this learning journey, Bravo!!

Equality comes from respect. Not a single person writes something the same. Coding is a male dominated profession, yes. But it doesn't mean that one person is better than the next. I have had immense support from many, many, people since I started my coding journey. Male and female alike. I thank every single one who has guided and advised me. I respect the knowledge of my mentors, friends and influences I have met along the way.

Dev has become my favorite go to place for information across many different topics. I love the community and I love my friends here :))))

I hope many more women choose to take this career path. Good luck to you all x
🧳 gobundle: quickly update or install your Go tools
Tags: go, tool, showdev
Published: 2020-03-02 17:52:26

# What it does

`gobundle` makes your Go tools portable and allows you to keep them up to date. It uses a simple JSON configuration file. If executed without any flags `gobundle` tries to install the specified tools in your `~/.gobundle` configuration.

You can also "dump" your existing, installed Go tools with `gobundle -d`.

# Why I created it

I use `gobundle` to keep the following tools up to date:

- [golang.org/x/tools/gopls](https://golang.org/x/tools/gopls)
- [github.com/google/gops](https://github.com/google/gops)
- [github.com/gobuffalo/shoulders](https://github.com/gobuffalo/shoulders)
- [honnef.co/go/tools/cmd/staticcheck](https://honnef.co/go/tools/cmd/staticcheck)
- [github.com/rakyll/govalidate](https://github.com/rakyll/govalidate)

In my `.gobundle` I use `"lastest"` as `version`. If you run `gobundle` it runs `go get host.tld/project/name@version`. Using `"master"` or any other SemVer tag is also possible to pin a tool to a specific version.

# Other use cases

You can also use `gobundle` to define your basic Go toolset. If you have a new computer or updated your Go installation, just run `gobundle` again to reinstall your tools using the latest Go version.

# Give it a try

Give it a star on GitHub: [github.com/iwittkau/gobundle](https://github.com/iwittkau/gobundle).

To install run:

```
GO111MODULE=on go get github.com/iwittkau/gobundle/cmd/gobundle@latest
```
How to send dynamically created PDF as attachment with Amazon SES on Node JS
Tags: node, aws
Published: 2020-03-02 17:46:37

To send an email with dynamically created PDF as an attachment. There are two steps.

Step 1: Dynamically create a pdf
Step 2: Send this pdf as an attachment

### Libraries used.

```
npm install aws-sdk ejs nodemailer html-pdf
```
Why do we need all these libraries?

[aws-sdk](https://www.npmjs.com/package/aws-sdk) is used for sending the email.
[nodemailer](https://www.npmjs.com/package/nodemailer) is used to create an email with an attachment.
[ejs](https://www.npmjs.com/package/ejs) is the templating engine used for create dynamic HTML.
[html-pdf](https://www.npmjs.com/package/html-pdf) is used to convert HTML to pdf.

### Step 1: Dynamically create a pdf

Let us create a template for html.
```
<!-- template.ejs --!>

<!DOCTYPE html>

<html>
  <head>
    <title>My Table</title>
  </head>
  <body>
    <h1>Table</h1>
    <table style="width: 100%;">
      <tr>
        <th>Qty.</th>
        <th>Unit Price</th>
        <th>Total Cost</th>
      </tr>
      <% if (products.length) { %>
      <tr>
        <% products.forEach(function (product) { %>
        <td id="quantity"><%= product.quantity %></td>
        <td id="unitPrice"><%= product.unitPrice %></td>
        <td id="totalPrice"><%= product.totalPrice %></td>
        <% }) %>
      </tr>
      <% } %>
    </table>
  </body>
</html>
```

Now let's use this template to generate the HTML. I'm not writing the file to disk. Instead, keep the file in memory and pass it on.

```
import ejs from 'ejs';
import htmlPdf from 'html-pdf';

export async function htmlToPdfBuffer(pathname, params) {
  const html = await ejs.renderFile(pathname, params);
  return new Promise((resolve, reject) => {
    htmlPdf.create(html).toBuffer((err, buffer) => {
      if (err) {
        reject(err);
      } else {
        resolve(buffer);
      }
    });
  });
}
```

Usage would be like

```
const fileBuffer = await htmlToPdfBuffer('template.ejs', {
  products: [{ quantity: 2, unitPrice: 10, totalPrice: 20 }]
});

```

Now, `fileBuffer` is the dynamic pdf file which has to be sent. You could use `toFile` method of `html-pdf` to write this to disk.

### Step 2: Send this pdf as an attachment
We could use `aws-sdk`  directly for [attachments](https://docs.aws.amazon.com/ses/latest/DeveloperGuide/send-email-raw.html). You would have to do MIME encoding manually, which is a bit tedious.

```
export function sendEmailWithAttachments(
  subject,
  html,
  toAddresses,
  attachments
) {
  const ses = new AWS.SES();
  const transporter = nodemailer.createTransport({
    SES: ses
  });
  const mailOptions = {
    from: "from@example.com",
    subject,
    html,
    to: toAddresses,
    attachments
  };
  transporter.sendMail(mailOptions, (err, data) => {
      
  });
}

```

### Final usage

```
const fileBuffer = await htmlToPdfBuffer("template.ejs", {
  products: [{ quantity: 2, unitPrice: 10, totalPrice: 20 }]
});

sendEmailWithAttachments(
  "This is test subject",
  "<p>This email contails attachment</p>",
  ["to@example.com"],
  { filename: "attachment.pdf", content: fileBuffer }
);

```
Autogenerated schema types vs handcrafted one
Tags: help, graphql, apollo
Published: 2020-03-02 17:05:50

Hello community, lately ive been wondering the advantages of auto generated schema definitions like [graphql-compose-mongoose](https://github.com/graphql-compose/graphql-compose-mongoose), in respect to hand written schema definitions, there are many things the tools generates that i don't use (ever) in my applications, i know that soon there will be a bug somewhere in anything `auto` generated, please what does the community recommend? should i use an auto-generated tool, or carefully roll out mine by hand!
Converting Tool: Class And Property Converted Camel Case Or Pascal Case
Tags: javascript
Published: 2020-03-02 17:05:43

Hi guys,
I developed a converting tool. Class And Property text data coverted Camel Case or Pascal Case.

* Published it as an add-on in Firefox: https://addons.mozilla.org/tr/firefox/addon/convertingtool/

* Published it on my site: http://converter.semihcelikol.com/

* Published the codes on my github: https://github.com/semihcelikol/ConvertToPascalCase

Hopefully it benefits your business :)
Refactoring and linting
Tags: eslint, javascript
Published: 2020-03-02 15:38:51

Today was a day with some more cleanup. Now we're at a point where we need to refactor, the biggest, baddest controller there is. The layout controller. It's a big beast that has grown uncontrollably over the years. So before we start on that series, which will likely be a angularjs to angular typescript migration series, this will be the last of the linting ones.

There is one pattern that I encountered today, which normally isn't a bad thing, since it's using the static object of localStorage the scenario depicted in the rule could be ignored for these use-cases. However, as a practice of not implementing workarounds or disabling rules without good reason, I instead implemented the suggested solution from eslint.org.

###localStorage
If you never have worked with the browser's localStorage, it's a way to store key-value pair data in your browser. You can find this in most of the modern browsers quite readily available in the developer tools. Now this storage is not encrypted but it is domain specific. With emphasis on domain specificity since you can get cross-over data through this mechanism for better or worse. It's also only available on the browser end so it's not available to the server on each request.

common use-cases with localStorage is either using the indexing pattern as it populates a global object called "localStorage" with property-names based off of the key-value pairs stored therein. so if you store a value in a key named "foobar", it will be available through these;

```js
localStorage["foobar"]
localStorage.foobar
localStorage.getItem("foobar")
```
similarly you can set a value with

```js
localStorage["foobar"] = value;
localStorage.foobar = value;
localStorage.setItem("foobar", value)
```
Now what happens if you try to get a value that doesnt exist?

```js
localStorage.barfoo -> undefined
localStorage["barfoo"] -> undefined
localStorage.getItem("barfoo") -> null
```
So you get a slightly different return value depending on how you access it. This in itself is not a bad thing, as long as you know of it.

### no-prototype-builtins
Then there's the Javascript Object's own "hasOwnProperty" which localStorage also implements through Object's inheritence. So unless you overwrite localStorage global implementation, there's nothing really going to happen here. The issue described in eslint would mostly be applicable to nodejs and similar engines/tools/servers.

However, I did make an Object.prototype.hasOwnProperty.call(obj, value) function-wrapper to solve this particular eslint error. Then I used that function in the frontend instead, and subsequently I got a bit of code-reuse since this was replicated about 5 times more in the code-base.

hasOwnProperty returns true or false if there is a value. Which allows you to know, instead of having to check the returned value for undefined or null. 

Problem solved.

Reference: https://eslint.org/docs/rules/no-prototype-builtins
Registration Form Using Foundation CSS
Tags: webdev, todayilearned, todayisearched
Published: 2020-03-02 16:28:52



Registration Form is an input for users to submit data. So here we design simple registration Form Using Zurb Foundation and CSS3.

What is Zurb Foundation CSS?

Foundation is an advanced frontend CSS framework that is built-in an HTML, CSS, SASS, and javascript. This framework has a sass compiler with a faster way to design a website. Foundation has its own CLI to install in your pc/Laptop using specific commands and you can easily watch. Similar same file structure like bootstrap Bulma and materialize CSS. This is a mobile-first approach CSS framework with fully responsive with components.

so here used foundation CSS to design this awesome registration form and also we used grid columns. In this form, we used a custom background color. Also, here we modify the gird-container and label class of foundation. To make responsive for tablets and the mobile side we used media queries.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Download Source code](https://w3hubs.com/registration-form-using-foundation-css/)
How to mask your API key?
Tags: javascript, api, beginners, webdev
Published: 2020-03-02 16:27:44

Your API key should remain private and to achieve that Git should not track the API key. So today I will talk about two ways for masking API key, suppose you are developing a new app using React.js and have an API key to fetch news.

**First one, using the environment variable**

1- Create a file called `.env` in the project directory and define a variable with uppercase.
```
REACT_APP_NEWS_KEY = 'your_API_key'
```
2- Ignore `.env` file by adding its name to `.gitignore` file. The purpose of `.gitignore` file is to ensure that certain files not tracked by Git.
```
# api keys
.env
```
3- Access API key in your project using process.env.

```
const API_KEY = process.env.REACT_APP_NEWS_KEY;

const getPosts = async () => {
    try {
      dispatch({ type: 'SEND_REQUEST' });
      const response = await fetch(
        `https://newsapi.org/v2/everything?q=javascript&apiKey=${API_KEY}`
      );
      const data = await response.json();
      dispatch({ type: 'REQUEST_FINISH' });
      dispatch({ type: 'SET_POSTS', payload: data });
    } catch (err) {
      console.log(err);
    }
  };
```
*Important Note: After creating the environment variable you have to restart your server to avoid getting `your API key is invalid, you will receive a 401 - Unauthorized HTTP` error.*

**Second one, using named export**

1- Create a folder in `src` folder called `config` and inside it create a js file called `config.js`

```
const reactNewKey = 'your_API_key';

export { reactNewKey };
```

2-  Ignore `config.js` file by adding its path in `.gitignore` file
```
src/config/config.js
```
3- Acess API key in your project by importing it
```
import { reactNewKey } from 'path_of_your_file'
```
Thanks for reading! I hope this article helps, feel free to share it with your friends, any feedback will be appreciated :)
New Code Compare v.5.3 is 35% More Compact and Faster
Tags: alm, sourcecodemanagement, programming, productivity
Published: 2020-03-02 16:21:44

---
title: New Code Compare v.5.3 is 35% More Compact and Faster
published: true
description: Devart introduced the new version of its Code Compare solution. The recent update brought an improved integration with the latest versions of Visual Studio.
tags: ALM, Source Code Management, Programming, Productivity
---

*Devart introduced the new version of its Code Compare solution. The recent update brought an improved integration with the latest versions of Visual Studio.*

Devart, a recognized vendor of professional database management software, has recently released the new version of [Code Compare v.5.3](https://www.devart.com/codecompare/). Now the tool is 35 percent more compact and loads faster not only in Visual Studio 2019 but also in Visual Studio 2017 and 2015. At the same time, the Czech vendor discontinued the support for older versions of Visual Studio 2010–2013, which are already outdated and slowed down Code Compare development.

The release also includes such useful enhancements as:
**- Support for PMA mode in VS 2019 for file comparison.** Now, a user doesn’t need to disable the PMA mode when creating a file comparison in Visual Studio 2019.
**- Online documentation.** Instead of the obsolete offline documentation as a .chm file, Devart has implemented new, more complete, online documentation, which will be actively updated and modernized.
**- Support for 4K monitors and usability improved.** The vendor took into account some comments regarding the UI of monitors with high DPI and made an update of UI in file comparison.

**Code Compare** is designed to merge and compare various files and folders. The solution integrates with all popular source control systems: TFS, SVN, Git, Mercurial, and Perforce, and is shipped both as a standalone file diff tool and a Visual Studio extension. To learn more about the recent update, visit the Devart official blog — https://blog.devart.com/new-async-code-compare-package-for-vs-2015-2019.html.

**About Devart**

Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration and backup solutions. The company also implements Web and Mobile development projects.
For additional information about Devart, visit https://www.devart.com/
How to squash Git commits
Tags: git, commits
Published: 2020-03-02 16:05:15

---
title: How to squash Git commits
published: true
description: A quick step-by-step guide on how to squash Git commits
tags: Git, commits
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jglblu4lgmm0pcnzrmex.jpg
---
A really quick step-by-step guide on how to squash Git commits to make your PRs concise, easy to read, and hence easy to review.

Steps:
* Make sure your branch is up to date with the `main` branch.
* Run `git rebase -i main`.
* You should see a list of commits, each commit starting with the word "pick".
* Make sure the first commit says "pick" and change the rest from "pick" to "squash". -- This will squash each commit into the previous commit, which will continue until every commit is squashed into the first commit.
* Save and close the editor (press `Esc` key, type `:w` and hit `Enter` key) -- save a file and quit vim / Vi by pressing `Esc` key, type `:x` and hit `Enter` key.
* It will give you the opportunity to change the commit message.
* Save and close the editor again.
* Force push the squashed commit: `git push --force-with-lease origin`.

[GitHub gist of the steps above](https://gist.github.com/olegchursin/fd0d6b3d3893be3b58c48036d5be118f)
Run your Capybara tests on different devices
Tags: rails, rspec, capybara, selenium
Published: 2020-03-02 15:32:26

## On how many devices are you testing your Rails Application?

As a developer, you work 90% of the time in front of a computer or laptop, but your users access the website from a mobile device.

That's why we started, since some years, to code "mobile-first", having the mobile version of our web applications in mind and as our priority one.

But I realised that all our system tests were running only on the default `selenium_chrome_headless` driver, provided by Capybara.

Not so nice!

What about all the other devices? There are so many devices! And I don't want to configure and maintain these configurations in all our projects. At [Renuo](https://renuo.ch) we maintain about 60 Rails projects. We definitely needed to extract this into a gem.

And here you are [so_many_devices](https://github.com/renuo/so_many_devices)

For now, we published only few devices, but please help us filling the list!

You can now choose between many predefined capybara drivers and simply use them with:

```ruby
config.before(:each, type: :system, js: true) do
    driven_by :iphone_6_7_8
end
```

Enjoy!
The Building an Indie Business Podcast- Using Podcasting as a Lead Magnet
Tags: podcast, startup
Published: 2020-03-02 15:30:10

In this episode I discuss using podcasting as a lead magnet. During the why to use a podcast as a lead magnet, How to use the podcast as a lead magnet, the advantages and disadvantages, and who shouldn't use podcasting as a lead magnet.

Episode:https://overcast.fm/+RG5j5I3DQ
[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)

Survey: https://alex4814.typeform.com/to/cD38zZ
google ads API
Published: 2020-03-02 15:25:39

Hello world ...
this is rami  from Tunisia  Really excited to be here with you guys i'm starting new with python and google ads and i'm having a hard time  with retrieving the data from the google ads with the API's specially i have followed the documentation and every step so if one of you guys  is familiar with this subject and able to help me i'd be thankful
Googleads API 
Tags: analytis, data, ftchingdata, help
Published: 2020-03-02 15:24:20

Hello world ...
this is rami from tunisia i'm really excited joining you guys here so i'm starting new with python and google ads api and i have faced a lot of problems in retrieving data from campaigns and adwords clients and i really could't find any ressources to help me to move on with this i've followed the documentation and videos and posted in forums but i'm getting no where so please if aanyone is familiar with this subject and able to help me i'd be thankful
The Front End Podcast - Episode #2
Tags: career, podcast, frontend
Published: 2020-03-02 15:21:29

Episode 2 of [The Front End](https://thefrontendpodcast.site) is ready for your listening pleasure and is available on a variety of platforms:

- Apple Podcasts > https://podcasts.apple.com/gb/podcast/the-front-end/id1499349107
- Spotify > https://open.spotify.com/show/4GuAxptrtY8Es5iHwp09dT
- Anchor > https://anchor.fm/the-front-end

## About episode 2

For episode 2, we're joined by [Sam Beckham](https://twitter.com/samdbeckham), a Senior Front End Developer at GitLab. As a fellow all remote worker, Sam shares his experiences of life without an office, the good parts and the bad, as well as tips for those new to remote working.

He also introduces us to his popular monthly meetup, Front End NE, and offers his thoughts on starting and growing a regular meetup, attending them as a developer, and what you can get out of them.

## Listening direct

Want to listen directly from here?

{% spotify spotify:episode:4APP5vaBSXoWqGzlidwcNd%}

## Want to be a guest or sponsor the show?

I'm definitely looking for guests to talk about a range of different development topics from careers to origin stories, learning and professional growth, frameworks and more.

Similarly, we're looking for sponsors to fill promotional slots within the show. 

You can find out more here:

- [Being a guest](https://thefrontendpodcast.site/guests)
- [Sponsorship information](https://thefrontendpodcast.site/sponsorship)

Thanks for listening!