teleren/devto huggingface dataset:
Contributors wanted for synth music creation project
Tags: hacktoberfest, entertainment
Published: 2019-10-02 04:35:17


---
title: Contributors wanted for synth music creation project
published: true
description: This is a project I built during my internship. I want to add new better sounds by using Web audio API's filters. You also can do a QA and post on its issues page.

tags: hacktoberfest, opensource, entertainment
---
This is a project I built during my internship. I want to add new better sounds by using Web audio API's filters. You also can do a QA and post on its issues page. Any contributions are heavily welcome.

[Github repo link](https://github.com/sbimochan/jamming-js)

![Jamming JS](https://thepracticaldev.s3.amazonaws.com/i/ehj4lj024jz2up45d50v.jpg)
Pushing Left, Like a Boss - Part 10: Special AppSec Activities and Situations
Tags: security, appsec, beginners
Published: 2019-10-02 04:27:15

---
title: Pushing Left, Like a Boss - Part 10: Special AppSec Activities and Situations
published: true
description: This article is the last in the Pushing Left series and will explain special security situations that require special security activities. It is also serves as a goodbye to her colleagues at Microsoft.
series: Pushing Left Like a Boss
tags: security, appsec, beginners, security
---
###This series, and my blog, have moved! [Check it out](https://wehackpurple.com/g8tg)!
---
##Special Situations
Not all application security programs are the same, and not all security needs are equal. As many of you know, I am leaving Microsoft this week, and I'm going to talk about them a bit in this article because they are probably the best example on the planet of special security requirements and situations.

**Think about this**: Not only does Microsoft make the most popular consumer operating system on the planet (Windows), they also make the second most popular cloud (Azure), the most popular programming IDE (Visual Studio Code), one of the most popular programming languages/frameworks (.Net), the most popular office suite (Microsoft Office), and so, so much more. It wasn't until I worked there that I realized *just how many things depend on Microsoft*. It's staggering. I tried to threat model the idea of Microsoft going out of business (I'm a blast at team meetings) and I think the world would not be able to recover, because their systems are used to support so many other systems on this planet that are critical. We would literally shut down.

What this means is that Microsoft has very special security needs. Their operating system, cloud and other products that we depend on **must** be secure. They must go far beyond the average company in their efforts to ensure this, and they do. I have seen this first-hand; I was lucky enough to work with the amazing human beings that create and maintain these systems for two years. I was repeatedly floored by just how incredible the people were who I was so privileged to work with. 

![Farewell Microsoft](https://thepracticaldev.s3.amazonaws.com/i/4c835rwq2smjuxrk8sog.jpeg "Farewell Microsoft")

But the average company is not Microsoft. Which means they don't need to take the same precautions. As a second example, let's take "Alice's Flowers".

###[Read the rest on my NEW blog!](https://wehackpurple.com/mt4g)!
Contributors wanted for synth music creation project
Tags: hacktoberfest, entertainment
Published: 2019-10-02 04:22:36

---
title: Contributors wanted for synth music creation project
published: true
description: This is a project I built during my internship. I want to add new better sounds by using Web audio API's filters. You also can do a QA and post on its issues page.

tags: hacktoberfest, opensource, entertainment
---
This is a project I built during my internship. I want to add new better sounds by using Web audio API's filters. You also can do a QA and post on its issues page. Any contributions are heavily welcome.

[Github repo link](https://github.com/sbimochan/jamming-js)

Happy Hacktoberfest!

![Jamming JS](https://thepracticaldev.s3.amazonaws.com/i/ehj4lj024jz2up45d50v.jpg)
Se escribe accesibilidad, no discapacidad
Tags: talk, a11y
Published: 2020-02-29 15:38:41

---
title: Se escribe accesibilidad, no discapacidad
published: true
date: 2019-10-02 04:11:58 UTC
tags: talk, a11y, accessibility
canonical_url: https://koan.cl/post/se-escribe-accesibilidad-no-discapacidad/
---

Hace un tiempo tuve la posibilidad de escuchar la presentación “It’s spelled ‘Accessibility’, not ‘Disability’” de [Scott Davis](https://twitter.com/scottdavis99 "Twitter de Scott Davis") y creo que vale la pena presentarla acá. Muy importante el como habla sobre **diseño universal** y como _“la accesibilidad mejora la experiencia de todos, no sólo aquellos con una discapacidad”_.

{% youtube jTxX_Vkyw6Y %}

Lamentablemente está en inglés, espero poder traducir el contenido en algún momento, con la aprovación de Scott, por supuesto.

Pronto vamos a escribir sobre diseño universal y como aplicarlo sobre desarrollo de interfaces.
Understanding Javascript Array Series III - Array Properties
Published: 2019-10-01 22:51:08

In this article, we will be talking about 2 different array properties.

Let's start with the most common array property.

### **1. Array Length**
  The length property is used to set or return the length of an array. The length of an array is always 1 greater than the last index of that array. The length of the array automatically updates when we modify the array.

```javascript
  
  const arr = [1, 2, "nedy", undefined, null, true];
  // syntax for returning ther length of an array
  arr.length // 6

```
The length property also allows us to modify the size of an array by setting its length. This can be done initializing the length of the array to any numerical value.

```javascript
  
  const arr = [1, 2, "nedy", undefined, null, true]; // length = 6
  // Decreasing the size of the array.
  arr.length = 4; // length = 4
  console.log(arr.length, arr); // 4 [1, 2, "nedy", undefined]

  const arr1 = [1, 2]; // length =  2
  // Increasing the sie of the array
  arr1.length = 5; // length = 5
  console.log(arr1.length, arr1); // 5 [1, 2, undefined, undefined, undefined]

```

**N/B**: The length of the array is always one greater than the last index of the array.
```javascript
   
  const players = ['messi', 'ronaldo', 'nedy'];
  players[1000] = "Ashley y";
  console.log(players.length) // 1001
```

### **2. Array Prototype**
  This gives us the ability to add new properties and methods to our array object. All arrays then created will be given these properties and methods on default.

```javascript

// initializing an `initialz` property
Array.prototype.initialz = function() {
  for (let i = 0; i < this.length; i+=1) {
    this[i] = this[i].charAt(0).toUpperCase();
  }
};

let name ="nedy udombat"
name = name.split(" ")
// since name is an array we can call the initialz() on it
name.initialz();
console.log(name)

```

Here we created an array method that extracts the initials of a person's name and stores it in an array.
After declaring and initializing the `name` variable by doing this `let name ="nedy udombat"`, we call the `split()` method on it, to split it and return an array.
`Array.split()` is an array method that splits a String object into an array of strings by separating the string into substrings, using a specified separator string to determine where to make each split. You can read more about it [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split).

### **Conclusion**
  The array length property is used to set or return the length of an array while the array prototype property is used in adding new properties or methods to the array object.

Here is the link to the other articles on this Array series written by me:
* [What is an Array?](https://dev.to/nedyudombat/understanding-javascript-array-series-i-what-is-an-array-l1i)
* [Alternate ways of Creating an Array.](https://dev.to/nedyudombat/understanding-javascript-array-series-ii-alternate-ways-of-creating-an-array-26c8)

Got any question, addition or correction? Please leave a comment.

Thank you for reading. :thumbsup:
Jekyll Cheatsheet
Tags: cheatsheet, jekyll
Published: 2019-10-02 02:59:22

tl;dr - Started trying out jekyll after I found an excellent blog theme. fwiw I still prefer hugo, but it seems like Jekyll has better themes.

### Install Jekyll in Mac

`brew install ruby`

After cloning your jekyll website repo, run the following from within the repository to install all required packages
`bundle install`


### Running Jekyll

To run it in dev mode

`bundle exec jekyll serve`

To run as prod

`export JEKYLL_ENV=production`

### How to add support for Third parties:

https://learn.cloudcannon.com/jekyll-third-parties/

### Deploy Jekyll blog on netlify

https://www.netlify.com/blog/2015/10/28/a-step-by-step-guide-jekyll-3.0-on-netlify/

### Publish Jekyll to `dev.to`

https://kodaman2.github.io/blog/How-to-Setup-a-Jekyll-Blog/
How to test a component independently
Tags: react, javascript
Published: 2019-10-02 02:47:32

---
title: How to test a component independently
published: true
description: I have many components in my project and I wish I could run stand alone components on my browser for testing. Is it right on that?
tags: React, javascript
---

I am working with ReactJS and I have many components in my project. I wish I could run stand alone once component on my browser for testing. Is it right on that?
Translations can boost your learning process
Tags: hacktoberfest, opensource, learning, braziliandevs
Published: 2019-10-02 02:07:29

For one of my PRs that will take part in [Hacktoberfest 2019](https://hacktoberfest.digitalocean.com/) I've chosen the task of translating a book. My native (spoken) language is Brazilian Portuguese. My first goal was to ease Portuguese speaking beginner programmers learning process. But what I found was a totally different result!

Actually, translating [this Nu Shell book](https://book.nushell.sh/) is helping **me** to learn more! It is fantastic because my original goal is still being achieved while giving myself an unexpected reward. ([Haven't heard of Nu Shell yet?](https://www.jonathanturner.org/2019/08/introducing-nushell.html))

But how does this learning improvement happen?

* Sometimes, when in a rush looking for a quick answer, one just goes straight to a book chapter or documentation section, skipping many important parts. When you are translating you force yourself to read through the whole text, start to finish. 

* Before you can assume the job as finished you must revise it. Many times. So you end up repeating the above more than once. You do it twice or even more.

* When you have no specific purpose while reading maybe you make some diagonal reading, just a skimming to get a taste of what the subject is. When translating you must read the original text with much more attention, dive in to get much more detail. Bam! The more attention you pay to that subject, the more you learn.

And everything I said above is equally valid to transcription jobs too! If you find any podcasts, youtube channels etc that accept transcription contributions, go for it!

I have not submitted this PR yet but if you're curious and want to see my ongoing translation work, [it is in a forked Github repo](https://github.com/marcelocg/book/tree/pt-BR).

Happy hacking!
CSS :focus-within pseudo-class
Tags: css, frontend, beginners, showdev
Published: 2019-10-02 01:22:17

---
title: CSS :focus-within pseudo-class
published: true
description: A demonstration of the css :focus-within pseudo-class
tags: #css #frontend #beginners #showdev
---

Imagine that you have a login card, and you want that login card to change its appearance when any of its children has been focused. You want the card to change when the user focus on any input (for example), or show some generic message, etc. That situation could happen with a myriad of everyday components that we are always writing and writing.

So, you dont need JS to achieve that behavior. 
CSS can do that! You just need the `:focus-within` pseudo-class.

Here's an ugly demonstration ;P

{% codepen https://codepen.io/felipperegazio/pen/mdbNEqG %}

And here`s the MDN definition:

> The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

font: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

It has a regular support. But all the modern browsers still has fully implemented the :focus-within.

If you already knew it, thats cool! If not, thats cool anyway, because now you know. Thats all folks, just a quick and cool tip :)
How I Became a React Contributor Four Years Ago
Tags: hacktoberfest, opensource, career, react
Published: 2019-10-02 01:02:35

This is the official repo for the React...

{% github https://github.com/facebook/react %}

It's pretty popular...

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f389yj8e6igv16fii3zj.png)

There are **1,339** total contributors to this project. That's a lot of people. But it's also relatively few compared to its impact.

One of those contributors is me! 😱

I have a single merged pull request from four years ago...

{% github https://github.com/facebook/react/pull/5287 %}

There it is in all its glory. Back then that one repo also housed the React website, and I updated the static calendar with a few new upcoming events.

Here is my code contribution...

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f4riv00197ao9112f2qd.png)

Anyone can contribute to open source. Even though my contribution was minor, it helped a bit and I felt really proud of myself being listed as a contributor in this project.

Happy coding!
#inktechtober -- Day 2 -- COOKIES!!!!
Tags: inktechtober, beginners, sketchnote
Published: 2019-10-02 00:23:57

---
title: #inktechtober -- Day 2 -- COOKIES!!!!
published: true
description: 
tags: inktechtober, beginner, sketchnote
---

Day 2 is coming up soon and the theme for our 2nd day is Cookies! 

HTTP, Browser Cookies, expired cookies...all kinds of cookies!

Here is a [favorite page about cookies from MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies).

Does a browser cookie have the creamy middle of an orea or the buttery crisp of shortbread?

What kind of cookie will you draw? More importantly, what kind of cookies will you be eating while you draw the cookies?
Dates in 11ty used in templates
Tags: eleventy, 11ty, jamstack, javascript
Published: 2019-10-05 08:19:28

---
title: Dates in 11ty used in templates
published: true
date: 2019-10-02 00:00:00 UTC
tags: eleventy, 11ty, jamstack, javascript
canonical_url: 
---

[Yesterday](https://hiltonmeyer.com/articles/191001-adding-update-date-11ty) was looking for a way to add the updated date to my static site, generated by 11ty, at the bottom of each article. I wanted to show the creation date and the last updated. I started will the following in my layout but the date being returned was then out put as "Last updated Thu Sep 19 2019 03:00:00 GMT+0300 (Israel Daylight Time)":

_article.njk_

```
---
layout: layouts/base.njk
templateClass: tmpl-article
---
<p class="title">{{ title }}</p>

{{ content | safe }}

Last updated {{ updated }}
```

So I now needed a way to format the date instead of getting back such an unwieldy string and having something a bit more human readable. To the docs I went and found that there was something on using [dates](https://www.11ty.io/docs/dates/). I saw they were using a Javascript method for correcting the dates `.toUTCString()`. this got me wondering what other things I could use and if it was simply the Date object. So I added [`.toString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toString) and it worked. Well it worked in so much as I got back a full string with the date as above which is what [`.toString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toString) does according to the documentation on MDN. I noticed there was [`.toDateString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toDateString). BINGO!!!

_article.njk_

```
---
layout: layouts/base.njk
templateClass: tmpl-article
---
<p class="title">{{ title }}</p>

{{ content | safe }}

<footer>Create on {{ page.date.toDateString() }} - Last updated {{ updated.toDateString() }}</footer>
```

You may have noticed that I added the `page` to the date for creation date as this is working and how the 11ty documentation describes to use [Page Variable Content](https://www.11ty.io/docs/data/#page-variable-contents)
How to avoid pushing to branches that are not protected (that should be)
Published: 2019-10-01 23:34:34

[Git hooks](https://githooks.com) are used to run some arbitrary code before and after different git operations. The ones that begin with `pre-` are used before the operation, and can be used to bail out of the operation. `post-` hooks are run after an operation, but do not have built-in functionality revert the operation itself.

We're going to use `pre-commit` and `pre-push` hooks to make sure we never accidentally commit/push to an un-protected master branch. It is only going to affect our own local copies of the repositories. You will need git 2.9+ (June 2016). The script we will create will ask you if you want to commit/push to master, so you will still be able to if that's your intention.

Make a place to house your global hooks.

```
mkdir ~/.githooks
```

Create a file called `pre-commit` in this directory.
```
#!/bin/bash

protected_branch='master'
current_branch=$(git symbolic-ref HEAD | sed -e 's,.*/\(.*\),\1,')

if [ $protected_branch = $current_branch ]
then
    read -p "You're about to commit to $protected_branch, is this what you intended? [y|n] " -n 1 -r < /dev/tty
    echo
    if echo $REPLY | grep -E '^[Yy]$' > /dev/null
    then
        exit 0 # push will execute
    fi
    exit 1 # push will not execute
else
    exit 0 # push will execute
fi

```

We should also make a `pre-push` hook. To do this, copy the `pre-commit` file to a new file `pre-push`, and change to the prompt to say "push" instead of "commit". `pre-commit` is arguably more important and sort of renders `pre-push` useless. You can never be too careful though.


Set the files to be executable:
```
chmod a+x ~/.githooks/pre-commit
chmod a+x ~/.githooks/pre-push
```

Set your global hooks folder to be recognized by git:
```
git config --global core.hooksPath ~/.githooks
```

Now if you try to commit or push to master on any repo on your machine, the hook will ask you to make sure you want to do that.

If you want to apply this on a per project basis, then you will need to add the `pre-push` and `pre-commit` files to the project's `.git/hooks` folder instead of a global hooks folder.
Bienvenid@s 
Tags: spanish, welcome, blog
Published: 2019-10-01 23:23:01

Hola a to@s, os doy la bienvenida a este pequeño rincón donde iré compartiendo mis conocimientos a medida que los vaya adquiriendo. Espero que disfruteis y aprendais un montón. Un saludo! 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/go1qcolu250qdyct11f5.jpg)
Live Coding: Why am I so anxious?
Tags: blogging, gamedev, streaming
Published: 2019-10-01 23:11:40

When I initially came to Twitch as a streamer about a year ago I was playing other peoples games. A pastime I still enjoy, but as I played them and was the vessel behind the telling of their stories I realized something. I had always wanted to be a writer and I never realized that this was a way I could tell amazing stories.

I got into coding as a way to get into video game development. The thing with that is as a sole developer on a game that makes you responsible for everything. The art, the story and every damn piece of code that makes the thing run. So how exactly do I turn that whole process into content people will watch? I’ve watched bits and pieces of other peoples game development streams, and it works for them. They end up with anywhere from ten to fifty viewers. Why is then that the idea of coding in front of other people terrifies me?

It could be my lack of confidence in my skill. The fact that I spend more time googling how to code things then actually coding makes me afraid to put myself out there. I am always proud of the work that I do and what it looks like when its done, but it just doesn’t seem like performance worthy stuff to watch.

So I’ve decided to present my game development process to the world in a way that makes sense to me. We start off with the storytelling. We will write the game script, then move on to the graphic design and then move on to the coding, By the time we get to the coding portion we should know 100% where the game is going so the coding is just there to bring it all together. Hopefully having all that done will help get me through the coding without to much anxiety. If you would like to join me on that journey you can follow me on twitch here:

http://www.twitch.tv/nerdmom630
Azure App slots - (Making releases seamless) 
Tags: microsoftazure, appservices, appslots, cd
Published: 2019-10-01 22:06:25

---
title: Azure App slots - (Making releases seamless) 
published: true
description: Taking advantage of Microsoft Azure App Service using App Slots to manage product release changes without breaking a sweat.
tags: Microsoft Azure, App services, App slots, CD.
---

Hello! So I was going through a talk I gave late 2017 about Continous delivery using Azure App slots, presentation link => https://speakerdeck.com/walecloud/continuous-delivery-microsoft-azure-app-slots.

I will be highlighting the steps needed to create an application in Azure using the APP Service, deploying varying versions with App slots.

Disclaimer: Some things have probably changed since then so thread with caution;


#Step 1: Create the project source
![create your code repository](https://thepracticaldev.s3.amazonaws.com/i/o6atw7y5h7rugpkw0dyq.png)

#Step 2: Create a web app in Azure
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3xppfsrwaiu2msthw6e0.png)

#Step 3: Config Azure web App
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ywow1yfnaewl7um69too.png)

#Step 4: Choose source code repo for deployment
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fmkgw4w22f8oswz8qfjb.png)


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nkvxkwxkdvlqv6ku3sgj.png)


#Step 5: Create a feature branch in source code
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ugt5k7pdehlnkajhkiyi.png)

#Step 6: Add app slot
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/s3prxvhu10oqk2vthqk5.png)


#Step 7: deploy a new app feature
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nt4o8vgozlxji5gnpb4i.png)

#Step 8: Swap slots for new feature added
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/kvd5g974dh02vortpv9t.png)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7imo9itlufaodwaw0yxm.png)

Well, I hope it helps someone deploying with Azure.

Link to the actual work that inspired this => https://speakerdeck.com/walecloud/continuous-delivery-microsoft-azure-app-slots