teleren/devto huggingface dataset:
Day 272 : Happy
Tags: hiphop, code, coding, lifelongdev
Published: 2020-12-08 22:48:38

_liner notes_:
- Professional : It was Day 2 of the conference I'm covering and got to demo an application I made and talk to some people and hear what they are working on. Had a catch up meeting with my manager's manager. Really cool guy doing some cool stuff. We shared the different things we've been working on and things we've been interested in. He also mentioned that people are happy with my work and that made me happy. haha After that, I worked on our Client SDK documentation.

- Personal : Spent the day at the park. On breaks, I walked around the park. Last night, I worked on my demo application to make highlight clips from live stream videos. Then it got dark, I started watching "Legion" and fell asleep.

![View of mountain ranges from a green field with red and yellow flowers in Wallowa, OR, United States at sunset.](https://dev-to-uploads.s3.amazonaws.com/i/pnqoopb82y299rqkzf70.jpg)

Tonight will be pretty much a repeat of last night. Work on my side project. I want to take an archive link that gets generated from the livestream and then download it to my server/database/storage (not sure which yet) and then upload it to YouTube and Vimeo as backup. I got a sample app working with Vimeo. YouTube looks like it will be more of a challenge. Then once it gets too cold and dark, I'll watch some "Legion" and fall asleep. haha Got an early morning tomorrow.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube ZbZSe6N_BXs %}
The SZITCH Project
Tags: startup, react, javascript, github
Published: 2020-12-08 22:17:03

Here it starts. My own first project. SZITCH (aka switch). A simple web application for gamers and anyone who loves gaming to reach that goal for being a Pro. No matter who you are, where you are, what kind off PC you have or even mobile you have, szitch should be a platform that allows anyone to follow their gaming journey from anywhere from any background.

To be honest, I don't if its gonna work out or even if i can build it myself but I love building. I love creation. So my target is just 3 functions in the coming months : 

1. A Sign Up/ Login Page
2. A profile page that displays your gaming history and achievements (improv)
3. A third page that helps gamers to navigate into esports world alone or with their friends based on their profile ranking.

I am thinking to write the web app in React. I am okey in Javascript atleast I can understand what is happening in what way. The primary focus will be developing the algorithm for the platform. 

I will keep posted my journey throughout the course of this project and will as transparent as possible. Just to make sure that I leave a record what was doing in Dec 2020 in my life. Haha.

If anyone is interested in seeing the final product in the coming months I will leave a waitlist forum for you guys. 

Sign Up for SZITCH waitlist : https://forms.gle/RqFQyaQvXdeYpMqZA

Angelo
Build your own Javascript CLI in 90 seconds
Tags: javascript, programming, shell, cli
Published: 2020-12-08 22:15:25

Writing your own CLI (command line interface) can be really great as it allows you to automate any task you may want to and run it right from your Terminal. 

Wait no more and get started with your first CLI:

### Step 0 - Create your project directory

```
mkdir myproject && cd myproject
```

### Step 1 - Initialize your project

```
npm init
```

### Step 2 - Create the entry point to your CLI

```
touch index.js && open ./index.js
```

### Step 3 - Add to index.js a [shebang](https://en.wikipedia.org/wiki/Shebang_(Unix)) and the CLI's logic

```java
#!/usr/bin/env node

console.log('hello world')
```

### Step 4 - Add index.js to project's executables

Add to package.json the following field:
```
"bin" :  {
  "myproject" : "./index.js"
},
```

### Step 5 - [Symlink](https://docs.npmjs.com/cli/v6/commands/npm-link) your project

```
npm link
```

### Step 6 - Your CLI should be now up and running!


In your Terminal, run:

```
myproject
```

I hope you had fun, and since this is your first encounter with a CLI, that you are still excited and eager for more.

As said before, automating your own tasks using command-line scripts can be a great way to try new skills and experiment with new node modules. So far, we have just programmed a simple script but this skill can enable the use of more sophisticated ones.  

Stay tuned for the next post, when we explore more complex options for creating a great CLI. Until next, I recommend you to check this great [node module] (https://www.npmjs.com/package/commander)
.dev and HSTS preload - How to save 71 Bytes on every http request.
Tags: http, performance, security, webperf
Published: 2020-12-08 21:28:46

**TL;DR** — The .dev TLD has the advantage of being on the HSTS preload list, without needing the `strict-transport-security` header. Giving your site a small performance boost.

*I first heard about this watching [Andrew Betts talk Headers for Hackers from Performance.now()](https://www.youtube.com/watch?v=k92ZbrY815c), it’s a good talk.*

## What is HSTS?

[HSTS (http strict transport security)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security) is an http header. It lets a website tell the browser to only connect to it via https.

This helps prevent man-in-the-middle attacks. It also reduces load times for users trying to connect via http. Their browser will automatically upgrade their connection to https instead of your server redirecting them. 

However, the browser can only know about your site’s HSTS policy once it’s already accessed it once. So if the initial request to your site is via http, there is still a risk. This is where HSTS preload comes in…

## HSTS Preload

HSTS preload allows you to make sure browsers always connect via https, even when connecting to your website for the first time.

Appending `preload` to your strict-transport-security header will automatically add your domain to the HSTS preload list maintained by google. 

When a user navigates to your site for the first time, most browsers will check this list. If your site is on the list, the user will upgraded to HTTPS.

### .dev

Any domain with the .dev TLD are by default in the HSTS preload list. This means you get the security and performance of having the strict-transport-security header, with the bonus of not actually needing the header.

So, by using .dev you can save 71 bytes in every response from your site, and stop the client from parsing an unnecessary header.

```
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
```

### Other domains

As well as .dev, all of Google’s other TLDs are automatically on the HSTS preload list. Here's the complete list of availble google TLDs (as of 8 October 2020):

>  .app, .baby, .blog, .book, .buy, .cloud, .corp, .cpa, .dds, .dev, .diy, .docs, .dog, .dot, .drive, .earth, .family, .film, .free, .fun, .fyi, .game, .gmbh, .goo, .home, .inc, .live, .llc, .llp, .lol, .love, .mail, .map, .mba, .med, .mom, .moto, .movie, .music, .pet, .phd, .play, .plus, .search, .shop, .show, .site, .spot, .srl, .store, .talk, .team, .tech, .tube, .vip, .web, .wow, .you

[source : icannwiki.org/google](https://icannwiki.org/Google#Applications)

### Netlify Caveat

I really thought I was being so cheeky and clever when I did this. But of course, I host my sites on Netlify and they don't let you remove the `Strict-Transport-Security` header.

However they do allow you to remove this bit: `; includeSubdomains; preload`, but that's still something!
Filter records in a many to many relationship in rails 
Tags: rails, database, sql
Published: 2020-12-08 21:55:32

We might find ourselves in a situation where we have a many-to-many relationship between two models and we want to filter the records of these models.
Let's say we have `Product` and `Tag` models, with a join model called `ProductsTag`, the names of the tables being `products`, `tags` and `products_tags` respectively.
```
Table   |-products-|   |----products_tags----|   |-tags-|
columns |    id    |   | product_id , tag_id |   |  id  |
```
If we want to filter out products having some specific tags, then we will be executing a query like this
```sql
    SELECT *
      FROM products
INNER JOIN products_tags
        ON products.id = products_tags.product_id
INNER JOIN tags
        ON tags.id = products_tags.tag_id
     WHERE tags.id IN (comma separated tag ids here)
```
Explanation:
We join the `products` table with the join table `products_tags` and then join its result with the `tags` table, then we filter the result of these two joins by using the `where` clause.
There might be other ways of doing this, but here I'm going to demonstrate this using scopes.

```ruby
# Product.rb
scope :filter_by_tag, ->(tag_ids_arr) { joins(:tags).where( tags: { id: tag_ids_arr } ) }
```
Now when you want to perform this filtering, do
```ruby
tag_ids = [1,2,3,4,5]
result = Product.filter_by_tag tag_ids
```
We can do a bit more advanced filtering using scopes. Suppose our schema is
```
Table   |--products--|   |----products_tags----|   |--tags--|
columns |id, category|   | product_id , tag_id |   |id, name|
```
and now what we want to get is that; We want All the `products` of specific categories which have `tags` with some specific `name`.
Translating it to raw SQL
```sql
    SELECT *
      FROM products
INNER JOIN products_tags
        ON products.id = products_tags.product_id
INNER JOIN tags
        ON tags.id = products_tags.tag_id
     WHERE products.category IN (comma separated category values here) AND tags.name = 'some_name'
```
Our scope for this will become
```ruby
# Product.rb
scope :custom_filtering, ->(categories_arr, tag_name) { joins(:tags).where(products: { category: categories_arr }, tags: { name: tag_name }) }
```
To use this filter
```ruby
categories = ['Electronics', 'Health']
tag_name = 'XYZ'
result = Product.custom_filtering categories, tag_name
```

Cover Image credits: <span><a href="https://unsplash.com/@sajad_sqs9966b?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Sajad Nori</a> on <a href="https://unsplash.com/@sajad_sqs9966b?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Programador freelancer: o que analisar e quais são as vantagens ao contratá-lo?
Tags: desenvolvedor, devops, freela, freelaweb
Published: 2020-12-08 21:44:51



Profissionais de diversas áreas têm investido no mercado freelancer para empreender ou até mesmo gerar uma renda extra no final do mês. A área de Tecnologia da Informação e Programação, por exemplo, contempla essa possibilidade de atuação autônoma, ou seja, de forma freelancer. 

 

Os benefícios do trabalho freelancer em programação se estende para os contratantes também. Afinal, pode buscar por um profissional específico para o projeto que deseja desenvolver. No entanto, é recomendado analisar alguns aspectos para escolher o freelancer mais adequado às suas necessidades. 

 

O que analisar antes de contratar um programador freelancer?
 

A área de programação e desenvolvimento web é enorme. Por isso, o primeiro passo é buscar por um profissional que atue diretamente com o serviço que você precisa que seja desenvolvido. Aqui no FreelaWeb é possível encontrar uma variedade de profissionais, o que facilita para o contratante achar o freela ideal para o serviço que deseja. 

 

Para isso, busque analisar o portfólio do profissional com serviços que já foram realizados anteriormente. Assim, é possível entender o perfil de projetos que o freela costuma atuar e, consequentemente, entender quais são as competências técnicas que o profissional possui já que a área é vasta e os profissionais tendem a atuar com especialidades mais focadas. 

 

Vantagens ao contratar um programador freelancer
Contratar um programador freelancer ao invés de uma empresa específica pode te proporcionar alguns benefícios para o desenvolvimento do seu projeto. Confira abaixo três vantagens: 

 

Preço
As empresas costumam cobrar alto por serviços nas áreas de TI. Isso porque um projeto pode envolver uma série de profissionais e áreas, não apenas o programador em si. No entanto, ao contratar um profissional freelancer, o custo do serviço acaba sendo mais acessível e a qualidade pode se manter equivalente ao serviço empresarial, tendo em vista que o alinhamento será feito direto e constantemente com o freela. 

 

Comunicação direta
 

Conforme falado no tópico anterior, a comunicação e o alinhamento com o freela é mais direto e ajustável às necessidades e ao que precisa ser feito no projeto. Logo, o projeto é customizável, possibilitando que o contratante escolha softwares e plataformas conforme achar ideal para o serviço. 

 

Diferente de contratar uma empresa, em que o serviço acaba sendo limitado ao que ela já oferece no mercado. 

 

Tempo de projeto
 

Profissionais da área afirmam que, dependendo do serviço solicitado, o tempo de projeto pode ser mais curto — o que afeta diretamente no valor do serviço, já que muitos profissionais cobram por hora trabalhada. Contudo, isso deve ser alinhado com o freela inicialmente. Conforme a demanda for estabelecida, pode-se determinar um prazo médio para a conclusão do projeto. 

 

Redação: Alice Bachiega
Back to 2014: Dropdown no-js
Tags: codepen, html, css
Published: 2020-12-08 21:42:07

A long, long time ago, I wrote a select "component" as I called it in html and css.

The idea was to create a <select> dropdown list made of other html elements (this was before web components, React or other).

Looking back, yuk! Invalid html, weird hacks, but it sort of worked. this is because a select element is basically a radio group.

So I refactored it to use `:focus-within` and hey presto, it works well. ~~I actually don't have any accessibility concerns with this one and may well put this into production after some cross browser testing (you can tell me its not broken 😇).~~ 

**Edit:** nope! Chrome is perfect, Firefox focus is so broken on a mac, clicks don't trigger focus so I had to use tabindex which is always a bad idea, so this is maybe not a good idea :(. To make FF half work I had to make chrome worse, and thats why accessibility is hard and why you should just use standard html elements, because parity isn't good enough - so close, I'll try in another 10 years.

{% codepen https://codepen.io/acronamy/pen/bGwwNYZ %}
Context API vs Redux
Tags: react, redux, contextapi, discuss
Published: 2020-12-08 21:31:17

React's context api is a gift from heaven. It is super easy to understand and make use of. I use it in every react app. You simply create your state, export it and in your app.js you wrap the ContextProvider around your app component and your done! Managing state across your app is incredibly smooth and simple. 

I learned redux this past week and the first thing that came to my mind was: complicated. Its not as intuitive as the context api and it took me a while to get the flow and i didn't really like it that much. 

What are your thoughts on redux compared to context, which do you prefer and why? Do you think Redux is a dinosaur now that context api is becoming more popular. Let me know below!
Drawings for technical explanations: my first steps
Tags: writing, productivity, ipad
Published: 2020-12-08 21:28:55

For longer, I felt that something was missing in my communication, something between writing and talking. There's a whiteboard, but that's not an option for me since I work remotely. Then there are online diagramming tools, but they felt cumbersome to use: it took me long to draw & I often couldn't find the shape I was looking for.


![First steps](https://dev-to-uploads.s3.amazonaws.com/i/9aqtlsc2jciakg0g7fac.png)

Two years ago, I stumbled upon Doug's [course on sketch noting](https://www.verbaltovisual.com/our-courses/). I learned the basics of technical drawings, but it didn't occur to me I could use drawings for software-related concepts. Then a few weeks ago, I stumbled upon [Julia's blog](https://jvns.ca/) and her technical drawings. It turns out she wrote [a bunch of articles](https://jvns.ca/#on-writing-comics---zines) where she explains her drawing process. Inspired, I read them all. And then, the final drop: [Ryan's article on how he wrote ShapeUp](https://m.signalvnoise.com/how-i-wrote-shape-up/). I was hooked & determined to give drawings a try.


So I bought a used iPad 7 and an Apple Pencil 1st generation. I installed Notability: a simple note-taking app that both Julia and Ryan used in their beginnings. And I started experimenting.

A few days ago we finished a large refactoring project. I thought that would be a good time to experiment. So I decided to use drawings to explain the thinking process behind the big refactoring we did. Here are a few drawings from the talk:

![Something missing](https://dev-to-uploads.s3.amazonaws.com/i/4i4gg05lxsbuz9rciw99.png)

I didn't know what to expect. I was surprised to find out that my coworkers enjoyed the talk & they were quick to understand the driving principles behind the project. So it seems the drawings worked well. I also noticed I liked the process of making the talk: I could express myself better & it was fun.

It's hard to image now going back to the world without the drawings. Something clicked. I think I'm going to experiment with them more.

_This post was originally posted at [marcel.is](https://www.marcel.is/drawings-first-steps/)_
do you have any question about functional programming in javascript?
Tags: javascript, functional, askanonexpert
Published: 2020-12-08 21:16:10

---
title: do you have any question about functional programming in javascript?
published: true
description: Ask me stuff about functional programming in javascript
tags: #javascript #functional #askanonexpert
//cover_image: https://direct_url_to_image.jpg
---

First of all, I'm not an expert on functional programming, I just like to write about that stuff.

Tell me what do you want to know. What is that thing you have read about but still don't understand? Maybe I can help, maybe someone else can, maybe I'm just looking for ideas for a future post (que también puede ser en español).
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-12-08 20:41:39

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round-up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Tuesday, we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

### Docker containers and images are still alive

@inductor wants you to know that all hope is not lost after the announcement that Kubernetes is deprecating Docker as a container runtime after v1.20. This post walks devs through how to understand this update.

{% link https://dev.to/inductor/wait-docker-is-deprecated-in-kubernetes-now-what-do-i-do-e4m %} 

### What advice would you give to developers trying to move into engineering from non-traditional roles?

@shaundai asked the same question of a handful of developers: “As someone coming from a non-technical role - how can I make myself stand out?” Here’s what they learned...

{% link https://dev.to/shaundai/5-things-i-learned-by-asking-developers-one-question-52h7 %} 

### Stonks!

@nirvikagarwal shared an awesome tutorial for building a basic stock prediction application using Machine Learning and its concepts. P.S. If you need a primer on what the heck the “stonks” meme is all about check out [this](https://knowyourmeme.com/memes/stonks) page.

{% link https://dev.to/nitdgplug/stonksmaster-predict-stock-prices-using-python-ml-3hmc %}

### Happy 25th, JavaScript! 

@danielleadams is celebrating the 25th anniversary of JavaScript in a very DEV Community manner: sharing a timeline of the top JS milestones since its inception. Love it!

{% link https://dev.to/heroku/celebrating-25-years-of-javascript-2c29 %}

### Maximize the odds of your resume being read

@gergelyorosz has been a hiring manager at a handful of companies you’ve very likely heard of. Here’s what they recommend if you want your resume to stand out from the pack. 

{% link https://dev.to/gergelyorosz/six-principles-your-resume-should-follow-so-recruiters-will-read-it-3a0o %}

### It’s possible to get a PS5

Yep, you read that right. Maybe you’ll be able to pull of that holiday gift-giving miracle after all following @marisayou’s tutorial

{% link https://dev.to/marisayou/how-to-get-a-playstation-5-when-it-s-always-out-of-stock-5d4i %}

### Authenticating against microservices

“Microservices are a great tool when it comes to designing scalable and extensible architectures” writes @deleteman123 -- especially when paired with a REST-based interface. In this post, they share how to accomplish an important microservice requirement: authenticating against them.

{% link https://dev.to/deleteman123/jwt-authentication-best-practices-3lf9 %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_