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:

Accelerated Mobile Pages Tips

TL;DR

AMP is an effort to build an open solution that would improve the mobile web experience for everyone. It is a new way to build web pages for static content that render fast (e.g. an article, a tasty recipe, blog post). AMP in action consists of three different parts:

• AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML.
• AMP JS library ensures the fast rendering of AMP HTML pages.
• Google AMP Cache can be used to serve cached AMP HTML pages.

Tips

Make sure that your AMP pages are valid

How To Build A Progressive Web App?

Why?

Progressive Web Apps are all about an amazing experience. You PWA should combine the best of the web and the best of apps. In the example above (yep, the ‘Noter web app‘) you can see that it is useful from the very first visit in a browser tab, to the launch from a home screen. As the user progressively builds a relationship with the App over time, it becomes more and more powerful. It loads quickly, even on flaky networks, it persistent and your notes are always there. It got an icon on the home screen and loads as a top-level, full screen experience. If you wish to add push notifications (which are great way to re-engage with your users) – pay attention to the tips in the image below.

How?

• First step: I strongly recommend trying out the PWA code lab so you understand how the approach to this type of app may be similar (or not) from what you’re used to do.
• Tech: Evaluate whether you’re going to just use vanilla JS for your app or a library/framework. See here for barebones PWA config or try Web Starter Kit for a starting point with a build process (=Gulp). Your PWA should supports the application shell architecture for faster first-paint and persistent.
  • Offline support: There are few libraries  for helping you with Service Worker pre-caching (sw-precache) and runtime caching (sw-toolbox). You can check this code lab for building your first offline web app as a starting point.
  • User Interface: Like anything on the web, there are lots of options for your UI. Some of the example PWAs take advantage of Material Design and there are libraries for using it available for vanilla JS, Polymer Paper elements, Angular Material and community efforts like Material UI for React.
  • Icons: I find both iconfinder.com and realfavicongenerator to be good resources. If you have the budget, it’s always great to get something polish from a designer.
  • Performance: Please follow the RAIL performance model:
    • Cable:
      • First load (network-bound), First paint at 1s or sooner, Speed Index of 1,000 or less, <100ms for response, <16ms for each frame.
      • Second load: first paint at 300ms or sooner, Speed Index of 1,000 or less.
    • 3G:
      • First load (network-bound), 3G (normal, as defined by WPT): First paint at 2s or sooner (including TLS handshake), Speed Index of 3,000 or less.
      • Second load (disk-bound because SW): First paint at 300ms or sooner, Speed Index of 1,000 or less.
    • Test your work with WebPageTest and Chrome DevTools.
• Examples
  • Smaller Pictures – A great web app that will help you shrink photos.
  • Air Horner – The ‘must have’ web app for the olympics in the summer.
  • Voice Memos – Very useful when you have conversations with your spouse.
  • Offline Wikipedia – If you need to read something on the plane.
  • Guitar Tuner – For the ones that needs to tune their guitar.
  • Zuperkulblog – Good if you thinking on a PWA for publishers.
  • Snapdrop – an Apple Airdrop in HTML.
  • More on this pwa-list.

The main features for progressive web app

Misc

• Alex Russell – intro post to the topic.
• The Angular team have also started an early ng2-application-shell project based on the app-shell architecture.
• Addy Osmai great post: “Getting started with PWA”
• FlipKart’s case study – With lots of good technical tips.

 Be strong and build something amazing!

Accelerate your mobile pages, it’s easy!

In October, Google announced a new open source project called Accelerated Mobile Pages, which aims to dramatically improve the performance of the mobile web.
Why it is important?
Well, one look at the history of these posts will prove you that there is a real need for speed!
The project relies on AMP HTML, a new open framework built entirely out of existing web technologies, which allows websites to build light-weight web pages.  

The basic ‘hello world’ version of your HTML page will look like:

Enable Users To Call From Your Web Site

On mobile devices, there is 99.65% chance that they have a calling capabilities.
It’s true that modern mobile browsers will automatically detect phone numbers and convert them to links, it’s a good idea to do this directly in your HTML code. It’s a great way to allow users to call your business with one click and the way to do it is with this simple tel: scheme:

Amazing coffee Service
<a href="tel:+972-3-123-3344">+972-3-123-3344</a>

The result will look like:

Click to Call

You can click on it in order to see the code in action.

Sublime Text 2/3 – Packages And Shortcuts

I always start with the one package that allow to stay in sublime and improve it quickly: packagecontrol.io

Next on the line is the option to make our editor a bit more friendly with: SublimeCodeIntel It’s A full-featured code intelligence and smart autocomplete engine for Sublime Text. Few of the technologies that are supported:
JavaScript, SCSS, Python, HTML, Ruby, Python3, XML, HTML5, Perl, CSS, Node.js, Tcl, TemplateToolkit and (of course) PHP.
From here there are many options.
Few the I’ve found useful:

• Git
• Emmet
• Terminal
• ColorPicker
• SublimeREPL
• LiveReload – Make your life easier with this live reload ability. It will save you a lot of clicks on the ‘reload’ button (or cmd+r).
• MarkdownPreview – I love markdown and this one is making me more productive with it.
• JSLint – If you are writing some javascript, this one is a must.
• DocBlockr – Create a new documentation block with a quick click. And yes, it will extract that function’s parameter information and pre-fill it in your documentation block. nice, no?
• Soda Theme – just to keep up with the cool kids on the block.

Make Your Web Forms More Efficient

Forms are the main ‘entry barrier’ to anything meaningful on the web. It might be a registration form, sign-up form or a shopping cart. In all of them, you wish to do the best in order to delight your users and lower the friction.
In the slides below, we will cover the best practices so your forms will rock.