The TAB is OCC’s Technical Advisory Board, made up of representatives from OCC’s project and product groups. The TAB’s role includes reviewing technology developments and their impact on the company’s software development.
Articulate.js
Articulate.js is a simple, free (MIT license) jQuery plugin that uses the Web Speech API to speak the content of a web page. This could be useful in a broad range of circumstances, but particularly as an assistive technology for those that have problems reading text on a screen. The examples on the website show how simple it is to add a button the user can click to read the content of a page aloud.
No client software is required and there is support in Edge, Chrome, Firefox and Safari, but not IE, so it is a matter of progressive enhancement.
OCC MarketPlace, as an example, often has interest from customers asking whether such functionality can be included. In the past the only answer has involved costly software and/or client installations. Now there is another option.
Consider Articulate.js as a simple addition to your web application if there would be value in providing greater accessibility to your site’s content.
The end of clearfix?
The next versions of Chrome and Firefox will be supporting a new CSS property: display: flow-root. Adding this property to an element will make it a block element that will “self-clear” (that is, properly contain) any floated content within it.
This means developers no longer have to make use of hacks to perform this clearing, such as the commonly used “clearfix” hack, or the simpler option of setting overflow: hidden, which has its own problems.
Flow-root will be a simple and standards-compliant solution to an every-day problem. Find out a little more.
As with most new CSS functionality, there is no harm in using it straight away, although until we see Edge/IE support you will need to keep using clearfix as a fallback.
The next generation of CSS authoring
Using Sass to author CSS is now an established process in OCC, and it helps greatly to add useful programmatic features to a fairly developer-unfriendly language.
The front-end world never stays still for long though and TAB is monitoring what the next generation of CSS authoring looks like.
PostCSS is a tool for transforming CSS with JavaScript. The tool itself (which you add into your build pipeline via gulp/webpack/etc) doesn’t really do anything apart from allow developers to produce and use plugins to solve problems. So PostCSS does not do the same job as SASS, but its plugins can, and more. Let’s look at some of the most popular plugins:
- cssnext allows you to use future CSS features today and outputs CSS that will work in current browsers; this means you can learn and use a wide range of upcoming real CSS features now, including nesting and variables
- precss contains plugins for Sass-like features, like variables, nesting and mixins, if you prefer to work that way
- utilities gives you loads of useful shortcuts to things like clearfix, CSS triangles/circles, resets, etc
- cssnano is a modular CSS minifier
- lost is a feature-rich grid generator
- stylelint checks your CSS conforms to a set of code style rules you’ve defined
- stylefmt is a tool that automatically formats CSS according to stylelint rules
- doiuse checks your CSS for browser support, using data from Can I Use
- colorguard helps you maintain a consistent colour palette
You can also use PostCSS to transform styles written in other syntaxes such as SASS/SCSS or even React – so you can continue to write CSS the way you are used to if you prefer, but add in the power of PostCSS’s plugins on top of that.
If you do front-end development then now is a good time to try out PostCSS and see what problems of yours it can help solve. Let TAB know how you get on!
CSS Grid
CSS Grid Layout is a new addition to CSS and gives it its most powerful layout system:
- it supports multiple columns and rows
- unlike flexbox or floats, which only really dealt with aligning content in a single row or column; Grid, though, is not a replacement for flexbox; they are good at different things
- it defines how your rows and columns should expand/contract with the browser window
- it allows you to assign your content to spread across the cells of your grid as necessary, in whatever order you want
For those of you who have used grid layouts (including the old tables-based layouts in HTML) in other technologies, you will find it familiar.
It’s an incredibly important addition and makes advanced layouts on the web far easier to achieve. Take a look at some examples of layouts that Grid will make trivial: http://gridbyexample.com/examples/
The good news is that Grid is ready to use now! It is supported in all modern browsers, including IE11, and even IE10 if you need to support that. Note that IE has implemented an older version of the specification, which means a bit of extra work.
If you work on web applications you need to familiarise yourself with what Grid can achieve so you know what is now possible. If you do front-end development you need to begin learning how to use it. From this point on, the answer to many CSS layout questions will be to use Grid.
HTTP/2
HTTP/2 is an update to HTTP with some really important improvements:
- multiplexing – allowing multiple requests to be sent on the same connection means we no longer need to worry about how many http requests a site makes when it loads; no more image sprites, concatenating CSS/JS files, etc
- prioritising assets – (aka stream dependencies) choose which assets should be sent by the server first
- header compression – drastically smaller overheads on each request
- server push – servers can now push resources to the browser without a request
- TLS only – all HTTP/2 sites will be secure
HTTP/2 is supported by all current generation browsers (including IE11 but only on Windows 10) and is backward compatible with HTTP, so if an older browser were to request your site it would work fine.
HTTP/2 is used by default if you’re running IIS on Windows 10 or Windows Server 2016.
If/when your web app is going to be running on Windows Server 2016 or Azure then make sure you’re aware of the improvements and make use of them.