My latest project is Steamy Screenshots (view source). It’s an app I made to extract colors from the screenshots people share on Steam. There’s no real usefulness to it, it was just a fun thing to do. You can look up a particular Steam user and view their newest fifty screenshots, or look at the newest screenshots shared for a particular game.

I’m trying to learn ReactJS and it got tiresome for me to change my file type in Sublime Text from regular JavaScript to ReactJS > JavaScript (JSX) every time I opened a .js file. Fortunately, with a couple Sublime Text 3 plugins, I was able to get this happening for me automatically.

I made another thing! This time, I made my first game. Well, the first game I’ve ever finished (I’ll get back to you someday Mahjong). It’s a JavaScript web implementation of the game Blicblock that your Sims play in The Sims 4. I built it using AngularJS, my new loves Yeoman and Bower, and Bootstrap. You can try it out in your web browser and view or contribute to the source code on Github.

I always lag behind Jon when it comes to trying out build tools or frameworks that are supposed to make my programming life easier. He tells me about cool new things he’s using, and I say “yeah, that looks cool, but I just want to be productive, so I’ll do things they way I’ve been doing them.” Then eventually I get a chance and I try out the cool thing and Jon was right, it’s totally great. That happened for me recently with Yeoman and Bower.

Recently, I had need to change the value of a select menu in an iframe from the outer page containing the iframe. There was a change event listener that had been added in the iframe’s JavaScript:

There are possibly a million tutorials out there about jQuery and menus, but there weren’t a million and one… until now! ;) I recently had cause to make a sliding drop-down menu for a project at work and thought I would write up how I did it. First off, check out the demo. The commented source code is below.

I wanted to try Backbone.js, having never used a JavaScript MVC framework before, so I started a project a few days ago to create a web app version of the Grandfather’s Clock variant of solitaire. I figured it would be an easy game to implement, and since I pretty much have it all working, it turned out to be pretty easy after all. You can check out my code on Github, and here is what it looks like:

Recently for work, I’ve had cause to write functionality so that a certain chunk of a form can be inserted again, over and over, by the user. The form involves data about course equivalencies between schools, and the user might need to submit data for multiple courses a student has taken. Hence, the user needs to be able to add extra course sections on the fly, as they’re necessary.

It may be useful to your visitors to know which links will take them off of your site without having to hover over all of them. It might also be a nice touch to mark links pointing to PDF documents, for example, with a little Adobe PDF logo. With the help of Javascript and CSS, you can do this pretty simply.

I recently implemented a live search on the quotes page, so I figured I’d give a tutorial on how I did it. A “live” search is like a regular search feature, but if the user has Javascript enabled, the search will run as they type, instead of waiting for them to hit the ‘Submit’ button. There are a couple of advantages to this, one being that it’s a bit quicker than a traditional search because it starts working immediately; another advantage is that it might help you narrow down your search better (e.g. you initially want to search for ‘frogs’, but you get just ‘frog’ typed in and see results that interest you that wouldn’t have seen with a ‘frogs’ query). However, I think the main benefit from a live search is that it’s cool. :)

Lightbox is nice and all, but sometimes I find it clunky, particularly in Firefox when I have a lot of other tabs open. However, I don’t want to go the route of having an image load by itself in the browser, because it would be so much nicer to have it integrated into my layout. I could have a whole bunch of separate pages, one for each image, and do a full page load when a thumbnail is clicked, but that’s kind of a hassle. Well, with a simple PHP script and some AJAX calls, I can have my image load within the gallery page without a page reload.