teleren/devto huggingface dataset:
I polled 350+ developers on what Frontend framework they 💗
Tags: javascript, react, vue, angular
Published: 2020-08-10 16:56:36

Hey Dev Community! 👋

A while back, I created a poll on IndieHackers where I asked developers [What front-end framework they 💗](https://www.indiehackers.com/post/what-front-end-framework-do-you-8e84db958a).

And it sure turned out great 👏

Over night there was 100s of votes coming in and now that things have settled down, I've gotten **over 300** 🤩

At the time of writing this, the results are:

![Results of poll](https://i.ibb.co/hRCXRSd/Screenshot-226.png)

Shall we discuss more about these results?

## Recap

### 🥇 React

So... let's state the obvious. **React won the poll by a mile** 🤷‍♂️

Below are what some users said about React ⬇

[@afkmango](https://indiehackers.com/afkmango):

> I recently picked up React and it has been a delight. Have you ever tried a framework/language and found it just "clicked" with you? That's been my experience with React.

[@Nikoisonfire](https://indiehackers.com/nikoisonfire):

> I personally like React for its simplicity, component system and JSX of course. I remember from the old PHP days where you could write PHP code within HTML and it's kinda taking me back

Great stuff overall. Very deserving of the top vote. 👏

### 🥈 VueJS

VueJS is *super easy* to learn and setup. All you need to develop with it is a CDN and an HTML file. I've tried Vue before and it was so simple to learn.

A comment with **over 18 upvotes** by [@reader](https://indiehackers.com/reader) says:

> Vue, easy to start with and even easier to maintain your code base.

With that amount of upvotes, it's obviously no lie that Vue is quick to learn and use in development.

### 🥉 Many others...

The vote that took third place was "other". With 11% percent of the votes, that brings the total for "other" to **36 votes**. I honestly was expecting this. There are many other great frameworks/libraries to use for developing apps and websites. I just couldn't cram them all into one poll 😅.

Some of the top ones were:

- Svelte
- Stimulus JS
- Elm
- NextJS
- And yes... some said Vanilla JS so I guess we'll make that count as "other" 😂

## What are your thoughts?

Now that you've read this and seen the results for yourself, I want to know your favorite Frontend framework. (So does the rest of us 😉)

Share it in the comments below! 👇

---

*Hope you enjoyed reading this! My name is Brayden and I'm the founder of [buildfaster.co](https://buildfaster.co).*

*This is an extract from [The BuildFaster Update](https://buildfaster.substack.com) which is where I talk about all sorts of cool designer/dev tips and updates coming to BuildFaster.co!*

*[Read the full post](https://buildfaster.substack.com/p/i-polled-350-devs-on-their-favorite)* 👈

*Does that sound cool? [Subscribe](https://buildfaster.substack.com/welcome) to get content in your inbox every Friday!*
Temporal Dead Zone
Tags: javascript, webdev, beginners
Published: 2020-08-10 16:51:10

---
title: Temporal Dead Zone
published: true
description: 
tags: javascript, webdev, beginners
---

I got a question on the last job interview what is the Temporal Dead Zone. I have not heard about this concept before and as you can guess I did not know the answer. This gave me an idea to write this post about the concept. This post will be short and sweet. Let's get to the point.

##What is the Temporal Dead Zone

When you are working with `var` keyword it will be hoisted and initialized with the `undefined` value. `let` and `const` are also hoisted but they do not get an initial value. Let's see an example:

```js
console.log(varTest); //undefined
var varTest;
console.log(letTest); //ReferenceError: letTest is not defined
let letTest
```
Maybe this was not the best example but it serves a purpose.
 
##Conclusion

That is the Temporal Dead Zone. Nothing spectacular but now if you hear that term somewhere you will know what is it about.

If you have some thoughts to share or I missed something feel free to comment.
McCulloch Pitts Neuron
Published: 2020-08-10 16:47:31

![https://miro.medium.com/max/1218/1*0P5w2KVQWAYGTkyfvpyHig.png](https://miro.medium.com/max/1218/1*0P5w2KVQWAYGTkyfvpyHig.png)

An artificial neuron consists of multiple inputs x_1 , x_2 and x_3. Each of these inputs have their weights w_1 , w_2 and w_3 respectively. The neuron takes multiple inputs and weighted aggregates and applies a function to give an output.

![https://miro.medium.com/max/1720/1*v7iYr-TDXx5bzX4cI3UAAg.png](https://miro.medium.com/max/1720/1*v7iYr-TDXx5bzX4cI3UAAg.png)

![https://miro.medium.com/max/1726/1*RAagXntdQ7OhDHlcdUURug.png](https://miro.medium.com/max/1726/1*RAagXntdQ7OhDHlcdUURug.png)

The early model of an artificial neuron was proposed by Warren McCulloch and Walter Pitts.

![https://miro.medium.com/max/1743/1*6fWgrqdJRqS68SdrcUc-_g.png](https://miro.medium.com/max/1743/1*6fWgrqdJRqS68SdrcUc-_g.png)

In a simplified computational model of a neuron the inputs (x_i) are in boolean and the aggregates of which represent the function g(x). The function g(x) is passed into function f which gives the output 1 or 0 based on the threshold/parameter b.

![https://miro.medium.com/max/1753/1*Q1LFG0syEYjikkhtHNc7Yg.png](https://miro.medium.com/max/1753/1*Q1LFG0syEYjikkhtHNc7Yg.png)

Let us assume that a model predicts whether a person will like a smartphone or not. The wrong predictions made is measured by the loss function.

![https://miro.medium.com/max/1749/1*-kIAxedhx5BARw33NNv35g.png](https://miro.medium.com/max/1749/1*-kIAxedhx5BARw33NNv35g.png)

In a primitive algorithm like brute force search the threshold is assumed and predictions are made for different thresholds and the model is selected based on the lowest value of loss function.

In the graph we can see that threshold was increased from 1 to 10 and the lowest loss was at 5 where loss = 0 i.e correct predictions were made.

![https://miro.medium.com/max/1748/1*YEOd-Rml8Q4QIQHCMSwlrw.png](https://miro.medium.com/max/1748/1*YEOd-Rml8Q4QIQHCMSwlrw.png)

We can find the accuracy of the neuron with an assumed threshold of 5 by applying the model on the test data and finding the fraction of number of correct predictions to the total number of predictions in the test data.

![https://miro.medium.com/max/1750/1*wgOq5OTGLHFRc628vAt9vw.png](https://miro.medium.com/max/1750/1*wgOq5OTGLHFRc628vAt9vw.png)

The geometric interpretation of MP neuron is that it separates the outcome into two different regions. The region above the line gives a positive result and region below the line gives negative result. Sometimes the negative points lie above the line which makes the line inseparable which is a limitation. So zero loss is not possible.

![https://miro.medium.com/max/1726/1*1X7euyxxCR47ILgKj93z8Q.png](https://miro.medium.com/max/1726/1*1X7euyxxCR47ILgKj93z8Q.png)

1. The data is in boolean.
2. Only classification tasks can be performed
3. The model is linear and separates the outcome into two different regions.
4. The loss is never zero.
5. The parameter b can range between 0 to n and find loss near to or equal to 0.
6. The accuracy is the fraction of number of correct prediction to total predictions.
Share your Portfolio here 📣
Tags: discuss, portfolio, community
Published: 2020-08-10 16:38:30

Hello there ! 👋

I would like to know more about this community ! 🤗

![Porfolio Meme](https://dev-to-uploads.s3.amazonaws.com/i/38qkn3ty211jt6tlgklr.png)
<figcaption>Created with meme-studio.io</figcaption>

I have __1 question__ for you : 

## What is your portfolio URL ? And how is your portfolio site built (`React.js`? `Vanilla`? `ROR`? ...)

----

> This array below will be updated every hours !

| Name | Tech | URL | 
|--------|--------|--------|--------|
| [@viclafouch](https://dev.to/viclafouch) | Next.js on Vercel | https://www.victor-de-la-fouchardiere.fr
| [@gradam](https://dev.to/gradam) | Gatsby on GH pages | https://semik.dev
| [@michaelgee22](https://dev.to/michaelgee22) | Next.js on Vercel | https://michaelgee.com
| [@giselamd](https://dev.to/giselamd) | Gatsby with Netlify CMS | http://giselamirandadifini.com
| [@ehsan](https://dev.to/ehsan) | Static Vanilla JS on GH pages | https://www.ehsanazizi.me
| [@aliahsan07](https://dev.to/aliahsan07) | Gatsby on Netlify | https://aliahsan.tech
| [@imshravan](https://dev.to/imshravan) | Static Vanilla JS | http://www.ohmyscript.com
| [@daviddalbusco](https://dev.to/daviddalbusco) | Gatsby, GitHub Actions and Firebase hosting | https://daviddalbusco.com
| [@ixartz](https://dev.to/ixartz) | Eleventy.js on Vercel | https://creativedesignsguru.com
| [@hougesen](https://dev.to/hougesen) | Static Vanilla JS | https://mhouge.dk
| [@ryansmith](https://dev.to/ryansmith) | Gatsby | https://ryansmith.tech
| [@djaidri_oussama](https://dev.to/djaidri_oussama) | Gridsome, Tailwindcss on Netlify | https://xenodochial-yonath-b7c6a8.netlify.app
| [@eudds](https://dev.to/eudds) | Vanilla JS | https://ericudlis.com
| [@pedropcruz](https://dev.to/pedropcruz) | Nuxt + bulma on Netlify | http://www.pedropcruz.pt
| [@jeffjadulco](https://dev.to/jeffjadulco) | Gatsby + Tailwind CSS on Vercel | https://jeffjadulco.com
| [@laasrinadiaa](https://dev.to/laasrinadiaa) | Gatsby on Netlify | https://nadialaasri.me
| [@corentinbettiol](https://dev.to/corentinbettiol) | PHP, MariaDB and Vanilla JS | https://l3m.in
| [@sanchezdav](https://dev.to/sanchezdav) | Ruby on Rails | https://codeando.dev
| [@juandamartn](https://dev.to/juandamartn) | Vanilla JS | https://juandamartinez.com
| [@adamgreenough](https://dev.to/adamgreenough) | Wordpress | https://adamgreenough.me
| [@elvessousa](https://dev.to/elvessousa) | Next.js with Typescript on Vercel | https://elvessousa.com.br
| [@jetleebruce](https://dev.to/jetleebruce) | Gatsbyjs, Tailwind on Netlify | https://modinsv.netlify.app
| [@chuksokwuenu](https://dev.to/chuksokwuenu) | PHP, Javascript and MySql | http://chuksokwuenu.com
|--------|--------|--------|--------|
| share yours!! | 

----

READY ? Let's go ! 📣
Github authentication facts I forget every two months
Tags: git, github
Published: 2020-08-10 16:36:47

---
title: Github authentication facts I forget every two months
published: true
description: SSH, HTTPS, 2FA, Tokens...
tags: git, github
//cover_image: https://direct_url_to_image.jpg
---

- Git recommends SSH over HTTPS!
    - You make the decision for SSH/HTTPS, when you
        - clone a remote repository, or
        - assign a remote to a local repository
- When you do HTTPS:
    - You can use the credential.helper in OSX to cache your password
    - PITFALL POTENTIAL: If you use 2FA, then your password is *not* your password, but your **Personal Access Token**, which you can create here https://github.com/settings/tokens
- When you do SSH:
    - You need to have a key available. Otherwise you get "Not authenticated (public key error)" or something along these lines...
    - Test if you have a key by typing in the console: `ssh -vT git@github.com`
    - If you dont have a key, then go create one: https://github.com/settings/keys
Holiday
Published: 2020-08-10 16:30:12

<sub><span>Photo by <a href="https://unsplash.com/@seantookthese?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Sean O.</a> on <a href="https://unsplash.com/s/photos/beach?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span></sub>

No content this week, enjoy your holidays (if you are lucky to have some) !
Build a Blog using Nuxt.js Content Module
Tags: nuxt, vue
Published: 2020-08-10 16:23:33

{% youtube zDCacgvw0A0 %}

[Nuxt.js](https://nuxtjs.org) is one of the technologies I'm really interested in and I made this video showing you how to use the Nuxt Content. [Nuxt.js Content](https://content.nuxtjs.org) is one of the newest additions to Nuxtjs. In this tutorial, we'll create a blog using Nuxt.js content as a Headless CMS. 

https://content.nuxtjs.org/

GitHub Repo: https://github.com/lauragift21/nuxt-content-video

Timestamps ✨ 
[0:00](https://www.youtube.com/watch?v=zDCacgvw0A0&t=0s) -  Intro 
[0:55](https://www.youtube.com/watch?v=zDCacgvw0A0&t=55s) -  What is Nuxt.js?
[1:47](https://www.youtube.com/watch?v=zDCacgvw0A0&t=107s) -  Setup a Nuxt app
[2:13](https://www.youtube.com/watch?v=zDCacgvw0A0&t=133s) -  What is Nuxt Content?
[4:45](https://www.youtube.com/watch?v=zDCacgvw0A0&t=285s) -  Install Nuxt Content
[5:18](https://www.youtube.com/watch?v=zDCacgvw0A0&t=318s) -  Creating Content
[7:31](https://www.youtube.com/watch?v=zDCacgvw0A0&t=451s) -  Fetching and Displaying Content
[15:42](https://www.youtube.com/watch?v=zDCacgvw0A0&t=942s) - Live Editing in Dev Mode
[16:16](https://www.youtube.com/watch?v=zDCacgvw0A0&t=976s) - API Endpoints Preview
[16:54](https://www.youtube.com/watch?v=zDCacgvw0A0&t=1014s) - Static Deployment
[18:04](https://www.youtube.com/watch?v=zDCacgvw0A0&t=1084s) -  Outro and Subscribe :)

Hope you enjoy the video :)
Hacking the consistency algorithm
Tags: productivity
Published: 2020-08-10 16:19:17

This article is not about motivation. Motivation is great but it's highly unpredictable and if you rely solely on it, your life would be a roller-coaster.

Instead, we'll be talking about consistency; how you can stick to your short term and long term goals. In the next few paragraphs, I'll try to summarize what works from my personal experience.

## The two-day rule
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/al6juscbxoe3k6499czr.jpg)

No matter how consistent you are, or how perfectly you plan your days, you will drop the ball every once in a while and that's okay. It's all about finding your rhythm once again, and that's when this rule comes in.

The two-day rule is very straightforward: 
> **Never, ever, under any circumstance, skip 2 days of a habit in a row.**

This simple rule has helped me get back to track so many times. Give it a try next time you're feeling like giving up.

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

Simply planning your todos for a day (or even planning your whole day using your favorite calendar app) can increase your productivity.
Personally, I like planning my whole day in [Google Calendar](http://calendar.google.com/). This allows me to have a record of everything I do and where I can improve. This and a good todos app make a great pair to conquer your days.
My favorite todos apps:
- [Todoist:](https://todoist.com/) Simple and effective.
- [Habitica:](https://habitica.com/) Gamifies your todos and habits.

## Physical activity:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9u1zibq69yzwgnbow0xi.png)

According to research, exercise is shown to reduce stress, combat fatigue, improve performance. A natural stress reducer, exercise combats chronic stress often suffered by many. With exercise your sleep quality also improves, thus, you wake rested and ready to tackle another day.

Lifting weights, doing cardio or yoga, whatever your style is, physical activity will clear your mind and give you that sharpness we all crave.

## Mental health
![Taking breaks](https://dev-to-uploads.s3.amazonaws.com/i/a1h40dm14u3cxbr87qum.png)

Burnout is a very real threat if you disregard your mental health, I think it's quite obvious how important it is to take care of it, but how do we do it?
- Taking breaks: If you want to go for the long run, make sure to pace yourself and always take a break to catch your breath.
- Sleep quality: Sleeping quality and work quality are **very** tightly coupled. 
- Entertainment: "Time you enjoy wasting is not wasted time." is a very important quote that illustrates how good entertainment can increase your productivity.

## Conclusion
Everything we've talked about so far is great in theory, but you won't know for sure what works for you unless you try! So I'd love to hear your feedback and please let me know if I missed anything that you think is a must-do.

> What would you like to read about next? You can suggest any subject (technical or not) to me on [twitter](https://twitter.com/Mouad__KH)!
Estado de tus aplicaciones
Tags: monitoring, webdev, devops
Published: 2020-08-10 15:47:25

Una página de estado se usa como una herramienta de diagnóstico, para informar a tus clientes sobre la disponibilidad del servicio. 

Es un sitio donde se puede informar sobre las incidencias y el seguimiento de posibles errores en el funcionamiento de tus aplicaciones.

### Netlify Status Kit

Con Netlify se puede crear sitios web estáticos que contengan los detalles de los servicios.

> Mantener el estado de las API puede ser un desafío. Esta plantilla es de uso gratuito y una adición no obstrusiva al flujo de trabajo o pila de tecnología de cualquier desarrollador. Solo necesita unos pocos clics para configurar e implementar.

{% youtube sCXGMu5QzQs %}

El repositorio del sitio lo puedes encontrar en:

{% github netlify/netlify-statuskit %}

Otra opción es la herramient [cState](https://www.netlify.com/blog/2018/08/17/creating-a-status-page-for-your-company-using-cstate/)

### SpeedTracker

Para complementar el monitoreo de tus API`s puede usar una herramienta que te ayude a realizar pruebas de rendimiento. 

SpeedTracker usa el api key de WebPageTest, brinda un capa de visualización del reporte que puede ser integrado fácilmente a tu pagina de estado.

{% github speedtracker/speedtracker %}
How to Fetch Nested Entry or Reference Entry in Contentful? Cannot read property ‘fields’ of undefined
Tags: react, contentful, javascript, nestedentry
Published: 2020-08-10 16:03:40

{% youtube skPzKVbPcKs %}

## The short is in below screenshot 

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

##### For more clarity watch the full video

 I got this error while I was working with React and contentful singerProfile project github code link: https://github.com/Alidhuniya/singerProfile-ReactJS-with-Contentful

Contentful community forum: https://rb.gy/zpz36w
Flutter and Laravel Integration (with Laravel Echo)
Tags: laravel, flutter, opensource
Published: 2020-08-10 15:39:16

Hello everyone, I've created a flutter app with an API written in Laravel. I've used BLoC for state management in flutter and sanctum as a token-based authentication provider. I hope it will be a good example for those who want to try Laravel and flutter integration.

The original Laravel app is from [this amazing series](https://laracasts.com/series/laravel-6-from-scratch) at Laracasts. But, I've added many new features and functionalities.

Laravel backend API - [https://github.com/tunnandaaung/tweety](https://github.com/tunnandaaung/tweety) 
Flutter App - [https://github.com/tunnandaaung/tweety-mobile](https://github.com/tunnandaaung/tweety-mobile)

Thanks.

***Update (25.11.2020)***
Now, I've also added real-time chat using Pusher, [Laravel Websockets](https://beyondco.de/docs/laravel-websockets/getting-started/introduction), and Laravel echo both in web and mobile app. Thanks again!
Tips para WebStorm
Tags: webstorm, webdev
Published: 2020-08-10 15:31:31

[Tips para programar con WebStorm](https://www.jetbrains.com/webstorm/guide/tips/). 

En el sitio web de intellij idea se encuentra una guía con tips para el uso del editor webstorm, se basan en las características de la aplicación y te ayudarán a ser más productivo al momento de escribir código.

Otras guías:
- [PyCharm](https://www.jetbrains.com/pycharm/guide/tips/)
- [Go](https://www.jetbrains.com/go/guide/tips/)
- [Space](https://www.jetbrains.com/space/guide/tips/)
- [DotNet](https://www.jetbrains.com/dotnet/guide/tips/)

Enlace:
{% github JetBrains/jetbrains_guide %}
Svelte and TS + comlink
Tags: svelte, typescript, comlink, webdev
Published: 2020-08-10 15:20:45

# The project
I have been trying stuff with svelte and doing some projects with it for a little over a year now. I have liked it from the start and still do and enjoy the simplicity and speed of it.

3 weeks ago I had the idea to do another little side project and build a guitar tuner with svelte (a svelte tuner if you'd like). I wanted it to look similar to my physical tuner that I use when I play live with my guitar.

# Typescript
It was right around the time svelte started supporting typescript out of the box. So I thought to myself: "That is a nice project to start learning typescript". And I must tell you the transition was really easy (and even saved me from some bugs along the way).

# Some problems that I encountered
- share my interfaces among files
- import svgs

## Share interfaces
As a total beginner in ts I started out with exporting my interfaces instead of having them in my `@types` folder. I thought it might be worth mentioning for all those who start out with typescript 😉

## import svgs
another thing that I encountered (in a different project) was when I tried importing svgs it gave me a ts error. The solution that I found, is to have an `index.d.ts` inside `./@types` with the following:
```typescript
declare module "*.svg" {
    const content: any;
    export default content;
}
```
# Using comlink
I have heard about comlink in some js youtube tutorial and wanted to try it out for the longest time. With raw audio processing this seemed to be the perfect fit to run the task off the main thread.
It was really easy to integrate (also with typescript).

**MyComponent.svelte => script**
```typescript
import * as Comlink from "comlink";

const worker = new Worker("/myWorker.js");
const instance: Comlink.Remote<IWorkerConstructor> = Comlink.wrap(
  worker
);
const localInstance = await new instance();

...

const result: number = await localInstance.calculateNumber()

```

**myWorker.js**
```typescript
import * as Comlink from "comlink";

class Worker implements IWorker{
    calculateNumber() {
        return Math.random();
    } 
}

Comlink.expose(Worker);

```
The syntax is really easy and provides a powerful enhancement to apps that run expensive calculations. 

# Conclusion
Integrating workers with comlink into apps, that do some calculations keeps the main thread healthy especially on low end devices (which more and more people are using these days). 
Also using ts with svelte seems a really powerful combination, without loosing its simplicity. I guess this will further cement svelte's position in it's approach to an awesome development experience.

So, try stuff out, have fun and enjoy web deving 🎉

Links:
- [example page](https://tuner.reitzner.at/)
- [github](https://github.com/dreitzner/svelte-tuner/)
- [svelte](https://svelte.dev/)
- [svelte <3 typescript](https://svelte.dev/blog/svelte-and-typescript)
- [comlink] (https://github.com/GoogleChromeLabs/comlink)

My music:
{% soundcloud https://soundcloud.com/domenik-reitzner/love-grace-domenik-reitzner %}
#30DaysOfCJS: Accessibility is a Hydra
Tags: community, ableism, a11y, system
Published: 2020-08-10 15:18:38

---
title: #30DaysOfCJS: Accessibility is a Hydra
published: true
description: #30DaysOfCJS Day 9, Accessibility is a Hydra
tags: community, ableism, accessibility, system
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/21stp77s1rxgjs8lf22t.png
series: 30DaysOfCJS
---

*This is a follow up post for Day 9 of* **#30DaysOfCJS**, *learn more about* **#30DaysOfCJS** *here* {% link jimcalliu/30daysofcjs-1jd3 %}

**Accessibility is a Hydra | EJ Mason | CascadiaJS 2019**

If you'd like to watch the talk, here is the Youtube link.
{% youtube SDdsD5AmKYA%}

Further readings:
- [System of Systems by Tatiana Mac](https://www.youtube.com/watch?v=TzGfBV67Tac)