Making design responsive means not only certain representations on different screens, but also particular behavior on different devices. Usually on mobile devices mouse is not available, keyboard with navigation keys is out of reach. So we are short of controls to provide a useful navigation.
Let’s take image viewer. User taps a thumbnail and gets an overlay with the image. We don’t have much screen space on the smartphone. So the image goes fullscreen. Well, how is the user supposed to close the overlay? On desktop we would place close button on the frame. Besides, we would use Esc and any click outside the frame. Here on mobile we just have this fullscreen image and no keyboard. If we place “close” button on the image, it will hide a part of image. Let’s add to the list “previous” and “next” buttons, all big enough to tap easily by a finger. So what are we to do?
A few months ago I bought a new Macbook. I’m really fond of the development environment I set up on it. The more I work with it, the more I love it. However, while building the environment I couldn’t find any decent step-by-step manual. So, it took me for a while to get what I wanted. Here’s my experience
I went through the specification and started writing design pattern examples on TypeScript to get a feel on the language.
Automated testing is an essential part of application life-cycle (see Continuous Integration). In web-development we usually test: Back-end (*Unit-tests), Front-end (HTML/CSS validators, JSLint/JSHint, CSSLint, YSlow etc) and UI (functional testing). Unit-testing (Back-end, Front-end) is about checking if all the application components adhere the technical design requirements. Every unit-test simulates the application environment on which runs. Functional tests are to determine if the application as a whole ecosystem has no flaws. They run on a copy of real application environment and show if everything is ok from user prospective. You can see it as an automation of QA-engineer routine where it is possible. For functional testing widely used such frameworks as Selenium, Windmill, Twill, BusterJS. Though, if you use qUnit for front-end unit-testing, you may love the idea to use the same tool on functional testing. jQuery provides an incredible API for DOM manipulation. It can be amazing tool to simulate user behaviors and check DOM reaction.
You know, when coupling is not loose, components depend too much on each other. It makes your entire architecture fragile and immobile. You can check how loose the coupling is by making a unit test for a component. If you have no problem substituting dependencies by e.g. mock objects then everything is ok. Let take a model class. It depends on DB connection, here Lib_Db_Adapter_Interface instance. We cannot just create DB adapter instance within model constructor, because it depends on configuration data which don’t belong to the model. We can pass to the model constructor a settings array with DB configuration data.
Design by contract (DbC) is an approach in application design, which originally came from Eiffel, but now widely used on different languages (particularly in Java). In real world one party (supplier) makes an offer for an agreement (business contract) and another one (client) accepts. The same way can be described relations between objects in software engineering. As a declared agreement is accepted by the client object, the last one is expected to keep its rules.
In my previous article among other patters I was telling about Flyweight. That is about the objects designed so to minimize memory use by sharing as much data as possible with other similar objects. You can find plenty of Flyweight implementation examples in Internet, though it will be mostly variations of Multiton, a collection (map) keeping only instance per every identical object. And I decided to follow that unwritten rule as it seems to be the simplest way to show the idea. In some cases it is much more efficient to share not the instance itself, but weighty parts among the instances. Imagine, you have user object containing properties and methods relevant for any user. However registered user has extended set of properties and methods. Moderator or admin contain even more.
Unified account management that involved multiple 3rd party authentication services.
Cronjob that listened for in-game events, stored telemetry data, extracted views for leaderboards, player profiles and for re-play visualization tool.
Social networking tool (Like post/comment, friend/unfriend, social activity notifications)
Inline content management
E-mail marketing subsystem
integrated Human Resource Management subsystem
Size of my contribution: information architecture analyze on early stages, technical design (UML, documentation), PHP (on Zend Framework) and JS (on YUI3) project component development.
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 is an enterprise content management system including web content management system (WCMS), web-application development environment, web-integration platform.
Web 2.0 Technological Foundation: AJAX, RIA, SOA
Leading program methodologies: AOSD/AOP, XML Sapiens, TDD, Replicating DB Architecture
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 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.
Size of my contribution: idea, my share of projection and developing ~ 50%, promotion, cretion of sapid-club.com, special editions SAPID SHOP, SAPID Gallery, SAPID Personal Site).
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
Aspect-oriented programming suggests separating cross-cutting concerns (logging, caching, monitoring, data validation, error detection and so on) from main business logic. In brief it introduces:
advice - code implementing cross-cutting concerns
pointcut - when code where in your main code advices shall be applied
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.
Page navigation using touch gestures on mobile devices
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.
I'm passionate about software product quality, particularly code architecture.
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
Software architecture, domain driven design
EcmaScript.Next, TypeScript, NodeJs
HTML5 + CSS3
Continuous Integration and Deployment
An accomplished web developer specializing in Object-Oriented Design and Analysis with extensive experience in the full life cycle of the software development process.
Information Architecture: including metadata standards, classification schemes, knowledge of representation
I have experience with almost any technology of the Web Platform and with wide range of modern tooling
While creating web-apps I'm taking advantages from with such concepts as Progressive Enhancement, Responsive Design, Progressive Web Apps, Web Components
Databases: Understanding of SQL and database design, developing entry-relationship diagrams and specifications (UML)
Libraries and frameworks:
Platforms: MacOS, Ubuntu, Windows
Belorussian National Technical University
CRYTEK GmbH(senior web developer)Frankfurt am Main, Germany
PHP5 remote APIs such as Google, Facebook, Twitter, Gamespy, automated building with ANT/Grunt, CI-server Jenkins
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).
2006 - designed and built Site Sapiens 3.0 ECMP
2005 - PHP Programming Innovation Award October 2005 Winner of PHP Classes
2005 - created once popular Open Source CMS SAPID (sapid.sf.net)
2004 - wrote the specification of language XML Sapiens for CMS developers
2003 - designed enterprise information area management platform Site Sapiens
since 2003 - Senior web developer at Red Graphic Systems company
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
2002 - deputy head of Stc. Atlas studio
2001 created site management system MySITE
2001 created electronic publications system MyPRESS
2000 – 2001 - head of web-development InternetService studio
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.
1993 – 1994 - programmer at BelarusRezinoTechnika joint-stock company (http://www.aobrt.by/en/)
1989, 90 – twice winner of All-Union contest for programming innovations and Soviet Union schoolboy conference member. Winner of the All-Union Lenin’s grant.
Speaker at the international congress PHPconf’2005
Speaker at Internet-forums by’99, by’00, by’01, by’02, by’03, by’04
Speaker at the international e-commerce congress etp'2001
Participant in broadcasts programs on the Belorussian TV and national radio as an Internet-technology expert