Chrome, HTML5, JavaScript, mobile, webdev

Israel’s Alerts – Mobile Web App Example

Alerts IL - mobile web app

If you wish to have a window on the side of your screen and/or leave your mobile device on a page that will show you an updated list of all the alerts (Tzeva Adom and others) – Here is a web app for you. It is based on Foundation CSS framework as it’s ‘mobile first ‘ and got a very powerful grid system.

Code

Check out the Alerts-IL GitHub repo or the Google App Engine version.

If you wish to see the Android app code github.com/greenido/Alerts-IL-Android which is a simple native app that wrap the mobile web app.

Continue reading

Standard
Chrome, HTML5, JavaScript, mobile, webdev

HTML5 & CSS3 Tools

I’ve meet with a very cool startup over the weekend. It was interesting to listen and learn from them what is ‘cool’ in their technology world. However, I got the feeling that they are missing some of the new capabilities that the web platform has to offer. I’ve pointed them to some known resources like: html5rock.com , MDN site etc’. But it seems better to try and get a list of tools or pointers that any developer could browse and pick from. So here is an alpha version of the list. It’s split to subjects like: design phase, testing phase etc’ just to keep it a bit more useful.

Continue reading

Standard
HTML5, JavaScript, life

Frontend Development Sources

Screen Shot 2012-12-18 at 10.34.00 AM

Here are a few new/cool sources I’ve bumped into during last week events (and meetings). It is always a great fun to talk with developers and learn on new tools that they are using in order to do their work. If you have something interesting, please don’t be a stranger and let me know…

HTML5

Standard
JavaScript, webdev

HTML5, CSS3 And Some Tips

First good 28min are on few smart techniques to improve the performance of your web app. Paul Irish (from jQuery fame and now with Google chrome team) describes:

  • CSS re-flows and how to avoid them – single re-flow is better because the browser won’t need to repaint all the elements. Batch the DOM changes before any re-flow-triggering actions is one of the good ways to do it. you can learn a lot from using http://www.browserscope.org/
  • Hardware accelerated CSS – psss… add css property to your element: translate4d(0,0,0) or translateZ(0) and the browser will do hardware accelerated.
  • Animation optimization
  • Web workers – move computation out of the UI thread. Without web workers you can’t… but lucky it’s 2011 and you have them (here and there). I’ve put a simple example in the end of this post. I saw it long time ago (a week?) on Mozilla site – on how to use web workers.
  • Benchmarking and build scripts.
  • Last but not least, try about:flags in chrome… lots of good stuff under the hood.

BTW, his (last?) project html5 boilerplate is great for any developer that want to write efficient web sites/apps that will score more then 90 on page spped and will get an A on y!slow. This project is an ANT ‘build script’ that harness you with:

  1. Cross-browser compatible – IE6 and others IE specific classes for maximum cross-browser control.
  2. HTML5 ready. Use the new tags with certainty.
  3. Optimal caching and compression rules for grade-A performance
  4. Best practice site configuration defaults
  5. Mobile browser optimizations
  6. Progressive enhancement with graceful degredation
  7. A full, hooked up test suite is waiting for you.
  8. iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.

Simple example on web workers
var results = [];

function resultReceiver(event) {
results.push(parseInt(event.data));
if (results.length == 2) {
postMessage(results[0] + results[1]);
}
}

function errorReceiver(event) {
throw event.data;
}

onmessage = function(event) {
var n = parseInt(event.data);

if (n == 0 || n == 1) {
postMessage(n);
return;
}

for (var i = 1; i <= 2; i++) {
var worker = new Worker(“fibonacci.js”);
worker.onmessage = resultReceiver;
worker.onerror = errorReceiver;
worker.postMessage(n – i);
}
};

Standard