Music of Code

Never ever reinstall a Linux box

2009-11-15T19:01:00.005+03:00

Recently I had a weird problem. My Firefox was producing a segmentation fault on random pages, svn dropped messages like

svn: /usr/lib/liblber-2.4.so.2: no version information available (required by /usr/lib/libldap_r-2.4.so.2)
svn: relocation error: /usr/lib/libldap_r-2.4.so.2: symbol ber_sockbuf_io_tcp, version OPENLDAP_2.4_2 not defined in file liblber-2.4.so.2 with link time reference

and refused to work. When I tried to reinstall Firefox, Synaptic urged me to run "sudo dpkg --configure -a", which in turn produced some totally cryptic errors. Reinstallation attempt of libldap ended in an epic fail bringing my whole system down.

I was going to reinstall the Ubuntu 9.04, but decided to call Dmitry Stolyarov of TrueOffice fame. At first, he asked me if I had tried reinstalling libldap.

— Sure. — I replied. — I did that through Synaptic, but it froze my system.
— Synaptic, you say... Run "sudo apt-get install libldap-2.4-2 --reinstall"
— But, hey, I've already done it!
— Give it another try.

Damn! This time it worked. From now on, I won't trust GUI tools when things don't work the way they should.

Display a symfony form without labels

2009-06-12T14:47:00.002+04:00

Paste this in configure():

$format = $this->widgetSchema->getFormFormatter()->getRowFormat();
$format = str_replace('%label%', '', $format);
$this->widgetSchema->getFormFormatter()->setRowFormat($format);

Change color of all links in a page on click without JS

2009-06-07T16:12:00.004+04:00

This should've been an April Fools's post :)

To accomplish the above, place this in your css:

a:visited {
  color: #777777;
}

and change all hrefs to "#777777". Then load the page, click on a link and - Whoa!

Get is_secure of current action

2009-04-25T12:59:00.001+04:00

Ever wondered if a currently running action is secure? Try

$sf_context->getActionStack()->getLastEntry()->getActionInstance()->isSecure()

Calling submit method doesn't trigger onsubmit event

2009-04-21T21:53:00.004+04:00

First, this is the proper behavior, as David Flanagan writes in his book.

Second, how to overcome this?

Suppose you have TinyMCE control embedded in a form. It sets his callback on a form's onsubmit to clean himself up and write all the stuff back to parent textarea. If you have a link that triggers submit(), just create a hidden <input type="submit"> and call click() on it.

Click on submit button does trigger the onsubmit event of a form, giving TinyMCE a chance to properly save his contents.

Dev controllers in the wild

2009-03-03T19:10:00.001+03:00

Funny how many people forget to hide their dev controllers after deployment.

Handy Eclipse shortcut

2009-03-02T23:17:00.002+03:00

There is a hotkey in Eclipse which behavior is close to Alt+Tab: press Alt+[left arrow]/[right arrow] to jump between your opened editors.

Proper Propel behavior registration

2009-02-26T11:56:00.004+03:00

Suppose you add a propel behavior using this code:

sfPropelBehavior::add('Article', array(
 'positioned'
));

Now, where to put it? The cookbook suggests it should be put "in lib/model/Article.php". But what if your behavior includes hooks for peer classes, and in a certain action you call peer methods before using model classes (which is rather common)? In this case you might end up without any behavior attached before the first call of any peer method.

This happens because of symfony autoloading mechanism:

Peer class method is called
It is not found, so autoloading steps in
Peer class is loaded
Peer class method is executed
Model class is loaded
Propel behavior is added
Result set is hyrdated
...

You see: because model class is loaded after the peer class' method executes, there is no behavior attached to peer class at the time of method execution.

Registering behaviors in projectConfiguration doesn't work.

The only solution I found is to register them in plugin's config.php.

Propel Behaviors: registering hooks for doSelectRS

2009-02-26T11:32:00.005+03:00

If you read the chapter of symfony cookbook which talks about Propel behaviors, and tried to register a hook for doSelectRS, you'd find out it doesn't work.

