Stickers

Nov 03
We have an open position for a full-stack web-developer in our team to work on challenging RWD and multiplatform HTML5 projects bringing the awesomeness of Crytek games to the Web Follow the link

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.

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.

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.

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.

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.

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 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 (bitworking.org/news/2014/05/zero_framework_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?

In spite of most server-side languages JavaScript was not designed for templates. Yet we have plenty of template engines for client-side JavaScript now. They allow us processing templates, but what about declaring a template?

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?

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.

Age of Web 2.0

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

Age of XML Sapiens

XML Sapiens is an XML-based language used for describing of web-application data, presentation and functionality composition.

XML Sapiens allows to prepare a set of data structure declarations, content field type set, functionality and use all of them within site designing. Reusing of those components reduces costs of web-development and lets to avoid low-level programming.

Size of my contribution: idea, projection, specification developing

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.

Age of 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

Prehistoric epoch

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.

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.

The plugin turns your markup into a slide-show with a set of fancy configurable transition effects. The plugin tries to render the effects with CSS3 transitions. However if the browser does not support CSS3, the same effects will be achieved by JS.

Every available effect is encapsulated into a separate module. One can remove redundant effect modules from jquery.t-effects and leave the only code responding to his requirements.

That is a jquery plugin, which emulates HTML5 Form behavior on old browsers.The plugin also allows to customize form submission validation tooltips and field validation callbacks (e.g. via XMLHttpRequest).

Either you likely provide already sharing buttons to you blog posts or not, you may be interested in this light-weight solution. Why? Because it’s fancy, it takes very little space on your page and it is so easy to attach.

Have you ever noticed Google+ has an amazing feature called Google Feedback. You click on feedback highlight an area of the site page and getting screenshot with your marking on it sent to the Google support team. If you wonder of having this tool on your own, just take my code and adapt for your requirements.

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. Thus my current approach is: Vanilla JavaScript as CommonJS modules abstracted by ExoskeletonJs (See how-to),
Scss/Compass styles following SMACSS conventions, semantically meaningful HTML and
domain-driven PHP-backend.

Interests

Software architecture, domain driven design

JavaScript, NodeJs

HTML5 + CSS3

Continuous Integration and Deployment

Test-driven development / BDD

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.