TUTORIALS - Ratings Stars and Responsive Menus

Got two new tutorials up on my site, figured I'd share them here.

First up we have how I handle rating stars. I've done it this way for some time, but I still see people struggling with something fairly simple by using multiple images, bloated markup, and sometimes even JavaScript for, well... who knows what. Laughably this is also EASIER to change using JavaScript as all you need to do is send style.width to the inner span.

http://www.cutcodedown.com/tutorial/ratingStars

The second tutorial outlines how I make those mobile/responsive menus where the menu is hidden until you click on the "show menu" button or hamburger icon. While I prefer text over the "ambiguous UI design" of the burger icon, I present it both ways just to show how powerful CSS3 is and how you don't need to futz so much with the markup!

http://www.cutcodedown.com/tutorial/mobileMenu

Neither is particularly complex, but does require at least a basic working knowledge of HTML and CSS.

Have a good New Years Eve -- I'll likely be in and out all evenin' meetin' and greetin'.

Uhm...

 

Your first paragraph ends prematurely.

But good article, been using the star ratings like that for many years with success. And learnt something new with the scalability.

 

Dunno what happened there, I probably just blew through that one too quick as it was the simpler of the two. Thanks for pointing that out, now corrected.

 

It would perhaps be a better example (for the stars, I mean), if you provide a properly formatted actual usage scenario, not just the stars themselves? (Hoverstate + clicking and "storing" the result). Maybe a bit more advanced than you set out to make.

 

I'm a little surprised how many responses I've gotten along those lines since, well... It's not the first usage scenario I think of for it! I'm just thinking normal review sites where the value already exists...

The "scripttard" hover crap is a usability nightmare that pisses me off on the sites that do it when it comes to voting/ranking!

Particularly when I'd rather just see a select or set of radio buttons for something like that.

I rarely see "voting" done that way, and when it does it's rubbish since 90%+ of the time you can't even tell it's a control.

 

Well... even when something already has the value, it has to come from something?
The usage scenario I see for these are mostly user-reviews - putting their say on movies/books/plays/games etc.
Granted, of course you can use it for posting just your own rating of things, but without any interaction, it's a bit of a "why bother", when all you need to do then is post a picture of a D6. (Simpler, smaller images etc.)

 

I'm not sure what a six sided die has to do with anything... and all sorts of sites have displays of rankings without user interaction; IMDB for example...

... and I'm pretty sure you're not going to get smaller images than simply two states in one file; not sure what you're even getting at.

 

Uhm. The rankings on imdb is based on user input. Where else would it come from?
Technically, you could create dice with pure css, no images needed. Hm. Maybe I should try making that. :-D

 

What the hell, DS is writing posts and using x2 images?!?!?

Congrats man, happy to see cutcodedown finally launched!

 

Pervasively across the whole site if you look closely.

I think I'm switching to EM's on images for good with the PX fallback methodology for the time being. I may simply say "screw it" and not bother feeding "fancy" layout images to IE8/earlier in the "oh well" sort of way the same way I treat rounded corners and drop-shadows.

A LOT of this content has been in various different directories just needing to be punched up a little and modernized. Dan, Aaron, and I all had all sorts of discussions and ideas -- a lot of it not fit for public consumption -- that I'm going through the discussion logs and my own notes, cleaning it up and getting it on the site.

ORIGINALLY I was going to wait for my next-gen CMS to be finished and run the site on that, but I ended up just tweaking the "poor man's CMS" system I use for my other sites since the latest version of that is more than robust enough for now. EVENTUALLY I'm going to want to handle discussions/comment in-house instead of using the bloated pig that is disqus, but it works for now, is a non-blocking script (my problem with most other systems) and they do have a message export capability for when/if I do decide to add my own commenting.

I am going to be gutting the share buttons for G+ and FB though. They're pissing me off in both their lack of speed and ridiculous scripting size. FB is likely first since their API is better documented.

 

Have you thought of just using FB / G+ sharing links echoing the links of the articles?

<a href="http://www.facebook.com/share.php?u=http://yoursite.com/article_1.html">FB</a>
<a href="https://plus.google.com/share?url=http://yoursite.com/article_1.html">G+</a>

Code (markup):

 

Yes, that's actually what I'm aiming for, but I still want to show counts on the page, so I have to ajax into their API's for that. I'm also going to be trapping and wrapping those anchors in the scripting so as to provide a degree of faux window control since I'm not going to piss all over the accessibility by resorting to the target attribute.

