Index | Archives | Atom Feed | RSS Feed

Pelican

This past weekend I finally shed my Wordpress blogs and moved into the world of static site publishing. This site, and my personal blog are now built using Pelican, a Python based static site generator.

What does that mean, exactly? Well, for one thing, it means I no longer have to worry about someone exploiting a vulnerability in my server-side code to run malicious code or take over my website. My blogs may not be very popular or have much appeal to them from that perspective, but it’s best to be safe anyway. Additionally, since the server no longer has the burden of compiling my web pages whenever they are requested, the site content serves much faster and with fewer cpu cycles. Since I use cloud hosting and pay based upon my traffic and CPU usage, this actually saves me money! (Not a lot, but some.)

The experience of migrating content from Wordpress to Pelican wasn’t very difficult. Setting up Disqus for comments was a breeze as well, though it did take a bit of vim work to convert the URLs to their new locations. All in all, it was about 4 hours work for both blogs, much of which was spent cleaning up small formatting errors in the generated files.

I’m really looking forward to building this blog from the command line going forward. Now that I’ve written this post (in markdown mind you) I can build, test, and publish it by typing:

make html
make serve
make rsync_upload

Open Source Science

Mark this one down in the list of cool ideas I’ll never follow through with.

Github meets Academic Publishing.”

Here’s the full idea: We create an open system for people to share their scientific studies by providing them with all the tools, visualizations, and data warehousing necessary to truly host the science. Then, the community can rate the project, duplicate the results, grow from it, or reference it in another work. The interconnectedness that’s already inherent in academic publishing becomes a network in itself.

There will obviously be studies that don’t measure up to the rigorous evaluation of peers and those that are above the heads of many folks. To solve this, we first invite a group of verified scientists. Who are these folks? They’re people that have been published in academic peer reviewed journals in the past. This status gives their opinions on their peers extra weight. What they say has vastly more influence than the average Joe. It’s not hopeless for the rest of the world, though. When a verified scientist rates another project highly, the authors of that work gain reputation. They in turn can raise the reputation of others they approve of. As you move farther from the verified folks, the effect is lessened.

As the system grows, so too can the list of verified scientists and their sphere’s of influence. Everyone can benefit from what we all recognize as good science, and all the results are free and open to the public.

Iteration ideas: teams, university/college connections, certificate or degrees to add to reputation, invite system for colleagues, bounties on challenging tasks/experiments, bounties on verification through independent duplication of results. Science-on-demand.


git changelist

Today I needed to get a list of all the files that had changed in a git repository over the last two weeks. I played around with some great git commands, awk and sort to make the following git alias (toss it in the [Alias] block of your .gitconfig):

changelist = "!git whatchanged --since='\$1' --oneline | awk '/\^:/
{print \$6}' | sort -u; \#"

To use:

git changelist "2 weeks ago"

You can use a lot of different unix date formats in there.

Enjoy!


Chess Ratings

Chess Rating

See it in action

The development team where I work will soon be celebrating the launch of our new company website a good old fashioned chess tournament. Now, like any good development team, we have our fair share of geeks; geeks with interests in a wide variety of geekery. One such geek is a big fan of fantasy sports, so we tasked him with organizing said tournament. As a result, we will be doing a round-robin tournament to establish a relative ELO rating for each player, then use these ratings to seed a double elimination bracket tournament (I’m about 60% sure I got the names right for all that stuff). Anyway, the key component for the round robin is having a method to establish our ratings.

The ELO rating system is the most widely used in the chess world, and with good reason. When you have a sport played by some of the greatest minds in the world, it only makes sense to have an overly complex and highly accurate way of showing relative strength. In fact, it’s so impressive that just about nobody outside of official chess organizations actually does it properly. The rest of the world kind estimates an ELO, or approximates it. I am happy to be one of those folks.

I have neither the time nor the care to implement a 100% accurate chess rating system. All I need for the tournament is something that works decently well. So, I built it!

My chess ratings page allows you to enter the starting rating for each player, pick the outcome of the game, and it will show you the new ratings. How do I do this? Well, I use a formula I lifted from RedHotPawn.com! I didn’t steal their code or anything. I just followed the instructions on their FAQ (mostly).

Why don’t you go try it out! And if you’re interested in my algorithms and junk, here’s the main code.


Boilerplates

I’ve been doing a lot of work this past week developing my own custom boilerplate for developing HTML5/CSS/JS projects. There’s a ton out there already (e.g., HTML5 Boilerplate) but I wanted to brew up my own environment just the way I like it. More than that, I wanted it to use some of the cool cutting-edge development tools out there, like SASS, Compass, l10n.js, LiveReload, and Sprockets. The result has been extremely gratifying and has already proven itself effective.

