Hello, reader!

My name is Eugene Lazutkin.

I'm a software developer based in the Dallas-Fort Worth metroplex. Lazutkin.com is my professional blog, which contains short writeups and presentations regarding modern web applications. All articles here are written by myself, unless stated otherwise.

tag: JavaScript

heya-unify: back to JS

As programmers we rarely have a luxury to write a project from scratch. Usually we have to retrofit existing projects with all cool things we need. If a new component, or a library we want to use introduces new concepts that bleed outside its boundary, we have a “culture clash”, when old code is unaware about new concepts have to work with it anyhow. Sometimes the clash is so bad that we have to give up on using shiny new things, or have to significantly rework their code, which requires time and efforts we cannot afford.

heya-unify: incomplete objects

Incomplete objects allow us to concentrate on important properties of JavaScript objects ignoring the rest: we don’t need to specify every single property, and we can deal with cyclical graphs. Incomplete arrays is a complimentary feature to inspect only the first few array items. Both features are very useful for patterns, and heya-unify provides rich facilities to automate creating incomplete objects: they can be marked up explicitly on per-instance basis, recursively with a special utility, and we can specify how to deal with objects by default during unification.

heya-unify: custom unification

Custom unification in heya-unify allows us to deal with our specific objects in JavaScript, create unification helpers, and even custom logical conditions. It is there to bridge unification with our existing projects. Looking at the 1st part and the 2nd part of the series is recommended before diving into details. Custom unification Unification makes comparing simple objects a cinch no matter how complex they are, and we can easily apply it to JSON-like trees as is.

When to unify in JS

5 Jun, 2014 - 10 minutes
Unification for JS introduced heya-unify — a practical mini library to leverage unification in JavaScript. This post explains when it makes sense to use unification, and gives practical examples of how to use it. When to unify? Below is my laundry list for unification. As soon as I see a project, which deals with items on the list, I investigate if it makes sense to use heya-unify. Matching and transforming An obvious sweet spot is when we need to inspect deep objects saving sub-objects for future use, and possibly matching some sub-objects.

Unification for JS

18 May, 2014 - 15 minutes
Unification is a very interesting programming tool. Originated from logical programming (its the foundation of Prolog) and used in functional programming (e.g., Haskell) it helps to compare objects for equality, identify known patterns, and reassemble results differently. Wikipedia gives a somewhat complex definition of unification, but many people see it as an extended equivalence comparison, a pattern matching tool, and some even find parallels with XPath queries, CSS, and even jQuery, all operating on regular objects.

CG: code generation in JavaScript

14 Jul, 2013 - 1 minutes
ClubAjax invited me to speak about technologies behind Heya, specifically about code generative solutions behind heya-pipe. Pipes are built on a firm foundation of functional programming (FP), and it allows us to use a wide range of technologies to optimize their performance including generating code on the fly (code generation AKA CG). As soon as we are talking about CG, the first question to ask is: “How to debug such code?

Slides: optimization of modern web applications

