Recent Facebook update causes your like button to appear TWICE!

I was shocked when one of my clients sent me a screen shot showing TWO facebook like buttons on his website - one under the other. I went in circles for a couple minutes trying to see if maybe something was happening twice in JavaScript when I found this article:

http://stackoverflow.com/questions/7343277/like-button-just-started-showing-duplicates-has-something-changed-on-facebooks

Here's what my code looked like:

// append like button
fbLike = $('
').appendTo(social);

Apparently, this recent FB update conflicts with the class name 'fb-like' ANYWHERE in your DOM. All I had to do was rename my div wrapper from fb-like to fblike and everything was fixed.

How odd is that!

Fancy UL/LI bullets

I've always been frustrated at the rather useless selection of bullet options for LI lists in CSS. So I decided to do something about it.

I developed a simple set of transparent PNGs and a set of CSS classes to boot. Here's the result: (the below image was generated using only ul/li code)

Download the bullet images here.

Then try this CSS: (be sure to update the image references accordingly)

ul.check li, li.check { list-style-image:url('li.check.png'); }
ul.x li, li.x { list-style-image:url('li.x.png'); }
ul.box li, li.box { list-style-image:url('li.box.png'); }
ul.box-on li, li.box-on { list-style-image:url('li.box-on.png'); }
ul.radio li, li.radio { list-style-image:url('li.radio.png'); }
ul.radio-on li, li.radio-on { list-style-image:url('li.radio-on.png'); }
ul.plus li, li.plus { list-style-image:url('li.plus.png'); }
ul.minus li, li.minus { list-style-image:url('li.minus.png'); }

The Secret to Beautifully Inset/Embossed Text

White drop shadows.

This simple technique has totally transformed my designs in the last couple weeks. My buttons have more dimension. My text has more impact. I feel so Web 3.0.

Try it in your favorite image processor... or even better, IN CSS!

text-shadow:1px 1px 0px #fff;
filter:DropShadow(Color=#ffffff, OffX=1, OffY=1); /* FOR IE */

Connect Multiple Browsers using JavaScript

When searching for answers to development issues, I often land on Ben Nadel's Blog.

I landed there today and subsequently stumbled upon the most glorious JavaScript post I've ever seen in my entire life.

Ben demonstrates how to communicate with multiple client browsers using JAVASCRIPT! That's right. Imagine you and your friend have the same website pulled up. Then imagine you click on text field and started typing... and watching your friend's browser update INSTANTLY. No joke.

Ben shows us more here: http://www.bennadel.com/blog/2171-Realtime-Messaging-And-Synchronization-With-NowJS-And-Node-js.htm



Thanks, Ben!

Dynamic Image Placeholders (or what I like to call 'Image Ipsum')

Ever struggle to find a generic image placeholder of a web design during development?

Two fantastic sites you need to checkout:

http://kittenholder.com

http://flickholdr.com

Both services allow you to paste a URI like "http://flickholdr.com/980/220/balls" into your HTML and get back a random JPEG. In the above URI, 980 is width, 220 is height and 'balls' is a search parameter.

One suggestion for kittenholder.com - rename your website to loremkitten.com ;)