22. December 2013

Tracing Paper JS – tool for generating JavaScript coordinates from image

Tracing paper is common tool for illustrators and graphic designers.

I wrote a tool which is able to convert clicks on image into coordinates and use it in JavaScript.

Launch Tracing Paper JS in full screen mode

Just click at the image and tool will record set of coordinates as JavaScript code.

It’s simple app written in JavaScript with AngularJS.

Source code is available at Github: https://github.com/georgik/tracing-paper-js

31. December 2012

Syntax highlight does not work in IntelliJ Idea for .jade – solution

Jade Templating Engine is popular in Node.js world. There is also plugin for IntelliJ Idea which has support this format.

If you open .jade file in Idea and there is no syntax highlight then there is something wrong.

Most common mistake is that people open .jade file before installing plugin and they choose Text editor to open this file. Idea remembers this decision and after installing plugin it will always open .jade files in basic Text editor without syntax highlight.

Correction is quite easy. You need to fix file extension association.

Open Settings – Editor – File Types. Find Jade and add *.jade file extension.

idea-jade

15. October 2011

Composing and playing music with HTML5

I was searching for a web based music note editor. I found HTML5 Cloud Composer from Greg Jopa.

Then I found something more like good old FastTracker: Sonant Live composer.

You can use Sonant Live composer to create tracks with music.

What is even more interesting about this composer is that you can store your song into pure JavaScript file and replay it with js-sonant.

The princeple of js-sonant is quite simple. You just store music structure into song variable and then you call createAudio. It will produce HTML5 audio object with wav rendered from your song tracks.

Here is sample code:

var songGen = new sonant();

for (var t = 0; t < 8; t++)
{
    songGen.generate(t);
}

audio = songGen.createAudio();
audio.loop = true;
audio.play();

Here you can play my simple attempt to make music. :-)

Note: Your browser must support HTML5 audio in order to play this music. Browsers which have support for HTML5 audio: Google Chrome, Firefox, Opera, Safari.

Note 2: Please wait few seconds after you clicked the Play button. You browser will render JavaScript music notation into playable Wav.

15. April 2011

jQuery workshop – FRI Žilina – slides

I was invited to give another talk at FRI Žilina. Previous topic was development for Google Android platform.

This time I focused on jQuery.Together with Michal Kaukič we started jQuery workshop. Attendees learned basics of jQuery in two hours. At the end they have running application with simple animation in HTML.

You can download slides in PDF version.

You can also download ZIP file with all demo applications.

I was using IntelliJ Idea IDE. It has very intelligent code completion for jQuery, JavaScript and HTML.

I suggest to download also jQuery Cheat Sheet, it is very handful manual.

I mentioned two interesting projects. One was Adobe Browser Lab which allows you to get snapshot of your web site displayed in different browsers on different systems.

The second project was jQuery Mobile. This project could help you to create applications for mobile environment.

I provide this workshop also in form of training for companies. You can find more details about available trainings at sinusgear.com.

Do not forget to watch lauch of Adobe CS5.5 Dreamweaver. Adobe promised to provide support for packaging JavaScript application as a native app for Apple iOS, Google Android and Blackberry.