Stickers

  • Apr 07 Modular JavaScript with CommonJS Compiler (slides) Follow the link
  • Mar 12 CommonJS Compiler now supports source maps, therefore all the breakpoints and console messages mapped to the original sources Follow the link
  • Mar 07 PixelPerfect Firefox extension could be a brilliant tool to finalize HTML page styles to the degree where they precisely match source PSD. Unfortunately the extension doesn't work properly in all the last browser builds. So I wrote this bookmarklet that provides similar service Follow the link
Design by Contract and JS

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.

Flyweight pattern using Mixins

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.

Design Patterns by PHP and JavaScript examples

After having your project fully tested, deployed and running, it seems the application architecture is pretty good enough. All the requirements met and everybody is happy. But then as it happens, the requirements change and you, all of sudden, find yourself in the time of troubles. It comes out that some modules easier to hack than to modify. Change of other ones brings endless changes in a cascade of dependent modules. Or you change one module and whole the application starts to collapse like a house of cards. And, of course, you find out that you can’t reuse already written modules for the new tasks, because the encapsulation of the desired parts would take too much risk and work. Robert C. Martin was very accurate naming those symptoms of rotting design as Viscosity, Rigidity, Fragility and Immobility

Bringing realtime to your web applications

Few years ago only lazy didn’t say about bringing desktop application experience to the web ones. However in reality, it just meant that user actions didn’t always required page reload, but could change page UI dynamically. As for other application events, as a rule they were not handled dynamically.

Well, now you can find more and more web applications acting really like desktop ones. For example, Facebook and G+ have widgets which update automatically. You can keep the page untouched, but you will see anyway new status updates appear as your friends submitting. The same for notifications. Whenever a new one arrives, the counter changes and the notification list extends.

That seems to me as a trend worth to follow. I’ve been thinking of a solution to vivify widgets on my sites. Now I’m coming up with the following pattern.

Form auto-completion tool on your own

When testing a web-site, nevermind who you are developer or QA-engineer, it happens to you pretty often to fill-in form fields again and again. Boring, stupid work, but how to make sure the form does still work as intended? Some fields added, CAPTCHA was attached, whatever else done –you have to run the test again. Besides, it will be repeated on different browsers. Browser form auto-completion feature helps a bit, but that is not the same as when you have various sets of test-data always ready to apply on a form, isn’t it?

Support Request Tool like Google Feedback

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.

WebSockets vs Server-Sent Events vs Long-polling

Apparently social networking is the banner of the nowadays web. Everybody intends bringing some features into his projects. Some of them require immediate notification. That is getting common, if you open a page with upcoming messages (status feed, notification subsystem, friends-list), you expected them being updated as soon as a new message (status, notification, friend-making action) arrives. As you well know, original web design allowed only one-way client-server communication (one requests, another one responds), though now HTML5 working group doing their best to fix it or rather to patch it. However, the web-projects are still using long-polling trick to emulate server-client communication.

Well, now new web browser versions appear every few months. Besides they update automatically. Thus a huge number of users have the latest browser versions, which support HTML 5 communication APIs. Is that the time to put long-polling away? Let’s find out.


Review services getting consolidated

I anticipate Google to swallow Review Services market using G+. I hate the idea of somebody having total control on everything, but when I buy a product (any product), I see number of variations from different producers. I want to read some reviews, to see some ratings on products and their producers before picking one. That’s natural. Where to get those? On the site of producer/seller? Oh, please! I would rather not trust them entirely. Well, I could try to search on www.consumersearch.com or try www.epinions.com, though I would hardly find many of the products sold in Germany and the reviews by the locals. I’ll tell you what, I’m going to end up extracting reviews on public forums and likely giving up after hours spent in vain. However, I can use Google Products (www.google.com/products) and find everything in the place. I may even make a photo of the product right on the shelf of the store and try googling by the picture.

But in real life it’s not all so nice.

G+ at first glance or Google bringing Web 3.0

Google Plus was world-wide announced and my friend circles started to grow, popping up newly engaged members. Apparently after all those probing attempts Google has managed to present a live social platform. I have never understood Google Orkut aims, though it gave, seems, user profile management for whole the network of Google services. Google Buzz was a promising step, but obviously not thought out good enough. Just a Twitter-like wall by itself is not something worth switching to when you have all the friends on Facebook for instance. Google Wave was a huge concept, maybe revolutionary one. But it is too innovational for the wide audience. I would not be surprised to find it resurrected in a few years. Now we get G+ and here my first impressions.

HTML5 Video on iPhone

Enabling your videos for iPhone Safari doesn’t seem as a big deal. You know it supports HTML5 . Besides, you don’t even need to write event handlers and produce a skin by yourself, but only take a ready JS component. Apparently videojs.com is getting close to be the most popular one. Though, I personally like mediaelementjs.com. It is very simple to use any of them. The only difficulty is to get your videos converted to h.264, Theora Ogg and WebM. When two last ones are meant for desktop browsers Chrome/Opera/Firefox/EI9, the first is for mobile devices. And here we go, using a converter (e.g. E.M. Video Converter) we are getting .mp4 which looks pretty ok on iPad, but iPhone refuses even to try playing.