29 Months, 11,561 files, 6.3 gigabytes

As I begin to clean up and clear out at Overstock.com I have been consolidating all of my files and finally got them organized. Here is what I ended up with:

Back to Blogging

Wow, almost an entire year without a post to the design blog. Ouch. Truthfully most of my time and effort has been in other projects and blogs and I have rellly put this on hold. I am going to take a new look at it this year and see what I can do. I might switch it up and move this over to Tumblr, but right now I just want to have something back up and start adding some content.

Scooby-Doobey Doo... CSS?

Found this code why I was poking around on the net... So I had a little fun with it:

Overstock.com Groundhog Day Logo

I was asked to throw this together the evening before Groundhog's Day. Just a little animated gif. Check it out:

If you missed the animation, click on the image above to see it again!

This was a last minute decision by the Overstock.com Marketing executives to celebrate Groundhog Day. I do enjoy playing with the logo a little bit. Check out my portfolio to see some of my previous holiday logos.

jQuery jShare-it Plugin Preview

I was planning on releasing an updated 2.0 version of my original "j-ShareIt" plugin tonight. The new version "jShare-it" came out of the box at about 1/2 the size of the original in a slick new interface, with a nice combination of jQuery and CSS to make the widget highly customizable. The app is basically a version of the AddThis sharing widget, but cuts out their analytics and calls to 3rd party servers. The best part however, is the ability to make it look however you want. The out of the box version comes as a drop-down with large 64 pixel icons and 12 popular social media outlets. Take a look:


With a simple find and replace in the CSS the color scheme can be changed in a second:


The CSS is CSS3 but does degrade smoothly in IE6 and IE7 (mostly removing rounded corners). The actual script works in everything: IE6+, Firefox 3+, Chrome, 4+ and Safari 3+.

Using jQuery, when a user clicks on an icon for a social media outlet, the script attaches the post URL for the specific outlet, and then grabs the URL and title from the specific page the user is trying to share (using the encodeURIComponent variable).

var url = encodeURIComponent(self.location.href);
var title = encodeURIComponent($("title:first").html());

Just like AddThis it populates title and URL fields in the posting section of the said outlets. It's quite simple but there really aren't any good jQuery based widgets out there. Everything is sign up and go. With this free standing widget you have the control to do what you want with the code.

In the near future I will be adding more outlets, probably the top 25 or 30 in all, and develop a more compact version with small icons and text as opposed to the larger version. The big thing would be URL shortening integrated with bit.ly. I don't think it's out of the question, just a matter of coming up with a JSON call to bit.ly that returns the URL variable back to the script. We'll see what I can do.


In any event, like I said at the start, I was planning on releasing tonight, but the script I integrated for a smooth dropdown, had some issues, namely it conflicted with jquery.cycle in testing, which is a problem. There is no reason that it should interfere with any scripts. This week I am going to rework the script to something more standard and highly tested. I guess the actual release will have to wait a week!

Ikea... Dropdown Menu oops!

Ikea made a pretty big oops on their United Kingdom site today. On their homepage, somebody scheduled a large flash mod, but didn't set the wmode correctly. They used a variable in their embed tag I haven't seen used before, flashvars="wmode=transparent", when they should have just done wmode="transparent". This is still surprisingly a common mistake on sites that combine flash elements with good ol' html, css and javascript. Unfortunately, there is no way to fix this by assigning z-indexes to the holder for the flash element and the navigation, the flash must have the wmode set to transparent.

Click Image above to view larger

Here is their source code:

<div id="flashcontent_used" class="firstFlashContent" style="">
 <embed
   width="900"
   height="370"
   flashvars="wmode=transparent" <- The Rogue code
   quality="high"
   bgcolor="#ffffff"
   name="sultan_nlp"
   id="sultan_nlp"
   style=""
   src="/ms/en_GB/flash/homepage/sultan_new_lower_price.swf"
   type="application/x-shockwave-flash"
  />
</div>


Remove that line and add wmode="transparent" and everything would work kosher.

Click Image above to view larger

This is why edits edits edits (check out the blog post) are so important!

jQuery 1.4 Released Today

Today the jQuery team released the latest and greatest version of the most versatile javascript library on the planet. Cutting to the cahse, you can read about it here:

http://jquery14.com/day-01/jquery-14

There were a number of changes and upgrades, including the inclusion of sizzle.js into the new version (I'll talk about sizzle in a later post). I heard someone today complaining about jQuery saying it was "lazy" to use a library and not write your own .js from scratch (a "flash" guy... I think he is afraid jQuery is more useful than Flash--well it is..). Yes good idea, let me sit down and write something as good as jQuery form scratch to use for my projects or any. Let's be honest, the gusy who created jQuery are some of if not the best. If you think you can do better than them than go for it. You will be at it for weeks, if not months and years, and by the time you think you have something, they will be continuing moving forward with their kick-ass library.


Using a library like jQuery has NOTHING to do with laziness, and everything to do with being efficient and productive. Somebody else has done the ground work, created a code base, and made it publicly available to use. This is a god-sent in this industry and I applaud and thank the guys at jQuery for the work they have done. So to the point here it is, the latest minified version

http://code.jquery.com/jquery-1.4.min.js

Additionally, Google has provided a copy of jQuery hosted on their servers. This copy of jQuery is automatically minified and gzipped – and served from Google’s fast edge cache servers.


http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

Include the above URL directly into your site and you will get the full performance benefits of a quickly-loading jQuery.

That's it for today. Grab the latest copy of jQuery and make some amazing stuff happen on the web.