Sass-Boilerplate - a name I gave it before it blew up with a bunch of other cool tools, can be found over on my github account. Pull requests and issues welcome!

There is an extensive README file with installation instructions and a few helpful usage guides. It has a few dependencies: ruby, rubygems, bundler, command-line-tools (OSX only), LiveReload browser plugin (if you want to use LiveReload). All of that is written up and linked over on github. Try it out and let me know what you think!

Oh, and as an example, tomasino.org was recently rebuilt using the boilerplate. Feel free to dive in to the source over on github for that site as well!


Reactive Design

Responsive Web Design is a huge movement in the web development world right now. Having one site that will automatically adjust to your device based on its display size is quickly becoming the norm. When I find myself on a website that hasn’t thought about their mobile experience, my face grows an automatic frowny-face. Thankfully, a lot of great html frameworks are giving us easy options to implement this type of development quickly and easily without adding unnecessary overhead into our clients’ budgets. The world is looking pretty swell for responsive.

Color Wheel

But what about other aspects of automatic design change? Responsive design gives great thought to changes in layout based on size, but what about changes to design based on content? What if your website could react to the content it was loading and adjust its entire color palette to properly keep the color relationships as designed?

This lab project is a proof-of-concept of just that idea. This is a reactive design based around, in this case, an image. See this link for a working example. Click on the images to adjust the background color and text color automatically. The background color is generated by simply pulling out the average color of the image. The text color, in this case, is an automatically generated complimentary color with a complimentary luminosity.

If you were to look at a color wheel, the complimentary color would be the one directly across the circle from the color you start with. This is one of many forms of color relationships that generally works well in designs. There are many great tools online where you can discover all sorts of color relationships.

Luminosity is a way of talking about a colors brightness. If you think about an old black and white film, you know everything is actually in color, but you can’t see it. You can, however, see different shades of brightness. These shades (and tints) are part of a color all the time, but you don’t think about them unless you are seeing the color’s saturation removed. On the right is an example of two colors with their respective luminosities revealed below. For design purposes, changing luminosity is very important. In my sample page, I am offsetting the luminosity of the text from the background to make sure there’s always a good contrast.

That’s enough about color theory. Lets talk about code!

Here’s the class I am using to do the majority of the work in my sample page.  The color class handles converting between different color modes (RGB, HSL, HSV, HCY) automatically so we don’t need to handle all that math ourselves. You can probably skip past most of this unless you’re into color math. It’s pretty neat stuff, but looks a lot harder than it is.

Color.class.js

Now that I have the helper methods in place, lets look at the HTML.

index.html

And finally the JavaScript that will actually do the test logic.

scripts.js

The first function, getAverageRGB, uses html5’s canvas object to pull out color information from the image. I’m really not confident in doing this in a production environment. There are two main problems with it. First, although I love the canvas object, it really isn’t everywhere just yet. You’ll end up writing backups for this to work in older browsers, and I’ve never been a fan of writing code twice. ~~Second, there is some really strange behavior with browser cache. You see, the canvas object won’t load images cross-domain, which means if you try to use this with an external image from, say, Flickr, it will throw errors. In my initial test, I had an image in the same folder as my HTML thinking that would be just fine—it is on the same domain, after-all. When I tested the page, it worked the first time, but after reloading it threw a security error. I believe, though I haven’t fully tested this, that when the page was trying to load the image from cache, it was acting as if it were a different domain.~~

Edit: It turns out my mysterious cache bug wasn’t cache at all. I was trying to process the images too quickly, before they had fully loaded. I wrapped my code in a $(window).load function and everything is fine again.

In any case, the canvas method I’m using is just one of many. There are plenty of server-side methods of getting color information from an image.

At the bottom, I am setting up click handlers on each image. When the images are clicked, the clicked image gets passed to the updateColors function which does all the updating for the colors on the page. Inside this function we get the base color of the image, then apply a variety of transformations to it to derive the color palette below.

Obviously there’s a lot more that we could do here. If this were a full site, one could reasonably build the entire css color palette in a relational way to a single base color.  For example, you could create a compound color relationship with shades and tints for highlight areas. All of these things would be coded as mathematical relationships. Then, when a new base color is set (via a new background image, perhaps), the entire site will update, but maintain its excellent color relationships.

I think there’s a lot of room for this experiment to grow into something really cool. Can you think of any other ideas of ways this could be used?

As always, the source can be found over on github.


High Performance JavaScript Class Template

This is a post more for my own future reference than the rest of the world:

I posted earlier with my standard JavaScript class template. While I favor that one for reasons of encapsulation, its performance is really not very optimized. Here is an alternate class template I use in cases where performance (or the quantity of objects) is more important.

