The latest version of HTML, HTML 5.1, has recently become a W3C Recommendation, which means we can expect to see some nifty new features available in our browsers quite soon (if they're not already available - the two examples I describe below are both implemented in my version of Firefox (v50.0.1)).
One new feature involves Context Menus, and introduces new elements
<menuitem>. With some simple markup we can now include links and options within a right-click context menu.
Another nice addition is elements for
<details> section will automatically be hidden except the
<summary> content. Then clicking the
<summary> text will toggle the rest of the
Check out What’s New in HTML 5.1 for more info and working examples.
Fuse.js, a lightweight fuzzy-search library. Returns
json instantly as you type.
FLIF, an alternative lossless image format for the web that outperforms PNG and WebP.
Faster websites with HTTP/2
Since Google paved the way for HTTP/2 with SPDY, the future is looking brighter for web developers. HTTP/2, the new protocol that will replace HTTP/1.1 (which was published in 1999) will help to make websites load faster while bringing an extra layer of security.
Although not a requirement, ensuring your website uses Transport Layer Security (TLS) is the recommendation given by Rachel Andrew in her article Getting Ready For HTTP/2: A Guide For Web Designers And Developers. As well as gaining an extra notch on Google's indexing radar, it means your website content (and any form submissions from your site) will be done so securely by encrypting the data passing between your server and the site visitor.
Multiple Simultaneous Requests
HTTP requests are cheap in the world of HTTP/2.
Switch to HTTP/2 today?
Two things are required to start using HTTP/2 today:
- Your server needs to provide the software that supports HTTP/2
- The browsers your website visitors use need to support HTTP/2 *
* shouldn't be a hurdle as all major browsers support the new protocol.
Daniel Sternberg has written a useful looking free ebook called http2 explained which goes into all the details you need to know.
In The Future of Loading CSS, Jake Archibald takes a look at how best to load CSS. Up to now, as CSS normally blocks page rendering, we've usually combined all styles into one file and loaded them after the main content has been downloaded. However, an update to the Chrome browser, bringing it into line with Microsoft's Edge browser, could help to change CSS loading best practise. The general idea is that we load multiple smaller CSS files that in turn render the content that directly follows it, resulting in a more progessive page render.
Craft looks like it could be a useful plug-in for Photoshop. It lets you grab real data from external sources (i.e. websites or your own data sets) to use within your mockups.
SuperPNG is a free, open source plug-in for Photoshop that lets you save transparent PNG images to the absolute minimum file size. Works a treat.
Tiny Colorpicker is a very handy looking utility for selecting colours in a form. Uses jQuery or vanilla JS and lets you use any image to select a colour from.