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.

Smashing Magazine Likes My Design.. Sort of

Checking out Smashing Magazine today, the company I currently work for, Overstock.com got a nod in terms of usability, intuitiveness, and simplicity. I like to think I had a hand in at least the third item, after all, I did the final design for the homepage and header, and have come up with a number of "swiss-style" improvements across the site.

Smashing said,

"Other online retailers should aspire to its virtues: a concern for the needs of the consumer, intuitive and effective tools and a clean crisp layout."

Combined Screenshots from the article

There were some negative comments, however, I haven't been involved in the actual product pages or search and navigation pages in terms of design and layout, so I haven't been able to have any influence there. Oh well

Read the entire article by clicking here

Combing YUI and CSS Tools reset.css

The Reset stylesheet is used to reduce browser inconsistencies in things like default line-heights, margins, padding, font-sizes, etc. These styles are intentionally very generic and are based off the "CSS Tools reset.css" and the "Yahoo YUI reset.css" files, which can be found below:

CSS Tools reset.css
http://meyerweb.com/eric/tools/css/reset/

Yahoo YUI reset.css
http://developer.yahoo.com/yui/build/reset/reset.css

Reset.css is a necessary evil in modern web design. With 6-8 common browsers all in use at one time there are inconsistencies in default settings between the browsers. IE6 is still remains the predator that causes the most issues, but each browser has its own quirks, and this CSS basically "resets" the default styles to something more manageable to work with from the start. Using either of the above, or the below CSS is a starting point for any project, the first bit of CSS your HTML should read to get started. From here you can build your site out to be whatever you want, and are able to avoid many cross-browser problems that would otherwise occur. With that said, here is my reset.css, a combination of the two above mentioned stylesheets.

/* Version 1.0 Aerial Perspective combined YUI and CSS Tools reset.css*/
/** 01/11/10**/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; color:#000000; }

table { border-collapse:collapse; border-spacing:0; }

body { line-height:1; }

fieldset, img { border:0; }

address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style:inherit; font-weight:inherit; }

ins { text-decoration:none; }
del { text-decoration:line-through; }

ol, ul { list-style:none; }
li { list-style:none; }

caption, th { text-align:left; }

h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }

blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }

abbr, acronym { border:0; font-variant:normal; }

sup { vertical-align:baseline; }

sub { vertical-align:baseline; }

/* remember to define focus styles! */
:focus { outline:0; }

/*because legend doesn't inherit in IE */
legend { color:#000; }

input, button, textarea, select, optgroup, option { font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; }

/*@purpose To enable resizing for IE @branch For IE6-Win, IE7-Win */
input, button, textarea, select { *font-size:100%; }



Download a copy without having to copy and paste by clicking below:
my combined version of reset.css

Edits, Edits, Edits...

Now by no means am I a spelling expert, grammar aficionado, or professor emeritus of the English language--but I like to think that most of the time I am on top of spelling when it comes to putting things into production on the web (just don't read my past blog posts, they are filled with my lack of edits). At least when it comes to major items, like large banners, headings, or images with text on them. Basically, anything that gets special attention from users will usually get special attention from an editor. In my case the editor is my girlfriend. She is a member of the grammar and spelling police and usually catches all my mistakes before they make me look like a moron. With that said it is one of my biggest pet peeves to see major mistakes of the spelling nature online. Take for instance this large ad from a major online retailer I came across this morning (you don't have to be a genius to guess who, but I won't divulge that information up-front)--I for one am excited about the "Vancuver" Olympics... What about you?

I for one am excited for the 2010 "Vancuver" Olympic Games

Now in this case I don't feel all that bad to point out the flaw. I mean this is a pretty big mistake. I actually can't compare it to anything else, because I don't think I have seen anything this blatant. Nothing at least in recent memory. The point is, everyone should have an edits process, whether a one man operation, or a billion dollar a year company. Don't just create something and push it out the door. Create something and check it yourself, then have someone else check it, and if you are really concerned have a third person. It doesn't matter if its a copywriter, or your mother-in-law.

Real designers Use Papyrus Shirt

I don't use this blog all that often, but I came up with this today as part of an ongoing joke at work about Papyrus and what a "useful" and "wonderful" font it is. I figured it was worthy of a post. I guess I need to start posting here more often since I started using my other blogs.