Chrome, JavaScript, mobile, webdev

Building a Progressive Web App

I think the web platform is awesome.
Moreover, it got some impressive APIs that make it even more powerful. The web
 platform is easy to access (very low friction), no installs, easy distribution (without walled gardens), immediate redeployments and no single organization own it. Let’s see what do we mean when we are talking on progressive web apps.

Progressive Web Apps

  • Fast loading – Because we know users love speed and for every delay we are lossing a smile (and a user).
  • One click away from accessing content – You should have an icon on the screen and with one click you could get to your content (or task) and smile.
  • Smooth animations and navigations – Good UX comes with these aspects.
  • Re-engages with push notifications – In many cases, we wish to be able to notify users even when the browser is not open in-front of them. We can!
  • Good experience on flaky network connections – Our web app is offline first, so we can deliver our content (just the deltas) on flaky networks much better/faster.
  • Consistent experience across browsers – After all, we are talking on the web here. You can’t control from which device users will come to your work. So make sure, you serve them all.

PWAs are about the experience, no the tech: these apps _feel_ better and more app-like. The technology behind Progressive Web Apps is called “Service Worker”; it’s available only since mid 2015 and is seeing large, growing adoption. PWA is expected to be for mobile what AJAX meant for the desktop web.

Enabling app-like capabilities

At the foundational level, there are two core pieces of technology that enable PWAs: Continue reading

Chrome, webdev

Progressive Web App?!

pwa 2016-02-24 at 10.00.27 AM

We have today on the web capabilities to create web apps that feel and act like a native application.
Yes – We do.
We can have offline first, push notification even when the browser is running in the background and add to home screen. These three features bring us to a point where we can give users our content and features with one click and with all the benefits of the web.
What is this new monster you ask?
Well, let’s try to describe it and give few examples. Continue reading

Chrome, mobile, webdev

A List Of Great Mobile Web Apps

mwa-examples 2014-08-21 14.16.36In the past, I gave few presentations on ‘Modern web apps‘ and each time I tried to show compelling examples.

Here is a new source (mobile web apps ftw) that might help you see what can be done (today) on the mobile web.
Few good examples to checkout:

  1. Weather App
  2. Lanyrd (For your next conferences).
  3. Stanford
  4. Financial Times
  5. Alerts in Israel (hebrew)
  6. Time Tracker (hebrew)
  7. GitHub
  8. Twitter
  9. Gmail

Another good site to get insperation is:
If you have other great suggestions – please use the comments and I’ll add them.

Chrome, JavaScript, webdev

Debug NodeJS Like A Pro

NodeJS Debugging with Chrome

NodeJS Debugging with Chrome

Anyone who is building an application find out that, what is starting as ‘small project’, becoming very quickly bigger and bigger monster. You can use console.log on small projects but as they are growing you will need better tools. In the arena of “JavaScript on the server” there weren’t many tools to debug your code effectively. However, with the power of open-source projects like: Node, Blink and others there are few powerful ways to debug you code like a pro.

First, for the one that are a bit confuse about NodeJS. Well, it’s not a “JavaScript web server” but an environment to run JavaScript on the server. It is using V8 engine so the performances are very compelling. After using NodeJS inside Compute engine I got few questions about the debugging options. In the past, developers needed to use console.log and similar ‘printing’ commands in order to understand what is going under the hood of their script. But as we mention, when you get out of the area of 100 lines script and your application contain different modules and many more lines of code. You need a debugger (and hopefully other tools like profiler) in your hands. Luckily, we can use Chrome (=Blink) dev tools for your NodeJS applications.
Here are the main steps and the ways to leverage your new ‘hammer’. Continue reading

spaceX from above
Chrome, JavaScript, webdev

Yahoo Finance API With NodeJS

nodejs logoIn the past I’ve wrote this post on the different options you can use with Yahoo Finance API. It is time (4 years later!) to a followup post on how to gain more data but this time with nodeJS. The first idea was to be able to gain information by using different parameters and downloading csv files from Yahoo finance. Something like this GET request will do the magic: and from there you can work with the data.

However, there are cases, where you wish to have information that is not part of this set of arguments. Here are two quick examples for such cases: Continue reading

Chrome, HTML5, JavaScript

WebRTC Updates

webrtc logoIn this week show on Google Developers live Israel we hosted Sam Dutton in order to hear what’s new in the land of WebRTC. What? Well, Web Real-Time Communication (WebRTC) is a collection of standards, protocols, and JavaScript APIs that enables peer-to-peer audio, video, and data sharing between browsers. We covered (with demos) the three primary APIs:

  • MediaStream: acquisition of audio and video streams
  • RTCPeerConnection: communication of audio and video data
  • RTCDataChannel: communication of arbitrary application data

It was a fun 20min talk with some very impressive demos. Here are few demos that show the power of getUserMedia API: Continue reading

Chrome, HTML5, JavaScript, webdev

HTML5 APIs To Use Today On Google Developers Live Israel

Last week, I meet with few startups to talk about their web apps. After few basic questions like: how do I save data on the client without cookies? or something like: “Can I get a video input from the browser?” I thought it might be a good idea to touch on some of the APIs that are out there today in most browsers and developers can use. The best part is that in most cases, you can start using these APIs with very little code. In this demo page  you can hack around some basic HTML5 features and see the code snippets that will let you do some cool things like: save information locally (local storage for the rescue here), Geo location, device orientration, Getting Video/Audio (with WebRTC), Visibility API etc’.

The slides from my #DevConTLV Talk