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?

Mastering Responsive Web Design with HTML5

As the variety of screen sizes and devices keeps expanding, Responsive Web Design (RWD) has become a baseline expectation rather than a nice-to-have. When the first HTML and CSS specs were written, RWD was not a concern. Since then, a lot of work has gone into providing native ways to achieve it.

This article presents hands-on examples of common RWD tasks implemented with W3C modules: CSS Flexible Box, CSS Grid Layout, CSS Regions, CSS Multi-column Layout. It also covers position sticky, the srcset attribute, and WebP fallbacks.

Seamless Development: Mastering Live Reload

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.

Mastering HTML5 Forms: Validation, Inputs, and Beyond

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.

Google Analytics in Your App: Unlock Insights Without Leaving Your Dashboard

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.

Harmony with TypeScript

Not so long ago Microsoft announced a new language, targeting on front-end developers. Everybodys 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, whats 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 Ive 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 its 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 wasnt 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 didnt 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.

Optimizing Mobile Navigation: A Smooth UX for Small Screens

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.