I always fancied to write a book that would combine most of my programming experience gathered over two decades. Packtpub gave a chance that I embraced gratefully. And here we are, half a year of efforts paid off and my book is live
It seems like these days the most trending concept in the HTML5 world is web components. But what the fuss is all about? In order to make such a simple thing as a container expanding on click in past we needed to write CSS and JavaScript. Today thanks to checkbox-hack and :focus or :target pseudo-selector we go on with CSS-only. In fact by using `summary`/`details` elements we do not need any tricks with CSS to make it working, considering that browser already supports this feature. Thus by placing this elements in the DOM we declare specific functionality, CSS is used for styling and JavaScript if still used only for extending the element basic behavior. That is how it is meant initially. However HTML brings just a few new elements what is hardly enough to replace all the custom plugins, libraries and snippets we use. But what if customs elements could be created by anybody? If source code, styles and markup could be kept encapsulated in a package? If the package could be included into HTML document by a link? It sounds almost like an industrial revolution. Just imagine that you need a slideshow on your page. So you add a link to a corresponding component and simply wrap your image slides with custom `img-slider` element. Thats it, you have a running slideshow. You want something else? Just search in the web-components repository. In the other hand you can switch to a UI library based on web components, e.g. Mozilla Brick and build the entire application with web components Exciting, isnt it?
That is in theory. I never have a grip on a new thing until I try it in practice. So I invite you to learn web components with me in practice.
As the variety of screen sizes and devices keeps expanding, Responsive Web Design (RWD) has become a baseline expectation rather than a nice-to-have. When the first HTML and CSS specs were written, RWD was not a concern. Since then, a lot of work has gone into providing native ways to achieve it.
This article presents hands-on examples of common RWD tasks implemented with W3C modules: CSS Flexible Box, CSS Grid Layout, CSS Regions, CSS Multi-column Layout. It also covers position sticky, the srcset attribute, and WebP fallbacks.
Few years ago only lazy didn’t say about bringing desktop application experience to the web ones. However in reality, it just meant that user actions didn’t always required page reload, but could change page UI dynamically. As for other application events, as a rule they were not handled dynamically.
Well, now you can find more and more web applications acting really like desktop ones. For example, Facebook and G+ have widgets which update automatically. You can keep the page untouched, but you will see anyway new status updates appear as your friends submitting. The same for notifications. Whenever a new one arrives, the counter changes and the notification list extends.
That seems to me as a trend worth to follow. I’ve been thinking of a solution to vivify widgets on my sites. Now I’m coming up with the following pattern.
Besides, already noted bidirectional communication channel, known as WebSocket, HTML5 propositions include also comet communication pattern by defining Server-Sent Events (SSE). WebSocket widely discussed by now, tons of server implementations are available and you can play already with fluent browser implementation under Chrome. However the second server-push technology of HTML5 yet stays in shadow.