In fact, doSelectRS was removed as of symfony 1.2. doSelectStmt took its place, so if you want to add a hook to selecting records, you should write something like this:

sfPropelBehavior::registerHooks('positioned', array(
 'Peer:doSelectStmt:doSelectStmt' => array('wgPropelPositionedBehavior', 'addAscendingOrderByPosition'),
));

How to get all action variables

2009-02-25T21:28:00.007+03:00

For my programming work, I use symfony framework. It has a funny system of passing variables from actions to templates: you just set the variable as a property of your action object and it automatically becomes available in template that is used to render results. So, there is a bunch of variables you can use, but no way of getting the whole array of them. This line will do the trick:

$vars = $sf_context->getActionStack()->getLastEntry()->getActionInstance()->getVarHolder()->getAll();

Mouse wheel handling with Prototype

2009-02-01T20:18:00.002+03:00

There is a bug wandering the web. If you google for "prototype mouse wheel", you'll find some snippets of code. They are rather good, except for their age. Those are '06-'07 oldies, and we have '09 around. Since the time that code was written, there has been a release of Firefox 3, in which they fixed one tiny wee peculiarity: the value of event detail property, which holds the "amount" of scroll. Before the new version of FF it was +-3 for single wheel turn, which is reflected in the old code as the division of detail by 3, which gives "normalized" wheel move data. FF3 guys thought it was a shame to have 3 as value of detail property while in fact it represents only one wheel turn. So they adjusted it to be nice +-1. The problem is, old code returns zero now, because 1/3 equals 0. I will post my fix for this solution, although it's easy as heck to port it to other one.

delta = !!event.detail*(event.detail>0? 1 : -1);

Now this behaves good both in FF2 and FF3.

semicolon keyCode

2009-01-19T18:58:00.003+03:00

When you press semicolon on Firefox and poke in the event object for its key code, the result is 59. The funny thing is, other browsers give you 186. So, if you want to execute some action when user presses semicolon, you have to check for both values.

if (event.keyCode == 186 || event.keyCode == 59) {
   // some stuff
}

Developers often choose to use semicolon in conjunction with CTRL or ALT keys to issue commands to application in a normal "desktop way". For example, CTRL+; activates other keyboard shortcuts in FogBugz. If you are a clean code maniac (as I am), the alternative for semicolon is ' (an apostrophe), which has a nice key code of 222.

Prototype with TinyMCE: adventures in iframe space

2009-01-14T13:23:00.015+03:00

If you use TinyMCE on a fairly large site with a narrow target auditence, there always comes a day when you have to sit down and develop some custom plugins for the rich text editor. For example, if your site is all about Linux and Open Source (like nixp.ru), your users would want to insert code snippets in their posts. This requires some special behavior, which is not provided by default. You have to code it yourself as a custom plugin.

Plugin creation is very closely related to DOM manipulation. TinyMCE has its own DOM API, but it is not nearly as comprehensive as the one provided by Prototype. Being used to walk the DOM with convenient methods like up and down, I hated TinyMCE for the lack of those.

As it turned out, you can't use Prototype methods while developing plugins for TinyMCE. Prototype correctly detects that Firefox 3 has implemented ElementExtensions and SpecificElementExtensions: that means Element.extend, used internally by dollar function, just returns the element, passing the stage of augmenting it with handy methods. The magic happens when designMode of document is set to 'On': Firefox doesn't apply these extensions to elements of such document. This results in awful behavior: you can't use Prototype methods on elements because Element.extend won't copy it to element thinking they are present (hey, Firefox already implemented them!), but the browser returns the elements untouched, just old plain HTMLElements.

My solution to this is a slightly different implementation of dollar function:

