• Aug 18 Screencast from chapter `Debugging and Profiling` of my book `JavaScript Unlocked` Follow the link
  • Aug 02 Do you want simply import/include HTML blocks on a page? Here is the directive Follow the link
  • Oct 06 ByContract 0.0.5 released. ByContract is a small library that implements Design by Contract -like validation in JavaScript code, using JSDoc expression for contracts. From now it supports custom types (union/complex) declared in the fashion of @typedef JSDoc tag. Follow the link
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 You 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 Dialogs 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.

Making Browser Refresh in Response to Our Sources Modification

We all are taught not to repeat ourselves while coding.. Nonetheless we keep repeating the same operation over and over – pressing F5/Ctrl-R for browser reload every time we have to examine the results of our last changes. After watching some of Paul Irish screencasts where he was showing the magic of live reload under Sublime Text 2 I wondered if I could employ something alike while keeping working with my beloved NetBeans IDE. However in my case it wouldn’t be enough just to reload the page when any of watched files change. I need to compile SASS sources, combine atomic JavaScript chunks into a single module and sometimes flush the application cache.

Eventually I found a tool meeting all requirements I have.

Importing External Files in JavaScript

As JavaScript application grows, navigation on the code becomes a hell. It comes on mind how useful would be to have ability including JavaScript files. For example, thanks to include/require statements we can build an expressive file structure in PHP. Let’s say following PSR-0 standard we have one class per file (or one prototype object per file in JavaScript) and class name (namespace) reflects the location of the file where it belongs. Well, on server side (e.g. with NodeJS) that is achievable with CommonJS. Of course you have to export every object of a single file as a module, which is often not a module in fact. As for the client side, modular JavaScript implies that all the dependent modules load asynchronously and separately. If every object makes a module to load that sounds nothing like a good idea.