# Palermo4 on MSDN

Technical Blog of J. Michael Palermo IV
Check it out!

Posts
• #### The Hunger Games–Capitol Tour

The most anticipated movie of the year hits theaters this Friday, March 23rd – The Hunger Games.  If you have read the book (or trilogy), you are probably giddy with excitement to see your favorite characters come to life on screen in a somewhat morbid view of a fictional world of the future.

If you are a fan, you are invited to take the Capitol Tour!  Sign in today to see which district you belong to.  Myself?  Of course I was assigned to District 4.

• #### Windows 8, You Look Great!

I love the new logo for Windows 8!  Learn more at the Windows Team Blog.

• #### 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:

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!

• #### 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:

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

I 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:

And you are done!  Hope that helps

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

• #### 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:

No anchor tags have been clicked

First anchor tag clicked

Second anchor tag clicked

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">
<meta charset="utf-8" />
<title>CSS Target</title>
<style>
#csstarget ul {
margin:             0;
}
#csstarget li {
list-style-type:    none;
display:            inline;
margin-right:       2em;
}
img {
width:              8em;
height:             8em;
}
#images {
}

/* hide unselected targets */
#images img:not(:target) {
display:            none;
}
/* display selected target */
:target {
display:            inherit;
}
</style>
<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>
```
• #### 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!

No mouse hover

Mouse hover over first item

Mouse hover over second item

Mouse hover over third item

```<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Hover</title>
<style>
#csshover ul {
position:           relative;
margin:             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>
<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>```
• #### 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
};
})();```
Page 10 of 19 (182 items) «89101112»