14. May 2013

How to debug :hover pseudo class in Google Chrome Developer tool

Google Chrome developer tool is simply one of the best tools available for debugging of HTML5 applications.

It has one neat feature: possibility to inspect CSS of element and editing it on the fly.

That works fine for normal styles, but what about :hover state?

There is one “hidden” option which allows to switch element to :hover state.

Inspect element of HTML. You should see Styles on the right hand side. There are 3 icons. Click the middle one with arrow sign. It will pop up menu with checkboxes. You can select here CSS pseudo classes like :active, :focus, :hover or :visited.

google-chrome-dev-hover

To learn more about capabilities of Google Chrome developer tools I recommend to go through free course Discover Dev Tools from Codeschool.com.

13. January 2013

3D HTML inspection in Firefox

Firefox has one very neat feature for web developers – 3D inspection. It’s very useful when you need to examine layer overlay or event bubbling.

Just right click and choose Inspect Element:

firefox-inspect

You’ll switch to inspect mode. Click 3D View in the right bottom corner.

firefox-3d

Simple :)

22. December 2012

HTML5 Game: Snowman’s teleport – PF 2013

Help little snowman to find Xmas tree. ;-)

Source code available at GitHub.

You can find more games at georgik.rocks/tag/games/

31. December 2011

HTML5 Game: Maze Pathfinder – PF 2012

Find a path to the treasure.

Note: Map is based on one geocache puzzle. Written as PF’2012.

You can find more games at georgik.rocks/tag/games/

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.