Reboot: The JavaScript
In the redesign, I thought long and hard about how to approach a number of issues. My solution was to implement microwidgets. Yes, I'm even giving them a name. For example, I knew going dark would annoy some people so I did the contrast microwidget (which incidentally has changed slightly from launch to be a little more obvious). The microwidgets are a combination of JavaScript and CSS and were fairly easy to integrate by doing a few things.
Cleanliness
Some people actually check out the code. I was fairly sloppy before and didn't put much effort into making it look nice. This time around, I commented the code where appropriate and created a more useful naming convention. I also tried to ensure a cleaner separation between behaviour (the JavaScript) and presentation (the CSS). To do this, any element that I added to the page only received a class name. It was then up to the CSS to decide how it should look.
Any time an interaction is made with the microwidget, all I had to do was change the class name attached to the element and then set a cookie to remember things for next time.
Namespacing
In approaching the code, I decided to revamp what I had and rewrite into its own namespace. What's a namespace? Basically, a namespace is a container. In my case, it's an object called snook to which I've appended all my function calls. That way, if and when I decide to extend the functionality of the site, I won't have to worry about function name conflicts and it'll be easier for me to develop new things. It'll also be easier for people to take the code I've produced and integrate it into their projects.
As JavaScript increases in popularity, namespacing will be an ever growing concern and it certainly doesn't hurt to start now. Check out Dustin Diaz's post on the namespacing. I recommend that a community consensus begin to define a naming convention.
Prototype
Although I don't have any animation in the site (yet), having been using Prototype on a recent project, there are a couple functions that I just couldn't do without. The bare minimum for me included Object.extend, Function.prototype.bind and the trusty dollar function $().
I use Object.extend as an easy way of doing named attributes. I pass in an object to a function using literal notation. Then I use the extend to overwrite any of my default properties already set in the function.
myfunction({paramA:1,paramB:2});
function myfunction(options)
{
var opt = {paramA:0, paramB:0, paramC:0};
Object.extend(opt, options);
}paramA will now equal 1, paramB will be 2 and paramC will still be 0.
Bind is used to bind an object to a function call. That way, the object will be available from within the function. Handy for binding to events. (Note: Prototype also has a function called bindAsEventListener which retains the event object as well — if I recall correctly).
Finally, the dollar sign function is just a handy way of calling getElementById. I probably saved myself a few bytes considering how much I made use of it.
Having fun
The microwidgets were an easy way to add some interaction with the site beyond what you'd normally find in a blog. Heck, I still play with the contrast switcher!
Conversation
Looks great man, very nice touch with the light bulb. I prefer the lighter content area myself, but I really dig the dark scheme you went with.
The wide version's menu has some issues with Safari (or maybe just with narrow widths), getting stuck off to the left side; a similar problem occurs with the narrow version's contrast widget (which, by the way, makes it wide again).
Still, cool little bits of functionality. Reading how they work makes it all the more likely that I'll try and do similar things in the future.
The contrast switcher is awesome. I too love the lighter content area.
"microwidgets" ...I like the sound of that.
Hey Jonathan, I'm just not sure what type of scenarios you would use: Object.extend and Function.prototype.bind.
I understand your example but I for the life of me, can't figure out why you would use it instead of the more traditional techniques?
The site looks good, a little note though, nothing big.
When you click the right arrow to shrink the site width, the lightbulb is still stuck out to the left, have fun with that =P
when you collaps the side menu the, the left quarter of the coment box hangs under the article body.
by the way, love it, the coment box only apearing when you scroll down is orgasmic
Why did you choose to use objects as namespaces instead of something closer to OOP ? (same encapsulation features, plus more benefits!)
Ian: Object.extend copies all properties and methods of one object onto another. I usually use it to handle parameters but it could also be used to handle inheritence.
Function.prototype.bind is used specifically to bind an object to a function call so that the
thiskeyword refers to the bound object. When you get into handling events or using function calls for loops, it's extremely useful.Ismael: I didn't need a constructor or the need to create further
snookobjects. It's essentially just a holder for method calls. The alternative would be to do something like is detailed on Dustin's site but I don't have a need for private members. In the end, my code is simpler.To everybody else: yeah, gotta fix those widgets in column collapse mode. I had changed how I was positioning stuff and didn't update the CSS for both modes. My bad. :)
I love the way youve hidden the "Post a comment" great idea, also heh I can't pick the one I like best the White /lightgreen or the black/darkgreen :) - both are very cool!
I like the white/light green better..black/green is too hard on my eyes..
The lightbulb is very cute..
Microwidgets are cool...
I am adoring this little comment idea. This is just awesome.
Quite often, designers implement the contrast stylesheet to look hideous to an awful degree. You make both the default and the contrast look beautiful.
Note on the collapse widget: on 800x600, you actually can't even see it! :o That and it seems to jerkily scroll horizontally.
As far as design goes though, you nailed this one. Any possibility of posting a screenshot of your old design? I'd like to be able to refer back to that one, it was quite excellent.
I am thoroughly impressed and check your site frequently for new approaches / methodology / inspiration. I've been hooked since I first laid eyes on your work. Keep up the fantastic job! We can ALL learn something from you.
Jonathan,
I share your feelings with cleaning up the code. Often times I think we forget that people actually look at our code under the hood more often than we think. Thus we can talk all we want on our blogs about clean code and efficient way to get things done and global variables are bad, bla bla bla, but until we do it ourselves - it isn't much of a testament.
All that said, I think you've gave me the push I needed to do my own JavaScript reboot.
Also, thanks for the link love on the namespacing deal.
As for private methods, there is rarely a need for them at all if you're the one writing all the code for your own site. But lest we forget that people look at our code - and may very well indeed copy it and paste it onto their site. It may cause you to question some of the functions and think "does this function really need to be public?" - The code may be simpler in the end, but is it logical? Eitherway, you're doing some excellent work and props to you for already taking the initative to clean up your JavaScript. You're already leaps and bounds ahead of my reworkings.
Call me blind or something but only after reading some of the comments and this article did I realize what those dark, almost inviible characters were, let alone that they were clickable. At least it has made the content more readable.
I think you are moving away from useability and accessibility into cutesy code for the sake of "I can do it" rather than "should I do it" and "does it add value" despite its innovativeness.
One bug I noticed, at least here, is that you can have the light contrast content (why not change the rest as well - if someone wants/need the lighter for content they surely need it for the rest as well) or collapse the width but not both. If you collapse the width you lose the light contrast, if you try to put the light content back you lose the column collapse.
Also when you collapse the columns, the top bar with the menu and search box does not re-center with the rest of the page.
WD: Although probably worthy of a post on its own, it's clear that the whole light vs dark issue is certainly a matter of preference. Some like it, some don't.
In any case, one of the goals that I had defined for the redesign (in the last post) was to have fun with the technology. (Or as you call it, cutesy code) Also, if you refer to my about page you'll read that "It's also a testing ground for me to try out things." I've made no claims of creating the most usable or accessible site. However, I think all features that I've added are helpful — if not as evident. But that's more a design issue than a code issue.
I am aware of that preferences aren't being saved for the column collapser. This is due to a bug I introduced last night and haven't had time to fix (maybe tonight). As for the top bar and search box not realigning, what browser are you using? I haven't run into this issue.
Should the contrast tool change the contrast for the entire page? Yes and when I have time, that'll be done. It was added near the end of development to appease those who might find the black too dark. But as you've so keenly made case-in-point, you can't please everyone.
Just a quick update that the settings should now be retained properly for both the contrast and column switchers.
Thumbs up, the contrast/columns work perfectly.
Re: resize top bar. I'm using Firefox. if I refresh the page after collapsing the column or resize the browser screen it does realign but if I just collapse the column it kind of overhands on the left. You can see what I mean here ... http://www.caisteal.net/misc/snook1.jpg