Tales from the Evil Empire

Bertrand Le Roy's blog


Bertrand Le Roy

BoudinFatal's Gamercard

Tales from the Evil Empire - Blogged

Blogs I read

My other stuff


April 2009 - Posts

Glimmer: visually build jQuery animations and stuff

glim4sIf you’re still intimidated by jQuery or DOM manipulation in general, if you need to quickly build web animations, if you’re more a designer guy, if you think tooling makes sense, or a combination of the above, you should probably check out Glimmer.

In a nutshell, Glimmer is a visual tool that builds HTML animations, menus, tooltips on jQuery. It builds all the code you need (HTML, CSS and JavaScript with jQuery) at the click of a button.

Check it out!

A blog on Microsoft Ajax client templates and data

Politian has a great blog series where he goes into the details of building a data-driven Ajax application using the new 4.0 client templates and data.

Check it out!

CSS isolation: there has got to be a better way

(c) Bertrand Le Roy 2003 CSS can be a tricky thing. I’m trying to do something that I think should be pretty simple. Let’s say a page contains a section (e.g. an admin panel) that must be styled independently from the rest of the page, but consistently and predictably. The DOM and CSS for the main part of the page is undetermined (e.g. because it’s part of a user-defined theme). Of course, you could use iframes, which are about the only isolation mechanism in HTML but we can’t do this here because iframes are quite rigid in shape (they are rectangles), they make scripting the DOM more difficult and they pretty much require an additional round-trip to the server to serve their contents.

The real problem to solve here is that if the main CSS for the page defines very general styles that for example target all elements with a given tag name, and those styles are going to bleed into our specialized region unless we find a way to block that CSS from cascading down. Ideally, you’d have an attribute on the tag, something like inheritcss=”false”, but no such thing exists.

So the only way I’ve found to solve this problem is to write a stylesheet that explicitly resets the defaults for all properties and all elements. Here is an excerpt from the CssIsolation.css file:

.isolate *
    background: white none repeat scroll 0% 0%;
    border: 0px none black;
    border-collapse: separate;
    border-spacing: 0px;
[...] z-index: auto; } .isolate p { display:block; margin-top: 16px; margin-bottom: 16px; } .isolate strong, .isolate b { font-weight: bold; } .isolate h1 { display: block; font-size: xx-large; font-weight: bold; margin-top: 21px; margin-bottom: 21px; }

This is lame for a number of reasons:

  • Defaults might vary from browser to browser (this is particularly true of fonts and sizes).
  • Some styles can’t be reset to defaults, such as default button styles (at least, not without using browser-specific styles that aren’t consistently available):
    Default button styles can't be reproduced.
  • An exhaustive list of tags and style properties is sure to be wrong now or in the future (I did CSS 2, so it’s already outdated by CSS3).

Still, imperfect as it is, this is a solution that works reasonably well and can be improved as problems are found. The equivalent of that inheritcss=”false” attribute, using my isolation stylesheet, is to set class=”isolate” on the parent element of the section of the page you want to isolate. None of the styles defined for the rest of the page (which is defined just as usual, with no difference whatsoever) should bleed then.

Here a snapshot of my test page, where you can see, side-by-side, unstyled HTML and HTML with reset styles:

Comparison of contents, unstyled and with reset applied.

Differences exist but are quite subtle.

The HTML for an isolated section is defined like this:

<div class="isolate" id="isolated1">
    Isolated 1...

If for example the main style sheet defines the style of lists like follows, this style won’t bleed into any element that has the isolate class (on the right on the next screenshot), just because we set the “isolate” class on the parent element.

ul li 
    list-style-type: square;
ol li 
    list-style-type: upper-roman;

Main CSS doesn't bleed into isolated section.

You can then style each of these sections independently by just qualifying each of the style selectors with the ID of the parent element. In other words, just paste “#isolated1” in front of each selector of the local stylesheet, if the id of the parent element is “isolated1”:

#isolated1 p
    color: Green;
    border: solid 1px black;

This style will override the isolation CSS because it is qualified by id, which always wins over styles that are only qualified by class:

Local isolated CSS

I really wish one of you will tell me how stupid I am for not knowing about feature/hack X that is way simpler and gets you to the same place… There has got to be a better way.

The code for the isolation stylesheet, as well as the test pages, can be found here:

Posted: Apr 14 2009, 12:26 AM by Bertrand Le Roy | with 14 comment(s)
Filed under: ,
Quantum computing done right

(c) 2004 Bertrand Le Roy I know as a good microsoftee I should be supportive of what my employer does no matter what it is, and I might get fired for this post, but Eilon’s latest article is wrong on so many levels I have to step up with whatever integrity I have left and fix this mess.

In his post, he exposes the new ShrödingOr<TDead, TAlive> type that will be introduced in .NET 5.0 as part of the System.QuantumEntanglement namespace. Well, let’s face it, the current implementation has nothing quantum about it.

Here’s how I would have written it:

namespace System.QuantumEntanglement {
    public class SchrödingOr<TDead, TAlive> {
        private Complex _howDead;
        private Complex _howAlive;

        public SchrödingOr(Complex howDead, Complex howAlive) {
            _howDead = howDead;
            _howAlive = howAlive;

        public Type Measure() {
            double howAliveSquareModulus =
                _howAlive.Real * _howAlive.Real +
                _howAlive.Imaginary * _howAlive.Imaginary;
            double howDeadSquareModulus =
                _howDead.Real * _howDead.Real +
                _howDead.Imaginary * _howDead.Imaginary;
            double probabilityOfBeingAlive = howAliveSquareModulus /
                (howAliveSquareModulus + howDeadSquareModulus);

            if ((new Random()).NextDouble() < probabilityOfBeingAlive) {
                _howAlive = new Complex(1, 0);
                _howDead = new Complex(0, 0);
                return typeof(TAlive);
            } else {
                _howAlive = new Complex(0, 0);
                _howDead = new Complex(1, 0);
                return typeof(TDead);

This way, the state really is a (complex) linear combination of the dead and alive types, which are the eigenstates of the system. Once you’ve created the state, you can never get it back unless you do a measurement. When you do that, the object collapses its state to one of the eigenstates based on probabilities determined by the actual quantum state of the system.

The first measurement is random but once you’ve measured it, the cat remains alive or dead forever (the entanglement is destroyed by the measure).

Here’s a little console app that creates a cat, puts it in the box and then opens the box:

static void Main(string[] args) {
    // put the cat in the box
    var cat = new SchrödingOr<DeadCat, LiveCat>(
        new Complex(1, 0), new Complex(1, 0));
    // Open the box
    Console.Write(cat.Measure() == typeof(DeadCat) ?
        "Cat is dead." : "Cat is alive");

This, I believe, is a much more realistic and useful implementation of SchrödingOr.

The code: http://weblogs.asp.net/blogs/bleroy/Samples/Quantum.zip

Eilon’s original article: http://weblogs.asp.net/leftslipper/archive/2009/04/01/the-string-or-the-cat-a-new-net-framework-library.aspx

More Posts