Stickers

  • Sep 17 Drastic performance optimization in CommonJS Compiler by github.com/igor-bezkrovny. Time for: npm update Follow the link
  • Sep 12 After studying a dozen of conditional Media Query mixins in SASS I came up with this gem Follow the link
  • Aug 29 Slides: Tooling JavaScript to ensure consistency in coding style Follow the link
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.

Review: PHP Application Development with NetBeans

Recently I've laid my hands on a copy of "PHP Application Development with NetBeans" by M A Hossain Tonu (www.PacktPub.com). It appeared to be a really nice reading. One of those where it's hard to put the book down until the end. It must be valuable as for beginners as for experienced NetBeans users. I, personally, have been using NetBeans for about 4 years and still find in the book the features I wasn't aware about or unfairly ignored for so long. Yeah, NetBeans is like an iceberg. At the first glance it looks quite simple, but the deeper you are, the more layers you discover. After years of usage you still can run into an overlooked tool which remarkably boosts your coding productivity. In order to avoid the case "Why didn't I use it for all this time?!", I would even call it as a must-read book for anybody working with NetBeans. Besides, covering the common facilities of NetBeas the books provides comprehensive input regarding automated-testing flow, version control integrated tools on Git example, PHPDoc practices and API-documentation generation.

Tuning site navigation for mobile devices

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?


My lovely Mac OS X web-development environment

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

Getting started with TypeScript

After Microsoft released TypeScript I took a look at their examples and found the idea pretty promising. I do love JavaScript. However, it has its bad parts. JavaScript doesn’t provide any built-in facilities to declare interfaces or object abstraction. There is no explicit way to have type annotations and type checking. Well, even class-based OOP is not a part of the language. Flexibility of JavaScript is incredible. So, there are tons of libraries meant to work-around these inconveniences. It hardly helps with code readability. At the same time TypeScript is a separate consistent language, which is, nonetheless, first and foremost a superset of JavaScript. You can use regular JavaScript within TypeScript and TypeScript is being transformed to JavaScript by TypeScript compiler.

I went through the specification and started writing design pattern examples on TypeScript to get a feel on the language.

10 things you need to know about JavaScript

JavaScript seems so simple that many people don't even bother to learn the language while using it. And yet it works! However, it turned out to be one of the reasons why JavaScript was dramatically misunderstood . Yes, it looks like a language of the C-family and, when starting with JavaScript, programers are just writing in C, Java, PHP or other language style. But JavaScript is no subset of any of these languages. You may find JavaScript even a superior language, but you have to know how to do things in JavaScript way. You cannot learn this from the documentation. References and, even more so, the specs are not meant to cover programming patterns, but the language itself. Of course, there is plenty of books and you may find some (e.g. "Secrets of the JavaScript Ninja" by John Resig, "Learning JavaScript Design Patterns" by Addy Osmani ) pretty useful. Besides, you can learn straight from the code, since we are lucky to have tons of substantial JavaScript applications available in open-source (jquery.com, yuilibrary.com/projects/yui3/, backbonejs.org, modernizr.com, raphaeljs.com and so on). In either case you may stumble over programming techniques unknown to you. I've collected here some commonly used practices which may help you.


Functional testing with qUnit

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.

Thanks to Michel Gotta's post I came up with a solution.

Scalable JavaScript Application

Any diligent developer is constantly working on improving his or her code. There are plenty of books telling how to make your code better. However most of them use the language of class-based OOP. Reader must have enough of experience to reflect those classical design patterns on JavaScript. Thus, many and many developers give up on the language before mastering its true power. On the other hand, JavaScript is an incredible impressive language. I wonder if JavaScript was originally designed as a foundation on which you build your own language.

About 2 years ago I had worked out a solution which developed by now into a light-weight library which brings into JavaScript everything I miss in the language as a follower of class-based OOP