teleren/devto huggingface dataset:
What is WAI-ARIA? (Introduction to WAI-ARIA Part 1)
Tags: a11y, html, webdev
Published: 2019-09-13 02:53:09

##### WAI-ARIA stands for Web Accessibility Initiative – Accessible Rich Internet Applications... What a mouthful! WAI-ARIA is a technical specification written by the World Wide Web Consortium (W3C) that specifies how to improve the accessibility of a website or web application with supplemental HTML attributes. It helps us add more context to UI elements that browsers and assistive technologies can use to assist the user in understanding the content of a site or application. Over the coming posts, we'll discuss WAI-ARIA a little more in depth.

# A complement to semantic HTML
Semantic HTML is markup that provides context for its contents. For more information about semantic HTML, check out my post, "The Importance of Semantic HTML." WAI-ARIA is in no way meant to replace semantic HTML. On its own, semantic HTML and general good usability practices can offer a lot when it comes to accessibility. Sometimes, we can do more to provide users of assistive technologies with better context. This is where WAI-ARIA comes in. It helps fill in the gaps that may be left behind by semantic HTML.

Let me reiterate: **WAI-ARIA is not a replacement for semantic HTML**. It's also **not a quick fix for poor usability or accessibility practices**. You can't just put WAI-ARIA into an unusable application and expect it to be more usable... even if it's "WCAG compliant!" It's kind of like putting lipstick on a pig. I recommend reading the <a href="https://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/">article, "Accessibility Lipstick on a Usability Pig," by Jared Smith</a>.
![A pig emoji with lipstick on it saying that's metaphorically your poor usability and a lipstick emoji that is metaphorically WAI-ARIA for your poor usability.](https://thepracticaldev.s3.amazonaws.com/i/nlv3yrje0p9xfub9crow.png)

# In the spec
The WAI-ARIA specification talks about three main features: roles, states, and properties. Roles tell browsers and assistive technologies what the element is or what it does. States define the current status of an element and can change throughout the lifecycle of the app. Properties give extra meaning or semantics to UI elements. We'll go into more detail on each of these in this series.

##### I look forward to getting this series going! If there is a particular WAI-ARIA topic you'd like me to write about, please let me know in the comments!

*Title illustration from <a href="https://undraw.co">unDraw</a>.*
Pandoc TOC without standalone mode
Tags: pandoc, markdown
Published: 2019-09-13 02:44:08

This is a specialized post that very few people will find useful. But since it's not something you can easily find by searching, I'll make it available to anyone else in my position.

I wanted to add a table of contents to a document in Pandoc, but without standalone mode - something that is not possible. However, you can just use a very minimalist template called something like blank.html:

```
$toc$
$body$
```

That's it. Then this

```
pandoc -s file.md -o file.html --template=blank.html
```

is just as good as not using standalone mode.
Need To know what next?
Tags: discuss, learn, frontend, htmlcss
Published: 2019-09-13 01:29:57

Just a normal post because opinion does matters and can change the things in one's life.
I am a UI Developer having experience over 7 years. Working in Designing Layouts, Coding in pixel perfect HTML, CSS, SCSS. I really love what I do and the work I assign to work as a UI Developer. 

Apart from my skillset I always found myself comfortable discussing and understanding the Development process e.g. discussing the problems, making assumptions. 

As the industry of web and mobile took  drastic change since the introduce to JavaScript frameworks i.e react, angular, vue etc.

My core feeling inside is always to become a front end UI developer working in HTML, CSS, SCSS, RWD etc. 

From last 6 months I got a chance to work in Angular and React to just write the HTML in component based and create a re-usable components friendly UI. I took my keen interest to know the basics of creating components and how to import and use them into all files.

It really bring a great feeling inside me to work on the projects. But the job is not done.

I am really wondering what could be the future of UI developer and how to start learning about react or angular from basics so that I can navigate my own ship in the monster river of Front-end.


My Name is Kunal Sindhi based in India. I am currently working as a Senior Consultant - Web Designer in Mohali(Punjab).

I am really looking for some expert guide and help to start working on myself to become a Front-end developer.

Thanks in advance, help is really appreciated :)

Cheers (y)
Learning to code? Join our growing Discord community - questions, networking, mentorship
Tags: codenewbie, beginners, firstyearincode, career
Published: 2019-09-13 00:05:23

