About a month ago Damir started discovering the beautiful world of Android application development. As a learning experiment he developed an application that uses the accelerometer to count shakes, calculate the distance and speed of the users activity with the phone.

What is Tresalica?

Because we love silly apps (try out 1kdaysontwitter.com or Here Be Twitterers), we decided to pack his experiment in a smoothly designed, atomic shaker for Android, called Tresalica.

The application is quite simple, with a hopefully intuitive and simple user interface. All the user has to do is tap the Shake it! button, select the theme to shake and start shaking. Advanced users might use their own content by adding custom shakable motives.

To add a little twist to the shaking story, we decided to enable the application with goals that will change over time. Each time you use Tresalica you can submit your score, which gets added to a global shaking score and contributes to reach the goal. Our first goal is quite ambitious, but fun nevertheless. We want you to help us shake it to the moon.

Why do you even bother with Silly Apps?

We believe in learning and discovering by doing. That is why, from time to time, we endeavor on unexplored paths and try to create something silly, just to learn a trick or two. While at it we tried to make the most of it as part of the learning process of packaging software products, with all the small things required on the side – a website, twitter account and so on.

Get it now!

You can get the app straight from here by scanning the QR code below:

Depending on your feedback we will keep working on Tresalica, by adding new fun features, competitive goals and scores.

So what would you like to see in the next release?

p.s.: we will be sharing some more technical insights in the near future

We just love Futurama. Since the new season episodes are airing on Thursday, we decided that we are going to dedicate our Friday lunch breaks to collective watching of new Futurama episodes and use them as an intro to end of the week meetings, where we will review the work done during the week.

Do you like Futurama as well? Launch your own Futurama Fridays ;)

Visual representation of data is becoming extremely popular as we deal with more and more information. Given that web browser is the most dominant application on users’ computers, the set of people who use web development tools for programming graphics, animation and interactions is growing quickly.

Plug-ins

The old school approach of visualizing data on web is by using browser plug-ins, which add specific capabilities to a larger software application, in our case browser. Let’s take a quick look at some of them.

Java applets were introduced in the first version of the Java language back in mid-1990s. They are slow, because the JVM will need to restart each time the browser starts. When Microsoft shipped its own modified JVM with Internet Explorer, applets that relied on these changes worked only within Microsoft’s Java system, causing compatibility related headaches. And oh – 99% of them look ridiculously ugly.

Much more common pick today is Adobe Flash, which allows developers to create fascinating visualizations. But on the other hand, it is proprietary software, uses a lot of system resources and is responsible for a huge stake of browser crashes. Silverlight is Microsoft’s response to Flash, with similar advantages and disadvantages, but with much smaller usage share.

Native support

All these plug-ins are binary components with closed source. That means they cannot be hacked and used in a new innovative fashion, which is one of the principles of ensuring that the Internet is developed in a way that benefits everyone. So let’s take a look at what standardized technologies can offer us when visualizing data on web.

There are two standards: SVG specifications for describing two-dimensional vector graphics and the canvas element for rendering of 2D shapes and bitmap images. All major modern web browsers support and render SVG, except Internet Explorer. The good news is however, Internet Explorer 9 will support SVG. The canvas element is part of HTML5 and is only supported by the latest versions of Firefox, Chrome, Safari, and Opera. It is not clear yet if Internet Explorer 9 will support it.

In SVG, each shape is remembered as objects in DOM, so if attributes of the object are changed, the SVG can automatically re-render the scene. But in canvas, if position was to be changed, the entire scene would need to be redrawn. SVG also enables events to be associated with objects. In canvas we must manually match the coordinates of the mouse click with the coordinates of the drawn rectangle to determine whether it was clicked.

SVG

First let’s take a look at three JavaScript libraries that simplify the use of SVG graphics: jQuery SVG, SVG Web and Raphaël.

As the name says, jQuery SVG is a jQuery plug-in that lets you manipulate SVG from JavaScript. Since SVG is XML-based, it can easily use jQuery syntax to work with SVG. It also offers graphing extension to make it easier to create SVG graphs. Due to lack of SVG implementation, jQuery SVG doesn’t work with Internet Explorer, which makes this library pretty useless. Oh, and if you’re looking for some pretty examples, don’t even go to their home page. They are fugly.

