Adhering to standards and taking advantage of the latest improvements in the specifications doesn’t guarantee good code, but it can certainly help.
. ES6 syntax is widely supported in browsers, and features like arrow functions and classes can make your life much easier ,yet many developers are either unfamiliar with or wary of using them.
Here are a few things you might not have known were possible with HTML or its associated APIs :
1. DISPLAY A COLOUR PICKER
this is a great example of how HTML5 is simplifying common tasks which would previously have required custom coding of a fairly complex UI component.
<input type=“color”> will display a visual colour picker when clicked, using a colour picker native to the device. This could be particularly useful with HTML canvas. It’s widely supported with the exception of Safari on mobile.
2. RECOGNISE AND SYNTHESISE SPEECH
These would once have been complex functions requiring specialised software, but they’re now being built directly into browsers. The Web Speech API has components which support text to speech and speech to text.
The latter of these will either use an online service ( Chrome uses the Google Cloud Speech API) or the device’s native speech recognition service. Expect to see this being used widely on mobile devices in the future.
3. VIBRATE YOUR PHONE
The unambiguously named Vibration API exposes a single function, vibrate(), which will do exactly what it says on devices which support it.
The function takes a list describing a vibration pattern as its argument. It’ll work on Chrome, Firefox and Opera, although you’re out of luck on Edge or Safari.
It’s reported that some ads are using this to attract the user’s attention, so the jury’s out on whether it’s actually a good idea.
4. DIFFERENT IMAGES ON DIFFERENT SCREENS
in which case your images will be resizing to suit the viewport. This isn’t perfect, since you’ll be forcing the user to download the largest version of the image then downsampling it.
Enter the HTML5
5. RE-COLOUR THE BROWSER USER INTERFACE
This can ofer a nice aesthetic touch on mobile platforms. <meta name=”theme-color” content=”#FFFFFF” /> is designed to instruct the browser to recolour the toolbar when viewing your site.
Unfortunately, it’s a little non-standardised, so while “theme-color” works with Chrome, Firefox and Opera, on iOS you’ll need “apple-mobile-web-appstatus-bar-style” only works in fullscreen mode