teleren/devto huggingface dataset:
Js13kGames 2019 winners | Sass launched the new module system | Front End News #22
Tags: news, frontendnews
Published: 2019-10-15 17:47:15

Hello everyone and welcome to another round of Front-End News. I'm going to keep this format for the transition period until I settle down into a new routine. I hope you will enjoy the subjects I've selected for you in this edition.


***

## Js13kGames announces the winners for the 2019 edition

![Js13kGames winners](https://thepracticaldev.s3.amazonaws.com/i/1cj5gjnw0ftv9ten1kje.png)

I talked about the 2019 edition of Js13kGames back in August, right before the start of the competition. There were over 200 submissions and the experts doing the selection had a lot of work on their hands. But they managed to complete their task and we now have available the list of winners on the official website of the event.

![Github talks about top 10 winners](https://thepracticaldev.s3.amazonaws.com/i/1f9z7fc2n6cwa96hjfd6.png)

GitHub also published an article of their own, highlighting the top to winners. I gave some of them a try myself and I am really impressed with the results.

- https://js13kgames.com/#winners
- https://github.blog/2019-10-08-js13k-2019-highlights/

***

## Introducing Sass Modules

Sass is now the most common CSS pre-processor and countless front-end developers are using it to generate their stylesheets. Recently it became an even more powerful tool with the introduction of a module system.

![Miriam Suzanne talks about Sass modules](https://thepracticaldev.s3.amazonaws.com/i/gv78lw24lplasblr1bwj.png)

Miriam Suzanne is taking us all through a brief introduction of this major update. There are a lot of things to assimilate so you might as well get your favorite drink while reading this article.

- https://css-tricks.com/introducing-sass-modules/

***

## Software updates and releases

This week there is a real flood of updates. More than in any other edition. In each case, you can find the full details in the release notes linked down below.

### Visual Studio Code September release (v 1.39)

- https://code.visualstudio.com/updates/v1_39

### npm v6.12.0

- https://blog.npmjs.org/post/188215405965/release-6120

### VuePress v1.2.0

- https://github.com/vuejs/vuepress/releases/tag/v1.2.0

### Quasar v1.2.0

- https://forum.quasar-framework.org/topic/4503/quasar-v1-2-0-released

### Bazel 1.0

- https://blog.bazel.build/2019/10/10/bazel-1.0.html

### React Three Fiber v3.x

- https://github.com/react-spring/react-three-fiber

### Next.js v9.1

- https://nextjs.org/blog/next-9-1

### React Hooks v1.4.0

- https://github.com/kripod/react-hooks/releases/tag/v1.4.0


***

That’s all there is in this edition. Follow Front End Nexus on Twitter at https://twitter.com/frontendnexus to be notified as soon as a new update happens. I also want to encourage you to subscribe to the YouTube channel at https://www.youtube.com/channel/UCgACtqiDmnSaskDIBsK54ww. I can unlock some more options once the channel hits 100 subscribers, so your support is highly appreciated.

Have a great and productive week and I will see you next time!
The Great Debate: Spotify or Apple Music?
Tags: discuss, watercooler
Published: 2019-10-15 17:42:16

---
title: The Great Debate: Spotify or Apple Music?
published: true
description: Spotify is the best lets discuss
tags: discuss , watercooler
cover_image: https://i.ytimg.com/vi/1PS0vlIWxLY/maxresdefault.jpg
---


I've gotten into many fights with friends, colleagues, and strangers about this debate. 

### Which is better Apple Music or Spotify?

Personally I think Spotify is a clear winner, however, I am bias cause the last time I used Apple Music (AM) was when songs were .99 cents. Even then I usually illegally downloaded songs from YouTube.MP3.

### My argument for Spotify:

- The end of the year wrap up: How many times you listened to your favorite song, your favorite genre of the year, etc.
- Try Spotify for free as long as you want (but once you try that 3 months free, you're hooked)
- Spotify for students ($4.99/month) includes HULU (summer only) and Showtime
- UI is pretty equal but if you're a fan of the "dark mode" trend then Spotify is for you
- Spotify's billboard ads

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

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

### Other articles that agree with me: 
- [Digital Trends](https://www.digitaltrends.com/music/apple-music-vs-spotify/)
- [Consumer Reports](https://www.consumerreports.org/music/spotify-vs-apple-streaming-music-face-off/)
- [CNet](https://www.cnet.com/news/apple-music-vs-spotify-comparison-best-music-streaming-service/)

Prove me wrong, or join the Spotify high 🥇
follow_redirect! in Rails request specs
Tags: rails, testing, productivity
Published: 2019-10-15 16:58:26

In integration tests we test the complete scenario of a user interaction. Typically it means, we hit different URLs of the application. In such situations, it may happen that one controller action redirect to another action in same or different controller and we need to visit that page to test the further part of the scenario.

Typical example will be user signing up on our website. After signing up the user must be shown welcome screen. In an integration test, we submit the sign up form and then we need to test whether user sees welcome text or not.

```ruby
  post "/join", params: user_params
  expect(response).to redirect_to("/welcome")
  # Test that welcome page displays certain content
```

Rails provides a handy method **follow_redirect!** for this purpose. As the name suggests, it follows a redirect response.

```ruby
  post "/join", params: user_params
  expect(response).to redirect_to("/welcome")
  
  follow_redirect!
  
  # get "/welcome" is automatically hit with current user as the new 
  # user
```

In RSpec, we can use this method in the request specs. If you are using minitest with Rails then you can use this method in integration tests.
This method is very handy and helps in testing a complex scenario involving multiple steps a breeze.

Happy testing!
How does your Team Maintain Coding Standards?
Tags: discuss, help, beginners
Published: 2019-10-15 16:55:37

Currently at my company we have no explicit set of coding standards, and we are looking to implement and maintain some. How does this work in your team and how do you encourage engineers to adhere to the standards?

We use the Microsoft/.Net stack, but I welcome answers from engineers of all stacks.

Have a great week! :grin:
Memoization of Immutable.js using hash code
Tags: javascript, immutablejs
Published: 2019-10-15 16:11:49

---
title: Memoization of Immutable.js using hash code
published: true
description: Memoization of selectors from Immutable.js using hash code
tags: Javascript, Immutable.js
---

Immutable.js returns new reference after each operation on its collection. When you have Redux state that is immutable this might be a problem and it might cause unwanted re-renders. All Immutable.js collections have a function called **hashCode()** that returns same string as long as the collection contain the same elements in same order. You can use that to create a memoization function as follows.

```javascript
const memoizeByHashCode = () => {
  let oldValue = {};
  return (value: Object) => {
    if (Object.keys(oldValue).length === 0) {
      oldValue = value;
      return value;
    } else if (value.hashCode() === oldValue.hashCode()) {
      return oldValue;
    } else {
      oldValue = value;
      return value;
    }
  };
};
```
Now you can use this function to return same reference if value did not change

```javascript
const remember = memoizeByHashCode();
const collection1 = remember(add(1));
const collection2 = remember(add(1));
```
Now collection1 and collection2 will point to the same reference.


This post is actually cross published from https://rafi993.me/posts/2019-15-10--Memoization-of-Immutable.js-using-hash-code/
Integrating ID4me with Auth0
Tags: domainnames, identitymanagement
Published: 2019-10-15 16:06:36

---
title: Integrating ID4me with Auth0
published: true
description: Learn how to add an ID4me-compliant identity provider option to an application using Auth0
tags: #opensource #domainnames #identitymanagement
canonical_url: https://auth0.com/blog/integrating-id4me-with-auth0/
---
The purpose of this sample project is to demonstrate how you can use Auth0 to add an ID4me-compliant identity provider as an option to your end-users to sign up and log in to your web application.

About ID4me
ID4me is an open, global, federated standard to manage online identities. It allows the user to establish their identity using their own domain name and then use that identity to log in and sign up at websites that support ID4me.

ID4me provides full data sharing control. ID4me users are not only free to choose their identity provider, they can change their provider at any time. This is also what differentiates ID4me from other commonly known social identity providers in the field.

The user can also use single-sign-on across different services with just one ID, which means they don't have to remember multiple passwords for different websites.

The initiative’s mission is to provide users with open and internationally available identity services that adhere to security and data protection standards, that foster user choice, and that avoid identity lock-ins.

ID4me is an open group of internet service providers, software developers, and other entities that care about the future of the internet and want to defend its distributed and federated architecture when it comes to digital identities.
[Continue reading 📖](https://auth0.com/blog/integrating-id4me-with-auth0/?utm_source=dev&utm_medium=sc&utm_campaign=integrating_id4me)

![Integrating ID4me with Auth0](https://cdn.auth0.com/blog/integrating-id4me-with-auth0/id4me-auth0-logos.png)
Pattern matching F# vs C#
Tags: fsharp, csharp
Published: 2019-10-15 16:06:22

### F# ###

```fsharp
type Address =
    { State: String }

let computeSalesTax address salePrice =
    match address with
    | { State = "WA" } -> salePrice * 0.06m
    | { State = "MN" } -> salePrice * 0.75m
    | { State = "MI" } -> salePrice * 0.05m
    | _ -> 0m
```

### C# ###


```csharp
class Address {
    public string State { set; get; }
}


static decimal ComputeSalesTax(Address address, decimal salePrice) =>
    address switch
    {
        { State: "WA" } => salePrice * 0.06M,
        { State: "MN" } => salePrice * 0.75M,
        { State: "MI" } => salePrice * 0.05M,
        _ => 0M
    }
```
Free, Open Source ASP.NET Core User Community & Support Software
Tags: dotnet, csharp, contributorswanted
Published: 2019-10-15 16:02:01


Hi All, I hope you don't mind me sharing a new open source project I've been working on for the last 2 years. The 1.0 release was only last month so things are still fresh but I'm hoping to possibly attract some early contributors or users from this lovely community. 

The projects name is Plato. Plato is a 100% free, open source user community & support platform built upon ASP.NET Core. If discourse and Zendesk had a baby I'd like to think the end result would be somewhat close to Plato 😊 

![Plato.Discuss](https://thepracticaldev.s3.amazonaws.com/i/oi3c5ewdvtn45g9shetl.png)

With Plato you can...

- Collaborate with your users through fully featured public or private discussions
- Easily publish beautiful product or technical documentation to help your users in Markdown
- Provide an online knowledge base of helpful support resources composed in Markdown
- Support products through public or private Q&A features & voting
- Shape products through public or private product ideation & voting
- Improve products through public or private issue tracking & voting

Plato is written in C# using .NET Core 2.2 (soon to be 3.0), MVC6 & Bootstrap 4. 

As well as offering an open source ASP.NET Core app for those wanting to add community or support features to there existing ASP.NET Core apps I'm hoping Plato will also serve as an example for those wanting to learn how a larger .NET Core project is structured. Plato currently has over 220 projects and 160 modules so should hopefully be considered a larger ASP.NET Core application. 

As you would expect Plato leverages many of the conventions and architectural patterns suggested by .NET Core. We try not to reinvent the wheel. 

I would love to get others involved early to help improve Plato. No contribution is to small. If you're interested in helping or simply learning more, please visit the official Plato GitHub page @ https://github.com/InstantASP/plato

Thanks for reading.
Kubernetes StatefulSets 101 - State of the Pods

Tags: kubernetes, devops, docker
Published: 2019-10-15 15:51:05

What is the deference The difference between a Statefulset and a Deployment?

A Statefulset is a Kubernetes controller that is used to manage and maintain one or more Pods. However, so do other controllers like ReplicaSets and, the more robust, Deployments. So what does Kubernetes use StatefulSets for? To answer this question, we need to discuss stateless versus stateful applications.

A stateless application is one that does not care which network it is using, and it does not need permanent storage. Examples of stateless apps may include web servers (Apache, Nginx, or Tomcat).

On the other hand, we have stateful apps. Let’s say you have a Solr database cluster that is managed by several Zookeeper instances. For such an application to function correctly, each Solr instance must be aware of the Zookeeper instances that are controlling it. Similarly, the Zookeeper instances themselves establish connections between each other to elect a master node. Due to such a design, Solr clusters are an example of stateful applications. If you deploy Zookeeper on Kubernetes, you’ll need to ensure that pods can reach each other through a unique identity that does not change (hostnames, IPs...etc.). Other examples of stateful applications include MySQL clusters, Redis, Kafka, MongoDB, and others.

Given this difference, Deployment is more suited to work with stateless applications. As far as a Deployment is concerned, Pods are interchangeable. While a StatefulSet keeps a unique identity for each Pod it manages. It uses the same identity whenever it needs to reschedule those Pods.
Toggle Password Visibility
Tags: codepen, vanillajsacademy, css, javascript
Published: 2019-10-15 15:49:36

---
title: Toggle Password Visibility
published: true
tags: codepen, VanillaJSAcademy, css, javascript
---

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

{% codepen https://codepen.io/giandomenico/pen/WNNwErO %}
Avoid these mistakes and you will be sucessfull in your web development career
Tags: html, css, career, webdev
Published: 2019-10-15 15:15:09

In the past I was learning web designing but I was not not practice enough.I was thinking that I don,t need practice.6 month ago I got a project but I was not comfort with debugging cause I don,t done practice but I learning again started [w3schools](www.w3schools.com) and I started revicing HTML and CSS.After that I was getting better in coding and debugging. 

___
###Some of the mistakes that most begmears done
####Learning CSS framework with out knowing the basic
Some people saves their time to learn CSS framework and start using framework but when a problem cause to then the stuck.They were exactly washy their time with framework,without learning the most basic things.As I say first learn basics and their choose any framework

___
#### Using facebook for online presence.
This is my mistake,that wasted my most time,I started to build online presence using (WTD),and all of people were like there "How to hack wifi"and "Make websites for free".I know it's good for marketing but not good for making your online presence.I was understanding Twitter but I realize that All of the web industry in an Twitter. So I started using Twitter: [www.twitter.com/the_ibrahim_ ](www.twitter.com/the_ibrahim_ ).
Guía rápida de Yarn
Tags: yarn, npm
Published: 2019-10-15 15:06:38

**Yarn** es un gestor de paquetes rápido, confiable y seguro, es una excelente alternativa a npm ya que **yarn** es mucho mas rápido porque almacena en cache los paquetes descargados y realiza operaciones en paralelo para maximizar la utilización de recursos. En este post te voy a mostrar las cosas mas importantes que debes de saber, como descargarlo y como utilizarlo.

## Instalación

Te mostrare dos maneras de instalar **Yarn**, estas son :

> Deberás de tener Instalado [Node.js](https://nodejs.org/es/) para poder utilizarlo

1. Descargando el Instalar de Window

- **Win**: [Descargar Instalador](https://yarnpkg.com/latest.msi)

2. Esta es la manera mas rápida y fácil de instalar **Yarn**, ejecuta en tu consola o terminal lo siguiente :

` npm install --global yarn`

Ahora comprueba que **Yarn** se instalo correctamente ejecutando el siguiente comando:

` yarn --version `

Si todo salio bien deberá de aparecerte la versión mas reciente de **Yarn**

## Como Utilizarlo

Después de instalar **Yarn** puedes empezar a utilizarlo ejecutando un simple comando:

` yarn init `

> Puedes utilizar **yarn** incluso si ya estabas trabajando con **npm**, lo único que debes de hacer es borrar el archivo ***package-lock.json*** para que **yarn** trabaje sin problemas

  

- Instalar todas las dependencias de un proyecto:

` yarn ` o `yarn install `

- Instalar dependencias:
	 - `yarn add [package] - ejemplo: yarn add vue`
	 -  `yarn add [package]@[version] - ejemplo: yarn add vue@[2.6.8]`
	 - `yarn add [package] --dev - ejemplo: yarn add vue --dev`

- Actualizar dependías:

	` yarn upgrade [package] - ejemplo: yarn upgrade vue`

- Eliminar dependías:

	` yarn remove[package] - ejemplo: yarn remove vue`

  

Y listo eso es todo por este post, ya aprendiste como poder utilizar **Yarn** en tus proyectos de una manera rápida y fácil. Cualquier duda o sugerencia la puedes dejar en los comentarios.

Actualmente estoy trabajando en la construcción de un Blog personal, lo estoy desarrollando con Gridsome un generador de sitios estáticos y obviamente con Vue. Me gustaría recibir unas opiniones de como luce mi Blog y que mas podría añadirle, si me quieres ayudar me puedes dejar un comentario, seria de gran ayuda. Este es mi Blog  [CodePici](https://codepici-blog.site/)
The "this" and "arguments" parameters in Javascript
Tags: javascript
Published: 2019-10-15 14:58:32

---
title: The "this" and "arguments" parameters in Javascript
published: true
description: A look at two parameters implicitly passed on function invocation
tags: javascript
---

## A look at two parameters implicitly passed on function invocation

When a function is invoked, there are two parameters that are implicitly passed to the function. By implicitly I mean that you don't specify them in the list of parameters, but they are still passed to the function automatically and are accessible from inside the function.

These two parameters are:
- the this parameter
- the arguments parameter

The `this` parameter represents the object on which our function is invoked, also called the *function context*.

The `arguments` parameter represents all the arguments that are passed into the function when it's invoked.

The way a function is invoked has repercussions on how the this and the arguments parameters are set.

Look at this function that prints out the argument it's passed explicitly, but also the this  and arguments parameter that are passed implicitly:

```
function myHouse(address) {
  console.log("Address:\n", address);
  console.log("this parameter:\n", this);
  console.log("arguments parameter:\n", arguments);
}

myHouse('123 Main st.');
```

The result of invoking the function is:

```
Address:
 123 Main st.

this parameter:
 Object [global] {
  global: [Circular],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] { [Symbol(util.promisify.custom)]: [Function] },
  queueMicrotask: [Function: queueMicrotask],
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(util.promisify.custom)]: [Function]
  }
}

arguments parameter:
 [Arguments] { '0': '123 Main st.' }

```

As you can see, the `this` parameter represents the global object which is the context in which the function was invoked.

The `arguments` parameter is an object with keys and values that represent the explicit arguments that were passed to the function.

Tomorrow we are going to look more deeply at the arguments parameter.
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-10-15 14:52:37

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

Hi everyone!

Avery here, taking over for Peter this week. Enjoy the weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

We all make mistakes and in the **[What is your debugging approach?](https://dev.to/ben/what-is-your-debugging-approach-2mde/comments)** thread @mohanarpit forgets to remove `printf` but owns it:
{% devcomment g9oh %}

@cjbrooks12 brings out the math skills to figure out DEV's production database in **[How large is the dev.to production database 🤔](https://dev.to/kudapara/how-large-is-the-dev-to-production-database-2pal/comments)**:
{% devcomment gaa1 %}

Pulling up with graphs and breaking down blockchain @jmfayard tells us to work smarter not harder in **[Is Blockchain really changing the world at all?](https://dev.to/lbeul/is-blockchain-really-changing-the-world-at-all-2g9n)**:
{% devcomment gdeg %}

@avalander uses the iconic line from the Princess Bride to format an introduction in **[What's a better way to start a conference talk than "Uh... okay, so I guess it's time to get started?"](https://dev.to/seanmcp/what-s-a-better-way-to-start-a-conference-talk-than-uh-okay-so-i-guess-it-s-time-to-get-started-1044)**:
{% devcomment ge30 %}

Finally, @worsnupd reminds us that objects as lookup tables come with a +1 in **[The Art of Refactoring: 5 tips to Write Better Code](https://dev.to/nyagarcia/the-art-of-refactoring-5-tips-to-write-better-code-12if)**:
{% devcomment gco5 %}

See you next week for more great comments ✌
Full-scale Fullstack dilemma
Tags: help, career
Published: 2019-10-15 14:43:01

This might be the imposter talking but I feel like a fullstack developer without a backend, I have invested many years into JavaScript and node and perhaps less time in "traditional" backends. I enjoy writing c++ and rust but often with a web development focus. 

I notice that most job roles in fullstack are either Java or C#, my question is this, how can I be interested in either or, I can do alot in node. What would I enjoy more Java or C# or are there roles in Rust?

I just don't know where to go with my career from here.