Learning to code, and want to find like-minded people?

Learning to code can be a lonely process.

I learned how to code via the self-taught / coding bootcamp route 2 years ago. This was a challenging process, especially without guidance. It would have been so much easier if there was a group of people I could relate to, and also if there was a way to connect mentors with mentees.

Join our growing [Discord](https://discord.gg/9RGdMcF) community! 

Feel free to make an intro in the   **#INTRODUCE-YOURSELF**   channel.

 This group was created to:


<ol>
<li>Connected like-minded people</li>
<li>Relate on the struggles of learning</li>
<li>Boost confidence in your coding journey</li>
<li>Connect mentees with mentors</li>
</ol>

Are you currently learning to code? Come join, and say hi: https://discord.gg/9RGdMcF

Do you know anyone learning to code / trying to break into tech? Please share this group with them!

Are you looking to be a mentor? There are a bunch of motivated people in this group looking for extra guidance! I'm trying to help as much as I can as a single person, but it'd be great to have some more help!
How to requestPermission for devicemotion and deviceorientation events in iOS 13+
Tags: javascript, webdev, tutorial
Published: 2019-09-13 00:03:48

## Background

Since iOS 12.2, Apple decided that for [privacy reasons](https://www.macrumors.com/2019/02/04/ios-12-2-safari-motion-orientation-access-toggle/), the in-browser access to the device motion and orientation events is off by default. And now maybe they realized this might be a mistake, so in iOS 13 they [changed](https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes#3314664.) the permission request behavior similar to how the camera permission is requested.

So now when we try to `addEventListener` to `devicemotion` or `deviceorientation`, we would see this warning in the console:

![Console warnings: No device motion or orientation events will be fired until permission has been requested and granted.](https://thepracticaldev.s3.amazonaws.com/i/xd3rs4z30dmaqrgztkj0.png)

To request permission, we would just need to call a method on the `DeviceMotionEvent` or `DeviceOrientationEvent`: `requestPermission` :joy: It would return a promise that always resolve to a `PermissionState` which could be `granted` or `denied` (so basically `Promise<'granted'|'denied'>`).

## One more thing

One more thing to keep in mind is that `requestPermission` could only be called on a user gesture (e.g. click). This is reasonable UX too as we would want to tell users why we are asking for such permissions and let them confirm before prompting them so that they see it coming.

Otherwise you would get this error:

![Console error: NotAllowedError: Requesting device orientation or motion access requires a user gesture to prompt](https://thepracticaldev.s3.amazonaws.com/i/af0b5s5t110v4e618t0n.png)

## The code to copy

For `devicemotion` events:

```js
  function onClick() {
    // feature detect
    if (typeof DeviceMotionEvent.requestPermission === 'function') {
      DeviceMotionEvent.requestPermission()
        .then(permissionState => {
          if (permissionState === 'granted') {
            window.addEventListener('devicemotion', () => {});
          }
        })
        .catch(console.error);
    } else {
      // handle regular non iOS 13+ devices
    }
  }
```

and for `deviceorientation` events:

```js
  function onClick() {
    // feature detect
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
      DeviceOrientationEvent.requestPermission()
        .then(permissionState => {
          if (permissionState === 'granted') {
            window.addEventListener('deviceorientation', () => {});
          }
        })
        .catch(console.error);
    } else {
      // handle regular non iOS 13+ devices
    }
  }
```

That's it. Thank you for reading!
head is locked
Tags: webdev, web, html
Published: 2019-09-14 18:38:31

---
title: head is locked
published: true
tags: webdev, web, html 
canonical_url: https://remysharp.com/2019/09/13/head-is-locked
---

Yesterday I [posted a little historical insight](https://remysharp.com/2019/09/12/why-some-html-is-optional) into why the closing `</p>` tag is optional, but in passing I mentioned you'll not see any new elements proposed for the `head` element.

Though I can't refer to any specifications (partly because I'm writing this from a gym treadmill!), here's the reason why.

It was the good young Mr Harry Roberts who [called me out on twitter](https://twitter.com/csswizardry/status/1172117050791276544?s=19).

The reasoning is obvious once you see it, and I'll have to pass credit to Jeremy Keith for making me realise why.

You won't see new elements added to the `head` element because the parsing algorithm only allows for title, meta, style, script, base and link.

Today, if your browser spots anything else in the `<head>` tag, it'll land in the `body` element in the DOM.

You can see this happening in Hixie's DOM visualisation tool - the "invalid" positioned element gets [tossed out into the body](https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Chead%3E%3Ctitle%3EOk%3C%2Ftitle%3E%0A%3Cp%3EHello%3C%2Fp%3E%0A%3C%2Fhead%3E%0A%3Cp%3EYo!%3C%2Fp%3E).

If a new element was created to go in the `<head>` all existing instances of browsers up to that point would eject the element into the body and it would mess things up.

This would completely break the backwards compatible feature of HTML, which, as we've seen, hasn't happened yet.

For this reason, you'll find the `link`'s `rel` is repurposed ALL the time (link rel="preconnect", etc) to get around this problem.

So, that's why `head` is locked and you won't see new elements designated beyond the `body` element.

_Written from a treadmill on my 41st birthday, so you'll forgive any typos 😉_

_Originally published on [Remy Sharp's b:log](https://remysharp.com/2019/09/13/head-is-locked)_
☀️ What was your summer side-project? Time to shine! 😎 [THREAD 👇]
Tags: sideprojects, summer, discuss, thread
Published: 2019-09-12 22:20:02

---
title: ☀️ What was your summer side-project? Time to shine! 😎 [THREAD 👇]
published: true
description: What projects did you undertake this 2019 summer?
tags: side-project, summer, discuss, thread
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rbfgn9vemxpneqmomt7j.jpg
---

Hey folks,

2019 summer is nearly finished... so show us in this thread, **what was your fun programming side-project!** 

I'm kinda curious to know what the DEV community was busy doing these past few months. 

Don't hesitate to provide a link to your repo or whatever to show us your progress! 🤗

And keep coding 💪
The do’s and don’ts of dynamic SQL for SQL Server ﻿
Tags: sql, sqlinjection, sqlserver
Published: 2019-09-12 20:56:31

(This is the short version (though it includes all the bullets). A longer version, including some text explanations and links is [posted on my blog](https://zoharpeled.wordpress.com/2019/09/12/the-does-and-donts-of-dynamic-sql-for-sql-server))

**The Do's**

 * **Always** white-list your identifiers. 
This can be easily done using system tables or views such as `sys.Tables` + `sys.Column` or `information_Schema.Column`.

 * **Always** use `sysname` as the data type for identifiers.
`sysname` is a built in data type that is equivalent to nvarchar(128) but it’s non-nullable. SQL Server use that data type internally for all objects names.

 * **Always** use exec `sp_executeSql` to execute your dynamic SQL (unless it needs no parameters which is a rare case).
```sql
set @sql = N'select col from '+ quotename(@table) N'+ where otherCol = @value'; 
 
exec sp_executeSql @sql, N'@value varchar(100)', @value
```

 * **Always** use parameters for data.

```sql
set @sql = N'select col from '+ quotename(@table) N'+ where otherCol = @value'; 
-- @table should already be white-listed before you execute the query, so that's O.K
```

 * **Always** wrap identifiers with `quotename`. othereise, your statement will break as soon as it contains an identifier with a white space (or one of many other “special” chars).

**The Don'ts**

 * **Never** pass SQL commands or clauses in parameters.

```sql
set @placeholder1 = 'select a, b, c';
set @placeholder2 = 'where x = y';
set @sql = @placeholder1 + 'from tableName '+ @placeholder2;
```

 * **Never** concatenate parameters into your dynamic SQL string.

```sql
set @sql = 'select * from table where x = '+ @x 
```


Did I leave anything out? If you think I did, please leave a comment so I can improve my post. Thanks!
Observation: Green Tea Tastes Better From A DEV Mug
Tags: watercooler, fluff
Published: 2019-09-12 20:51:34

I used Science and Facts to determine this.  Prior to today, this household had zero (0) DEV mugs.  Now there are two (2).  Thus, I have brewed and consumed three (3) cups of tea and can empirically state the superiority of these mugs over the outright drivel previously available.

Black, Oolong, and Rooibos trials on deck, sleep schedule permitting.

I'm sorry, Star Wars mug, you're not drivel, I still love you.  It's just... science.

![star wars mug](https://i.imgur.com/PeCqr8S.jpg)

I won't forget you...
Chrome Bookmarks Recovery Tool

Tags: github, googlechrome, recoverytool
Published: 2019-09-12 20:41:34

Here is how to recover your lost bookmarks (Windows):

Copy C:\Users\%username%\AppData\Local\Google\Chrome\User Data into File Explorer.
In search bar, type Bookmarks, you will see a list of files named Bookmarks and/or Bookmarks.bak. (Note: If there is more than one user using the same Chrome, bookmarks from other users will be listed too)
Select all the files with mouse and drag them to the upload block from the link here https://rongjiecomputer.github.io/chrome/bookmark-recovery/#windows.



Download all the HTML files.
Open each HTML file with Chrome and determine the HTML file that contains your bookmarks. (Note: The largest file is most likely the correct one)
In your Chrome browser, click the Chrome menu icon and go to Bookmarks > Bookmark Manager.
Click the menu icon beside search bar and click "Import Bookmarks".
Select the HTML file that contains your bookmarks.
Your bookmarks should now be imported back to Chrome.
Recommend A Software Project Management Book?
Tags: help
Published: 2019-09-12 20:29:39

---
title: Recommend A Software Project Management Book?
published: true
tags: help
---

Hello! I'm looking for a few great books to improve my skills at Software Project Management. Essentially, I want to learn more about building up a project from scratch - I'm hoping for something that covers information & requirements gathering and project conception, but would welcome any resources you have found to be helpful on the topic.

Thanks all!
We added DEV articles into our Coding News App
Tags: codenews, integration, app, news
Published: 2019-09-12 20:05:18

*__Disclosure__: This is my first article written here and I've discovered __dev.to__ community recently* 😊

__History:__
Being an active reader on HackerNews, Reddit and ProductHunt, one day I wanted to find some sort of news for coding and programming languages in the field that I'm working, Web Development. 

Due to the fact that I was on my phone, I've searched the GooglePlay marketplace to see if there are any apps I can use on a daily basis to stay up to date. To my  surprise I couldn't find any that I could use. 🤔

So I've teamed up with a friend from work to create this app. I've made the backend side, the aggregation of multiple RSS/JSON sources with a RESTful API and he made the Android App. 💪

[![Code News logo](https://thepracticaldev.s3.amazonaws.com/i/jf777ecsmpyb2efjfdjd.png)](https://play.google.com/store/apps/details?id=ro.crxapps.codenews)

We called the app simple [_"Code News - News for Programmers"_](https://play.google.com/store/apps/details?id=ro.crxapps.codenews). As I was looking for different sources to integrate new news into the app. I've come across the dev.to community. I've immediately fallan in love with it's design and the awesome articles that they have. 

I've contacted them and they provided me an RSS feed to add into the app.  Thank you! ❤️

Also we made a small customization for the dev.to articles into the app:

img1 | img2
--- | ---
![Code News with dev.to articles](https://thepracticaldev.s3.amazonaws.com/i/eug9ayjovfsy7uy8uknu.png) | ![Code News with dev.to articles](https://thepracticaldev.s3.amazonaws.com/i/ita59n5x1ozrrtbbvx76.png)


We'd love if you guys give us some feedback for our project. Also we talked to another friend and he's working on the iOS version too 😄 so it's coming! You can check the android version [here](https://play.google.com/store/apps/details?id=ro.crxapps.codenews).

Thank you **DEV** community for your awesome articles! 🙇‍♂️
Angular Performance: Precaching with the Service Worker
Tags: angular, videos, performance, webdev
Published: 2019-09-12 19:58:53

---
title: 'Angular Performance: Precaching with the Service Worker'
canonical_url: 'https://juristr.com/blog/2019/08/ngperf-precaching-serviceworker'
published: true
description: Cache your app with Angular's integrated service worker package
cover_image: 'https://juristr.com/blog/assets/imgs/ngperf/precaching-serviceworker.jpg'
tags:
  - angular
  - videos
  - performance
  - webdev
---

_This post has originally been published on [https://juristr.com/blog/2019/08/ngperf-precaching-serviceworker](https://juristr.com/blog/2019/08/ngperf-precaching-serviceworker). Go to [juristr.com/blog](https://juristr.com/blog) for more content_

---



  This article is part of my "Angular Performance Week" series, where I publish a new video each day based on the performance articles on web.dev/angular. Today we're diving into the service worker API, in specific by leveraging Angular's integrated service worker package.

<!--more-->


> Note: this article and attached Egghead video lesson are based on the articles on [web.dev/angular](https://web.dev/angular) by [Minko Gechev](https://twitter.com/mgechev) and [Stephen Fluin](https://twitter.com/stephenfluin). Full credit goes to them :thumbsup:

## Angular Performance Series

1. [Route Level Code Splitting](https://juristr.com/blog/2019/08/ngperf-route-level-code-splitting/)
1. [Preload Lazy Routes in Angular](https://juristr.com/blog/2019/08/ngperf-preloading-lazy-routes)
1. [Performance budgets with the Angular CLI](https://juristr.com/blog/2019/08/ngperf-setting-performance-budgets)
1. [Optimize Angular's Change Detection](https://juristr.com/blog/2019/08/ngperf-optimize-change-detection)
1. [Virtual Scrolling for large lists with the CDK](https://juristr.com/blog/2019/08/ngperf-virtual-scrolling-cdk)
1. **Precaching with the Angular Service Worker**

Don't miss the other videos [by subscribing to my newsletter](https://juristr.com/newsletter).

## Caching with Angular's Service Worker Package

To further speed up our app and to provide a more pleasant experience in flaky network conditions, we may want to use a service worker that allows us to apply precaching mechanisms. Luckily the Angular team already offers a service worker module that is well integrated with the framework. Let’s have a look at how to apply that to our application.

{%youtube 2-SoCdPo4l8%}

### Original web.dev article

Wanna read the original web.dev article? [Check it out here!](https://web.dev/precaching-with-the-angular-service-worker/).
UpdationofIdGeneration
Tags: replit, java
Published: 2019-09-12 19:56:30

User Id Generation :
Joseph’s team has been assigned the task of creating user-ids for all participants of an online gaming compition. Joseph has designed a process for generating the user-id using the participator’s First_name  , Last_name  ,PIN code and a number N. The process defined by Joseph is as below-
STEP 1:-
Compare the lengths of first_Name abd Last_Name of the participant.
The one that is shorter will be called “Smaller Name “  and  the one that is longer will be calles “Longer Name”. If both first_Name and Last_name are of equal Length , then the name  that appears later in alphabetical order will be called the “LongerName “.
STEP 2:
The user –id should be generated as below-
Last Letter of the smaller name +Entire word of the longer name +Digit at position N in  the PIN when traversing the PIN from left to right +Digit at position N in the PIN when traversing the PIN from right to left.
STEP 3:
Toggle the alphabets of the user-id generated in step-2 i.e upper –case alphabet should become lower-case and lower-case alphebets should become upper –case.
Lets see a few eamples;
Example 1 := if the participates detail as below
First_name=Rajiv
Last_name =Roy
PIN = 560037
STEP1 : Length of Last_Name is less than the Length of first_Name , so the smaller  Name is “Roy” and the Longer Name is “Rajiv”
Step2: The user_id will be =”Last Letter of the smaller name +Entire word in the longer name +Digit at position N in the PIN when traversing the PIN from left to right + Digit at Positin N in the PIN when traversing the PIN from right to left =Last Letter Of “Roy” +Entire word  in “Rajiv” +6th Digit of PIN from left+6th Digit iof PIN from right.
STEP 3:
Toggle the alphabets of the user-id generated in step-2 i.e upper –case alphabet should become lower-case and lower-case alphebets should become upper –case.



{% replit @VikasTomar/Id-Generation %}
Don't let the shadow jar plugin shadow your application
Tags: kotlin, showdev, java
Published: 2019-09-12 19:42:28

---
title: Don't let the shadow jar plugin shadow your application
published: true
description: 
tags: #kotlin, #showdev, #java
---

In my [previous post](https://dev.to/viniciusccarvalho/deploying-fatjar-ktor-applications-on-google-cloud-app-engine-1o32), I shared a template for deploying a [ktor](https://ktor.io) application to Google App Engine.

As part of this process I was using the [Shadow](https://imperceptiblethoughts.com/shadow/) plugin. 
Well it turns out, by default the plugin won't copy service files from java [Serviceloader](https://docs.oracle.com/javase/9/docs/api/java/util/ServiceLoader.html).

This lead to my application failing due SPI classes not being loaded. So if your app breaks by using the plugin just add this to your `build.gradle`

```
shadowJar {
    mergeServiceFiles()
}
```

Happy coding