Most of this layout was lifted from iScroll. I’ve kept a lot of iScroll’s configuration settings as well. You’ll see those up near the top.

You can grab the latest version of this template from GitHub.


AS3 Asynchronous ExternalInterface

As I may have mentioned before, AS3 performs its ExternalInterface operations synchronously. For the most part, this isn’t a big issue, but what happens when the javascript you need to execute grows extensive, or what if it is a slow operation? In these cases, it’s helpful to be able to make an ExternalInterface call that is asynchronous so your actionscript code can continue.

The following example does exactly that. It provides a layer between your JS and your Flash for converting ExternalInterface.call methods to an asynchronous method.

The first part of this method is the AS3 class, AsyncExternalInterface:

AsyncExternalInterface

This class first tests whether ExternalInterface is available at all, and then whether the necessary JavaScript class is on the page. If the JavaScript is not loaded, it will degrade and use ExternalInterface normally. If everything is in place, then your calls will be passed down to the CallStack JavaScript class.
Here’s CallStack.js:

CallStack

This class acts like a Singleton where you get the instance via the CallStack method made available in window. This means that when you include the JS in the page, you don’t have to do any instantiating yourself, or pass any variable names back to Flash. It’ll figure all that out itself. Of course, if you’re using this with the AS3 class, you don’t need to know about any of that because it’s all done behind the scenes.

What’s happening here is that every function call you make to ExternalInterface is being stored in a stack. This quick storing of the calls means your AS3 can continue on its merry way while JavaScript delays, then makes calls to that stack later. The speed at which the class works through the CallStack is set in the variable INTERVAL_TIME. For our test I’ve set that to 1 second. Before you use this in deployment, you’ll probably want to speed that up dramatically.

The class also has some cleanup methods so that while the stack is empty, it doesn’t waste any time polling an interval.

Finally, it’s time to put the files together into an HTML wrapper.

index.html

For our test, Flash is calling “testFunction” four times. The first three have sequential parameters, and the last has no parameters. If you have a FlashLog.txt file set up, you can also note the appearance of the traces vs the alerts. In the AsyncExample.as file, the traces come after the ExternalInterface calls. Were we using a normal ExternalInterface, you wouldn’t see any of those traces until after the alerts completed. Because of the AsyncExternalInterface solution, though, the traces will appear instantly, before the first alert has time to fire.
The full example code can be found over on github. Enjoy!


HTML5 - Ready or not?

A lot of folks have been raving about HTML5 lately and I’ve been a little behind on writing about it, especially being that I’m a Flash developer and it is being touted as a “Flash killer”. I’ll keep this short and not ranty, but there’s a few things I want to discuss.

  1. HTML5’s feature set, even when you consider new abilities that are still experimental, is not even remotely close to what modern Actionscript programming has to offer. The days when Flash was just good for banner ads and website intros has long since passed. If you’re not already familiar, take a look here, or here to see what I’m talking about. Talking about it as a Flash killer is really quite silly. If anything, HTML5 will encroach on Flash at simple interactive experiences, basic video, and “Web 2.0” ui. Flash, meanwhile, will be moving deeper into developing full applications and insane experiences. This is all good. Everyone should be happy. YAY!
  2. HTML5 has a lot of claims about what it can do, but the dirty little secret is that like previous versions of HTML, the major browsers have decided to implement the standard differently. Things that should be consistent are not. The best example of this is the HTM5 video object, which is supported badly, with lots of bugs (that vary from browser to browser), and supporting different video types in each browser. These issues are extensive still because HTML5 is still evolving. It’s not a fast process at all, and will be years before we can safely use the features that are currently defined, let alone the new concepts on the horizon.

Here are two very important links for HTML5. These are instrumental references for developers, and really good info for the rest of the world:

html5please.us - This shows the major new features in HTML5 and CSS3, along with a description of whether they are currently safe to implement alone, with some extra JS code, with caveats or fallbacks, or not at all.

caniuse.com - This site goes into more depth. Feature by feature it shows which browsers and versions are supported fully or partially.


Mac Background Hacks

OSX has an option in the Desktop Background section that allows you to select an entire folder to serve as your background image. You can configure the images to change whenever you’d like: every five minutes, every hour, even every five seconds. I had a silly idea, and I’m happy to say it worked.

I created a folder with about 700 copies of the same background image and set it to change every five seconds. If I test it like that, the background never seems to change at all. Now for the kicker… I toss a single image of a crazy monkey in the mix, tell my background change to use “random order” and voila! Occasionally throughout the day, my background becomes a crazy monkey for 5 seconds!

Ok, so that was probably a waste of time.

Crazy Monkey

© James Tomasino. Built using Pelican. Theme by Giulio Fidente on github. Member of the Internet Defense League.