SVG Web is being developed by Google. It’s a JavaScript library which provides SVG support on many browsers, including Internet Explorer, so it should target ~95% of the existing installed web base (at least that’s what the home page says). Flash is used for the actual rendering, so it’s very easy to use and incorporate into an existing web site.

The last and the most promising of the three libraries is Raphaël. It uses SVG and VML as a base for creating graphics. VML is a standards-based XML language used to produce vector graphics, but development of the format ceased in 1998. However Microsoft continues to document VML. It’s supported in all Internet Explorer versions since 5.0, which means Raphaël can target huge user base. The development momentum of the library seems to be going strong and another big plus is API documentation with beautiful examples and demos. There’s also charting plug-in available, called gRaphaël, which looks pretty slick, but lacks API documentation.

Canvas

After covering SVG, let’s take a look at canvas libraries. First of the two is Flot, a plotting library for jQuery, which focuses on “simple usage, attractive looks and interactive features”. It’s supported in all browsers that support canvas element and the excanvas JavaScript emulation helper is used for Internet Explorer 6.0+. It’s not as sweet as gRaphaël, but it’s easy to use, supports interaction and… oh, why don’t you take a look at some examples.

Processing.js is a Processing programing language implementation, written in JavaScript by John Resig. Processing is written in Java and used by people who want to program images, animation, and interactions. Processing.js draws shapes and manipulates images on the HTML5 Canvas element, but sadly it doesn’t work with excanvas emulator mentioned above. Since it won’t work in Internet Explorer at all, its use is pretty much limited to show off cutting edge technologies. Of course, it will also come in handy in environments like WebOS.

Some friends from a digital agency in Ljubljana kindly asked if we could prepare a 40 minutes session about mobile and mobile marketing. This is what we came up with:

We are always willing to help introduce other to fresh technology and applications since we believe it can make a difference in producing better campaigns that appeal to users.

btw: the deck was selected among Slideshare.net’s featured presentations.

This one is a gem. We’re using Red5 as flash server for several of our projects and one annoying problem that we encountered were thrown exceptions on Red5 restart. Specifically, Address already in use exception which signals that a socket is still being used. The culprit is socket bound to 1935 port which is used for rtmp traffic between flash clients and Red5. That socket remained in TIME_WAIT state even after Red5 was shutdown.

Now, it is important to note that tcp connections should be closed properly in order to avoid this sort of problems, but this is not always possible (unexpected server shutdown, bug which makes server unresponsive, etc.). Brief discussion about proper tcp handling is here. I know from experience that other servers (for example Tomcat) don’t have this problem with socket binding (at least not in the last ~5 years) and I was curious why Red5 developers haven’t solved this. The thing to do to avoid this is to set SO_REUSEADDR flag on the socket. This means that other processes can bind to this socket if it is in TIME_WAIT state. Fortunately, Red5 is open source, so I browsed a bit and found this in RTMPMinaTransport class :

acceptor = new NioSocketAcceptor(ioThreads);
acceptor.setHandler(ioHandler);
acceptor.setBacklog(100);

log.info("TCP No Delay: {}", tcpNoDelay);
log.info("Receive Buffer Size: {}", receiveBufferSize);
log.info("Send Buffer Size: {}", sendBufferSize);

SocketSessionConfig sessionConf = (SocketSessionConfig) acceptor.getSessionConfig();
sessionConf.setReuseAddress(true);
sessionConf.setTcpNoDelay(tcpNoDelay);
sessionConf.setReceiveBufferSize(receiveBufferSize);
sessionConf.setSendBufferSize(sendBufferSize);


Interesting enough, they do set this flag as I’ve shown with the bolded line. So I’ve tried debugging the code and after some time I’ve found out, that SocketSessionConfig is never read, never used. I will repeat this : SocketSessionConfig is never accessed. That part of the code could as well be removed. The solution is simple, flag must be set directly on NioSocketAcceptor and then the socket can be bound on restart without a problem:

acceptor = new NioSocketAcceptor(ioThreads);
acceptor.setHandler(ioHandler);
acceptor.setBacklog(100);
acceptor.setReuseAddress(true);


I’ve added the bolded line and compiled the source. With new red5.jar, restarting works like a charm.