Feb
6
2012
css // css3 // code // javascript

CSS3 Colors–HSLA to RGBA

In my previous post on CSS3 Colors – RGBA vs. HSLA, I provided a script to easily convert RGB to HSL using inputs/outputs friendly to CSS3.  In this post, I provide the reverse script – converting from HSL to RGB.  The trailing “A” means Alpha (scale of opacity), and requires no conversion.

// elsewhere in script use this way:
// var result = Palermozr.hslToRgb(0,0,100);
// result.R // Red
// result.G // Green
// result.B // Blue
var Palermozr = (function () {
    function hslToRgb(h, s, l) {
        h /= 360; s /= 100; l /= 100;
        var r, g, b;
        if (s == 0) {
            r = g = b = l;
        } else {
            var l2 = l < 0.5 ? l * (1 + s) : (l + s) - (s * l);
            var l1 = (2 * l) - l2;
            r = hueToRgb(l1, l2, (h + (1 / 3)));
            g = hueToRgb(l1, l2, h);
            b = hueToRgb(l1, l2, (h - (1 / 3)));
        }
        r = Math.round(255 * r);
        g = Math.round(255 * g);
        b = Math.round(255 * b);
        return { R: r, G: g, B: b };
    }
    // helper function used above
    function hueToRgb(l1, l2, h) {
        if (h < 0) h += 1;
        if (h > 1) h -= 1;
        if (h < 1 / 6) return (l1 + (l2 - l1) * 6 * h);
        if (h < 1 / 2) return l2;
        if (h < 2 / 3) return (l1 + (l2 - l1) * ((2 / 3) - h) * 6);
        return l1;
    }

    return {
        hslToRgb: hslToRgb
    };
})();
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
3
2012

CSS3 Colors–RGBA vs. HSLA

hslThere really is no battle between RGBA and HSLA.  Either can accomplish the task of discovering the color that is just right for you.  Which should you choose?  Which is an easier concept for you to understand?

Red
Green
Blue

Hue
Saturation
Lightness

Alpha (opacity)

 

Again, which above is easier for you to understand?

According to the W3C:

4.2.4. HSL color values

CSS3 adds numerical hue-saturation-lightness (HSL) colors as a complement to numerical RGB colors. It has been observed that RGB colors have the following limitations:

  • RGB is hardware-oriented: it reflects the use of CRTs.
  • RGB is non-intuitive. People can learn how to use RGB, but actually by internalizing how to translate hue, saturation and lightness, or something similar, to RGB.

Is RGB truly non-intuitive?  By looking at the color wheel in this post would it be intuitive for you to know the hue value of 1 or 360 is red?  Which is easier to digest:  blue=blue or 240=blue.

It doesn’t really matter.  What really mattered to me was to understand the algorithm to convert from one to another.  Since alpha is simply a scale of opacity, I was more curious about the conversion of red, green, and blue to something light, saturated, and with hue.

To test my understanding, I set out to write a script that was CSS3 friendly.  In other words, it would use as inputs/outputs values used in the rgba() and hsla() functions in CSS3.  The result is the script below. 

As always, I value feedback Smile

// elsewhere in script use this way:
// var result = Palermozr.rgbToHsl(255,255,255);
// result.H // Hue (between 1 and 360)
// result.S // Saturation (between 0 and 100) %
// result.L // Lightness (between 0 and 100) %
var Palermozr= (function () {
    function rgbToHsl(r, g, b) {
        r /= 255;g /= 255;b /= 255;
        var max = Math.max(r, g, b),
            min = Math.min(r, g, b);
        var d = max - min,
            u = max + min;
        var h = 0, s = 0, l = u / 2;
        if (d !== 0) {
            s = l < 0.5 ? d / u : d / (2 - d);
            var rr = (((max - r) / 6) + (max / 2)) / d;
            var gg = (((max - g) / 6) + (max / 2)) / d;
            var bb = (((max - b) / 6) + (max / 2)) / d;
            switch (max) {
                case r: h = (bb - gg); break;
                case g: h = (1 / 3) + (rr - bb); break;
                case b: h = (2 / 3) + (gg - rr); break;
            }
            if (h < 0) h += 1;
            if (h > 1) h -= 1;
            h = Math.round((h * 360));
        }
        s = Math.round(s * 100);
        l = Math.round(l * 100);

        // returns object with H,S, and L property values
        return { H: h, S: s, L: l };
    }
    
    return {
        rgbToHsl: rgbToHsl
    };
})();
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
2
2012

Feature Detection Script for CSS3 Selectors

If you are a serious HTML5|CSS3 developer, you have undoubtedly come across the amazing resource known as Modernizr.  Modernizr is an amazing suite of script functions that enable feature detection to provide intelligent rendering across the multiple browsers that do or don’t support the desired feature.

Recently I was in need of a specific feature detection in CSS3 that I realized was not in the latest version of Modernizr – the ability to detect support for CSS3 Selectors.  Some examples of new CSS3 selectors include:  ::selection, :root, :target, :not, :checked, :empty … just to name a few. With necessity being the mother of invention, I took it upon myself to create the script needed to do the job. 

Here is the script, and I look forward to any feedback Smile

