Category Archives: HTML5

Chrome, HTML5, JavaScript, webdev

GDL-IL on Chrome Extensions And Backbone.js In The Real World

Today I’ve spoke on GDL-IL (=Google Developer Live Israel) with Ron Reiter on his work at Any.Do and how he leverage backbone.js to create this useful chrome extension. The main points we covered during our talk:

  • Chrome Extensions– How you start developing them and why you will want to do it.
    • Extensions are small software programs that can modify and enhance Chrome. The best part is that you write them using web technologies such as HTML5, JavaScript, and CSS. Here is the code for the example extension I’ve wrote as ‘short cuts’ to Chrome internal pages.
  • Ron gave us a short description on backbone.js and what are the main components in this MV* framework. You can learn more at: http://documentcloud.github.com/backbone/
  • We talked about Any.do extension and Ron gave a nice overview of the code he used for the sync layer.
  • Few tips for extensions developers:
    • How to inspect an extension: open the popup and right click inside of it. It will give you the option to open chrome devtools (with the ‘inspect element menu item). In cases, where you don’t have a popup – you can always use chrome://extensions and click on ‘inspect background page’.
    • If you have some logic you wish to test without the extension (or not inside it) you can always run QUnit (or any other unit test framework) on a page that will be a proxy to your popup’s index.html file.

Enjoy and feel free to join us every week on WED 14:00 Israel time at https://developers.google.com/live/


Standard
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
Chrome, HTML5, JavaScript, php

Java Posse Podcast Episode On Great Web Apps

In the last Java Posse Roundup (=the best unconference you can attend) we had many very interesting meetings. In this one hour conversation we were talking about modern great web apps and what does it means to different developers. Some of the topics we spoke about where around new JavaScript MV* frameworks (ember, backbone, spine, angular etc’). What we used to do 35 years ago (main frames days!) and what is similar (or not) today. Thanks to @joelneely for correcting me with the title by making a great point on replacing the word ‘modern’ with ‘great’. Some of the topics that were discussed:

Since we had no-snow and free time, we did few ‘rolling’ hackathons in the afternoons. You can browse the coding projects on GitHub JavaPosseRoundup. Checkout, some cool Scala, Android, HTML5 apps that are there. Lastly, I also gave a talk about this topic before the conference at a Google developer meetup. Here are the “Modern Web Apps slides from my talk that contain more good information about the subject.

Standard
Chrome, HTML5, JavaScript, mobile, webdev

How To Use IndexedDB – Simple(st) Example

In the past few months, I’ve saw many developers that use  local storage for ‘big data’ on the client side. Local storage is a powerful API that let developer save key-value data on the browser. However, it’s got some limitation like: synchronize operation that make it less efficient when it’s heavily used. Moreover, it should replace simple cases (e.g. saving the user state) and not in scenarios where you wish to save lots of data and then have the ability to ‘slide and dice’ it base on your needs with effiency. For that, we used to have WebSQL (which as you know is deprecated from 2010) and the new cool kid in town – IndexedDB. Here I will try to give you a short example that will run nicly both on IE10, Firefox (that match the spec) and Chrome (which need to tune a bit the setVersion update to call onupgrade). IE10 will support IndexedDB as well – so it’s great news to web developers in terms of ‘wild’ support for this important API in browsers. I wish we will see soon Safari (specially, on the mobile) match Chrome for android and give us the ability to leverage indexedDB both on Android and iOS.

Ok, as Linus said: “talking is cheap, show me some code”… Let’s go over the example code. In this example we will save todos to keep things simple. Classic, no? In the end of the post, I will also give two other examples of a ‘todo app’ the use indexedDB, WebSQL and jQueryMobile.

Continue reading →

Standard
Chrome, HTML5, JavaScript

GDL IL With The SubDroid Team

A short discussion with the team that built the first SubDroid that sink in Sedot Yam!
Some good topics on Android, Hackathons and design aspects for successful GeekCon project.

As always, if you have 20-25min on WED at 14:00 Israel time… mark your calendars and join us live on GDL-IL!

Standard
Chrome, HTML5, webdev

Google Drive on GDL IL

Here is my talk from last week with Nicolas Garnier (Developer Advocate for Google Drive) on the new aspects of Drive. You can have a short intro to drive and then dive into:

  • What are the key features developers should be aware of when working with Drive APIs. For example: all the Drive SDKs you can use with your favorite technology (e.g. Java, Php, Python etc’).
  • Show some new apps that are doing good job in integrating into Drive. We spoke about best practices and OAuth2.0
  • Learn what is next for drive in the near future…

Psst…
If you want to see more GDL-IL episodes, feel free to ‘Add our show‘ to your calendar. It’s going to take 15-25min of your time every WED at 14:00 Israel time (IST)

Standard
Chrome, HTML5

DevCon TLV 2012

In a nutshell, DevCon TLV was a great event! It’s getting better and bigger every year. There were lots of developers, friends and rock bands (a bit early in the morning – but great way to wake up quickly). This year all the talks were limited to 25min (with 5min of questions) where after lunch people had the options to choose ‘agile’ track as well. I’ve got to listen to some great talks and I hope we could see all of them online soon. This year my talk in DevCon TLV was “Big Data and HTML5“. This slides cover some of the main points of Google cloud products: Google Cloud Endpoints and Big Query. I wanted to give developers the option to see how they can combine modern web apps with cloud technologies that give a lot of power. The first product we covered is still in ‘trusted tester’ mode and it give the developer the option to build an API (in Google App Engine supported technologies: Java, Python and Go) that will work in minutes with all the scale of Google app engine. You can read more deeply about Google Cloud Endpoint and HTML5 or just have a look at this talk:

