teleren/devto huggingface dataset:
Finally Got The Autocomplete
Tags: beginners, todayilearned
Published: 2021-06-28 22:24:22

In my post-bootcamp haze, it registered in my brain that zsh came on the stage as the default shell for Apple(1). My MacBook Air, in all of it's glory, had been giving me such a confidence boost every time I was in the Terminal. 

"cd and ls- that's the safest thing I can do in the Terminal and still feel kind of like I might appear to know what I am doing" and I could look for my files in what felt to be an organizational structure at the time. 

But that tab key. It would autofill! Save me from unneeded typing! And soul-crushing mistakes! I hit quite a mistake high score with my React solo project, doing things like getting my props and state mixed up because I couldn't begin to tell you what the difference was(2).

Once I came to, and started to create projects again, I realized the autocomplete was no longer. Luckily, I did not run the "you are a terrible, horrible, no good very bad developer"(3) speech like I have in the past, but instead, I just figured "well I will benefit from typing things out and paying attention to detail."

Which is a noble way of being lazy in solving a problem, I suppose. 

But today, TODAY, it was the day. Autocomplete.

After a few googles, and a few "omg what if this is fake code and it will give me eternal blue screen of death", I decided that 1) I will have zsh, not bash, as my default, since it is an option, and 2) to use the following two lines: 

echo 'autoload -Uz compinit && compinit' >> ~/.zshrc
source ~/.zshrc

A quick restart of my shell, and oooh boy, look who is tabbing all over the Terminal?! 

Yep. It's me. 

And now it can be you, too, if you have also been silly this whole time. And have a Mac. And would like zsh to be your default shell.


(1) macOS 10.15 Catalina release in on June 3, 2019 https://www.apple.com/newsroom/2019/06/apple-previews-macos-catalina/

(2) Kent C Dodd puts it well in the following: "What's the difference between props and state in React? ... 'props' (short for 'properties') is an object of arbitrary inputs a React function component accepts as the first argument. 'state' is data that changes over the lifetime of a specific instance of a React component." https://kentcdodds.com/blog/props-vs-state

(3) https://en.wikipedia.org/wiki/Alexander_and_the_Terrible,_Horrible,_No_Good,_Very_Bad_Day
Truco con console.log para hacer Debug
Tags: spanish, javascript, webdev
Published: 2021-06-28 22:09:00

