teleren/devto huggingface dataset:
Accessibility (or the lack of) broke my code
Tags: a11y, webdev, opensource
Published: 2020-05-12 20:08:34

A year ago, I came across this [image on Twitter](https://twitter.com/brian_lovin/status/1124787522909949952). It was a demo developers at Facebook were designing to solve accessibility issues, and was expected to later be open sourced.

![https://twitter.com/brian_lovin/status/1124787522909949952](https://dev-to-uploads.s3.amazonaws.com/i/ny7k5spwuo8i112uyzvy.jpg)

This feature never saw the open source days, but later that week in May/19, I created a similar project just to prove the concept ([repo](https://github.com/estevanmaito/billie)) and created a [demo](https://estevanmaito.github.io/billie/) for it.

![Detail screenshot of https://estevanmaito.github.io/billie/](https://dev-to-uploads.s3.amazonaws.com/i/59w96ltdn4v93fncg0xi.png)

As you can see, the library works by drawing clickable, colored rectangles over violations. It works!

So today (yes, 1 year later), I've decided to make it a Chrome extension, so everybody could use it to analyze their pages, and *it was at this moment that I knew* my extension couldn't handle the current web accessibility state.

StackOverflow
![Stack Overflow](https://dev-to-uploads.s3.amazonaws.com/i/e8o89rn36ahl67pi6x0g.png)

Dev.to
![Dev.to](https://dev-to-uploads.s3.amazonaws.com/i/foj6z5rpufk7auq8ef5v.png)

Medium
![Medium](https://dev-to-uploads.s3.amazonaws.com/i/6ru99sr68b565q0z1a2n.png)

I didn't expect this level of violations, so the extension is completely useless, because it starts drawing from the root and goes down the DOM tree. As almost every website above had problems starting at html or body, you can't even click on the other errors. And where you can, it's almost certain that a parent element already has some problem too.

The solution, you may think, is to just reverse the order violations are drawn, or place icons instead of drawing a giant box, but the point here is that this extension should've not be catching so many errors. I can fix my code, but it won't fix yours!

A bonus, the Web Accessibility Initiative page:

![W3C](https://dev-to-uploads.s3.amazonaws.com/i/aw4l0e1u31ftyty01dtm.png)

How could we avoid this (the state of a11y currently)? Do you think adopting something during the development workflow would work?

If you're interested in testing the extension, it's [here](https://github.com/estevanmaito/billie-ext).
Announcing Docking - Static-Site Generator for Isotope ecosystem!
Tags: javascript, webdev, jamstack
Published: 2020-05-12 20:02:13

Just a day before this post, I  [announced Prototope](https://areknawo.com/introducing-prototope-utility-first-css-in-js-library/)  - Tailwind-inspired CSS-in-JS library to go alongside Isotope UI library. The goal of this library was and is not only to provide better integration with utility-based CSS toolkit but also to extend Isotope's  **ecosystem**  and increase it's perceived value, making lives of all potential Isotope's users out there, even easier!

And it's with similar thoughts in mind, that I introduce you to  [Docking](https://areknawo.com/docking)  🎉 - a  **Static-Site Generator**  (SSG) built upon the Isotope ecosystem.

![Docking logo](https://areknawo.com/content/images/2020/05/logo-7.png)

Docking is meant to be a simple, go-to SSG, for anyone already familiar with Isotope and Prototope, who'd like to make a nice, Markdown-based static (or  **JAM-stacked**  if you like) website without much hassle. It prioritizes  **simplicity**, ease-of-use, and great development-experience (just like other libraries in the Isotope ecosystem).

Docking relies on opinionated file structure with special directories for static assets, Markdown content, and Isotope components respectively. All complexities like bundling, path resolving, and even TypeScript support are handled seamlessly.

So, if I managed to get you interesting in Docking and Isotope ecosystem as a whole, feel free to check out  [the GitHub repo](https://github.com/Isotope-js/isotope)  (consider dropping a star ⭐ while you're at it) and Docking's  [own documentation](https://areknawo.com/docking/).

As always, if you'd like to stay up-to-date with Isotope, Docking, or any other Web Development stuff that I blog about, follow me on  [Twitter](https://twitter.com/areknawo),  [Facebook](https://facebook.com/areknawoblog), or here on Dev.to! Thanks for checking in! 🤗
Imposter Syndrome: That Same Old Song
Tags: codenewbie, gatsby
Published: 2020-05-12 19:39:19

Imposter syndrome. 

They say it's real and that everyone feels it, so don't dwell. Keep moving forward, you deserve to be here.

Oh boy. Somehow that is the hardest advice for me to follow.

Imposter syndrome looks and feels different for everyone, but here's what it is for me.

Just weeks post-graduation from Flatiron, I'd built my website locally (using Gatsby) and wanted to host it using Netlify.

According to Netlify's documentation, it's a gosh darn snap to deploy. 

DELIGHTFUL.

I followed Netlify's steps (so easy!) and got to the final "click" to deploy. 

All too soon, an error:

`Build script returned non-zero exit code: 127`

Sigh. 

Pep talk time.

"Anna, we've been here before. Find the root of the problem and fix it!"

After a few light Google searches and glances through my deploy log, I took a direct flight to the land of imposter syndrome. 

*What even IS this error message? UGH I KNOW NOTHING. Yes, I tried both build commands, that's not it. Shoot, now my site's not loading locally. I AM NOT CUT OUT FOR THIS!*

And folks, it happens *that* fast *every* time.

Hit a bump in the road, the thoughts roar.

Heaven knows I have no solution other than to plow through the noise and keep trying - which is exactly what I did - but it feels so terrible.

Here's how I deployed my website (you see? I *knew* you could do it).

## The Situation

+ 14 tabs open (13 tabs too many)
+ 9 (*covers face in shame*) failed deployments
+ 3+ hours of effort
+ You better *believe* there was sweat

Most of those tabs had Stack Overflow questions loaded, and I also had a lil' Gatsby and Netlify documentation on the side.

## The Process

Reading (so many) Stack Overflow q & a's did not give me the direct solution. 

But.

It gave me context for where to look, which is REALLY HELPFUL.

A lot of people got the same error message but named other errors within the deploy log that I didn't have. 

So, I combed through my deploy log, tried (really hard) to understand what I saw and found what could be the culprit.

`yarn: command not found`

This wasn't a clear "ah ha!" moment, but it sure was a clue.

I put my efforts there, and scoured those Stack Overflow q & a's again, this time focused on yarn. 

Some folks updated their yarn version while others manually pushed their yarn.lock file.

I was shooting in the dark, but I tried everything and anything yarn related.

The last command did the trick. 

Want to know what it was?

## The Solution

Running `yarn install` fixed the issue.

Yup. 

So many eye rolls, face palms, my gosh I can't believe it was THAT, and a heckuva lot of relief.

And I swiftly took a direct flight back to reality.

And yes, it happens that quickly.

Been there? Experienced that? Sure would love to hear about it. And, for what it's worth, you're not alone.
Live Release v4.0.6 and Community Hangout - 2020-05-16
Tags: hangout, community, hoa, phalcon4
Published: 2020-05-12 19:54:18

---
title: Live Release v4.0.6 and Community Hangout - 2020-05-16
published: true
date: 2020-05-12 19:29:39 UTC
tags: hangout,community,hoa,phalcon4
canonical_url: 
---

Time for a new release and community hangout! v4.0.6 will be released live this Saturday at 10:00 EDT (14:00 UTC)!<!--more-->Join us on Saturday the 16th of May 2020, at 10:00:00 EDT (14:00:00 UTC), to release the latest version of Phalcon and have a chit chat.

> **v4.0.6** will be the last of the `4.0.x` series. The version after that will be `4.1.x`

We will hold this virtual meeting on a live event in YouTube. The URL for the hangout is:

[https://youtu.be/xZz64Ed3opQ](https://youtu.be/xZz64Ed3opQ)

Agenda:

- Introduction, welcome to all attendees
- Thank you to the whole community and contributors
- Status update since last hangout
- Live Release v4.0.6
- Q/A

Looking forward to hearing from all of you and seeing you during the hangout.

Stay safe and keep coding!

* * *

Chat - Q&A

- [Discord Chat](https://phalcon.io/discord)
- [Forum](https://phalcon.link/forum)

Support

- [OpenCollective - Support Us](https://phalcon.io/fund)
- [Store - Merchandise](https://phalcon.io/store)

Social Media

- [Telegram](https://phalcon.io/telegram)
- [Gab](https://phalcon.io/gab)
- [MeWe](https://phalcon.io/mewe)
- [Parler](https://phalcon.io/parler)
- [Reddit](https://phalcon.io/reddit)
- [Facebook](https://phalcon.io/fb)
- [Twitter](https://phalcon.io/t)

Videos

- [BitChute](https://phalcon.io/bitchute)
- [Brighteon](https://phalcon.io/brighteon)
- [LBRY](https://phalcon.io/lbry)
- [YouTube](https://phalcon.io/youtube)

<3 Phalcon Team
CIA Triad in Information Security 🔐
Tags: security
Published: 2020-05-12 19:26:35

---
title: CIA Triad in Information Security 🔐
published: true
description: In this blog post we will explain each components of the CIA triad
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/uhade19qo1et0api1hwe.jpg
tags: security
---

How would you define information security when asked?

I struggled at times to explain this.I would just say it is protection of information and hope that there isn't a follow up question 🥺!

The reality is that the protection of information is governed by Confidentiality,Integrity and Availability popularly know as the CIA triad.

Now let's drill down on each of these concepts👨🏽‍🔧
   - Confidentiality : Ensures that information is only accessible to authorised entities.This can be enforced by using encryption mechanisms.

   - Integrity : Ensures that information remain consistent over it's entire life cycle - should not be changed in transit.

   - Availability : Speaks about ensuring that information remain always available on-demand.

Congratulations you can now flex to your buddies by explaining information security to them 🏌🏽‍♂️

I hope you enjoyed this.Leave a comment and smash that follow button  to get notified when I post new content.
Salesforce Standup with Sarah Aerni
Published: 2020-05-12 19:19:23

*Welcome to the Salesforce Standup, where we check in with employees in our Technology, Marketing, and Product organization from locations all over the world! At every Standup we ask our guest some questions to help us get to know them better. As any good standup should be, it's a quick chat where we’ll find out answers the questions that matter most—or maybe are just the most fun. You’ll have to watch to find out.*

Today's guest, Sarah Aerni, is a Senior Director of Data Science, leading a team of folks who build the automated machine learning behind Salesforce's Einstein product. 

![Sarah Aerni sits on top of a goat statue](https://dev-to-uploads.s3.amazonaws.com/i/8wg3mdxcz8xueqr83k0h.jpg)

Sarah says that, most days, she feels like the "yay!" emoji in Slack. She is not much of a chef but has been enjoying takeout from a slew of Bay Area restaurants. And, she thinks she's reached the end of the Internet when it comes to TV shows; what would you recommend she watch next?!

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Salesforce Standup with Sarah Aerni <a href="https://t.co/8oz5AZJXCd">https://t.co/8oz5AZJXCd</a></p>&mdash; @SalesforceEng (@SalesforceEng) <a href="https://twitter.com/SalesforceEng/status/1260241286348431362?ref_src=twsrc%5Etfw">May 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Web Dev Week 4: Dom Manipulation
Tags: javascript, html, css, webdev
Published: 2020-05-12 19:08:45

#This week from Colt Steele The Web Developer Bootcamp, I focused on Dom Manipulation.


####Document Object Model is the interface between JavaScript and HTML/CSS. 

The browser turns every tag into a JavaScript object that we can manipulate. 

Everything is stored inside of the document object. 

```javascript
Console.dir(document) 
```
dir will print out the entire document. 

######The key strategy to success is to SELECT an HTML element and then MANIPULATE that HTML element. 

It is possible to change the color of a h1 tag using JavaScript. 

var h1 = document.querySelector(h1)
h1.style.color = 'pink'

####DOM SELECTORS 

document.URL, document.head, document.body, document.links 

####Methods 
document.getElementById() - takes a string argument and returns the one element with a matching ID. 

document.getElementsByClassName() - takes a string argument and returns a list of elements that have a matching class. Returns a list not an array. Contains every element on the page that matches the given class name provided. 

document.getElementsByTagName() - returns a list of all elements of a given tag name like li or h1 

document.querySelector() - returns the first element that matches a given css style selector like #color. 

document.querySelectorAll() - returns a list of elements that matches a given css style selector. 

####Dom Manipulation 
Changes an element style 
adds/removes classes
changing the content of a tag 
changes attributes 

Style property is a way to manipulate an element style. The style property can style color, borders, font-size, background, and margin. 
syntax: tag.style.color = 'blue'

classList is a read-only list that contains the classes for a given element. It is not an array, rather than directly manipulating the style with JavaScript, we can define a css class and then toggle it on or off with JavaScript.  

textContent and innerHTML are both ways to grab the content of a given element. textContent returns a strong of all the text contained in a given element. innerHTML is similar to textContent, except it returns a string of all the HTML contained in a given element. textContent only gets the text no HTML because it treats everything as text. innerHTML treats everything as HTML. 

####Attributes 
getAttribute() and setAttribute are used to read and write attributes like src and href.

####Dom Events is Interactive 
First, select an element and then add an event listener to it. 
It is possible to listen for clicks like with a button, hover over an element like h1 element, and keypresses with text input. 

The method to use is addEventListener() 

element.addEventListener(type, functionToCall)

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

https://www.w3schools.com/js/js_htmldom.asp


###I have learned how to use Dom manipulation to make a web application interactive.
Id Classes Attributes tags
Tags: javascript, beginners
Published: 2020-05-12 18:57:33

---
title: Id Classes Attributes tags
published: true
description: which ones
tags: javascript, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/h4ow94q6zt3yjy9l9wjh.jpg
---
If we need to select the element inside the html we have to decide if we want to select one element or multiple elements.
In the first case id is perfect, we can't name two elements with the same id ( the id is unique ).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1vt6vv7bo4j83bxqxo66.png)
To select more than one element we may use classes or attribute.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r7krswzphlbhz9g8fya6.png)
In general we use classes to select multiple elements and attribute to filter through them.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bu7j8en0aeeeym0so05e.png)
It`s a good practice to use js prefix for the elements that require javaScript to work.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mlqcsst9xy5o2x4kex8i.png)
Idempotent vs Deterministic
Tags: computerscience, javascript
Published: 2020-05-12 18:36:46

Since I had to look it up more than once, here's a small reminder of the differences between the two concepts.

```js
//f(x) + f(x) == 2 * f(x) for all x
const addTwo = (x, y) => x + y;
```
This is a deterministic or pure function, the same input always returns the same output 

```js
//f(x) == f(f(x)) for all x
let someExternalState = 'off';
const activate = () => someExternalState = 'on';
```
This is an idempotent function, calling it once or many times in a row produces the same side effect
React-redux useSelector hook and equality checks
Tags: react, redux, beginners
Published: 2020-05-12 18:33:15

`useSelector` is one of the redux hooks, which really makes life of a dev much more convenient. Usually we use it to get primitive type value like in below example with `isLoggedIn`:

```javascript
import { useSelector } from 'react-redux'

const isLoggedIn = useSelector((state) => state.user.isLoggedIn)
```

`useSelector` will cause component rerender, after redux action was dispatched only if the result will be different than the last one. It checks whether it has changed based on `===` comparison of the result. So, if in your selector result is wrapped in the object like below:

```javascript
import { useSelector } from 'react-redux'

const { isLoggedIn, numberOfUsers } = useSelector(({
    user: { isLoggedIn },
    users: { numberOfUsers }
}) => ({ isLoggedIn, numberOfUsers }))
```

`useSelector` hook will cause your component to be rerender every time an action is dispatched.

The solution for this problem is to introduce shallow comparison of the result object (result object props will be compared like in `connect()`), check below example:

```javascript
import { shallowEqual, useSelector } from 'react-redux'

const { isLoggedIn, numberOfUsers } = useSelector(({
    user: { isLoggedIn },
    users: { numberOfUsers }
}) => ({ isLoggedIn, numberOfUsers }), shallowEqual)
```

Here you can ready more about it:
[useSelector hook docs](https://react-redux.js.org/api/hooks)
Did that just happen 🎩
Tags: news, twiliohackathon
Published: 2020-05-12 18:30:21

#It's official - I'm a Twilio champion 📳

This might sound odd but for reasons more than one. Today has been a really good day.

I just got off a zoom with Megan Speir @meganspeir Community Engineer at Twilio.

And she asked me questions, I asked questions. She wanted me to know that my spark ⚡ was recognized and Twilio have a programme where I could ⚡⚡⚡⚡⚡ away to my heart's content.

Helping people, working with the Twilio SDKs, APIs and [RCS](https://www.twilio.com/blog/2018/02/rcs.html) which is going to crush SMS.

But here's the thing, you can join too. Check out [Twilio Champions](https://www.twilio.com/champions) on how to join!

Thanks to Mika Matin for sharing their work on Unsplash.

@thepracticaldev
HackerRank's Nested Lists Problem
Tags: python, efficiency, hackerrank, solution
Published: 2020-05-12 18:18:08

HackerRank's [Nested Lists](https://www.hackerrank.com/challenges/nested-list/problem) problem can be solved in many ways. One of the solutions that you might find in the discussion area of the problem is the following:

```python
marksheet = []
for _ in range(0,int(input())):
    marksheet.append([input(), float(input())])
second_highest = sorted(list(set([marks for name, marks in marksheet])))[1]
print('\n'.join([a for a,b in sorted(marksheet) if b == second_highest]))
```

However, there is a problem there. Do you see it? This solution performs 2 sorts and then it conducts a linear search. 
<br />

We can do better than that. Here is a solution that sorts 1 time, ends the operation sooner, and performs a binary search.

```python
from bisect import bisect, bisect_left
from heapq import heappush, heappop

n = 2
scores_names = []
scores_sorted = []
scores_names_sorted = []
ordinal_map = {}
seen = set()
enum = 1

if __name__ == '__main__':
    for _ in range(int(input())):
        name = input()
        score = float(input())
        heappush(scores_names, (score, name))

for i in range(len(scores_names)):
    score_name = heappop(scores_names)
    scores_sorted.append(score_name[0])
    scores_names_sorted.append(score_name)

    if score_name[0] not in seen:
        if enum > n:
            break
        seen.add(score_name[0])
        ordinal_map[enum] = score_name[0]
        enum += 1

low = bisect_left(scores_sorted, ordinal_map[n])
high = bisect(scores_sorted, ordinal_map[n])

for i in range(low, high):
    print(scores_names_sorted[i][1])
```

It's a little bit more code and it would be an overkill for simple things. However, for bigger problems, this would perform drastically better.

Feel free to suggest an improvement.
Understanding Kubernetes: part 22 – LimitRange
Tags: kubernetes, devops, docker, beginners
Published: 2020-05-12 18:11:03

---
title: Understanding Kubernetes: part 22 – LimitRange
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7z80bga90qyr4s3o76to.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with LimitRange.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7z80bga90qyr4s3o76to.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/van1owdy16n3vfxlgazd.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yfgueoaqoal683y1i13x.jpg)

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
ENUM IN PHP
Tags: php
Published: 2020-05-12 17:56:52

Enum is the short form for an enumeration type, we use it to group named values. Enums are used instead of strings to denote the status of objects in an organised way. Unfortunately PHP doesn't have a native enum type. Although it offers a basic SPL implementation.

##

```php
class Day extends SplEnum {    
    const MONDAY    = 1;
    const TUESDAY   = 2;
    const WEDNESDAY = 3;
    const THURSDAY  = 4;
    const FRIDAY    = 5;
    const SATURDAY  = 6;
    const SUNDAY    = 7;
}

echo new Day(Day::MONDAY);

try {
    new Day('UnknownDay');
} catch (UnexpectedValueException $e) {
    echo $e->getMessage();
}

// RESULT
// 1
// Value not a const in enum Day
```

## Better Version
Imagine we need to store Payment in a database, with its status represented as a string we could do it like this.
```php
class Payment
{
    public function setStatus(string $status)
    {
        $this->status = $status;
    }
}

class PaymentStatus extends Enum
{
    const INITIATED = 'initiated';
    const PENDING   = 'pending';
    const COMPLETED = 'completed';
    const FAILED    = 'failed';
}

// ...

$payment->setStatus(PaymentStatus::COMPLETED);
```
This won't be doing any type checking so any string value can be passed to "setStatus()" method. There is a good package in php my  [Matthieu Napoli](https://mobile.twitter.com/matthieunapoli/) called [myclabs/php-enum](https://github.com/myclabs/php-enum).

## Solution
```php
class Payment
{
    public function setStatus(PaymentStatus $status)
    {
        $this->status = $status;
    }
}

// ...

$payment->setStatus(PaymentStatus::COMPLETED());
```

Calling the PaymentStatus constant statuses as a method creates a new instance of PaymentStatus using php magic method __callStatic() with an attribute value of 'completed'. Now we can type check for PaymentStatus and ensure the input is one of the four things defined by the "enum".