Online Editors For Web Developers

One of the most powerful aspects of the web is the ability to share your ideas and work with others quickly.

Over the years, I tried several options to share code and do demos. It’s true that you can always start your own server and serve your site, but in many cases, you want to focus on your demo and not do administrative work again and again. Here are some tools that I enjoyed using and I still find myself returning to check them from time to time. In most of them you got a nice ability to move (even) faster and to use GitHub for your code.

How To Build A Progressive Web App That Works Everywhere?

Progressive web apps are a huge opportunity for businesses. They are all about an amazing experience and make the user productive from the first visit. We wish them to be fast and reachable everywhere. I wrote in the past on ‘How to build a PWA‘ – But in this post, I will address the issues we face with the gaps in browsers. After all, this is the web and not all browsers are equal in terms of spec (ServiceWorker API) implementation. I see you smiling after the last sentence… That’s good.

There are 3 main parts that we wish to implement:

1. Offline capabilities.
2. Push notification.
3. Installation.

Let’s see what can be done in each part.

Offline

This is the main feature that let us ‘feel’ more like a native app. The user can be productive everywhere, with or without a network connection.

The good news is that Chrome, Firefox, Opera and UC browser are all supporting service worker. This is the API that enables us to give our users the magic of offline capabilities. We even know that Edge will support it soon.

The (big) elephant in the room is 
What can you do about it?
Treat network as a feature, and use Web Storage API to cache content. Your web app will require network connection to load, but then treat the network as a feature. You can use AppCache. It’s a deprecated offline spec, but you can use it to buy time and give your iOS users an offline experience. Make sure you are using it only on a single page app as it got lots of ‘douchebag parts’.
Here is an example of a web app that works with app cache. I’ve created it during 2013, so please take it easy.

The Next Billions Users

This is a short one that is mainly compose from 3 images that tell the story of “The next billions users” and what we should focus on.

From which countries new users will come online?

If you wish to see more about this data. Check this Source.

What to focus on?

When you develop your fast and resilient web app, you should focus on 4 aspects:

How?

The client must be able to render the application regardless of their connectivity. If the user can’t load the app, nothing else is important. Offline is a normal mode of operation for resilient applications. You can do it today with the Service Worker API. It’s not only the offline feature, but the ability to control your users’ experience and improve it (e.g. push notifications).

More in Ilya’s #IO16 Talk and right here.

Amp Overview Talk #YGLF

An overview of Accelerated Mobile Pages Project at YGLF 2016.
See how you can leverage this important open source project today in production and improve your sites’ performance and the happiness of your users.

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!

Progressive Web Apps – Noter

Progressive web apps are the future, and here is a demo that I built in order to feel the current challenges.
How about a little tool that let you take notes?
Yes, not too original, but still useful.

It is currently can be found with 2 versions:

1. Basic version – It contain service worker for offline, manifest and a simple text area. All the basic functionality, that allow you to take notes the are saved automatically with or without connection. I used jQuery and bootstrap to keep it simple and to make it easy to extended it in the future.
2. Full version with Firebase – Similar to the basic version, but this time, I added the ability to save the notes in the cloud (=firebase). You can add notes, edit current ones and (of course) delete the ones that you don’t really like. The text area was upgrades to a markdown editor. A simple one, but still something that will give you the ability to get a preview of the note in a markdown.
   You can use:
   User –  demo@demo.com
   Password – demo

See below how it will look like after you login.

It’s still “work in progress” and you can see at the current TODOs at the bottom of the code repository.

Challenges and Tips

You can see the main tips that I got from working on this demo in the image below.
The most important checkbox is “force update on page load” – It will make sure you are getting your new version and not the one that the service worker already cached.
Another good way to see what is going inside your service worker is to click on the link ‘sw.js’ above this checkbox.

 

So to wrap-up, the code for this demo can be found at Noter on github and the live demo.
Please try it on your Android and let me know if you find something that is broken or can be better.

Happy note taking and may you always write good and productive ones.

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:

2015 Year Summary – Code, Books And Running

Overall, it was a very interesting and busy year. A quick overview on some of the fronts that kept me busy.

Code

On the coding front, it was a year that the ‘progressive web app‘ revolution started. It will be interesting to see what developers will build during 2016. You can see the main projects that kept me busy on this blog (e.g. monetization, startups, web forms) and on my project site. It always great fun to meet developers around the world that are passion on the same topics you are. Here are a few presentations that I gave.

I started to push the monetization efforts, both in code (e.g. like this demo or this article on Autofill) and with two courses with Udacity . Check out the courses, they both great (and yes – I’m totally objective on this one).

Running/Biking

On the running front, I had the pleasure to run all over the world. From “down under” to Europe, San Francisco, New York, Barcelona, Paris, London and even in the holy land. On the cycling part, I had the pleasure to participate in 110mile event that few good friends in CA organized – It was one big loop, from Mt. hamilton to Livermore and back. There were also, a lot of good rides in Ben Shemen and other woods.

Design Better Forms

TL;DR

Make your forms as short as possible. The best form is no form. If you must have ‘few’ fields, make sure you optimized for Autofill with the right autocomplete attributes. As you can see in the image above, it’s moving the needle, for real.
Now, if you have another 4 minutes, here are few points to think while you are designing you next form.