teleren/devto huggingface dataset:
What is a Coding Playlist?
Tags: discuss, watercooler, webdev, music
Published: 2021-06-18 15:27:37

What is your favorite music to work to? OR do you prefer no music at all because you need quiet to focus on whatever it is that you are working on? Do you like music with words when you’re relaxing, but music with no words when you are trying to meet a deadline at work? At HarperDB, we have a wide range of music tastes spanning from classical, hip hop, reggae, and even as one of our devs put it: “silence with my frustrations...” 🤣. If you ever wish you had other developer’s suggestions for music to code and work to, you are not alone!

So that is why we created  [“HarperDB’s Coding Tunes”](https://harperdb.io/company/harperdb-coding-tunes/), a Spotify playlist with hand-picked jams from every developer on our team. We feel the pain of needing the perfect tune to have on hand when compiling your code or working through a nasty bug. No one wants to spend extra time trying to sift through the millions of playlists on your music app to find just the right vibe, so we went ahead and did it for you. 

Each month we will be releasing a new coding playlist, and we will keep past months’ playlists live so if you fall in love with one you won’t have to worry about losing it. I will also be chatting with one of our fearless developers on how music moves them and  [posting it on our playlist landing page](https://harperdb.io/company/harperdb-coding-tunes/#meet_developer). With this interview, they share a bit about the music and artists that help get them through the workday. So if you haven’t already,  [follow the HarperDB Spotify](https://open.spotify.com/user/x7c6mrh7m3db6jua7b0n8gyf1?si=cad26bbd00664437)  and check out the current playlists available here. 

You can also like the playlists to save them for later AND we even have an option to  [subscribe here ](https://harperdb.io/company/harperdb-coding-tunes/#subscribe_spotify) if you want to know every time the newest playlist of the month has been released. Finally, if you have some coding tunes you want to submit for the next month’s playlist, you can email us at  [music2code2@harperdb.io](mailto:music2code2@harperdb.io). 🙂  Our entire team would love to hear your recommendations and find out what music moves YOU, our rad HarperDB community. So don’t be shy, go [throw on the June playlist right now](https://open.spotify.com/playlist/1ne9dpaZmepjKpwjWXaRuz?si=13dee1951f854520) and code away!
What are Blockchain Domains? - Unstoppable Domains
Tags: blockchain, webdev, sql, security
Published: 2021-06-18 15:24:04

Hey devs, do you know what are blockchain domains? Do you know how they are different from traditional domains? In this video, I’ve explained everything you need to know about blockchain domains. I’ve talked about what is a blockchain domain, 3 major advantages of a blockchain domain & lastly, I’ve talked about Unstoppable Domains, the place where you can buy yourself a beautiful blockchain domain.

Get $10 off at purchasing your first blockchain domain.
Limited offer: https://bit.ly/3vCBkAD

### Watch more: https://bit.ly/SouvikPaulTechYT

Timestamps:
00:00 - Intro
00:30 - What is a Blockchain Domain
00:56 - Easy Crypto Payments (Advantage 1)
01:19 - Decentralized Network (Advantage 2)
02:12 - Pay Once (Advantage 3)
02:25 - Unstoppable Domains
02:47 - Outro

Let's talk about tech,
Instagram: https://www.instagram.com/amisouvikpaul/
Twitter: https://twitter.com/TheSouvikPaul
Facebook: https://www.facebook.com/thesouvikpaul
Fb Page: https://www.facebook.com/amisouvikpaul

Thank you for watching!
Shopping Layout Sample Design
Tags: codepen, webdev, design, uiweekly
Published: 2021-06-18 15:07:58

<h1>Codepen Challenge Layouts: Shopping Layout</h1>

<h2>Description</h2>

<p>I tried to make a sample layout of e-commerce in this week's Codepen challenge.</p>

<p>I looked at many e-commerce sites to have an idea in how to create a design. Although I thought it is not good enough.</p>

<p>I used many fonts to implement the design.</p>

<p>This layout is best viewed with Google Chrome, because I used <code>backdrop-filter</code> for the items.</p>

<p>The color scheme of this layout is black and yellow.</p>

<p>This layout might look bad on the mobile.</p>

<h2>Explanation</h2>

<p>I didn't change the HTML code, after clicking the "Start a Pen" button. This is to challenge myself in ways of thinking of how to create a design based on the provided HTML code.</p>

<p>For the whole layout, I added <code>display: flex</code> on the <code>&lt;body&gt;</code> for me to easily design the whole layout.</p>

<p>For the header, I just rearranged it using <code>display: grid</code> code.</p>

<p>For each items, I translate the Y position upper, to overlap the logo. This is inspired by the design I browsed on the internet.</p>

<p>The description will be shown if the user hovered on the image. That's the best think I thought to compress the whole design.</p>

<h2>Fonts</h2>

<p><a href="https://fonts.google.com/specimen/Source+Sans+Pro">Source Sans Pro</a></p>

<p><a href="https://fonts.google.com/specimen/Reggae+One">Reggae One</a></p>

<p><a href="https://fonts.google.com/specimen/Oleo+Script">Oleo Script</a></p>

<p><a href="https://fonts.google.com/specimen/Dela+Gothic+One">Dela Gothic One</a></p>

<p><a href="https://fonts.google.com/specimen/Atma">Atma</a></p>

{% codepen https://codepen.io/takaneichinose/pen/WNpLMrx %}
Version Name x Version Code no Android
Tags: android, release
Published: 2021-06-18 14:23:26

---
title: Version Name x Version Code no Android
published: true
description: Veja as principais diferenças entre Version Name e Version Code.
tags: android, release
//cover_image: https://direct_url_to_image.jpg
---
Ao publicar um aplicativo na [Play Store](https://play.google.com/store/?utm_source=latam_Med&utm_medium=hasem&utm_content=Jul1520&utm_campaign=Evergreen&pcampaignid=MKT-FDR-latam-br-1002290-Med-hasem-py-Evergreen-Jul1520-Text_Search_BKWS-41905086&gclid=CjwKCAjwiLGGBhAqEiwAgq3q_jRFkiDhXwnrqv1IfwAcy4Ur5CDjbEkFEV_vUKluTr3ENtkCEjudtBoCgSUQAvD_BwE&gclsrc=aw.ds) é obrigatório o uso de versionamento. Já que o projeto se encontra no dispositivo do usuário, caso ocorra alguma falha, nós como desenvolvedores podemos pedir a versão do aplicativo para o usuário e verificar as mudanças que foram feitas naquela versão e corrigi-la.

 Para definir a versão, nós podemos ir em `build.gradle` (o do módulo) e lá encontraremos:

```java
defaultConfig {
       //Código acima omitido...
       versionCode 1
       versionName "1.0.0"
			 //Código abaixo omitido...
    }
```

Aqui nós podemos ver duas configurações relacionadas a versão do app e nós **sempre** precisamos definir valores pra ambos, `versionCode`e `versionName` . Mas o que esses valores querem dizer? E por que tem dois? 

### Version Code

Um número positivo que usamos pra definir se uma versão é maior que outra versão. Quanto maior o número, mais recente é a versão. Esse número não é mostrado (e nem deveria ser) para os usuários. Nós definimos ele usando o `versionCode` . Você é livre pra definir qualquer valor pra ele, desde que o número seja maior que a versão antecessora. Você não consegue instalar uma versão menor do que a que já estiver no dispositivo e também não pode fazer upload pra Play Store de uma versão que já tenha sido usada.

### Version Name

A `versionName` é a versão que é mostrada aos usuários. Pode ser tanto uma uma string diretamente ou uma referência pra uma string. Esse atributo não tem outra função que não seja ser mostrada para o usuário. Uma recomendação é o uso do [versionamento semântico](https://semver.org/lang/pt-BR/).

### Bônus: Play Console version

Ao fazermos upload de uma nova versão no Google Play Console, também é necessário informar um nome pra versão. Esse nome não é mostrado para os usuários. Apenas é usado dentro da própria plataforma. Com essa versão,  fica mais fácil de identificar em qual passo essa versão está (teste interno, teste aberto, produção, etc). Uma recomendação é que você use o mesmo valor que foi usado no `versionName`.

![Screen Shot 2021-06-17 at 23.34.02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dm6xiz7znqawvir96ydv.png)
 

Referências:

[](https://developer.android.com/studio/publish/versioning)

[Versioning mobile app releases like a pro](https://gabrielleearnshaw.medium.com/versioning-mobile-app-releases-like-a-pro-25137766150a)

[Semantic Versioning 2.0.0](https://semver.org)
Verify your assumptions
Tags: devops, dev
Published: 2022-09-13 21:33:28

---
title: Verify your assumptions
published: true
date: 2021-06-18 14:42:24 UTC
tags: DevOps,DEV,devops
canonical_url: https://www.geewiz.dev/2021/06/18/verify-your-assumptions.html
---

That’s what I keep preaching to my team but still fail at myself every so often.

This week, I wasted a whole day implementing a fix for a bug that wasn’t there. My task was to add one line to a configuration file in a Chef cookbook. When I ran its test suite, it surprisingly failed and it was clear that my simple change couldn’t be the cause. I assumed it was due to recent changes in software packages installed by the cookbook. So I started adapting our old code to these changes, and one change led to another, and another, until I finally realised that over the course of multiple hours, my one-line bugfix had turned into a full code overhaul. How did I get here?

I decided to start from scratch. `git reset --hard HEAD`. I quickly fixed my config file and ran the tests. When they failed again, closer inspection revealed that it was actually just the same test failing twice. The cause was a bug that had found its way into the main branch without breaking the CI pipeline (finding the reason for this will be _interesting_). It had been there all along! After another one-line fix, my change was ready for review. Round 2 had taken me less than half an hour.

The lesson: Don’t rush into battle blindly. Look closely. Identify assumptions and verify them. It might just be windmills!
🛠 State Management in Vue 3 Applications
Tags: vue, tutorial
Published: 2021-06-18 14:39:04

#### In this tutorial, you will learn how to perform state management in Vue 3 applications using the new version of Vue's standard state management library, Vuex.<br \>

<br \>
<br \>

<br \> **TL;DR:** Shared data/state amongst components in front-end applications can give rise to a lot of bugs in your applications. This is why state management is so important in modern front-end applications. Keeping data synced and up-to-date amongst components in a modern front-end application can quickly become a tedious and frustrating task if not tackled using a battle-tested strategy. Several state management libraries have been developed with certain frameworks having a de-facto state management library that they naturally work well with (e.g., [Redux](https://redux.js.org/) for [Reactjs](https://reactjs.org/)).

In this tutorial, you will learn how to perform state management in [Vue 3](https://v3.vuejs.org/) applications using the new version of Vue's standard state management library, [Vuex](https://next.vuex.vuejs.org/).

## What We'll Build

In this tutorial, you will be implementing state management in a shopping cart built with Vue 3. You will begin with a pre-built e-commerce application that sells different types of wares. However, this application is not yet complete, as its shopping features for adding products to the cart and managing cart items have not been implemented. Using the Vuex state management library, you will be adding the following features to the application:

- Load the products from a central state store
- Add items to the shopping cart
- Display items added to the shopping cart
- Calculate the total price of items in the cart
- Increase and decrease the quantity of the items in the cart
- Remove items from the cart



[Read more...](https://auth0.com/blog/state-management-in-vue-3-applications/?utm_source=content_synd&utm_medium=sc&utm_campaign=vue3)
Juneteenth: Reflecting and Celebrating Black Lives
Tags: blacklivesmatter, juneteenth
Published: 2021-06-18 14:30:46

---
title: Juneteenth: Reflecting and Celebrating Black Lives
published: true
description: 
tags: blacklivesmatter, juneteenth
---

Tomorrow, June 19th 2021, is the 156th Juneteenth celebration in the United States. We would like to take a moment as a community to honor the historical origins of this important milestone towards the freedom of Black people, reflect on the progress we still need to make, and (crucially) amplify Black joy._

Information technology can be a force for progress— But it so often amplifies prejudice, biases and oppression. So if you ask "What does this have to do with software development?", the answer is "Where do we start?". Our industry is building the future, and if we do not learn about our human history or pay a microscope on inequities around us, what are we even doing?

Last year on June 19th, we shared a post that includes some of the history behind Juneteenth: Black Independence Day in the United States. If you're wondering what Juneteenth is all about (which might especially be the case if you're not located in the U.S.!), we recommend you take a look at it as a starting point.

{% link https://dev.to/devteam/celebrating-juneteenth-11cd %}


**This year, we wanted to share some ideas for celebrating Juneteenth _worldwide_ — specifically for software developers. Because _it is our responsibility as technologists to support Black freedom, joy, and genius as we build the future together._** 

--- 

### Learn about the organizations dismantling our racist systems 

[Awesome Accomplice](https://github.com/KaraAJC/awesome-accomplice) by DEV community member @karaaj is a great place to start...

{% link https://dev.to/karaajc/contribute-to-awesome-accomplice-27la %}

### Read the real narratives of formerly enslaved people

Thank you to community member @lethargilistic for pointing us here!

{% comment 10i9o %}

### Attend JuneteenthConf 

... A free and virtual conference made for Black people in tech. Inn the words of JuneteenthConf's organizers, the conference _"celebrates Black Excellence and promotes community for Black people who are severely underrepresented, overlooked, and underutilized in the tech industry."_

June 19th. Register [here](http://juneteenthconf.com/)

### Get inspired by Black technologists

Because honoring Black History shouldn't be confined to one month per year.

{% post https://dev.to/devteam/tell-us-about-the-black-technologists-that-inspire-you-2m7b %}

---

We would love to hear how you plan to commemorate Juneteenth this year in the comments below ❤️ 

### [#BlackLivesMatter](dev.to/t/blacklivesmatter)
Netflix Home Page In Bootstrap 5
Tags: css, bootstrap, webdev, clone
Published: 2021-06-18 14:23:41

Netflix is a streaming service which is provided online movies, web series, and tv shows platforms. Here we made a clone of the Netflix Home Page In Bootstrap 5 with the help of CSS.

On this home page, we used bootstrap 5 components and utility classes. To make mobile and tab friendly we used a grid system. Also, we modify bootstrap components classes and used our own colors. We used images from Netflix and we try to make the same home page as like official Netflix. To make it responsive we used CSS media queries

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[source code](https://w3hubs.com/netflix-home-page-in-bootstrap-5/)
My Recent React JS Interview
Tags: react, javascript
Published: 2021-06-18 14:12:09

 
 **********************************************************
 *           React Interview 18 June 2020                 *
 **********************************************************

```
let num=0;
async function increment(){
num+=await 2;
console.log(num);
}
increment();
num+=1;
console.log(num);
```
-----------------------------------------------
```
console.log('hi');
setTimeout(()=>console.log('there'),5000)
console.log('You')
```
-----------------------------------------------

cont
let 
var

--------------------------------------------------
```

let arr = [1,2,3,4,5];

for(var i=0 ; i < arr.length ; i++){
    arr[i] = arr[i]++;
}

console.log(i)
```
ans output and why

------------------------------------------------------
let newArray = [1,2,3,4,5];

1) Increment 1 in the smallest and largest element.

-----------------------------------------------------

-Difference between state and props
-To to pass props from child to parent
-What if i tried to push a value in const array
-Optimising Apps
-Webpack Bundle - create a build file for each file in proj
-event loops in js


----------------------------------------------

Scenarios
    - handling auth tokens
    - handling user with different permissions.
    - create a project to list an employee from api with onclick of user should redirect to specific user.(Explain whole design)
39 - A discussion with John Lunn
Tags: cloud, azure, learn, community
Published: 2021-06-18 13:58:16

In this episode, Chris is joined by John Lunn, aka jonnychipz! An organizer of the Welsh Azure User Group, Blogger and Vlogger, Chris and John talk around 100 days of Cloud, Learning Cloud and Exam Certifications, Cloud Adoption and getting involved in the community. Wanted to start learning cloud, or getting more involved in the community? Then this may be a talk to follow!

{% youtube 4YOAaO4MCEI %}
Top UX UI design Agency
Tags: ux, uiweekly, user, userexperience
Published: 2021-06-18 13:50:01

We are Design-Driven innovators in creating game-changing projects. We craft the projects that are a perfect mix of class and simplicity. We believe in making top-notch projects that are intuitive, easy to operate and create an amazing experience.

We take serious efforts, go beyond boundaries to know the client, their business, imagine the end user’s persona, and work on these lines to make a product happen.

Our expertise- 

UX Research
UX UI Design
UX Strategy
UX Audit for web, and mobile apps
Awards & Recognitions:

10 Most Promising UI/UX Design Service Providers - 2019
Best 10 UI/UX design company 2019 by CEO Insights
Best B2B Company of the year by Clutch 2019

<a href="https://www.goprotoz.com/“>Goprotoz</a>
npm json-to-folder
Tags: showdev, npm, node, javascript
Published: 2021-06-18 13:48:57

*Create folder by parsing json data file.*

> **Note** - For the purpose of this example I will be using this path `/Users/lucas/dev/jsonfolder`

##1. Create json file:
![carbon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5a5902cndcgdhakqnuw.png)

* Must be an array.
* An object create a folder.
* Object must have name property and optional files property which is an array.
* String create a file, must be filled.

##2. Start process:
![ezgif.com-gif-maker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv4iatxdrelctomln3pk.gif)

Thanks 🙌

* [https://github.com/luctst/json-to-folder](https://github.com/luctst/json-to-folder)
* [https://lucastostee.vercel.app/](https://lucastostee.vercel.app/)
Como añadir un nuevo usuario root en mysql-workbench
Published: 2021-06-18 13:48:29

## Para crear un nuevo usuario usa estos comandos:

Primero abre mysql con sudo en tu terminal

```
sudo mysql -u root
```
lo cual les pedira la contraseña del computador y le abrira esta interfaz en la consola
![imagen con la interfaz de la consola](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%20de%202021-06-16%2008-12-20-b25acd00-8883-454e-9cd6-de6619d9170e.jpg)

## Después deben pegar estos comandos uno por uno
```
CREATE USER 'mroot'@'%' IDENTIFIED BY 'Password';
------------------------------------------------
GRANT ALL PRIVILEGES ON *.* TO 'mroot'@'%' WITH GRANT OPTION;
------------------------------------------------
FLUSH PRIVILEGES;
------------------------------------------------
```
El primer comando lo que hace es crear un nuevo usuario con el nombre mroot le pueden cambiar este nombre por el que quieran y en password también la pueden cambiar por la contraseña que quieran.

los otros comandos son para agregar permisos de al nuevo usuario recuerden si cambiaron el nombre del usuario en el primer comando también deben hacerlo en segundo comando

## Por ultimo deben crear una nueva conexión en mysql-workbench para eso deben abrirlo y dar click en el botón de mas
![Imagen mostrando la ubicacion del boton mas](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%20de%202021-06-16%2008-36-02-8d2a5c62-7051-41ce-86f6-32d264375c26.jpg)

lo que les abrira esta pestaña en la cual deben agregar un nombre en **Connection Name** puede ser cualquier y tambien deben cambiar el **Username** con el nombre del usuario que han creado anteriormente y en **Password** deben dar click en el boton **Store in Keychain…**
![Imagen de la pestaña que se abrira](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%20de%202021-06-16%2008-37-29-54f13aa7-b648-49a5-82eb-353566b5bc06.jpg)

Que les abrira otra pestaña donde deben ingresar la clave del usuario y dar click en **Ok** despues deben dar click en el boton **Test Connection** que se encuentra en la parte de abajo
lo cual les mostrara esta ventana donde deben dar en **ok** despues los volvera a la pestaña anterior donde deben dar en **ok** que tambien se encuentra en la parte de abajo para cerrar esa pestaña
![Imagen de la ventana a abrir](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%20de%202021-06-16%2008-42-15-3c4f6428-b2a5-4134-9e6a-a2ca66855be0.jpg)
Y si todo ha salido bien les debe aparecer esto
![Imagen con el resultado final](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%20de%202021-06-16%2008-44-11-ab1dc3a0-9470-4948-afc5-4b19c4749ebd.jpg)
Laravel Pagination
Tags: laravel, programming, php, tutorial
Published: 2021-06-18 13:42:23

In this post I am going to explain you about using pagination with bootstrap.

Laravel By default come with Tailwind CSS Pagination Component. To use the Bootstrap Pagination We need to change the AppServiceProvider.php

```php
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Paginator::useBootstrap();
    }
}

```

To make a collection object pagination friendly we need to use pagination methods.

To use The Simple Pagination we can update the controller.

```php
$users = User::select('id', 'email', 'name')->simplePaginate(5);
```

In List View table we can simply output the pagination links

```php
{{ $users->links() }}
```

The Output will look like.
![Simple Pagination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orjwqb75skgctebyhxi3.png)

For Pagination with numbers we need to change the collection pagination method.

```php
$users = User::select('id', 'email', 'name')->paginate(5);
```

The Output will look like
![Numeric Pagination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ov890bukmvkpxjhl7r83.png)

Get Code on [Techtool Github](https://github.com/TechTool-India/ExampleProject/tree/laravel-pagination)

You can watch this video I have explained this.

{% youtube fjQUriXD7nU %}


Thank You for Reading

Reach Out To me.
[Twitter](https://twitter.com/shanisingh03)
[Instagram](https://www.instagram.com/shanisingh03/)
[TechToolIndia](https://youtube.com/techtoolindia)