13 Aug, 2012 - 1 minutes
I spoke at ClubAjax about optimization of modern web applications. Usually I speak about theoretical matters, but this time I decided to go practical. This is a huge topic and it was blogged/debated/presented to death, including my Improving performance…. Yet I decided to add to it after realizing that many things have changed in last years, including how we build web applications. I concentrated on technical aspects completely bypassing all other areas (e.

More on 0ms timeouts

28 Jul, 2012 - 4 minutes
Once I wrote a blog post On JavaScript, EDP, and 0ms timeouts, which discussed a "smart" trend to pepper code with timeouts of … 0ms: setTimeout(f, 0). Authors of those "programming pearls" genuinely believed that this code reschedules a function call to the next available time slice after the code that set the timer was executed without introduction of a delay (after all it is 0ms!). In reality a typical delay was 10-20ms.

OOP in JS slides

17 Jul, 2012 - 1 minutes
Finally: my open source JavaScript project DCL is built on ideas described in this article. Available for node.js and modern browsers, it implements OOP with mixins and AOP at "class" and object level. Read documentation and background articles on www.dcljs.org, clone its code on github.com/uhop/dcl, and follow @dcl_js. Once again I was invited in ClubAjax to speak about JavaScript. This time I did a presentation based in part on my previous blog post OOP and JS.

OOP and JS

18 Jan, 2012 - 24 minutes
Finally: my open source JavaScript project DCL is built on ideas described in this article. Available for node.js and modern browsers, it implements OOP with mixins and AOP at "class" and object level. Read documentation and background articles on www.dcljs.org, clone its code on github.com/uhop/dcl, and follow @dcl_js. Almost any Java programmer, who starts to study JS groking its OOP facilities and a dynamic nature of JS, thinks that they can be greatly improved and starts its own OOP library/helpers.

Using Dojo Rich Editor with Django's Admin

Many years ago I decided to replace plain text areas in Django’s Admin with rich text editor, so I can edit HTML on my blog using WYSIWYG. Six (yes, 6) years ago I looked around and selected TinyMCE. Over time it turned out that I was forced to upgrade TinyMCE and the link script I had because new browsers continue breaking my rich editor editing. Finally it stopped working again in all modern browsers, and I decided that enough is enough.

Exciting JavaScript Part II

4 Mar, 2010 - 1 minutes
This month I continued my presentation at ClubAJAX. Last time I did a survey of what is available in JavaScript, and concentrated on object-oriented (OOP) and aspect-oriented (AOP) techniques. This time I continued the survey, and talked about functional programming (FP), and domain-specific languages (DSL). And as promised I touched the code generation facilities too. I suggest to read the first part before. Enjoy! Direct link: Exciting JavaScript - Part II.

RAD CRUD

10 Feb, 2010 - 1 minutes
Today at dojo.connect I did a presentation “RAD CRUD”: rapid development of form-based applications. It continues my other presentation “CRUD with Dojo”, but it is more in depth, targets Dojo developers, and contains some advanced material. Direct link: RAD CRUD. View more presentations from Eugene Lazutkin.

Exciting JavaScript Part I

5 Feb, 2010 - 1 minutes
I was asked to talk about advanced JavaScript techniques at the last monthly meeting of ClubAJAX — monthly get-together of Dallas-area JavaScript programmers. Instead I ended up talking about leveraging cool JavaScript features to implement well-known programming techniques and paradigms: OOP, AOP, FP, and so on. Unfortunately I couldn’t finish in time, so I did a tour of some language features, and talked about OOP and AOP. The rest (I plan to do FP, code generation, and DSL) will be covered later.

Dojo Charting demo: tribute to Highcharts

8 Dec, 2009 - 1 minutes
Wolfram Kriesing asked: Somehow I have the feeling that you can bend dojox’s charting module to look and feel like http://highcharts.com/ — will be for free. Yes, it is relatively simple. To prove a point I wrote a quick-and-dirty demo available here: Tribute to Highcharts. Obviously not everything matches 100%. Go and judge for yourself. Update: related post on dojo-dev mailing list, which explains some details of the demo.

CRUD with Dojo

2 Dec, 2009 - 1 minutes
My presentation at ClubAJAX got off to a rocky start: I was let in the building 40 minutes after I was supposed to start the presentation. Everybody waited patiently. Thank you guys! As promised I publish slides along with relevant links (I had to skip most of planned demos). Here is my presentation on SlideShare: CRUD with Dojo. The original presentation can be seen on Google Docs: CRUD with Dojo.

JavaScript explained

1 Mar, 2009 - 5 minutes
Explaining some dark corners of JavaScript, browsers, or Dojo for the 100th time I realized that I already did it on numerous occasions, and some of my answers are published on public web sites. So I decided to round up the most general ones I posted on StackOverflow and publish links to them here for a future reference. JavaScript This section is for language-specific topics. They can be equally applied in any environment.

Using recursion combinators in JavaScript

In the previous post we explored “array extras” and how they can help us to write concise yet performant and clean code. In this post we take a look at generalizing recursive algorithms with recursion combinators — high-level functions that encapsulate all boilerplate code needed to set up the recursion. These functions were added to dojox.lang.functional and will be officially released with Dojo 1.2. In general the recursion is a form of iterative problem solving in the same category as loops.

AOP aspect of JavaScript with Dojo

Finally: my open source JavaScript project DCL is built on ideas described in this article. Available for node.js and modern browsers, it implements OOP with mixins and AOP at "class" and object level. Read documentation and background articles on www.dcljs.org, clone its code on github.com/uhop/dcl, and follow @dcl_js. If we look at the history of computer programming languages, we can see that practically all new programming methodologies were about one thing: taming complexity.

Google App Engine: the first look

8 Apr, 2008 - 5 minutes
Yesterday Google announced its new offering: Google App Engine. These are my random notes I did yesterday when I studied the new service. Google didn’t go the same way as Amazon with its AWS. The former offers a form of shared hosting (think “distributed WebFaction"), while the latter offers a virtualized environment (think “distributed SliceHost"). So basically we are talking about more high-level approach to web applications, which is easy even for novices.

Dojo 1.1 is out

30 Mar, 2008 - 2 minutes
As you all know by now Dojo 1.1 was released in the wild. You can get a lot of useful links and info from James Burke’s post on Dojo 1.1, but let me tell you why you should be excited: Dojo 1.1 is the first official release, which contains dojox.lang.functional. It was available in the trunk for awhile, but now you can use it without deploying Dojo courtesy of AOL CDN.

On JavaScript, EDP, and 0ms timeouts

23 Mar, 2008 - 11 minutes
What makes JavaScript so different from other languages? Is it its dynamic nature? Its prototype-based funky inheritance? No. The most unusual thing for newcomers is how JavaScript programs handle the workflow. The program looks like a bowl of spaghetti. There is no start or end of the program. What we have here is a bunch of functions, which are called in response to some external events. In most cases we have no way to predict the order of these events.

Dojo docs: gfx and dnd

15 Mar, 2008 - 1 minutes
I just finished the first cut of the dojo.dnd 1.1 technical documentation. Let me use this post to remind you about the dojox.gfx 1.1 documentation. I hope I satisfied the curiosity of many developers, but the ultimate proof will be the number of simple questions on Dojo Forum. Let’s hope it will go down. And don’t forget that the Dojo Book has a DnD chapter too. Both documents are hosted on Google Docs, and are “live” documents — as soon as I update the document it is updated for you too.

Functional fun in JavaScript with Dojo

Everybody knows that JavaScript is a multi-paradigm language, and it can be used to program functionally. Practically all functional idioms can be used directly: higher-order functions, recursion, closures, and so on. The recent resurgence of Functional Programming (FP) brings functional methodologies in the mainstream. FP fundamentals gave us a lot of powerful idioms: iterative functions, which can replace loops, list processing in general, function manipulations, and many other things, which helps us to keep our code small yet concise, more powerful, and more fun.

Improving performance of Dojo-based web applications

Introduction Web 2.0 brought on us an onslaught of new server-side web frameworks, and made it OK to put some code on the client side as well. Yes, I am talking about Ajax. While elements of Ajax were available (and used) for a long time now, 2005 was the crucial year for this relatively old technology fueled by proliferation of modern browsers with proper support of JavaScript and HTML DOM, which, in turn, gave a rise to numerous Ajax toolkits.

Setting up tools 2

This is the 2nd part of Setting up tools on Windows — notes mostly for myself. (No, I don’t run Django with MSSQL under IronPython. Yet.) In this installment I add more stuff to Eclipse, and set up my apps under FastCGI on Linux-based shared host (I use DreamHost). Eclipse This section was updated on 9/30/2006. I already set it up with PyDev and Subclipse. Now I want to add HTML/CSS editing.

Google Summer of Code 2006

2 May, 2006 - 2 minutes
Yes, another Google SoC is upon us. I signed up as a mentor with Dojo and Django. Both projects are on the leading edge of new wave of web-based applications doing extremely cool stuff. I anticipate that some smart students will bridge both projects, but individual projects are fine too. What is Google SoC? Read the FAQ. Who can apply? Any student anywhere in the world can apply. You don’t have to be Comp.

OpenWrt GUI: new release

15 Feb, 2006 - 1 minutes
It looks like this is the last update before upcoming beta release. Besides some minor bug fixes, it sports improved firewall configuration widget: Compact representation of port ranges. Example: tcp 9000-9100 ⇒ mycomp Port redirection. Example: tcp 8080 ⇒ mycomp:80 While the former improves on existing functionality, the latter implements totally new feature. It allows mapping external ports to different ports of internal computers.

Packaging web apps

2 Feb, 2006 - 4 minutes
Have you been frustrated lately by speed of web applications? Typically they have a lot of art, and structured into a nice set of JavaScript and CSS files. They look beautiful, aren’t they? But do you have the patience to wait them load? And proceed from step to step? Of course, it is possible to prepare a web application to high-demand life: merge all stylesheets, and JavaScript files, and compress the result, structure your GUI in such a way that it is possible to combine all small images in one, and so on.

Django Dojo

28 Jan, 2006 - 2 minutes
Django-Dojo alliance was finally announced to the world by our very own Jacob Kaplan-Moss: Starting with version 0.92 (which should be out in a few weeks, Murphy willing), Django is going to bundle Dojo with the toolkit. Specifically as part of Django’s admin interface (but available to user apps as well). Read all about it in Jacob’s post. I am overjoyed to see such cool high quality open source projects are working together.

OpenWrt QoS

27 Jan, 2006 - 1 minutes
It looks like nbd was able to find the problem, which plagued many people (including me) with QoS. You can find details in this thread on OpenWrt forum. Instructions on how to install QoS package can be found in this FAQ entry. Give it a whirl and don’t forget to thank Felix Fietkau (nbd). QoS was the biggest feature on my "wanted" list. It means now I can produce an OpenWrt GUI (webui) module to deal with it.

Clients: thin vs. thick

15 Jan, 2006 - 5 minutes
Brad Neuberg wrote a good article, which compares two different approaches to AJAX: thick client (e.g., Dojo style) and thin client (e.g., Prototype style). While it does a good job contrasting two approaches, I want to underscore that the underlying problem is a clash of two cultures between "local application" developers, and "web site" developers. There is no doubt that local applications create the most satisfying end-user experience. Their typical weakness is in restriction of underlying data to local installation, which makes any collaboration impossible.

Live Filtering

Update on 11/25/2007: today this article presents mostly historical interest. Since Dojo 0.2 a lot of versions were published and many things were changed. At the time of this writing Dojo is at ripe 1.0. I had to disable all Ajax action in examples because I don’t use Dojo 0.2 anymore. What is Filtering? It is a selection of items using some criteria (filter). In this tutorial I am going to filter documents of my blog (made with Django, of course) matching titles against user-specified substring.

DIY and NIH syndromes

16 Dec, 2005 - 3 minutes
Many programmers have DIY attitude. It is understandable: they want to do new exciting stuff themselves. In some cases it is perfectly reasonable: exotic functionality, special requirements, performance enhancements, and so on. Sometimes incorporating 3rd-party library makes overall API inconsistent, which is bad especially for programming tools, or big projects. There is a fine line between DIY and NIH, when DIY part is used without rational explanations. Of course, in some cases NIH is reasonable too, e.

Django Ajax Redux

10 Dec, 2005 - 9 minutes
Three weeks ago we had a discussion about Ajax support in Django, which resulted in "Ajax and Django" wiki page. A short recap: it lists a vague goal, some general considerations, and possible strategies; it scratches the surface of existing implementations (mostly RoR), existing third-party toolkits (Mochikit/Dojo), and related RPC-style and REST-style services. No code was produced, no consensus was reached, but now it is a part of Django’s Version One roadmap.

OpenWrt GUI: alpha released!

27 Nov, 2005 - 1 minutes
Finally I released WebUI 0.1 (Homunculus) alpha — AJAX-based web interface for OpenWrt made with Dojo! Highlights of this release: 5 more applets including firewall configurator and more network settings. Now proceed to install the package and to read release notes. The package is here: webui-0.1-alpha.ipk. You can install it using following command in OpenWrt shell: ipkg install http://lazutkin.com/download/webui-0.1-alpha.ipk Release notes: WebUI can be installed side-by side with webif (comes standard with OpenWrt White Russian RC4).

OpenWrt GUI: hosts editor

30 Oct, 2005 - 1 minutes
I didn’t have a lot of time this weekend. So I decided to implement the simplest part of upcoming OpenWrt GUI (webui) — hosts editor. It is a perfect candidate to write something in 15 minutes or less — it has almost no "business" logic in it: read/edit/verify/write cycle. The hardest part was to learn how to upload dynamically generated files without writing them to disk first. It turned out to be very simple.

OpenWrt GUI: preview is released

26 Oct, 2005 - 2 minutes
Update: this document is officially obsolete — alpha is released! Finally I released a preview: /webui-0.1-pre-alpha.ipk! I included two information applets and a simple network configuration applet. I think it would be enough for a proof of concept. I borrowed heavily from nbd’s webif. So if it works for you, it is due to his OpenWrt expertise. If it doesn’t, it is my fault. Both webif and webui can be installed side by side:

OpenWrt GUI: preview is ready, packaging

24 Oct, 2005 - 1 minutes
Finally I found time to finish it up. It is pre-alpha quality now, but shows the direction. The only problem is a packaging. I didn’t mean OpenWrt’s IPKG. I am talking about creating a custom build of Dojo to reduce the foot print. Dojo has a special provision for that but so far I was not able to do it getting some strange errors. I hope I’ll get some help from developers.

OpenWrt GUI: good, bad news

6 Oct, 2005 - 1 minutes
Today I have good news and bad news. The good news is tonight I was able to work on AJAX OpenWrt GUI a little bit more. It is coming together. I coded my first applet. It shows current stats, nothing fancy. The bad news is I bricked my router apparently by running nvram show repeatedly. I suspect that nvram is corrupted beyond salvation. I have to reset it somehow. I tried simple recipies listed in OpenWrt Wiki but no luck so far.

OpenWrt GUI: development

30 Sep, 2005 - 1 minutes
I was able to spend several hours this week to work on upcoming OpenWrt GUI. I use Dojo as a foundation. At this point I coded a skeleton, which works as a proof of concept. As soon as I finish putting in AJAX guts, I’ll switch to meaty functionality. Add some nice skin to it and we have our homunculus up and running. Huh? AJAX? No, it’s not Ajax the detergent.

New TinyMCE config for Django

25 Sep, 2005 - 1 minutes
For a long time I wanted to have two TinyMCE toolbars for Django Admin: One-line toolbar with the most essential tools, which gives a lot of space for inline editing of text. Full-featured toolbar with all tools for full-screen mode. It finally happened. Spocke (the main developer of TinyMCE) helped me to figure out how to do it. I updated my article in Django Wiki with new config file, and removed my notes about space problem (new config file solves it) and flickering (new TinyMCE 2.

OpenWrt GUI

23 Sep, 2005 - 1 minutes
Finally I bit the bullet and decided to implement OpenWrt web-based user interface using Felix Fietkau’s code. Well, MIPS processors used by OpenWrt units are not race horses and GUI is slow to my taste. Yes, I know that stock firmware is not faster. "Slow" is absolute category for me. How do we combat latencies and slow network speed? Exactly. We can apply the same for OpenWrt, where "slow network speed" is replaced with "slow processor on local network".

Code: my categories

After some requests I decided to publish my code for categories. It’s very simple. It was inspired by following articles: A "category" Data Model (note: this article uses old-style model format, it doesn’t work anymore) and Relating an object to itself, many-to-one. from django.core import meta class Category(meta.Model): """ Category defines following fields: name - simple name of category, e.g., 'C++' full_name - full name of category, which includes names of all parents, e.

Opera and Dojo

5 Sep, 2005 - 1 minutes
I decided to try how well Opera works with my site. It mostly works. You can go and see stuff but all Dojo-related code doesn’t work. Interesting that Google Maps works properly. When I switched to admin mode to edit this article, it turned out that TinyMCE doesn’t work either. But good news is Dojo and TinyMCE failed gracefully.

Dojo: 1st impression

3 Sep, 2005 - 2 minutes
The best thing about Dojo 0.1: it’s quite easy to create portable widgets. Such widgets work similar to Microsoft IE’s behaviors but they are even more self-contained. Dojo widgets can work with fragments of HTML and CSS, which will be inserted during the object creation. The event system is very elaborate. Of course Dojo is more than a simple widget factory. For example I didn’t try the I/O facility yet.

New Design 0.1 is here!

New design is here. Well, some elements of it. I had bigger ideas, but CSS didn’t work reliably, and JavaScript option was in debugging mode. So I decided to update this site now and add other planned stuff later. One reason I postponed JavaScript thingy is I want to try Dojo. It looks like a good foundation for widgets. I am going to create a couple of them at least. If it works okay, I’ll be using it in other projects as well.

Using TinyMCE with Django's Admin

26 Aug, 2005 - 2 minutes
Update (3/13/2011): this article is obsolete now and preserved here mostly for its historic value. Nowadays I use Dojo’s dijit.Editor as a WYSIWYG HTML editor — it is more functional and much simpler to setup and extend. Read all gory details in Using Dojo Rich Editor with Django’s Admin. I decided to add a WYSIWYG editor to my admin portion of the site. Apparently you can find some nice open source WYSIWYG editors nowadays.