$t = (function() {

  var Methods = { }, ByTag = Element.Methods.ByTag;
  Object.extend(Methods, Element.Methods);
  Object.extend(Methods, Element.Methods.Simulated);

  var extend = function(element, force) {
    if (!element || (element._extendedByPrototype && !force) ||
        element.nodeType != 1 || element == window) return element;

    var methods = Object.clone(Methods),
      tagName = element.tagName, property, value;

    if (ByTag[tagName]) Object.extend(methods, ByTag[tagName]);

    for (property in methods) {
      value = methods[property];
      if (Object.isFunction(value) && !(property in element))
        element[property] = value.methodize();
    }

    element._extendedByPrototype = Prototype.emptyFunction;
    return element;
  }
  
  return extend;
})();

I gave it a different name because there is no need to override the dollar function: since the parent document of an iframe is not in designMode, it does the job properly most of the time. But in plugin development, usage of $t ensures the elements are extended with all the Prototype sugar. Sometimes (particularly, when you insert an extended element into another) the element loses its extended functions. I don't know why it happens. The workaround is the second parameter to $t, called force. This will force reaugmentation of an element disregarding the _extendedByPrototype property.

Verbose boolean parameters

2009-01-13T20:23:00.004+03:00

Suppose we program in Javascript. There is a function updatePost that takes a boolean parameter indicating whether it should highlight the updated post or not.

updatePost: function(highlight) {
  // ...code to update post...
  if (highlight) {
      post.highlight()
  }
}

One would definitely call it like this:

this.updatePost(true);

The problem is, that's not very explanatory. In other words, you can't tell straight from the line what this true does. I propose a solution that takes advantage of loose typing: just pass a string containing a parameter meaning as an argument.

this.updatePost('and highlight');

Now, this is definitily more verbose.

Form Ajax upload with Opera

2009-01-05T15:04:00.003+03:00

It looks like Opera hates having its forms disabled. Suppose you have a form with onSubmit handler attached to it using HTML.

<form action="..." onSubmit="return myHandler(this);">

and myHandler looks like that:

/*
form is the first argument to handler
the very form being submitted
*/
form.disable();
new Ajax.Request(form.action,{
 method: 'post',
 parameters: {
  username: $('loginFormUsername').value,
  password: $('loginFormPassword').value
 },
 onSuccess: this.loginSuccess.bind(this)
});
return false;

The code works fine in FF, Chrome ans Safari, but breaks in Opera. It seems that disabling the form in onSubmit handler somehow triggers its normal submission, although handler returns false. The only solution I found is to conditionalize the disabling of form:

if (!Prototype.Browser.Opera) {
 form.disable();
}

How do you manage such a problem?

Revert to default styles

2009-01-05T14:57:00.003+03:00

For example, you've changed the default colors of a link using Prototype's setStyle.

$('answer-link').setStyle({
 color: '#000000',
 borderBottomColor: '#000000'
});

Then, after some action, you want to change the styles back to the original ones. You have an option of specifying them again:

$('answer-link').setStyle({
 color: '#B2B2B2',
 borderBottomColor: '#B2B2B2'
});

...but that means you'll have to change your JS if designer changes his CSS. This kind of dependency is bad and, in fact, could be avoided

$('answer-link').setStyle({
 color: '',
 borderBottomColor: ''
});

...by using empty strings as style property values.

How to preload tinyMCE theme and language scripts

2009-01-03T17:41:00.002+03:00

These three commands seem to do the job for me:

tinymce.ScriptLoader.add(tinymce.baseURL+'/langs/ru.js');
tinymce.ThemeManager.load('advanced', '/js/tiny_mce/themes/advanced/editor_template.js');
tinymce.ScriptLoader.loadQueue();

Of course, they should be called after main tinymce script is loaded.

More on masterhost

2008-12-18T14:33:00.003+03:00

I use symfony framework for my web development. I'm very glad that this one doesn't enforce you to use the directory structure it creates by default. So, if your shared host public directory is not "web" (symfony default), but something like "www" or "public_html", just call setWebDir method from your project confirugation's setup method, just like this:

class ProjectConfiguration extends sfProjectConfiguration
{
  public function setup()
  {
    $this->setWebDir(sfConfig::get('sf_root_dir').'/www');
    // Change "www" to your public directory name
  }
}