Scripting off they'll work old-school. Scripting on I can do what their plugins manage --- just I'll be using a fraction the code since pulling a count and having a popup holding an object tag (yes, object, NOT iframe) isn't rocket science.

Really handy is the XML response from:

'https://api.facebook.com/method/fql.query?query=select%20share_count%20from%20link_stat%20where%20url="' + encodeURIComponent(url) + '"'

Code (markup):

Since XMLHttpRequest already creates a DOM of that in responseXML, so pulling the values is as simple as:

var r = ajax.responseXML.getElementsByTagName('share_count')[0];
return r.textContent || r.innerText;

Code (markup):

Which again makes me wonder what in blazes they need all that scripttardery for.

Using the DOM from the XML response is so easy and a natural part of AJAX -- hell it's WHY it's called XMLHttpRequest for *** sake -- I wonder why in blazes people spend so much time dicking with JSON.

Not that either is a particularly efficient medium for transmitting information, but I mean the XML handling is already built in so...

Laughably about three or four weeks ago when I was looking for information on addressing these API, I came across a guy who made a XML parser to go through a AJAX.responseText.... I was like... REALLY?

 

It would be cool if you could do this for the G+ share button. G+ grabs an image from the page makes it clickable, but there's no title or description. You have to enter something yourself (or leave it blank).

 

Hmm interesting,

I think I'm going to start pull share counts like that. Would be cool to get them for Twitter and Google too.

On this new site I'm working on I ended up just styling my own that look pretty close to the official ones (since they're are such a mess of code). Guess the official style ones convert wayyyy better than anything two custom.

 

Hmm interesting,

I think I'm going to start pull share counts like that. Would be cool to get them for Twitter and Google too.

On this new site I'm working on I ended up just styling my own that look pretty close to the official ones (since they're are such a mess of code). Guess the official style ones convert wayyyy better than anything two custom.




@qwikad - Pretty sure there's a few method's for giving google that information. The easiest being thise OG:metatag thingamobabbers.

 

Not sure what that is. Can you elaborate?

 

He's referring to opengraph

http://ogp.me/

...which in my experience Google ignores since it's a facebook tech. Mind you, a lot of services ARE paying attention to opengraph, but since "rawr, fazeb00k5 3vi1z, use looggie pluasu" Google for the most part gives it the cold shoulder. Instead, Google uses "schemas":

<kylo ren>Which apparently the stupid mother ****** halfwit mouth-breathing dumbass re-re idiotic bekaptah bull that is URL validation on these forums is too stupid to let me actually post the URL complaining about it being 405.</kylo>

schema dot org

Which is such a bloated train wreck I'd love to go a few rounds in a boxing ring with the dipshits who came up with "schema". Nothing like making 100% certain people write two to four times the markup they need for information 99.999% of your traffic will never use. Of course why do this? Why to satiate the needs of "data scrapers" -- or, to use their PROPER name, CONTENT THIEVES

Of course, of all those FB meta only og:image even serves a legitimate purpose. I laugh when people use og:title and og:description and plug in the same data as the contents of <meta name="description"> and <title> since, well... if you omit those opengraph properties; well, care guess what FB defaults back to?

One of the things I hate about that microformat and extra META BS like Aria roles, shema, or OpenGraph is 99% of the time it's just replicating stuff that HTML is already saying, or plugging in data that not one legitimate user agent will use for anything meaningful. It's code bloat to make up for the search engines and social media getting increasingly lazy about bothering to pay any attention to the markup. I swear they won't be happy until we have noun, adverb, adjective, adnoun, conjunction, and pronoun tags and/or attributes for every blasted word of CDATA.

You'd almost think the majority of people vomiting up HTML any old way could give a flying **** about semantics, tag meanings, or logical document structure and seem to be under the delusion that throwing more code at everything is the answer.

 

a responsive menu is better because it's easy to handle who always use mobile in busy life but i recommend you just go for UI mobile menu its work for me

 

I think they might be abiding now-a-days DS. I came across this page the other day:

https://developers.google.com/+/web/snippet/?hl=en

Apparently, schema's their preferred, but the open graph tags are on there too.

The meta stuff is getting out of control from sure, between the og: tags, twitter card tags, etc.