teleren/devto huggingface dataset:
How to get all the class names of a DOM element using JavaScript?
Tags: javascript
Published: 2020-09-05 00:00:00

---
  title: How to get all the class names of a DOM element using JavaScript?
  published: true
  tags: JavaScript
  date: Sat Sep 05 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-all-classnames-of-element-dom-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-70891d8d29cb53648daee41821ec6910.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-all-classnames-of-element-dom-javascript)
  
To get all the class names present in a DOM element, you can use the `classList` property on the corresponding element using JavaScript.

Let's say you have an `h1` element tag with class names `text-red` and `rounded-border` like this,

PS: I'm not writing the CSS for `text-red` and `rounded-border` classes since it is not needed to understand this property.

```html
<h1 class="text-red rounded-border">Heading</h1>
```

Now let's get theses class names in JavaScript using the `classList` property like this,

```javascript
// first get the reference to the h1 tag
const h1 = document.querySelector("h1");

// using classList property
const h1ClassNames = h1.classList;

console.log(h1ClassNames);
```

- The `classList` property returns the class names as `DOMTokenList` array-like object.
- You can get each class names from the object using the index as they are appearing in the element. For example, to get the first class name in the `h1` element, you can use `h1ClassNames[0]`.
- The `DOMTokenList` object is iterable so that you can use any valid looping construct in JavaScript.

