Chrome, HTML5, JavaScript, webdev

HTML5 APIs At Google Developer Group Haifa (Hebrew)

html5-cakeIt was the first meeting of GDG Haifa at the technion. I gave the first talk about HTML5 (new) APIs that front-end developers should leverage. It was a good kick-off event and it seems that this group will produce many more quality events. You can check the demos and the slide at my project site.
Enjoy.

Continue reading

Advertisement
Standard
Chrome, HTML5, JavaScript, mobile, webdev

Building Better Mobile Web Apps

When we thinking on web apps and specially mobile web apps, we wish to make them smooth a responsive as possiable. The main problem is latency/network and¬†luckily¬†we have¬†enough¬†APIs in HTML5 to make sure we can¬†achieve¬†this goal. A good recent example is fastbook (yep… just like facebook but working FAST with HTML5). Here I’ll summaries some of the main points you wish to pay attention when you building your next amazing mobile web app. Start with ‘offline first’ (after all, you are on the right path with ‘mobile first’ already).

Coding

Offline First

  • You should store all the main assets of your application. There are several APIs you can use:
    • AppCache – for the main index.html page and all your JS, CSS code. You could also use it for images and other static data.
    • Filesystem – You have an option to work with files: text and binary data. This is a great option for cases where you have a lot of images/mp3/videos etc’. In order to manage the work with files there is a great library – filer.js
    • Storing state/data:
Standard
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, 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

Google I/O 2012 – Day 2

ido-google-io12bI had my talk on:¬†HTML5 and App Engine: The Epic Tag Team Take on Modern Web Apps at Scale¬†which was focusing on¬†the latest and greatest application patterns and toolset for building cutting edge HTML5 applications that are backed by App Engine. This talk was focusing on an app that spans client and server (beer in our amazing example); We showed few nice features like OAuth2.0 that just works out of the box. In a nutshell, our talk aims to show you how to build a fantastic cloud-based HTML5 application with Goole App Engine. Both Brad Abrams and I will share another post with more details on the topics we covered. If you want to play with the ‘test-page’ and see what we manage to built in 45min go and check my github repository at:¬†https://github.com/greenido/backbone-bira¬†It’s far from being finished (the sync layer will be there in the next few weeks) and the app could get better, so feel free to fork it and improve it.

Google I/O 2012 logo

Some notes (not very polish at this stage – sorry) that I took during the day:

Google Drive – with its new SDK you can do much more for your users. In chromeOS it’s the ‘native’ file system and it will sync everything (that you need) to your local SSD. Modern¬†Web apps are now very powerful and we see a wave of organizations that are now ‘going google’. Leading universities, enterprise and 400M ‘regular’ users are using Gmail (Docs, Cal and other products).¬†We had Gmail offline (which working very nice on my long flights) and from today, Google docs are now working offline and soon both sheets and¬†presentations.

Compute Engine

Let you run huge amounts of servers inside VMs (all linux based). Why it’s good?

  • Scale – It’s scaling to amounts that seems to be unreal. Imagen 7.5B hits per day on Google app engine…
  • Performance – You can count on certain time for performance.
  • Value – it’s much cheaper then other providers.

