I observe as some people still write ancient ES5 syntax of JavaScript and it’s disheartening. I wonder what keeps them from moving forward. Some must be driven by psychological inertia, but some likely just find it to complex to make their new syntax running in a wide range of browsers. In fact, nowadays we may not fear about it anymore. One can set up a dev environment where tools decide what transformations requires the code and what polyfills to load depending on selected target (list of user agents to support). The only thing one needs to start “a new life” is a proper setup. That’s what the article is about.

What's common among UI components like expandable, collapse, dropdown menu, tree navigation, popover? You can achieve all of them by using HTML elements details and summary. Moreover, you can leverage dialog element to build modals, overlays and dialog windows. You can utilize input types such as week, month, datetime, datetime-local instead of plugging in 3rd-party datepickers. You can make img element load images from different sources depending on viewport, DPI, mobile device orientation or browser support for new graphical types. Not all of these features are fully supported by popular user-agents. Yet we can enable them already with polyfills. So why struggle with outdated libraries for common repeating tasks? Why not embrace the power of standardized built-in browser elements? This article describes the new elements of HTML and shows usage examples natively and with polyfills.

When talking about modules in terms of JavaScript what come on the mind first are CommonJS and AMD. Yet, it's 2017 and we have the native module system in JavaScript. We have already Google Chrome, bundlers and loaders that resolve ES2015 modules. Besides by using Webpack we can combine dynamic and compiled modules to improve user response time. This blog post introduces the reader into JavaScript modules in general and into ES2015 module system in particular. It also explains how one can split the application into modules where some are bundled and some loaded on demand.

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

I've been working with Backbone for years and it suited me pretty well. I do love its conciseness. It gives the desired abstraction and yet leaves you at the full control of your app. When you need to know what exactly is happening in your app behind your code, it's matter of minutes to go though the Backbone annotated sources and figure out the flow. That's something you hardly can afford with other frameworks such as Angular, React, Vue or Amber. Besides it's ridiculously small - it's less than 8Kb without dependencies where the dependencies can be dropped if you go with Exoskeleton and Backbone.NativeView. I know that few today care about download size, but I do as it still affects the user response time.

As developers we spend a lot of our time on debugging and particularly on spotting the source of a problem. DevTools guides us though the call stack, but the tracing process can be still pretty time consuming, especially on a cascade of asynchronous calls. The remedy here is early problem reporting.

Modern application get complex, we cannot go without automated testing. The canonical agile testing quadrants are split to technology-facing and business-facing tests. As for technology-facing testing I believe nowadays everybody has dealt with unit-tests. Thus we make sure that the smallest parts of the system act as intended in isolation. Also we use component tests to verify the behavior of large parts of the system and integration tests to check if communication between object isn't broken. The entire quadrant is all about programmer low-level tests proving that the code meets all the design requirements. These tests are meant to control internal quality, to minimizes technical debt, and to inform dev-team members of a problem of early stages.

Business-facing (or acceptance) tests describe the system in non-programming terms and they ignore the component architecture of the system. Here we know testing techniques such as functional, story-based, prototypes, simulations. Apparently in web-development the most demanded approach is end-to-end testing. This one is performed on the application level and tests whether the business requirements are met regardless of app internal architecture, dependencies, data integrity and such. Actually we make the test runner to follow the end-user flows and assert they get the intended experience.

Nowadays JavaScript evolves fast. We have ECMAScript 6th and 7th editions released over just 2 years. the current support of ES6 specification in major browsers is close to 100%. So the language changed, and changed for better. It has become more expressive, much more concise and readable. It is tempting to jump into, but what about older browsers? Transpilers can translate ES.Next into the old-good JavaScript of ECMAScript 5th edition.