See live example on [JSBin](https://jsbin.com/wojetatiwi/1/edit?html,css,js,console,output).

### Feel free to share if you found this useful 😃.

---
Deliberate practice in software development
Tags: programming, craftsmanship
Published: 2020-09-05 15:08:01

---
title: Deliberate practice in software development
published: true
date: 2020-09-05 00:00:00 UTC
tags: programming, craftsmanship
canonical_url: https://viralpatel.blog/Deliberate-practice-in-software-development/
---

## What is Deliberate Practice (DP)?

Deliberate practice is common phenomenon in sports, arts and other industries. Athletes have a dedicated time each and every single working day for deliberate practice. It is same with musicians, actors, painters, singers, dancers. Actors dedicate some time perfecting dialogue delivery by deliberately practicing it for hours and hours. Singers tries to perfect their pitch by intentionally focusing only on a particular pitch while practicing. Dancers and sportsman and sportswoman practices a single move over and over and over again until it becomes natural as part of their natural reflection.Deliberate practice is nothing but an intentional practice. A time slot dedicated to focus on only one core unit of your craft and perfecting it until you understand and have knowledge of all possible aspect of the component that you are trying learn and practice.

Anders Ericsson, the psychology professor quoted above, coined the term _deliberate practice_ (DP) to describe this special type of work. If you read Malcom Gladwell’s [Outliers](https://www.amazon.com/Outliers-Story-Success-Malcolm-Gladwell/dp/0316017922/ref=sr_1_1?ie=UTF8&s=books&qid=1262813920&sr=8-1) , you probably have an answer: **the 10,000 hour rule.** This concept, which was first introduced in academic circles in the early 1970s, was popularized by Gladwell in his 2008 book.To summarize in Anders Ericsson’s words

> [A]ctivities designed, typically by a teacher, for the sole purpose of effectively improving specific aspects of an individual’s performance.

## What is not Deliberate Practice?

Reading a book, watching tutorial videos, going through online courses or reading blogs are not part of “Deliberate Practice”. These are the resources for knowledge so as a knowledge worker, you definitely should be doing combination of things mentioned in a previous line to gain new knowledge, a new perspective or to clear your existing false assumptions, but, they do not account towards your 10,000 Hour rule. However, coding exercises, preparing notes by hand, trying to solve the same problem in many different ways, or, trying to solve many different problems from the same concept, all of this can account for deliberately practiced hours since all of these activities engages your brain in many ways and doing these over and over again will help you grasp the acquired knowledge in a long-term memory.

### Resources

- Read this amazing article by Cal Newport [The Grandmaster in the Corner Office: What the Study of Chess Experts Teaches Us about Building a Remarkable Life](https://www.calnewport.com/blog/2010/01/06/the-grandmaster-in-the-corner-office-what-the-study-of-chess-experts-teaches-us-about-building-a-remarkable-life/)
Customize the Laravel notifications template.
Tags: laravel, mails, notifications
Published: 2020-09-04 23:43:01

---
title: Customize the Laravel notifications template.
published: true
description: How to customize the layout and CSS of Laravel notifications template.
tags: Laravel, Mails, Notifications
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/j4fs0xukx32izpi6aafd.png
---

This is a little tip but very helpful to customize the notifications layout the Laravel docs explain this command:

```php
php artisan vendor:publish --tag=laravel-notifications
```

Now in "resources/views/vendor" you can edit the markdown template layout.


But what if I need to customize the colors and other CSS of the template, well Laravel provides a command to publish this assets:

```php
php artisan vendor:publish --tag=laravel-mail
```

Now in "resources/views/vendor/mail/html/themes/default.css"


Here we can customize the CSS to brand the notifications.

## Little tips: 

- To customize the header link: 

```css
.header a {
    color: #3d4852;
    font-size: 19px;
    font-weight: bold;
    text-decoration: none;
}
```

- To customize the button "primary":

```css
.button-primary {
    background-color: #2d3748;
    border-bottom: 8px solid #2d3748;
    border-left: 18px solid #2d3748;
    border-right: 18px solid #2d3748;
    border-top: 8px solid #2d3748;
}
```

Of course you can customize the error action and success action, just below.

Thanks for reading!
[Tutorial Linux] Terminal: Histórico de comandos
Tags: historico, linux, terminal, womakerscode
Published: 2020-09-04 23:13:47



## Navegando pelos comandos digitados

Para buscar comando que já foram digitados no bash, basta pressionar a tecla ***seta para cima***, assim os comando do mais recente ao mais antigo poderão ser selecionados novamente, sem a necessidade de escrevê-los de novo.

Outra maneira de verificar os comando já digitados é através do comando:

```
$ history
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

![comando history](https://dev-to-uploads.s3.amazonaws.com/i/nn6v7ltinomyg40yo8vi.png)

Para acessar um dos comando listado, digite:

```
$ !<número_do_comando_desejado>
```

- digite o número sem os sinais **< >**.

![histórico de comandos](https://dev-to-uploads.s3.amazonaws.com/i/fack95tjffsa182h0zvy.gif)

## Limpar o histórico

Caso deseje limpar o histórico armazenado, basta digitar:

```
$ history -c
```

- **-c** do inglês, **clear**, é o comando que vai limpar o nosso histórico.

## Buscar por um comando

Também é possível acessar o histórico de comando através do ***reverse search***. Para ativá-lo basta pressionar **CTRL+R** no terminal.

Assim, só é preciso digitar parte do comando ao qual se busca e o bash retornará alguma sugestão do histórico. Apertando **ENTER**, o comando é acionado.

Caso o comando que aparece não seja o desejado, pressione novamente **CTRL+R** quantas vezes forem necessárias, até encontrar o comando.

Para cancelar o reverse search basta pressionar **Esc** ou **CTRL+C** e você retornará a visualização anterior.

![usando o reverse search](https://dev-to-uploads.s3.amazonaws.com/i/o4ks4xpt07r2z1pqzjkj.gif)

## Exibindo data e hora em que os comandos foram usados

Se você deseja exibir a data e hora em que os comandos foram usados, será necessário editar o arquivo **.bashrc**; assim:

No diretório do seu usuário, digite: 

```
$ nano .bashrc
```

Caso você não esteja no diretório, basta passar o caminho absoluto para chegar até ele; assim:

```
$ nano /home/seu_usuario/.bashrc
```

Aqui eu estou usando o editor **nano**, mas você pode usar aquele que preferir.

No final do documento, digite:

```
export HISTTIMEFORMAT="%d/%m/%y %T " && history
```

Desse modo, o histórico que antes aparecia assim,

![histórico sem data e hora](https://dev-to-uploads.s3.amazonaws.com/i/nn6v7ltinomyg40yo8vi.png)

Aparecerá assim,

![histórico com data e hora](https://dev-to-uploads.s3.amazonaws.com/i/5i10r42hvg5z4j4zv74q.png)
Azure Durable Functions | PowerShell 7 | Chaining Pattern
Tags: powershell, durablefunctions, serverless, azure
Published: 2020-09-05 04:01:32

---
title: Azure Durable Functions | PowerShell 7 | Chaining Pattern
published: true
date: 2020-09-04 23:12:56 UTC
tags: powershell,durablefunctions,serverless, azure
---

![](https://cdn-images-1.medium.com/max/1024/1*u0J3O2VTqBF0qb7STjIv_Q.jpeg)

This article is part of [#ServerlessSeptember](https://aka.ms/ServerlessSeptember2020). You'll find other helpful articles, detailed tutorials, and videos in this all-things-Serverless content collection. New articles from community members and cloud advocates are published every week from Monday to Thursday through September. 
 
Find out more about how Microsoft Azure enables your Serverless functions at [https://docs.microsoft.com/azure/azure-functions/](https://docs.microsoft.com/azure/azure-functions/?WT.mc_id=servsept20-devto-cxaall). 

Hi everyone, nice to see you here 😁. I’ll try to write in English again, for me, it’s so hard because in my country we talk in Portuguese, I’m from Brazil, and if my English is so poor please don’t go away from this content 😂.  
Ok Here we go, I’m trying to explore Durable Functions with PowerShell 7, after I saw this [post ](https://azure.microsoft.com/pt-br/updates/powershell-support-in-durable-functions-is-in-public-preview/), yes now we can use PowerShell With Durable Functions in this post we focus in Chain Pattern, what is chaining pattern? Chaining Pattern in a simple way, are some steps to complete something, is possible to build a flow with functions, for example, you can trigger some function and result is an input for another function, this flow is drop-down. In this example, you can see this in action.   
Let’s go?

Ok I tried to make some sketch of how this works.

![](https://cdn-images-1.medium.com/max/1024/1*h1fM0XEFT0SFSmCUosfveQ.jpeg)<figcaption>In this picture we have a sample how chaining patter works, first we can call http request, listner httpstart call orchestrator and they had a workflow inside code, in this picture we had three activities to do.</figcaption>

Sample code here and other instructions:

[EwertonJordao/AzDurableFunction\_pwshchainningpatter](https://github.com/EwertonJordao/AzDurableFunction_pwshchainningpatter)

Ok, now I’ll implement my code on Azure, you can use your VSCode for do this or use CLI.

CLI option:

![](https://cdn-images-1.medium.com/max/1024/1*XfN7wNKFPfJYemRaXkHTbQ.png)

![](https://cdn-images-1.medium.com/max/1024/1*28MneY9nS16-tFvXgqhNJA.png)

![](https://cdn-images-1.medium.com/max/1024/1*jQ9GOI1Zz4rXQLUghAgwAQ.png)

GUI option:

![](https://cdn-images-1.medium.com/max/1024/1*IniiIFT-h7aPRE_ZbvGqmg.png)

![](https://cdn-images-1.medium.com/max/1024/1*HpkxzHTVyM6ytH7MKfDn5g.png)

![](https://cdn-images-1.medium.com/max/1024/1*ogSCe8jrmMgL1S5t_u0xXQ.png)

Result:

![](https://cdn-images-1.medium.com/max/1024/1*n9AXJMLMtrMmMnDlLnJAtw.png)

Finaly, in this sample I tried to show how you can use Chainig Patter for do Adm Tasks on Azure, see you in next opportunity. If you like this post please “clap” share with others and star my repository on github =D. Thank you.
CSS Hover Transitions Part 1
Tags: css, html, webdev, firstyearincode
Published: 2020-09-04 22:42:36

Some of my favorite things to style with CSS are hover effects, in part because they are so easy to apply. Here are a list of CSS properties that work well when changed with the CSS `hover` selector, transitioning in and out of the hover state seamlessly.

##Color
Changing the color works especially well when used with other effects.

{% codepen https://codepen.io/jordanjlatimer/pen/poydGLO default-tab=css,result %}

##Background Color
I prefer it when the color gets lighter on hover, like so:

{% codepen https://codepen.io/jordanjlatimer/pen/qBZVLKQ default-tab=css,result %}

##Border Color
Note that I said border *color* rather than just adding a border. If you don't have a border and then add it on hover, you'll notice that the element may resize in the process. Additionally, the border instantly removes itself after hover instead of gradually. Notice the difference between the two elements in this CodePen:  

{% codepen https://codepen.io/jordanjlatimer/pen/dyMZaKM default-tab=css,result %}

##Border Radius
Notice how just by changing the border radius, we can tranform a button-shaped `div` into a tab shaped one.

{% codepen https://codepen.io/jordanjlatimer/pen/vYGWbvg default-tab=css,result %}

##Letter Spacing
This is one of my favorites, as it can make a button or other element really come alive. Note, however, that unless you are ok with your element resizing horizontally, you will need to make sure that your text has space to grow. Notice how the top element is able to accommodate the increased letter spacing without resizing while the bottom one is not.

{% codepen https://codepen.io/jordanjlatimer/pen/qBZVvba default-tab=css,result %}

##Text Shadow
A shadow can give the text a nice 3D effect.

{% codepen https://codepen.io/jordanjlatimer/pen/LYNOaPR default-tab=css,result %}

##Box Shadow
A shadow can give an element a nice 3D effect as well:

{% codepen https://codepen.io/jordanjlatimer/pen/ZEWaPKY default-tab=css,result %}

##All Together, Now
Just for fun, let's combine all the effects together:

{% codepen https://codepen.io/jordanjlatimer/pen/ExKbMvy default-tab=css,result %}

Haha So, perhaps all of them together is a bit overkill, but a few of them combined can really bring new life to an otherwise dull design. Of course, hover effects don't work on mobile devices, so a large chunk of users won't even see them, but they are fun to play with nonetheless.
Yellow Duck “Oops! An error has occured. Please, restart the application to get latest update.”
Tags: webdev
Published: 2020-09-04 22:27:55

##Are you are facing this error when you first opened Yellow Duck??

This error occurs because of **space in the path name**


If your Yellow Duck program folder is the path `C:/Users/User Name/program`

What Yellow Duck does is that it ignores a section of the path name `User Name`and looks for files in `C:/Users/User/program`, which obviously doesn't exist. 


*Error will occur if your path looks similar to this*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i1nnl573tuzocl5h5vwa.PNG)

##How to resolve this issue ?

You need to move the folder that contains `YellowDuck.exe` .
The folder's name will also be `yellowduck`

The path of this folder will usually look like this:
`C:\Users\User Name\AppData\Local\Programs\yellowduck`

Either copy or move this folder named `yellowduck` and paste it to another directory `C:\yellowduck`

*Something like this*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5ld3xo5ssi5w4ugikt7y.PNG)

 
Now, reopen the Yellow Duck App. It should probably run. 
This process resolved this error for me. 

___

>You can try and comment if it doesn't work for you. 
I'll try to look for other methods. 



___________


###Now if few of you are wondering what Yellow Duck is, a short answer is here:


If you try to live stream into Instagram from your desktop, you would not be able to. For that you can use a live streaming software called OBS. 

OBS uses a unique `streaming key` and a `server link` to live stream into your account but Instagram doesn't offer these.  

###Now comes Yellow Duck to your rescue. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hhsjokpmkg1ei9wsaagk.PNG)

You login to Yellow Duck using your Instagram account, and voila! 

You get your account's `stream key` and `server link`

>Now, you can use these in OBS and you'll able to live stream into your Instagram account from your desktop.



OBS also used for live streaming into Facebook or YouTube and many other social links simultaneously.

*(there are other live streaming software as well, OBS is just the most popular)*  


I hope this helped !!
Happy to learn

_______



### If the solution doesn't work, you may try this solution shared from Janet B. Yellen 


`Navigate to File Explorer>Quick Access>$AppData$>Roaming>Yellowduck>Settings> change the two 'False' values to 'True". Save the File. Relaunch Yellowduck.`

{% user allseeingotis%}
-------

Visit my page that I have recently started to share and help others with learning to program. 
 **[Progressive Programmer](https://www.facebook.com/Progressive-Programmers-League-116342093426883)**
Gatsby Images and Safari
Tags: gatsby, safari, ios, lqip
Published: 2020-09-04 22:21:21

By default Gatsby image places a `loading: "lazy"` attribute on all images created by the `gatbsy-image` package. This attribute causes images on the page wait to load until they are in view. When used in conjunction with Low Quality Image Placeholders, the result is a really nice experience in most modern browsers that is performant and aesthetically pleasing. 

Safari, however, is yet to implement an important browser API that `gatsby-image` depends on... [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). This can lead to images never loading or loading in an `lqip` state and never updating.

According to the MDN docs:
> The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

This feature is necessary in order to update the image's source once it is in view, which never happens in Safari desktop or iOS.

Luckily, the fix is easy. Simply [install the polyfill](https://www.npmjs.com/package/intersection-observer):

```bash
yarn add intersection-observer
```

Next, let Gatbsy know that you want to load the polyfill once the browser APIs are available. Open up `gatsby-browser.js` and copy the following snippet:

```javascript
/**
 * Implement Gatsby's Browser APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/browser-apis/
 */

export const onClientEntry = async () => {
  if (typeof IntersectionObserver === "undefined") {
    await import("intersection-observer")
  }
}
```
Viola! Performant images in Safari with `gatsby-image`!

You can check out my [Gatbsy/WordPress Starter repo](https://github.com/arnonate/gatbsy-wordpress-starter) for an example of this polyfill in action.
Day 211: Boys
Tags: hiphop, code, coding, lifelongdev
Published: 2020-09-04 21:47:06

_liner notes_:
- Professional : Had our team meeting. Cool to see the team. Worked on integrating our library into the React application with Hooks and the Web Components. I tried to load the library from a CDN, but React didn't like that so I just installed it. Then I would normally use the componentDidMount function to do the the set up for the library. With Hooks, there is no componentDidMount. The React documentation said that useEffect is similiar to componentDidMount, but from what I've seen, is that it's called on every re-render so that would initialize the library again. I don't know, I think I may have figured our a way around it, but I ran into some other blockers. We'll see.

- Personal : Last night, went through a bunch of tracks for the radio show. Don't remember much else. haha.

![Looking over the city of Celano, Abruzzi, Italy with a castle in a center and surrounded by mountatins](https://dev-to-uploads.s3.amazonaws.com/i/iu4k8foxm9b5u294c707.png)

Going to finish up the prep work for the radio show. Watch an episode of 'The Boys' season 2 and work on my side project. Monday is a holiday! Woohoo!

Have a great night, weekend and Monday!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube MA7pGpjGfY4 %}
Beyond Formatting Your Console: Styling Your console.log()
Tags: javascript, codenewbie, productivity
Published: 2020-09-04 20:42:56

![console styling demo](https://dev-to-uploads.s3.amazonaws.com/i/zm9hfxgh7azeiqlcsxeh.png)

Last week I shared [three handy dev tools](https://dev.to/liaowow/beyond-console-log-3-ways-to-format-console-outputs-in-javascript-236p) that let us format our console outputs beyond the plain-old `console.log()`. Today I learned one more neat trick to "prettify" our console.

This trick is so simple, all you need to do is add a special indicator inside your `console.log()`.

Let's see how it works with pure strings:
1. Add this set of characters, `%c`, at the start of the string.
2. Pass in an additional argument, which contains the style of the string. As you can see below, the syntax is basically the style attributes of an HTML element.

That's it! Feel free to play around on your browser console:
```
console.log('%c Style me pretty 💋', 'font-family: "Impact", sans-serif; font-size: 100px; color: black; background: #ffc600;')
```

Now to the practical use.

Say you want to test how a variable, `lastChecked`, gets reassigned inside a function. Aside from writing out the current output of the variable in your `console.log()`, you can insert the styling as an argument, like so:
```
console.log('%c lastChecked before shiftKey: ', 'color: black; background: #BADA55;',lastChecked)
```
```
console.log('%c lastChecked inside shiftKey: ', 'color: black; background: #FFC600;', lastChecked)
```
```
console.log('%c lastChecked after shiftKey: ', 'color: black; background: #3EA055;', lastChecked)
```

Just like that, you are presented with a colorful console log with clear distinctions between different stages. It is a cool alternative to organizing your console outputs, similar to the `console.group()` method as mentioned in [my previous post](https://dev.to/liaowow/beyond-console-log-3-ways-to-format-console-outputs-in-javascript-236p).

![style console with variables](https://dev-to-uploads.s3.amazonaws.com/i/pihb237ad78e198wt3d2.png)

<hr>

Finally, you might be wondering how I found out about those little tricks. 

In addition to the wonderful search engine, I have been coding along with the popular, FREE [JavaScript30 tutorial](https://javascript30.com/) by Wes Bos, who kept introducing fascinating dev tools along the journey and creating a fun, delightful JavaScript learning experience. 

I highly recommend checking it out if you haven't already.