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.
To learn more about capabilities of Google Chrome developer tools I recommend to go through free course Discover Dev Tools from Codeschool.com.
New Adobe Edge Animate looks pretty good. Here is my small experiment:
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:
You’ll switch to inspect mode. Click 3D View in the right bottom corner.
[SK] Pomôž snehuliakovi nájsť vianočný stromček.
[EN] Help little snowman to find Xmas tree.
Open just PF 2013 game (useful for mobile).
Check out older PF:
Grab source code from GitHub. Images edited by Photoshop CS6.
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.
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).
Link to standalone QR code HTML5 application.
[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.
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.
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++)
audio = songGen.createAudio();
audio.loop = true;
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.
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.
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.