A demo of 600,000 core running live is very COOL РLots of developers in the keynote were amazed to see it. The demo was to show a use case of helping human genom company run calculations in seconds and not minutes. This specific example, took 10min on 1000 cores and in the demo you saw new connections made in seconds (1-2 seconds instead of 10min on an infrastructure that would cost thousands of dollars.

ChromeOS

The new Chromebox (and Chromebook) are a powerful devices. The Chromebox is a desktop that in a lot of cases will make people happier. For people that spend the vast¬†majority¬†of their time on the web it’s a perfect desktop computing machine. It will support your 30″ monitor (or any smaller one) and with the security (no more viruses or malware), speed (V8 is still the fastest JavaScript engine in the world) and¬†simplicity¬†of chrome – you will enjoy it.

Games

USB, game-pad and audio API are now allowing us to have amazing games on the web.

HTML5 demo on Cirque du Soleil¬†– using WebRTC to get the user image and let her control the experiance. Very cool CSS3 transitions and amazing graphics.¬†Chrome got 310M users… It’s growing fast ‘up and to the right’. In the end of the day, we all get a better web because more developers want to use the new HTML5 features that are there.

I hope to update this very soon with the videos from my talk and the slides.

Standard
Chrome

Google I/O 2012 – Day 1

nexus q front sideI’ve took some notes during this packed day. I¬†apologize¬†if they are not ‘polish’… The main goal is to put them here asap and later (maybe, on my next 26h flight) work on them and make sure the wording is better.

Keynote take aways

  • Android – Nexus 7 looks like a great tablet. It’s in the right size and with many great apps that will shin on it. I hope to check it out soon specially as a reading device.
  • Nexus Q seems like powerful (and¬†beautiful) computer that make music/video more¬†social. The use cases are powerful and the ability to stream google music with a push of a button in your friends place – cool!
  • Google+ got event – finally we have a powerful mobile app that let you and your friends share photos together before/during/after events. I know several startups that are trying to solve this¬†challenge¬†and it’s going to be¬†interesting¬†to see what will happend in this space of geo-local-photo sharing apps.
  • Glass – Jumping from airplanes, bikes and some snapling on Moscone. What can I say? I want the roll Sergay is having these days… This video tell the story:

Web component Talk

  • Shadow¬†Dom – encapsulate stuff in the DOM.
    You can follow on it using Chrome DevTools (go to setting and click on ‘show Shadow Dom’) in the example of a video tag you will see all the ‘shadows’ that are behind the sense (e.g. some divs, buttons etc’)
    It’s important to rememeber that for every DOM element we can have Shadow DOM rendered instead.¬†We have here a rendering time¬†structure which can help developer write more efficient web apps that runs faster and smoother.
  • Custom element – meaningful tas to extend DOM objects.
    Use the new HTML5 < element >
  • Templates – clonable DOM for easy authoring

In Parctice we try to ‘tell’ the browser what we mean.¬†The declarative renaissance with web component will let developer to channel their intent to the web browser. It is giving developer CSS variables to custom components and define an api that other developers can leverage. It will let the community a way to share semantics and overtime we will see HTML envlolve due to popular use cases (e.g. x-poll tag).
Another important point is that declerative tags will run faster because the browser ‘understand’ them nativly.

Google Drive API

  • On ChromeOS you have today a strong integration with web applications like: Lucid Charts and Aviray. Both apps, are doing great job in their UI to use the user massel memory and make her productive asap. On the backend, they use google drive api to save your work.
  • You should use the google JS library and load the picker (in their drive example) and use it. It’s very easy and nice api to use.
  • Security – level of access (or scope). These level of access were very board… (scery) but now they have a new api (per file). Once you approve it (using OAuth2.0) the app will be able to access certain files.

Other great talks that I’ll fill in the details later are:

The Web Can Do That!?

The web is changing so quickly that it’s hard to keep up with what’s new in the platform. HTML5’s new capabilities allow developers to build a whole new suite of applications – things that were once impossible to do, are now a reality.

This session cover some of the bleeding edge of HTML5:

  1. media capture
  2. HTML5 file APIs
  3. Advanced usage of web sockets
  4. Media streaming.
  5. Device input
  6. CSS3 & multimedia.
  7. Modern CSS design.

Better Web App Development Through Tooling

Building a solid webapp is a challenge for all developers, but a plethora of tools have emerged recently to assist you. From starting boilerplates, to performance tuning and build tools, you’ll get a full overview of the tooling ecosystem. In this session, you’ll learn which mature and valuable open source projects can save you time as well as get answers to common questions in building a webapp.

Standard
Chrome, JavaScript, webdev

Web Intents – The Next Wave Of Web Apps

New tool set for web developersWhat?

Web Intents is a framework for client-side service discovery and inter-application communication.

Why and when?

As a web developer you can think on many cases where you’re building a web app and you want to allow users to share pictures¬†(or edit or any other operation). You have few options:

  • Write that functionality yourself, but it will require a huge amount of work and likely won’t be nearly as good as other existing photo web apps.
  • Force a hard-code integration with a collection of existing photo editing web apps, but that can lead to a cluttered interface and requires manual intervention later to integrate with new photo editing apps that may emerge. Worse, it forces your chosen integrations upon your end users.

One of the greatest strengths of the web is that the ease of linking allows innovative new apps to succeed without asking anyone else’s permission–but up until now that hasn’t applied to integrations between web apps. Web Intents is an emerging¬†W3C specification¬†inspired by Android’s Intents system that aims to solve the problems of communications.

How does it work?

  1. Service registers its intention to handle an action for the user.
  2. App requests to start an action (share, edit, pick, view etc’).
  3. User selects which service to handle the action.

Here as some slides that explain the main concepts from a pervious talk I gave.¬†For the ones that like short informative videos –¬†Paul Kinlan¬†(=the godfather of web intents!) intreduce you to the powerful world of web intent in 3 minutes.

In case you are wondering what can you do with this good stuff on other browsers the answer is that there is a limited shims exist, but I recommend feature detection to support browsers that don’t have Web Intents support.

Standard
Chrome, HTML5, JavaScript, webdev

The Web Platform Cutting Edge

There are many ways to keep yourself updated with the latest¬†improvements¬†in Chrome and the web platform. One option is to follow Chrome Developers On G+¬†and another is to open ChromeStatus.com¬†and see what is cooking in canary and going to make its way to stable soon. Another is to sit and see some screen-casts. Videos are great option but it’s rare to find such a great quality like¬†+Alex Komoroske¬†(from Chrome) created. The ¬†screen-casts below shows some of his favorite capabilities of the cutting edge of the web platform. The total time of all the three is around 15min so take the time and enjoy it.

Building on foundations


This video goes over how the web platform has been fixing various historical shortcomings and building upon its core strengths, like:

  • Complicated graphical effects
  • Composability
  • Advanced text layout.

Earning from other platforms


In this video he reviews how the web platform offers new capabilities inspired by successes on other platforms with things like:

  • Push notifications
  • Payment APIs
  • Web intents.

The edge (Watch not to fall!)


In this video he demonstrates some of the new tricks: webcam access, powerful audio APIs, and complicated 3D graphics.

If you’re interested in learning more about the technology behind any of the demos, check out the Meet the Web Platform companion guide (http://www.chromium.org/developers/meet-the-web-platform-companion) or the Chromium blog (http://blog.chromium.org/2012/03/meet-web-platform-again-for-first-time.html)

 

Standard