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.

Browsers And Their Capabilities

The web is by far the biggest platform out there.

It’s everywhere or at least it’s on the way to be everywhere. From powerful cutting-edge devices down to devices that can do nothing more then send few bytes of information.

However, this pluralism of ways to consume this information bring a challenge to web developers. We need to understand what are the limitations and what are the capabilities of the browsers that will run our work of art.

Here are set of tools that will help you with that challenge.

Research

• chrome status – Web platform feature support and examples. It’s a great way to see what is coming up… and try to test it today in Chrome Canary. You can also check blink-dev forum. Blink is Chromium’s rendering engine so I found some very interesting discussions.
• status modern ie – Like Chrome Status but for Edge and Internet Explorer. It gives you the current status and the roadmap.
• ES6 compatibility – From server side to browsers. Learn what will run and where. After all, the common technology to ‘run’ things is javascript. OK – ECMAScript, fine.
• caniuse.com – Mobile and desktop browser capabilities.
• what web can do today – Stuff that your browser can do, with links to demos and information about browser support.
• mobile html5 – A table that contain features per mobile browser.
• If you testing a new browser for its CSS3 support this tool will do the work for you – css3test.com

Progressive Web Apps For Startups

Today I gave a talk at our Startup Space in San Francisco to a group of startups from Mexico.

The goal of this talk was to expose young entrepreneurs to the power of the web platform and how they could leverage progressive web apps in order to improve their businesses. The first section is talking about ‘startups best practices’. Since most of them are in their first steps, I figure it would be valuable to them to hear what they can do better.

The second section is telling the story of progressive web app revolution and how it can help them.
The TL;DR is in the picture below.

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.

From AMP To PWA

The slides from my talk today at Google IL office.
It’s all about building a great mobile experience for your users.
From AMP (=Accelerated Mobile Pages) as a starting point up to PWA (=Progressive Web Apps).
As a bonus, we also showed new APIs like: Payment API, One Tab Sign-in and Physical Web that expending the web even farther.

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:

Chrome 48 Updates And News

As every six weeks (more or less), we got some cool & new features in Chrome. Here are few that I like for version 48:

Presentation API

This version of Chrome Android allows websites to present to external devices via Cast, increasing the form factors available to sites that want to present content. You can also present from your desktop with this Cast extension.

Custom buttons on notifications

Timely, personalized notifications save users the effort of manually checking for updates throughout the day and have enabled a host of new experiences from real-time communication to live updates on breaking news.

Password Forms That Browsers Love

There are two types of common forms that you see every day on (almost) every website: Sign-up and Sign-in. If you want to improve your users experience and allow them to fill these forms quickly and efficiently, this post is for you.

You can help ensure that browsers’ password management functionality can understand your site’s sign-up, sign-in. All it take is a ‘touch’ of a change for your password forms by enriching your HTML with a bit of metadata.

Here are the rules to follow:

High Conversion Web Forms

Last week, my new course “Building High Conversion Web Forms” was launch on Udacity. I had the pleasure to work with Cameron Pittman on this course and I hope you are going to like the outcome.

Let’s take one (I promise not two) step back, and think about forms. If you think on any meaningful experience on the web today, you will find out that it comes with a form. It might be a shopping cart, registration form, survey or even every login form. If it’s valuable, most probably it got a box that wish someone will fill it with information. Whether it’s a form made of text boxes, toggles, buttons, checkboxes, or touchable widgets, web developers need to be purposeful about forms to make users happy and increase conversions.

In our course, you’ll learn best practices for modern forms. It’s not just ‘watching’ videos. You’ll practice your skills along the way with a few self-directed projects, including an e-commerce checkout and an event planner app! As a special bonus, you’ll also watch a series of interviews with Luke Wroblewski, Google Product Director.

Chrome 45 New Features

Time flies!
Since my last update on Chrome 44 we had the chance to see the market crash and quite a lot of new features that were baked into Chrome 45.
The main improvements you should take a closer look at:

• A set of new ES2015 features including:
  • Arrow functions – Arrow functions are always anonymous and effectively turn function (arguments) { expression } into arguments => expression.
  • New methods on Array
  • New methods on TypedArray
  • Object.assign() copies the values (of all enumerable own properties) from one or more source objects to a target object.
    It has a signature of Object.assign(target, ...sources)
• SMIL is deprecated – to learn more please check out the discussion.
• This (long time) bug is fixed.
• Web Bluetooth is now available in Chrome OS 45.
  It’s still in Developer Preview and the team is actively looking for developer feedback.

Chrome for Android Media controls
On Android, native apps can show media controls in a system notification when playing audio, making it easy for users to control audio while multitasking. Chrome 45 brings this capability to the web by showing a notification with media controls when audio is playing in web content. The controls will automatically show up when <audio> or <video> tags play audio longer than 5 seconds. It will look like this: