31 December, 2015 -
Two New Tutorials, Happy New Year!
By Jason M. Knight (aka Deathshadow)
a wee bit conservative...
at least on paper!
Figured while waiting around for the new year, I'd belt out two simple tutorials as a little treat for everyone else. Since my New Years resolution was to get this site up and running, and I got it working BEFORE the New Year, it's time to focus on content. Once again my habit of doing a "Mr. Scott" on my time estimates paid off quite well, in the
Ach laddy, ya didnae tell him how long it would REALLY take did ye? kind of way.
The first of these tutorials is fairly simple, it just covers a simple way of creating a ratings bar. Using stars or other symbols for ratings on websites is a very common thing, but most methods involved multiple extra files; quite often one for every possible combination! There's a very simple way of handling it with little if any effort in the markup, and some very simple CSS reducing the "stars" or other symbols to one simple image... and since it's in our CSS, we can even leverage the "scaleable images" methodology from that previous tutorial.
It's clean, it's fast, it works flawlessly -- and since it's all CSS hooks there are all sorts of styling and animations you can likely add to it. I tried to keep the example as simple as possible to show how it hooks in and the general mechanics of the solution.
Both tutorials do violate a few of my good practice rules, such as "don't put form elements outside of forms" or "don't declare style in the markup" -- but the solution is so elegant and simple I can live with it. There are exceptions to every rule, and one cannot allow it to blind you to elegant answers to common problems.
So enjoy New Years Eve... I plan to kick back and take it easy for a couple days.