teleren/devto huggingface dataset:
Day 94/100 Secondary Navigation
Tags: 100daysofcode, programming, design, motivation
Published: 2021-12-18 12:29:39


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

## What is primary vs secondary navigation?

- The primary navigation system typically contains the most important links and buttons that need to be displayed on every single page of the site.

- Secondary navigation, or breadcrumb navigation, usually consists of a clickable list of pages or attributes that led to the current page. It can help users understand the extent of the site and also where they are currently.

## Why do we call them breadcrumbs?

Think about the story of Hansel and Gretel, where the kids drop breadcrumbs as they walked in the woods so that they would be able to find their way back.

## Benefit of using breadcrumbs

- Breadcrumb navigation provides a lot of benefits for users that come to random pages in a website through direct links or search results.
- Breadcrumbs also provide a way for a user to quickly jump backward in their navigation of the site.
- The decision to use breadcrumbs is a judgment call depending on the type, depth, and complexity of your site.

## Code Snippets

```
function cat() {
    function purr()
         return "purrrr!";
} 
console.log(purr()) ;
var meow = function(max) {
var catMessage = "";

for(var i = 0; i < max; i++) {
    catMessage += "meow";
   }
    return catMessage;
   }

cat();
```

## Summary
It's cold outside, making myself warm and contemplating. The view on my window is all white and foggy, brain is fuzzy, now I must have my warm yummy tea in a muggy.
[![resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkwivxjy7l2puesv1oaa.png)](https://dropbox.tech/mobile/the-not-so-hidden-cost-of-sharing-code-between-ios-and-android)
EC2 환경에서 Chrome 으로 GPU 가속받는 WebGL 어플리케이션 돌리기
Tags: ec2, chrome, gpu, webgl
Published: 2021-12-18 11:53:32

저는 무거운 3D 모델을 로드하고 시뮬레이션을 돌리는 performance-critical 한 WebGL 어플리케이션을 만들어요. 코드가 바뀌었을때 퍼포먼스에 영향이 있었는지 캐치하는게 굉장히 중요했어요. 그래서 벤치마킹 시스템을 만들어서 CI/CD 에 적용을 했어요. 이 벤치마킹 시스템은 EC2 인스턴스를 만들고, 최신 라이브러리를 사용해서 headless 한 gpu 가속 받는 Chrome 환경에서 벤치마킹 프로그램을 돌립니다. EC2 환경에서 크롬이 gpu 가속을 받게 하는게 꾀 까다로웠어요. 이번 포스트에서는 그걸 어떻게 해결했는지 에 대해서 설명드리겠습니다.

## EC2 인스턴스 타입

두가지 조건을 만족하는 환경을 만들어야 했어요

- GPU가 있을것
- 유저 환경을 잘 반영할것. 너무 좋지도 안좋지도 않게

[G4 인스턴스](https://aws.amazon.com/ec2/instance-types/g4/) 패밀리가 안성맞춤으로 보였어요. 그래서 그중 가장 싼 *g4ad.xlarge* 을 사용했습니다.

## AMI

AMI 를 고르는데에 두가지 선택지가 있었어요

- 기본 AMI(e.g. Amazon Linux 2)을 사용해서 드라이버를 직접 설치하기
- 드라이버가 기본으로 깔려있는 Commercial AMI 를 사용하기

[잘 쓰여진 도큐먼트](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/install-nvidia-driver.html)가 있길래 첫번째 방법을 시도해보았는데 다음과 같은 이유로 상당히 귀찮았어요.
- 드라이버를 다운받고 설치하는데 꾀 오래걸립니다. (10 분정도)
- 쉘스크립트가 상당히 복잡해져요
    - 디펜던시들도 모두 찾아내서 설치해야되고
    - 시스템도 부팅해야 함

그래서 두번째 방법을 썼어요. g4ad 는 라데온을 쓰기 때문에 저는 [Amazon Linux 2 AMI with AMD Radeon Pro Driver](https://aws.amazon.com/marketplace/pp/prodview-h2zpfhnkvdiko) 를 썼습니다. 읽는 여러분도 이걸 사용하시길 추천드려요 왜냐면 싸고, 시스템 설정하는 수고를 덜어주기 때문입니다.

## Chrome version

저는 yum 을 이용해서 Chromium 을 설치했어요
```bash
# yum 이 chromium 을 찾을 수 있게 EPEL 리포지토리 세팅
sudo amazon-linux-extras install epel -y
sudo yum install chromium -y
```
다른 방법도 사용해보았어요. 크롬 인스톨러를 사용해보기도 하고 Puppeteer 를 사용해보기도 했어요. 근데 무슨 이유에서 인지 얘네는 gpu 드라이버를 못찾더라고요. 굳이 왜그런지 알려고는 안했습니다. 왜냐면 첫번째 방법이 잘 작동했기 때문이죠.

## Headless Chrome 과 EGL

EGL 에 대한 약간의 배경지식을 설명드릴게요. OpenGL 을 사용하기 위해서는 OpenGL Context 를 먼저 만들어야 해요. 리눅스에서는 보통 GLX 를 통해서 만들어집니다. GLX 는 windows system(e.g. X11)을 요구하고, windows system 은 display device (e.g. 모니터, VNC) 를 요구합니다. 문제는 이 디펜던시 체인 때문에 서버나 아두이노같은 디스플레이가 없는 기기에서 OpenGL을 사용하는게 너무나도 힘들다는 것이었습니다. 그래서 EGL 이 등장했어요. EGL 은 windows 시스템 없이 OpenGL Context를 만들 수 있게 해주는 프로토콜이에요. 얘 덕분에 너무나도 많은것이 편해졌고, 미래의 OpenGL Context 프로토콜로 각광받고 있습니다. 요즘은 대부분의 gpu driver 에 이 EGL implementaiton library 를 대부분 포함되어 있어요.

Headless Chrome이 바로 EGL가 필요한 딱 좋은 예입니다. Headless 의미 자체가 디스플레이가 없다는 뜻이고, 그렇기 때문에 EGL 이 필요한 것이죠.

## GPU-가속받는 Headless Chrome 돌리기

환경이 다 갖추어 졌다면 Argument 만 제대로 주면 됩니다.

```
sudo chromium-browser --no-sandbox --headless --use-gl=egl 'https://benchmarking.system'
```

- sudo - 왜인지는 모르겠는데 sudo 가 아니면 gpu driver 를 찾지를 못하더라고요
- chromium-browser - yum 으로 chromium 을 설치하면 기본으로 이 이름으로 executable 이 설치가 됩니다.
- --no-sandbox - sudo 로 돌리려면 필요한 옵션
- --headless - EGL 을 사용하기 위해 필요
- --use-gl=egl - EGL 사용하기

## 디버깅

크롬은 gpu 관련 모든 정보를 보여주는 대시보드 페이지가 있고, `chrome://gpu` 로 접근할 수 있습니다. 이 페이지를 pdf로 다음과 같이 뽑아낼 수 있어요.

```
sudo chromium-browser --no-sandbox --headless --use-gl=egl --print-to-pdf=out.pdf 'chrome://gpu'
```

뽑아진 pdf 를 scp 를 이용해 내 컴퓨터로 가져올 수 있습니다.

```
scp -i certificate.pem ec2-user@<ec2 ip address>:<path to out.pdf> ./ 
```

모든게 잘 동작한다면 다음과같이 보여져야 해요.

![sample graphics feature status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbaify7mwfapsuq3pzen.png)

그리고 드라이버 정보도 제대로 출력 되어야 해요.

![sample driver information](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1u21hdz7zs59cbnwzku.png)
Let's Install Heroku CLI On Termux an android app.
Tags: termux, ubuntu, heroku, android
Published: 2021-12-18 11:53:05

---
title: Let's Install Heroku CLI On Termux an android app.
published: true
date: 2021-12-18 11:53:05 UTC
tags: termux,ubuntu,heroku,android
canonical_url: https://codewithshriekdj.netlify.app/posts/let-s-install-heroku-cli-on-termux-an-android-app-2e1d1
series: let's understand by shriekdj
---

Today I Tried To Install Heroku CLI On Termux But It Does Not Worked i Tried To Install Nodejs First For Building The Heroku CLI From Built but It Does Not Work At All.

`apt install heroku`
does not work said heroku not available
snapd package also unable to install on termux.
and also when tried same error
`npm install heroku`
it shows error _sudo_ permissions need

At Last This Last Commands Worked

```bash
apt-get install proot-distro

proot-distro install ubuntu

proot-distro login ubuntu

apt-get install curl

curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
```

_My Actual Issue Was My Mobile Is Not Rooted and Neither I Wanted to Root It So I Just Installed Virtual Machine of Ubuntu Instead._

You Can Run Ubuntu and Also Other Distro Like Arch-Linux, Fedora, OpenSuse, etc.,

I Know It Is Not A Good Practice to Install these Things On Android Mobile But termux also works on Android Television.

You Can Use Your Android TV As Backup Linux Machine think About It.

_**IMP**: package name is `proot-distro` the word distro is mandatory_

***

## Conclusion

If you found this useful then please share this and follow me! Also check out Buy Me A Coffee if you want to support me on a new level!

[![Buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-yellow.png)](https://www.buymeacoffee.com/shriekdj)
Sobre Micro Front-ends
Tags: javascript, microservices, microfrontend, webdev
Published: 2021-12-18 11:47:30

Hoje eu vou abordar um tema que está em pleno uso e cada vez mais se tornando um padrão de arquitetura de desenvolvimento no frontend, o conceito de Micro Front-end.

Não posso falar de Micro Front-end sem abordar a forma como eram construídas as aplicações antes do seu surgimento. Antigamente, ao desenvolver uma aplicação frontend, todo o código era feito dentro um repositório e totalmente interdependente. 

Com o tempo, os programadores foram adaptando várias formas de separar o frontend, de forma que ele se tornasse mais desacoplado.

Com o surgimento do conceito de Micro Front-end, agora uma aplicação é dividida em módulos de forma que algumas partes específicas da tela são separadas em diferentes repositórios.

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

Cada módulo é uma aplicação com sua stack particular (react, angular, vue etc), funcionando de forma independente, sem um estado global ou compartilhamento de recursos.

Apesar de serem independentes, os micro serviços no frontend precisam ter alguma forma de se comunicar, afinal, juntos eles são uma única aplicação. Geralmente usa-se o recurso de localstorage ou frameworks específicas para lidar com esse cenário, como o [Single SPA](https://single-spa.js.org).


![monorepo vs microfrontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy4matnmsd9lc9mj3dac.png)

Por fim, com todo esse hype sobre esse tema, acabam aparecendo os questionamentos: "Será que devo parar de escrever aplicações monlíticas?". A resposta é simples: Não. Cada projeto vai demandar uma arquitetura própria pensada considerando o resultado que se espera. O micro front-ends são flexíveis para grandes aplicações,  com escalabilidade e várias equipes, mas não são tão vantajosos para projetos com poucas pessoas.

Se você quiser contribuir mais sobre o conceito de Micro Front-ends, comenta aqui embaixo.

---

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀
Quick update on my streaming setup up
Tags: streaming
Published: 2021-12-18 11:39:23

One wee new shiney thing to replace my previous audio interface and mixer, it's an SSL 2+ and super simple to set up and we can have 2 outputs for headphones now!

More dets on this pretty piece of hardware: https://www.solidstatelogic.com/products/ssl2-plus

### Before 
![Previous setup with audio interface and mixer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjsrgwajl1cqpv03wt4h.jpeg)

### After
![SSL2 addition to replace previous audio interface and mixer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl5str69700mrrcwbqeq.jpeg)
Running while(true) in JS
Tags: webdev, javascript, productivity, programming
Published: 2021-12-18 11:37:53

You must be wondering this guy is MAD, we can't run while/for loop **synchronously** client side in _javascript_, it will block the main thread and will FREEZE the page.

Well, it is possible to run it but not a good way to do it and might introduce some bugs in your program.

#### Web Worker
> Web Worker runs in a single thread isolated from the main thread, so you can run any synchronous operation without blocking the thread.

You can run the loop in Web Worker and send the send the data from Web Worker to Main Thread using _postMessage_ method. It will run as good as main thread.

You can try it in the below code snippet

{% codepen https://codepen.io/abhishekraj272/pen/WNZjWMe default-tab=result,js%}

> Note: Running synchronous loop is not advised in browser, unless there is a such requirement.

Connect Me @ [Linkedin](https://www.linkedin.com/in/abhishekraj272/), [Github](https://github.com/abhishekraj272), [Twitter](https://twitter.com/abhishekraj272), [Youtube](https://www.youtube.com/channel/UCvHn2T8DSJzEWzYDdK3Dt8A) 😇
GROWING AND SHRINKING
Tags: webdev, beginners, css, 100daysofcode
Published: 2021-12-18 11:36:08

#The Flex Shorthand#

          The flex declaration is actually a shorthand for 3 properties that you can set on a flex item.
    
             Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using this property,you can write more concise stylesheets,saving time and energy.

       So, flex is actually a shorthand for flex-grow,flex-shrink and flex-basis.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juxqk906y8vo6fcpyzfz.png)


      The default value of the flex property is shown in the above:flex-grow: 0,flex-shrink: 1,flex-basis: 0%.

##Flex-Grow##

  It expects a single number as its value,and that number is used as the flex-item's "growth factor" . When we applied flex: 1 to every div inside our container,we telling every div to grow the same amount.

##Flex-Shrink##

   It is to flex-grow, but sets the "SHRINK FACTOR" of a flex item. flex-shrink only ends up being applied if the size of all flex items is larger than their parent container.
                 The default shrink factor is flex-shrink: 1,you can also specify higher numbers to make certain items shrink at a higher rate than normal

##note##

  An important application to notice here is that when you specify flex-grow or flex-shrink,flex items do not necessarily respect your given values for width because when their parents is big enough, they grow to fill space.

##Flex-Basis##


flex-basis simply sets the initial size of a flex item,so any sort of flex-growing or flex-shrinking starts from that baseline size. Shorthand value defaults to flex-basis: 0%



##IMPORTANT NOTE##

     The actual default value for flex-basis is auto,but when you easily flex: 1 on an element, it interprets that as flex: 1 1 0. If you want to only adjust an item's flex-grow, you can simply do so directly, without the shorthand.





thank you..
How to get direct video link of Instagram Reels for my React App?
Published: 2021-12-18 11:34:27

By trying to inspect and get the link it gives the url of the complete page instead of the video links. How to get that plz help.

Getting this link instead of direct video link:
https://www.instagram.com/reel/CXQ2HAFAHW4/?utm_source=ig_embed&amp;utm_campaign=loading
Active Record Callbacks shouldn't modify other records
Tags: rails, ruby, webdev, discuss
Published: 2021-12-18 10:42:46

In Ruby on Rails, After Record Callbacks allow you to hook into the lifecycle of Active Record objects. Commonly used callbacks are `after_create` or `before_validation`. In this post, I want to highlight a bad practice that is sometimes used in callbacks.

Let's say we have a `User` model that has an associated `Account`. The idea is that every user also has an account, which we use to specifiy more details like billing information.

Now, since every time we create a new `User`, we also want to create a new `Account`, we might be tempted to do something like this in our `User` model:

```ruby
class User < ApplicationRecord
  has_one :account
  after_create :create_account

  def create_account
    Account.create(user: self)
  end
end
```

This is almost never a good idea. Creating or updating one model should never touch another model.

The main reason is that it tangles up concerns (remember: we like separation of concerns) and is not very explicit. A colleague working with you on this codebase might not expect that this side effect will happen. After all, in other places in your code where you create your user, you only do `User.create` and it magically also creates an `Account` for this user.

Another reason is that, while most of the time you want to create an associated `Account`, maybe there will be times where you don't.

A further reason is testing. If you use factories to set up your test data, creating a `User` factory instance will not automatically create an `Account` factory instance, but it will create an `Account` record in the test database. Things will get messy from there.

Instead of using a callback, I recommend just creating the Account separately or wrapping these two commands into a method that lives in the `User` model, like this:

```ruby
class User < ApplicationRecord
  has_one :account
  
  def self.create_with_account(attributes)
    user = User.create(attributes)
    Account.create(user: user)
  end
end
```
Make Your Social Media Marketing Strategy
Tags: s
Published: 2021-12-18 11:10:18

Social media marketing is a powerful and attractive way of marketing for businesses and companies of almost all sizes. Through social media, you can reach a wide range of audiences and reach the maximum audience. We are moving toward a digital world, so businesses need to have a digital presence to attract new customers. 

So, to create and make your digital value you need to build a perfect and attractive [Social Media Marketing Strategy](https://diligenttek.com/social-media-marketing-strategy/). That can make a great impression on the selective viewers and can make your organization prominent.
Css box models
Published: 2021-12-18 11:00:23

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvjyuezvofnjrudl1g2o.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl50t3ivdh2qnquilt3c.png)
Function that returns amount of time passed(months,weeks etc) since date provided
Tags: javascript, beginners, programming, webdev
Published: 2021-12-18 10:20:40

The function returns amount of minutes, hours, weeks, months, years or the day of the week whichever is closer to the date provided, i.e it will return 1 Month instead of 4 weeks, 1 year instead of 365 days 

Function input is date(YYYY-MM-DD) and Time(HH:MM).
Function gets current date(no need to input)

Function set Tag to plural form
Ex: 1 Month, 10 Months

Date Today: 2021-12-18 @ 14:00
Examples:
`calculateAmountOfTime('2021-02-11','07:00')`
output: 10 Months

Now let's take a date which is 5 days from the current date
`calculateAmountOfTime('2021-12-13','07:00')`
output: Monday

`calculateAmountOfTime('2021-12-18','11:00')`
output : 3 Hours

Here's the code:
```
function calculateAmountOfTime(date, time) {
  let dateArr = date.split("-")
  let timeArr = time.split(":")
  let days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ]

  let dateProvided = new Date(
    dateArr[0],
    dateArr[1] - 1,
    dateArr[2],
    timeArr[0],
    timeArr[1]
  )
  let dateNow = new Date()

  let dateDifference = dateNow - dateProvided

  let dateDifferenceInMinutes = dateDifference / (1000 * 60)
  let dateDifferenceInHours = dateDifference / (1000 * 60 * 60)
  let dateDifferenceInDays = dateDifference / (1000 * 60 * 60 * 24)
  let dateDifferenceInWeeks = dateDifference / (1000 * 60 * 60 * 24 * 7)
  let dateDifferenceInMonths = dateDifference / (1000 * 60 * 60 * 24 * 30)
  let dateDifferenceInYears = dateDifference / (1000 * 60 * 60 * 24 * 365)

  dateDifferenceInHours = parseInt(dateDifferenceInHours)
  dateDifferenceInMinutes = parseInt(dateDifferenceInMinutes)
  dateDifferenceInDays = parseInt(dateDifferenceInDays)
  dateDifferenceInWeeks = parseInt(dateDifferenceInWeeks)
  dateDifferenceInMonths = parseInt(dateDifferenceInMonths)
  dateDifferenceInYears = parseInt(dateDifferenceInYears)

  if (dateDifferenceInYears > 0) {
    let tag = " Year"
    dateDifferenceInYears > 1 ? (tag = tag + "s") : (tag = tag)
    return dateDifferenceInYears + tag
  } else if (dateDifferenceInMonths > 0) {
    let tag = " Month"
    dateDifferenceInMonths > 1 ? (tag = tag + "s") : (tag = tag)
    return dateDifferenceInMonths + tag
  } else if (dateDifferenceInWeeks > 0) {
    let tag = " Week"
    dateDifferenceInWeeks > 1 ? (tag = tag + "s") : (tag = tag)
    return dateDifferenceInWeeks + tag
  } else if (dateDifferenceInDays > 0) {
    let tag = " Day"
    dateDifferenceInDays > 1 ? (tag = tag + "s") : (tag = tag)
    return days[dateProvided.getDay()]
  } else if (dateDifferenceInHours > 0) {
    let tag = " Hour"
    dateDifferenceInHours > 1 ? (tag = tag + "s") : (tag = tag)
    return dateDifferenceInHours + tag
  } else if (dateDifferenceInMinutes > 0) {
    let tag = " Minute"
    dateDifferenceInMinutes > 1 ? (tag = tag + "s") : (tag = tag)
    return dateDifferenceInMinutes + tag
  } else {
    return " 1 second"
  }
}
```
Next.js - Introduction
Published: 2021-12-18 10:02:20

**What is Next.js?**
_Next js is React Based Web framework with server side rendering capability. It is very fast and SEO Friendly._

**Prerequisites**
_For starting this you have basic knowledge of **JavaScript** and **React**_.

**Setup**
_To install and create a Next.js projet you can use the handy node npx command 'create-next-app my-app-name'._

```
$ npx create-next-app my-app-name
# or
$ yarn create next-app
```
_If you want to start with a TypeScript project you can use the --typescript flag:_

```
$ npx create-next-app@latest --typescript
# or
$ yarn create next-app --typescript

```
Once the app is created you can launch it



Run npm run dev or yarn dev to start the development server on `http://localhost:3000.`
Visit http://localhost:3000 to view your application.
Edit `pages/index.js` and see the updated result in your browser.
CSS Practices to avoid as a developer Pt.2
Tags: css, webdev, beginners, tutorial
Published: 2021-12-18 08:14:46

So after an awesome response on my previous article titled [CSS Practices to avoid as a developer](https://dev.to/mursalfk/css-practices-to-avoid-as-a-developer-3hj2), I am back with part 2 of the same, with some more awesome topics.

![Img](https://media.giphy.com/media/Lny6Rw04nsOOc/giphy.gif)	

## Use Transform: Translate(-50%, 50%) to center
In particular, one solution was to use a combination of Absolute Positioning and the Transform property. This technique caused blurry text issues in Chromium-Based Browsers. We can use margin: auto, inside a flex container and the browser will center the element. Just two simple properties, and that's it.
For example: Instead of using
```css
.parent{
     position: relative;
}

.child {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, 50%);
}
```
we can use:
```css
.parent{
     position: flex;
}

.child {
     margin: auto;
}
```

## !Important is unnecessarily used in most places
In CSS, styles are cascading, or overlapping from the top of one to another. But, when you bring down !Important in between, it will dominate the others and as the name suggests, it will establish that it is important over the other. JUST DON'T USE IT UNNECESSARILY.
For example: Instead of using
```css
.parent {
     background: red !important;
     color: #fff !important;
     font-weight: bold !important;
}
```
this method is preferred
```css
.parent {
     background: red;
     color: #fff;
     font-weight: bold;
}
```
NOTE: In most of the cases, you need to realign some new classes, and !important can be used when the realign is not possible.

## Long Selectors #..#..... {}
Not only is this selector using Ids, it's also LONG. Just like Ids, if you are using long selectors (that are greater than three levels deep) you're increasing specificity. As a result, you'll be compounding the problem over time as regular maintenance and updates occur.
So instead of using this:
```css
#header #title .left-side img.logo{
     opacity: .5;
}
```
We should try using this:
```css
.logo{
     opacity: .5;
}
```

## Inline styles in CSS
Although CSS offers us to maintain styles inline too, being a developer, we should skip the practice of using them.
Hence, instead of using 
```html
<button style="outline: none;">
     Login
</button>
```
We can start using 
```html
<button class="login_btn">
     Login
</button>
```
```css
.login_btn {
    outline: none;
}
```
Well, so that was all for this article. Do share below in the comments what more practices in CSS you consider as BAD being a developer. 😉😉

![IMG](https://media.giphy.com/media/vN3fMMSAmVwoo/giphy.gif)