Day 84/100 CSS Color

A variety of color selection, not only specify colors in general but evaluate the whole concept of color syntax and usage of mixtures in details.

Colors in CSS can be described in three different ways:

• Named colors — English words that describe colors, also called keyword colors
• RGB — numeric values that describe a mix of red, green, and blue
• HSL — numeric values that describe a mix of hue, saturation, and lightness

Dog Years

Dogs mature at a faster rate than human beings. We often say a dog’s age can be calculated in “dog years” to account for their growth compared to a human of the same age. In some ways we could say, time moves quickly for dogs — 8 years in a human’s life equates to 45 years in a dog’s life. How old would you be if you were a dog?

Here’s how you convert your age from “human years” to “dog years”:

• The first two years of a dog’s life count as 10.5 dog years each.

• Each year following equates to 4 dog years.

Code Snippets

// current age
var myAge = 30;
// number of years
var earlyYears = 2;
earlyYears *= 10.5;

let laterYears = myAge - earlyYears;
laterYears *= 4;
let dogYear = laterYears * 4;
let myAgeInDogYears = earlyYears + laterYears;

let myName = 'Riolette'.toLowerCase();

console.log(earlyYears);
console.log(laterYears);
console.log(dogYear);
console.log(myAgeInDogYears);
console.log(myName);
console.log(`My name is ${myName}. I am ${myAge} years old in human years which is ${myAgeInDogYears} years old in dog years.`);

a11y myths

We can quickly add accessibility before the release

Won't work. Maybe easy things such as alternative text or form labeling may be added at the end, but some complex UX should be planned to be accessible. In some cases, making features accessible at the end of development process may require the full refactoring.