teleren/devto huggingface dataset:
RUST - Download a file using a link and a css selector.
Tags: rust
Published: 2020-03-18 17:17:28


During my internship, my supervisor wanted a program to download an .xls file from a French government website. He wanted to be able to repeat this action with the task scheduler integrated in Windows Server every month.

I made this little application that takes *two parameters*, the first is the name of the file, the second is the folder or more precisely the location where to save this file.

Here is a demo:
https://i.imgur.com/d9yWKVC.gif

To know that it link download, I base myself on this url: https://communaute.chorus-pro.gouv.fr/annuaire-cpro.

With Rust, I use the crate [*select*](https://crates.io/crates/select) to be able to target my HTML element, here is an example:

```rust
pub fn get_download_link(url: &str) -> Result<String> {
    let res = reqwest::get(url).unwrap();

    let document = Document::from_read(res)?;
    let web_url = document
        .find(Name("input"))
        .filter_map(|n| n.attr("onclick")).nth(0).unwrap();
    let string_web_url: String = web_url.to_owned();

    let url_splited: Vec<String> = string_web_url.split("href=").map(|c| c.replace("'", "")).collect();
    Ok(url_splited[1].to_owned())
}
```

You can see, that I target the first *input*, and get the *onclick* attribute that contains the link.

After that, all I have to do is download the file with the [*reqwest*](https://crates.io/crates/reqwest) crate.
Exemple :

```rust
pub fn download_link(url: &str, file_name: &str, dir_name: &str) {
    let mut resp = reqwest::get(url).expect("request failed");
    let mut out = File::create(format!("{}/{}", dir_name, file_name)).expect("failed to create file");
    io::copy(&mut resp, &mut out).expect("failed to copy content");
}
```

It is necessary to know, when I get my arguments, I make a check for the parameter which gives the path of the folder where we are going to save the file, I look if there is a `/` or a `\` at the end, if yes, I delete this character.
Exemple :

```rust 
    // Just remove / or \ character if available
    if dir_name.ends_with("/") || dir_name.ends_with("\\") {
        dir_name.pop();
    }
```
This allows me to easily manage the downloading of the file: 
```rust
let mut out = File::create(format!("{}/{}", dir_name, file_name)).expect("failed to create file");
```

This is the github repository: https://github.com/loicngr/LinkExtracter

Feel free to make your improvements :)

Peace =)
Flutter: Como tratar textos sublinhados
Tags: flutter
Published: 2020-03-18 17:02:22

Aprenda como tratar textos sublinhados no Flutter. Ao sublinhar tudo, você pode definir um TextStyle no widget Text.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3ctkflfd3grp9e3tgmcq.png)
```dart
Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)
```
Se você quiser apenas sublinhar parte do texto, precisará usar Text.rich()(ou um widget RichText) e dividir a cadeia em TextSpans para os quais você pode adicionar um estilo.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1pxy32rqtupklt8lttrd.png)
```dart
Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 50),
    children: <TextSpan>[
      TextSpan(
          text: 'world',
          style: TextStyle(
            decoration: TextDecoration.underline,
          )),
      // can add more TextSpans here...
    ],
  ),
)
```
TextSpan é um pouco estranho. O text parâmetro é o estilo padrão, mas a children lista contém o texto estilizado (e possivelmente não estilizado) que o segue. Você pode usar uma string vazia textse quiser começar com um texto estilizado.

Você também pode adicionar um TextDecorationStyle para alterar a aparência da decoração. Aqui está tracejado:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1d7cuza72hxm88nrt3nh.png)
```dart
Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)
```
e TextDecorationStyle.dotted:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a4wm2h2st9lde8tycdbd.png)
e TextDecorationStyle.double:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wlx8wnt4y3ce0qr6vzur.png)
e TextDecorationStyle.wavy:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pu5kw3d0vp6olfp2alfg.png)

Créditos: [Suragch](https://stackoverflow.com/users/3681880/suragch)
Gitcoin's Funding The Future virtual hackathon is in full swing! Check out the prizes here.
Tags: hackathon, blockchain, crypto, gitcoin
Published: 2020-03-18 16:58:18

Gitcoin's Funding The Future virtual hackathon is live! Crypto prizes from Bancor, Mysterium, Alto, Kickback, AdEx, and others. Featuring daily virtual workshops, halfway point prizes, and more. Including Gitcoin Grants CLR Matching Round 5 next Monday!

Check out the prizes:
https://gitcoin.co/hackathon/funding-the-future/?
Flutter - Função Equivalente ao setTimeout
Published: 2020-03-18 16:52:22

Quando se trabalha com javascript temos disponível o método setTimeout(), o qual chama uma função ou avalia uma expressão após um número especificado de milissegundos.
Se você está trabalhando com dart e precisa de algo parecido, existe essa solução:
```dart
var timer = Timer(Duration(seconds: 1), () => print('done'));
```
Mais informações: https://api.dartlang.org/stable/2.4.0/dart-async/Timer-class.html
propTypes use in react and some ways to avoid 😫🔧 Errors
Tags: react, javascript, webdev, codenewbie
Published: 2020-03-18 16:41:11

```js
import React,{Component} from  'react';
import propTypes from 'prop-types';
class TodoItem extends Component{
  render(){
      return(
<div>
<p>{this.props.todo.title}</p>

</div>
      )
  }
}

