Fragmented Notes

This is where I write about learning to code

Retrofuturism of the Web

A few days ago I was inveted to take part in a project, that is going to be a platform for online art. Although I am not a digital artist, at most I want to become one in the course of my studies, I was glad about the invitation and quickly took a look at the website of this project. The design was quite unique, featuring elements of a Windows 95 desktop between the presented art and fonts that remind the visitor of the computers of the 80ies or 90ies. At the first visit, I just simply liked the look, probably mostly out of nostalgia and the remembrance of seemingly simpler times, but at the second visit (which was on e newer version, but with similar elements), I started to think more about the choice of design.

Review: Adventures in Web Animations

Last weekend I played through the course “Adventures in Web Animations” on This was my first course and I mostly took it, because it was the free weekend, I had nothing else to do, being sick and at home, and because web animation was a topic, that I knew not very well.

The lessons have been rather simple, with easy multiple choice questions and very guided coding excercises, but the instructor managed to explain the different parts of animation in great detail. While one cannot expect to learn this topic to the bone in one very short course, I have the impression that I now have a good overview how to animate with css and where to look for helpful resources on the way.

What I really liked was that this course has an accompanying screencast called “Soup to Bits: Adventures in Web Animations”. Usually I am not that much of a fan of screencasts for learning, but this one hit the right spot: I shows the instructor of the course Alyssa Nicoll together with another developer Dan Denney working on an example website that is somewhat complete, but as they conclude, missing animations. So you can follow them for around an hour, how they put together the animations an this website, how they make mistakes and debug them, how they come to decide on the specifics of the animations and so on, until the website is ready. And if you really want to try your new skills, you can do the same, because the website they work on is available as a github repository.

These two parts, the course and the screencast, really work well together. The course sets the ground on which it is possible to go through the screencast without explaining everything and the screencast gives some meat the the bones of still dry and untested knowledge from the course.

Creative Coding With Processing ... Again

This week was the start of two courses (Creative Coding on Futurelearn and Creative Programming for Digital Media & Mobile Apps on about creative programming in Processing) and I blogged about them in my main blog. Since I have already done some of the assignments some time ago, I focused on some things that I knew about, but did not do so far.

Creating gifs

There are basically two simple ways to create gifs from Processing sketches (that’s what the single programs are called in the Processing world) and both are explained by Jerome Herr on his Tumblr:

  1. Save single frame images and combine them later with other tools or
  2. use a library that creates the gif while the program is running.

I tried both and both worked fine, at least in part. I was able to install gifsicle, but it would not run properly so I did what anyone would do who already has some experience with ImageMagick, I used the usual convert to do the trick.

I will need some more tries to determine, which method to use more because they seem to have different effects on the speed of execution of the sketches. This doesn’t really matter, when the animations are generated by code alone, because the framerate will be the same for the exection as for the gif, but it produces much different output when human interaction is part of the sketch.

So probably there will be more here about Processing in the near future. By the way, the mentioned Tumblr from Jerome also has a nice list of learning ressources for Processing.

Sharing With Diaspora

In the last weeks, I had some reasons to think about privacy issues and social networks. I stopped using Facebook and began using Diaspora* and GNU/Social more than before. So when I found a sharing service earlier today, to share webpages into the Diaspora * Federation, I used it as an excuse to get rid of the Twitter button and the Disqus comments and put in the Code to share to Diaspora * .

If you want to do the same, you will find the part of Octopress, that covers the sharing codes in “source/_includes/post/sharing.html”. Just put in the code from the sharing site and you are good to go:

Diaspora sharing link, without JavaScript
<a href=" title here&url=" target="_blank">
<img src="" style="border: 0px solid;" />

I only changed it a little, of course filling in the template code for the post-title and post-url:

Diaspora sharing link with Octopress Tags (diaspora.html) download
<a href="{{ page.title }}&url={{ site.url }}{{ page.url }}" target="_blank" style="font-size: 0.85;">Share on Diaspora<img src="" style="border: 0px solid;" /></a>