Tag Archives: animated gif

chat.meatspac.es – from fun experiment to global community

I gave this lightning talk at today’s Ladies Who Code meeting in London. I tell the story of chat.meatspac.es, the community that has sprouted around it, and the interesting effect it has had in our lives.

Here are the slides if you want to click on things too! Or the source code for the slides! (someone was very amused because I wasn’t using Powerpoint but just HTML based slides).

What have I been working on? (2014/01)

January is over, what have I done with it?

Well, to start with I’ve been working with the fantastic people from Firefox DevTools. We’re preparing a new feature for the App Manager and I’m really thrilled to be a part of this. I’m not going to disclose what it is yet until I have something to show (it’s my way to make you all download a Nightly build, tee hee), but I believe it’s going to be GREAT.

Then I’ve also been lending my brain to other projects. First, localForage, our library for storing data using the same interface from localStorage, but asynchronously and with better performance (by using IndexedDB or WebSQL if available). Or just falling back to localStorage otherwise (sad face, sad face).

The other project I’m involved with is chatspaces, “a snazzy chat app”. I’ve done some (yet unfinished) work with implementing push notifications using Simple Push, and I’m also working on outputting better GIFs (i.e. smaller but with same perceived quality). If you’re up for a slightly bumpy ride, you can try out chatspaces today.

“Generating better GIFs” means that I’m spending quite a bit of time in Animated_GIF, a library for creating animated GIFs in the browser. I implemented a couple of features like dithering and custom palettes past week and I’m pretty happy with the results you can get. I still have some more work to do before it’s a totally awesome library from README to code to examples, but it’s already used in somewhat popular places like chat.meatspac.es which you might have heard about ;-)

And I’ve also written an article for Mozilla Hacks. If you liked my previous article on unprefixed Web Audio code, I think you might like this one too. It should be published some time soon (fingers crossed).

There are more things that I’ve been doing this month like attending LNUG’s meetup, helping people with their Firefox OS apps, improving documentation for X-Tag, and finding+filing a bunch of bugs… all of which make me terribly happy as I feel like I’m making an impact. Yay! :-)

Meatspaces, decentralisation and miniAPIs

2013 Realtime Conf. – Jen Fong-Adwent from &yet on Vimeo.

My colleague Jen gave this quick talk at Realtime Conf on Saturday in her new hipstown, Portland. She explains her approach to programming, and how she’s building small pieces of software that interoperate together at API-level to create larger projects that interoperate together at message-level. This translates in federated blogs, chats and even some crazy WebRTC/GIF chat that I helped a little bit with and everybody loves. And all this because Yahoo! bought Tumblr!

Jen’s modular/federated philosophy has been a great source inspiration for me lately, and I was thrilled when I listened to Mitchell Baker defend a similar approach in her Summit keynote.

animated_gif.js

Animated GIF

Past week I wanted to make an animated GIF – but didn’t want to use GIMP or ffmpeg for that. I wondered: can an animated GIF be made in the browser? Of course it can! There was a library (JSGIF) which was a port of the original ActionScript library, AS3GIF.

I built a bit of wrapping code around the library, and did some tests to see if the port worked, first by creating a canvas and painting random squares on it, and then using them as input frames and building the GIF with that. Secondly, I tried using images. It worked acceptably enough (the color quantizer could be better, but we’re not after photo-realistic animations, after all).

So I added the drag and drop + file api stuff, but there was still something missing… the look wasn’t 90s enough! It was all begging for a bit of outdated aesthetics, but done with CSS3 and HTML5. Hence, there are multicolour logos via CSS animations, eye-cancer phosphorescent pink that turns into X-Files green glow (via CSS animations too), an HTML5 <footer> element used just because, and even a modern, 21st century blink-kind effect thanks to more CSS animations. You can’t but love it. And those huge frames! They are done with an ingenious abuse of CSS borders, but that could be done with CSS five years ago already. Nothing new here, but all very funny in any case.

Note that even if I finished this yesterday –April’s Fools– it wasn’t originally intended to be an April’s Fools joke. Hopefully you can take it seriously, right?

Right!

PS I actually looked into making animated WebP’s but the library I found wasn’t fast enough so all the fun factor was lost :-(

Maybe in a couple of years, when WebP is retro already…