Feb
10
2012

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>
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
10
2012

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

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

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.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
8
2012
css // css3 // code // html5

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>
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
8
2012
css // code // html5

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>
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
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).

Resources

Archives

Team Blogs

Download OPML file OPML