teleren/devto huggingface dataset:
Transitions, when details matters
Tags: css, performance, codepen
Published: 2021-03-09 23:00:28

---
title: Transitions, when details matters
published: true
tags: css, performance, codepen
description: We need to be specific in #CSS declarations and help our browsers to read our CSS lightly, saving their resources as much as possible.
cover_image: https://images.unsplash.com/photo-1517423440428-a5a00ad493e8?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto
---

{% codepen https://codepen.io/tamer_aka_remat/pen/wvoXXXa %}

When we develop an interactive interface, we have to think about the dynamism of the information and how to make the components interactive and functional.
The best solutions to reach this purpose are `animations`, `transformations` and `transitions`.
However, there is always a cost to pay, in our area it is **performance**.

Among the solutions mentioned above, transitions are the cheapest in terms of performance.
In the change of state with pseudo classes, such as `:hover`, `:focus`, transitions are very valuable.

This can be in the form used in the contracted form

```
.block {
  transition: width 2s linear;
}
```

or you can refer to its specifications:

```
.block {
  transition-property: color;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: .5s;
}
```

Not using transitions in a graphic change means providing a "jerky" experience. **Please dont!**
We have the right tools, let’s learn to use them correctly, knowing the details, for example, often a single transition is written:

```
.block {
  transition: all 2s linear;
}
```

it sounds like an innocent statement, but this leads our browsers into a search for properties that have undergone a change.

> We need to be specific in CSS declarations and help our browsers to read our CSS lightly, saving their resources as much as possible.

In the codepen reported, at the `:focus` or `:hover` of one of the three musketeers I apply two transitions:

```
transition: transform 9000ms cubic-bezier (0.075, 0.82, 0.165, 1), filter 900ms cubic-bezier (0.075, 0.82, 0.165, 1);
```

I am specific in each declaration, referring to the individual properties, listed one after the other.
Day 325 : Go
Tags: hiphop, code, coding, lifelongdev
Published: 2021-03-09 22:37:38

_liner notes_:
- Professional : Only had 1 meeting today. It was a catch up session with a team member. Really good speaking with them. Basically spent the rest of the day researching and working on a demo application. Everything is kind of coming together. So far, it's looking like what I want to accomplish is possible. That's good because I want to build a write a blog and do a presentation on it. haha.

- Personal : Last night, I implemented the local date time thing I've been working on into the admin dashboard I'm building in Svelte. It went surprisingly smooth. I've really enjoyed making projects in Svelte. Looking forward to seeing what comes from SvelteKit, the next version (I've been a fan of Sapper which is a framework using Svelte). I also caught up on "Attack on Titan" and watched "Coming 2 America". Not a bad night.

![Looking up at the colorfully striped mountains in Old Paria, UT, USA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svox6r1qe96wy2tsd156.jpg)

Now that I got the local date time thing working, I can start adding events to the database. Once an event is added, there will be a check list of things that will need to be done before it can be published to the site. Some of those things include uploading assets and that's what I was working on before. Things are coming together. Hopefully will be able to have something ready to test with others soon. Also, the new Insta360 Go 2 camera came out today. Looking really go! I have the previous version of the Go, but haven't used it. I originally wanted it for when I got to travel, but yeah you know. haha Hopefully soon. I'll probably put aside the money for it into a savings account so I can get some interest on it. We'll see, but the camera is looking really good! They've done a lot of improvements and innovative additions.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube YCe1gC5VaW4 %}
Build (remotely) your own cloud services behind NAT (kubernetes, ngrok)
Tags: kubernetes, docker, python
Published: 2021-03-09 22:26:07


![Screenshot 2021-03-09 232030](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ao559zr406y2l1ub589.png)
I new to kubernetes world, and I' trying to create a "fake" cloud services, with a kubernetes cluster on my computer at home, and since I don't have a public static IP, I used ngrok and a telegram bot to notify me the newest urls, this is the repo: https://github.com/LorenzoTinfena/kubernetes-management-ngrok-configuration
The only one gitignore is for secrets.
With this configuration I can receive by the telegram bot the newest ip, and by default, there are two services: access through https the kubernetes dashboard, and access through ssh my host computer (that has an ssh server listening of port 22), if order to configure completely remotely the cluster.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dr3z1rv1pu0d37q3cxqy.png)
A Chrono Component
Tags: mithril, customelements
Published: 2021-03-09 22:20:59