Then the question is which transpiler to pick up? Babel (https://babeljs.io/) is still on the rise, but look what is happening to TypeScript. Since it was chosen for Angular2 it is gaining its momentum. Why have they decided for TypeScript? Because it's much more than transpiler. TypeScript enhances JavaScript with optional features such as static typing, interfaces, abstract classes, member visibility and more. That's a completely new level, not available in plain JavaScript.

This book is for developers already familiar with JavaScript who want to level up to get the most out of the language. The book is practice–oriented and would be most helpful for those who is used to `learn by doing` as the topics are thoroughly covered with real-life examples and tutorials. This is an extract of a chapter not included in the book.

As you likely know, in addition to new syntax, HTML5 introduces powerful features and APIS that can be used with JavaScript. Some of them such as Web Storage, IndexDB, FileSystem, Workers, Custom Elements, HTML Imports, Shadow DOM and Templates we examine in the book. Here I want to share with you a few HTML5 API that you may not be even aware of. Nonetheless they may help you to improve UX in your web application significantly.

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.

Red Graphic

POZZZY

POZZZY is social system to aggregate entertainment, which has features of social news system (Digg.com), collective blog (Slashdot.org) and social bookmark system (del.icio.us). Pozzzy is an OpenID server/consumer, supports MicroID, Pavatar, hCard, XFN and FOAF.

Size of my contribution: idea, projection, programming

Site Sapiens

Site Sapiens is an enterprise content management system including web content management system (WCMS), web-application development environment, web-integration platform.

Site Sapiens has been chosen as CMS for projects of Russia, Belarus, Ukraine markets such companies as The Coca Cola Company, Renault, Elle, Mars.

Size of my contribution: idea, projection, programming (everyting except AJAX-framework and XML Sapiens processor program code. Since version Site Sapiens 3.1 I left the project and it is deleloping without me).

SAPID

SAPID CMS - is a freeware tool for site creation and management. SAPID is distinguished through the comfortable Ajax-based site structure management interface and high flexibility of design, content and functionality integration.

SAPID does not need DB (file-flat CMS). SAPID is inline CMS. It means that site documents are editable in a way "what you see is what you get", a document in delivery phase looks same as in administrative phase.

STC ATLAS

MySITE

MySITE - is the first full-function information space control system in Belarusian Internet. MySITE allows web-systems construction, management, scaling and change. MySITE does not require special knowledge for administration area user interface management. The system includes additional modules for management of a electronic catalogue, reports on attendance, advertising management, forums system management, interrogations and posting management.

Size of my contribution: idea, projection, programming

In year 2000 STC ATLAS (at that time a part of SoftLine Group) developed the following projects under my supervision: a web-site of Central commission of elections and referenda of the Republic of Belarus -"Elections 2000";Informational analytical server of Administrative office of the President of the Republic of Belarus.

In summer 2001 I had been offered to develop an electronic publications system MyPRESS.

It is a universal program complex which includes all basic functions of content control systems and allows creating and leading periodic WEB based editions. Sites management system MySITE has been created on MyPRESS basis in autumn.

ngBackbone is a small extension of Backbone.js that unlocks Angular-like programming experience

Well, I love old good Backbone for its simplicity and flexibility. However after working with such frameworks as Angular and React, I see that Backbone app requires much more code. Yet I don't want to ditch Backbone and deal with some 20K LOC framework codebase. I just want a minimal modular extension that will improve my programming experience and maintainability of my code. And that is how I came up with ngBackbone

byContract is a small validation library (1,1 KB gzip) that allows you to benefit from Design by Contract programming in your JavaScript code. The lib uses JSDoc expression for a contract. Therefore you likely already familiar with the syntax. The library is implemented as a UMD-compatible module, so you can use as CommonJs and AMD. Besides, it exposes byContract function globally when window object available, meaning you can still use it in non-modular programming.

NgAspect provides decorators @Before and @After that allow to bind an advice to a pointcut e.g. @Before( Class/Constructor, "methodName" ) or @Before([ [Class/Constructor, "methodName"], [Class/Constructor, "methodName"] ]). It also exports @Pointcut decorator that points out what method can be supplied with advices.

A function for asynchronous loading of non-critical CSS and deferring Web Fonts, which leverages localStorage for caching. When a new version of file supplied (app.css?v2) any old versions (app.css?xx) are being removed from localStorage automatically

Pragmatic CSS is guidelines for writing scalable and maintainable style-sheets. PCSS divides the whole UI into portable and reusable components. Every component is described in a separate CSS (SASS/LESS/etc) module. PCSS's naming convention makes it easier to locate a module corresponding to a problem and encourages developer on producing optimized object-oriented CSS.

This bookmarklet provides a controllable overlay with an image of page graphical design over top of the developed HTML. In fact it is similar to the well-know Pixel Perfect Firefox extension, which doesn't work properly with last Firefox builds for a while.

Usually we hide all auxiliary page components on mobile to save space of the viewing area. So we have to provide in return alternative navigation tool out of the screen. Since keyboard with navigation keys isn't available, we can use touch gestures.

JSCodeSniffer is a node.js application that checks JavaScript code style consistency according to a provided coding style, just like phpcs. One can define a custom coding style by using described below JSON notation or use one of predefined standards.

I have a strong belief that regardless of a programming language developer needs
a framework primarily for a consistent abstraction and the framework must not replace the language, but guide
developer throughout the code design

Interests

Software architecture, domain driven design

EcmaScript.Next, TypeScript, NodeJs

HTML5 + CSS3

Continuous Integration and Deployment

Curriculum Vitae

An accomplished web developer specializing in Object-Oriented Design and Analysis with extensive experience in the full life cycle of the software development process.

Designed and built Site Sapiens ECMP. Took part in development of more than half of hundred web-sites.

2007 - initiated and developed POZZZY startup. It was a social system to aggregate entertainment, which had features of social news system (Digg.com), collective blog (Slashdot.org) and social bookmark system (del.icio.us).

Developed a few dozens of web-project including some Intranet/Internet portals of Administrative office of the President of the Republic of Belarus. Initiated, designed and developed the first known CMS in Belarus - MySite

My duties included development of small business applications based on Clarion RDBMS. Created an interactive GUI extension (mouse control, pseudo-graphic) for Clarion using C /Assembler and applied to develop.