Chrome, HTML5, JavaScript

IndexedDB Webcast In GDL-IL

Here is a short webcast that shows how to build “IndexedDB in a jQueryMobile app”. If you thought about building a modern web application with offline capabilities, it will be a good 101 session for you. For the full code you can read “How to use indexedDB” and here is a live demo of this mobile web app. It seems that with the JavaScript shim that I’m using this is a nice solution for developers that wish to target both Android and iOS as it should work in both Chrome for android and mobile safari. Moreover, soon when IE10 will be in the ‘wild’ web, indexedDB API will be available in Chrome, FF and IE, nice ahh?

Btw, one of the reader of the blog point me to another open source IndexedDB API wrapper library – From browsing it, it’s looking good!

Standard
mobile

Top Android Apps You Want On Your Phone

What are the ‘must have’ apps you would install on a new Android device?

I’m sure you all got to this spot when a good friend and/or brother, sister, mom, dad or “dear” neighbor is coming to you (=the “guru”) with their new smartphone with the request: “Make it useful for me” or “Put some games and apps for the kids”. Well, after few (OK, maybe just 17) times I got this request, I decided to document a list of great apps that I’ll install in such a case. It is similar to a post I’ve wrote in the past about ‘Great Web Apps For Your Chromebook‘. The list is a combination of powerful apps that help people (who are not necessarily technical) in their daily tasks.

Here is my little list:

  • Google+ – Well, even if your friend doesn’t use this powerful social network. I would install this app because – on top of many other great features like: local, hangout, messenger and more – it will back up all her photos to the cloud!

  • Waze social GPS – This navigation app bring the ‘wisdom of the crowds’ into your car. It’s very powerful to direct you on the shortest path based on traffic in real time.

  • Gmail – Well… How can we have a list without THE email tool? This is going to be the app the will consume most of your friend’s time.

  • Skype  / Viber / Google Talk – you can call and message for free. I know lots of friends that use them when you are abroad. It’s useful to find a good wi-fi connection so the quality of the call with be good.

  • WhatsApp Messenger – one of the best messaging apps (think on sms but much better and for free). It’s working on many different devices so you can be sure most of your friends can enjoy it.

  • Chrome – Get the the security, speed and simplicity of Chrome to your mobile device. All your links, open tabs, passwords will sync like magic. Plus, you will enjoy many wonderful web apps that will work very fast.

  • Evernote – Organize your life and take notes using your mobile. This app is a powerful tool to keep your notes/recipes/photos/todo lists etc in the cloud. It’s also synced notes across devices so you can reach them from anywhere. Btw, their tablet version is gorgeous.

  • Flipboard / Google Currents / Pulse News – All are great apps to read your favorite magazines, blogs, newspapers etc.

  • Google Drive /  Dropbox – access all your docs, photos, videos, files from your mobile device.

  • Instagram – A good app to improve your native camera pictures and share your photos with the world.

  • TripIt Travel Organizer – This is a great app for anyone that travel. It will give you a great way to stay on top of things like: flight schedule changes, hotel reservations and car rentals.

  • Facebook / Twitter – so you could keep in touch with the rest of the ‘social’ world. btw, both of these app got a very nice mobile web app as well. There are also options to have these type of apps as widgets so you could be more productive on certain functions of the app.

  • Foursquare – explore a new city with this powerful app. Ohh… yes, you can ‘check-in’ and share your location with friends but even if you don’t part of the ‘social animals’ you will find this app very useful. Another option to check quickly where to go and what to eat is Yelp.

  • GroupMe / Google+Messanger – both will give you a great way to have group chats and organize friends/team quickly.

  • VLC – Be able to watch any type of video on your Android. Another option to stream video is with Dropbox app – yep, it let you do that as well.

And some extra fun one

UTILS/TOOLS

  • Barcode Scanner – To be able to scan some barcodes like all the cool kids on the block.
  • Flashlight HD LED – When there is no other option
  • Google Translate – Think on a case where you want to order a good wine in france and you can’t say it.
  • Any.DO To Do List – Great to do list app. It also got a nice chrome extension that keep your tasks sync and fresh.
  • Wheres My Droid – for anyone that lost his phone more than once or twice. This one is a life saver. It will let you find it even if the phone is in silent mode.
  • AVG Antivirus – After all it’s better to be safe then sorry, no?
  • Key Ring Reward Cards – Keep all your loyalty/reward cards in one place.

Reading / Education

  • Kindle – Read book, pdf and anything else. I found that I’m using this app quite a lot on my phone (and not only on my tablet).
  • Google Reader – To keep up with your world of interest. This is a great rss reader.
  • TED – Ideas that worth your time. If you have 20min of free time, this might be the perfect solution to put them into good use.

Sport / Outdoor / Health / Fitness

