Descriptor

Recently we have created new version of mobil.aftenposten.no but soon after serving it to some users we spot this tweet:  https://twitter.com/Al3x4nd3rR/status/452047498111369216 . Basically titles were missing.... Then it started our effort to reproduce this bug. ... It was nightmare! First how to reproduce it: Open  http://krzychukula.github.io/vw_bfcache/  in Mobile Safari.  Click "Go to another page" link Leave phone for 60 seconds (longer is better) Click back button If you were lucky you should see some missing paragraphs and missing green boxes. How it looks: Bug: This one uses vw and vh for font-size. Both are 0 so we can see only 2 from 8 paragraphs. Those two are using only em for font-size. I was curious if it's only for font-size so I have added another test. I have added two boxes with width and height set in vw and vh with green background color. They parents have red background for contrast.  ...

Mobile HTML5 by Estelle Weyl Book "Mobile HTML5" is really good. I have heard about it last year at Front-Trends conference and I'm glad because of this. It's really good for beginners and intermediate developers.  Estelle Weyl reminded me that mobile HTML5 is 95% just HTML5. You can treat this book as a reference of various mobile quirks especially if you need to support something else than only newest Safari on iPhone.  If you are interested in HTML5 but mostly how to use it in mobile browsers this book is for you. It covers every aspect of mobile web development so you can read about CSS3, JavaScript and even some basics of DevTools.  Rating: 8/10 

There is really good article trending right now about animations by the author of GreenSock Animation Platform Jack Doyle about tradeoffs of both JavaScript and CSS animations. Myth Busting: CSS Animations vs. JavaScript The really good thing about it is that you can read really good explanations about how animations work, what problems you might have and when it might be better idea to use CSS and when JavaScript. It is really impressive how much information this article contains.

This post was started just few days after onGamesStart but I have hard time finishing it. Talks were really good and I hope that my personal preferences and laziness will not affect great speakers with shorter reviews :) So let's start: Day 0:  Workshop with Kornel Lesinski & Peter van der Zee - Architecting canvas platformer game During this workshop you will learn about OOP, game loop, timers, tile maps, game editor, map and character collisions, animation and state transitions, NPC AI. Detailed walkthrough of example code of a fully playable platformer game. What I have learned Make your game small and distinct from drawing and input so that it can run on Node or in WebWorker :) So there should be class for Input handling to make it static instead of event driven, and Extract rendering to other Object than game-loop main Object. Thanks to this distinction you can create many different Renderers eg. one for mobile and one for web. With this ...

Interactively learn CSS Selectors (with CSS3 selectors). http://twostepmedia.co.uk/cssselectors/

Pageflip experiment with site that works like book. Best thing is that flips are fast :) http://tympanus.net/Development/FlipboardPageLayout/?page=0

http://www.caniuse.com/ Nice compatibility tables with browsers that supports that feature. Eg.  http://www.caniuse.com/#feat=svg-html5  - SVG support.

Mobile Performance Manifesto:  http://davidbcalhoun.com/2011/mobile-performance-manifesto Everything You should know to make mobile fast. Hardware accelerated graphics on Android:  https://plus.google.com/105051985738280261832/posts/2FXDCz8x93s Some facts about speed and hardware accelerated graphics.

HTML5 Games Development by Example: Beginner’s Guide  by Makzan  is as title suggest is intended for beginners. Unfortunately I'm not sure if it is true. Content is really good and I liked it, but there are many, many errors in code in listings, so I think that I had problem with almost every example. Don't get me wrong, this was mostly simple errors, and source code that I downloaded from PacktPub website was working but bad taste still exists. The worst one was first, I search for my own typo and finally find that variables has two names. It looks like in book is a mix of code from before and after refactoring. Bugs was easy and all looks similar, they was just annoying. Tips for other readers: Download source code Keep in mind that code in book has bugs Keep internet connection on (some images and WebFonts to download) Links to book: Book:  http://www.packtpub.com/html5-games-development-using-css-javascript-beginners-guide/book Table of conten...

If CSS3 has too little features to You, this would be killer: https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html For me it really looks like the line between Web-Developer and Game-Developer is thinner with every new CSS3 or HTML5 feature.

http://lab.simurai.com/css/space-cacss/ Is uses repeating-radial-gradient and changes background-size to do animation.

http://webdev.stephband.info/parallax.html Can be used to create interactive landscapes, logos and whatever You want to became like 3D. See demo: http://webdev.stephband.info/parallax.html Content is changing while moving with mouse over it, so it look like 3d, like there is depth somewhere. This is like layers in theater.

Consider this post more like stream of thought, rather than complete manifesto, or whatever this looks like.   Today I read  http://www.impressivewebs.com/browser-performance-pickle/ This article is just about problem, maybe about problems our industry has with older browsers. Progessive enhancement is awesome, but how in "real life" really make it working, how to convince you'r boss that this is good, how to convince customer? Sometimes You just CAN'T. On the other side we have pollyfils, we make it working in older browsers. Add hacks, more html, even more CSS. Code is ugly but finally works everywhere! Everyone is happy besides You. After some time they want to change something on site, and You tell them ridiculously long estimation. Why, because this is nightmare to maintain, to test again and again if this little tiny images for shadows works as supposed in IE6. And what tell You them when this site is really slow in this old browsers? Impossible to fix. G...

http://css-tricks.com/examples/ShapesOfCSS/ Shapes like: square, circle, oval, triangle... pacman, star, talk bubble.

From some time after reading about OOCSS and CSSLint I think about id selectors. Another good post about it: http://oli.jp/2011/ids/ As author tested id selectors aren't that fast! So strongest argument is not so strong.

How works radial gradients: http://www.webdirections.org/blog/css3-radial-gradients/

http://designbeep.com/2011/07/05/20-amazing-experimental-projects-from-mozilla-demo-studiocss3html5/ To see all demos visit: https://developer.mozilla.org/en-US/demos/

Great post about CSS positioning. From html tables to Float defects. Alternatives: inline-block (with one defect of it's own). CSS3 - Flexbox CSS3 - Template Layot Model http://designshack.co.uk/articles/css/farewell-floats-the-future-of-css-layout/

https://hacks.mozilla.org/2010/08/mozelement/ Really impressive article. Must read.

http://eisabainyo.net/weblog/2011/06/28/introduction-to-css3-animations-by-examples/ Good article with working examples.