(*) This time the talk is in hebrew…  I hope that soon I’ll have another version of it in english.

Standard
Chrome, HTML5, webdev

Google Developers Live IL And Shana Tova!

shana tovaToday we lunch GDL IL. What is it? Google developer live is GDL and IL is our famous short for Israel. It is going to be a weekly show on WED 14:00 (so mark your calanders please). We are going to talk about the latest and greats news in technology. From Android to HTML5 and back to Cloud, Google APIs and anything that is interesting for developers. As ‘startup nation’ we will hosts some of the cool, interesting/amazing startups that will tell their story and will share some of their real life experience. For the first show that is focus around Chrome extensions, I had a pleasure to interview Tal from Equire (a CRM Chrome extension that integrates with Gmail and making your life better). We talked about the life of a web developer that choose to build a product in Chrome (extension and/or App). Since Tal is working from The Hub we covered what is unique about this ‘working space’ and how to be productive in such an environment. One of the key questions I’ve asked was something like: “What are the top 5 things to keep in mind when we are coming to build a chrome extension?” Tal answered:

  • Don’t rush to do the same things you always do when first building an app, think about the new architecture, understand it, it’s a different mindset, it’s not just a regular web app. The major difference is the limited ‘screen’ you have and some strong APIs – so use it smartly.
  • LocalStorage… give you a lot of power to save state/data of users.
  • Metrics – measure everything so you could improve over time and give more insight to your users.
  • APIs – There are many APIs that are available only inside Chrome so learn them and use them!
  • Very challenging UX issue – not a blank canvas like a web app. You have an option to give notifications and be ‘infront of your users’ but there is a delicate balance to strike to make sure you don’t get uninstalled.

There are many more things we covered… Some of these are covered in this post “Six Strategies for building great extensions“. However, if you want all the good stuff, you will need to watch it until the end when our next week guest will show up 😉

We finish the episode with 3 things/tools that Tal recommend.

  • Mixpanel – An analytic tool that answer any question you have about your code/users. You should start early and get a feel for it. The nice part is that you do not need any backend.
  • CoffeeScript – take a week, learn it, it will give you back 3 months of your year.
  • Backbone – especially for chrome extensions. It was a simple for Tal to start and be productive with it.

Until next time… Enjoy and Shana Tova!

Standard
Chrome, HTML5, JavaScript, webdev

Modern Web Apps Utilizing HTML5 APIs – O’Reilly Webcast

Yesterday I had the pleasure to do another webcast with O’rielly. This time the subject was “Modern web apps & HTML5 New APIs“. The webcast  covered new (and old) techniques for building modern web apps and how to utilize the latest HTML5 APIs to create a new class of web apps that will delight and amaze your users. Some of the main topics were:

  • The latest and greatest application patterns and toolset: MV* frameworks, offline first and Chrome Frame.
  • Some cool tips on Chrome DevTools – On few slides I’ve open this powerful tool in order to show its power.
  • APIs for building cutting edge HTML5 applications: WebGL, Device APIs, CSS3 layouts and many more…

You could watch the recorded webcast

or check out the page on O’reilly website:
http://www.oreillynet.com/pub/e/2349 and if you wish to follow with the slides you can find all of them at ido-green.appspot.com

Here is some of the feedback I got on Google+

Be strong.

Standard
Chrome, HTML5, JavaScript, webdev

Chrome Extensions – The New Event Pages

Since the first days of Chrome extensions it was clear that they are very powerful way to extend your browser and make it do stuff you care about. However, while it was good, we knew that it can get better… and this is why we have in dev channel the ‘Event Pages’. Let’s start by defining what are those pages:

  • Background pages – give your extensions the ability to have a single long-running script to manage some task(s) in the background. This can be a certain state of your app or long pulling of information that you wish to show the user (e.g. amount of unread emails).
  • Event pages – are very similar to background pages, with one important difference: event pages are loaded only when they are needed. When the event page is not actively doing something, it is unloaded, freeing memory and other system resources. Please remember this feature is currently only in dev mode.

It seems that with Event Pages our Chrome will be able to  reduce the memory foot print that is used by some idle extensions. It’s an important evolution from the state of background pages that run all the time. An event page only runs when it is handling events. Once an event page becomes idle, it is unloaded, freeing memory until the next time it’s needed. To help event pages support some important use cases, we’re also have new APIs.

  • The alarms API allows an extension to wake itself up at set times, to support features like: cron jobs type of activity, periodically syncing, anything you wish to do over time in specific timing.
  • chrome.runtime new events let extensions know when they have been installed, or when their event page is being unloaded. It is also giving the developer an option to have a ‘last error’ handler.
  • chrome.declarativeWebRequest – A declarative version of the webRequest API lets extensions do network interception without the need for a background page at all. It also works much faster than the chrome.webRequest API because you can register rules that are evaluated in the browser rather than the JavaScript engine which reduces roundtrip latencies and allows for very high efficiency.

Final Notes

  • Learn more from the event page documentation.
  • There is a good source for more information on Chrome Extensions in Chromium blog
  • There are so many option to use the new event pages with the bluetooth API…
  • Btw, @rem did it again with a new (amazing) version of JSbin – Go check it out and see how great logos ‘steal’ the show… Why I’ve added it here? because it’s a powerful online tool that let you test your app/extension and share your code before you upload it to Chrome web store. I’ve used both jsbin and jsfiddle in order to get feedback on some short code.
Standard