Palermo4 on MSDN

Technical Blog of J. Michael Palermo IV

February, 2012

Check it out!

Posts
  • Palermo4 on MSDN

    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...

  • Palermo4 on MSDN

    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
        };
    })();
  • Palermo4 on MSDN

    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
        };
    })();
  • Palermo4 on MSDN

    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
        };
    })();
  • Palermo4 on MSDN

    CSS Hover Trick

    In no way am I claiming this to be original.  But I can’t say I have seen this trick done anywhere else.  With the CSS :hover selector, you can create a nice “status message” appear in one location while hovering over particular items in a list (or menu).  Below are the screen captures of what the trick accomplishes, followed by the entire source code to make it possible.  Enjoy!

    csshover00 
    No mouse hover

     

    csshover01
    Mouse hover over first item

     

    csshover02
    Mouse hover over second item

     

    csshover03
    Mouse hover over third item

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>CSS Hover</title>
        <style>
            #csshover ul { 
                position:           relative;
                margin:             0;
                padding:            0; 
            }        
            #csshover li {
                list-style-type:    none;
                display:            inline-block;
                margin-right:       3em;  
                cursor:             pointer;   
            }
            #csshover li p {
                position:           absolute;
                top:                2em;   
                display:            none;
                left:               0em;
            }
            #csshover li:hover p {
                display:            inherit;
            }
        </style>
    </head>
    <body>
        <article id="csshover">
            <h1>CSS Hover Trick</h1>
            <p>Hover over each of the words below.  Look for status message below!</p>
            <ul>
                <li><div>CSS  </div><p>It's all about the style!</p></li>
                <li><div>Hover</div><p>When you wander above...</p></li>
                <li><div>Trick</div><p>Look Ma, no JavaScript!</p></li>
            </ul>
        </article>
    </body>
    </html>
  • Palermo4 on MSDN

    CSS3 Target Trick

    In my previous post regarding a CSS Hover Trick, I was challenged in the twitter universe to do something similar with images, but with the click event.  Could this be done without JavaScript?  But of course.  What makes this possible is use of two CSS3 selectors:not, :target. This will not work in older browsers, so check out how to do feature detection in this post on detecting CSS3 selectors.

    The code found below will make images appear based on what anchor tag was clicked without using  any JavaScript!  Here are screen captures to demonstrate the desired behaviors:

    csstarget00
    No anchor tags have been clicked

     

    csstarget01
    First anchor tag clicked

     

    csstarget02
    Second anchor tag clicked

     

    csstarget03
    Third anchor tag clicked
    Shameless self promotion

     

    Here is the code to make it all work!  To reproduce in your own environment, simply replace the images with your own!

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>CSS Target</title>
        <style>
            #csstarget ul { 
                margin:             0;
                padding:            0; 
            }        
            #csstarget li {
                list-style-type:    none;
                display:            inline;
                margin-right:       2em;  
            }
            img {
                width:              8em;
                height:             8em;
            }
            #images {
                padding:            3em;
            }
            
            /* hide unselected targets */
            #images img:not(:target) {
                display:            none;
            }
            /* display selected target */
            :target {
                display:            inherit;
            }
        </style>
    </head>
    <body>
        <article id="csstarget">
            <h1>CSS Target Trick</h1>
            <p>Click on any word to reveal an image...</p>
            <ul>
                <li><a href="#img01">CSS3</a></li>
                <li><a href="#img02">HTML5</a></li>
                <li><a href="#img03">Palermo4</a></li>
            </ul>
            <div id="images">  
                <img id="img01" src="images/css3logo.png" />
                <img id="img02" src="images/html5.png" />
                <img id="img03" src="images/palermo4_bw.png" />
            </div>
    
        </article>
    </body>
    </html>
    
  • Palermo4 on MSDN

    The Twitter TweetDeck Failure

    When I first started using Twitter, I was using it on a phone just via text messaging (I feel like an old guy saying “back in my day…”).  As tweeting became more popular, more options surfaced for how to manage all the tweets.  Phones now had apps that made tweeting via text messaging look like using a DOS console vs. an elegant Windows UI.  The Twitter.com website improved dramatically.  Soon, I was tweeting either via the web or an app.

    My first introduction to TweetDeck was on the PC, followed by the app for iPad.  I really liked the layout and how easy it was to keep track of searches, lists, and mentions.  It was the best app to manage tweets in my humble opinion.  So it was no surprise to me when I heard Twitter bought TweetDeck for millions of dollars.

    I was excited for the product!  Now under the ownership of the Twitter, what cool features would await us?

    And then came reality.

    Who would of guessed that the product would go backwards.  I can only imagine how many of us that were using TweetDeck before the acquisition, scratched our heads wondering where the setting was to get to that cool feature we liked.  We didn’t accept that it was gone, we simply didn’t understand where they relocated it.  Because it was not fathomable that the feature would truly be gone!

    On the day of writing this post, I had a need to add myself to a Twitter list I created.  I could not see how to do it via the web interface, so I looked to TweetDeck (the most recent release by Twitter) for a way to do it.  Big mistake.  Someone in the Twitter universe suggested I download to version of TweetDeck before Twitter took over.  Feeling dirty for installing an older version alongside the current version, I was able to accomplish my objective.  I had to use an older product.  That is a failure.  It makes no sense to me.

    For any of you who have shared a similar story, I would love to hear about it.  Please leave a comment.  Let the search engines find all the woes and complaints.  May the minds behind the current release of TweetDeck reflect on the massive failure of giving their community less.

    By the way, if you want that “golden” edition of TweetDeck before Twitter took over, you can download it by clicking the yellow TweetDeck logo above.  The blue logo is a dead end.

  • Palermo4 on MSDN

    How to Add a Twitter Feed to FeedDemon

    feeddemon4.0.0.22I use FeedDemon to manage all of my feeds.  It is easy to add an RSS feed from any blog, and it syncs with your Google feeds if you use that.

    When looking to add a Twitter feed to the mix, the documentation in the product suggested looking for some RSS button on the lower right corner of any twitter page.  I can assure you, I have yet to find that.

    Nonetheless, the product documentation should have pointed to its own way of doing it.  Here are the easy steps to add anyone’s tweets to FeedDemon:

    Add a New Subscription

     

    feeddemon_new 

     

    Type in Twitter Alias

    feeddemon_keyword

     

    Select ‘Twitter’ From List

    feeddemon_twitter

    Name Your Twitter Feed

    feeddemon_title

    And you are done!  Hope that helps Smile

  • Palermo4 on MSDN

    Importing Auto-Links into Live Writer

    My teammate Sam Stokes just wrote a blog post on how to create auto-links in Live Writer, a feature that will automatically link a keyword or phrase to a URL.

    And now, the rest of the story.

    Another way to add an auto-link is any time you are in the “insert Hyperlink” dialog box:

    livewriter_link

    If you want to “bulk load” these into Live Writer, examine the XML at the following path:

    C:\Users\[user]\AppData\Roaming\Windows Live Writer\LinkGlossary\linkglossary.xml

    The linkglossary.xml file contains snippets of XML like the following:

    <!-- another shameless plug -->
    <entry>
        <text>Michael Palermo</text>
        <url>http://www.palermo4.com/</url>
        <title>
        </title>
        <rel>
        </rel>
        <openInNewWindow>True</openInNewWindow>
    </entry>
  • Palermo4 on MSDN

    Adventures in Excel–Array Formulas

    This NBA season, I decided to create a Fantasy Basketball League.  I had no idea how seriously involved I was going to be.  Within the first two weeks, I created an Excel spreadsheet to help me analyze my team.  As a result, I learned some cool tips & tricks in Excel.

    Array formulas helped me to accomplish the following scenario:

    fbb_excelcount

    Look at the GREM (games remaining) column.  It looks at the content on the same row that includes columns MON through SUN.  At the beginning of a new week (which begins on Monday), I want to see how many games the player has yet to play.  If a number appears in the column (as seen in the case with LeBron James), that means that game has been played, so only count the remaining games in the week.

    Although not shown in the screen capture above, should the word “bench” appear in any column referencing a day in the week, I do not want that counted in the GREM column.

    How did I make it work?  Here is the formula:

    {=COUNT(IF(ISNUMBER(VALUE(AN9:AT9)),"",IF(AN9:AT9="bench","",1)))}

    Do you see the curly braces surrounding the formula?  This is accomplished by pressing [CTRL] [SHIFT] [ENTER] when the formula inside is complete (do not manually add the curly braces).  This syntax is known as an array formula.  In the example above, column AN is Monday, and column AT is Sunday.  Row 9 is referring to the line of data for LeBron James.

    Now here is what is awesome about array formulas.  Notice how I am evaluating AN9:AT9 as if it were a single value?  For the developer nerd in you, consider this like a FOR EACH statement.  It is basically evaluating each cell in that range to determine if it meets the criteria.

    If you have complex business rules that require per cell criteria evaluation, array formulas will be one of your most powerful Excel allies!

Page 1 of 2 (11 items) 12