teleren/devto huggingface dataset:
Reflecting on 2020
Tags: watercooler, discuss, beginners
Published: 2020-12-25 21:57:03

---
title: Reflecting on 2020
published: true
description: Thought on 2020
tags: #watercooler, #discuss, #beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/acc239aebeb8t81l6v5q.jpg
---

As the new year slowly peeks around the corner the perfect time for reflecting on 2020 has arrived. I'm pretty sure that this year was challenging and troublesome for many people around the globe. All we can do at such times is to focus on the good parts and celebrate all the tiny achievements throughout the year. Whether it is a newly picked up programming language, finally trying to bake your own bread, or having awesome zoom calls with friends. 

If you look at this year through the "positivity" glasses how would you summarize it? What did you learn? What did you enjoy?

For me personally, it was my first year working full time as a developer and I enjoyed it a lot. 
I had the opportunity to learn and use Java libraries like [jOOQ](https://www.jooq.org/) and [Vavr](https://www.vavr.io/). (if you use Java and haven't tried them, give them a shot! ). 
Furthermore, I wrote my first Python tool ([Tagger](https://github.com/IT-EXPERTS-AT/tagger)) and summarized my experience [here](https://dev.to/tobhai/lessons-learned-from-writing-my-first-python-package-20en). 
Aside from all the pandemic-related issues this year was pretty exciting for me and I'm curious to read about your accomplishments in the comments!
Free Web Tools & Utils
Tags: web, github, tools, devjournal
Published: 2020-12-25 21:54:48

The web is amazing. There are so many handy free web tools out there. Every time I come across something useful I bookmark it. Recently these bookmarks are starting to get out of hand. Therefore, I've organised and open sourced my list so that others can benefit from it too. If you've stumbled across this, I hope you find it useful.

{% github https://github.com/chiubaca/free-web-tools-and-utils %}

Is there something you think should be on the list? Please let me know or feel free to submit a pull request.
Use SonarQube to Scan source code for vulnerabilities using SAST (Static Application Security Testing)
Tags: testing, security, devops, sonarqube
Published: 2020-12-25 21:20:55

In this video I show you how to use SonarQube to automate security scanning of your source code in a devops pipeline and scan for security vulnerabilities using SAST (Static Application Security Testing)
https://www.facebook.com/295984527332/videos/1022181918295500
i18n, l10n, g11n, a11y, W1F
Tags: discuss, i18n
Published: 2020-12-25 21:18:21

**Seriously?** How does this make anything more legible? Are we trading keyboard hits for legibility? I _would_ understand i18n, as internationalization really is a difficult word to type. But how often do we type this, honestly? And the rest? Saving 8-9 key hits? W1F[^wtf] is wrong with just typing the word?

Instead, why don't we settle on actual words that are inclusive and easy(-ier) to type?

I just wish that one day we are able to use
- **unity**
- harmony
- world
- inclusion
- everyone

... or something like that.

It seems to me like a race to find a new `[a-z][1-9][0-9]?[a-z]` match. Or is the higher the number the better?

I5e[^imagine] I wrote the w3e[^whole] p2t[^post] like this. Who would r2d[^read] it?

[^imagine]: imagine
[^read]: read
[^whole]: whole
[^post]: post
[^wtf]: what the ferret
React rendering problem
Tags: react, javascript, help
Published: 2020-12-25 21:13:48

Hello guys, I have a problem rendering a component in react 
{ url && <Youtube url={url} }
the component displays fine when I have an URL prop, but when I don't have a URL,  it renders a blank screen and I can't see any information in the console or "react developer tool" 
anybody know the reason !?
Payments - an unforeseen roadblock
Tags: stripe, payments
Published: 2020-12-25 21:11:48

I've been working on a website for used car buyers who want to skip handling the [pre purchase inspection](https://www.topmarq.com/articles/the-pre-purchase-inspection-a-key-step-to-ensure-you-buy-the-right-car-84) step themselves by having everything already done. It's a new version of the peer-to-peer marketplace with some tweaks to avoid problems that companies like beepi ran into. The hope is by focusing on higher-end [foreign cars](https://www.topmarq.com/articles/are-foreign-cars-really-worth-the-upkeep-and-costs-79), which are much harder to sell for a good price to large auto dealers, we can carve out a bit of a niche market. 

Car buyers can ensure that all the [vehicles service](https://www.topmarq.com/articles/the-complete-bmw-service-guide-keeping-you-and-your-bmw-on-the-road-78) has been done appropriately and the inspection shows any indication of potential repair costs coming down the road. All seemed good!

The interesting thing this week though was that after assuming I could use Stripe connect, I chatted with one of their growth team members and apparently they didn't 'like the business model' such that they won't facilitate payments for the company. Now, there are definitely other options and I will make it work, but I definitely did not see that coming. The application fits quite well into their 'Stripe Connect' marketplace functionality so it took me a bit by surprise. 

Stripe is great for handling basic CC payments on SaaS software but be warned - if you are venturing into anything outside of the immediately basic, they may just avoid the risk. My guess is that if you have some revenue they'd be more willing to investigate more. 

Moral of the story - check before you assume you can use Stripe with your new business.
O que é Robótica e o Melhor Curso para se Fazer Atualmente?
Published: 2020-12-25 20:45:25

Robótica é um ramo educacional e tecnológico que trata de sistemas compostos por partes mecânicas automáticas e controladas por circuitos integrados, tornando sistemas mecânicos motorizados controlados por circuitos elétricos e inteligência computacional. A robótica é objeto de estudo de diversas áreas: computação, aeroespacial, mecânica, automação, elétrica, etc.

Cada vez mais as pessoas utilizam os robôs para suas tarefas, como por exemplo o robô aspirador, e robôs para cirurgias médicas. Esta tecnologia, hoje adaptada por muitas fábricas e indústrias, tem obtido, de modo geral, êxito em questões como redução de custos, aumento de produtividade e redução de problemas trabalhistas[1]. Contudo, apesar das vantagens, os robôs acabam trazendo outros problemas específicos, como a demissão de vários funcionários humanos.


<h2>
  <strong>Robótica coletiva</strong>
</h2>


A robótica de enxame trabalha com robôs grandes e pequenos e simples onde o objetivo é a otimização da realização de tarefas coletivas complexas.


<h2>
  <strong>O fenômeno da robotização</strong>
</h2>


Robotização é o nome dado ao processo que envolve a implementação de ferramentas tecnológicas que possibilitem a substituição de tarefas outrora executadas por humanos, de forma que tais atividades passem a ser executadas por meio de robôs.

A tecnologia envolvendo a robotização é altamente sofisticada e requer elevado grau de conhecimento, e altos níveis de desenvolvimento técnico-científico. Dentre as áreas mais comumente robotizadas, temos o setor computacional, setor aeroespacial, automação industrial (indústria automobilística, têxtil, etc.), setor militar e as atividades médico-hospitalares.


<h2>
  <strong>Onde e como aprender Robótica nos dias de hoje?</strong>
</h2>

Para aprender tudo sobre robótica independente se você for um iniciante, se possui uma criança que deseja com que ela aprenda essa tecnologia ou se é um Professor e deseja ensinar a Robótica de forma Educacional, existem diversos cursos por ai do ramo e por conta disso escrevi um artigo que relata extamente o <a href="https://flaviobabos.com.br/curso-de-robotica/">Curso de Robótica</a> que melhor se encaixa na sua sitação. Ele é feito independete se você busca um curso Online e a Distância, mesmo se você é um total iniciante ou se procura um Curso de Robótica Infantil e Básica.
Solving day 25 of Advent of Code 2020 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2020-12-25 20:36:26

---
title: Solving day 25 of Advent of Code 2020 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2020 (day 25)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2020 in Javascript
---

{% youtube oGnkJCbuVKY %}
Beginners guide to building projects: My Story!
Tags: javascript, codenewbie, devjournal
Published: 2020-12-25 19:57:54

Salut👋

Before i start i would love to wish you guys Merry Christmas!🎄🎉

#Introduction <br></br>

If I were to ask every developer(beginner devs especially) What building projects means to each and everyone of them the probability that I would get the same answer from all of them would be very close to 1(for those of us that skipped math class😉 probability of an event happening ranges from 0-1, 1 being that the event is absolutely going to happen).

Please Permit me to share with you my little story. I believe it would help a lot of beginner developers avoid making the same mistake I made. Want to hear it?? OK cool allons-y🕺

When I started learning to code and joined techtwitter, i kept hearing one particular thing from our wonderful tech influencers which was "building projects is the best way to learn!" and plus you could add those projects you built to your portfolio which you would probably show to your potential employers/recruiters. 

That was the "Aha moment" for me. It occurred to me that I had found the "Holy Grail". Obviously so I thought 

Please don't get me wrong I believe that building projects is the best way to learn but I feel there is a missing piece which is not usually addressed. Please just continue my story with me.🙏

So guess what i did next I downloaded several Javascript project videos and started "building projects".🤡🤡 Two weeks in I had 4 projects already.😍😍 I felt very excited super pumped up too. 

One week later i decided to do something i had never done before. Explain my project/code to myself. I found out that I didn't understand any of the code. Why i used <code>const</code> instead of <code>let</code>  or <code>Map()</code> instead of <code>Filter()</code> Nothing!!


Sounds funny/crazy right? Do you know what i was doing wrong? If yes tell me on twitter [@d_realmaster] (https://twitter.com/d_realmaster?s=08 ). In my next article I would be writing extensively  to you what i did wrong and how i approach building projects now. It might not be 100% foul proof but it has really helped me and i believe it might help you especially if you are just starting out.

Once again i would love to wish you a happy Christmas and i hope you enjoy the rest of the year. ❤&💡
How to make transition in CSS 3
Tags: webdev
Published: 2020-12-25 19:41:49

# What is transition in CSS? 

CSS transitions allows you to change property values smoothly, over a given duration.

#How to use transition?
In this example we will create Red square. 

```
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
```
The transition effect will start when the specified CSS property (width) changes value.
```
div:hover {
  width: 300px;
}
```
That's it. You have sucesfully created a transition.

Thanks for reading :)
PWA Metadata in manifest.json
Tags: pwa, typescript, javascript, react
Published: 2020-12-25 19:30:25

Every PWA should have a manifest file, a JSON file specifying metadata of the app. Manifest.json is required to add PWA to the homescreen. It defines how the app should look like and configures the app's behavior on launch.

You can find the `manifest.json` file in `public/` directory.

It should be linked in `public/index.html` by default.
```
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
```

# Details on manifest.json config

### *short_name*
Name of your app on home screen.

### *name*
Name of app used on prompt while installing. If not present, short_name will be used.

### *icons*
It is an array of image objects that is displayed in the home screen. Each of the object in the array must have properties `src`, `sizes` and `type`. You may need to add additional property `"purpose": "any maskable"` for android devices. For Chrome, you need to provide icons of size 192x192 and 512x512 for auto scaling of icons. They are provided by default while creating PWA with create-react-app. 

### *start_url*
The home URL of page, so that it does not start from the page the user used to add the app to home screen. By default, it is set to `.`(home directory). You may modify it according to your needs.

### *display*
It customizes the browser view for your app. It can take the following values:

* *fullscreen*: Open the app in full screen. Browser UI such as address bar and navigation are hidden. Android status bar is also hidden. 
* *standalone*: The app runs in its own window, separate from the browser. Browser UI elements like address bar and navigation are hidden. Android status bar is not hidden. 
* *minimal-ui*: It is similar to the standalone mode, but minimal set of UI elements for controlling navigation are displayed. However, the UI elements may differ from browser to browser. 
* *browser*: Standard browser behavior. All browser UI are displayed. However, "Add to Home screen" is not displayed.

### *theme_color*
Sets the color of browser toolbar. It also displays this color in browser tabs while tab switching.

### *background_color*
Color to be displayed in splash screen when the app is first launched. 

### *scope*
Defines the scope of PWA. If the user navigates out of scope, the page will be served as a normal site. The start_url should be inside of scope. If the user clicks on a link outside of the scope, it will be rendered in the PWA. To open a outside link on a browser window, add `target="_blank"` to the anchor tag. 
If the scope is a relative path, the base location will be where the manifest file is located.

# Testing manifest.json

To test if your manifest.json is setup correctly, use the Chrome dev tools. In application section, navigate to Manifest subsection. 


Happy Hacking!
Remote Team Culture
Published: 2020-12-25 19:28:12

I have always been a major proponent of team culture. Liking the people you work with (or at least tolerating them) can provide huge ROI's. Sometimes you come into an existing team culture and might either adapt or express your own culture. I intend to provide some solid team culture experience I've had and continue to pursue.

#Take Inventory
What is the current team culture? What does the team want for a future culture. Is the team culture productive or counter-productive? Use team retrospectives to grow this side of your team. It is surprising that people that like each other tend to work better together.

Anyways, here is a list I use to build team culture.

#Boardgames
There is nothing better than getting great minds alike to either solve fun problems together or working against each other. Boardgames are unique in the fact that you talk. Getting to know your team and building the culture of the team is a very important part of a successful team integration. Deeply integrated teams tend to operate at a higher capacity than dysfunctional and siloed teams.

How can you do boardgames at work when most of us are remote? Table Top Simulator is your answer. There are other options out there, but Table Top Simulator is king. Actually being able to manually play a game with zoom is kind of an amazing experience and a great team builder.

#After Hours Team Outings
These are hit and miss and can easily end up in someone drinking too much and becoming a talk of the office. But consider your team culture. Would this embarrassment actually end up as a fun stab in the future, or will this affect the employees standing. This is all based on your culture. 

#Inclusiveness
If I was on a team and didn't feel included in the day to day discussions and decisions, I would not feel like a part of the team. This would directly affect my cultural impact on the team. Everyone should be included. Best, worst, no matter. Everyone is the same. Everyone has the same goal: success.

#Team Conferences
This is a very expensive way to build culture. That said, it is also very effective. Bringing your team together in an intense learning situation can create a strong trust bond which is imperative for cohesion. 

#The How
I could keep going but I wont. I mainly wanted to get my opinions on how I view teams through culture. I would rather work on a team with good culture than a team where everyone is too serious. Team culture can be fun. If you don't have fun at work, find a way. Team culture can make work awesome.

So how do you go about setting up a team culture session in a remote world?
* Boardgames - Steam/Tabletop Simulator + Zoom
* Videogames - Any online server + Zoom
* General - Zoom

#Your thoughts
What do you think about team culture? Some of us thrive in isolation and other need that connection to people. I personally need that connection and conversations to keep me interested. What other ways could you grow team culture remotely?
Do you suffer with the "too-many-tabs" syndrome ? OneTab is the solution !
Tags: extension, browser, chrome, tooling
Published: 2020-12-25 19:20:33

## Tabs, tabs, tabs

I always like to read stuff, and listen to podcasts.

So when i find something i'm interested in, i open a tab on my browser and i leave it there for ... later.

And then, i move on to the next thing, and i find another super article on Hashnode.

So i open a new tab, to read it ... later.

And someone on Twitter posts a link to a new podcast episode, so i open a new tab on my browser and save it for later.

And in the same time, i have to review some PRs on Github.

So i open a tab for each one, to remember to do it ... later.

And someone on Slack sends me a new Jira Card, so i open a new tab for it ...

And so on ...

Before lunch, my browser looks like this : 


![tabs.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608025733204/ut6EyX1II.png)

And if you use Chrome, you know that more and more tabs === more and more RAM.

Sometimes, my computer slows down, just because i have too many tabs...

## THE SOLUTION : OneTab extension

Someone at work recommended me this extension after seeing my shared screen on a Zoom meeting ...

One Tab is an extension available for Chrome and Firefox.

Once installed, when you click on it ... tadaaaam : 


![one-tab-header.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1608026706950/-Oo6jRnPa.jpeg)

It takes all your tabs and make it just one which contains the list of all your links !

And also, you can organise your links by naming the lists, so you can have a list with all your "Work" links, and another one for "Tech stuff" ...

## Try it !

Here are the links to download the extension : 

- On  [Chrome](https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall) 

- On  [Firefox](https://addons.mozilla.org/fr/firefox/addon/onetab/) 

And their  [Website](https://www.one-tab.com/)
Awesome VS Code dev containers
Tags: vscode, discuss, productivity, docker
Published: 2020-12-26 00:00:46

---
title: Awesome VS Code dev containers
published: true
date: 2020-12-25 19:05:38 UTC
tags: vscode,discuss,productivity,docker
canonical_url: https://stereobooster.com/posts/awesome-vscode-dev-containers/
---

Let’s imagine you want to play with a new language or technology. To do this you need:

1. Some tutorial or exercise or [katas](https://www.codewars.com/)/[koans](http://www.rubykoans.com/)
2. Development environment… and it is not that simple

**Side note** : possible candidates for exercise are: [MAL](https://github.com/kanaka/mal), [todomvc](http://todomvc.com/), [hnpwa](https://hnpwa.com/), [realworld](https://github.com/gothinkster/realworld).

## Development environment

When I want to play - I want to jump directly to coding. I don’t want to figure out what is [the state of the art for tooling](https://dev.to/stereobooster/what-do-you-use-for-python-development-4706). I don’t want to spend hours installing tools and configuring IDE. I don’t want to break any existing dev environments or remember which things to uninstall after the experiment.

[Visual Studio Code Remote Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) is a solution to the problem if you already use VS Code and Docker. It takes no time to spin up a new development environment with preconfigured tooling. This is what I call “[Truly Integrated Development Environment](https://stereobooster.com/posts/truly-integrated-development-environment/)”.

I’ve been working with it for a couple of weeks and so far the experience was delightful. So I decided to collect recipes for dev containers for my future experiments: **[Awesome VS Code Containers](https://github.com/stereobooster/awesome-vscode-dev-containers)**.

## PS

I already [tried out Pony](https://github.com/stereobooster/pony-lisp). Next, I want to play with Crystal, Unison, Racket, and Haskell. **With what technology or language do you want to experiment?**

Happy hacking!
Automatically Publish to npm using GitHub Actions
Tags: github, ci, npm, automation
Published: 2020-12-25 18:39:15

> This is a quick step by step on how to publish a package to NPM automatically using semantic releases. You can read more about [semantic release conventions](https://semantic-release.gitbook.io/semantic-release/) before we continue.

## What you will need

- A publish token from NPM, which you can generate in npmjs.com, in your profile.
- A token for GitHub API, which you can generate if you go to your Profile > Settings > Developer Settings > Personal access tokens. Using “repo” permissions should be enough. Add more as needed.

## Step 1: start a new workflow file

Go to your repository > Actions and create a new action.
Use the link “set up a workflow yourself” to get started

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

## Step 2: add a workflow configuration

Just copy paste this snippet into your new Action text. Then create a commit and save it.

```
name: release
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      # - name: Install dependencies and build, if needed
      #   run: npm ci && npm run build
      - name: Semantic Release
        uses: cycjimmy/semantic-release-action@v2.5.0
        env:
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

If looks like this, the you’re doing it right:

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

## Step 3: make sure you can publish

Let's check your `package.json` to make sure you have the configuration to allow a publish command to NPM.

Copy this snippet and change with your repository name:

```json
"repository": {
  "type": "git",
  "url": "https://github.com/user/repo.git"
},
"publishConfig": {
  "access": "public"
},
```

## Step 4: add GitHub and NPM secrets

Go to your project Settings > Secrets and add `GH_TOKEN` and `NPM_TOKEN` secrets.

You can add to a repository or to an entire organisation. I use orgs when I have several small packages under the same scope.

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

And that’s it!

Now you can start pushing to your repository and see it auto-published if everything went as planned.

Any changes to master will trigger a new patch/minor/major change based on your commits.