teleren/devto huggingface dataset:
How to Add Tooltips in HTML & CSS
Tags: webdev, javascript, tutorial, html
Published: 2022-01-26 16:01:10


![Tooltips ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yef3bzyivagfgqkxp7ar.png)
Tooltip is a way used in HTML for displaying some extra details about the particularly selected element. This can be done on the mouse hover effect whenever the user drags the mouse over an element that is using a tooltip to display particular information about that element.

##Add Tooltips in HTML & CSS

To add tooltips you need to create two files one is index.html and one is style.css or you can add CSS in the HTML file as well. so, let's start.

HTML Code: 
```html
<div>Here is an examples of a <a class="tooltip" href="#">Tooltip<span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a></div>
```

CSS Code:

```css
<style>
.tooltip {position: relative;}
.tooltip span {
 margin-left: -999em;
 position: absolute;
}
.tooltip:hover span {
 border-radius: 5px; 
 position: absolute; left: 1em; top: 2em; z-index: 99;
 margin-left: 0; width: 250px;
}
.classic { padding: 0.8em 1em; 
}
* html a:hover { background: transparent; }
.classic {background: #f3f4fe; border: 1px solid green; }
</style>
```

If you want to learn in detail  click [how to Add Tooltips in HTML & CSS](https://softcodeon.com/tutorials/add-tooltips-in-html-and-css.htm)

TO see live [Demo](https://codepen.io/softcodeon/pen/RwLXXwK)

I hope you like this post. If you have any question please discuss below help to improve. Thank you.
HTML Reporting for AxeCore
Tags: a11y, testing, automation, axecore
Published: 2022-01-26 15:59:58

**Quick intro** - I am a developer in test as well as an advocate for accessibility. I also drink too much coffee and love cats. 

![An adorable white kitten](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8pwc149n9d5jvwg2kog.png)

As a dev in test, automating and scaling "all of the things" is extremely important so we can focus on tasks that cannot be automated. I would say that accessibility as a whole cannot be completely automated. We still need manual checks from people to ensure that a site is accessible. 

Recently I implemented [Deque AxeCore](https://github.com/dequelabs/axe-core) within our automation test suite. Axe Core is used for many accessibility tools, including [Lighthouse](https://developers.google.com/web/tools/lighthouse). The bare-bones AxeCore report is a JSON output that is not the easiest to read. I wanted to find a tool in which we could format this JSON report as HTML. With searching and great luck, I found such a tool, [Axe HTML Reporter](https://github.com/lpelypenko/axe-html-reporter). HUGE thank you to Liliia Pelypenko (@lpelypenko ) for this great solution for AxeCore reporting!

I couldn't find a good step-by-step ReadMe that worked for my needs. _So_, I'm here to tell you how I implemented this HTML report to my AxeCore JSON output and, maybe it'll work for your needs too!

_I'll also add that, this is to produce one HTML report and rewrite the report on each test run._

Before going on forever with backstory and making this look like a recipe blog, let's get to the good part!


## The Good Part

1. After installing AxeCore, we'll now add the HTML reporting.
2. First, you'll want to install [Axe HTML Reporter](https://github.com/lpelypenko/axe-html-reporter) via NPM or, however you are most comfortable. 
3. Once Axe HTML Reporter is installed, we'll first update the AxeHTMLReport.js file as follows: 

```
import { createHtmlReport } from 'axe-html-reporter';
import { writeFileSync, readFileSync } from 'fs';

(() => {
    const rawAxeResults = JSON.parse(readFileSync('AxeResults.json', 'utf8'))
    createHtmlReport({
        results: rawAxeResults,
        //options available to further customize reports
        options: {
        }
    });
})();

```
I did leave the options area in case I wanted to add, well, options. Options are listed in the Axe HTML Report documentation. 

This will grab your AxeCore JSON file, filter it through the HTML reporting and then output this HTML report `accessibilityReport.html` within an artifacts folder in your root project folder. 


### File Structure Example
![File structure example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zo9wexjymkyafdc1qtf.png)

[Sample Test Output](https://lpelypenko.github.io/axe-html-reporter/)

![Snippet of Sample HTML Report](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a047oqmefdg0injvc83.png)
Cannot find a parameter with this name: message
Tags: kotlin, android
Published: 2022-01-26 15:59:44

> Used Kotlin plugin: `203-1.5.30-release-411-AS7717.8`
> Used Kotlin version: `1.5`

It was a calm beginning of a workday. I sat down to my computer and I started coding. I needed to add a custom `Exception` class to have logs and a code more readable. You've probably done this many many times.

Usual exception in Kotlin:

```kotlin
data class SomeCustomException(
    val explanation: String
) : Exception(
    message = "Oh, something broke because $explanation"
)
``` 

Now, stop for a second and try to figure out what's wrong with that code.

The code above is not marked by the Android Studio as an error. However, when you try to compile this, it will fail with a message `Cannot find a parameter with this name: message`.

![Wait wut](https://c.tenor.com/LjCBqxySvecAAAAd/huh-rabbit.gif)

I removed the name `message` from parameters

```kotlin
data class SomeCustomException(
    val explanation: String
) : Exception(
   "Oh, something broke because $explanation"
)
``` 

and it compiles just fine. The question is why?

Apparently, this is [a known issue](https://youtrack.jetbrains.com/issue/KTIJ-12824). The IDE treats the `Exception` class as Kotlin's, but it's just an alias for Java's `Exception` class. The IDE would have shown you an error, if you had used Java import:

 ```kotlin
data class SomeCustomException(
    val explanation: String
) : java.lang.Exception(
   message = "Oh, something broke because $explanation" // pointed out as an error by the IDE
)
```

Maybe for some. of you it's obvious - duh, of course it will fail 🧐 - but I added the named parameter without even thinking.

I hope you are having a great day, without surprising failures ✌🏻
How to make a simple chat-app in Node.Js
Published: 2022-01-26 15:41:51

Ever wondered how it would have been if you could talk to your friends on the app that you made!For me it would have been something next to happiness. Basically, we are going to use Express framework and some basics of File Management. 

## First things First
**Now we will set a proper environment for our code.**

- Make a folder with name of your choice.
- Add the following files into it:
    - main.js
    - index.html
    - msg.htm
-Open the cmd and type, `npm init`

____________________________________________________

### [main.js](https://github.com/millow-stack/ChaterG/blob/main/main.js)
```
var express = require('express');
var fs = require('fs');

var app = express();

app.get('/', function(req, res){
    res.sendFile(__dirname+'/index.html');
})

app.get('/msg', function(req, res){
    res.sendFile(__dirname+'/msg.htm');
})

app.post('/', function(req, res){
    fs.appendFile(__dirname+'/msg.htm', '\n<li>'+req.query.nm+' : '+req.query.mg+'</li>', (err)=>{
        console.log(err)
    });
    res.redirect('/');
})

app.listen(80);
```
### [index.html](https://github.com/millow-stack/ChaterG/blob/main/chater.html)
```
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>My Chat</title>
	<style type="text/css">
		input[type = hidden]{
			display: none;
		}
		input[type = text]{
			width: 95%;
			height: 25px;
			border: 0.25px solid black;
			outline: none;
		}
		iframe{
			width: 95%;
			height: calc(100% - 5px);
			border: 0.25px double black;
		}
		form{
			text-align: center;
		}
	</style>
</head>
<body>
	<form method="post" acction="/">
		<input type="hidden" hidden id="nm" name="nm">
		<input type="text" name="mg">
		<iframe src="msg">Unsupported</iframe>	
	</form>
	<script type="text/javascript">
		if (document.cookie){
			document.querySelector('#nm').value = document.cookie;
		} else {
			document.cookie = prompt('Your nickname here:');
			document.querySelector('#nm').value = document.cookie;
		}
	</script>
</body>
</html>
```

### [msg.htm](https://github.com/millow-stack/ChaterG/blob/main/msg.htm)
```
<style type="text/css">
	li{
		border-bottom: 0.25px solid #333;
	}
</style>
<script type="text/javascript">
	setInterval(500, function(){
		window.reload()
	})
</script>
```

You can find your result on [localhost](http://127.0.0.1/)
1 line of code: How to reverse all words of a string
Tags: javascript, webdev, productivity, codequality
Published: 2022-01-26 15:40:55


```javascript
const reverseWords = (str) =>  str.split(" ").map((word) => [...word].reverse().join("")).join("");
```
 Returns the string with all words reversed

---

## Improved version with unicode support
```javascript
const reverseWords = (str) => str.replace(/(\p{L}+)/gu, (word) => [...word].reverse().join(''));
```

---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---
Bracket Pair Colorizer nativo en VSC
Published: 2022-01-26 15:33:55

Soy super fan de la extensión [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) y ahora viene lo bueno...

¡YA ES NATIVO EN VSC Y MUUUUCHO MÁS RÁPIDO!

## Configuración
1. Elimina la extensión Bracket Pair Colorizer

2. Actualiza VSC

3. Vamos a añadir en settings.json la línea que nos permitirá usar nativamente esta extensión, ejecutamos:
Windows - Ctrl + Shift ⇧ + P
Mac - ⌘ + Shift ⇧ + P
Escribe "settings" 
Haz click en "preferences: open settings(JSON)"

Añade la siguiente línea (puedes ayudarte con la imagen también)
```
"editor.bracketPairColorization.enabled": true
```

![how to](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u9f442znv7c1lpn9pb2.PNG)

¡TADAAAAA! ¡Así de fácil! :)

[VSC Tips ¡Aquí!](https://community.vscodetips.com/)
ArJd-Live
Tags: react, node, mongodb, socketio
Published: 2022-01-26 15:30:16

## To visit *ArJd-Live* click [here](https://arjd-live.herokuapp.com)
## Demo video click [here](https://youtu.be/nvcFr3a8WT4)

Recently we (me and [Jaydip Dey](https://github.com/jaydip1235)) developed a code editor+compiler (https://arjditor.herokuapp.com/) which Archan Banerjee posted few days ago. Today we (me and [Jaydip Dey](https://github.com/jaydip1235)) have modified the project and took it to a level up by integrating realtime feature.

### Hence presenting ArJd-Live, a realtime code-editor and compiler to ease coding interview process. Users can create their rooms and can invite others to their rooms. So, millions can work on same code at the same time together !

## *Developed By*:
 ➤ [Jaydip Dey](https://github.com/jaydip1235)

 ➤ [Archan Banerjee](https://github.com/ArchanJS)

## *Features*:
✅ Users can create their own room as well as share link of their rooms.

✅ All the users in a particular room can update the same code simultaneously at the same time.

✅ If anyone of the room member runs the code, the input and the output will be visible to all the members of that room.

✅ The code snippets on changing the language are updated in real time. Any room can be accessed anytime with the URL or the room ID of that particular room, and can always get and modify the last updated code.

✅ Supports 7 programming languages including C, C++, Java, Python etc.

✅ Users can select themes (github, monokai etc.) according to their choices .

✅ They can also choose the font size.



## **How to run locally**
➡️ Clone the repository

➡️ Create a config.env file and add MONGO_URI and PORT with your own credentials.

➡️Run **npm install** both inside the client folder and the root folder.

➡️Run **node server** in the root folder and **npm start** in the client folder.

➡️App starts running on port 3000. You are good to code!


## **Screenshot**
[![arjd-live.png](https://i.postimg.cc/tJMq6cJq/arjd-live.png)](https://postimg.cc/0K71Rc7F)

## Do ⭐ the repo if you like and feel free to contribute by raising PR
Responsive Message Box with JavaScript Class
Tags: codepen, javascript, css, webdev
Published: 2022-01-26 15:25:57

<h2>Responsive Message Box with JavaScript Class</h2>

<p>This Message Box implementation in JavaScript, inspired by material design's toast message.</p>

<p>I used native JavaScript Class to implement the message box. This may not work with older browsers due to compatibility issue with compatibility with native JavaScript class.</p>

<p>The toast message will appear at the top right corner of the screen if the width of the screen is 768 pixels and above. Otherwise, the toast message will appear at the bottom center of the screen.</p>

<h2>Usage</h2>

<p>Create MessageBox class instance:</p>

<pre style="white-space: pre-wrap;"><code class="JavaScript">let msg = new MessageBox("#id", option)
</code></pre>

<p>Available options (type: Object):</p>

<pre style="white-space: pre-wrap;"><code class="JavaScript">const option = {
  // number: Count in milliseconds before closing the message box
  closeTime: 1000,
  // bool: Flag if the close button (or label) will be hidden for click
  hideCloseButton: false,
}
</code></pre>

<p>Call the "show" method to show the dialog box.</p>

<pre style="white-space: pre-wrap;"><code class="JavaScript">msg.show(
  "This is the message that will appear on the message box",
  () =&gt; {
    alert("This will be called after the message box is completely hidden");
  },
  "This is the close button"
);
</code></pre>

{% codepen https://codepen.io/takaneichinose/pen/eZoZxv %}
Um breve comentário sobre layer() e camadas em cascata
Tags: css, programming, webdev, braziliandevs
Published: 2022-01-26 15:19:37

_O C do CSS começando a ter um novo sentido_

Desde o ano passado foi comentado sobre a nova propriedade do CSS, o `layer()` que tem como objetivo de trabalhar melhor a especificidade e a ordem dos seletores e regras nas folhas de estilo. Para quem não sabe o CSS é procedural, ou seja, ele vai executar as coisas exatamente na ordem em que você vai escrever. Mas o `layer()`, até então, pretende mudar um pouco essa dinâmica. 

Mas como? 

Com ele podemos controlar melhor as camadas de estilo e a ordem de importância, então sabe aquele `!important` que você joga como última saída pra sobrepor uma customização que tem um seletor muito mais acima do seu? Um outro exemplo de uso/solução seria para os casos em que usávamos o `z-index` para reordenar blocos (sobrepor um ao outro). Com o `layer()` conseguiríamos redefinir melhor quem vai ter alta, média e baixa prioridade. Isso vai ser bom para quando trabalharmos com bibliotecas de terceiros, por exemplo. 

A proposta dessa propriedade é interessante e vale ficarmos de olho. No momento só funciona apenas para as versões 99-100 do Chrome e muito em breve no Firefox. De qualquer forma isso vai nos trazer mais facilidade, controle e organização na construção das nossas folhas de estilo. 

Vou deixar abaixo uns links bem interessantes e mais completos sobre o assunto (em inglês): 

- [https://caniuse.com/css-cascade-layers](https://caniuse.com/css-cascade-layers)
- [https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#browser_compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#browser_compatibility)
- [https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/](https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/)

Até a próxima!
Writing Updates
Tags: writing
Published: 2022-01-26 15:19:35

I've been going back and forth on this with some friends and a few blogs that I write for a community.  

When I learned how to write in school I learned a few grammar rules which are no longer valid.  

- Always put two spaces after a period.
- List of items has no comma for the conjunction. aka item1, item2 and item3.  Vs item1, item2, and item3.


They are minor grammatical rules that are so ingrained in my muscle memory that I can't shake them.  Do you find that you have some habits that need updating since you started writing? Do they matter?  Even when I was in school I think there were some updates to proper grammar rules in the 4 years I was in High School.  Do you find any grammar rules or habits so objectionable that it'll make you close the tab? 

What are your thoughts? #ponderingPenguin
What is Computational Thinking?
Tags: beginners, productivity, html, design
Published: 2022-01-26 15:09:08

#Computational thinking has four steps to use in implementation:

####Decomposition is breaking problems into parts and try to solve little problems. So they can be very easy to settling or arranging it.


####Pattern Recognition is interpreting pattern and models, then we find a similar pattern, code script or else to occur things what we want fastly. By the way we reduce our cognitive load, this is very important because of working confidence.


####Abstraction is organising data logically, the process of filtering out, needless details confuses our minds in every kind of jobs. Please don't think about details that they are contribute your experiment, not like that. In time, inplace, in season learning is best for efficiency.


####Alghorythm is designing and implementing alghorythm. At the beginnig of this stage we can use Pseudocode. Flowcharts are very useful for us to make the processes in alghorythm more visible.

Thanks for reading. Best wishes.
Fundamentos de TypeScript 🦆| #12: Parámetros opcionales y valores por defecto en funciones
Tags: typescript, beginners, webdev, spanish
Published: 2022-01-26 14:53:50

## **Parámetros opcionales**

En TypeScript para poder definir un parámetro opcional en una función basta con usar el símbolo `?` de la siguiente manera:

{% stackblitz typescript-hkqjfv %}

En este ejemplo, el parámetro `foto` es opcional puesto que tiene el símbolo `?`, pese a que la función recibe 3 parámetros el último es opcional, por ende sino lo pasamos la función se ejecutara bien.


## **Parámetros por defecto**
Basta con igualar el parámetro al valor que deseamos. Si al llamar la función este parámetro no recibe valor entonces tomará el valor por defecto.


{% stackblitz typescript-lippap %}

Ahora si no pasamos nada al parámetro `foto` tomara el valor por defecto `"http://mi-photo-por-defecto"`.

## **Orden de los parámetros**
El orden sí importa, por eso se recomienda escribir los parámetros de una funcion en el siguiente orden:

**Primero**: Parámetros obligatorios
**Segundo**: Parámetros opcionales
**Último**: Parámetros por defecto (siempre al final)

Esto hará que las funciones no se rompan a largo plazo haciendo más mantenible el código escrito.

```ts
function imprimirDatos(nombre:string, edad?:number, peso:number = 50 ){
  ...
}

```

## **Conclusiones**
- Para usar un parámetro opcional debemos emplear `?` como en Node.
- Para usar un parámetro por defecto solo igualamos al valor que deseamos.
- El orden de los parámetros importa.


## **Referencias**
{% youtube BwuLxPH8IDs %}
Paracetamol.js💊| #32: Explica este código JavaScript
Tags: javascript, webdev, spanish, beginners
Published: 2022-01-26 14:49:52

## **Explica este código JavaScript**

¿Cuál es la diferencia entre las siguientes funciones?

```js
// primera función
function sumar(a, b){
  return a + b;
}

// segunda función
const sumar = (a, b) => {
  return a + b;
}
```

A. No hay diferencia, son exactamente iguales.
B. La primera función es más rápida que la segunda.
C. La primera función tiene hoisting, la segunda no.
D. Solo cambia la sintaxis, luego son iguales.

Respuesta en el primer comentario. 

---
Paracetamol.js💊| #31: Explica este código JavaScript
Tags: javascript, spanish, webdev, beginners
Published: 2022-01-26 14:48:53

## **Explica este código JavaScript**

```js
let x = 10;
if (true) {
  let y = 20;
  var z = 30;
  console.log(x + y + z);
}
console.log(x + z);
```

- A. `60`, `40`
- B. `undefined`, `10`
- C. `50`, `10`
- D. `null`, `40`

Respuesta en el primer comentario.

---
Taking flexbox to next level
Tags: css, webdev, beginners, programming
Published: 2022-01-26 14:43:36

### flex-flow

Mix of flex-direction and flex-wrap

```css
.container {
	display: flex;
	flex-flow: row wrap;
}
```

---

### justify-content & align-items

- justify-content
    
    default: flex-start
    
- align-items
    
    default: stretch
    
    align-items work if a) parent element has height, b) some of items are bigger
    
    ```css
    .container {
    	align-items: baseline;
    /* align the first line of text */
    }
    ```
    

---

### align-contents

Works with multiple rows. Which align-items work for items inside individual rows.

default: stretch

---

### flex-grow & flex-shrink

- flex-grow
    
    default: flex-grow: 0
    
    Flex item grows relative to the given unit of flex-grow. For flex-grow: 0, it doesn’t grow as it fits the minimum size of the content.
    
- flex-shrink
    
    default: flex-shrink: 1
    
    Flex item shrinks relative to the given unit of flex-shrink. For flex-shrink: 0, it doesn’t shrink.
    

---

### flex-basis

> Setting width means giving its **ideal** width.
> 

> If we set min-width or min-height, it can interrupt flex-basis
> 

default: flex-basis: auto

1. Find the given width
2. If there’s no explicit width, fit to given content size.
- flex-basis vs width
    
    flex-basis works for **main axis.** Which means that if the flex-direction is column, flex-basis becomes height
    
- flex-basis: 0
    
    Ideal width is 0. So, it shrinks as much as possible.
    
- Using flex-basis on image element has bug
    
    ```css
    .img {
    	flex-basis: 600px;
      min-width: 0;
      min-height: 0;
    }
    ```
    

---

### flex

Mix of flex-grow, flex-shrink, flex-basis

default: flex: 0 1 auto

- flex: 1
    
    flex-grow: 1, flex-basis: 0
    
- flex: auto
    
    flex-grow: 1, flex-shrink: 1, flex-basis: auto
    

---

### align-self

Can align item individually for sub-main axis

---

### margin: auto in flexbox

In flexbox, margin: auto works for all 4 directions. Also, we can use `margin-top: auto` to push the element to the bottom.

```css
.container {
	display: flex;
	flex-direction column;
}

.item {
	margin-top: auto;
}
```

---

### Putting it on center of page

```css
body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
```