Idiomas: [🇺🇸] [English](https://dev.to/equiman/console-log-hack-for-debugging-3cfi) - [🇪🇸] [Español](https://dev.to/equimancho/truco-con-console-log-para-hacer-debug-9j2)

---

Algunas veces necesitamos mostrar en la consola múltiples valores de las variables con `console.log` y para poderlos identificar adicionamos algún texto inicial el cual indica la salida a la que corresponde cada variable.

```javascript
console.log("name: ", name);
console.log("age: ", age);
console.log("language: ", language);
console.log("isDev: ", isDev);
```

![console.log](https://dev-to-uploads.s3.amazonaws.com/i/symvddqmsl0h040vi5v4.png)

# Truco

Una forma de hacer lo mismo sin tener que escribir esos textos de identificación es meter todas esas variables dentro de un `{}`.

```javascript
   console.log( {name, age, language, isDev} );
```

![console.log](https://dev-to-uploads.s3.amazonaws.com/i/jlagkde8ofy00ui3wyvg.png)

Pero espera un momento, si cambiamos una sola palabra puede ser aún mejor.

# Super truco

Cambia `.log` por `.table` y ya está. Vamos a poder ver el resultado tanto de nombres como de valores de forma más legible.

```javascript
   console.table( {name, age, language, isDev} );
```

![console.table](https://dev-to-uploads.s3.amazonaws.com/i/70rlfbb8wa2pctn1jzjb.png)

---

# VS Code

Existe una extension llamada [Debug Snippets](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets) que se dedica al tema de depuración e incluye varias opciones para usar `console.log`.

[![Debug Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vd2etexv2eswzd1lcit.png)](https://marketplace.visualstudio.com/items?itemName=deinsoftware.debug-snippets)

Dos de los snippets están relacionados con los trucos mencionados anteriormente.

| Trigger | Description                                                                                        | Result JS/TS                                                        |
| ------: | ------------------------ | -------------------------- |
|  `cld→` |   log with destructuring | `console.log({$name})█`                                               |
|  `ctd→` |   table with destructuring | `console.table({$name})█`                                             |

---

**That’s All Folks!**
**Happy Coding** 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinsoftware)
Starting Your Own Tech Blog
Tags: writing, blogging, writingtips, writer
Published: 2022-02-08 00:51:27

---
title: Starting Your Own Tech Blog
published: true
date: 2021-06-28 21:52:23 UTC
tags: writing,blogging,writingtips,writer
canonical_url: https://blog.insiderattack.net/starting-your-own-tech-blog-bbc663fca981
---

[![](https://cdn-images-1.medium.com/max/2600/1*gZ3TAIQeHSndmsrtxEHosg.jpeg)](https://blog.insiderattack.net/starting-your-own-tech-blog-bbc663fca981?source=rss----57f0c4748c10---4)

Tips and tricks for building your technical writing portfolio

[Continue reading on Deepal’s Blog »](https://blog.insiderattack.net/starting-your-own-tech-blog-bbc663fca981?source=rss----57f0c4748c10---4)
Cloudflare Starter Kit
Tags: javascript, cdn, cloudflare, boilerplate
Published: 2021-06-28 21:21:33

Cloudflare Workers unlocks the new possibility for web developers to easily host small server-side code snippets at CDN edge locations, ensuring that it will be handled at the server closest to the end-users.

This is just perfect solution if you need to complement your single-page application with server-side logic. Things such as authentication, XRSS protection, HTML page rendering, serving WordPress, Webflow, ZenDesk, and other 3rd party services under your primary domain name, e.g. `example.com/blog` vs `blog.example.com`, proxying HTTP requests to 3rd-party APIs...

Find the template (boilerplate) code here:

https://github.com/kriasoft/cloudflare-starter-kit
CSS ::first-letter
Tags: css, pseudoelements
Published: 2021-06-28 20:50:21

---
title: CSS ::first-letter
published: true
description: Substituindo o método toUpperCase por um pseudo-elemento do CSS
tags: CSS, pseudoelements
cover_image: https://images.unsplash.com/photo-1468404166635-56e2d75ee491?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1050&q=80
---

É comum olharmos arquivos de javascript e acabarmos encontrando um `toUpperCase()` no meio do código sendo usado pra deixar um texto em maiúsculo, e algumas vezes, pra deixar só a primeira letra de uma frase em maiúsculo.

Isso funciona? Funciona. É o ideal? Acredito que não. Nesses casos estamos usando JS pra controlar o estilo de alguma parte da nossa tela, e nesse caso o que a gente deve priorizar é a utilização do CSS.

E, não por acaso, apenas com CSS conseguimos definir a primeira letra como maiúscula.

Pra resolver isso precisamos usar o pseudo-elemento `::first-letter`.

Pra exemplificar vamos usar esse trecho de HTML:

```html
<p class="message">evellyn, seu endereço foi alterado.</p>
```

Temos um parágrafo com a classe `message` e com o texto "evellyn, seu endereço foi alterado.", o ideal é o meu nome aparecer com a primeira letra em maiúsculo, com CSS conseguimos fazer isso da seguinte maneira:

```css
.message::first-letter {
  text-transform: uppercase;
}
```

Com isso alteramos o estilo apenas a primeira letra do seletor `.message`, assim a frase vai aparecer do jeito esperado na tela: "Evellyn, seu endereço foi alterado."

---

Com o JS conseguimos fazer muitas coisas mas nem sempre ele é a ferramenta certa pra fazermos tudo, por isso é importante sempre pesquisarmos se com CSS não conseguimos fazer aquela mudança visual na nossa página.

--- 

#### Links úteis

- Você pode ver mais detalhes sobre esse pseudo-elemento na [documentação da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter).


- [Ver post original](https://evellynlima.com.br/primeira-letra-em-maiusculo-com-css/)

- [Foto tirada por Diomari Madulara](https://unsplash.com/@diomari)
Javascript-State-Machine
Tags: fsm
Published: 2021-06-28 14:07:16

Although XState is a very nice library, it is perhaps to complicated for common use cases.

[Javascript-State-Machine](https://flems.io/#0=N4IgtglgJlA2CmIBcBWAbAOgCwEYA0IAZhAgM7IDaoAdgIZiJIgYAWALmLCAQMYD21NvEHIQAHigQAbgAJoAXgDktAA4rFAPgA61GTJ1iA9JKnbqO7iFLwEPNhAHkmWJAAYQAXzw16jZgCtyXgEhESYIMBU+ACc2GX9aKVpSHmiIFTYAZTZaIQBZWh4WCGp4GUJovjAZRXY2FVIkQ0MeKGoMUgBrAE8VQs6MKHgpQwSklLSMgFpSHKEpsELi0sUAbh0dfmpZmWzc+AKikrL5eMTk1PSsuYOl4-XzakIAV2o7B10AfQAReDA+GQACgAlDJgDo9ElouVSNVTqUAO67G6HZbwQHg3RyagQNhIGqkPiwaCKPAQmRsaK0ba4j6NGQUcl6PTAGR0Bj4xQMWBsUnMvQVKqcwnEqB8il8TnEgCOzxJMi8TOZrPZ8E5FXg8AAXvBxeVKmApRBZSS8BLhUT5QqyVj+SrfJyklE0jq+YLDTUZXKxWa2JKagBzZKKfmK23KtkOmpbIbbXVm92coOkPXmz3G70hjxKgC65I8wIeMmi8DYz2iukIsIe2ceLze9gEMgAgmogaDMXoS2WKzIAAZKsQsHAaPLdFttqYyAAkwF+-w6Nw8RmHZn5YgARs82H7dAotOAbGwDzIBDxiTxOvID-O+BhuWwQQfR0ejFudwI18zN9vd3IoNeRAltq8AnmeF5Xjefx3hqIFPiAGgAGLATqb6-p+g7vn++4gE6MQQDqYFvBBgG3hgeEuuiwLPgAaqo+GoYYWEYeGP4fnuAEHjGwjWER54QJepHQRg3FxvBGgAMICLG1hoexX4DtQtY6PW7xNiW1BDNCIJguS1hsAAKhE8B8NugI6fIGi6eGqgqBgJSlNEAASBl5AAMjIpytioIJFsyD6DBApC0BuCBQJ5MhkTw1KAgeD4Hr60TPPAoIAPxss8sCwDI+IHpIwWhfAUAHkqsE6oFBVhRFUUxQeZWgdwFJJSlMjpdQmXZblID5SFYUleGFEEfAFW9UV1XCdF1Cxbh9GUQlTXJWlGVZTl+jdUFo3FSASqidYI2FeFpw1VNXHSTxDWJYtrXLZ1a09Qd-V6F4rjUUpGzUAiJRQHwCIYLeEU-NBT7UGRAgGVSNKNropwaVpOiw-A0TA5Y-CRCQiOiBuIU2JY1i2FDTggFgrhuJ43ggKqogiaQQQgFsoRsJj6G6J2Mh9DAJQBviOCuCoAAeflY5eAaVK8UBICLmrUH5hAhDMQ34gATFg-N+Tw5aEtE+JRCUQjRDW73MdQSD3VVrNC50IumZpSAllAatEjE+Khf0asa07MivPpNa4zY8BqdsogAJxIDgKCeDmBDEtQnROFQFO+KIkBsCwaRcAQ5ZcEwdQNE0hivColsiVUhjJ6nJAAAKKxgrjYKXuLl7A94lBggSWGwvR+BMVwRwQlNMHkR6c4hmR5J4QA) 

```js
import javascriptStateMachine from 'https://cdn.skypack.dev/javascript-state-machine';

const StateMachine = javascriptStateMachine;

function _Demo () {
  var fsm = new StateMachine({
  init: 'solid',
  transitions: [
      { name: 'melt',     from: 'solid',  to: 'liquid' },
      { name: 'freeze',   from: 'liquid', to: 'solid'  },
      { name: 'vaporize', from: 'liquid', to: 'gas'    },
      { name: 'condense', from: 'gas',    to: 'liquid' }
    ]
  });
 return fsm;
}

function App () {
  return `
    <h1>My App - ${Demo.state}</h1>
    <button id="melt" onclick="Demo.melt()">Melt</button>
    <button id="freeze" onclick="Demo.freeze()">Freeze</button>
    <button id="vaporize" onclick="Demo.vaporize()">Vaporize</button> 
    <button id="condense" onclick="Demo.condense()">Condense</button>
  `
}

function render () {
 
  setTimeout(() => {
    app.innerHTML = App();
    melt.disabled = Demo.can("melt", true) ? null : "disabled"
    freeze.disabled = Demo.can("freeze", true) ? null : "disabled"
    vaporize.disabled = Demo.can("vaporize", true) ? null : "disabled"
    condense.disabled = Demo.can("condense", true) ? null : "disabled"
  },0)
}

window.Demo = _Demo()
Demo.onTransition = render
render()


```
Side Projects - how do you choose a tech stack?
Tags: help, discuss, codenewbie, webdev
Published: 2021-06-28 19:45:39

To get my hands dirty and continue learning a little more holistically I have been wanting to get started on a side project for a long time. What’s been holding me back so far is the sheer abundance of options - I feel like a little kid at the candy store. Torn somewhere between frantically running around and completely paralysed. 

During the bootcamp I participated in, we created our own web app with React, Node & MongoDB and tested a little with Cypress. Deployment / Hosting was not part of the course. Now while these are probably solid options, these choices were made for me. Now I am wondering, if I am completely free to choose, how do I decide on the stack for a project? 

I get that this highly depends on the project’s requirements and personal preferences. But say I want to create a very basic portfolio page - think virtual business card, really nothing fancy as an MVP (else I will literally never even try this). 

I discussed this with colleagues and got pretty diverse (and sometimes confusing) answers. This these perspectives helped me a lot put my own research into perspective, I would love to hear from you: 

**How would you choose what to work with?**
- Based on what you would like to learn or rather something you already know well? 
- How do you determine what tech stack is best suited for what you want to do?
- Do you rather try something new and shiny or do you have a ‘winning team’ you aren’t likely to change any time soon?

Literally any tip, opinion or resource is highly appreciated :) Thanks so much!
Reflections towards a major milestone
Tags: general, birthday
Published: 2021-08-17 19:30:07

---
title: Reflections towards a major milestone
published: true
date: 2021-06-28 19:30:00 UTC
tags: General,birthday
canonical_url: https://daraoladapo.com/reflections-towards-a-major-milestone/
---

 

It is another birthday of mine – and I am incredibly happy to be alive. I have made it a practice now to have a [reflection on every birthday](https://dev.to/daraoladapo/28-things-i-ve-learnt-at-28-fp4-temp-slug-1529775) I have and share some of those reflections with you.

### The things I am grateful for

#### God

I am grateful for God – yes. He is the source of everything I am and all I do. All I do is to promote his goodness and bring others to the light of salvation through Jesus Christ.

#### Family

One of my daughter’s rhyme songs goes this way.

> I’m thankful for my family

> I’m thankful for my friends

> I’m thankful for the things I have,

> The Thank You’s never end

> What are you thankful for?

> What are you thankful for?

> What are you thankful for?

> Hmmmm…

_Source: https://lyricstranslate.com_

And I must say it’s one of my favourite songs. Family is everything for me. They are the point of support when things are going well and when everything else fails. I’m especially thankful for my **wife (awesome as always) and daughter (she is a great gift from God)** – they are my constant source of joy and inspiration.

#### Friends

My favourite song about friend is by Dionne Warwick and Friend – **That’s what friends are for**. Having friends, you can always count on is a rare blessing. More importantly having friends that push you to always be a better version of yourself is a priceless gift.

### Reflection towards a major milestone

Let’s get reflecting, shall we?

1. One of major lessons I learnt during the last 365 days was that if I want something, I should just go for it. If I can’t do it immediately, I should make achievable plans towards achieving it.
2. I am responsible for taking care of my mental and emotional health – I should not let anything affect it.
3. I should pace myself to avoid burnout – Doing too much can be a recipe for breakdown.
4. Spend time with those who love and value you.
5. The hours in the day are finite – calibrate your actions and tasks to fit.

### The next 365

In this new year, the plan is to be more intentional about achieving my long-term goals – taking daily actions to achieve them.

No negativities – just good vibes.
Manage License Headers with Ease
Tags: vscode, header, license, comment
Published: 2021-06-28 19:29:31

---
title: Manage License Headers with Ease
published: true
description: 
tags: vscode, header, license, comment
---

I found this awesome vscode extension called [psioniq File Header](https://marketplace.visualstudio.com/items?itemName=psioniq.psi-header) that automatically injects and updates comment headers in my code files. This is a MUST if you are using the Apache 2.0 license, which requires the code to be licensed on a file by file basis.

You can find it at the link below.

https://marketplace.visualstudio.com/items?itemName=psioniq.psi-header

I am also going to start using it for proprietary code as well as MIT licensed code because I can provide useful information about who was working on the file, when it was last updated, etc . . .

I love how it lets me customize how the comment is built as well as fine grained control on what files it puts the header in. This makes it work in virtually all programming languages and setups. It also intelligently will not override existing headers. You can customize exactly when to update the header and what parts to update as well.

Here is an example configuration I am using that injects the Apache 2.0 license as well as useful metadata in GoLang and Makefiles.

https://github.com/silicon-hills/integration-operator/blob/8e7701fad164ebb6f857a13b1a1312724c266c55/.vscode/settings.json#L45-L134

Below you can see an example GoLang file and Makefile where the comments were added.

https://github.com/silicon-hills/integration-operator/blob/8e7701fad164ebb6f857a13b1a1312724c266c55/main.go#L1-L23
https://github.com/silicon-hills/integration-operator/blob/8e7701fad164ebb6f857a13b1a1312724c266c55/Makefile#L1-L21

Until next time, and have a great day!
Learn code interactively
Tags: beginners, webdev, tutorial, microsoftgraph
Published: 2021-06-28 13:37:30

---
title: Learn code interactively
published: true
date: 2021-06-28 13:07:29 UTC
tags: beginners,webdev,tutorial,microsoftgraph
canonical_url: https://blog.mastykarz.nl/learn-code-interactively/
---

![Learn code interactively](https://blog.mastykarz.nl/assets/images/2021/06/mgt-code-tour-banner.png)

I don't know about you, but I learn the code the best when I'm actually coding. Sure, I start reading up on the concepts and the theory but at some point, I need to turn it into practice. There is nothing like following a good tutorial or a lab to help me solidify my knowledge.

To follow labs, we needed big screens in the past. On one side of the screen, we'd put the lab's instructions. On the other side, we'd have our code. Constantly going from left to right and right to left we'd build our app, all the time feeling like watching a game of tennis. Luckily, there is a better way.

When I heard first of **[code tours](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour&WT.mc_id=m365-33204-wmastyka)** it instantly got my curiosity. 'What if we could learn code while coding?'. If you haven't heard of code tours, you should definitely check them out. They're based on a Visual Studio Code extension and offer you a guided tour of a project. With code tours, you can define pointers in your project and link to the explanations. Imagine that for an onboarding experience for a new dev on the team! But code tours are also great for building labs. You see, you can extend instructions with code snippets to insert in the code and commands to run in the terminal. **No more copy-pasting and more time for you to understand the code!**

If you haven't seen code tours in action, I'd suggest you take a look at a [code tour we've recently put together for Microsoft Graph Toolkit](https://github.com/microsoftgraph/mgt-react-codetour). If you haven't heard of the Microsoft Graph Toolkit, it's [the easiest way to connect your app to Microsoft 365](https://blog.mastykarz.nl/connect-react-app-microsoft-365/). No matter if you know the toolkit already or not, I'd like to ask you to try the tour and tell me what you think. Does it work for you as a way to learn code? Would you like to see more tours for other technologies and scenarios? Hit reply and let me know!

👉 Check out the [Microsoft Graph Toolkit code tour](https://github.com/microsoftgraph/mgt-react-codetour)
Jasonette Docker Android APK Builder
Tags: docker, android, bash, devops
Published: 2021-06-28 18:54:54

---
title: Jasonette Docker Android APK Builder
published: true
description: A dockerfile to build APKs
tags: docker, android, bash, devops
//cover_image: https://direct_url_to_image.jpg
---

For the [Jasonette](https://github.com/jasonelle/docker) project. I created a simple _Dockerfile_ and a _Makefile_ with some commands to help building Android APK both in release and debug mode. 

It includes everything you would need like Gradle, JVM and Android SDK.

Additionally it includes Windows cmd files as an alternative to the Makefiles.


{% github jasonelle/docker %}
Slow Down When Proofreading
Tags: javascript, codenewbie
Published: 2021-06-28 18:38:08

It's sort of a blessing and a curse that spelling errors can break the code for everyone *at any level*.

![not a function ERROR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db7i42upgxv7zlyd77tx.png)

Today, I had the console show me right where things were problematic **(LPT: use the console)**, but I was so focused on trying to make sense of the function (BUT IT IS A FUNCTION, I SWEAR) that I didn't notice the `addEventrListener` itself.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxq0etxcvm2gbs3tsvnn.png)

Easier said than done I'm sure, but I probably could've saved more time if I took things slow from the start.
Week 3 of Coding Period in GSoC
Tags: google, gsoc, opensource
Published: 2021-06-28 18:35:20

Welcome back! Let's talk about 3rd week I spent in GSoC. I implemented a lot of things from prior experience this week. Let's go!

Before we talk about week 3 here is the link of [project board](https://github.com/theamanjs/OGV-meteor/projects/1) with cards that I'll be managing during GSoC 2021. I first thought to create a board in Trello but my mentor suggested creating under the project in my folk of project. 

I started by adding Husky to the project. For that, I used this [package](https://www.npmjs.com/package/meteor-husky). This was the most fascinating task. You must be wondering, eh!! that was easy for what thing I was most excited about. I didn't try installing husky before on any project. So, for me, it was nothing less than a roller coaster ride where I enjoyed a lot. Link to [PR](https://github.com/BRL-CAD/OGV-meteor/pull/109)

Then I tried migrating the CFS collection of the meteor to files for meteor [package](https://github.com/VeliovGroup/Meteor-Files#installation) The project was looking for removal of CFS collection dependency as the collection is deprecated. I found the new package easier to use. Though this task is still a work in progress as I got some family problems this week and couldn't work much. 

Apart from this, from my learning of project management, I decided to clear all the open issues that are already resolved could be closed, because closing solved issues will reduce the number of issues and it shows the project is live. 

Next week I'll be completing the CFS dependency removal and code quality management. When I'll be done with these tasks I'll move ahead with others that are in To Do in the project board. Stay safe and take care of your family!
How to fix Docker permission denied error in linux
Tags: docker
Published: 2021-06-28 17:56:39

The best for solution for docker credential error like:

A. dial unix /var/run/docker.sock: connect: permission denied

B. WARN[0000] not reading global config file because running with root privileges
Not populating custom commands or hostadditions because running with root privileges
ddev is not designed to be run with root privileges, please run as normal user and without sudo

Step 1:
Run sudo groupadd docker. This creates a docker group

Step 2:
sudo usermod -aG docker $USER. This added a user in the docker group to easily access docker without using sudo
step 3: newgrp docker . This saves the changes with no need to  logout and login back again.
Step 4: Test by running docker run hello-world