Drop

Makethumbnails.com – drop images into the browser, get a zip of thumbnails

About 2½ years ago I wrote a demo for Mozilla Hacks how to use Canvas to create thumbnails. Now I felt the itch to update this a bit and add more useful functionality. The result is:

http://makethumbnails.com

It is very easy to use: Drop images onto the square and the browser creates thumbnails for them and sends them to you as a zip.

homepage

Thumbnail settings page

You can set the size of the thumbnails, if you want them centered on a coloured background of your choice or cropped to their real size and you can set the quality. All of this has a live preview.

If you resize the browser to a very small size (or click the pin icon on the site and open a popup) you can use it as neat extra functionality for Finder:

resize to simple mode

All of your settings are stored locally, which means everything will be ready for you when you return.

As there is no server involved, you can also download the app and use it offline.

The source, of course, of course is available on GitHub.

To see it in action, you can also watch the a quick walkthrough of Makethumbnails on YouTube

Happy thumbing!

Chris

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Interview with Sebastian Dorn, winner of the Drag and Drop Dev Derby

Sebastian DornSebastian Dorn won the Drag and Drop Dev Derby with Pete’s Adventure, his wonderful web-based interactive story. Recently, I had the chance to learn more about Seba: his work, his ambitions, and his thoughts on the future of web development.

The interview

How did you become interested in web development?

I think it was around the time I was in middle school. My father read an
IT magazine and since I was at least a little bit interested, I flicked
through it as well. There was a series in it about building web sites
and I thought “I want to try that, building my own site”.

So I built my first frames-using, table-layouted, GIF-plastered web
sites–every atrocity you can imagine and some more–using HTML and
CSS, but without knowing that something like CSS classes existed. Some
time later I found a free host and put my “Hello, this is me” site
online. Some years later I became interested in blogging, so I started
learning PHP and MySQL to write my own CMS.

Can you tell us a little about how Pete’s Adventure works?

My goal was to show some other aspect of Drag&Drop in each level:
Reading meta data like the file size from a dropped file, displaying a
dropped image or dragging an HTML element from inside the page around.
There isn’t really anything special in the code. Each level has its own
JS file with functions to prepare the stage by adding HTML and event
listeners.

What was your biggest challenge in developing Pete’s Adventure?

Not really anything that had to do with coding. At first, I wanted to
use better drawings. But some horribly misshapen Petes later I gave up
on that and went ahead with the pixelated look you can see now.

Then there is the sound and music. I probably sat two hours at the piano
keyboard, trying to come up with melodies which could be easily looped.
This was the first time since the recorder lessons in middle school that
I tried to compose.

Ah, well, I got a little… agitated while trying to get the drop part of
Drag&Drop to work for the level where you drag the slimey note to Pete.
It only works in Firefox when you give the dragged element some transfer
data, for example an empty string.

What makes the web an exciting platform for you?

How easy it is to create and share. Even without a server backend you
can build exciting demos in HTML/CSS/JS and then just upload it
somewhere, toss a friend the link and they can see it. To view it, other
people only need an up-to-date browser–no plugins, no worrying about
OS compatibility.

What new web technologies are you most excited about?

Basically everything that helps making plugins obsolete.

I wonder if there will be more 3D in-browser rendering with WebGL in the
future. Animated, interactive films? Games? CAD software?

Firefox OS and building apps only with JavaScript sounds interesting,
too. I’m not really that much into mobile development at the moment, but
I’m interested in how that will develop. Will it become a really good
alternative to iOS/Android? Or will it end as obscure toy for enthusiasts?

If you could change one thing about the web, what would it be?

Making the Internet immune to large scale blocking and censoring. No
government should be able to cut off the communication channels of its
people.

On a less political note: I would be very pleased to see the same audio,
video and image formats supported in every browser. Finding out that
WebKit doesn’t support APNG was as a surprise for me.

Do you have any advice for other ambitious web developers?

Learning a new language or feature thereof works better, if you put some
motivation behind it. Maybe you can build an useful browser extension
with it, or some fascinating demo to show off. Make it fun!

For other great advice I’d like to quote Jake from Adventure Time:
“Sucking at something is the first step to becoming sorta good at
something.”

Further reading

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)