• Apr 13 "A few things you need to know about CSS" slides from an internal master-class Follow the link
  • Apr 10 Extension for Backbone Event Emitters with the `all` method to subscribe on parallel (async) events like Promise.all() Follow the link
  • Mar 17 #javascript MicroRequireJs 1.0.0 released. Now fully re-factored and astonishingly small (728B gzipped) Follow the link
Responsive Web Design: Best Practices for Improving Performance

User are impatient. Majority would leave a resource if it failed delivering the core user experience in 1-3 seconds. Today when mobile overtakes fixed Internet access you need to think of how the app loads on a low bandwidth, what images must requested on what devices, how stylesheets and JavaScript are cached e.t.c. Fortunately there a number of amazing tools such as PageSpeed Insights, WEBPAGETEST, Pingdom Website Speed Test. So you can find out what's wrong with your app in terms of web-performance. Chore DevTools emulator gives an idea how you app renders with different connection speeds. As you see there are many ways to discover if you have performance issues and what they are. But that brings to the question “how to solve them?”. Here I am to share my experience.

Automated CSS regressive testing in practice

We write unit-tests tests for server-side source code and for JavaScript. Even when putting aside benefits of TDD approach it gives us a priceless thing – early problem reporting during refactoring. So you make change, you run tests and you will know at once if anything broke. What about CSS? You encapsulate a declaration set into a separate rule, look through the site pages where dependent classes used and satisfied proceed with refactoring. After finishing your work you test the site thoroughly, opening every page, every modal, drop-down and expandable. Now you find out that on the very first change you broke the styles of a component that shows only by user action so missed it back then. It turns out that refactoring decision wasn't quite good. But it's late to change.

If only we could go with automated testing... In fact we can.

Modularizing and Packaging JavaScript for Scalable, High Performance Web Apps

JavaScript applications have been growing in size and complexity increasingly over the past years. That brings new requirements for code maintainability where encapsulation gets crucial. While AMD implementation of modular design in JavaScript is wide-spread, CommonJS Modules/1.1 is are mostly used for server-side JavaScript only. Nonetheless this standard can be applied beneficially in-browser a well. Precompiled CJS has its advantages. Besides cleaner syntax comparing to AMD approach it may boost the performance of one's application by reducing the number of HTTP requests while the code stays well-grained. Here we are going to talk on how to achieve an efficient JavaScript code design by using CommonJS compiler.

10 things to need to know about CSS

CSS may look as a simple language. In fact it can be simple only to use, but definitely not simple to maintain.Everybody who used to work on a large-scale projects knows how hard it can be to keep constantly growing CSS sources readable and consistent, styles reusable and loosely coupled. Moreover while going responsive web design (RWD) we also deal with increasing cyclomatic complexity. Learning from own experience I collected 10 vital principles that help turning your styles into efficient and highly maintainable code.

Creating a web-component: VanillaJS vs X-Tag vs Polymer

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. That's 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, isn't 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.

Fancy Modal Windows without JavaScript

This article provides a walkthrough on how to create a modal window that opens in the center of the screen by pressing a link while everything that underlies the window becomes blurred without any JavaScript. It also has a fallback code for the browsers not supporting :target pseudo-selector.

JavaScript MV* Framework - Making the Right Choice

JavaScript frameworks have been proliferating recently with a frightening rate. Just take a look at TodoMVC that provides dozens of MV* framework-specific implementation for a single task. It gives a felling how must be confused a developer making a choice for a framework.

Some time ago I even ran into a manifesto ( against JavaScript frameworks. I do not completely agree with the author, yet he has a point – it’s too many of them, too many of meta-languages to study that you as a web-developer may not need at all. Most of the frameworks contain plenty of code (AngularJS - 22K LOC, Ember.js – 43K LOC) and if you hope to know what is really going on in your application you have to study every line of this code. Let’s assume 3-5 of the trending frameworks are thoroughly tested by the communities, but what about others? Are you ready to spare days and weeks digging in someone’s code looking for traps and leaks in there?

Modular JavaScript in the browser with CommonJS Compiler

JavaScript was designed as a script language that is easy to embed in a larger host system and meant to manipulate the objects of the host system. With the advance of HTML5 formerly mostly static web-pages are turning into sophisticated web-applications. Now we expect JavaScript code to be scalable and modular. But how when JavaScript has no built-in facilities to combine distinct scripts?

Responsive Web Design with HTML5

While the variety of computer monitor shapes and sizes steadily expands Responsive Web Design (RWD) is rather a matter of survival. It's hardly someone was thinking about RWD when the first specs on HTML and CSS where written. However now a lot of work done to provide a native way of achieving RWD, to bring fast and consistent solutions.

This article presents hands-on examples of generic RWD tasks implemented with such W3C modules as CSS Flexible Box, CSS Grid Layout, CSS Regions, CSS Multi-column Layout. It also demonstrates use of "position sticky", srcset attribute and fallbacks on webP.