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/

8. January 2014

The story behind PF2014 – Cordova – slides


Slides available in formats: PDFSlideShare

Web version: http://pf2014.sinusgear.com
Mobile versions: Android, App Store, Amazon
Source code: GitHub

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.