Share Location On The Web With Waze

If you have a website that contain ‘just’ your (business) address you can do better.

How?

You can use the links below to help your users navigate to you with one click.

This will save them the trouble to ‘select’, ‘copy’ and open their map app in order to get to you. Waze supports an API which enables developers to open the Waze client application through an external URL. The URL can be accessed from within your mobile web page or web app.

The following are the available parameters you can insert to your ‘a href’ tag:

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:

Progressive Web App?!

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.

A List Of Great Mobile Web Apps

In 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: mobile-patterns.com
If you have other great suggestions – please use the comments and I’ll add them.

Debug NodeJS Like A Pro

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’.

Yahoo Finance API With NodeJS

In 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:

http://finance.yahoo.com/d/quotes.csv?s=NFLX&f=snd1l1yr 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:

WebRTC Updates

In 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:

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

How Deep Is Your HTML5 Knowledge?

Well… If you wish to see how well you know all the little quirk modes. There is a (web) App for that: http://jakearchibald.github.io/request-quest/
Thank to Jake Archibald for the time he put into it.

AngularJS 101 On Google Developer Live Israel

Today we had the pleasure to host Shai Reznik and talk with him on his true passion – AngularJS. Few of the hot topic we covered in this episode where:

• Data binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. This is awesome because it eliminates DOM manipulation from your todo list and it’s making sure to work efficiently with zero effort on your part.
• Directives – How you can use today ‘Web components’ and see how it will be (fun and productive) to develop in the web platform in the near future.
• Dependency Injection – Why it’s a powerful concept and how it can help you with managing large scale web apps and your testing.
• Module – We spoke about the community around this framework and one of the by products is the modules that extend the options of which APIs and web services you can use directly from Angular.