// elsewhere in script use this way:  
// var result = Palermozr.isSelectorSupported(":root");
var Palermozr = (function () {
    function isSelectorSupported(anySelector) {
        var newStyle = document.createElement("style"),
                cssRule = anySelector + "{}",
                isSupported = false,
                styles,
                rules,
                selectorText;
        newStyle.type = "text\/css";
        if (newStyle.styleSheet) {
            styles = newStyle.styleSheet;
            if (styles.cssText) {
                styles.cssText = cssRule;
                if (styles.rules) {
                    rules = styles.rules;
                    if (rules[0].selectorText) {
                        selectorText = rules[0].selectorText.toLowerCase();
                        isSupported = selectorText.indexOf("unknown") < 0;
                    }
                }
            }
        } else {
            newStyle.appendChild(document.createTextNode(cssRule));
            document.body.appendChild(newStyle);
            isSupported = !!newStyle.sheet.cssRules.length;
            document.body.removeChild(newStyle);
        }
        return isSupported;
    }
    return {
        isSelectorSupported: isSelectorSupported
    };
})();
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
1
2012

A Few Things You Should Never Know

Despite a sense of self-entitlement, there are a few things that should NEVER be known to you...

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jan
28
2012

HTML5 for the Real World

Here are the resources for the “HTML5 for the Real World” Presentation given at SoCalCodeCamp on Saturday January 28th, 2012.  Enjoy!

[HTML5 Demos]

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jan
18
2012

Technical Level of Understanding

How often are you asked something like:

"How good are you at…"
"Have you used…"
"What is your experience with…"

With regard to technical competency in a given area, what should you say? After giving this some thought, I feel there are three major aspects that come into play:

  1. Academics

    Knowledge & Understanding

    This is a two-part aspect. Knowledge refers to the specifics, while understanding relates to conceptual comprehension. For example, in HTML5 new elements have appeared such as <section> and <article>. Knowledge is awareness of these things and the proper syntax to use them. Understanding is knowing why and when we would use one over the other.

  2. Experience

    Time

    If all you have is the first aspect, then you only have is academics. You would be "all theory, no practice" as the saying goes. How much time you put into actually using the technology is commensurate with your expertise. And I am sure you will agree that the more time you spend on any technology, the more likely through "trial and error" you learn more too.

  3. Context

    How

    How you apply the technology is also a factor. Using HTML5 to create a friend's personal website will (likely) not give me the same challenges as a Fortune 500 company needing a new internet site. The context of the technologies surrounding a technology also comes into play. For example, loading a web page with static data vs. loading a data from a service in the cloud – both end up the same, but the level of skill to complete one or the other is considerably different.  In this aspect the scale of use is also factored.  Creating something to please 10 people is far different from creating something to please 10,000,000 people.

Any of the above aspects deserve much more explanation.  This is just my rough-draft thinking.  Imagine an algorithm that would put these into numerical measurement.  Something like:
TL = (A+E2)C
Technical level equals context multiplied by the sum of academics and experience weighted twice important

If each aspect were given a scale of 1 to 5, what would your technical level be?

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jan
12
2012

How to Start in Safe Mode using BitLocker

Here are the steps you need to take if you need to start your Windows OS in "Safe Mode" when the drive is protected with BitLocker.
  • First, be sure you have your BitLocker recovery key handy. This is NOT your PIN. This is a LONG series of numbers.
  • Before the screen appears prompting for the BitLocker PIN, press [F8] (maybe repeatedly).
  • If you pressed [F8] early enough, you will get a warning message as seen here:
  • After supplying the BitLocker recovery key, you will be prompted with booting options, including the various safe modes.
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jan
5
2012

Top Blog Posts of 2011

me_blue

The year 2011 was my first full year as a Microsoft blue-badge.

In looking back on all my blog stats, I unraveled a humorous irony as to what became my number one blog post of the year.  Would the top blog of the year have something to do with HTML5?  Would it be regarding a technical article?  Would it be a blog post that stirred heated discussions?  Would the top spot be a post of free resources such as online videos?  Nope. Stay tuned… the number one blog post is revealed at the end. 

For now, please join me in a walk down memory lane as I reveal my five most popular blog posts in descending order:

 

5 Camtasia Recorder Error: “Failed to start recording: Temp Folder Uninitialized”

No surprises here.  Anytime I blog about a technical error with a product it usually ends up being found by the search engines. 

 

4 A .NET Love Story

For a post that was originally written in 2005, it still remains my most viewed blog post of all time. Doesn’t that make sense?  It is about love…

 

3 To MVP, or not to MVP…

This was a blog post in response to an ex-MVP who felt the MVP program at Microsoft had no value in his eyes.  It was not the most viewed blog post, but it claims the prize for the most comments.

 

2 HTML5 “Web Camp” Videos

Confession time.  I really was hoping this would post would land at number one.  Coming in at number two is not bad considering I posted it in the latter part of 2011.  Nonetheless, recording industry super-stars sharing secrets about HTML5, CSS3, and JavaScript techniques still took a back seat to my number one blog post of the year…

 

1 How to Fix/Repair iPhone With Water Damage

Seriously?  In my first year at Microsoft, my number one blog post is about how I fixed my wife’s iPhone?  *sigh*

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Dec
7
2011

HTML5 Form Inputs

My latest article published at DevProConnections is about collecting and validating data using the new HTML5 enhancements to form inputs. In the article I cover new attributes to input elements such at required, placeholder, and pattern. I showcase how to style forms with CSS3, and how to customize validation with script.

To read the article online, please visit HTML5 Form Enhancements with CSS3 and JavaScript at DevProConnections!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Nov
30
2011

ASU CIS Information Session

I had the great pleasure of speaking to an amazing crowd of students on campus at ASU on Tuesday, November 29th 2011 (my anniversary date with Microsoft).  The response and feedback from the students in attendance has been overwhelming.  As promised, here are some resources requested from the session:

Here are a few insightful tweets that followed the presentation and Q&A session:

asu_twitter

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).

Resources

Archives

Team Blogs

Download OPML file OPML