Author Archives: greenido

Chrome

The New Chromebook And New DevTools Tips

Let’s start with some cool features you should use in Chrome DevTools:

  • Device emulation – You can set a new User Agent so your web app will think you are now access it from a mobile phone/tablet etc’. This is a great feature that used to be something you needed to use a Chrome extension in order to have.
  • Dimension overriding – This is very cool because it let developers debug mobile web apps on different devices and operating systems via the Settings Menu. You can emulate the exact device metrics of many devices (e.g. iPad/iPhone, Galaxy Nexus/Tablets and even BB) so your media queries will run without any bugs.
  • Touch event emulation to make it easier to debug mobile applications on the desktop. Of course, you can have other simulators (e.g. Android and iOS) but here you have it inside Chrome!
  • If you wish to play with the latest and greatest features that are under ‘experiments’. You should go to: chrome://flags/ and click ‘Enable’ on: ‘Enable Developer Tools experiments’ then in the setting panels of the devtools you will have more granular control on the specific feature you wish to use. For more checkout the official page of chrome developer tools.

You can watch the 10min episode on our GDL-IL page.

As you all know, last week we had the launch of the new Chromebook for everyone. I’m really existed about this new device because it’s a combination of cheaper (249$ on amazon), better (lots of improvements + important security capabilities), faster (well, lighter). Some of the interesting specs are:

  • 11.6’’ screen
  • 0.7 inches / 2.42 pounds
  • 6.5 hours of battery (I had it running for more then 8h – but maybe, it because I was working mostly with email/docs and cloud 9 and not watching movies).
  • Boots up in less than 10 seconds
  • 100 GB of Google Drive free for 2 years – Yep, 100G.

You can test the water with it on several locations in the US (e.g Best Buy) and ‘feel’ it. I can say that in the past months I’ve worked with a very close model and it was a great device. If you ‘live’ in the cloud and do not need photoshop (like 99% of the internet users) it might be a device you want to checkout. As web developers, if you are using a cloud IDE (e.g. like one from this list) It might be very good option.

The Chromebook for everyone

Compare the new device to his ‘older’ brother

I had an urge to do the same video but then I’m notice this one… so here you go. It’s cover the major differences in terms of the hardware. As for the OS and the new features in Chrome… It’s the same (of course).

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
life

Chrome DevTools Screencasts (Hebrew)

We had a very productive ‘Google Drive and Android’ Hackathon and during this event, I got lots of questions from web developers on Chrome DevTools. So here is a great reason to sit down and talk (in hebrew this time) on the special features we have today in DevTools that could help you as a web developer to be more productive and smile more. You can go over the slides while you watch (or after it) on devtools-11.appspot.com It was a talk I gave in Google developer day in Berlin last year. However, the main points that I covered in the screen-cast are from the current DevTools that you have today (Sep 2012) in Chrome Canary.

Few of the main features you might want to master:

  • Click on the ? and see how you can be productive with the keyboard. Here is a list of keyboards command
  • On the right-bottom corner you can see the ‘setting’ button. Once you click on it – you can have some nice options like: choose other user agent and get their screen resolutions, mimic touch events etc’.
  • The Network tab will let you record sessions and the cool part is that you can start a recording and then move between few pages (or in a web app – click and move between states). Once you are done with the recording you can take the data by right click and choosing ‘Save to HAR’ then you can share this data and use tools like this in order to analysis your web app in order to tune it and import its performance.
  • The Audit tab let you have a quick and deep analysis of ‘what can be improved’. Think of ‘page speed’ / YSlow but inside your DevTools.
  • The Profiles tab let you dive deep into the CPU utilization, memory (to see where it’s leaking) and what is going on with the CSS selectors.
  • The console is also a powerful feature that give you options to work with a set of shortcuts like: $0 – for the current selected element etc’. The full list of these shortcuts could be nice to save.

Chrome Dev Tools In Hebrew Part 1

Chrome Dev Tools In Hebrew Part 2

Chrome Dev Tools In Hebrew Part 3

The examples for my book on web workers are here: https://github.com/greenido/Web-Workers-Examples-

If you have other tips you like to share on Chrome DevTools  – please let me know about them.

Standard
Chrome, life

Educational Apps On ChromeOS

As the academic year is starting, let’s have a closer look at what apps can make the life of students and teachers better. There are few sections in Chrome web store that will show us the current inventory: Academic apps, Academic resources and Tools for Teachers. From looking around of them you can see some nice example like: LucidChart For EDU, Planetarium, GeoGebra and many more. It’s depend on your kids age and level but you might find good options in the chrome web store from starting to read apps and up to full ‘office’ apps for collage.

If I was in school today, I guess khanacademy.org would take a lot of my time. It’s got the perfect combination of quality content (in ‘eatable’ sizes of 10min each) and a set of exercise that could show me if I really understood a certain topic. Their new Computer Science section is extremely powerful. It will help students to start play with CS and have fun while doing so. The feedback that you get while programming there is something that will make students productive quickly. Another cool web app that will teach you a new language quickly (while you are helping a novel goal of translating the web) is duolingo.com If you want to learn few words before your next trip, it’s very useful. Last but not least, you might want to try lumosity.com which should improve brain health and its performance.

Btw, this is one of the best talks around our education system and what needs to change.

Have a great learning year.

Standard