Responsive Image Gallery

A quick demo of how easy it is to create a “fluid layout” with responsive image gallery, inspired by Ethan Marcotte’s article “Responsive Design” in A List Apart. Resize the window! The little aliens will rearrange themselves to fit any size space.

green-pixel-alienturquise alienlight blue alienblue alienindigo alienpurple alienmagenta alienfuschia alienred-alienorange-alienyellow-alienlight-green-alien

How To Make a Responsive Image Gallery

  1. Images should either be the same size, or be contained in divs of the same size, to naturally form a grid.
  2. Wrap gallery in a div and float all inner images/elements to the left.
  3. Clear the gallery with a clearfix or other method.

Large scale example beneath the cut. (The images, though small, will need to load!)
Continue reading →

Arcadia Fairytales

After working on it as a side project for some time, I am going to consider Arcadia Fairytales (.com) launched and move on to other projects.
Please visit the site, enjoy some stories, and report any bugs to me!

Creating this site was a fun way to learn Django, and I hope it will be a useful resource for learning and enjoying folklore and fairytales. At the moment I have uploaded public domain stories from 6 countries, and hope to eventually add many more.

RaphaelJS Starter Review

Using skills demonstrated in this starter guide, I made a little ‘Angry Birds’ fan-art:

Full Disclosure: I volunteered as a technical editor for this mini-ebook and received a free copy of the finished text.
Instant RaphaelJS Starter Cover

This guide is:

  • The only book currently published that will teach you Raphael JS
  • Concise and accurate
  • Up to date- published January 2013
  • Very fast read- 47 pages to get you up and running with Raphael JS.
  • Visual and Hands-on- includes code snippets and screenshots on nearly every page

Continue reading →

User Interface Design Tip

RULE 1: One Button
has One Function.

In the field of user interface design, there is an entire category of user error that arises from the inclusion of “modes”. In The Design of Everyday Things, Donald Norman explains that “Mode errors are inevitable any time equipment is designed to have more possible actions than it has controls or displays, so the controls must do double duty.” (110)

In order to avoid having controls “do double duty”, there is one simple rule to follow:
One button has one function.
That’s all there is to it.

For this principle of design we can thank Larry Tesler, who made it his personal crusade to “eliminate modes from software design” during his work on the early desktop user interface at Xerox PARC. The cause became so central to his life that his license plate read “NO MODES”, and he reportedly wore the slogan “Don’t Mode Me In” on a t-shirt. (For more about Larry Tesler, see the end of this talk by Bret Victor: http://vimeo.com/36579366#t=38m0s )

Despite my personal affection for Emacs, (a classic text and code editing program which does use modes), the avoidance of “modes” is one of many design principles I strive to follow in my own applications.

Cute Sloth Shirts!

I was delighted to find out that my Cute Sloth Love image was remixed into a t-shirt design in the quirky Slothy Tee’s Inc.
Image on a shirt of a small cartoon sloth peeking over a stack of pancakes.
Shirt Design by Josh Swenson, owner of Slothy Tee’s Inc.
The original image I made was ok, but I actually like the design on this shirt even better! That little slothy guy is climbing up a stack of pancakes; adorable!
That’s what I love about using Creative Commons: A new artwork came into being that would not have existed otherwise, and the world is a more culturally rich (and slothy) place!
Continue reading →

Favorite Non-Digital Artists

And now for something completely different:

A friend of mine was recently commenting that so much of the art seen online today is digital: Digital painting, digital photography, vector art and the many conglomerations created in Photoshop, InDesign, or any of the other digital art programs are easy to find on deviantart, dribbble, and flickr. For variety I’m highlighting some of the beautiful galleries of non-digital art that I have come across.
A grid with thumbnails of 9 artworks ranging in style and subject, with the caption "Art is Cool!"
Links provided at the end to the original work for each thumbnail in the above mashup.
The fabulous artists, in no particular order:
Continue reading →

Unglow Sets in Raphael JS

I recently had the opportunity to help someone with the issue of using glow on a set in Raphael JS.

Unglowing Sets is Hard

Adding a ‘glow’ effect in Raphael JS is easy, but removing the glow is a different matter. As I have written about in a previous post (Removing Glow in Raphael JS), there is a known bug in the Raphael JS JavaScript Library’s Glow Function that causes the .remove() function to delete the parent element as well or instead of the ‘glow’ that was targeted.
My solution demonstrates removing glow for a Raphael object that is wrapped in a link, but it does not work for elements in a set:

As you can see, the parent element disappears when the mouse leaves the dots, but the yellow “glow” remains.
However, there is hope!

How to Unglow Sets in Raphael JS

For better or worse, truly removing the “glow” from a set at this time is not possible. However, a plain old JavaScript array can act just like a Raphael “set” and does allow for adding and removing “glow” from the created Raphael objects.

Above you can see the working demo- two arrays that act as “sets”, each holding two dots. They can be assigned attributes as a group, and the glow effect can be applied or removed from the “set” by using the vanilla JavaScript forEach method. (Read about forEach in Mozilla’s Documentation.)
The example JavaScript is included below the cut:
Continue reading →

Reform the Electronic Communications Privacy Act (ECPA)

Amendment IV: 'The right of the people to be secure in their persons, houses, papers, and effects (including computer, email, cell phone, text messages, and GPS location), against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probablye cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.'
Created using image of US constitution and inspired by wallpaper by Jeff DeMaria‘s TSA wallpaper

Did you know that email is less private than a postcard? ISPs and the government can and do store records of citizen email, and after 6 months any email is considered public, and can be accessed without a warrant.

The main law protecting email privacy is the Electronic Communications Privacy Act, which was written back in 1986. A proposed bill (H.R. 983) would improve protections in the ECPA by requiring a warrant to access an individual’s email, and protecting geolocation data as well.

Regular mail and phone conversations are protected, so why can’t the same be said of email? If you’re worked up about this, please sign the EFF petition asking for support for this new bill. If you’re not worked up yet, you may not have heard about the massive collection of citizen email by the US government-

Continue reading →

Free Social Media Icons

I couldn’t resist sharing these icons, even though the project involving them is not complete. The website in question will include some caligraphic typography and ornate Initials based on the look of illuminated manuscripts. The typical social media icon set just wouldn’t do, and I enjoyed putting this collection together.

Feel free to use these for your own projects: You can download the full SVG from my deviantart gallery. Please leave comments with feedback if you see anything I can improve!

Continue reading →