30. December 2015

HTML5 Game: Oxygen light – PF 2016

Game inspired by the game Oxygen. Move the ball to the target spot.


Start the game in full screen mode

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

30. December 2014

HTML5 Game: Pexeso – PF 2015

Pexeso – find two or more related cards.


Launch the game in full screen mode.

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

28. December 2013

HTML5 Game: Touch stars – PF 2014

Connect stars and create constellations.

Launch in the game in full screen mode.

Source code is available at GitHub.

Technological background: application is written in JavaScript and CSS3, no Cavnas. Used libraries: Cordova, AngularJS, jQuery, Font Awesome.

Constellation maps were created by Tracing Paper JS tool.

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

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 :)