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.

20. January 2013

Edge Animate – first experiment

New Adobe Edge Animate looks pretty good. Here is my small experiment:

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

PF 2013

[SK] Pomôž snehuliakovi nájsť vianočný stromček.
[EN] Help little snowman to find Xmas tree. ;-)

pf2013-qr-code

Open just PF 2013 game (useful for mobile).

Check out older PF:

Grab source code from GitHub. Images edited by Photoshop CS6. :)

9. May 2012

qr.sinusgear.com – update

Few months ago I wrote simple application for rendering QR code on the fly in web browser.

The problem was that user was not able to send a link to another user with pre-generated qr code.

Now it is quite simple. Use address like: http://qr.sinusgear.com/?q=http://m.eventsaround.me

New version of qr.sinusgear.com will display link and qr code as you type.

29. January 2012

Quick online QR code generator in JavaScript

Update: quick access to this application – qr.sinusgear.com

I found nice jQuery plugin for generating QR codes written by Jerome Etienne: jquery.qrcode.

It’s fairly easy to use. Just pass a text to function and QR code is ready:

jquery('#qrcode').qrcode("this plugin is great");

Here is small application that generates QR codes on the fly as you type.

You can also download QR code as image (use: Chrome, FF, Opera or Safari for download).

Enter text:

Link to standalone QR code HTML5 application.

31. December 2011

PF 2012

[SK] Nájdi cestu k pokladu.
[EN] Find a path to the treasure. ;-)

[SK] Odkaz na aplikáciu.
[EN] Link to application.

Note: Map is based on one geocache puzzle.

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.

1. July 2011

Google Gravity

Do you know what happens if you apply gravity constant on HTML elements?

No? Try to search for something by this enhanced Google Search page.

30. June 2011

HTML5 WebGL/Canvas – Standard Slide – sneak peek

Year ago we developed application for navigating in Standard Slide catalog. It was written in Flex and still it’s serving very well.

This year we decided to make further step and we’re preparing version in HTML5. Not only that. We would like to show 3D models right in the browser.

Many thanks to Three.js for great Canvas/WebGL library.

I’ll share small sneak peek with you. I recommend to view it in Google Chrome or Firefox 4+ which has support for WebGL. Other modern browsers supports Canvas and 3D model will be displayed there as well.

Application is not finished yet. Models are in prototype version. We have to fix some issues, but it nicely demonstrates power of HTML5.

Update: You can test newer version 0.6

Test Standard Slide 3D version 0.6.

  • Babel fish

      Translate from:

      Translate to:

  • Where’s the fish?

  • Further info

  • Badges

  • Video channel

  • Learning

    Grow your brain.
  • Tags

  • Topics

  • May 2013
    M T W T F S S
    « Feb    
     12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
  • Comments