teleren/devto huggingface dataset:
My #100DOC - Day 52
Tags: 100daysofcode, challenge
Published: 2020-10-18 15:52:10

### Day 52: October 17, 2020

#### **Today's Progress**: 
1. **[Redesign of my portfolio](https://github.com/pablohs1986/pablohs1986.github.io)** (2h):<br>I added Animate.css library, Favicons and implement tablet size media queries.
    
#### **What I learned**: 
* Implement Animate.css library.
* Review of media queries. 

#### **Total time**:
2h.
GCloud + Docker problema de unauthorized
Tags: gcloud, docker, google
Published: 2020-10-18 15:35:20

---
title: GCloud + Docker problema de unauthorized
published: true
description: Minha solução para o problema de autenticação do docker para o Gcloud
tags: gcloud, docker, google
//cover_image: https://direct_url_to_image.jpg
---

> unauthorized: You don't have the needed permissions to perform this operation, and you may have invalid credentials. To authenticate your request, follow the steps in: https://cloud.google.com/container-registry/docs/advanced-authentication

Eu estava com problema para fazer deploy para o Google Container.
Por algum motivo meu Docker no Windows não estava conseguindo se conectar ao GCloud para fazer o push das imagens.

Depois de tentar de várias formas, a solução prática e rápida que encontrei foi usar esse comando.

```sh
gcloud docker -- pull gcr.io/image:tag
```
Documentação:  https://cloud.google.com/sdk/gcloud/reference/docker

Ao rodar esse comando, ele usa as credenciais do Gcloud para se autenticar com o docker e fazer tanto o Push quanto o Pull das imagens.
HackToberFest:- Let's Celebrate Open Source together
Tags: hacktoberfest, opensource, python, machinelearning
Published: 2020-10-18 14:24:36

## What is Hacktoberfest?

Hacktoberfest is a month-long celebration of open source software run by DigitalOcean in partnership with GitHub and Twilio. Hacktoberfest is open to everyone in our global community!

## What I Learned From Hacktoberfest

Being well versed with the Open Source Community, hacktoberfest was still a cool challenge.

It encourages us to contribute to the Open Source World. The contest is very well suited for the beginners to get hands-on to the Open Source world. For the Intermediates and Advance Open Source Developers. It encourages to contribute to some of the Favourites Repos/ Projects.

Finding and Solving Issues, Solving old issues, Fixing Bugs feels so much Satisfying. This makes both the Maintainer and the Contributor Happy.

Getting some additional Perks from Some specific organization encourages to contribute more.

Here I end up this Post. Overall the contest was great. Hope you liked it.

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
Dev News - Top articles this week for developers
Tags: programming, showdev, discuss, productivity
Published: 2020-10-18 14:24:13

---
title: Dev News - Top articles this week for developers
published: true
description: Devs news from last week
tags: programming,showdev,discuss,productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/080oy78lcln2b5uwqxem.jpg
---
Hey Devs

I have compiled a list of top articles from last week that you might find interesting

**1. [A warning about Glassdoor](https://www.reddit.com/r/jobs/comments/jbod57/a_warning_about_glassdoor/)**

Many developers rely on Glassdoor for company reviews. But is Glassdoor really that reliable to look for the company review. This article reflects a perspective about Glassdoor

**2. [Seems like AWS forked an open-source project and presented themselves a new service](https://twitter.com/tim_nolet/status/1317061818574082050)**

The Twitter user @tim_nolet claims that AWS has forked this project and started with a new service. Of course, it's legal but you know?

**3. [VS-Code extension to make your life easier](https://dev.to/benjaminmock/vs-code-extensions-to-become-a-more-productive-developer-5a62)**

This post lists some useful VS-Code extensions to help you write software better. My favorite on the list is Bracket Pair Colorizer, an Indent rainbow.

**4. [Free course on Docker and Kubernetes](https://www.freecodecamp.org/news/course-on-docker-and-kubernetes/)**

This free course published on the FreeCodeCamp youtube channel that helps beginners learn the fundamentals of Docker and Kubernetes better. Containers have changed how we deliver Software so learning them gives you much advantage.  This course covers docker architecture, images, volumes, and Kubernetes pods, services, configs, etc. Much recommended.

**5. [150+ Stanford Computer Science is available online](https://www.classcentral.com/report/stanford-on-campus-courses/)**

CS Degree has seen big popularity in the last decade. And that popularity is not going anywhere. This article lists down nearly 150 courses from Stanford that are found online.

**6. [Computer Scientists Break Traveling Salesperson Record](https://www.quantamagazine.org/computer-scientists-break-traveling-salesperson-record-20201008/)**

After nearly 44 years, scientists have found a better way to approximate solutions to the notoriously difficult traveling salesperson problem. Traveling salesperson problem has applications ranging from DNA sequencing to ride-sharing logistics. So finding a better solution to seek the shortest round trip is truly inspiring. Read the full article on finding how traveling  salesperson has been a real challenge in CS.

**7. [docs.github.com is open-sourced](https://github.blog/2020-10-14-how-we-open-sourced-docs-github-com/)**

Github open-sourced all of its product documentation. This will help in understanding how Github application design, workflow really works, and how we can benefit from it. And the company claims it is the first private production service that we’ve migrated into the open.

That's it :)

I hope you find it useful 

Thank you for reading :) :)
An event that helped me get over Impostor Syndrome
Tags: hacktoberfest, opensource, github, beginners
Published: 2020-10-18 14:21:38

For the past seven years, [DigitalOcean](https://www.digitalocean.com) has hosted Hacktoberfest: a community-wide celebration of open source.

Hacktoberfest® is open to everyone in our global community. Whether you’re a developer, student learning to code, event host, or a company of any size, you can help drive the growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.

Every year in October, **Digital Ocean** and **GitHub** team up for an online event that celebrates open-source. Open-Source is one of the most growing areas in development these years. Also, it has made it possible for beginners to grow and develop their skills as a programmer/developer. On the brighter side, you get some really cool freebies as well! Let’s talk in detail about this event.

First and foremost, you need to register for Hacktoberfest, for that you need a GitHub account, if you don’t have one, chill we’ve got you covered. [Go to this link](https://github.com/join) and create an account for free!
Once your GitHub account is created, you can register for Hacktoberfest [here](https://hacktoberfest.digitalocean.com)! After registering for Hacktoberfest, you are officially a participant of Hacktoberfest! Now, you just need to start contributing to any projects out there on GitHub.

Here’s how –
First, learn about GitHub and pull requests if you don’t know about them. 

Once, you have learned about pull requests and GitHub, you need to make 4 pull requests to any open-source projects which are a part of the Hacktoberfest topic. pull requests reported as spam or invalid would not be eligible.

After you make your pull requests, contribute by finding bugs and remove them, and finally pushing them into the repository. Also, you can check your progress on the Hacktoberfest website!

## What I Learned From Hacktoberfest

Participating in Hacktoberfest 2020, Making 4+ pull requests made me realize that everything I've learned over the years is not going in vain, And when my first pull request got accepted, The feeling was amazing. I learned that no one is less, If provided with the right platform and right resources, Each individual can do miracles.

The event is a great opportunity to grow as a developer and improve your skills, also if you make 4 successful pull requests you are eligible to get a really cool T-Shirt.
Coding vs Coffee
Tags: coding, coffee
Published: 2020-10-28 17:52:45

---
title: Coding vs Coffee
published: true
date: 2020-10-18 14:00:00 UTC
tags: #coding,#coffee
canonical_url: https://thelearning.dev/blog/coding_and_coffee/
---

I have forever been a lover of coffee. When I say forever, it’s right from when I was 2, to be precise. Yes, I do remember my first smell of coffee. Unfortunately, neither I nor my mom are the best coffee makers in the world. Not that it’s terrible or anything, but it’s not the best I have drunk.

Now let’s come to the act of drinking coffee itself. I am not an addict, I drink 2 cups of coffee a day, and that’s about it. Occasionally, rarely 4. Coffee lovers always have this pride that no one can love coffee as they do. I had that, too, for a brief period. Maybe I didn’t transform into an adult completely.

For you to fight over your love for coffee, you have to be in the presence of good coffee. If not, everyone would just call out “coffee is bad” and mind their own business. In the presence of good coffee, love comes to life. Your eyes close as you sip through that hot gold savoring it every bit. Let me stop right there before I convert this into another poetry about coffee.

Fortunately or unfortunately, good coffee was beyond my reach until I was 23. As I said, the coffee lovers started rising, and we all started sharing how much we love coffee. It was a celebration every time we have coffee together. There is black, dark, light, cold, whatnot—the varieties, the colors, the experiences.

As a coffee lover, It would be unfair to compare my love for coffee with my fellow mates. To imagine that their love is better to mine. Just because an expresso shot doesn’t excite me doesn’t mean I am a bad coffee lover. My inability to take a sip of black coffee can’t question my love for coffee, Right?

Similarly, if you love technology, it doesn’t matter how much other people love it, what tool they are using, how fast they can gulp a concept down. You all have your own taste and your own pace.

No technology is better than the other. It’s all essential, it’s all necessary.

As a technologist, let’s come together and share our love for technology just like we did for coffee: the varieties, the colors, the experiences, the good and the bad.

Let’s share what we learned. Let’s spread knowledge.
µCE 
Published: 2020-10-18 13:01:36

<em>...µhtml based Custom Elements...</em> 

You can test it here : [µCE](https://flems.io/#0=N4IgtglgJlA2CmIBcBWATAOgCxoDQgGcBjAJwHtZZkBtABl1oF18AzCBAm0AOwEMxESEBgAWAFzBV8RMtzHw5yEAB4o8AG4BaXiTEQiHAATQAvAB0Qa9QFcC8EhcO37fAeZA6xATyuOA9AB8ZtzBwSD4dghEerKcQrRIWAAcIAC+uDz8gsIAVpzSsvKKQhBgAA5kuobAamzc8LiG4pKphizkYIYA5OJiZQRIfn7W3GUA1gDmGDJgw0TwAPxgZFDWCF0A3KHcMtwEYk4ksAAiGoYmhgAUziSu8ACU5wGGhsEvAAa9-YN+VhhiZD8vDKECBun0HAWNzuJgAJMBoVlUu9trUIPVLl0rNpwQZ4AQuo1gG9DEReJQAIIgpBOOy3LJPEkvFjwMREETXI6ndTXOl3e73JkvQz-EQKS5QXhiXhPQyS6UYPKyS4C3DbF5kABGdPU8CgFLEYhIEE11nkA0M1C6iIEXWYJJJvAIXh2hilRpNZvgAGERLxuBM9ZcxvAvI0APqNdTk6wPapC6MkQwVfYEc5ugDuvAgBzEIggBGm5NgVIgl2jsFjgu4wsMeYLGBICjUJEuKbEBGrL3SDprbVZ7IAqnTLnHiX3hVYbhg7GIDR7TfJLhYbfALI14P8dIGxBgK1WST2Qn2m9wW22yKnHuPa+20wAye91-OF5qwIUfD-C5TzOT2Qz7F4CDuFABZlLAvBeEgmqwGQRBjBYQQTrWk4aMO9g0so6JlGahiyNhZruPCo6PCYzz1oWLJsiI6Gtg8qQWIEX4vMofi-vIJBISh35rFx3HCvCd4YGAwKXJcYikc8b7vMosAQAE8K7noYgIKkrFyQE7z3AxyG1qxvFfiifY6ak9xbMe4QgDMIIICQSiarwmrwFIhDOfA0QQLESgAIwAMyJN5aQZCAdxKNMBD5FZhQKGIShpMwIBydwYxxNQmQCEoExNgoCCxfg1hHEoXwDEMIzjFMMx+Fl8A5ayAAC3kYI1tC-AWYhVdl3C5YqkXeGU2TEMaZR5SAZRSuy+I0NQ1CaN5+DLKsCAYPAAAeFS6AQJggMw1BzVFewHNVtUHBc224HQrAjEQZ3eQAnLgaBzfQTAJZE7kxHsSgJN5ADs8X4KFQjWPMVhpEAA)

```html
devuser : <input oninput="fetchUserPosts(this.value)"/>

<dev-articles id="devuser" username="artydev" />
```


```js
import {define, html} from 'https://unpkg.com/uce?module';

const urlDev = (username) =>  
  `https://dev.to/api/articles?username=${username}`

define('dev-articles', {
  callApi: username =>
    fetch(urlDev(username))
      .then(data => data.json()),

  observedAttributes: ['username'],
  
  async attributeChanged(key, _, value) {
    var posts = await this.callApi(value)
    this.render(posts)
  },
  
  fetchUser(e) {
     devuser.setAttribute("username", e.target.value)
  },

  render(posts) {
    posts && this.html
      `
        <center style="display:block">
          devUser: <input oninput="${(e) => this.fetchUser(e)}"/>
        </center>
        <ul>
          ${posts.map((t) => html`<li>${t.title}</li>`)}
        </ul>
      `
  }
});

```
Fix build fail when you have git repo or submodule on your npm packages
Tags: npm, vue, build
Published: 2020-10-18 13:45:37

I use GitLab CI/CD and [GitLab Runner](https://docs.gitlab.com/runner/) for builds. Today, one of my Vuejs projects suddenly started to fail builds. When I read logs I found out that one of the dependencies in `node_modules` contains the `git` folder. 

The quick fix for situations like these is to delete the `git` folder from your npm package folder. Here is the command you can add to your build script for Linux

`rm -rf node_modules/*/.git/`

and if you are on windows you can add the following command:

`Remove-Item -Recurse -Confirm:$false node_modules/*/.git/`
Como instalar o Atom no Ubuntu Bionic
Tags: ubuntu, github, bash, atom
Published: 2020-10-18 13:18:30

Por alguma razão o [script de instalação](https://packagecloud.io/AtomEditor/atom/install#bash-deb) padrão do Atom para o Ubuntu [não está funcionando](https://github.com/atom/atom/issues/20409).

## Instalação
Para instalar manualmente o Atom no Ubuntu digite o seguinte comando:
```bash
    wget -qO - https://packagecloud.io/AtomEditor/atom/gpgkey | sudo apt-key add - &&
    sudo sh -c 'echo "deb [arch=amd64] https://packagecloud.io/AtomEditor/atom/any/ any main" > /etc/apt/sources.list.d/atom.list' &&
    sudo apt-get update && sudo apt-get install atom -y
```
## Versões mais recentes
Testei apenas na versão Bionic do Ubuntu porém creio que esses comandos devem funcionar também em versões mais recentes.

## Atualização automática
Apesar dessa instalação ser manual a atualização automática do Atom funcionará normalmente após a instalação.

## Grupo no Facebook
Participe do [grupo Atom no Facebook](https://www.facebook.com/groups/atom.io).
Day 39 of 100DaysOfCode
Tags: 100daysofcode, javascript, jquery, codenewbie
Published: 2020-10-18 12:59:39

Hello!

Today I finished the freeCodeCamp jQuery challenges and started reading CH9 of Eloquent JavaScript. Learning jQuery felt awesome and I like that I get a more complete understanding of the web. 

Chapter 9 of Eloquent JavaScript is all about modules and packages. It focuses on putting some effort into making the code more readable and maintainable. 

### What I did today:

#### 1. Finished the jQuery challenges
https://www.freecodecamp.org/learn/front-end-libraries/jquery

#### What I learned from it:
* What is jQuery
* How to write jQuery statements
* How to use selectors
* How to chain functions

#### 2. Started reading chapter 10 of EJS
https://eloquentjavascript.net/10_modules.html

#### What I learned from it:
* Learnt about modules
* Got introduced to packages
* How making modules worked in the past and how it works now

#### Time spent learning:
Task 'FCC'. Elapsed time: 0 h 37 min 53 s
Task 'Reading EJS'. Elapsed time: 0 h 29 min 12 s

#### Total time: 1 h 7 min 5 s
Time spent is tracked by my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about).

**Outro**
That's it! Thank you for reading and see you all tomorrow!
Dark mode in your web app
Tags: html, css, javascript, webdev
Published: 2020-10-18 12:42:09

{% youtube 91ShjFGlICE %}

Implement dark mode in your web app. #html #css #javascript

Step 1. Set background and text colors using CSS variables. 
https://github.com/nibmz7/live-parade-state/blob/master/dev/main.css#L22-L86

Step 2. Apply variables to elements.
https://github.com/nibmz7/live-parade-state/blob/master/ui/global_styles.ts#L63-L64

Step 3. Toggle the dark mode class on document's body and save the user's preference in local storage.
https://github.com/nibmz7/live-parade-state/blob/master/ui/views/view_switcher.ts#L92-L98

Step 4. Add a script at the start of 'body' tag to load dark mode preference.
https://github.com/nibmz7/live-parade-state/blob/master/dev/index-mock.html#L18-L21
Programar Mais Rápido e Ser Mais Produtivo no Visual Studio Code
Tags: productivity, machinelearning
Published: 2020-10-18 12:15:01

 {% youtube FCC2GbStmfc %}

״Para transformar o Visual Studio Code de um editor de código simples para uma IDE é facinho facinho com as infinitas extensões disponíveis 😂 mas isso pode mais atrapalhar do que ajudar. Então esse vídeo é a minha busca em entender quais extensões VSCode vão me ajudar a programar mais rápido e ser mais produtivo. O bom é que este compilado serve para qualquer linguagem de programação, então se você está na busca de qual a melhor ide para programar ou qual melhor editor de código, o VS Code criado pela Microsoft vai ser uma ótima alternativa open source. Curiosidade: eu usava o editor Vim, então vai ser uma experiência interessante.״
Ingress with KinD not on 80 port
Tags: kind, wsl2
Published: 2020-10-18 12:13:07

<sub><span>Photo by <a href="https://unsplash.com/@tvick">Taylor Vick</a> on <a href="https://unsplash.com/s/photos/network">Unsplash</a></span></sub>

I use [Kind](https://kind.sigs.k8s.io/) on a Windows laptop with WSL2.

It's a wonderful tool, that i use along with [Tilt](https://tilt.dev/). 

I tried to use [ingress as described on the site](https://deploy-preview-1877--k8s-kind.netlify.app/docs/user/ingress/) but it was failing.

# WSL2 and nodePort

I discovered first, that i had to use a [custom configuration](https://deploy-preview-1877--k8s-kind.netlify.app/docs/user/using-wsl2/) for KinD.

But even with this one, it was failing.

The connection keeps getting refused.

I tried using [Lens](https://k8slens.dev/), to see if i can access to the service. And i did, briefly.

After diving into [different issues](https://github.com/kubernetes-sigs/kind/issues/1695) or [this one](https://github.com/docker/for-win/issues/7094), i decide to change default port for serving ingress. 

# Change Port

As i a m using a corporate laptop, my 80 port cannot be used for dev purpose as a proxy is already using it.
So i had to change it. Let's pick port 5080.

I change my configuration for cluster :

```yaml
cat <<EOF | kind create cluster --name "${KIND_CLUSTER_NAME}" --config=-
kind: Cluster
apiVersion: kind.x-k8s.io/v1alpha4
nodes:
- role: control-plane
- role: worker
  extraPortMappings:
  - containerPort: 5080
    hostPort: 5080
    protocol: TCP
  - containerPort: 443
    hostPort: 443
    protocol: TCP
  kubeadmConfigPatches:
  - |
    kind: JoinConfiguration
    nodeRegistration:
      kubeletExtraArgs:
        node-labels: "ingress-ready=true"
EOF

```

And i change the yaml Ambassador operator used for KinD by the following :


```yaml
---
apiVersion: getambassador.io/v2
kind: AmbassadorInstallation
metadata:
  name: ambassador
spec:
  installOSS: true
  helmValues:
    deploymentTool: amb-oper-kind
    tolerations:
      - key: "node-role.kubernetes.io/master"
        operator: Equal
        effect: NoSchedule
    replicaCount: 1
    deploymentStrategy:
      type: Recreate
    nodeSelector:
      ingress-ready: "true"
    service:
      type: NodePort
      ports:
        - name: http
          port: 80
          hostPort: 5080
          targetPort: 8080
          protocol: TCP
        - name: https
          port: 443
          hostPort: 443
          targetPort: 8443
          protocol: TCP
```

And then, by applying the [example Ingress](https://deploy-preview-1877--k8s-kind.netlify.app/docs/user/ingress/#using-ingress) on the Kind site, i can finally do 

```bash
curl localhost:5080/foo
```


Hope this helps !
Gamedevlog: TilMap Part 3b
Tags: gamedevlog, android, vr, tilemap
Published: 2020-10-18 12:09:31

# Building on Part 3a
This main purpose of this update is to expand upon the previous work to generate a level by adding the following features:
* Create an empty tile which indicates the edge of a scene.
* Prevent the player from entering the empty tiles.

# The Empty Tile
For this I generated a simple tile model in blender and exported it as obj and mtl files:
![empty tile model](https://dev-to-uploads.s3.amazonaws.com/i/29e0wbmlh4td908tw71m.PNG)

Then created an empty tile file which can be reference by all tiles at the edge of the scene.
![empty tile file](https://dev-to-uploads.s3.amazonaws.com/i/zlorzvy6xa9ve1s394il.PNG)


# VTF File changes
The eagle eyed among you may have notice the new <code>TF</code> line in the vtf file. 
I added this to set the fluidity of a tile i.e. how easily the player can move through the tile, this value will be multiplied by the distance the player wishes to move to determine how far they actually move.
Most tiles will have a value of 1.0 for this, but tiles which the player can't enter will have a value of 0.0 to prevent any movement within the tile, going forward this will also allow tiles which slow the player down e.g. quicksand or mud or even tiles which speed up the players movement.

# Other changes
So far, as part of the process of using the fluidity value I have decided to revert back to using my <code>Vector3Float</code> classes along with a new <code>Position3Float</code> class rather than using <code>Triple</code>s whenever this makes for more readable code, e.g. if the 3 values are simply related then I will leave them as a <code>Triple</code> but if the 3 values represent either a 3D Vector or position in 3D space, I think it makes the code more readable to use the custom classes, it also allows me to add operator overloads to make subtracting one position from another possible among other things.

# The Plan for development
From here I need to brush up on my math skills to determine where the player should move in the <code>TileMap</code> based on the fluidity values. 

Then I shall generate a simple level which I can use for testing, and develop more of a sense of where the gameplay is heading, my current thinking is a VR world building game where you can place trees, plants, fences etc to build up your own environment, to do this I foresee the following advancements in the design:
* A HUD style menu, to select the objects which the player can place into the world.
* Enabling transparency so the player can see where the object would be before they place it.
* Updating the .vtf files when changes to the tile are made. 
* Some sort of collision detection so objects are not placed on top of each other and so the player can't walk through the objects they have placed.

Until next time, Stay safe and happy coding.
Graham
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-18 12:03:39

## My Hacktoberfest Experience
I participated in Hacktoberfest for the first time this year and I must say I was very happy when I found out that all my Pull Requests were accepted.
I participated in an Open Source Day event organized by the virtual Grace Hopper Conference and that was how I was able to get my PRs for hacktoberfest. I really enjoyed the whole experience and found making open source contributions very exciting and fulfilling. 

## What I Learned From Hacktoberfest

I learnt not to downplay my little contributions. You can make contributions that really seem easy to you but they actually count as contributions and go a great way in helping an organization or project. One more thing, whenever you are stuck, feel free to ask questions. This goes a long way in helping you making your contributions rather than quiting because you do not understand something. 

Here are my Pull Requests that were accepted for hacktoberfest:


![my contributions](https://dev-to-uploads.s3.amazonaws.com/i/q4ii18o1xp18qt1r1l0o.PNG)
 
The Future is Open!