Welcome to the first installment of the Weekend Code Hacker series!

For many months now I have been building a desire to improve my writing skills and also to write a series of articles about projects I work on to satisfy my personal interests in software development. I have also recently experienced a nostalgia for the hacking days of my youth after unearthing relics of the long ago while cleaning.

In addition to those discoveries I was exposed to some really neat projects like Aiiee, a new Apple II emulator by Tom Phelps, and the humorous continual Apple boot sequence over at textfiles.com. Those two just helped to further my meditations on a youth spent hacking code late into the evenings. Of weekends spent dialing and re-dialing the modem until a connection would be made, information would be exchanged, mirth would be made.

I think back fondly, but also with some trepidation about the early days of the culture wars over the moniker “hacker”. For me, there is a clear memory of this label being something much more grand than the expectations we came to accept after movies like WarGames and Sneakers. Those expectations, that people declared as “hackers” by the authorities were somehow capable of superhuman techno-magic that could empty all the banks in the world or start some sort of nuclear holocaust.

Which isn’t to suggest that there aren’t criminals out there who employ computers to deprive others of their safety and peace of mind. There certainly are. But for me, this is not the true essence of what my mind conjures when I recall wistfully on those heady nights of fevered typing.

The ideals that I aspire to reach back towards are what I perceive to be some of the core motivators that drove many of the early pioneers of the free and open source software movement to create and share their works. The drive towards exploration of this new mental landscape and the desire to share rewards won in the hard fought battle of human will and machine logic. The wisdom that greater depths of knowledge can be plumbed when collaborating with peers than isolated from all contact.

I acknowledge this may be a fanciful view of the world, i tend to be an optimist at heart.

So in the spirit of the computer software hacker, exploring the boundaries of cyberspace as if a nomad searching for an oasis on the horizon. And in the time honored traditions of building and sharing, I am going to start writing about some of my personal projects using the Weekend Code Hacker title. My hope is that the technical knowledge will be useful as a reference, and more importantly that people will be encouraged to build their own creations and investigate their own creativity in the digital space.

Although this initial edition is mostly me desribing my intentions and making myself feel old, I do want to leave a little code to peruse =)

Making inline img elements toggle their source on click with javascript

When I started putting this post together I was intent on hosting my images at Imgur. This worked at first, but when I started adding the thumbnail anchors to the full size images the links kept sending me to landing pages at Imgur. I didn’t really want this, I wanted to allow people to click through to full size images without any extra content.

This really frustrated me, so I decided to build a little JavaScript function into my page that would allow me to fix this usability error. So I wrote the following function block in a separate file:

Now, this isn’t a terribly complicated function and I’m not 100% sure that it would be appropriate in an “enterprise” scenario, but it will suit my usage just fine in this static page.

So what does it do? Well, quite simply it returns a function that will be used for an img element’s onclick handler. This handler function will change the state of that img element’s src parameter to toggle between two images. In this manner, I can still use Imgur to host my images but allow a quick toggle to occur in-line. Try it now, click on the images of the books or magazine earlier in this post.

The key to this function working is the variable on line 6 which records the initial alternate image source in the closure outside the returned function. If you are curious about closures and how they work in JavaScript, check out this article on Closures on the most excellent MDN Web Docs site.

Between that variable, and the src property on the img element in the HTML I am able to create 2 locations to store state and thus create the toggle effect on a click event. See lines 9 through 14.

Finally, to make all this work in my page I need a couple pieces of markup. First I need to include my source file, then I need at add id parameters to the images I wish to toggle, and finally I need to add the onclick handlers to the elements. You can see all that in the following snippet:

On line 1 you can see that my img element has been given the id of amiga. This identifier is used in the window.onload function that I declare in the page script to get an object representation of the img element, as you can see on line 5. Then on line 6 I set its onclick attribute to use the handler function created by my imgclicker function. I pass in the URL to the full size image that I wish to toggle.

You might be wondering why I have declared the JavaScript to modify my img element before the actual link to include the function’s source file and how this works. It is all down to the behavior of the window.onload function which will only be called once the page’s DOM has been fully loaded. For a more extended conversation about the DOM and events, this Introduction to the DOM article is a great starting point.

And with that, I think I’m gonna wrap this hack up, I hope you enjoyed the read. In the next installment I will begin talking about a REST-based URL bookmark microservice that I am writing in Python using the Django framework.

Until then, happy hacking =)

If you like my JavaScript logo, it is available in SVG format here and is licensed