Anything for bikers, runners, athletes and hikers.

  • My Tracks – Record and share your GPS tracks with friends.
  • MapMyRUN GPS Running – You can have MapMyRide verison as well in case you are mostly on your bike.
  • Strava Cycling – Analyze your performance and see how you stack up against friends and locals
  • StopWatch & Timer – In so many cases you wish to time something…

Last but not least, some apps for the dudes in Israel

We can’t finish without the #1 mobile game of all time (this time for Curiosity)

Angry Birds Space

 Drive safely and if you have some more (great) suggestion – please share them…

Here are the top apps in the Israeli Android Play Store (Aug 2012)

Standard
Chrome, mobile, webdev

Mobile Web App Stack (Hebrew)

Here is short talk I gave in DevCon 2012. I’ve spoke about four topics:

  • The State of the mobile web
  • Design philosophy
  • How to build mobile web app
  • Tips and some knowledge from my (short) experience.
If you think about this situation:

You realize that there is no choice to stand on the side and not create a ‘mobile first’ approach to your business/organization. In a world where mobile devices are going to pass desktop users and keep the ‘up and to the right’ line even steeper there is no option not to be there. It’s going hand in hand with ‘offline first’ approach and the (huge) amount of JS MVC frameworks that let us create modern web apps. We wish to provide users with great web apps and offline is one critical factor.

Some of the main tips to be more productive when you develop your web apps are:

  • Try full tech stack like: thorax.js
  • When you aim to iOS its Safari console can be used for logging (Settings -> Safari -> Developer)
  • Simulate touch events on desktop with MagicTouch.js OR try the new feature we have in Chrome DevTools (only on Canary for now). You can simulate touch event.touch events in chrome dev tool
  • Remote debugging hack with jsconsole.com or if you have Chrome on Android you can do remote debugging

Feel free to browse the slides of my talk. When you see a dot in the bottom left corner – just click on N and you will get some more information on the current slide.

Standard
Chrome, HTML5, webdev

Google Chrome For Android

Google Chrome is now available in Beta on Android devices with Android 4.0 (Ice Cream Sandwich). This is a huge deal for the mobile web. I’m sure we are going to see some amazing changes in the near future. Since the lunch of the iPad the safari was (the!) popular app and this is a good sign that Chrome is going to rock it on Android. To be able to experience the Chrome interface, but on a mobile devices – so cool. Moreover, under the hood, Chrome for Android includes key support for HTML5 and other open web technologies, which means you can share code across the desktop and mobile platforms. Last but not least, as a developer you want to be able to be productive as possible – so yep, you can now, take advantage of the complete set of Chrome’s powerful Developer Tools through an easy hookup with a desktop system.

A nice explanation

For developers, here is the list of key features in this initial beta release:

  • You now got remote debugging! check ‘how to do it
  • Solid position: fixed support. Yep, you can now have your menu, navigation buttons in the same place without any hacks.
  • IndexedDB support for storing data – It’s time to save data on the client and make you app work offline. You can also use the HTML5 FileSystem support for assets
  • Smooth scrolling of pages and elements
  • Hardware accelerated CSS transforms/transitions, canvas
  • Web Socket support
  • Web workers.

Resources:

  • Get Chrome on Android Market (Currently available in: United States, Canada, United Kingdom, France, Germany, Spain, Australia, Japan, Korea, Mexico, Argentina, Brazil).
  • FAQ – It contains some answers to things you wish to ask… Check it out.
  • http://code.google.com/chrome/mobile/
  • The Official post from Chrome Blog
  • Found a bug? Please help us by reporting it here at crbug.com
  • Pss… The new Chrome for Android including AppCache, localStorage, WebSQL, the File APIs (File, FileList, FileReader, Blob), and IndexedDB. All these technologies enables your web app to access data offline. In addition to the IndexedDB interfaces, data can be accessed offline through use of the localStorage API.
Standard
Chrome, HTML5, webdev

HTML5 Training Day (Mountain View) – Summary

Well, in the past month I was busy organizing this HTML5 Training Day for business web developers. You may want to stop and ask:
What Is HTML5 Training Day? So, our main goal is to have an open conversation with business web developers and to provide them with tools and knowledge to implement HTML5 features into their web apps. In this one day event, world-class experts talk about tools, tips and best practices in web development with focus on business.

It was a lot of fun and last week, we had in Google more then 24 companies that came to learn about the latest and greatest in the open web technologies.

We started the day with a short presentation that I gave on ‘The State of ChromeOS’. It’s amazing to see how fast is the pace and I suspect we are going to have a great 2012. After that (and two more cups of coffee) we got Pete LaPege (an excellent speaker, if I may) talking about: “HTML5 and new breed of web application” which aim to cover what defines a great Web App and show you how you can use HTML5 to create a new breed of web application that will delight and amaze your users.

Another cup of java and another web ninja: Mr. Eric Bidelman gave great talk with lots of demo on the ‘bleeding edge features in Chrome and the open web platform“.
and some HTML5 offline features. 

