teleren/devto huggingface dataset:
¿Alguna vez te preguntaste como se crean esas insignias que se utilizan en los README?
Tags: github, tutorial, beginners
Published: 2020-11-09 21:35:02

Seguramente te has topado con algunas insignias en los repositorios de github, normalmente en los README.

¿Pero como se crean estás insignias?

Bueno es muy sencillo solo debes ingresar a [shields.io](https://shields.io/), que básicamente es la web que te permite crear insignias estáticas o dinámicas, también puedes buscar insignias dinámicas. 

Crear una insignia estática:

![Crear una insignia](https://dev-to-uploads.s3.amazonaws.com/i/zadx3s0m7oc8wfk48xak.png)
Cómo puedes ver aquí, se pueden ver qué tipos de colores puedes utilizar y otros tipos de especificaciones, una vez generada la insignia, debes copiar la URL y pegarla en donde la necesites. 

Buscando una insignia dinámica:

![Buscando una insignia dinámica](https://dev-to-uploads.s3.amazonaws.com/i/n340vvbvtuyvixnist7e.png)
Y como puedes ver aquí, hay muchas opciones a la hora de buscar una insignia, por ejemplo quieres tener una insignia que te muestre cuántas descargas tiene un paquete que hayas desarrollado. Otras insignias que puedes encontrar son como las que están en la imagen de portada. 

Y creo que eso es todo, solo visita el sitio y crea o busca la que necesites. 

___
> PD: Si las imágenes no se ven bien en una computadora es porque las capture desde el móvil. 😬
___

Gracias por leer! 
Saludos! 👍🏻
How to make a GitHub profile README
Tags: github, portfolio, beginners, resume
Published: 2020-11-09 20:59:32

In case you missed it. GitHub profiles are now live!

{% twitter 1281883959140335617 %}

I first saw this feature being teased a little while back in this post and I was pretty excited, but I've been waiting a while for it to become an actual thing. Finally they're here!

{% twitter 1265773172520914944 %}

Looks like they used to be done with a `.github/README.md` repo and file. But it seems like they've changed things a little. Here's how you do it.

1. Make a repository with the same name as your GitHub username.
2. Create a README.md file inside that repo.
3. Commit and push the file to GitHub
4. Click the "Share to Profile" button in the sidebar.

That's it. Now check your GitHub profile. It should look a little [like this](https://github.com/phocks).
tacking users sockets in a social network with nodejs and socket.io
Tags: node, webdev, ws
Published: 2020-11-09 20:56:49

---
title: tacking users sockets in a social network with nodejs and socket.io
published: true
description: 
tags: nodejs , webdev , ws 
//cover_image: https://direct_url_to_image.jpg
---

So i am creating a social network for my university , this made me think how to track users with multiple socket like facebook does when you send a message it will pop up on all devices and browser tabs , this is easy if you keep track of user's sockets in array but isn't that how rooms work , so instead of doing that you just create a room for every user but i am wondering if is that the best practice ?
Hacktoberfest
Tags: hacktoberfest
Published: 2020-11-06 06:10:59

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### [Intro Heading]
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->


### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
Nuxt asyncData recall.
Tags: vue, javascript, nuxt
Published: 2020-11-09 20:18:38

Short disclaimer at the beginning - this one might be not valid anymore soon because the Nuxt 3.0 is just right behind the corner. Along with it, we will get a new, fresh, and shiny `useFetch` API. Recreated with Composition API it will change the whole process of fetching data across our Nuxt apps. 

A simple example will look like: 

```javascript
import { useFetch } from '@nuxt/composables'

export default {
  async setup() {
    const { data: posts } = await useFetch('https://your.api.url')
    return posts
  }
}
``` 

Sexy, I know. 😆

But since it's not public and not quite official at that very moment we still using the `2.x` version of the framework and we still lay our apps on the existing API. According to that, this might be helpful for some of you. 

As we all know for various cases of data fetching we can use the `fetch()` hook with `$fetchState` object which contains `pending` and `error` values. It also can be recalled with `this.$fetch` method. For others when we need our data just before the page render we have to use `asyncData`. One problem with `asyncData` is that we can't call it again - for example on route change action. What we can do about it then?

Firstly define your `fetch` function outside the regular component. 

```javascript
async fetch() {
  const { posts } = await forApiResponse()
  return {
    posts
  }
}
```

Then inside the `asyncData` hook use this function.

```javascript
asyncData() {
  return fetch()  
}
```

Recall it while watching some route changes.


```javascript
data: () => ({
  posts: []  
}),
watch: {
  $route() {
    const data = fetch()
    Object.assign(this.$data, data)
  }
}
```

To avoid data conflicts we might want to reset it to the default state before fetching it again. Maybe this one is not so elegant as the fancy `fetch()` API but that way we can get our data before the page renders and react to it. Displaying a 404 error for example - very valuable from SEO perspective. 

And this is it. Enjoy.

<a href="https://www.buymeacoffee.com/lukas.borawski" target="_blank"><img src="https://miro.medium.com/max/1400/1*CEZSIxeYr6PCxsN6Gr38MQ.png" alt="Buy Me A Coffee"></a>
The 3 most important things every programmer needs to know
Tags: beginners, programming, discuss, codenewbie
Published: 2020-11-09 20:14:20

---
title: The 3 most important things every programmer needs to know
published: true
description: The 3 most important things every programmer must know are Version Control, Testing, and CI.
tags: beginner, programming, discuss, codenewbie 
//cover_image: https://direct_url_to_image.jpg
---

## Version Control with Git

I am surprised to see that even today a lot of programmers are not using version control and many of those who use are afraid of it. I believed knowing a version control system gives superpowers to programmers. These days the most popular one is **Git**.

## Unit Testing

The (mental) safety of programmers is way underrated. One of the best ways to feel confident that your changes don't break anything is to write **tests**. Lot's of tests. Regardless of your programming language.

## Continuous Integration (CI)

The sooner you get feedback the sooner you can fix any issues, the cheaper it is going to be. Both in time and in money. So make sure you have a CI system running your tests. The best would be to known how to configure a **CI** system.


## What are the 3 most important things in your opinion?
Is a JAMStack LMS Possible?
Tags: discuss, nextjs, jamstack, lms
Published: 2020-11-09 19:55:04

So I have been losing sleep over transitioning my Gatsby site to a dedicated LMS solution, where I can offer memberships or direct buy courses and pay Instructors.

## Why

I think every developer has something to teach and if we can guide each other we could even make some side hustle type of money. There is a huge $25.7 Billion industry coming...

https://www.globenewswire.com/news-release/2020/07/24/2067246/0/en/25-7-Billion-Worldwide-LMS-Industry-to-2025-Featuring-Cornerstone-On-demand-Blackboard-D2L-Among-Others.html

## Wordpress

The likely solution would be just to jump in head first into LearnDash, LearnPress or a similar Wordpress solution. However it loses all of those wonderfully fast sites because it is such an expensive database situation on these membership sites.

{% link https://dev.to/ajonp/wordpress-performance-plea-599 %}

The load times are embarrassing though and there has to be a better way. At the very minimum a basic site on Kinsta will cost $100 a month for this to run with any reasonable exceptions.

## Next.js

Perhaps there is a better way of doing this with an ecommerce solution using Next.js, building all the blog content out using that static builder and then leave the true LMS solution on the SSR side of hosting?

## Your thoughts?

Let me know is this something anyone else is pondering? 
Could we build something that sits beside https://forem.dev/?
Joy Of Hacktoberfest and Contribution to Open Source 
Tags: hacktoberfest, webdev, opensource, github
Published: 2020-11-09 19:47:37


I am writing this for sharing my experience with my very first **hacktoberfest** event which I successfully completed with *4 PRs*.

Also I am new to **dev** community and in development sector. When I came to know about hacktoberfest event it seemed me very interesting and exciting. This was also a very good opportunity to learn **Github**, contributing to **Open Source** and generating more interest as a developer and a coder.

It was first time I get to know about contribution in open source.
For me it went like a festival of celebration of what I learnt till now in coding world. Coding for me is like mind game for me the more you practice the better you are.

I successfully completed my hacktoberfest journey of this year (2020) and it was awesome, informative and learnt a lot from it.

####Here are the links of my contributed projects :
1) https://github.com/arjun-computer-geek/pubgwarfare.github.io/pull/3
2) https://github.com/deginner/website/pull/71
3) https://github.com/sidanand67/Tribute-Page/pull/13
4) https://github.com/kuscoders/simple-landingpage/pull/5

