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.
How To Make a Responsive Image Gallery
- Images should either be the same size, or be contained in divs of the same size, to naturally form a grid.
- Wrap gallery in a div and float all inner images/elements to the left.
- Clear the gallery with a clearfix or other method.
Large scale example beneath the cut. (The images, though small, will need to load!)
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.
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.
- 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
I’m so enjoying the way my artwork gets spread and remixed around the web.
Analog Pixel remixed the “Kawaii Emucorn” image I made:
It’s an emo emucorn. Get it?
by Analog Pixel (analogpixel.org)
His remixes are posted in his blog, which also has lots of other cool stuff. My remixes and comments are posted below the cut:
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.
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.
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!
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.
Links provided at the end to the original work for each thumbnail in the above mashup.
The fabulous artists, in no particular order:
I recently had the opportunity to help someone with the issue of using glow on a set in Raphael JS.
Unglowing Sets is Hard
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
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-
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!