For the developers who wish to do ‘mobile first’ – we had a surprise from the snow country. Mr. Boris Smus (that build web stuff that make you – wow! for real) talking about A mobile web app technology stack. Here in his own words: “…Learn what it takes to build modern mobile web apps. We will start with the ideas of “adaptive apps” and “offline first”. Next, we’ll dive into some of the technologies, including MVC frameworks, templating engines, CSS frameworks, laying out views and multi-touch input. Finally, we’ll close off with mobile-specific tips and sweet demos.”

After Boris we had the pleasure to host David Kaneda (for the few that don’t know, David Kaneda is a creative web technologist. He created jQTouch, a jQuery plugin for mobile web development, and Outpost, the original iPhone app for Basecamp.) David gave another great talk on “Abstracting CSS for Complex Theming Systems.”

In the afternoon, Mr. Seth Ladd (The Michael Jordan of Dart) spoke about Dart and how it is a comprehensive effort to help app developers build complex, full featured, high fidelity apps for the modern web. He gave some nice short demos that showed the language, libraries, and editor of Dart.

Last but not least, Mr. Christos Apartoglou (The Chrome Web Store Chief) spoke about  Success stories in CWS. He talked about some bold success stories and showed what makes apps in the Chrome Web Store successful.

You can see the format of the day with the full descriptions of the talks over the public schedule that we kept for that day. It was a good tool to have a back channel (using the chat feature on the document) and to allow everyone to keep updated with the last minute changes. I hope to have some videos from that day public… I will post them here and on my G+ page.

See you all in our next Training day.

Standard
Chrome, HTML5, webdev

Mobile Web Performance

“You can’t manage what you can’t mesure” And it’s not easy to manage or get a clear picture on mobile web browsers. Since this is a very important subject to any web developer and specially those who focus on their ‘mobile first’ plan. I’ve saw this good presentation on this subject and wanted to share with you my main takes. Studies show that Mobile users expect equal or better performance than desktop, where they demand 2s load times. This is a hard requirement to fulfill, give the limitations mobile imposes. Guy Podjarny (the CTO of blaze.io) go over the different aspects of mobile: network, hardware & software. We’ll review the challenges each presents, understand how they affect web performance, and show ways to overcome those challenges. We’ll also show the impact of these optimizations on real world sites, gleaned from manipulating and measuring websites using Blaze technology. We’ll summarize with updates on the recent mobile OS releases, followed by Q&A.

The video of this talk

My notes from the talk

  • You will lose 13% of your users after 2sec! and 25% of your users after 4sec of load time.
  • HTML5 is supported on mobile so use HTML5 localStorage for caching: It’s available on all major mobile platforms. It doesn’t expire and it will survives power cycle. Its size limit is around 5MB so it’s most useful for caching javascript and CSS files (like Bing and google search pages are doing on mobile browsers).
  • Scriptable access enables other optimizations.
  • Use far-future expiry dates
  • You got more then ‘2 connections’ on modern mobile browsers (e.g. Galaxy S got a max of 12 connections) – so use them in parallel as you can.

 Other good tips

The presentation

Happy new year!

Standard
Chrome, Design, life

3D Art, Mobile And A New Tutorial On Web Databases

Why mobile native apps must die

This is a very interesting talk by Scott Jenson. He speaking about the ‘anti phone’ and why  a phone that is based on a browser will be very useful (to say the least). From his talk description: “…Mobile apps are on a clear trajectory for failure. It’s just not possible to have an app for every device in my house, every product I own and every store I enter. Much like Yahoos original hierarchy gave way to Google’s search, applications have to give away to a “just in time” approach to applications. This talk will explain how applications must give way to a more universal approach to application distribution, one based on the mobile web and cloud services. The problem of course, is that the mobile web has both hands tied behind its back. Any mobile app today is locked away behind a browser ghetto: in effect, a sub OS inside a larger mobile OS. This isn’t just an arbitrary technology debate, a just-in-time approach to application functionality can unleash entirely new sets of application, ones which are impossible with native apps. This talk will layout how this problem can be fixed, and what changes need to take place, outside of just HTML5, for it to happen.”

Migrating your WebSQL DB to IndexedDB

Lastly for this post, as WebSQL is deprecated, I recommend web developers to stop using the technology in new projects, as, effectively, the spec will receive no new updates and browser vendors aren’t encouraged to support this technology. The replacement is IndexedDB. As a ‘NoSQL’ database, IndexedDB is very different from relational databases, and it give us lots of power. IndexedDB let us create an Object Store for a type of data and simply persist Javascript Objects to that store. Each Object Store can have a collection of Indexes that make it efficient to query and iterate across. In this tutorial I’ve showed how you can convert the current usage of WebSQL and start leverage IndexedDB.

And let’s finish with some art…

3D Art + Com

Standard