Stickers

  • May 21 Collection of essential Grunt tasks to ensure quality of PHP code Follow the link
  • May 17 Nice guide through Jekins installation on Ubuntu Follow the link
  • Apr 18 Prism syntax highlighter extended by PHP language definition Follow the link
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.

Making use of HTML5 Forms

Since the very beginning of HTML there were no much of changes regarding forms until recently. Yet, there was an attempt to bring a new API with XForms, but it was never really supported by any of major browsers. Now we have a comprehensive consistent Form API which allows us to create full-fledged forms even with not help of JavaScript. Everything sounds so exciting until you try to use HTML 5 Forms on real projects.

Bringing Google Analytics Reports to Your Application

Reasonably statistic analyses belong to CMS ACP reports. So, CMS vendors tend to include some into their products. However, they often make statistical data collection and analysis a part of CMS. It usually gains some primitive reports and affects application performance. I believe any sound statistic analysis can be delivered only by a dedicated specialized application. Meantime CMS can be used to represent the reports prepared by that application. Have you ever fancied displaying Google Analytics Reports in your CMS?

JavaScript Asynchronous Dependency Loader

A substantial web application doesn’t need to wait until all the required JavaScript libraries loaded. Usually most of them can load asynchronously and start acting whenever they are ready. Most commonly used approach here would be AMD. That’s a sophisticated and time-proved solution. However to use it with libraries, you must have them converted to modules. I don’t appreciate the idea to interfere with 3-rd party library code. At the same time I still need non-blocking loading and dependency being resolved in my code. Thus, I worked out a very simple, but yet working solution.

Review on JavaScript Unit Testing

As client-side application is getting more and more complex, front-end automated testing is more in demand. Before deployment we have to validate HTML according to given DTD, lint CSS and JavaScript, run performance tests, run unit-tests and do functional testing. Front-end unit testing has its quirks. We have to run tests on every browser and platform defined by our requirements. That is supposed to be automated and it's no easy task. There two widely spread approaches applicable in CI: Selenium Remote Control, which fires up any number of browsers, navigates to specific pages and performs tests and TestSwarm, where any number of clients listen for testing tasks on the server, perform test when requested and return results back to the server. As a budget solution, one can use Rhino with env.js, which emulates a the common browser environment.

Besides, JavaScript units don't often fit the model "assign function arguments and check the result code". Let's take a generic widget. It is being fired on some event (e.g. DOM is ready), gets references on required nodes by provided selectors, modifies DOM if necessary (render UI), subscribes handlers for specific events (button clicked, control value changed, key pressed). Thus to test a widget, we have to make a fixture emulating some initial state of DOM, check if the widget managed to find all the required nodes, check if it modified DOM as intended and trigger events to check handlers, provide mock end-points for Ajax-requests.

Harmony with TypeScript

Not so long ago Microsoft announced a new language, targeting on front-end developers. Everybody's first reaction was like "Why on Earth?!" Is it just Microsoft darting back to Google? Is that a trick to promote their Visual Studio?

But anyway, what's wrong with JavaScript? Why everybody is so keen to replace it? JavaScript for a language designed in only 2 weeks is freakishly powerful and flexible. But JavaScript still has its bad parts.