//proptypes used for what type of data need to be render out there in your code🔽🕶
TodoItem.propTypes={
    todo:propTypes.object.isRequired
}

export default TodoItem;

```

<p>Mostly propTypes used to for rendering correct data means when you have to render number/object/array at that particular instance of code then you can do that thing by using propTypes. and that's all i know. and most important below🔽🔧 and if you have something more then please comment🔽  </p>

#Mostlyall developers including big youtubers
they use this&done mistake👉 **import PropTypes from 'prop-types';**
but for avoiding the errors we have to use 🔽
```js
import propTypes from 'prop-types';
```
use propTypes and find issue related this [hereClickMe🕶](https://github.com/facebook/prop-types/issues/264)

Stay safe/clean God bless you all
[follow Me On twitter](https://twitter.com/krishnadevz)
COVID-19 Stats App (es)
Tags: react, javascript
Published: 2020-03-18 16:36:38

En estos días de cuarentena estuve desarrollando un prototipo de app para mostrar estadísticas sobre el corona virus en React. 

En el siguiente video les dejo el proceso de desarrollo de la app 😄.


{% youtube -t2v6DfPoKg %}

Luego de este video estuve creando nuevos features, pueden ver el estado actual desde https://corona-virus-react.now.sh

Acepto su feedback! Espero que les haya gustado ❤️
Conclusion
Tags: css, html
Published: 2020-03-18 16:35:40

---
title: Conclusion
published: true
description: There is much more to CSS colors than RGB, HEX, and HSL... let's see the status of CSS colors in 2020. Conclusion
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---

Wow! That must be the longest article that I have written in a while. If you made it here, thanks for reading!

In the article, we have:

- Seen the "classic" colors (HEX, RGB, HSL, and named colors)
- Explored the newly defined functions (HWB, Lab, LCH, CMYC, and `color()`)
- Reviewed the new space-separated syntax for the function.
- Checked how **there are around 100 different ways of representing the same color in CSS** (not counting the infinite possibility of fallbacks!)

And all that may lead people to ask a couple of questions:

### Which color format should I use?

That is the million-dollar question, and there isn't a clear answer: some developers will say: "_use the format that uses the least characters_", some others will say "_stick to HEX because it is more efficient_" and many more will reply "_but what about transparency?_"...

Combining different formats just because they are shorter? That sounds like a bad idea as it would make the code less maintainable. And all for what? Saving a big total of 100 characters in a 20KB file?

Opting for a format that supports transparency/alpha and always having the value as 1? It seems a bit unnecessary. Ignoring the formats that support alpha and apply transparency via other methods? That could have nasty side effects.

Considering that most color functions now support alpha, the questions in the paragraph above may be outdated, but there are still browsers that may not support them.

The best recommendation would be: **think about what you want to do with the color, and apply the format that is more convenient for your particular case**.

### What's next for CSS colors?

Many changes will happen in the CSS definition of colors. New functions will be added, more will be removed... and some will be added then removed before we are even able to use them (like the [`gray()` function](https://www.w3.org/TR/2019/WD-css-color-4-20191105/#grays)). 

And the same thing with colors, properties, or arguments. As mentioned above, one of the beauties of the web standards is that they are alive and continuously changing to adapt and improve the experience.

We'll probably see new color functions popping up (`hsv()`?) even when they could be supported as part of the [`color()` function](https://drafts.csswg.org/css-color/#color-function). Although, let's go one step at a time, and hope for more support from the browsers.
CMYK
Tags: css, html
Published: 2020-03-18 16:35:23

---
title: CMYK
published: true
description: There is much more to CSS colors than RGB, HEX, and HSL... let's see the status of CSS colors in 2020. Step 8: CMYK
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---

> **Warning: This color format is not widely supported at the moment**. Be cautious when using it, and avoid relying on it in production environments.

While screens typically display colors in RGB, other devices represent colors in different ways. For example, printers generally use combinations of cyan, magenta, yellow, and black to represent colors because those are the most common ink colors.

**CMYK stands for Cyan, Magenta, Yellow, and Key**, which matches the ink colors in the printer (with black for key). And it could be a good format to pick if the end goal is to have the content physically printed (as it will better match the mixture of colors).

The function to specify the [CMYK](https://drafts.csswg.org/css-color/#device-cmyk) format is not `cmyk()` as one could have expected but `device-cmyk()` because it defines a device-dependent CMYK color:

![device-cmyk function syntax: cyan (number or percentage). Space. Magenta (number or percentage). Space. Yellow (number or percentage). Space. Black (number or percentage). Optionally, forward slash alpha (number or percentage). Optionally, comma and a fallback color in any format](https://dev-to-uploads.s3.amazonaws.com/i/tgk92p8tx7pcbsbj5txd.png)

As in previous color functions, as it is a newly released one, it only comes with the new space-separated notation. But `cmyk()` has something different from the other color functions: **it allows adding an optional fallback color** in case the specified CMYK color is not valid.

Considering the option of using a number or a percentage –remember, they cannot be combined, it's one or the other for all the arguments–, the inclusion of alpha and a fallback, there are 12 combinations for the same color in CMYK format:

```scss
color: device-cmyk(1 0 0 0);
color: device-cmyk(1 0 0 0 / 1);
color: device-cmyk(1 0 0 0 / 100%);
color: device-cmyk(1 0 0 0, #00FFFF);
color: device-cmyk(1 0 0 0 / 1, #00FFFF);
color: device-cmyk(1 0 0 0 / 100%, #00FFFF);
color: device-cmyk(100% 0% 0% 0%);
color: device-cmyk(100% 0% 0% 0% / 1);	
color: device-cmyk(100% 0% 0% 0% / 100%);	
color: device-cmyk(100% 0% 0% 0%, #00FFFF);	
color: device-cmyk(100% 0% 0% 0% / 1, #00FFFF);	
color: device-cmyk(100% 0% 0% 0% / 100%, #00FFFF);
```

As a curiosity, when selecting a value for a color input on a Mac computer, the menu will give us the option of picking the color on device-CMYK too:

![CMYK color picker on Mac](https://dev-to-uploads.s3.amazonaws.com/i/lkzd59g7g52pzly9f3cn.png)
LCH
Tags: css, html
Published: 2020-03-18 16:35:15

---
title: LCH
published: true
description: There is much more to CSS colors than RGB, HEX, and HSL... let's see the status of CSS colors in 2020. Step 7: LCH
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---


> **Warning: This color format is not widely supported at the moment**. Be cautious when using it, and avoid relying on it in production environments.

[LCH](https://drafts.csswg.org/css-color/#specifying-lab-lch) stands for Lightness-Chroma-Hue. It is related to Lab (it has the same L value), but instead of using the coordinates a* and b*, it uses the C (Chroma) and H (Hue).

Although LCH and HSL share two letters (Lightness and Hue), it is important to differentiate them and clarify that the L in HSL and the one from LCH do not match. Also, even when the Hue is interpreted similarly in HSL and LCH, the angles are not mapped in the same way.

This is the syntax for the `lch()` function:

![LCH syntax](https://dev-to-uploads.s3.amazonaws.com/i/9lluv3jdwu3ivvfhfu7p.png)

As mentioned above, the Lightness is similar to the one from Lab. The Chroma could take any numeric value, but in practice, the minimum useful value will be 0 and the maximum useful value will be 230. 

The third argument is the hue angle that can be represented as a number or as an angle (in degrees), and optionally the fourth argument will be the alpha. This is a newly added function so its syntax will follow the space-separated notation (with a forward slash for the alpha).

A color can be written in six different ways using `lch()`:

```scss
color: lch(67.5345% 42.5 258.2);
color: lch(67.5345% 42.5 258.2 / 1);
color: lch(67.5345% 42.5 258.2 / 100%);
color: lch(67.5345% 42.5 258.2deg);
color: lch(67.5345% 42.5 258.2deg / 1);
color: lch(67.5345% 42.5 258.2deg / 100%);
```

None of the tested browsers supported the `lch()` function for colors.
Lab
Tags: css, html
Published: 2020-03-18 16:35:07

---
title: Lab
published: true
description: There is much more to CSS colors than RGB, HEX, and HSL... let's see the status of CSS colors in 2020. Step 7: Lab
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---


> **Warning: This color format is not widely supported at the moment**. Be cautious when using it, and avoid relying on it in production environments.

Defined by the <abbr title="International Commission on Illumination">CIE</abbr> in 1976 after human vision experiments, the [CIELAB colorspace](https://en.wikipedia.org/wiki/CIELAB_color_space) (sometimes written CIE L*a*b* or simply [Lab](https://drafts.csswg.org/css-color/#specifying-lab-lch)) represents the range of colors that humans can see.

Lab colors are expressed using three values: 

- Lightness: from black to white. The lower the value, the darker it will be (closer to black).
- a*: from green to red. Lower values are closer to green, while higher values are closer to red.
- b*: from blue to yellow. Lower values represent blue, and moves to yellow the higher the value is.

The syntax of the Lab function is as follows:

![Lab syntax: lightness expressed in percentage. A-axis, a number between -160 and 160. B-axis a number between -160 and 160. Optionally, an Alpha value in number or percentage.](https://dev-to-uploads.s3.amazonaws.com/i/kpbg657izwo4db9ff9ke.png)

The value for the lightness can be any percentage, not limited to 0% and 100%: if the value is lower than 0% (black), it will be clamped to 0%, but it can be higher than 100% (white), which would represent extra-bright whites on some systems. 

The value for a* and b* can be any number, but it will generally go from -160 to 160. And finally, the optional alpha value that is common to every color function. All the parameters separated by spaces (new notation) except the alpha by a forward-slash.

Taking the possible values and formats, the same color could be written in three different ways in Lab:

```scss
color: lab(67.5345% -8.6911 -41.6019);
color: lab(67.5345% -8.6911 -41.6019 / 1);
color: lab(67.5345% -8.6911 -41.6019 / 100%);
```

At the moment of writing this post, none of the browsers supported the `lab()` function.
HWB
Tags: css, html
Published: 2020-03-18 16:34:59

---
title: HWB
published: true
description: There is much more to CSS colors than RGB, HEX, and HSL... let's see the status of CSS colors in 2020. Step 6: HWB
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---

> **Warning: This color format is not widely supported at the moment**. Be cautious when using it, and avoid relying on it in production environments.

**HWB stands for Hue-Whiteness-Blackness**, it is a color format close to HSL, but often seen as an easier option for humans to understand and work with. 

The [HWB](https://drafts.csswg.org/css-color/#the-hwb-notation) parameters represent the following:

- Hue: an angle in the color circle/wheel.
- Whiteness: a percentage that represents the amount of white to mix into the color. The higher the value, the clearer/whiter the color.
- Blackness: a percentage that represents the amount of black to mix in. The higher the value, the darker/blacker the color will be.

![Description of how HWB is calculated with the color wheel and a triangle showcasing the different colors depending on the whiteness and darkness value from 0% to 100%](https://dev-to-uploads.s3.amazonaws.com/i/63mxyzpzgnyndhlt3mkl.png)

As this is a new color function, it automatically comes with the space-separated notation and there is no comma-separated notation (and not hwba). This is the only syntax to use:

![HWB syntax: hue value in number or degrees, space, whiteness in percentage, space, blackness in percentage, and optionally, forward slash and alpha in number or percentage](https://dev-to-uploads.s3.amazonaws.com/i/59d2vu968fvkppcgm5sz.png)

If the values of white and black add up to 100% (after normalization), the color will be achromatic: a shade of gray without any hint of the original hue value.

This simple syntax allows for 6 different combinations to represent the same color:

```scss
color: hwb(180 0% 0%);
color: hwb(180 0% 0% / 1);	
color: hwb(180 0% 0% / 100%);
color: hwb(180deg 0% 0%);
color: hwb(180deg 0% 0% / 1);
color: hwb(180deg 0% 0% / 100%);
```

None of the tested browsers supported the `hwb()` function.
Intermission... and some fun with HTML4
Tags: css, html
Published: 2020-03-18 16:34:49

---
title: Intermission... and some fun with HTML4
published: true
description: There is much more to CSS colors than RGB, HEX, and HSL... let's see the status of CSS colors in 2020. Fun with old HTML4
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---

This ends the "classic" color formats. By that, I mean the ones that have been around for a while and that all browsers support (at least the comma-notation). 

Now, we are going to review some new formats introduced as part of the [CSS Color Module Level 4](https://drafts.csswg.org/css-color/). They are a little less common, a little less supported –or not supported at all, to be exact (at least not at the moment of writing this post)–, and a little less known.

...but before all that, let's talk about an old curiosity from HTML4. A little silly color thing that is no longer part of the standard, but that many browsers still support for legacy reasons.

## Fun with HTML4

> Note: **`bgColor` attribute is deprecated and should NOT be used**. This section is just for _fun_ and to show what's not to do.

In previous versions of HTML, there used to be an attribute and property called [`bgColor`](https://developer.mozilla.org/en-US/docs/Web/API/Document/bgColor) that allowed setting the background color of different tags and elements (e.g. `<body>` or `<table>`):

```html
<body bgColor="skyblue">
  ...
</body>
```

The value of `bgColor` was supposed to be any color value as specified in this post, but in reality, it accepted anything. This means that any string would be considered and parsed... and brought us [one of the most interesting Stack Overflow questions for HTML](https://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color).

As explained in more detail in this [2004 post from Sam](https://scrappy-do.blogspot.com/2004/08/little-rant-about-microsoft-internet.html), this happens when browsers try to parse the string as a color (a behavior inherited from Netscape). The basic idea is that the string is broken in 3 equal-size parts, adding zeroes for missing or incorrect characters.

This graph shows a simplified version of how it works (refer to the blog post for more details):

![Graph with how bgColor works](https://thepracticaldev.s3.amazonaws.com/i/ehksmubf7xxr1o9grnxq.png)

And here you can see it working (again **don't do this**):

{% codepen https://codepen.io/alvaromontoro/pen/wvBpKoW %}

----

Now that we had a little fun break with colors, we are going to review the new color formats and functions new to the [CSS Color Module Level 4](CSS Color Module Level 4).