31 December, 2015 - Two New Tutorials, Happy New Year!
By Jason M. Knight (aka Deathshadow)

Laddy, we're in engineering; call me Scotty! A good engineer is always
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.

The second tutorial addresses a long standing pet peeve of mine -- code bloat. Off the shelf frameworks and pretty much every tutorial I've seen on the topic of "responsive" or "mobile" menus wastes several K of markup, several K of CSS, and often a dozen or more K of JavaScript on something I can do in a few lines without any scripting!. As such I present my approach to creating a mobile or responsive menu without JavaScript!.

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.


  • elementals.js
    A lightweight JavaScript library focusing on cross browser support, ECMAScript polyfills, and DOM manipulation.
  • eFlipper.js
    An image carousel script using elementals.js
  • eProgress.js
    A JavaScript controllable progress bar using elementals.js. Based on the nProgress project that relies on the much heavier jQuery library.


Browse code samples of people I've helped on various forums. These code snippets, images, and full rewrites of websites date back a decade or more, and are organized by the forum username of who I was helping. You'll find all sorts of oddball bits and pieces in here. You find any of it useful, go ahead, pick up the ball, and run with it.


Best Viewed With Eyeballs