teleren/devto huggingface dataset:
Mejoras de accesibilidad con Lighthouse
Tags: a11y, lighthouse, test
Published: 2020-02-29 15:36:12

---
title: Mejoras de accesibilidad con Lighthouse
published: true
date: 2020-02-29 05:18:06 UTC
tags: a11y, accessibility, lighthouse, test
canonical_url: https://koan.cl/post/mejoras-de-accesibilidad-con-lighthouse/
---

Es un poco vergonzoso comentar esto, más cuando este sitio se trata de accesibilidad, pero es bueno ser honestos y, como siempre, las mejoras en este aspecto son siempre bienvenidas.

Han oído hablar de **Lighthouse**? Es una herramienta creada por Google para realizar un assestment de accesibilidad a un sitio, en otro post hablaremos sobre como utilizarlo e integrarlo en nuestro desarrollo. Por ahora sólo quiero hablarles sobre unas mejoras que he hecho al [tema biblioteca](https://gitlab.com/joanca/hugo-theme-biblioteca "Gitlab del tema biblioteca para Hugo") que fueron detectadas por esta herramienta.

## Antes de los cambios

[![Resultado de Lighthouse antes de los cambios](https://koan.cl/static/img/lighthouse-previous.png) ](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fipfs.aravena.me%2Fipfs%2FQmZ2RRcUbgTHnz3TuYTed7GYHFETQFCfDQNWi8q2H9wWUV%2F&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext)<figcaption>
<h4>Resultado de Lighthouse antes de los cambios</h4>
</figcaption>

La imagen anterior nos muestra el resultado de lighthouse sobre koan, y bueno, los números no son muy alentadores, siendo todos ellos de un color naranja, denotando problemas. En performance nos muestra 71 sobre 100, en accesibilidad obtenemos 70, en buenas prácticas 85 y en SEO 82.

No son los mejores números, pero nos deja claro que hay mejoras que debo aplicar para que este número suba.

## Después de los cambios

[![Resultado de Lighthouse después de los cambios](https://koan.cl/static/img/lighthouse-after.png) ](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fkoan.cl%2F&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext)<figcaption>
<h4>Resultado de Lighthouse después de los cambios</h4>
</figcaption>

Luego de aplicar las mejoras que el assesment nos dio, subimos rápidamente a tener 100, puntaje máximo, en cada uno de los puntos nombrados anteriormente. Puedes [ver los cambios en que hice en el tema de Hugo](https://gitlab.com/joanca/hugo-theme-biblioteca/-/compare/5ff7120b33fa07800e999e945359bc67c1ac5ac5...master "Commits que muestran los últimos cambios en el tema biblioteca").

En otro artículo veremos más de cerca los cambios, en particular el hacer que los videos de youtube carguen en “lazyload”, responsive y accesibles.
Lesson 17 Discussion Swift
Published: 2020-02-29 04:57:42


<h2>•	What’s the difference between an outlet and an action? </h2>

<p>An outlet connects variables to objects in the storyboard so you can access, get info or make changes to these objects in code while the app is running, while actions connect to controls, such as a switch to make it possible for you to tap a button to make a method run.<p>

<h2>•	When might a developer want to use control events other than the default event?</h2>

<p>A developer would want to use control events over a default event in situations where specific information needs to be input. If you have a form with a question that required certain parameters, a form event would lead to a success page. You as a developer would need to change the default into one that would show an error message rather than the success page.</p>
What is stopping you from building your IoT projects?
Tags: discuss, iot, beginners, learning
Published: 2020-02-29 04:47:54

---
title: What is stopping you from building your IoT projects?
published: true
description: Let's talk about the reasons why you haven't built your Internet of Things project ideas. Let me know!
tags: discuss, iot, beginners, learning
---

Something that has become more obvious to be while writing material in the Internet of Things space is that there's an invisible barrier stopping a lot of people from executing on their awesome IoT project Ideas.

---

## The common things I hear

1. I **don't know how to do Electronics**, and that seems pretty crucial...

2. I'm not **sure what to buy**, or where to buy it from...

3. I hear about security issues, I **don't want to build something that's vulnerable to attacks**.

4. I'm **just not interested**

Did I miss anything? Discuss in the comments, or vote on the twitter poll!

{% twitter 1233612144387612672 %}
Team Section Using Tailwind CSS
Tags: todayilearned, todayisearched, tutorial, css
Published: 2020-02-29 04:29:36

Team Section is the most popular section for the website to show you the perfect team with a basic bio. So here we design a simple Team Section using Tailwind CSS and own custom class.

Tailwind CSS is a utility-first CSS framework with fully responsive mobile-friendly. Here we design Team Section using Tailwind CSS utility class and with a grid. In this element, we used shadow effects on the card side and also we used the rounded class to make our card border-radius. Also, we used flex class and justify-content class to make this section centered. Here we used responsive classes of the grid to make this element tablet and mobile-friendly.

 
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/team-section-using-tailwind-css/)
What is your choice of a low-code cloud-based service for fetching and merging data?
Tags: discuss
Published: 2020-02-29 04:29:08

---
title: What is your choice of a low-code cloud-based service for fetching and merging data?
published: true
tags: discuss
---

Hey everyone, I am planning to work on a project that includes fetching/merging data from various sources (CSV, JSON, XML) and then save them into databases/files of my choice. 

So far I tried Azure Data Factory and Logic App Service for that purpose however they were not what I was looking for especially for translating CSV data into Table Storage tables. I wish I had the ability to specify which rows to be deleted based on some condition. 

The end game is to fetch data from 20+ different sources, merge them into several data flows and then translate them into NoSQL databases or JSON files. 

Additionally, I have only recently checked the capabilities of R and it seemed very promising in terms of data preparation. However I am not experienced on how to get all of these run on a cloud-based platform. 

Thank you for the suggestions.
Recommended book for being a great leader - Leaders eat last
Tags: leadership, greatness, book, teaming
Published: 2020-02-29 04:02:14

---
title: Recommended book for being a great leader - Leaders eat last
published: true
description: 
tags: #leadership #greatness #book #teaming
---

Today I want to share to you guys about a book for how to be come a great leader in this modern day.

This book I got recommendation from my previous manager. So I gave it a try, and after finished reading it, I can tell you will not regret reading it.


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

So what's in it and why it's great. I will go over some notes from the book.

I.What is a leader:

Leadership is an option, not a rank.

Being a leader, doesn't mean that you're at a higher level than anyone, and you feel you're better than anyone.

Being a leader, in deed, is your option. You can even be a regular staff, but if you want to help someone, want to guide others, want to give your hands to others in tough times, you are a leader.

Being a leader, you gotta go to the tough things first, not point your fingers.

Being a leader, that's your responsibility that you need to take care of others in your team / your organization.

Being a leader, you will do something, not because that will help you to grow in your career ladder, but because it will help others.

And when you've done all that, you will get respect from others

II.Real life examples in the book:

There is a case about a team leader of a US army when they're in the field in Iraq.

You can read the story in the book.

But in short, this hero is determined, cared for others even though it meant that his life will be risky.

That's a hero, an example for being a leader.

Leadership is about sacrificing first, not earning.

III.Create a family, brotherhood/sisterhood in your team:

In the so-called offices, companies in general, we often see each other as colleagues.

We will put our life first.

But in order to make the team/company go further, we need to create a family in the team.

That means when someone get sick, someone got tough things, other will care.

We will care and expect no return, because when we do that, we know if we got into that same situation, other in the family will take care of us.

That's it.
Highly recommended the book.
Just give it a try

Here is the link in [amazon](https://www.amazon.com/Leaders-Eat-Last-Together-Others/dp/1543614620)
Looking for a Master to guide this young Padawan through the React side
Tags: react, javascript, help, discuss
Published: 2020-02-29 02:00:31

Hey everyone! I'm currently learning React and I'm looking for someone who can guide me through React and take some time to review my code and point out where I'm writing code in the wrong way and how I can improve it. So, if anyone is interested contact me please :)

Also, I have published my first react npm package today. It is just a simple customizable checkbox component. If anyone is interested in checking it out you can do so here => https://www.npmjs.com/package/react-checkbox-component :)
Want to cringe? 🤦‍♂️
Tags: webdev, watercooler
Published: 2020-02-29 00:07:20

6 years ago I was running a company of one, this company got me out of being unemployed by learning webdev and general running of businesses.

I blagged my way through the majority of my time in the business 3 years of pretending to know everything and doing a terrible job of it. But I'm still alive and actually doing alright these days, I feel stable.

Anyways want to watch some really cringe worthy 1st ever pitch / demo (had no idea what I was doing). Enjoy not enjoying this.

{% youtube -8D5BZ4v2WM %}

😱 

Also, my voice sounds not like me, why is that?
A plushy controlled game (Part 1)
Tags: javascript, p5js
Published: 2020-03-06 15:33:13

---
title: A plushy controlled game (Part 1)
published: true
date: 2020-02-29 00:00:00 UTC
tags: javascript, p5.js
canonical_url: https://tomcools.be/post/feb-2020-plushy-game-1/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/lgqugj4j4n7nm5gciqkt.png
---

I have been fascinated by video games ever since I saw the first level of Mario. They dominated a big part of my youth and are what got me into programming in the first place. Building a website for our Call of Duty clan was probably one of the first times I came into contact with HTML and CSS. 

Recently however, my fascination has shifted from playing games, to discovering how they are built. **Physics are a big part of what makes a game feel natural**, making things fall with gravity, being blown away by wind, etc. 
I had no idea how to even start coding physics, until colleague of mine told me about this great book he had read: [The Nature of Code]().
The book describes in incredible detail how you could program physics in a pretty clear and straightforward way.
Best of all, you can find it online, for free! :o

Next to the physics part, how your audience interacts with your game determines a lot of the experience.
I have always loved the idea of using a camera to control your game so I decided I wanted to use my laptop camera as the main way to interact with the game.

## What are we building?

So what do you get when you mix physics and computer vision? A demo concept "game" controlled by a plush animal! So fluffy! <3

{% youtube w36o2PjRaKc %}

In this **first post** we will focus on the basic elements of a game.
We'll cover how to draw items on a canvas and program in some realistic looking physics. **As this blog post contains a lot of examples with Javascript which could not be posted on dev.to, please read the blog on [my own personal website](https://tomcools.be/post/feb-2020-plushy-game-1/).**
p5.jsの開発環境を構築する
Tags: japanese, p5js, beginners, tutorial
Published: 2020-02-29 00:00:00

---
title: 'p5.jsの開発環境を構築する'
date: "2020-02-29T00:00:00.000Z"
description: "p5.jsでクリエイティブ・コーディングをするための開発環境を構築する手順を説明します。"
---

## この記事のゴール

`p5.js`を利用したクリエイティブ・コーディングを行える開発環境を構築する。

## 前提環境

- Mac
- Visual Studio Code

## 構築する手順

p5.js用のプロジェクトディレクトリを作成します。

```shell
$ mkdir p5js 
$ cd p5js
$ touch index.html
$ touch sketch.js
```

下記のダウンロードページの下部にある `p5.min.js` をクリックしてダウンロードします。
https://p5js.org/download/

![p5js download link](https://dev-to-uploads.s3.amazonaws.com/i/67b6pdzp0i24ay6pbdse.png)


ダウンロードした `p5.min.js` をプロジェクトディレクトリに配置します。

この時点でのプロジェクトディレクトリ内はこうなっています。

```shell
$ tree
.
├── index.html
├── p5.min.js
└── sketch.js
```

これで `p5.js` を利用できるようになったので、HTMLとJavaScriptを書いていきます。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="p5.min.js"></script>
    <script src="sketch.js"></script>
</body>
</html>
```

```js
// sketch.js
function setup() {
    createCanvas(640, 480);
    fill(0);

    ellipse(50, 50, 100, 100);

    rect(100, 100, 100, 100);

    triangle(250, 200, 200, 300, 300, 300);
}
```

この状態で、`Visual Studio Code`の Live Server 機能を使っていきます。

`Visual Studio Code` の右下に表示されている `Go Live` をクリックします。  
すると、`127.0.0.1:5500`で `index.html`にアクセスできるようになります。

ブラウザで`127.0.0.1:5500`にアクセスし、  
以下のようにページが表示されれば `p5.js`の開発環境は構築完了です。

![p5js](https://dev-to-uploads.s3.amazonaws.com/i/k2bnl10a7z6gpq1zqbqv.png)
Automatic cross-platform testing: part 3: MacOS
Tags: testing, cirrusci, ci, macos
Published: 2020-02-28 23:39:36

---
title: Automatic cross-platform testing: part 3: MacOS
published: true
description: How to automatically test on MacOS, using Cirrus-CI
tags: Testing, Cirrus-CI, CI, MacOS
---

#Previously on this channel

* [Introduction and testing on Linux](https://dev.to/drhyde/automatic-cross-platform-testing-part-1-linux-40ih)
* [Testing on FreeBSD](https://dev.to/drhyde/automatic-cross-platform-testing-part-2-freebsd-2394)

#Testing on MacOS

Last time we looked at how to use Cirrus-CI to test your code on FreeBSD without the hassle of having to install and maintain a FreeBSD machine. Conveniently, Cirrus also support testing on MacOS. You can easily add a MacOS build to your code by adding [another stanza](https://github.com/DrHyde-347624/example-project/commit/987e930) to the `.cirrus.yml` file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fbdgfsaennpt8grp7oq4.png)

This time Cirrus fires off *two* jobs. At the time of writing, MacOS jobs seem to run a lot faster than FreeBSD jobs - in the above example they provisioned a machine and tested my code in 2 seconds flat, but after over a minute the FreeBSD job was still waiting in a queue for resources to become available.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n05t3d67cutt97xul3uz.png)

As we've now come to expect, Travis also picked up that we'd made a change and ran the tests, so we've now got builds going automatically on three platforms, all of them reporting their status back to Github.

#Next

The [final part of this series](https://dev.to/drhyde/automatic-cross-platform-testing-part-4-windows-1p7e) will show you how to automatically test on Windows.
DNA paring free code camp intermediate algorithm
Tags: replit, node
Published: 2020-02-28 23:12:25

---
title: DNA paring free code camp intermediate algorithm
published: true
tags: replit, nodejs
---

function pairElement(str) {
var a = /[A-Z]/gi; 
var b = []; var arr =[];
 var x =[]; var args =[];
 for(let i=0; i<str.length;i++){
  b = str.match(a);
   if(b[i] === "A"){
     arr =  b[i].concat("T");
   }if(b[i] === "T"){
     arr =  b[i].concat("A");
   }if(b[i] === "C"){
     arr =  b[i].concat("G");
   }else if(b[i] === "G"){
     arr =  b[i].concat("C");
   } 
   var x = arr.split("");
   args.push(x)
   console.log(args);
   
 } 
   
return args;
} 
pairElement("TGCGAT");
/*pairElement("ATCGA") should return [["A","T"],["T","A"],["C","G"],["G","C"],["A","T"]].
Passed
pairElement("TTGAG") should return [["T","A"],["T","A"],["G","C"],["A","T"],["G","C"]].
Passed
pairElement("CTCTA") should return [["C","G"],["T","A"],["C","G"],["T","A"],["A","T"]].*/

{% replit @oscarhernandez6/DNA-Pairing-Free-code-camp-intermeadiate-algorithm %}
Code readability metrics?
Tags: codereadability, readability, programming, discuss
Published: 2020-02-28 23:21:55

---
title: Code readability metrics?
published: true
date: 2020-02-28 23:07:12 UTC
tags: codereadability,readability,programming,discuss
canonical_url: https://stereobooster.com/posts/code-readability-metrics/
description: Let’s assume you need to build code-readability-meter. How would you do it?
---

Let’s assume you need to build code-readability-meter. **How would you do it?**

## What is code readability?

> Readability is the ease with which a reader can understand a written text.
> 
> – [Wikipedia](https://en.wikipedia.org/wiki/Readability)

> Readability is what makes some texts easier to read than others.
> 
> – [The Principles of Readability](https://files.eric.ed.gov/fulltext/ED490073.pdf)

Many factors play into the readability of text. For example, contrast, font, choice of words and many more. (See: [readability for natural languages](https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide))

Some factors are **subjective** e.g. depends on the reader - if the reader knows given programming language, if the reader knows the context if the reader familiar with the jargon, etc. There is a great talk on the subject: [Laura Savino - Talk Session: Readable Code](https://www.youtube.com/watch?v=IbOp_e9yh0k). She says that “readability needs a reader”.

Some factors are **objective** e.g. doesn’t depend on the reader - length of the text, indirection in code, etc.

## Subjective factors

In my opinion the only way to control subjective factors of readability is with code reviews e.g. if every team memeber can read and understand give code.

## Objective factors

On the other hand objective factors can be measured by the porgramm, for example, we can build graph of function calls or variables, types, clesses dependencies and measure depth of graph.

So the question is: which objective factors we can measure to detect code readability?

## Goodhart’s law

> When a measure becomes a target, it ceases to be a good measure
> 
> – [Wikipedia](https://en.wikipedia.org/wiki/Goodhart%27s_law)

I want to think about possible metrics of readability to better understand it, I don’t plan to make it one of those metrics like, test coverage or so called code quality.
Day 89 : Travellin' Man
Tags: hiphop, code, coding, lifelongdev
Published: 2020-02-28 23:04:11

_liner notes_:
- Professional : Had a couple of meetings. Worked on some web components. Found out that someone cancelled last minute to attend VueConf US in Austin, Texas. I volunteered and now I'm headed to Austin on Sunday. I'm really a Travellin' Man! haha Funny that in a previous job, I was travelling a lot more. To their credit, my coworkers made sure that I was okay with it. Glad to see they care.

- Personal : Putting together tomorrow's radio show. Doing laundry and getting ready for my trip.

![View of Crater Lake, Oregon with the lake in the middle and mountains surrounding it.](https://dev-to-uploads.s3.amazonaws.com/i/mah7vllo5dorfdn8bi06.png)

Keeping it short. Got to get the radio show finished up and get ready for my trip. I'll be posting updates from my trip at https://dwane.in

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube p2YUDZZV6H8 %}
DEV Questions 4: L10N and I18N gotchas
Tags: inclusion, design
Published: 2020-02-28 22:38:02

Post 4 in an ongoing series...

Localization (L10N for short) and Internationalization (I18N) are tricky to get right. Most developers who have done this know about text encoding, length differences affecting layout, and externalizing text. However, this is not enough... as with these three approaches alone, some languages cannot be supported properly.

One common source of trouble is "dynamic" text - such as the English string "You have 2 items in your shopping cart". Clearly the 2 will need to be modified at runtime. However, not all languages use the singular or plural, that's it model English does. The most complex model I am aware of uses FIVE forms: None, one, few, some, and many are all treated differently. (Note that English does not distinguish between none, few, some, or many, treating them all as "plural".) This implies that "items" in the string above must be parameterized as well, and mapped to the language's plural rules - which, thankfully, Unicode has defined for us.

Another thing that can lead to problems is differing word order between languages. For strings without any variables, this is easy enough to handle, but in the "dynamic" case mentioned above, the locations of the placeholders will have to be moved for the languages requiring it.

Finally, there's the thorny subject of idioms... these almost never translate well into other languages. There are several ways to handle this: Remove all idioms from the "fallback/base" text before translating, or separate the "default" text from the "fallback/base" text that gets translated, taking idioms out of the second but leaving them in the first. Which approach to use depends on how important the idioms are for context in the original language, which will of course vary by use case.

One more thing... in the event your code displays anything that varies by locale, such as dates, times, and currencies, those too must be adjusted to suit local expectations. It is FAR too easy to overlook these concerns, create low-effort translations, and have your application fare poorly outside its original market, due to lack of understanding. Don't be tempted!

Now for you: What has made translation easy / hard for you and your code?