As these projects were related with web development so I choosed these projects.

**Hacktoberfest 2020** experience was amazing . I learnt how to *fork the project and how to make significant change or adding some fresh new stunning ideas in already made projects.* And I will love to participate in next year also because as I said it felt like a festival of developers for me :) .For me its like one more festival added in these days like Diwali so of course I'll contribute next year also.

Thank you  **Hacktoberfest** and **Digital Ocean** for a wonderful experience .
SipMask — New SOTA in Instance Segmentation
Tags: datascience, machinelearning, deeplearning, computerscience
Published: 2020-11-09 19:36:17

**SipMask** is a one-stage neural network for instance segmentation of objects in an image. The model bypasses the previous one-stage state-of-the-art approaches on the *COCO test-dev dataset*. Compared to TensorMask, SipMask gives a **1% AP gain**. Moreover, the model produces predictions **4 times faster**. The model bypasses *YOLACT* by **3% in AP**.


![SipMask — New SOTA in Instance Segmentation](https://dev-to-uploads.s3.amazonaws.com/i/fgc98xqh2sbo37t94dqd.png)
<figcaption>Instance Segmentation with SipMask. Source: https://arxiv.org/pdf/2007.14772v1.pdf</figcaption>

# More about the model

A feature of the neural network architecture is the new spatial preservation (SP) module. The SP module is a feature pooling mechanism in a one-stage segmentation model. The idea of ​​the module is to store spatial information about an object.

![SipMask — New SOTA in Instance Segmentation](https://dev-to-uploads.s3.amazonaws.com/i/mc7e1bghd9r6568gp9fo.png)
<figcaption>The overall architecture of our SipMask comprising fully convolutional mask specialized classification and regression branches. Source: https://arxiv.org/pdf/2007.14772v1.pdf</figcaption>


The model is based on the FCOS architecture. However, the two standard branches of classification and regression have been replaced with mask-specific classification and regression in order to adapt the model for instance segmentation. The classification unit predicts the rates of the classes and assigns spatial coefficients for the regions of the boundaries of objects. These coefficients are then used by the SP to predict the individual masks.

![Comparison SipMask model with other competing architectures](https://dev-to-uploads.s3.amazonaws.com/i/so3250kumu1d8u7svjh8.png)
<figcaption>Comparison of competing architectures. Source: https://arxiv.org/pdf/2007.14772v1.pdf</figcaption>

# Testing the model

The researchers validated the model on the COCO test dataset. Compared to state-of-the-art one-step approaches for instance segmentation, SipMask produces more accurate predictions.

![SipMask - Benchmarking results for semantic segmantation](https://dev-to-uploads.s3.amazonaws.com/i/lvt0fp8sz8v3e77qtxq1.png)
<figcaption>Benchmarking results. Source: https://arxiv.org/pdf/2007.14772v1.pdf</figcaption>

The source code of the project is available [in the repository on GitHub](https://github.com/JialeCao001/SipMask).

# Read More
*If you found this article helpful, click the💚 or 👏 button below or share the article on Facebook so your friends can benefit from it too.*

[https://slidetosubscribe.com/raevskymichail/](https://slidetosubscribe.com/raevskymichail/)
How to statically type 'this' for a regular function in TypeScript
Tags: typescript, webdev, beginners
Published: 2020-11-09 19:26:54

Let's say we have a cat object:

```typescript
interface Cat {
  name: string
}

const bobTheCat: Cat = {
  name: 'Bob'
}
```

And we want to have a function that prints his name. We can do it like a regular developer by consuming a `cat` parameter inside a function:

```typescript
function printCatName(cat: Cat) {
  console.log(`This is ${cat.name}`)
}

printCatName(cat); // This is Bob
```

Simply speaking we get the expected result.

But a function can consume data another way using `this` context:

```typescript
function printCatName() {
  console.log(`This is ${this.name}`)
}

printCatName.apply(bobTheCat); // This is Bob
```

This works exactly the same as the previous way. However, we now lost static typing for `this` variable:

![no static typing for 'this' variable](https://dev-to-uploads.s3.amazonaws.com/i/3z39wex3c2u1cdkoawth.png)

Fortunately, TypeScript has us covered. We can write a new function the following way:

```typescript
// we added a pseudo parameter 'this'
function printCatName(this: Cat) {
  console.log(`This is ${this.name}`)
}

printCatName.apply(bobTheCat); // This is Bob
```

And once again we have the same result, but this time we get all the benefits from static typing. Yay!

![static typing works for 'this' function](https://dev-to-uploads.s3.amazonaws.com/i/oodzol2bisxq093izig5.png)

You might ask what would happen if invoke a function without `apply()`? The function has `this` parameter, so we probably need to provide is as well, right?

```typescript
function printCatName(this: Cat) {
  console.log(`This is ${this.name}`)
}

printCatName(bobTheCat);
```

This time we have a compilation error.

```
index.ts:13:14 - error TS2554: Expected 0 arguments, but got 1.

13 printCatName(bobTheCat);
                ~~~~~~~~~
```

This is why I described `this` as a "pseudo parameter, because it might look it's a parameter, but in fact it is just a hint to TypeScript.

See you around.
A Machine Learning Best Friend... AWS CodeGuru
Tags: cloud, aws, devops, development
Published: 2020-11-09 19:09:47

Hey All,

I dove a bit into AWS CodeGuru and thought it was really cool as a "code reviewer best friend". I made a short 5-minute video on how you can get started with AWS CodeGuru today.

https://www.youtube.com/watch?v=D91sxTjCdiA
Storing passwords safely - Part - 1
Tags: computerscience
Published: 2020-11-09 18:48:26

To develop a user authentication system for a software application, the simplest approach is to:
store the username and password as plain text to a database table
compare the username and password every time the user logs in

Though storing the password in plain text works it has number of security risks, to name a few:
Any Employee who gets access to database can see all the passwords stored
If an attacker gets access to the database then they will get to know the password of any user

To mitigate these risks instead of storing the password as it is in the DB, we should store only the *hash value* of it. So for example, `abc123` becomes `6ca13d52ca70c883e0f0bb101e425a89e8624de51db2d2392593af6a84118090` when hashed using sha256. Even if someone gets hold of this hashed value they cannot find out the original password which gave this hash. Let’s see how.

### Hashing
  Hashing is an algorithm that maps data of any length to a fixed length string. This output is known as Message Digest or hash value. Hash values are easier to generate from a source string but impossible to find out the source string from a hash value. Even if one letter is different the hash value becomes completely different.
> abc123 => 6ca13d52ca70c883e0f0bb101e425a89e8624de51db2d2392593af6a84118090

> abc124 => cd7011e7a6b27d44ce22a71a4cdfc2c47d5c67e335319ed7f6ae72cc03d7d63f

You can play around with the values [here](https://emn178.github.io/online-tools/sha256.html). 

Also a given input will always result in the same hash value. So when a user tries to login to the system we have to hash that entered password and compare that with the stored hash. If they both match then the password is valid otherwise it is an invalid request. This way even if the database is hacked the attackers won’t be able to see the actual user password.

Sample code in Python

```
from hashlib import sha256
 
message = sha256()
message.update(b"abc123")
hash = message.hexdigest()
print(hash)
```
# output
> '6ca13d52ca70c883e0f0bb101e425a89e8624de51db2d2392593af6a84118090'
 
You can run it in an [online repl here](https://repl.it/talk/share/Hashing-a-value/78384).
Junior Web Dev for hire 
Tags: javascript, react, node
Published: 2020-11-09 18:29:02

Hey everyone I’m a junior web developer looking for work, I’m experienced with react, vue, react native, express, mongoDB and more. My hourly rate is $20 an hour but I’m pretty flexible and am open to fixed price projects as well I’m also a fast learner so if you have a project involving a technology I don’t know I can learn it fast. Please pm if you have any work you wanna talk about with me.

GitHub: www.GitHub.com/haardikg
LinkedIn: https://ca.linkedin.com/in/haardik-gupta-4661aa187
Day 9 #100dayscode
Tags: webdev, 100daysofcode, css, javascript
Published: 2020-11-09 18:19:09

#Ah it's my Day 8 now 
And today I didn't do much but I worked with giphy api which was quite interesting and I had some issues displaying the data which I fetched using javascript. And I got help by a generous developer who helped me with that code and also I found him in this community. I asked him for help and worked with my code with his help and got my desired output. Which is why I wanna thank mr. @jvarness who helped me with my code and gave me hope Thank you bruh🌟... So that I completed my gify api project. And yet I wanna work on that more and I'll do that soon.
What I've Learned From Close-call Interviews
Tags: career, mentalhealth
Published: 2020-11-09 17:58:52


>You did great!! But...


>You did so well and the team loves you! However...


>You were SO CLOSE--

I could tell from the sound of the recruiter's voice that, after a month of fretting, questioning my worth, building up my hope for a bright future for me, my fiancé, friends, and family-- everything has, once again, been pushed further out of my reach.

This one hurt pretty bad, not gonna lie. I kept hearing positive feedback! I mean, we were talking compensation and when they would get started on drafting an offer. 

I really thought I had it.

Then the rug gets pulled out from under me, *of course*.

The most important thing I learned from this experience is:

## Never, ever believe anything anyone says until the offer is in front of your face with your name on it.

Remember: you always have control over your own actions, reactions, and decisions.

And if they didn't pick you, it's their loss. Don't waste time fretting about why it wasn't you or singing the hymn of the impostor on repeat.

It's fine to ask for feedback, just as long as you act on it and show improvement.

## Move on from the rejection as quickly as possible; time waits for no one.

### What is one way you recover from--yet another--rejection?

---

### Thanks for reading!
If you enjoyed this post or found it helpful, please share it on social media and/or check out my [buymeacoffee](https://buymeacoffee.com/catvscode) page!! 

<a href="https://www.buymeacoffee.com/catvscode" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-violet.png" alt="Buy Me A Coffee" style="height: 30px !important;width: 217px !important;" ></a>
Few neat JS snippets
Tags: javascript, webdev
Published: 2020-11-09 17:47:57

> Creating a 2D Array initialized with zeroes
```js
const nrows = 5;
const ncols = 5;
const arr = Array.from({ length: nrows }, () =>
  Array.from({ length: ncols }, () => 0)
);
```
---
> Flattening a 2D array into a 1D array
```js
const oneD = [].concat(...twoDArr);
```
---
> `Array.from()` can be really handy at times
```js
const primes = [2, 3, 5, 7, 11];
const sqPrimes = Array.from(primes, (x) => x * x);
```