A simple component using [Mithril](https://mithril.js.org/) and [wicked-elements](https://github.com/WebReflection/wicked-elements)

You can test it here [Chrono](https://flems.io/#0=N4IgtglgJlA2CmIBcA2ALAOgMwA4A0IAzvAgMYAu8UyIGAFuWLCAYaQE4D2szSA2gAY8ARgCcAXQIAzCAkLI+oAHYBDMIiS0GTFiFKcllQzQA8UCADcABKVgrChALwAdcAE8AtKTpclnVwB8JgD05hYBzkpmljZ2Di7uXj4G-iBBoZYRSrrEZOQQBvKaAkgCHgBMpSAAvnjKahq0AFbyBPqG8MaaEGAADpzs5FbAUPAySvDVVlJcYFYA5ADuEKQA1lQeJPDqhoTzANyRkQhDAMLJflaO0wCuShQFSlYAFACUw5FWVic2nHdD1wE+y+n2+8CG5kIKgARggoFdpipYMRDk8wUN8up2Kivj9COQVIMEW8rgFhpj4OwEcRyABJDrsCxI54kxxk4C-f5WADU12EwMhMLhCPI7Bu8GBYAw7Co7BUize1Xe1VBePInF6xPebOGtnghPplEZzIp7FeAogUNhVARUiRKKsUplUDlCte1Rx6KsMppWtJw3xGrewP0XMBU1V4KsgutxPxKnIN0I2rJ8cThEjQwsEHgiz9Or4oK+YGerjowlceE5hleeCLjtLIGhN3I6qUleGBlsK1WViQVnjgyrMeF-ZHVFqVlcg-Irlr9ZLrmbrYMHeAXdgPb7A-VvUn093c7raOLjeXbbXG63-Z94P3IFvs5Ar1B4lBMsT7DRHOzuasKqUADIikO4HgMb1OlGdhTk4PpngJdgAHNwSrfQ+gMTpyHeYAiylMA-kMeDCWQ8hUNg-oJhrSIgKUUZxngRsMDATxvF8VIqxwk8ICUCByBJTivkEmVaMpGC4PIOhLQwLYdlIqxzjYl8TwjQClMiHItjApQihAEoynKUQqlqep1BoDBSAcXR2iMcgaBqSQQE3JRViKRQQFUUzNEgCT2FkXQbnYXgQAYchekIJBgmCO5elWRDzNg4JvJ8WQAAFhAwdKUES3jktgDAWl0cg3F6Ro2F83pbOqByPMaBSUhqIA)

```html
<div class="my-chrono"></div>
<div class="my-chrono"></div>

```

```js
import {define} from 'wicked-elements';

let Chrono = function () {
  let count = 0;  
  let disabled = false;
  let timer;
  let start = () => {timer = setInterval(() => { count += 1; disabled = true; m.redraw()}) }
  let stop = () => {clearInterval(timer); disabled = false; m.redraw()};
  let reset = () => {stop(); count = 0} 
  let disable = (status) => status
  let view = () => [
    m("h1", count),
    m("button", {onclick : start, disabled : disabled}, "start"),
    m("button", {onclick : stop}, "stop"),
    m("button", {onclick : reset}, "reset")
  ]
  return  { view }
}

function renderComp(target, component) {
   m.mount(target, component)
}

define(".my-chrono", {
   init() {
     renderComp(this.element, Chrono)
   } 
})

```
What's your favorite ruby gem? Why?
Published: 2021-03-09 22:14:15

A couple of my favorite are quite basic. I love the testing features of **rspec** paired with **capybara**, and am excited to explore the over [69 billion gems](https://rubygems.org/) out there.

Help your fellow ruby developers find that needle in the haystack! 

Here are a couple of questions if you can't decide what gem(s) to talk about. 

* What're some gems that you can't live without?
* What is one gem you found that makes a previously difficult processes easier?
* What's a gem that you thought was cool or expanded on what software engineering is capable of?

Some of my favorite gems are:
* [RuboCop](https://github.com/rubocop/rubocop) - Code styling
* [OmniAuth](https://github.com/omniauth/omniauth) - ThirdParty authentication
* [Puma](https://github.com/puma/puma) - Highly optimized and configurable web servers
AI-powered surveillance for businesses.
Published: 2021-03-09 21:44:28

A business needs a security camera, but is low on server capacity. Thatswhy the business can not store videos 24/7.

💡 Solution:
Using Machine Learning, we can tell the camera when it has objects in view and use a lightweight backend to store the timestamps and also the type of objects which where detected.

URL: https://www.github.com/MarcoSteinke/Security-Cam
How to add an existing project to GitHub – using the command line
Tags: javascript, github, frontend, git
Published: 2021-03-09 21:41:57

You finally finished a project and you want to share it with the world? Then this step by step is for you!!
![Fox waving](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9545x2p27advzgh5w6p.gif)

<h3>1. First you have to create a new repository on Github</h3>

You don’t need to add files already. You can do it after


![Create New Repo Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yrhe8ke26dzszawlsxp.PNG)

<p>⚠️ You cannot create a repo on github using git bash. Git and Github are different things. Github is a platform that let’s you host and collaborate on code while git is the version control tool used.<br><br></p>


<h3>2. Open Git Bash</h3>
<p>(You can also use your command prompt)<br><br></p>

<h3>3. Change the current working directory to your local project</h3>

<p>&nbsp;<br><br></p>

<h3>4. Initialize the local directory as a Git repository</h3>

```javascript
$ git init
```
<p>For example, in my case my local project is at the test folder, so I used the cd command to open that folder and then the git init command.<br><br></p>

![steps git init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj5j2nwq9f3s3z58obm5.png)

<p>This creates a new .git folder in your test folder like so:</p>

![git folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oq8lshw5eusigoaey9ga.png)

<p>ℹ If you have created a project using Vue CLI for example, it already comes with a .git folder<br><br></p>

<h3>5. Add the files in your new local repository. This stages them for the first commit </h3>

```javascript
$ git add .
```

<p><i>git add</i>, adds/stages the files in the local repository and stages them for commit. To unstage a file, use ‘git reset HEAD YOUR-FILE’.<br><br></p>

<h3>6. Commit the files that you’ve staged in your local repository</h3>

```javascript
$ git commit -m “First commit”
```
<p>This commits the tracked changes and prepares them to be pushed to a remote repository. To remove this commit and modify the file, use ‘git reset –soft HEAD~1’ and commit and add the file again.<br><br></p>

<h3>7. At the top of your GitHub repository’s Quick Setup page, click  to copy the remote repository URL</h3>

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

<p>&nbsp;<br><br></p>

<h3>8. Add the URL for the remote repository where your local repository will be pushed</h3>

```javascript
$ git remote add origin <your remote repository URL>
```

This sets the new remote

If you want to verify if the new remote was set use:

```javascript
$ git remote -v
```
<p>&nbsp;<br><br></p>

<h3>9. Push the changes in your local repository to GitHub</h3>

```javascript
$ git push origin master
```

<p>This pushes the changes in your local repository up to the remote repository you specified as the origin</p>

![Create project github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9q4ya6dsfiy6cq8pri4.png)

<p>&nbsp;<br><br></p>
Et voilà! You have now your local project in Github! 😊
Expect Assertion WebdriverIO
Published: 2021-03-09 21:36:02

WebdriverIO Expect Assertion is powerful, intuitive and comes built in to the test runner when you install WebdriverIO. It allows you to add assertions in your test. In this video I will walk through 

- Installing WebdriverIO v7
- What is WebdriverIO Expect
- How to use WebdriverIO Expect
- Example of different commands
- Matcher Options
- How WebdriverIO Expect compares to Chai Assertions
- Why I prefer WebdriverIO Expect over Chai Assertions
- How to use both WebdriverIO Expect and Chai Assertions in your WebdriverIO project

Let me know which assertion you prefer.

{% youtube NpKsDKsvqeQ %}
IF nothing ELSE, ternary...
Tags: javascript
Published: 2021-03-09 21:28:59

# Introduction
There's a little somethin' somethin' I've seen in other projects. The overuse of IF ELSE statements. Or should I say the *improper* use of them. The *inefficient, ugly* use of them. Let's talk about that.

# The Ternary Operator
This is an amazing tool. Not only does it execute conditionals, it offers a clean code solution to an otherwise line greedy block of code. Take a look:

```js
if(100 === +"100") {
    console.log("YES! WE DID IT! 100%");
} else {
    console.log("YOU BATHE IN LIES!");
}
```

This isn't too bad, but it is definitely taking up way too many lines. Try this instead:

```js
100 === +"100" ? console.log("YES! WE DID IT! 100%") : console.log("YOU BATHE IN LIES!")
```

We went from 5 lines of code **down to one**! Confused? Let's break it down in a simple manner.

```js
conditionIsTrue ? doThisIfTrue : doThisIfFalse
```

It is almost the same as an IF ELSE statement, but know when you can use it and when you can't. Ternary operators are only meant to replace IF ELSE statements that only accept a single line response.


Example:
```js
if(condition) {
   performThisAction();
   AaaandThenDoThisAction();
} else {
   doSomeOtherAction();
}
```

*This would not work with ternary...*. This is because the if statement takes two actions when one condition is true. A ternary operator can only perform one action dependent on whether the given condition is true or not. There is a time and place for both the if statement and the ternary operator. Proper use of them is highly dependent on understand how they work, when and why we use them.


# Conclusion
JavaScript has many useful tools, but there's an old saying you more than likely have heard before.... *"with great power comes great responsibility"*. Code smarter, not harder. If nothing else, write code that is kind to others. If it takes up too much room and is unreadable, it's not very kind!

Happy Tuesday!
Importação absoluta de arquivos em projetos com NextJS
Tags: react, nextjs, javascript
Published: 2021-03-09 21:27:55

---
title: Importação absoluta de arquivos em projetos com NextJS
published: true
description: 
tags: #react #nextjs #javascript
//cover_image: https://direct_url_to_image.jpg
---
Criar uma boa estrutura para o projeto é essencial para que nossa aplicação cresça organizada e seja fácil de localizarmos o que necessitamos, principalmente ao se trabalhar em um time.

Em projetos NextJS/React a tendencia é que nossos componentes importem não só pacotes mas também outros diversos componentes. Na maioria das vezes acabamos com importações como essa:

`import Header from '../../../components/Header'`

Podemos tornar isso mais simples utilizando *alias* para acessar as pastas que temos na aplicação. 

Em suas últimas versões o NextJS tornou isso ainda mais simples, ainda mais para quem trabalha com o VSCode.

Na raiz do seu projeto crie o arquivo `jsconfig.json` ou `tsconfig.json`, caso seu projeto utilize Typescript.

```json
{
	compilerOptions: {
		"baseUrl": "."
	}
}
```
Com o `baseUrl` definimos a pasta base do nosso projeto podendo assim alterar a importação para:

`import Header from 'components/Header'`

## Paths

Por vezes utilizamos subpastas para nossos arquivos:

`import Button from '../components/atoms/Button'`

Utilizando o método anterior nossa importação ficaria:

`import Button from 'components/atom/Button`

Mas e se ainda pudermos deixar mais objetivo essa importação, diretamente para as subpastas do projeto?

Podemos fazer isso utilizando a propriedade `paths` da seguinte maneira:
```json
{
	compilerOptions: {
		"baseUrl": ".",
		"paths": {
			"@/components/*": ["components/*"],
			"@/atoms/*": ["components/atoms/*"],
			"@/molecules/*": ["components/molecules/*"],
			"@/organisms/*": ["components/organisms/*"],
		}
	}
}
```
A partir de agora temos um caminho mais objetivo para os arquivos:

`import Button from '@/atoms/Button'`

Uma grande vantagem é que o próprio VSCode reconhece esse caminho, então quando realizamos importações automáticas dos nossos arquivos(utilizando `cmd + espaço` ou `ctrl + espaço` ) é aplicado o valor que definimos no *paths*.

No site do [VSCode](https://code.visualstudio.com/docs/languages/jsconfig) você pode ver outras configurações que podem ser adicionadas ao `jsconfig.json` e `tsconfig.json`.

## Configuração eslint
Se você estiver utilizando o [eslint](https://eslint.org/) no seu projeto, e realmente espero que esteja, é necessário adicionar uma regra para que ele aceite os nosso atalhos sem retornar erro. 

Existem diversas maneiras de se fazer isso e uma que acho simples é que ao adicionarmos algum símbolo as nossas importações, como o **@**, podemos usar a seguinte regra no *eslintrc*:

```json
"rules": {
    ...,
    "import/no-unresolved": ["error", { "ignore": ["^@"] }]
  },
```

Pronto, agora o seu projeto está pronto para continuar, com um pouco mais de organização.
100 Bytes Of Wisdom: Day 24
Tags: career, journey, advice, teamwork
Published: 2021-03-09 21:27:41

---
title: 100 Bytes Of Wisdom: Day 24
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice, teamwork
//cover_image: https://direct_url_to_image.jpg
---

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

I'll start this by saying almost every sports teamwork metaphor you can think of will also apply to software teams. Software, when written in teams inside of companies of any size, is a team sport. The success of the team should take priority over the success of the individuals. 

With being a team sport, your soft skills have to come to the party just as much, if not more than your hard skills. Teamwork, communication, empathy, respect, and many more need to be on display and used every single day. 

A lot of juniors want to know how to be a better software developer. The answer usually isn't more JavaScript, it's more work soft skills. More teamwork. 

Work on it.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
Streaming
Tags: streaming, twitch, personal, brand
Published: 2021-03-09 21:05:28

End of 2020 I started [streaming](https://twitch.tv/andi1984) and [putting videos on YT](https://www.youtube.com/channel/UC9yhSlXfpjleDuJV1AGViIg) as an experiment.

I wanted to find out about the workflows behind it and whether it would help to promote my personal brand.

## Personal brand

![Personal brand logo with hand-written lettering 'Andi' and '1984' written in  90-style clunky, digital font-face.](https://res.cloudinary.com/dpct9sbmv/image/upload/q_auto,f_auto/v1614544119/andi1984.dev/logo.png)

Many thanks to [Salvatore](https://www.fiverr.com/salvatorerotolo) who designed me a logo out of my nickname "andi1984" that I use on social media and various platforms.

## Youtube

I started putting some videos first on YouTube. Mostly about some `CSS`topics like [Specificity](https://www.youtube.com/watch?v=XMuGJeKLcXk) or [Flexbox](https://www.youtube.com/watch?v=wEPvnbWPajs).

## Twitch

Then I started streaming on Twitch. In the beginning, I mixed tech and game streams as I anyhow played games with friends, but I think I will move on solely streaming tech topics to get the expectations right that this is mainly a tech channel.

### Schedule

I regularly stream every Tue, 7pm CET. Currently this stream is dedicated to learning TypeScript based on [Stefan](https://fettblog.eu/)'s book [TypeScript in 50 lessons](https://www.smashingmagazine.com/printed-books/typescript-in-50-lessons/). A dedicated thanks to Stefan and the [Smashing Magazine](https://www.smashingmagazine.com/) for allowing me to stream this learning process based on the book.

## Summary

After 20+ hours of streaming and several videos on YouTube, I got a first, initial sense of what it is about streaming and being a video, content creator.

But there are so many different things like stream overlays, the [Youtube algorithm](https://www.socialvideoplaza.com/en/articles/youtube-upload-schedule) that I would have to learn.

**In the end I am just doing it for fun and I will keep doing so as long this fun lasts.**

See you on Twitch and Youtube,

Andi
How to get Instagram Graph API access token
Published: 2021-03-09 21:05:09

Instagram will be disabling the final Instagram Legacy API permission (“Basic”) on March 31, 2020. As of March 31, 2020, all Legacy API capabilities will be fulfilled by the Instagram Graph API and the Instagram Basic Display API.

And all Instagram Feed will be disabling, and you must update your widget to work with the new Instagram API.

For that, follow the below steps to get Access Token to use to get an Instagram feed on your website or blog.

###Before You Start
You will need:
* A Facebook Developer Account
* An Instagram account with media.

###Step 1 — Register Application

Go to [developers.facebook.com](https://developers.facebook.com/), click My Apps, and create a new app.
Once you have created the app and are in the App Dashboard, navigate to Settings > Basic, scroll to the bottom of the page, and click Add Platform.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ajpoj3zgmrspcoywnsd.png)
Choose **Website**, add your website’s URL, and save your changes. You can change the platform later if you wish, but for this tutorial, use **Website**.

### Step 2: Configure Instagram Basic Display
Click Products, locate the Instagram product and click Set Up to add it to your app.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9860tf568gf8t6ygx9px.png)

Click Basic Display, scroll to the bottom of the page, then click Create New App.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a60a14xb52yhl2s9gqz.png)

### Step 3: Add an Instagram Test User
Navigate to Roles > Roles and scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account’s username and send the invitation.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1w35za0kuoolys5llgtc.png)

Open a new web browser and go to [Instagram](https://instagram.com/) and sign in to your Instagram account that you just invited. Navigate to (Profile Icon) > Edit Profile > Apps and Websites > Tester Invites and accept the invitation.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09wu38fxpjzqvevun9mz.png)
### Step 4: Generate Access Token
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hbvutg34b61tmcld0mc.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hovwzqmngogqwrfihio1.png)
Congratulations! You got the Access Token successfully, and you can use it to get data from Instagram.


The original post on [Raji's blog](https://mohammedraji.github.io/posts/get-instagram-graph-API/)