Masterhost and 411 Content Length required

2008-12-18T13:37:00.004+03:00

Hey, guys, I just discovered a glitch on Masterhost servers. If you get 411 from their nginx, try looking up your error_log. That might be not the problem of your client not setting Content-Length while sending chunked content.

If your error_log says something like "Failed to create file upload directory "/var/tmp"", look for tempnam() function in your code. This thingie is trying to create temporary file in masterhost's server own /tmp, not your virtual host's one. The only solution is to avoid using tempnam().

It’s all about interface, baby

2008-07-23T00:28:00.023+04:00

What’s a program, really?

A bunch of programming language statements? - Certainly not.

Some screens for user to type in their data and have it processed? - That’s warmer.

A paper prospect with a couple of sentences blaming current government and a long passage on how it all could be done better? - Get out of here, you nose-thrusting politician!

Ok, so what is it, now? – A crutch. Well, just like every technical object you have on the desk. Some time ago when word processing and e-mail still wasn’t invented, people needed to clip papers. And they did it pretty nicely, wasting on it about five minutes. You see, in 1800, five minutes were a blah. Five mins here, five mins there, people in 1800 had plenty of time. Not that they had more than 24 hours in a day, it has something to do with the feeling of time flow. Now, as year marks on calendar came closer to 1860s, time shrank. The first five mins you help your boss write a note, the second five mins you speak to somebody that desperately needs attention, and you have no time to do paper-clipping! So well, smart people invented a stapler (which, of course, wasn’t called so in 1860s and was larger and didn’t have any preinstalled RAM). The stapler is a “crutch”, a prosthetic device that helps people who have a kind of “time disability” to do a simple thing like paper-clipping quickly.

Nowadays, all businesses have their websites. Certainly, a website could be just a number of HTML pages hyperlinked together, and having it this way has some advantages like decreased time for page generation (there’s simply no page generation), no need for complicated power-consuming webserver software, etc. But businesses wanted their customers to buy things on websites, which led to invention of cart concept, which meant to serve different pages to different customers, and good businessmen just couldn’t place 5000 people making HTML pages on the fly, so good programmers invented web programming languages and wrote content management software implementing the aforementioned cart concept and much more. Now, top-management bosses don’t know HTML and couldn’t care less about learning it. But they like fancy markup like bold and italics and underline (those without aesthetic sense even use blink | disable it now). Smart creators of CMS thingies are aware of this situation and include web-based rich text editors (again, a crutch!) in their products. After playing around with brand-new yesterday-bought system, businessmen realize that they really have neither time nor skills for writing and they need a content manager. Imagine you are a guru in HTML doing on-demand content management for a couple of firms. You hate those RTE because they generate w3c-incompatible HTML and mess the things up, so you turn them off. But nobody told you about a secretary whose knowledge of HTML consists of a statement that it’s a "web programming language". While you perform relatively complex operations like building tables, this poor girl posts company news on the first page, and those news include the markup the boss likes, and she can’t make it without an RTE disabled by you. From a programmer’s point of view, this situation has an obvious solution: let user have a checkbox in his settings that says “Enable rich text editor”, which defaults to be set to true and could be unchecked by arrogant HTML-wise content managers. This tiny feature requires creating a checkbox in user settings HTML code, adding a place for this setting in some kind of user settings storage you use, and wrapping code for transforming a textarea to RTE with an If checking whether user prefers it to be RTE or not.
In five minutes, your program, your CMS, a crutch created by your team for businessmen and secretaries and even content managers is easier to use by more than one man at a time.
Not so fast! - you say. With all those tiny features we’ll soon have a user settings page which is four screens long and has checkboxes organized in three columns, it just won’t be easier to use. Now, it’s your choice how to design your software. The way of checkboxes is not that bad, dive into Word (Writer) options and you’ll see it’s populated by little squares with ticks. And don’t think you can get away having only 20% checkboxes the Word has. So, creating software is all about creating an interface which acts like a crutch that is easy to use and fits people needs.