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.
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.
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.
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 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.
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?
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.
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.
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.
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.
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.
What happened to Dojo in 2008? This question was asked on StackOverflow. This is my personal take on the matter: on Dojo, jQuery, history, mistakes, marketing, social vs. technical, and communities.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
In case you missed it too: TinyMCE 2.0.1 is out.
I am getting a feeling that everybody is trying to roll out something for Xmas. Hmm. Maybe I should do it too.
Dojo 0.2.1 is out. This is a maintenance release, which doesn’t change API but fixes some pesky bugs. Go and get it.
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.
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.
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).
New TinyMCE 2.0RC4 is out. It fixes numerous bugs, which never bit me. Is it going to be the last RC before actual release? Who know. Grab it while it is hot!
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.
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:
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.
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.
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.
Once again, let’s grab new version of TinyMCE.
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.
In my previous post I complained about annoying flickering. Well, I’ve upgraded to TinyMCE 2.0 RC2 and it doesn’t flicker anymore! Run, don’t walk, and upgrade immediatelly!
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".
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.
Wow, they move fast! Go and grab Tiny MCE 2.0RC2.
TinyMCE 2.0RC1 is out. Take it while it’s hot! I’ve upgraded my admin pages and it looks better than previous one (duh!).
Nevertheless I see annoying flickering in FireFox. But it flickers less now.
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.
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 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.
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.