teleren/devto huggingface dataset:
HSL
Tags: css, html
Published: 2020-03-18 16:34:33

---
title: HSL
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 3: HSL
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---

**HSL stands for Hue-Saturation-Lightness**. In this format, the developer specifies three values:

- Hue: an angle in the color circle/wheel (see below).
- Saturation: the color's saturation/brightness level. A value of 100% indicates a fully-saturated bright color, while lower values will lead to fully unsaturated gray colors.
- Lightness: the level of lightness of the color. Lower values will be darker and closer to black, higher values will be lighter and closer to white.

![Color Circle (aka color wheel)](https://dev-to-uploads.s3.amazonaws.com/i/yudib3fbxzzx5f9a076b.png)

![Description of HSL](https://dev-to-uploads.s3.amazonaws.com/i/w4rcvgc545abe2ziywxk.png)

Similarly to RGB, there are two versions of the function: `hsl` and `hsla` (hsl with alpha)... and just like RGB, `hsl` and `hsla` are now basically synonyms: `hsla` is considered legacy, and the function moving forwards should be `hsl`.

Also, the "traditional" comma-separated notation is now superseded by the space-separated notation:

![HSL notation: hue space saturation space lightness spaces and, optionally, forward slash alpha](https://dev-to-uploads.s3.amazonaws.com/i/g0r5jzdpnnnz42bat2ml.png)

One great thing about HSL is that it can be _easily_ combined with CSS variables and the `calc()` function to create basic theming capabilities with pure CSS:

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

Taking into account the different combinations of functions (`hsl` and `hsla`), value formats (number or degree, or number of percentage for the alpha), and separators (space or comma), there are 24 different ways of writing a color with HSL in CSS: 

```scss
color: hsl(180, 100%, 50%);	
color: hsl(180, 100%, 50%, 1);	
color: hsl(180, 100%, 50%, 100%);	
color: hsl(180deg, 100%, 50%);	
color: hsl(180deg, 100%, 50%, 1);	
color: hsl(180deg, 100%, 50%, 100%);	
color: hsl(180 100% 50%);	
color: hsl(180 100% 50% / 1);	
color: hsl(180 100% 50% / 100%);	
color: hsl(180deg 100% 50%);	
color: hsl(180deg 100% 50% / 1);	
color: hsl(180deg 100% 50% / 100%);	
color: hsla(180, 100%, 50%);	
color: hsla(180, 100%, 50%, 1);	
color: hsla(180, 100%, 50%, 100%);	
color: hsla(180deg, 100%, 50%);
color: hsla(180deg, 100%, 50%, 1);	
color: hsla(180deg, 100%, 50%, 100%);	
color: hsla(180 100% 50%);	
color: hsla(180 100% 50% / 1);	
color: hsla(180 100% 50% / 100%);	
color: hsla(180deg 100% 50%);	
color: hsla(180deg 100% 50% / 1);
color: hsla(180deg 100% 50% / 100%);
```

Once again, all the tested browsers support `hsl` and `hsla` with both notations... except for Edge on Windows, that only supports the comma-separated notation, the function `hsl` with 3 arguments, and `hsla` with four.
Hexadecimal RGB (HEX)
Tags: css, html
Published: 2020-03-18 16:34:19

---
title: Hexadecimal RGB (HEX)
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 2: HEX
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---

HEX is a variant of RGB in which the values for each parameter are in hexadecimal format. The syntax consists of a hash sign (`#`) followed by the hexadecimal values which will range from `00` (0 in decimal) to `FF` (255 in decimal):

![Hexadecimal syntax: hash R R G G B B](https://dev-to-uploads.s3.amazonaws.com/i/gsytxjq2m6d6h0n1ibjb.png)

In the past, there were only 3 hexadecimal parameters: one for red, another for green, and another for blue. A value of `00` would mean the complete absence of the color, while `FF` would indicate its complete presence. The higher the numbers, the lighter the color.

A fourth optional hexadecimal value can be provided to indicate alpha: `00` would be completely transparent, and `FF` completely opaque:

```scss
color: #FFFFFF;   /* white */
color: #000000;   /* black */
color: #FF0000;   /* red */
color: #00FF00;   /* bright green (lime, see named colors below) */
color: #0000ff;   /* blue */
color: #800000;   /* darker red */
color: #FF0000FF; /* red (opaque red) */
color: #FF000088; /* semitransparent red */
color: #FF000000; /* transparent (transparent red) */
```

Notice that CSS doesn't distinguish between upper- and lower-case for hexadecimal values, so you could write: `#ff0000` or `#FF0000` or `#Ff0000` and they would all be the same. Just keep it consistent to have a cleaner, more maintainable code.

If each of the color parameters –and transparency, if present– has the same digits (e.g. `#EE44FF`), there is the possibility to use a shorthand version of the hexadecimal notation, just putting each digit once:

```scss
/* regular hex */
color: #336699;
color: #336699FF;

/* shorthand hex */
color: #369;
color: #369F;
```

This shorthand notation can only be used with a "small" subset of the colors: 4,096 of the 16,777,216 possible combinations (or 65,536 of the possible 4,294,967,296 combinations if we take into account alpha.)

Taking into consideration all the possible combinations, in the "best-case scenario", a color could be represented in up to 4 different ways with HEX: 

```scss
color: #336699;
color: #369;
color: #336699FF;
color: #369F;
```

All the browsers that were tested for this article supported all the notations of HEX listed above... Except for Edge on Windows that only supported HEX values without the alpha.
How to delete a file permanently in git
Tags: misc, git
Published: 2020-03-19 10:51:54

---
title: How to delete a file permanently in git
published: true
date: 2020-03-18 14:36:00 UTC
tags: Misc,Git
canonical_url: https://coderscat.com/how-to-delete-a-file-permanently-in-git
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/85zrg7lr38jhl1czs25h.jpg)

If you want to remove a file **permanently** , you must wish to there are not change log left in Git history. Otherwise, others still could see the content in the Git repository.

There are two methods for this task:

## git filter-branch

Suppose you want to remove `./config/passwd` from Git:

```bash
$ git filter-branch --force --index-filter \
  'git rm --cached --ignore-unmatch ./config/password' \
  --prune-empty --tag-name-filter cat -- --all

```

Remember to add your sensitive file to .gitignore:

```bash
$ echo "./config/password" >> .gitignore
$ git add .gitignore
$ git commit -m "Add password to .gitignore"

```

Then you’d better push to remote:

```bash
$ git push --force --all
$ git push --force --tags
```

Tell your collaborators to rebase:

```bash
$ git rebase
```

## BFG repo-cleaner

Use [BFG Repo-Cleaner](http://rtyley.github.io/bfg-repo-cleaner/).

`BFG` provides a faster, simpler alternative to `git filter-branch` for removing sensitive data. It’s very quickly, usually 10 – 720x faster then `git filter-branch`.

**Note** : `bfg` will leave your latest commit untouched. It’s designed to protect you from making mistakes. You should explicitly delete the file, commit the deletion, then clean up the history to remove it.

Suppose you want to remove the file `./config/password`:

```bash
$ brew install bfg ## install bfg

$ git rm config/password
$ git commit -am"remove password"

$ bfg --delete-files password ## remove from history

```

Then use `git push` to push to the remote repository.

The post [How to delete a file permanently in git](https://coderscat.com/how-to-delete-a-file-permanently-in-git) appeared first on [CodersCat](https://coderscat.com).
The Ultimate Guide to CSS Colors (2020 Edition)
Tags: css, html
Published: 2020-03-18 16:33:29

---
title: The Ultimate Guide to CSS Colors (2020 Edition)
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.
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---

> This is a [link to the original post](https://dev.to/alvaromontoro/the-ultimate-guide-to-css-colors-2020-edition-1bh1). I know it's too long, so I split it into smaller posts and made them into a series, so it may be easier to follow.

There are plenty of great articles online that explain colors in CSS. They focus on RGB, HEX, HSL, and named colors and give detailed descriptions of each of them. So, if those articles are great... why should you read this one? How is it different?

One of the beauties of HTML, CSS, and Javascript is that they are in a state of continuous change and improvement: things that were broken are fixed, new standards are added, old ones are removed... And the colors in CSS are no exception.

CSS colors have gone through many changes over time and, although the core remains, new changes were introduced over the past few months that may shape CSS differently in the future and we should know.

For example:

- You have used the comma-separated syntax `rgb(255, 255, 255)`... but did you know that it is considered legacy, and the notation moving forward should be space-separated: `rgb(255 255 255)`?

- You know the functions `rgb()` and `rgba()`... but did you know that those functions are synonyms? So you can do `rgb(255, 0, 0, 1)` or `rgba(255, 0, 0)` and get the same result.

- You know about RGB, HEX, and HSL colors... but have you heard about HWB, LAB, LCH, or CMYK colors in CSS?

The idea of this article is not only to review the basics for colors in CSS –there are already great articles like these from [CSS-Tricks](https://css-tricks.com/almanac/properties/c/color/) or [DEV](https://dev.to/ziizium/css-colors-7ai)–, but also to explore new additions, format changes, or peculiarities that happened over the past few months and became available in the latest [CSS Color Module Level 4 Editor's Draft](https://drafts.csswg.org/css-color/).

For this article, I ran [color tests](https://codepen.io/alvaromontoro/pen/jOPwayb) on the following browsers:

- Chrome and Chromium-based browsers (Brave, Edge) on Mac and Windows
- Firefox on Mac
- Safari on Mac
- Edge (not Chromium) on Windows
- Chrome on Android
- Safari on iOS


Let's start with the _classics_: RGB, HEX, and HSL.
Write your JavaScript code using Chrome Snippets - Dev Tools
Tags: javascript, react, node, codenewbie
Published: 2020-03-18 16:30:20

---
canonical_url: https://bonsaiilabs.com/chrome-snippets
---

If you frequently write code onto the browser console, 
this video will cover how you can write, edit and delete the code snippets within your Chrome browser.

The code is available at https://bonsaiilabs.com/chrome-snippets/

YouTube: {% youtube 4hfNpV_wnrI %}

Subscribe for more videos on JavaScript with Visualization: https://www.youtube.com/channel/UC0yZBnRsD9JRqLXBkfGym0Q?sub_confirmation=1
Typescript Casting
Tags: typescript, javascript
Published: 2020-03-18 16:14:47

Much has been written by Javascript folks concerning their dislike of the "new" keyword in Typescript. Here's an example of what they mean.

**[We don't need no stinkin' New in Typescript](https://www.google.com/search?q=we+don%27t+need+no+stinking+badges)**
 ```javascript
      //implied new object, no "new" needed here
      let AJavaScriptObject = { SettingsGroupName: "TEST", Settings: [] };
      //return an object with key 'test' that returns the AJavaScriptObject ref.
      function AJavaScriptFunction() { return { test: AJavaScriptObject } }
        
      let makeTestVisible = AJavaScriptFunction();
      //ahh yes we can see the 'test' proptery key and its context.
      makeTestVisible.test.SettingsGroupName = "ok";
      //the settings property also visible
      makeTestVisible.test.Settings = null;
      //wait what's this?
      let temp2: SettingGroup = AJavaScriptObject;
```
It's not apparent from the first few lines of code what type is being created.  Until we get to the last line.. But, you say 'new implies type' I like "new" because it's synonymous with a type.

There's an alternative, which avoids using "new", to morph a JavaScript object into a Typescript "type" object.

**The Typescript Pattern for Casting**

```javascript
//this is a cast of the AJavaScriptObject!
let temp2: SettingGroup = AJavaScriptObject;
```

Where the SettingGroup class/type is defined as follows:

```javascript
export class SettingGroup {
   SettingsGroupName: string;
   Settings: Array<Setting>;
}
```

What did the cast do?  Well it allowed Typescript to use it's tooling to determine property type safety. If an attempt to cast something does not have all of the required properties, a design time error is seen. This prevents the user from compiling the code.

**No big deal right?**

```
      let temp2: SettingGroup = AJavaScriptObject;
      temp2.temp = "test"
```
Depends on how much you like "strict mode" the 2nd line above shows a development time error in that the property temp does not exist on the SettingGroup type. No arbitrary property type or function type assignments are allowed when casting to a type.  

In a future article we'll show how to get rid of typing in Typescript when ever you want to "avoid" the rules.

JWP2020
💡 (waking up)
Tags: discuss, whiteboard, problemsolving
Published: 2020-03-18 16:07:57

---
title: 💡 (waking up)
published: true
description: I’ve come to a realization
tags: #discuss #whiteboard #problemsolving
---

I’ve been coding off and on since the early 90s on a Tandy Color Computer 2 my mom picked up at a yard sale. I’ve always closely followed instructions/tutorials on how to do this and that. But I think I wasn’t seeing the forest for the trees. 

I’m really trying to dig in and figure out what I want to do. There are really so many avenues that it’s overwhelming at times. 

I’ve just started working through the K&R C book. The end of section suggested exercises made a 💡 go off in my head. They have given me the tools to solve the exercise but haven’t told me exactly how to do it. I have to trust that I can solve this problem on my own. And that’s when it hit me. Programming is more about solving problems than coding. Some may say... duh.  Well deserved. But I think this mind shift helps me put things into perspective. 

I’ve been coding in my bedroom for the last couple years. I’ve committed to using some extra space that I have to making a small office type area with a desk and a whiteboard. Sketching ideas & algorithms on paper helps me visualize the problem and come up with strategies before I start coding. So I’m thinking a whiteboard will be a great asset for me. 

I’m just wondering if any of you remember a “mind shift” in your programming journey that made you feel like you were progressing?
Best Python Books to get started.
Tags: python, beginners, basics, nostarchpress
Published: 2020-03-18 15:59:07

So i have started on the journey to become a coder  myself quite recently. I had access to a lot of reference materials and therefore had the luxury of going through them all before opting to select these few. I genuinely believe that these books are the best way to get started on your coding journey.  
                                                                      *Python Crash Course, 2nd Edition: A Hands-On, Project-Based 
Introduction to Programming* 

This is an excellent book by the publishers No-starch press.They cover the basics thoroughly and are quite lucid in their explanations.As usual with these beginner books , they dont assume that the reader has any previous knowledge of python. The best part of the book is undoubtedly the projects. At the part of the book there are projects like an alien invasion game using pygame and data visualisation using libraries like matplotlib.

 *Python Playground: Geeky Projects for the Curious Programmer*

Another book by the same publisher i.e No-starch press , this book expands on the previous topics of some superb real world projects. Getting a step by step guide with explanations is hugely satisfying . It is a definite recommend and a highly enjoyable book especially for newbies to the python coding world.

 *Think Python How to Think Like a Computer Scientist*

This would be my last recommend for this post. Another excellent python book , this time by the Green Tea Press , this a thorough and serious book of the basics of python. It is the complete python manual for beginners and a must read to get your foundations built on a strong note.

Hey there! 
I am Arnav , a Second Year Computer Science engineering student hailing from Mumbai.

Twitter : @potatoandchipss
Github : https://github.com/thewires2
Throughput in Performance Testing
Tags: testing, performance, qa
Published: 2020-03-18 14:04:49

Throughput is one of the key metrics in performance testing. It's used to check how many requests a software will be able to process per second, per minute or hour. 

As a rule, every test plan has a throughput goal. The more realistic it will be, the more precise result you will get. 

So, what factors are important for accurate load characteristics?

- Users' profiles and quantity. Who will access your software or service: shoppers, buyers, admin?
- Behavior scenarios. Different users may perform different actions: purchase products, submit forms or check service operation. 
- Pauses and delays. We all need some time to absorb the information. But even during such pauses, the system still sweeps sessions and closes ports.
- Connection types. Different network connection types influence system response and users experience with the software. 

Realistic throughput in performance testing helps to design realistic tests and properly evaluate whether your product can reach the expected goals or not. 

http://hire-tester.com
lightdm-hvl-greeter 0.97.2 sürümü duyuruldu
Tags: lightdm, greeter, duyuru
Published: 2020-03-18 15:47:12

lightdm-hvl-greeter'ın 0.97.2 sürümü 17 Mart 2020 tarihinde duyuruldu.

İlgili sürümde öne çıkan özellikler aşağıdaki gibidir;
* Belirlenen sürede arkaplanın veya arkaplanların değişmesi.
* Gösterilecek arkaplanların dizinlerinin düzenlenebilmesi
* Belirlenen sürede login görünümünden tüm ekranın ekran koruyucu moduna geçmesi

İlgili sürüm **Pardus 19.2** ile test edilmiştir. Çeşitli çalışmalar ile Xubuntu ve Pardus 17.x'te de çalışacağı düşünülmektedir.

Siz de güncel sürümü indirip kurabilir veya kod olarak katkıda bulunabilirsiniz.

https://github.com/aciklab/Hvl-Lightdm-Greeter/releases/tag/v0.97.2
https://github.com/aciklab/Hvl-Lightdm-Greeter

![sürüm duyurusu görseli](https://user-images.githubusercontent.com/260880/76978843-45554780-6948-11ea-9f0c-887e0e0a7631.gif)
Welcome Thread - v65
Tags: welcome
Published: 2020-03-18 15:32:49

---
title: Welcome Thread - v65
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![we're happy you're here!](https://media.giphy.com/media/eIU6nUlmldCWl51FQH/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Easy way to start a web server
Tags: python
Published: 2020-03-18 15:25:55

You can always use a bundler in development mode but sometimes you just want a simple HTTP server with basic security and isolated :wink: My favorite tool for that is `python`. On macOS and Ubuntu, it's installed by default so no setup is usually required.

This works well because Python ships with an [HTTP module](https://docs.python.org/3.8/library/http.server.html#//apple_ref/Module/http.server) in the standard library so it's straightforward to start a server:

```bash
$ python -m http.server 2020
Serving HTTP on 0.0.0.0 port 2020 (http://0.0.0.0:2020/) ...
```

Or if you are still using python2
```
$ python -m SimpleHTTPServer 8000
Serving HTTP on 0.0.0.0 port 8000 ...
```

In most cases, the above is enough but in rare cases, you want to bind explicitly to an address:
```
python -m http.server 2020 --bind 192.168.0.6 

Serving HTTP on 192.168.0.6 port 2020 (http://192.168.0.6:2020/) ...
```
---
Thanks for reading.
Augmented Reality 3D Photo Surround using Xamarin, ARKit C# and .NET
Tags: augmentedreality, arkit, xamarin
Published: 2020-03-18 15:19:11

Last night I created an augmented reality 3D photo gallery sphere concept in Xamarin, ArKit and .NET that has been on my mind for a while.

{% youtube 2q2kadwvfHA %}

It currently calls the Unsplash API with the search term "cats" but there is no reason it can't show images from any search term.

First I create 7 rows of 2d planes and give them a SCNLookAtConstraint so that it they all look at a central invisible node that I create at the WorldOrigin (center).

var lookConstraint = SCNLookAtConstraint.Create(centerNode);

lookConstraint.GimbalLockEnabled = true;

imagePlaneNode.Constraints = new SCNConstraint[] { lookConstraint };

I then call the Unsplash API and after retrieving search results, iterate through the 2d planes and give them a material which are the returned images. I make the call to the Unsplash API in a separate thread from the UI thread, but after retrieving the API result have to then update nodes on the UI thread.*

* I don't know if this is the right way of doing this sort of thing, but it works for me.

Task.Run(async () =>
{
   var imageUrls = await GetUrlsFromUnSplashApi(searchTerm, sides * rows);

   int x = 0;

   foreach(var imageUrl in imageUrls)
   {
        var taskA = LoadImage(imageUrl);

        await taskA.ContinueWith(cw =>
        {
            var image = cw.Result;
            uiImages.Add(image);

            BeginInvokeOnMainThread(() =>
            {
                if (x < (sides*rows))
                {
                    imagePlaneNodes[x].UpdateImage(image);
                    x++;
                }
            });
        });
   }
});

Future improvements I may consider is the ability to select an image to make it change position and scale. I may also experiment with calling other APIs such as the Facebook or a news API.

I will share the code on XamarinArkit.com with my other Xamarin Arkit learnings and proof of concepts and may also record a short explanatory video walking through and explaining the code.

Want to keep up to date with what I am working on? Follow me on Twitter @LeeEnglestone.

What search terms would you use to be surround by images of?


-- Lee
Interlude: Introducing Explainer Sundays and Refactor Wednesdays
Tags: 100daysofcode
Published: 2020-03-18 14:54:52

# Introducing Explainer Sundays and Refactor Wednesdays

It's been a week a since I've started my 100 days of code, I've coded one hour each day for the past seven days working on my D&D Character Sheet project. Now I've decided to do something I think will be fun. 

My reports are pretty boring, huh? No, it's okay. I know. The main purpose of the daily reports is accountability, it's about forcing myself to say in public what I've done today, with little editing. They're often written in a few minutes right after I finished that day's work. That's why I want to do some thing different.

## Explainer Sundays

On Sundays, rather than the traditional  reports, I'll pick some concept from what I've coded in my projects and explain it. I will pick a general concept, a library, or anything I want and write and article on it aimed at beginners. Doing so should help me solidify my understanding of the concepts I learned in bootcamp, force me to research key concepts, and explain those things in a clear and concise way.

## Refactor Wednesday

Yesterday I did a much needed refactor on my database module and that made me want to refactor more consistently. I think we all write bad code from time to time and on Wednesdays I'll go over my bad code and make those badly written parts less badly written.  I'll step through the changes I made, explain why I made them, and why I think they're better.